@import url(https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,600,700,800,300);
@import 'https://fonts.googleapis.com/css?family=Lato';
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Roboto+Condensed:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap');
:root {
  --main-color: #141414;
    --second-color:#dd663a;
}
.bo_paragraphe {
    border: 1px dashed #C00000;
    margin-bottom: 5px;
    position:relative;
    z-index:3;
}

.bo_paragraphe p.bo_barre_boutons {
    font-size: 0.85em;
    background: #FAFAFA;
}
#backoffice_menu_haut {
    width: 1030px;
    margin: 0 auto;
}
a {
    text-decoration: none!important;
}
body {
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    color: var(--main-color);
    font-size: 14px;
    -webkit-font-smoothing: antialiased;
    margin: 0;
    padding: 0;
    position: relative;
}

.contain-txt {
    width: calc(100% - 620px);
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    position: relative;
    text-align: justify;
}

.contain-img {
    max-width: 560px;
    width: 100%;
}

.magasin .contain-img {
    /* max-width: 450px; */
}

.contain-img img {
    width: 100%;
    height: auto;
}
.list_produit_public {
    width: 100%;
    max-width: 1170px;
}

.contain-pp{
    display:flex;
    align-items: flex-start;
    justify-content: center;
    position: relative;
    z-index: 3;
    }

.valign {
    flex-direction: column;}

.flexcenter {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    align-content: center;
    align-items: center;
}

.flexcenter.gap {
    gap: 60px;
}

.flexcenter.inverse {
    flex-direction: row-reverse;
}

.contain-picto {
    margin-top: 30px;
    gap: 25px;
}

.contain-picto.flexcenter {
    display: flex;
    align-content: space-between;
    justify-content: space-between;
    align-items: stretch;
}

.flexvcenter {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    flex-direction: column;
    align-items: center;
}

.t100 {
    width: 100%;
}

.t80 {
    width: 80%;
}

.t70 {
    width: 70%;
}

.t60 {
    width: 60%;
}

.lefttxt h4 {
    text-align: left;
    font-weight: 600;
    margin-bottom: 30px;
    font-size: 22px;
}

.lefttxt {
    padding-left: 50px;
}

.flexcentery {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.t50 {
    width: 50%;
}

.t40 {
    width: 40%;
}

.service-picto {
    position: relative;
}

.service-picto:after {
    content: '';
    display: flex;
    position: absolute;
    background-color: #333333;
    width: 100%;
    height: 100%;
    top: 0;
    /* background-image: url(../images/interface/SIT_ESCASUT/picto1.png); */
    background-size: 28%;
    background-repeat:no-repeat;
    background-position: center;
    opacity: 0.5;
}

.t30 {
    width: 30%;
}
.t20 {
    width: 20%;
}
.t14 {
    width: calc(14% - 19px);
    /* padding: 20px; */
}

.contain-picto .picto {
    /* margin: 10px 20px; */
    height: 100%;
}

.contain-picto .picto p {
    font-weight: 500;
    text-align: center;
}

.contain-picto .picto img {
    width: 65px;
    height: auto;
    margin-bottom: 13px;
}

.marginbt10 {
    margin-bottom: 10px!important;
}

.marginbt20 {
    margin-bottom: 20px!important;
}

.marginbt30 {
    margin-bottom: 30px!important;
}

.marginbt40 {
    margin-bottom: 40px!important;
}

.marginbt50 {
    margin-bottom: 50px!important;
}

.marginbt60 {
    margin-bottom: 60px!important;
}

.marginbt70 {
    margin-bottom: 70px!important;
}

.marginbt80 {
    margin-bottom: 80px!important;
}

.marginbt90 {
    margin-bottom: 90px!important;
}

.marginbt100 {
    margin-bottom: 100px!important;
}

.nomarginbt{
    margin-bottom:none!important;
}

.list_real{
    font-size:0px;
}
.block_real{
    display:inline-block;
    vertical-align:top;
    padding: 15px;
    width:25%;
}
.block_real img{
    max-width:100%;
    height:auto;
}
#conteneur{
    position:relative;
    z-index:1;
}
/* clean */
/* Titres */
.fond_body_1{
    /* position:relative; */
    /* z-index:1; */
}

.clr {
    clear: both;
}
#ariane {
   position: relative;
   -webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2);
   -moz-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2);
   box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2);
   z-index: 2;
   padding:20px;
   color: #bfbfbf;
   text-transform: uppercase;
   background: #fff;
}
.ariane{
    max-width:100%;
    width:1140px;
    margin:auto;
}

/* Listes */

ul,
ol {
    margin: .75em 0 .75em 32px;
    padding: 0;
}
/* Paragraphes */


address {
    margin: .75em 0;
    font-style: normal;
}
em {
    font-style: italic;
}
.scroll_categorie a{
    display:block;
}
strong {
    font-weight: bold;
}
.tab_addresse strong{
    font-size:18px;
    border-bottom:1px solid #ccc;
    display:block;
    margin:0 15px;
    margin-bottom:20px;

}
/* Formulaires */

form,
fieldset {
    margin: 0;
    padding: 0;
    border: none;
}

#fiche_panier_add {
    width: 100%;
    max-width: 1170px;
    margin: auto;
}
#validation select{
    font-size:16px;padding:7px 10px;
    margin-right:10px;
}
#validation{
    padding:10px 0;
}
#PaymentRequest{
    float:right;
    margin-top:-30px;
}
.spe select{

    padding:5px 10px;
    font-size:14px;
}
.spe label{
    margin-right:15px;
}
input,
button,
select {
    vertical-align: middle;
}
/**********/
/* Boites */
/**********/
.back_liv{
    display:inline-block;

}
.back_liv input{
    background-color:transparent!important;
    border:0px!important;
    background-image:url(../images/interface/livraison.png);
    width:150px;
    height:150px;
    background-size:cover;
}
.filtre_left{
    display:inline-block;
    width:250px;
    vertical-align:top;
   border-top: 1px solid #ccc;
   border-bottom: 1px solid #ccc;
   padding:20px 0px;
}
.filtre_left > p label{
    display:block;
    font-size:16px;
    color:#222;
}
.categorie_filtre > label,
.marque_filtre > label{
    display:block;
    font-size:16px;
    color:#222;
}
.group_checkbox{
    margin-bottom:5px;
}
.filtre_left [type="checkbox"]:not(:checked) + label,
.filtre_left [type="checkbox"]:checked + label {
    position: relative;
    cursor: pointer;
    width: 20px;
    text-align: center;
    display: inline-block;
    vertical-align: top;
    margin: 0;
    height: 20px;
    margin: auto;
    z-index: 2;
    vertical-align:middle;
}
.fake_label{
    padding-left:25px;
    text-align:left!important;
}
.filtre_left [type="checkbox"]:not(:checked) + label,
.filtre_left [type="checkbox"]:checked + label{
    position: relative;
    cursor: pointer;
    width: 150px;
    position:absolute;
    text-align: center;
    display: inline-block;
    vertical-align: top;
    margin: 0;
    height: 20px;
    margin: auto;
    z-index: 2;
}

.filtre_left [type="checkbox"]:not(:checked) + label:before,
.filtre_left  [type="checkbox"]:checked + label:before{
    content: '';
    position: absolute;
    left: 0px;
    top: 0px;
    margin-left: 0px;
    width: 18px;
    border: 1px solid #9a9a9a;
    height: 18px;
    /* dim. de la case */

    background: #f8f8f8;
    /* angles arrondis */
}

.filtre_left [type="checkbox"]:not(:checked) + label:after,
.filtre_left  [type="checkbox"]:checked + label:after {
    content: '\f00c';
    position: absolute;
     font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    top: 0;
    left: 0;
    margin-left: 1px;
    margin-top: 0px;
    font-size: 17px;
    color: var(--second-color);
    transition: all .2s;
}
.filtre_left [type="checkbox"]:checked,
.filtre_left [type="checkbox"]:not(:checked) {
    position: absolute;
    left: -1000px;
    z-index: 1;
}

.filtre_left [type="checkbox"]:not(:checked) + label:after {
    opacity: 0;
    /* coche invisible */

    transform: scale(0);
}

.filtre_left [type="checkbox"]:checked + label:after {
    opacity: 1;
    /* coche opaque */

    transform: scale(1);
}


.filtre_left h5{
    font-size:20px;
    font-weight:bold;
    text-transform:uppercase;
    margin-bottom:20px;
}
.categorie_filtre,
.marque_filtre{
    border:1px solid #222;
}
.categorie_filtre > label,
.marque_filtre > label{
    background-color:#222;
    color:#fff;
    padding:10px 15px;
}
.categorie_filtre{
    margin-bottom:15px;
    margin-top:15px;
}
.scroll_categorie{
    margin-left:10px;
    margin-top:10px;
    max-height:200px;
    position:relative;
    overflow-y:scroll;
    overflow-x:hidden;
    margin-bottom:10px;
}
.marque_filtre{
    margin-bottom:15px;
}
.group_checkbox label{
    display:inline-block!important;
    font-weight:normal;
}
.liste_produits,.no_prod{
    display:inline-block;
    width:calc(100% - 250px);
 padding-left:40px;
}
.right_liste_produit{
    display:inline-block;
    width:calc(100% - 250px);
        padding-left:40px;
}
.right_liste_produit .liste_produits{
   display:block;
    width:100%;
 padding-left:0px;
}
.liste_produits .enstock{
    float:right;
    position:absolute;
    top:20px;
    right:20px;
}
.liste_produits .delai{
    position:absolute;
    right:10px;
    top:70px;
}
#conteneur_contenu {
    min-width: 1000px;
    width: 100%;
    margin: 0 auto;
    z-index: 6;
}
#header {
    min-width: 1000px;
    width: 100%;
    position: fixed;
    margin: 0px;
    padding: 0px;
    /* height:116px; */
    z-index: 100;
    background-color: var(--main-color);
    /* height: 178px; */
}

#header .center-top .fa{
    color: var(--main-color);
    font-size: 18px;
    /* margin-right: 10px; */
}

#header .right-top-header div:hover .fa{
    /* color:var(--main-color); */
}

#conteneur_header{
  /* top:-60px!important; */
  /* background-color:#fff; */
  position:absolute;
  /* background: rgb(224 224 224); */
  /*! background: -moz-linear-gradient(180deg, rgba(236,236,236,1) 0%, rgba(220,220,220,1) 100%); */
  /* background: -webkit-linear-gradient(180deg, rgba(236,236,236,1) 0%, rgba(220,220,220,1) 100%); */
  /* background: linear-gradient(180deg, rgb(236 236 236) 0%, rgb(220 220 220) 100%); */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#eeeeee",endColorstr="#cacaca",GradientType=1);
  /* box-shadow: 0 1px 7px 0px rgba(0,0,0,0.043); */
}
.scroll_down #header{
    position:fixed;
    top:0;
    /* height: 115px; */
}
.scroll_down #rev_slider_2_1_wrapper{
    margin-top:100px!important;
}

.rev_slider{
    z-index:10;
}

.rev_slider li.tp-revslider-slidesli > a:before {
    content: '';
    display: flex;
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgb(0 0 0 / 50%);
}

.rev_slider li.tp-revslider-slidesli a img{
    width: auto!important;
    height: auto;
}

.page-heading {
    background-size: cover;
    background-repeat: no-repeat;
    padding: 30px 0;
    padding-top: 190px;
    text-align: left;
    position: relative;
    background-image: none;
    background-position: top center;
    display: flex;
    align-items: center;
    justify-content: center;
    /* height: 385px; */
    min-height: 385px;
    background-color: var(--second-color);
}

.page-heading:after {
    position: absolute;
    content: '';
     background-image: url(../images/interface/pattern2.png);
    top: 0;
    left: 0;
    width: 100%;
    bottom: 0;
    opacity: 0.6;
    z-index: 1;
}
.page-heading .container {
    margin: auto;
    position: relative;
    z-index: 2;
    max-width: 1170px;
    width:100%;
}
.page-heading .page-title h2 {
    font-size: 40px;
    font-weight: 900;
    text-transform: uppercase;
    color: #fff;
    padding-bottom: 0;
    margin-bottom: 0px;
    letter-spacing: 2px;
    text-align:center;
    font-size:50px;
    /* margin-top:40px; */
}
.page-heading .page-title h2:after {
    background-color: var(--main-color)!important;
    width: 90px!important;
}
.page-heading .page-title .line-dec {
    margin: 10px 0px;
    width: 90px;
    height: 1px;
    background-color: var(--main-color);
    display: none;
}
.page-heading .page-title span {
    font-size: 24px;
    font-weight: normal;
    color: #2d3031;
    line-height: 36px!important;
}
#header #logo {
    z-index: 1000;
    text-align: left;

    margin: 0px;
}
#header #logo img {
    width:100%;
    z-index: 39;
}

#header .left-top-header img{
    height:100%;
    width: auto;
    padding: 8px;
    margin-left: 10px;
}

#conteneur_header {width: 1140px;font-size: 0;margin: auto;position: relative;-webkit-transition: all 0.5s ease;-moz-transition: all 0.5s ease;-ms-transition: all 0.5s ease;-o-transition: all 0.5s ease;display: flex;}

#header h1 {
    margin: 0px;
    padding: 0px;
    font-size: 1.65em;
}
#header img {
    margin: 0;
    padding: 0;width:100%;
    background-image: none;
}
.numero_tel{
    width:300px!important;
    margin-top:7px!important;
}
.left-top-header{
    display: block;
    width: 280px;
    height: 100%;
    display: flex;
    align-items: center;
}
.right-top-header{
    display: block;
    width: calc(100% - 280px);
    width: 100%;
}
.right-header{
    display:inline-block;
    width: calc(100% - 170px);
    vertical-align:middle;
    padding-left:20px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
.scroll_down #rev_slider_2_1_wrapper{
    margin-top:100px!important;
}

#home_img{
    width:100%;
    height: 1000px;
    background-image: url(../images/interface/SIT_EKIP/Slide1.jpg);
    background-size:cover;
    display:flex;
    justify-content: flex-end;
    align-items: flex-end;
    }

.bandeau-left-home{
    background-color:#ffffffd9;
    width: 470px;
    height: calc(100% - 280px);
    padding: 25px 25px;
    margin-right: 85px;
    display: flex;
    flex-direction: column;
    align-items: center;
position: relative;}

.bandeau-left-home:before{
    content:'';
    display:block;
    position:absolute;
    background-color: #ffffffd9;
    width: 100%;height: 30px;clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
    top: -30px;
    left:0;
}

.bandeau-left-home img{
    width:70%;
    margin-bottom:40px;
}

.bandeau-left-home h2{
    font-weight: 700;
    margin-bottom: 25px;
    color: var(--main-color);
}

.bandeau-left-home p{
    text-align:center;
    font-size:18px;
    color: var(--main-color);
    margin-bottom: 25px;
}

.bandeau-left-home a{
    background-color: var(--main-color);
color: #fff!important;padding: 10px 18px;border-radius: 4px;transition: all 0.5s ease;}

.bandeau-left-home a:hover{
    background-color: #222;
/* color: var(--main-color)!important; */}

#home_img .bandeau-right-home{
    background-color:#ffffffa6;
    width:100%;
    height: calc(100% - 340px);
    max-width: 500px;
    margin: 0 80px 0;
    padding: 0 40px 0;
}

.page-heading {
    background-size: cover;
    background-repeat: no-repeat;
    padding: 80px 0;
    padding-top:250px;
    text-align: left;
    position: relative;
    background-image: url(../images/interface/SIT_CHOPPER/heading_denime.jpg);
    background-position: top center;
}

.page-heading:after {
    position: absolute;
    content: '';
     background-image: url(../images/interface/pattern2.png);
    top: 0;
    left: 0;
    width: 100%;
    bottom: 0;
    opacity: 0.6;
    z-index: 1;
}
.page-heading .container {
    margin: auto;
    position: relative;
    z-index: 2;
    max-width: 1170px;
    width:100%;
}
.page-heading .page-title h2 {
    font-size: 40px;
    font-weight: 900;
    text-transform: uppercase;
    color: #fff;
    padding-bottom: 0;
    margin-bottom: 0px;
    letter-spacing: 2px;
    text-align:center;
    font-size:50px;
    /* margin-top:40px; */
}
.page-heading .page-title h2:after {
    background-color: var(--second-color)!important;
    width: 90px!important;
}
.page-heading .page-title .line-dec {
    margin: 10px 0px;
    width: 90px;
    height: 1px;
    background-color: var(--second-color);
    display: none;
}
.page-heading .page-title span {
    font-size: 24px;
    font-weight: normal;
    color: #2d3031;
    line-height: 36px!important;
}
#header #logo {
    z-index: 1000;
    text-align: left;

    margin: 0px;
}
#header #logo img {
    height: 100%;
    width: auto;z-index: 39;
display: block;}

#header .left-top-header img{
    height:100%;
    width: auto;
    padding: 3px;
    margin-left: 10px;
}

#conteneur_header {width: 100%;padding: 0 30px;font-size: 0;margin: auto;position: relative;-webkit-transition: all 0.5s ease;-moz-transition: all 0.5s ease;-ms-transition: all 0.5s ease;-o-transition: all 0.5s ease;display: flex;align-items: center;justify-content: space-between;height: 75px;}

#header h1 {
    margin: 0px;
    padding: 0px;
    font-size: 1.65em;
display: block;height: 100%;}

#header #logo a{
    height:100%;
display: block;padding: 0;}

#header img {
    margin: 0;
    padding: 0;width:100%;
    background-image: none;
}
.numero_tel{
    width:300px!important;
    margin-top:7px!important;
}
.left-top-header{
    display: block;
    width: 276px;
    height: 100%;
    display: flex;
    align-items: center;
}
.right-top-header{
    display: block;
    width: 30%;
}
.right-header{
    display: flex;
    width: calc(100% - 351px);
    vertical-align:middle;
    /* padding-left:20px; */
    justify-content: flex-end;
    }
.btn_add_qty {
    display: inline-block;
    vertical-align: top;
}
.select_qty p {
    font-size: 0!important;
}
.select_qty select,
.config select {
    font-size: 17px;
    padding: 7px 10px;
}
.config select {
    padding: 3px 5px;
    font-size: 14px;
}
.config > div {
    margin-bottom: 10px;
}
.config {
    font-size: 14px;
}
.right_liste_produit .config{
    display:inline-block;
    vertical-align:top;
}
.right_liste_produit .qty_add{
    display:inline-block;
    margin-left:20px;
        vertical-align:top;
}
.right_liste_produit .qty_add label{
    font-size:15px!important;
    display:inline-block;
    vertical-align:top;
    padding-right:10px;
    margin-bottom:0px!important;
    vertical-align:middle;
}
.right_liste_produit .qty_add select{
        padding: 3px 5px;
    font-size: 14px;
}
.config label {
    vertical-align:middle;
    margin-bottom:0px!important;
    font-size: 15px;
    width: 100px;
    display:inline-block;
}
.btn_ajout_panier,
.btn_ajout_panier tbody,
.btn_ajout_panier tbody tr {
    display: block!important;
}
.btn_ajout_panier{
    margin-bottom:40px;
}
.right_liste_produit .btn_ajout_panier{
    margin-bottom:0px;
}
.btn_add_qty {
    display: inline-block;
    vertical-align: middle;
}
.select_qty {
    display: inline-block;
    font-size: 0;
    vertical-align:middle;
}
.select_qty strong{
    font-size: 15px!important;
    display: inline-block;
    vertical-align: top;
    padding-right: 10px;
    margin-bottom: 0px!important;
    vertical-align: middle;

}
.select_qty label{
    display:inline-block;
    font-size:15px;
    vertical-align:middle;
    padding-right:15px;
    margin-bottom:0px;
}
.btn_ajout_panier .bouton_panier {
    background-color: var(--main-color);
    display: inline-block;
    padding: 8px 30px;
    font-size: 15px;
    font-weight: normal;
    border: 1px solid var(--main-color);
    color: #fff!important;
    transition: 0.3s all ease;
    -webkit-transition: 0.3s all ease;
    vertical-align: top;
    display: inline-block;
    margin-left: 10px;
    font-weight: 600;
    font-size: 18px;
}
.picto-head{
    display:inline-block;
    font-size:25px;
    vertical-align:middle;
    color: #0c265d;
    padding:10px 0px;
    padding-right:10px;
}
.info-head{
    display:inline-block;
    font-size:12px;
    vertical-align:middle;
    color:#5b5d60;
}
.info-head strong{
    font-weight:600;
}
.header_cart_span{
    width: 17px;
    height: 17px;
    line-height: 17px;
    background-color: var(--second-color);
    border-radius: 2px;
    text-align: center;
    color: #fff;
    z-index: 2;
    font-size: 12px;
    position: absolute;
    top:0;
    left:3px;
    font-weight:bold;
}
.right-header .contact-header{
    border-bottom: 2px solid #f0f0f0;
    padding-bottom:10px;
    padding-top:5px;
}
.hover-panier-top{
    position:absolute;
    display:none;
    border:3px solid #a2a7b1;
    background-color:#fff;
    z-index:100;
    text-align:left;
}
.panier_header:hover .hover-panier-top{
    display:block;
    position:absolute;
    width:250px;
    top:100%;
    padding:15px 15px;
    font-size:12px;
    right:12px;
}
.bottom_panier_top{
    border-top:1px solid #dedede;
    margin-top:10px;
    padding-top:15px;
}
.bottom_panier_top a{
    color:#222!important;
    display:inline-block;
    font-weight:bold;
    padding:5px 10px;
    border-radius:3px;
    background-color:#f1f1f1;
    text-transform:uppercase;
    font-size:11px!important;
    vertical-align:top;
    line-height:15px;
}
.col-head:last-child{
    text-align:right;
    width:100px!important;
}
.floet_panier{
    float:right;
    font-size:14px;
}
.panier_header:hover .hover-panier-top:before{
    content: '';
    display: block;
    position: absolute;
    right: 16px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 9px;
    top: -18px;
    border-color: transparent transparent #a2a7b1 transparent;
}
.right-header .contact-header .col-head{
    display:inline-block;
    vertical-align:top;
    font-size:14px;
    width:29%;
}
.panier_header{
    display:inline-block;
    height:40px;
    width:40px;
    position: relative;
    text-align:right;
}
.panier_header .header-cart{
    position:relative;
    right:20px;
    top:-5px;
    display:inline-block;
}
.panier_header .header-cart:after{
        font-family: 'simple-line-icons';
    content: "\e04d";
    display: none;
    position: absolute;
    top: 2px;
    left: -15px;
    color: #393939;
    font-size: 22px;
}
.header-cart{

}
#recherche{
    display:inline-block;
    /* position:absolute; */
    top: 39px;
    right:20px;
}
#recherche button{
    background-color:transparent;
    border:0;
    width:35px;
    height:36px;
    display:inline-block;
    font-size: 16px;
    color: var(--main-color);
    position:relative;
    height:35px;
    overflow:hidden;
    font-weight: 600;
}
#recherche .input-text{
    width: calc(100% - 55px);
    overflow:hidden;
    display:inline-block;
    vertical-align:top;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
#recherche .input-text input{
    height: 30px;
    box-sizing:border-box;
    border-radius:0px;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--main-color);
    color: var(--main-color);
    box-shadow: none;
}

#recherche .input-text input::placeholder{
    color:var(--main-color);
}


#recherche button:before{

    display:inline-block;
}


.top-header{
    background-color: var(--second-color);
    height: 40px;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
}
.scroll_down .top-header{
    /* height:0; */
    overflow:hidden;
}
.scroll_down #conteneur_header{
    /* top:0px!important; */
}

.block_sub {
    position: absolute;
    top: 110px;
    z-index: 999;
    padding: 0 0;
    background: #fff;
    left: 0px;
    padding-top: 20px;
    list-style-type: none;
    padding-bottom: 20px;
}
.block_sub {
    left: -9999px;
    opacity: 0;
    -webkit-transition: top .2s ease, opacity .2s ease;
    -moz-transition: top .2s ease, opacity .2s ease;
    -ms-transition: top .2s ease, opacity .2s ease;
    -o-transition: top .2s ease, opacity .2s ease;
    transition: top .2s ease, opacity .2s ease;
    top: 120px;
    width: 100%;
    background-color: #f1f1f1;
    border: 0px;
}
.center_menu {
    max-width: 1140px;
    margin: auto;
    font-size: 0;
    display:flex;
    flex-direction: row;
}
    .intro_sub{
        border-right:1px solid #ccc;
    }
.link_sub {
   display:flex;
    width: calc(100%);
    vertical-align: top;
    font-size: 0;
    margin:auto;
        letter-spacing:0;
}
.col_sub {
    /* display: inline; */
    vertical-align: top;
    /* width: 32.333333%; */
    text-align: left;
    padding-left: 15px;
    line-height: 30px;
    margin-bottom:5px;
    display: flex;
    flex-direction: column;
}

.col_sub h5 {
    margin-top: 0px;
    text-align: left;
    line-height: 30px;
    margin-bottom: 0px;
}
.col_sub h5 a {
    text-align: left!important;
    font-size: 12px;
    font-weight: bold!important;
       letter-spacing:0px;
}
.list_menu1{
    letter-spacing:0;
    margin-left:0;
    display:inline-block;
    width: 100%;
    position:relative;
    vertical-align:top;
}

#menu_haut ul .list_menu1 ul {
    display: flex;
    flex-direction: row;
}

#menu_haut ul .list_menu1 ul.menu-sub2 {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.list_menu1 li{

}
.list_menu1 > ul > .active > a{

    background-color:#dd663a;
    color:#fff!important;

      display:block;
        color:#fff!important;


}
.list_menu1  a{
        display:inline-block;
        padding:3px 10px;
}
.list_menu1 li ul{
    font-size:0px;
    letter-spacing:0;
}
.list_menu1 li ul li{
    display:inline-block;
    width:33.333333%;
text-align:left;
    font-size:12px;
    padding:0px 10px;
}
.list_menu1 li ul li a{
    display:block;
}
.list_menu1 li ul li:hover a{
    background-color:#dd663a;
    color:#fff!important;
    border-color:#dd663a;
}
.list_menu1 li ul li a{
    text-transform:none;
    letter-spacing:0px;
    font-size:14px;
    padding:5px 5px;
}

.panel_content{
    border:1px solid #ccc;
    width:66.666%;
    letter-spacing:0;
    display:inline-block;
    font-size:12px;
    padding:10px;
}
.list_menu1 li ul li a{
    border-top:1px solid #ccc;
    display:block;
}
.list_menu1 li ul li:first-child a{
    border:0px;
}
.list_menu1 li ul li:nth-child(2) a{
    border:0px;
}
.list_menu1 li ul li:nth-child(3) a{
    border:0px;
}
.list_menu1 > ul {
    text-align: left;
display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
}
    .col_sub_menu{
        /* font-size:0; */
        display:
        inline;
        width: 33.3%;
    }
.list_menu1 > ul > li{
    margin-bottom:2px;


    list-style:none;

}
#menu_haut .list_menu1 li ul{
        border: 1px solid #ccc;
    position:absolute;
    display:none;
    left:33.333%;
        text-align:left;
    top:0;
    width:66.666%;
    box-sizing:border-box;
    padding: 10px 0px!important;

    bottom:0;
}
#menu_haut .list_menu1 li.active ul{
    display:block;
}
.list_menu1 > ul > li > a{

       text-align: left!important;
    font-size: 13px;
    font-weight: bold;

       letter-spacing:0px;
}
.col_sub ul {
    display: block;
    font-size: 14px;
}
.col_sub ul {
    list-style: none;
    margin: 0px;
    padding: 0px;
}
.col_sub ul li {
    padding: 0px;
    font-size:12px;
    line-height:1em;
    padding:0px 0px;
    margin: 0px;
}
.col_sub ul li a{
    font-size:13px;
    line-height:18px!important;
    letter-spacing:0px;
    text-transform:none;
    color:#000;
    z-index: 10000000;
}
.intro_sub h4 {
    font-size: 30px;
    color: #424242;
    font-weight: bold;
    letter-spacing: 2px;
    margin: 0px;
    margin-bottom: 20px;
}
.intro_sub p {
    font-size: 14px;
    text-align: justify;
    text-transform: none;
    margin-bottom: 0px;
}

.center-top{
    /* max-width:1170px; */
    margin:auto;
    font-size:0;
    padding: 0 30px;
    width:100%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    align-content: stretch;
}
.center-top:after{
    content:'';
    display:table;
    clear:both;
}
.left-top-header p,
.left-top-header a{
     font-size: 12px;
     display:inline-block;
     color: var(--main-color);
     padding: 0;
     margin: 0;
}
.left-top-header a{
    color: #fff!important;
}
.right-top-header div>a {
    display: flex;
    font-size:11px;
    /* text-transform:uppercase; */
    color: var(--main-color)!important;
    /* margin-right:15px; */
    border-left: 1px solid #00000038;
    justify-content: center;
}

.right-top-header .connect a {
    text-transform:uppercase;
}


.right-top-header div:hover a{
    color:var(--second-color)!important;
}
.right-top-header div.connect>a:before {
    content:"\f023";font-family:'FontAwesome';font-size:13px;margin-right:10px;position:relative;top:1px;
}
.right-top-header .nav li,#pied .social li{
    display:inline-block;
}
.right-top-header .nav{
    margin:0px;
    display:inline-block;
}
.right-top-header .nav a,
#pied .social a{
    padding: 0;
    background: none;
    margin: 14px 3px 0;
    background-color: #303239;
    border-radius: 8px;
    color:#fff;

    width: 28px;
             -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;

    text-align: center;
    line-height: 28px;
    height: 28px;
}
#pied .social a{
    font-size:17px;
    position: relative;
    display: block;
}
.right-top-header .nav .facebook:hover,
#pied .social .facebook:hover{
    background-color:#3b5996;
}
.right-top-header .nav .google-plus:hover,
#pied .social .google-plus:hover  { background: #c3391c; }
.right-top-header .nav .linkedin:hover,
#pied .social .linkedin:hover { background: #0073b2; }
.right-top-header .nav .rss:hover,
#pied .social .rss:hover { background: #dd663a; }
.right-top-header .nav a i,
#pied .social a i{
    padding-top:6px;
}
#recherche:hover{
    width:auto;
    overflow:visible;
         -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;

    transition: all 0.5s ease;
}
#recherche:hover .input-text{
    width:150px;
         -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;

    transition: all 0.5s ease;

}
#recherche input[type="submit"]{
    background-color: transparent!important;
    position:absolute;
    border:0;
    top:0;
    left:0;
    width:100%;
    height:100%;
    font-size:0!important;
    /* background-color: transparent; */
}
/* =============================================================================
 * MENU
 * ===========================================================================*/

#menu_haut {
    list-style-type: none;
    width: 100%;
    height: 100%;
    font-size: 0;
    display: flex;
    position:relative;
    justify-content: flex-end;
    /* padding-right: 15px; */
    /* padding-top: 10px; */
    /* border-top: 1px solid #f6952347; */
}
#menu_haut > ul > li {
    display: flex;
    text-transform: uppercase;
    font-size: 14px;
    /* position: relative; */
    transition: 0.5s all ease;
    -webkit-transition: 0.5s all ease;
    /* padding: 0 20px; */
    align-items: center;
}

.menu-second-responsive {
    display: none;
}
#menu_haut > ul > li:hover {

}
#menu_haut> ul{
     position:relative;
}
#menu_haut ul {
    margin: 0!important;
    padding: 0!important;
    display: flex;
    gap: 8px;
   
    /* justify-content: space-between; */
}
#menu_haut li:first-child {
    border-left: 0px;
}
#menu_haut>ul > li > a {
    display: flex;
    padding: 10px 10px;
    color: #fff;
    transition: 0.5s all ease;
    -webkit-transition: 0.5s all ease;
    outline: none;
    text-transform: uppercase;
    font-size: 14px!important;
    text-decoration: none;
    font-weight: 600;
    height: 100%;
    align-items: center;
}

#menu_haut>ul > li.PGS_SPECIALE_2 > a {
    /* color: var(--main-color); */
}

.menu-sub {
    position: absolute;
    top: 49px;
    z-index: 999;
    padding: 15px 0;
    background: #f5f5f5;
    left: 0;
    list-style-type: none;
    box-shadow: 0 5px 9px rgba(0,0,0,0.058);
}
.menu-sub > li {
    display: block !important;
}
.menu-sub > li:hover {
    background: #fff;
}
.menu-sub a {
    min-width: 150px;
    padding: 10px 13px 10px 15px !important;
    text-transform:none;
    font-size:13px;
    line-height:22px;
    font-weight:500!important;
}

