@import url("fonts.css");
@import url("menu.css");
@import url("footer.css");
@import url("syndicats.css");
@import url("actualites.css");

.no-transition,
.no-transition * {
    transition: none !important;
}

:root{
    --rouge_cgt: #FF3E3E;
    --blanc: #FFFFFF;
    --blanc_gris: #EFEFEF;
    --gris_leger: rgb(190, 190, 190);
    --jaune_cgt: #F7D908;

    --unit_px: 10px;
    --baseline: 0.45vw;

    --hauteur-ligne_grande: calc(var(--baseline) * 5);
    --hauteur-ligne_moyenne: calc(var(--baseline) * 4);
    --hauteur-ligne_petite: calc(var(--baseline) * 3);

    --taille_typo_grande: calc(var(--hauteur-ligne_grande) * 0.8);
    --taille_typo_moyenne: calc(var(--hauteur-ligne_moyenne) * 0.8);
    --taille_typo_petite: calc(var(--hauteur-ligne_petite) * 0.8);
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-weight: normal;
    hyphens: none;
    vertical-align: baseline;
}

h1 { line-height: var(--hauteur-ligne_moyenne); font-size: var(--taille_typo_moyenne); font-style: italic; grid-column: 1; position: sticky; top: calc(var(--baseline) * 4); align-self: start; }
h2 { line-height: var(--hauteur-ligne_grande); font-size: var(--taille_typo_grande); font-weight: bold;}
h3 { line-height: var(--hauteur-ligne_petite); font-size: var(--taille_typo_petite); font-weight: bold; }
h4 { line-height: var(--hauteur-ligne_petite); font-size: var(--taille_typo_petite); font-weight: italic; }

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

body{
    line-height: var(--hauteur-ligne_moyenne);
    font-size: var(--taille_typo_moyenne);
    padding: calc(var(--baseline) * 4);
    column-gap: calc(var(--baseline) * 4);
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    font-family: "Clarendon", serif;
    background-color: var(--blanc_gris);

    main {
        grid-column: 3 / 9;
        display: grid;
        grid-template-columns: subgrid;
        row-gap: calc(var(--baseline) * 8);
        min-width: 0;
        align-content: start;
        padding-bottom: calc(var(--baseline) * 4);

        section {
            grid-column: 1 / -1;
            display: grid;
            grid-template-columns: subgrid;

            & > *:not(h1) {
                grid-column: var(--colonnage, 2 / -1);
                display: flex;
                flex-direction: column;
                gap: calc(var(--baseline) * 4);

                div, ul, li {
                    row-gap: calc(var(--baseline) * 4);
                }
            }
        }

        p {

            > a {
                color: #9A9A9A;
                position: relative;
            }

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

            > a:hover {
                color: black;
            }

        }
    }

    .bouton_jaune,
    .bouton_rouge {
        border: none;
        border-radius: calc(var(--unit_px) * 1);
        cursor: pointer;
        font-family: inherit;
        font-size: inherit;
        background: transparent;
        width: 100%;
        grid-column: 1 / -1;
        text-align: center;
        display: block;
        padding: calc(var(--baseline) * 2) calc(var(--baseline) * 4);
        position: relative;

        &::before {
            content: '';
            position: absolute;
            inset: 0;
            background-color: var(--jaune_cgt);
            filter: blur(calc(var(--unit_px) * 0.5));
            z-index: -1;
            border-radius: inherit;
        }

        &:hover::before {
            filter: none;
        }

        span {
            display: block;
            text-align: center;
        }
    }

    .bouton_jaune {

        &::before {
            background-color: var(--jaune_cgt);
        }
    }

    .bouton_rouge {

        &::before {
            background-color: var(--rouge_cgt);
        }
    }
}

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

@media (max-width: 1080px){

    :root{
        --baseline: 0.6vw;
    }

    body{
        grid-template-columns: 1fr;
        padding: calc(var(--baseline) * 2);
        column-gap: 0;

        main{
            grid-column: 1;
            grid-row: 2;
            grid-template-columns: 1fr;
            padding-top: calc(var(--baseline) * 2);
            padding-left:  calc(var(--baseline) * 8);
            padding-right: calc(var(--baseline) * 6);
            row-gap: calc(var(--baseline) * 8);

            section{
                grid-template-columns: 1fr;
                row-gap: calc(var(--baseline) * 4);

                h1{
                    position: static;
                    grid-column: 1;
                    margin-left: calc(var(--baseline) * -4);
                }

                & > *:not(h1){
                    grid-column: 1;

                    div, ul, li {
                        row-gap: calc(var(--baseline) * 6);
                    }
                }
            }

            .bouton_jaune {
                max-width: calc(100% - calc(var(--baseline) * 40));
                margin-left: auto;
                margin-right: auto;
            }
        }
    }
}

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

@media (max-width: 768px) {

    :root{
        --baseline: 1vw;
    }

    body{
        main{
            padding-left:  calc(var(--baseline) * 4);
            padding-right: calc(var(--baseline) * 3);

            section{

                h1{
                    margin-left: calc(var(--baseline) * -2);
                }
            }
        }
    }
}