/*======  debug  ======*/

/*
#outer_container {
    outline: dashed 1px #660099;
}

#outer_container > * {
    outline: dashed 1px #0000AA;
}

#outer_container > * > * {
    outline: dashed 1px #009900;
}

#outer_container > * > * > * {
    outline: dashed 1px #990000;
}


nav {
    outline: 2px solid green;
}
*/
/*
#top_header_layer:before {
        content: 'MQ';
        display: block;
        color: #fff;
        clear: both;
        position: absolute;
        font-size: small;
        right: 45px;
        top: 0;
        padding: 3px;
}

@media only screen and (max-width: 720px) {
    #top_header_layer:before {
        content: 'MQ Narrow';
    }
}

@media only screen and (min-width: 721px) and (max-width: 991px) {
    #top_header_layer:before {
        content: 'MQ Medium';
    }
}

@media only screen and (min-width: 992px) {
    #top_header_layer:before {
        content: 'MQ Wide';
    }
}
*/


/*======  base  ======*/

body {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 300;
    color: #696763;
    margin: 0;
    padding: 0;
}

ul, ol, li, p, h1, h2, h3, h4, h5, h6, form, fieldset {
    margin: 0; padding: 0;
}

aside, div, span, ul, ol, li, p, h1, h2, h3, h4, h5, h6, form, fieldset, a {
    box-sizing: border-box;
}

img {
    border: none;
}

img.responsive {
    width: 100%;
}

p {
    margin: 0 0 10px;
/*    color: #696763; */
    line-height: 1.5em;
}

p.link_selection {
    display: block;
    text-align: right;
}

a.link_selection {
    font-size: 1.15em;
}

a.learn_more:before,
a.link_selection:before {
    content: '\21D2';
    display: inline-block;
    margin-right: 6px;
}

.label, label {
    color: #666;
}

input, button, select, textarea {
    font-size: inherit;
}

