main > h1{
    color: rgb(var(--couleur-3));
    text-align: center;
    font-style: italic;
}

#moment{
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 30px;
    padding: 20px;
    width: 70%;
    margin: 20px auto;
    margin-bottom : 50px;
    border: 2px solid rgb(var(--couleur-3));
    border-radius: 15px;
}

#moment > div{
    display : flex;
    flex-direction: column;
}

#moment img{
    max-width: 100%;
    max-height: 100%;
}

/* Label du produit */
#moment h3{
    margin: 0;
    color: rgb(var(--couleur-3));
    font-size: 18pt;
}

#moment a {
    color : rgb(var(--couleur-3));
    font-size : 18px;
    text-decoration: underline;
    margin-bottom : 15px;
}

#image-container {
    width : 100%;
    padding : 20px auto;
    display : flex;
    justify-content: space-evenly;
    align-items: center;
    margin-top : 70px;
    margin-bottom : 70px;
}

#image-container a {
    color : rgb(var(--couleur-3));
    text-decoration: underline;
    font-weight : 500;
}

#image-container > img {
    width : 50%;
}

#image-container > div {
    display : flex;
    flex-direction: column;
    align-items: center;
    width : 40%;
    height : 100%;
}

#image-container:nth-of-type(1) {
    flex-direction: row-reverse;
}

#image-container:nth-of-type(2) {
    flex-direction: row;
}

#image-container:nth-of-type(3) {
    flex-direction: row-reverse;
}

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

/* AVANT & APRES */

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

.avant_apres{
    width: 60%;
    /* background: linear-gradient(90deg, rgba(var(--couleur-3),1) 20%, rgba(var(--couleur-2),1) 80%); */
    border: 1px solid rgb(var(--couleur-2));
    margin: 10px auto;
    padding: 15px;
}

.avant_apres:last-of-type{
    margin-bottom: 30px;
}

.avant_apres > div:first-of-type{
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "avant apres"
    "div_avant div_apres";
    column-gap: 50px;
    row-gap: 15px;
}

#avant{
    grid-area: avant;
}

#apres{
    grid-area: apres;
}

#div_avant{
    grid-area: div_avant;
}

#grid_apres{
    grid-area: div_apres;
}

/* Entêtes */
.avant_apres > div:first-of-type p{
    text-align: center;
    font-size: 24pt;
    color: rgb(var(--couleur-3));
    margin: 0;
}

.avant_apres > div:first-of-type > div{
    max-height: 400px;
}

.avant_apres > div:first-of-type > div > img{
    max-width: 100%;
    max-height: 100%;
    height: auto;
    width: auto;
    transition: all 0.2s;
}

.avant_apres > div:first-of-type > div > img:hover{
    transform: scale(1.1);
    cursor: zoom-in
}

/* Description de la cuisine du moment */
.avant_apres > p{
    font-size: 14pt;
}

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

/* ZOOM D'IMAGE */

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

#arriere_plan{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(1,1,1,0.3);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    animation: fadeIn 0.1s linear;
    z-index: 999;
}

#arriere_plan:hover{
    cursor: zoom-out;
}

#a_zoomer{
    width: 98%;
    height: 98%;
    object-fit: contain;
}

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

/* KEYFRAMES */

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

@keyframes fadeIn {
    0% {opacity: 0;}
    100% {opacity: 1;}
}

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

/* RESPONSIVE */

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

/* TAILLE 2 : Tablette (portrait) 768px -> 959px */

@media screen and (max-width: 959px){
    .avant_apres{
        width: 80%;
    }
    
}

/* TAILLE 3 : Mobile max 767px */

@media screen and (max-width: 767px){
    .avant_apres > div:first-of-type{
        display: flex;
        flex-direction: column;
    }
    .avant_apres > div:first-of-type > div{
        max-height: none;
    }

    #image-container {
        flex-direction: column !important;
        width : 100%;
    }

    #image-container > img {
        height : unset;
        width : 90%;
    }

    #image-container > div {
        width : 100%;
    }

    #image-container p, #image-container h2 {
        width : 90%;
    }

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

    #moment img {
        width : 100%;
    }
}