/***** STYLES PAR DEFAUT *****/

body {
    /* width: 100%; */
    max-width: 100%;
    /* modifié : empêcher le débordement horizontal */
    font-family: verdana, arial, sans-serif;
    font-size: 10pt;
    background-color: #5F6D81;
    padding: 10px;
}

a:link {
    color: #E9994B
}

a:visited {
    color: #E9994B
}

a:hover {
    color: #D45000
}

a:active {
    color: #E86B18
}

h4 {
    color: #000000;
}

h5 {
    font-size: 80%;
    color: #000000;
}

li {
    line-height: 1.5;
}

div.conf {
    border: 0px solid #E0B834;
    width: 800px;
    position: relative;
    top: 14px;
    left: 5px;
    margin-top: 0px;
    margin-bottom: 0px;
    background: none;
    font-family: Calibri, sans-serif;
    text-align: right;
    text-shadow: 1px 2px #6A6A6A;
    font-size: 140%;
    font-weight: bold;
    color: #FFFFFF;
    letter-spacing: 0px;
}

div.content {
    border: 0px solid #E0B834;
    position: absolute;
    top: 170px;
    right: 310px;
    min-width: 400px;
    /* ligne commentée en prod */
    /* max-width: 700px; */
    margin-top: 0px;
    margin-left: 200px;
}

div.item {
    border: 0px solid red;
}

div.itemtitle1 {
    border: 4px solid #46509C;
    background-color: #46509C;
    position: relative;
    left: 0px;
    top: 0px;
    margin-top: 20px;
    margin-bottom: 10px;
    font-weight: bold;
    color: #E7E6E6;

}

div.itemtitle2 {
    border: 2px solid #4C5474;
    background-color: #4C5474;
    position: relative;
    left: 0px;
    top: 0px;
    margin-top: 20px;
    margin-bottom: 10px;
    font-weight: bold;
    color: #E7E6E6;
}

div.itemtitle3 {
    border: 2px solid #757789;
    background-color: #757789;
    position: relative;
    left: 0px;
    top: 0px;
    margin-top: 20px;
    margin-bottom: 10px;
    font-weight: bold;
    color: #ffffff;

}

div.itemtitle4 {
    border: 2px solid #DCB73A;
    background-color: #DCB73A;
    position: relative;
    left: 0px;
    top: 0px;
    margin-top: 20px;
    margin-bottom: 10px;
    font-weight: bold;
    color: #343232;

}

div.itemtitle5 {
    border: 2px solid #BDAD71;
    background-color: #BDAD71;
    position: relative;
    left: 0px;
    top: 0px;
    margin-top: 20px;
    margin-bottom: 10px;
    font-weight: bold;
    color: #343232;

}

div.itemtitle6 {
    border: 2px solid #CCCCCC;
    background-color: #CCCCCC;
    position: relative;
    left: 0px;
    top: 0px;
    margin-top: 20px;
    margin-bottom: 10px;
    font-weight: bold;
    color: #343232;

}

div.itemtitle7 {
    border: 2px solid #94A4B9;
    background-color: #94A4B9;
    position: relative;
    left: 0px;
    top: 0px;
    margin-top: 20px;
    margin-bottom: 10px;
    font-weight: bold;
    color: #343232;
}

div.itemtitle8 {
    border: 2px solid #798699;
    background-color: #798699;
    position: relative;
    left: 0px;
    top: 0px;
    margin-top: 20px;
    margin-bottom: 10px;
    font-weight: bold;
    color: #343232;
}

div.itemcontent {
    border: 0px solid #E0B834;
    position: relative;
    left: 0px;
    top: 0px;
    margin-top: 0px;
    margin-bottom: 10px;
    font-weight: normal;
    color: #FBF9F9;
    padding: 10px;
}

div.itemcontent1 {
    border: 0px solid #E0B834;
    position: relative;
    background-color: #ffffff;
    opacity: 0.5;
    left: 0px;
    top: 0px;
    margin-top: 0px;
    margin-bottom: 0px;
    font-weight: normal;
    color: #000000;
    padding: 5px;
}


/* BARRE LATERALE VERTICALE */
/* conteneur */
div.vbar {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    background-color: #8497B0;
    min-width: 280px;
    /* overflow-y: auto; */
}

/* logos */
div.vbar div.logo-cnrs {
    text-align: right;
    margin-top: 20px;
    margin-right: 20px;
}

div.vbar div.logo-cnrs img {
    height: 60px;
}

/* date événement */
div.vbar div.date {
    text-align: right;
    margin-right: 30px;
    margin-top: 15px;
    border: 0px solid #748398;
    font-weight: bold;
    font-size: 100%;
    color: #ffffff;
    text-shadow: 1px 1px #6A6A6A;
}

div.vbar div.date p {
    font-weight: normal;
    font-size: 80%;
    text-shadow: 0px 0px #6A6A6A;
    color: #343232;
}

/* ancre go to top */
div.vbar a[href="#TOP"] {
    text-decoration: none;
}

div.vbar div.gotoTOP {
    text-align: right;
    background: none;
    color: #E7E6E6;
    margin-right: 30px;
    font-weight: bold;
    border-radius: 200px 0px 0px 200px;
    font-family: arial;
}

div.vbar div.gotoTOP span {
    text-shadow: 1px 1px #FFFFFF;
    font-size: 20px;
    border-radius: 200px 0px 0px 200px;
}

/* liens de navigation */
div.vbar div.navigation {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

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

div.vbar div.navigation div.goto {
    width: 190px;
    padding: 8px 10px;
    margin-left: auto;

    /* couleurs par défaut */
    background: rgb(240, 175, 34);
    /* Fall-back for browsers that don't support rgba */
    background: rgba(240, 175, 34, .80);
    color: #151D25;

    border-radius: 200px 0px 0px 200px;
    font-family: arial;
    font-weight: bold;
    font-size: 12px;
    letter-spacing: 0.04em;
    text-align: center;
    box-shadow: 4px 2px 3px #6A6A6A;
}

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

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

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

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

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

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

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

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

/* whitetitle */
div.vbar div.whitetitle {
    color: #ffffff;
    width: 215px;
    font-family: Calibri, Arial, Times, sans-serif;
    font-size: 100%;
    margin: 30px auto 0px auto;
}

/* cacher les éléments aux petits et moyens écrans */
div.vbar-small {
    display: none;
}

a.img-link span {
    display: block;
    margin-bottom: 10px;
    font-size: .9rem;
}

/* FIN BARRE LATERALE VERTICALE */

/* BOUTON BACK TO TOP POUR PETITS ET MOYENS ECRANS */
button#backToTop {
    display: none;
}