.PGS_SPECIALE_3 .menu-sub li:first-of-type a:first-of-type {
    display: none;
}
#menu_haut > ul > li > ul {
    top: 100px;
}


#menu_haut > ul > li:hover > ul.menu-sub {
    display: flex;
    flex-direction: column;
    align-content: flex-start;
    justify-content: flex-start;
    gap: 10px;
    top: 100%;
}

#menu_haut > ul > li:hover > ul.menu-sub > a {
    display: none;
}

#menu_haut ul ul {
    left: -9999px;
    -webkit-transition: top .2s ease, opacity .2s ease;
    -moz-transition: top .2s ease, opacity .2s ease;
    -ms-transition: top .2s ease, opacity .2s ease;
    -o-transition: top .2s ease, opacity .2s ease;
    transition: top .2s ease, opacity .2s ease;
}

.button-cata{
    position: fixed;
    top: 75vh;
    left:0;
    z-index: 1000;
    width: auto;
    background-color: var(--second-color);
    box-shadow: 0 0 10px #4f4f4f80;
    color: #fff!important;
    padding: 20px;
    font-size: 38px;
    display: flex;
    line-height: 18px;
    font-weight: 500;
    gap: 10px;
    align-items: center;
}

.button-cata span {
    font-size: 18px;
}

.mbt0{
  margin-bottom: 0px!important;
}
.mbt10{
  margin-bottom:10px;
}
.mbt20{
  margin-bottom:20px;
}
.mbt30{
  margin-bottom:30px;
}
.mbt40{
  margin-bottom:40px;
}
.mbt50{
  margin-bottom:50px;
}
.mbt60{
  margin-bottom:60px;
}
.mbt70{
  margin-bottom:70px;
}
.mbt80{
  margin-bottom:80px;
}
.mbt90{
  margin-bottom:90px;
}
.mbt100{
  margin-bottom:100px;
}

.mt0{
  margin-top: 0px!important;
}
.mt10{
  margin-top:10px;
}
.mt20{
  margin-top:20px;
}
.mt30{
  margin-top:30px;
}
.mt40{
  margin-top:40px;
}
.mt50{
  margin-top:50px;
}
.mt60{
  margin-top:60px;
}
.mt70{
  margin-top:70px;
}
.mt80{
  margin-top:80px;
}
.mt90{
  margin-top:90px;
}
.mt100{
  margin-top:100px;
}

.pbt0{
  padding-bottom: 0px!important;
}
.pbt10{
  padding-bottom:10px;
}
.pbt20{
  padding-bottom:20px;
}
.pbt30{
  padding-bottom:30px;
}
.pbt40{
  padding-bottom:40px;
}
.pbt50{
  padding-bottom:50px;
}
.pbt60{
  padding-bottom:60px;
}
.pbt70{
  padding-bottom:70px;
}
.pbt80{
  padding-bottom:80px;
}
.pbt90{
  padding-bottom:90px;
}
.pbt100{
  padding-bottom:100px;
}

.pt0{
  padding-top: 0px!important;
}
.pt10{
  padding-top:10px;
}
.pt20{
  padding-top:20px;
}
.pt30{
  padding-top:30px;
}
.pt40{
  padding-top:40px;
}
.pt50{
  padding-top:50px;
}
.pt60{
  padding-top:60px;
}
.pt70{
  padding-top:70px;
}
.pt80{
  padding-top:80px;
}
.pt90{
  padding-top:90px;
}
.pt100{
  padding-top:100px;
}

@media screen and (min-width: 1170px) {
    .resp_menu{
        display:none!important;
    }

    li:hover > .block_sub {
        opacity: 1;
        position: fixed;
        left: 0;
        right: 0;
        width: 100%;
        top: 115px;
        text-align:left;
        height: auto;
    }
 #menu_haut > ul > li:hover > ul {
        left: 0;
        top: 100%;
        opacity: 1;
        width: 230px;
        padding: 5px 5px!important;
    }

     #menu_haut > ul > li.sousmenu-bis:hover > ul {
        left: 0;
        top: 100%;
        opacity: 1;
        width: 200px;
        padding: 5px 10px!important;
    }
 .extend {
        display: none!important;
    }

}
/*******************************/
/* specific to non IE browsers */
/* =============================================================================
 * End of Menu
 * ===========================================================================*/
.ligne-marque, .list_marque{
     display: flex;
     /* border-top:3px solid #ddd; */
     gap: 20px;
     flex-wrap: wrap;
     width: 100%;
 }
  .ligne-marque:last-child{
          /* border-bottom:3px solid #ddd; */
  }
 .block_marque{
     display: flex;
     width: calc(20% - 16px);
     padding:15px 15px;
     vertical-align:top;
     position:relative;
     /* border-left:3px solid #ddd; */
     flex-wrap: wrap;
     box-shadow: 0 0 10px #0000002e;
     border-radius: 5px;
 }
 .block_marque:last-child{
      /* border-right:3px solid #ddd; */
 }
 .block_marque:last-child{
      /* border-right:3px solid #ddd; */
 }
 .block_marque .inner_marque > a{
     display: flex;
     vertical-align:middle;
     height: 100%;
     width: 100%;
     position: relative;
     padding: 20px;
 }

.list_cat{
     margin-left:0;
 }
.list_cat li{
    list-style:none;
    display:inline-block;
    width:20%;
    box-sizing:border-box;
    padding:0 30px;
    margin-bottom:50px;
}
.list_cat li img,
 .block_marque img{
    max-width:100%;
    height:auto;
    display:block;
    margin:auto;
}
 .block_marque img{
     max-height:80px;
     width:auto;
     position: relative;
     z-index: 2;
     /* mix-blend-mode: multiply; */
     /* background-color: #fff; */
     /* position: relative; */
     /* z-index: 3; */
 }


 .inner_marque{
     display: flex;
     top:0;
     bottom:0;
     height:100%;
     width: 100%;
     position: relative;
     flex-wrap: wrap;

     flex-direction: column;
     align-content: center;
     justify-content: center;
     align-items: center;
     gap:10px;
 }

  .block_marque  h3{
      margin:0;
      /* display: none; */
      /* position: absolute; */
      z-index: 1;
  }

.inner_marque a:after {
    content: '';
    display: flex;
    position: absolute;
    width: 100%;
    height: 100%;
    /* background-color: #ffffffab; */
    z-index: 1;
    left: 0;
    top: 0;
}
.list_cat li span,
 .block_marque  h3 a{
    text-align:center;
    display:block;
    margin-top: 0;
    font-size: 16px;
    color:#222;
    font-weight: 600;
}
#header_popup {
    display: none;
}
#fiche_panier_add  table img{
   max-width:400px;
   height:auto;
}
.fiche_produit{
    width:400px;
    text-align:center;
    height:300px;
    vertical-align:middle;
    border:6px solid #eee;
    background-color:#fafafa;
    display:table-cell!important;

}
.fiche_produit +td  h4{
    font-weight:bold;
    font-size:20px;
}
.ref_prod{
    margin:15px 0px!important;
    margin-bottom:5px!important;
}
.enstock +p{
    margin-bottom:20px!important;
}
.enstock img{
    max-width:20px!important;
    vertical-align:middle!important;
    padding-right:10px;
    box-sizing:content-box;
}
.ref_prod label{
    display:inline-block;
    font-weight:normal;
    padding-right:5px;
}
.fiche_produit + td{
    padding-left:60px!important;

}
#contenu {
    margin: 0;
    padding: 0;
    padding-top: 50px;
    padding-bottom: 0;
    position: relative;
    width: 100%;
    margin: auto;
    z-index: 4;
    background-repeat: no-repeat;
    background-position: right bottom;
}
.page_liquid #contenu {
    width: 100%!important;
}
.page_liquid #centreetdroite {
    width: 100%!important;
}
.pageAccueil #contenu {
    padding: 0px;
    width: 100%;
}

.pageAccueil #ariane {
    display: none;
}
.video_section{
    width:50%;
    margin:auto;
    margin-bottom:30px;
}
#contenu_scroller {
    /* text-align: justify; */
}

.PGS_SPECIALE_2 div#contenu_scroller {
    max-width: 1170px;
    width: 100%;
    margin: auto;
}

.PGS_SPECIALE_2 div#contenu_scroller iframe {
    width: 100%;
}
.row_user{
    font-size:0;
      margin:0 -15px;
}
.mdlPanier{
    color:#000;
}
.left_user{
    font-size:16px;

}
.left_user, .right_user{
    display:inline-block;
    width:50%;
    padding:0 15px;
    vertical-align:top;
}
.row_video{
    font-size:0;
    margin:0 -15px;
text-align:center;
}
.back_btn a img{
    width:160px;
}
.back_btn a{
    display:inline-block;
    vertical-align:top;
}
.video_section{
    display:inline-block;
    padding:0 15px;
}
.video-container{
    margin-top:0px!important;
}
.creat_ticket{
    margin-bottom:20px;
    text-align:right;
}
.titre_prod{
    display:inline-block;
    font-size:15px;
    vertical-align:middle;
    width:350px;
}
.produit_obli .config{
    display:inline-block;
    vertical-align:middle;
    margin-left:60px;

}
.produit_obli .config .group_config{
    margin-bottom:0px;
}
.add_obli{
    border:1px solid #ccc;
    padding:15px;
    margin-bottom:15px;
}
.produit_obli{
    font-size:0;
    margin-bottom:15px;
}
.produit_obli .config label{
    width:auto!important;
    margin-right:15px;
    vertical-align:middle;
}
.qty_obli{
    vertical-align:middle;
    display:inline-block;
    font-size:15px;
}
.add_obli h4{
    margin-top:0px;
    border-bottom:1px solid #ccc;
    padding-bottom:10px;
    margin-bottom:15px;
}

.fiche_marque > p img{
    padding-left:80px;
    height:auto;
    max-width:250px;
    padding-bottom:40px;
    box-sizing:content-box;
}
.fiche-compte{
    position:relative;
}
.fiche_marque > p{
    padding:0 15px;
}
.fiche_marque > h3{
    margin:0 15px;
    margin-bottom:20px;
        border-bottom: 1px solid var(--second-color);
    padding-bottom: 5px;
}
#gauche {
    float: right;
    margin: 0;
    padding: 0;
    padding: 0 0 0 20px;
    /* background-image: url(../images/interface/fond-gauche.png); */

    background-repeat: no-repeat;
    background-position: left center;
    width: 262px;
}
#droite p,
#centreetdroite p,
#centreetdroite ul li,
#centre p {
        margin: 0 0 10px 0;
        color: #353535;
        font-size: 14px;
        line-height: 20px;
}

p.txtcenter {
    text-align: center;
}
#centreetdroite .fa-plus{
    margin: 0 5px;
    color: #08a24b;
    border-radius: 50%;
    width: 15px;
    font-weight: 400;
    font-size: 18px;
}
#centreetdroite ul{
    margin: 0;
    padding-left: 40px;
}
#centreetdroite ul.catalogues li{
    list-style-type: none;
}

#centreetdroite ul.catalogues li a{
    color: #02a850;
    font-weight:600;
}
#centreetdroite ul.catalogues li:before{
    content:'> ';
    color:#05a44f;
    font-weight:600;
}
.cmd_obli{
    display:block;
    color:red;
    margin-top:15px;
}
.info_liste{
    position:absolute;
    right:0;

}
.about h3{
    font-weight: 600;
    margin-bottom: 30px;
    font-size: 26px;
    text-transform: uppercase;
    text-align: right;
}

.about h3:after{
    content:'';
    display:block;
    width:300px;
    height:3px;
    background-color: var(--main-color);
    margin-left: auto;
    margin-top:20px;
}

.about{
    padding:90px 0px;
}
.about .button{
    position: relative;
    border: 0 none;
    border-radius: 3px;
    color: #fff;
    display: block;
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    letter-spacing: 1px;
    line-height: 1.5;
    text-transform: uppercase;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    background: var(--main-color);
    margin: 52px 0 20px auto;
    line-height: 1;
    padding: 18px 20px 16px;
    -webkit-transition: all 0.21s ease;
    -moz-transition: all 0.21s ease;
    -o-transition: all 0.21s ease;
    transition: all 0.21s ease;
    width: 200px;
    text-align: center;
}

.about .button:hover{
    background-color: #222;
}



.temoignage{
    padding:80px 0px;
}
.services p{
    color:#fff!important;
    font-weight:300;
    margin-top:10px!important;margin-bottom:0px!important;

}
.services h4{
    color:#fff;
    font-weight: 600;
}
.icon-box20:hover i{
    background-color:#fff;
    color:var(--second-color);
}
.icon-box20:first-child{
    margin-bottom:50px;
}
.icon-box20 i:before{
 margin-left:0px;
 font-size:35px;
 font-weight:100;
 margin-left:-3px;
}
.icon-box20 i{
    line-height:25px;

}
.icon-box20{
    min-height:104px;
    text-align: center;
}
.icon-box20 img{
    width: auto;
    height: 90px;
    display: block;
    margin: 0 auto;
    padding-bottom: 10px;
}
.services .col{
    padding:0px;

}

.services .button_contain a {
    display:block;
    border-radius:3px;
    width:150px;
    border:2px solid #fff;
    padding:10px 20px;
    color:#fff;
    margin:auto;
    text-align: center;
    transition:all 0.2s ease;
    font-weight:600;
}

.services .button_contain a:hover {
    background-color:#fff;
    color:#dd663a;

}

.desc-service{
   width: 100%;
   display: block;
   vertical-align:middle;
}
.section-title h2{
    line-height: 1;
    font-size: 25px;
    text-transform: uppercase;
    color: #fff;
    padding-bottom: 0;
    position: relative;
    font-weight: 600;
    padding-left: 0;
    padding-bottom: 35px;
    margin-bottom: 0;
    text-align: center;
}
.temoignage .section-title h2{
    color:#000;
}
.temoignage .section-title{
    text-align:center;
}

.temoignage .section-title h2:after{
    left:50%;
     border-color: #d5102a;
     background-color:#fff;
     bottom:-5px;
}
.icon-box20 i {
    display: inline-block;
    font-size: 32px;
    border: 3px solid;
vertical-align:middle;
    padding: 28px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    margin-right: 15px;
    width: 92px;
    height: 92px;
    text-align: center;
    transition: all 0.18s ease;
}

.contact-us{
    padding: 0 0;
    /* background-image: url(../images/interface/photo-magasin.jpg); */
    background-size:cover;
    background-attachment:fixed;
    position:relative;
    /* border-top:5px solid #6b778c; */
    z-index: 2;
    border: none;
    /* height: 450px; */
    display: flex;
    }

.contact-us iframe{
    width:100%;
    height: 450px;
    padding: 0;
    margin: 0;
    border: 0;
    /* overflow-clip-margin: unset; */
    line-height: normal;
}

.contact-us > *{
    z-index:2;
    position:relative;
}

.contact-us:after{
    content:'';
    display: none;
    position:absolute;
    inset:auto;
    background-color: #2222227a;
    top:0;
    bottom:0;
    left:0;
    right:0;
    z-index:1;
}
.contact-us p{
    font-size: 24px!important;
    color: #fff!important;
    text-align: center;
    line-height: 34px!important;
}

.contact-us a{
    display:block;
    background-color: var(--main-color);
    width:150px;
    border-radius:3px;
    padding:10px;
    text-align:center;
    color:#fff!important;
    margin:auto;
    margin-top: 25px;
    transition:all 0.2s ease;
}

.contact-us a:hover{
    background-color:#222;
}

.contain-pp .intro{
    font-size:16px;
    margin-bottom:50px;

    text-align:center;
}

.contain-metier{
    display:flex;
    flex-wrap: nowrap;
    justify-content: center;
    margin: auto;
    margin-bottom:45px;
    width: 60%;
}

.contain-metier .m-gauche{
    /* width:20%; */
    display:flex;
    flex-wrap: wrap;
    justify-content: center;
}

.contain-metier .m-gauche div{
    width: 120px;
    height: 120px;
    background-color:#dd663a;
    border-radius:50%;
    margin-bottom: 20px;
    display:flex;
    justify-content: center;
    align-items: center;
    flex:1;
}

.contain-metier .m-droit{
    /* width:80%; */
    padding-left: 25px;
}

.contain-metier .m-gauche div img{
    width:50%;
    height: auto;
}

.contain-pp h4{
    font-weight: 600;
    margin-bottom: 30px;
    font-size: 22px;
    text-align: center;
    display: block;
    width: 100%;
}

.contain-pp h4:after{
    content: '';
    display: block;
    width: 300px;
    height: 3px;
    background-color: #222;
    margin: auto;
    margin-top: 20px;
}

.contain-pp h5{
    font-weight: 600;
    margin-bottom: 30px;
    font-size: 16px;
    text-align: left;
    display: block;
    width: 100%;
}

.contain-pp h5:after{
    content: '';
    display: block;
    width: 50px;
    height: 2px;
    background-color: #222;
    margin-top: 20px;
}

.partenaire{
    margin: 50px 0;
}

.partenaire p{
    text-align:center;
}

.logos-marques{
    display:flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

.logos-marques img{
    max-width: 150px;
    max-height: 100px;
    width: auto;
    height:auto;
    margin: 27px;
}

.contain-button{
    display:flex;
    flex-wrap: wrap;
    justify-content: center;
}

.contain-button a{
    border-radius: 3px;
    color: #fff;
    display: block;
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    letter-spacing: 1px;
    line-height: 1.5;
    text-transform: uppercase;
    font-weight: 600;
    cursor: pointer;
    background: #dd663a;
    margin: 0 10px;
    line-height: 1;
    padding: 18px 20px 16px;
    -webkit-transition: all 0.21s ease;
    -moz-transition: all 0.21s ease;
    -o-transition: all 0.21s ease;
    transition: all 0.21s ease;
    width: 253px;
    text-align: center;
}

.contain-button a:hover{
    background-color:#222;
}

.margin-bt{
    margin-bottom:100px;
}

.flex{
    display:flex;
}

.flex.halign{
    justify-content: center;
}

.flex.valign{
    align-items: center;
}

.contain-pp .fa-chevron-right{
    color:#dd663a;
font-size: 35px;margin: 0 25px;display: flex;align-items: center;height: 195px;}

#centreetdroite .contain-pp .contain-bloc p{
    color:var(--main-color);
font-size: 16px;font-weight: 600;text-align: center;margin-top: 10px;}

#centreetdroite .contain-pp .contain-bloc img{
    border-radius:5px;
}

.contain-pp .bloc50{
    width:50%;
    max-width: 350px;}


.tquart p{
    width: calc(100% - 140px);
/* max-width: 658px; */}

.tquart img{
    width: 140px;
height: auto;max-width: 140px;}

.orange{
    color:#dd663a;
}

.metier{
    display:flex;
flex-wrap: wrap;max-width: 1170px;justify-content: flex-start;margin: auto;z-index: 3;position: relative;}

.metier .bloc-gauche{
    width: calc(100% - 490px);
    padding-right: 50px;
    }

.metier .bloc-droit{
    width: 490px;
    height: 514px;
    background-color: var(--main-color);
    display:flex;
    flex-wrap: wrap;
    margin-top: 101px;
    justify-content: center;
    align-items: center;
    align-content: center;
    position: absolute;
    right: 0;
    bottom: -106px;
    box-shadow: 3px 5px 20px #ffffff8a;
}

.metier .bloc-droit h3{
    width:100%;
    color:#fff;
    text-align:center;
    font-weight:600;
}

.metier .bloc-droit h3:after{
    content:'';
    display:block;
    width:100px;
    height:2px;
    background-color:#fff;
    margin:auto;
    margin-top:10px;
}

#centreetdroite .metier .bloc-droit p{
    color:#fff;
text-align: center;}

.metier .bloc-droit:after{
    content:'';
    display: block;
    position:absolute;
    background-color: var(--main-color);
    width: 100%;height: 60px;
    clip-path: polygon(50% 100%, 0% 0%, 100% 0%);
    /* clip-path: polygon(50% 0, 0 100%, 100% 100%); */
    bottom: -59px;
    left:0;
    box-shadow: 9px 7px 20px 0px #ffffff8a;
}

.metier .bloc-droit .picto{
    width: 110px;
    padding: 14px 0 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    height: 127px;
}

.metier .bloc-droit .picto img{
    width: 52px;
    height: auto;
    margin-bottom: 10px;
    }

.metier .bloc-droit .picto h4{
    color:#fff;
    text-align: center;
    font-size: 14px;
    margin: 0;
    }

#mentions_legales{
    padding-bottom:50px;
}

.connect_button{
    display:flex;
}

.connect_button a{display: flex;align-items: center;padding: 6px 10px;}

.connect_button a .fa{
    font-size: 21px;
color: #ffffff;
transition:all 0.5s ease}

.connect_button a .fa:hover{
    color: var(--second-color);
}

.slide_home{
  /* display:none; */
  width: 100%;
  height: 80vh;
}

.slide_home .owl-nav {
    /* position: absolute; */
    width: 100%;
    bottom: 0;
    height: 100%;
}

.slide_home .owl-nav button {
    position: absolute;
    top: calc(30vh + 163px);
    z-index: 60;
    left: 15px;
    padding: 0;
    /* opacity: 0; */
    transition: all 0.5s ease;
    color: #fff!important;
    font-size: 40px!important;
}

.slide_home .owl-nav button:hover {
    background-color: transparent!important;
    transform: scale(1.1);
}

.slide_home .owl-nav button.owl-next {
    left: auto;
    right: 15px;
}


.slide_home .owl-slide .owl-controls .owl-buttons div {
    position: absolute;
    top: calc(30vh + 200px);
    z-index: 60;
    left: 15px;
    padding: 0;
    opacity: 0;
    transition: all 0.5s ease;
}

.slide_home .owl-slide .owl-controls .owl-buttons div:hover i {
    transform: scale(1.2);
}

.slide_home .owl-slide .owl-page span {
    overflow: hidden;
    border-radius: 50%;
    width: 16px!important;
    height: 16px!important;
    background-color: rgba(0, 0, 0, 0)!important;
    box-shadow: inset 0 0 0 2px #FFF;
    -webkit-transition: background 0.3s ease;
    transition: background 0.3s ease;
    /* position: absolute; */
    margin: 0!important;
    opacity: 1!important;
}

.slide_home .owl-slide .owl-page.active span {
    background-color: #fff!important;
}

.slide_home .owl-slide .owl-pagination {
    position: absolute;
    bottom: 20px;
    z-index: 3;
    width: 100%;
    display: flex;
    gap: 13px;
    justify-content: center;
}

.slide_home .owl-slide:hover .owl-controls .owl-buttons div {
    opacity: 1;
}

.slide_home .owl-slide .owl-controls .owl-buttons div i {
    font-size: 60px;
}

.slide_home .owl-slide .owl-controls .owl-buttons div.owl-next {
    left: auto;
    right: 15px;
}

.slide_home .owl-slide {
    /* position: relative; */
    width: 100%;
    height: 100%;
}

.slide_home .item {
    width: 100%;
    height: 80vh;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    padding-top: 120px;
}

.slide_home .item > a {
    width: 100%;
    height: 100%;
    top:0;
    left:0;
    position: absolute;
    z-index: 1;
}
.slide_home .owl-item {
    width: 100vw !important;
}
.slide_home .owl-wrapper{
     width: 400vw !important;
}
.slide_home .item .contain-txt {
    position: relative;
    z-index: 3;
    width: 100%;
    height: 100%;
    /* padding-top: 203px; */
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
    align-content: center;
    gap: 20px;
    max-width: 1170px;
    padding: 0px 60px;
}

.slide_home .item .contain-txt p {
    width: auto;
    /* white-space: nowrap; */
    font-size: 20px;
    line-height: 34px;
    font-weight: 300;
    color: rgb(255, 255, 255);
    font-family: 'Roboto', sans-serif;
    /* padding: 25px; */
    text-align: left;
    text-shadow: rgba(0, 0, 0, 0.5) 2px 1px 6px !important;
    visibility: inherit;
    /* opacity:0; */
}

.slide_home .item .contain-txt a.button, .button {
    background-color: transparent;
    color: #fff!important;
    border: 2px solid #fff;
    position: relative;
    transition: all 0.5s ease;
    padding: 15px 30px;
    transition:    all 0.5s ease,
  opacity 0.5s 0.5s ease;
    /* opacity:0; */
    position: relative;
    font-size: 16px;
}

.par_fixe .button:hover {
    color: #dd663a!important;
}

section .button {
    opacity: 1;
    border-color: var(--second-color);
    color: var(--main-color)!important;
}

section .button:hover {
    color: #fff!important;
}

.slide_home .item .contain-txt a.button span, .button span {
    position: relative;
    z-index: 2;
}

.slide_home .item .contain-txt a.button:after, .button:after {
    content: '';
    position: absolute;
    display: flex;
    width: 100%;
    height: 100%;
    background-color: #fff;
    left: 0;
    top: 0;
    z-index: 0;
    width: 0;
    transition: all 0.5s ease;
}

.contain_actus .button:after {
    background-color:var(--second-color);
    color:var(--main-color);
    display: none;
}

section .button:after {
    background-color: var(--second-color);
}

.slide_home .item .contain-txt a.button:hover:after, .button:hover:after {
    width: 100%;
}

.slide_home .item .contain-txt a.button:hover {
    color: var(--second-color)!important;
}



.slide_home .item .contain-txt h2 {
    position: relative;
    z-index: 5;
    font-size: 32px;
    line-height: 50px;
    font-weight: 600;
    color: var(--second-color);
    font-family: 'Roboto', sans-serif;
    /* padding: 25px; */
    text-shadow: rgba(0, 0, 0, 0.5) 2px 1px 6px !important;
    visibility: inherit;
    transition: none 0s ease 0s;
    margin: 0px;
    letter-spacing: 0px;
    width: auto;
    height: auto;
    left: auto;
    top: auto;
  
    text-align: left;
}

.slide_home .active  .item .contain-txt h2, .slide_home .active  .item .contain-txt p {
    animation: fadeInDown; /* referring directly to the animation's @keyframe declaration */
    animation-duration: 2s; /* don't forget to set a duration! */
  opacity:1
}


.slide_home .active .item .contain-txt a{

    animation: fadeInDown; /* referring directly to the animation's @keyframe declaration */
    animation-duration: 2s; /* don't forget to set a duration! */
    opacity:1;
    animation-delay: 0.5s;
}

.slide_home .item:after {
      content: '';
      display: flex;
      position: absolute;
      width: 100%;
    top:0;
    left:0;
      height: 100%;
      background-color: #00000096;
      z-index: 2;
}

.slide_home .item img {
    display: flex;
    min-width: 100%;
    min-height: 100%;
    position: absolute;
    /* display: flex; */
    height: auto;
    /* top: 0; */
    /* left: 0; */
    z-index: 1;
    width: auto;
    max-width: none;
    filter: none;
    object-fit: cover;
}

.secteurs{
    /* background-color: var(--vetbig2); */
    padding: 100px 25px;
    display: flex;
    /* height: 100px; */
    justify-content: center;
    align-items: center;
    z-index: 4;
    position: relative;
    flex-wrap: wrap;
    flex-direction: column;
}

.notre_vision {
    display: flex;
    flex-direction: column;
    align-items: center;
    align-content: center;
    justify-content: center;
    padding: 100px 0;
    background-image: linear-gradient(rgba(247,248,250,0.65), rgba(247,248,250,0.65)), url('../images/interface/SIT_CHOPPER/heading_denime.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    filter: none;
    position: relative;
}

.notre_vision::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: url('../images/interface/SIT_CHOPPER/heading_denime.jpg') center/cover no-repeat;
    filter: grayscale(100%);
    z-index: 0;
}

.notre_vision::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: rgba(247,248,250,0.82);
    z-index: 1;
}

.notre_vision > * {
    position: relative;
    z-index: 2;
    color: #141414;
}

.notre_vision .section-title h2,
.notre_vision .section-title h2:after {
    color: #141414;
}

.notre_vision .section-title h2:after {
    background-color: #dd663a;
}

.notre_vision .txt p {
    color: #141414;
    font-size: 15px;
    line-height: 1.8;
}

.notre_vision .button {
    background-color: transparent;
    color: var(--main-color)!important;
    border: 2px solid var(--second-color);
}

.notre_vision .button:hover {
    color: #fff!important;
}

section.notre_vision.magasin .flexcenter {
    max-width: 1170px;
}

.notre_vision .txt {
    max-width: 1170px;
    width: 100%;
    /* padding: 100px 0; */
}

.secteurs:after {
    content: '';
    position: absolute;
    z-index: 2;
    background-color: var(--main-color);
    width: 100%;
    height: 2px;
    bottom: 148px;
    display: none;
}

.secteurs .section-title h2, .section-title h2 {
    color: var(--second-color);
    text-align: -webkit-center;
    padding-bottom: 0;
}

.section-title.black h2 {
    color: var(--main-color);
}

.produit-phare .section-title h2 {
    color: var(--main-color);
}

.secteurs .section-title {
    width: 100%;
    max-width: 1170px;
}

.contain-cat-home{
    display:
    flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    max-width: 1170px;
    width: calc(100% - 210px);
    gap: 45px;
    align-items: stretch;
    align-content: space-between;
    z-index: 5;
    max-width: calc(1170px - 210px);
    width: 100%;
    max-width: 1170px;
}

.paragraphe .contain-cat-home {padding-top: 20px;}

.contain-cat-home a, .contain-cat-home > div, .contain-cat-home.x3 > div{
    /* width: 33.3%; */
    display:
    flex;
    /* margin-bottom: 25px; */
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    align-content: center;
    /* padding: 20px; */
    background-color: #fff;
    width: calc(25% - 34px);
    min-height: 200px;
    box-shadow: 0px 0px 16px #dbdbdb;
    /* background-image: url('../images/interface/SIT_VETBIGORRE/slide3.jpg'); */
    background-size: cover;
    position: relative;
    border-radius: 10px;
    overflow: hidden;
}

.produit-phare .contain-cat-home a {
    box-shadow: 0px 0px 10px #45454573;
}

.contain-cat-home a.imgctn {
    background-color: var(--main-color);
}

.pageAccueil .contain-cat-home a.imgctn {
    width: calc(33.3% - 30px);
}

.produit-phare  .contain-cat-home a img {
    opacity: 0.85;
}

.contain-cat-home a.imgctn:hover img {
    transform: scale(1.05);
}

.contain-cat-home a img {
    position: absolute;
    opacity: 1;
    transition: all 0.5s ease;
    width: 100%;
}

.contain-cat-home.x4 > div {
    width: 25%;
}

.contain-cat-home.x2 > div {
    width: 50%;
}

.contain-cat-home > div img {
    width: 100%;
    height: auto;
}

.paragraphe .contain-cat-home > div img {
    position: absolute;
    z-index: 1;
    top: 0;
    min-height: 100%;
    min-width: 100%;
    width: auto;
}

.paragraphe .contain-cat-home > div.nobg img {
    position: absolute;
    min-width: auto;
    min-height: auto;
    top: 30%;
    height: 30px;
}

.paragraphe .contain-cat-home > div.nobg {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    align-content: center;
    flex-wrap: wrap;
    background-color: var(--second-color);
}

.paragraphe .contain-cat-home .button_slide a, #centreetdroite .paragraphe .contain-cat-home .button_slide:last-child a {
    width: 100%;
    background: transparent;
    box-shadow: none;
    font-size: 16px;
    font-weight: 600;
    color: var(--second-color);
    margin-bottom: 0;
}

#centreetdroite .paragraphe .contain-cat-home > div .txt p a {
    color: #fff;
}

#centreetdroite .paragraphe .contain-cat-home .button_slide:last-child a {
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    align-content: center;
    min-height: auto;
    padding-top: 50px;
    color: #000;
}

#centreetdroite .paragraphe .contain-cat-home .button_slide:last-child p {
    width: 100%;
    height: 100%;
    display: flex;
}

#centreetdroite .paragraphe .contain-cat-home .button_slide:last-child a:after {
    display: none;
}

.paragraphe .contain-cat-home > div .txt {
    width: 100%;
    height: 100%;
}

.paragraphe .contain-cat-home > div.nobg .txt {
    height: 100%;
    display: flex;
    justify-content: center;
}

