*,
*:after,
*:before {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root{
    --noir:#000000;
    --jaune:#ffff00;
    --argent: rgb(150,150,155);
    --vivantes:#00b291;
    --bal:rgb(255,0,160);
    --mondes:rgb(255,90,0);
    --gris: #636363;
}

@font-face {
    font-family: 'Aire Libre';
    src: url(AireLibreMonoVF.woff2) format('woff2'),
         url(AireLibreMonoVF.woff) format('woff');
    font-style: normal;
    font-weight: normal;
}

a{
    color: currentColor;
}

html{
    font-family: "Aire Libre";
    line-height: 1.3;
    overflow-x: hidden;
    color: var(--noir);
}

body{
}

#btn-menu{
    display: none;
}

header{
    /* display: flex; */
    /* justify-content:stretch; */
    background-color:var(--noir);
    color: white;
    width: 100vw;
    position: fixed;
    top: 0;
    font-size: 1.5rem;
    flex-wrap: wrap;
    z-index: 3;
    font-feature-settings: 'clig' 1;
}

header nav{
    width: 100%;
    background: linear-gradient(90deg, var(--argent) 20%, var(--jaune) 35%, var(--jaune) 75%, var(--argent) 100%);
}

#page-ljc header nav{
    width: 100%;
    background: linear-gradient(90deg, var(--jaune) 20%, var(--argent) 35%, var(--argent) 75%, var(--jaune) 100%);
}

header nav .logo{
    font-size: 10rem;
    margin-top: -4rem;
    margin-bottom: -4.7rem;
    user-select: none;
    text-decoration: none;
}

.epais{
    font-variation-settings: 'wght' 700;
}

.fin{
    font-variation-settings: 'wght' 400;
}

header nav #logo-tal, header nav #logo-ljc{
    -moz-hyphens: none;
    -ms-hyphens: none;
    -webkit-hyphens: none;
    hyphens: none;
    white-space: nowrap;
}

header nav #logo-tal{
    color: var(--jaune);
}

header nav #logo-ljc{
    margin-left: 0.5rem;
    color: var(--argent);
}

#page-ljc header nav #logo-tal{
    color: var(--argent);
}

#page-ljc header nav #logo-ljc{
    color: var(--jaune);
}

#page-ljc #section-ljc{
    border-left-color: var(--jaune);
}

/* #page-ljc #section-tal{
    border-right-color: var(--jaune);
} */

header nav section{
    text-decoration: none;
    text-align: left;
    padding: 1rem 1rem 1.5rem 1rem;
    border: 2px solid var(--noir);
    border-right: none;
    width: 50%;
    margin: 0 !important;
    display: flex;
    flex-direction: row;
}

header nav section .sous-menu{
    display: none;
    text-align: left;
    padding: 0;
    margin-top: 3rem;
    margin-left: 1.5rem;
    margin-bottom: 1rem;
}

header nav section .sous-menu a{
    width: 100%;
    background-color: white;
    color: var(--noir);
    border: 2px solid var(--noir);
    padding: 10px 10px 8px 10px;
    text-decoration: none;
    font-size: 1.35vw;
    line-height: 2.1;
    margin: 0;
}

#content-and-footer{
    z-index: 2;
    position: absolute;
}

#fond{
    height: 100vh;
    width: 100vw;
    background: linear-gradient(10deg, var(--argent) 10%, var(--jaune) 25%, white 35%, var(--jaune) 80%, var(--argent)90%);
    position: fixed;
}

#fond-ljc{
    height: 100vh;
    width: 100vw;
    background: linear-gradient(-10deg, var(--argent) 10%, var(--jaune) 25%, white 35%, var(--jaune) 80%, var(--argent)90%);
    position: fixed;
}

/* #fond-home{
    height: 195vh;
    width: 100vw;
    background: radial-gradient(var(--argent)0%, var(--jaune) 7%, var(--argent) 20%, var(--argent) 30%, var(--jaune)65%, var(--jaune)70%, var(--argent)95%);
    position: fixed;
} */

/* #page-ljc h1, #page-ljc h2, #page-ljc .titre-colonne, #page-ljc .infos-event{
    color: white !important;
} */

