@import url('https://fonts.googleapis.com/css2?family=Gochi+Hand&family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');

:root{
    --color-primary:  hsl( 43, 99%, 59%); --color-primary-light:  hsl( 43, 99%, 85%); --color-primary-dark:  hsl( 43, 99%, 30%); /* jaune #fec330 */
                                           --color-primary-lightest:hsl( 43, 99%, 95%);
    --color-secondary:hsl(201, 95%, 70%); --color-secondary-light:hsl(201, 95%, 83%); --color-secondary-dark:hsl(201, 95%, 35%); /* bleu clair #69c7fb */
                                         --color-secondary-lightest:hsl(201, 95%, 95%);
    --color-tertiary: hsl(101, 76%, 44%); --color-tertiary-light: hsl(101, 76%, 89%); --color-tertiary-dark: hsl(101, 76%, 22%); /* vert #51c41b */

    --color-info:     hsl(213, 67%, 52%); --color-info-light:     hsl(213, 67%, 87%); --color-info-dark:     hsl(213, 67%, 26%); /* bleu #337dd6 */
    --color-warning:  hsl( 28, 97%, 58%); --color-warning-light:  hsl( 28, 97%, 86%); --color-warning-dark:  hsl( 28, 97%, 29%); /* orange #fc8b2b */
    --color-success:  hsl(101, 76%, 44%); --color-success-light:  hsl(101, 76%, 89%); --color-success-dark:  hsl(101, 76%, 22%); /* vert #51c41b */
    --color-danger:   hsl(355, 91%, 54%); --color-danger-light:   hsl(355, 91%, 87%); --color-danger-dark:   hsl(355, 91%, 27%); /* rouge #f41e30 */

    --color-white:#fff;
    --color-black:#000;
    --color-gray: #808080;
    --color-gray-light:#aaaaaa; --color-gray-lighter:#d9d9d9; --color-gray-lightest:#f0f0f0;
    --color-gray-dark: #4c4c4c; --color-gray-darker: #2f2f2f; --color-gray-darkest: #161616;
    --color-title:      var(--color-black);
    --color-text:       var(--color-black);
    --color-text-medium:var(--color-gray-dark);
    --color-text-light: var(--color-gray);
    --color-link:       #000;
    --color-link-hover: #000;
    --color-footer-bg:  var(--color-white);
    --color-footer-text:var(--color-black);
    --color-rose:#FF73A9;

    --header-bg-color:#fff;
    --header-color:#000;

    --menu-bg-color:var(--color-primary);
    --menu-color:#000;

    --filters-bg-color:#fff;
    --filters-color:#000;

    --prefooter-bg-color:var(--color-primary);
    --prefooter-color:var(--color-black);
    --footer-bg-color:var(--color-white);
    --footer-color:var(--color-black);

    --color-border:#000;
    --dropdown-bg-color:#fff;

    --bg-gradient:linear-gradient(90deg,rgba(237, 110, 54, 1) 0%, rgba(250, 181, 53, 1) 50%, rgba(112, 180, 52, 1) 100%);
    --header-gradient:linear-gradient(to right, #F41E30, #FC8B2B 33%, #FEC330 66%, #1BC471 100%);
    --underline-gradient:linear-gradient(to right, #F41E30, #FC8B2B 20%, #FEC330 40%, #1BC471 60%, #69C7FB 80%, #337DD6 100%);

    --bg-color-eveil:#F41E30;
    --bg-color-construc:#FC8B2B;
    --bg-color-societe:#FEC330;
    --bg-color-accessoires:#51C41B;
    --bg-color-pleinair:#69C7FB;
    --bg-color-loisirs:#337DD6;
    --bg-color-nouveautes:#CFD1D2;
    --bg-color-finserie:#85C43F;

    --font-main:"Open Sans", sans-serif;
    --font-main-size:16px;
    --font-title:"Gochi Hand", sans-serif;

    --border-radius:8px;
}

*:focus,
a:focus,
.btn:focus,
.navbar-toggle:focus,
.dropdown-toggle:focus,
.form-control:focus,
button:focus,
input:focus,
label:focus,
li:focus{
    outline:2px dotted var(--color-info);
}
.Recherche #SaisieMotCle:focus{
    outline:none;
    border-bottom:2px dotted var(--color-info);
}

body{
	font-family:var(--font-main);
	font-size:var(--font-main-size);
	background:var(--header-bg-color);
	color:var(--color-text);
	margin:0;
	padding:0;
}

a{
	color:var(--color-link);
}
a:focus,
a:hover{
	color:var(--color-link-hover);
}

blockquote, p, li{
	font-family:var(--font-main);
    font-size:var(--font-main-size);
    font-weight:400;
}
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6{
	font-family:var(--font-title);
    color:var(--color-title);
}

img{
    max-width:100%;
    height:auto;
}

.btn{
    border-radius:var(--border-radius);
    white-space:normal;
}
@media (min-width:400px){
    .btn{
        white-space:nowrap;
    }
}

.InfoPetit,
.small{
    font-size:12px;
}
.InfoToutPetit{
    font-size:11px;
}
#HistoCde .ColEtat .InfoToutPetit{
    font-size:12px;
}
#ValEtape2 #MsgLivraison,
#ValEtape2 #MsgModeExpedition{
    font-size:12px;
}

.table-striped > tbody > tr:nth-of-type(odd){
    background-color:var(--color-secondary-lightest);
}

.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,
.liQteAcheter #Acheter,
#TB_Produit .LigneAcheter #Acheter{
    color:var(--color-black);
    border:1px solid var(--color-primary);
    background-color:var(--color-primary);
    border-radius:50vh;
}
.btn-primary{
    border-radius:var(--border-radius);
}

.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-text);
    border-color:var(--color-primary-light);
    background-color:var(--color-primary-light);
}

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,
.liQteAcheter #Acheter:hover,
#TB_Produit .LigneAcheter #Acheter:hover,
.open>.dropdown-toggle.btn-primary{
    color:var(--color-white);
    background-color:var(--color-primary-dark);
    border-color:var(--color-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);
}

.btn-achat{
    color:var(--color-black);
    font-weight:bold;
    border:2px solid var(--color-tertiary);
    background-color:var(--color-white);
    border-radius:50vh;
}
.btn-achat.active,
.btn-achat.focus,
.btn-achat:active,
.btn-achat:focus,
.btn-achat:hover,
.btn-achat.active.focus,
.btn-achat.active:focus,
.btn-achat.active:hover,
.btn-achat:active.focus,
.btn-achat:active:focus,
.btn-achat:active:hover{
    color:var(--color-black);
    background-color:var(--color-tertiary);
    border-color:var(--color-tertiary);
}

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-text);
    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{
    color:var(--color-white);
    background-color:var(--color-success-dark);
    border-color:var(--color-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{
    color:var(--color-white);
    background-color:var(--color-danger-dark);
    border-color:var(--color-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-dark);
}


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{
    color:var(--color-white);
    background-color:var(--color-warning-dark);
    border-color:var(--color-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-dark);
}


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{
    color:var(--color-white);
    background-color:var(--color-info-dark);
    border-color:var(--color-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-dark);
}


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-black);
    background-color:var(--color-secondary);
    border-color:var(--color-secondary);
}

.btn-default.active,
.btn-default.focus,
.btn-default:active,
.btn-default:focus,
.btn-default:hover,
.open>.dropdown-toggle.btn-default{
    color:var(--color-white);
    background-color:var(--color-secondary-dark);
    border-color:var(--color-secondary);
}
.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-secondary-dark);
    border-color:var(--color-secondary-dark);
}

.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-black);
    background-color:var(--color-secondary-light);
    border-color:var(--color-secondary-light);
}

