@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

:root{
    /*
    Couleurs Solage
    #083B6C rgb(  8,  59, 108) hsl(209, 86.2%, 22.7%) bleu
    #E8517A rgb(232,  81, 122) hsl(344, 76.6%, 61.4%) rose
    #E8EDF1 rgb(232, 237, 241) hsl(207, 24.3%, 92.7%) bleu pale
    #FBEFF3 rgb(251, 239, 243) hsl(340,   60%, 96.1%) rose pale

    Couleurs familles
    sport beaute        #5B9AC4 rgb(91, 154, 196)   hsl(204, 47.1%, 56.3%)  bleu
    antiage antioxydant #B6C47F rgb(182, 196, 127)  hsl(72, 36.9%, 63.3%)   vert
    articulation os     #FFBB4D rgb(255, 187, 77)   hsl(37, 100%, 65.1%)    jaune
    gamme liposomale    #99C0FF rgb(153, 192, 255)  hsl(217, 100%, 80%)     bleu
    detox digestion     #68D1A4 rgb(104, 209, 164)  hsl(154, 53.3%, 61.4%)  vert
    packs synergie      #E68585 rgb(230, 133, 133)  hsl(0, 66%, 71.2%)      rouge
    mental sommeil      #B2A5F5 rgb(178, 165, 245)  hsl(250, 80%, 80.4%)    violet
    nutraceutiques      #60A86E rgb(96, 168, 110)   hsl(132, 29.3%, 51.8%)  vert
    coeur circulation   #FF667D rgb(255, 102, 125)  hsl(351, 100%, 70%)     rouge
    immunite confort    #A3C9CC rgb(163, 201, 204)  hsl(184, 28.7%, 72%)    turquoise
    */
    --color-primary:  hsl(209, 86.2%, 22.7%); --color-primary-light:  hsl(207, 24.3%, 92.7%); --color-primary-dark:  hsl(208, 86.2%, 11.4%); /* bleu #083B6C */
    --color-secondary:hsl(344, 76.6%, 61.4%); --color-secondary-light:hsl(339, 36%, 92%); --color-secondary-dark:hsl(342, 76.6%, 30.7%); /* rose #E8517A */

    --color-info:     hsl(209, 80%, 50%); --color-info-light:     hsl(209, 80%, 80%); --color-info-dark:     hsl(209, 80%, 25%);
    --color-warning:  hsl( 36, 80%, 50%); --color-warning-light:  hsl( 36, 80%, 80%); --color-warning-dark:  hsl( 36, 80%, 25%);
    --color-success:  hsl( 96, 80%, 50%); --color-success-light:  hsl( 96, 80%, 80%); --color-success-dark:  hsl( 96, 80%, 25%);
    --color-danger:   hsl(344, 80%, 50%); --color-danger-light:   hsl(344, 80%, 80%); --color-danger-dark:   hsl(344, 80%, 25%);

    --color-fam-articul:hsl( 37,  100%, 65.1%); --color-fam-articul-transp:hsla( 37,  100%, 65.1%, 0.66);
    --color-fam-coeur:  hsl(351,  100%,   70%); --color-fam-coeur-transp:  hsla(351,  100%,   70%, 0.66);
    --color-fam-sport:  hsl(204, 47.1%, 56.3%); --color-fam-sport-transp:  hsla(204, 47.1%, 56.3%, 0.66);
    --color-fam-antiage:hsl( 72, 36.9%, 63.3%); --color-fam-antiage-transp:hsla( 72, 36.9%, 63.3%, 0.66);
    --color-fam-liposo: hsl(217,  100%,   80%); --color-fam-liposo-transp: hsla(217,  100%,   80%, 0.66);
    --color-fam-detox:  hsl(154, 53.3%, 61.4%); --color-fam-detox-transp:  hsla(154, 53.3%, 61.4%, 0.66);
    --color-fam-syner:  hsl(  0,   66%, 71.2%); --color-fam-syner-transp:  hsla(  0,   66%, 71.2%, 0.66);
    --color-fam-mental: hsl(250,   80%, 80.4%); --color-fam-mental-transp: hsla(250,   80%, 80.4%, 0.66);
    --color-fam-nutra:  hsl(132, 29.3%, 51.8%); --color-fam-nutra-transp:  hsla(132, 29.3%, 51.8%, 0.66);
    --color-fam-immun:  hsl(184, 28.7%,   72%); --color-fam-immun-transp:  hsla(184, 28.7%,   72%, 0.66);

    --color-white:      #ffffff;
    --color-black:      #000000;
    --color-gray:       #6D6D6D; --color-gray-light:#929292; --color-gray-lighter:#B6B6B6; --color-gray-lightest:#DBDBDB; --color-gray-dark:#494949; --color-gray-darker:#242424;
    --color-text:       var(--color-primary);
    --color-text-medium:var(--color-gray);
    --color-text-light: var(--color-gray-light);
    --color-link:       var(--color-primary);
    --color-link-hover: var(--color-secondary-dark);
    --color-footer-bg:  var(--color-primary);
    --color-footer-text:var(--color-white);

    --font-family:      "Montserrat", sans-serif;
    --font-family-serif:"Montserrat", sans-serif;
    --font-family-title:"Montserrat", sans-serif;

    --font-size:16px;
    --font-size-small:14px;
}