#content{
    margin: 9.2rem 3rem 3rem 3rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: start;
    min-height: 78.5vh;
    min-width: 95vw;
}

h1, h2, h3, h4, h5, h6, strong{
    font-weight: normal;
}

#entete{
    display: flex;
    align-items: end;
    justify-content: space-between !important;
    width: 100%;
    flex-wrap: wrap;
    margin-bottom: 0.7rem;
}

h1{
    font-size: 3rem;
    color:var(--noir);
    text-transform: uppercase;
    /* width: 100%; */
    margin-bottom: 1rem;
    /* margin-top: 4rem; */
    display: inline-block;
    user-select: none;
    width: 100%;
}

#les_artistes{
    font-size: 2.3rem;
    margin-top: 4rem;
    margin-bottom: 2rem;
}

.filter{
    /* display: flex; */
    align-items: center;
    margin-bottom: 1.5rem;
}

.filter a, #pastevents{
    padding: 0.6rem 0.8rem 0.5rem 0.8rem;
    background-color: white;
    color:var(--noir);
    border: 2px solid var(--noir);
    margin-right: 0.5rem;
    text-decoration: none;
    font-size: 1.1rem;
    line-height: 2.9;
    cursor: pointer;
    user-select: none;
}

.filter a.active, #pastevents.active{
    color: white;
    border-color:white;
    background-color: var(--noir);
}

#etiquettes{
    display: flex;
    justify-content: space-between;
}

.tpsfort, .before-after{
    position: relative;
    border: 2px solid var(--noir);
    background-color: white;
    padding: 0.4rem 0.6rem 0.25rem 0.6rem;
    width: fit-content;
    text-transform: uppercase;
    top: 0;
    margin-bottom: -2.3rem;
    font-size: 1.4rem;
    z-index: 1;
}

.before-after{
    background-color: var(--noir);
    color: white;
    border-color: white;
}

/* #aucun{
    opacity: 0;
} */

#vivant·es{
    color: var(--vivantes);
    border-color: var(--vivantes);
}

#bal{
    color: var(--bal);
    border-color: var(--bal);
}

#monde·s{
    color: var(--mondes);
    border-color: var(--mondes);
}

.pastevent .tpsfort{
    color: var(--gris) !important;
    border-color: var(--gris) !important;
}

.pastevent .before-after{
    background-color: var(--gris);
}

#mapado{
    height: 71vh;
    border: none;
}

#pageweb{
    height: 50rem;
}

#site-rom{
    background-color: white;
    margin-top: 2rem;
    margin-bottom: 4rem;
    height: 45rem;
}

content p{
    color:var(--noir);
}

img{
    width: 100%;
    border: 2px solid var(--noir);
}

.menu{
    display: flex;
}

.menu a {
    margin-left: 1rem;
}

.pagination{
    display: flex;
    justify-content: space-between;
    width: 100%;
    flex-wrap: wrap;
    margin-top: 2.5rem;
    user-select: none;
    /* margin-bottom: 0.5rem; */
}

.pagination a, .pagination span{
    text-decoration: none;
    font-size: 1.5rem;
}

.paginationinactive{
    opacity: 0;
}

.events{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    list-style: none;
    grid-gap: 2rem;
    line-height: 1;
}

.events li{
}

.events a{
    text-decoration: none;
}

.events li a img{
    z-index: 1;
}

.infos{
    margin-top: -1.2rem;
    background-color: white;
    color:var(--noir);
    padding: 1.2rem 0.8rem 0.1rem 0.8rem;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    font-size: 1.1rem;
    z-index: 2;
    border: 2px solid var(--noir);
    line-height: 1.2;
}

.infos :first-child{
    margin-top: 0.2rem;
}

.infos p{
    margin-bottom: 0.2rem;
    width: 100%;
}

.pastevent{
    width: 100%;
    height: 100%;
    opacity: 0.8;
}

.pastevent img{
    filter: grayscale();
}

.pastevent .infos{
    color: var(--gris);
    border-color: var(--gris);
}

.event-colonne{
    margin-top: 1rem;
    width: 50%;
}

#colonne-gauche{
    margin-right: 1.5rem;
}

