.zindexcontainer {
    text-align:center;
}
.zindex {
    margin:2rem auto;
    position:relative;
    text-align:center;
    width:300px;
}
.zindex img {
    z-index:0;
}
.grid {
    display:grid;
    grid-template-areas:
    "plus lent"
    "plus mult";
    grid-template-columns: 1fr 1fr;
}
#lent {
    grid-area:lent;
}
#mult {
    grid-area:mult;
}
.orange {
    background-color:#FED8B1;
    color:orange;
    margin:auto;
    text-align:center;
}
.orangefonce {
    background-color:orange;
    color:white;
    z-index:1;
    position:absolute;
    display:block;
    width:130px;
    top:200px;
}
.prix {
    font-size:2em;
    font-weight:bold;
}
#plus {
    font-size:3em;
    font-weight:bold;
    grid-area:plus;
}
/*********************************/
.ex1, .ex2 {
    position:relative;
    height:360px;
    margin-bottom:4em;
    width:640px;
}
.ex2 img, .ex1 img {
    position:absolute;
}

.legend {
    position:absolute;
    background-color:rgba(0,0,0,0.5);
    color:white;
    display:block;
    bottom:0;
    width:100%;
}

.leg1 {
    text-align:center;
    padding: 1em;
}
.leg2 {
    display:flex;
    justify-content:center;
    align-items:center;
    height:360px;
    opacity:0;
}
.leg2:hover {
    opacity:1;
}

/*********************************************/

article {
    margin-bottom:2em;
}
.footer {
    position:fixed;
    bottom:0;
    width:100%;
}

nav {
    background-color:#DD5735;
    padding:1em;
    margin:1em 0;
    display:flex;
    justify-content:space-around;
    position:sticky;
    top:1em;
}
nav a {
    color:white;
}
nav a:hover {
    text-decoration:underline;
    color:black;
}