/* MOBILE FIRST */

:root {
    --main-color: grey;
    --light-shadow: 175, 175, 175;
    --dark-shadow: 102, 102, 102;
    --wrapper-light-shadow: 163, 163, 163;
    --wrapper-dark-shadow: 87, 87, 87;
    /*--light-shadow: 1, 175, 1;*/
    /*--dark-shadow: 1, 102, 1;*/
    /*--wrapper-light-shadow: 1, 163, 1;*/
    /*--wrapper-dark-shadow: 1, 87, 1;*/
    --dark-main-color: darkgrey;
    --button: #5cd2d9;
    --button-hover: #5cd2d9;
    --see-soon: #d99d5c;
    /*--see-soon: darkorange;*/
    --see-very-soon: #d95e5c;
    /*--see-very-soon: darkred;*/
    --bar-color: #232323;
    --main-dark-grey: #343a40;
    --medium-grey: #4e4e4e;
    --background-color: #676666;
    --light-grey: #afafaf;
}

#debug {
    display: block;
}

body {
    background: var(--main-color);
    color: white;
    width: 100%;
    place-items: center;
    font-size: 1.1em;
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    margin: 0px;
}

div#numTitre {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.note {
    float: right;
    margin-right: 10px;
}

.sepAttRefDeVu {
    border: none;
    border-top: 1px dashed white;
}

form { margin: 0px; }
.updateButton { display: inline; }
.newMonth {
    background-color: white;
    color: var(--main-color);
    margin: 0;
    text-align: center;
}
#secondChoice, #thirdChoice {
    position: fixed;
    top: 50%;
    left: 50%;
    /* bring your own prefixes */
    transform: translate(-50%, -50%);
}
#secondChoice, #thirdChoice { width: 100%; margin: auto; }

#secondChoice input { width: 60%; color: white; }
#secondChoice button { width: 60%; color: white; margin-bottom: 15px; }
#thirdChoice button { margin-bottom: 15px; }
#secondChoice button:hover { color: var(--button); background-color: white; }
#secondChoice img, #thirdChoice img {
    height: 25px;
    margin-right: 10px;
    vertical-align: middle;
}

ul#btnSecondChoice { margin: 0px; padding: 0px; }
#btnSecondChoice button { min-width: 45%; margin: 6px; }

#menu { margin-top: 10px; }

p#pageDate {
    margin: 0px;
    font-style: italic;
    font-size: 0.9em;
    border-bottom: 1px solid white;
}

#pageDateCeiling {
    margin: 0px 0px 8px 0px;
}

#dateLogin {
    margin: 10px 0px 25px 0px;
}

.choice {
    color: white;
    padding: 10px;
    font-size: 22px;
    background-color: var(--button);
}

input.choice:hover {
    background-color: white;
    color: var(--button);
    cursor: pointer;
}

.choice button:hover, button.choice:hover {
    background-color: white;
    color: var(--button);
    cursor: pointer;
}

#content {
    width: 100%;
    text-align: center;
    margin: auto;
}

.brickForm {
    text-align: left;
}

.formInvisible{
    visibility: hidden;
    float: left;
    width: 0px;
    height: 0px;
 }

#attentes ul {
    text-align: left;
    list-style: none;
    padding: 0px;
    margin: 0px;
}

#num { display: none; }
#alpha { display: none; }

input {
    color: white;
    background: lightgrey;
}

input#rechFilter {
    margin: 0px;
}

#rechFilter, #rechRea, #rechAuteur, #rechFilterLecture {
    height: 32px;
    color: black;
    width: 45%
}

input#btnHome, input#listAtt, input#listStat  {
    background-color: transparent;
    border: none;
}

input#btnHome.actif, input#listAtt.actif, input#listStat.actif {
    /*background-color: var(--button);*/
    background-color: transparent;
    border: none;
    color: var(--button);
}

input#btnHome.actif:hover, input#listAtt.actif:hover, input#listStat.actif:hover {
    background-color: transparent;
    cursor: default;
}
#openCollapse {
    vertical-align: top;
}
input#btnHome:hover, input#listAtt:hover, input#listStat:hover, #openCollapse:hover {
    background-color: var(--button-hover);
    cursor: pointer;
}