.siema{
    width: 46vw;
    height: 42rem;
    border: 2px solid var(--noir);
}

.siema div, .siema div div, .siema div div figure, .siema div div figure img{
    height: 100%;
}

.siema div div figure img{
    border: none;
    width: auto;
}

.siema div div figure figcaption{
    border-left: none;
    border-bottom: none;
    margin-top: -2.3rem;
}

.siemabtn{
    width: 100%;
    display: flex;
    justify-content: space-between;
    transform: translate(0, -22.5rem);
    margin-bottom: -2rem;
}

.siemabtn button{
    font-size: 3rem;
    z-index: 1;
    position: relative;
    font-family: "Aire Libre";
    color: var(--noir);
    background-color: white;
    padding: 0rem 1rem;
    border: 2px solid var(--noir);
}

/* #video{
    margin-top: 45%;
} */

#colonne-droite{
    margin-left: 1.5rem;
    padding-right: 0.5rem;
    display: block;
    float: right;
}

#discipline{
    column-span: all;
    text-transform: uppercase;
    font-feature-settings: "cust" 1;
}

#artiste{
    column-span: all;
    font-variation-settings: 'wght' 700;
}

#titre-event{
    text-transform: uppercase;
    font-size: 2rem;
    line-height: 1;
    break-after: avoid;
    break-inside: avoid;
    break-before: avoid;
    column-span: all;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}

#droite #titre-event, #gauche #titre-event{
    font-size: 2.6rem;
}

#date{
    break-after:column;
}

#public{
    break-after: avoid;
}

.gallery{
    list-style: none;
    /* width: 40vw; */
}

#etiquettes-event{
    display: flex;
    margin-bottom: 0.5rem;
}

#etiquettes-event p{
    margin-right: 0.5rem;
    margin-bottom: 0.5rem;
}

.infos-event{
    list-style: none;
    color: var(--noir);
    /* width: 50vw; */
    column-count: 2;
    font-size: 1.1rem;
}

.infos-event #titre-event{
    font-size: 3.5rem;
}

#description{
    color: var(--noir);
    font-size: 1.1rem;
    margin-top: 2rem;
    margin-bottom: 2rem;
}

#description p{
    margin-bottom: 1.5rem;
}

.petitesinfos{
    margin-bottom: 1rem;
}

.petitesinfos summary{
    font-size: 1.2rem;
    width: fit-content;
    padding-right: 1rem;
}

.petitesinfos .textarea{
    border-top: 2px solid var(--noir);
}

#bouton-billets{
    display: inline-block;
    padding: 0.6rem 0.6rem 0.3rem 0.6rem;
    font-size: 1.5rem;
    text-decoration: none;
    background-color: white;
    color: var(--noir);
    border: solid 2px var(--noir);
    right: 2rem;
    top: 9.5rem;
    position: fixed;
}

#droite #categories{
    color: var(--noir);
}


/* Pages infos pratiques et à propos */

.container{
    width: 100%;
    display: flex;
    align-content: space-between !important;
    flex-wrap: wrap;
    min-height: 71vh;
    align-items: flex-start;
}

.subcontainer{
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-wrap: nowrap;
}

.intro-page-grille{
    margin-top: 0rem !important;
    width: 100%;
    margin-bottom: 2rem;
    background-color: white;
    border: 2px solid var(--noir);
    padding: 1.2rem 1.5rem 0rem 1.5rem;
    font-size: 1.1rem;
    max-width: 1100px;
}

.intro-page-grille p{
    margin-bottom: 1.2rem;
}

.text-colonne{
    width: 50%;
}

.text-colonne .titre-colonne{
    color: var(--noir);
    font-size: 2.3rem;
    text-transform: uppercase;
    margin-bottom: 1rem;
    margin-top: 0;
}

details summary{
    color: var(--noir);
    font-size: 1.7rem;
    background-color: white;
    padding: 10px;
    border: 2px solid var(--noir);
    cursor: pointer;
    user-select: none;
    list-style-type: '→ ';
}

details[open] > summary{
    color: white;
    background-color: var(--noir);
    list-style-type: '↓ ';
}

details{
    margin-bottom: 1rem;
}

