/* ==========================================================================
   0. VARIABLES & RESET (La base propre)
   ========================================================================== */
:root {
    /* --- Couleurs --- */
    --c-bg: #FFFFFF;
    --c-text: #444444;
    --c-text-dark: #222222;
    --c-accent: #000000;
    --c-border: #eeeeee;
    --c-bg-alt: #f9f9f9;
    
    /* --- Typographie --- */
    --font-serif: 'Lora', serif;
    --font-sans: 'Montserrat', sans-serif;
    
    /* --- Dimensions --- */
    --sidebar-width: 250px;
    --gap-std: 25px;
}

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

body {
    margin: 0;
    width: 100%;
    background: var(--c-bg);
    color: var(--c-text);
    font-family: var(--font-serif);
    line-height: 1.8;
    overflow-x: hidden;
}

/* Images fluides par défaut : évite les débordements */
img {
    max-width: 100%;
    height: auto;
    display: block;
}


/* ==========================================================================
   1. TYPOGRAPHIE
   ========================================================================== */

/* Titres et éléments d'interface (Menu, Boutons...) -> Montserrat Majuscule */
h1, h2, h3, h4, label, .bouton-submit, 
.main-nav, .side, .main-head h1, #sandwich {
    font-family: var(--font-sans);
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Gras dans le texte -> Lora (hérité), pas de majuscule */
b, strong {
    font-family: inherit; /* Garde la police du paragraphe (Lora) */
    text-transform: none; /* Pas de majuscules forcées */
    font-weight: 700;     /* Bien gras */
    letter-spacing: 0;    /* Espacement normal */
}

a { color: inherit; text-decoration: none; }


/* ==========================================================================
   AJOUT : STYLES DES LIENS TEXTUELS (Discret et élégant)
   ========================================================================== */

/* On cible les liens dans les paragraphes, les listes et les conteneurs de texte.
   On évite ainsi de souligner les images qui sont aussi des liens. */
.content p a,
.content li a,
.text-container a,
.bloc-introduction div a,
.cartel-float a {
    border-bottom: 1px solid #ccc; /* Une ligne grise fine et discrète */
    transition: border-color 0.3s, color 0.3s;
    padding-bottom: 1px; /* Un tout petit espace entre le texte et la ligne */
}

/* Au survol : le lien devient plus sombre et la ligne aussi */
.content p a:hover,
.content li a:hover,
.text-container a:hover,
.bloc-introduction div a:hover,
.cartel-float a:hover {
    color: var(--c-accent); /* Devient noir (ou ta couleur d'accent) */
    border-bottom-color: var(--c-accent); /* La ligne devient noire */
}

/* Exception : On enlève le soulignement si le lien contient une image 
   (Sécurité pour éviter de souligner les images cliquables dans le texte) */
.content p a:has(img),
.bloc-introduction div a:has(img) {
    border-bottom: none;
}




/* ==========================================================================
   2. STRUCTURE GÉNÉRALE (GRID)
   ========================================================================== */
.wrapper {
    display: grid;
    grid-template-areas: "header" "nav" "content" "side" "footer";
}

.main-head { grid-area: header; padding: 20px 0; text-align: center; }
.main-head h1 { font-weight: 700; font-size: 1.3em; margin: 0; line-height: 1.2; color: var(--c-text-dark); }
.content { grid-area: content; padding: 0 var(--gap-std); min-width: 0; }
.content h2 { margin-top: 0; font-size: 1.5em; margin-bottom: 35px; }

.main-footer { 
    grid-area: footer; 
    border-top: 1px solid var(--c-border); 
    margin-top: 60px; 
    padding: 30px; 
    text-align: center; 
    font-size: 0.85em; 
}

/* --- Version Desktop (min 700px) --- */
@media (min-width: 700px) {
    .wrapper {
        grid-template-columns: var(--sidebar-width) 1fr;
        grid-template-areas: "header header" "side content" "footer footer";
    }
    
    .main-head { padding: 60px 0 80px 0; }
    .main-head h1 { font-size: 2.8em; }

    /* Navigation latérale */
    .side { 
        display: block; 
        grid-area: side; 
        padding-left: 30px; 
        border-right: 1px solid var(--c-bg-alt); 
    }
    .side ul { list-style: none; padding: 0; margin: 0 0 40px 0; }
    .side li { margin-bottom: 20px; }
    .side a { 
        color: #333;
        font-size: 1.15em; 
        font-weight: 500;
        letter-spacing: 2px;
        transition: color 0.3s, padding-left 0.3s;
    }
    .side a:hover { color: var(--c-accent); padding-left: 5px; }

    /* Cacher les éléments mobiles */
    .main-nav, #sandwich, label[for="toggle"] { display: none !important; }
}

/* ==========================================================================
   3. BLOCS ÉLASTIQUES (CONTENU MIXTE)
   ========================================================================== */
.bloc-introduction {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-std);
    align-items: flex-start;
}

/* Suppression marges haut du premier élément texte */
.bloc-introduction div > *:first-child { margin-top: 0; padding-top: 0; }

.bloc-introduction img {
    flex: 0 0 auto; 
    max-height: 85vh; 
    object-fit: contain; 
}

.bloc-introduction div {
    flex: 1 1 300px; /* S'adapte mais garde une largeur décente */
}


/* --- AJOUTS / MODIFICATIONS RÉCENTS POUR LE FLOTTEMENT ET L'ALIGNEMENT --- */

/* Justification par défaut pour tous les paragraphes dans le contenu principal */
.content p {
    text-align: justify;
}

/* S'assurer que le premier paragraphe ou cartel flottant commence bien au même niveau que l'image */
.layout-float > p:first-of-type,
.layout-float .cartel-float > p:first-of-type {
    margin-top: 0;
}

