/* Section de la recette */

*{
    box-sizing: border-box;
}

.global div{
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
}

h1, h2, h3{
    font-family: "DynaPuff", system-ui;
    font-optical-sizing: auto;
}

ol{
    margin: 0;
    padding: 0;
}

ol li{
    padding: 0 5px;
    line-height: 1.3;
}

.global{
    background-color: #e2e614;
}

.global h1{
    font-size: clamp(1rem, 5vw, 3rem);
}

.recette{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    padding: 20px 0;
}

.recette:last-child{
    border-top: 10px dotted #aaa;
    padding-top: 40px;
}

.recette:nth-of-type(odd) .recette__image{
    order: -1;
    transform: rotate(-5deg);
    transition: transform 500ms;
}

.recette:nth-of-type(even) .recette__image{
    transform: rotate(5deg);
    transition: transform 500ms;
}

.recette__div, .recette__image{
    padding: 0 30px;
    flex-grow: 1;
    flex-shrink: 0;
    flex-basis: 330px;
}

.recette__figure{
    display: block;
    border-radius: 5px;
    border: 3px solid rgb(38, 38, 134);
}

.recette__figure img{
    width: 100%;
    object-fit: cover;
    transform: rotateX(5deg);
}

.recette:nth-of-type(odd) .recette__image:hover{
    transform: rotate(0deg);
    transition: transform 500ms;
}

.recette:nth-of-type(even) .recette__image:hover{
    transform: rotate(0deg);
    transition: transform 500ms;
}

.recette__figcaption{
    background-color: #aaaaaaaf;
    text-align: center;
    font-size: 24px;
    font-weight: bold;
}

.svg{
    position: fixed;
    bottom: 10px;
    right: 50px;
    filter: hue-rotate(30deg);
    transition: filter 1s;
}

.svg:hover{
    filter: none;
    transition: filter 1s;
}