.textarea{
    background-color: white;
    color: var(--noir);
    padding: 24px 22px 0px 22px;
    border-right: 2px solid var(--noir);
    border-bottom: 2px solid var(--noir);
    border-left: 2px solid var(--noir);
}

.diffusions{
    border-top: 2px solid var(--noir);
    width: 100%;
    min-width: 87vw;
    column-count: 2;
    column-gap: 22px;
    padding-bottom: 22px;
}

.diffusions h2{
    -webkit-column-break-after: avoid;
}

.diffusions p{
    -webkit-column-break-before: avoid;
}

.diffusions figure{
    -webkit-column-break-before: avoid;
}

.textarea h1, h2, h3, h4, h5, h6{
    text-transform: uppercase;
    line-height: 1;
}

.textarea h1, h2{
    font-size: 2rem;
    margin-bottom: 0.5rem;
    margin-top: 2rem;
}

.textarea h3, h4, h5, h6{
    font-size: 1.6rem;
    margin-bottom: 0.5rem;
    margin-top: 2rem;
}

.textarea :first-child{
    margin-top: 0;
}

.textarea p {
    font-size: 1.1rem;
    margin-bottom: 1.3rem;
    margin-top: 0.5rem;
    break-inside: avoid;
    break-before: avoid;
}

figcaption{
    font-size: 0.9rem;
    background-color: white;
    z-index: 10;
    position: relative;
    border: 2px solid var(--noir);
    padding: 0.4rem 0.7rem 0.2rem 0.7rem;
    width: fit-content;
    margin-bottom: 1rem;
    margin-top: -2.43rem;
}

.textarea a{
    text-decoration: none;
    border-bottom: 2px solid var(--noir);
}

.textarea figure ul, .logos-partenaires {
    list-style-type: none;
    display: flex;
    flex-wrap: wrap;
}

.textarea figure ul li, .logos-partenaires li {
    margin-right: 20px;
    width: fit-content;
    margin-bottom: 0.5rem;
}

.textarea figure ul li img, .logos-partenaires li img{
    height: 70px;
    width: auto;
    border: none;
}

#mentions-legales{
    color: var(--noir);
}


footer{
    width: 100%;
    background-color:var(--noir);
    padding: 2rem 2rem 0.6rem 2rem;
    color:white;
    display: flex;
    justify-content: space-between;
}

.colonne{
    color:white
}

#colonne-a p .lien-reseaux{
    font-size: 3rem;
    text-decoration: none;
    margin-top: -1rem;
    display: inline-block;
}

#colonne-b p a, #colonne-c a, #colonne-d p a{
    text-decoration: none;
    border-bottom: 1.5px solid white;
}

footer div p{
    margin-bottom: 1.2rem;
}

.footer-underline{
    color: var(--jaune);
    /* border-bottom: 1px solid var(--jaune); */
    margin-bottom: 0rem;
    width: fit-content;
}

.ljc-gauche{
   padding-right: 3rem;
   width: 40%;
}

.ljc-droite{
    width: 60%;
 }

#ljc-descritption{
    width: 100%;
}

.ljc-membres{
    grid-template-columns: repeat(2, 1fr);
}

.nom-ljc-membre{
    margin-bottom:0.5rem !important;
}

.ljc-decription{
    color:var(--noir);
    background-color: white;
    border: var(--noir) 2px solid;
    margin-bottom: 2rem;
    padding: 1.2rem;
    font-size: 1.5rem;
}

.ljc-nom{
    margin-bottom: 2rem !important;
}

.ljc-m-description{
    margin-top: 0rem !important;
    color: var(--noir) !important;
    margin-bottom: 2rem;
    background-color: white;
    border: 2px solid var(--noir);
    padding: 25px 30px 5px 30px;
}

#ljc-events{
    /* width: 50vw; */
    grid-template-columns: repeat(2, 1fr);
}

#ljc-events #titre-event{
    margin-bottom: 0;
}

#droite ul li .infos #titre-event{
    font-size: 2rem;
    margin-bottom: 0.5rem;
}


iframe{
    width: 100%;
    height: 410px;
    border: var(--noir) 2px solid;
}


