html {
    overflow-y: scroll;
    scroll-behavior: smooth;
}

body {
    --orange: rgb(241, 137, 92);
    --blue: rgb(81, 96, 121);
    --dark-orange: rgb(139, 79, 53);
    --dark-blue: rgb(46, 50, 68);
    --orange-ombre: rgba(241, 137, 92, .25);
    --blue-ombre: rgba(81, 96, 121, .25);
    --dark-orange-ombre: rgba(139, 79, 53, .25);
    --dark-blue-ombre: rgba(46, 50, 68, .25);
    font-family: "Montserrat", serif;
    overflow-x: hidden;
    margin: 0;
}

@media (prefers-color-scheme: light) {
    body {
        --text-color: black;
        --bg-main: white;
        --bg-secondary: #eee;
        --bg-tertiary: #FFF7F1;
    }
}

#chargement {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 30px;
    height: 30px;
    border: 10px solid;
    border-radius: 50%;
    border-color: var(--blue);
    border-top-color: white;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate( 0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

#carousel {
    position: relative;
    overflow-x: hidden;
    width: 100%;
    .btn-carousel {
        position: absolute;
        top: calc(50% - 15px);
        display: flex;
        justify-content: center;
        align-items: center;
        width: 30px;
        height: 30px;
        background-color: white;
        border-radius: 50px;
        margin: 0 10px;
        cursor: pointer;
        z-index: 5;
        img {
            width: 20px;
        }
    }
    #btn-gauche {
        left: 0;
    }
    #btn-droite {
        right: 0;
        img {
            transform: rotate(180deg);
        }
    }
    .img-carousel {
        display: none;
        width: 100%;
        max-height: 500px;
        object-fit: contain;
        object-position: center;
        &.focus {
            display: block;
            position: relative;
            right: 0;
        }
    }
}

#nous-trouver {
    width: calc(100% - 40px);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 20px;
    padding: 20px 0px;
    #coordonnees {
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        .coord {
            display: flex;
            flex-direction: column;
            h4 {
                font-weight: 600;
                margin: 0;
            }
        }
        #adresse {
            text-align: left;
        }
        #contact {
            text-align: right;
        }
    }
    #map {
        width: 80%;
        height: 350px;
        border-radius: 20px;
        box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, .25);
    }
}

#nous-soutenir {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 20px;
    background-color: var(--bg-secondary);
    padding: 20px 0;
    #img-soutenir {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 50px;
        width: 100%;
        #img-associations {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: flex-end;
            width: 20%;
            img {
                width: 100%;
            }
        }
        &>img {
            width: 30%;
        }
    }
    a {
        background-color: var(--blue);
        text-decoration: none;
        color: white;
        padding: 20px;
        width: 200px;
        text-transform: uppercase;
        font-weight: 700;
        text-align: center;
        letter-spacing: 10%;
        box-shadow: 0 0 20px rgba(0, 0, 0, .25);
        border-radius: 20px;
        &:hover {
            box-shadow: none;
        }
    }
}

.before-after-container {
    position: relative;
    overflow: hidden;
    width: 100%;
    max-height: 300px;
    /* Garde une hauteur maximale pour mobile */
    cursor: col-resize;
    aspect-ratio: auto;
    /* Permet au container de s'adapter à l'aspect ratio */
}