.contain-cat-home.x1 > div {
    width: 100%;
    display: flex;
    flex-direction: row;
    gap: 20px;
    padding: 20px 40px;
    min-height: 185px;
    overflow: hidden;
    background: #e7e7e7;
}

.contain-cat-home.x1 > div .picto {
    width: 190px;
    height: 200px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    /* gap: 10px; */
    align-content: center;
    flex-direction: column;
    padding-right: 35px;
    border-right: 3px solid #c3c3c3;
}

.contain-cat-home.x1 > div svg {
    max-width: 47px;
    max-height: 47px;
    /* position: absolute; */
    /* left: -4px; */
    /* bottom: -7px; */
    fill: var(--main-color);
    display: flex;
    align-content: center;
    justify-content: center;
    align-items: center;
    margin-bottom: 10px;
}

.contain-cat-home.x1 > div .txt {
    width: calc(100% - 220px);
    padding-left: 20px;
}

.contain-cat-home.x1 > div .txt h4, .contain-cat-home.x1 > div h4 {
    font-size: 18px;
    font-weight: 600;
    text-align: left;
    /* width: 100%; */
    margin: 0;
    text-align: center;
    height: auto;
    padding-top: 10px;
    /* border-top: 3px solid var(--second-color); */
    display: flex;
    justify-content: flex-end;
    flex-direction: column;
    align-content: center;
    align-items: center;
}

.contain-cat-home.x1 > div h4:before {
    display: flex;
    content: '';
    width: 46px;
    height: 3px;
    background: var(--second-color);
    margin-bottom: 13px;
}

#centreetdroite .contain-cat-home.x1 > div .txt p {
    font-size: 16px;
    text-align: left;
    font-weight: 400;
}

.contain-cat-home > div {
    height: auto;
    padding: 20px 10px;
    background: #e9e9e9;
    box-shadow: 0px 0px 16px #bbbbbb;
}

.contain-cat-home.button_opacity .button_slide {
    display: flex;
    flex-direction: row;
    align-content: center;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    width: calc(33.3% - 34px);
    height: 300px;
}

#centreetdroite .contain-cat-home.button_opacity .button_slide:last-child p {
    height: auto;
}
.contain-cat-home.button_opacity .button_slide h3 {
    opacity:1;
    text-align: center;
}

h3 {}

.contain-cat-home.button_opacity .button_slide .txt{
    height: 100%;
    /* display: none; */
    transition: all 0.5s ease;
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity:0;
    padding:20px;
    align-content: center;
}

.contain-cat-home.button_opacity .button_slide:hover h3 {
    opacity:0;
}

.contain-cat-home.button_opacity .button_slide:hover .txt {
    display: flex;
    opacity:1;
    transition: all 0.5s ease;
}

.contain-cat-home.button_opacity .button_slide .txt {
    /* height: auto; */
}

.contain-cat-home.button_opacity .button_slide .txt ul li {
    text-align: left;
    /* margin: 0!important; */
    line-height: 30px;
    margin-bottom: 17px;
}

#centreetdroite .contain-cat-home.button_opacity .button_slide .txt  ul {
    padding-left: 15px;
    padding: 20px;
    padding-left: 35px;
}

.contain-cat-home > div:hover .txt {
    transform: scale(1.05);
}

.contain-cat-home.x5 > div {
    width: calc(20% - 36px);
}

.contain-cat-home.x5 > div svg {
    fill: var(--main-color);
    width: 35px;
    margin-bottom: 14px;
}

.contain-cat-home a:nth-of-type(4) {
    background-color: var(--second-color);
}

.pageAccueil .contain-cat-home a:nth-of-type(4) {
    background-color: transparent;
    color: #000 !important;
    border: 2px solid #dd663a;
    position: relative;
    transition: all 0.5s ease;
    padding: 15px 30px;
    transition: all 0.5s ease, opacity 0.5s 0.5s ease;
    /* opacity: 0; */
    position: relative;
    height: auto;
    width: auto;
    min-height: auto;
    border-radius: 1px;
    box-shadow: none;
    margin: auto;
}

.pageAccueil .contain-cat-home a.button:nth-of-type(4):after {
    /* background: transparent; */
    width: 0;
    z-index: 1;
}

.pageAccueil .contain-cat-home a.button:nth-of-type(4):hover:after {
    width: 100%;
}

.produit-phare .contain-cat-home a:nth-of-type(4) {
    background-color: var(--main-color);
}

.produit-phare .contain-cat-home a svg {
    fill: var(--second-color);
}

.produit-phare .contain-cat-home a:nth-of-type(4) .txt p {
    color: var(--second-color)!important;
}

.contain-cat-home a:nth-of-type(4) .txt p {
    color: #000000!important;
}

.contain-cat-home a:after {
    content: '';
    position: absolute;
    z-index: 2;
    width: 100%;
    height: 100%;
    /* background-color: #fff; */
    /* opacity: 0.3; */
    /* max-width: 1170px; */
}

.contain-cat-home a:hover svg {
    transform: scale(1.1);
}

.contain-cat-home a svg{
    width: 40px;
    margin-bottom: 5px;
    transition: all 0.5s ease;
    position: relative;
    z-index: 3;
    fill: var(--main-color);
}

.contain-cat-home a .txt, .contain-cat-home > div .txt{
    /* width: calc(100% - 115px); */
    text-align: center;
    /* padding-left: 0; */
    padding-top: 10px;
    position: relative;
    z-index: 4;
}

.contain-cat-home > div .txt {
    padding-top: 0;
    transition: all 0.5s ease;
}

.contain-cat-home a .txt p, .contain-cat-home > div .txt p {
    margin-bottom: 0;
}

#centreetdroite .contain-cat-home a .txt p, #centreetdroite .contain-cat-home > div .txt p, #centreetdroite .contain-cat-home a .txt h3{
    font-size:16px;
    font-weight:600;
    color: var(--second-color);
    margin-bottom: 0;
}

#centreetdroite .contain-cat-home a.imgctn .txt p, #centreetdroite .contain-cat-home a.imgctn .txt h3 {
    color: #fff;
    font-size: 20px;
}

#centreetdroite .contain-cat-home > div .txt p {
    /* color: #fff; */
}

#centreetdroite .contain-cat-home a .txt p.small{
    font-size:14px;
    font-weight:400;
    margin-bottom: 0!important;
}

.picto_sec{
    display:flex;
    flex-direction: column;
    align-content: center;
    align-items: center;
    background-color: #ffffff;
    padding: 100px 0;
}

.client {
    display: flex;
    flex-direction: column;
    align-content: center;
    align-items: center;
    background-color: #e5e5e5;
    padding: 100px 0;
}

.picto_ctn {
    width: 100%;
    max-width: 1170px;
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    margin-bottom: 40px;
}

.picto_ctn .picto {
    width: calc(16% - 26px);
    display: flex;
    flex-direction: column;
    align-items: center;
    /* gap: 20px; */
    padding: 10px;
    /* background-color: #ffffff61; */
    box-shadow: 0px 0px 16px #d0d0d0;
    border-radius: 10px;
}

.nobg .picto_ctn .picto {
    box-shadow: none;
}

.nobg .picto_ctn .picto h4 {
    font-weight: 700;
    font-size: 20px;
}

#centreetdroite .nobg .picto_ctn .picto p {
    text-align: center;
    font-size: 16px;
}

.picto_ctn .picto img {
    max-width: 45%;
}

.picto_ctn .picto h4 {
    text-align: center;
    font-weight: 500;
    color: #303030;
    font-size: 15px;
}

.produit-phare{
    background-color: var(--second-color);
    color: #000;
    padding:100px 0px;
    position: relative;
    z-index: 3;
    /* box-shadow: -3px -2px 13px #242424; */
}

.services{
    background-color: var(--main-color);
    color: #000;
    padding:100px 0px;
    position: relative;
    z-index: 3;
    /* box-shadow: -3px -2px 13px #242424; */
}

.services.best_vente {
    background-color: var(--vetbig1);
    background-color: #fff;
    padding-top: 100px;
}

.contain-services{
    display:    flex;
    justify-content: space-around;
    border: none;
}

.contain-services .bloc-services{
    max-width: 295px;
    /* height: 295px; */
    /* background-size: 101%; */
    /* background-position: center; */
    position:relative;
    /* margin-top: 22px; */
    /* margin-bottom: 10px; */
    margin-left: 16px;
    margin-right: 16px;
    background-color: #fff;
    /* display: flex; */
    justify-content: space-between;
    flex-direction: column;
    box-shadow: 0px 0px 16px #dbdbdb;
    margin-top: 14px;
    padding: 20px;
    padding-bottom: 45px;
}

.best_vente .contain-services .bloc-services {
    /* background-color: #dcdcdc; */
    box-shadow: 0px 0px 16px #dbdbdb;
    margin-top: 14px;
}

.best_vente .owl-carousel .owl-item img {}

.owl-carousel .owl-item {
    /* display: flex; */
    justify-content: center;
    padding-bottom: 10px;
}

.contain-services .bloc-services .contain-txt a > span {
    position: absolute;
    /* z-index: 10; */
    color: #fff;
    padding: 7px;
    font-size: 14px;
    top: 28px;
    left: -8px;
    text-transform:uppercase;
    background-color: var(--vetbig2);
}

.contain-services .bloc-services .contain-txt a >  span.promo {
    background-color: var(--vetbig1);
}

.contain-services .bloc-services .contain-txt {
    width: 100%;
    /* height: 100%; */
    display: flex;
    z-index: 3;
    /* position: relative; */
    padding: 0;
}

section .contain-services .bloc-services .contain-txt > a  {
    width: 100%;
    padding: 0;
    display: flex;
    /* flex-wrap: wrap; */
    /* align-items: flex-end; */
    flex-direction: column;
    justify-content: flex-end;
    padding: 20px;
}

.contain-services .bloc-services .contain-txt > a:first-child:after {
    content: '\f00e';
    display: flex;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: #464646bd;
    opacity: 0;
    transition: all 0.5s ease;
    font-family: 'FontAwesome';
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 50px;
}

.contain-services .bloc-services .contain-txt > a:first-child:hover:after {
    opacity: 1;
}

.contain-services .bloc-services img {
    /* position: absolute; */
    z-index: 1;
    max-height: 60%;
}

.contain-services .chaussures{
        background-image:url(../images/interface/SIT_TCONCEPT/chaussure_secur.jpg);
}

.contain-services .vetprotec{
        background-image:url(../images/interface/SIT_TCONCEPT/vetement_protec.jpg);
}

.contain-services .vetprof{
        background-image:url(../images/interface/SIT_TCONCEPT/vetement_pro.jpg);
}

.contain-services .bloc-services h3{
    width:100%;
    height: auto;
    margin: 0;
    /* color: #fff; */
    display: flex;
    /* justify-content: flex-start; */
    /* align-items: flex-end; */
    /* padding: 22px 60px 22px 22px; */
    font-size: 24px;
    position: relative;
    font-weight: 500;
    flex-direction: column;
}

.contain-services .bloc-services h3:after {
    content: '';
    display: flex;
    width: 100%;
    height: 2px;
    background-color: var(--main-color);
    margin-top: 15px;
    margin-bottom: 10px;
}

#centreetdroite .contain-services .bloc-services .desc, #centreetdroite .contain-services .bloc-services .price {
    width: 100%;
    height: auto;
    display: flex;
    margin: 0!important;
    padding-right: 50px;
    font-size: 20px;
}
 #centreetdroite .contain-services .bloc-services .price {
     padding-right:0px;
 }
#centreetdroite .contain-services .bloc-services .desc {
    margin-bottom: 10px!important;
}

#centreetdroite .contain-services .bloc-services .price {
    color: var(--main-color)!important;
    font-size: 22px;
    font-weight: 400;
}

#centreetdroite .contain-services .bloc-services .price .old {
    text-decoration: line-through;
}

#centreetdroite .contain-services .bloc-services .price .new_price {
    font-size: 22px;
    padding-left: 10px;
    font-weight: 600;
    color: var(--vetbig1);
    text-decoration: none!important;
}

.contain-services .bloc-services .contain-txt a.button{
    width:70px;
    height:70px;
    border-radius:0;
    font-size:50px;
    position:absolute;
    right:-10px;
    bottom:-10px;
    z-index: 5;
    background-color: var(--second-color);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    font-size: 27px;
    border: none;
}

.contain-services .bloc-services .contain-txt a.button:after {
    display: none;
}

.contain-services .bloc-services .contain-txt a.button:hover {
    background-color: var(--main-color);
    color: var(--second-color)!important;
}

.services .button_contain a {
    display:block;
    border-radius:3px;
    width:150px;
    border:2px solid #fff;
    padding:10px 20px;
    color:#fff;
    margin:auto;
    text-align: center;
    transition:all 0.2s ease;
    font-weight:600;
}



.services .button_contain a:hover {
    background-color:#fff;
    color:#880f44;

}

.about-us{
    padding: 100px 0;
    background-image: url(../images/interface/SIT_EKIP/photo-contact.jpg);
    background-size:cover;
    background-attachment:fixed;
    position:relative;
    display: flex;
    justify-content: center;
}

.about-us h2 {
    text-align: center;
}

.about-us > *{
    z-index:2;
    position:relative;
}

.about-us:after{
    content:'';
    display: flex;
    position:absolute;
    inset:auto;
    background-color: #292425d9;
    top:0;
    bottom:0;
    left:0;
    right:0;
    z-index:1;
}
#centreetdroite .about-us p{
    font-size: 16px;
    color: #fff!important;
    text-align: center;
    line-height: 24px;
}

.content-pp{
    width:100%;
    max-width:1170px;
}

.owl-marque {
    max-width: 1170px;
    width: 100%;
    margin: 0 auto;
    padding: 40px 0;
    overflow: hidden;
}

.owl-carousel.owl-marque .owl-item .item{
    height: 90px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
    margin: 8px 10px;
    padding: 15px;
    transition: all 0.3s ease;
}

.owl-carousel.owl-marque .owl-item .item:hover{
    box-shadow: 0 4px 20px rgba(0,0,0,0.12);
    transform: translateY(-2px);
}

.owl-carousel.owl-marque .owl-item .item a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}

.owl-marque.owl-theme .owl-item img{
    max-width: 100%;
    max-height: 100%;
    width: auto!important;
    height: auto;
    padding: 0;
    filter: grayscale(100%) opacity(0.6);
    transition: filter 0.3s ease;
}

.owl-carousel.owl-marque .owl-item .item:hover img{
    filter: grayscale(0%) opacity(1);
}

.marque_section {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    background-color: #f7f8fa;
    padding: 20px 0 40px;
    overflow: hidden;
    width: 100%;
}

.owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span {
    background-color: var(--main-color)!important;
}

.owl-carousel .owl-wrapper:after{content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0;}
.owl-carousel{display:none;position:relative;width:100%;-ms-touch-action:pan-y;}
.owl-carousel .owl-wrapper{display:none;position:relative;}
.owl-carousel .owl-wrapper-outer{overflow:hidden;position:relative;width:100%;}
.owl-carousel .owl-wrapper-outer.autoHeight{-webkit-transition:height 500ms ease-in-out;-moz-transition:height 500ms ease-in-out;-ms-transition:height 500ms ease-in-out;-o-transition:height 500ms ease-in-out;transition:height 500ms ease-in-out;}
.owl-carousel .owl-item{float:left;}
.owl-controls .owl-buttons div,.owl-controls .owl-page{cursor:pointer;}
.owl-controls{-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-tap-highlight-color:rgba(0,0,0,0);}
.owl-carousel .owl-item,.owl-carousel .owl-wrapper{-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-ms-backface-visibility:hidden;-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);}
.owl-theme .owl-controls{margin-top:10px;text-align:center;}
.owl-theme .owl-controls .owl-buttons div{color:#FFF;display:inline-block;zoom:1;*display:inline;margin:5px;padding:3px 10px;font-size:12px;-webkit-border-radius:30px;-moz-border-radius:30px;border-radius:30px;background:#869791;filter:Alpha(Opacity=50);opacity:.5;}
.owl-theme .owl-controls.clickable .owl-buttons div:hover{filter:Alpha(Opacity=100);opacity:1;text-decoration:none;}
.owl-theme .owl-controls .owl-page{display:inline-block;zoom:1;*display:inline;}
.owl-theme .owl-controls .owl-page span{display:block;width:12px;height:12px;margin:5px 7px;filter:Alpha(Opacity=50);opacity:.5;-webkit-border-radius:20px;-moz-border-radius:20px;border-radius:20px;background:#869791;}
.owl-theme .owl-controls .owl-page.active span,.owl-theme .owl-controls.clickable .owl-page:hover span{filter:Alpha(Opacity=100);opacity:1;}
.owl-theme .owl-controls .owl-page span.owl-numbers{height:auto;width:auto;color:#FFF;padding:2px 10px;font-size:12px;-webkit-border-radius:30px;-moz-border-radius:30px;border-radius:30px;}
.owl-item.loading{min-height:150px;background:url(AjaxLoader.gif) no-repeat center center;}
@media only screen and (min-width:768px){.owl-item img{-moz-transition:all .3s ease-in-out;-ms-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;/* filter:grayscale(100%); */-moz-filter:grayscale(100%);}
.owl-item img:hover{filter:grayscale(0%);-webkit-filter:grayscale(0%);-moz-filter:grayscale(0%);filter:grayscale(0%);filter:none;-webkit-filter:grayscale(0);}
}
.client-block{width:100%;display:block;margin-bottom:60px;}
.our-clients-wrap{float:none;margin-top:10px;position:relative;}
.our-clients-wrap.crsl{margin-top:35px;margin-left:auto;margin-right:auto;}
ul.our-clients li{list-style:none;width:20%;padding:10px 15px;text-align:center;float:left;min-height:130px;margin:0;vertical-align:middle;border-bottom:1px solid #e9e9e9;border-right:1px solid #e9e9e9;}
ul.our-clients li:nth-child(5n){border-right:none;}
ul.our-clients li:nth-child(n+6){border-bottom:none;}
ul.our-clients li:nth-child(n+11){border-top:1px solid #e9e9e9;}
@media only screen and (max-width:767px){.our-clients-wrap{padding-top:30px;}
ul.our-clients li{width:49.979%;}
ul.our-clients li:nth-child(5n){border-right:1px solid #e9e9e9;}
ul.our-clients li:nth-child(2n){border-right:none;}
ul.our-clients li:nth-child(n+6){border-bottom:1px solid #e9e9e9;}
ul.our-clients li:nth-child(n+3){border-bottom:none;}
ul.our-clients li:nth-child(n+5){border-top:1px solid #e9e9e9;}
}
ul.our-clients li img{height:auto;width:auto;max-width:100%;max-height:110px;margin:0;-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-ms-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;transition:all .3s ease-in-out;filter:grayscale(100%);-webkit-filter:grayscale(100%);-moz-filter:grayscale(100%);filter:url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");filter:grayscale(100%);filter:gray;-webkit-filter:grayscale(1);}
ul.our-clients li img:hover{filter:grayscale(0%);-webkit-filter:grayscale(0%);-moz-filter:grayscale(0%);filter:grayscale(0%);filter:none;-webkit-filter:grayscale(0);}
#our-clients.crsl.our-clients li{border:none;}
ul.our-clients li:first-child{margin-left:0;}
ul.our-clients:after{clear:both;}
#wrap .crsl{margin:0;}
#wrap .crsl .owl-buttons div{top:40px;opacity:1;position:absolute;right:auto;left:50%;color:#929ca3;background:none;padding:0;}
#wrap .crsl .owl-buttons div:hover, .our-clients-wrap.crsl .owl-buttons div:active{color:#3fcae7;}
#wrap .crsl .owl-buttons div{font-family:vc_entypo;}
#wrap .crsl .owl-buttons .owl-prev{left:-35px;top:40px;right:auto;}
#wrap .crsl .owl-buttons .owl-next{top:40px;right:-36px;left:auto;}
#wrap .crsl .owl-buttons div:after, #wrap .crsl .owl-buttons .owl-prev:after{font-family:'simple-line-icons';font-size:31px;font-weight:100;}
#wrap .crsl .owl-buttons div:after{content:"\e606";}
#wrap .crsl .owl-buttons .owl-prev:after{content:"\e605";}
#wrap .crsl li{width:100%;float:left;list-style:none;}
#wrap .crsl li img{max-width:100%;}
.our-clients-wrap.crsl{margin-top:0;}
.testimonial-carousel{position:relative;padding:0 40px;}
.testimonial-carousel .tc-item{text-align:center;padding:10px 25px;}
.testimonial-carousel .tc-item img{margin-bottom:30px;width:90px;height:90px;border-radius:60px;box-shadow:0 2px 0 0px rgba(0,0,0,0.011);padding:3px;background:#fff;border:1px solid #f0f0f0;}
.testimonial-carousel .tc-content{position:relative;background:#fff;color:#808080;margin-top:30px;margin-bottom:18px;padding:30px;font-size:14px;border:1px solid #eaeaea;border-radius:2px;box-shadow:0 2px 0 0px rgba(0,0,0,0.025);}
.testimonial-carousel .tc-name{font-size:15px!important;font-weight:600;color:#333!important;margin-bottom:3px;line-height:1.2;}
.testimonial-carousel .tc-job{font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:1px;color:#888;}
.testimonial-carousel .tc-navigation{position:absolute;width:100%;left:0;right:0;top:50%;}
.testimonial-carousel .tc-navigation .btn.next, .testimonial-carousel .tc-navigation .btn.prev{position:absolute;font-size:18px;width:34px;height:34px;display:block;padding:4px;text-align:center;border:1px solid #e3e3e3;border-radius:73px;right:0;color:#666;background:#fff;cursor:pointer;box-shadow:0 2px 0 0px rgba(0,0,0,0.045);transition:all 0.18s ease;}
.testimonial-carousel .tc-navigation .btn.next:hover, .testimonial-carousel .tc-navigation .btn.prev:hover{background:#393939;color:#fff;border-color:#393939;}
.testimonial-carousel .tc-navigation .btn.prev{right:auto;left:0;}
@media (min-width:768px) and (max-width:959px){.testimonial-carousel .tc-item{padding:10px 15px;}
.testimonial-carousel .tc-content{padding:16px 12px;font-size:13px;}
}
@media only screen and (max-width:767px){.testimonial-carousel .tc-item{padding:10px;}
.testimonial-carousel .tc-content{padding:20px 15px;font-size:12px;}
}
.section-title{
    position:relative;
    margin-bottom:40px;
    border-bottom:3px solid;
    border: none;
    width: 100%;
    max-width: none;
}

.about-us{
    /* padding:0px 0px; */
}
.about-us img{
    max-width:100%;
}
.img_home {
    text-align:center;
    padding-top:80px;
}
.about p{
    color:#444;
    text-align: center;
}
h1, h2, h3, h4, h5, h6 {color: #dd663a;font-weight: 600;margin:0;}
h4,h3{
    margin:10px 0px;
}
.bloc_pdf{
    display:inline-block;
    width:33.3333%;
    padding:0 15px;
    text-align:center;
    margin-bottom:30px;
    vertical-align:top;
}



.bloc_pdf img{
    width:100%;
    height:auto;
}
.titre4{
    line-height: 1;
    font-size: 25px;
    text-transform: uppercase;
    position: relative;
    font-weight: 600;
}
#centreetdroite .sous-titre{
    font-style: italic;
    font-weight : 600;
    color:#08a24b;
}
#centre {
    width: 620px;
    margin: 0;
    margin-left: 30px;
    padding: 0;
}
#centreetdroite {
    width: 100%;
    margin: auto;
    padding-bottom: 0;
}
.pageAccueil #centreetdroite {
    padding-bottom: 0;
    height: auto!important;
    width: 100%!important;
}

#droite {
    width: 300px;
    margin: 0;
    padding: 0;
    /*float:right;*/

    position: absolute;
    top: 0px;
    right: 0px;
}
#pied #conteneur_pied {
    /* background-image:url(../images/interface/top-pied.png); */

    color: #fff;
    /* background-color: #2d343f; */

    background-repeat: no-repeat;
    background-position: center top;
    width: 1140px;
    margin: 0 auto;
    height: auto;
    padding-top: 50px;
    padding-bottom: 50px;
    /* margin-bottom:40px; */
}

#pied #conteneur_pied p{
    font-size:14px;
    color:#fff;;
}

#pied #conteneur_pied p a{
    color:#fff;
}

#pied #conteneur_pied .flex{
    display:flex;
flex-wrap: wrap;}

#pied #conteneur_pied .flex img{
    margin-right:25px;
}

#pied #conteneur_pied .flex .bloc-infos{
    width: calc(100% - 147px);
}


#pied .bandeau-epi{
    background-color: #92969e;
    display:flex;
    /* width: 1140px; */
    padding: 5px 380px;
    justify-content: center;
    align-items: center;
}

#pied .bandeau-epi p{
    /* display: block; */
    /* height: 25px; */
    /* width: 200px; */
    color: #222;
    font-size: 14px;
    margin-right: 10px;
}

#pied .bandeau-epi img{
    width: 72px;
    height:auto;
}

#pied h6 {
    text-transform: uppercase;
    color: #fff;
    font-weight: 800;
    position: relative;
    padding-bottom: 15px;
    margin-bottom: 24px;
    letter-spacing: -0.5px;
    font-size:16px;
}

.pageAccueil h2 {
    /* display:none; */
}

.magasin h2 {
    text-align: left;
    font-size: 30px;
    line-height: 45px;
}

#pied {
    width: 100%;
    margin: auto;
    background-color: var(--main-color);
    color: #fff;
}
#conteneur_pied:after{
    content:'';
    clear:both;
    display:table;
}
/**********/
/* GAUCHE */
/**********/
/**********/
/* CENTRE */
/**********/

img.imgtitre {
    margin-left: 0px!important;
    padding: 9px!important;
    padding-left: 0px!important;
}
img.mdl_billet {
    padding-right: 5px!important;
    padding-bottom: 5px!important;
    padding-top: 5px!important;
}
h2 img.imgtitre {
    margin-left: 0px!important;
    padding: 0px!important;
}



#centreetdroite .news h4 a {
    font-size: 18px!important;
}




.ariane a {
    text-decoration: underline;
    color: #8C8C8C
}


#centre p img {
    padding: 0 5px;
    margin: 0;
}

#centreetdroite h4 a {
    color: #1a333c!important;
    font-size: 20px!important;
}


img.picto {
    padding: 2px 2px 0 0;
}
img.immo,
img.immo_vignette {
    padding: 0 4px;
    background-color: #FFFFFF;
}
#droite img.immo,
#droite img.immo_vignette {
    padding: 0 4px;
    border: 1px solid #000000;
    background-color: #FFFFFF;
}
/**********/
/* DROITE */
/**********/

input {
    font-size: 0.85em;
}
select {
    font-size: 0.85em;
}
#gauche h4 a {
    color: #36b5e4!important;
}
#gauche p {
    color: #1a333c!important;
}
#gauche #paragraphe146 .suite {
    position: absolute;
    background-color: #36b5e4;
}
#gauche #paragraphe146 .suite:hover {
    background-color: #36b5e4;
    color: #fff!important;
    border: none;
}
#gauche .mdl_billet p {
    padding-bottom: 40px;
}
#gauche h3 {
    text-transform: uppercase;
}
/********/
/* PIED */
/********/

#pied {
    font-size: 0;
}
#pied ul {
    margin: 0;
    padding: 0;
    /* text-align: center; */
}
html>body #pied ul {
    margin: 0;
    list-style: none;
}
.about-widget p{
    color: #ffffff;
    font-size:14px;
    font-weight: 500;
}
.links-widget li a:before,
.side-list ul li a:before{
        font-family: 'FontAwesome';
        color: #ffffff;
        font-size: 16px;
        content: "\f105";
        padding: 10px;
}
.side-list ul, ul.side-list{list-style:none;margin-left:0;margin-bottom:0px;}
.side-list li, .side-list li,.side-list li{border-bottom:none;padding-bottom: 15px;margin:0;text-align:left;}
.side-list li:last-child, .side-list li:last-child, .side-list li:last-child{border-bottom:none;}
.side-list img{float:left;width:70px;height:63px;padding:2px;margin-right:10px;-webkit-transition:all .14s ease;-moz-transition:all .14s ease;-ms-transition:all .14s ease;-o-transition:all .14s ease;transition:all .14s ease;}
.side-list li:hover img{background:var(--second-color);}
.side-list h5{font-size:13px;font-weight:500;margin:0 0 6px;line-height:1.4;letter-spacing:0;text-transform:none;}
.side-list h5 a{color:#303030;}
.side-list h5 a:hover{text-decoration:underline;}
.side-list p{font-size:11px;color:#7d8195;margin-bottom:10px;}
.side-list a, .widget .side-list a:hover{background:none;padding:0;}
.side-list ul,ul.side-list, .side-list ul, ul.side-list{border:none;}
.side-list li{border:none;background:none;}
.side-list h5 a{color:#d2d2d2;}

.side-list img{background:#fff;}
.side-list a{letter-spacing:0;color: #fff!important;}
.side-list ul li{font-size:14px;}
.side-list ul li:hover a{color:var(--second-color);}
.side-list ul li p{font-size:11px;}
.side-list ul li:hover p{color:#fff;transition:ease .3s all;}
.side-list ul li:hover ul li>a:after{color:#fff;}
.side-list ul li img{display:block;}
.links-widget li a{
    color:#c8c9ce;
    font-size:14px;
}

.links-widget li {
    margin-bottom:15px;
}
#pied li {
font-size:14px;
}
#pied li:last-child {
    border-right: 0px solid #fff;
}
.col1 {
    width: 50%;
    display: inline-block;
    vertical-align: top;
}

.col1 ul li a {
    display: block;
    color: #99abb8;
    text-transform: uppercase;
    font-size: 14px;
    padding: 12px 0 10px;
    transition: 1s al ease;
    -webkit-transition: 1s al ease;
    text-align: left;
}

/**********/
/* HTML */
/**********/

legend {
    font-weight: bold;
}
label {
    font-weight: bold;
}
label.intitule {
    display: inline;
    float: left;
    width: 120px;
}
fieldset {
    /* padding: 5px; */
}
#droite form {
    margin: 0px;
    padding: 0px;
}
#droite fieldset {
    margin: 0px;
    border: none;
    padding: 0px;
    padding-left: 5px;
}
#droite h3 {
    color: #dd663a;
}
#droite fieldset p {
    padding: 0px;
    border: none;
}
#droite fieldset legend {
    border: none;
    padding: 0px;
    padding-top: 10px;
    padding-bottom: 5px;
    color: #cd1671;
    font-weight: bold;
    background: transparent;
}
#droite label {
    color: #666666;
    float: left;
    font-size: 10px;
    font-weight: normal;
}
#droite input,
#droite textarea {
    float: right;
    font-size: 10px;
    margin-top: -18px;
    border: 1px #666666 solid;
}
#droite input.submit {
    float: right;
    font-size: 10px;
    margin-top: 10px;
    border: none;
}
#centre div.paragraphe,
#centreetdroite div.paragraphe {
    margin: 0 auto 10px auto;
    max-width: 1170px;
    padding-top: 20px;
    padding-bottom: 20px;
    width: 100%;
}

div#paragraphe1016 {}

#centreetdroite div.paragraphe.par_style_3 {background-color: #00800020;padding-top: 20px;padding-bottom: 20px;width: 100%;margin: 0px;max-width: none;}

.rse {
    max-width: 1170px;
    margin: auto;
}

#centreetdroite div.par_fixe {
    width: 100%;
    max-width: none;
    min-height: 230px;
    background-color: #e1e1e1;
    background-image: url(../images/interface/SIT_CHOPPER/bg_par_fixe.jpg);
    background-size: cover;
    background-attachment: fixed;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 0;
}

#centreetdroite div.par_fixe:after {
    content: '';
    display: flex;
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #333;
    top: 0;
    opacity: 0.5;
    z-index: 1;
}

.contai-pp h3{
    font-weight: 600;
    margin-bottom: 30px;
    font-size: 22px;
    text-align: center;
    display: block;
    width: 100%;
}

.contai-pp h3:after{
    content: '';
    display: block;
    width: 300px;
    height: 3px;
    background-color: #222;
    margin: auto;
    margin-top: 20px;
}

.par_fixe .contain-pp h4 {
    color: #fff;
}

#centreetdroite .par_fixe p {
    color: #fff;
}