.ljc-event-colonne .infos-event{
    column-count: 1;
    margin-bottom: -1rem;
}

.ljc-event-colonne #titre-event{
    break-after: auto;
    break-inside: auto;
    break-before: auto;
    margin-top: 0;
}

.dates h3{
    margin-bottom: 1rem;
    border-bottom: var(--noir) 2px solid;
    padding: 0rem 1rem 0.4rem 1rem;
    text-transform: uppercase;
    background-color: var(--noir);
    color: white !important;
    font-size: 2rem;
}

.dates{
    border: var(--noir) 2px solid;
    margin-bottom: 2rem;
}

.dates div{
    padding: 1rem 2rem 0.7rem 2rem;
}

.ljc-event-colonne #distribution{
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
}

.production{
    font-size: 0.8rem !important;
}

#description h3{
    margin-bottom: 0.5rem;
    width: auto;
    text-transform: uppercase;
    color: var(--noir);
}

#description ul li{
    margin-bottom: 0.2rem;
}

#description a{
    border-bottom: var(--noir) 1.5px solid;
    text-decoration: none;
}

.fichiers{
    list-style: none;
    margin-bottom: 1.5rem;
}

#prochains-rdv{
    margin-top: -0.5rem;
}

#infos-du-moment{
    margin-top: 2rem;
}



/* 
—————————————————————————————————————
——————————— MEDIA QUERIES ———————————
—————————————————————————————————————
*/



/* HOVER */

@media (hover: hover) {

header nav .logo:hover{
    animation: animlogos 0.8s ease;
}

@keyframes animlogos {
    0%{
        font-variation-settings: 'wght' 700;
    }
    50%{
        font-variation-settings: 'wght' 520;
    }
    100%{
        font-variation-settings: 'wght' 700;
    } 
}

header nav:hover .logo{
    font-feature-settings: "ss01" 1;
    font-variation-settings: 'wght' 700;
    font-size: 24rem;
    width: 49%;
}

header nav:hover .sous-menu{
    display: block !important;
    float: left;
    width: 49%;
}

.sous-menu a:hover{
    border-color: white;
    color:white;
    background-color: var(--noir);
}

.filter a:hover, #pastevents:hover{
    color: white;
    border-color:white;
    background-color: var(--noir);
}

.pagination a:hover{
    cursor: pointer;
}

#prevpage:hover{
    animation: rebondpaginationprev 0.5s linear;
}

@keyframes rebondpaginationprev {
    0%{
        margin-left: 0;
        margin-right: 0;
    }
    50%{
        margin-left: -1rem;
        margin-right: 1rem;
    }
    100%{
        margin-left: 0;
        margin-right: 0;
    }
}

#nextpage:hover{
    animation: rebondpaginationnext 0.5s linear;
}

@keyframes rebondpaginationnext {
    0%{
        margin-left: 0;
        margin-right: 0;
    }
    50%{
        margin-left: 1rem;
        margin-right: -1rem;
    }
    100%{
        margin-left: 0;
        margin-right: 0;
    }
}

.events li:hover img{
    border-color: white;
}

.events li:hover .infos{
    background-color:var(--noir);
    color:white;
    border-color: white;
}

#bouton-billets:hover{
    background-color: var(--noir);
    color: white;
    border-color: white;
}

details summary:hover{
    color: white;
    background-color: var(--noir);
    animation: rebond 0.5s linear;
}

@keyframes rebond {
    0%{
        padding-left: 10px;
    }
    50%{
        padding-left: 1.2rem;
    }
    100%{
        padding-left: 10px;
    }
}

.textarea a:hover{
    border-width: 3px;
    margin-left: 3px;
}

#colonne-b p a:hover, #colonne-c a:hover, #colonne-d p a:hover{
    border-bottom-width: 2.5px;
}

#description a:hover{
    border-width: 2.5px;
    margin-left: 0.2rem;
}

.siemabtn button:hover{
    background-color: var(--noir);
    color: white;
    border-color: white;
    cursor: pointer;
}

}



/* ÉCRANS PLUS GRANDS */