/* Style pour le cartel flottant (utilisé dans les articles de journal) */
.cartel-float {
    font-size: 0.9em; /* Taille légèrement plus petite pour le cartel */
    line-height: 1.4; /* Interlignage ajusté pour le cartel */
    margin-bottom: var(--gap-std); /* Espacement en dessous du cartel */
    border-left: 3px solid var(--c-border); /* Bordure latérale */
    padding-left: 10px; /* Espacement interne après la bordure */
    overflow: hidden; /* Assure que le contenu reste dans le bloc */
}

@media (min-width: 1100px) {
    .cartel-float {
        margin-left: 0; /* Réinitialise tout décalage potentiel */
        padding-top: 0; /* Assure l'alignement vertical avec le haut de l'image */
    }
}
/* --- FIN AJOUTS / MODIFICATIONS RÉCENTS --- */


/* ==========================================================================
   4. FORMULAIRES
   ========================================================================== */
#contactnewsletter { display: flex; flex-wrap: wrap; gap: 50px; align-items: flex-start; }
#explicontact { flex: 1 1 300px; }
#formulaire { flex: 1.5 1 400px; }

.renseignement { margin-bottom: 25px; }
.renseignement label { 
    display: block; 
    font-size: 0.75em; 
    font-weight: 700; 
    margin-bottom: 8px; 
    color: #888; 
}
.renseignement input[type="text"], 
.renseignement input[type="email"], 
.renseignement textarea {
    width: 100%; 
    padding: 12px; 
    border: 1px solid #ddd; 
    background: #fdfdfd; 
    font-family: var(--font-serif);
}
.renseignement textarea { height: 150px; resize: vertical; }

.bouton-submit { 
    background: var(--c-text); 
    color: #fff; 
    border: none; 
    padding: 15px 35px; 
    cursor: pointer; 
    transition: background 0.3s; 
}
.bouton-submit:hover { background: var(--c-accent); }

/* ==========================================================================
   5. MENU MOBILE
   ========================================================================== */
#toggle { display: none; } 

@media (max-width: 699px) {
    .side { display: none; }
    
    .main-nav { 
        grid-area: nav; 
        border-top: 1px solid var(--c-border); 
        border-bottom: 1px solid var(--c-border); 
    }
    
    #menu-apparent { display: none; padding: 10px 25px; background: #fff; }
    
    /* Mécanique d'ouverture sans JS */
    #toggle:checked + #menu-apparent { display: block; } 
    
    #sandwich { 
        display: block; 
        padding: 15px; 
        cursor: pointer; 
        text-align: center; 
        font-weight: 700; 
    }
    
    .main-nav ul { list-style: none; padding: 0; margin: 0; }
    .main-nav li { padding: 10px 0; border-bottom: 1px solid #f2f2f2; }
}

/* Grille Événements */
.grille-evenements {
    display: grid;
    grid-template-columns: 1fr; 
    gap: 30px;
}