/*************************
***** LINKS & BRAND *****
**************************/
/* a { color: #696763; outline: none; text-decoration: none; transition: 300ms; } */
a { color: #084197; outline: none; text-decoration: none; transition: 300ms; }
a:hover, a:focus, a:active { color: red; outline: none; outline-offset: 0; }

/*************************
***** COLORS & BRAND *****
**************************/
.bleu-fonce {color: #084197;} /*rgba(8, 65, 51, 1.0)*/
.bleu-moyen {color: #9096CA;} /*rgba(144, 150, 202, 1.0)*/
.bleu-clair {color: #D4D4EA;} /*rgba(212, 212, 234, 1.0)*/
.bg-bleu-fonce {background-color: #084197;}
.bg-bleu-moyen {background-color: #9096CA;}
.bg-bleu-clair {background-color: #D4D4EA;}

:root {
	--bleu-fonce: #084197;
	--bleu-moyen: #9096CA;
	--bleu-clair: #D4D4EA;
}

/*************************
***** TYPOGRAPHIE *****
**************************/
h1,h2,#brand {font-family: 'Lobster Two', cursive; color: #084197; font-weight: 300;}
h3,
h4,
h5,
h6 { font-family: 'Roboto', sans-serif; }

* + h3 {
    margin-top: 15px;
}

h1 {
    font-size: 2.6em;
}

h2 {
    margin-bottom: 15px;
}

h3 {
    margin-bottom: 10px;
}

h1.subtitle {
    color: #9096CA;
    font-family: 'Roboto', sans-serif;
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 22px;
    margin-top: 10px;
}

h1.slogan {
    font-size: 48px;
    text-align: left;
}

h2.title {
    font-size: 28px;
}

h3.title {
    font-size: 24px;
}

h2.title,
h3.title {
    display: block;
    font-family: 'Lobster Two', cursive;
    font-weight: 700;
    color: #084197;
    margin: 0 0px 30px;
    text-transform: none;
    position: relative;
    text-align: center;
    padding-bottom: 6px;
    z-index:3;
    
}

h3.title > *,
h2.title > * {
    color: #084197;
    display: inline-block;
    background-color: white;
    padding: 0 6px;
}

h3.title:after,
h2.title:after {
    content: " ";
    position: absolute;
    border: 1px solid #E8E8E8;
    bottom: 50%;
    left: 0;
    width: 100%;
    height: 0;
    z-index: -2;
}

/*************************
*** UI BUTTONS & BRAND ***
**************************/
button {-webkit-transition: 300ms; -moz-transition: 300ms; -o-transition: 300ms; transition: 300ms;}

button,
input[type='submit'],
.buttonize {
    display: inline-block;
    padding: 3px 6px;
    border-radius : 0px;
    cursor: pointer;
    text-align: center;
    line-height: 1.5em;
    background-color: #9096CA;
    color: #fff;
    border: solid 1px #9096CA;
/*
    background-color: #D4D4EA;
    color: #084197;
*/
}

/*Changement d'état Form Button Submit*/
button:hover,
input[type='submit']:hover,
.buttonize:hover {
    color: #fff; /*002299
    border-color: #999;*/
    background-color: #084197;
    -webkit-transition: 300ms;
    -moz-transition: 300ms;
    -o-transition: 300ms;
    transition: 300ms;
}

button:focus,
input[type='submit']:focus,
.buttonize:focus {
    color: #fff; /*002299*/
    border-color: #0b3473;
}

button:active,
input[type='submit']:active,
.buttonize:active {
    color: #fff;
    border-color: #084197; /*d45900*/
}

.buttonize.neutral,
button.neutral {
    border: solid 1px #CCC;
    background-color: #F0F0F0;
    color: #696763;
}

.buttonize.neutral:hover,
.buttonize.neutral:focus,
button.neutral:hover
button.neutral:focus {
    color: #084197;
    border-color: #084197;
}

button[disabled],
input[disabled],
.buttonize.disabled,
button[disabled]:hover,
input[disabled]:hover,
.buttonize.disabled:hover,
button[disabled]:focus,
input[disabled]:focus,
.buttonize.disabled:focus,
button[disabled]:active,
input[disabled]:active,
.buttonize.disabled:active
 {
    border-color: #CCC !important;
    color: #AAA !important;
    background-color: #F0F0F0 !important;
    cursor: auto !important;
}

button.as-text {
   background-color: transparent;
   border: none;
   color: #084197;
   text-decoration: underline dotted 1px #084197;
}

.cta {
    display: inline-block;
    padding: 3px 5px;
    text-align: center;
    background-color: #c3cee9;
    color: #164377;
    color: #000066;
    border: solid 1px #536b88;
    border-radius: 3px;
    font-weight: bold;
}

a.cta:hover {
    color: #000033;
    border-color: #164377;
    text-decoration: none;
}

.pagination .page {
	color: #084197;
}

.pagination .page,
.pagination a {
    display: inline-block;
    padding: 2px;
    background-color: #fff;
    border: solid 1px #ccc;
    margin: 2px;
    min-width: 10px;
    text-align: center;
}

.pagination .page:hover,
.pagination a:hover {
	cursor: pointer;
    border-color: #084197; /*d45900*/
}

input[type="number"], input.number {
/*
    width: 50px;
    height: 33px;
*/
    border: 1px solid #e0e0e0;
    margin: 0;
    padding: 3px;
    text-align: center;
    color: #696763;
    vertical-align: middle;
}

.info_overlay .info_toggle {
    font-weight: bold;
    text-decoration: underline;
    color: #000099;
    cursor: pointer;
}

.info_overlay {
    display: inline-block;
    position: relative;
}

.info_overlay .info_content {
    display: none;
}

.info_overlay:hover .info_content,
.info_overlay:active .info_content {
    display: block;
    position: absolute;
    z-index: 100;
    background-color: #f5f5be;
    border: solid 1px #ccc;
    border-radius: 5px;
    padding: 5px;
    top: -23px;
    width: max-content;
    filter: drop-shadow(2px 6px 6px #999);
}

.info_overlay:hover .info_content.left,
.info_overlay:active .info_content.left {
    right: 15px;
}

.info_overlay:hover .info_content.right,
.info_overlay:active .info_content.right {
    left: 15px;
}

.tooltip {
	position: relative;
	text-decoration: underline dotted var(--bleu-fonce);
}

.tooltip:after {
	content: '';
	display: inline-block;
	color: var(--bleu-fonce);
	font-size: small;
	margin-left: 2px;
}

.tooltip.help:after {
	content: '[?]';
}

.tooltip .tooltip-text {
	display: none;
	position: absolute;
	z-index: 50;
	padding: 5px;
	background-color: var(--bleu-fonce);
	color: #F0F0F0;
	font-style: italic;
	font-size: small;
	border-radius: 8px;
	width: max-content;
	max-width: 200px;
	left: 50%;
	bottom: 100%;
	transform: translate(-50%, -8px);
	text-align: center;
	box-shadow: 4px 4px 4px 1px rgba(0,0,0, 0.25);
}

.tooltip:hover .tooltip-text:before {
	content: ' ';
	display: block;
	width: 1px;
	height: 1px;
	border: solid 7px transparent;
	border-top-color: var(--bleu-fonce);
	box-sizing: border-box;
	position: absolute;
	bottom: -13px;
	left: 50%;
}

.tooltip:hover {
	cursor: pointer;
}

.tooltip:hover .tooltip-text {
	display: block;
}

/*************************
*** UI BUTTONS & BRAND ***
**************************/
.icon {
    display: inline-block;
}

.icon.active {
    background-blend-mode: difference;
    background-color: #f5f5f5;
}

.error {
    color: #ab0000;
}

.error p {
    color: #ab0000;
}

input.error {
    background-color: #fdbe9b;
}

textarea.edited:invalid,
textarea.invalid,
input.edited:invalid,
input.invalid {
	outline: solid 1px #ab0000 !important;
	color: #ab0000 !important;
	background-color: #f0dcdc;
	box-shadow: #ab0000 0px 0px 6px 2px;
}

.visible {
    display: block;
}

.hidden {
    display: none !important;
}

table {
    border: solid 1px #e0e0e0;
    border-spacing: 0;
    width: 100%;
}

table th {
    padding: 6px;
}

table td {
    border-top: solid 1px #e0e0e0;
    padding: 6px;
}

table tr:nth-child(2n),
table tr.alt {
    background-color: #f0f0f0;
}

.warning {
    background-color: orange;
    color: black;
    padding: 6px;
    margin-bottom: 12px;
}

.warning a {
    color: red;
}

.orange {
	color: orange;
}

.red {
	color: #ab0000 !important;
}

.green {
	color: green ! important;
}

.info {
    /* color: #164377; */
    background-color: #f9f9f9;
}

div.info, p.info
{
    margin: 6px 0;
    padding: 6px;
    border: solid 1px #d5d5d5;
    border-radius: 5px;
}

div.info ul {
	margin: .5em 1em .5em 2em;
}

div.info ul li {
	margin: .5em 0;
}

.info.success,
.info.warning,
.info.notice {
	display: grid;
	grid-template-columns: 40px auto;
	padding: 0;
    border-style: solid;
    border-width: 1px;
    border-radius: 4px;
	align-items: center;
}

.info.notice:before,
.info.success:before,
.info.warning:before {
    font-weight: bold;
    display: block;
    padding: 14px 0;
    margin-right: .5em;
    font-size: large;
	text-align: center;
}

.info.success {
    border-color: green;
    background-color: lightgreen;
    color: green;
}

.info.success:before {
    content: '\2713';
    color: white;
    background-color: green;
}

.info.notice {
    border-color: #999;
    background-color: #F0F0F0;
    color: #999;
}

.info.notice:before {
    content: '?';
    background-color: #999;
    color: white;
}

.info .info-header {
	font-weight: bold;
	font-style: normal;
	display: block;
	padding: 7px 0;
}

.info .info-content {
	padding: .5em !important;
	grid-column: 1 / span 2;

}

.info.warning {
    border-color: orange;
    background-color: lightyellow;
    color: orange;
}

.info.warning:before {
    content: '!';
    background-color: orange;
    color: white;
}

.info-bar {
    display: block;
    position: fixed;
    padding: 0px;
    margin: auto;
    width: 100%;
    background-color: #E0E0E0;
    font-size: 12px;
    text-align: center;
}

.info-bar-content {
    padding: 5px 15px 15px;
    margin: 0 auto;
    background-color: #f0f0f0;
    max-width: 1272px;
    margin: 0 auto;
    text-align: center;
}

.info-bar-content p {
    padding: 3px;
    margin-bottom: 3px;
    text-align: center;
}

.btn {
    display: inline-block;
    padding: 6px 12px;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: 300;
    border: 0;
    line-height: 1.428571429;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 4px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
}

.btn.cta {
    background-color: #084197 !important;
    color: #fff !important;
    border: 0 none;
    border-radius: 0;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 600;
    margin-top: 0px;
    text-transform: uppercase;
    line-height: 1.9em;
}

.btn.cta:hover {
    background-color: #9096CA !important;
    color: #fff !important;
}

.input-group {
    position: relative;
    display: table;
    border-collapse: separate;
}

.input-group-btn, .input-group .form-control {
    display: table-cell;
}

.input-group-btn {
    white-space: nowrap;
    vertical-align: middle;
    position: relative;
}

.input-group-btn > .btn.btn-search-md {
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
}

.input-group-md .input-group-btn > .btn {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    padding: 6px 6px;
    font-size: 14px;
}

.input-group-md input {
    padding: 7px 5px;
    font-size: 14px;
    line-height: 1.18;
    border-radius: 0;
    border: thin solid #e0e0e0;
    color: inherit;
}

.input-group-lg > .form-control, .input-group-lg > .input-group-btn > .btn {
    /* height: 46px; */
    padding: 10px 16px;
    font-size: 18px;
    line-height: 1.18;
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
}

.pull-right {
    float: right !important;
}

.pull-left {
    float: left !important;
}

.text-center {
    text-align: center;
}

.nav {
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
}

.nav::before, .nav::after {
    display: table;
    content: "";
}

.nav > li {
    position: relative;
    display: block;
}

.nav-stacked > li {
    float: none;
}

.nav > li > a {
    position: relative;
    display: block;
    padding: 10px 15px;
}

.container_state_toggle {
    cursor: pointer;
}

.toggle_container .container_state_toggle:after {
    content: "\f078";
    font-family: 'Font Awesome 5 Free';
    display: inline-block;
    color: #bdbdbd;
    font-weight: bold;
    padding: 0 5px;
    width: 26px;
    
}

.toggle_container.active .container_state_toggle:after {
    content: "\f054";
}

.link-list {
    margin-top: 25px;
}

.link-list h3,
.link-list h3.label-aside {
    margin: 15px auto 8px;
}

.link-list h4.sub-title {
    text-align: center;
}

.link-list ul {
    margin-top: 8px;
}

.link-list li {
    list-style-type: none;
    padding: 3px 0;
}
.link-list a {
    color: #084197;
}

.link-list li a:before {
/*
    content: '\21D2';
    display: inline-block;
    margin-right: 6px;
*/
}

.more .summary {
    display: none;
}
.more .full {
    display: block;
}

.more .summary-toggle {
    display: block;
    width: 100%;
    text-align: center;
    padding: 3px;
    border: solid 1px #CCC;
    background-color: #F0F0F0;
    color: #696763;
}

.more .summary-toggle:hover {
    background-color: #F0F0F0;
    color: #fff;
    background-color: #084197;
}

.more.active .summary {
    display: block;
}
.more.active .full {
    display: none;
}

/******************************
 * copy-to-clipboard elements
 ******************************/

.copy-to-clipboard {
	position: relative;
}

.copy-to-clipboard.from-text {
	border-bottom: dashed 1px #084197;
}

.copy-to-clipboard.from-data {
	margin-left: 3px;
	color:  #9096CA;
}

.copy-to-clipboard:hover {
	cursor: pointer;
}

/******************************
 * copy-to-clipboard tooltips 
 ******************************/

.copy-to-clipboard.from-text:after {
	font-family: 'Font Awesome 5 Free';
	content: "\f0c5";
	font-size: small;
	color: #CCC;
	vertical-align: top;
	display: inline-block;
	margin-left: 4px;
}

.copy-to-clipboard:before {
	content: 'Cliquez pour copier le texte';
	position: absolute;
	z-index: 50;
	font-size: small;
	top: 50%;
	transform: translateY(-50%);
	left: 100%;
	margin-left: 5px;
	width: 200px;
	padding: 10px;
	border-radius: 5px;
	background: #9096CA;
	color: white;
	text-align: center;
	display: none;
	transition: background-color 300ms;
}

.copy-to-clipboard.left:before {
	left: auto;
	margin-left: 0;
	margin-right: 5px;
	right: 100%;
}

.copy-to-clipboard:hover:before {
	display: block;
	opacity: 1;
}

/*
.copy-to-clipboard:hover:after {
	content: "";
	font-family: 'Roboto', sans-serif;
	position: absolute;
	left: 100%;
	margin-left: -5px;
	top: 50%;
	transform:translateY(-50%);
	border: solid 10px #9096CA;
	border-color: transparent #9096CA transparent transparent;
	display: block;
}
*/

.copy-to-clipboard.copied:before {
	content: "Texte copié dans le presse-papier";
	background-color: #084197;
}

/*
.copy-to-clipboard.copied:after {
	border-color: transparent #084197 transparent transparent;
}
*/

blockquote.quote-sign {
	font-style: italic;
	margin-inline-start: 0;
	margin-inline-end: 0;
	margin-block-end: 0;
	margin-block-start: 0;
	padding: 2em;
	margin: 1em 2em;
	background-color: #f9f9f9;
    border: solid 1px #d5d5d5;
    border-radius: 5px;
	position: relative;
}

blockquote.quote-sign:before,
blockquote.quote-sign:after {
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
	display: inline-block;
	font-size: medium;
	color: #C0C0C0;
	position: absolute;
}

/* see fontawesome .fas .fa-quote-left */
blockquote.quote-sign:before {
	content: "\f10d";
	left: .5em;
	top: .5em;
}

/* see fontawesome .fas .fa-quote-right */
blockquote.quote-sign:after {
	content: "\f10e";
	right: .75em;
	bottom: .5em;
}

blockquote.quote-sign + .cite {
	text-align: right;
	margin: 0 2em 1em;
	margin-top: -5.em;
}

.text-right {
	text-align: right;
}


/*======  tabs  ======*/

/*======  tabs  ======*/

/* tabs module */
.tab_group .tab_options {
    margin: 6px 0px 3px 6px;
    padding: 3px;
}

.tab_group .tab {
    display: none;
}

.tab_group .tab.visible {
    display: block;
}

.tab_group_selectors {
    margin-bottom: 15px;
    padding: 0;
    border-bottom: solid 1px #ccc;
}

.secondary_menu.tab_group_selectors {
    text-align: left;
}

.tab_group .tab_selector {
    cursor: pointer;
}

.tab_selector.active {
    font-weight: bold;
    background-color: #FFF;
}

.tab_selector {
    padding: 5px 8px;
    border: solid 1px #ccc;
    background-color : #F0F0F0;
}



@media only screen and (max-width: 720px) {
    .tab_group_selectors {
         background-color: #ffffff;
    }

    .tab_group_selectors .tab_selector {
        display: block;
        margin-top: 3px;
        margin-bottom: 3px;
    }

    .tab_group_selectors .tab_selector:before {
        content: '\f0da';
        font-family: 'Font Awesome 5 Free';
        font-weight: 900;
        font-size: 24px;
        display: block;
        float: right;
        box-sizing: border-box;
        margin-right: 4px;
        color: #999;
    }

    .tab_group_selectors .tab_selector.active:before {
        content: '\f0d7';
        color: #084197;
    }

    .secondary_menu.tab_group_selectors {
        border-bottom: none;
        
    }

    .secondary_menu.tab_group_selectors .tab_selector {
        border-radius: 0;
    }
}

@media only screen and (min-width: 721px) {
    
    .secondary_menu.tab_group_selectors {
        padding-bottom: 0;
    }

    .secondary_menu.tab_group_selectors .tab_selector {
        border-bottom: none;
    }

    .tab_group_selectors .tab_selector {
        display: inline-block;
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
        margin-right: 6px;
    }
}


/*======  modal_dialog  ======*/

/*-----------------------------------------------------------*/
/*------------------ Special : modal dialogs ----------------*/
/*-----------------------------------------------------------*/

.modal_layer {
    display: none;
}

.modal_layer.visible {
    display: block;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 200;
    background-color: rgba(0,0,0,.5);
    width: 100%;
    height: 100%;
}

.modal_dialog {
    display: block;
}

.visible .modal_dialog {
    display: block;
    position: relative;
    top: 10vh;
    width: 250px;
    max-height: 80vh;
    box-sizing: border-box;
    margin-left: auto;
    margin-right: auto;
    grid-template-rows: 30px minmax(100px, 400px) 42px;
}

.modal_layer.visible .modal_dialog.large {
    width: 80%;
    min-width: 250px;
    max-width: 600px;
    width: calc(100vw - 12px);
}

.modal_title {
    height: 30px;
    padding: 6px;
    background-color: #9096CA;
    color: #FFF;
    font-weight: bold;
    text-align: left;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    line-height: 20px;
    text-transform: uppercase;
}

.modal_buttons {
    padding: 8px;
    text-align: center;
    border-top: solid 1px #ccc;
    background-color: #F5F5F5;
}

.modal_message  {
    padding: 6px;
    background-color: #fff;
    max-height: inherit;
    max-height: 60vh;
    max-height: calc(80vh - 72px);
    box-sizing: border-box;
    text-align: center;
}

.modal_dialog.large .modal_message  {
    overflow-y: scroll;
    text-align: justify;
}

.modal_buttons .buttonize {
    cursor: pointer;
    margin-right: 12px;
}

.loader {
    display: none;
}

.loader.visible {
    display: block;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 200;
    background-color: rgba(250,250,250,.8);
    width: 100%;
    height: 100%;
}

.loader.nested.visible {
	position: absolute;
}

.loader .loader_display {
    text-align: center;
    width: 300px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    top: 43%;
}

.loader .loader_message {
    font-size: 1.5em;
    color: #666;
    border-bottom: solid 1px #ccc;
    padding: 3px;
}

.loader .loader_animation {
    background-image: url('https://www.tante-emma-laden.fr/images/interface/loading_128.gif');
    background-repeat: no-repeat;
    background-position: center center;
    width: 200px;
    margin-left: auto;
    margin-right: auto;
    height: 42px;
}


/*======  flash_msg  ======*/

/*======  flash_msg  ======*/

#flash_msg {
    /* color: #5e6391; */
    background-color: #f9f9f9;
    border: none;
    border-bottom: solid 1px #AAA;
    padding: 6px;
    font-weight: bold;
    text-align: center;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    width: 100%;
    min-height: 3em;
    box-sizing: border-box;
    filter: drop-shadow(2px 6px 6px #6f6f6f);
    transition-property: top;
    transition-duration: 0.5s;
}

#all_flash_messsages {
    margin-top: 5px;
}

#flash_msg p {
    line-height: 22px;
}

#close_flash_msg {
    display: block;
    position: absolute;
    top: 3px;
    right: 3px;
    padding: 6px;
    color: #fff;
    border: none;
    background-color: transparent;
    border-radius: 0px;
    color: #696763
}

#close_flash_msg:hover {
    color: #084197;
    border-color: #9096CA;
}

#close_flash_msg:active {
    color: #084197;
    border-color: #084197;;
}

#flash_msg.closed {
    top: -200px;
}

#flash_msg a {
    color: #084197;
}


/*======  layout_base  ======*/

div.wrapper {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
    float: left;
    border: solid 1px red; /*#a0a086*/
}

#top_header_layer {
    display: block;
    background-color: #9096CA;
}