body{
    font-family:var(--font-family);
    font-size:var(--font-size);
    font-weight:300;
    background:var(--color-white);
    color:var(--color-text);
    margin:0;
    padding:0;
}

::selection {
    background:var(--color-primary-dark);
    color:var(--color-white);
}
::-moz-selection{
    background:var(--color-primary-dark);
    color:var(--color-white);
}
::-webkit-scrollbar-track {
    background-color:var(--color-gray-lightest);
    box-shadow:inset 0 0 10px var(--color-primary);
    -webkit-box-shadow:inset 0 0 10px var(--color-primary);
}
::-webkit-scrollbar {
    background-color:var(--color-gray-lightest);
    width:10px;
}
::-webkit-scrollbar-thumb {
    background-color:var(--color-primary);
}

a{
    color:var(--color-link);
    transition:all 0.25s ease-in-out;
    font-weight:500;
}
a:hover, a:focus{
    color:var(--color-link-hover);
    text-decoration:underline;
}
a:focus,
*:focus,
.btn.active.focus,
.btn.active:focus,
.btn.focus,
.btn:active.focus,
.btn:active:focus,
.btn:focus{
    outline:1px dotted var(--color-secondary);
}
.btn.focus,
.btn:focus,
.btn:hover{
    box-shadow:none;
}

.form-control:focus{
    border-color:var(--color-primary);
}
input[type=checkbox]:focus,
input[type=file]:focus,
input[type=radio]:focus{
    outline:thin dotted;
}

.form-inline input[type=number].form-control{
    text-align:center;
}
.input-qte{
    max-width:200px;
}
.btn{
    border-radius:0 !important;
    font-weight:500;
}
.form-control{
    border-radius:0;
}

.h1, .h2, .h3, .h4, .h5, .h6,
h1, h2, h3, h4, h5, h6{
    font-family:var(--font-family-title);
    letter-spacing:inherit;
}

h1, h2, h3, h4, h5{
    font-weight:500;
    color:var(--color-secondary);
}
article h1,
article h2,
article h3{
    color:var(--color-primary);
}

p{
    font-family:var(--font-family);
    font-size:var(--font-size);
    font-weight:400;
}
li{
    font-weight:400;
}

blockquote{
    font-size:1em;
}

.ListeFiltreAttribut{
    display:none;
}
.open .ListeFiltreAttribut,
.open + .ListeFiltreAttribut{
    display:block;
}
legend.TitreFiltreAttribut{
    margin-bottom:10px;
    border:none;
    text-transform:none;
    color:var(--color-text);
    font-size:var(--font-size);
    font-weight:500;
    cursor:pointer;
}
.FiltreAttributs label{
    margin-bottom:4px;
    margin-left:8px;
    padding-left:3px;
}
.FiltreAttributs label:focus{
    outline:2px dotted var(--color-primary);
}

fieldset .TitreFiltreAttribut:after{
    margin:0;
    content:'\e9c5';
    font-family:icomoon;
	display:inline-block;
	width:14px;
	height:14px;
	margin:2px 0 2px 6px;
	text-align:center;
	font-weight:bold;
	font-size:14px;
}
fieldset.open > .TitreFiltreAttribut:after{
    content:'\e9c6';
}

@media (min-width:992px){
    .FiltreAttributs input[type=checkbox]{
        margin-top:2px;
    }
    .FiltreAttributs label{
        margin-bottom:7px;
    }
}