.btn-link{
    color:var(--color-secondary);
    background-color:var(--color-white);
    border-color:var(--color-secondary);
    border-radius:var(--border-radius);
}
.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);
}


.cta-button,
.cta-button.active,
.cta-button.focus,
.cta-button:active,
.cta-button:focus,
.cta-button:hover{
    color:var(--color-text);
    background-color:var(--color-white);
    border:none;
}
.cta-button:before{
    content:"";
    position:absolute;
    inset:0;
    border-radius:var(--border-radius);
    padding:2px;
    background:linear-gradient(to right, #F41E30, #FC8B2B 20%, #FEC330 40%, #1BC471 60%, #69C7FB 80%, #337DD6 100%);
    -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite:add, add;
    mask-composite:add, add;
    -webkit-mask-composite:xor;
    mask-composite:exclude;
}

.footer-oika .cta-button{
    margin:6px 2px;
    padding:8px 16px;
}

.nav-tabs > li{
    font-size:14px;
}

.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{
    border-top:none;
    color:var(--color-secondary-dark);
}
@media (min-width:769px){
    .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{
        border-top:3px solid var(--color-primary);
    }
}

#header{
	padding-top:10px;
	background:var(--header-bg-color);
	color:var(--header-color);
	text-shadow:none;
}
#header .container{
    min-height:5px;
    background:none;
}
#header::after,
#footer::before{
    content:'';
    display:block;
    height:10px;
    background: var(--header-gradient);
}
#header .zone-logo{
    text-align:left;
}
#header .zone-recherche{
    text-align:left;
}
#header .liens-header{
    text-align:right;
}
#header .liens-header a{
    position:relative;
    display:inline-block;
    margin:10px;
}

@media (min-width: 992px){
    #header .zone-recherche{
        text-align:right;
    }
}

.navbar-toggle{
    margin-right:20px;
    text-align:right;
	background:var(--color-secondary);
}
.navbar-toggle .icon-bar{
	background:var(--color-black);
}

.dropdown-backdrop{
    display:none;
}

.Recherche{
    width:100%;
    margin:10px 0;
    border:2px solid var(--color-border);
    border-radius:var(--border-radius);
}
.Recherche #SaisieMotCle{
    border:none;
    border-bottom:2px solid transparent;
    border-radius:var(--border-radius);
    padding:6px 9px 6px 6px;
}
.Recherche #BtnSubmit{
    display:block;
    border:none;
    background-color:transparent;
}
.Recherche .input-group-btn{
    width:auto;
}
@media (min-width:768px){
    .Recherche .input-group-btn{
        width:1%;
    }
    .Recherche #SaisieMotCle{
        padding:6px 9px 6px 0;
    }
}

#TitreCatFamillePhoto h1.Titre,
h1#TitreCatSousFamille{
    border-radius:50vh;
    font-family:var(--font-main);
    font-size:var(--font-main-size);
    font-weight:600;
    padding-left:1em;
    padding-right:1em;
}

#TitreCatFamillePhoto,
#TitreCatSousFamillePhoto{
	background-color:var(--color-white);
	color:var(--color-text);
}
#TitreCatFamillePhoto img,
#TitreCatFamillePhoto h1.Titre,
#TitreCatFamillePhoto div.TitreDescWeb,
#TitreCatSousFamillePhoto img,
h1#TitreCatSousFamille.Titre,
#TitreCatSousFamillePhoto div.TitreDescWeb{
	background-color:var(--color-white);
	color:var(--color-text);
}

#ListeFamilleMenuTop{
    list-style:none;
    margin:10px auto;
    padding:0;
}
#ListeFamilleMenuTop > li{
    margin:4px;
}
#ListeFamilleMenuTop li a{
    display:block;
    padding:4px 12px;
    color:var(--menu-color);
}
#ListeFamilleMenuTop > li > a{
    border-radius:50vh;
    border:3px solid var(--color-white);
    background-color:var(--menu-bg-color);
    font-weight:bold;
    text-align:center;
}
@media (min-width:992px){
    #ListeFamilleMenuTop > li > a{
        font-size:14px;
    }
}

.TitreCatAccueil h1.TitreModule{
    padding:0;
}
#ListeFamilleMenuTop .dropdown-menu > ul > li{
    margin-left:0;
}
#ListeFamilleMenuTop > li > .dropdown-menu ul.SousFamille{
    border:3px solid var(--color-white);
    border-radius:15px;
}
.TitreCatFamille #TitreCatFamillePhoto h1.Titre,
.TitreCatSousFamille h1#TitreCatSousFamille.Titre,
#ListeFamilleMenuTop > li > a,
#ListeFamilleMenuTop > li > .dropdown-menu > ul.SousFamille{
    --bg:var(--menu-bg-color);
    background-color:var(--bg);
    /*color:lch(from var(--bg) round((100 - l), 100) 0 0);*/
    color:hwb(from oklch(from var(--bg) l 0 0) h calc(((b - 50) * 999)) calc(((w - 50) * 999)));
}
.TitreCatFamille.NF2 #TitreCatFamillePhoto h1.Titre,
.TitreCatSousFamille.NF2 h1#TitreCatSousFamille.Titre,
#ListeFamilleMenuTop > li.F4 > a,
#ListeFamilleMenuTop > li.F4 > .dropdown-menu > ul.SousFamille{
    --bg:var(--bg-color-eveil);
}
.TitreCatFamille.NF33 #TitreCatFamillePhoto h1.Titre,
.TitreCatSousFamille.NF33 h1#TitreCatSousFamille.Titre,
#ListeFamilleMenuTop > li.F33 > a,
#ListeFamilleMenuTop > li.F33 > .dropdown-menu > ul.SousFamille{
    --bg:var(--bg-color-construc);
}
.TitreCatFamille.NF45 #TitreCatFamillePhoto h1.Titre,
.TitreCatSousFamille.NF45 h1#TitreCatSousFamille.Titre,
#ListeFamilleMenuTop > li.F45 > a,
#ListeFamilleMenuTop > li.F45 > .dropdown-menu > ul.SousFamille{
    --bg:var(--bg-color-societe);
}
.TitreCatFamille.NF28 #TitreCatFamillePhoto h1.Titre,
.TitreCatSousFamille.NF28 h1#TitreCatSousFamille.Titre,
#ListeFamilleMenuTop > li.F28 > a,
#ListeFamilleMenuTop > li.F28 > .dropdown-menu > ul.SousFamille{
    --bg:var(--bg-color-accessoires);
}
.TitreCatFamille.NF24 #TitreCatFamillePhoto h1.Titre,
.TitreCatSousFamille.NF24 h1#TitreCatSousFamille.Titre,
#ListeFamilleMenuTop > li.F24 > a,
#ListeFamilleMenuTop > li.F24 > .dropdown-menu > ul.SousFamille{
    --bg:var(--bg-color-pleinair);
}
.TitreCatFamille.NF2 #TitreCatFamillePhoto h1.Titre,
.TitreCatSousFamille.NF2 h1#TitreCatSousFamille.Titre,
#ListeFamilleMenuTop > li.F2 > a,
#ListeFamilleMenuTop > li.F2 > .dropdown-menu > ul.SousFamille{
    --bg:var(--bg-color-loisirs);
}
.TitreCatFamille.NF46 #TitreCatFamillePhoto h1.Titre,
.TitreCatSousFamille.NF46 h1#TitreCatSousFamille.Titre,
#ListeFamilleMenuTop > li.F46 > a,
#ListeFamilleMenuTop > li.F46 > .dropdown-menu > ul.SousFamille{
    --bg:var(--bg-color-nouveautes);
}
.TitreCatFamille.NF47 #TitreCatFamillePhoto h1.Titre,
.TitreCatSousFamille.NF47 h1#TitreCatSousFamille.Titre,
#ListeFamilleMenuTop > li.F47 > a,
#ListeFamilleMenuTop > li.F47 > .dropdown-menu > ul.SousFamille{
    --bg:var(--bg-color-finserie);
}