@media (max-width: 1000px) {
    #contenu-principal {
        display: none;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        color: var(--text-color);
        nav {
            position: fixed;
            height: 100%;
            width: 80%;
            top: 0;
            left: 0;
            display: none;
            flex-direction: column;
            justify-content: flex-start;
            align-items: center;
            z-index: 3;
            background-color: white;
            padding: 100px 10px;
            box-sizing: border-box;
            gap: 50px;
            z-index: 1000 !important;
            #nav-fermer {
                position: absolute;
                top: 30px;
                left: 30px;
                cursor: pointer;
            }
            #nav-identite {
                display: flex;
                flex-direction: column;
                align-items: center;
                img {
                    width: 100%;
                    height: 100%;
                    max-width: 400px;
                }
            }
            #nav-liens {
                display: flex;
                flex-direction: column;
                width: 100%;
                justify-content: flex-start;
                align-items: center;
                gap: 50px;
                .nav-elem {
                    display: flex;
                    flex-direction: row;
                    justify-content: flex-start;
                    align-items: center;
                    width: 70%;
                    gap: 20px;
                    text-decoration: none;
                    color: var(--text-color);
                    img {
                        width: 30px;
                        height: 30px;
                    }
                }
            }
        }
        #menu-hamburger {
            position: fixed;
            top: 20px;
            left: 20px;
            width: 30px;
            height: 30px;
            padding: 5px;
            cursor: pointer;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: white;
            border-radius: 100px;
            z-index: 10;
        }
        h2 {
            text-transform: uppercase;
            letter-spacing: 3px;
            margin-top: 30px;
            font-weight: 800;
            text-align: center;
        }
        h3 {
            text-transform: uppercase;
            letter-spacing: 3px;
            font-weight: 700;
            text-align: center;
        }
        .paragraphe {
            margin: 0px 20px;
            text-align: justify;
        }
        h1 {
            margin: 0px 20px;
        }
        .frise {
            display: flex;
            flex-direction: column;
            gap: 24px;
            .dessin-frise {
                position: relative;
                left: calc(50% - 5px);
                background-color: rgba(0, 0, 0, .10);
                width: 10px;
                .date {
                    --frise-color: var(--blue);
                    position: absolute;
                    left: 30px;
                    &:nth-child(even) {
                        --frise-color: var(--orange);
                        left: -220px;
                        .marqueur {
                            left: 215px;
                        }
                        article {
                            text-align: right;
                        }
                    }
                    .marqueur {
                        position: absolute;
                        left: -35px;
                        background-color: var(--frise-color);
                        width: 20px;
                        height: 20px;
                        border-radius: 50px;
                    }
                    article {
                        top: 0px;
                        position: absolute;
                        display: flex;
                        flex-direction: column;
                        max-width: 200px;
                        width: 50vw;
                        h4 {
                            margin: 0;
                            font-weight: 800;
                            color: var(--frise-color);
                            font-size: 1.2em;
                        }
                        p {
                            font-size: 0.8em;
                        }
                    }
                }
            }
        }
        #accueil {
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            align-items: center;
            gap: 40px;
            #images {
                display: flex;
                flex-direction: row;
                justify-content: center;
                align-items: center;
                width: 100%;
                gap: 10px;
                img {
                    object-fit: fill;
                    width: 30%;
                }
                h1 {
                    font-family: "Hedvig Letters Serif", serif;
                    text-align: center;
                    text-transform: uppercase;
                    font-size: 2.5em;
                    font-weight: 100;
                    #lower-h1 {
                        font-size: 0.6em;
                    }
                }
                p {
                    width: 80%;
                    text-align: center;
                    font-size: 1.2em;
                }
            }
            .paragraphe {
                margin-bottom: 40px;
            }
        }
        #histoire {
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            align-items: center;
            gap: 24px;
            padding: 20px 0;
            background-color: var(--bg-secondary);
            #img-histoire {
                width: 70%;
            }
            .frise>.dessin-frise>.date {
                --frise-color: var(--dark-blue);
                &:nth-child(even) {
                    --frise-color: var(--blue);
                }
            }
        }
        #travaux {
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            align-items: center;
            background-color: var(--bg-tertiary);
            padding: 0 0 20px 0;
            h2 {
                margin-top: 40px;
            }
            .frise>.dessin-frise>.date {
                --frise-color: var(--dark-orange);
                &:nth-child(even) {
                    --frise-color: var(--orange);
                }
            }
        }
        #nous-soutenir {
            #img-soutenir {
                flex-direction: row;
                width: 100%;
                #img-associations {
                    flex-direction: column;
                    align-items: center;
                    width: 35%;
                    img {
                        width: 100%;
                    }
                }
                &>img {
                    width: 50%;
                }
            }
        }
    }
}