.navbar-toggle{
    background:transparent;
}
.navbar-toggle .icon-bar{
    background:var(--color-primary);
	-webkit-transition: all 0.2s;
	transition: all 0.2s;
}

.navbar-toggle .top-bar{
    transform:translate(3px) rotate(45deg);
    transform-origin:10% 10%;
}
.navbar-toggle .middle-bar{
    opacity:0;
}
.navbar-toggle .bottom-bar{
    transform:translate(3px) rotate(-45deg);
    transform-origin:10% 90%;
}
.navbar-toggle.collapsed .top-bar{
    transform:rotate(0);
}
.navbar-toggle.collapsed .middle-bar{
    opacity:1;
}
.navbar-toggle.collapsed .bottom-bar{
    transform:rotate(0);
}

.table > tbody > tr > td,
.table > tbody > tr > th,
.table > tfoot > tr > td,
.table > tfoot > tr > th,
.table > thead > tr > td,
.table > thead > tr > th{
    border-top-color:var(--color-white);
}

.table-striped > tbody > tr#TrCoordsBanc{
    background:none;
}

.alert-primary{
    background-color:var(--color-primary-light);
    border-color:var(--color-primary);
    color:var(--color-primary-dark);
}

.text-primary{
    color:var(--color-primary);
}

.bg-primary{
    color:var(--color-primary-dark);
    background-color:var(--color-primary-light);
}

.btn-primary{
    color:var(--color-white);
    border:1px solid var(--color-primary);
    background-color:var(--color-primary);
}

.btn-primary.disabled,
.btn-primary.disabled.active,
.btn-primary.disabled.focus,
.btn-primary.disabled:active,
.btn-primary.disabled:focus,
.btn-primary.disabled:hover,
.btn-primary[disabled],
.btn-primary[disabled].active,
.btn-primary[disabled].focus,
.btn-primary[disabled]:active,
.btn-primary[disabled]:focus,
.btn-primary[disabled]:hover,
fieldset[disabled] .btn-primary,
fieldset[disabled] .btn-primary.active,
fieldset[disabled] .btn-primary.focus,
fieldset[disabled] .btn-primary:active,
fieldset[disabled] .btn-primary:focus,
fieldset[disabled] .btn-primary:hover{
    color:var(--color-gray-light);
    border-color:var(--color-primary-dark);
    background-color:var(--color-primary);
}

a.text-primary:hover{
    color:var(--color-primary-dark);
}

a.bg-primary:hover{
    background-color:var(--color-primary-dark);
}

.btn-primary.active,
.btn-primary.focus,
.btn-primary:active,
.btn-primary:focus,
.btn-primary:hover,
.open>.dropdown-toggle.btn-primary,
.btn-primary.active.focus,
.btn-primary.active:focus,
.btn-primary.active:hover,
.btn-primary:active.focus,
.btn-primary:active:focus,
.btn-primary:active:hover,
.open>.dropdown-toggle.btn-primary.focus,
.open>.dropdown-toggle.btn-primary:focus,
.open>.dropdown-toggle.btn-primary:hover{
    color:var(--color-white);
    background-color:var(--color-primary-dark);
    border-color:var(--color-primary);
}



a.text-success:hover{
    color:var(--color-success-dark);
}

a.bg-success:hover{
    background-color:var(--color-success-light);
}

.text-success{
    color:var(--color-success-dark);
}

.bg-success{
    color:var(--color-success-dark);
    background-color:var(--color-success-light);
}

.alert-success{
    color:var(--color-success-dark);
    background-color:var(--color-success-light);
    border-color:var(--color-success);
}

.btn-success{
    color:var(--color-black);
    border-color:var(--color-success);
    background-color:var(--color-success);
}

.btn-success.active,
.btn-success.focus,
.btn-success:active,
.btn-success:focus,
.btn-success:hover,
.open>.dropdown-toggle.btn-success,
.btn-success.active.focus,
.btn-success.active:focus,
.btn-success.active:hover,
.btn-success:active.focus,
.btn-success:active:focus,
.btn-success:active:hover,
.open>.dropdown-toggle.btn-success.focus,
.open>.dropdown-toggle.btn-success:focus,
.open>.dropdown-toggle.btn-success:hover{
    color:var(--color-white);
    background-color:var(--color-success-dark);
    border-color:var(--color-success);
}


a.text-danger:hover{
    color:var(--color-danger-dark);
}