#ListeFamilleMenuTop > li > .dropdown-menu > ul.SousFamille > li > a.self-fam{
    margin-top:8px;
    padding-top:8px;
    border-top:1px solid rgba(0,0,0,0.25);
    font-style:italic;
}
#ListeFamilleMenuTop > li > .dropdown-menu > ul.SousFamille > li > a.self-fam:before{
    content:'> ';
    display:inline;
}

#ListeFamilleMenuTop > li.dropdown .dropdown-menu > ul{
    padding:6px;
    background-color:var(--bg);
    color:hwb(from oklch(from var(--bg) l 0 0) h calc(((b - 50) * 999)) calc(((w - 50) * 999)));
}
#ListeFamilleMenuTop > li.dropdown .dropdown-menu > ul li a{
    color:hwb(from oklch(from var(--bg) l 0 0) h calc(((b - 50) * 999)) calc(((w - 50) * 999)));
}

@media (min-width:992px){
    #ListeFamilleMenuTop{
        display:flex;
        flex-direction:row;
        flex-wrap:nowrap;
        justify-content:space-between;
        align-items:center;
    }
    #ListeFamilleMenuTop > li > .dropdown-menu{
        position:absolute;
        bottom:0;
        left:0;
    }
}

#ListeFamilleMenuTop > li#LienTousProduitsMenu,
#ListeFamilleMenuTop > li#LienSiteOfficiel{
    text-align:center;
}
#ListeFamilleMenuTop > li#LienTousProduitsMenu > a,
#ListeFamilleMenuTop > li#LienSiteOfficiel > a{
    display:inline-block;
    background-color:transparent;
    color:var(--color-link);
    text-align:center;
    font-size:13px;
    font-weight:normal;
}

#ecom{
	padding:15px 0;
}
#MainContainer{
	background:transparent;
}
@media (max-width: 767px){
    #MainContent{
        padding-left:0;
        padding-right:0;
    }
}

#CustomSlider{
    margin:15px auto;
    padding:0;
    border:2px solid var(--color-black);
    position: relative;
    overflow: hidden;
    width: 100%;
    max-width: 2560px;
}
#CustomSlider:hover .carousel-control {
    opacity: 0.85;
}
#CustomSliderIndicators{
    position:relative;
    height:30px;
}
#CustomSliderIndicators .carousel-indicators{
    position:relative;
}

#CustomSliderIndicators .carousel-indicators .carousel-indicator{
    display: inline-block;
    width: 12px;
    height: 12px;
    background: #ccc;
    border-radius: 50%;
    margin: 0 5px;
    cursor: pointer;
    transition: background 0.3s;
}
#CustomSliderIndicators .carousel-indicators .carousel-indicator.active{
    background: var(--color-primary);
}

@media (min-width: 768px) {
    #CustomSliderIndicators .carousel-indicators{
        bottom:10px;
    }
}
@media (min-width: 992px) {
    #CustomSliderIndicators{
        margin-bottom:30px;
    }
}
/*
#CustomSlider .carousel-control{
    display:none;
}
#CustomSliderMobileControls{
    display:block;
    position:relative;
    height:36px;
    margin-bottom:30px;
}
#CustomSliderMobileControls .left,
#CustomSliderMobileControls .right,
#CustomSliderMobileControls .pause{
    position:absolute;
    top:0;
    transform:translateX(0px);
}
#CustomSliderMobileControls .left{
    left:0;
}
#CustomSliderMobileControls .right{
    right:0;
}
#CustomSliderMobileControls .pause{
    left:50%;
    transform:translateX(-50%);
}
@media (min-width: 992px){
    #CustomSlider{
        margin-bottom:30px;
    }
    #CustomSlider > .carousel-control{
        display:block;
        opacity:0.25;
    }
    #CustomSliderMobileControls{
        display:none;
    }
}
*/

.carousel-track {
    display: flex;
    transition: transform 0.5s ease;
    width: 100%;
}

#CustomSlider .carousel-track img {
    margin-right:1em;
}
.slider-btn {
    position: absolute;
    width: 36px;
    height: 36px;
    border-radius: 36px;
    border: 2px solid #000;
    padding: 0;
    color: #000;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    opacity: 0.7;
}
.slider-btn.left {
    left: 1.5rem;
}
.slider-btn.right {
    right: 1.5rem;
}

.carousel-item {
    flex: 0 0 100%; /* Chaque item prend 100% de la largeur */
    width: 100%;
    margin-right: 15px;
    overflow: hidden; /* Important pour rogner proprement */
}
.carousel-item:last-child {
    margin-right: 0;
}
.carousel-item img {
    width: 100%; /* Image prend 100% de la largeur du conteneur */
    height: auto; /* Hauteur automatique pour préserver le ratio */
    display: block; /* Évite les espaces en dessous de l'image */
    object-fit: cover; /* Optionnel : si vous voulez forcer un ratio */
}

.carousel-control {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 5%;
    font-size: 24px;
    background: none;
    color: white;
    text-align: center;
    cursor: pointer;
    z-index: 2;
}
.carousel-control.left,
.carousel-control.right,
.carousel-control.pause{
    background:none;
}
.carousel-control.left {
    left: 0;
}
.carousel-control.right {
    right: 0;
}
.carousel-control.pause {
    top: auto;
    bottom: 2rem;
    left: calc(50% - 18px);
}
.carousel-control.pause .btn.pause i:before {
    content:"\ed83";
}
.carousel-control.pause .btn.pause.paused i:before {
    content:"\ed82";
}


.main-navigation li{
	text-transform:uppercase;
	border-right:1px solid ;
	padding:0 15px;
	font-size:13px;
}

#LstSousFamille .TitreModule{
    display:block;
    text-align:left;
}

.TitreCatFamille #LstSousFamille .TitreModule{
    display:none;
}
.TitreCatFamille #LstSousFamille .RechercheCatalogue{
    text-align:center;
}

/*#Div_CatComplet{
    display:none;
}*/
#Div_CatComplet a{
    font-size:14px;
    font-weight:normal;
    text-decoration:underline;
}
#Div_CatComplet a:focus,
#Div_CatComplet a:hover{
    text-decoration:none;
}

#prefooter{
    background:var(--prefooter-bg-color);
    color:var(--prefooter-color);
    border:none;
    box-shadow:none;
}
#prefooter a{
    text-decoration:underline;
}
#prefooter a:focus,
#prefooter a:hover{
    text-decoration:none;
}

#footer{
    background:var(--footer-bg-color);
    color:var(--footer-color);
    border:none;
    box-shadow:none;
}

.footer-oika > .container{
    margin-top:1em;
}
.footer-oika .socials img{
    height:45px;
}
.footer-oika .socials a:focus,
.footer-oika .socials a:hover{
    filter:drop-shadow(1px 1px 3px rgba(0,0,0,0.5));
}

.footer-oika{
	padding:30px 0;
}

.footer-oika .menu{
    list-style:none;
    display:flex;
    flex-wrap:wrap;
    justify-content:space-between;
    align-items:center;
    padding-left:0;
}
.footer-oika .menu li{
    margin:8px 4px;
}

.footer-oika .menu a:hover:after{
    content: "";
    width: 100%;
    height: 2px;
    position: absolute;
    bottom: 0;
    left: 0;
    background: var(--underline-gradient);
}