@media only screen and (min-width: 2000px) {

    header nav section .sous-menu a{
        font-size: 1.6rem;
    }

    #content{
        min-width: 96.5vw;
    }

    .events{
        grid-template-columns: repeat(5, 1fr);
    }

    .siema{
        width: 48vw;
        height: 60rem;
    }

    .siemabtn{
        transform: translate(0, -32.5rem);
    }

}



/* ÉCRANS PLUS PETITS */

@media only screen and (max-width: 1450px) {

    .events{
        grid-template-columns: repeat(3, 1fr);
    }

    #prochains-rdv + .events, #infos-du-moment + .events{
        grid-template-columns: repeat(4, 1fr) !important;
    }

    .menu section{
        display: flex;
        flex-wrap: wrap;
    }

    .menu section a, .menu section div {
        width: 100%;
    }

    .logo{
        height: 13rem;
    }

    .sous-menu{
        margin-top: 16rem !important;
    }

    header nav section .sous-menu a{
        padding: 8px 8px 6px 8px;
        z-index: 20;
    }

    @media (hover: hover) {

        header nav:hover .logo{
            width: 100%;
            font-size: 21rem;
        }
        
        header nav:hover .sous-menu{
            width: 100%;
            font-size: 1.1rem;
            margin-bottom: 0;
        }

    }

    header nav{
        background: linear-gradient(90deg, var(--noir) 35%, var(--jaune) 50%, var(--jaune) 75%, var(--noir) 100%);
    }

    #page-ljc header nav{
        width: 100%;
        background: linear-gradient(90deg, var(--jaune) 35%, var(--noir) 50%, var(--noir) 75%, var(--jaune) 100%);
    }

    footer{
        flex-wrap: wrap;
        /* padding-bottom: 0.5rem; */
    }

    footer #colonne-a{
        margin-bottom: -1rem;
    }

}


@media only screen and (max-width: 1100px) {

    #content{
        min-width: 85vw;
    }

    .events{
        grid-template-columns: repeat(2, 1fr);
    }
    .diffusions{
        column-count: 1;
    }

}



/* TÉLÉPHONE */

