﻿.single-image{
    position: relative;
    margin-top: var(--hauteur-ligne_moyenne);

    img{
        width: 100%;
    }
}

.carrousel{
    position: relative;
    margin-top: var(--hauteur-ligne_moyenne);

    .skip{
        position: absolute;
        height: 100%;
        width: 50%;
    }

    .left{
        left: 0;
        cursor: w-resize;
    }

    .right{
        right: 0;
        cursor: e-resize;
    }

    .figure-container{
        display: flex;
        flex-direction: row;
        overflow-x: hidden;

        figure{
            width: 100%;
            flex-shrink: 0;
            display: none;

            &.on{
                display: block;
            }

            img{
                display: block;
                width: 100%;
                height: 100%;
                object-fit: contain;
            }
        }
    }
}

section:has(.bouton_jaune) {
    & > div {
        display: grid;
        grid-template-columns: subgrid;

        .bouton_jaune {
            grid-column: span 4;
        }
    }
}

#organismes, #conventions, #histoire, #la-cgt, #orientations{
    --colonnage: 2 / -2;

    & > div {
        display: flex;
        flex-direction: column;
    }

    ul{
        list-style-position: inside;
        display: flex;
        flex-direction: column;
    }
}

#orientations{
    li{
        list-style-type: none;
    }

    li::before{
        content: "☞ ";
    }
}

#conventions{
    a{
        font-size: var(--taille_typo_petite);
        background-color: var(--blanc);
        color: #9A9A9A;
        border-radius: 100px;
        padding: 0 1.5em;
        position: relative;
    }

    a:hover::before{
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: var(--jaune_cgt);
        border-radius: 100px;
        filter: blur(10px);
        z-index: -1;
    }

    a:hover{
        color: black;
        background: none;
    }
}

#organismes {

    div {

        p{
            font-size: var(--taille_typo_grande);
            line-height: var(--hauteur-ligne_grande);
        }
    }
}

p{
    strong{
        font-size: var(--taille_typo_grande);
        line-height: var(--hauteur-ligne_grande);
    }
}

/*-------------------------------------------------------------------------*/

@media (max-width: 1080px) {

}

/*-------------------------------------------------------------------------*/

@media (max-width: 768px) {

}