a.bg-danger:hover{
    background-color:var(--color-danger);
}

.text-danger{
    color:var(--color-danger);
}
.text-danger-800{
    color:var(--color-danger-dark);
}

.bg-danger{
    color:var(--color-danger-dark);
    background-color:var(--color-danger-light);
}

.alert-danger{
    color:var(--color-danger-dark);
    background-color:var(--color-danger-light);
    border-color:var(--color-danger);
}

.btn-danger{
    color:var(--color-text);
    border-color:var(--color-danger);
    background-color:var(--color-danger);
}

.btn-danger.active,
.btn-danger.focus,
.btn-danger:active,
.btn-danger:focus,
.btn-danger:hover,
.open>.dropdown-toggle.btn-danger,
.btn-danger.active.focus,
.btn-danger.active:focus,
.btn-danger.active:hover,
.btn-danger:active.focus,
.btn-danger:active:focus,
.btn-danger:active:hover,
.open>.dropdown-toggle.btn-danger.focus,
.open>.dropdown-toggle.btn-danger:focus,
.open>.dropdown-toggle.btn-danger:hover{
    color:var(--color-white);
    background-color:var(--color-danger-dark);
    border-color:var(--color-danger);
}


a.text-warning:hover{
    color:var(--color-warning-dark);
}

a.bg-warning:hover{
    background-color:var(--color-warning);
}

.text-warning{
    color:var(--color-warning);
}

.bg-warning{
    color:var(--color-warning-dark);
    background-color:var(--color-warning-light);
}

.alert-warning{
    color:var(--color-warning-dark);
    background-color:var(--color-warning-light);
    border-color:var(--color-warning);
}

.btn-warning{
    color:var(--color-text);
    border-color:var(--color-warning);
    background-color:var(--color-warning);
}

.btn-warning.active,
.btn-warning.focus,
.btn-warning:active,
.btn-warning:focus,
.btn-warning:hover,
.open>.dropdown-toggle.btn-warning,
.btn-warning.active.focus,
.btn-warning.active:focus,
.btn-warning.active:hover,
.btn-warning:active.focus,
.btn-warning:active:focus,
.btn-warning:active:hover,
.open>.dropdown-toggle.btn-warning.focus,
.open>.dropdown-toggle.btn-warning:focus,
.open>.dropdown-toggle.btn-warning:hover{
    color:var(--color-white);
    background-color:var(--color-warning-dark);
    border-color:var(--color-warning);
}


a.text-info:hover{
    color:var(--color-info);
}

a.bg-info:hover{
    background-color:var(--color-info);
}

.text-info{
    color:var(--color-info);
}

.bg-info{
    color:var(--color-info-dark);
    background-color:var(--color-info-light);
}

.alert-info{
    color:var(--color-info-dark);
    background-color:var(--color-info-light);
    border-color:var(--color-info);
}

.btn-info{
    color:var(--color-text);
    border-color:var(--color-info);
    background-color:var(--color-info);
}

.btn-info.active,
.btn-info.focus,
.btn-info:active,
.btn-info:focus,
.btn-info:hover,
.open>.dropdown-toggle.btn-info,
.btn-info.active.focus,
.btn-info.active:focus,
.btn-info.active:hover,
.btn-info:active.focus,
.btn-info:active:focus,
.btn-info:active:hover,
.open>.dropdown-toggle.btn-info.focus,
.open>.dropdown-toggle.btn-info:focus,
.open>.dropdown-toggle.btn-info:hover{
    color:var(--color-white);
    background-color:var(--color-info-dark);
    border-color:var(--color-info);
}


a.text-default:hover{
    color:var(--color-text);
}

a.bg-default:hover{
    background-color:var(--color-gray-lighter);
}

.text-default{
    color:var(--color-text);
}

.bg-default{
    color:var(--color-text);
    background-color:var(--color-primary-light);
}

.btn-default{
    color:var(--color-primary);
    background-color:var(--color-white);
    border-color:var(--color-primary);
}

.btn-default.active,
.btn-default.focus,
.btn-default:active,
.btn-default:focus,
.btn-default:hover,
.open>.dropdown-toggle.btn-default,
.btn-default.active.focus,
.btn-default.active:focus,
.btn-default.active:hover,
.btn-default:active.focus,
.btn-default:active:focus,
.btn-default:active:hover,
.open>.dropdown-toggle.btn-default.focus,
.open>.dropdown-toggle.btn-default:focus,
.open>.dropdown-toggle.btn-default:hover{
    color:var(--color-white);
    background-color:var(--color-primary);
    border-color:var(--color-primary);
}