@media only screen and (max-width: 800px) {

    html, body{
        /* width: 100vw !important; */
        font-size: 75%;
    }

    #content{
        min-width: 80vw;
    }

    #btn-menu{
        display: block;
        text-align: center;
        width: fit-content;
        position: fixed;
        padding: 0.4rem 1rem 0.2rem 1rem;
        border: 1.5px solid white;
        background-color: var(--noir);
        right: 0;
        font-size: 2rem;
        font-feature-settings: "clig" 0;
    }

    header nav{
        flex-wrap: wrap;
    }

    header nav section{
        width: 100%;
    }

    .menu{
        display: none;
    }

    #btn-menu.open{
        background-color: white;
        color: var(--noir);
        border-color: var(--noir);
        font-feature-settings: "clig" 1;
        padding: 0.2rem 0.8rem 0rem 0.8rem;
    }

    .show{
        display: flex;
    }

    .show #section-tal{
        border-bottom: none;
        background: linear-gradient(180deg, var(--noir) 30%,  var(--jaune) 100%);
    }

    .show #section-ljc{
        background: linear-gradient(180deg, var(--jaune) 30%,  var(--noir) 100%);
    }

    #page-ljc .show #section-tal{
        border-bottom: none;
        background: linear-gradient(180deg, var(--jaune) 30%,  var(--noir) 100%);
    }

    #page-ljc .show #section-ljc{
        background: linear-gradient(180deg, var(--noir) 30%,  var(--jaune) 100%);
    }

    #page-ljc #section-ljc{
        border-left-color: var(--noir);
        border-top-color: var(--jaune);
    }

    .show .logo{
        font-feature-settings: "ss01" 0;
        font-variation-settings: 'wght' 700;
        font-size: calc(9rem + 15vw);
        margin-top: -4.5rem;
        margin-bottom: -5rem;
        margin-left: 0.2rem;
        height: auto;
    }

    .show section{
        display: flex;
        justify-content: space-around;
        align-items: center;
        align-content: center;
    }
    
    .show  .sous-menu{
        display: block;
        margin-top: 0 !important;
        margin-bottom: 0.5rem;
    }

    .show .sous-menu a{
        line-height: 2 !important;
        font-size: 1.4rem;
        padding: 7px 7px 5px 7px;
        border-width: 1.5px;
    }

    .show #logo-ljc{
        margin-left: -2rem;
        margin-right: -3rem;
    }

    header a{
        /* width: 50%; */
        border-width: 1px;
    }

    #content-and-footer{
        /* width: 100vw; */
        margin: 0;
        padding: 0;
    }

    #entete{
        /* margin-top: 16rem; */
    }

    .filter{
        flex-wrap: wrap;
    }

    .filter a{
        margin-bottom: 0.5rem;
    }

    #content{
        margin-top: 0;
        margin-left: 2rem;
        margin-right: 2rem;
    }

    h1{
        margin-top: 2rem !important;
        margin-bottom: 2rem;
        line-height: 1;
    }

    #infos-du-moment{
        margin-top: 4rem !important;
    }

    .events{
        margin-top: -0.5rem;
        grid-template-columns: repeat(1, 1fr);
    }

    #prochains-rdv + .events, #infos-du-moment + .events{
        grid-template-columns: repeat(1, 1fr) !important;
    }

    .infos #categories{
        /* text-align: right;
        margin-top: 2.7rem;
        font-size: 1.3rem; */
        display: none;
    }

    .gallery{
        width: 100%;
        margin-top: 14rem;
    }

    #bouton-billets{
        right: 2.1rem;
        top: 5rem;
        position: sticky;
        float: right;
        text-align: right;
        width: max-content;
        margin-left: auto;
        margin-bottom: -3rem;
    }

    .infos-event{
        width: 100%;
        column-count: 1;
    }

    #titre-event{
        break-after: auto;
        break-inside: auto;
        break-before: auto;
    }

    #date{
        break-after: avoid;
        margin-bottom: 1rem;
    }
    

    #description, #distribution{
        width: 100%;
    }

    #content{
        padding: 0;
    }

    .textarea{
        /* margin-top: -5rem; */
        margin-left: 0;
        margin-right: 0;
    }

    .textarea h2{
        font-size: 2.5rem;
        margin-top: 0.5rem;
    }

    .textarea h3{
        font-size: 1.7rem;
    }

    #description{
        margin-top: 2rem;
    }
    
    #distribution{
        margin-top: 2rem;
        margin-bottom: 2rem;
    }

    .colonne{
        width: 100%;
        margin-bottom: 1.5rem;
    }

    .event-colonne{
        width: 100%;
        margin-top: 3rem;
    }

    .siema{
        width: 87vw;
        height: 23rem;
    }

    .siemabtn{
        transform: translate(0, -13.5rem);
    }

    figure iframe{
        height: 35rem;
    }

    .ljc-nom{
        margin-top: 3rem;
        margin-bottom: 2rem;
    }

    .ljc-m-description{
        margin-top: 1.5rem;
        margin-bottom: 0rem;
    }

    .ljc-gauche{
        padding-right: 0;
    }

    #ljc-events{
        width: 100%;
        grid-template-columns: repeat(1, 1fr);
    }

    .ljc-gauche .gallery{
        margin-top: 2.5rem;
    }

    iframe{
        height: 200px;
    }

    .subcontainer{
        flex-wrap: wrap;
    }

    .text-colonne{
        width: 100%;
    }

    #colonne-gauche{
        margin-right: 0;
        margin-bottom: 0;
    }

    #colonne-droite{
        margin-left: 0;
        padding-right: 0;
        margin-top: 0;
    }

    #colonne-droite h2{
        margin-top: 1.5rem;
    }

    .logos-partenaires{
        flex-wrap: wrap;
        margin-top: 1.5rem;
    }

    .no-phone-display{
        display: none;
    }

    .pagination{
        margin-top: 3rem;
        margin-bottom: -1rem;
    }

    .pagination a{
        font-size: 2.5rem;
        margin-top: -1rem;
    }

    footer .colonne{
        width: 100%;
    }

    footer .colonne p, footer .colonne a{
        font-size: 1.2rem;
    }

    footer #colonne-a p .lien-reseaux{
        font-size: 4.5rem;
    }

    footer #colonne-d{
        margin-bottom: 0.3rem;
    }

}