.paragraphe.par_fixe .contain-button a {
    color: #333!important;
}

.par_fixe .contain-pp h4:after, .par_fixe .contain-button a {
    background-color: #fff;
}

.par_fixe .contain-pp, .par_style_2 .contain-pp {
    max-width: 1170px;
    width: 100%;
}

#centreetdroite div.par_style_2 {
    width: 100%;
    max-width: none;
    min-height: 230px;
    background-color: #eeee;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 20px;
    margin: 0;
}

.contain-pp h4{
    font-weight: 600;
    margin-bottom: 30px;
    font-size: 22px;
    text-align: center;
    display: block;
    width: 100%;
}

.par_style_2 .contain-pp h4, #centreetdroite .par_style_2 .contain-pp p {
    color: #4e4e4e;
}

.paragraphe.par_style_2  .contain-button a {
    color: #333!important;
}

.par_style_2 .contain-pp h4:after, .par_style_2  .contain-button a {
    background-color: #fff;
}

.par_style_2 .contain-pp h4:after {
    display: none;
}

.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
    margin-top: 30px;
}

.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
/**************/
/* Modules */
/***********/

.mdl_paragraphe2Colonne li {
    text-align: left !important;
}
.mdl_image_aleatoire {
    margin: -2px 0 0 0;
}
.mdl_citation_aleatoire p {
    padding: 0 10px;
}
.mdl_citation_aleatoire p {
    color: #3d9bde;
}
.mdl_citation_aleatoire em {
    font-weight: bold;
}
/* Liens */

a {
    text-decoration: none;
}
a:link {
    color: #222;
}
a:visited {
    color: #222;
}
.bouton_top img{
    width:50px!important;
}
a:hover,
a:focus,
a:active {
    color: #000000;
    text-decoration: underline;
}
a.glossaire {
    /*color:#c4552c;*/

    color: #222;
    text-decoration: underline;
}
a.glossaire:visited {
    color: #808080;
    text-decoration: underline;
}
a.alt {
    font-weight: bold;
}
a.suite {
    background-color: var(--second-color);
    color: var(--second-color)!important;
    padding: 5px 10px;
    font-weight: bold;
    font-size: 16px;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
    display: inline-block;
    border: 1px solid var(--second-color);
}
a.suite:hover {
    background-color: transparent;

    color: var(--second-color)!important;
}

.contain_actus a.suite:hover {
    color: var(--main-color)!important;
    background-color: var(--second-color)!important;
}
a.suite:visited {
    color: #ffffff;
}
#droite a:link {
    color: #d96918;
}
#droite a:visited {
    color: #d96918;
}
/* Pas de bordure autour des images dans les liens */

a img {
    border: none;
}
/**********************/
/* Villes Suggestion */

.villeSuggestionBox {
    position: relative;
    float: left;
    left: 0px;
    margin: 10px 0px 0px 0px;
    padding: 0;
    width: 200px;
    background-color: #FFFFFF;
    border: 1px solid #000;
    color: #000;
}
.villeSuggestionList {
    margin: 0px;
    padding: 0px;
}
.villeSuggestionList li {
    list-style: none;
    margin: 0px 0px 3px 0px;
    padding: 3px;
    cursor: pointer;
}
.villeSuggestionList li:hover {
    background-color: #c0c0c0;
}
/***************************/
/*     Recherche           */
/***************************/
/* Tag clouds Couleurs
orange  #c4552c => 0,3
marron #603b0b => 1,4
marron clair #ac741a =>2,5
Bleu #3d9bde
*/

#liste_mcl {
    padding: 5px;
    padding-top: 10px;
    padding-bottom: 10px;
    border: 1px #AAAAAA solid;
    background-color: #F9F9F9;
    color: #808080;
}
#liste_mcl a {
    color: #808080;
    text-decoration: none;
}
#liste_mcl a:hover {
    text-decoration: underline;
}
#mdl_TopMCL a {
    color: #fff!important;
    ;
    text-decoration: none!important;
    font-weight: normal;
    display: inline-block;
    background-color: #2d343e;
    padding: 5px;
    border-radius: 3px;
}
#mdl_TopMCL .mcl0,
#mdl_TopMCL .mcl5,
#mdl_TopMCL .mcl1,
#mdl_TopMCL .mcl2,
#mdl_TopMCL .mcl3,
#mdl_TopMCL .mcl4 {
    margin-bottom: 5px;
    display: inline-block;
}
/* Immo */

.mdl_immo_selecteur {
    position: relative;
    width: 918px;
    margin-right: -40px;
}
.mdl_immo_selecteur table {
    width: 100%;
}
.mdl_immo_selecteur th {
    color: #be8f05;
    text-align: left;
    padding-left: 20px;
    border-bottom: 1px solid #be8f05;
    font-size: 1.25em;
}
.mdl_immo_selecteur ul {
    margin: 0px;
    padding: 0px;
}
.mdl_immo_selecteur li {
    background-image: url(../images/interface/fleche.gif);
    background-position: left top;
    background-repeat: no-repeat;
    list-style: none;
    padding-left: 20px;
    padding-right: 40px;
    margin-bottom: 5px;
}
div.mdl_immo img.immo {
    background-color: #FFFFFF;
    padding: 6px !important;
    margin-right: 10px;
}
#centreetdroite .mdl_immo table .insertion,
#centre .mdl_immo table .insertion {
    display: block;
    text-align: center;
    background-color: transparent;
    padding: 0px;
    padding-left: 5px;
    margin: 0px;
    margin-right: -3px;
}
p.bloc_tri {
    background-color: #544d47;
    color: white;
    padding: 5px;
}
p.bloc_tri a {
    color: white;
    font-weight: bold;
}
form.bloc_tri {
    background-color: #dd663a;
    color: white;
    padding: 5px;
    text-align: right;
    margin-bottom: 5px;
}
form.bloc_tri select{
    color:#222;
}
tr.annonce {
    padding-top: 5px;
}
tr.annonce:hover {
    background-color: #fce8cd;
}
tr.annonce h4 {
    margin: 0px!important;
}
tr.annonce h4 a {
    color: #ff6600;
}
tr.annonce td {
    border-top: 1px #AFAFAF dotted;
    padding-top: 10px;
    padding-bottom: 10px;
}
td.footerannonce {
    background-color: #AFAFAF;
    padding-left: 2px;
    vertical-align: bottom;
}
td.footerannonce p {
    margin: 0px!important;
    padding: 0px!important
}
td.footerannonce a {
    background-color: #000000;
    color: #FFFFFF;
    padding: 2px;
    padding-left: 4px;
    padding-right: 4px;
}
.prix {
    color: var(--second-color);
    font-size: 1.25em;
    font-weight: bold;
}
.left_list_prod{
    display:inline-block;
    width:150px;
}
.left_list_prod img{
    max-width:100%;
    height:auto;
}
.right_list_prod{
    display:inline-block;
    vertical-align:top;
}
.right_list_prod{
    width: calc(100% - 150px);


       padding-left:30px;
}
.logo_list_prod{
    float:right;
    padding-left:40px;
}
.logo_list_prod img{
    max-width:150px;
    max-height:150px;
    width:auto;
    height:auto;
}
.prix + table select{
        margin-right: 12px;
    width: 38px!important;
padding: 5px 0 5px 3px;
}
div.mdl_modele_fiche h2 {
    text-align: right;
    margin: 0!important;
    margin-right: 18px!important;
}
div.mdl_modele_fiche h2 span {
    color: #fff;
    padding: 8px!important;
}
div.modeles_similaires {} div.modeles_similaires img {
    padding: 4px;
}
.mdl_ligne_cev {
    margin-bottom: 0!important;
}
.rechercher_modeles #frm_surface,
.rechercher_modeles #frm_nb_pieces,
.rechercher_modeles #frm_etage {
    width: 200px;
}
.rechercher_modeles td {
    width: 387px;
}
.prev_fred {
    background-image: url(../images/interface/prev_fred.png);
    height: 55px;
    width: 46px;
    display: block!important;
    position: absolute;
    top: 210px;
}
.next_fred {
    background-image: url(../images/interface/next_fred.png);
    height: 55px;
    width: 46px;
    display: block!important;
    position: absolute;
    top: 210px;
    right: 0px;
}
.pager a span {
    display: none;
}
.pager a {
    background-color: #fff;
    width: 16px;
    height: 16px;
    display: inline-block;
    margin-left: 10px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    line-height: 40px;
    vertical-align: middle;
}
.pager a.selected {
    background-color: var(--second-color);
    width: 16px;
    height: 16px;
    display: inline-block;
    margin-left: 10px;
    line-height: 15px;
    vertical-align: middle;
}
#pager2 {
    position: absolute;
    width: 1920px;
    text-align: center;
    top: 400px;
}


#position-menu {
    position: relative;
    margin-top:-2px;
    display: inline-block;
    vertical-align: top;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
    text-align:left;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: flex-end;
    flex-direction: column;
}

#position-menu .menu-second {
    width: 100%;
    padding-bottom: 10px;
}

#position-menu .menu-second ul {
    display: flex;
    gap: 20px;
    justify-content: flex-end;
}

#position-menu .menu-second ul li {
    display: inline-block;
    text-transform: uppercase;
    font-size: 14px;
    /* position: relative; */
    transition: 0.5s all ease;
    -webkit-transition: 0.5s all ease;
    color: var(--second-color);
    gap: 20px;
}

#position-menu .menu-second ul li a {
    display: flex;
    color: var(--second-color);
    gap: 10px;
    font-weight: 600;
    line-height: 16px;
    align-content: center;
    align-items: center;
    transition: all 0.5s ease;
}

#position-menu .menu-second ul li a:hover {
    color: #fff;
}

#position-menu .menu-second ul li a:hover svg .st0 {
    fill: #fff;
}

.st0 {
    transition: all 0.5s ease;
}

#position-menu .menu-second ul li a svg {
    height: 30px;
}

#carousel_p div {
    text-align: center;
}

#header #logo {
    z-index: 1000;
    text-align: left;
    margin: 0px;
    height: 60px;
    /* padding: 10px 0; */
}
#header #logo img {
    z-index: 39;
}

#header .left-top-header img{
    height:100%;
    width: auto;
    padding: 8px;
    margin-left: 10px;
}

#conteneur_header {width: 100%;font-size: 0;margin: auto;position: relative;-webkit-transition: all 0.5s ease;-moz-transition: all 0.5s ease;-ms-transition: all 0.5s ease;-o-transition: all 0.5s ease;display: flex;}

#header h1 {
    margin: 0px;
    padding: 0px;
    font-size: 1.65em;
    height: 100%;
    display: flex;
}
#header img {
    margin: 0;
    padding: 0;width:100%;
    background-image: none;
}
.numero_tel{
    width:300px!important;
    margin-top:7px!important;
}
.left-top-header{
    display: block;
    width: 280px;
    height: 100%;
    display: flex;
    align-items: center;
}
.right-top-header{
    display: block;
    width: calc(100% - 280px);
    width: 100%;
}
.right-header{
    display:inline-block;
    width: calc(100% - 127px);
    vertical-align:middle;
    padding-left:20px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    height: 100%;
}


#contenu input[type="text"],
#contenu input[type="password"],
textarea,
#formIdentificationLog select,
#formCreationInscription select,
.message_sugg select {
    display: inline-block;
    width: 100%;
    max-width:100%;
    box-sizing: border-box;
    padding: 6px 10px;
    font-size: 16px;
    line-height: 1.42857143;
    color: #222;
    background-color: #ffffff;
    background-image: none;
    border: 1px solid #cccccc;
    /* border-radius: 4px; */

    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    -webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    margin-bottom: 0px!important;
}
.adresse_facturation input{
    box-shadow:none!important;
        border: 1px solid #cdcdcd!important;
    padding: 12px 15px!important;
}
#formIdentificationLog select,#formCreationInscription select{
    width:auto!important;
    margin-right:5px;
      max-width:100%;
}
body #contenu form[name='form_recherche2'] input[type='text']{
    width:500px!important;
}
.res_recherche{
    border:1px solid #ccc;
    margin-top:30px;
}
.res_recherche h3{
    font-size:20px;
    margin:0;
    background-color:#222;
    color:#fff;
    padding:10px 15px;
    margin-bottom:10px;
}
.res_recherche .bloc0,
.res_recherche .bloc1{
    width:95%;
    margin:auto;
    border-bottom:1px solid  #ccc;
    padding:10px 0px;
}
.res_recherche .bloc0 > p:first-child a,
.res_recherche .bloc1 > p:first-child a{
    font-weight:bold;
    font-size:16px;
}
.res_recherche .bloc0 > p:first-child,
.res_recherche .bloc1 > p:first-child{
    margin-bottom:5px!important;
}
.res_recherche .bloc0 .ariane,
.res_recherche .bloc1 .ariane{
    font-size:12px;
    margin-bottom:10px;
}
.res_recherche .bloc0:last-child,
.res_recherche .bloc1:last-child{
    border-bottom:0px;
}
input[type="text"],
input[type="password"] {
    padding: 6px 10px!important;
    font-family: karla, sans-serif;
    /* color: var(--main-color)!important; */
}
textarea {
    height: 150px!important;
    width: 100%!important;
    font-family: karla, sans-serif;
}
 .block_liv span:first-child{
    font-weight:bold;
    font-size:14px;
    display:block;
    margin-bottom:7px;
}
.desc_liv{
    font-size:12px;
}
.choix_mode_livraison,.choix_mode_reglement{
    margin: 0 -15px;
    margin-bottom:30px;
}
.mode_livraison > img{

    display:inline-block;
    vertical-align:middle;
}
.mode_livraison .block_liv{
    display:inline-block;
    width:calc(100% - 240px);
    vertical-align:middle;
}

.mode_livraison .tarif_liv{
    display:inline-block;
    font-size:16px;
    text-align:right;
    width:200px;
    font-weight:bold;
}
.inline-check [type="radio"]:not(:checked) + label:after {
     opacity: 0;
     /* coche invisible */

     transform: scale(0);
 }
.inline-check [type="radio"]:checked + label:after {
     opacity: 1;
     /* coche opaque */

     transform: scale(1);
 }
.adresse_facturation h5,.choix_mode_livraison h5,.choix_mode_reglement h5,
.num_bdc h5,
.num_carte_pass h5,
.adresse_facturation h5{
    font-size:25px;
    margin:0 15px;

    border-bottom:1px solid #ccc;
    padding-bottom:10px;
    margin-bottom:20px;
}

.num_bdc h5,
.num_carte_pass h5{
    margin:auto;
    margin-bottom:20px;
}
.adresse_facturation{

    font-size:0px;
    margin: 0 -15px;
      margin-bottom:30px;
}
.num_bdc{
    margin-bottom:40px;
}
.adresse_liv{
    margin-top:20px;
}
.adresse_facturation p{
    display:inline-block;
    vertical-align:top;
    width:50%;
    font-size:16px;
    padding:0 15px;

}
.adresse_line{
    width:100%!important;
}

.adresse_liv p:nth-child(2){
    width:100%!important;
}
.adresse_facturation input{
    width:100%!important;
}
.adresse_facturation .adresse_line{
    font-size:0px!important;
    margin:0 -15px!important;
    width:calc(100% + 30px)!important;
}
.adresse_line + .input_panier,
.adresse_line + .input_panier + .input_panier,
.adresse_line + .input_panier + .input_panier + .input_panier{
    width:33.33333%;
}
.adresse_facturation .adresse_line label{
    padding:0 15px;
}
.adresse_facturation label{
    font-size:15px!important;
}
.adresse_facturation .adresse_line input{
    width:calc(33.33333% - 30px)!important;
    display:inline-block!important;
    vertical-align:top;
    margin:0 15px;
}
.btn-final{
    float:right;
    /* margin-top:-30px; */
}
input[type="submit"],
.submit,#formCreationLog a,
input[type="reset"],
.btn-compte,.btn-final {
    text-transform:capitalize;
    color: #fff!important;
    background-color: var(--main-color)!important;
    font-size: 16px!important;
    padding: 7px 10px;
    line-height:20px;
    cursor: pointer;
    border: none;
    font-weight: normal;
    display: inline-block;
    border: var(--main-color) 1px solid;
    /* -webkit-transition: 0.5s all ease; */
}

#contactgauche h3 span:after, .mdl_formulaire h3:after {
    background-color: var(--main-color)!important;
}

input[type="reset"] {
    background-color: transparent;
    color: var(--second-color)!important;
}
.submit:hover {
    background-color: #fff;
    color: var(--second-color)!important;
}
.mdl_formulaire h3 {
    display: none;
}


a[name="formIdentificationLog"] + h3 + p + table> tbody > tr > td {
    display: inline-block;
    width: 48%!important;
}

a[name="formIdentificationLog"] + h3 + p + table> tbody > tr > td:nth-child(1) {
    margin-right: 4%;
}
#formIdentificationLog, #formCreationInscription {
    color: #222;
}
.block_form_insc{
    border:1px solid #ccc;
    margin-bottom:20px;
    padding:15px;
}
.block_form_insc h4{
    border-bottom:1px solid #ccc;
    font-weight:bold;
    text-transform:uppercase;
    margin-bottom:20px;
    padding-bottom:5px;
}
#formIdentificationLog label,#formCreationInscription label {
    font-size: 16px;
    font-weight:
    normal;
    /* display:inline; */
}
#formIdentificationLog label,
#formCreationInscription label{
    font-size: 16px;
    width: 220px;
}
#formIdentificationLog em,#formCreationInscription em {
    font-size: 14px;
}
#formIdentificationLog tr,#formCreationInscription tr {
    padding-bottom: 15px;
    display: block;
}
.row_section0 select{
    font-size:14px!important;
}
#formIdentificationLog tr td,#formCreationInscription tr td {
    font-size: 14px;
    position:relative;
}
#contenu .tel input{
    width:auto!important;
}
#contenu .nom_prenom input{
    display:inline-block;
    width:250px!important;
}
#contenu .cp_ville input{
    width:auto!important;
}
#formIdentificationLog .row_section0,
#formIdentificationLog .row_section1,
#formIdentificationLog .row_annee1,
#formCreationInscription .row_section0,
#formCreationInscription .row_section1,
#formCreationInscription .row_annee1{
    display:none;
    max-width:100%;
}
a.infobulle {
    position: relative;
    z-index: 24;
    color: #000;
    text-decoration: none;
    border: none;
}
a.infobulle,
a.infobulle img {
    border: none;
    text-decoration: none;
    margin-left: 5px;
    margin-right: 5px;
}
a.infobulle:hover {
    background: none;
    z-index: 25
}
a.infobulle span {
    display: none
}
a.infobulle:hover span {
    display: block;
    position: absolute;
    top: 0;
    left: 3em;
    padding: 2px;
    width: 20em;
    border: 1px solid #7F9DB9;
    background-color: #EDEDED;
    color: #000000;
    text-align: left;
    font-size: 0.8em;
    font-weight: normal;
}
.fiche-compte h3,
.fiche_commande h3{
    border-bottom:1px solid #b7b7b7;
    padding-bottom:5px;
    margin-bottom:15px;
}

.liste_produits > table > tbody >tr > td > br{
    display:none;
}
.liste_produits > table > tbody >tr {
    display:inline;
}
.liste_produits > table > tbody >tr > td h3 + p{
    display:none;
}
.liste_produits > table > tbody >tr > td h3 a{
    font-weight:600;
    color:#222;
    font-size:18px!important;
}
.liste_produits > table > tbody >tr > td h3 {
margin:0;
}
.liste_produits > table > tbody >tr > td h3 + span{
    display:none;
}
.liste_produits > table > tbody >tr > td .info_liste a,.liste_produits > table > tbody >tr > td .info_liste br{
    display:none;
}
.liste_produits > table > tbody >tr > td .info_liste + table{
    width:100%;

    display:block;
    box-sizing:border-box;
}
.liste_produits > table > tbody >tr > td .prix_list_prod + table select,
.prix_fiche +table select{
    padding:4px 7px!important;
    padding-right:0px!important;
    font-size:15px;
}
.prix_fiche{
    font-size:18px!important;
}
.liste_produits > table > tbody >tr > td a.bouton_panier,
.prix_fiche +table .bouton_panier{
        background-color: var(--second-color);
    display: inline-block;
    padding: 5px 10px;
    font-size:15px;
    font-weight: normal;
    border: 1px solid var(--second-color);
    color: #fff!important;
    transition: 0.3s all ease;
    -webkit-transition: 0.3s all ease;
    vertical-align:top;
    display:inline-block;
    margin-left:10px;


}
.right_liste_produit .liste_produits > table > tbody >tr > td a.bouton_panier{
    padding:3px 7px;;
}
.prix_fiche + table p{
    font-size:0!important;
}
.liste_produits > table > tbody >tr > td a.bouton_panier{
    font-weight:normal!important;

}
.caracterisque_fiche{
  border:1px solid #EEEEEE;
  padding:15px;
}
.caracterisque_fiche label{
  padding-right:5px;
}
.enstock + table .bouton_panier{
  font-weight:bold;
}
.liste_produits > table > tbody >tr > td a.bouton_panier em,
.enstock + table .bouton_panier em{
    font-size:20px;
    margin-right:5px;
}
.liste_produits > table > tbody >tr > td a.bouton_panier:hover,
.enstock + table .bouton_panier:hover{
    background-color:transparent;
    color:var(--second-color)!important;
}
.liste_produits > table > tbody >tr > td h3 + p + a{
    display:block;
    width:100%;
    box-sizing:border-box;
    padding:0 15px;
}
.liste_produits > table > tbody >tr > td h3 + p + a img{
    float:none;
    width:100%;
    height:auto;
}
.liste_produits > table > tbody >tr > td h3 + a{
    display:block;
    width:100%;
    box-sizing:border-box;
    padding:10px 15px;
}
.liste_produits > table > tbody >tr > td h3 + a span{
    display:none;
}

.liste_categorie ul li {
    display: inline-block;
    padding: 0 10px;
    width:12.5%;
    vertical-align:top;
}
.liste_categorie ul li img{
    width:100%;
    height:auto
}
.liste_categorie ul li a {
    display: inline-block;
    text-decoration: none;
    transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    color: #222222;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    letter-spacing: 1.3px;
    padding-bottom: 3px;
    border-bottom: 2px solid transparent;
    display: inline-block;
    padding: 0 5px;
}

.liste_categorie ul{
    margin:0px;

}
.enstock + table select{
        margin-right: 12px;
    width: 38px!important;
padding: 5px 0 5px 3px;
}

.par_style_1 label{
    display:inline-block;
    font-weight:normal;
    width:200px;
}
.par_style_1 h3{
        display: block;
    width: 100%;
    padding: 0;
    margin-bottom: 20px;
    font-size: 21px;
    line-height: inherit;
    color: #333;
    border: 0;
    border-bottom: 1px solid #e5e5e5;
    font-weight:bold;
}
#contenu .par_style_1 input[type="text"]{
    display:inline-block!important;
    max-width:350px!important;
}
#contenu .par_style_1 textarea{
    width:calc(100% - 300px)!important;
    vertical-align:top;
}
#contenu .par_style_1 p label + br{
    display:none;
}
#contenu .par_style_1 p:nth-child(10) label{
    width:100px;
}
#contenu .par_style_1 p:nth-child(10) input{
    width:100px!important;
}
.relative_panier {
    position: relative;
}
.relative_panier .finaliser_paiement {
    position: absolute;
    bottom: 75px;
    right: 0px;
}
.counter {
    text-align: right;
    margin-bottom: 20px;
}
.count_panier {
    font-size: 25px;
    color: #cecece;
}
.count_panier strong {
    color: #303030;
}
.etape {
    display: block;
    border-bottom: 1px solid #cdcdcd;
    margin-bottom: 20px;
}
.item-etape {
    display: inline-block;
    padding: 20px 30px;
    font-size: 20px;
    color: #b1b1b1;
    font-weight: 400;
    border-bottom: 4px solid transparent;
}
.item-etape p {
    margin: 0px;
}
.item-etape span:first-child {
    font-size: 25px;
    vertical-align: top;
    padding-right: 12px;
    color: #1e1e1e;
    display: inline-block;
    height: 25px;
}
.item-etape.active {
    border-bottom: 4px solid #1e1e1e;
}
.item-etape.active span:last-child {
    color: #1e1e1e;
}
.item-etape.active span:first-child {
    color: #dd663a!important;
}
.item-etape:nth-child(2) span:first-child {
    font-size: 36px;
    margin-top: -3px;
}
.item-etape:nth-child(3) span:first-child {
    font-size: 30px;
}
.item-etape {
    padding-left: 0px;
    margin-right: 20px;
}
.item_panier {
    background-color: #f1eff1;
    padding: 7px;
    margin-bottom: 7px;
}
.delete_all a {
    background-color: #111;
    color: #fff;
    display: inline-block;
    padding: 5px 10px;
}
.delete_all a span {
    vertical-align: middle;
    display: inline-block;
    padding-bottom: 3px;
    padding-right: 5px;
    font-size: 18px;
}
.left-panier {
    display: inline-flex;
    vertical-align: middle;
    width: 60%;
}
.photo-panier {
    display: inline-block;
    vertical-align: top;
    width: 200px;
    height: 200px;
    position: relative;
    background-color: #fff;
    overflow: hidden;
}
.photo-panier img {
    float: none;
    width:100%;
    height:auto;
    /* position: absolute; */
}
.right_left_panier {
    padding-left: 25px;
    padding-bottom:30px;
    display: inline-block;
    padding-top: 10px;
    position: relative;
    width:calc(100% - 200px);
}
.title_panier {
    font-size: 18px;
    font-weight: bold;
    display: block;
    text-align:left;
    color: #242424;
    margin-bottom: 10px;
}
.vendeur_panier {
    font-size: 13px;
    font-weight: 600;
    color: #5c5c5c;
    display: block;
    margin-bottom: 15px;
}
.vendeur_panier strong {
    color: #242424;
}
.quantite_panier {
    display: inline-block;
    vertical-align: middle;
    width: 20%;
    border-left: 1px solid #dadada;
    border-right: 1px solid #dadada;
    text-align: center;
    padding: 10px 0;
}
.quantite_panier input,
.quantite_panier select {
    border: 1px solid #e6e6e6;
    color: #1e1e1e;
    font-size: 16px;
    font-weight: 800;
    padding: 15px 0px;
    padding-left: 15px;
    padding-right: 5px;
}
.label_panier {
    display: block;
    color: #777777;
    font-size: 13px;
    padding-top: 10px;
}
.tarif_panier,
.qty_value {
    font-size: 30px;
    font-weight: bold;
    color: #1e1e1e;
}
.tarif_panier {
    display: inline-block;
    width: 20%;
    vertical-align: middle;
    text-align: center;
}
.supp-resp {
    font-size: 12px;
    color: #777777!important;
    position: absolute;
    bottom: 0px;
    left: 25px;
}
.supp-resp span {
    color: #242424;
    font-size: 20px!important;
    display: inline-block;
    vertical-align: middle;
    padding-bottom: 5px;
    padding-right: 5px;
}
.recap_commande {
    display: inline-block;
    width: 50%;
    margin-left: 50%;
    margin-top: 30px;
    padding-left: 50px;
}
.info_panier {
    display: inline-block;
    width: 50%;
    margin-top: 30px;
    vertical-align: top;
    padding-right: 50px;
}
.info_panier +.recap_commande {
    margin-left: 0px;
}
.com_recap {
    font-size: 16px;
    font-weight: 600;
}
.com_recap p {
    font-weight: 400;
}
.recap_commande h4,
.info_panier h4 {
    font-size: 32px;
    color: #1e1e1e;
    border-bottom: 1px solid #d0d0d0;
    padding-bottom: 22px;
    margin-bottom: 15px;
    margin-top: 0px;
}
.block_magasin .desc_livraison {
    font-size: 14px;
    font-weight: 800;
    margin-bottom: 3px;
}
.block_magasin {
    margin-bottom: 30px;
}
.addr_livraison {
    font-size: 14px;
    margin-bottom: 0px;
    padding-left: 30px;
}
.desc_livraison span {
    font-size: 20px;
    display: inline-block;
    vertical-align: middle;
    padding-bottom: 4px;
    padding-right: 7px;
}
.desc_livraison span {} .content_recap,
.info_panier .content_info {
    padding: 30px;
    font-size: 0;
    background-color: #f1eff1;
}
.recap_all h5,.info_panier h5 {
    margin: 0px;
    font-size: 19px;
    font-weight: 900;
    margin-bottom: 20px;
}
.recap_all{
    padding-bottom:20px;
}
.recap_all h5{
    margin-bottom:10px;
}
.recap_livraison {
    margin-top: 25px;
    border-bottom: 1px solid #ccc;
    margin-bottom: 25px;
}
.retrait,
.payement {
    font-size: 14px;
    margin-bottom: 5px;
}
.content_info p {
    font-size: 16px;
}
.left_recap {
    display: inline-block;
    width: 30%;
    font-size: 19px;
    font-weight: bold;
    text-transform: uppercase;
}
.right_recap {
    display: inline-block;
    width: 70%;
    font-size: 18px;
    margin-bottom: 6px;
    text-align: right;
}
.right_recap + .intitule_recap {
    margin-bottom: 6px;
}
.intitule_recap {
    display: inline-block;
}
.bold {
    font-weight: 800;
}
.intitule_recap {
    width: calc(100% - 120px);
    font-size: 18px;
    text-align: right;
}
.value_recap {
    font-size: 18px;
    text-align: right;
}
.value_recap {
    display: inline-block;
    width: 120px;
}
.mdlPanier .action {
    text-align: right;
    margin-top: 30px!important;
}
.mdlPanier .action input[type="submit"] {
    border-radius: 0px;
    font-size: 17px!important;
    text-transform: none;
    font-weight: 400!important;
    letter-spacing: 0px!important;
    padding: 7px 30px;
    margin-bottom:10px;
}
.finaliser_paiement {
    background-color: #dd663a;
    display: inline-block;
    font-size: 15px;
    padding: 7px 15px;
    color: #fff!important;
    vertical-align: top;
}
.content_recap .action input[type="submit"] {
    padding: 7px 15px;
    font-size: 15px!important;
    float: left;
    font-weight: bold!important;
    background-color: #111;
    border-color: #111;
}
.content_recap .action {
    margin-bottom: 0px;
}
.finaliser_paiement span {
    font-size: 20px;
    vertical-align: middle;
    display: inline-block;
    padding-left: 5px;
    color: #fff!important;
}
.input_panier label {
    display: block;
    font-size: 18px;
    margin-bottom: 10px;
    font-weight: 700;
}
.input_panier {
    margin-bottom: 15px;
}
.adresse_facturation input {
    width: 100%!important;
}
.input_panier input[type="text"],
.input_panier textarea {
    border: 1px solid #cdcdcd;
    padding: 12px 15px;
    width: 400px;
    max-width:100%;
}
.mdlPanier .panier {
    font-size: 16px;

    font-weight: normal!important;
    color: #111;
}
.inline-check{
    display:inline-block;
    vertical-align:middle;
    width:40px;
}
.block_liv span:first-child{
    font-weight:bold;
    font-size:14px;
    display:block;
    margin-bottom:7px;
}
.desc_liv{
    font-size:12px;
}
.mode_livraison > img{
    width:150px;
    display:inline-block;
    padding-right:20px;
    vertical-align:middle;
}
.mode_livraison .block_liv{
    display:inline-block;
    width:calc(100% - 390px);
    vertical-align:middle;
}

.mode_livraison .tarif_liv{
    display:inline-block;
    font-size:16px;
    text-align:right;
    width:200px;
    font-weight:bold;
}
#Zone_Widget th,
#Zone_Widget td{
    font-size:11px;
    padding:0px;
    text-align:center;
}
#Zone_Widget{
    width:100%;
    line-height:inherit;
}
.MR-Widget{
    width:850px!important;

    position:relative;
}
.MRW-Line{
    font-size:14px;
}
.MRW-Map{
    width:calc(100% - 260px)!important;
}

