@media screen and (max-width:767px){
    footer.page-footer .footer.row{
        background-color: #c0091b;
        margin-top: 100px;
        margin-top: 50px;
        position: relative;
    }

    .column.main, .page-title-wrapper, .account .column.main, .account .sidebar-additional {
        padding-left: 10px;
        padding-right: 10px;
    }

    footer.page-footer .footer-header {
        padding-bottom: 80px;
    }
    footer.page-footer .footer.row .footer-main-container>div {
        justify-content: flex-start !important;
    }
    footer.page-footer .footer.row:after {
        content: "";
        height: 100px;
        width: 100%;
        background: transparent url(../images/fond-rouge.svg);
        position: absolute;
        top: -40px;
        left: 0;
        z-index: -1;
        background-size: 100%;
    }
    footer.page-footer .footer.row .footer-main-container>div {
        width: 100%;
        box-sizing: border-box;
        margin: 0 24px;
        margin-bottom: 24px;
        display: flex;
        justify-content: center;
        margin-bottom: 24px;
    }
    footer.page-footer .footer.row  .block-paiement img{
        margin: auto;
    }
    footer.page-footer .surfooter > .surfooter .bloc{
        width: 50%;
        margin-bottom: 24px;
    }
    footer.page-footer .sousfooter .liste-liens{
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        box-sizing: border-box;
        padding: 8px;
    }
    .footer-header .nl-container .block.newsletter input{
        margin-right: 0;
    }
    footer.page-footer .sousfooter{
        height: auto;
    }
    .ressources-tele .corps .bloc{
        width: 100%;
    }
    .header-menu .navigation{
        display: none;
    }
    .header-body .action.showcart>span{
        display: none;
    }
    .slider-cms{
        flex-direction: column;
    }
    .footer-header .nl-container{
        flex-direction: column;
        align-items: center;
    }
     .sav, .order-by-ref{
        display: none;
    }
    .header-body .block.block-search{
        margin-right: 35px;
        margin-left: 49px;
        flex-grow: 1;
    }
    .slider-cms .cms {
        width: 95%;
    }
    .slider-cms .slider {
        width: 100%;
        height: 340px;
    }
    .slider-cms .cms .block {
        background-position: center right !important;
    }
    .vous-recherchez .corps .bloc {
        margin-bottom: 30px;
        width: 100%;
    }
    .ressources-tele .corps .left {
        width: 50%;
        padding-left: 21px;
    }
    .top-home h1{
        font-size: 50px;
    }
    .top-home .gauche{
        margin-bottom: 24px;
    }
    .top-home .gauche, .top-home .droite{
        width: 100%;
        height: 310px;
    }
    footer.page-footer .surfooter > .surfooter{
        flex-wrap: wrap;
    }
    footer.page-footer .surfooter{
        height: auto;
        background: white;
        padding: 16px 6px 0 6px;
        margin-top: 0;
        position: relative;
    }
    footer.page-footer .surfooter:after {
        content: "";
        height: 100px;
        width: 100%;
        background: transparent url(../images/fond-blanc.svg);
        position: absolute;
        top: -40px;
        left: 0;
        z-index: -1;
        background-size: 100%;
    }
    .footer-header .nl-container .block.newsletter {
        width: 90%;
        max-width: 90%;
        margin: 0 auto;
    }
    .footer-header .nl-container .block.newsletter .field .control:before{
        display: none;
    }
    .top-home .droite p{
      display: none;
    }
    footer.page-footer .footer-header {
        background-size: 100% 30%;
        background-position-y: bottom;
    }
    .header-body .account .links{
        display: none !important;
    }
    .header-body .account {
        margin-left: 6px;
        margin-right: 12px;
    }
    .minicart-wrapper {
        margin-top: 0px;
    }
    .top-home {
        height: auto;
        margin-left:16px;
        margin-right:16px;
    }
    .top-home .surtitre{
        width: 252px;
        line-height: 23px;
    }
    .top-home .soustitre{
        line-height: 23px;
    }
    .top-home .droite{
        margin-top: 24px;
    }
    .top-home .droite span{
        color: #333;
    }
    .header-body .logo {
        width: 75px;
        height: auto;
        margin: 6px 0px 6px 60px;
    }
    header.page-header .header.panel {
        padding: 0;
        height: 68px;
    }
    header.page-header{
        height: 68px;
        box-shadow: 0 5px 15px rgba(0,0,0,.1);
    }
    .catalog-category-view .page-wrapper, .catalogsearch-result-index .page-wrapper, .cms-home_a4 .page-wrapper, .cms-index-view .page-wrapper, .catalog-product-view .page-wrapper {
        margin-top: 69px !important;
    }
    
    .top-home{
        flex-direction: column;
    }
    .block.block-search {
        background: #b5b5b5;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 99;
        height: 70px;
        box-sizing: border-box;
        box-shadow: 0px 5px 20px rgba(6, 5, 5, 20%);
        padding: 20px 40px;
        transform:translateY(-80px);
        transition: transform .2s;
        margin: 0 !important;
    }
    .block.block-search {
        background: #f2f2f2;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 99;
        height: 70px;
        box-sizing: border-box;
        box-shadow: 0px 5px 20px rgba(6, 5, 5, 20%);
        padding: 20px 40px;
        transform:translateY(-80px);
        transition: transform .2s;
        margin: 0 !important;
    }
    .block-search input{
        left: 48px;
        margin: 15px 0;
        position: absolute !important;
        top: 4px;
        width: calc(100% - 64px) !important;
    }
    .search-autocomplete{
        margin-top: 0 !important;
        z-index: 3;
        left: 16px;
        border-radius: 15px;
    }
    .search-autocomplete ul li{
        color: #333;
    }
    .block-search .control{
        border-top: none !important;
    }
    .block-search .label{
        position: absolute;
        z-index: 2;
        top: 21px;
        right: 15px;
    }
    .block.block-search-close{
        position: absolute;
        display: block !important;
        top: 27px;
        left: 19px;
        width: 16px;
        height: 16px;
        background: url(/pub/media/theme/a4/close_black.svg) no-repeat;
        background-size: contain;
        margin-bottom: 0;
        opacity: 0.8;
    }
    .block.block-search.active {
        transform:translateY(0px);
    }
    .block.block-search-mobile{
        width: 30px;
        background: #dcdcdc;
        display: inline-block;
        height: 30px;
        border-radius: 50%;
        position: relative;
        margin-left: auto;
        order: 5;
        margin-bottom: 0;
        margin-right: 7px;
    }
    .header-body .minicart-wrapper {
        margin-left: 0;
    }
    .block.block-search-mobile:after{
        content: "";
        position: absolute;
        top: 7px;
        left: 8px;
        width: 17px;
        height: 14px;
        background: url(/pub/media/theme/a4/search_black.svg) no-repeat;
        background-size: contain;
    }
    .nav-open .header-menu,.nav-open .header-menu .navigation {
        position: fixed;
        top: 0 !important;
        left: 0;
        margin-left: 0;
        width: 85%;
        display: block !important;
        height: 100%;
        z-index: 99;
    }
    .header-menu .navigation a span {
        font-size: 14px;
    }
    .nav-open .header-menu .navigation{
        display: block;
    }
    .header-menu .navigation ul {
        align-items: flex-start;
        flex-direction: column;
        padding: 32px;
    }
    .header-menu .navigation{
        overflow-y: scroll;
        overflow-x: hidden;
    }
    .breadcrumbs .items li:nth-last-child(3),.breadcrumbs .items li:nth-last-child(4),.breadcrumbs .items li:nth-last-child(5){
        display: none;
    }
    .breadcrumbs .items li, .breadcrumbs .items li a{
        font: normal normal normal 9px/25px "Ubuntu";
        letter-spacing: 0;
    }
    .header-menu .navigation ul li {
        margin-bottom: 8px;
        border-top: none;
        display: block;
        width: 100% !important;
        border-bottom: 1px solid rgba(255 ,255, 255, .2);
        padding: 8px 0 !important;
        height: auto !important;
        flex-direction: column;
    }
    
    .quantity_container .field.qty {
     margin-right: auto;
     margin-bottom: 32px;
    }
    .price_container .price-box.price-final_price{
        margin-left: 0;
        width: 100%;
        margin-top: 0;
    }
    .cms-index-index .page-wrapper {
        background: none;
    }
    .cms-index-index {
        background: url(../images/hero.svg) no-repeat;
        background-size: contain;
        background-position: left 49px;
    }
    .top-home .word{
        width: 300px;
    }
    .top-home .gauche h1{
        height: 42px;
    }
    .page-main {
        width: 100%;
    }
    .box-prices{
        width: 100%;
        max-width: 100%;
    }
    .price_container{
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr 70px 70px;
        grid-template-areas:
          "price"
          "infos"
          "addtocart"
          "addtoquote";
      }
      .box-tocart .actions button.action.tocart, .box-toquote button{
        width: 100% !important;
        padding: 4px 10px;
        height: 51px !important;
      }
      .box-tocart .fieldset, .box-tocart .fieldset .actions, .box-toquote{
        width: 100%;
    }
    .header-menu .navigation .level0>.level-top {
        font-size: 14px;
        font-weight: bold;
        line-height: 16px;
        letter-spacing: 0.7px;
        color: #9EAAB3;
        text-transform: uppercase;
        opacity: 1;
        padding: 0;
        height: auto;
        transition: .2s color;
        border-left: none;
        white-space: nowrap;
        justify-content: end;
        border-top:none;
        height: 28px;
    }
    header.page-header .panel.header .header-menu .navigation ul .level0 .submenu a>span {
        color: #f2f2f2 !important;
    }
    .navigation{
        overflow-y: scroll;
    }
    .subnav .items>.item {
        width: 31%;
    }
    .header-menu .navigation .level0 {
        width: 100%;
        margin: 0;
    }
    .navigation .submenu:not(:first-child) {
        font-weight: 400;
        line-height: 1.3;
        left: auto !important;
        padding: 0;
        padding-top: 0px;
        padding-right: 0px;
        padding-bottom: 0px;
        padding-left: 0px;
        position: relative;
        top: auto !important;
        transition: left 0.3s ease-out;
    }
    .scrolled .header-body .logo{
        width: 75px;
        height: auto;
        margin-top: 6px;
        margin-bottom: 6px;
    }
    .scrolled header.page-header{
        box-shadow: 0 5px 15px rgba(0,0,0,.1);
    }
    .scrolled header.page-header .header.panel{
        height: 68px;
    }
    .scrolled .header-menu{
        top: 64px;
    }
    .subnav .items>.item {
        width: 48%;
    }
    .level1.ui-menu-item>a>span {
        color: white;
        letter-spacing: 1px;
        text-transform: uppercase;
        font-size: 12px;
    }
    .level2.ui-menu-item>a>span,.level3.ui-menu-item>a>span{
        padding: 0;
        font-weight: 400;
        color: rgba(255, 255, 255, .8);
        letter-spacing: 0;
        text-transform: none;
        font-size: 12px;
    }
    .level3.ui-menu-item>a{
        padding-top: 0;
        padding-bottom: 0;
    }
    .level1>.level2:last-child, .level2>.level3:last-child {
        border-bottom: 0;
    }
    .navigation .submenu:not(:first-child) .active > a {
        border: none !important;
        padding-left: 0;
    }
    .products-grid .product-item-info .product-item-details {
        flex-wrap: wrap;
    }
    .products-grid .product-item-info .product-item-details .product-item-body{
        margin-bottom: 16px;
    }
    .products-grid .product-item-info .price-box{
        margin-left: 0;
        margin-right: 0;
        align-items: flex-start;
    }
    .product-item-actions .qty {
        width: 36px;
    }
    .product-item-actions .action.tocart.primary, .product-item-actions .add-to-links a, .product-item-actions .amquote-addto-button{
        line-height: 2px;
        letter-spacing: -1px;
    }
    .price-a4.pricedefault>div {
        text-align: left !important;
    }
    .catalog-product-view.page-layout-1column .product-info-main {
        width: 100%;
    }
    .product.data.items .data.item.title {
        width: 100% !important;
    }
    .box-tocart .actions{
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .product-item-actions{
        width: auto;
        flex-grow: 1;
        order: 2;
    }
    .product-item-actions form {
        width: auto;
    }
    .product-item-actions .add-to-links {
        margin-bottom: 0;
        margin-top: 0;
    }
    .product-item-actions .action.tocart.primary, .product-item-actions .add-to-links a, .product-item-actions .amquote-addto-button {
        margin-top: 0;
        margin-bottom: 0;
    }
    .page-wrapper {
        margin-top: 100px !important;
    }
    .cms-formations h2,
    .cms-formations h1 {
      font: normal normal bold 20px/37px "Ubuntu";
      margin-bottom: 40px;
    }
    .navigation, .breadcrumbs, .page-header .header.panel, .header.content, .footer.content, .page-main, .page-wrapper > .widget, .page-wrapper > .page-bottom, .block.category.event, .top-container {
        padding-left: 0;
        padding-right: 0;
    }
    .formation-intro {
        margin-top: 16px;
    }
    .cms-formations h2:after,
    .cms-formations h1:after {
      position: absolute;
      content: "";
      bottom: -8px;
      left: 0;
      width: 50px;
      height: 3px;
      background: #c0091b;
    }
    .cms-formations .page-wrapper {
        margin-top: 69px !important;
    }
    .formation-intro{
        flex-direction: column;
    }
    .formation-intro .right {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .formation-features .cards {
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
    }
    .formation-features .card {
        width: 91% !important;
        margin-bottom: 16px;
    }
    .formation-visiotec img:nth-child(4),.formation-visiotec img:nth-child(3),.formation-visiotec img:nth-child(2) {
        display: none;
    }
    .formation-visiotec {
        box-shadow: -200px 0 0 #F5F5F5, 200px 0 0 #F5F5F5;
    }
    .product-item{
        margin-bottom: 24px;
        margin-left: 0 !important;
    }
    .product-item-info{
        flex-wrap: wrap;
        padding: 0 16px !important;
        box-sizing: border-box;
    }
    a.product.photo.product-item-photo {
        width: 100%;
        display: flex;
        justify-content: center;
        margin-bottom: 16px;
        margin-top: 16px;
        border-radius: 5px;
    }
    .product-image-container, .product-image-container .product-image-wrapper {
        padding-bottom: 0 !important;
    }
    .products-grid .product-item-info .product-item-details .product-item-body a.product-item-link, .products-grid .product-item-info .product-item-details .product-item-body .sku{
        margin-bottom: 8px;
        display: block;
    }

    .minicart-items .product-item-name {
        margin: 0;
    }

    .minicart-items .product {
        display: flex;
        flex-direction: row;
    }

    .minicart-items .product-item-pricing {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        gap: 10px;
    }

    .minicart-items .product > .product-item-photo, .minicart-items .product > .product-image-container {
        float:none;
    }

    .minicart-items .product-image-container, .minicart-items .product-image-container .product-image-wrapper {
        height: auto;
        width: auto;
        margin:0;
    }    

    .minicart-items .product-item-details {
        padding:0;
        position: relative;
    }

    .minicart-items .product-item-details .details-qty {
        margin-top: 0;
    }

    .minicart-wrapper .product .actions {
        position: absolute;
        bottom: 2px;
        right: 0;
    }

    .minicart-wrapper .block-minicart {
        padding: 25px 20px 5px;
    }

    .block-minicart .block-content > .actions {
        margin-top: 5px;
    }

    .block-minicart .items-total {
        margin: 0;
    }

    .block-minicart .subtotal {
        white-space: nowrap;
    }   

    .form-cart .cart.table-wrapper .item .col.item {
        padding: 15px 15px 10px 90px;
    }
    .cart.table-wrapper .col.qty, .cart.table-wrapper .col.price, .cart.table-wrapper .col.subtotal, .cart.table-wrapper .col.msrp {
        float:none;
        display: table-cell;
    }

    .product-image-container, .product-image-container .product-image-wrapper {
        width: auto !important;
        height: auto;
    }

    .product-image-container {
        margin: auto;
    }

    .product-image-photo {
        max-height: 75px;
    }

    .catalog-category-view .column.main {
        gap:0;
    }

    .item .product-image-photo {
        position: static;
    }

    .category-view .category-description, .breadcrumbs {
        margin-left: 20px;
    }

    .product.data.items {
        margin-left: 0;
        margin-right: 0;
    }

}
/*XSMALL*/

@media screen and (max-width: 378px){
    .top-home h1 {
        font-size: 34px;
    }
    .top-home .surtitre{
        width: auto;
    }
    .subnav .items>.item {
        width: 100%;
    }
}