@media (min-width: 1001px) {
    nav {
        position: fixed;
        width: 100%;
        top: 0;
        margin: 0;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        height: 60px;
        background-color: var(--bg-main);
        z-index: 10;
        padding: 0px 50px;
        box-sizing: border-box;
        box-shadow: 0 0 20px 0 rgba(0, 0, 0, .25);
        #nav-fermer {
            display: none;
        }
        #nav-identite {
            img {
                height: 100%;
            }
        }
        #nav-liens {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: flex-end;
            gap: 40px;
            a {
                text-decoration: none;
                color: #999;
                font-weight: 800;
                img {
                    display: none;
                }
            }
        }
    }
    #menu-hamburger {
        display: none;
    }
    h2,
    h3 {
        text-transform: uppercase;
        font-weight: 800;
        letter-spacing: 5px;
        text-align: center;
    }
    h3 {
        text-align: left;
    }
    .paragraphe {
        text-align: justify;
        margin: 0 10%;
        max-width: 80%;
    }
    h1 {
        margin: 0 10%;
        max-width: 80%;
    }
    .decal {
        margin: 1% 10%;
        max-width: 80%;
    }
    
    section {
        padding: 50px 0;
    }
    .frise {
        --frise-color: var(--blue);
        --frise-color-2: var(--dark-blue);
        --frise-ombre: var(--blue-ombre);
        padding: 50px;
        height: 850px;
        overflow-x: scroll;
        width: 90%;
        position: relative;
        .dessin-frise {
            position: relative;
            display: block;
            height: 20px;
            background: linear-gradient(90deg, var(--frise-color-2), var(--frise-color));
            border-radius: 50px;
            top: 400px;
            width: 2000px;
            .date {
                position: absolute;
                top: 60px;
                height: 200px;
                box-shadow: 0px 0px 20px 0px var(--frise-ombre);
                padding: 50px 20px;
                border-radius: 30px;
                background-color: var(--bg-main);
                display: flex;
                flex-direction: column;
                justify-content: flex-start;
                align-items: center;
                article {
                    h4 {
                        margin: 0;
                        text-align: center;
                        letter-spacing: 5px;
                        font-size: 1.4em;
                        color: var(--frise-color-2);
                    }
                    p {
                        width: 250px;
                        text-align: justify;
                    }
                }
                .marqueur {
                    position: absolute;
                    top: -70px;
                    left: 125px;
                    height: 40px;
                    width: 40px;
                    background-color: var(--bg-main);
                    box-shadow: 0 0 20px 0 rgba(0, 0, 0, .25);
                    border-radius: 50px;
                }
                &:nth-child(even) {
                    top: -340px;
                    .marqueur {
                        top: 330px;
                    }
                }
            }
        }
    }
    #contenu-principal {
        display: none;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        color: var(--text-color);
        #accueil {
            padding-top: 0;
            #images {
                display: flex;
                flex-direction: row;
                align-items: center;
                justify-content: center;
                width: 100%;
                padding-bottom: 50px;
                img {
                    max-width: 33%;
                }
            }
        }
        #histoire {
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            align-items: center;
            gap: 20px;
            width: 100%;
            background-color: var(--bg-secondary);
            #img-histoire {
                width: 50%;
            }
            .frise {
                --frise-color: var(--blue);
                --frise-color-2: var(--dark-blue);
                --frise-ombre: var(--blue-ombre);
            }
        }
        #travaux {
            padding-top: 0;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            align-items: center;
            width: 100%;
            background-color: var(--bg-tertiary);
            #carousel {
                width: 80%;
                .img-carousel {
                    max-height: 500px;
                }
            }
            h2 {
                margin-top: 30px;
            }
            .frise {
                --frise-color: var(--orange);
                --frise-color-2: var(--dark-orange);
                --frise-ombre: var(--orange-ombre);
            }
        }
        #nous-trouver {
            #coordonnees {
                width: 80%;
            }
        }
    }
}