.demo_mode #top_header:before {
    content: 'DEMO MODE';
    display: block;
    padding: 3px;
    color: yellow;
    text-align: center;
    font-weight: bold;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 60;
}

#top_header_layer {
    position: relative;
    z-index: 10;
}

#top_header {
    max-width: 1272px;
    margin: 0 auto;
    text-align: left;
}

body {
    background-color: #fbfbfb;
}

#outer_container {
    margin-left: auto;
    margin-right: auto;
    min-width: 320px;
    max-width: 1272px;
/*    overflow-x: hidden; */
    background-color: #fff;
    position: relative;
}

#outer_container > * {
    max-width: inherit;
}

.sidebar_layout #sidebar {
    width: 250px;
    float: left;
    padding: 6px 0;
}

#main {
    padding: 6px 15px;
    min-width: 300px;
    padding-bottom: 72px;
}

.sidebar_layout #main {
    float: left;
}

.basic #main 
{
    float: none;
    width: auto;
    border: none;
}

#main:after {
    content: '';
    display: block;
    clear: both;
}

#footer {
    display: block;
    clear: both;
    margin: 0;
    padding: 0;
    background-color: #f0f0f0;
}

#content_group {
    padding: 15px 15px 25px;
}

.single_layout #content_group,
.base_layout #content_group {
    display: flex;
}

#content_group:after {
    content: '';
    display: block;
    clear: both;
}

/* main grid - see MQ definitions for respective area distribution */
@supports (display: inline-grid) {

    .sidebar_layout #sidebar,
    .sidebary_layout #main {
        width: auto !important;
    }

    .sidebar_layout #content_group {
        display: grid;
        row-gap: 0;
        column-gap: 25px;
        grid-auto-flow: dense column;
        grid-template-columns: 250px 1fr;
        grid-template-rows: min-content 1fr;
    }
        .sidebar_layout #search_filters {
            grid-column: 1;
            align-self: start;
            height: min-content;
            margin-bottom: 30px
        }

        .sidebar_layout #sidebar {
            grid-column: 1;
            align-self: start;
            align-content: start;
        }

        .sidebar_layout #main {
            grid-column: 2;
            grid-row-start: 1;
            grid-row-end: -1;
        }

}

/*--- layout_base Narrow ---*/
@media only screen and (max-width: 720px) {

    #sidebar,
    #main {
        float: none;
        width: auto;
    }

    #content_group {
        padding: 15px 0px 25px;
    }

    @supports (display: inline-grid) {
        .sidebar_layout #content_group {
            grid-template-columns: 1fr;
            grid-template-rows: min-content 1fr auto;
            grid-template-areas:
                "a"
                "c"
                "b"
        }
        .sidebar_layout #search_filters {
            grid-area: a;
        }
        .sidebar_layout #sidebar {
            grid-area: b;
        }
        .sidebar_layout #main {
            grid-area: c;
        }
    }
    
    .segment_produit_search #banner .banner-box {
        padding-right: 45px;
    }
    
    .segment_produit_search .banner-box h1 {
        font-size: 2em;
    }
}

@media only screen and (max-width: 991px) {
    #outer_container,
    #top_header {
        max-width: 100vw;
        overflow-x: hidden;
    }
}

/*--- layout_base Medium ---*/
@media only screen and (min-width: 721px) and (max-width: 991px) {

    #main {
        padding-left: 5px;
        padding-right: 5px;
        padding-bottom: 0px;
    }

    .sidebar_layout #content_group {
        grid-template-columns: 200px 1fr;
    }
}

/*--- layout_base Wide ---*/
@media only screen and (min-width: 992px) {

    #outer_container {
        background-color: #fff;
        border-top: none;
        box-shadow: -1px 10px 10px 5px rgba(0, 0, 0, 0.1);
        box-shadow: 0px 0px 12px 8px rgba(0, 0, 0, 0.25);
    }

    .sidebar_layout #sidebar {
        width: 280px;
    }

    .sidebar_layout #main {
        width: calc(100% - 280px);
    }

    @supports (display: inline-grid) {
        .sidebar_layout #content_group {
            grid-template-columns: 280px 1fr;
        }

        .sidebar_layout #main {
            width: auto;
        }
    }
}


/*======  header  ======*/

#rgpd {
    bottom: 0;
    left: 0;
    z-index: 100;
    border-top: solid 1px #CCC;
}

#rgpd .action-wrapper .buttonize {
    display: block;
    margin: 6px auto;
    max-width: 350px;
    border-radius: 2px;
    padding: 6px;
}

/*--- Top Header --- */

#top_header_buttons {
    width: 100%;
    padding: 6px 15px 5px;
}

span.top-header-btn a {
    display: inline-block;
    margin: 0 5px;
    float: left;
    text-align: center;
    height: 28px;
    width: 28px;
    padding: 5px 3px;
    color: white;
    background: none;
    border-radius: 0px;
}

#top_header_buttons .buttonize.top-header-info {
    color: rgba(255, 255, 255, .8);
    background-color: #9096CA;
    cursor: default;
    padding-right: 8px;
    padding-top: 2px;
}

/*--- header general layout ---*/
#header {
    padding-top: 40px;
    padding-right : 15px;
    display: flex;
    flex-wrap: wrap;
}

#header_logo {
    padding: 12px 6px;
    float: left;
    z-index: 1;
    margin-top: -28px;
    width: 430px;
    flex: 0 0 442px;
}

#header_logo a,
#toolbox a {
    color: #696763;
}

#header_logo a:hover,
#toolbox a:hover {
    color: #084197;
}


#toolbox {
    float: right;
/*    min-width: 230px; */
    flex: 1 1 200px;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
}

#header::after {
    content: '';
    display: block;
    clear: both;
}

/*--- brand ---*/

#header_logo a {
    display: block;
    height: 110px;
    margin-left: 0px;
    padding-top: 15px;
    background-image: url('https://www.tante-emma-laden.fr/images/logo.png');
    text-decoration: none;
    background-repeat: no-repeat;
    background-position: 8px center;
    background-size: contain;
    position: relative;
}

#header_logo a #brand {
    display: block;
    margin-left: 100px;
    margin-bottom: 5px;
    font-size: 2.6em;
}

span.baseline {
    display: block;
    font-weight: 400;
    font-size: 1.05em;
    margin-left: 105px;
    color: inherit;
}

span.baseline.location {
    text-align: center;
    position: relative;
}

.baseline.location small {
    text-align: center;
    display: inline-block;
    background-color: #FFF;
    padding: 3px 6px;
}

span.baseline.location:after {
    content: " ";
    position: absolute;
    border: 1px solid #E8E8E8;
    bottom: 10px;
    width: 100%;
    height: 0;
    z-index: -2;
    left: 0;
}

/*--- toolbox:
/     search, customer login, shopping cart (and burger menu on narrow screens) ---*/

#toolbox .tools {
    vertical-align: middle;
    display: inline-block;
    margin-right: 6px;
    position: relative;
}

#toolbox .tools:last-child {
    margin-right: 0;
}

#toolbox .tools#search {
    float: left;
    flex: 1 1 200px;
    min-width: 170px;
    margin-right: 0;
}

#toolbox > div {
    margin-bottom: 12px;
}

#toolbox > div:last-child {
    flex: 0 1 auto;
    /* min-width: 170px; */
    text-align: right;
    margin-left: 6px;
}

#toolbox #customer_space_widgets {
    margin-left: 12px;
}

#toolbox #search_keywords input {
    width: calc(100% - 32px);
}

#toolbox #menu_control {
    display: none;
}

#header .icon {
    width: 43px;
    height: 44px;
    border: solid thin #F7F7F0;
    text-align: center;
    line-height: 2.3em;
    font-size: 1.3em;
}

#header .icon:hover {
    cursor: pointer;
    border: solid 1px #999;
    transition: all 0.9s ease 0s;
    -moz-transition: all 0.9s ease 0s;
    -webkit-transition: all 0.9s ease 0s;
    -o-transition: all 0.9s ease 0s;
}

#header .icon i {
    line-height: 2.3em;
}

#header .toggle_component.dropdown {
    display: none;
}

#header .tools > .icon {
    background-color: transparent;
}

#header .tools.active > .icon {
    background-color: #9096CA;
    color: #fff;
}

#header .tools.active .toggle_component.dropdown {
    display: block;
    position: absolute;   
    padding-right: 15px;
    padding-bottom: 20px;
    background-color: #fff;
    box-shadow: -1px 10px 10px 5px rgba(0, 0, 0, 0.1);
    z-index: 150;
    right: 0px;
    border: solid 1px #ccc;
    background-color: #fff;
    padding: 6px;
    padding-top: 0;
    text-align: right;
    line-height: 1.5em;
    width: max-content;
    min-width: 160px;
}

#header .tools.active #customer_login > *,
#header .tools.active #cart_link > * {
    display: block;
    line-height: 2em;
}

#toolbox .tools.active .toggle_component:before {
    display: block;
    font-family: 'Font Awesome 5 Free', 'Roboto', sans-serif;
    font-weight: 900;
    content: "Fermer \f00d";
    padding: 6px;
    color: #666;
    text-align: right;
    font-size: 14px;
    border-bottom: solid 1px #E0E0E0;
    line-height: 1em;
    height: 28px;
    box-sizing: border-box;
    cursor: pointer;
}

#toolbox #search_toggle {
    display: none;
}

#toolbox #search_keywords.toggle_component {
    display: block;
}

#toolbox #search_keywords input {
    padding: 10px 16px;
    font-size: 14px;
    line-height: 1.5;
    color: inherit;
    font-weight: 300;
    border-radius: 0;
    border: thin solid #E0E0E0;
    -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;
}

/*--- Latest news Headline ---*/
.evenement_headline a {
    background-color: #9096CA;
    color: #F0F0F0;
    overflow-x: hidden;
    display: block;
    padding: 6px;
}

.evenement_headline a > * {
    display: inline-block;
    vertical-align: baseline;
    margin-right: 6px;
}

.evenement_headline a :last-child {
    margin-right: 0
}

.evenement_headline a:hover {
    color: #084197;
}

.evenement_headline strong {
    letter-spacing: 1px;
    display: inline-block;
    font-family: 'Lobster Two', cursive;
    font-weight: 300;
    font-size: 1.3em;
}

.evenement_headline .more {
    font-style: italic;
}

/*--- header Medium ---*/
@media only screen and (max-width: 991px) {
    #header {
    }

    #header_logo {
        width: 430px;
        flex: 0 0 442px;
    }

    #toolbox #menu_control {
        display: inline-block;
    }

    .evenement_headline a > * {
        display: block;
        max-width: 90vw;
        white-space: nowrap;
        margin-right: 0;
        margin-bottom: 3px;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}


@media only screen and (max-width: 705px) {
    #toolbox .tools#search .pull-right {
        float: left !important;
        margin-left: 12px;
    }

}

/*---- header very narrow ---*/

@media only screen and (max-width: 450px) {
    #header {
        padding-top: 0;
    }

    #header_logo {
        margin-left: auto;
        margin-right: auto;
        margin-top: 0;
        padding-bottom: 18px;
        width: auto;
        flex: 0 0 auto;
    }

    #header_logo a {
        background-image: none;
        height: auto;
        padding-top: 0;
    }

    #header_logo a #brand {
        margin-left: 0px;
        font-size: 2.4em;
    }

    span.baseline {
        margin-left: 0;
        font-size: 1em;
    }
    
    #toolbox {
        flex-wrap: nowrap;
        font-size: 12px;
    }

    #toolbox > div:last-child {