#centreetdroite .mdlPanier .MR-Widget .iArg0{
      padding:5px 10px!important;
      line-height:1em!important;
      height:auto!important;
      width:200px!important;
      font-size:14px!important;
}
#centreetdroite .mdlPanier .MR-Widget .Arg2{
      padding:5px 10px!important;
      line-height:1em!important;
      height:auto!important;
      width:60px!important;
      font-size:14px!important;
}
.mode_livraison{
font-size:0;
    background-color:#eee;
    padding:10px;

        margin: 0 15px;
     margin-bottom:10px;
}
.header_dpd input[type=text]{
    width:auto!important;
}
.valid_cp{
    display:inline-block;
    font-size:15px;
    vertical-align:top;
    color:#fff;
    margin-left:10px;
    background-color:#0e265b;
    padding:7.5px 10px;
    cursor:pointer;
}

.inline-check [type="radio"]:checked,
.inline-check [type="radio"]:not(:checked) {
     position: absolute;
     left:-100000px;

     z-index:1;
 }
.inline-check [type="radio"]:not(:checked) + label,
.inline-check [type="radio"]:checked + label {
     position: relative;
     cursor: pointer;
     width: 20px;
     text-align:center;
     display: inline-block;
     vertical-align: top;
     margin: 0;
     height:30px;
          z-index:2;
 }
.inline-check [type="radio"]:not(:checked) + label:before,
.inline-check [type="radio"]:checked + label:before {
     content: '';
     position: absolute;
     left:0px;
     top: 0px;
     margin-left: 0px;
     width: 25px;
     border:2px solid #9a9a9a;
    border-radius:50%;
     height: 25px;
     /* dim. de la case */


     background: #f8f8f8;
     /* angles arrondis */
 }
.inline-check [type="radio"]:not(:checked) + label:after,
.inline-check [type="radio"]:checked + label:after {

     content: '';
    height:15px;
    width:15px;
    border-radius:50%;

     position: absolute;
     top: 0;
      left: 50%;
     margin-left: 0px;
      margin-left:-5px;
      top:5px;
     margin-top:0px;
     font-size: 20px;
     background-color: #0e265b;
     transition: all .2s;
 }

.inline-check [type="radio"]:not(:checked) + label:after {
     opacity: 0;
     /* coche invisible */

     transform: scale(0);
 }
.inline-check [type="radio"]:checked + label:after {
     opacity: 1;
     /* coche opaque */

     transform: scale(1);
 }

.mdlPanier .panier label{
    margin-bottom:5px;
    margin-top:1px;
    display:inline-block;
    font-weight:normal;
}
#contenu .mdlPanier input[type="text"]{
    /* width:auto!important; */
}
.mdlPanier .panier input[type="radio"]{
    margin-top:5px;
    margin-right:5px;
    vertical-align:top;
}
.mdlPanier .photo-panier img{
    float:none;
}
.mdlPanier .photo-panier {
    /* display:inline-block; */
    /* width:120px; */
}
.mdlPanier .right-panier{
    display:inline-block;
    vertical-align:top;
}
.mdlPanier .right-panier ul{
    margin-left:20px;
    margin-top:10px;
}
.mdlPanier .right-panier ul li{
    color:#222!important;
    margin-bottom:0!important;
}
.mdlPanier .panier strong {
    font-weight: normal;
}
.mdlPanier .panier td {
    padding: 5px;
        border: 1px solid #e5e5e5!important;
}
@media screen and (min-width: 780px) {
.label-resp{
    display:none;
}
.supp-resp{
    /* display:none; */
}

}
@media screen and (max-width: 780px) {
     .list_item tbody,
    .list_item,
     .list_item tbody tr,
      .list_item tbody tr td,
      .list_item tbody tr th,
      .list_commande tbody,
    .list_commande,
     .list_commande tbody tr,
      .list_commande tbody tr td,
      .list_commande tbody tr th{
        display:block;
        width:100%;
    }

    .bloc_pdf{
        width: 100%;
    }

        .contain-txt {
        width: 100%!important;
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
        position: relative;
        text-align: justify;
    }

    .contain-img {
        max-width: 560px;
        width: 100%;
    }

    .list_item > tbody > tr:first-child,
    .list_commande > tbody > tr:first-child    {
        display:none;
    }
    .list_item > tbody > tr{
        margin-bottom:15px;
    }
      .list_item tbody tr td{

      }
      .list_item tbody tr td:nth-child(3){
          border-bottom:0px!important;
      }
      .list_item tbody tr td:nth-child(4){
          border-top:0px!important;
      }
.label-resp{
    display:block;
    background:var(--second-color);
    color:#fff;
    padding:5px 10px;
    margin-top:-5px;
    margin-left:-5px;
    margin-right:-5px;
    margin-bottom:10px;
}
.list_commande .label-resp{
    background-color:transparent;
    color:#222;
    padding:0px;
    display:inline-block;
    width:120px;
     margin-top:0px;
    margin-left:0px;
    margin-right:0px;
}
}
.mdlPanier .panier td:last-child i {
    font-size: 25px;
    padding: 0 10px;
    color: #222;
}
.mdlPanier .panier td img {
    padding-right: 20px;

}
.mdlPanier .panier th {
    color: #fff;
    padding: 10px;

    font-weight: normal;
    font-size: 16px;
    background-color:var(--second-color);
}
.mdlPanier .panier th{
      border: 1px solid #e5e5e5!important;
}
.mdlPanier .panier th:nth-child(3){
    width:130px;
}

.list_commande th {
    color: #fff;
    padding: 10px;

    font-weight: normal;
    font-size: 16px;
    background-color:var(--second-color);
}
.list_commande{

    color:#222;
}
.list_commande a{
    color:#222;
    text-decoration:underline!important;
}
.list_commande td{
    padding:10px;
    font-size:14px;

    border: 1px solid #e5e5e5!important;
}

.list_commande th{
      border: 1px solid #e5e5e5!important;
}
.liste_produits > table > tbody >tr > td {
    position: relative;
    width:100%;
    border-top:1px solid #ccc;

    padding: 15px;

    display: block;
    box-sizing: border-box;
    font-family: 'Roboto', sans-serif!important;
    font-size: 15px;
    vertical-align:top;
}
.par_style_2 .liste_produits > table > tbody >tr > td h3{
    display:none;
}
.liste_produits > table > tbody >tr > td > br{
  display:none;
}
.fiche-compte h3,
.fiche_commande h3{
    border-bottom:1px solid var(--second-color);
    padding-bottom:5px;
}
.fiche_commande .photo-panier{
    display:inline-block;
}
.fiche_commande .right-panier{
    display:inline-block;
    vertical-align:top;
    padding-left:20px;
}
.fiche_commande .right-panier li + br{
    display:none;
}
.fiche_commande .right-panier li{
    margin-bottom:5px!important;
    color:#222!important;
}
.fiche_commande .right-panier ul{
    margin-top:10px!important;
    margin-left:20px;
}

.fiche_commande .photo-panier img{
    float:none!important;
}
 .fiche_commande table th{
     color: #fff;
    padding: 10px;
    font-weight: normal;
    font-size: 16px;
    background-color: var(--second-color);
 }
.fiche_commande table{
    font-size:15px;
    color:#222;
}
.ref_prod_list label{
   display:inline-block;
}
.ref_prod_list{
    margin-top:10px!important;
}
.prix_list_prod{
    margin-top:10px!important;
    margin-bottom:10px!important;
}
.prix_list_prod + table + br{
    display:none;
}
.fiche_commande table td{
    padding:10px;
    border: 1px solid #e5e5e5!important;
}
.fiche-compte p{
    color:#222!important;
}
.btn_prod a.reassort{
    line-height:100px;
}
.fiche-compte .btn-compte,
.fiche_commande .btn-compte{
       background-color: #dd663a;
       color: #fff;
       padding: 10px;
       font-size: 16px;
       margin-top: 5px;
       transition: 0.5s all ease;
       -webkit-transition: 0.5s all ease;
       border: 1px solid #dd663a;
       position: relative;
       display:inline-block;
       text-transform:capitalize;
}
.btn_prod{
    margin-bottom:25px!important;
    font-size:0!important;
}

.fiche-compte .btn_prod a{
    vertical-align:top;
    background-color:transparent;
    padding:0px;
    border:0px;
   box-sizing:border-box;
    color:#333!important;
    text-align:center;
    text-transform:uppercase;
    padding:10px 15px;
vertical-align:top;
    font-size:20px;
    width:25%;
    border-radius:15px;
}
.fiche-compte .btn_prod a img{
    width:100%;
    height:auto;
}
.promotion{
    position:absolute!important;
    right:0px;
    top:100px;
    padding:20px 30px!important;
   font-size:20px!important;
   font-weight:bold;
}

.fiche-compte  li{
    color:#222!important;
}
.fiche-compte li a{
    color:#222!important;
}
@media screen and (min-width: 1170px) {
    body {
        overflow-x: hidden;
    }
    #menu_haut > ul > li:hover > ul {
        position: fixed;
        left: 0;
        right: 0;
        opacity: 1;
        display: flex!important;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        padding: 15px 0;
        gap: 0;
        width: 100%;
        background: #f5f5f5;
        box-shadow: 0 5px 9px rgba(0,0,0,0.058);
    }
    #menu_haut > ul > li:nth-child(2):hover > ul {
        width: 100%;
    }

#menu_haut > ul > li.PGS_SPECIALE_3:nth-child(2):hover > ul {
    width: 100%;
}
    .extend {
        display: none!important;
    }
}
.right-top-header{
    text-align:right;
    /* padding: 7px 0; */
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
    width: calc(100% - 280px);
    }

.right-top-header > a {
    font-size: 17px;
    padding-right: 10px;
    /* border-right: 1px solid #00000038; */
}

.right-top-header div{
    /* margin:0 10px; */
}
#totop {
    display: none;
    text-decoration: none;
    position: fixed;
    bottom: 20px;
    right: 20px;
    overflow: hidden;
    width: 51px;
    height: 51px;
    border: none;
    text-indent: -999px;
    background-image: url(../images/interface/uitotop.png);
    background-repeat: no-repeat;
    background-position: left top;
    z-index: 900000;
    background-color: transparent;
}
#totop:hover {
    background: url(../images/interface/uitotop.png) no-repeat left -51px;
    width: 51px;
    height: 51px;
    display: block;
    overflow: hidden;
    float: left;
    cursor: pointer;
}
.prevnext {
    font-size: 1.1em;
    color: #3c3c3c;
    margin: 0;
    margin-top: 20px;
    padding: 2px;
}
.prevnext a {
    font-style: normal;
    background-color: transparent;
    width: 35px;
    height: 35px;
    display: inline-block;
    text-align: center;
    margin: 5px;
    color: #3c3c3c;
    line-height: 35px;
    border: 2px solid #ddd;
    -webkit-border-radius: 35px;
    -moz-border-radius: 35px;
    border-radius: 35px;
    text-decoration: none;
}
.prevnext a:first-child {
    margin-left: 0px;
}
.prevnext a:hover,
.prevnext a.selected {
    color: #FFFFFF;
    background-color: var(--second-color);
    border: 1px solid var(--main-color);
}
label {
    /* display: none; */
}
.info_joueur label{
    display:inline-block;
    width:250px;
    padding-right:30px;
    text-align:left;
}
.info_joueur{
    color:#222;
}
form p:last-child {
    margin: 0px!important;
}
.info_liste a{
    background-color: var(--main-color);
    font-size:15px;
    padding:5px 10px;
    color:#fff;
    display:inline-block!important;
}
.logo_list_cat img{
    opacity:0.6;
}
#lines {
    border-bottom: 17px double black;
    border-top: 6px solid black;
    content: "";
    height: 5px;
    width: 35px;
    display: block;
}
.btn-menu {
    display: none;
    cursor: pointer;
}
.icon-bar{
    background-color:var(--second-color);
}

#pager2 {
    width: 100%;
    bottom: 10px;
    top: auto;
}
.user_page > h3,
.nav_compte h3,
.form_user_edit fieldset legend,
.edition_user fieldset legend {
    font-size: 30px;
    border-bottom: 1px solid #ccc;
    padding-bottom: 25px;
    font-weight: 900;
    margin-top: 0px;
    margin-bottom: 20px;
}
.user_page h3 + table {
    margin-top: 30px;
}
recherche_produit p input[type="text"] {} .recherche_produit {
    position: relative;
    border: 1px solid #ccc;
    padding: 20px;
}
.recherche_billet p:nth-child(2) label,
.recherche_billet p:nth-child(3) label{
    display:block;
}
.recherche_billet p:nth-child(2) select,
.recherche_billet p:nth-child(3) select,
.recherche_billet p select{
    padding:13px; 20px;
    margin-right:10px;
     border: 2px solid #e6e6e6;
}

.recherche_billet p:nth-child(2) input,
.recherche_billet p:nth-child(3) input{
    display:inline-block;
    width:200px;
}
.recherche_produit p:nth-child(1) label {
    display: block;
}
.recherche_produit p label {
    padding-right: 10px;
}
.recherche_commande p:nth-child(3) input,
.recherche_commande p:nth-child(4) input {
    width: auto!important;
    padding: 5px 10px!important;
    display: inline-block!important;
}
.recherche_commande p:nth-child(5) br {
    display: none;
}
.recherche_commande p:nth-child(5) input {
    margin-right: 5px;
    margin-left: 15px;
}
.recherche_commande p:nth-child(3) label,
.recherche_commande p:nth-child(4) label {
    width: 150px!important;
}

.recherche_produit h5 {
    display: block;
    padding: 0px;
    font-weight: 800;
    font-size: 20px;
    border-bottom: 1px solid #ccc;
    padding-bottom: 10px;
    margin: 0px;
    margin-bottom: 20px;
}
.table_retour table{
    width:100%;
      border:1px solid #c12622;
}
.table_retour tr:first-child{
    background-color:#c12622;
    color:#fff;
}
.table_retour th{
    padding:5px 10px;
    border-right:1px solid #fff;
}
.table_retour th:last-child,
.table_retour td:last-child{
    border:0px;
}
.table_retour td{
        padding:5px 10px;
    border-right:1px solid #c12622;
}
.table_retour tr{
        border-bottom:1px solid #c12622;
}
.table_retour ul li{
    list-style:none;
}
.table_retour ul{
    margin:0;
}
.table_retour [type="checkbox"]:not(:checked) + label,
.table_retour [type="checkbox"]:checked + label {
    position: relative;
    cursor: pointer;
    width: 20px;
    text-align: center;
    display: inline-block;
    vertical-align: top;
    margin: 0;
    height: 20px;
    margin: auto;
    z-index: 2;
    vertical-align:middle;
}
.fake_label{
    padding-left:25px;
    text-align:left!important;
}
.table_retour [type="checkbox"]:not(:checked) + label,
.table_retour [type="checkbox"]:checked + label{
    position: relative;
    cursor: pointer;
    width: 30px;
    position:absolute;
    text-align: center;
    display: inline-block;
    vertical-align: top;
    margin: 0;
    height: 20px;
    margin: auto;
    z-index: 2;
}

.table_retour [type="checkbox"]:not(:checked) + label:before,
.table_retour  [type="checkbox"]:checked + label:before{
    content: '';
    position: absolute;
    left: 0px;
    top: 0px;
    margin-left: 0px;
    width: 18px;
    border: 1px solid #9a9a9a;
    height: 18px;
    /* dim. de la case */

    background: #f8f8f8;
    /* angles arrondis */
}

.table_retour [type="checkbox"]:not(:checked) + label:after,
.table_retour  [type="checkbox"]:checked + label:after {
    content: '\f00c';
    position: absolute;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    top: 0;
    left: 0;
    margin-left: 1px;
    margin-top: 0px;
    font-size: 17px;
    color: #c12622;
    transition: all .2s;
}
.table_retour [type="checkbox"]:checked,
.table_retour [type="checkbox"]:not(:checked) {
    position: absolute;
    left: -1000px;
    z-index: 1;
}

.table_retour [type="checkbox"]:not(:checked) + label:after {
    opacity: 0;
    /* coche invisible */

    transform: scale(0);
}
.group_checkbox{
    margin-bottom:5px;
    height:20px;
    margin:auto;
    display:block;
    width:30px;
    margin-bottom:10px;
    margin-top:10px;
}
.categorie_filtre .group_checkbox{
    width:auto;
    height:auto;
}
.marque_filtre .group_checkbox{
    width:auto;
    height:auto;
}

.table_retour [type="checkbox"]:checked + label:after {
    opacity: 1;
    /* coche opaque */

    transform: scale(1);
}
.table_retour textarea{
    height:100px!important;
}
.table_retour label{
    display:block;
    margin-top:10px;
}


.table_retour td:nth-child(4) label{
    display:inline-block!important;
    vertical-align:middle;
    margin:0;

}
.table_retour{
    margin:20px 0px;
}
.select_cmd select{
    padding:8px 20px;
    font-size:14px;
    margin-right:15px;
}
.btn_top{
    margin-bottom:20px;
    text-align:right;
}
.sugg h3{
    padding-bottom:10px;
    margin-top:0px;
    border-bottom:1px solid #ccc;
    margin-bottom:20px;
}
.message_sugg{
    display:inline-block;
    width:50%;

    vertical-align:top;
}
.message_sugg + h3{
    margin-top:20px;
}
.message_sugg label{
    display:block;
color:#222;
font-size:16px;
}
.message_sugg .group_form{
    margin-bottom:20px;
}
.block_message{
    border:1px solid #ddd;
    font-size:16px;
    margin-bottom:20px;
}
.content_message{
    padding:15px;
}
.entete_message{
    border-bottom:1px solid #ddd;
    padding:5px 10px;

}
.entete_message span{
    display:inline-block;
    width:50%;
}
.when{
    text-align:right;
}
.list_sugg{
    font-size:0;
}
.list_message{
    margin-top:20px;
    font-size:0;
}
.block_sugg{
    display:flex;
    width:100%;
    border:1px solid #ddd;

    margin-bottom:20px;
    font-size:16px;
}
.block_joueur{
    display:inline-block;
    vertical-align:top;
}
.block_joueur i{
    color:green;
}
.size3{
    width:33.33333%;
}
.size2{
    width:50%;
}
.size4{
    width:25%;
}
.form_resa_sugg{
    border-left: 1px solid #cccc;
    text-align:center;
    padding:20px;
}
.date_sugg{
    background-color:#c12962;
    color:#fff;
    width:180px;
    text-align:center;
    padding:15px;
}
.date_sugg > .date_sugg{
    padding:0px;
    width:100%!important;
}
.h_sugg{
    display:block;
    text-align:center;
}
.info_joueur{
    padding:15px;
}
.info_joueur span{
    font-weight:bold;
}
.info_joueur{
    width:calc(100% );
}
.sugg_fiche .info_joueur > span{
    display:block;
    border-bottom:1px solid #ccc;
    padding-bottom:5px;
    margin-bottom:5px;
}


.form_ok{
    display:inline-block;
    width:50%;
    border-right:1px solid #ccc;
}
.form_ok label{
    display:block;
}
.form_ok .form_valid{
    display:inline-block;
    width:100%;
    margin-bottom:20px;
    padding:0 15px;
    vertical-align:top;
    font-size:15px;
}
.saisi_sugg{
    font-size:0;
    margin-left:-15px;
    margin-right:-15px;
}
.code_sugg{
    display:inline-block;
    width:33.333%;
    padding:0 15px;
    vertical-align:top;
}
.code_sugg p{
    font-size:14px;
}
.code_sugg label{
    display:block;
    font-size:14px;
}
.code_sugg .check_pack i{
    font-size:20px;
    padding-top:5px!important;
}
.form_valid select{
    padding:7px 10px;
    width:100%;
}
.form_ok .form_valid:last-child{
    text-align:right;
    width:100%;
}
.form_ok {
    padding:15px;
}
.btn_interesse{
    padding:15px;
    text-align:center!important;
}
.bon_cadeau{
    max-width:600px;
    margin:auto;
    text-align:center;
}
.edition_horaire label{
   display:block;

}
.edition_horaire div.select_info{
    display:inline-block;
    width:300px;
    vertical-align:top;
}
.edition_horaire form fieldset > p{
    margin-top:20px!important;
}
.edition_horaire div.select_info select{
    display:inline-block;
    width:250px;
}
.add_line {
    cursor: pointer;
    font-size: 16px;
    text-decoration: underline;
    vertical-align: middle;
    margin-left: 10px;
}
.edition_horaire div.select_info{
    margin-bottom:30px;
}
#contenu .bon_cadeau input[type="text"]{
    width:200px!important;
    font-size:20px;
    padding:5px 10px;
}
.right_bc label{
    display:inline-block;
}
.group_form_cd{
    display:block!important;
    max-width:400px;
    margin:auto;
    text-align:left;
    margin-bottom:20px;
}
.group_form_cd label{
    margin-right:20px;
    width:120px;
}
@media screen and (min-width: 1170px) {
#menu_haut > ul > li > a:hover,
#menu_haut > ul > li:hover > a{
    position: relative;
    color: var(--second-color);
    border-color: #aab5cb;
}
}


@media screen and (max-width: 1660px) {
    #menu_haut>ul > li > a{
        padding: 10px 0;
        font-size: 12px!important;
    }

#menu_haut ul {
    width: 100%;
    display: flex;
    justify-content: space-between;
}

#conteneur_header {
    padding: 0 10px;
}

.right-header {
    padding-left: 10px;
    width: calc(100% - 85px);
}

#header #logo {
    height: 40px;
}
}
@media screen and (max-width: 1200px) {
    #centre div.paragraphe, #centreetdroite div.paragraphe{
        padding:20px;
    }
}

@media screen and (max-width: 1170px) {
    .contain-cat-home.button_opacity .button_slide{
        width:100%;
        height: auto;
        /* min-height: 440px; */
        }

.contain-cat-home.button_opacity .button_slide .txt {
    position: relative;
    height: auto;
    opacity: 1;
}

#centreetdroite .contain-cat-home.button_opacity .button_slide .txt ul {
    padding: 0;
    padding-left: 10px;
}
    .block_marque{
        width: 100%;
        height: 135px;
        display: flex;
        flex-direction: column;
    }

    .contain-img {
    max-width: 400px;
    width: 100%;
    }

.contain-img img {
    width: 100%;
    height: auto;
}
    .contain-txt {
    width: calc(100% - 460px);
    }

.contain-txt h3 {
    text-align: left;
}
.block_marque .inner_marque {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    align-content: center;
    flex-wrap: wrap;
    top: auto;
    bottom: auto;
}

.block_marque img {
    position: relative;
    display: flex;
}

.block_marque h3 {
    width: 100%;
    position: relative;
}
    .notre_vision, .picto_sec{
        padding:100px 20px;
    }

    .info_liste{
        position: relative;
        display: flex;
        right: auto;
        /* margin-bottom: 19px; */
    }

.right_liste_produit .qty_add {
    margin-left: 0;
    width: 100%;
}


.picto_sec .picto_ctn .picto, .contain-picto .picto {
    width: calc(33.3% - 27px);
}
   .slide_home .item{
       padding-top:0;
   }

    #centre div.paragraphe, #centreetdroite div.paragraphe{
        padding:20px;
    }
    #menu_haut ul {
        text-align: center;
    }
   .right_liste_produit {
       width:100%;
       padding:0px;
   }
    .carousel-inner {
        width: 100%!important;
    }
    #menu_haut ul li a:after {
        display: none;
    }
    #menu_haut ul li a:hover,
    #menu_haut ul li:hover a {
        /* color: #3A4046; */
    }
    .resp_menu a svg{
        display:inline-block;
        width:40px;
        padding-right:10px;
        vertical-align:middle;
    }
    #menu_haut .extend {
        padding: 0px;

        font-size: 25px!important;
        position: absolute;
        right: 0px;
        top: 0px;
        height: 100%;
        line-height: 35px;
        width: 35px;
        color: #fff!important;
    }
       #menu_haut .extend i{
           padding-top:10px;
       }
    #header #menu_haut {width: 100%!important;max-width: 100%;float: none;margin: 0;display:block!important;padding: 0;z-index: 160!important;border:0px!important;/* border-bottom:5px solid #97BF0D; *//* background-color: #fff; */overflow: hidden;height: 0px;text-align:left!important;display: flex;flex-direction: column;}
    .liste_produits{
        padding:0;
        width:100%;
    }
    .filtre_left{
        width:100%;
        border-bottom:0;
    }

    .filtre_left > p{
        width:49%;
        display:inline-block;
    }
       .filtre_left > p:last-child{
           width:100%;
       }
    .filtre_left > p:nth-child(2){
        margin-right:2%!important;
    }
    .categorie_filtre,.marque_filtre{
        width:49%;
        display:inline-block;
    }
        .categorie_filtre{
            margin-right:2%;
        }
    .btn-menu {
        z-index: 1000;
        display: inline-block!important;
        position: absolute;
        right: 00px;
        bottom: 10px;
    }
       #col1 {
        display: none;
    }
    #recherche{
        display:none;
    }
    #col3 {
        float: none;
    }
    #pied {
        width: 100%;
    }
    #pied #conteneur_pied {
        width: 100%;
        box-sizing: border-box;
        padding: 40px 20px;
    }

#pied #conteneur_pied .flex .bloc-infos {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
    #pied #conteneur_pied .col{
        width:100%;
        margin-bottom:40px;
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
    }

#pied #conteneur_pied .flex img {
    margin: 0;
}
    .contact-header{
      padding:0px!important;
      border:0px!important;
      display:inline-block;
    }
    .contact-header .col-head{
        display:none!important;
    }
      .contact-header .col-head:last-child{
          display:inline-block!important;
      }
    #header {
        min-width: 100%;
        /* height: 100px; */
        position:relative;
        height:auto!important;
    }

.page-heading {
    padding-top:80px;
}

.page-heading h2{

}
    .top-header{
        height:auto;
        padding-bottom:10px;
    }
    #conteneur {
        /* padding-top:100px; */
    }

    .pageAccueil h3 {
        font-size: 30px;
    }
    #conteneur_contenu {
        min-width: 100%;
    }
    #contenu,
    #conteneur_header {
        width: 100%;
        top:0px!important;
        padding:0px;
        display:block!important;
    }
    .paragraphe p > img {
        display: block;
        max-width: 100%;
        height: auto;
        padding: 0px!important;
        margin: auto;
        margin-bottom: 20px!important;
    }
    #centreetdroite .transport-king .about-us p {
        width: auto;
    }
    .SF fieldset p {
        display: inline-block;
        width: 100%!important;
        margin-left: 0px!important;
    }

    #header #logo {

        position: relative;
        display: block;
        width: 100%;
        left: 0px;
        padding-top: 0px;
          padding:10px 30px;
        height:80px;
    }
    #logo img {
        padding-top: 0!important;
        max-width: 200px;
        padding-top:10px!important;
    }
    #header #logo:after {
        border: none;
    }
    .right-header{
        display:block!important;
        width: 100%!important;
        padding:0px;
        /* border:0px; */
        /* z-index:1000; */
        /* position:absolute; */
        /* top:40px; */
        /* right:60px; */
    }
    #position-menu {
        background-color: #000000;
        position: absolute;
        top: 100%;
        width: 100%;
        margin: 0;
        padding: 0;
        text-align: center;
        display:block!important;
        height: auto;
    }

#position-menu .menu-second {
    display: none;
}
    #menu_haut ul li ul {
        display: block;
        height: 0px;
        overflow: hidden;
        padding: 0px!important;
    }
    #menu_haut ul li.open ul {
        height: auto;
        top: 0px;
        opacity: 1;
        position: relative;
        width: 100%!important;
        border: none;
        padding-top: 9px;
        padding-bottom: 9px;
        display: block;
        left: 0px;
    }
    #menu_haut ul li.open ul li,
    #menu_haut ul li.open ul li a {
        width: 100%!important;
        text-align: left;
        color: #3e3e3e!important;
        background-color: #f5f5f5;
    }
    #menu_haut ul li.open ul li a {
        display: block;
        color: #3e3e3e;
        box-sizing: border-box;
        /* background-color:#fff; */

        height: auto;
        line-height: 30px;
        padding: 0px 8px;
        margin-bottom: 0px;
        width: 200px;
        font-size: 13px;
        font-weight: bold;
        background-image: none;
        border-bottom: 1px solid #e5e5e5;
    }
    #menu_haut ul.menu-sub > li:first-child:after {
        display: none;
    }
    #menu_haut ul {
        float: none;
        margin: auto;
        display: flex;
        flex-direction: column;
        padding: 20px!important;
    }
    #recherche {
        top: 0px;
        right: 0px;
    }
    #centreetdroite {
        width: 100%!important;
    }
    #wrapper {
        top: 0px;
        width: 100%;
        margin-left: 0px;
        min-width: 100%;
        height: auto;
    }
    body {
        overflow-x: hidden;
    }
    #carousel div {
        height: auto;
    }
    #carousel div img {
        height: auto;
        width: 100%;
    }
    #pager2 {
        width: 100%;
        bottom: 10px;
        top: auto;
    }

    #centreetdroite {
        width: 100%!important;
        margin: auto;
        height: auto!important;
    }

    #gauche {
        width: 96%;
        margin: auto;
        padding: 0px;
        position: absolute;
        float: none;
        margin-left: 2%;
    }
    #col2 > a {
        display: none!important;
    }
    #col2 {
        width: 20%;
        margin-right: 0;
        margin-left: 5%;
    }
    #col2 #reseaux {
        width: 100%;
        text-align: center;
    }
    #col2 #reseaux a {
        margin: auto!important;
        display: block!important;
        margin-bottom: 40px!important;
    }
    #col2 {
        margin-left: 5%;
        width: 50%;
        margin-right: 0px;
    }
    #gauche h3 {
        font-size: 1.8em;
        font-weight: normal;
        text-transform: capitalize;
    }
    #gauche .mdl_billet {
        font-size: 1.2em;
        color: #1a333c;
    }
    #menu_haut> ul >li {
        width: 100%;
        text-align: left;
        position:relative;
        border-bottom: 1px solid #454545;
    }

#menu_haut>ul > li > a {
    font-size: 14px!important;
}

.menu-second-responsive {
    display: flex;
}
    #menu_haut> ul >li a{
        padding-right: 25px;
    }
    .left_user,
    .message_sugg {
    display: block;
    width:100%;
}
.fiche_commande table td{
    width:100%;
    display:block;
}
.fiche_commande table.panier td{
    width: auto;
    display: table-cell;
}
.left-top-header{
    display:inline-block;
    width: 80%;
    display: none!important;
}
.right-top-header{
    display: inline-block;
    width: 20%;
}
.left-top-header,
.right-top-header{
    display: flex;
    width: 100%;
    padding: 10px 0;
    text-align: center;
    justify-content: center;
}
.top-header{
    padding:0;
}
.about,
.img_home{
    padding:20px;
}
.img_home{
    padding-top:0;
}
    .picto_ctn .picto{
        width: calc(25% - 30px);
    }

}

@media screen and (max-width: 850px) {
    .contain-metier{
        width:90%;
    }
    .block_marque{
     display:inline-block;
     /* width:calc(33.33333% - 20px); */
     padding:15px 15px;
     vertical-align:top;
     margin:10px;
     position:relative;
     border:3px solid #ddd;
     box-sizing:border-box;
 }
 .ligne-marque{
     display:inline;
     font-size:0;
     border:0px;
 }
    #fiche_panier_add > table,
    #fiche_panier_add > table > tbody,
    #fiche_panier_add > table > tbody > tr,
    #fiche_panier_add > table > tbody > tr > td{
        display:block!important;
        width:100%!important;
        box-sizing:border-box;
        max-width:100%;
        height:auto;

    }
      #fiche_panier_add > table > tbody > tr > td{
          margin-bottom:30px;
          padding-left:0px!important;
          border:0px;
      }
    #fiche_panier_add > table > tbody > tr td.fiche_produit img{
        display:block;
        margin:auto;
        float:none!important;
        padding-right:0px!important;
        max-width:300px;
    }

   .mdlPanier h3 + p + table> tbody > tr > td:nth-child(1),a[name="formIdentificationLog"] + h3 + p + table> tbody > tr > td:nth-child(1) {
    margin-right: 0%!important;
    margin-bottom:20px;
}
.mdlPanier h3 + p + table> tbody > tr > td,
a[name="formIdentificationLog"] + h3 + p + table> tbody > tr > td {
    width: 100%!important;
}

    .pageAccueil .contain-cat-home a.imgctn{
        width:100%;
    }
}

