/***** STYLES RESPONSIVE *****/

/* BREAKPOINTS */
/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 320px) {

    /* barre du haut */
    /* pour centrer les élements */
    div.menu-small {
        justify-content: center !important;
    }

    div.menu-small div.menu-toggle {
        margin-left: 0 !important;
    }

}

/* Small devices (portrait tablets and large phones, 600px and up) */
/* @media only screen and (min-width: 600px) {} */
/* Medium devices (landscape tablets, 768px and up) */
/* @media only screen and (min-width: 768px) {...} */

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (max-width: 992px) {
    a.img-link img#imgCS {
        display: none;
    }
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
/* @media only screen and (min-width: 1200px) {...} */

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

    div.menu-small,
    div.titre-small,
    div.dates-small,
    div.vbar-small {
        display: none;
    }
}

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

    /* réinitialiser le body */
    body {
        padding: 0;
        margin: 0;
    }

    /* cacher les éléments desktop */
    div.bg-logo,
    div.conf,
    div.vbar {
        display: none;
    }

    /* bouton hamburger */
    div.menu-toggle {
        cursor: pointer;
        padding: 10px;
    }

    /* barres du hamburger */
    div.menu-toggle div.bar {
        width: 25px;
        height: 3px;
        margin: 5px 1px;
        border-radius: 2px;
        transition: 0.4s;
        background-color: #fff;
    }

    div.menu-toggle.flottant {
        position: fixed;
        bottom: 80px;
        right: 20px;
        border: none;
        border-radius: 100%;
        background-color: #f3f1f1;
        cursor: pointer;
        transition: opacity 0.3s ease;
        opacity: 0;
        pointer-events: none;
        z-index: 2000;
    }

    div.menu-toggle.flottant div.bar {
        background-color: #5f6d81 !important;
    }

    div.menu-toggle.flottant.show {
        opacity: .7;
        pointer-events: auto;
    }

    /* bouton back to top */
    button#backToTop {
        display: flex;
        align-items: center;
        justify-content: center;
        position: fixed;
        bottom: 20px;
        right: 20px;
        width: 47px;
        height: 47px;
        border: none;
        border-radius: 50%;
        background-color: #f3f1f1;
        color: #5f6d81;
        font-size: 1.2rem;
        font-weight: bold;
        cursor: pointer;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s ease;
        z-index: 2000;
    }

    button#backToTop.show {
        opacity: .7;
        pointer-events: auto;
    }


    /* barre du haut */
    div.menu-small {
        display: flex;
        background-color: #8497B0;
        align-items: center;
        flex-wrap: wrap;
        justify-content: flex-start;
    }

    div.menu-small img {
        height: 60px;
    }

    div.menu-small div.logo-cnrs {
        display: flex;
        padding: 10px 0;
        margin-left: 10px;
    }


    /* pour le menu du haut */
    div.menu-small div.menu-toggle {
        z-index: 999;
        margin-left: auto;
    }

    /* NAVIGATION */
    div.vbar-small {
        position: fixed;
        top: 0;
        right: 0;
        height: 100vh;
        padding: 0 20px 20px 20px;
        z-index: 2000;
        background-color: #8497B0;
    }

    /* croix */
    div.vbar-small div.close-nav {
        color: #fff;
        transition: 0.4s;
        font-size: 2rem;
        cursor: pointer;
        text-align: right;
    }

    div.vbar-small div.navigation a {
        text-decoration: none;
    }

    div.vbar-small div.navigation div.goto {
        background-color: #fff;
        padding: 5px;
        margin: 5px 0;
        border-radius: 200px 0px 0px 200px;
        color: #151D25;
        letter-spacing: 0.04em;
        font-size: .7rem;
        font-family: arial;
        font-weight: bold;
        text-align: center;
    }

    div.vbar-small div.navigation a:nth-of-type(1) div.goto {
        background-color: #46509C;
        color: #E7E6E6;
    }

    div.vbar-small div.navigation a:nth-of-type(2) div.goto {
        background: #4C5474;
        color: #E7E6E6;
    }

    div.vbar-small div.navigation a:nth-of-type(3) div.goto {
        background: #757789;
        color: #E7E6E6;
    }

    div.vbar-small div.navigation a:nth-of-type(4) div.goto {
        color: #343232;
    }

    div.vbar-small div.navigation a:nth-of-type(5) div.goto {
        background: #BDAD71;
        color: #E7E6E6;
    }

    div.vbar-small div.navigation a:nth-of-type(6) div.goto {
        background: #CCCCCC;
        color: #343232;
    }

    div.vbar-small div.navigation a:nth-of-type(7) div.goto {
        background: #94A4B9;
        color: #343232;
    }

    div.vbar-small div.navigation a:nth-of-type(8) div.goto {
        background-color: #798699;
        color: #343232;
        margin-top: 20px;
    }

    /* FIN NAVIGATION */

    /* titre */
    div.titre-small {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 20px;
    }

    div.titre-small div.bg-logo,
    div.titre-small div.conf {
        display: unset;
    }

    div.titre-small div.bg-logo img {
        overflow: hidden;
        /* TODO: à corriger, margin et position */
        margin-top: 0;
        max-width: 100%;
        height: auto;
    }

    div.titre-small div.conf {
        width: unset;
        font-size: 1.4rem;
        text-align: left;
        position: unset;
        padding: 10px;
    }

    /* calendrier */
    div.dates-small {
        display: flex;
        color: #fff;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-start;
        gap: 30px;
        margin: 10px
    }

    div.dates-small div.date {
        font-weight: bold;
        font-size: 0.9rem;
    }

    div.dates-small div.date p {
        font-weight: normal;
    }

    div.dates-small div.whitetitle {
        margin-left: 10px;
    }

    /* contenu */
    div.content {
        position: unset;
        min-width: unset;
        margin: 0 auto;
        width: 100%;
    }

    div.content img {
        max-width: 100%;
        height: auto;
    }

    /* aligner les titres de section avec le reste du contenu */
    div.content div[class^="itemtitle"] {
        padding-left: 10px;
    }

    /* sections */
    div.content div.item div.itemcontent1 div {
        position: unset !important;
        margin: 0 !important;
        padding: 10px !important;
    }

    /* aligner les ancres */
    div.content div.item .align-item {
        margin-left: 10px;
    }

    div.content div#ps2 {
        margin: 0 auto !important;
    }

    div.content div#ps2 li {
        margin: 0 20px !important;
    }

    div.content div#ps3 {
        position: unset !important;
        margin: 0 10px !important;
    }

    div.content div#ps3 div.align-list {
        position: unset !important;
    }

    div.content div#ps5 {
        position: unset !important;
        margin: 0 10px !important;
    }

    div.content div#ps7 {
        position: unset !important;
        margin: 0 10px !important;
    }

    div.content div#ps8 {
        position: unset !important;
        margin: 0 10px !important;
    }

    /* logos partenaires */
    div.content p.logos-partenaires {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
    }

    div.content p.logos-partenaires img {
        max-width: 100%;
        height: 60px;
        margin: 0;
    }

}