.footer-oika a{
    display:inline-block;
    position:relative;
    letter-spacing:-0.8px;
    font-weight:500;
}
.footer-oika .footer-legal a:focus,
.footer-oika .footer-legal a:hover{
    text-decoration:underline;
}

.footer-oika .footer-col3 h4{
    margin-top:40px;
    font-size:24px;
}

.footer-oika .footer-legal{
    padding-top:10px;
    padding-bottom:10px;
    text-align:center;
    font-family:var(--font-title);
    font-size:20px;
}

.footer-col1{
    margin-bottom: 2em;
    text-align: center;
}
.footer-col5{
    margin:1em auto;
    text-align: center;
}
@media (min-width: 768px) {
    .footer-col1{
        text-align: left;
    }
}
@media (min-width: 992px) {
    .footer-col5{
        text-align: right;
    }
}

/**/

#TitrePage, .TitrePage, .Titre{
	background:none;
    font-family:var(--font-title);
	font-size:32px;
	font-weight:normal;
    text-align:center;
	color:var(--color-title);
}

.SousTitre{
	background:none;
    font-family:var(--font-title);
	font-weight:normal;
	font-size:28px;
	color:var(--color-title);
}

.TitreModule{
	background:none;
	color:var(--color-title);
    font-family:var(--font-title);
	font-weight:300;
	font-size:28px;
}
h1.TitreModule + h2{
    margin:5px;
    padding:3px 5px;
    line-height:30px;
    font-size:20px;
    font-weight:300;
}
@media (min-width: 768px){
    h1.TitreModule{
        font-size:36px;
    }
    h1.TitreModule + h2{
        font-size:24px;
    }
}

#TriLstProduit{
    font-family:var(--font-main);
    font-size:var(--font-main-size);
}

#FiltresTitre span{
    display:inline-block;
    margin-left:1em;
    font-family:var(--font-main);
    font-weight:500;
    text-decoration:underline;
}
@media (min-width:992px){
    #FiltresTitre a,
    #FiltresTitre img,
    #FiltresTitre span {
        text-decoration:none;
        cursor:default;
    }
}
#FiltresTitre span:focus,
#FiltresTitre span:hover{
    text-decoration:none;
}

.TitreModule span{
    margin:5px;
}
.TitreModule select,
.TitreModule span label{
    font-size:13px;
}

@media(min-width:992px){
    .pull-right #MenuGauche{
        margin-top:45px;
        margin-left:15px;
    }
}
#MenuGaucheContenu{
    padding:0;
    background-color:var(--filters-bg-color);
    color:var(--filters-color);
}

.Div_Catalogue{
    border:none;
}
/*
#ZoneFamillesAccueil .Div_Catalogue{
    width:49%;
    margin-left:0.5%;
    margin-right:0.5%;
}
@media (min-width:480px){
    #ZoneFamillesAccueil .Div_Catalogue{
        width:32.3%;
    }
}
@media (min-width:768px){
    #ZoneFamillesAccueil .Div_Catalogue{
        width:24%;
    }
}
@media (min-width:992px){
    #ZoneFamillesAccueil .Div_Catalogue{
        width:19%;
    }
}
@media (min-width:1200px){
    #ZoneFamillesAccueil .Div_Catalogue{
        width:15.66%;
    }
}
#ZoneFamillesAccueil .Div_Catalogue .Div_CatPasPhoto{
    height:150px;
    line-height:75px;
}
#ZoneFamillesAccueil .Div_Catalogue .Div_CatPhoto img{
    max-height:150px;
}
*/
.TitreCatAccueil .RechercheCatalogue{
    margin:15px auto;
    padding:var(--border-radius);
    border:2px solid var(--color-black);
    border-radius:calc(4 * var(--border-radius));

    position: relative;
    width: 100%;
    padding: 15px 0;
    height: auto;
    display: flex;
    flex-wrap: nowrap;
    overflow-x: hidden;
    overflow-y: hidden;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

#LstSousFamille .Div_Catalogue,
.LigneProduit,
#Div_Recommandations .LigneProduit{
    width:99%;
    margin:20px 0.5%;
    border-radius:var(--border-radius);
}
@media (min-width:260px){
    #LstSousFamille .Div_Catalogue,
    .LigneProduit{
        width:47%;
        margin-left:1.5%;
        margin-right:1.5%;
    }
    #Div_Recommandations .LigneProduit{
        width:50%;
    }
}
@media (min-width:768px){
    #LstSousFamille .Div_Catalogue,
    .LigneProduit{
        width:32.3%;
        margin-left:0.5%;
        margin-right:0.5%;
    }
    #Div_Recommandations .LigneProduit{
        width:33.3%;
    }
}
@media (min-width:992px){
    #LstSousFamille .Div_Catalogue,
    .LigneProduit{
        width:32.3%;
        margin-left:0.5%;
        margin-right:0.5%;
    }
    #Div_Recommandations .LigneProduit{
        width:25%;
    }
}
@media (min-width:1200px){
    #LstSousFamille .Div_Catalogue,
    .LigneProduit{
        width:24%;
    }
    #Div_Recommandations .LigneProduit{
        width:20%;
    }
}
@media (min-width:1440px){
    #Div_Recommandations .LigneProduit{
        width:16.7%;
    }
}
#LstSousFamille .LienFamille,
.LigneProduit a{
    color:var(--color-link);
}
.LigneProduit{
    margin-bottom:20px;
    min-height:240px;
    border-color:var(--color-white);
}
@media (min-width:480px){
    .LigneProduit{
        min-height:340px;
    }
}
.liPhoto{
    margin-bottom:8px;
    height:auto;
    min-height:100px;
    line-height:initial;
    border-radius:var(--border-radius);
}
.Div_CatPhoto,
.Div_CatPhoto a,
.Div_CatPhoto img{
    border:none;
    border-radius:var(--border-radius);
    height:auto;
    line-height:normal;
}
.Div_CatPasPhoto{
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:100px;
    max-height:200px;
    line-height:25px;
    height:auto;
    font-size:12px;
}
.Div_CatInfo{
    border:none !important;
}
.LigneProduit .liNomprod{
    min-height:35px;
}
.LigneProduit .liPlusInfos a{
    display:inline-block;
}
.LigneProduit .liPlusInfos a .btn{
    border-radius:50vh;
}

#Div_Recommandations{
    position:relative;
    height:450px;
    text-align:center;
    overflow-x:auto;
    overflow-y:hidden;
    white-space:nowrap;
}

/*
.scroll-zone {
    position: relative;
    padding: 0;
    overflow: hidden;
}
.scroll-zone .right-button,
.scroll-zone .left-button{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    padding:15px;
    background-color:transparent;
    border:none;
    outline:none;
    cursor:pointer;
    z-index:9;
}
.scroll-zone .left-button{
    left:0;
}
.scroll-zone .right-button{
    right:0;
}
.scroll-zone .right-button i,
.scroll-zone .left-button i{
    font-size:40px;
    color:var(--color-text);
    opacity:0.75;
}
.scroll-zone .right-button:hover i,
.scroll-zone .left-button:hover i{
    opacity:1;
}

.scroll-zone .Div_Catalogue{
    display:inline-block;
    justify-content:center;
    align-items:center;
    text-align:center;
    min-width:calc(50% - 20px);
    padding:0 15px;
    margin:1px 10px;
    border:none;
    overflow:hidden;
}
@media screen and (min-width: 480px){
    .scroll-zone .Div_Catalogue{
        min-width:calc(33.3% - 20px);
    }
}
@media screen and (min-width: 768px){
    .scroll-zone .Div_Catalogue{
        min-width:calc(25% - 20px);
    }
}
@media screen and (min-width: 992px){
    .scroll-zone .Div_Catalogue{
        min-width:calc(20% - 20px);
    }
}
@media screen and (min-width: 1200px){
    .scroll-zone .Div_Catalogue{
        min-width:calc(16.6% - 20px);
    }
}
*/