.btn-default.disabled,
.btn-default.disabled.active,
.btn-default.disabled.focus,
.btn-default.disabled:active,
.btn-default.disabled:focus,
.btn-default.disabled:hover,
.btn-default[disabled],
.btn-default[disabled].active,
.btn-default[disabled].focus,
.btn-default[disabled]:active,
.btn-default[disabled]:focus,
.btn-default[disabled]:hover,
fieldset[disabled] .btn-default,
fieldset[disabled] .btn-default.active,
fieldset[disabled] .btn-default.focus,
fieldset[disabled] .btn-default:active,
fieldset[disabled] .btn-default:focus,
fieldset[disabled] .btn-default:hover{
    color:var(--color-gray);
    background-color:var(--color-white);
    border-color:var(--color-gray);
}

.btn-link{
    color:var(--color-secondary);
    background-color:var(--color-white);
    border-color:var(--color-secondary);
}
.btn-link.active,
.btn-link.focus,
.btn-link:active,
.btn-link:focus,
.btn-link:hover{
    color:var(--color-secondary);
    background-color:var(--color-white);
    border-color:var(--color-secondary-dark);
}


.btn-secondary{
    color:var(--color-white);
    border-color:var(--color-secondary);
    background-color:var(--color-secondary);
}

.btn-secondary.active,
.btn-secondary.focus,
.btn-secondary:active,
.btn-secondary:focus,
.btn-secondary:hover,
.open>.dropdown-toggle.btn-secondary,
.btn-secondary.active.focus,
.btn-secondary.active:focus,
.btn-secondary.active:hover,
.btn-secondary:active.focus,
.btn-secondary:active:focus,
.btn-secondary:active:hover,
.open>.dropdown-toggle.btn-secondary.focus,
.open>.dropdown-toggle.btn-secondary:focus,
.open>.dropdown-toggle.btn-secondary:hover{
    color:var(--color-white);
    background-color:var(--color-primary);
    border-color:var(--color-primary);
}

.nav-tabs>li.active>a:after,
.nav-tabs>li.active>a:focus:after,
.nav-tabs>li.active>a:hover:after{
    background-color:var(--color-primary);
}
.nav-tabs.nav-tabs-highlight>li.active>a,
.nav-tabs.nav-tabs-highlight>li.active>a:focus,
.nav-tabs.nav-tabs-highlight>li.active>a:hover{
    color:var(--color-text);
    border-top-color:var(--color-primary);
}

/*.navbar-toggle{
    float:left;
    margin:15px 0 0 15px;
    padding:5px;
}*/

.caret:after{
    font-size:26px;
    width:26px;
}

#entete{
    position:sticky;
    top:0px;
    background-color:var(--color-white);
    box-shadow:0px 0px 15px rgba(0, 0, 0, 0.75);
    z-index:101;
}

.Recherche{
    width:100%;
    margin:10px 0;
    background-color:#e8edf1;
    border:2px solid transparent;
}
.Recherche #TitreRecherche,
.Recherche #TypeFiltre{
	display:none;
}
.Recherche #SaisieMotCle{
    padding:6px 9px 6px 6px;
    background-color:#e8edf1;
    border:none;
    border-bottom:2px solid transparent;
    color:var(--color-black);
    font-weight:500;
}
.Recherche #SaisieMotCle::placeholder{
    color:var(--color-black);
    font-weight:400;
}
.Recherche #BtnSubmit{
    display:block;
    background-color:transparent;
    border:none;
}
.form-inline .Recherche.input-group .input-group-btn{
    width:auto;
}
@media (min-width:992px){
    .form-inline .Recherche.input-group .input-group-btn{
        width:44px;
    }
    .Recherche #SaisieMotCle{
        padding:6px 9px 6px 0;
    }
}

#entete div span{
    font-size:var(--font-size-small);
    font-weight:400;
    text-transform:uppercase;
}

#header-first-row{
    margin-top:10px;
}

#header-links #zone-liens{
    display:flex;
    justify-content:space-evenly;
    align-items:flex-start;
}

#header-conseillere{
    margin-top:10px;
    margin-bottom:10px;
}
#header-conseillere div{
    line-height:1em;
}
#header-conseillere div.flex img{
    padding-right:5px;
}