/*
        min-width: 141px;
        width: max-content;
        flex: 1 1 auto;
*/
    }
    
    #header .icon {
        width : 33px;
        height: 34px;
    }
    
    #toolbox #search_keywords input {
        font-size: 12px;
        padding: 4px 8px;
        width: calc(100% - 16px);
    }

    #toolbox .input-group-lg > .form-control, .input-group-lg > .input-group-btn > .btn {
        height: auto;
        padding: 6px 12px;
        font-size: 12px;
    }

    #toggleHandheldMenu {
        background-color: #9096CA !important;
        padding: 0;
    }
    
    #toggleHandheldMenu i {
        color: #FFF;
    }
    
    #top_header_buttons {
        padding: 11px 5px;
        display: inline-block;
    }

    #toolbox #menu_and_customer {
        position: fixed;
        top: 5px;
        right: 5px;
        padding: 3px;
        text-align: right;
        z-index: 50;
        background-color: #9096CA !important;
        -webkit-transform: translate3d(0,0,0);
    }

    #toolbox #menu_and_customer .icon {
        border: none !important;
    }

    #toolbox #menu_and_customer i,
    #toolbox #menu_and_customer i {
        color: #fff !important;
    }

    #top_header_layer {
        position: fixed;
        top: 0;
        left: 0;
        /*
        position: absolute;
        */
        z-index: 10;
        width: 100%;
        height: 50px;
        -webkit-transform: translate3d(0,0,0);
    }
    
    #header {
        margin-top: 40px;
    }
}


@media only screen and (max-width: 599px)
{
    .basic #header_logo {
        margin-left: 6px;
    }
}


/*======  main  ======*/

.basic .main,
.basic #main {
    display: grid;
    grid-column: 1 / span 2;
    width: auto;
}

.segment_auth .main,
.segment_auth #main {
    justify-content: center;
    padding: 12px;
    min-height: 0;
}

.basic .main h2
{
    text-align: center;
}

.basic .main h2 .subtitle
{
    display: block;
    margin-top: 3px;
    margin-bottom: 6px;
}

.base_layout .main,
.single_layout .main
{
    max-width: 1200px;
    margin: 0 auto;
}

.col-100 {
    width: 100%;
    position: relative;
    min-height: 1px;
    margin: 0 auto;
}

.col-100:after {
    content: '';
    display: block;
    clear: both
}

.col-50 {
    width: 50%;
    min-width: 320px;
    float: left;
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    margin-bottom: 15px;
}

.main .section {
    margin-bottom: 50px;
}

.sub-section {
    margin-bottom: 15px;
}

.main ol, .main ul {
    padding-left: 12px;
    margin: 12px;
}

.main li {
    padding: 6px;
}

@media only screen and (max-width: 360px)
{
    .col-50 {
        min-width: revert;
    }
}

@media only screen and (max-width: 720px)
{
    .col-50 {
        float: none;
        max-width: revert;
        width: auto;
    }
}

@media only screen and (min-width: 450px)
{
    .basic .main h2
    {
        /* text-align: left; */
    }
    
    .basic .main h2 .subtitle
    {
        display: inline-block;
    }
    
    .basic .main h2 .subtitle:before
    {
        content: ' - ';
    }
}

/*======  footer  ======*/

#footer a:hover,
#footer a:focus {
    color: #084197;
}

#footer {
    display: block;
    clear: both;
    margin: 0;
    padding: 0 0 100px;
    background-color: #f0f0f0;
}

#footer > section {
    display: block;
    margin: 0;
    padding: 0 20px;
    margin: 0 auto;
    text-align: center;
}

/*--- footer info ---*/

.footer-info {
    display: inline-block;
    width: 100%;
    border-bottom: 1px solid #E0E0DA;
    padding: 0 0 20px;
    margin: 0;
    text-align: left;
}

.col-logo {
    width: 14%;
    float: left;
    padding-right: 15px;
    padding-left: 5px;
    overflow: hidden;
}

.col-25 {
    width: 25%;
    float: left;
    padding-right: 15px;
    padding-left: 15px;
    overflow: hidden;
}

/*--- fil actualites ---*/
#fil-actualite .fil-actu {
    margin-top: 57px;
    position: inherit;
}

#fil-actualite a:focus,
#fil-actualite a:hover
 {
    outline: solid 1px #084197;
}

#fil-actualite .col-25 {
    min-width: 120px;
    max-width: 160px;
}

.col-fil-actualite {
    width: 61%;
    float: left;
    padding-right: 15px;
    padding-left: 5px;
    overflow: hidden;
}

#fil-actualite .iframe-fil-actu {
    position: relative;
    display: block;
    height: 61px;
    margin-bottom: 10px;
    border: 2px solid #8C8C88;
    border-radius: 3px;
}

#fil-actualite .fil-actu p {
    color: #8C8C88;
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    font-weight: 500;
    margin-bottom: 0px;
}

/*---// end fil actualites ---*/

#footer-address.col-25 {
    min-width: 200px;
    min-width: max-content;
}

.footer-address > div.brand {
    text-align: left;
    margin-top: 0.9em;
    margin-bottom: 0.3em;
    color: #084197;
    font-family: 'Lobster Two', cursive;
    font-size: 2.0em;
    text-transform: none;
    font-weight: 600;
}

.footer-address > address, address a {
    text-align: left;
    color: #8C8C88;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 400;
    font-style: normal;
    line-height: 1.428571429;
}

@supports (display: flex) {
    .footer-info {
        display: flex;
        flex-wrap: wrap-reverse;
        justify-content: center;
    }

    #fil-actualite {
        flex: 1 1 auto;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }

    .col-fil-actualite {
        width: auto;
    }

    #fil-actualite > div {
        flex: 0 0 auto;
    }

    #footer-address {
        min-width: 260px;
    }
}

/*---// end footer info ---*/

/*--- footer nav ---*/
.footer-nav {
    display: inline-block;
    width: 100%;
    margin: 0;
    padding: 30px 0px 20px;
}

.col-footer-nav {
    width: 16.66%;
    min-width: max-content;
    float: left;
    padding-right: 15px;
    padding-left: 15px;
    overflow: hidden;
}

.footer-nav-single-widget {
    text-align: left;
}

.footer-nav-single-widget h5 {
    color: #084197;
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 22px;
    text-transform: uppercase;
    text-align: left;
}

.footer-nav-single-widget ul li a {
    color: #8C8C88;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 400;
    padding: 5px 0;
    display: inline-block;
}

.footer-nav-single-widget a, .footer-nav-single-widget > address {
    color: #8C8C88;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 400;
    font-style: normal;
    text-align: left;
    line-height: 1.428571429;
}

.col-footer-action {
    width: 25%;
    float: left;
    padding-right: 15px;
    padding-left: 15px;
    overflow: hidden;
}

.col-footer-descr {
    width: 25%;
    float: left;
    padding-right: 15px;
    padding-left: 15px;
    overflow: hidden;
}

input.form-control.search-in-footer {
    padding-top: 7px;
    padding-bottom: 7px;
    padding-left: 3px;
}

.footer-nav-single-widget a button {
    padding: 10px 16px;
    background-color: #084197;
    border-radius: 0px;
    font-size: 18px;
    line-height: 1.33;
}

.col-footer-action > .footer-nav-single-widget.social-fb {
    margin-top: 15px;
}

@supports (display: flex) {
    .footer-nav {
        display: flex;
        flex-wrap: wrap;
        padding-top: 0;
        justify-content: center;
    }
    .footer-nav > div {
        flex: 1 1 auto;
        margin-top: 30px;
        min-width: max-content;
        width: auto;
    }
    .footer-nav > .col-footer-descr {
        min-width: 200px;
    }
}

/*---// end footer nav ---*/
#footer #footer-bottom {
    display: block;
    clear: both;
    border: none;
    margin-top: 0px;
    padding: 25px 6px 10px;
    background-color: #9096CA;
    text-align: left;
}

#footer #footer-bottom p {
    color: #fff;
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    margin-left: 15px;
}


@media only screen and (max-width: 991px) {
    .footer-info {
        padding: 0 0 20px;
        margin: 0;
        text-align: left;
        background-image: none;
    }

    .footer-address > div.brand {
        margin-top: 1.35em;
        font-size: 1.58em;
    }

    #footer-address.col-25 {
        padding-left: 108px;
        min-width: 330px;
        background-image: url('https://www.tante-emma-laden.fr/images/logo.png');
        background-repeat: no-repeat;
        background-position: 5px 34px;
        background-size: auto 128px;
        flex: 0 1 auto;
    }
}

@media only screen and (min-width: 992px) {
    .footer-info {
        padding: 0 0 20px 113px;
        margin: 0;
        text-align: left;
        background-image: url('https://www.tante-emma-laden.fr/images/logo.png');
        background-repeat: no-repeat;
        background-position: 0px 20px;
        background-size: auto 150px;
    }
    
    #footer-address.col-25 {
        margin-right: 0;
        margin-left: auto;
    }
}

/*======  evenement  ======*/