@media (min-width: 1400px) { .grille-evenements { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 2200px) { .grille-evenements { grid-template-columns: repeat(3, 1fr); } }

/* MODIFICATION : Passage en display block pour permettre le float */
.grille-evenements .bloc-introduction {
    display: block; 
    padding: 25px;
    margin-bottom: 0;
    border-radius: 4px;
    height: 100%; 
}

/* On ajoute un "Clearfix" pour que le fond gris englobe bien l'image flottante */
.grille-evenements .bloc-introduction::after {
    content: "";
    display: table;
    clear: both;
}

/* L'image (ou son lien) flotte à gauche */
.grille-evenements .bloc-introduction > a {
    float: left;
    margin-right: 20px;
    margin-bottom: 10px; /* Petit espace si le texte passe dessous */
}

.grille-evenements .bloc-introduction img {
    width: 85px; 
    height: 120px; 
    object-fit: cover;
    display: block;
}

/* Le conteneur de texte redevient un bloc standard pour couler autour */
.grille-evenements .bloc-introduction div {
    display: block;
}

/* On s'assure que le titre n'a pas de marge haute pour s'aligner avec l'image */
.grille-evenements .bloc-introduction div > *:first-child {
    margin-top: 0;
}

.grille-evenements .bloc-introduction div p:last-child {
    margin-bottom: 0;
}

/* Couleurs alternées (Inchangé) */
.grille-evenements .bloc-introduction:nth-of-type(10n+1) { background-color: #ebeeee; }
.grille-evenements .bloc-introduction:nth-of-type(10n+2) { background-color: #e6ebef; }
.grille-evenements .bloc-introduction:nth-of-type(10n+3) { background-color: #eeeae4; }
.grille-evenements .bloc-introduction:nth-of-type(10n+4) { background-color: #e8eee9; }
.grille-evenements .bloc-introduction:nth-of-type(10n+5) { background-color: #eee6ee; }
.grille-evenements .bloc-introduction:nth-of-type(10n+6) { background-color: #f2ede8; }
.grille-evenements .bloc-introduction:nth-of-type(10n+7) { background-color: #e9eee6; }
.grille-evenements .bloc-introduction:nth-of-type(10n+8) { background-color: #e6eef2; }
.grille-evenements .bloc-introduction:nth-of-type(10n+9) { background-color: #f1eaea; }
.grille-evenements .bloc-introduction:nth-of-type(10n+10) { background-color: #efefea; }

/* ==========================================================================
   7. MODULES JOURNAL (BIBLIOTHÈQUE DE STYLES)
   ========================================================================== */

/* --- A. Navigation Inter-Années --- */
.journal-nav {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    margin-bottom: 30px;
    padding: 10px 0;
    border-bottom: 1px solid #eee;
    align-items: center;
}
.journal-nav select {
    font-family: var(--font-sans);
    border: 1px solid #ddd;
    background: #fff;
    cursor: pointer;
    font-size: 0.75em;
}
.journal-nav .select-year { flex: 1; padding: 6px; }
.journal-nav .select-anchor { flex: 2; padding: 4px; }

/* --- B. Module Transcription (Accordéon) --- */
.transcription-wrapper { margin-top: 10px; }

.transcription-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease-out, opacity 0.5s ease;
    opacity: 0;
    padding-left: 15px;
    border-left: 2px solid #eee;
    font-family: var(--font-serif);
}

/* Mécanique d'ouverture */
.toggle-transcription:checked ~ .transcription-content {
    max-height: 5000px; /* Valeur haute pour tout afficher */
    opacity: 1;
    margin-top: 15px;
    padding-bottom: 20px;
}

.btn-transcription {
    display: inline-block;
    font-family: var(--font-sans);
    font-size: 0.65em;
    cursor: pointer;
    color: #777;
    border: 1px solid #ddd;
    padding: 6px 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    background: #f9f9f9;
    margin-bottom: 5px;
}

.btn-close-transcription {
    display: inline-block; 
    margin-top: 10px; 
    font-family: var(--font-sans); 
    font-size: 0.6em; 
    cursor: pointer; 
    color: #999; 
    text-decoration: underline;
}

/* --- C. Layout "Habillage" (Float) --- */
.layout-float {
    display: block;
    width: 100%;
}
.layout-float::after { content: ""; display: table; clear: both; }

.layout-float .float-img {
    width: 100%;
    max-width: 500px;
    margin-bottom: 20px;
    height: auto;
    object-fit: contain;
}

@media (min-width: 1100px) {
    .layout-float .float-img {
        float: left;
        max-width: 40%;
        width: auto;
        max-height: 70vh;
        margin-right: 35px;
    }
    .layout-float .float-img img {
        width: 100%;
        height: auto;
        max-height: 70vh;
        object-fit: contain;
    }
}

/* NOUVEAU : Layout flottant XL pour un passage à droite plus tardif */
.layout-float-xl {
    display: block;
    width: 100%;
}
.layout-float-xl::after { content: ""; display: table; clear: both; }

.layout-float-xl .float-img {
    width: 100%;
    margin-bottom: 20px;
}

@media (min-width: 1600px) { /* Point de rupture plus grand */
    .layout-float-xl .float-img {
        float: left;
        max-width: 50%; /* Peut prendre plus de place */
        width: auto;
        max-height: 80vh;
        margin-right: 35px;
    }
    .layout-float-xl .float-img img {
        width: 100%;
        height: auto;
        max-height: 80vh;
        object-fit: contain;
    }
}

/* --- D. Utilitaires --- */
.audio-player { width: 100%; max-width: 600px; margin-top: 20px; }
.back-to-top { text-decoration: none; font-family: var(--font-sans); font-size: 0.8em; color: #999; display: block; margin-top: 30px; }

.media-elastic iframe, 
.media-container iframe {
    width: 100% !important;
    height: 100% !important;
    display: block;
    background: #000;
    border: none; 
}

/* ==========================================================================
   8. MODULES JOURNAL - GRANDS MÉDIAS (2024)
   ========================================================================== */

.layout-large-media,
.layout-large-media-xl,
.layout-3-cols {
    display: flex;
    flex-direction: column;
    gap: 30px;
    width: 100%;
    margin-bottom: 40px;
}

.media-container {
    width: 100%;
    position: relative;
    background: #000;
}

.ratio-16-9 { aspect-ratio: 16 / 9; }
.ratio-3-2  { aspect-ratio: 3 / 2; }

.media-container iframe, 
.media-container img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
}

@media (min-width: 1400px) {
    .layout-large-media {
        display: grid;
        grid-template-columns: 3fr 2fr;
        align-items: start;
        gap: 25px; 
    }
    .layout-large-media .text-container {
        max-width: 650px; 
        padding-top: 0; 
        margin-top: 0;
    }
    .layout-large-media .text-container > *:first-child {
        margin-top: 0;
    }
}

@media (min-width: 2500px) {
    .layout-large-media-xl {
        display: grid;
        grid-template-columns: 3fr 2fr;
        align-items: start;
        gap: 25px;
    }
    .layout-large-media-xl .text-container {
        max-width: 650px; 
        padding-top: 0; 
        margin-top: 0;
    }
    .layout-large-media-xl .text-container > *:first-child {
        margin-top: 0;
    }
}

@media (min-width: 2500px) {
    .layout-3-cols {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: var(--gap-std);
        align-items: start;
    }
    .layout-3-cols .gallery-grid {
        grid-column: 1 / 3;
        grid-template-columns: repeat(2, 1fr);
    }
}


/* ==========================================================================
   9. GALERIES & IMAGES (GRID SYSTEM - MISE À JOUR)
   ========================================================================== */
.gallery-grid {
    display: grid;
    gap: 15px;
    margin-bottom: 25px;
    width: 100%;
    clear: both;
    grid-template-columns: 1fr; 
}

.gallery-grid img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: 1px solid #eee;
    display: block;
}

/* NOUVEAU : Limite la hauteur des images dans les galeries sur grands écrans */
@media (min-width: 1200px) {
    .gallery-grid img {
        max-height: 80vh; /* Empêche les images de devenir trop hautes */
    }
}

@media (min-width: 700px) {
    .grid-2 { grid-template-columns: repeat(2, 1fr); }
    .grid-3 { grid-template-columns: repeat(3, 1fr); }
    .grid-4 { grid-template-columns: repeat(4, 1fr); }
}

.grid-retro {
    grid-template-columns: 1fr; 
}
@media (min-width: 1000px) {
    .grid-retro { grid-template-columns: repeat(2, 1fr); }
}

.grid-lg {
    grid-template-columns: 1fr;
}
@media (min-width: 1200px) {
    .grid-lg {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (min-width: 2500px) {
    .grid-lg {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* NOUVEAU : Grille spéciale pour "Entrailles" (1 -> 3 colonnes) */
.grid-3-xl {
    grid-template-columns: 1fr;
}
/* MODIFICATION : Passage à 3 colonnes dès 1100px (au lieu de 1800px) pour un affichage plus rapide */
@media (min-width: 1100px) { 
    .grid-3-xl {
        grid-template-columns: repeat(3, 1fr);
    }
}

.media-natural {
    width: 100%;
    margin-bottom: 20px;
    display: block;
}

.media-natural img {
    width: 100%;
    height: auto; 
    display: block;
    background: transparent; 
}

/* MODIFICATION : Suppression de margin: 0 auto; pour aligner à gauche */
.img-limit-height img {
    width: auto !important; 
    max-width: 100%;        
    max-height: 90vh;       
    display: block;
    /* margin: 0 auto; */ /* Supprimé */
}


/* ==========================================================================
   10. AJOUTS SPÉCIFIQUES JOURNAUX (SUR-MESURE - V13 - CORRECTIONS)
   ========================================================================== */

/* --- A. Layout "Image Large" --- */
.layout-float-wide {
    display: block;
    width: 100%;
}
.layout-float-wide::after { content: ""; display: table; clear: both; }

.layout-float-wide .float-img {
    width: 100%;
    margin-bottom: 20px;
}

@media (min-width: 1200px) {
    .layout-float-wide .float-img {
        float: left;
        width: -moz-fit-content;
        width: fit-content;
        max-width: 75%; 
        margin-right: 30px;
    }
    
    .layout-float-wide .float-img.limit-small { max-width: 50%; }
    .layout-float-wide .float-img.limit-max { max-width: 100%; margin-right: 30px; }
    .layout-float-wide .float-img.limit-intro { width: 40%; max-width: 450px; }
    .layout-float-wide .float-img.limit-cd { max-width: 35%; }
    .layout-float-wide .float-img.limit-landscape { width: 50%; max-width: 750px; }
    .layout-float-wide .float-img.limit-poster { width: 45%; max-width: 700px; }

    .layout-float-wide .float-img img {
        display: block;
        width: auto; 
        max-width: 100%;
        max-height: 95vh; 
    }
}

/* Ajustement Ultra-Large pour l'intro Jardin Sonore */
@media (min-width: 1600px) {
    .layout-float-wide .float-img.limit-intro { max-width: 450px; }
}

/* CORRECTION TEXTE QUI COULE (Quinzaine 2019) */
/* Quand la case est cochée, on force le contenu à déborder pour enrouler l'image */
.layout-float-wide .toggle-transcription:checked ~ .transcription-content {
    overflow: visible !important; 
    display: block !important;
}
/* On s'assure que le wrapper ne bloque pas le flux */
.layout-float-wide .transcription-wrapper {
    display: block;
    width: 100%;
}

/* --- B. Classe utilitaire : Adapter à la hauteur de l'écran --- */
.fit-screen-height img {
    width: auto !important;
    max-width: 100%;
    max-height: 95vh; 
    display: block;
}

/* --- C. Grilles à déclenchement tardif --- */
.grid-2-late { grid-template-columns: 1fr; }
@media (min-width: 1000px) { .grid-2-late { grid-template-columns: repeat(2, 1fr); } }

.grid-3-late { grid-template-columns: 1fr; }
@media (min-width: 1800px) { .grid-3-late { grid-template-columns: repeat(3, 1fr); } }

.grid-3-xl { grid-template-columns: 1fr; }
@media (min-width: 1100px) { .grid-3-xl { grid-template-columns: repeat(3, 1fr); } }

.grid-1-2-4 { grid-template-columns: 1fr; }
@media (min-width: 900px) { .grid-1-2-4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1600px) { .grid-1-2-4 { grid-template-columns: repeat(4, 1fr); } }

/* --- D. Cas particulier "Suaire" (Journal 2018) --- */
.suaire-container .float-img {
    display: grid;
    grid-template-columns: 1fr 1fr; 
    gap: 15px;
    width: 100%;
    margin-bottom: 20px;
    align-items: stretch;
}
.suaire-container .float-img a { display: block; height: 100%; }
.suaire-container .float-img img { width: 100%; height: 100% !important; object-fit: cover; display: block; }

@media (min-width: 1200px) {
    .suaire-container .float-img { 
        float: left; 
        /* On élargit un peu pour les écrans moyens/grands */
        width: 55%; 
        /* MAIS on bloque la largeur max pour les écrans géants */
        max-width: 900px; 
        margin-right: 40px; 
    }
}

/* NOUVELLE CLASSE : Papier large aligné à gauche (Version Débridée) */
.paper-wide {
    /* Alignement à gauche avec espace au-dessus */
    margin: 40px 0 0 0 !important; 
    
    /* CORRECTION : On supprime la limite en pixels. 
       Le bloc prendra toute la largeur du conteneur parent (comme le texte au-dessus). */
    max-width: none !important; 
    
    width: auto;
    display: block;
}

/* --- E. Vidéo limitée --- */
.video-limited { width: 100%; max-width: 600px; margin: 0 0 20px 0; }

/* --- F. SPÉCIFIQUE CRAZY RADIO --- */
.grid-crazy { display: grid; gap: 20px; grid-template-columns: 1fr; }
@media (min-width: 1100px) { .grid-crazy { grid-template-columns: repeat(3, 1fr); } }
.grid-crazy img { width: 100%; height: auto !important; display: block; object-fit: cover; background: transparent; max-height: none; }

/* --- G. SPÉCIFIQUE SALON CRECY --- */
.gallery-equal-height { display: flex; flex-wrap: wrap; gap: 20px; justify-content: flex-start; align-items: flex-start; }
.gallery-equal-height img { height: 60vh; width: auto; max-width: 100%; object-fit: contain; }
@media (max-width: 1000px) { .gallery-equal-height img { height: auto; width: 100%; } }

/* --- H. CONTENEUR LIMITÉ --- */
.container-limit-width { width: 100%; max-width: 1000px; margin: 0 0 20px 0; }

/* --- I. GALERIE NATURELLE --- */
.gallery-natural { display: grid; grid-template-columns: 1fr; gap: 30px; align-items: start; }
.gallery-natural img { width: 100%; height: auto !important; object-fit: contain; display: block; border: 1px solid #eee; }
@media (min-width: 700px) { .gallery-natural { grid-template-columns: repeat(2, 1fr); } }

/* --- J. GRILLE PROGRESSIVE TARDIVE (Restes, Sous la peau) --- */
.grid-progressive-late { 
    display: grid; 
    gap: 20px; 
    grid-template-columns: 1fr; 
}
/* CORRECTION MARGES MOBILES : On force un espace si le gap ne marche pas */
.grid-progressive-late img { 
    width: 100%; 
    height: auto; 
    display: block; 
    object-fit: cover; 
}

@media (min-width: 1000px) { .grid-progressive-late { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1500px) { .grid-progressive-late { grid-template-columns: repeat(3, 1fr); } }

/* --- K. CONTENEUR "FULL" --- */
.container-full { width: 100%; max-width: 100%; margin: 0 0 20px 0; }

/* --- L. GALERIE NATURELLE TARDIVE --- */
.gallery-natural-late { display: grid; grid-template-columns: 1fr; gap: 30px; align-items: start; }
.gallery-natural-late img { width: 100%; height: auto !important; object-fit: contain; display: block; border: 1px solid #eee; }
@media (min-width: 1200px) { .gallery-natural-late { grid-template-columns: repeat(2, 1fr); } }

/* --- M. GRILLE 2 IMAGES STRETCH --- */
.grid-2-stretch { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; align-items: stretch; width: 100%; }
.grid-2-stretch a { display: block; height: 100%; }
.layout-float-wide .grid-2-stretch img, .grid-2-stretch img { width: 100% !important; height: 100% !important; object-fit: cover; display: block; max-height: none !important; }

/* --- N. GRILLE PROGRESSIVE STANDARD --- */
.grid-progressive { display: grid; gap: 20px; grid-template-columns: 1fr; }
@media (min-width: 700px) { .grid-progressive { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .grid-progressive { grid-template-columns: repeat(3, 1fr); } }
.grid-progressive img { width: 100%; height: auto; display: block; object-fit: cover; }

/* --- O. GRILLE 1-2-3-6 --- */
.grid-1-2-3-6 { display: grid; gap: 15px; grid-template-columns: 1fr; margin-bottom: 50px; }
@media (min-width: 600px) { .grid-1-2-3-6 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .grid-1-2-3-6 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1400px) { .grid-1-2-3-6 { grid-template-columns: repeat(6, 1fr); } }
.grid-1-2-3-6 img { width: 100%; height: auto; display: block; object-fit: cover; }



/* --- P. BLOC SECONDAIRE TARDIF (Images ou Grilles) - V6 --- */
.delayed-side-image {
    /* Par défaut (petits/moyens écrans) : le bloc est en dessous */
    clear: both;
    width: 100%;
    margin-top: 40px;
    border-top: 1px solid #eee; 
    padding-top: 20px;
}

/* DÉCLENCHEMENT TARDIF : Sur les écrans GÉANTS (2200px et +) */
@media (min-width: 2200px) {
    .delayed-side-image {
        clear: none;       
        display: block;
        
        /* CORRECTION : On ne flotte plus à droite. */
        float: none;
        
        /* ASTUCE : overflow:hidden force le bloc à remplir l'espace restant 
           à droite de l'image principale (gauche) sans passer dessous. */
        overflow: hidden; 
        
        /* On lui dit de prendre toute la place disponible */
        width: auto; 
        max-width: 100%;
        
        margin-left: 30px; /* Espace avec l'image de gauche si le texte est court */
        margin-top: 20px; 
        border-top: none;
        padding-top: 0;
    }

    /* CAS 1 : Image unique (Emergences) */
    .delayed-side-image > a > img {
        width: 100%; 
        max-height: 650px; 
        object-fit: contain;
        object-position: left top; /* On colle à gauche, près du texte/image */
    }

    /* CAS 2 : Grille d'images (Neogalerie) */
    .delayed-side-image .gallery-grid {
        width: 100%;
        /* On garde 3 colonnes pour que ça remplisse bien la largeur */
        grid-template-columns: repeat(3, 1fr) !important; 
        gap: 20px;
        margin-bottom: 0;
    }
}


/* --- Q. SPÉCIFIQUE EXAMEN (Grille 1->2 puis Flex aligné sans déformation) --- */
.gallery-examen {
    display: grid;
    gap: 20px;
    grid-template-columns: 1fr; 
}

@media (min-width: 700px) {
    .gallery-examen { grid-template-columns: repeat(2, 1fr); } 
}

/* Sur très grand écran : Alignement horizontal parfait */
@media (min-width: 1600px) {
    .gallery-examen {
        display: flex; 
        /* On centre le tout ou on aligne à gauche (flex-start) selon ton goût */
        justify-content: flex-start; 
        align-items: flex-start; /* Empêche l'étirement vertical du bloc */
        gap: 20px;
    }
    
    .gallery-examen a {
        flex: 0 1 auto; /* Le lien s'adapte au contenu */
        display: block;
    }
    
    .gallery-examen img {
        /* 1. On fixe la hauteur commune */
        height: 50vh; 
        
        /* 2. La largeur s'adapte automatiquement pour respecter le ratio */
        width: auto;  
        
        /* 3. SÉCURITÉ ABSOLUE : Interdit la déformation (écrasement) */
        object-fit: contain; 
        
        /* 4. Sécurité pour ne pas dépasser l'écran si la fenêtre est réduite */
        max-width: 100%; 
        
        display: block;
    }
}



/* --- VARIANTE 5 : Pour les cartons d'invitation (100% Mobile -> 60% Tablette -> 40% Desktop) --- */
    
    .layout-float-wide .float-img.limit-invitation {
        box-shadow: 0 5px 15px rgba(0,0,0,0.15); 
        transition: transform 0.3s;
        
        /* CORRECTION : 100% sur les petits écrans (Smartphones) */
        width: 100%; 
        
        /* On garde le plafond absolu pour la netteté */
        max-width: 550px; 
        
        /* Alignement gauche */
        margin: 0 0 20px 0; 
    }
    
    .layout-float-wide .float-img.limit-invitation img {
        display: block; 
        width: 100%; 
        height: auto;
    }

    /* ÉTAPE INTERMÉDIAIRE : Sur tablette, on réduit à 60% pour l'élégance */
    @media (min-width: 700px) {
        .layout-float-wide .float-img.limit-invitation {
            width: 60%;
        }
    }

    /* COMPORTEMENT BUREAU : Texte à droite */
    @media (min-width: 1200px) {
        .layout-float-wide .float-img.limit-invitation {
            float: left;
            width: 40%; 
            margin-right: 35px; 
            margin-bottom: 20px;
        }
    }




/* ==========================================================================
   11. BLOCS RESSOURCES (POUR LES PAGES RUBRIQUES)
   ========================================================================== */

.bloc-ressource {
    background-color: var(--c-bg-alt); /* Fond gris très clair */
    border: 1px solid var(--c-border);
    padding: 25px;
     /* SUPPRESSION DE LA LIGNE : height: 100%; */
     /* Cela permet au bloc de s'adapter à son contenu sans casser la page */
    transition: border-color 0.3s, box-shadow 0.3s;
    border-radius: 4px;
}

.bloc-ressource:hover {
    border-color: #ccc;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

.bloc-ressource h3,
.bloc-ressource .titre-ressource {
    margin-top: 0;
    font-family: var(--font-sans);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 1em;
    color: var(--c-text-dark);
    margin-bottom: 15px;
    display: block;
}

.bloc-ressource img {
    margin-bottom: 15px;
    max-width: 100%;
    height: auto;
    display: block;
}

.bloc-ressource a {
    text-decoration: underline;
    color: var(--c-text);
}
.bloc-ressource a:hover {
    color: var(--c-accent);
}

/* ==========================================================================
   11B. GRILLE DESSINS (1-2-3-4-6 COLONNES) & CARTELS
   ========================================================================== */

.grid-drawings {
    display: grid;
    gap: 30px 20px; /* 30px vertical, 20px horizontal */
    grid-template-columns: 1fr; /* 1 colonne (Mobile) */
    margin-bottom: 50px;
}

@media (min-width: 600px) {
    .grid-drawings { grid-template-columns: repeat(2, 1fr); } /* Tablette */
}
@media (min-width: 900px) {
    .grid-drawings { grid-template-columns: repeat(3, 1fr); } /* Laptop */
}
@media (min-width: 1300px) {
    .grid-drawings { grid-template-columns: repeat(4, 1fr); } /* Desktop */
}
@media (min-width: 1800px) {
    .grid-drawings { grid-template-columns: repeat(6, 1fr); } /* Grand écran */
}

.grid-drawings img {
    width: 100%;
    
    /* CORRECTION : On force le ratio 3:4 (Portrait 30x40) */
    aspect-ratio: 3 / 4;
    
    /* "cover" remplit la case sans déformer l'image (rogne les bords si besoin) */
    object-fit: cover;
    object-position: center; /* Centre l'image dans le cadre */
    
    display: block;
    margin-bottom: 10px;
    border: 1px solid #eee; 
}

/* Style spécifique pour les cartels de dessins */
.drawing-cartel {
    font-size: 0.75em; 
    line-height: 1.4;
    color: var(--c-text);
    margin-top: 0;
}
.drawing-cartel b { color: var(--c-text-dark); }


/* ==========================================================================
   11C. SPÉCIFIQUE JARDIN SONORE (GRILLE AUDIO)
   ========================================================================== */

/* Grille responsive : 1 -> 2 -> 3 -> 4 colonnes */
.grid-audio {
    display: grid;
    gap: 20px;
    grid-template-columns: 1fr; /* Mobile */
    margin-bottom: 50px;
}

@media (min-width: 700px) {
    .grid-audio { grid-template-columns: repeat(2, 1fr); } /* Tablette */
}

@media (min-width: 1200px) {
    .grid-audio { grid-template-columns: repeat(3, 1fr); } /* Desktop */
}

@media (min-width: 1600px) {
    .grid-audio { grid-template-columns: repeat(4, 1fr); } /* Grand écran */
}

/* Style de la "carte" audio individuelle */
.audio-card {
    background-color: var(--c-bg-alt); /* Gris très clair */
    border: 1px solid var(--c-border);
    padding: 20px;
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Pousse le lecteur vers le bas si textes inégaux */
}

.audio-card h4 {
    margin: 0 0 5px 0;
    font-size: 0.95em;
    font-weight: 700;
    color: var(--c-text-dark);
    text-transform: none; /* On garde la casse naturelle pour les titres */
    font-family: var(--font-sans);
}

.audio-card p {
    margin: 0 0 15px 0;
    font-size: 0.85em;
    color: #666;
    font-style: italic;
    line-height: 1.4;
}

.audio-card audio {
    width: 100%;
    margin-top: auto; /* Colle le lecteur en bas de la carte */
    height: 35px; /* Hauteur compacte */
}

/* ==========================================================================
   12. PRÉSENTATION DÉTAILLÉE D'UNE ŒUVRE (LAYOUT ARTWORK - V7 - 70%)
   ========================================================================== */

.layout-artwork {
    display: flex;
    flex-direction: column; /* Mobile : Image au-dessus, Cartel en dessous */
    gap: 20px;
    width: 100%;
    margin-bottom: 40px;
}

/* --- BLOC IMAGE --- */
.layout-artwork .artwork-img {
    width: 100%;
    display: flex;
    justify-content: flex-start; /* Alignement gauche par défaut */
    align-items: flex-end;
}

.layout-artwork .artwork-img img {
    width: auto; 
    height: auto;
    max-width: 100%;
    
    /* CONSIGNE : Limite à 70% de la hauteur de l'écran */
    max-height: 70vh; 
    
    object-fit: contain;
    display: block;
    
    /* Important pour que le cartel colle : l'image dicte sa largeur */
    align-self: flex-start; 
}

/* --- BLOC CARTEL --- */
.layout-artwork .artwork-cartel {
    width: 100%;
    font-size: 0.95em;
    line-height: 1.5;
    color: var(--c-text);
    display: flex;
    flex-direction: column;
    justify-content: flex-end; 
}

.layout-artwork .artwork-cartel p { margin: 0 0 10px 0; }
.layout-artwork .artwork-cartel p:last-child { margin-bottom: 0; }
.layout-artwork .artwork-cartel b { font-size: 1.1em; color: var(--c-text-dark); }

/* --- VERSION DESKTOP (Image à gauche, Cartel à droite) --- */
@media (min-width: 1000px) {
    .layout-artwork {
        flex-direction: row; 
        align-items: flex-end; 
        gap: 30px; 
        justify-content: flex-start; 
    }

    .layout-artwork .artwork-img {
        /* Le bloc prend exactement la largeur de l'image */
        width: auto; 
        flex: 0 1 auto; 
    }

    .layout-artwork .artwork-cartel {
        flex: 0 0 300px; /* Largeur fixe pour le texte */
        width: 300px;
        padding-bottom: 3px; 
    }
}

/* --- NAVIGATION ENTRE ŒUVRES --- */
.artwork-nav {
    display: flex;
    justify-content: flex-start; /* Alignement gauche */
    gap: 20px;
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid #eee;
}

.artwork-nav a {
    font-family: var(--font-sans);
    font-size: 0.9em;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #999;
    text-decoration: none;
    border-bottom: none; 
    transition: color 0.3s;
}

.artwork-nav a:hover {
    color: var(--c-accent);
}


/* ==========================================================================
   13. STYLES SPÉCIFIQUES DU JOURNAL (ARTICLES & TITRES - VERSION BANDEAU)
   ========================================================================== */

/* L'article complet */
article.journal {
    margin-bottom: 60px;
    padding-bottom: 60px;
    border-bottom: 1px solid #eee; 
}

article.journal:last-of-type {
    border-bottom: none;
    margin-bottom: 0;
}

/* Le titre de l'article (H4) */
article.journal h4 {
    font-size: 1.2em; 
    color: var(--c-text-dark); 
    line-height: 1.4;
    
    /* Bandeau gris pâle */
    background-color: #f9f9f9; 
    padding: 15px 20px; 
    
    /* Barre noire à gauche */
    border-left: 4px solid var(--c-accent); 
    
    margin-top: 0;
    margin-bottom: 30px; 
    
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}


/* ==========================================================================
   14. GALERIE PINTEREST (MASONRY VERTICAL - 0% ROGNAGE)
   ========================================================================== */

.gallery-pinterest {
    /* On définit le nombre de colonnes selon la largeur de l'écran */
    column-count: 1; 
    column-gap: 20px; 
    margin-bottom: 50px;
}

@media (min-width: 600px) {
    .gallery-pinterest { column-count: 2; } /* Tablette : 2 colonnes */
}

@media (min-width: 1000px) {
    .gallery-pinterest { column-count: 3; } /* Ordi : 3 colonnes */
}

@media (min-width: 1600px) {
    .gallery-pinterest { column-count: 4; } /* Grand écran : 4 colonnes */
}

/* AJOUT : Passage à 6 colonnes sur les écrans géants pour éviter la pixelisation */
@media (min-width: 2200px) {
    .gallery-pinterest { column-count: 6; } 
}

/* Le bloc contenant une image + sa légende */
.gallery-pinterest div {
    break-inside: avoid; 
    page-break-inside: avoid;
    margin-bottom: 20px; 
    background-color: #fff;
    border: 1px solid #eee;
    border-radius: 4px;
    overflow: hidden;
    transition: transform 0.2s;
}

.gallery-pinterest div:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.gallery-pinterest img {
    width: 100%; 
    height: auto !important; 
    display: block;
}

.gallery-pinterest p {
    margin: 0;
    padding: 10px 15px;
    font-size: 0.85em;
    color: #555;
    background: #fcfcfc;
    border-top: 1px solid #f0f0f0;
    line-height: 1.3;
}

.gallery-pinterest p b {
    color: #222;
}

/* Variante "Musée" pour la galerie Pinterest (Peinture) */
.peinture-gallery .gallery-pinterest p {
    background: none;
    border-top: none;
    padding: 10px 0 0 0;
    font-size: 0.8em;
    color: #888;
}
.peinture-gallery .gallery-pinterest div {
    border: none; /* Enlève le cadre gris autour de l'image */
    box-shadow: none; /* Enlève l'ombre */
}

/* ==========================================================================
   15. PAGE D'ACCUEIL (MOSAÏQUE & HERO)
   ========================================================================== */

/* --- A. La Mosaïque (Grille de cartes visuelles) --- */
.home-mosaic {
    display: grid;
    gap: 20px;
    grid-template-columns: 1fr; /* Mobile : 1 colonne */
    margin-bottom: 60px;
}

/* MODIFICATION : Passage à 2 colonnes à 900px (au lieu de 700px) */
@media (min-width: 900px) {
    .home-mosaic {
        grid-template-columns: repeat(2, 1fr); 
    }
}

/* Passage à 3 colonnes sur les grands écrans */
@media (min-width: 1400px) {
    .home-mosaic {
        grid-template-columns: repeat(3, 1fr); 
    }
}

/* --- B. La Carte (Tuile) --- */
.mosaic-card {
    position: relative;
    display: block;
    height: 400px; 
    overflow: hidden;
    border-radius: 4px;
    text-decoration: none;
    color: #fff !important; 
    background-color: #000; 
}

/* L'image de fond */
.mosaic-card img {
    width: 100%;
    height: 100%;
    object-fit: cover; 
    transition: transform 0.5s ease, opacity 0.5s ease;
    opacity: 0.85; 
}

/* Le contenu (Texte) par dessus */
.mosaic-content {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 30px;
    background: linear-gradient(to top, rgba(0,0,0,0.9), transparent); 
    z-index: 2;
    transition: padding-bottom 0.3s ease;
}

.mosaic-card h3 {
    margin: 0 0 5px 0;
    font-size: 1.4em;
    color: #fff;
    text-transform: uppercase;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

.mosaic-card p {
    margin: 0;
    font-size: 0.95em;
    opacity: 0.9;
    font-family: var(--font-serif);
}

/* --- C. Effets au survol --- */
.mosaic-card:hover img {
    transform: scale(1.05); 
    opacity: 0.6; 
}

.mosaic-card:hover .mosaic-content {
    padding-bottom: 40px; 
}


/* ==========================================================================
   16. BLOCS SPÉCIFIQUES JOURNAL 2019 (GRILLE & TEXTES - V4 - FINAL)
   ========================================================================== */

/* --- A. La Grille Images (1 -> 2 -> 4 colonnes) --- */
.grid-1-2-4 {
    display: grid;
    gap: 20px; 
    grid-template-columns: 1fr; 
    width: 100%;
    margin-bottom: 30px;
}

.grid-1-2-4 img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

@media (min-width: 700px) { .grid-1-2-4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .grid-1-2-4 { grid-template-columns: repeat(4, 1fr); } }


/* --- B. La Mise en page des Textes (Côte à côte groupés) --- */
.layout-text-columns {
    display: flex;
    flex-wrap: wrap; 
    
    /* MODIFICATION : Espace réduit (30px) pour faciliter le côte à côte */
    gap: 30px; 
    
    /* Alignement haut strict */
    align-items: flex-start; 
    justify-content: flex-start;
    
    margin-top: 30px;
}

/* Colonne 1 : Le poème libre */
.text-col-main {
    flex: 0 1 550px; 
    text-align: justify;
    min-width: 300px; 
}

/* CORRECTION ALIGNEMENT : On force le premier paragraphe à coller en haut 
   pour être aligné avec le bord haut du papier */
.text-col-main > *:first-child {
    margin-top: 0;
}

/* Colonne 2 : Le Papier */
.text-col-paper {
    /* Largeur fixe confortable sur Desktop */
    flex: 0 0 500px; 
    width: 500px;
    
    background-color: #fdfdfd; 
    background-repeat: repeat;
    
    /* Marges internes */
    padding: 50px 50px 100px 50px; 
    
    border: 1px solid #ddd;
    box-shadow: 3px 3px 10px rgba(0,0,0,0.1);
    
    font-family: var(--font-serif);
    font-size: 0.95em;
    color: #444;
    line-height: 1.6;
    
    min-height: 400px; 
}

/* MODIFICATION : On passe à 1100px (au lieu de 1400px) pour le côte à côte */
@media (max-width: 1100px) {
    .layout-text-columns {
        flex-direction: column;
    }
    
    .text-col-main {
        width: 100%;
        flex: 1 1 auto;
    }

    .text-col-paper {
        /* Sur mobile, on laisse le bloc flexible... */
        flex: 1 1 auto;
        width: 100%;
        
        /* ...MAIS on limite son étirement (comme sur desktop) */
        max-width: 500px; 
    }
}


/* ==========================================================================
   17. BLOC INTRO + PAPIER (SUAIRE)
   ========================================================================== */

.layout-split-text {
    display: flex;
    flex-direction: column;
    gap: 30px;
    margin-top: 40px;
    clear: both; 
}

.split-intro {
    font-style: italic;
    color: #666;
    font-size: 0.95em;
}

.split-paper {
    background-color: #fdfdfd;
    background-repeat: repeat;
    padding: 40px;
    border: 1px solid #ddd;
    box-shadow: 3px 3px 10px rgba(0,0,0,0.05);
    font-family: var(--font-serif);
    color: #444;
}

/* Sur grand écran : Côte à côte (1/3 - 2/3) */
@media (min-width: 1000px) {
    .layout-split-text {
        flex-direction: row;
        align-items: flex-start; 
    }
    
    .split-intro {
        flex: 1; 
        text-align: right; 
        padding-top: 0; 
        margin-top: 0;
    }
    
    .split-paper {
        flex: 2; 
        margin-top: 0;
        /* Limite de largeur pour l'effet feuille */
        max-width: 700px; 
    }
}


/* ==========================================================================
   18. UTILITAIRES TEXTE (NOTES, CRÉDITS...)
   ========================================================================== */

.note {
    font-size: 0.85em;      /* Plus petit que le texte normal */
    color: #666;            /* Gris pour être discret */
    font-style: italic;     /* Italique pour se distinguer */
    margin-top: 10px;       /* Un petit espace au-dessus */
    line-height: 1.4;
}

/* Si la note contient un lien, on le garde discret */
.note a {
    color: #666;
    text-decoration: underline;
}
.note a:hover {
    color: var(--c-accent);
}