/**/

#ProduitBandeauFamille{
    display:table;
    margin:10px 0 30px 0;
    width:100%;
}
#ProduitBandeauFamille .PhotoFamille,
#ProduitBandeauFamille .NomFamille{
    display:table-cell;
    vertical-align:middle;
}
#ProduitBandeauFamille .PhotoFamille{
    width:100px;
}
#ProduitBandeauFamille .PhotoFamille img{
    max-height:100px;
}
#ProduitBandeauFamille .NomFamille h2{
    margin-top:5px;
}
#ProduitBandeauFamille .NomFamille h2 a{
    display:inline-block;
    padding:6px 12px;
    font-family:var(--font-main);
    font-size:15px;
    line-height:normal;
    font-weight:600;
    background-color:var(--color-primary);
    color:var(--color-text);
    border-radius:50vh;
}
#ProduitBandeauFamille .NomFamille a.retour,
#TitreCatSousFamilleDescWeb a.retour{
    display:inline-block;
    margin:5px 10px;
    padding:4px 8px;
    border-radius:50vh;
    border:2px solid var(--color-secondary);
    font-style:normal;
    font-size:13px;
}
#ProduitBandeauFamille .NomFamille a.retour:hover,
#TitreCatSousFamilleDescWeb a.retour:hover{
    background-color:var(--color-primary-light);
}

/* pour arrondis forcés sur images familles */
.Div_CatPhoto a{
    display:inline-block;
    width:auto;
    border-radius:50vh;
    overflow:hidden;
}
#Catalogue .TitrePhoto > a{
    display:inline-block;
}
#Catalogue .TitrePhoto > img,
#Catalogue .TitrePhoto > a > img,
#ProduitBandeauFamille .PhotoFamille img{
    border-radius:50vh;
}
#Catalogue .TitrePhoto > img,
#Catalogue .TitrePhoto > a > img{
    max-height:120px;
}
.TitrePhoto,
.TitreDescWeb{
    display:table-cell;
    vertical-align:middle;
}

/**/
#ContainerTopVentes,
#ContainerCataloguesSaisonniers{
    height:auto;
    margin-top:5px;
    margin-bottom:5px;
    text-align:center;
}
#ContainerTopVentes > div,
#ContainerCataloguesSaisonniers > div{
    height:100%;
    padding-top:5px;
    padding-bottom:15px;
    border:2px solid var(--color-tertiary);
    overflow:hidden;
}
#ContainerTopVentes h3,
#ContainerCataloguesSaisonniers h3{
    color:var(--color-tertiary);
}

#TopVentes{
    width:auto;
    border-radius:calc(4 * var(--border-radius));
}
#CataloguesSaisonniers{
    font-size:0;
}
#CataloguesSaisonniers *{
    font-size:var(--font-main-size);
}
#TopVentes .LigneProduit,
#CataloguesSaisonniers .LigneProduit{
    border:none;
    min-height:125px;
    margin-left:0;
    margin-right:0;
}
#ContainerCataloguesSaisonniers .btn{
    white-space:normal;
}

#TopVentes .LigneProduit .liRef,
#TopVentes .LigneProduit .liDesignCompl,
#TopVentes .LigneProduit .liFamille,
#TopVentes .LigneProduit .liPrix,
#TopVentes .LigneProduit .liPlusInfos,
#TopVentes .LigneProduit .liQteAcheter{
    display:none;
}

@media (min-width:768px){
    #ContainerTopVentes,
    #ContainerCataloguesSaisonniers{
        min-height:220px;
    }
}

@media (min-width:992px){
    #ContainerTopVentes,
    #ContainerCataloguesSaisonniers{
        min-height:260px;
    }
    #TopVentes .LigneProduit{
        width:31.3%;
        margin-left:1%;
        margin-right:1%;
    }
}

@media (min-width:1200px){
    #ContainerTopVentes,
    #ContainerCataloguesSaisonniers{
        min-height:300px;
    }
}

@media (max-width:1599px){
    #CataloguesSaisonniers .LigneProduit{
        width:100%;
        margin-left:0;
        margin-right:0;
    }
}
@media (min-width:1600px){
    #ContainerTopVentes,
    #ContainerCataloguesSaisonniers{
        min-height:320px;
    }
    #CataloguesSaisonniers .LigneProduit{
        width:31.3%;
        margin-left:1%;
        margin-right:1%;
    }
}

/* TopVentes / CataloguesSaisonniers slider */
@media (max-width: 991px) {
    #ContainerTopVentes .slide-on-xs{
        position: relative;
        overflow: hidden;
    }
    #ContainerTopVentes .slide-on-xs .slider-wrapper{
        display: flex;
        transition: transform 0.3s ease-in-out;
        width: 100%;
    }
    #ContainerTopVentes .slide-on-xs .LigneProduit{
        min-width: 100%;
        flex-shrink: 0;
        margin-bottom: 0;
    }
    #ContainerTopVentes .slider-dots{
        text-align: center;
        margin-top: 15px;
        display: block;
    }
    #ContainerTopVentes .slider-dot{
        display: inline-block;
        width: 12px;
        height: 12px;
        background: #ccc;
        border-radius: 50%;
        margin: 0 5px;
        cursor: pointer;
        transition: background 0.3s;
    }
    #ContainerTopVentes .slider-dot.active{
        background: var(--color-primary);
    }
}
@media (min-width: 992px) {
    #ContainerTopVentes .slider-nav,
    #ContainerTopVentes .slider-dots{
        display: none !important;
    }
    #ContainerTopVentes .slide-on-xs .slider-wrapper{
        display: block !important;
    }
    #ContainerTopVentes .slide-on-xs .LigneProduit{
        min-width: auto !important;
    }
}

@media (max-width: 1599px) {
    #ContainerCataloguesSaisonniers .slide-on-xs{
        position: relative;
        overflow: hidden;
    }
    #ContainerCataloguesSaisonniers .slide-on-xs .slider-wrapper{
        display: flex;
        transition: transform 0.3s ease-in-out;
        width: 100%;
    }
    #ContainerCataloguesSaisonniers .slide-on-xs .LigneProduit{
        min-width: 100%;
        flex-shrink: 0;
        margin-bottom: 0;
    }
    #ContainerCataloguesSaisonniers .slider-dots{
        text-align: center;
        margin-top: 15px;
        display: block;
    }
    #ContainerCataloguesSaisonniers .slider-dot{
        display: inline-block;
        width: 12px;
        height: 12px;
        background: #ccc;
        border-radius: 50%;
        margin: 0 5px;
        cursor: pointer;
        transition: background 0.3s;
    }
    #ContainerCataloguesSaisonniers .slider-dot.active{
        background: var(--color-primary);
    }
}
@media (min-width: 1600px) {
    #ContainerCataloguesSaisonniers .slider-nav,
    #ContainerCataloguesSaisonniers .slider-dots{
        display: none !important;
    }
    #ContainerCataloguesSaisonniers .slide-on-xs .slider-wrapper{
        display: block !important;
    }
    #ContainerCataloguesSaisonniers .slide-on-xs .LigneProduit{
        min-width: auto !important;
    }
}
/**/

#CustomSlider,
#ContainerTopVentes > div,
#ContainerCataloguesSaisonniers > div,
#ContainerBlog{
    border-radius:var(--border-radius);
}