.event-banner {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top left;
    height: 350px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.event-banner-header {
    background-color: rgba(144, 150, 202, 0.9);
    margin: 0 0 30px 0;
    padding: 0 5px 5px;
    text-align: center;
}

.event-banner-header h1 {
    font-size: 3.5em;
    font-weight: 700;
    color: #fff;
}

.event-banner-text {
    margin: auto 15px;
    padding: 5px;
    background-color: rgba(250, 250, 250, 0.9);
    border-radius: 5px;
}

.event-banner-text .snippet {
    overflow: hidden;
    max-height: 54px;
}

.event-banner-text p {
    color: inherit !important;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.event-banner-text hr {
    border-top: solid 1px #CCC;
    border-bottom: none;
    border-left: none;
    border-right: none;
    margin: 6px 30px;
}

.event-banner-links {
    padding: 0 15px 15px;
    margin-top: 30px;
    text-align: center;
    justify-self: flex-end;
}

.event-banner-links a {
    
}

.event-banner-root {
    background-color: transparent;
}

.event-banner-root.full {
    background-color: rgba(250, 250, 250, 1);
    position: absolute;
    z-index: 20;
    right: 0;
    top: 0;
    padding: 25px;
    box-shadow: 5px 5px 5px 2px rgba(0, 0, 0, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
}

.full .event-banner {
    min-height: 400px;
    height: auto;
    flex-grow: 0;
}

.full .event-banner .event-banner-text .snippet {
    display: none;
    /*
    max-height: none;
    white-space: normal;
    */
}

.event-banner .event-banner-text .body {
    display: none;
}

.full .event-banner .event-banner-text .body {
    display: block;
}

.full .event-banner .event-banner-text p {
    white-space: normal;
}

.event-banner .display_all {
    display: inline-block;
}

.event-banner .display_less {
    display: none;
}

.full .event-banner .display_all {
    display: none;
}

.full .event-banner .display_less {
    display: inline-block;
}

@media only screen and (min-width: 721px)
{
    .event-banner-root.full {
        width: 200%;
    }
}


/*======  menu  ======*/

.dropdown_menu {
    position: relative;
    width: 100%;
}

.dropdown_menu a {
    color: #696763;
}

.dropdown_menu a:hover {
    color: #696763;
}

.dropdown_menu .menu_top_controls {
    display: none;
}

.dropdown_menu li {
    list-style-type: none;
}

.dropdown_menu ul,
.dropdown_menu li {
    margin: 0 !important;
    padding: 0 !important;
}

.dropdown_menu .option_handle {
    padding: 6px;
    display: block;
}

.close_menu_handle {
    display: none;
}

.dropdown_menu .option_handle small {
    display: block;
    font-size: small;
    font-style: italic;
    font-weight: normal;
}

.dropdown_menu_toggle {
    cursor: pointer;
    border: solid 1px #e0e0e0;
    background-color: transparent;
    text-decoration: none;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    z-index: 50;
    padding: 4px 11px;
    text-align: center;
    font-size: xx-large;
    font-size: 2.6em;
}

.dropdown_menu_toggle i {
    color: #9096CA;
}

.dropdown_menu_toggle:hover {
    background-color: #084197;
    color: #fff;
    border: solid 1px #e0e0e0;
}

.dropdown_menu_toggle i:hover {
    color: #fff;
}

/*--- compact menu design ---*/
@media only screen and (max-width: 991px) {

    .modal_outer_container {
        max-height: calc(100vh - 36px) !important;
        max-width: 100vw !important;
        overflow: hidden;
    }

    .dropdown_menu .option_handle {
        cursor: pointer;
    }

    .dropdown_menu .option_handle:hover {
        background-color: #D4D4EA;
    }

    .dropdown_menu {
        position: absolute;
        left: 0;
        top: 0;
        z-index: 50;
        display: none;
    }

    .dropdown_menu .menu_panel.level_1 {
        display: none;
        position: absolute;
        background-color: #fff;
        z-index: 60;
        top: 0;
        left: 0;
        width: 100%;
    }

    .dropdown_menu.active {
        display: block;
        width: 100%;
        height: calc(100vh - 36px);
        /* height: 100vh; */
        background-color: #FFF;
        overflow-x: hidden;
        overflow-y: auto;
        border-bottom: solid 2px #9096CA;
    }

    /*--- display active panels --- */
    .dropdown_menu.active .menu_panel.level_0 {
        position: absolute;
        width: 100%;
        display: block;
        padding-bottom: 5em;
    }

    /* hide active parent panels */
    .dropdown_menu .menu_panel.unfolded {
        left: -100vw;
    }

    /* show active panel,
       use current item of parent menu as title to display */
    .dropdown_menu .current {
        position: absolute;
        top: 0;
        left: 100vw;
        width: 100%;
    }

    .dropdown_menu .current > .menu_panel {
        z-index: 70;
        display: block;
        padding-top: 2.5em;
        padding-bottom: 5em;
    }

    .dropdown_menu .current > .option_handle {
        position: absolute;
        top: -1px;
        left: 0;
        font-weight: bold;
        z-index: 71;
        text-align: center;
        display: block;
        width: 100%;
        background-color: #D4D4EA;
    }

    .dropdown_menu .current .menu_group > .option_handle,
    .dropdown_menu .current .menu_group > .option_handle a
    {
        font-weight: bold;
        color: #084197;
        text-transform: uppercase;
    }

    .dropdown_menu .current > .option_handle a:after,
    .dropdown_menu .current .menu_group > .option_handle a:after {
        content : " (tout voir)";
        margin-left: .5em;
        font-size: smaller;
    }

    .dropdown_menu .current .menu_group {
        margin-bottom: 6px;
    }

    .dropdown_menu .current > .option_handle:before {
        display: none;
    }

    /*--- top controls ---*/

    .dropdown_menu.active .menu_top_controls {
        display: flex;
        font-size: 1.2em;
        height: 2em;
        padding: 0 6px;
        align-items: center;
        justify-content: space-between;
        position: sticky;
        top: 0;
        z-index: 80;
        background-color: #D4D4EA;
    }
    
    .dropdown_menu .menu_top_controls span {
        display: inline-block;
        padding: 3px;
    }

    .dropdown_menu .menu_top_controls .menu_close {
        justify-self: flex-end;
        cursor: pointer;
    }

    .dropdown_menu .menu_top_controls .menu_close:hover {
        color: #084197;
    }

    .dropdown_menu .menu_top_controls .menu_back {
        display: none;
        justify-self: flex-start;
    }

    .dropdown_menu .menu_top_controls .menu_back.enabled {
        display: inline-block;
    }

    .dropdown_menu .menu_top_controls .menu_back.to_root {
        color: #084197;
    }

    .dropdown_menu .menu_top_controls .menu_back.one_level {
        pointer-events: auto;
        cursor: pointer;
    }
    
    .dropdown_menu .menu_top_controls .menu_back.one_level:hover {
        color: #084197;
    }

    /*--- additionnal menu items decoration --*/

    .dropdown_menu .menu_option .option_handle {
        border-bottom: solid 1px #F0F0F0;
    }

    .dropdown_menu .menu.level_0 > .menu_group > .option_handle:before {
        content: '\22EE';
        padding-right: 6px;
        font-weight: bold;
        color: #666;
    }

    /* extend active zone of links */
    .dropdown_menu .menu.level_0 .menu_option:not(.menu_group) > .option_handle {
    }
    .dropdown_menu .menu.level_0 .menu_option:not(.menu_group) > .option_handle a {
        display: block;
        width: 100%;
    }

    /*--- spare vertical space with columns if viewport is wide enough ---*/
    @media only screen and (min-width: 600px) {
        .dropdown_menu .current > .menu_panel {
            column-width: 250px;
            columns: 2;
        }

        .dropdown_menu .menu_option .option_handle,
        .dropdown_menu .current .menu.level_1 .menu_group + .menu_group {
            break-inside: avoid;
        }
    }

    /*--- dropdown animation ---*/
    @supports (clip-path : polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)) {
        .dropdown_menu .menu.level_0 > .menu_option .menu_panel.level_1 {
            -webkit-transition: 500ms;
            -moz-transition: 500ms;
            -o-transition: 500ms;
            transition-duration: 500ms;
            transition-property: clip-path, left;
            clip-path: polygon(0% 0%, 0% 0%, 0% 1%, 0% 1%);
            display: block;
            left: -100vw;
            top: -1000px;
        }

        .dropdown_menu .menu.level_0 > .active .menu_panel.level_1 {
            display: block;
            clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
            left: 0;
            top: 0;
        }

        .dropdown_menu {
            -webkit-transition: 500ms;
            -moz-transition: 500ms;
            -o-transition: 500ms;
            transition: all 500ms;
            clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
            display: block;
            top: -10px;
        }

        .dropdown_menu.active {
            display: block;
            clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
            top: 0;
        }
    }
    /*--- // end dropdown animation ---*/
}

/*--- wide dropdown design ---*/
@media only screen and (min-width: 992px) {
    .dropdown_menu .menu_panel.level_0 {
        border-top: solid 1px #E0E0E0;
        border-bottom: solid 1px #9096CA;
    }

    .dropdown_menu .menu.level_0 > .menu_option:hover {
        background-color: #D4D4EA;
        cursor: pointer;
    }

    .dropdown_menu .menu_panel.level_0 {
        display: block;
    }

    .dropdown_menu .menu_panel.level_1 {
        display: none;
    }

    /*--- main menu layout ---*/
    .dropdown_menu .menu.level_0 {
        display: flex;
        flex-wrap: nowrap;
    }

    .dropdown_menu .menu.level_0 > .menu_option {
        border-right: solid 1px #E0E0E0;
        flex: 1 1 auto;
    }

    .dropdown_menu .menu.level_0 > .menu_option > .option_handle {
        padding: 6px 8px;
    }

    .dropdown_menu .menu.level_0 > .menu_option:last-child {
        border-right: none;
    }

    /*--- // end main menu layout ---*/

    /*--- Dropdown logic: display on hover, force hiding with close_menu_handle ---*/

    .dropdown_menu .menu_panel.level_1 {
        position: absolute;
        width: 100%;
        left: 0;
        top: calc(100% - 2px);
        z-index: 10;
        background-color: #FFF;
        padding: 6px;
        border-bottom: solid 2px  #9096CA;
        padding-top: 2.5em;
        padding-bottom: 1em;
    }

    .dropdown_menu .close_menu_handle {
        position: absolute;
        top: calc(100% - 2px);
        left: 0;
        z-index: 20;
        box-sizing: border-box;
        width: 100%;
        padding: 6px;
        background-color: #D4D4EA;
        color: #696763;
        text-align: right;
    }

    .dropdown_menu .menu_option:hover > .menu_panel.level_1 {
        display: block;
    }

    .dropdown_menu .menu_option:hover > .close_menu_handle {
        display: block;
    }

    .dropdown_menu .menu_option > .close_menu_handle:before {
        display: inline-block;
        font-family: 'Font Awesome 5 Free';
        font-weight: 900;
        content: "\f00d";
        line-height: 1;
    }
    
    .dropdown_menu .menu_option > .close_menu_handle:after {
        content: ' FERMER';
        line-height: 1;

    }

    .dropdown_menu .menu_option:hover > .close_menu_handle:hover {
        background-color: #084197;
        color: #FFF;
    }

    .dropdown_menu .menu_option:hover > .close_menu_handle:active,
    .dropdown_menu .menu_option:hover > .close_menu_handle:active ~ .menu_panel {
        display: none !important;
    }

    /*--- // end dropdown logic ---*/

    /*--- submenu layout ---*/

    .dropdown_menu .menu_panel.level_1 {
        max-height: 60vh;
        overflow-y: auto;
    }

    .dropdown_menu .menu_panel.level_1 .menu,
    .dropdown_menu .menu_panel.level_1 .menu_option,
    .dropdown_menu .menu_panel.level_1 .menu_panel {
        max-height: inherit;
    }

    .dropdown_menu .menu.level_1 .menu_group {
        margin-right: 12px;
        margin-bottom: 12px;
    }

    .dropdown_menu .menu.level_1 .option_handle {
        padding: 3px;
        margin-bottom: 3px;
    }

    .dropdown_menu .menu.level_1  .menu_group > .option_handle {
        font-weight: bold;
    }

    .dropdown_menu .menu.level_1 > .menu_group > .option_handle {
        border-bottom: solid 2px #D4D4EA;
        margin-bottom: 6px;
    }

    .dropdown_menu .menu.level_1 > .menu_group {
        float: left;
    }

    .dropdown_menu .menu.level_2 .menu_group > .menu_panel {
        padding-left: 12px;
    }

    .dropdown_menu .menu_panel.level_1:after {
        content: '';
        display: table;
        clear: both;
    }

    /*--- Tentative grid layout --- */
    @supports (display: inline-grid) {

        .dropdown_menu .menu_panel.level_1 {
            max-height: none;
        }

        .dropdown_menu .menu.level_1 .menu.level_2 {
            display: grid;
            grid-auto-flow: column;
            min-height: 165px; /* "magic value" to force display on 4 columns */
            max-height: none;
            grid-template-rows: repeat(auto-fill, minmax(19px, auto));
            grid-row-gap: 3px;
            grid-column-gap: 12px;
        }

        .dropdown_menu .menu.level_1 .menu_group .menu .option_handle {
            max-height: 2.5em;
            max-width: 228px;
            overflow: hidden;
            /* margin-bottom: 0; */
        }

        .dropdown_menu .menu.level_1 .menu_group .menu .option_handle small {
            max-width: 220px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
    }

    /*--- // end submenu layout ---*/

    /*--- dropdown animation ---*/
    @supports (clip-path : polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)) {
        .dropdown_menu .menu.level_0 > .menu_option .menu_panel.level_1 {
            -webkit-transition: 500ms;
            -moz-transition: 500ms;
            -o-transition: 500ms;
            transition: all 500ms;
            clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
            display: block;
        }

        .dropdown_menu .menu.level_0 > .menu_option:hover .menu_panel.level_1 {
            display: block;
            clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
        }
    }
    /*--- dropdown end animation ---*/
}


/*======  sidebar  ======*/

#search_filters {
}

#filter_list {
    display: none;
}

#search_filters.active #filter_list {
    display: block;
}

h3.label-aside, #search_filters h4 {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    text-align: center;
}

h3.label-aside {
    font-size: 18px;
    position: relative;
    z-index: 3;
    color: #084197;
    margin: 15px auto 15px;
}

h3.label-aside span {
    background: #fff;
    display: inline-block;
    padding: 0 15px;
}

h3.label-aside:after {
    content: " ";
    position: absolute;
    border: 1px solid #E8E8E8;
    bottom: 10px;
    left: 0;
    width: 100%;
    height: 0;
    z-index: -2;
}

