@import url('https://fonts.cdnfonts.com/css/aller');
@import url('https://fonts.cdnfonts.com/css/impact');
/* Variables */
:root {
    --primary-color: #000000;
    --accent-color: #FFE600;
    --text-color: #ffffff;
    --background-color: #000000;
}

/* .title-fresque {
    background-color: rgb(220, 219, 219) !important;
} */

.fresque-header {
            text-align: center;
            padding: 2rem;
            background-color: white
        }
        .fresque-content {
            max-width: 1200px;
            margin: 0 auto;
            padding: 2rem;
        }
        .fresque-image {
            width: 100%;
            max-width: 800px;
            margin: 2rem auto;
        }
        .fresque-image img {
            width: 100%;
            height: auto;
        }
        .lieu {
            color: yellow;
            margin-bottom: 1.5rem;
            font-size: 1.05em;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 10px;
        }
        .lieu a {
            margin-left: auto;
        }
        .itineraire {
            display: inline-block !important;
            background-color: yellow !important;
            color: black !important;
            padding: 0.5rem 1rem !important;
            border-radius: 5px !important;
            text-decoration: none;
            margin-top: 1rem;
            border-color: #000000;
        }
        .social-info {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 2rem;
            color: rgba(255, 255, 255, 0.7);
        }
        .like-share {
            display: flex;
            gap: 1rem;
        }
        .credits {
            display: flex;
            gap: 1rem;
        }
        .carousel-container {
            transition: transform 0.7s cubic-bezier(0.77, 0, 0.175, 1);
        }
        @media screen and (max-width: 768px) {
            .fresque-header {
                padding: 0.7rem 0.2rem;
            }
            .fresque-content {
                padding: 0.7rem 0.2rem;
            }
            .fresque-image {
                margin: 0.5rem auto;
            }
            .description p {
                margin: 0.5rem !important;
            }
            .carousel-container {
                flex-direction: row !important;
            }
            .carousel-item .fresque-image,
            .carousel-item img.fresque-image {
                height: 500px !important;
                max-width: 98vw !important;
                object-fit: cover;
            }
            /* Section likes/partage uniquement */
            .fresque-header > div[style*="max-width: 800px"] {
                flex-direction: row !important;
                align-items: center !important;
                gap: 6px !important;
                padding-left: 20px !important;
                padding-right: 20px !important;
            }
            .fresque-header > div[style*="max-width: 800px"] > div {
                flex-direction: column !important;
                align-items: center !important;
                gap: 6px !important;
                padding-left: 20px !important;
                padding-right: 20px !important;
            }
            .fresque-header span, .fresque-header i {
                font-size: 0.95em !important;
            }
            .lieu {
                margin-bottom: 1rem;
                gap: 6px;
                font-size: 1em;
            }
            .description p {
                margin-bottom: 0.7rem !important;
            }
            .description p[style*="color: yellow"] {
                margin-top: 1.2rem !important;
                font-size: 0.98em;
            }
        }
        @media screen and (max-width: 480px) {
            .fresque-header {
                padding: 0.3rem 0.1rem;
            }
            .fresque-content {
                padding: 0.5rem 0.1rem !important;
                margin: 0 !important;
                width: 100% !important;
                box-sizing: border-box;
                display: flex;
                flex-direction: column;
                align-items: stretch;
            }
            .fresque-content .lieu {
                flex-direction: column;
                align-items: flex-start;
                gap: 4px;
                font-size: 0.97em;
                margin-bottom: 0.5rem;
                margin: 0.5em;
                padding: 0.5em;
            }
            .fresque-content .description {
                padding: 0.5em !important;
                margin: 0.5em !important;
            }
            .fresque-content .description p {
                margin: 0.5rem 0 !important;
                font-size: 0.98em;
            }
            .fresque-image {
                margin: 0.2rem auto;
            }
            .description p {
                margin: 0.2rem !important;
            }
            .carousel-container {
                flex-direction: row !important;
                height: auto !important;
            }
            .carousel-item .fresque-image,
            .carousel-item img.fresque-image {
                height: 300px !important;
                max-width: 99vw !important;
            }
            .fresque-header > div[style*="max-width: 800px"] {
                flex-direction: row !important;
                align-items: center !important;
                gap: 6px !important;
                padding-left: 20px !important;
                padding-right: 20px !important;
            }
            .fresque-header > div[style*="max-width: 800px"] > div {
                flex-direction: column !important;
                align-items: center !important;
                gap: 6px !important;
                padding-left: 20px !important;
                padding-right: 20px !important;
            }
            .fresque-header span, .fresque-header i {
                font-size: 0.85em !important;
            }
            .lieu {
                margin-bottom: 0.7rem;
                gap: 4px;
                font-size: 0.97em;
            }
            .description p {
                margin-bottom: 0.5rem !important;
            }
            .description p[style*="color: yellow"] {
                margin-top: 0.7rem !important;
                font-size: 0.95em;
            }
        }