@import url('https://fonts.googleapis.com/css2?family=Bruno+Ace+SC&family=Nabla&display=swap');
.main1 {max-width: 1200px;margin:auto}
.article2 {margin:1rem 0}

@supports (display: grid) {
    .main1 {
        max-width: 90%;
        margin-left:auto;
        margin-right:auto;
    }

    .article2 {
        margin: 0;
        background:#676767

    }

    .deals {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        grid-gap:1rem
    }
}

@media screen and (max-width: 767px) and(orientation: landscape) { /**Mobile horizontal**/
    .deals {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-gap:3rem
    }
}

@media screen and (max-width: 767px) and(orientation: portrait) { /**Mobile vertical **/
    .deals {
        display: grid;
        grid-template-columns: 1fr;
        grid-gap:3rem
    }
}

.sale-item {
    display: flex;
    flex-flow: column;
    border: 1px solid black;
    border-radius: 1rem;
    padding:2rem
}

.sale-item > h1 {
    margin: 1rem 1rem 0;
    font: normal 1.4rem 'GillSansStdBoldCondensed';
    color:#fff
}

.sale-item > p {
    margin: 0.25em 1rem 1rem;
    font: normal 1.2rem 'Roboto400';
    color:#ccc
}

.sale-item > ul {
    margin: 0 0 1rem;
    font: normal 0.8rem 'Roboto400';
    color: #ccc;
    line-height:1.5em
}

.img1 {
    align-self: center;
    width: 100%;
    object-fit: contain;
    margin-bottom:4rem
}

.sale-item > p > img,
.sale-item > a > img {
    align-self: center;
    width: 100%;
    height: auto;
    /*object-fit: contain;*/
    /*margin-bottom:4rem*/
}

.sale-item > button {
    margin-top: auto;
    background: teal;
    color: white;
    padding: 0.5rem;
    border: none;
    border-radius: 1rem;
    font-size:1.2rem
}

.sale-item > button:hover {
    background-color:#ffdb3a
}

.sale-item > button:active {
    background-color:red
}

.sale-item li::before {
    display: inline-block;
    position: relative;
    width: 1em;
    height: 1em;
    top: 0.2rem;
    margin-right: 0.4rem;
    content: "";
    background-image: url(//www.aupied.net/images/promo/iconamazon.png);
    background-size: contain
}

.parent-grille {
    display: grid;
    grid-template-columns: 1fr 6fr 1fr;
    grid-auto-rows: minmax(60px, auto);
    grid-column-gap: 0;
    grid-row-gap: 0;
    max-width:100vw
}

.div1 { /*entete*/
    grid-area: 1 / 1 / 2 / 2;
    background-color: #222;
    text-align:left
}

.div2 {/*entete*/
    grid-area: 1 / 2 / 2 / 3;
    background-color: #222;
    display: flex;
    align-items: center;
    justify-content:center
}

.div3 {/*entete*/
    grid-area: 1 / 3 / 2 / 4;
    background-color: #222;
    text-align:right
}

.div4 {/*entete*/
    grid-area: 2 / 1 / 3 / 2;
    background-color: #222;
    text-align:left
}

.div5 {/*entete*/
    grid-area: 2 / 2 / 3 / 3;
    background-color: #222;
    display: flex;
    align-items: center;
    justify-content:center
}

.div6 {/*entete*/
    grid-area: 2 / 3 / 3 / 4;
    background-color: #222;
    text-align:right
}

.div7 {/*entete*/
    grid-area: 3 / 1 / 4 / 2;
    background-color: #222;
    text-align:left
}

.div8 {/*entete*/
    grid-area: 3 / 2 / 4 / 3;
    background-color: #222;
    display: flex;
    align-items: center;
    justify-content:center
}

.div9 {/*entete*/
    grid-area: 3 / 3 / 4 / 4;
    background-color: #222;
    text-align:right
}

.div10 {/*entete*/
    grid-area: 4 / 1 / 5 / 2;
    background-color: #222;
    text-align:left
}

.div11 {/*entete*/
    grid-area: 4 / 2 / 5 / 3;
    background-color: #222;
    display: flex;
    align-items: center;
    justify-content:center
}

.div12 {/*entete*/
    grid-area: 4 / 3 / 5 / 4;
    background-color: #222;
    text-align:right
}

.titre-direct4 {
    font-family: "Bruno Ace SC", sans-serif;
    text-align: center;
    font-weight: 400;
    font-style: normal;
    font-size: 2rem;
    color:#999
}

@media only screen and (max-width: 480px) {
    .parent-grille {
        display: grid;
        grid-template-columns: 1fr 6fr 1fr;
        grid-auto-rows: minmax(30px, auto);
        grid-column-gap: 0;
        grid-row-gap: 0;
        max-width:100vw
    }

    .titre-direct4 {
        font-family: "Bruno Ace SC", sans-serif;
        text-align: center;
        font-weight: 400;
        font-style: normal;
        font-size: 1.6rem;
        color:#999
    }
}

ul {
    list-style-type:none
}

.rouge2 {
color:rgba(#f74444, 1);
}