@media screen and (max-width: 740px) {

    .button-cata{
        display:none;
    }
     .picto_sec .picto_ctn .picto, .contain-picto .picto{
        width: calc(50% - 20px);
    }
     .contain-cat-home a, .contain-cat-home > div, .contain-cat-home.x3 > div{
             width: calc(50% - 34px);
    }
    .ariane {
        font-size:12px;
    }
    .liste_produits > table > tbody >tr > td{
        display:block;
    }
    .info_liste{
        position:relative;
    }
    .left_list_prod{
        display:block;text-align:center;
        width:100%;
        margin-bottom:15px;
    }
    .right_list_prod{
        width:100%;
        padding:0px;
    }
      .block_marque{
     display:inline-block;
     /* width:calc(50% - 20px); */
     padding:15px 15px;
     vertical-align:top;
     margin:10px;
     position:relative;
     border:3px solid #ddd;
     box-sizing:border-box;
 }
 .block_marque .inner_marque > a{
     width:100%;
     display:block;
 }
    .list_cat li{
        width:33.3333333%;
        padding: 0 15px;
    }
    .logo_list_prod{
        display:none;
    }
    .no-respons{
    display:none!important;
}
.no-margin{
    margin-bottom:0px!important;
    width:100%;
}
.supp-resp{
    color:#222!important;
    text-decoration:underline!important;
}
     .list_item tbody,
    .list_item,
     .list_item tbody tr,
      .list_item tbody tr td,
      .list_item tbody tr th,
      .list_commande tbody,
    .list_commande,
     .list_commande tbody tr,
      .list_commande tbody tr td,
      .list_commande tbody tr th{
        display:block;
        width:100%;
    }
    .list_item > tbody > tr:first-child,
    .list_commande > tbody > tr:first-child    {
        display:none;
    }
    .label-resp{
    display:block;
    background:var(--second-color);
    color:#fff;
    padding:5px 10px;
    margin-top:-5px;
    margin-left:-5px;
    margin-right:-5px;
    margin-bottom:10px;
}
.list_commande .label-resp{
    background-color:transparent;
    color:#222;
    padding:0px;
    display:inline-block;
    width:120px;
     margin-top:0px;
    margin-left:0px;
    margin-right:0px;
}
.list_commande tr td{
    border:0px!important;
    padding:5px;
}
.list_commande tr{
    border-bottom:1px solid #222;
}
    .list_item > tbody > tr{
        margin-bottom:15px;
    }
      .list_item tbody tr td{

      }
      .list_item tbody tr td:nth-child(3){
          border-bottom:0px!important;
      }
      .list_item tbody tr td:nth-child(4){
          border-top:0px!important;
      }
 #formCreationInscription td,
    #formCreationInscription table,
    #formCreationInscription table > tbody,
    #formCreationInscription table tbody tr,
    #formIdentificationLog td,
    #formIdentificationLog table,
    #formIdentificationLog table > tbody,
    #formIdentificationLog table tbody tr{
        display:block;
        width:100%;
    }
    .page-heading .page-title h2 {
        font-size: 24px;
    }

    .col1,
    .col2 {
        width: 100%;
    }

    .col1 {
        margin-bottom: 40px;
    }


    .carousel-inner,
    .carousel {
        height: auto!important;
    }

    #recherche {
        display: none;
    }
    #menu_haut {
        width: 100%;
        /* top: 35px; */
    }
    #menu_haut >ul {
        padding: 0px;
        text-align: left;
    }
    #menu_haut >ul >li {
        display: inline-block;
        float: none;
    }
    #menu_haut >ul >li a {
        /* padding:0px; */
    }
    #menu_haut> ul >li {
        width: 100%;
    }
    #logo {
        left: 30%;
        margin: 0px!important;
        padding: 0px;
    }
    #background-menu-right {
        height: 190px;
    }
    #wrapper {
        /* top:205px; */
    }
    #col3 {
        width: 90%;
        margin-left: 5%!important;
        float: none;
    }
    #col2 {
        display: none;
    }


}

@media screen and (min-width: 0px) and (max-width: 500px) {
     .contain-metier{
        width:90%;
         flex-wrap: wrap;
    }
    .contain-metier .m-droit{
        padding-left:0px;
    }

    .slide_home .item .contain-txt{
        padding: 20px;
        display: flex;
        flex-direction: column;
    }

.slide_home .item .contain-txt h2 {
    font-size: 30px;
    line-height: 32px;
}

.slide_home .item .contain-txt p {
    font-size: 18px;
    line-height: 25px;
}
    .left-top-header,
.right-top-header{
    display:block;
    width: 100%;
    padding: 10px 0;
    text-align: center;
}
    .left-top-header{
        display:none;
    }
    .icon-box20 i{width:54px;height:54px;font-size:24px;padding:14px;border:1px solid;margin-right:8px;vertical-align:top;}
  .block_marque{
     display:inline-block;
     width:calc(100% - 20px);
     padding:15px 15px;
     vertical-align:top;
     margin:10px;
     position:relative;
     border:3px solid #ddd;
     box-sizing:border-box;


 }
    #logo {
        left: 20%;
    }
    #col1,
    #col2 {
        width: 90%;
    }
    #col2 #reseaux a {
        display: inline-block!important;
        margin-left: 10px!important;
    }
    #col2 #reseaux {
        width: 100%!important;
    }
    #pied #conteneur_pied {
        height: auto;
    }
        .list_cat li{
        width:50%;
        padding: 0 15px;
    }
}

@media screen and (min-width: 0px) and (max-width: 600px) {
    .qty_add{
        margin-left:0px!important;
        margin-bottom:20px;
       width:100%;

    }
 .filtre_left > p{
        width:100%;
        display:inline-block;
    }
    .filtre_left > p:nth-child(2){
        margin-right:0%!important;
    }
    .categorie_filtre,.marque_filtre{
        width:100%;
        display:inline-block;
    }
        .categorie_filtre{
            margin-right:0%;
        }
        .fiche_marque > p img{
            display:block;
            float:none;
            margin:auto;
            padding:0;
        }
}
@media screen and (min-width: 0px) and (max-width: 400px) {
    #header #logo img {
        width: auto;
        height: 100%;
        padding-top: 10px!important;
    }




}
@media screen and (max-width: 800px){
    .liste_produits .enstock{
        display:none;
    }
 .liste_produits .delai{
     display:none;
 }
  .item-etape,.item-etape:first-child.active{
    width:50%!important;
    background-image:none!important;
    -webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
  border: 1px solid var(--second-color);

  }
  .item-etape.active {
    background-color: var(--second-color);
    background-image: none;
    margin-left: 0px;
    z-index: 1;
    padding-left: 10px;

}
.item-etape.active + .item-etape{
  padding-left:10px;
}
  .item-etape.active:before{
    display:none!important;
  }
}
@media screen and (max-width: 360px){
.item-etape,.item-etape:first-child.active{
  width:100%!important;
}
}
@media screen and (min-width: 780px) {
.label-resp{
    display:none;
}
.supp-resp{
    /* display:none; */
}

}
@media screen and (max-width: 780px) {
.tab_addresse,.tab_addresse tbody,.tab_addresse tr,.tab_addresse tr td{
    display:block;
    width:100%;
}
.info_liste{
    /* top:20px; */
}
}
@media screen and (max-width: 1170px) {
    .fiche-compte .btn_prod a{
        width:calc(50% - 20px);
        max-width:calc(50% - 20px);
    }
    .fiche-compte p{
        text-align:left;
    }
}
@media screen and (max-width:600px) {
    .fiche-compte .btn_prod a{
        width:calc(100% - 20px);
        max-width:calc(100% - 20px);
    }
    .fiche-compte p{
        text-align:left;
    }
}

.contain_actus{
    display:
    flex;
    flex-wrap: wrap;
    margin: 50px 0;
    align-items: stretch;
    align-content: space-between;
    justify-content: center;
    flex-direction: row;
    gap: 60px;
}
.actu_border, .actu_bloc {
    box-shadow: 0 0 10px #cacaca61;
    width: 100%;
    height: 100%;
    /* border-radius: 10px; */
    overflow: hidden;
    background-color: #fff;
    border-top: 8px solid var(--second-color);
    border-radius: 10px;
}

.actu_border .img-actu, .actu_bloc .actu_img {
    max-height: 350px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

actu_bloc .actu_img a {
    width: 100%;
    height: 100%;
}

.txt-actu, .actu_txt {
    padding: 20px 20px 10px;
    min-height: calc(100% - 350px);
}

.txt-actu h4, .actu_txt h4 {
    line-height: 20px;
}

.txt-actu p {
    line-height: 20px;
}

.actu_border .read-more, .lin_actu a.suite, a.suite {
    padding: 10px;
    display: flex;
    margin: auto;
    /* height: 40px; */
    text-transform: uppercase;
    font-size: 15px;
    border-radius: 5px;
    color: #fff;
    background-color: transparent;
    width: 200px;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    align-content: center;
    transition: all 0.5s ease;
    font-weight: bold;
}

.contain_actus .actu_bloc{
    width: calc(33.3% - 40px);
    display: flex;
    flex-direction: column;
    /* margin:0 20px 30px; */
    height: auto;
    justify-content: flex-start;
}

.contain_actus .actu_bloc .actu_img{
    width:100%;
    /* height:150px; */
    overflow:
    hidden;
    display:
    flex;
    justify-content: center;
    align-items: center;
}

.contain_actus .actu_bloc .actu_img img.mdl_billet, .contain_actus .actu_bloc .actu_img a{
    width:100%;
    padding: 0!important;
}
.contain_actus .actu_bloc .actu_img img.mdl_billet{
    width: 100%;
    height: auto;
}

#paragraphe1782 .contain_actus .actu_bloc .actu_img img.mdl_billet {
    max-height: 130px;
    width: auto;
    padding-top: 30px!important;
}
 .contain_actus .actu_bloc .actu_img a{
     display:block;
     text-align:center;
 }
.contain_actus  .prevnext{
    width:100%;
}

.contain_actus .actu_txt{
    display:
    flex;
    flex-direction: column;
}

.contain_actus .actu_txt h4{
    font-size: 18px;
    font-weight: 600;
    /* background-color: #333; */
    color: var(--second-color);
    margin: 0;
    padding: 10px;
}

#centreetdroite .contain_actus .actu_txt h4 a{
    color: var(--second-color);
}

