/*-----PAGE ENTREE------*/

body{
    cursor: url("../images/12_couverture/curseur.png"), pointer;
}

h1.title{
    margin-top: 30%;
    font-size: 500%;
    text-align: center;
    position: relative;
    z-index: 2;
    color: white;
    width:80%;
    background-color: black;
    margin-left:auto;
    margin-right:auto;
}

.gif {
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 1;
    width: 100%;
    filter: contrast(90);
    height:100%;
    object-fit:cover;
}

a.entry {
    color: #42FF00;
    text-decoration: none;
}

/*-----PAGE PRINCIPALE------*/

@media screen and (max-width:800px) {
    #article{
        display: block;
    }

    #colonnegauche{
        width: 98%;
        margin-left: 1%;
        margin-right: 1%;
    }

    #colonnedroite{
        width: 98%;
        margin-left: 1%;
        margin-right: 1%;
    }

    #double{
        display: block;
    }

    #boite1930{
        height: auto;
    }

    #boite1954{
        height: auto;
    }

    #boite1958{
        height: auto;
    }

    #boite1948{
        height: auto;
    }

    #boite1952{
        height: auto;
    }

    #boite1953{
        height: auto;
    }

    #boite1957{
        height: auto;
    }

    #boite1959{
        height: auto;
    }

    #boite1954bis{
        height: auto;
        width:100%;
        margin-right: 0%;
        margin-top: 10px;
        margin-bottom: 10px;
    }

    #boite1956{
        height: auto;
        width:100%;
        margin-left: 0%;
        margin-top: 10px;
        margin-bottom: 10px;
    }

}

article{
    display: flex;
    margin:0px;
}

.lys{
    height: 80px;
}

.images{
    vertical-align: middle;
    filter: grayscale(100%);
    filter: contrast(10);
    position: relative;
    width: 100%;
}

.couverture{
    vertical-align: middle;
    position: relative;
    width: 100%;
}

.couverture:hover{
    transform: rotateY(180deg);
}

.titre{
    border: solid black 1px;
    width: 98%;
    margin-left: 1%;
    margin-right: 1%;  
    margin-top: 10px;
    margin-bottom: 0px;  
    vertical-align: middle;
    display: flex;
}

img.images:hover {
    mix-blend-mode: screen;
  -webkit-filter: grayscale(100%) contrast(200%);
  filter: grayscale(100%) contrast(100%);
  opacity: 1;
}

.animation{
    animation-name: tourne;
    animation-duration: 3s;
    animation-iteration-count: infinite;
}

@keyframes tourne {
    0% {
        transform: rotateY(0deg);
    }

    100% {
        transform: rotateY(360deg);
    }
}

h1.TitrePage {
    font-size: 8rem;
    line-height: 7.6rem;
    text-align:center;
    margin: 0PX;
}

h1:hover{
      text-shadow: 0 0 15px #F7FF00;    
}
h2 {
    font-size: 3.8rem;
    line-height: 3.4rem;
    margin: 10px;
}

h2:hover{
      text-shadow: 0 0 15px #F7FF00;
}

h3{
    font-size: 2rem;
    line-height: 2rem;
    margin: 10px;
}

p {
    font-size: 2.5rem;
    line-height: 2.4rem;
    margin: 10px;
}

.vert {
   background: #1BFF00;
}

.vert img {
  mix-blend-mode: screen;
  -webkit-filter: grayscale(100%) contrast(200%);
  filter: grayscale(100%) contrast(200%);
  opacity: 1;
}


.bleu {
   background: #001BFF;
}

.bleu img {
  mix-blend-mode: screen;
  -webkit-filter: grayscale(100%) contrast(200%);
  filter: grayscale(100%) contrast(200%);
  opacity: 1;
}

.filtered img {
  mix-blend-mode: screen;
  -webkit-filter: grayscale(100%) contrast(200%);
  filter: grayscale(100%) contrast(200%);
  opacity: 1;
}

.colonnegauche{
    padding: 0px;
    width: 63.5%;
    margin-left:1%;
    margin-right: 0.5%
}

.colonnedroite{
    padding: 0px;
    width: 33.5%;
    margin-left:0.5%;
    margin-right: 1%
}

.boite1930{
    overflow: scroll;
    margin-left: 0px;
    margin-right: 0px;  
    margin-top: 10px;
    margin-bottom: 10px; 
    width: 100%;
    height:908px;
    border: solid black 1px;
}

.double{
    width: 100%;
    display: flex;
    margin: 0px;
    padding: 0px;
}

.boite1954bis{
    overflow: scroll;
    margin-left: 0px;
    margin-right: 0.63%;  
    margin-top: 0px;
    margin-bottom: 0px; 
    width: 49.37%;
    height:448px;
    border: solid black 1px;
}

.boite1956{
    overflow: scroll;
    margin-left: 0.63%;
    margin-right: 0px;  
    margin-top: 0px;
    margin-bottom: 0px; 
    width: 49.37%;
    height:448px;
    border: solid black 1px;
}

.boite1957{
    overflow: scroll;
    margin-left: 0px;
    margin-right: 0px;  
    margin-top: 10px;
    margin-bottom: 10px; 
    width: 100%;
    height:898px;
    border: solid black 1px;
}

.boite1959{
    overflow: scroll;
    margin-left: 0px;
    margin-right: 0px;  
    margin-top: 10px;
    margin-bottom: 10px; 
    width: 100%;
    height:898px;
    border: solid black 1px;
}

.boite1948{
    overflow: scroll;
    width: 100%;
    margin-left: 0px;
    margin-right: 0px;  
    margin-top: 10px;
    margin-bottom: 10px; 
    height:448px;
    border: solid black 1px;
}

.boite1952{
    overflow: scroll;
    margin-left: 0px;
    margin-right: 0px;  
    margin-top: 10px;
    margin-bottom: 10px; 
    width: 100%;
    height:448px;
    border: solid black 1px;
}

.boite1953{
    overflow: scroll;
    margin-left: 0px;
    margin-right: 0px;  
    margin-top: 10px;
    margin-bottom: 10px; 
    width: 100%;
    height:448px;
    border: solid black 1px;
}

.boite1954{
    overflow: scroll;
    margin-left: 0px;
    margin-right: 0px;  
    margin-top: 10px;
    margin-bottom: 10px; 
    width: 100%;
    height:898px;
    border: solid black 1px;
}

.boite1958{
    overflow: scroll;
    margin-left: 0px;
    margin-right: 0px;  
    margin-top: 10px;
    margin-bottom: 10px; 
    width: 100%;
    height:898px;
    border: solid black 1px;
}

.boite1960{
    border: solid black 1px;
    width: 98%;
    margin-left: 1%;
    margin-right: 1%;  
    margin-top: 0px;
    margin-bottom: 10px;  
}

.boitenow{
    border: solid black 1px;
    width: 98%;
    margin-left: 1%;
    margin-right: 1%;  
    margin-top: 0px;
    margin-bottom: 10px;  
}