@media (min-width:768px){
    #CustomSlider,
    #ContainerTopVentes > div,
    #ContainerCataloguesSaisonniers > div,
    #ContainerBlog{
        border-radius:calc(4 * var(--border-radius));
    }
}

/**/

#ContainerBlog{
    margin:15px auto;
    border:2px solid var(--color-black);
    text-align:center;
}
#ContainerBlog p{
    padding:var(--border-radius);
}
#BlogTxt p a{
    font-weight:400;
}
#BlogTxt p br{
    display:none;
}
@media (min-width: 480px) {
    #ContainerBlog p{
        margin-top:10px;
    }
}
@media (min-width: 768px) {
    #ContainerBlog{
        text-align:left;
    }
    #ContainerBlog p{
        margin-top:15px;
    }
    #BlogTxt p a{
        font-weight:500;
    }
    #BlogTxt p br{
        display:inline;
    }
}
@media (min-width: 992px) {
    #BlogTxt p a{
        font-weight:600;
    }
}

/**/
.LienBarNav{
    display:none;
}
#ProduitBandeauFamille .NomFamille a.retour,
#TitreCatSousFamilleDescWeb a.retour{
    display:inline-block;
    margin:5px 10px;
    padding:4px 8px;
    border-radius:50vh;
    border:2px solid var(--color-secondary);
    font-style:normal;
}
#TitreCatSousFamilleDescWeb a.retour{
    margin:5px 0;
}
#ProduitBandeauFamille .NomFamille a.retour:hover,
#TitreCatSousFamilleDescWeb a.retour:hover{
    background-color:var(--color-primary-light);
}

#MenuGaucheContenu #MenuCatalogue .dropdown-menu ul li a,
ul.ListeFiltreAttribut li label{
    font-size:15px;
    margin-top:2px;
    margin-bottom:2px;
}
#MenuGauche a:focus,
#MenuGauche a:hover{
    text-decoration:none;
}

/* filtres attributs */
#FiltresTitre{
    margin-bottom:15px;
}
.TitreBlocFiltreAttribut{
    display:none;
}
.TitreFiltreAttribut:before,
#MenuGaucheContenu #MenuCatalogue > .dropdown > a:before{
    margin:0 10px 0 0;
}

#MenuGaucheContenu #MenuCatalogue > .dropdown > a,
fieldset .TitreFiltreAttribut{
    margin:4px 0;
    padding:2px 0;
    font-weight:normal;
    font-size:var(--font-main-size);
    text-transform:none;
}
legend.TitreFiltreAttribut:active,
legend.TitreFiltreAttribut:focus,
legend.TitreFiltreAttribut:hover{
    text-decoration:underline;
}
#MenuGaucheContenu #MenuCatalogue > .dropdown > a:before,
fieldset .TitreFiltreAttribut:before,
fieldset.open .TitreFiltreAttribut:before{
    content:'';
    display:inline-block;
    width:10px;
    height:10px;
    border-radius:50vh;
    background-color:var(--menu-bg-color);
}
#MenuGaucheContenu #MenuCatalogue > .dropdown > a.itemN0:before,
fieldset .TitreFiltreAttribut.itemN0:before,
fieldset.open .TitreFiltreAttribut.itemN0:before{
    background-color:var(--bg-color-eveil);
}
#MenuGaucheContenu #MenuCatalogue > .dropdown > a.itemN1:before,
fieldset .TitreFiltreAttribut.itemN1:before,
fieldset.open .TitreFiltreAttribut.itemN1:before{
    background-color:var(--bg-color-construc);
}
#MenuGaucheContenu #MenuCatalogue > .dropdown > a.itemN2:before,
fieldset .TitreFiltreAttribut.itemN2:before,
fieldset.open .TitreFiltreAttribut.itemN2:before{
    background-color:var(--bg-color-societe);
}
#MenuGaucheContenu #MenuCatalogue > .dropdown > a.itemN3:before,
fieldset .TitreFiltreAttribut.itemN3:before,
fieldset.open .TitreFiltreAttribut.itemN3:before{
    background-color:var(--bg-color-accessoires);
}
#MenuGaucheContenu #MenuCatalogue > .dropdown > a.itemN4:before,
fieldset .TitreFiltreAttribut.itemN4:before,
fieldset.open .TitreFiltreAttribut.itemN4:before{
    background-color:var(--bg-color-pleinair);
}
#MenuGaucheContenu #MenuCatalogue > .dropdown > a.itemN5:before,
fieldset .TitreFiltreAttribut.itemN5:before,
fieldset.open .TitreFiltreAttribut.itemN5:before{
    background-color:var(--bg-color-loisirs);
}
#MenuGaucheContenu #MenuCatalogue > .dropdown > a.itemN6:before,
fieldset .TitreFiltreAttribut.itemN6:before,
fieldset.open .TitreFiltreAttribut.itemN6:before{
    background-color:var(--bg-color-nouveautes);
}
#MenuGaucheContenu #MenuCatalogue > .dropdown > a.itemN7:before,
fieldset .TitreFiltreAttribut.itemN7:before,
fieldset.open .TitreFiltreAttribut.itemN7:before{
    background-color:var(--bg-color-finserie);
}

fieldset .TitreFiltreAttribut:after,
#MenuGaucheContenu #MenuCatalogue > .dropdown > a: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,
#MenuGaucheContenu #MenuCatalogue > .dropdown.open > a:after{
    content:'\e9c6';
}
.dropdown.menu-familles{
    margin-bottom:4px;
}
.dropdown.menu-familles .dropdown-menu,
ul.ListeFiltreAttribut{
	display: block;
    opacity: 0;
    height: 0;
    overflow: hidden;
    transition: all 0.4s ease-in-out;
}
ul.ListeFiltreAttribut li{
	padding:0 0 0 20px;
}
ul.ListeFiltreAttribut li label{
	margin-left:4px;
	margin-bottom:0;
	text-transform:none;
    font-size:15px;
	font-weight:normal;
}
.open.dropdown.menu-familles .dropdown-menu,
.open ul.ListeFiltreAttribut{
	opacity: 1;
    height: auto;
    transition: all 0.2s ease-in-out;
}

/**/
.PaginationHaut,
.PaginationBas{
	clear:both;
	border:none;
    height:auto;
	padding:15px 0;
    line-height:35px;
}
.PaginationHaut span.Page,
.PaginationBas span.Page{
	border-top-color:transparent;
	border-bottom-color:transparent;
	cursor:default;
}
.PaginationHaut span.Page:hover,
.PaginationBas span.Page:hover{
	background-color:var(--color-secondary);
}
.PaginationHaut span.Filtre,
.PaginationBas span.Filtre{
	font-size:var(--font-main-size);
}
.PaginationHaut .Numero,
.PaginationBas .Numero{
	float:right;
}
span.Page{
    background-color:var(--color-secondary);
    color:var(--color-white);
}
#PaginationArticleDeA{
    color:var(--color-gray);
}
.btn-group > .btn:first-child:not(:last-child):not(.dropdown-toggle),
.btn-group > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle),
.btn-group > .btn:last-child:not(:first-child),
.btn-group > .dropdown-toggle:not(:first-child){
    border-radius:var(--border-radius);
}
.Numero .Page,
.Numero .btn{
    margin:2px;
}

/* Fiche produit */
#Produit .Titre{
    display:block;
    text-align:left;
}
#NomProd{
    display:none;
}
.Div_ImageProd{
    width:100%;
    float:none;
    border:none;
}


#PhotoProdIMG{
	max-width:100%;
	border:none;
	margin-top:10px;
	margin-bottom:10px;
}