#search_filters h4 {
    margin: 15px auto;
}

#search_filters li {
    position: relative;
    display: block;
    list-style: none;
}

#search_filters li .filter {
    display: block;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 500;
    padding: 5px 5px;
    text-decoration: none;
    text-transform: uppercase;
    text-align: left;
}

#search_filters li .filter.active {
    color: #084197;
}

.product_highlight .thumb_produit {
    float: none;
}

#sidebar .link_selection {
    display: block;
    margin: 6px 0;
}

#sidebar .link-list a {
    color: #8C8C88;
}

#sidebar .link-list a:hover {
    color: #084197;
}

/*--- layout_base Narrow ---*/
@media only screen and (max-width: 720px) {

    .sidebar_layout #sidebar {
        display: flex;
        justify-content: center;
        align-content: center;
        flex-wrap: wrap;
        width: 90% !important;
        margin: 0 auto;
    }

    .sidebar_layout #sidebar > div {
        flex-basis: 200px;
        flex-grow: 1;
        flex-shrink: 1;
        margin: 0 6px;
    }

    #sidebar .thumb_produit
    {
        margin: 0 auto;
        height: 331px;
    }

    #sidebar .link_selection {
        text-align: center;
    }
}


/*======  breadcrumb  ======*/

#breadcrumb {
    padding: 6px 18px;
    margin-bottom: 0px;
    background-color: #F5F5F5;
    position: static;
    height: 41px;
}

#breadcrumb .breadcrumb.active {
    color: #084197;
}

#breadcrumb_links {
    overflow-x: hidden;
    overflow-y: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    line-height: 2;
    transition-property: clip-path;
    transition-duration: 500ms;
    background-color: #F5F5F5;
    clip-path: polygon(0% 0%, 100% 0%, 100% 41px, 0% 41px);
}

#breadcrumb #breadcrumb_links > *
{
    display: inline-block;
    line-height: 2;
    vertical-align: top;
}

#breadcrumb_links .breadcrumb + .breadcrumb:before {
    content: "\f054";
    font-family: 'Font Awesome 5 Free';
    display: inline-block;
    color: #bdbdbd;
    font-weight: bold;
    padding: 0 5px;
}

#breadcrumb #breadcrumb_links .breadcrumb {
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
}

#breadcrumb #breadcrumb_links .breadcrumb:last-child {
    max-width: none;
}

#breadcrumb_links .label {
    transition-property: color;
    transition-duration: 1000ms;
}

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

    #breadcrumb #breadcrumb_links .breadcrumb {
        max-width: 35px;
    }

    #breadcrumb #breadcrumb_links .breadcrumb:nth-child(2) {
        display: none;
    }

    #breadcrumb #breadcrumb_links .breadcrumb:nth-child(3) {
        max-width: 120px;
    }

    #breadcrumb #breadcrumb_links .breadcrumb:last-child {
        max-width: 120px;
    }

    #breadcrumb:hover {
        height: 41px;
    }

    #breadcrumb:hover #breadcrumb_links {
        position: absolute;
        left: 0;
        white-space: normal;
        z-index: 10;
        padding: 0 18px 6px;
        margin: 0;
        overflow: visible;
        width: 100%;
        border-bottom: solid 2px #9096CA;
        background-color: #FFF;
        clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
    }

    #breadcrumb:hover #breadcrumb_links .breadcrumb {
        max-width: none;
        display: block;
    }

    #breadcrumb,
    #breadcrumb_links {
        width: 95vw;
    }

    #breadcrumb:hover #breadcrumb_links .breadcrumb {
        white-space: nowrap;
        display: block;
        max-width: none;
        overflow: visible;
    }

    #breadcrumb:hover #breadcrumb_links .label {
        color: #084197;
        font-weight: bold;
    }

}


/*======  produit  ======*/

/* Product list view */
.search_results > section > section > section {
    margin-top: 6px;
}

.search_results .scrollable_category {
    padding-top: 40px;
}

.num_produits {
    line-height: normal;
}

.num_produits strong {
    font-family: 'Lobster Two', cursive;
    color: #084197;
    font-weight: 300;
    font-size: 1.8em;
}

.thumb_produit {
    float: left;
    margin: 6px;
    min-height: 100px;
    padding: 6px;
    border: solid 1px #e0e0e0;
    background-color: #ffffff;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.liste_produits .thumb_produit:hover {
    border: solid 1px #aac;
    box-shadow : 2px 6px 6px #999;
}

.liste-produits-wrapper .more {
    margin: 10px 0 18px 0;
    text-align: center;
    clear: left;

}

.liste-produits-wrapper .more a,
.liste_produits .more a {
    display: block;
    white-space: normal;
}

.liste_produits .more {
    grid-column: 1 / -1;
}

.thumb_produit.promotion .promotion_sign {
    position: absolute;
    top: -6px;
    left: -6px;
    width: 60px;
    height: 60px;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

.promotion .promotion_sign:before {
    content: "";
    display: block;
    background-color: red;
    clip-path: polygon(0 0, 100% 0, 0 100%);
    width: 57px;
    height: 57px;
    position: absolute;
    z-index: 10;
}

.promotion .promotion_sign .label {
    display: block;
    font-weight: normal;
    color: red;
    font-size: 12px;
    text-align: center;
    position: absolute;
    z-index: 20;
    transform: translate(-24px, 17px) rotate(45deg);
    width: 120px;
    background-color: white;
}

.promotion .promotion_sign .value {
    display: block;
    margin-left: 0;
    padding-top: 5px;
    margin-right: auto;
    box-sizing: border-box;
    line-height: 28px;
    text-align: center;
    color: #F0F0F0;
    font-weight: bold;
    letter-spacing: 1px;
    position: absolute;
    z-index: 20;
    transform: rotate(-45deg);
}

.thumb_produit.new_product .thumb::after {
    content: '';
    display: block;
    position: absolute;
    top: -6px;
    right: -6px;
    background-image: url('https://www.tante-emma-laden.fr/images/interface/neu.png');
    background-repeat: no-repeat;
    background-position: top right;
    width: 42px;
    height: 42px;
}

.thumb_produit .thumb {
    margin-right: 5px;
    position: relative;
    margin: 0 auto;
    text-align: center;
    height: 160px;
    width: 100%;
}

img.vignette {
    max-width: 180px;
    max-height: 150px;
}

.thumb_produit .thumb_descr h3 {
    font-size: 1.17em;
    font-weight: bold;
    margin-top: 10px;
    font-weight: 500;
}

.thumb_produit .thumb_descr p {
    padding: 3px 0;
    width: 100%;
}

.PrixVente strong {
    font-size: 1.5em;
    color: #8c8c8c;
    font-weight: bolder;
    font-weight: 400;
}

/* Product details view */

.produit {
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
}

.produit div.photo_produit {
    width: 320px;
    text-align: center;
    position: relative;
}


.produit .photo_produit img.photo_produit {
    max-width: 300px;
    max-height: 400px;
    width: auto;
    height: auto;
}

.produit.promotion .promotion_sign {
    position: absolute;
    top: 0;
}

.produit.promotion .promotion_sign .value {
    width: 53px;
    height: 53px;
    padding-right: 3px;
    padding-left: 3px;
    font-weight: bold;
    font-size: 1.2em;
}

.produit h2 {
    font-size: 1.6em;
    margin-top: 0;
    padding-top: 6px;
    margin-bottom: 6px;
}

.produit .descr_produit .NomFrProduit {
    font-weight: bold;
    font-style: italic;
    font-size: 1.2em;
}

.produit .descr_produit .Description {
    padding-bottom: 6px;
    border-bottom: solid 1px #e0e0e0;
}

.produit .price_and_cart {
    display: flex;
    flex-flow: row;
    align-items: flex-end;
    margin-bottom: 15px;
}

.produit .price_and_cart .PrixVente {
    flex-grow: 1;
    padding-bottom: 10px;
}

.descr_produit .label {
    font-weight: bold;
    color: #333;
}

img.origine {
    height: 15px;
}

h4.etiquette {
    margin-top: 18px;
    padding-top: 3px;
    padding-bottom: 3px;
    padding-left: 6px;
    background-color: #f0f0f0;
    border: solid 1px #e0e0e0;
    border-top-right-radius: 5px;
    border-top-left-radius: 5px;
}

.etiquette.content {
    margin-top: 0;
    text-align: justify;
    border: solid 1px #e5e5e5;
    padding: 3px 6px;
    border-top: 0;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
}

.add-to-cart .input-group {
    margin: 0 auto;
}

.add-to-cart .input-group input + button {
    border-top-right-radius: 6px !important;
    border-bottom-right-radius: 6px !important;
    height: 43px;
    box-sizing: border-box;
}

.add-to-cart .input-group input[type="number"] {
    font-size: 1.6em;
    vertical-align: middle;
    padding: 7px 0;
    width: 50px;
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
    height: 43px;
    box-sizing: border-box;
}

.out_of_stock {
    display: block;
    width: 100%;
    padding: 3px;
    position: relative;
    background-color: orange;
    color: #660000;
}

.out_of_stock :hover {
    cursor: pointer;
}

.out_of_stock:after {
    content: ' [?]';
}

.out_of_stock:hover:after {
    content: 'Ce produit est momenténament en rupture de stock et sera réapprovisonné prochainement.';
    display: block;
    position: absolute;
    z-index: 50;
    background-color: #FFF;
    border: solid 1px #CCC;
    padding: 6px;
}

.out_of_season {
    
}

.out_of_season_n:hover:after {
    content: "Ce produit de Noël n'est actuellement plus en stock et sera réapprovisionné à la fin de l'automne.";
}

.out_of_season_p:hover:after {
    content: "Ce produit de Pâques n'est actuellement plus en stock et sera réapprovisionné au printemps.";
}

@supports (grid-template-columns: repeat(auto-fill, 250px)) {
    
    .search_results section h2 {
        float: none;
    }

    .liste_produits {
        display: grid;
        grid-template-columns: repeat(auto-fit, 220px);
        grid-column-gap: 0px;
        justify-content: center;
    }

    .thumb_produit .thumb_descr {
        display: grid;
        grid-template-rows: 40px auto 1fr 75px;
        flex-grow: 1;
    }
}

@media only screen and (max-width: 600px) {
    .thumb_produit.promotion .promotion_sign .label {
        display: none;
    }

    @supports (display: inline-grid) {

        .search_results section section {
            margin-left: 0;
        }

        .liste_produits {
            grid-template-columns: repeat(auto-fit, minmax(162px, 1fr));
            grid-auto-columns: minmax(162px, 1fr);
            grid-gap: 6px;
        }

        .search_results .thumb_produit {
            width: 100%;
            display: grid;
            grid-template-rows: 160px auto;
            margin: 0;
            justify-items: center;
        }

        .thumb_produit .thumb img.vignette {
            max-width: 138px;
            max-height: 138px;
        }

        .search_results .thumb_produit .thumb_descr {
            text-align: center;
        }

/*
* category overview: 
*/
        .categories-overview .liste_produits {
            grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
            font-size: 12px;
        }

        .search_results.categories-overview .thumb_produit {
            grid-template-rows: 110px auto;
            align-items: inherit;
        }

        .categories-overview .thumb {
            height: 110px;
        }

        .categories-overview .thumb img.vignette {
            max-width: 110px;
            max-height: 110px;
        }

        .search_results.categories-overview .thumb_produit .thumb_descr {
            grid-template-rows: auto auto 1fr;
        }

        .search_results.categories-overview .thumb_produit .shipping_conditions {
            display: none;
        }

        .search_results.categories-overview .thumb_produit .thumb_descr .add-to-cart {
            display: none;
        }

/* (end category overview) */
    }

}

@media only screen and (min-width: 768px) {
    #main .view_produit div.photo_produit {
        float: right;
        margin-left: 12px;
        margin-bottom: 12px;
        text-align: right;
        min-height: 300px;
    }

}