.contain_actus .actu_txt p{
    padding:10px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.contain_actus .date{
    width:100%;
    display: block;
    margin-top: 10px;
    font-size: 14px;
    color: #b3b3b3;
    display: none;
}

.actu-container{
    display:
    flex;
    padding-top:50px;
    max-width:1140px;
    margin:
    auto;
    min-height:500px;
    flex-wrap: wrap;
}

.actu-container .bloc-img,
.actu-container .bloc-img img.mdl_billet{
    width: auto!important;
    height: auto!important;
    max-width: 100%!important;
}

.actu-container .bloc-txt{
    width: calc(100% - 400px);
    padding-left: 20px;
}

.actu-container .bloc-txt h4{
    font-size:22px;
    font-weight:600;
}




/* =====================================================================
   CHOPPER - couche d'habillage (07/08/2026)
   Le wireframe cliente donne la DISPOSITION ; la typo et les couleurs
   suivent la charte : Roboto, noir #141414, orange #dd663a.
   ECHELLE EN PIXELS : le gabarit a body{font-size:14px}, donc toute
   valeur en rem (racine 16px) sort decalee. Ne pas remettre de rem ici.
        h2 section .... 28px / 700
        h4 picto ...... 17px / 700      sous-titre italique .. 14px
        libelle gamme . 17px / 700
        titre carte ... 15px / 600
        texte courant . 16px            liens secondaires .... 13px
        boutons ....... 14px / 700
   ===================================================================== */

/* ---------- EN-TETE : bande blanche + barre d'onglets noire ---------- */
#header { background-color: #fff; }
#header #conteneur_header { flex-wrap: wrap; height: auto; padding: 0; background: #fff; align-items: center; }
#header #conteneur_header #logo { flex: 0 0 auto; height: auto; width: auto; position: relative; left: 0; padding: 10px 30px; }
#header #conteneur_header #logo img { height: 58px; width: auto; max-width: none; padding-top: 0 !important; }
#header #conteneur_header .right-header { flex: 0 0 100%; width: 100%; padding-left: 0; justify-content: center; }
#header #conteneur_header #position-menu { width: 100%; }
#menu_haut { background: var(--main-color); width: 100%; }
#menu_haut > ul { justify-content: center; }

.liens-secondaires { display: inline-flex; align-items: center; gap: 18px; margin-right: 24px; }
.liens-secondaires a { color: var(--main-color); font-size: 13px; font-weight: 500; }
.liens-secondaires a:hover { text-decoration: underline !important; }

/* panneau de recherche : replie par defaut, deplie par la loupe du menu */
#recherche-chopper[hidden] { display: none !important; }
#recherche-chopper { flex: 0 0 100%; width: 100%; order: 3; position: relative; z-index: 300; display: flex; justify-content: center; background: #fff; padding: 14px 0 16px; border-bottom: 1px solid #ececec; }
#recherche-chopper.ouvert { display: flex !important; }
#recherche-fermer { border: 1px solid var(--main-color); border-left: 0; background: #fff; color: var(--main-color); font-size: 22px; line-height: 1; padding: 0 14px; cursor: pointer; }
#recherche-fermer:hover { color: var(--second-color); }
#loupe-chopper[aria-expanded="true"] i { color: var(--second-color); }
#recherche-chopper form { display: inline-flex; align-items: stretch; }
#recherche-chopper input[type=text] { width: 420px; max-width: 60vw; border: 1px solid var(--main-color); border-right: 0; padding: 9px 15px; font-size: 15px; font-family: 'Roboto', sans-serif; }
#recherche-chopper button { border: 1px solid var(--main-color); background: var(--main-color); color: #fff; padding: 0 18px; cursor: pointer; }

/* ---------- bandeau connexion / inscription ---------- */
#acces-compte-chopper { background: #fff; padding: 20px 0; border-bottom: 1px solid #eee; }
#acces-compte-chopper .acces-compte-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 18px; }
#acces-compte-chopper span { font-style: italic; font-size: 15px; color: var(--main-color); }
#acces-compte-chopper .btn-acces { display: inline-block; background: var(--second-color); color: #fff; text-transform: uppercase; font-weight: 700; letter-spacing: .05em; padding: 10px 28px; font-size: 14px; }
#acces-compte-chopper .btn-acces:hover { background: var(--main-color); }

/* ---------- titres de section : un seul traitement partout ---------- */
.services-chopper .section-title h2,
.secteurs .section-title h2,
.picto_sec .section-title h2,
.marque_section .section-title h2,
.best_vente .section-title h2,
.devis-chopper .section-title h2 {
  color: var(--second-color) !important;
  font-size: 28px !important; line-height: 1.25; font-weight: 700;
  text-transform: uppercase; letter-spacing: .03em; text-align: center;
  padding-bottom: 0 !important; margin: 0 !important;
}
.services-chopper .section-title, .secteurs .section-title, .picto_sec .section-title,
.marque_section .section-title, .best_vente .section-title, .devis-chopper .section-title { margin-bottom: 40px !important; }
.services-chopper .section-title h2:after, .secteurs .section-title h2:after,
.picto_sec .section-title h2:after, .marque_section .section-title h2:after,
.best_vente .section-title h2:after, .devis-chopper .section-title h2:after {
  content: ''; display: block; width: 56px; height: 3px; background: var(--second-color); margin: 14px auto 0;
}

/* ---------- rythme des sections ---------- */
.services-chopper { background: var(--main-color); padding: 66px 0 62px; }
.marque_section   { background: #f7f8fa; padding: 58px 0 52px; }
.secteurs         { background: #fff;     padding: 62px 0 56px; }
.picto_sec        { background: #f7f8fa; padding: 60px 0 56px; }
.best_vente       { background: #fff;     padding: 60px 0 56px; }
.devis-chopper    { background: var(--main-color); padding: 62px 0 66px; }

/* ---------- NOS SERVICES ---------- */
.services-chopper .picto { flex: 1 1 0; max-width: 220px; text-align: center; padding: 0 12px; }
.services-chopper .picto img { height: 66px; width: auto; margin-bottom: 4px; }
.services-chopper .picto h4 { color: #fff !important; font-size: 17px !important; font-weight: 700; margin: 16px 0 8px; }
.services-chopper .picto p  { color: #b9b9b9 !important; font-size: 14px !important; font-style: italic !important; line-height: 1.45; display: block !important; margin: 0 !important; }
.topflex { align-items: flex-start; }
.services-chopper .marginbt50 { margin-bottom: 0 !important; }

/* ---------- MARQUES PARTENAIRES ---------- */
.marque_section .owl-marque:empty { display: none; }
.marque_section .ctn-btn-marque .button { display: inline-block; position: relative; float: none; margin: 0;
  background: var(--second-color); border: 0; padding: 14px 36px; text-transform: uppercase;
  font-weight: 700; letter-spacing: .06em; font-size: 14px; }
.marque_section .ctn-btn-marque .button span { color: #fff !important; }
.marque_section .ctn-btn-marque .button:after { display: none; }
.marque_section .ctn-btn-marque .button:hover { background: #c4552c; }
.marque_section .accroche-marque { clear: both; margin: 20px 0 0; font-size: 15px; }

/* ---------- GAMMES PAR METIER : libelle sous le visuel ---------- */
.secteurs .contain-cat-home a.imgctn { background-color: transparent !important; display: block !important; height: auto !important; min-height: 0 !important; overflow: visible !important; box-shadow: none !important; }
.secteurs .contain-cat-home a.imgctn img { position: static !important; display: block !important; width: 100% !important; height: auto !important; opacity: 1 !important; }
.secteurs .contain-cat-home a.imgctn:after, .secteurs .contain-cat-home a.imgctn:before { display: none !important; }
.secteurs .contain-cat-home .button_slide .txt { position: static !important; transform: none !important; background: none !important;
  padding: 16px 0 0 !important; text-align: center !important; text-shadow: none !important; width: auto !important; height: auto !important; opacity: 1 !important; }
.secteurs .contain-cat-home .button_slide .txt p { color: var(--main-color) !important; font-weight: 700 !important;
  text-transform: uppercase !important; font-size: 17px !important; line-height: 1.35 !important; }
.secteurs a.button { background: var(--second-color) !important; border: 0 !important; padding: 13px 34px !important;
  text-transform: uppercase; font-weight: 700; letter-spacing: .05em; font-size: 14px !important; }
.secteurs a.button span { color: #fff !important; }
.secteurs a.button:after { display: none !important; }

/* ---------- EQUIPEZ-VOUS ---------- */
.picto_sec .picto { background: #fff; border: 1px solid #ececec; }
.picto_sec .picto_ctn .picto h4 { font-size: 16px !important; font-weight: 600; }

/* ---------- MEILLEURES VENTES ---------- */
.best_vente .bloc-services { background: #fff; border: 1px solid #ececec; text-align: center; min-height: 0 !important; }
.best_vente .bloc-services .contain-txt { padding: 14px 12px 16px; }
.best_vente .bloc-services img { object-fit: contain; max-height: 200px; }
.best_vente .bloc-services h3 { color: var(--main-color) !important; font-size: 15px !important; font-weight: 600; line-height: 1.4; text-transform: none; }
.best_vente .bloc-services a.button { display: none !important; }
.best_vente .bloc-services span.new, .best_vente .bloc-services span.promo { display: none !important; }

/* ---------- DEMANDER UN DEVIS ---------- */
.devis-chopper .devis-txt { max-width: 780px; margin: 0 auto 30px; font-size: 16px !important; line-height: 1.65; text-align: center; }
.devis-chopper .devis-txt, .devis-chopper .devis-txt * { color: #d8d8d8 !important; }
.devis-chopper .devis-cta { display: block; clear: both; text-align: center; }
.devis-chopper .devis-cta .button { display: inline-block; position: relative; float: none; margin: 0;
  background: var(--second-color); border: 0; padding: 14px 36px; text-transform: uppercase;
  font-weight: 700; letter-spacing: .06em; font-size: 14px; }
.devis-chopper .devis-cta .button span { color: #fff !important; }
.devis-chopper .devis-cta .button:after { display: none; }
.devis-chopper .devis-cta .button:hover { background: #fff; }
.devis-chopper .devis-cta .button:hover span { color: var(--main-color) !important; }

#contenu_scroller:empty { display: none; }  /* NE PAS masquer tout court : c est le conteneur du contenu des pages internes */

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .liens-secondaires { display: none; }
  #header #conteneur_header #logo img { height: 46px; }
  .services-chopper .section-title h2, .secteurs .section-title h2, .picto_sec .section-title h2,
  .marque_section .section-title h2, .best_vente .section-title h2, .devis-chopper .section-title h2 { font-size: 22px !important; }
  .services-chopper .picto { flex: 0 0 46%; max-width: 46%; margin-bottom: 26px; }
}
@media (max-width: 560px) {
  .services-chopper .picto { flex: 0 0 100%; max-width: 100%; }
}


/* cartes produits : le gabarit justifiait le titre et lui collait un filet noir */
.best_vente .bloc-services h3 { text-align: center !important; padding: 0 !important; margin: 0 !important; }
.best_vente .bloc-services h3:after, .best_vente .bloc-services h3:before { display: none !important; }
.best_vente .bloc-services .contain-txt { display: block; }
.best_vente .bloc-services { padding-bottom: 6px; }
.marque_section .accroche-marque { font-weight: 400; }


/* =====================================================================
   CHOPPER - palette : NOIR & BLANC + touches legeres de #dd663a (charte cliente)
   (orange de la trame cliente du 31/07/2026. On garde le principe
   noir & blanc : l orange ne sert qu en touches, jamais en aplat.)
   L'accent ne sert QUE pour : filet sous les titres, survols, details.
   Aucun aplat de couleur pleine largeur.
   ===================================================================== */
:root { --second-color: #dd663a; --accent-fonce: #c4552c; }

/* barre haute : noire, plus d'aplat colore */
.top-header { background-color: var(--main-color) !important; }
.top-header, .top-header a, .top-header p, .liens-secondaires a,
.right-top-header a, .left-top-header p { color: #fff !important; }
.liens-secondaires a:hover, .right-top-header a:hover { color: var(--second-color) !important; }
#header .center-top .fa, .center-top .fa { color: #fff !important; }

/* titres de section : noirs, filet d'accent dessous */
.services-chopper .section-title h2, .secteurs .section-title h2, .picto_sec .section-title h2,
.marque_section .section-title h2, .best_vente .section-title h2, .devis-chopper .section-title h2 {
  color: var(--main-color) !important;
}
.services-chopper .section-title h2, .devis-chopper .section-title h2 { color: #fff !important; }
.services-chopper .section-title h2:after, .secteurs .section-title h2:after,
.picto_sec .section-title h2:after, .marque_section .section-title h2:after,
.best_vente .section-title h2:after, .devis-chopper .section-title h2:after { background: var(--second-color); }

/* boutons : noir sur fond clair, blanc sur fond noir ; survol en accent */
.marque_section .ctn-btn-marque .button, .secteurs a.button {
  background: var(--main-color) !important; }
.marque_section .ctn-btn-marque .button span, .secteurs a.button span { color: #fff !important; }
.marque_section .ctn-btn-marque .button:hover, .secteurs a.button:hover { background: var(--second-color) !important; }
.devis-chopper .devis-cta .button { background: #fff !important; }
.devis-chopper .devis-cta .button span { color: var(--main-color) !important; }
.devis-chopper .devis-cta .button:hover { background: var(--second-color) !important; }
.devis-chopper .devis-cta .button:hover span { color: #fff !important; }
#acces-compte-chopper .btn-acces { background: var(--main-color); }
#acces-compte-chopper .btn-acces:hover { background: var(--second-color); }

/* hero : titre en blanc, plus de titre colore */
.slide_home .item .contain-txt h2 { color: #fff !important; }
/* [15/09 V2] diapo 1 : "grossir pour les entreprises, associations et particuliers" */
.slide_home .item .contain-txt p.accroche-forte { font-size: 27px; line-height: 38px; }
/* [15/09 V2] Diaporama : l'en-tete est FIXE (164px) et recouvrait le haut de chaque
   visuel, le bas etant en plus rogne de 70px (image 720px dans une diapo de 650px).
   Seule la tranche centrale restait visible -> tetes coupees sur les photos de
   personnes fournies par Helene. L'image demarre desormais SOUS l'en-tete et se
   cale sur le haut. Hauteur d'en-tete = variable publiee par javascript.js
   (majHauteurHeader), 164px en repli. Desktop seulement : en mobile le menu est
   different et la variable n'a pas de sens. */
@media screen and (min-width: 1170px) {
  .slide_home .item img {
    top: var(--chopper-header-h, 164px);
    left: 0; width: 100%; min-width: 0;
    height: calc(100% - var(--chopper-header-h, 164px)); min-height: 0;
    object-fit: cover; object-position: center 12%;
  }
}

/* libelles gammes en noir, survol accent */
.secteurs .contain-cat-home a.imgctn:hover .txt p { color: var(--second-color) !important; }
/* [15/09 V2] tuiles gammes : les photos fournies sont CARREES ; toutes les tuiles en carre
   pour rester alignees (la tuile Cuisine garde l'ancien montage 6:5 en attendant sa photo). */
.secteurs .contain-cat-home a.imgctn img { aspect-ratio: 1 / 1; object-fit: cover; object-position: center top; }

/* ---- CORRECTIFS SIGNALES ---- */

/* 1. sous-menus : le gabarit ouvrait le volet a top:115px, cale sur l'ancien
      en-tete compact. Le nouvel en-tete est plus haut -> il passait PAR-DESSUS
      la barre de menu. On le cale sous la barre d'onglets. */
/* La hauteur de l'entete varie avec la largeur (onglets sur la meme ligne que
   le logo, ou dessous) : une valeur en dur laissait jusqu'a 45px de vide sous
   la barre d'onglets et cassait le survol. `--chopper-header-h` est publiee par
   javascript.js (majHauteurHeader) ; le 155px n'est qu'un repli si JS echoue. */
#menu_haut li:hover > .block_sub, .block_sub { top: var(--chopper-header-h, 155px) !important; }
/* Pas de "pont" de survol : mesure faite, les <li> (ul en display:flex) ont
   exactement le meme bas que #menu_haut a toutes les largeurs -> ecart 0 px.
   Un pont transparent au-dessus du volet intercepterait les clics sur les
   onglets voisins pendant qu'un volet est ouvert. */
#menu_haut > ul > li { position: relative; }
#menu_haut { z-index: 20; }
.block_sub { z-index: 15 !important; box-shadow: 0 8px 18px rgba(0,0,0,.12); }

/* 2. accroche collee au bouton "Voir les catalogues" */
.marque_section .ctn-btn-marque { padding-bottom: 4px !important; }
.marque_section .ctn-btn-marque .button { margin-bottom: 24px !important; }
.marque_section .accroche-marque { margin-top: 8px !important; line-height: 1.6; }

/* 3. texte du bandeau devis reellement centre */
.devis-chopper .devis-txt { text-align: center !important; margin-left: auto !important; margin-right: auto !important; padding: 0 20px; }
.devis-chopper .container { text-align: center; }


/* contenu redactionnel des pages internes (repris de chopper.fr) */
.chopper-contenu { max-width: 1000px; margin: 0 auto; padding: 10px 30px 40px; }
.chopper-contenu h3 { color: var(--main-color); font-size: 21px; font-weight: 700; text-transform: uppercase; margin: 38px 0 14px; }
.chopper-contenu h3:first-child { margin-top: 0; }
.chopper-contenu p { font-size: 16px; line-height: 1.7; margin: 0 0 16px; color: #333; }
.chopper-contenu ul { margin: 0 0 20px; padding-left: 22px; }
.chopper-contenu li { font-size: 16px; line-height: 1.65; margin-bottom: 8px; color: #333; list-style: disc; }
.chopper-contenu a { color: var(--second-color); font-weight: 600; }
.chopper-contenu a.button { display: inline-block; background: var(--main-color); color: #fff !important; padding: 13px 34px; text-transform: uppercase; font-weight: 700; letter-spacing: .05em; font-size: 14px; }
.chopper-contenu a.button:hover { background: var(--second-color); }
.chopper-contenu a.button:after { display: none; }

/* ---- mise en page des contenus repris de chopper.fr ---- */
.chopper-contenu .ch-chapo { font-size: 18px; line-height: 1.65; color: var(--main-color); font-weight: 500; margin-bottom: 26px; }
.chopper-contenu .ch-row { display: flex; gap: 40px; align-items: center; margin: 40px 0; }
.chopper-contenu .ch-row.inverse { flex-direction: row-reverse; }
.chopper-contenu .ch-row .ch-txt { flex: 1 1 55%; min-width: 0; }
.chopper-contenu .ch-row .ch-img { flex: 0 0 40%; }
.chopper-contenu .ch-row .ch-img img { width: 100%; height: auto; display: block; }
.chopper-contenu .ch-row h3 { margin-top: 0; }
.chopper-contenu .ch-sous { font-size: 17px; font-weight: 700; text-transform: uppercase; color: var(--second-color); margin: 26px 0 12px; letter-spacing: .02em; }
.chopper-contenu .ch-galerie { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin: 28px 0 34px; }
.chopper-contenu .ch-galerie img { width: 100%; height: auto; display: block; background: #f7f8fa; }
.chopper-contenu .ch-galerie.ch-petit { grid-template-columns: repeat(4, 1fr); max-width: 620px; }
.chopper-contenu .ch-devis { text-align: center; font-size: 18px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--second-color); margin: 34px 0 18px; }
.chopper-contenu .ch-cta { text-align: center; margin: 26px 0 10px; }
@media (max-width: 820px) {
  .chopper-contenu .ch-row, .chopper-contenu .ch-row.inverse { flex-direction: column; gap: 22px; }
  .chopper-contenu .ch-row .ch-img { flex: 0 0 auto; width: 100%; }
  .chopper-contenu .ch-galerie { grid-template-columns: repeat(2, 1fr); }
}



/* ================= CHOPPER - volet des sous-menus categories =================
   Le gabarit rendait les 2 niveaux quasi identiques (meme taille, meme poids)
   avec un interligne tres large. On hierarchise et on resserre.
   ============================================================================ */
.block_sub { padding-top: 26px !important; padding-bottom: 30px !important; }
.block_sub .center_menu { max-width: 1280px; margin: 0 auto; padding: 0 30px; }
.block_sub .col_sub_menu { padding: 0 26px; }
.block_sub .col_sub_menu + .col_sub_menu { border-left: 1px solid #ececec; }

/* niveau 1 : rubrique */
.block_sub .col_sub { margin-bottom: 22px; }
.block_sub .col_sub h5 { margin: 0 0 8px !important; padding: 0 0 7px !important; line-height: 1.25 !important; border-bottom: 2px solid var(--second-color); display: inline-block; }
.block_sub .col_sub h5 a {
  font-size: 14px !important; font-weight: 700 !important; text-transform: uppercase;
  letter-spacing: .04em; color: var(--main-color) !important; line-height: 1.25 !important;
}
.block_sub .col_sub h5 a:hover { color: var(--second-color) !important; }

/* niveau 2 : sous-rubriques, resserrees et en retrait */
.block_sub ul.menu-sub2 { margin: 6px 0 0 !important; padding: 0 !important; gap: 0 !important; }
.block_sub ul.menu-sub2 li { margin: 0 !important; padding: 0 !important; line-height: 1.35 !important; list-style: none; }
.block_sub ul.menu-sub2 li a {
  display: block; font-size: 13px !important; font-weight: 400 !important;
  color: #5c5c5c !important; text-transform: none !important;
  padding: 3px 0 3px 12px !important; line-height: 1.35 !important; position: relative;
}
.block_sub ul.menu-sub2 li a:before { content: ''; position: absolute; left: 0; top: 11px; width: 5px; height: 1px; background: #c9c9c9; }
.block_sub ul.menu-sub2 li a:hover { color: var(--second-color) !important; }
.block_sub ul.menu-sub2 li a:hover:before { background: var(--second-color); width: 8px; }

/* le bouton flottant passait par-dessus le volet */
.button-cata { z-index: 5 !important; }


/* ---- enrichissement des pages redactionnelles ---- */
.chopper-contenu figure { margin: 0; }
.chopper-contenu figure img { width: 100%; height: auto; display: block; }
.chopper-contenu figcaption { font-size: 12.5px; color: #8a8a8a; font-style: italic; padding: 8px 2px 0; line-height: 1.4; }

/* chiffres-cles */
.ch-chiffres { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; background: var(--main-color); margin: 34px 0 40px; }
.ch-chiffres > div { padding: 26px 12px; text-align: center; border-right: 1px solid rgba(255,255,255,.12); }
.ch-chiffres > div:last-child { border-right: 0; }
.ch-chiffres strong { display: block; font-size: 30px; font-weight: 700; color: var(--second-color); line-height: 1.1; }
.ch-chiffres span { display: block; font-size: 12.5px; color: #c4c4c4; text-transform: uppercase; letter-spacing: .05em; margin-top: 8px; }

/* sommaire d'ancres */
.ch-sommaire { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 28px 0 34px; padding: 16px 18px; background: #f7f8fa; border-left: 3px solid var(--second-color); }
.ch-sommaire span { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--main-color); margin-right: 4px; }
.ch-sommaire a { font-size: 13px; font-weight: 600; color: var(--main-color) !important; border: 1px solid #d8d8d8; background: #fff; padding: 7px 14px; }
.ch-sommaire a:hover { border-color: var(--second-color); color: var(--second-color) !important; }

/* encadres */
.ch-encadre { background: #f7f8fa; border-left: 3px solid var(--second-color); padding: 18px 22px; margin: 26px 0; }
.ch-encadre p:last-child { margin-bottom: 0; }
.ch-alerte { border: 1px solid #ecdfd8; background: #fdf7f4; padding: 16px 20px; margin: 22px 0; }
.ch-alerte p { margin: 0; font-size: 15px; color: #6b5b53; }
.ch-alerte p:before { content: '\26A0'; color: var(--second-color); font-weight: 700; margin-right: 8px; }

/* etapes numerotees */
.ch-etapes { list-style: none; margin: 22px 0 32px; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; counter-reset: etape; }
.ch-etapes li { display: flex; gap: 14px; align-items: flex-start; background: #fff; border: 1px solid #ececec; padding: 16px 18px; }
.ch-etapes li span { flex: 0 0 30px; height: 30px; border-radius: 50%; background: var(--second-color); color: #fff; font-weight: 700; font-size: 14px; display: flex; align-items: center; justify-content: center; }
.ch-etapes li p { margin: 0; font-size: 14px; line-height: 1.5; }

/* bloc de fin */
.ch-final { background: var(--main-color); padding: 34px 30px; text-align: center; margin: 44px 0 10px; }
.ch-final p { color: #d8d8d8 !important; font-size: 17px; margin: 0 0 20px; }
.ch-final .button { background: var(--second-color) !important; display: inline-block; position: relative; }
.ch-final .button span { color: #fff !important; }
.ch-final .button:after { display: none; }
.ch-final .button:hover { background: #fff !important; }
.ch-final .button:hover span { color: var(--main-color) !important; }
.ch-final .ch-devis { color: var(--second-color) !important; font-size: 20px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 12px; }

@media (max-width: 820px) {
  .ch-chiffres { grid-template-columns: repeat(2, 1fr); }
  .ch-etapes { grid-template-columns: 1fr; }
}

/* ---- page pret-a-porter : catalogues, familles, marques ---- */
.ch-catalogues { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 22px 0 38px; } /* [21/09] 6 catalogues = 2 lignes de 3 (etait 5 colonnes) */
.ch-catalogues em.ch-cat-poids { display: inline-block; margin-top: 10px; font-style: normal; font-size: 11.5px; font-weight: 700;
  color: var(--second-color); border: 1px solid currentColor; border-radius: 3px; padding: 2px 7px; letter-spacing: .03em; }
.ch-catalogues a { display: block; border: 1px solid #e2e2e2; padding: 20px 14px; text-align: center; background: #fff; transition: all .2s ease; }
.ch-catalogues a:hover { border-color: var(--second-color); box-shadow: 0 4px 14px rgba(0,0,0,.07); }
.ch-catalogues strong { display: block; font-size: 16px; font-weight: 700; color: var(--main-color); text-transform: uppercase; letter-spacing: .02em; }
.ch-catalogues span { display: block; font-size: 12.5px; color: #8a8a8a; margin-top: 5px; }
.ch-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 36px; }
.ch-chips span { display: inline-block; font-size: 13px; font-weight: 500; color: var(--main-color); background: #f4f5f7; border: 1px solid #e6e7ea; padding: 7px 14px; }
.ch-chips-marques span { background: #fff; border-color: #e2e2e2; color: #5c5c5c; }
@media (max-width: 820px) { .ch-catalogues { grid-template-columns: repeat(2, 1fr); } }

/* ---- cartes produits : prix + survol ---- */
.best_vente .bloc-services { transition: box-shadow .25s ease, transform .25s ease, border-color .25s ease; }
.best_vente .contain-services .bloc-services { box-shadow: none; margin-top: 0; }
.best_vente .bloc-services:hover { border-color: var(--second-color); box-shadow: 0 6px 20px rgba(0,0,0,.10); transform: translateY(-3px); }
.best_vente .bloc-services:hover h3 { color: var(--second-color) !important; }
.best_vente .bloc-services img { transition: none; }
.best_vente .bloc-services:hover img { transform: none; opacity: 1; }
.best_vente .contain-services .bloc-services .contain-txt > a:hover:after { opacity: 0 !important; }
.best_vente .bloc-services h3:after { display: none !important; }
#centreetdroite .best_vente .contain-services .bloc-services .price,
.best_vente .bloc-services .price { display: block !important; width: 100%; padding: 0 !important; margin: 8px 0 0 !important; text-align: center; font-size: 17px !important; font-weight: 700; color: var(--main-color) !important; }
.best_vente .bloc-services .price .prix-mention { font-size: 12px; font-weight: 400; color: #8a8a8a; margin-left: 3px; }
.best_vente .bloc-services .price .old { text-decoration: line-through; color: #9a9a9a !important; font-weight: 400; font-size: 14px; }
.best_vente .bloc-services .price .new_price { color: var(--second-color) !important; font-weight: 700; font-size: 17px; padding-left: 8px; }


/* =====================================================================
   CHOPPER - retour cliente du 10/09/2026
   ===================================================================== */

/* --- barre haute : logo EPI Center en version horizontale, plus grand --- */
.left-top-header { display: flex; align-items: center; gap: 12px; }
/* 3 regles "#header .left-top-header img { height:100%; padding:8px }" (ID, donc
   plus specifiques) ecrasaient la taille : on remonte la specificite ici. */
#header .left-top-header img.epi-horizontal { height: 30px !important; width: auto !important; padding: 0 !important; margin-left: 10px; }
.top-header { height: auto; }
.top-header .center-top { padding-top: 6px; padding-bottom: 6px; }

/* --- les onglets remontent dans la bande blanche, en onglets de classeur --- */
#header #conteneur_header { flex-wrap: wrap; align-items: flex-end; padding: 0 30px; border-bottom: 2px solid var(--main-color); }
#header #conteneur_header #logo { flex: 0 0 auto; padding: 12px 0 12px; }
#header #conteneur_header .right-header { flex: 1 1 auto; width: auto; padding-left: 30px; justify-content: flex-end; align-self: flex-end; }
#header #conteneur_header #position-menu { width: auto; }
#menu_haut { background: transparent !important; width: auto; justify-content: flex-end; }
#menu_haut > ul { justify-content: flex-end; align-items: flex-end; gap: 5px; padding-right: 4px; }

#menu_haut > ul > li {
  background: #eceff1; border: 1px solid #dcdfe1; border-bottom: 0;
  border-radius: 7px 7px 0 0; margin: 0; padding: 0;
  transition: background .2s ease, color .2s ease;
}
#menu_haut > ul > li > a { padding: 11px 15px 10px !important; display: block; }
#menu_haut > ul > li > a span { color: var(--main-color) !important; font-size: 12.5px; font-weight: 700; letter-spacing: .01em; }
#menu_haut > ul > li:hover { background: var(--main-color); }
#menu_haut > ul > li:hover > a span { color: #fff !important; }
#menu_haut > ul > li:hover > a { color: #fff !important; }

/* l'onglet PERSONNALISATION est mis en avant : orange, texte noir (demande cliente) */
#menu_haut > ul > li.PGS_SPECIALE_5 { background: var(--second-color); border-color: var(--second-color); }
#menu_haut > ul > li.PGS_SPECIALE_5 > a span { color: var(--main-color) !important; }
#menu_haut > ul > li.PGS_SPECIALE_5:hover { background: #c4552c; }
#menu_haut > ul > li.PGS_SPECIALE_5:hover > a span { color: #fff !important; }

/* icone maison agrandie */
/* l'onglet Accueil garde EXACTEMENT la meme boite que les autres : meme padding,
   et l'icone est contrainte a la meme hauteur de ligne que le texte des onglets. */
#menu_haut > ul > li.ACCUEIL > a { padding: 11px 15px 10px !important; display: flex; align-items: center; justify-content: center; }
#menu_haut > ul > li.ACCUEIL > a span { font-size: 12.5px; line-height: 1.35; display: flex; align-items: center; }
/* [15/09 V2] icone maison agrandie (15px -> 21px) SANS changer la hauteur de l'onglet :
   la boite de ligne reste celle du texte des autres onglets (12.5px x 1.35 = 17px) */
#menu_haut > ul > li.ACCUEIL > a span { height: 17px; }
#menu_haut > ul > li.ACCUEIL > a span i.fa-home { font-size: 21px; line-height: 17px; vertical-align: middle; }

/* la loupe ne colle plus au bord droit */
#menu_haut > ul > li:last-child { background: transparent; border: 0; margin-right: 14px; }
#menu_haut > ul > li:last-child > a { padding: 11px 8px 10px !important; }
#menu_haut > ul > li:last-child .fa-search { font-size: 17px; color: var(--main-color); }
#menu_haut > ul > li:last-child:hover .fa-search { color: var(--second-color); }

/* --- alternance gris clair / blanc : plus aucun bloc gris fonce hors en-tete et pied --- */
.services-chopper { background: #fff !important; }
.services-chopper .section-title h2 { color: var(--second-color) !important; }
.services-chopper .picto h4 { color: var(--main-color) !important; }
.services-chopper .picto p  { color: #5a5a5a !important; }
.marque_section { background: #f4f6f7 !important; }
.secteurs       { background: #fff !important; }
.picto_sec      { background: #f4f6f7 !important; }
.best_vente     { background: #fff !important; }
.devis-chopper  { background: #f4f6f7 !important; }
.devis-chopper .section-title h2 { color: var(--main-color) !important; }
.devis-chopper .devis-txt, .devis-chopper .devis-txt * { color: #444 !important; }
.devis-chopper .devis-cta .button { background: var(--main-color) !important; }
.devis-chopper .devis-cta .button span { color: #fff !important; }
.devis-chopper .devis-cta .button:hover { background: var(--second-color) !important; }

/* la mention reseau tenait sur 4 lignes */
.left-top-header p { white-space: nowrap; margin: 0; font-size: 12.5px; }
.left-top-header { flex: 0 0 auto; }
.center-top { flex-wrap: nowrap; }
.right-top-header { display: flex; align-items: center; justify-content: flex-end; flex: 1 1 auto; }

/* accroche des marques remontee sous le titre et agrandie (demande cliente) */
.marque_section .accroche-haut { flex: 0 0 100%; text-align: center; font-size: 18px !important;
  font-weight: 500; color: var(--main-color); margin: -18px 0 26px !important; padding: 0 20px; }
.marque_section .ctn-btn-marque .button { margin-bottom: 0 !important; }
.marque_section .ctn-btn-marque { padding-bottom: 0 !important; }

/* --- pied de page : logo Chopper vertical a gauche de l'adresse, EPI a droite --- */
/* [CHOPPER 10/09/2026] logo vertical A GAUCHE, adresse A SA DROITE.
   Le gabarit pose deja "flex img{margin-right:25px}" et
   "bloc-infos{width:calc(100% - 147px)}" avec flex-wrap:wrap : ajouter un gap
   faisait depasser 100% et l'adresse repassait SOUS le logo. */
#pied #conteneur_pied .col.flex { display: flex; flex-wrap: nowrap; align-items: flex-start; gap: 0; }
#pied #conteneur_pied .col.flex > a { flex: 0 0 auto; }
#pied #conteneur_pied .col.flex img.logo_texte { width: auto; height: 100px; margin-right: 20px; }
#pied #conteneur_pied .col.flex .bloc-infos { width: auto; flex: 1 1 auto; }
/* [15/09 V2] logo EPI dans sa propre colonne (a droite de "Liens utiles"), empile */
#pied .epi-pied { margin-top: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; }
#pied .epi-pied img { width: 130px; height: auto; }
#pied .epi-pied span { font-size: 12px; color: #b6b6b6; line-height: 1.3; text-align: center; }

/* [15/09 V2] "harmoniser la largeur des colonnes" : 3 colonnes bootstrap de 380px dont le
   contenu, aligne a gauche et de largeur tres variable, laissait des ecarts irreguliers.
   Desktop : 4 blocs a la largeur de leur contenu, ESPACEMENT EGAL entre eux.
   /!\ le clearfix #conteneur_pied:after deviendrait un 5e element flex et fausserait
   la repartition : on le neutralise. En mobile, empilement du theme inchange. */
@media screen and (min-width: 992px) {
  #pied #conteneur_pied { display: flex; justify-content: space-between; align-items: flex-start; }
  #pied #conteneur_pied:after, #pied #conteneur_pied:before { content: none; display: none; }
  #pied #conteneur_pied > .col { float: none; width: auto; flex: 0 0 auto; padding-left: 0; padding-right: 0; margin: 0; }
}

/* page pret-a-porter : intro pleine largeur + accroche mise en avant */
.chopper-contenu .ch-intro-pap { margin-bottom: 30px; }
/* [15/09 V2] accroche sur 2 lignes, fond noir et texte orange (demande cliente) */
.chopper-contenu .ch-accroche-forte { font-size: 19px !important; font-weight: 600; line-height: 1.6; text-align: center;
  color: var(--second-color) !important; background: var(--main-color); border: 0; border-radius: 6px;
  padding: 22px 28px !important; margin: 28px 0 !important; }


/* [CHOPPER 10/09/2026] logos de marques EN COULEURS (demande cliente).
   Le gabarit les desature (grayscale 100% + opacity .6) et ne les revele qu'au
   survol : on neutralise, en gardant un leger effet au survol. */
.owl-marque.owl-theme .owl-item img,
.owl-carousel.owl-marque .owl-item .item img { filter: none !important; opacity: 1 !important; }
.owl-carousel.owl-marque .owl-item .item:hover img { filter: none !important; opacity: 1 !important; transform: scale(1.05); }
.owl-carousel.owl-marque .owl-item .item img { transition: transform .25s ease; }

/* pictos Equipez-vous : toute la tuile est cliquable */
/* le lien s'intercale entre .picto (flex column center) et ses enfants :
   il doit reprendre le meme centrage, sinon image et titre se collent a gauche. */
.picto_sec .picto a.picto-lien { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; width: 100%; text-decoration: none; }
.picto_sec .picto a.picto-lien img { max-width: 45%; height: auto; }
.picto_sec .picto a.picto-lien h4 { text-align: center; width: 100%; }
.picto_sec .picto a.picto-lien h4 { transition: color .2s ease; }
.picto_sec .picto:hover { border-color: var(--second-color); }
.picto_sec .picto:hover a.picto-lien h4 { color: var(--second-color) !important; }
/* visuel des cartes produits cliquable */
.best_vente .bloc-services a.lien-visuel { display: block; }


/* ================== PAGE MON COMPTE (MDL_USER_LOGIN) ==================
   Balisage impose par le gabarit (aucune main dessus) :
     <a name=formIdentificationLog> + <table> avec 2 <td style="width:50%">
       td1 > form#formIdentificationLog > fieldset > legend + 4 <p>
       td2 > form#formCreationLog      > fieldset > legend + <p> VIDE + div.picto_inscription
   /!\ Le <h3> "Mon compte utilisateur" est masque pour CHOPPER (doublon avec le
   bandeau de page) : les regles du theme ancrees sur
   `a[name="formIdentificationLog"] + h3 + p + table` (l. ~5342 et ~7624) ne
   matchent donc PLUS. La mise en colonnes ET l'empilement mobile sont
   integralement reecrits ici -- ne pas compter sur le theme.
   Echelle px (cf. entete du bloc CHOPPER) : legende 14 / label 14 / champ 15. */

/* --- la table porteuse : 2 colonnes espacees, centrees --- */
#centreetdroite a[name="formIdentificationLog"] + table {
  max-width: 1170px; margin: 0 auto 30px;
  border-collapse: separate; border-spacing: 26px 0;
}
#centreetdroite a[name="formIdentificationLog"] + table > tbody > tr > td {
  width: 50%; padding: 0; vertical-align: top; border: 0;
  height: 1px; /* astuce : sans hauteur resolue sur le td, le height:100% des
                  cartes ne se resout pas et les 2 encarts ne s'egalisent pas */
}
#centreetdroite a[name="formIdentificationLog"] + table > tbody > tr > td > form { height: 100%; }
#formIdentificationLog, #formCreationLog { display: block; margin: 0; height: 100%; }

/* --- la carte --- */
#formIdentificationLog fieldset,
#formCreationLog fieldset {
  display: flex; flex-direction: column;
  margin: 0; padding: 0 0 22px; overflow: hidden;
  border: 1px solid #e3e6e8; border-radius: 8px; background: #fff;
  box-shadow: 0 2px 10px rgba(0,0,0,.04);
  height: 100%; box-sizing: border-box;
}
/* legende = bandeau d'en-tete pleine largeur (float indispensable : le gabarit
   la laisse en display legend, elle ne se comporte pas en item flex) */
#formIdentificationLog fieldset legend,
#formCreationLog fieldset legend {
  display: block; float: left; width: 100%; box-sizing: border-box;
  margin: 0 0 20px; padding: 13px 26px; border-radius: 0;
  background: var(--main-color); color: #fff;
  font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
}

/* --- contenu des cartes --- */
#formIdentificationLog fieldset > p,
#formCreationLog fieldset > p,
#formCreationLog fieldset > div {
  width: 100%; box-sizing: border-box; padding: 0 26px; margin: 0 0 16px;
}
#formIdentificationLog fieldset > p:empty,
#formCreationLog fieldset > p:empty { display: none; }
#formIdentificationLog fieldset > p:last-child { margin-bottom: 0; }

#formIdentificationLog fieldset label {
  display: block; margin-bottom: 6px;
  font-size: 14px; font-weight: 600; color: #5a5f63;
}
#formIdentificationLog fieldset input[type=text],
#formIdentificationLog fieldset input[type=password] {
  /* la carte fait ~560px : un champ pleine largeur serait disproportionne */
  width: 100%; max-width: 400px; box-sizing: border-box;
  padding: 11px 13px; border: 1px solid #d5d8db; border-radius: 4px;
  font-size: 15px; font-family: 'Roboto', sans-serif; background: #fff;
}
#formIdentificationLog fieldset input[type=text]:focus,
#formIdentificationLog fieldset input[type=password]:focus {
  border-color: var(--second-color); outline: none;
}
#formIdentificationLog fieldset input[type=submit] {
  background: var(--main-color); color: #fff; border: 0; border-radius: 4px;
  padding: 13px 34px; font-size: 14px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em; cursor: pointer;
  transition: background .2s ease;
}
#formIdentificationLog fieldset input[type=submit]:hover { background: var(--second-color); }
/* [15/09 V2] page inscription : "VALIDER et ANNULER de la meme taille".
   Le formulaire d'inscription reutilise l'id #formIdentificationLog : Valider y prenait le
   gros bouton ci-dessus, Annuler (reset) gardait le petit style global. Meme gabarit pour
   les deux, Annuler en version secondaire (contour). !important : le style global des
   input[type=submit/reset] force deja couleur, fond et taille en !important. */
#formIdentificationLog fieldset input[type=submit],
#formIdentificationLog fieldset input[type=reset] {
  box-sizing: border-box; min-width: 150px; height: 46px; margin: 0 10px 0 0;
  padding: 0 28px !important; border-radius: 4px; line-height: 44px !important;
  font-size: 14px !important; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  vertical-align: middle; cursor: pointer; transition: background .2s ease, color .2s ease;
}
#formIdentificationLog fieldset input[type=submit] { border: 1px solid var(--main-color) !important; }
#formIdentificationLog fieldset input[type=reset] {
  background: #fff !important; color: var(--main-color) !important; border: 1px solid var(--main-color) !important;
}
#formIdentificationLog fieldset input[type=reset]:hover { background: var(--main-color) !important; color: #fff !important; }

/* le gabarit transforme tout <a> de fieldset en gros bouton noir : on annule */
#formIdentificationLog fieldset a:not(.button),
#formCreationLog fieldset a:not(.button) {
  background: none !important; background-color: transparent !important;
  color: var(--second-color) !important; padding: 0 !important; margin: 0 !important;
  border: 0 !important; border-radius: 0 !important; width: auto !important;
  display: inline !important; text-transform: none !important; font-weight: 600;
}
#formIdentificationLog fieldset a:not(.button):hover { text-decoration: underline !important; }
/* /!\ SPECIFICITE : la regle anti-bouton ci-dessus
   `#formIdentificationLog fieldset a:not(.button)` pese (1,1,2) et bat
   `#formIdentificationLog a.lien-mdp-oublie` (1,1,1) MALGRE les !important
   (a !important egal, c'est la specificite qui tranche) -> le lien repassait
   en `display:inline` et remontait a cote du champ. Il faut (1,2,2). */
#formIdentificationLog fieldset a.lien-mdp-oublie {
  display: block !important; margin-top: 8px !important; font-size: 13px;
}

/* derniere ligne de la carte gauche : note d'aide, detachee du formulaire */
#formIdentificationLog fieldset > p:last-child {
  margin-top: 18px; padding-top: 14px; border-top: 1px solid #ececec;
  font-size: 13px; line-height: 1.6; color: #6a6f73;
}

/* --- carte droite : le gabarit ne sort qu'un lien nu --- */
#formCreationLog .picto_inscription {
  flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center;
  align-items: flex-start; margin-bottom: 0; text-align: left;
}
#formCreationLog .picto_inscription:before {
  content: "Cr\0000e9ez votre compte en quelques minutes pour suivre vos commandes et retrouver vos documents.";
  display: block; margin-bottom: 20px;
  font-size: 15px; line-height: 1.6; color: #444;
}
#formCreationLog fieldset .picto_inscription a {
  display: inline-block !important;
  background: var(--second-color) !important; color: #fff !important;
  padding: 13px 30px !important; border-radius: 4px;
  font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  text-decoration: none !important; transition: background .2s ease;
}
#formCreationLog fieldset .picto_inscription a:hover { background: var(--main-color) !important; }

/* --- empilement mobile (remplace les regles du theme, cassees par le h3 masque) --- */
@media screen and (max-width: 780px) {
  #centreetdroite a[name="formIdentificationLog"] + table,
  #centreetdroite a[name="formIdentificationLog"] + table > tbody,
  #centreetdroite a[name="formIdentificationLog"] + table > tbody > tr,
  #centreetdroite a[name="formIdentificationLog"] + table > tbody > tr > td {
    display: block; width: 100% !important; border-spacing: 0;
  }
  /* l'astuce height:1px du desktop ecraserait les td passes en display:block */
  #centreetdroite a[name="formIdentificationLog"] + table > tbody > tr > td { height: auto !important; }
  #centreetdroite a[name="formIdentificationLog"] + table > tbody > tr > td > form { height: auto; }
  #centreetdroite a[name="formIdentificationLog"] + table > tbody > tr > td + td { margin-top: 22px; }
  #formIdentificationLog, #formCreationLog { height: auto; }
  #formIdentificationLog fieldset, #formCreationLog fieldset { height: auto; }
  #formCreationLog .picto_inscription { padding-bottom: 4px; }
}

/* --- page "Votre mot de passe" (form#utilisateurPwd) : meme carte que la page
   Mon compte, dont elle est la continuite directe (lien "Mot de passe oublie ?"). --- */
#utilisateurPwd { max-width: 620px; margin: 0 auto 30px; }
#utilisateurPwd fieldset {
  margin: 0; padding: 0 0 28px; overflow: hidden;
  border: 1px solid #e3e6e8; border-radius: 8px; background: #fff;
  box-shadow: 0 2px 10px rgba(0,0,0,.04);
}
#utilisateurPwd fieldset legend {
  display: block; float: left; width: 100%; box-sizing: border-box;
  margin: 0 0 20px; padding: 13px 26px; border-radius: 0;
  background: var(--main-color); color: #fff;
  font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
}
#utilisateurPwd fieldset h4,
#utilisateurPwd fieldset p { padding: 0 28px; margin: 0 0 20px; }
#utilisateurPwd fieldset h4 {
  font-size: 16px; font-weight: 700; color: var(--main-color); text-transform: none;
}
#utilisateurPwd fieldset p { color: #444; font-size: 14px; line-height: 1.6; }
#utilisateurPwd fieldset p:last-child { margin-bottom: 0; }
#utilisateurPwd fieldset label {
  display: block; margin: 16px 0 6px; font-size: 14px; font-weight: 600; color: #5a5f63;
}
#utilisateurPwd fieldset input[type=text] {
  width: 100%; box-sizing: border-box;
  padding: 11px 13px; border: 1px solid #d5d8db; border-radius: 4px;
  font-size: 15px; font-family: 'Roboto', sans-serif; background: #fff;
}
#utilisateurPwd fieldset input[type=text]:focus { border-color: var(--second-color); outline: none; }
#utilisateurPwd fieldset input[type=submit] {
  background: var(--main-color); color: #fff; border: 0; border-radius: 4px;
  padding: 13px 34px; font-size: 14px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em; cursor: pointer; transition: background .2s ease;
}
#utilisateurPwd fieldset input[type=submit]:hover { background: var(--second-color); }
#utilisateurPwd fieldset em { font-size: 13px; color: #6a6f73; font-style: italic; }

/* ces 2 pages n'ont qu'un formulaire court : le padding-top:50px de #contenu
   (rythme general du site, l. ~2032) creuse un vide inutile sous le fil d'Ariane */
body:has(#formIdentificationLog) #contenu,
body:has(#utilisateurPwd) #contenu { padding-top: 26px; }

/* ===== Panneau de filtres des pages categorie (retours Helene 10/09) ===== */
.filtre_left h5 {
  margin: 0 0 16px; padding: 0 0 10px; border-bottom: 2px solid var(--second-color);
  font-size: 15px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--main-color);
}
/* lien "Reinitialiser les filtres" : bouton secondaire, sous le bouton valider.
   /!\ le gabarit transforme les <a> en gros bouton noir, d'ou les !important. */
.filtre_left .reinit-filtres { margin: 10px 0 0; }
.filtre_left .reinit-filtres a {
  display: inline-block !important; background: none !important; border: 1px solid #d5d8db !important;
  border-radius: 4px; padding: 9px 16px !important; margin: 0 !important;
  color: #5a5f63 !important; font-size: 13px; font-weight: 600; text-transform: none !important;
  text-decoration: none !important; width: auto !important; transition: all .2s ease;
}
.filtre_left .reinit-filtres a:hover {
  border-color: var(--second-color) !important; color: var(--second-color) !important;
}

/* ===================================================================
   [CHOPPER 22/09 V3] retours Helene du 22/09 (document "MODIFICATIONS 3")
   =================================================================== */

/* --- onglets : tous a la meme hauteur (la maison etait 3 px plus basse :
   sa boite de ligne faisait 17 px contre 20 px pour le texte des autres onglets) --- */
#menu_haut > ul > li.ACCUEIL > a span { height: 20px; }
#menu_haut > ul > li.ACCUEIL > a span i.fa-home { line-height: 20px; }

/* --- depuis l'ajout des onglets Compte + Panier (mode e-commerce, 21/09), le menu ne
   tenait plus sur une ligne a 1440 px : Sante et Pret-a-porter passaient sur 2 lignes.
   Ecrans moyens : onglets resserres. Et si un libelle passe malgre tout sur 2 lignes
   (1171-1400 px), TOUS les onglets prennent la meme hauteur (stretch) au lieu d'avoir
   des hauts decales. /!\ ne pas viser le lien .extend (bouton du menu mobile, masque). --- */
@media screen and (min-width: 1171px) {
  #menu_haut > ul { align-items: stretch; }
  #menu_haut > ul > li > a:not(.extend) { height: 100%; display: flex !important; align-items: center; justify-content: center; }
}
@media screen and (min-width: 1171px) and (max-width: 1599px) {
  #menu_haut > ul { gap: 4px; }
  #menu_haut > ul > li > a:not(.extend) { padding: 11px 10px 10px !important; }
  #menu_haut > ul > li > a span { font-size: 12px; }
  #menu_haut > ul > li.ch-onglet-icone > a { padding: 11px 10px 10px !important; }
}

/* --- loupe, compte, panier : de vrais onglets, icones NOIRES.
   La regle "li:last-child transparent" visait la loupe quand elle etait le dernier
   onglet ; depuis l'ajout de Compte et Panier (mode e-commerce) elle tombait sur le
   panier -> icone blanche sur fond transparent = invisible. --- */
#menu_haut > ul > li.ch-onglet-icone,
#menu_haut > ul > li.ch-onglet-icone:last-child {
  background: #eceff1; border: 1px solid #dcdfe1; border-bottom: 0; border-radius: 7px 7px 0 0; margin-right: 0;
}
#menu_haut > ul > li.ch-onglet-icone:last-child { margin-right: 14px; }
#menu_haut > ul > li.ch-onglet-icone > a { padding: 11px 14px 10px !important; }
#menu_haut > ul > li.ch-onglet-icone > a i,
#menu_haut > ul > li.ch-onglet-icone:last-child > a i { color: var(--main-color) !important; font-size: 17px; line-height: 20px; }
#menu_haut > ul > li.ch-onglet-icone:hover { background: var(--main-color); }
#menu_haut > ul > li.ch-onglet-icone:hover > a i { color: #fff !important; }

/* --- pied de page : 5 blocs VISUELS a espacement egal (logo Chopper, adresse,
   horaires, liens utiles, logo EPI). Le logo et l'adresse partageaient une meme
   colonne -> 20 px entre eux contre 127 px ailleurs. display:contents les fait
   devenir 2 elements flex distincts du conteneur. --- */
@media screen and (min-width: 992px) {
  #pied #conteneur_pied > .col.flex { display: contents; }
  #pied #conteneur_pied > .col.flex > a,
  #pied #conteneur_pied > .col.flex > .bloc-infos { flex: 0 0 auto; width: auto; }
  #pied #conteneur_pied .col.flex img.logo_texte { margin-right: 0; }
}
/* segments insecables des libelles d'onglets (coupure seulement apres les "/") */
#menu_haut .ch-nw { white-space: nowrap; }
@media screen and (min-width: 1171px) {
  #menu_haut > ul > li > a:not(.extend) span { text-align: center; }
}

/* --- page Connexion : les 2 cartes etaient ECRASEES sous Firefox (capture d'Helene).
   L'astuce "td{height:1px} + height:100%" egalise les cartes sous Chrome/Edge, mais
   Firefox resout le 100 % contre le 1px declare -> cartes de ~22 px, contenu coupe
   (overflow:hidden). Remplacee par du flex (egalisation par stretch, sans pourcentage). --- */
@media screen and (min-width: 781px) {
  #centreetdroite a[name="formIdentificationLog"] + table { display: block; border-spacing: 0; }
  #centreetdroite a[name="formIdentificationLog"] + table > tbody { display: block; }
  #centreetdroite a[name="formIdentificationLog"] + table > tbody > tr { display: flex; align-items: stretch; gap: 26px; }
  #centreetdroite a[name="formIdentificationLog"] + table > tbody > tr > td {
    display: flex; flex-direction: column; flex: 1 1 0; min-width: 0; width: auto !important; height: auto;
  }
  #centreetdroite a[name="formIdentificationLog"] + table > tbody > tr > td > form {
    flex: 1 1 auto; height: auto; display: flex; flex-direction: column;
  }
  #centreetdroite a[name="formIdentificationLog"] + table > tbody > tr > td > form > fieldset { flex: 1 1 auto; height: auto; }
}

/* --- inscription : oeil "afficher le mot de passe" DANS le champ, a droite --- */
/* la cellule fait exactement la largeur du champ : un oeil en ligne passait a la ligne.
   Il est pose en absolu sur le bord droit du champ (largeur du champ fixee ici).
   Pas de :has() (Firefox ESR 115 ne le connait pas). */
#formIdentificationLog table td { position: relative; }
#formIdentificationLog #str_password,
#formIdentificationLog #str_password_confirmation { width: 100%; max-width: 320px; box-sizing: border-box; padding-right: 38px; }
#formIdentificationLog .epi_toggle_pwd {
  position: absolute; z-index: 1; top: 0; left: calc(min(100%, 320px) - 36px);
  width: 34px; height: 35px; margin: 0 !important;
  display: flex; align-items: center; justify-content: center;
  color: #5a5f63; font-size: 16px; line-height: 1;
}
#formIdentificationLog .epi_toggle_pwd:hover { color: var(--second-color); }

/* [23/09 V3] Oeil sur le mot de passe de la page CONNEXION (demande TJ 23/09). Ce champ n'est pas
   celui de l'inscription : il porte l'id str_pswd et fait 400 px, d'ou un conteneur dedie qui sert
   de repere de position (le <p> parent contient aussi le libelle et "Mot de passe oublie ?"). */
#formIdentificationLog .ch-champ-mdp { position: relative; display: inline-block; width: 100%; max-width: 400px; vertical-align: middle; }
#formIdentificationLog .ch-champ-mdp #str_pswd { padding-right: 38px; }
#formIdentificationLog .ch-champ-mdp .epi_toggle_pwd { left: auto; right: 2px; top: 0; height: 100%; }


/* --- inscription : "formulaire de contact" doit se voir comme un lien --- */
#formIdentificationLog p.petit a { color: var(--second-color) !important; text-decoration: underline !important; font-weight: 600; }
#formIdentificationLog p.petit a:hover { color: var(--main-color) !important; }

/* --- Mon compte : "Me deconnecter", "Modifier mes informations" (majuscule initiale seule ;
   le gabarit mettait une capitale a chaque mot : "Me Deconnecter") --- */
.fiche-compte .btn-compte, .btn-compte { text-transform: none !important; }
.fiche-compte .btn-compte::first-letter, .btn-compte::first-letter { text-transform: uppercase; }

/* --- panier : compteur d'etapes "1/4" supprime (demande cliente) --- */
.mdlPanier .counter, .relative_panier .counter { display: none !important; }

/* --- etape Coordonnees : message "Vous ne pouvez passer a l'etape suivante car..." bien visible :
   texte orange sur fond noir. Le <ul> est dans un <p> (HTML invalide) : le navigateur ferme le <p>
   avant la liste, d'ou le style pose sur le conteneur .blocAlerte. --- */
.mdlPanier .blocAlerte { background: var(--main-color); color: var(--second-color); border: 0; border-radius: 6px; padding: 16px 22px; margin: 0 0 22px; }
.mdlPanier .blocAlerte p, .mdlPanier .blocAlerte p.alerte,
.mdlPanier .blocAlerte ul, .mdlPanier .blocAlerte li, .mdlPanier .blocAlerte li strong { color: var(--second-color) !important; background: transparent; font-size: 15px; font-weight: 600; margin: 0; }
.mdlPanier .blocAlerte ul { margin: 6px 0 0 18px; padding: 0; }

/* --- code promo : libelle unique, champ a DROITE du texte (et non sur toute la ligne dessous) --- */
.choix_avoir label.ch-code-promo { display: inline-block; margin: 0 12px 0 0; font-weight: 600; vertical-align: middle; }
#contenu .choix_avoir label.ch-code-promo + #str_code_promo,
#centreetdroite .choix_avoir label.ch-code-promo + #str_code_promo { display: inline-block; width: 220px !important; max-width: 100%; vertical-align: middle; }

/* --- page de confirmation : liens mis en avant --- */
.ch-confirmation p { margin: 0 0 10px; font-size: 15px; }
.ch-confirmation p.ch-conf-num { margin-top: 10px; font-size: 17px; }
.ch-confirmation a.ch-lien-fort { color: var(--second-color) !important; font-weight: 700; text-decoration: underline !important; }
.ch-confirmation a.ch-lien-fort:hover { color: var(--main-color) !important; }

/* --- plan du site (_includes/SIT_CHOPPER/plan_site.inc.php) : 3 blocs en colonnes --- */
.ch-plan { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin: 10px 0 40px; }
.ch-plan-bloc { background: #fff; border: 1px solid #e3e6e8; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 10px rgba(0,0,0,.04); }
.ch-plan-bloc h3 { margin: 0 !important; padding: 13px 22px !important; background: var(--main-color); color: #fff !important;
  font-size: 14px !important; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; border: 0 !important; }
.ch-plan-bloc ul { list-style: none; margin: 0; padding: 14px 22px 18px; }
.ch-plan-bloc li { margin: 0; padding: 7px 0; border-bottom: 1px solid #f0f1f2; list-style: none; }
.ch-plan-bloc li:last-child { border-bottom: 0; }
.ch-plan-bloc li:before { content: "\203A"; color: var(--second-color); font-weight: 700; margin-right: 9px; }
.ch-plan-bloc li a { color: var(--main-color) !important; font-size: 15px; text-decoration: none !important; }
.ch-plan-bloc li a:hover { color: var(--second-color) !important; }
@media screen and (max-width: 991px) { .ch-plan { grid-template-columns: 1fr; } }

/* --- page Personnalisation : titre du bandeau sur 2 lignes (la 2e ligne, longue, passait sur 3) --- */
@media screen and (min-width: 1171px) {
  body.PGS_SPECIALE_5 .page-heading .page-title h2 { font-size: 40px; line-height: 50px; }
}

/* --- categorie Pret-a-porter/Sport (1012) : intro + lien vers les catalogues (en-tete de page) --- */
.categorie_intro_seo .ch-pap-cat .ch-accroche-forte { margin: 20px 0 !important; }
.categorie_intro_seo .ch-cta-catalogues { display: flex; flex-wrap: wrap; gap: 12px; margin: 6px 0 10px; justify-content: center; } /* [06/10/2026] boutons centres (demande Helene) */
.categorie_intro_seo .ch-cta-catalogues a.button { margin: 0 !important; }
.categorie_intro_seo .ch-cta-catalogues a.ch-btn-sec { background: #fff !important; border: 2px solid var(--main-color) !important; }
.categorie_intro_seo .ch-cta-catalogues a.ch-btn-sec span { color: var(--main-color) !important; }
.categorie_intro_seo .ch-cta-catalogues a.ch-btn-sec:hover { background: var(--main-color) !important; }
.categorie_intro_seo .ch-cta-catalogues a.ch-btn-sec:hover span { color: #fff !important; }

/* --- page Catalogues : apercu des catalogues pret-a-porter (PDF dans la fiche, comme les
   flipbooks EPI Center) --- */
.ch-apercu-pdf { position: relative; width: 100%; height: 80vh; min-height: 520px; margin: 10px 0 20px; background: #f4f6f7; border: 1px solid #e3e6e8; border-radius: 6px; overflow: hidden; }
.ch-apercu-pdf iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.ch-apercu-lien a { color: var(--second-color) !important; font-weight: 700; text-decoration: underline !important; }

/* ===== [22/09 V3] plateforme d assistance (questions) : fusion de retour2_0922/css_tickets.css ===== */
/* ==========================================================================
   CHOPPER - plateforme d'assistance (Mon compte > questions) - retours 22/09
   Portee : UNIQUEMENT l'enveloppe .ticket-chopper, emise par
   _includes/mdl/lib.ticket.inc.php pour SIT_CHOPPER seulement :
     - .ticket-chopper-liste : Liste de mes questions (1194--211)
     - .ticket-chopper-fiche : Poser une question (1194--212) et Question N... (1194-<id>-212)
   Aucune autre page du compte ne porte cette classe.
   ========================================================================== */

/* 1, 4, 9 - contenu centre dans la largeur du site (comme div.paragraphe) + espace avant le pied (8) */
body.PGS_COMPTE .ticket-chopper {
    max-width: 1170px;
    width: 100%;
    margin: 0 auto;
    padding: 30px 0 60px;
    box-sizing: border-box;
    color: #222;
    font-size: 16px;
}
body.PGS_COMPTE .ticket-chopper *,
body.PGS_COMPTE .ticket-chopper *::before,
body.PGS_COMPTE .ticket-chopper *::after {
    box-sizing: border-box;
}

/* 2, 9 - boutons "Poser une question" / "Retour a la liste des questions" centres, style bouton du site */
body.PGS_COMPTE .ticket-chopper .creat_ticket,
body.PGS_COMPTE .ticket-chopper .btn_top {
    text-align: center;
    margin: 0 0 30px;
}
body.PGS_COMPTE .ticket-chopper .btn-compte,
body.PGS_COMPTE .ticket-chopper a.ticket-consulter,
body.PGS_COMPTE .ticket-chopper input[type="submit"] {
    display: inline-block;
    width: auto;
    margin: 0;
    padding: 10px 25px;
    font-size: 16px !important;
    line-height: 20px;
    font-weight: normal;
    text-transform: none !important;
    text-decoration: none !important;
    color: #fff !important;
    background-color: var(--main-color) !important;
    border: 1px solid var(--second-color);
    border-radius: 0;
    cursor: pointer;
    transition: background-color .3s ease;
}
body.PGS_COMPTE .ticket-chopper .btn-compte:hover,
body.PGS_COMPTE .ticket-chopper .btn-compte:focus,
body.PGS_COMPTE .ticket-chopper a.ticket-consulter:hover,
body.PGS_COMPTE .ticket-chopper a.ticket-consulter:focus,
body.PGS_COMPTE .ticket-chopper input[type="submit"]:hover,
body.PGS_COMPTE .ticket-chopper input[type="submit"]:focus {
    background-color: var(--second-color) !important;
    color: #fff !important;
}

/* Titres de section (Question N..., Ecrire un message, Discussion en cours) */
body.PGS_COMPTE .ticket-chopper .sugg h3 {
    margin: 0 0 20px;
    padding-bottom: 10px;
}
body.PGS_COMPTE .ticket-chopper .ticket-introuvable {
    text-align: center;
    margin: 20px 0 30px;
}

/* ---------------------------------------------------------------- Liste (3) */
body.PGS_COMPTE .ticket-chopper .list_commande {
    width: 100%;
    border-collapse: collapse;
}
body.PGS_COMPTE .ticket-chopper .list_commande a {
    color: #222;
}
body.PGS_COMPTE .ticket-chopper tr.ticket-ligne {
    cursor: pointer;
    transition: background-color .2s ease;
}
body.PGS_COMPTE .ticket-chopper tr.ticket-ligne:hover {
    background-color: #f6f6f6;
}
body.PGS_COMPTE .ticket-chopper tr.ticket-ligne:hover td:nth-child(3) a,
body.PGS_COMPTE .ticket-chopper tr.ticket-ligne td a:hover {
    color: var(--second-color);
}
body.PGS_COMPTE .ticket-chopper td.ticket-td-consulter {
    text-align: center;
    white-space: nowrap;
}
body.PGS_COMPTE .ticket-chopper a.ticket-consulter {
    padding: 6px 14px;
    font-size: 14px !important;
    color: #fff !important;
}

/* ----------------------------------------- Formulaires (creation 4-8, reponse) */
body.PGS_COMPTE .ticket-chopper .message_sugg {
    display: block;
    width: 100%;
    max-width: 760px;
}
body.PGS_COMPTE .ticket-chopper .message_sugg label {
    margin-bottom: 6px;
    font-weight: bold;
}
body.PGS_COMPTE .ticket-chopper .message_sugg .group_form {
    margin-bottom: 20px;
}
body.PGS_COMPTE .ticket-chopper .message_sugg textarea {
    display: block;
    width: 100%;
    min-height: 150px;
}
/* formulaire de reponse : la zone de texte n'est pas dans un .group_form -> espace avant "Valider"
   (le site impose margin-bottom:0 !important aux champs) */
body.PGS_COMPTE .ticket-chopper .message_sugg form > textarea {
    margin-bottom: 20px !important;
}

/* 6 - 4 pieces jointes en 2 lignes de 2 champs */
body.PGS_COMPTE .ticket-chopper .ticket-pj-grille {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 20px;
}
body.PGS_COMPTE .ticket-chopper .ticket-pj-grille p {
    margin: 0 !important;
    padding: 10px;
    font-size: 0 !important; /* neutralise le &nbsp; genere apres chaque champ (#centreetdroite p impose 14px) */
    line-height: 0 !important;
    border: 1px dashed #ccc;
    background-color: #fafafa;
    overflow: hidden;
}
body.PGS_COMPTE .ticket-chopper .ticket-pj-grille input[type="file"] {
    display: block;
    width: 100%;
    max-width: 100%;
    font-size: 14px;
    line-height: 1.4;
}

/* ----------------------------------------------------- Fiche d'une question (9) */
body.PGS_COMPTE .ticket-chopper .block_sugg {
    margin-bottom: 30px;
}
body.PGS_COMPTE .ticket-chopper .info_joueur {
    padding: 10px 15px;
}
body.PGS_COMPTE .ticket-chopper .info_joueur td {
    padding: 6px 10px 6px 0;
    vertical-align: top;
}
body.PGS_COMPTE .ticket-chopper .info_joueur label {
    width: 250px;
    padding-right: 15px;
    margin: 0;
    font-weight: bold;
}
body.PGS_COMPTE .ticket-chopper .message_sugg + h3 {
    margin-top: 40px;
}

/* 10 - discussion : messages lisibles en entier */
body.PGS_COMPTE .ticket-chopper .block_message {
    margin-bottom: 15px;
}
body.PGS_COMPTE .ticket-chopper .entete_message {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 4px 15px;
    background-color: #f6f6f6;
}
body.PGS_COMPTE .ticket-chopper .entete_message span {
    display: block;
    width: auto;
}
body.PGS_COMPTE .ticket-chopper .content_message {
    line-height: 1.5;
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* ------------------------------------------------------------------ Tablette */
@media screen and (max-width: 1200px) {
    body.PGS_COMPTE .ticket-chopper {
        padding: 20px 20px 50px;
    }
}

/* ------------------------------------------------------------------- Mobile */
@media screen and (max-width: 780px) {
    /* chaque question = une carte (le tableau est deja "empile" par le site sous 780 px) */
    body.PGS_COMPTE .ticket-chopper .list_commande {
        border: 0 !important;
    }
    body.PGS_COMPTE .ticket-chopper .list_commande > tbody > tr.ticket-ligne {
        margin-bottom: 15px;
        padding: 10px 12px;
        border: 1px solid #ddd !important;
    }
    body.PGS_COMPTE .ticket-chopper .list_commande td {
        padding: 4px 0 !important;
        border: 0 !important;
    }
    body.PGS_COMPTE .ticket-chopper .list_commande .label-resp {
        width: 140px;
        vertical-align: top;
    }
    body.PGS_COMPTE .ticket-chopper td.ticket-td-consulter {
        text-align: left;
        padding-top: 10px !important;
    }
    /* fiche : le tableau d'informations debordait (page plus large que l'ecran) */
    body.PGS_COMPTE .ticket-chopper .info_joueur table,
    body.PGS_COMPTE .ticket-chopper .info_joueur tbody,
    body.PGS_COMPTE .ticket-chopper .info_joueur tr,
    body.PGS_COMPTE .ticket-chopper .info_joueur td {
        display: block;
        width: 100% !important;
    }
    body.PGS_COMPTE .ticket-chopper .info_joueur td {
        padding: 5px 0;
    }
    body.PGS_COMPTE .ticket-chopper .info_joueur label {
        display: block;
        width: auto;
        padding-right: 0;
    }
}
@media screen and (max-width: 560px) {
    body.PGS_COMPTE .ticket-chopper .ticket-pj-grille {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* --- fiche d'un catalogue CHOPPER (page Catalogues > fiche) : le module est inclus SANS conteneur
   (contenu colle au bord gauche). Centrage sur la largeur du site.
   /!\ NE PAS etendre aux fiches EPI Center (flipbook en iframe position:absolute) : leur liseuse
   s'ecrase si on touche au padding/largeur de #contenu_scroller (teste le 22/09).
   :has() absent de Firefox < 121 : la page garde alors l'ancien rendu (pas de casse). --- */
#contenu_scroller:has(> .ch-apercu-pdf) { max-width: 1170px; margin: 0 auto; padding: 30px 15px 50px; box-sizing: border-box; }
/* catalogues Chopper : en desktop l'apercu remplace la grande couverture */
#contenu_scroller:has(> .ch-apercu-pdf) > p:first-child img { display: none; }
.ch-apercu-lien { margin: 0 0 12px; }
@media screen and (max-width: 780px) {
  /* mobile : un PDF integre s'affiche mal (Android : rien, iOS : 1re page) -> couverture + bouton */
  .ch-apercu-pdf { display: none; }
  #contenu_scroller:has(> .ch-apercu-pdf) > p:first-child img { display: block; max-width: 70%; height: auto; margin: 0 auto 16px; }
  .ch-apercu-lien { text-align: center; }
  .ch-apercu-lien a { display: inline-block; background: var(--main-color); color: #fff !important; text-decoration: none !important; padding: 12px 18px; border-radius: 4px; }
}

/* --- page "Modifier mes informations" (Mon compte > MDL_USER_EDITION) : le module est inclus
   sans conteneur -> formulaire sur 100 % de l'ecran (remarque TJ 22/09). Centrage + carte,
   meme habillage que le formulaire d'inscription. --- */
#contenu_scroller > .edit_user { max-width: 1170px; margin: 0 auto; padding: 30px 15px 50px; box-sizing: border-box; }
.edit_user #formCreationInscription fieldset {
  margin: 0; padding: 0 0 22px; border: 1px solid #e3e6e8; border-radius: 8px; background: #fff;
  box-shadow: 0 2px 10px rgba(0,0,0,.04); overflow: hidden;
}
.edit_user #formCreationInscription fieldset legend {
  display: block; float: left; width: 100%; box-sizing: border-box; margin: 0 0 16px; padding: 13px 26px;
  background: var(--main-color); color: #fff; font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; border: 0;
}
.edit_user #formCreationInscription fieldset > p,
.edit_user #formCreationInscription .block_form_insc { clear: both; padding: 0 26px; }
.edit_user #formCreationInscription .block_form_insc { border: 0; }
@media screen and (max-width: 780px) {
  #contenu_scroller > .edit_user { padding: 20px 12px 40px; }
  .edit_user #formCreationInscription fieldset > p, .edit_user #formCreationInscription .block_form_insc { padding: 0 14px; }
}

/* --- Mon compte > Mes commandes (liste) et fiche d'une commande : modules inclus sans
   conteneur, donc sur 100 % de l'ecran (meme cause que la page de modification).
   [29/09/2026] Le centrage de la fiche n'est PLUS limite a body.PGS_COMPTE : apres un
   paiement, Monetico renvoie le client sur la page PANIER (url_retour_ok construite sur
   PGS_PANIER, lib.payement.inc.php:383-385), donc sur body.PGS_PANIER, ou la fiche
   s'affichait sur toute la largeur de l'ecran. Le selecteur d'enfant direct suffit a ne
   viser que la fiche rendue en pleine page. --- */
body.PGS_COMPTE #contenu_scroller > table.list_commande { width: calc(100% - 30px); max-width: 1170px; margin: 30px auto 60px; }
#contenu_scroller > .fiche_commande { max-width: 1170px; margin: 0 auto; padding: 30px 15px 60px; box-sizing: border-box; }
@media screen and (max-width: 780px) {
  /* fiche commande en mobile : les tableaux "Ma commande / Mes coordonnees" debordaient de 57 px */
  .fiche_commande table.global_panier { width: 100% !important; }
  .fiche_commande table.panier { width: 100% !important; table-layout: fixed; }
  .fiche_commande table.panier td, .fiche_commande table.panier th { overflow-wrap: anywhere; word-break: break-word; }
}

/* ============================================================================
   [CHOPPER 25/09 V4] Retour d'Helene : trois liens ne ressemblaient pas a des
   liens, et les deux cartes de l'etape Coordonnees se touchaient.
   ============================================================================ */

/* 1. Page inscription : "Vous avez deja un compte ? Connectez-vous."
   Le <h4> herite de l'orange des titres ; la cliente veut la phrase en noir et
   le seul "Connectez-vous" en orange souligne. Le h4 "INFORMATIONS" n'a pas de
   lien, d'ou le :has(a) qui ne vise que celui-ci. */
#formIdentificationLog h4:has(a) { color: #141414 !important; font-weight: 400; }
#formIdentificationLog h4:has(a) a {
  color: var(--second-color) !important; text-decoration: underline !important; font-weight: 600;
}
#formIdentificationLog h4:has(a) a:hover { color: var(--main-color) !important; }

/* 2. Formulaire de contact, ecran de confirmation : "Retour au formulaire" etait
   un lien nu. L'ancre "#formulaire_<id>" ne designe que ce lien de retour, le
   formulaire lui-meme n'en a pas. */
.mdl_formulaire a[href*="#formulaire_"] {
  color: var(--second-color) !important; text-decoration: underline !important; font-weight: 600;
}
.mdl_formulaire a[href*="#formulaire_"]:hover { color: var(--main-color) !important; }

/* 3. Tunnel, etape Coordonnees. Le module de connexion y est rendu DANS le
   formulaire du panier (form[name=mdl_panier_form]) et non dans
   #formIdentificationLog : aucune des regles de la page Connexion ne s'y
   appliquait. On vise la ligne qui porte le champ de login, ce qui ne peut
   atteindre aucune autre etape du tunnel. */
/* L'espacement est pose sur les cellules et non sur les fieldsets : la carte de
   gauche est un <fieldset> direct, celle de droite est enveloppee dans un <form>. */
body.PGS_PANIER .mdlPanier tr:has(input[name="str_login"]) > td:first-child { padding-right: 13px; }
body.PGS_PANIER .mdlPanier tr:has(input[name="str_login"]) > td + td { padding-left: 13px; }
body.PGS_PANIER .mdlPanier tr:has(input[name="str_login"]) a[href*="-contact.html"],
body.PGS_PANIER .mdlPanier tr:has(input[name="str_login"]) a[href^="mailto:"] {
  color: var(--second-color) !important; text-decoration: underline !important; font-weight: 600;
}
body.PGS_PANIER .mdlPanier tr:has(input[name="str_login"]) a[href*="-contact.html"]:hover,
body.PGS_PANIER .mdlPanier tr:has(input[name="str_login"]) a[href^="mailto:"]:hover {
  color: var(--main-color) !important;
}

/* [CHOPPER 25/09 V4] Acceptation des CGV, etape Coordonnees du tunnel. */
.mdlPanier p.ch-cgv { margin: 18px 0 14px !important; display: flex; align-items: flex-start; gap: 9px; font-size: 14px; }
.mdlPanier p.ch-cgv input[type=checkbox] { width: 17px; height: 17px; margin: 1px 0 0 !important; flex: 0 0 auto; accent-color: var(--second-color); cursor: pointer; }
.mdlPanier p.ch-cgv label { margin: 0 !important; font-weight: 400; line-height: 1.4; cursor: pointer; }
.mdlPanier p.ch-cgv label a { color: var(--second-color) !important; text-decoration: underline !important; font-weight: 600; }
.mdlPanier p.ch-cgv label a:hover { color: var(--main-color) !important; }



/* ===== [CHOPPER 28/09] TUNNEL, ETAPE COORDONNEES : la meme carte de connexion
   que la page Mon compte ====================================================
   CONSTAT : dans le tunnel, la carte gauche etait nue (titre en gras sur fond blanc,
   champs pleine largeur, petit bouton, oeil du mot de passe echappe a cote du lien
   "Mot de passe oublie ?") alors que la carte droite etait, elle, bien stylee.
   CAUSE : le module de connexion est rendu A L'INTERIEUR de form[name=mdl_panier_form].
   Les <form> imbriques sont interdits : l'analyseur HTML SUPPRIME la balise
   <form id="formIdentificationLog"> et remonte ses enfants -> le DOM du tunnel est
   `td > fieldset`, sans l'ancetre #formIdentificationLog. Aucune des regles du bloc
   "PAGE MON COMPTE" ci-dessus, toutes ancrees sur cet id, ne s'y applique. La carte
   droite y echappe parce que le </form> de la carte gauche libere le pointeur de
   formulaire de l'analyseur, qui accepte alors <form id="formCreationLog">.
   REPONSE : rejouer les memes regles sur `fieldset:has(#str_login)`, qui designe le
   meme fieldset dans les deux contextes. Le bloc est borne a body.PGS_PANIER : il ne
   peut toucher ni la page Mon compte ni la page Inscription.
   /!\ Ces regles DOUBLENT celles du bloc "PAGE MON COMPTE" : toute evolution
   de l'une doit etre reportee sur l'autre. */

/* les deux cellules s'egalisent en hauteur (meme astuce que la page Mon compte :
   sans hauteur resolue sur le td, le height:100% des cartes ne se resout pas) */
body.PGS_PANIER .mdlPanier tr:has(input[name="str_login"]) > td { vertical-align: top; height: 1px; }
body.PGS_PANIER .mdlPanier tr:has(input[name="str_login"]) > td > form { height: 100%; }

/* --- la carte --- */
body.PGS_PANIER .mdlPanier fieldset:has(#str_login) {
  display: flex; flex-direction: column;
  margin: 0; padding: 0 0 22px; overflow: hidden;
  border: 1px solid #e3e6e8; border-radius: 8px; background: #fff;
  box-shadow: 0 2px 10px rgba(0,0,0,.04);
  height: 100%; box-sizing: border-box;
}
body.PGS_PANIER .mdlPanier fieldset:has(#str_login) > legend {
  display: block; float: left; width: 100%; box-sizing: border-box;
  margin: 0 0 20px; padding: 13px 26px; border-radius: 0; border: 0;
  background: var(--main-color); color: #fff;
  font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
}
body.PGS_PANIER .mdlPanier fieldset:has(#str_login) > p {
  width: 100%; box-sizing: border-box; padding: 0 26px; margin: 0 0 16px;
}
body.PGS_PANIER .mdlPanier fieldset:has(#str_login) > p:empty { display: none; }

/* --- champs --- */
body.PGS_PANIER .mdlPanier fieldset:has(#str_login) label {
  display: block; margin-bottom: 6px;
  font-size: 14px; font-weight: 600; color: #5a5f63;
}
body.PGS_PANIER .mdlPanier fieldset:has(#str_login) input[type=text],
body.PGS_PANIER .mdlPanier fieldset:has(#str_login) input[type=password] {
  width: 100%; max-width: 400px; box-sizing: border-box;
  padding: 11px 13px; border: 1px solid #d5d8db; border-radius: 4px;
  font-size: 15px; font-family: 'Roboto', sans-serif; background: #fff;
}
body.PGS_PANIER .mdlPanier fieldset:has(#str_login) input[type=text]:focus,
body.PGS_PANIER .mdlPanier fieldset:has(#str_login) input[type=password]:focus {
  border-color: var(--second-color); outline: none;
}
/* l'oeil : sans position:relative sur l'enveloppe, l'icone absolue s'echappait et
   venait se coller devant "Mot de passe oublie ?" */
body.PGS_PANIER .mdlPanier fieldset:has(#str_login) .ch-champ-mdp {
  position: relative; display: inline-block; width: 100%; max-width: 400px; vertical-align: middle;
}
body.PGS_PANIER .mdlPanier fieldset:has(#str_login) .ch-champ-mdp #str_pswd { padding-right: 38px; }
/* la bascule elle-meme n'etait pas non plus positionnee : sa regle de base
   (#formIdentificationLog .epi_toggle_pwd) ne matche pas davantage dans le tunnel,
   l'icone restait en flux et tombait sous le champ. */
body.PGS_PANIER .mdlPanier fieldset:has(#str_login) .epi_toggle_pwd {
  position: absolute; z-index: 1; top: 0; left: auto; right: 2px; height: 100%;
  width: 34px; margin: 0 !important;
  display: flex; align-items: center; justify-content: center;
  color: #5a5f63; font-size: 16px; line-height: 1; cursor: pointer;
}
body.PGS_PANIER .mdlPanier fieldset:has(#str_login) .epi_toggle_pwd:hover { color: var(--second-color); }

/* --- bouton Valider --- */
body.PGS_PANIER .mdlPanier fieldset:has(#str_login) input[type=submit] {
  box-sizing: border-box; min-width: 150px; height: 46px; margin: 0;
  background: var(--main-color) !important; color: #fff !important;
  border: 1px solid var(--main-color) !important; border-radius: 4px;
  padding: 0 28px !important; line-height: 44px !important;
  font-size: 14px !important; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  cursor: pointer; transition: background .2s ease;
}
body.PGS_PANIER .mdlPanier fieldset:has(#str_login) input[type=submit]:hover {
  background: var(--second-color) !important; border-color: var(--second-color) !important;
}

/* --- liens : le gabarit transforme tout <a> de fieldset en gros bouton noir --- */
body.PGS_PANIER .mdlPanier fieldset:has(#str_login) a:not(.button) {
  background: none !important; background-color: transparent !important;
  color: var(--second-color) !important; padding: 0 !important; margin: 0 !important;
  border: 0 !important; border-radius: 0 !important; width: auto !important;
  display: inline !important; text-transform: none !important; font-weight: 600;
}
body.PGS_PANIER .mdlPanier fieldset:has(#str_login) a:not(.button):hover {
  color: var(--main-color) !important; text-decoration: underline !important;
}
/* meme piege de specificite qu'a la page Mon compte : la regle anti-bouton
   ci-dessus repasse le lien en display:inline, il remonte a cote du champ. */
body.PGS_PANIER .mdlPanier fieldset:has(#str_login) a.lien-mdp-oublie {
  display: block !important; margin-top: 8px !important; font-size: 13px;
}
/* derniere ligne : note d'aide, detachee du formulaire */
body.PGS_PANIER .mdlPanier fieldset:has(#str_login) > p:last-child {
  margin-top: 18px; margin-bottom: 0; padding-top: 14px; border-top: 1px solid #ececec;
  font-size: 13px; line-height: 1.6; color: #6a6f73;
}

/* --- empilement mobile, comme la page Mon compte --- */
@media screen and (max-width: 780px) {
  body.PGS_PANIER .mdlPanier tr:has(input[name="str_login"]),
  body.PGS_PANIER .mdlPanier tr:has(input[name="str_login"]) > td {
    display: block; width: 100% !important; height: auto !important;
    padding-left: 0 !important; padding-right: 0 !important;
  }
  body.PGS_PANIER .mdlPanier tr:has(input[name="str_login"]) > td + td { margin-top: 22px; }
  body.PGS_PANIER .mdlPanier tr:has(input[name="str_login"]) > td > form { height: auto; }
  body.PGS_PANIER .mdlPanier fieldset:has(#str_login) { height: auto; }
}


/* ==== Mode bon de commande (fiche produit des etablissements MARCHE / ENTREPRISE) ====
   Grille coloris x tailles rendue par ajouter_lien_commander_taille() (_includes/mdl/lib.panier.php).
   01/10/2026 : ce bloc manquait sur ce site, la grille s'affichait sans aucune mise en forme.
   La photo du coloris occupe la 1re colonne, les tailles s'alignent a droite et passent a la ligne
   si elles sont nombreuses. Couleur = --main-color du site. */
.btn_ajout_panier_new{
 margin:10px 0;
}
.list_taille {
 display:grid;
 grid-template-columns:120px repeat(auto-fill, minmax(64px, 84px));
 align-items:start;
 margin:0 0 10px;
 padding-bottom:10px;
 border-bottom:1px solid #e5e5e5;
 text-align:center;
}
.image_taille{
 grid-row:span 6;
 align-self:center;
 padding-right:10px;
 font-size:12px;
 line-height:1.3;
 text-align:center;
}
.image_taille img {
 height:80px!important;
 width:auto;
 max-width:100%;
 display:block;
 margin:0 auto 5px;
}
.block_taille{
 border:1px solid var(--main-color, #0f265c);
 font-size:14px;
 margin:5px;
}
.intitule_taille{
 background-color:var(--main-color, #0f265c);
 color:#fff;
 padding:4px 2px;
 font-weight:600;
}
.input_taille{
 padding:5px;
}
.input_taille input{
 width:100%;
 max-width:70px;
 text-align:center;
}
.add_multiple{
 padding:20px 0;
 text-align:center;
}
@media (max-width:767px){
 .list_taille{
  grid-template-columns:repeat(auto-fill, minmax(64px, 1fr));
 }
 .image_taille{
  grid-column:1 / -1;
  grid-row:auto;
  padding-right:0;
 }
}