.main-menu > ul{
    padding-left:0;
    list-style:none;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-direction:column;
}
.main-menu > ul > li{
    display:block;
    padding:8px 16px;
    text-align:center;
}
.main-menu > ul > li > a{
    padding:8px;
    font-size:18px;
    text-transform:uppercase;
}
/*
.navbar-nav.navbar-right{
    text-align:right;
}

.navbar-nav > li{
    display:inline-block;
    margin:2px;
}
.navbar-nav > li > a{
    display:block;
    padding:8px;
    line-height:42px;
}
.navbar-nav > li > a > i{
    font-size:25px;
    transition:all 0.25s ease-in-out;
}
.navbar-nav > li > a:focus > i,
.navbar-nav > li > a:hover > i{
    transform:scale(1.1);
}
.navbar-nav > li > a > span{
    display:none;
}
*/
.logo-entreprise{
    text-align:center;
}
.logo-entreprise a{
    display:inline-block;
}
.logo-entreprise img{
    max-width:100%;
    width:auto;
    height:auto;
}

.custom-logo-link{
    display:flex;
    align-items:center;
    justify-content:flex-start;
    height:70px;
}
.custom-logo-link .custom-logo{
    object-fit:scale-down;
    max-width:100%;
    max-height:100%;
}

.flex{
    display:flex;
    align-items:center;
    justify-content:space-evenly;
}

/*.EmailConseillere{
    display:inline-block;
}*/
.icon-header{
    max-height:36px;
    width:auto;
}

.nav > li > a:focus,
.nav > li > a:hover,
.nav .open > a,
.nav .open > a:focus,
.nav .open > a:hover{
    background:none;
}
.dropdown-menu{
    box-shadow:none;
    border:none;
}
.dropdown-menu > ul{
    margin-top:-15px;
    background:var(--color-white);
    box-shadow:none;
    border:1px solid var(--color-primary-light);
}
.dropdown-menu > ul > li{
    display:block;
    font-family:var(--font-family);
}
.dropdown-menu > ul > li > a{
    display:block;
    text-align:center;
}
.dropdown-menu li.current > a{
    font-weight:bold;
}

.navbar-collapse{
    background:var(--color-primary);
    color:var(--color-white);
}
.navbar-collapse a{
    color:var(--color-white);
}
.navbar-collapse a:focus,
.navbar-collapse a:hover{
    color:var(--color-white);
    text-decoration:underline;
}
.navbar-collapse.in{
    overflow-y:visible;
}

.navbar-collapse.collapse.in .main-menu{
    max-height:50vh;
    overflow:auto;
}

.main-menu .dropdown-menu{
    width:100%;
    background-color:var(--color-primary);
    border-color:var(--color-primary);
    border-radius:0;
    color:var(--color-white);
}
#ListeFamilleMenuTop{
    background-color:var(--color-primary);
    border-color:var(--color-primary);
    color:var(--color-white);
    z-index:102;
}
.dropdown-menu > ul#ListeFamilleMenuTop{
    margin-top:-9px;
}
.main-menu .dropdown-menu ul#ListeFamilleMenuTop > li > a{
    text-transform:uppercase;
    font-size:var(--font-size-small);
    font-weight:300;
}
/* Mega Menu */
@media (min-width:992px){
    .main-menu .dropdown{
        position:static;
    }
    .main-menu .dropdown-menu{
        position:absolute;
        left:10%;
        right:10%;
        width:auto;
        margin-left:auto;
        margin-right:auto;
        box-shadow:0 4px 12px rgba(0, 0, 0, 0.15);
    }
    .main-menu .dropdown-menu ul li a{
        text-align:left;
    }
    /* Liste des familles en grille CSS Grid - 3 colonnes */
    #ListeFamilleMenuTop{
        display:grid;
        grid-template-columns:repeat(3, minmax(0, 1fr));
        gap:20px;
        padding:20px;
    }

    .main-menu .dropdown-menu{
        left:12.5%;
        right:12.5%;
    }
    /* Liste des familles en grille CSS Grid - 4 colonnes */
    #ListeFamilleMenuTop{
        grid-template-columns:repeat(4, minmax(0, 1fr));
    }
}
@media (min-width:1200px){
    .main-menu .dropdown-menu{
        left:15%;
        right:15%;
    }
    /* Liste des familles en grille CSS Grid - 5 colonnes */
    #ListeFamilleMenuTop{
        grid-template-columns:repeat(5, minmax(0, 1fr));
    }
}