.product-list-navigator {
    background-color: #F0F0F0;
    color: #084197;
    position: fixed;
    z-index: 20;
    right: 0;
    bottom: 0;
    font-size: 12px;
    text-align: center;
}

.product-list-navigator .nav-controls {
    padding: 1px;
}
.product-list-navigator .nav-controls button {
    display: block;
    margin: 5px;
    width: 3em;
    height: 3em;
}

.product-list-navigator .nav-controls .next,
.product-list-navigator .nav-controls .previous {
    display: none;
}

.product-list-navigator.active .nav-controls .next,
.product-list-navigator.active .nav-controls .previous {
    display: block;
}

.product-list-navigator.active .nav-controls button {
    width: 100%;
}

.product-list-navigator .TOC {
    display: none;
}

.product-list-navigator.toggle_container .container_state_toggle {
    line-height: 2em;
}

.product-list-navigator.toggle_container .container_state_toggle::after {
    color: #FFF;
    content: "";
}
.product-list-navigator.toggle_container.active .container_state_toggle::after {
    content: "\f054";
}

.product-list-navigator .fa-chevron-right {
    display: none;
}
.product-list-navigator.active .fa-chevron-right {
    display: inline;
}
.product-list-navigator.active .fa-chevron-left {
    display: none;
}

.product-list-navigator.active .TOC {
    display: block;
    max-height: 50vh;
    max-width: 50vw;
    overflow-y: scroll;
}

.product-list-navigator .TOC-contents {
    padding: 15px 5px 15px 15px;
    text-align: left;
}

.product-list-navigator .TOC .TOC_link {
    display: block;
    text-align: left;
}

.product-list-navigator .TOC .TOC_link.current {
    font-weight: bold;
    color: #333;
}

.product-list-navigator .TOC .TOC_link.current:before {
    content: '\25BA';
    display: inline-block;
    width: 8px;
    margin-left: -15px;
    margin-right: 7px;
    color: #333;
}

.product-not-available * {
	color: #999 !important;
}

.product-not-available img.photo_produit {
	filter: grayscale() opacity(.5);
}


/*======  marques  ======*/

#list_all_marques {
    font-size: 1.1em;
}

#marques_alpha_index {
    background-color: #fff;
    padding: 3px 0 15px;
    position: sticky;
    top: 0px;
}

#list_all_marques section {
    margin: 6px;
    margin-bottom: 12px;
    border-bottom: solid 1px #CCC;
}

#list_all_marques section h3 {

}

#list_all_marques ul {
    margin-left: 0;
    padding-left: 0;
    list-style-type: none;
}

#list_all_marques section li {
    display: inline-block;
    width: 120px;
    margin: 3px;
    padding: 3px;
    vertical-align: top;
}


/*======  new_product_highlight  ======*/



/*======  static_content  ======*/

.static_content .page_title {
    text-align: center;
    padding: 6px;
    margin-bottom: 6px;
}

.static_content > div {
    margin-bottom: 12px;
    text-align: justify;
}

.static_content.double > p,
.static_content.double > h1,
.static_content.double > h2,
.static_content.double > h3,
.static_content.double > h4,
.static_content.double > h5 {
    clear: left;
}

.static_content h2, .static_content h3 {
    margin-top: 24px;
}

.static_content.double > div {
    display: block;
    float: left;
    width: 47%;
    min-width: 300px;
    max-width: 534px;
    margin-right: 12px;
}

.illustration img {
    width: 100%;
}


img.illustration {
    float: left;
    margin-right: 6px;
    margin-bottom: 6px;
}

#explications_noel.static_content .illustration {
    margin-bottom: 12px;
}

.carte_visite {
    background-image: url('https://www.tante-emma-laden.fr/images/imagesGif/logo.jpg');
    background-repeat: no-repeat;
    background-position: 6px center;
    background-size: 100px;
    border: solid 1px #c6cde7;
    border-radius: 10px;
    background-color: #f5f5f5;
    background-blend-mode: darken;
}

.carte_visite > * {
    margin-left: 112px;
    margin-right: 6px;
}

.static_content.long {
    max-width: 800px;
    width: auto;
    margin-left: auto;
    margin-right: auto;
}

.static_content .lettrine {
    vertical-align: bottom;
    margin-right: 3px;
    display: inline-block;
    width: 29px;
    height: 31px;
    background-size: contain;
    background-repeat: no-repeat;
}

.static_content .lettrine::first-letter {
    color: transparent;
}



/*======  forms  ======*/

fieldset {
    border: none;
    margin: 6px 0;
}

.row_editor button,
.row_editor input[type='submit'],
.row_editor .buttonize {
    background-color: #D4D4EA;
    color: #084197;
}

.row_editor button:hover,
.row_editor button:focus,
.row_editor input[type='submit']:hover,
.row_editor input[type='submit']:focus,
.row_editor .buttonize:hover,
.row_editor .buttonize:focus {
    background-color: #084197;
    border-color: #084197;
    color: white;

}

.row_editor {
    margin: 6px 0px;
}

.form_field {
    margin-bottom: 6px;
    padding: 2px;
}

.form_field > * {
    vertical-align: top;
}

.form_field label {
    display: inline-block;
    width: 180px;
}

.form_field input[type="checkbox"] {
    height: auto;
}

.form_field input[type="text"],
.form_field input[type="email"],
.form_field input[type="password"],
.form_field textarea,
.form_field select {
    display: inline-block;
    max-width: 400px;
}

.large-form input[type="text"],
.large-form input[type="email"],
.large-form input[type="password"],
.large-form textarea,
.large-form select,
.large-form .form_field input[type="submit"],
.large-form .form_field button {
    padding: 10px 16px;
    line-height: 1.5;
}


.large-form label {
    padding: 10px 8px;
    line-height: 1.5;
}

.large-form input[type="checkbox"] + label {
    padding: 0 8px;
    line-height: 1.5;
}

.row_editor .hint {
    color: #999;
    font-style: italic;
    margin: 3px 0;
    font-size: smaller;
}

.row_editor .form_field > .error_wrapper {
    display: none;
}

.row_editor .form_field.not_valid > .error_wrapper {
    display: block;
    position: relative;
/*    top: -5px; */
}

.row_editor .form_field > .error_wrapper:before {
    content: ' ';
    display: block;
    width: 1px;
    height: 1px;
    background-color: #ab0000;
    border: solid 5px white;
    border-bottom: solid 7px #ab0000;
    box-sizing: border-box;
    margin-left: auto;
    margin-right: auto;
}

.error-summary {
    border-radius: 5px;
    background-color: #ffefef;
    color: #ab0000;
    border: solid 1px #ab0000;
    padding: 5px;
}

.row_editor .form_field > .error_wrapper p {
    grid-column: 1/3;
    width: 100%;
    border-radius: 5px;
    background-color: #ffefef;
    color: #ab0000;
    border: solid 1px #ab0000;
    padding: 3px;
    text-align: center;
    margin-top: 0;
}

#main .row_editor .form_field > .error_wrapper p {
    margin-top: 0;
}

.action_wrapper {
    margin-top: 12px;
    padding: 6px;
    line-height: 2.5em;
}

.form_field label[for='accept_cgv'] {
    width: auto;
}


.login_form {
    max-width: 300px;
}

#clientpart_login_form {
    max-width: 300px;
    margin-left: auto;
    margin-right: auto;
}

.login_form p {
    text-align: right;
}

#clientpart_login_form.row_editor .form_field {
    display: block;
}

#clientpart_login_form.row_editor .form_field label {
    width: 100px;
}

#clientpart_login_form.row_editor .form_field input[type="text"],
#clientpart_login_form.row_editor .form_field input[type="password"] {
    max-width: none;
    width: 183px;
}

@media only screen and (max-width: 400px)
{
    .form_field input[type="text"],
    .form_field input[type="email"],
    .form_field input[type="password"],
    .form_field textarea,
    .form_field select {
        display: inline-block;
        max-width: 189px;
    }
}

@media only screen and (max-width: 600px) {
    .form_field input[type="text"],
    .form_field input[type="email"],
    .form_field input[type="password"],
    .form_field textarea,
    .form_field select {
        max-width: 70vw;
    }
    .form_field label {
        display: block;
        padding-bottom: 5px;
    }
    
    .form_field input[type="checkbox"] + label {
        display: inline-block;
    }
}

@media only screen and (min-width: 601px) {

    @supports (display: inline-grid) {

        .row_editor {
            max-width: 600px;
        }

        .row_editor.compact {
            max-width: 480px;
        }

        .form_field {
            display: grid;
            grid-template-columns: 1fr minmax(200px, 3fr);
            grid-column-gap: 6px;
        }
        
        .compact .form_field {
            grid-template-columns: 1fr minmax(200px, 2fr);
        }

        .form_field label {
            width: auto;
        }
        
        .form_field input {
            height: min-content;
        }

        #clientpart_login_form.row_editor .form_field input[type="text"],
        #clientpart_login_form.row_editor .form_field input[type="password"] {
            height: auto;
        }

        #checkout .form_field {
            grid-template-columns : 100px auto;
        }

        .form_field > .hint {
            grid-column: 2;
        }

        .form_field > .error_wrapper {
            grid-column: 1 / span 2;
        }
        
        .form_field label:first-child {
            text-align: right;
        }
        
        .form_field input[type="checkbox"]:first-child {
            justify-self: end;
        }

        .row_editor .action_wrapper {
            text-align: right;
        }
        
        .action_wrapper {
            text-align: right;
        }

        .action_wrapper > * {
            margin-left: 12px;
        }

    }

}


/*======  cart  ======*/

#cart_count_small {
    background-color: #084197;
    font-weight: normal;
    line-height: 1em;
    font-size: 0.7em;
    position: absolute;
    margin-right: 0px;
    margin-top: -5px;
    display: inline-block;
    padding: 1px 1px;
    border-radius: 4px;
    color: white;
    font-weight: bold;
    top: 2px;
    right: 2px;
}

#cart_overview {
    display: block;
    padding: 2px;
}

#cart_link {
    display: block;
    margin-top: 6px;
}

#cart_link:hover {
    text-decoration: none;
    color: #d45900;
}

#cart_overview span,
#cart_overview a {
    display: block;
}

#cart_details {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

#cart_details .back_link {
    float: right;
}

#cart_details .packing.warning
{
    background-color: #F0F0F0;
    border-radius: 5px;
    border-left: solid 6px orange;
    border-left: solid 6px orange;
}

#cart_details table tr.total td {
    font-weight: bold;
    padding: 6px;
}

#cart_details table tr.total.first td {
    border-top: solid 1px #333;
}

#cart_details table tr.total td:first-child {
    text-align: right;
    padding-right: 12px;
}

#cart_details .set_product_qty {
    width: 32px;
}

#cart_details .vignette {
    display: block;
    float: left;
    margin-right: 12px;
    margin-bottom: 6px;
	max-width: 70px;
	max-height: 70px;
}

#cart_details img.logo {
    display: block;
    height: 36px;
}

#cart_details td {
    vertical-align: top;
}

#cart_details td:last-child {
    text-align: center;
}

#cart_details td a small {
    color: #666;
}

#cart_details table tr {
    background-color: white;
}

@media only screen and (max-width: 400px) {
    #cart_details td {
        padding: 6px 3px;
    }
    
    #cart_details img.vignette {
        max-width: 120px;
    }
}

@media only screen and (max-width: 600px) {
    #cart_details img.vignette {
        float: none;
    }
}


/*======  address  ======*/

.address {
    margin-top: 12px;
    padding: 3px;
}

.address > div {
    padding: 3px;
}

.address .address_nom {
    font-weight: bold;
}

#delivery_address_tab_group {
	position: relative;

}

.address_selector_combo {
    width: 320px;
    margin: 0 auto;
}

