@charset "utf-8";
/*CSS responsive */

/*--------------Laptop--------------*/
@media (max-width: 1480px) {

    .produit-item-large {
        display: block;
        width: auto;
    }

    .intro-image {
        padding: 0 150px;
    }
    header .compte {
        margin: 0 0 0 40%;
    }
    .service {
        position: absolute;
        top: -10px;
        left: 24%;
        z-index: 2;
    }
}

/*--------------Tablettes--------------*/
@media (max-width: 1280px) {
    .flex_row_monoligne {
        flex-flow:row wrap;
    }
    .flex_row_monoligne div {
        flex-grow: 1;
    }
    .flex_row_monoligne div img {
        max-width: 250px;
    }
    .footer-top {
        padding: 20px 20px;
    }
    .intro-image {
        padding: 0 100px;
    }
    #temoignages {
        flex-direction: column;
    }
    #temoignages > div:nth-child(1){
        margin : 20px auto;
    }
    #temoignages > div:nth-child(2){
        width : 100%;
    }
    .hamburger{
        display : flex;
    }
    header nav > div{
        display : none;
    }
    header nav ul {
        flex-direction : column;
        align-items: flex-start;
    }
    header nav ul li >ul{
        position : relative;
        top:0;
        flex-direction : column;
    }
    header nav ul li:hover >ul {
        display: none;
        max-height : none;
    }
    header div.header-bandeau {
        height: auto;
        flex-direction: column;
    }
    .header-bandeau .haut {
        display: block;
        position: relative;
        top: 0;
        left: 0;
        width: 100%;
    }
    .header-bandeau .service {
        left: auto;
        right: 0;
    }
    header .compte {
        margin: 0;
        width: 100%;
    }
    #swiper-articles{
        height: 28rem;
    }
}

/*--------------Téléphones (paysage)--------------*/
@media (max-width: 959px) {
    #fa_infos_d_desktop{
        display: none;
    }
    #fa_infos_d_mobile{
        display: block;
    }
    .col {
        float: none;
        display: block;
        width: 100%;
    }
    /* Header */
    .intro-image {
        padding: 0 50px;
    }
    header .compte {
        margin-top: 15px;
        align-items: center;
        flex-direction: column-reverse;
    }
    .icones-menu {
        width: 50%;
    }
    /* Rubriques */
    .rubrique-flex {
        flex-direction : column;
    }
    .rubrique-flex > div:nth-child(1), .rubrique-flex > div:nth-child(2) {
        width: 100%;
        position: relative;
    }
    /* Footer */
    .footer-top > div:nth-child(1),
    .footer-top > div:nth-child(2) {
        width: 100%;
        padding-right: 0px;
        border : none;
    }
    footer > .footer-bottom > div {
        width: 100%;
        margin: 0px;
        padding-right: 0px;
        border : none;
    }
    .footer-bottom {
        display:flex;
        flex-direction: column;
    }
    .footer-bottom > div:first-child,
    .footer-bottom > div:last-child {
        width : 100%;
        margin : 0;
        box-sizing: border-box;
        border : none;
    }
    footer > .footer-top {
        padding: 20px 5px;
    }
    #swiper-articles{
        height: 14rem;
        margin: 0 0.5rem;
    }
    #swiper-articles a{
        width: 100%;
    }
    #fa_photos{
        display: flex;
        align-items: center;
        margin-bottom: 1.5rem;
    }
    .swiper-arrow{
        width: 2rem;
        height: 2rem;
        cursor: pointer;
        flex: none;
    }
    .swiper-arrow-prev{
        transform: rotate(-90deg);
    }
    .swiper-arrow-next{
        transform: rotate(-90deg);
    }
    #form_article{
        display: flex;
        flex-direction: column;
    }
    #form_article>div:first-child{
      order: 2;
    }
    #form_article>div:nth-child(2){
        order: 1;
    }
    #form_article>div:nth-child(3){
        order: 3;
    }
    #form_article>div:nth-child(4){
        order: 4;
    }
    #form_article>div:nth-child(5){
        order: 5;
    }
}

/*--------------Téléphones (paysage)--------------*/
@media (max-width: 769px) {

    .intro-image {
        padding: 0;
    }
    #temoignages > div:nth-child(1){
        width : 100%;
    }
    #temoignages > div:nth-child(2){
        width : 100%;
        flex-direction : column;
    }
    #temoignages > div:nth-child(2) > div{
        width : 100%;
    }
    section#intro>div:first-child p {
        font-size: 20px;
    }
    main {
        background: white;
        width: 100%;
    }
    .slick-track > div {
        margin: 113px 30px 30px;
    }
    header .compte {
        margin: 0;
        width : 100%;
    }
    .haut{
        top : 40px;
        left : -80px;
    }
    .compte .lien-mobile{
        display: block;
    }
    .compte .lien-mobile > a{
        display: block;
        background : #bd2425;
        color : white;
        padding : 5px 10px;
        border-radius : 10px;
        margin-bottom : 5px;
        text-align : center;
    }
    .compte .lien-mobile > a{
        background : #941c1d;
    }
    .compte > .panier > div{
        display: none!important;
    }

    .icones-menu {
        margin-bottom: 15px;
    }
    .compte #form_recherche_rapide, .icones-menu {
        width: 100%;
    }

    .footer-bottom > div:first-child {
        flex-direction: column;
    }
    footer p{
        margin : 4px;
    }
    footer p:first-child{
        margin-top : 10px;
    }
    #swiper-articles{
        height: 10rem;
    }
}

/*--------------Téléphones (portrait)--------------*/
@media (max-width: 479px) {

    .intro-image a {
        width: 100%;
        height: 200px;
    }
    .produit-item {
        width : 100%;
    }
    .haut {
        left: -200px;
    }
    .header-bandeau {
        margin: 15px 0;
    }
    main section#slider-promo {
        padding: 10px 0px 30px;
        margin: 0;
    }
    #produits .produit-item{
        width : 220px!important;
        margin : 20px auto;
    }

    .produit-item {
        width: 250px!important;
    }

    .table_rd, .table_rd tbody, .table_rd tr, .table_rd td {
        display: block;
        width: 100%;
    }
    .produits-wrap-rubrique > div.produit-item {
        width: 270px!important;
        margin: 30px 0px;
    }


    /* Témoignages */
    #temoignages{
        padding: 0 5px;
    }
    
    .temoignage-avis{
        padding: 0;
    }

    .temoignage-avis .arrow-left,
    .temoignage-avis .arrow-right{
        margin: 0;
    }

    #swiper-articles{
        height: 6rem;
    }
}