/* ======================================= */
  /* NOUVEAUX STYLES POUR L'ITINÉRAIRE       */
  /* ======================================= */
    
    .itinerary-section-wrapper {
        display: inline-block;
        max-width: 800px;
        margin: 40px auto;
    }
    .itinerary-container { 
        padding: 0 15px; 
    }
    .itinerary-card-link { text-decoration: none; color: inherit; display: block; }
    .itinerary-group { margin-bottom: 25px; }

    .itinerary-card {
        display: flex;
        flex-direction: row; 
        background-color: #fff;
        box-shadow: 0 8px 25px rgba(0,0,0,0.1);
        overflow: hidden;
        transition: transform 0.4s ease, box-shadow 0.4s ease;
        position: relative;
        z-index: 1;
    }
    .itinerary-card-link:hover .itinerary-card {
        transform: scale(1.02);
        box-shadow: 0 12px 35px rgba(0,0,0,0.2);
        z-index: 2;
    }
    .itinerary-image-container { flex-shrink: 0; width: 180px; background-color: #f0f0f0; }
    .itinerary-image-container img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .itinerary-details { display: flex; flex-direction: column; flex-grow: 1; }
    .itinerary-date-header {
        background-color: #f8f9fa;
        color: #E74C3C;
        border-bottom: 1px solid #eee;
        padding: 8px 15px;
        text-align: center;
        font-size: 0.9em;
        font-weight: bold;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        transition: color 0.3s ease;
    }
    .itinerary-info {
        padding: 20px 25px;
        flex-grow: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    .itinerary-info h3 { margin: 0 0 5px 0; font-size: 1.2em; color: #333; transition: color 0.3s ease; }
    .itinerary-info p { margin: 0; color: #666; font-size: 0.9em; line-height: 1.5; }
    
    .itinerary-group:hover .itinerary-date-header { color: #E74C3C; text-decoration:underline;}
    .itinerary-card-link:hover .itinerary-info h3 { color: #000080; }

    .itinerary-group .itinerary-card-link:not(:last-child) { margin-bottom: 0; }
    .itinerary-group .itinerary-card-link:not(:first-child) .itinerary-card { border-top: 1px solid #eee; }
    .itinerary-group .itinerary-card { border-radius: 0; }
    .itinerary-group .itinerary-card-link:first-child .itinerary-card { border-top-left-radius: 12px; border-top-right-radius: 12px; }
    .itinerary-group .itinerary-card-link:last-child .itinerary-card { border-bottom-left-radius: 12px; border-bottom-right-radius: 12px; }

    @media (max-width: 900px) {
        .itinerary-card { flex-direction: column; }
        .itinerary-image-container { width: 100%; height: 180px; }
        .itinerary-info h3 { font-size: 1.3em; }
        .itinerary-date-header  { font-size: 1.1em; }
    }

/* ====================================================================== */
/*  STYLE DE TITRE H2 - "PLAQUE POLIE & LIGNES DE LUMIÈRE" (V3 - CORRIGÉ) */
/* ====================================================================== */

/* Le conteneur principal */
.title-separator {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 25px;
    margin-top: 60px;
    margin-bottom: 30px;
}

/* 
 * 1. NOUVELLE TECHNIQUE POUR LES LIGNES ANIMÉES
 */
.title-separator::before,
.title-separator::after {
    content: '';
    flex-grow: 1;
    height: 2px;
    
    /* On crée un arrière-plan 3x plus large que la ligne elle-même */
    background-size: 300% 100%;
    
    /* Le dégradé contient la ligne de base (gris) et une impulsion blanche au centre */
    background-image: linear-gradient(
        to right,
        rgba(52, 73, 94, 0.4), /* Gris de base */
        rgba(52, 73, 94, 0.4) 45%,
        rgba(255, 255, 255, 0.8) 50%, /* L'impulsion lumineuse */
        rgba(52, 73, 94, 0.4) 55%,
        rgba(52, 73, 94, 0.4) /* Gris de base */
    );
    
    /* L'animation se fera sur le glissement de l'arrière-plan */
    transition: background-position 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: background-position;
}

/* Position de départ de la ligne de GAUCHE : impulsion cachée à gauche */
.title-separator::before {
    background-position: 100% 0;
}

/* Position de départ de la ligne de DROITE : impulsion cachée à droite */
.title-separator::after {
    background-position: 0% 0;
}


/* La plaque du titre (inchangée) */
.title-plate {
    position: relative;
    flex-shrink: 0;
    padding: 12px 35px;
    color: #ffffff;
    background: linear-gradient(135deg, #34495e 0%, #2c3e50 100%);
    font-family: "Jockey One", Impact, sans-serif;
    font-size: 1.5em;
    font-weight: normal;
    text-align: center;
    letter-spacing: 1px;
    text-shadow: 0 1px 2px rgba(0,0,0,0.4);
    border-radius: 6px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.15);
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.title-plate > span { position: relative; display: inline-block; }
.title-plate > span::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 75%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
    transform: skewX(-25deg);
    transition: left 0.65s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}


/* 
 * 2. DÉCLENCHEMENT DE TOUTES LES ANIMATIONS AU SURVOL
 */
.title-separator:hover .title-plate {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.2), 0 0 20px rgba(41, 128, 185, 0.2);
}

.title-separator:hover .title-plate > span::before {
    left: 120%;
}

/* Animation de la ligne de GAUCHE : l'impulsion va vers la droite (vers le titre) */
.title-separator:hover::before {
    background-position: 0% 0;
}

/* Animation de la ligne de DROITE : l'impulsion va vers la gauche (vers le titre) */
.title-separator:hover::after {
    background-position: 100% 0;
}


/* Ajustement pour les mobiles */
@media (max-width: 900px) {
    .title-plate {
        font-size: 1.2em;
        padding: 10px 25px;
    }
}
.titre_annee{
    display:inline-block;
    text-align:center;
    padding:5px;
    margin:5px;
    margin-top:15px;
    margin-left:5px;
    min-width: 75px;
    border:solid 1px #bebebe;
    background: linear-gradient(-90deg, #ffffff, #ecebeb);
    border-radius:5px;
    box-shadow:0 0 5px rgba(0,0,0,.5);
}
.title-h2 {
    position: relative;
    padding: 12px 35px;
    color: #ffffff;
    background: linear-gradient(135deg, #34495e 0%, #2c3e50 100%);
    font-family: "Jockey One", Impact, sans-serif;
    font-size: 1.5em;
    font-weight: normal;
    text-align: center;
    letter-spacing: 1px;
    border-radius: 6px;
}

.post_date{
    display:inline-block;
    text-align:center;
    padding:5px;
    margin:5px;
    margin-top:15px;
    margin-left:5px;
    min-width: 75px;
    border:solid 1px #bebebe;
    background: linear-gradient(-90deg, #ffffff, #ecebeb);
    border-radius:5px;
    box-shadow:0 0 5px rgba(0,0,0,.5);
}
.post_date .jour{ color:#C91C1C; padding:0px; font-size:1.2rem; font-weight:bold; display:block; }
.post_date .numJour{ color: #000000; padding:0px; font-size:1.2rem; font-weight:bold; display:block; }
.post_date .mois{ color:#282828; font-weight:bold; padding:0px; font-size:1.0rem; display:block; }
.post_date .annee{ color:#800000; font-weight:bold; padding:0px; font-size:1.05rem; display:block; }
.post_date .heure{ padding:2px; font-size:0.95rem; background:#000; color:white; display:block; }

/*
 * =========================================================
 *   AJOUTS/MODIFICATIONS DANS lignes_pages.css
 * =========================================================
 */

/*
 * =========================================================
 *   MODIFICATIONS DANS lignes_pages.css
 * =========================================================
 */

/* NOUVEAU : Le conteneur qui centre les blocs de contenu */
.content-block-wrapper {
    justify-content: center;
    padding-top: 40px;
    padding-left: 15px;
    padding-right: 15px;
}


/* Règle .text-block à MODIFIER */
.text-block {
    width: fit-content; 
    display: flow-root;
    max-width: 80ch;
    /* On remet 'auto' pour les marges horizontales. */
    /* C'est la méthode standard pour centrer un bloc qui a une largeur définie. */
    margin: 2.5em auto 0.5em; 
    padding: 10px 20px; 
    position: relative; 
    transition: transform 0.3s ease-out, box-shadow 0.3s ease-out;
    text-align: left;
    line-height: 1.5;
    color: #3d3d3d;
}

.text-block::before,
.text-block::after {
    content: '';
    position: absolute;
    transition: all 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.text-block::before {
    top: 0;
    left: 0;
    width: 10%;
    height: 40%;
    border-top: 4px solid rgba(50, 100, 110, 0.8);
    border-left: 4px solid rgba(50, 100, 110, 0.8);
    border-top-left-radius: 6px;
}
.text-block::after {
    bottom: 0;
    right: 0;
    width: 10%;
    height: 40%;
    border-bottom: 4px solid rgba(50, 100, 110, 0.0);
    border-right: 4px solid rgba(50, 100, 110, 0.0);
    border-bottom-right-radius: 6px;
}
.text-block:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
    background-color: rgba(255, 255, 255, 0.5);
}
.text-block:hover::before {
    width: 45px;
    height: 66.66%;
    border-top-color: #c0392b;
    border-left-color: #c0392b;
}
.text-block:hover::after {
    width: 45px;
    height: 66.66%;
    border-bottom-color: #c0392b;
    border-right-color: #c0392b;
}
.h2-capsule-container + .text-block { margin-top: 50px; }

/* =================================================================== */
/*   SYSTÈMES DE MISE EN PAGE DES GALERIES (LAYOUTS)                 */
/* =================================================================== */

/* --- RÈGLE UNIVERSELLE POUR LES CONTENEURS DE PHOTO ET SURVOL --- */
.photo-container {
    display: flex;
    transition: transform 0.35s ease, box-shadow 0.35s ease;
    will-change: transform, box-shadow;
    box-sizing: border-box; 
}
.photo-container:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2) !important; /* !important pour surcharger le .photo-frame */
}
/* Règle pour l'image à l'intérieur de n'importe quel conteneur de photo */
.photo-container img.box {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: none;
    border-radius: 0;
    box-shadow: none;
    background: none;
}

/* --- Layout "1-2-1" --- */
.layout-1-2-1 { display: flex; align-items: center; gap: 15px; margin: 20px 0; }
.layout-1-2-1 .layout-column { flex: 1 1 0; min-width: 0; }
.layout-1-2-1 .layout-column.is-stacked { display: flex; flex-direction: column; gap: 15px; }

/* --- Layout "1-3" --- */
.layout-1-3 { display: flex; align-items: stretch; gap: 15px; margin: 20px 0; }
.layout-1-3 .layout-column { flex: 1; min-width: 0; display: flex; }
.layout-1-3 .layout-column.is-stacked-multiple { flex-direction: column; gap: 15px; }
.layout-1-3 .layout-column.is-stacked-multiple > .photo-container { flex: 1; display: flex; }

/* --- Layout "4 + 1" --- */
.layout-4-plus-1-final { display: grid; grid-template-columns: 2fr 1fr; align-items: stretch; gap: 15px; margin: 20px 0; }
.layout-4-plus-1-final .mosaic-4-final { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 15px; }
.layout-4-plus-1-final .single-tall-final { display: flex; }
.layout-4-plus-1-final .photo-container { width: 100%; height: 100%; }

/* --- Layout "Cadre" --- */
.layout-frame-final { display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: flex-start; gap: 15px; margin: 20px 0; }
.layout-frame-final .frame-column { display: flex; flex-direction: column; gap: 15px; }

/* --- Layout "Horloge" --- */
.layout-clock { display: grid; grid-template-columns: 1fr 2fr 1fr; align-items: center; gap: 15px; margin: 20px 0; }
.layout-clock .clock-column { display: flex; flex-direction: column; gap: 15px; }
.layout-clock .center-row { display: flex; gap: 15px; }
.layout-clock .center-row > .photo-container { flex: 1; }

/* --- Layout "Tableau" --- */
.layout-wrapper {
    display: flex;
    justify-content: center;
    margin: 40px 0; 
}
.layout-tableau {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 15px;
    width: 100%;
    max-width: 50%;
    aspect-ratio: 1.2 / 1;
    /* Les propriétés 'margin' et 'max-height' ont été supprimées */
}
.layout-tableau > .photo-container:first-child { grid-row: span 2; }
.layout-tableau.main-second > .photo-container:nth-child(2) { grid-row: span 2; }
.layout-tableau.main-second > .photo-container:first-child { grid-row: span 1; }

/* --- Layout "1 + (2 sur 1)" --- */
.layout-1-plus-2-sur-1 { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 15px; width: 60%; max-width: 80%; aspect-ratio: 1.2 / 1; margin: 20px 0; max-height: 80vh; }
.layout-1-plus-2-sur-1 > .photo-container:nth-child(1) { grid-row: span 2; }
.layout-1-plus-2-sur-1 .stacked-right-column { grid-row: span 2; display: grid; grid-template-rows: 1fr 1fr; gap: 15px; }
.layout-1-plus-2-sur-1 .top-right-row { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }

/* --- SYSTÈME DE GALERIE FLEXIBLE UNIVERSEL --- */
.layout-miroir, .layout-croix, .layout-croix_5, .layout-petit-grand-petit, 
.layout-panoramique, .layout-img, .layout-img-meme-hauteur, .layout-mosaique, .layout-tableau-moulin {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin: 20px 60px;
}
.photo-row-flexible { display: flex; flex-wrap: nowrap; justify-content: center; gap: 15px; align-items: flex-start; }
.photo-row-flexible > .photo-container { display: flex; flex: 0 1 auto; min-width: 0; }
.photo-row-flexible .photo-container img.box { height: auto; width: 100%; max-height: 50vh; }
.layout-img .photo-row-flexible, .layout-img-meme-hauteur .photo-row-flexible { align-items: stretch; }
.photo-row-flexible > .photo-container:only-of-type img.box { max-height: 60vh; }
.layout-miroir .photo-row-flexible.align-bottom { align-items: flex-end; }
.layout-miroir .photo-row-flexible.align-top { align-items: flex-start; }
.layout-mosaique .photo-row-flexible { flex-wrap: wrap; }
.mosaique-break { flex-basis: 100%; height: 0; }

/* --- GALERIE AVEC LÉGENDES --- */
.photo-group-final.with-captions { align-items: flex-start; }
.photo-caption-item { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.caption-text { padding-top: 10px; font-size: 0.9rem; color: #333; text-align: center; }
.photo-caption-item .photo-container { height: 300px; }

/* --- MISE EN PAGE IMAGE + TEXTE --- */
.image-text-layout { display: flex; align-items: center; gap: 30px; margin: 40px auto; max-width: 1000px; }
.image-column { flex: 0 0 40%; display: flex; flex-direction: column; }
.text-column { flex: 1 1 60%; font-size: 1rem; line-height: 1.7; }
.image-caption { text-align: center; font-size: 0.9em; font-style: italic; color: #555; margin-top: 10px; }

/* --- RESPONSIVE MOBILE --- */
@media (max-width: 900px) {
    .layout-1-2-1, .layout-1-3, .layout-petit-grand-petit, .layout-2-1-2 { flex-direction: column; }
    .layout-4-plus-1-final, .layout-frame-final, .layout-clock, .layout-tableau, .layout-1-plus-3, .layout-1-plus-2-sur-1, .layout-2-1-2-grid { 
	    grid-template-columns: 1fr; 
	    grid-template-rows: auto; 
	    max-height: none; 
	    aspect-ratio: unset; 
	}
    .layout-tableau > .photo-container:first-child, .layout-tableau.main-second > .photo-container:nth-child(2) { grid-row: auto; }
    .layout-1-plus-2-sur-1 > .photo-container:nth-child(1), .layout-1-plus-2-sur-1 .stacked-right-column { grid-row: auto; }
    .layout-1-plus-2-sur-1 .stacked-right-column, .layout-1-plus-2-sur-1 .top-right-row { display: contents; }
    .photo-row-flexible { flex-direction: column; align-items: center; }
    .photo-row-flexible > .photo-container { display: flex; width: 95% !important; max-width: 500px; }
    .photo-row-flexible .photo-container img.box { max-height: none; }
    .photo-caption-item .photo-container { height: auto; }
    .image-text-layout { flex-direction: column; gap: 20px; }
    .image-column, .text-column { flex-basis: 100%; }
    .layout-miroir, .layout-croix, .layout-croix_5, .layout-petit-grand-petit, .layout-panoramique, .layout-img, .layout-img-meme-hauteur, .layout-mosaique, .layout-tableau-moulin {
    flex-direction: row;
}
}
.photo-frame {
    display: inline-block; /* Garder inline-block pour ce style spécifique */
    padding: 10px;
    background: linear-gradient(#fff 20%, #eee 80%, #ddd);
    border: 1px solid #ddd;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
    /* Le box-sizing est maintenant sur .photo-container, mais on peut le doubler ici pour la sécurité */
    box-sizing: border-box; 
}
.photo-frame img.box {
    display: block; /* Évite les espaces superflus sous l'image */
    width: 100%;    /* L'image prend 100% de l'espace DISPONIBLE dans le cadre (après padding) */
    height: auto;   /* Garde le ratio de l'image */
}
/* ======================================================================= */
/*   V2 : FLEXBOX POUR "TABLEAU 2-1-2" (TAILLE RÉDUITE ET CENTRÉE)         */
/* ======================================================================= */

/* Le conteneur principal gère le centrage et la taille maximale */
.layout-2-1-2 {
    display: flex;
    /* On retire align-items pour que la hauteur s'adapte au contenu */
    gap: 15px;
    max-width: 50%; /* -> Vous pouvez ajuster cette valeur (ex: 75%, 900px...) */
    margin: 40px auto; /* -> Le 'auto' assure le centrage horizontal */
}

/* Les colonnes latérales prennent 1 part */
.layout-2-1-2 .layout-column {
    flex: 1;
    min-width: 0;
}

/* La colonne centrale prend 2 parts */
.layout-2-1-2 .layout-column.is-center {
    flex: 2;
}

/* Les colonnes empilées restent des colonnes flex */
.layout-2-1-2 .layout-column.is-stacked {
    display: flex;
    flex-direction: column;
    gap: 15px; /* -> Cet espacement sera identique à celui entre les colonnes */
}

/* NOUVEAU : On s'assure que les images remplissent leur conteneur sans déformation */
.layout-2-1-2 .photo-container {
    width: 100%;
    height: 100%;
}
.layout-2-1-2 .photo-container img.box {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* DANS lignes_pages.css */

/* On s'assure que le conteneur peut positionner des enfants en absolu */
.photo-container {
    position: relative;
}

.comment-indicator {
    position: absolute;
    top: 10px; /* Un peu plus d'espace depuis le bord */
    right: 10px;
    z-index: 5;
    
    background-color: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    color: white;
    
    /* CORRECTION : Agrandissement et style */
    padding: 5px 12px; /* Plus large */
    border-radius: 16px; /* Forme "pilule" */
    font-size: 14px; /* Police plus grande */
    font-weight: 700;
    
    display: flex;
    align-items: center;
    gap: 6px;
    
    cursor: pointer; /* Le curseur indique que c'est cliquable */
    
    opacity: 0;
    transform: translateY(5px);
    transition: all 0.3s ease; /* Transition sur toutes les propriétés */
}

/* NOUVEAU : Effet au survol */
.comment-indicator:hover {
    background-color: var(--color-accent, #e74c3c); /* Change de couleur */
    transform: scale(1.1); /* S'agrandit légèrement */
}

/* L'icône SVG du commentaire */
.comment-indicator::before {
    content: '';
    display: inline-block;
    width: 16px; /* Taille de l'icône ajustée */
    height: 16px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M21.99 4c0-1.1-.89-2-1.99-2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h14l4 4-.01-18z'/%3E%3C/svg%3E");
    background-size: contain;
}

/* Classe pour l'animation d'apparition */
.comment-indicator.is-visible {
    opacity: 1;
    transform: translateY(0);
}
/* ========================================================== */
/*   STYLES POUR L'INTÉGRATION DE CARTES (V4 - SOLUTION FINALE) */
/* ========================================================== */

.map-container-responsive {
    display: inline-block;
    width: 50%;
    max-width: 800px;
    margin: 40px 0;
    text-align: center;
}

/* Le reste du code est inchangé et correct. */
.map-wrapper {
    position: relative;
    overflow: hidden;
    width: 100%;
    padding-top: 70.58%; /* Ratio (480 / 680) * 100 */
    border-radius: 8px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
    background-color: #e0e0e0;
}
.map-iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}
.map-external-link {
    display: inline-block;
    margin-top: 10px;
    font-size: 0.8em;
    color: var(--color-link);
    text-decoration: underline;
    transition: color 0.2s ease;
}
.map-external-link:hover {
    color: var(--color-accent);
}

@media (max-width: 900px) {
	.map-container-responsive {
	    width: 95%;
	}
}