/* Styles du footer */

#main-footer {
    width: 100%;
    background-color: var(--blue);
    color: white;
    padding: 20px 0;
    margin-top: 40px;
    box-shadow: 0 -5px 15px rgba(0, 0, 0, 0.1);
}

#main-footer .footer-content {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
}

#main-footer p {
    margin: 0;
    text-align: center;
    font-size: 0.9em;
}

#main-footer a {
    color: white;
    text-decoration: none;
    font-weight: 600;
    transition: opacity 0.3s ease;
}

#main-footer a:hover {
    opacity: 0.8;
}


/* Ajustements responsives pour le footer */

@media (max-width: 1000px) {
    #main-footer .footer-content {
        flex-direction: column;
    }
    #main-footer p {
        font-size: 0.8em;
    }
}

.before-after-container .img-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 200px;
}

.before-after-container img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* Change cover to contain pour éviter le recadrage */
    max-height: 100%;
}

.img-before {
    clip-path: polygon(0 0, 50% 0, 50% 100%, 0 100%);
    z-index: 1;
}

.slider-handle {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 4px;
    background: white;
    transform: translateX(-50%);
    z-index: 2;
    pointer-events: none;
}

.slider-circle {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: white;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
}

.slider-circle::before,
.slider-circle::after {
    content: "";
    position: absolute;
    width: 10px;
    height: 2px;
    background: var(--blue);
}

.slider-circle::before {
    transform: rotate(45deg);
}

.slider-circle::after {
    transform: rotate(-45deg);
}

.before-label,
.after-label {
    position: absolute;
    top: 20px;
    padding: 5px 10px;
    color: white;
    font-weight: bold;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 4px;
    z-index: 3;
    pointer-events: none;
}

.before-label {
    left: 20px;
}

.after-label {
    right: 20px;
}

.img-carousel.before-after-container.focus {
    display: flex !important;
    /* Forcer l'affichage quand focus */
    height: 300px;
    /* Hauteur définie pour mobile */
}

@media (min-width: 1001px) {
    #travaux #carousel .before-after-container {
        max-height: 500px;
        /* Plus grand pour desktop */
    }
    .img-carousel.before-after-container.focus {
        height: auto;
        /* Hauteur automatique sur desktop */
        min-height: 400px;
        /* Hauteur minimale sur desktop */
    }
    #carousel .img-carousel {
        max-height: 500px;
    }
    #carousel .img-carousel.focus {
        display: block;
    }
    #carousel .img-carousel.before-after-container.focus {
        display: flex !important;
    }
}

#carousel .before-after-container {
    overflow: hidden;
    cursor: col-resize;
}


/* Style pour les légendes d'images */


/* Style pour les légendes d'images */

.img-caption {
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 8px 12px;
    text-align: center;
    width: 100%;
    box-sizing: border-box;
    font-size: 0.9em;
    position: absolute;
    /* Position absolue pour éviter de pousser le contenu */
    bottom: 0;
    /* Au bas de l'image */
    left: 0;
    /* Aligné à gauche */
    margin: 0;
    /* Pas de marge */
}


/* Pour les images normales qui ne sont pas dans un conteneur spécial */

.img-carousel:not(.before-after-container) {
    position: relative;
    /* Pour permettre le positionnement absolu de la légende */
    margin-bottom: 2.5em;
    /* Espace pour la légende */
}


/* Pour les images normales, la légende est sous l'image et non superposée */

.img-carousel:not(.before-after-container) .img-caption {
    position: absolute;
    bottom: -2.5em;
    /* Positionner sous l'image */
    background-color: transparent;
    /* Fond transparent */
    color: var(--text-color);
    /* Utiliser la couleur de texte normale */
}


/* Ajustement pour mobile */

@media (max-width: 1000px) {
    .img-caption {
        font-size: 0.8em;
        padding: 6px 10px;
    }
}


/* Style spécifique pour les légendes des before-after */

.before-after-container .img-caption {
    position: absolute;
    bottom: 0;
    z-index: 10;
}