input, select, #pk {
    border-radius: 6px;
    margin-bottom: 12px;
}

input#nom { color: black; height:25px; width: 200px; }
input#nomLogin, input#dateSysLogin { color: black; height:30px; width: 200px; }
/*#nom {  }*/
#nume { width: 50px; }
#duree, #pages { width: 70px; }
#dateSortie { color: black; width: 138px; }
#dateSys { color: black; width: 172px; }
#jourCrea, #moisCrea { color: black; width: 45px; }
#anneeCrea { color: black; width: 60px; }
#labelDateSys { color: lightgray; font-style: italic; }
#inputDateSys { color: gray; width: 172px; }
#numdate, #numNote, #numtaille, #numBool , #numTitre, #numDateVu, #numDateSys {
    display: flex; justify-content: space-evenly; margin: 10px 15px 0px 15px;
}
#notenote { font-size: 0.85em; font-style: italic; margin: 0px; }
input#nume, input#dateSortie, input#duree, input#pages { margin: 0px; color: black; }

input#backback[type="submit"] {
    background: no-repeat center/80% url('../img/back.png');
    border: none;
    color: transparent;
    height: 40px;
    width: 40px;
    margin-right: 15px;
    margin-bottom: 0px;
}

input#backback[type="submit"]:hover {
    filter: brightness(100%) sepia(10) saturate(50) hue-rotate(155deg);
}

input.updateForm[type="submit"] {
    background: transparent url('../img/update.png') no-repeat center center;
    border: none;
    color: transparent;
    height: 40px;
    width: 40px;
    margin: 0px 0px 0px 10px;
    float: right;
}

input.updateForm:hover {
    background: transparent url('../img/back.png') no-repeat center center;
    background-size: 40px;
    filter: blur(2px);
    cursor: pointer;
}

#backimg, #backimg:focus, #backimg:active {
    background: transparent;
}

/* OEUVRE */

.oeuvre {
    width: 100%;
    border-radius: 6px;
    padding: 4px;
}

.oeuvre select {
    min-width: 120px;
    float: right;
}

.collapseOeuvre {
    display: flex;
}

.picDescription {
    display: flex;
    flex-direction: column;
    margin-right: 20px;
    /*align-items: center;*/
}

.picMedia {
    height: 30px;
    width: 30px;
}

.picType {
    margin-top: 10px;
    margin-left: 5px;
    height: 20px;
    width: 20px;
}

.imgCritique {
    height: 20px;
    margin-bottom: -6px;
    padding: 0px 0px 0px 10px;
}

.oeuvre:hover .imgCritique {
    filter: brightness(100%) sepia(20) saturate(100) hue-rotate(130deg);
}

.backShot {
    background-color: #0cb2af;
}

.backEdit {
    background-color: #a1c65d;
}

.backExport {
    background-color: #fac723;
}

.backImg {
    background-color: #f29222;
}

.backPublish {
    background-color: #e95e50;
}

.backReseau {
    background-color: #936fac;
}

select { height:30px; width: 40px;}

#btnHome, button, #listAtt, #listStat {
    font-size: 1.2em;
    border-radius: 10px;
}
#listLogout {
    font-size: 1em;
    background-color: transparent;
    border: 0px;
    position: absolute;
    right: 0px;
}
#listLogout:hover {
    color: var(--button-hover);
    cursor: pointer;
}

#pk {
    border-radius: 6px;
    width: 90%;
    height: 50px;
}

.miniTxt {
    font-size: small;
    font-style: italic;
}

/* --------- BUTTON RADIO BUTTON ----------- */

.wrapper{
    display: flex;

    box-shadow:  4px 4px 8px rgb(var(--wrapper-dark-shadow)),
                -4px -4px 8px rgb(var(--wrapper-light-shadow));

}

.wrapper .option{
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    border-left: 1px solid var(--dark-main-color);
    cursor: pointer;
    background: var(--main-color);
}

.wrapper .option span{
    padding: 10px 5px;
}

.etat .option {
    height: 50px;
    width: 33%;
}

.type .option {
    height: 40px;
    width: 15%;
}

.formEtat .option {
    width: 25%;
}

.formType .option {
    width: 11.1%;
}

#f1 {
    width: 100%;
    margin-bottom: 20px;
}