.Div_BlocProd,
.zoomPad,
.Div_NavProd,
.Div_AutresVuesProd{
    width:100%;
}
/*
.videothumb{
    position:relative;
    z-index:1;
}
.videothumb::before{
    content:'';
    display:block;
    position:absolute;
    width:100%;
    height:100%;
    top:0;
    left:0;
    background:url('/images/OIKAOIKA/btn-video.png') center center no-repeat;
    background-size:contain;
    cursor:pointer;
    z-index:2;
}
.videothumb:hover::before{
    opacity:0.5;
}
*/

.Div_AutresVuesProd{
    width:100%;
    min-height:120px;
    height:auto;
}

ul#thumblist{
    display:flex;
    justify-content:center;
    align-items:center;
}
ul#thumblist li a{
    border:2px solid transparent;
    margin:2px 4px;
    padding:2px;
}
ul#thumblist li a.zoomThumbActive,
ul#thumblist li a:hover{
    border:2px solid var(--color-primary);
}
ul#thumblist li img{
    width:auto;
    max-height:75px;
}
#ProduitFormArt{
    display:inline-block;
    min-height:50px;
}
#ProduitFormArt .LigneAcheter label{
    display:none;
}
.form-inline .form-control.input-qte{
    display:inline-block;
    width:75px;
    margin:3px 0 3px 1em;
    text-align:center;
}
#TB_Produit{
    margin:0 auto;
    text-align:right;
}
#TB_Produit .TrPrix,
#TB_Produit .TrAcheter{
    text-align:center;
}
@media (min-width: 400px){
    #TB_Produit .TrPrix{
        text-align: right;
        margin-right: 195px;
    }
    #TB_Produit .TrAcheter{
        text-align: right;
    }
}
#TB_Produit #MontantFormate{
    font-size:18px;
}
.Div_RefProduit{
    margin:15px 0;
    padding:0;
    color:var(--color-text);
    font-weight:300;
    font-size:var(--font-main-size);
    text-align:left;
}
#BlocInfoLivraison{
    display:inline-block;
    margin:5px;
}
@media (min-width:245px){
    #BlocInfoLivraison{
        margin-left:30px;
    }
}
#InfoLivraison a{
    display:block;
}
#InfoLivraison a:focus img,
#InfoLivraison a:hover img{
    filter:drop-shadow(1px 1px 3px rgba(0,0,0,0.5));
}

#Div_Labels{
    margin:15px auto;
}
#Div_Labels .label{
    margin:2px 4px;
    padding:2px 8px;
    border-radius:50vh;
    font-size:15px;
    font-weight:600;
    text-transform:none;
}
#Div_Labels .label-default{
    --bg:var(--color-danger);
    background-color:var(--bg);
    color:hwb(from oklch(from var(--bg) l 0 0) h calc(((b - 50) * 999)) calc(((w - 50) * 999)));
}
#Div_Labels .label-1{
    --bg:var(--color-warning);
    background-color:var(--bg);
    color:hwb(from oklch(from var(--bg) l 0 0) h calc(((b - 50) * 999)) calc(((w - 50) * 999)));
}
#Div_Labels .label-2{
    --bg:var(--color-primary);
    background-color:var(--bg);
    color:hwb(from oklch(from var(--bg) l 0 0) h calc(((b - 50) * 999)) calc(((w - 50) * 999)));
}
#Div_Labels .label-3{
    --bg:var(--color-secondary);
    background-color:var(--bg);
    color:hwb(from oklch(from var(--bg) l 0 0) h calc(((b - 50) * 999)) calc(((w - 50) * 999)));
}
#Div_Labels .label-6{
    --bg:var(--color-tertiary);
    background-color:var(--bg);
    color:hwb(from oklch(from var(--bg) l 0 0) h calc(((b - 50) * 999)) calc(((w - 50) * 999)));
}
#Div_Labels .label-22{
    --bg:var(--color-info);
    background-color:var(--bg);
    color:hwb(from oklch(from var(--bg) l 0 0) h calc(((b - 50) * 999)) calc(((w - 50) * 999)));
}

#PhotosNonContractuelles{
    margin:10px auto;
}

#BlocDecouvrirAnimation.organiser-atelier{
    background-color:var(--bg-color-pleinair);
    color:var(--color-white);
}
#BlocDecouvrirAnimation h3,
#BlocDecouvrirAnimation p{
    color:var(--color-white);
}
#BlocDecouvrirAnimation .btn{
    color:var(--color-secondary);
}
#BlocDecouvrirAnimation .btn:focus,
#BlocDecouvrirAnimation .btn:hover{
    color:var(--color-black);
}
.devenir-conseiller,
.devenir-conseiller p,
.devenir-conseiller li,
.organiser-atelier,
.organiser-atelier p,
.organiser-atelier li{
    line-height:1.8;
}
@media (min-width:992px){
    .organiser-atelier,
    .organiser-atelier p,
    .organiser-atelier li{
        font-size:18px;
    }
    .organiser-atelier .btn{
        margin-top:2em;
    }
}
@media (min-width:1200px){
    .devenir-conseiller,
    .devenir-conseiller p,
    .devenir-conseiller li{
        font-size:17px;
    }
    .devenir-conseiller .btn{
        margin-top:1em;
    }
}

#Div_Recommandations{
    border:2px solid var(--color-secondary);
    border-radius:var(--border-radius);
}
#Div_Recommandations h4.SousTitre{
    text-align:left;
    font-size:24px;
    color:var(--color-secondary);
}
#Div_Recommandations .LigneProduit{
    min-height:200px;
}

@media (min-width:480px){
    .Div_ImageProd{
        width:85%;
        margin-left:auto;
        margin-right:auto;
    }
}

@media (min-width:768px){
	.form-inline #TB_Produit .LigneChoixLot select.form-control{
        width:90%;
    }
    .Div_BlocProd,
    .zoomPad,
    .Div_NavProd,
    .Div_AutresVuesProd{
        width:100%;
    }
    .Div_ImageProd{
        width:75%;
    }
    #ProduitFormArt{
        width:100%;
    }
    #DescWeb .btn.oikanim{
        max-width:100%;
    }
}

@media (min-width:992px){
    .Div_ImageProd{
        width:100%;
        display:flex;
        flex-direction:row;
        flex-wrap:nowrap;
        justify-content:space-between;
        align-items:flex-start;
    }
    ul#thumblist{
        display:block;
        width:80px;
    }
    #ImgProd1{
        width:calc(100% - 80px);
    }
}

/* panier */
#Caddie .SousTitre,
#ValEtape2 .SousTitre,
#Recapitulatif .SousTitre{
    font-family: var(--font-main);
    font-size: var(--font-main-size);
    font-weight: bold;
}
#Caddie .SousTitre{
    font-weight:500;
}

#TB_Caddie{
    font-size:15px;
}
#TB_Caddie a{
    color:var(--color-secondary-dark);
    text-decoration:underline;
}
#TB_Caddie a:focus,
#TB_Caddie a:hover{
    text-decoration:none;
}

