.viewer-element body {
    font-family: Open\20 Sans, serif;}

.viewer-element .page-content-front {
    width: 1200px !important;}

.viewer-element .wrapper,
.viewer-element .viewer-content,
.viewer-element .checkout-bundle .ck-form-element,
.viewer-element .form-element .form-group label {
    font-size: 15px;    color: #4c4034;}

.viewer-element a,
.viewer-element .wrapper a,
.viewer-element .viewer-content a {
    font-size: 15px;    color: #4c4034;}

.viewer-element a:hover,
.viewer-element .wrapper a:hover,
.viewer-element .viewer-content a:hover
.viewer-element a:active,
.viewer-element .wrapper a:active,
.viewer-element .viewer-content a:active,
.viewer-element a:focus,
.viewer-element .wrapper a:focus,
.viewer-element .viewer-content a:focus {
    font-size: 15px;    color: #ea5610;}
.viewer-element h1,
.viewer-element .title-lvl-1 {
    font-size: 25px;    color: #ffffff;}
.viewer-element h2,
.viewer-element .title-lvl-2 {
    font-size: 30px;    color: #4c4034;}
.viewer-element h3,
.viewer-element .title-lvl-3 {
    font-size: 24px;    color: #4c4034;}
.viewer-element h4,
.viewer-element .title-lvl-4 {
    font-size: 14px;    color: #777777;}
.viewer-element h5,
.viewer-element .title-lvl-5 {
    font-size: 14px;    color: #777777;}
.viewer-element h6,
.viewer-element .title-lvl-6 {
    font-size: 14px;    color: #777777;}

/* ------------------------
// BUTTONS
 ------------------------ */
.viewer-element .form-button,
.viewer-element .wrapper-front .form-element .btn.btn-primary,
.viewer-element .input-group-btn,
.viewer-element .carousel-caption a.btn,
.viewer-element .article-new .article-new-link,
.viewer-element .outlined-btn.btn,
.viewer-element .btn.btn-primary,
.viewer-element .btn-default-link,
.viewer-element .iframe-preview-menu-btn {
    color: #4c4034;    background-color: #ffffff;    font-size: 18px;}

.viewer-element .form-button:hover,
.viewer-element .wrapper-front .form-element .btn.btn-primary:hover,
.viewer-element .input-group-btn:hover,
.viewer-element .carousel-caption a.btn:hover,
.viewer-element .article-new .article-new-link:hover,
.viewer-element .outlined-btn.btn:hover,
.viewer-element .btn.btn-primary:hover,
.viewer-element .btn-default-link:hover,
.viewer-element .iframe-preview-menu-btn:hover,
.viewer-element .iframe-preview-menu-btn.is-active {
    background-color: #f4971b;    color: #4c4034;    font-size: 18px;}

/* -----------------------
 CAROUSEL
 ------------------------ */
.viewer-element .carousel-element .swiper-pagination-bullet,
.viewer-element .carousel-indicators li {
    background-color: #ffffff;
}
.viewer-element .carousel-element .carousel-element-button {
    color: #ffffff;
}

.viewer-element .carousel-element .swiper-pagination-bullet-active,
.viewer-element .carousel-indicators .active {
    background-color: #f4971b;
}
.viewer-element .page-catalog-details .owl-carousel .owl-prev,
.viewer-element .page-catalog-details .owl-carousel .owl-next,
.viewer-element .page-catalog-details .item-carousel-controls .item-carousel-prev,
.viewer-element .page-catalog-details .item-carousel-controls .item-carousel-next {
    color: #f4971b;
}

/* ------------------------
// COOKIE
  ------------------------ */
.viewer-element body .cc-window.cc-banner {
    color: #4c4034;    background-color: #fafafa; }

.viewer-element a.cc-btn.cc-dismiss {
    color: #fafafa;    background-color: #db0d15;    font-size: 15px ;}

.viewer-element a.cc-btn.cc-dismiss:hover,
.viewer-element a.cc-btn.cc-dismiss:active {
    color: #fafafa;    background-color: #ea5610;    font-size: 15px ;}

/* -----------------------
 BUNDLE - ecommerce
 ----------------------- */
.viewer-element .ck-form-element.ck-form-element--radio a,
.viewer-element .ck-form-element.ck-form-element--checkbox a,
.viewer-element .ck-form-element label sup,
.viewer-element .checkout .checkout-fail .checkout-title,
.viewer-element .checkout-bundle .checkout-pagination a.is-active {
    color: #ffffff;
}
.viewer-element .ecommercebundle-list.is-loading::after,
.viewer-element .popin-connect .popin-loader::after,
.viewer-element .ecommercebundle-detail.is-loading .ecommercebundle-detail-buy::after,
.viewer-element .checkout-bundle .checkout-loader::after {
    border-top-color: #ffffff;
}
.viewer-element .ck-form-element.ck-form-element--radio a,
.viewer-element .ck-form-element.ck-form-element--checkbox a {
    border-color: #ffffff;
}
.viewer-element .noUi-connect,
.viewer-element .ecommercebundle-filters-radio + label::after,
.viewer-element .ck-form-element.ck-form-element--radio input[type=checkbox]:checked + label::before,
.viewer-element .ck-form-element.ck-form-element--radio input[type=radio]:checked + label::before,
.viewer-element .ck-form-element.ck-form-element--checkbox input[type=checkbox]:checked + label::before,
.viewer-element .ck-form-element.ck-form-element--checkbox input[type=radio]:checked + label::before {
    background-color: #ffffff;
    border-color: #ffffff;
}
.viewer-element .ecommercebundle-filters-treecat.is-some::after {
    background-color: #ffffff;
}
.viewer-element .ecommercebundle-filters-treecat.is-all::after,
.viewer-element .ecommercebundle-filters-checkbox + label::after {
    color: #ffffff;
}

.viewer-element .ecommerce-component .ecommerce-components-connexion-link,
.viewer-element .ecommerce-component .ecommerce-components-cart-link {
    color: #4c4034;
}
.viewer-element .ecommerce-component [data-header-hassubmenu]::after {
    border-color: #4c4034 transparent transparent transparent;
}

.viewer-element .ck-flash-message,
.viewer-element .ck-promo .ck-promo-wrapper .ck-promo-valid-btn,
.viewer-element .ck-total .ck-promo-element .ck-promo-valid-btn,
.viewer-element .login .login-btn,
.viewer-element a.ck-btn,
.viewer-element button.ck-btn {
    color: #4c4034;    background-color: #ffffff;    font-size: 18px;}
.viewer-element .ck-product .ck-product-btn-quantity,
.viewer-element .ecommercebundle-detail .ecommercebundle-detail-quantity-button {
    color: #4c4034;    background-color: #ffffff;}

.viewer-element .ck-promo .ck-promo-wrapper button:hover,
.viewer-element .ck-promo .ck-promo-wrapper button:focus,
.viewer-element .ck-resume-promo .ck-promo-element button:hover,
.viewer-element .ck-resume-promo .ck-promo-element button:focus,
.viewer-element .ck-total .ck-promo-element button:hover,
.viewer-element .ck-total .ck-promo-element button:focus,
.viewer-element .login .login-btn:hover,
.viewer-element .login .login-btn:focus,
.viewer-element a.ck-btn:hover,
.viewer-element a.ck-btn:focus,
.viewer-element button.ck-btn:hover,
.viewer-element button.ck-btn:focus {
    background-color: #f4971b;    color: #4c4034;    font-size: 18px;}
.viewer-element .ck-product .ck-product-btn-quantity:hover,
.viewer-element .ecommercebundle-detail .ecommercebundle-detail-quantity-button:hover {
    background-color: #f4971b;    color: #4c4034;}

/* ------------------------
// BUNDLE - social network
 ------------------------ */
// social network - mosaic view
.viewer-element .socialnetwork-element .socialnetwork-element-content,
.viewer-element .socialnetwork-element .socialnetwork-element-title {
     font-size: 14px;     color: #777777;}

/* social network - list view */
.viewer-element .socialnetwork-list-loader {
    border-top-color: #ffffff;
}

.viewer-element .socialnetwork-element .socialnetwork-element-content,
.viewer-element .socialnetwork-element .socialnetwork-element-title {
     font-size: 14px;     color: #777777;}
.viewer-element .socialnetwork-list .socialnetwork-list-button {
     font-size: 18px;      color: #4c4034;         background-color: #ffffff;
    border-color: #ffffff;
    }
.viewer-element .socialnetwork-list .socialnetwork-list-button:hover,
.viewer-element .socialnetwork-list .socialnetwork-list-button:focus {
    background-color: #f4971b;
    border-color: #f4971b;
}

/* ------------------------
// ACCORDION
------------------------ */
.viewer-element .accordion_element .panel-title .panel-button {
    font-size: 18px;    color: #4c4034;}
.viewer-element .accordion_element .panel-title .panel-button:hover {
    color: #ea5610;
}
.viewer-element .accordion_element .panel-body {
    font-size: 15px;    color: #4c4034;}

/* ------------------------
// NEW HEADER
// NEW HEADER - top header
------------------------ */
/* ------------------------
// NEW HEADER - main header
------------------------ */
    
    
    
    
    
    .viewer-element .header-main .header-main-nav-link {
                    }
    .viewer-element .header-main .header-main-nav-link:focus,
    .viewer-element .header-main .header-main-nav-link:hover,
    .viewer-element .header-main .header-main-nav-link.active {
                    }
                        
.viewer-element body {
            background-position: top center;
}
#sync2 .item-product-image {
  display: none;}
/***TOP HEADER***/

*:focus {outline: none;}
a {text-decoration : none !important;}
a:hover {text-decoration : none !important;}


#header .row, .background .row, .align1 .row {
    display: flex;
    align-items: center;
}

.navbar a, 
.navbar-default .navbar-nav>.active>a, 
.navbar-default .navbar-nav>.active>a:focus, 
.navbar-default .navbar-nav>.active>a:hover {
    background-color: transparent;
    font-weight: 700 !important;
}

#header .container-fluid {
    box-shadow: 0 4px 8px rgb(0 0 0 / 4%);
}

.navbar {
    margin-bottom: auto !important;
}

.header-main-logo-image {
    max-width: 65% !important;
}

/* FONT */
h1 {
    color: #ffffff !important;
    line-height: 1.5em;
}

.name {
    font-size: 53px !important;
    font-weight: 800 !important;
}

h2 {
    font-size: 40px !important;
    font-weight: 800 !important;
}

strong {
    font-weight: 700 !important;
}

/**** BUTTON ****/
.btn{
    font-weight: 700 !important;
    text-transform: uppercase !important;
    padding: 12px 20px !important;
    border-radius: 10px !important;
}

.btn:hover {color: #fff !important;}


.btn-retour {
    background-color: #f3f3f3 !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    padding: 12px 20px !important;
    border-radius: 10px !important;}


.btn-retour:hover {    
  color: #4c4034;
  background-color: #e4e4e4 !important;}


.btn-bord , .form-button, .pager a, .viewer-element a.cc-btn.cc-dismiss  {
    border: 2px solid #4C4034 !important;
    background-color: transparent !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    padding: 12px 20px !important;
    border-radius: 10px !important;
}

.btn-bord:hover, .form-button:hover, .pager a:hover, .viewer-element a.cc-btn.cc-dismiss:hover{
    border: 2px solid #4C4034;
    background-color: #4C4034 !important;
    color: #fff !important;
  
}

.viewer-element a.cc-btn.cc-dismiss {
  color: #4C4034 !important;}
/**** CSS GENERAL ****/
.apropos-gradient {
            background: linear-gradient(to right, #f26825, #e5a60c);
            padding: 10px 20px;
            color: white;
            font-weight: bold;
            clip-path: polygon(0 0, 100% 0, 93% 100%, 0% 100%);
        }

.apropos-gradient p {
    font-size: 18px !important;
    text-transform: uppercase !important;
    margin-bottom: 0px !important;}

#bord1 .container {border-radius: 10px 10px 0px 0px !important;}
#bord2 .container {border-radius: 0px 0px 10px 10px !important;}

.para {
    background-attachment: fixed;
    min-height: 500px;
}

.back .container {
    border-radius: 10px;
}

.background .container {
    background: linear-gradient(45deg, #ea570f, #F4971B);
    padding: 60px;
    border-radius: 10px;
}

.back-foot {
  background: linear-gradient(45deg, #ea570f, #F4971B);}

.background h2, 
.background p, 
.back p {
    color: #fff;
}

/*** ACCUEIL ***/
.titre-avantages p {
    font-size: 40px !important;
    font-weight: 900 !important;
    color: #ea5610 !important;
    text-transform: uppercase !important;
}

.photo-av .zone-a-figure {
    border-radius: 10px !important;
}

.push strong {
    font-size: 40px !important;
    line-height: 1.2em;
    font-weight: 900 !important;}

.push .zone-a-content {
    width: 50% !important;
}

.liste-av p strong {text-transform: uppercase !important; font-weight: 700 !important;font-size: 18px !important;}



/***CONTACT***/
.services-c {font-size: 20px !important;}

.wrapper-front .form-element input, .wrapper-front .form-element textarea {
    border: none !important;
    border-bottom: 1px solid !important;
}


/****CALL GENERAL****/

.prestations .card-body {
    height: 280px !important;
}

.card-para {padding: 20px;}
.card-para h3 {font-size: 20px !important;}
        .card-para p {
            color: #4b4b4b;
            font-size: 1em;
            margin: 10px 0;
            text-align: left;
        }

.call-acc1 {
    display: flex;
    justify-content: flex-end;
}

.call-acc2 {
    display: flex;
    justify-content: center;
}

.call-acc3 {
    display: flex;
    justify-content: flex-start;
}


.card-b {  
            border: 2px solid #e53a2e;
            border-radius: 10px;
            overflow: hidden;
            background-color: white;
            text-align: center;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);}



  

    .card {
            width: 300px;
            border: 2px solid #e53a2e;
            border-radius: 10px;
            overflow: hidden;
            background-color: white;
            text-align: center;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }
        .card-header {
            background-color: #e53a2e;
            padding: 10px;
            color: white;
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
        }
        .card-header img {
            width: auto;
            height: 50px;
            margin-right: 10px;
        }
        .card-header .icon-container {
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .card-header .icon-container img {
            width: auto;
            height: 50px;
            margin: 0;
        }
        .card-body {
            padding: 20px;
          flex-grow: 1;
        }
        .card-body h3 {
            color: #4b4b4b;
            font-weight: 700 !important;
            margin: 20px 0;
            line-height: 1.4em;
        }
       .card-footer button {
            color: #4b4b4b;
            font-weight: bold;
            padding: 10px 20px;
            border: none;
            background: none;
            cursor: pointer;
            position: relative;
            transition: transform 0.3s ease;
            font-size: 1.3em;
            margin-bottom: 20px;
        }
        .card-footer button::after {
            content: "";
            display: block;
            width: 50px;
            height: 2px;
            background: linear-gradient(to right, #f26825, #e5a60c);
            margin: 10px auto 0;
            transition: width 0.3s ease;
        }
        .card-footer button:hover {
            transform: scale(1.1);
        }
        .card-footer button:hover::after {
            width: 100px;
        }



/****CATALOGUE*****/
.item-detail h1  {
    font-size: 30px;
    color: #db0d15 !important;
    font-weight: 800;
    margin-bottom: 35px;

}
#sync1 .item-product-image {
height: 500px !important;
width: 500px !important;}

.item-detail h2 , .item-title{
    font-size: 20px !important;
    font-weight: 600 !important;
}




.liste-catalogue h2 {
  font-size: 22px !important;}

.item-preview {border: 2px solid #db0d15;}
.item-preview:hover {border: 2px solid #f4971b;}


.titre-f h1  {
    font-size: 55px !important;
    color: #ea5610 !important;
    font-weight: 900;}


.item-page {margin-top: 40px !important;}

.pager a  {margin-left: 10px !important;}

.item-detail .btn-bord {border: 2px solid #db0d15 !important;}
.item-detail .btn-bord:hover {
  border: 2px solid #db0d15;
  background-color: #db0d15 !important;}



/***CONTACT***/
.map-infobox-title{
    color: #EA5610 !important;
    font-weight: 900 !important;
}

.map-infobox-container p {
    padding-bottom: 10px;
}

.map-infobox-container p , .map-infobox-container a {font-size: 14px !important;}

.viewer-element .infoBox .map-infobox-image {height: 200px !important;}

.services-coor p  {
    display: flex;
    align-items: center;}


.services-coor img {padding-right: 10px;}




  /* écran 110 zoom */ 
 @media all and (min-width: 1309px) and (max-width: 1366px)  {
  .vign {margin-left: -30px !important;}
  .nav {margin-right: 100px !important;}
   
   
}



/********** Mac sergine ***********/ 
  
@media all and (max-width: 1464px){
  .vign {margin-left: -45px !important;}


}


/********* Responsive desktop 90% ************/
@media only screen and (min-width: 1465px) and (max-width: 1820px) {
  .vign {margin-left: -30px !important;}

}


/*_________ Responsive tablette PRO _________ */
@media all and (min-width: 1024px) and (max-width: 1308px) {
  .para {background-attachment: inherit !important;}

    .mentions {
    margin-top: 50px !important;}
  
/****TOP HEADER****/  
.logo {margin-right: 40px !important;}
.vign {margin-left: -100px !important;}
.nav {margin-right: 60px !important;  margin-left: -20px !important;}

    /***ACCUEIL***/
.background .image-element {margin-left: 0px !important; margin-right: 35px !important;}
.inter {margin-right: 20px !important;}
  
  
  /****FOOTER*****/
  .push .zone-a-content {width: 80% !important;}
  .foot3  {margin-right: -40px !important;}

  .foot4  {margin-right: -20px !important;}

  /**PRESTATIONS**/
.prestations  .card-body  {height: 330px !important;}
  
  /**CATALOGUE**/  
#sync1 .item-product-image {
    height: 400px !important;
    width: 400px !important;}
  
  .merci {
    margin-top: 134px !important;
    margin-bottom: 152px !important;}
  

}


  /*---------------- tablette IPAD --------------*/ 
@media all and (min-width: 768px) and (max-width: 1023px) {
  
  .mentions {
    margin-top: 50px !important;}
 
  /***CSS GENERAL***/
  h2 {font-size: 31px !important;}
  .para {background-attachment: inherit !important;}
  
  .titre-line span {font-size: 15px !important; line-height: 1.0em !important;}
  .txt-right {padding-left: 20px !important;margin-right: 10px !important;}
  
  .titre-line {margin-left: 10px !important;}

  .txt-header {
    margin-top: 180px !important;
    margin-bottom: 120px !important;}
  
  /*****TOP HEADER*****/
  
  .vign {display:none  !important;}
  #header .container-fluid {padding-bottom: 15px !important;}
  .nav {padding-top: 18px !important; margin-right: 10px !important;}
  
  .logo {margin-right: -10px !important;}
  
  .navbar.menu-header-element {position: relative !important;}
  
  #header .col-sm-7 {width: 72.333333% !important;}
  #header .col-sm-2 {width: 0% !important;}


/****ACCUEIL****/
  .bloc-txt-acc1 .container {
    padding-bottom: 40px !important;
    padding-top: 40px !important;}
  
  
  .card-body h3 {font-size: 18px !important;}
  .background .container {padding: 30px !important;}
  
  .background .image-element  {
    margin-left: 10px !important;
    margin-right: 10px !important;}

  .background   h2 {font-size: 25px !important;}

  .photo-av {
  margin-left: 0px !important;
  margin-right: 5px !important;}
  
  .liste-av {
    margin-right: 0px !important;
    margin-left: 10px !important;}
  
  .inter {margin-right: 0px !important;}
  .inter-photo {
    margin-left: 20px !important;
    margin-top: -35px;
    margin-right: 20px !important;}
  
  
  /***FOOTER***/
  .push .zone-a-content {width: 90% !important;}
  
  .foot3 img, .foot4 img {height: 70px !important;}
  .foot1 {margin-right: -80px !important; margin-left: 40px !important;}
  .foot3  {margin-left: 30px !important; margin-right: -30px !important;}
  
  .bloc-inter .container {
    padding-bottom: 50px !important;
    padding-top: 60px !important;}
  
  /****PAGE PRESTATIONS*****/
.prestations  .card-body {height: 333px !important;}

  /****PAGE CATALOGUE*****/

.liste-catalogue .col-xs-12 {width: 50% !important;}
h2.item-title {height: 100px !important;}
.titre-f {margin-bottom: 30px !important;}
#sync1 .item-product-image {height: 300px ; width: auto ;    margin-top: 30px;}  

.pager  {margin-top: -44px !important;}

/****CONTACT***/
.services-coor {margin-left: 10px;}
.formulaire {margin-left: 20px !important; margin-right: 10px !important;}


}

/* ---------- telephone ----------- */
@media screen and (max-width: 767px) {
  
  .viewer-element body .cc-window.cc-banner { background-color: #fafafa !important;}

/****CSS GENERAL***/
  
    .mentions {
    margin-top: 50px !important;}

 .vign {display: none !important;}
 .logo { margin-left: 30px !important;}
  .para {background-attachment: inherit !important;}
 
  h2 {font-size: 31px !important;}
  
  .txt-right{
    padding-left: 0px !important;
    margin-top: 30px !important;}
  
  /****TOP HEADER***/

  #header .container-fluid {
    padding-bottom: 10px !important;}
  .name {font-size: 37px !important;}
  .txt-header {
    margin-top: 150px !important;
    margin-bottom: 150px !important;}

  /****Accueil***/

.bloc-txt-acc1 .container {
    padding-bottom: 30px !important;
    padding-top: 10px !important;
}
  
  
.formation-accueil  {
    padding-top: 10px !important;
    padding-left: 0px !important;
    padding-right: 0px !important;
}
  
   .call-acc3, .call-acc1 {
    display: flex !important;
    justify-content: center !important;
}
 .background .row , .align1 .row {
    display: flex;
    align-items: center !important;
    flex-direction: column !important;
}
  
  .background .container {padding: 40px !important;}
  
  .photo-av {
    margin-bottom: 0px !important;
    margin-left: 0px !important;
    margin-right: 0px !important;
    margin-top: 20px !important;
}
  
.photo-av .zone-a-container {height: 266px !important;}
  
.bloc-inter  .container {
    padding-bottom: 40px !important;
    padding-top: 20px !important;}
  
  
  .titre-line {margin-right: 0px !important;}
  .inter-photo  {
    margin-top: 20px !important;
    margin-left: 30px !important;
    margin-right: 30px !important;
}
  
  /****FOOTER***/
  
  .push .zone-a-content {width: 90% !important;}
  .push strong {
    font-size: 30px !important;}
  
  .foot1, .foot2, .foot3, .foot4  {margin-left: 10px !important;margin-right: 10px !important;
    text-align: center !important;}
  
.card-body h3  {font-size: 20px !important; line-height: 1.1em !important; color: #4c4034 !important;}
  
 .call01 .card-body {height: 333px !important;}
 .call02 .card-body {height: 315px !important;}
 .call03 .card-body {
    height: 310px !important;}

  .call04 .card-body {height: 340px !important;}
  
  .call05  .card-body {height: 332px !important;}
  .call06 .card-body {height: 306px !important;}
  
  /****FORMATIONS*****/  
  .titre-f h1 {font-size: 33px !important;}
  .titre-f {
    margin-top: 25px !important;
    margin-bottom: 10px !important;}

  #sync1 .item-product-image {height: 300px !important; width: auto !important; margin-top: 20px !important;}  
.page-catalog-details  .container {padding: 0px !important;}
.item-detail h2, .item-title {
  font-size: 18px !important;}
  
  .item-detail h1 {
    font-size: 27px; margin-bottom: 12px !important;}
 
  .formulaire {margin-left: 0px !important;}
  
  .nav {
    background-color: white !important;
    margin-top: 10px !important;}
  
  
  .navbar.menu-header-element { top: 20px !important;}
  .navbar-default .navbar-collapse{
    border-color: transparent !important;}

  .cc-color-override-688238583.cc-window {
  background-color: #fafafa !important;
    color: #4c4034 !important;}
}