.texte-accueil{
    padding:0 15px 20px 15px;
    text-align:justify;
    font-size:13px;
}

#ecom{
    padding:0 0 60px 0;
}
#MainContainer{
    padding-top:30px;
    background:var(--color-white);
}
.container-fluid > .row{
    margin-left:0;
    margin-right:0;
}
.bandeaux{
    padding:10px 0;
    font-weight:300;
}
.main-menu{
    margin:16px auto 2px auto;
    font-family:var(--font-family-serif);
}
.main-menu > .navbar-collapse > ul > li:not(.dropdown){
    margin:0 15px 0 0;
}
.main-menu > .navbar-collapse > ul > li > a{
    font-size:20px;
    font-weight:600;
    color:var(--color-secondary);
    text-transform:none;
}
.main-menu > .navbar-collapse > ul > li > a:focus,
.main-menu > .navbar-collapse > ul > li > a:hover{
    color:var(--color-secondary-dark);
}
.main-menu > .navbar-right > ul li i{
    font-size:24px;
}

#footer{
    padding:40px 0;
    background:var(--color-footer-bg);
    color:var(--color-footer-text);
}
#footer ul{
    list-style-type:none;
    padding-left:0;
}
#footer ul li{
    padding-top:8px;
    padding-bottom:8px;
}
#footer a{
    display:inline-block;
    padding:10px 15px;
    color:var(--color-footer-text);
    font-size:var(--font-size-small);
    font-weight:400;
}
#footer a:focus,
#footer a:hover{
    color:var(--color-gray-lightest);
    text-decoration:underline;
}
#footer .row > a{
    display:block;
    margin:10px auto;
    font-weight:300;
}
#footer .logo-footer{
    max-width:120px;
}

#gototop{
    position:fixed;
    bottom:1em;
    right:1em;
    width:42px;
    height:42px;
    line-height:42px;
    border-radius:3px;
    opacity:0.75;
    text-align:center;
    background:var(--color-primary);
    color:var(--color-white);
}
#gototop:focus,
#gototop:hover{
    opacity:1;
}

small,
.small,
.InfoPetit{
    font-size:var(--font-size-small);
}

#TitrePage, .TitrePage, .Titre{
    margin:30px auto;
    padding:0;
    background:none;
    color:var(--color-secondary);
    font-family:var(--font-family-title);
    font-size:24px;
    font-weight:500;
    line-height:32px;
    text-align:center;
}

.SousTitre{
    margin:15px auto;
    background:none;
    text-align:center;
    font-weight:400;
}

.TitreModule{
    margin:15px auto;
    padding:0;
    font-weight:400;
}
.LienBarNav + .TitreModule{
    margin:15px auto;
    text-align:right;
}
.TitreModule #TriLstProduit{
    font-size:var(--font-size-small);
}
.TitreModule #TriLstProduit label{
    display:none;
}

.TitreCatAccueil #LstSousFamille .TitreModule{
    display:none;
}


#bloc-menu-panier,
#bloc-menu-compte{
    text-align:center;
}
#bloc-menu-panier > a,
#bloc-menu-compte > a{
    display:inline-block;
}
#bloc-menu-panier > a > div,
#bloc-menu-compte > a > div{
    display:inline-block;
    position:relative;
}
#entete div span#panier-nb{
    display:flex;
    justify-content:center;
    align-items:center;
    position:absolute;
    top:12px;
    right:0;
    width:18px;
    height:18px;
    border-radius:50vh;
    background-color:var(--color-secondary);
    color:var(--color-white);
    font-size:12px;
}
span.label-menu{
    display:block;
}

.collapsing,
.collapse.show,
#header-first-row,
#header-second-row,
#bloc-menu-recherche{
    transition:all 0.25s ease-in-out;
}
#bloc-menu-recherche.collapsing{
    -webkit-transition-delay:0s;
    transition-delay:0s;
}
#bloc-menu-recherche.collapse.show{
    -webkit-transition-delay:0s;
    transition-delay:0s;
}

#MenuCompte span, #Menu_Deconnection{
    display:block;
}

#MenuCompte:hover #MenuCompteDeconnecte a{
    text-decoration:underline;
}

#ModalAjoutOk .modal-header h3{
    text-align:center;
}