#TB_CaddieB #Entete th,
#TB_HistoCde .Entete,
#TB_HistoCde #Entete td,
#TB_HistoCde #Entete th,
#TB_CdeDetail #Entete,
#TB_Cde #Entete,
#TB_CdeDetail .Entete,
#TB_HistoFact .Entete,
#TB_HistoFact #Entete td,
#TB_HistoFact #Entete th,
#TB_FactDetail #Entete,
#TB_Fact #Entete,
#TB_FactDetail .Entete,
#TB_Recapitulatif_Panier #Entete,
#TB_Recapitulatif_Panier .Entete,
#TB_Recapitulatif #Entete{
    background-color:var(--color-primary-light);
}
#TB_Cde td,
#TB_Fact td{
    border-color:#ddd;
}
#TB_Cde .Entete,
#TB_Fact .Entete,
#TB_Recapitulatif .Entete{
    background-color:var(--color-secondary);
    color:var(--color-black);
}
#TB_Cde .Contenu,
#TB_Fact .Contenu{
    background-color:var(--color-white);
}
#TB_CaddieB_Totaux .Entete,
#TB_CaddieB_Totaux .Montant{
    font-weight:500;
}
#TB_CaddieB_Totaux .Montant{
    background-color:var(--color-secondary-lightest);
}
#TB_CaddieB_Totaux #Totaux_LigneTotalTTC .Entete,
#TB_CaddieB_Totaux #Totaux_LigneTotalTTC .Montant{
    font-weight:bold;
}

#TB_Recapitulatif_Recap,
#TB_Recapitulatif_Panier{
    font-size:13px;
}
.panier-datatable #TB_Recapitulatif_Panier th{
    font-weight:500;
}
#TB_Recapitulatif_Panier_Totaux .Entete,
#TB_Recapitulatif_Panier_Totaux .Montant{
    font-size:14px;
    font-weight:normal;
}
#TB_Recapitulatif_Panier_Totaux #Totaux_LigneTotalTTC .Entete,
#TB_Recapitulatif_Panier_Totaux #Totaux_LigneTotalTTC .Montant{
    font-size:16px;
    font-weight:bold;
}

#PaiementEntete,
#PaiementContenu{
    background-color:var(--color-primary-light);
}

#MsgFraisPort{
    font-size:13px;
}

.nb-prod{
    position:absolute;
    top:0;
    right:-4px;
    display:flex;
    width:18px;
    height:18px;
    justify-content:center;
    align-items:center;
    padding:2px;
    border-radius:50%;
    background-color:var(--color-warning);
    color:var(--color-black);
    font-size:14px;
}

.menu-panier,
.menu-compte{
    display:inline-block;
}
.menu-panier .dropdown-backdrop,
.menu-compte .dropdown-backdrop{
    display:none;
}
.menu-panier .dropdown-menu,
.menu-compte .dropdown-menu{
    position:absolute;
    top:40px;
    left:initial;
    right:0;
    min-width:250px;
    padding:2px 4px;
    background-color:var(--color-white);
    border:2px solid var(--color-primary);
    border-radius:15px;
    box-shadow:none;
    z-index:3;
}
#MenuPanier.well{
    padding:5px;
}
#TB_MenuPanier .ColPhoto img{
    min-width:25px;
}
#MenuPanier .table-condensed > tbody > tr > td,
#MenuPanier .table-condensed > tbody > tr > th,
#MenuPanier .table-condensed > tfoot > tr > td,
#MenuPanier .table-condensed > tfoot > tr > th,
#MenuPanier .table-condensed > thead > tr > td,
#MenuPanier .table-condensed > thead > tr > th{
    padding:2px 1px;
}
@media (min-width: 768px){
    .menu-panier .dropdown-menu,
    .menu-compte .dropdown-menu{
        padding:10px;
    }
    #MenuPanier.well{
        padding:10px;
    }
    #TB_MenuPanier .ColPhoto img{
        min-width: 35px;
    }
}

#DroitInfo,
#InfoPerso #DroitInfo{
    font-family:var(--font-main);
    font-size:12px;
}

#Identification .Contenu{
    font-size:15px;
}


#InfoReunion,
#InfoVendeur{
    margin:10px auto;
    border:2px solid var(--color-secondary);
    border-radius:var(--border-radius);
    overflow:hidden;
}
#InfoReunion{
    margin-top:0;
    background:var(--color-secondary);
}
#InfoReunion .Titre{
    background:var(--color-secondary);
    font-family:var(--font-main);
    font-size:var(--font-main-size);
    color:var(--color-text);
}
@media (min-width: 768px){
    #InfoReunion .Titre{
        font-size:18px;
    }
}
#InfoReunion #ComplementInfo{
    text-align: center;
}
#InfoVendeur{
    margin-top:0;
    margin-bottom:15px;
    border-color:var(--color-secondary);
}
#InfoReunion + #InfoVendeur{
    margin-top:10px;
    margin-bottom:15px;
}
#InfoVendeur .Titre{
    font-size:24px;
    color:var(--color-secondary);
}
#InfoVendeur #TB_InfoVendeur{
    min-height:30px;
}

.MsgLogin{
    font-size:13px;
}
.MsgLogin #Deconnection a{
    color:var(--color-link);
}
.MsgLogin #Deconnection a:focus,
.MsgLogin #Deconnection a:hover{
    text-decoration:none;
}

#TB_HistoCde th,
#TB_Cde th,
#TB_CdeDetail th,
#TB_CdeDetailTotaux th,
#TB_Fact th,
#TB_FactDetail th,
#TB_FactDetailTotaux th,
#TB_HistoFact th{
    font-size:15px;
}
#TB_HistoCde td,
#TB_Cde td,
#TB_CdeDetail td,
#TB_CdeDetailTotaux td,
#TB_Fact td,
#TB_FactDetail td,
#TB_FactDetailTotaux td,
#TB_HistoFact td{
    font-size:14px;
}
#TB_HistoCde .ColEtat,
#TB_HistoFact .ColInfo{
    font-size:13px;
}

.NumCmdeMoka{
    font-size:11px;
}

/* media queries */

@media (min-width:1200px){
	#header .container{
		padding-top:15px;
	}
}

@media (min-width:992px) and (max-width:1199px){
	#header .container{
		padding-top:15px;
	}
}

@media (min-width:768px){
	.main-menu ul li.dropdown:hover .dropdown-menu{
		display:block;
	}
	.navbar-collapse{
		margin-left:0;
	}
}

@media only screen and (max-width:767px){
	#header{
		padding-bottom:10px;
		background-position:bottom left;
	}
	#header p{
		margin-right:60px;
	}
	#header .container{
		background-size:auto 75%;
	}
	.navbar-collapse{
		background:var(--color-white);
	}
	.main-menu{
		border-bottom:1px solid rgba(0, 0, 0, 0.1);
		font-size:14px;
	}
	.main-menu > ul{
		margin:0;
		padding-left:0;
		text-align:left;
	}
	.dropdown-menu{
		position:static;
		float:none;
		box-shadow:none;
		border:none;
	}
	.dropdown-menu ul li a{
		color:var(--color-text);
	}
	.dropdown-menu > ul{
		box-shadow:none;
	}
	.dropdown-menu > ul > li > a{
		padding:10px 15px;
		border:none;
	}
}

@media (max-width:991px){
	.footer-oika{
		text-align:center;
	}

    .navbar-header{
        float:none;
    }
    .navbar-toggle{
        display:block;
    }
    .navbar-collapse{
        border-top:1px solid transparent;
        box-shadow:inset 0 1px 0 rgba(255,255,255,0.1);
    }
    .navbar-collapse.collapse{
        display:none!important;
    }
    .navbar-nav{
        float:none!important;
        margin:7.5px -15px;
    }
    .navbar-nav > li{
        float: none;
    }
    .navbar-nav > li > a{
        padding-top:10px;
        padding-bottom:10px;
    }
    .navbar-text{
        float:none;
        margin:15px 0;
    }
    .navbar-collapse.collapse.in{ 
        display:block!important;
    }
    .collapsing{
        overflow:hidden!important;
    }
}

@media (max-width:1199px){
}

@media only screen and (max-width:400px){
	#header .container{
		background-size:auto 60%;
	}
}

@media (min-width:1380px){
	.container{
		width:1340px;
	}
}