#f2 {
    width: 100%;
}

input[type="radio"]{
    display: none;
}

#option-1:checked:checked ~ .option-1,
#option-2:checked:checked ~ .option-2,
#option-3:checked:checked ~ .option-3{
    box-shadow: inset 10px 10px 10px rgb(var(--dark-shadow)),
    inset -6px -6px 16px rgb(var(--light-shadow));
}

#option-1:checked:checked ~ .option-1 span,
#option-2:checked:checked ~ .option-2 span,
#option-3:checked:checked ~ .option-3 span{
    text-shadow: 2px 2px 5px black;
}

/* 2e wrapper*/
#op1:checked:checked ~ .op1,
#op2:checked:checked ~ .op2,
#op3:checked:checked ~ .op3,
#op4:checked:checked ~ .op4,
#op5:checked:checked ~ .op5,
#op6:checked:checked ~ .op6,
#op7:checked:checked ~ .op7{
    box-shadow: inset 10px 10px 10px rgb(var(--dark-shadow)),
    inset -6px -6px 16px rgb(var(--light-shadow));
}

/* wrapper etat */
#opte1:checked:checked ~ .opte1,
#opte2:checked:checked ~ .opte2,
#opte3:checked:checked ~ .opte3,
#opte4:checked:checked ~ .opte4{
    box-shadow: inset 10px 10px 10px rgb(var(--dark-shadow)),
    inset -6px -6px 16px rgb(var(--light-shadow));
}

/* wrapper filtre */
#opt1:checked:checked ~ .opt1,
#opt2:checked:checked ~ .opt2,
#opt3:checked:checked ~ .opt3,
#opt4:checked:checked ~ .opt4,
#opt5:checked:checked ~ .opt5,
#opt6:checked:checked ~ .opt6,
#opt7:checked:checked ~ .opt7,
#opt8:checked:checked ~ .opt8,
#opt9:checked:checked ~ .opt9{
    box-shadow: inset 10px 10px 10px rgb(var(--dark-shadow)),
    inset -6px -6px 16px rgb(var(--light-shadow));
}

/* ------- LA LISTE ---------- */
.spanDate {
    font-size: small;
}
.spanPkoi {
    width: 300px;
}

.notation {
    font-size: 0.7em;
    font-style: italic;
}
.spanTitre {
    font-size: 1.2em;
    font-weight: bold;
}
.spanType { float: right;}
.spanEtat { float: right; margin-left: 10px;}

#listeAttente > li:nth-of-type(even){
    background-color: var(--dark-main-color);
}

li:nth-child(odd) {
    background-color: var(--dark-main-color);
}

#listeAttente li {
    padding: 6px 6px;
}

li.aVoirVite {
    background-color: var(--see-soon);
    border-bottom: 1px solid white;
}

li.aVoirUrgemment {
    background-color: var(--see-very-soon);
    border-bottom: 1px solid white;
}

#rechFilter:focus::placeholder {
    color: transparent;
}

/*            LISTE CRITIQUEMAN             */
.critique {
    display: none;
}

.listeCritique {
    margin: 8px;
}

.listeCritique #listeAttente li {
    background-color: unset;
    padding: 4px 0px;
}

.listeCritique .picDescription {
    flex-direction: row;
    margin-right: 10px;
}

.listeCritique .oeuvre {
    border-radius: 0px;
    padding: 0px;
}

.listeCritique .collapseOeuvre {
    border-radius: 8px;
    padding: 8px;
}

.listeCritique .note {
    float: none;
    margin: 0px;
}

.critiquePicMedia {
    height: 20px;
    mix-blend-mode: difference;
    margin-right: 3px;
    margin-top: 3px;
}

#critique {
    width: 100px;
    font-size: 1em;
    margin: 0px;
    height: auto;
}

.liCritique, .middleCritique, .endCritique, .n3Down {
    display: flex;
}

.liCritique {
    width: 100%;
}

.middleCritique {
    flex-direction: column;
    align-items: flex-start;
    width: 75%;
}

.endCritique {
    flex-direction: column;
    align-items: center;
    width: 25%;
}

.downRight {
    align-self: center;
}