.address_selector_combo .viewport {
    margin: 6px 0;
    width: 320px;
	height: 250px;
	overflow-y: auto;
}

.address_selector_combo h4 {
	border-bottom: solid 1px #9096CA;
	padding: .5em 0 .5em 1.2em;
}

.address_selector_combo .address {
    border: solid 1px #ccc;
    margin: 6px 0;
    width: 280px;
    background-color: white;
    cursor: pointer;
}

.address_selector_combo .address strong {
    display: block;
    text-align: center;
    border-bottom: solid 1px #CCC;
    padding: 3px;
    color: #666;
}

#delivery_address_selector_list > div {
    margin-bottom: 6px;
    padding-bottom: 6px;
}

#delivery_address_selector_list > div .address {
    margin-bottom: 0;
}

#delivery_address_selector_list > div .address .address_header {
	background-color: #D4D4EA;
	color: #084197;
	padding: 3px 6px;
	text-align: center;
	margin: 0;
	font-size: small;
}

#delivery_address_selector_list > div .address.selected .address_header,
#delivery_address_selector_list > div .address.selected:hover .address_header {
	color: #9096CA;
	font-style: italic;
	background-color: transparent;
}

#delivery_address_selector_list > div .address.selected {
	/* background-color: #D4D4EA; */
	color: #333;
}

#delivery_address_selector_list > div .address:hover .address_header {
	background-color: #084197;
	color: #D4D4EA;
}

#delivery_address_selector_list > div .buttonize {
    display: block;
    width: 280px;
    text-align: center;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    box-sizing: border-box;
}

#delivery_address_tab {
    padding: 6px;
    border: solid 1px #c6cde7;
    border-radius: 10px;
    background-color: #f5f5f5;
    background-blend-mode: darken;
}

#delivery_address_tab {
    padding: 6px;
    background-repeat: no-repeat;
    background-position: right top;
    background-size: 140px;
    border: solid 1px #c6cde7;
    border-radius: 10px;
    background-color: #f5f5f5;
    background-blend-mode: darken;
}

#delivery_address_tab[data-delivery-mode = 'colissimo'] {
	background-image: url('https://www.tante-emma-laden.fr/images/imagesGif/Colissimo.jpg');
}

#delivery_address_tab[data-delivery-mode = 'chronofresh'] {
	background-image: url('https://www.tante-emma-laden.fr/images/imagesGif/logos/chronofresh_logo_200.png');
}

#address_selector_tab,
#delivery_adress_form_tab {
    position: relative;
    z-index: 30;
    height: 100%;
    background-color: white;
}

#address_selector_tab .tab_options {
	float: left;
	margin: 0 0 0 6px;
}

#create_delivery_address {
    max-width: 508px;
}


/*======  checkout  ======*/

#checkout {
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.steps {
    border: solid 1px #9096CA;
    margin: 10px auto;
    display: table;
}

.step_track.current {
    font-weight: bold;
    background-color: #9096CA;
    color: white;
}

/*
#checkout .form_field label {
    width: 100px;
}
*/

#checkout h2 {
    text-align: center;
    margin-top: 3px;
    padding: 3px;
    margin-bottom: 6px;
}

#checkout_setup_form textarea {
    min-width: 200px;
    min-height: 4em;
}

#checkout .form_field label[for='accept_cgv'] {
    width: auto;
}

#checkout #delivery_mode_tabs .delivery_options_selector {
	margin-bottom: 1em; 
	display: grid;
	grid-auto-flow: column;
	grid-gap: 1em;
}

#checkout #delivery_mode_tabs .delivery_options_selector .delivery_option {
	display: grid;
	grid-auto-flow: column;
	align-items: baseline;
	justify-content: flex-start;
}

@media only screen and (min-width: 600px) {
    .step_track {
        display: table-cell;
        padding: 10px 5px 10px 8px;
    }

    .step_track:after {
        content: '\f054';
        font-family: 'Font Awesome 5 Free';
        font-weight: 900;
        display: inline-block;
        margin-left: 11px;
        margin-right: 0px;
        color: inherit;
        width: 9px;
        box-sizing: border-box;
    }

    .step_track:last-child:after {
        display: none;
        content: '';
    }
    .step_track:last-child {
        padding-right: 10px;
    }
}

@media only screen and (max-width: 599px) {
    .steps {
        display: block;
    }

    .steps .step_track {
        display: block;
        padding: 5px 10px 5px 20px;
    }
    
    .step_track.current {
        padding-left: 5px;
    }

    .step_track.current:before {
        content: '\f054';
        font-family: 'Font Awesome 5 Free';
        font-weight: 900;
        display: inline-block;
        color: white;
        margin-right: 5px;
    }

}


/*======  client_profile  ======*/

.segment_client_account .main {
    width: 70vw;
    min-width: 380px;
    max-width: 900px;
}


#client_order_tab_group .order_details .tab_options
{
    text-align: center;
    padding: 0;
    display: flex;
    justify-content: space-between;
}

@media only screen and (max-width: 600px)
{
	/* display table rows as cards */
	table tr
	{
		display: grid;
		grid-template-columns: auto auto auto;
		grid-auto-flow: row dense;
		border-bottom: solid 1px #e0e0e0;
	}
	
	table tr:first-child {
		border-top: solid 1px #e0e0e0;
	}
	
	table th {
		display: none;
	}

	table td {
		display: block;
		border-style: none !important;
		padding: 5px 3px !important;
	}
	
	table td[data-label]:before {
		/*
		* aria-label has no advantage, it won't be read inside a table
		content: attr(aria-label);
		*/
		content: attr(data-label);
		display: block;
		margin: 3px 0;
		font-size: 10px;
		font-weight: bold;
		text-transform: uppercase;
	}
}


/*======  compart  ======*/

.list_compart td .btn {
    white-space: normal;
    padding: 3px 6px;
    line-height: 1.42;
}

.compart_view {
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.compart_view h3,
.compart_view > div {
    margin-bottom: 6px;
    margin-top: 6px;
}

.compart_view .compart_header {
    border-bottom: solid 1px #CCC;
}
.compart_view .compart_header ul li {
    padding: 2px;
}

.compart_view .adresses {
    display: grid;
    grid-template-columns: 50% 50%;
    border-bottom: solid 1px #ccc;
}

.compart_view .address {
    margin-top: 0;
}

.compart_view .address_facturation {}
.compart_view .address_livraison {}
.compart_view .detail_panier {}
.compart_view .compart_stats {
    background-color: #FFF;
}

.compart_view .compart_stats:first-child {
    border-top: solid 2px #999;
}

ol.compart_steps {
    list-style-type: none;
    margin-left: 12px;
    counter-reset: step-counter;
}

.main ol.compart_steps li,
ol.compart_steps li {
    padding-left: 0;
    padding-top: 0;
}

ol.compart_steps li {
    counter-increment: step-counter;
    border-left: dashed 1px #99b1cc;
}

ol.compart_steps li:last-child {
    border-left: none;
}

ol.compart_steps .icon {
    height: 28px;
    width: 28px;
    padding: 3px;
    box-sizing: border-box;    
    font-size: 1.1em;
    line-height: 18px;
    color: #6b829c;
    background-color: #F0F0F0;
    border: solid 1px #6b829c;
    display: inline-block;
    text-align: center;
    border-radius: 20px;
    position: relative;
    left: -14px;
}


ol.compart_steps strong {
    display: inline-block;
}

ol.compart_steps strong:before {
    content: counter(step-counter) ". ";
    color: #6b829c;
    
}

.main ol.compart_steps li p,
ol.compart_steps li p {
    margin-left: 32px;
    margin-top: 0;
}


/*======  shipping_conditions  ======*/

/* full description of shipping conditions */

#conditions_expedition .shipping_conditions {
    max-width: 800px;
    margin-bottom: 24px;
}

.shipping_conditions .logo {
    float: right;
    margin: 0 0 6px 6px;
    max-width: 200px;
}

.shipping_conditions .description {
}

.shipping_conditions .example {
    font-style: italic;
    background-color: #F5F5F5;
    margin: 6px;
    padding: 6px;
}

/* display shipping conditions in product thumbnails and product views */


#main .view_produit .shipping_conditions .subtitle {
}

.thumb_produit .shipping_conditions .logo {
    display: block;
    width: 120px;
    float: none;
    margin: 0;
}

#main .thumb_produit .shipping_conditions .conditions_text,
.thumb_produit .shipping_conditions .conditions_text {
    font-size: small;
    margin-bottom: 0px;
    margin-top: 3px;
}

/* display shipping conditions in cart details */
#cart_details .shipping_conditions .logo {
    float: none;
    display: block;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

#cart_details .shipping_conditions {
    font-size: small;
}

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

    #cart_details .shipping_conditions {
    }
}

@media only screen and (min-width: 768px) {
    @supports (display: inline-grid) {
        .thumb_produit .shipping_conditions {
            grid-column: 2;
        }
    }
}


/*======  online_payment  ======*/

/* online payment specific rules */
#outer_container.segment_online_payment {
    max-width: 600px;
}

.payment_message
{
    margin: 6px 0;
    padding: 6px;
    border: solid 1px #d5d5d5;
    background-color: #f9f9f9;
    color: #164377;
    border-radius: 5px;
}

.payment_message.error
{
    background-color: #ffefef;
    color: #ab0000;
    border-color: #ab0000;
}

/*
 prevent overflows
*/
.request_message td {
    word-break: break-all;
}

.payment_header
{
    text-align: center;
    margin-bottom: 24px;
}

#main .payment_header h1
{
    margin-bottom: 3px;
}

#main .payment_header p 
{
    margin: 0;
}

.request_message {
    margin: 24px 0;
}

.request_message p:last-child {
    margin: 0;
    text-align: center;
}

@media only screen and (min-width: 450px) {
    .payment_header
    {
        display: grid;
        grid-template-columns: auto auto;
    }

    .payment_header h1
    {
        text-align: left;
    }

    .payment_header p
    {
        text-align: right;
        margin-top: 6px;
    }
}


/*======  banner  ======*/

/*
* Banners
*/
.banner-container {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center top;
    width: 100%;
    min-height: 130px;
    display: flex;
    align-items: center;
}

.banner-box {
    width: 43%;
    min-width: 360px;
    flex-grow: 0;
    flex-shrink: 0;
    padding: 20px 10px;
    background-color: rgba(144, 150, 202, 0.9);
    color: #fff !important;
    text-align: center;
    min-height: 130px;
}

.banner-box h1 {
    color: #fff;
    font-size: 2.6em;
    font-weight: 700;
    margin: 0;
    padding-bottom: 5px;
}

.banner-box .subtitle {
    color: #fff;
    font-family: 'Roboto', sans-serif;
    font-size: 18px;
    font-weight: 400;
    margin: 0;
    padding: 0;
    display: block;
}

.banner-box .description {
    margin-top: 10px;
}

.banner-icon-container {
    flex-grow: 1;
    text-align: center;
    padding: 5px;
}

.banner-icon {
    max-width: 30%;
    max-height: 100px;
    border: solid 5px #fff;
    vertical-align: middle;
}

@media only screen and (max-width: 720px) {
    .banner-container {
        flex-direction: column-reverse;
        min-height: 0;
    }

    .banner-container.with-background {
        padding-top: 75px;
    }

    .banner-container.with-background.with-icon,
    .banner-container.with-icon {
        padding-top: 0px;
    }

    .banner-icon {
        max-width: none;
    }

    .banner-box {
        width: 100%;
        padding: 10px;
        min-height: 0;
    }
}

/*
@media only screen and (max-width: 991px) {
    .banner-container {
        background-repeat: no-repeat;
        background-position: top right;
        background-size: auto;
        width: 100%;
        padding-top: 100px;
    }

    .banner-box {
        display: block;
        width: 100%;
        padding: 0 0 10px 0;
        min-height: 0;
    }
}
*/