#tarteaucitronRoot #tarteaucitronIcon #tarteaucitronManager{
    margin:12px;
    padding:3px 0 0 1px;
    border-radius:0;
    background-color:var(--color-white);
    opacity:0.67;
    box-shadow:0px 1px 5px 0px var(--color-primary-dark);
    transition:all 0.2s ease;
}
#tarteaucitronRoot #tarteaucitronIcon #tarteaucitronManager:focus,
#tarteaucitronRoot #tarteaucitronIcon #tarteaucitronManager:hover{
    transform:scale(1.05);
    opacity:1;
}

@media (max-width:991px){
    /*.navbar-toggle{
        position:absolute;
    }*/
    .main-menu .dropdown-backdrop{
        display:none;
    }
    .main-menu > ul > li{
        position:static;
    }
    #main-menu-container{
        width:100%;
        padding:0;
    }
    .form-inline .Recherche.input-group{
        margin-left:0;
        margin-right:0;
        padding-left:1em;
        padding-right:1em;
        overflow-x:hidden;
    }
    .form-inline .Recherche.input-group .input-group-btn{
        width:44px;
    }
    .container > .navbar-collapse.collapse.in{
        margin-right:0;
    }
    .dropdown-menu{
        position:static;
    }
    .dropdown-menu > ul{
        list-style:none;
        padding:0 10px;
        margin-left:auto;
        margin-right:auto;
        margin-bottom:0;

        display:flex;
        flex-wrap:wrap;
        /*justify-content:center;*/
        align-items:center;
    }
    .dropdown-menu > ul > li{
        display:inline-block;
        min-width:33%;
    }
    .dropdown-menu > ul > li > a{
        line-height:normal;
        text-decoration:none;
        text-align:left;
        padding:10px 15px;
        color:var(--color-white);
        border-bottom:1px solid rgba(0, 0, 0, 0.1);
    }
    .navbar-header{
        float:none;
    }
    .navbar-left,
    .navbar-right{
        float:none !important;
    }
    .navbar-toggle{
        display:block;
    }
    .navbar-collapse{
        border-top:1px solid transparent;
        box-shadow:inset 0 1px 0 rgba(255,255,255,0.1);
    }
    .navbar-fixed-top{
        top:0;
        border-width:0 0 1px;
    }
    .navbar-collapse.collapse{
        display:none !important;
    }
    .navbar-nav{
        float:none !important;
        margin-top:7.5px;
    }
    .navbar-nav > li{
        float:none;
    }
    .navbar-nav > li > a{
        padding-top:10px;
        padding-bottom:10px;
    }
    .collapse.in{
        display:block !important;
    }
}

@media (max-width:767px){
    .dropdown-menu > ul > li{
        min-width:50%;
    }
}

@media only screen and (max-width:419px){
    body{
        word-wrap:break-word;
    }
    .container-fluid{
        padding-left:0;
        padding-right:0;
    }
}

@media (max-width:360px){
    .dropdown-menu > ul > li{
        width:100%;
    }
    .dropdown-menu > ul > li > a{
        text-align:center;
    }
}
/*
@media (min-width:460px){
    .navbar-nav > li{
        margin:2px 4px;
    }
    .navbar-nav > li > a{
        padding:8px 16px;
    }
    .navbar-nav > li > a > span{
        display:inline-block;
    }
    #subfooter .liens li{
        display:inline-block;
    }
}
*/
@media (min-width:992px){
    #entete div span{
        font-size:12px;
    }
    .FormRecherche{
        max-width:200px;
        margin:0 auto;
    }
    .dropdown:hover > .dropdown-menu{
        display:block;
    }
    .navbar-collapse{
        background-color:var(--color-white);
        color:var(--color-primary);
    }
    .navbar-collapse a{
        color:var(--color-primary);
    }
    .navbar-collapse a:focus,
    .navbar-collapse a:hover{
        color:var(--color-primary);
        
    }
    .navbar-collapse .dropdown-menu > ul > li > a{
        padding:10px 5px;
        color:var(--color-white);
    }
    .main-menu > ul{
        flex-direction:row;
        margin-bottom:0;
    }
    .main-menu > ul > li{
        display:inline-block;
    }
    #header-conseillere div.flex{
        justify-content:center;
    }
}

@media (min-width:1200px){
    .FormRecherche{
        max-width:340px;
    }
}