#allCollapseTime {
    position: sticky;
    top: 0px;
    background-color: var(--main-color);
    padding: 10px;
}

#btnAttente { list-style: none; }
#btnEtat { margin-bottom: 10px; }
#btnAttente input, #btnEtat input {
    font-size: 1.5em;
    padding: 20px;
    border-radius: 30%;
}

#listAtt, #listStat { background-color: grey; }

#bande {
    width: 100%;
    background-color: grey;
    text-align: center;
    margin-bottom: 15px;
}

/*_____________STATS_____________*/
#tableStat, #tableMovies {
    margin: 0px auto;
    border-collapse: collapse;
    font-size: 0.8em;
    table-layout: fixed;
    width: 100%;
}

#tableStat tr, th, #tableMovies tr, th {
    border: 2px var(--button) solid;
    border-left: 1px solid var(--button);
    border-right: 1px solid var(--button);
    border-collapse: collapse;
}

/*#tableStat th {*/
/*    width: 9%;*/
/*}*/

#theadStat, #theadMovies {
    background-color: var(--button);
    color: var(--main-color);
}

.tableTotal {
    background-color: var(--button);
    color: var(--main-color);
}

/*LECTURE*/

#listMovies {
    font-size: 0.7em;
}


.spanLivre {
    font-weight: bold;
    text-align: left;
}

#spanDateOriginal {
    width: 10%;
}
#spanDateFr {
    width: 10%;
}
#spanTitreLivre {
    width: 35%;
}
#spanNoteLivre {
    width: 5%;
}
#spanAuteur {
    /*width: 25%;*/
}
#dateLecture {
    width: 13%;
}

/* CSS TABLET */
@media (max-width: 360px) {

    /*body {*/
    /*    background-color: gray;*/
    /*}*/

    #f2.wrapper {
        flex-wrap: wrap;
    }
    #f2.wrapper>* {
        flex: 0 0 33%;
    }

    #content {
        width: 100%;
        font-size: 0.7em;
    }

    .wrapper {
        width: 100%;
    }

    #numdate, #numNote, #numtaille, #numBool, #numTitre, #numDateVu, #numDateSys {
        margin: 10px 15px 0px 15px;
    }
}

@media (min-width: 361px) and (max-width: 490px) {
    #content {
        font-size: 0.7em;
    }

    #numdate, #numNote, #numtaille, #numBool, #numTitre, #numDateVu, #numDateSys {
        margin: 5px 15px 0px 5px;
    }
}

@media (min-width: 491px) and (max-width: 667px) {
    #btnSecondChoice button { min-width: 40%; margin: 8px; }
}

/* CSS TABLET OU MOBILE HORIZONTAL */
@media (min-width: 668px) and (max-width: 849px) {

    /*body {*/
    /*     background-color: orangered;*/
    /*}*/

    #content { width: 80%; }
    .wrapper { width: 80%; }
    #pk { height: 150px; }
    #numdate, #numNote, #numtaille, #numBool , #numTitre, #numDateVu, #numDateSys {
        margin: 10px 60px 10px 60px;
    }
    .choice {
        padding: 20px;
    }

    .listeCritique .picDescription {
        margin-right: 14px;
    }
}

/* CSS DESKTOP */
@media (min-width: 850px) {

    /*body {*/
    /*     background-color: blueviolet;*/
    /*}*/
    #content {
        width: 60%;
    }

    #pk { height: 150px; }
    #numdate, #numNote, #numtaille , #numTitre, #numDateVu, #numDateSys{
        margin: 10px 60px 10px 60px;
    }
    #numBool { margin: 0 auto; }

    /*boutons des menus au début*/
    .choice {
        padding: 30px;
    }
    #thirdChoice {
        width: 80%
    }

    .listeCritique .picDescription {
        margin-right: 20px;
    }

}

/* CSS DESKTOP BIG */
@media (min-width: 950px) {
    /*body {*/
    /*    background-color: darkviolet;*/
    /*}*/

    #btnSecondChoice button { min-width: 30%; margin: 8px; }
    #numBool { width: 60%; }
    #secondChoice {
        width: 80%
    }
}

/* CSS DESKTOP VERY BIG */
@media (min-width: 1200px) {
    #secondChoice, #thirdChoice {
        width: 60%
    }
}