@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 100;
  src: url('../themes/dpgreen/assets/fonts/roboto/roboto-v20-latin-100.eot');
  src: local('Roboto Thin'), local('Roboto-Thin'),
       url('../themes/dpgreen/assets/fonts/roboto/roboto-v20-latin-100.eot?#iefix') format('embedded-opentype'),
       url('../themes/dpgreen/assets/fonts/roboto/roboto-v20-latin-100.woff2') format('woff2'),
       url('../themes/dpgreen/assets/fonts/roboto/roboto-v20-latin-100.woff') format('woff'),
       url('../themes/dpgreen/assets/fonts/roboto/roboto-v20-latin-100.ttf') format('truetype'),
       url('../themes/dpgreen/assets/fonts/roboto/roboto-v20-latin-100.svg#Roboto') format('svg');
}

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  src: url('../themes/dpgreen/assets/fonts/roboto/roboto-v20-latin-300.eot');
  src: local('Roboto Light'), local('Roboto-Light'),
       url('../themes/dpgreen/assets/fonts/roboto/roboto-v20-latin-300.eot?#iefix') format('embedded-opentype'),
       url('../themes/dpgreen/assets/fonts/roboto/roboto-v20-latin-300.woff2') format('woff2'),
       url('../themes/dpgreen/assets/fonts/roboto/roboto-v20-latin-300.woff') format('woff'),
       url('../themes/dpgreen/assets/fonts/roboto/roboto-v20-latin-300.ttf') format('truetype'),
       url('../themes/dpgreen/assets/fonts/roboto/roboto-v20-latin-300.svg#Roboto') format('svg');
}

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url('../themes/dpgreen/assets/fonts/roboto/roboto-v20-latin-regular.eot');
  src: local('Roboto'), local('Roboto-Regular'),
       url('../themes/dpgreen/assets/fonts/roboto/roboto-v20-latin-regular.eot?#iefix') format('embedded-opentype'),
       url('../themes/dpgreen/assets/fonts/roboto/roboto-v20-latin-regular.woff2') format('woff2'),
       url('../themes/dpgreen/assets/fonts/roboto/roboto-v20-latin-regular.woff') format('woff'),
       url('../themes/dpgreen/assets/fonts/roboto/roboto-v20-latin-regular.ttf') format('truetype'),
       url('../themes/dpgreen/assets/fonts/roboto/roboto-v20-latin-regular.svg#Roboto') format('svg');
}

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  src: url('../themes/dpgreen/assets/fonts/roboto/roboto-v20-latin-500.eot');
  src: local('Roboto Medium'), local('Roboto-Medium'),
       url('../themes/dpgreen/assets/fonts/roboto/roboto-v20-latin-500.eot?#iefix') format('embedded-opentype'),
       url('../themes/dpgreen/assets/fonts/roboto/roboto-v20-latin-500.woff2') format('woff2'),
       url('../themes/dpgreen/assets/fonts/roboto/roboto-v20-latin-500.woff') format('woff'),
       url('../themes/dpgreen/assets/fonts/roboto/roboto-v20-latin-500.ttf') format('truetype'),
       url('../themes/dpgreen/assets/fonts/roboto/roboto-v20-latin-500.svg#Roboto') format('svg');
}


@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: url('../themes/dpgreen/assets/fonts/roboto/roboto-v20-latin-700.eot');
  src: local('Roboto Bold'), local('Roboto-Bold'),
       url('../themes/dpgreen/assets/fonts/roboto/roboto-v20-latin-700.eot?#iefix') format('embedded-opentype'),
       url('../themes/dpgreen/assets/fonts/roboto/roboto-v20-latin-700.woff2') format('woff2'),
       url('../themes/dpgreen/assets/fonts/roboto/roboto-v20-latin-700.woff') format('woff'),
       url('../themes/dpgreen/assets/fonts/roboto/roboto-v20-latin-700.ttf') format('truetype'),
       url('../themes/dpgreen/assets/fonts/roboto/roboto-v20-latin-700.svg#Roboto') format('svg');
}

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 900;
  src: url('../themes/dpgreen/assets/fonts/roboto/roboto-v20-latin-900.eot');
  src: local('Roboto Black'), local('Roboto-Black'),
       url('../themes/dpgreen/assets/fonts/roboto/roboto-v20-latin-900.eot?#iefix') format('embedded-opentype'),
       url('../themes/dpgreen/assets/fonts/roboto/roboto-v20-latin-900.woff2') format('woff2'),
       url('../themes/dpgreen/assets/fonts/roboto/roboto-v20-latin-900.woff') format('woff'),
       url('../themes/dpgreen/assets/fonts/roboto/roboto-v20-latin-900.ttf') format('truetype'),
       url('../themes/dpgreen/assets/fonts/roboto/roboto-v20-latin-900.svg#Roboto') format('svg');
}
/*! Generated by Font Squirrel (https://www.fontsquirrel.com) on July 6, 2021 */

@font-face {
    font-family: 'baskerville';
    src: url('../themes/dpgreen/assets/fonts/baskerville/librebaskerville-regular-webfont.eot');
    src: url('../themes/dpgreen/assets/fonts/baskerville/librebaskerville-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../themes/dpgreen/assets/fonts/baskerville/librebaskerville-regular-webfont.woff2') format('woff2'),
         url('../themes/dpgreen/assets/fonts/baskerville/librebaskerville-regular-webfont.woff') format('woff'),
         url('../themes/dpgreen/assets/fonts/baskerville/librebaskerville-regular-webfont.ttf') format('truetype'),
         url('../themes/dpgreen/assets/fonts/baskerville/librebaskerville-regular-webfont.svg#libre_baskervilleregular') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'baskerville';
    src: url('../themes/dpgreen/assets/fonts/baskerville/librebaskerville-bold-webfont.eot');
    src: url('../themes/dpgreen/assets/fonts/baskerville/librebaskerville-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../themes/dpgreen/assets/fonts/baskerville/librebaskerville-bold-webfont.woff2') format('woff2'),
         url('../themes/dpgreen/assets/fonts/baskerville/librebaskerville-bold-webfont.woff') format('woff'),
         url('../themes/dpgreen/assets/fonts/baskerville/librebaskerville-bold-webfont.ttf') format('truetype'),
         url('../themes/dpgreen/assets/fonts/baskerville/librebaskerville-bold-webfont.svg#libre_baskervillebold') format('svg');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'baskerville';
    src: url('../themes/dpgreen/assets/fonts/baskerville/librebaskerville-italic-webfont.eot');
    src: url('../themes/dpgreen/assets/fonts/baskerville/librebaskerville-italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('../themes/dpgreen/assets/fonts/baskerville/librebaskerville-italic-webfont.woff2') format('woff2'),
         url('../themes/dpgreen/assets/fonts/baskerville/librebaskerville-italic-webfont.woff') format('woff'),
         url('../themes/dpgreen/assets/fonts/baskerville/librebaskerville-italic-webfont.ttf') format('truetype'),
         url('../themes/dpgreen/assets/fonts/baskerville/librebaskerville-italic-webfont.svg#libre_baskervilleitalic') format('svg');
    font-weight: normal;
    font-style: italic;
}

/* @font-face {
    font-family: 'Merriweather';
    font-style: normal;
    font-weight: 300;
    src: url('merriweather-v30-latin-300.eot');
    src: local(''),
        url('merriweather-v30-latin-300.eot?#iefix') format('embedded-opentype'),
        url('merriweather-v30-latin-300.woff2') format('woff2'),
        url('merriweather-v30-latin-300.woff') format('woff'),
        url('merriweather-v30-latin-300.ttf') format('truetype'),
        url('merriweather-v30-latin-300.svg#Merriweather') format('svg');
}

@font-face {
    font-family: 'Merriweather';
    font-style: italic;
    font-weight: 300;
    src: url('merriweather-v30-latin-300italic.eot');
    src: local(''),
        url('merriweather-v30-latin-300italic.eot?#iefix') format('embedded-opentype'),
        url('merriweather-v30-latin-300italic.woff2') format('woff2'),
        url('merriweather-v30-latin-300italic.woff') format('woff'),
        url('merriweather-v30-latin-300italic.ttf') format('truetype'),
        url('merriweather-v30-latin-300italic.svg#Merriweather') format('svg');
} */

@font-face {
    font-family: 'Merriweather';
    font-style: normal;
    font-weight: 400;
    src: url('../themes/dpgreen/assets/fonts/merriweather/merriweather-v30-latin-regular.eot');
    src: local(''),
        url('../themes/dpgreen/assets/fonts/merriweather/merriweather-v30-latin-regular.eot?#iefix') format('embedded-opentype'),
        url('../themes/dpgreen/assets/fonts/merriweather/merriweather-v30-latin-regular.woff2') format('woff2'),
        url('../themes/dpgreen/assets/fonts/merriweather/merriweather-v30-latin-regular.woff') format('woff'),
        url('../themes/dpgreen/assets/fonts/merriweather/merriweather-v30-latin-regular.ttf') format('truetype'),
        url('../themes/dpgreen/assets/fonts/merriweather/merriweather-v30-latin-regular.svg#Merriweather') format('svg');
}

@font-face {
    font-family: 'Merriweather';
    font-style: italic;
    font-weight: 400;
    src: url('../themes/dpgreen/assets/fonts/merriweather/merriweather-v30-latin-italic.eot');
    src: local(''),
        url('../themes/dpgreen/assets/fonts/merriweather/merriweather-v30-latin-italic.eot?#iefix') format('embedded-opentype'),
        url('../themes/dpgreen/assets/fonts/merriweather/merriweather-v30-latin-italic.woff2') format('woff2'),
        url('../themes/dpgreen/assets/fonts/merriweather/merriweather-v30-latin-italic.woff') format('woff'),
        url('../themes/dpgreen/assets/fonts/merriweather/merriweather-v30-latin-italic.ttf') format('truetype'),
        url('../themes/dpgreen/assets/fonts/merriweather/merriweather-v30-latin-italic.svg#Merriweather') format('svg');
}

@font-face {
    font-family: 'Merriweather';
    font-style: normal;
    font-weight: 700;
    src: url('../themes/dpgreen/assets/fonts/merriweather/merriweather-v30-latin-700.eot');
    src: local(''),
        url('../themes/dpgreen/assets/fonts/merriweather/merriweather-v30-latin-700.eot?#iefix') format('embedded-opentype'),
        url('../themes/dpgreen/assets/fonts/merriweather/merriweather-v30-latin-700.woff2') format('woff2'),
        url('../themes/dpgreen/assets/fonts/merriweather/merriweather-v30-latin-700.woff') format('woff'),
        url('../themes/dpgreen/assets/fonts/merriweather/merriweather-v30-latin-700.ttf') format('truetype'),
        url('../themes/dpgreen/assets/fonts/merriweather/merriweather-v30-latin-700.svg#Merriweather') format('svg');
}



@font-face {
    font-family: 'Merriweather';
    font-style: italic;
    font-weight: 700;
    src: url('../themes/dpgreen/assets/fonts/merriweather/merriweather-v30-latin-700italic.eot');
    src: local(''),
        url('../themes/dpgreen/assets/fonts/merriweather/merriweather-v30-latin-700italic.eot?#iefix') format('embedded-opentype'),
        url('../themes/dpgreen/assets/fonts/merriweather/merriweather-v30-latin-700italic.woff2') format('woff2'),
        url('../themes/dpgreen/assets/fonts/merriweather/merriweather-v30-latin-700italic.woff') format('woff'),
        url('../themes/dpgreen/assets/fonts/merriweather/merriweather-v30-latin-700italic.ttf') format('truetype'),
        url('../themes/dpgreen/assets/fonts/merriweather/merriweather-v30-latin-700italic.svg#Merriweather') format('svg');
}
/*
@font-face {
    font-family: 'Merriweather';
    font-style: normal;
    font-weight: 900;
    src: url('merriweather-v30-latin-900.eot');
    src: local(''),
        url('merriweather-v30-latin-900.eot?#iefix') format('embedded-opentype'),
        url('merriweather-v30-latin-900.woff2') format('woff2'),
        url('merriweather-v30-latin-900.woff') format('woff'),
        url('merriweather-v30-latin-900.ttf') format('truetype'),
        url('merriweather-v30-latin-900.svg#Merriweather') format('svg');
}

@font-face {
    font-family: 'Merriweather';
    font-style: italic;
    font-weight: 900;
    src: url('merriweather-v30-latin-900italic.eot');
    src: local(''),
        url('merriweather-v30-latin-900italic.eot?#iefix') format('embedded-opentype'),
        url('merriweather-v30-latin-900italic.woff2') format('woff2'),
        url('merriweather-v30-latin-900italic.woff') format('woff'),
        url('merriweather-v30-latin-900italic.ttf') format('truetype'),
        url('merriweather-v30-latin-900italic.svg#Merriweather') format('svg');
}*/
/* Frontend editor */
.ct-widget.ct-ignition { position:fixed; left:auto; top:auto; right:20px; bottom:20px; z-index:10000; transition:all 0.5s ease 0s; }
.ct-widget.ct-ignition .ct-ignition__button { position:static; margin-top:10px;}

.ce-element { outline:2px dashed rgba(243, 156, 18, 0.5); }
.ce-element--focused, .ce-element:focus { outline:2px dashed rgba(243, 156, 18, 1); }
/**
* General Elements
**/

html{ font-size: 10px; }
body{ font-size: 1.8rem; font-family: 'Roboto', Arial, sans-serif; font-weight: var(--font-regular); color: #202124; 

    --containerWidth: 100%;
    --asideWidth: calc( ((100vw - var(--containerWidth)) / 2) + (1.5rem / 2) );

    --defaultColor: #202124;
    --linkColor: #B9C629;
    --grisC: #ebe8e4;
    --gris70: #707070;
    --grisForm: #F6F5F2;

    --titleFont: 'Merriweather', 'baskerville', 'Times New Roman', serif;
    --titleColor: #A3AF92;

    --swiper-theme-color: var(--defaultColor);
    --headerHeight: 10rem;
}

:focus, button:focus { outline:none; }

/* Images */
img, svg { max-width:100%; height:auto; }
[data-sizes] { display:block; width:100%; }
[data-bg] { background-size:cover; background-repeat:no-repeat; background-position:center center; }
.cover{ position: relative; overflow: hidden; }
.cover > img{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); object-fit: cover; min-width: 100%; min-height: 100%; }

/* Titles */
h1{ font-family: var(--titleFont); margin: 0; }
.h1{ font-size: 7rem; margin: 0; color: #fff; line-height: 0.9em; position: relative; font-family: var(--titleFont); text-align: center; }
h2, h3, h4, h5{ font-weight: normal; margin: 1.5em 0 1em; }
h2{ font-size: 4rem; font-weight: normal; font-family: var(--titleFont); text-align: center; position: relative; }
h2.moving{ font-size: 20vmin; margin: 0.5em; line-height: 0.7em; font-family: var(--titleFont); text-align: center; width: 100vw; left: calc(var(--asideWidth) * -1); position: relative; }
h2.moving strong{ font-weight: normal; display: inline-block; opacity: 0.1; white-space: nowrap;
    -webkit-animation: floatText 10s infinite normal linear;
            animation: floatText 10s infinite normal linear; }
    @keyframes floatText{
      from {
        transform: translateX(100vw);
      }
      to {
        transform: translateX(-100%);
      }
    }
    @-webkit-keyframes floatText{
      from {
        transform: translateX(100vw);
      }
      to {
        transform: translateX(-100%);
      }
    }
.row h2{ text-align: initial; }
h3,
h4{ font-size: 2.6rem; font-family: var(--titleFont); }
h3:after,
h4:after{ content: ''; display: block; width: 4.5rem; border-bottom: 1px solid var(--gris70); padding-top: 0.5em; }
h5{ font-size: 1.8rem; }
h6{ font-size: 1.4rem; }

.text-center h3:after,
.text-center h4:after{ left: 50%; position: relative; transform: translateX(-50%); }

/* Paragraphs */
p { margin-bottom:1em; }

hr{ width: 8rem; height: 1px; border: 0; background-color: var(--defaultColor); margin: 1.8em 0 2em; opacity: 1; }

b, strong { font-weight: bold; color: #545356; }

.emphase{ font-family: var(--titleFont); font-size: 1.2em; }

/* Link */
a { color:inherit; text-decoration:none; }
a:hover { color:inherit; }

main a{ color: var(--linkColor); }
main a:hover{ text-decoration: underline; color: var(--linkColor); }

p a{ color: var(--linkColor); }
p a:hover{ text-decoration: underline; }

.ico-inline-wrapper { display: flex; }
.ico-inline-wrapper .ico { margin-right: 0; }

.ico{ display: flex; align-items: center; margin-right: 1em; }
.ico .label{ display: none; }
.ico:before{ content: ''; width: 2rem; min-width: 2rem; height: 2rem; margin-right: 0.5em; background-color: var(--defaultColor); 
    -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat; -webkit-mask-position: 50% 50%; 
    mask-size: contain; mask-repeat: no-repeat; mask-position: 50% 50%; }
.ico.notext{ overflow: hidden; white-space: nowrap; width: 2rem; }
.ico.notext:before{ margin-right: 0; }
.ico.cart:before{ -webkit-mask-image: url(../themes/dpgreen/assets/img/ico-shop.svg); mask-image: url(../themes/dpgreen/assets/img/ico-shop.svg); }
.ico.cart.blanc:before{ -webkit-mask-image: url(../themes/dpgreen/assets/img/ico-shop-white.svg); mask-image: url(../themes/dpgreen/assets/img/ico-shop-white.svg); }
.ico.mail:before{ -webkit-mask-image: url(../themes/dpgreen/assets/img/ico-mail.svg); mask-image: url(../themes/dpgreen/assets/img/ico-mail.svg); }
.ico.top:before{ -webkit-mask-image: url(../themes/dpgreen/assets/img/ico-fleche.svg); mask-image: url(../themes/dpgreen/assets/img/ico-fleche.svg); transform: rotate(-90deg); }
.ico.voir:before{ -webkit-mask-image: url(../themes/dpgreen/assets/img/ico-eye.svg); mask-image: url(../themes/dpgreen/assets/img/ico-eye.svg); }
.ico.facture:before{ -webkit-mask-image: url(../themes/dpgreen/assets/img/ico-invoice.svg); mask-image: url(../themes/dpgreen/assets/img/ico-invoice.svg); }
.ico.cb:before{ -webkit-mask-image: url(../themes/dpgreen/assets/img/ico-credit-card.svg); mask-image: url(../themes/dpgreen/assets/img/ico-credit-card.svg); }
.ico.livraison:before{ -webkit-mask-image: url(../themes/dpgreen/assets/img/truck.svg); mask-image: url(../themes/dpgreen/assets/img/truck.svg); }
.ico.close:before{ -webkit-mask-image: url(../themes/dpgreen/assets/img/ico-close.svg); mask-image: url(../themes/dpgreen/assets/img/ico-close.svg); }
.ico.logout:before{ -webkit-mask-image: url(../themes/dpgreen/assets/img/ico-power-off.svg); mask-image: url(../themes/dpgreen/assets/img/ico-power-off.svg); }
.casper{ display: none !important; }

.fr-file{ display: flex; align-items: center; justify-content: flex-start; }
.fr-file:before { content: ''; background-image: url(../themes/dpgreen/assets/img/ico-paperclip.svg);width: 1.5rem; min-width: 1.5rem; height: 1.5rem; margin-right: 0.2em; background-size: contain; background-repeat: no-repeat; background-position: 50% 50%; }
.fr-video{ display: block; width: 100%; height: 0; padding-top: 56%; position: relative; margin-bottom: 3rem; }
.fr-video iframe{ position: absolute; width: 100% !important; height: 100% !important; top: 0; }

/* Lists */ 
::marker{ color: var(--defaultColor); font-weight: bold; }
ul, 
ol{ margin-bottom: 1em; }
ul ol,
ol ul,
ul ul,
ol ol{ padding-left: 3rem; }

ul li, 
ol li{ margin-bottom: 0.5rem; margin-top: 0.5rem; line-height: 1.3em; }

nav ul, 
nav ol{ margin-bottom:0; padding:0; list-style:none; }
nav ul li,
nav ol li{ margin-bottom: 0.5rem; line-height: 1.5em; }

ul.checklist li{ list-style-type: none; }
ul.checklist li:before{ content: url(../themes/dpgreen/assets/img/check.svg); margin-left: -2rem; margin-right: 0.3rem; opacity: 0.6; }

ul.flex-col{ display: flex; list-style: none; padding: 0; }
ul.flex-col > li{ margin-right: 2em; }
ul.flex-col > li:last-child{ margin-right: 0; }

/* Forms */

:focus, 
button:focus { outline:none; }

input,
select,
textarea,
input{ background-color: #fff; border-radius: 0; border: 1px solid var(--gris70); }

label { display: inline-block; }
select { word-wrap: normal; }
button, 
input, 
optgroup, 
select, 
textarea { margin: 0; font-family: inherit; font-size: inherit; line-height: inherit; }

.form-control,
.form-select { font-size: 1.8rem; display: block; width: 100%; padding: .375rem .75rem; font-weight: 400; line-height: 1.5; color: var(--defaultColor); background-color: #fff; background-clip: padding-box; border: 1px solid var(--defaultColor); -webkit-appearance: none; -moz-appearance: none; appearance: none; border-radius: .25rem; transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out; }
.form-select { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right .75rem center; background-size: 16px 12px; }
.form-control.is-invalid,
.form-select.is-invalid{ border-color: #c00; }
.form-control.is-invalid:focus,
.form-select.is-invalid:focus{ box-shadow: inset -1px -1px 5px 0px rgb(0 0 0 / 20%); border-color: #c00; }

.required + label:after,
[required] + label:after{ content: ' *'; color: #c00; }
.invalid-feedback { display: none; width: 100%; margin-top: .25rem; font-size: .875em; color: #dc3545; }
.invalid-feedback.visible { display:block !important; }
.required_without + label:after{ content: '*'; color: #e88b00; }
.form-select.required_without.is-invalid,
.form-control.required_without.is-invalid { border-color: #e88b00; }
.required_without + label + .invalid-feedback { color: #e88b00; }
[data-validate-for]{ color: #C00; font-size: 0.9em; }

.form-control:focus,
.form-select:focus { color: inherit; border-color: inherit; outline: 0; box-shadow: inset -1px -1px 5px 0px rgb(0 0 0 / 20%); }
.form-floating { position: relative; margin: 0.625rem 0; }
.form-floating + .form-floating{ margin-top: 1.25rem; }
.form-floating > .form-control,
.form-floating > .form-select { height: calc(2em + 2rem); padding: 1rem .75rem; }
.form-floating > label { position: absolute; top: 0; left: 0; height: 100%; padding: 1.625rem .75rem; pointer-events: none; border: 1px solid transparent; transform-origin: 0 0; transition: opacity .1s ease-in-out,transform .1s ease-in-out; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; max-width: 100%; }
.form-floating > .form-control::placeholder { color: transparent; }
.form-floating > .form-select,
.form-floating > .form-control:focus,
.form-floating > .form-control:not(:placeholder-shown) { padding-top: 2rem; padding-bottom: .0; }
.form-floating > .form-control:-webkit-autofill { padding-top: 1.625rem; padding-bottom: .625rem; }
.form-floating > .form-control:focus ~ label ,
.form-floating > .form-control:not(:placeholder-shown) ~ label ,
.form-floating > .form-select ~ label,
.form-floating > .form-control:-webkit-autofill ~ label { opacity: .65; transform: scale(.85) translateY(-1.2rem) translateX(.15rem); }

.form-floating.no-border > .form-control,
.form-floating.no-border > .form-select{ background-color: var(--grisForm); border-color: #fff; }
.form-floating.no-border > .form-control:focus,
.form-floating.no-border > .form-select:focus{ border-color: var(--defaultColor); }
.form-floating.no-border > .form-control.is-invalid,
.form-floating.no-border > .form-select.is-invalid{ border-color: #900; }

.form-row{ display: flex; }
.form-row > :first-child{ width: 30%; margin-right: 1.25rem; }
.form-row > :last-child{ width: 70%; }

.form-intro{ margin: 0 0 2em 0; }
.form-info{ font-size: 0.95em; float: right; margin-top: 0.3em; margin-bottom: 0.5em; }

.form-check-field { display: flex; align-items: flex-start; padding-left: 0; margin: 1.25rem 0; }
.form-check-input{ margin: 0.2em 0.5em 0 0; min-width: 1em; }
.form-check-input:checked{ background-color: var(--defaultColor); border-color: var(--defaultColor); }
.form-check-input:focus { border-color: var(--defaultColor); outline: 0; box-shadow: 0 0 0 0.25rem rgb(0 0 0 / 15%); }
.form-check-input[required] { border-color: #900; }
.form-check-input[required]:checked { border-color: var(--defaultColor); }
.form-check-input.is-invalid~.form-check-label, 
.was-validated .form-check-input:invalid~.form-check-label{ color: inherit; }
.form-switch .form-check-input:not(:checked):focus { background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%280, 0, 0, 0.25%29'/%3e%3c/svg%3e"); }

.flex-col{ display: flex; flex-direction: column; }
.flex-col.stretch{ align-items: stretch; }
.flex-center{ justify-content: center; display: flex; }
.flex-center + [data-validate-for]{ text-align: center; }

.alert{ border-radius: 5px; max-width: 840px; margin: 1em auto; padding: 4vmin 4vmin; box-shadow: 0 0 10rem 0px rgb(0 0 0 / 60%); 
    position: fixed; left: 0; right: 0; top: 50%; transform: translateY(-50%); z-index: 4; opacity: 0.95; }
.alert p:last-child{ margin-bottom: 0; }
.alert .close{ border: 0; background: 0; float: right; cursor: pointer;}
.alert .close p{ clear: both; }
.alert.alert-info { color: #ffffff; background-color: #565656; border-color: #2b2c2f; }
.alert-success{ color: #525812; background-color: rgb(230 255 175); border-color: var(--linkColor); }
.btn-close:focus { box-shadow: none; }

.alert .btn{ font-size: inherit; align-items: center; flex-direction: column; }

.btn{ display: flex; margin: 0; padding: 0; justify-content: flex-start; clear: both; }
.btn:focus{ box-shadow: none; }
.btn>*{ font-size: 1.4rem; line-height: 1.8em; display: flex; align-items: center; justify-content: center; width: auto; margin: 1.5rem 0; border: 1px solid var(--defaultColor); font-weight: bold; color: var(--grisC);  background-color: var(--defaultColor); padding: 1em; height: calc(2em + 2.8rem); transition: all 0.2s ease-out; white-space: nowrap; position: relative; border-radius: 3px; }
.btn>*:after{ content: ''; background: url(../themes/dpgreen/assets/img/fleche-goto.svg); width: 1.5rem; height: 1.5rem; background-color: var(--grisC); margin-left: 1rem;
     mask-image: url(../themes/dpgreen/assets/img/fleche-goto.svg); mask-repeat: no-repeat; mask-position: 50% 50%; mask-size: contain;
    -webkit-mask-image: url(../themes/dpgreen/assets/img/fleche-goto.svg); -webkit-mask-repeat: no-repeat; -webkit-mask-position: 50% 50%; -webkit-mask-size: contain; }
.btn>*:hover{ background-color: transparent; color: var(--defaultColor); border-color: var(--defaultColor); text-decoration: none; }
.btn>*:hover:after{ background-color: var(--defaultColor); }
.btn>.ico:before{ background-color: #fff; }
.btn>.ico:hover:before{ background-color: var(--defaultColor); }

.btn.blanc>*{ background-color: transparent; color: var(--defaultColor); border-color: var(--defaultColor); }
.btn.blanc>*:after{ background-color: var(--defaultColor); }
.btn.blanc>*:hover{ background-color: var(--defaultColor); color: var(--grisC); /*border-color: var(--grisC);*/ }
.btn.blanc>*:hover:after{ background-color: var(--grisC); }
.btn.blanc>.ico:before{ background-color: var(--defaultColor); }
.btn.blanc>.ico:hover:before{ background-color: #fff; }

.btn.error>*{ background-color: #900; color: #fff; border-color: #600; }
.btn.error>*:after{ background-color: #fff; }
.btn.error>*:hover{ background-color: #fff; color: #600; /*border-color: var(--grisC);*/ }
.btn.error>*:hover:after{ background-color: #600; }
.btn.error>.ico:before{ background-color: #fff; }
.btn.error>.ico:hover:before{ background-color: #600; }

.btn.mini{ min-height: 3.7rem; min-width: 4.5rem; }
.btn.mini>*{ /*height: 2.5rem; padding: 0.5rem; */ height: auto; padding: 0.8rem 1.2rem; }
.btn.mini>*:after{ content: none; }

.btn.right{ justify-content: flex-end; }
.btn.center{ justify-content: center; }
.btn.no-arrow>*:after{ content: none; }

.btn>svg{ margin: 0; }
.btn>button[disabled]{ opacity: .5; pointer-events: none; cursor: default; }

.input-group{ flex-wrap: nowrap; margin: 0.625rem 0;  align-items: center; }
.input-group .btn{ z-index: inherit; }
.input-group .btn>*:after{ content: none; }
.input-group .form-floating { margin: 0; }

.blob{ background-color: var(--grisC); width: 5rem; min-width: 5rem; height: 5rem; min-height: 5rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: all 0.2s ease-out; }
.blob:hover{ transform: scale(1.2); }
.blob.ico:before{ margin-right: 0; }

.encadre{ background-color: var(--grisC); border: 1px solid var(--gris70); padding: 2rem 10%; margin-bottom: 1.5em; }

.bg-gris{ background-color: var(--grisC); }
.pin{ position: relative; }
.pin:before{ content:''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: url(../themes/dpgreen/assets/img/pin.png); background-repeat: no-repeat; background-position: 100% 100%; background-size: auto 100%; mix-blend-mode: multiply; }
.pin>div{position: relative; z-index: 1;  }

.bg-success { background-color: #8b9338!important; }

.outsidetop{ transform: translateY( -8% ); }
.outside{ width: calc(100% + var(--asideWidth)); }
.bg-outside{ position: relative; }
.bg-outside:before{ content: ''; position: absolute; left: 0; top: 0; width: calc(100% + var(--asideWidth)); height: 100%; background-color: var(--grisC); z-index: -1; }
.bg-outside.left:before{ left: inherit; right: 0; }

.swiper-button-next:after, 
.swiper-button-prev:after { font-size: 2rem; font-weight: bold; }

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

/* table */
th{ font-size: 2rem; font-family: inherit; color: #fff; background-color: var(--defaultColor); height: 2em; display: flex; align-items: center; justify-content: center; margin: 0; }


/*
* Header 
*/
section{ overflow: hidden; }

#header{ background-color: var(--grisForm); z-index: 3; position: fixed; width: 100%; }
#header > div{ height: var(--headerHeight); display: flex; align-items: center; justify-content: space-between; }
    .hamburger{ display: none; flex-direction: column; align-items: flex-start; position: relative; z-index: 3; padding: 0; }
    .hamburger:before,
    .hamburger:after{ content: ''; width: 50%; height: 0; border-bottom: 2px solid var(--defaultColor); margin: 4px 1.4rem; transition: all 0.2s ease-in; }
    .hamburger:after{ width: 30%; }
    .hamburger:hover:before{ width: 30%; }
    .hamburger:hover:after{ width: 50%; }
    .hamburger.is-active{ align-items: center; }
    .hamburger.is-active:before{ width: 50%; margin: 0; transform: rotate(-45deg); transform-origin: 60%; }
    .hamburger.is-active:after { width: 50%; margin: 0; transform: rotate(45deg);  transform-origin: 55%; }

    .menu ul{ display: flex; padding: 0 1em; }
    .menu-item{ font-weight: bold; padding: 1rem 0.5em; font-size: 1.6rem; font-family: var(--titleFont); position: relative; cursor: pointer; white-space: nowrap; display: flex; align-items: center; justify-content: center; }
    .menu-item:before{ content: ''; position: absolute; bottom: 0.5rem; left: 1rem; width: 0; border-bottom: 1px solid #2B2C2F; transition: all 0.2s ease-out; }
    .menu-item:hover:before{ width: calc(100% - 4rem); }
    .toggler{ position: relative; }
    .toggler>.menu-item:after{ content: ''; background: url(../themes/dpgreen/assets/img/fleche.svg) no-repeat 0 0; width: 16px; min-width: 16px; height: 16px; margin-left: 0.2em; margin-top: 0.2em; }
    .toggler>ul{ position: absolute; top: 100%; left: 0; height: 0; overflow: hidden; transition: all 0.3s ease-out; display: flex; flex-direction: column; align-items: flex-start; background-color: var(--grisForm); }
    .toggler.open>ul{ height: auto; }
    .toggler.open>.menu-item:before{ width: calc(100% - 4rem); }
    .toggler li{ margin: 0; }
    .menu-item.level-2{ padding: 0.5em 0; padding-right: 0.5em; transition: all 0.2s ease-out; }
    .menu-item.level-2:hover{ padding-left: 0.5em; padding-right: 0; }
    .menu-item.level-2::before{ content: none; }

    .badge{ margin: 0.3em 0; font-size: .9em; font-weight: normal; }

    .shop{ display: flex; }
    .shop .menu-item{ font-weight: normal; }
    .shop .blob{ position: relative; }
    .shop .badge{ color: #000; position: absolute; left: 2.2rem; top: 2.4rem; font-size: 1.2rem; }

    /* aside menu cubes avec animation */
    #menu-tertiaire{ position: fixed; z-index: -1; right: 0; top: 50%; margin-top: -10rem; }
    #menu-tertiaire ul{ display: flex; flex-direction: column; justify-content: flex-end; }
    #menu-tertiaire li{ margin: 0; }
    #menu-tertiaire li a{ float: right; width: 5rem; height: 5rem; overflow: hidden; line-height: 5rem; transition: all 0.5s ease-in; display: flex; color: #fff; }
    #menu-tertiaire li a:hover{ margin-right: 0rem !important; }
    #menu-tertiaire li a:before{ width: 5rem; height: 5rem; background-repeat: no-repeat; background-position: 1.25rem 50%; background-size: 2.5rem; }
    #menu-tertiaire li a.top{ width: 25rem; margin-right: -20rem; background-color: #849B5A; animation: 10s ease-in 5s infinite normal forwards running tertiaire; }
    #menu-tertiaire li a.mail{ width: 15rem; margin-right: -10rem; background-color: #053360; animation: 10s ease-in 5.1s infinite normal forwards running tertiaire; }
    #menu-tertiaire li a.recrutement{ width: 20rem; margin-right: -15rem; background-color: var(--recrutement); animation: 10s ease-in 5.2s infinite normal forwards running tertiaire; }
    #menu-tertiaire li a.recrutement:before{ background-size: 3rem; background-position: 1rem; }
    
    @keyframes tertiaire {
    0% { transform: translateX(0); }
    3% { transform: translateX(-2rem); }
    6% { transform: translateX(0); }
    100% { transform: translateX(0); }
    }


/* 
* Main
*/
#main{ margin-top: var(--headerHeight); background: url(../themes/dpgreen/assets/img/pins.jpg) no-repeat 50% 100%; background-size: 100% auto; padding-bottom: 12vw; position: relative; z-index: 1; }

#page { position:relative; width:100%; overflow:hidden; }
#banner{ min-height: 50vmin; display: flex; align-items: center; padding: 4rem 2rem; }
#banner:before{ content: ''; height: 100%; width: 100%; display: flex; align-items: center; padding: 4rem 2rem; position: absolute; top: 0; left: 0; background-color: #333; opacity: 0.55; z-index: 1; backdrop-filter: blur(3px); }
#banner>div{ position: relative; z-index: 2; }
#banner h2{ color: #fff; margin: 0; }

body[id^="legal-"] #banner{ min-height: 25vmin; }
body#legal-donnees-personnelles #banner{ margin-bottom: 8rem; }
body[id^="legal-"] table{ width: 100%; margin-bottom: 2em; border-collapse: separate; }
body[id^="legal-"] th{ display: table-cell; background-color: var(--gris70); padding-left: 0.5em; }
body[id^="legal-"] td{ padding: 0.5em; border-bottom: 1px solid var(--grisC);}

#bandeau{ position: relative; padding-bottom: 40px; overflow: visible; }
#bandeau::after{ content: ''; display: block; width: 2px; height: 105px; opacity: 0.4; position: absolute; bottom: -30px; left: 0; right: 0; margin: auto; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2 104.973'%3E%3Cpath fill='none' stroke='%232b2c2f' stroke-dasharray='2 8' stroke-width='2' d='M1 0v104.973'/%3E%3C/svg%3E") no-repeat 50% 0; }
.intro{ text-align: center; margin: 8rem 0; }

#alea-product { position: fixed; z-index: 1; top: 70%; right: 0; transform: translateY(-50%); font-family: var(--titleFont); max-width: 220px; max-height: 30%; }
#alea-product a{ padding: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; background-color: var(--grisC); opacity: 0.92; transition: all 0.2s ease-out; backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
#alea-product a:hover{ opacity: 1; transform: translateY(-1rem); }
#alea-product a img{ margin: 1em 1em 0; mix-blend-mode: multiply; }
#alea-product a strong{ text-align: center; font-size: 2rem; padding: 0.5em 1em; white-space: normal; line-height: 1.2em; }
#alea-product a span{ display: block; background-color: #A79883; color: #fff; font-size: 2rem; width: 100%; text-align: center; padding: 0.5em; }

.stripe-loading-indicator .stripe, 
.stripe-loading-indicator .stripe-loaded{ background: #B9C629; }

/* 
* Footer
*/
#footer{ background-color: #2B2C2F; color: #fff; font-size: 14px; }
#footer p{ margin-bottom: 0.3em; }
#footer a{ opacity: 1; transition: all 0.2s ease-out; }
#footer a:hover{ opacity: 0.8; }

#footer-main{ padding: 6rem 0 3rem; }
#footer-main > div{ display: flex; align-items: flex-start; justify-content: space-between; }

#footer-main .coords{ margin-top: 2em; /* font-family: 'Times New Roman', Times, serif;font-size: 1.8rem; */}
#footer-main .coords strong{ color: #707070; }
#footer-main .coords a{ color: inherit; }

    .site-id{ width: 100%; max-width: 20rem; }
    .paiement{ font-family: var(--titleFont); font-size: 2rem; }
    .paiement .cb{ border: 1px solid #464749; border-radius: 10px; padding: 1.5rem 1.5rem 1rem; margin-top: 2rem; display: flex; align-items: center; justify-content: flex-start; position: relative; }
    .paiement .cb > .stripe{ position: absolute; top: -1.7rem; left: 1.5rem; background-color: #2B2C2F; }
    .paiement .cb img{ margin: 0 0.5rem; }

    .socials{ display: flex; align-items: center; margin: 0; padding: 0; }
    .socials li{ display: block; margin: 0 0.5em; }
    .socials .blob{ background-color: #464648; }

#footer-legal{ font-size: 1.2rem; border-top: 1px solid #464749; padding-top: 1rem; padding-bottom: 1rem; }
#footer-legal > div{ min-height: 3rem; display: flex; align-items: center; justify-content: space-between; }
#footer-legal p{ margin: 0; }
#footer-legal ul{ display: flex; align-items: center; margin: 0; }
#footer-legal ul li{ display: block; padding: 0 1rem; }

#loading{ opacity: 0; pointer-events: none; position: fixed; background-color: rgb(0 0 0 / 30%); width: 100vw; height: 100vh; top: 0; left: 0; z-index: 1; backdrop-filter: blur(3px); display: flex; align-items: center; justify-content: center; transition: all 0.2s linear; }
.oc-loading #loading{ opacity: 1; }


/* ACCUEIL */
#accueil .h1{ color: var(--defaultColor); text-align: left; margin-bottom: 0.7em; }
#accueil #banner{ min-height: 65vmin; }
#accueil #banner:before{ content: none; }
.certifications{ display: flex; align-items: center; }
.certifications span{ margin: 0 0.5em; }

#presentation-produits{ padding: 10rem 0 5rem; }
#presentation-produits .outside{ padding-left: 5rem; }
#presentation-produits h2{ margin-top: 0; }
#presentation-produits p{ text-align: justify; }

#products-list .mall-products{ position: relative; }
#products-list .mall-products .swiper-pagination-bullets{ display: flex; flex-direction: column; top: 40%; left: 1.5rem; transform: translateY(-50%); width: 2rem; height: auto; }
#products-list .mall-products .swiper-pagination-bullet{ width: 1.5rem; height: 1.5rem; border-radius: 2px; margin: 1rem 0; opacity: 1; background-color: var(--defaultColor); }
#products-list .mall-products .swiper-pagination-bullet-active{ opacity: 1; border: 0.5rem solid var(--defaultColor); border-width: 0.3rem 0.3rem 0.6rem 0.6rem; background-color: var(--grisC); }

#gemmage{ overflow: visible; margin-top: 8%; }
#gemmage .text{ justify-content: center; display: flex; flex-direction: column; height: 100%; padding: 5rem 0; }
#gemmage h2{ margin-top: 0; }

#slide-pins{ position: relative; padding: 8% 12%; }
#slide-pins .swiper{ overflow: visible; }
#slide-pins .swiper-slide{ transform: scale(0.9); transition: all 0.7ms ease-out; }
#slide-pins .swiper-slide-next{ transform: scale(1.1); }

#frenchtouch{ margin: 5rem 0; }
#bio{ margin: 5rem 0; }
#foret{ width: 100%; height: 50vmin; }
#label{ text-align: center; padding-top: 5rem; }
#label .mini{ font-size: 0.9em; margin-top: 2rem; }
#label img{ max-width: 50px; margin: auto; display: block; }

#accueil #teasers{ overflow: hidden; padding-bottom: 1em; margin-top: 5vmin; }
#accueil #teasers .row{ justify-content: center; }
#accueil .blog-post-teaser.front{ display: flex; flex-direction: column-reverse; background-color: #ebe8e4; border: 0; }
#accueil .blog-post-teaser.front .text{ margin: 0; }
#accueil .blog-post-teaser.front h3:after{ content: none; }


/* HISTOIRE */
#histoires{ overflow: inherit; margin-top: 8rem; }
.histoire{ margin: 8rem 0; }
.histoire .bg-outside{ padding-bottom: 3rem; }
.histoire .text{ font-family: var(--titleFont); padding: 2rem 7rem 3rem 5rem; }
.histoire .images{ position: relative; height: 100%; transform: translateY(-4rem); }
.histoire .images a{ width: 100%; max-width: 260px; border: 10px solid #efff; border-bottom-width: 30px; box-shadow: 2px -1px 7px rgb(0 0 0 / 50%); }
#histoire .coin{ position: absolute; right: 0; bottom: 0; width: 7rem; height: 7rem; transform: translate(1px, 1px); }
#histoire .coin:before{ content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #E0DAD2; clip-path: polygon(0 0, 100% 0, 0 100%); -webkit-clip-path: polygon(0 0, 100% 0, 0 100%); }
#histoire .coin:after{  content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #fff;    clip-path: polygon(0 100%, 100% 0, 100% 100%); -webkit-clip-path: polygon(0 100%, 100% 0, 100% 100%); }
#histoire .fancybox-image{ border: 20px solid #fff; border-bottom-width: 40px; }
.slide-desc.active{ font-weight: bold; }

/* Notre Savoir-faire */
#savoir-faire .certifications{ justify-content: center; max-width: 200px; margin: 1em auto; }
#savoir-faire .fancybox-image{ border: 20px solid #fff; border-bottom-width: 40px; }

/* Société */
#societe #banner:before{ content: none; }
#historique{ text-align: center; padding: 10rem; }
.demi-bg-gris{ position: relative; }
.demi-bg-gris:before{ content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 50%; background-color: var(--grisC); }
.demi-bg-gris>div{ position: relative; z-index: 1; }
#courau .text{ padding-bottom: 8rem; padding-top: 3rem; }
#courau .pomme-de-pin{ display: flex; align-items: center; justify-content: center; }
#courau .pomme-de-pin img{ width: 50%; max-width: 120px; }
.montage-vertical{ height: 100%; display: flex; flex-direction: column; align-items: stretch; }
.montage-vertical .cover{ height: 100%; margin-bottom: 0.6rem; }
#biblio{ margin-top: 8rem; padding: 5rem 0; }
.livres{ display: flex; justify-content: flex-start; margin-left: -10px; margin-right: -10px; flex-wrap: wrap; }
.livres > *{ opacity: 0.9; display: block; margin: 10px; }
.livres > a:hover{ opacity: 1; }
.livres img{ display: block; width: auto; height: 250px; max-height: 20vmin; }

/* PIN MARITIME */
#pinus{ overflow: visible; margin: 10rem 0px; }
#pinus .pin:before{ height: 128%; top: inherit; bottom: 0; width: calc(30% + 15px + var(--asideWidth)); left: 100%; background-position: 0 100%; }
#pinus .cartes{ height: calc( 100% + 12rem); margin-top: -8rem; display: flex; flex-direction: column; justify-content: space-between; float: right; }
#pinus .cartes>:first-child{ margin-bottom: 1rem; }
pinus .cartes span { border: 2px solid var(--grisC); }

#composition{ margin-bottom: 5rem; }
#composition .triptique img{ width: 100%; }
#composition .bloc-text{ margin-left: 2rem; }
#composition .bloc-text h2{ margin-top: 0; }
#composition .bloc-text + img{ margin-left: 2rem; }

#europe{ background-color: #F4F2F0; padding: 8rem 0 5rem; }
#europe h2{ margin-top: 0; }
#europe .order-md-1 .bloc-text figure{ margin: 0 auto 4rem; }
#europe .order-md-1 .bloc-text figcaption { font-size: 0.9em; font-style: italic; margin: 0.5em 0.2em; }
#europe .order-md-1 .bloc-text img{ display: block; box-shadow: 0 3px 6px rgb(0 0 0 / 15%); }
#europe .order-md-2{ position: relative; }
#europe .order-md-2:after{ content: ''; background: url(../themes/dpgreen/assets/img/pin-branche2.png) no-repeat 0 50%; width: 45%; height: 100%; background-size: 100% auto; position: absolute; top: 0; left: 100%; mix-blend-mode: multiply; }
#europe .encadre{ max-width: 400px; margin: auto; }

#recolte .kakemono{ display: flex; margin-left: -0.75rem; margin-right: -0.75rem; padding-bottom: 5rem; }
#recolte .kakemono figure{ display: flex; flex-direction: column-reverse; padding: 0.75rem; }
#recolte .kakemono figcaption{ text-align: center; font-weight: bold; color: #545356; padding: 1rem 0; }

/* Les produits (gamme bio) */
.product-banner{ height: 25vmin; margin-top: 8rem; }
.product-banner img{ transform: translate(-50%, -57%); }
.fuck-les-headings h3{ color: var(--titleColor); text-align: center; font-size: 3.6rem; margin: 2em 0 1em; }
.fuck-les-headings h3:after{ content: none; }
#gamme-bio .mall-products{ padding-top: 8vmin; }
#gamme-bio .swiper-wrapper{ flex-wrap: wrap; justify-content: center; }
#gamme-bio .mall-products-item{ margin: 1em 3%; max-width: 370px; width: 27%; }

.ref h3{ position: relative; background-color: #F7F7F7; padding: 2rem; color: inherit; font-size: 2.6rem; }
.ref h3:before{ -webkit-mask-image: url(../themes/dpgreen/assets/img/ico-book.svg); mask-image: url(../themes/dpgreen/assets/img/ico-book.svg);}
.fuck-les-headings h3.accordion-header{ margin-bottom: 0; }
.fuck-les-headings h3.accordion-header:after{ content: ''; width: 3rem; min-width: 3rem; height: 3rem; margin-right: 0.5em; background-size: contain; background-repeat: no-repeat; background-position: 50% 50%; }

.accordion-header{ margin-right: 0; margin-bottom: 0; cursor: pointer; }
.accordion-header:after{ background-image: url(../themes/dpgreen/assets/img/fleche.svg); position: absolute; right: 0; border: 0; transition: all 0.2s ease-in; transform: rotate(180deg); }
.accordion-header.collapsed:after{ transform: rotate(0); }
.accordion-collapse,
.accordion-item:last-of-type .accordion-collapse{ border: 10px solid #f7f7f7; border-top: 0; padding: 20px;}


/* CONTACT */
#form .bloc-text h2{ margin-bottom: 8rem; }
#form form{ margin-top: 8rem; }
#form .coords{ display: flex; flex-direction: column; }
#form .msg{ height: 100%; }
#form .msg textarea{ height: 100%; }
#form .msg textarea.is-invalid{ height: calc(100% - 1.5rem); }
#form .btn{ float: right; min-width: 150px; width: 100%; height: 100%; }
#form .btn>*{ width: 100%; margin: 0; height: 100%; }
#form .captcha{ float: right; position: relative; }


/*
 * MALL 
 */
body.mall #banner { min-height: 20vmin; margin-bottom: 8rem; }

/* PRODUCT LIST  */
.mall-loader{ position: absolute; top: 50%; left: 60%; transform: translate(-50%, -50%); display: none;}
.mall-products{ position: relative; }
.mall-products-item{ max-width: 50vmin; }
.mall-products-item > a{ opacity: 0.9; display: flex; flex-direction: column; align-items: center; font-family: var(--titleFont); color: inherit; }
.mall-products-item > a:hover{ color: inherit; text-decoration: none; opacity: 1; }
.mall-products-item h3{ order: 3; margin: 1.5rem 0 0.5rem; text-align: center;}
.mall-products-item h3:after{ content: none; }
.mall-products-item .img{ order: 1; position: relative; overflow: hidden; width: 100%; }
.mall-products-item .img:before{ content: ''; display: block; width: 100%; height: 0; padding-top: 125%; background-color: var(--grisC); }
.mall-products-item .img img{ mix-blend-mode: multiply; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); max-width: 100%; max-height: 100%;}
.mall-products-item p.prix{ order: 4; }
.mall-products-item .oldprice{ text-decoration: line-through #c00; color: #464749; font-size: 1.5rem; margin-right: 0.5em; }
.mall-products-item .oldprice:empty{ display: none; }
.mall-products-item p.prop{ order: 2; font-size: 1.5rem; margin: 1em 0 0; }

.bg-gris .mall-products .swiper-wrapper{ justify-content: center; padding: 8rem 0; }
.bg-gris .mall-products .swiper-slide{ height: auto; }
.bg-gris .mall-products-item{ position: relative; }
.bg-gris .mall-products-item > a{ background-color: #fff; padding: 1.5rem 0; margin: 0 1.5rem; height: 100%; justify-content: flex-end; transition: all 0.2s ease-out; }
.bg-gris .mall-products-item .img{ max-height: 30vmin; }
.bg-gris .mall-products-item .img:before{ background-color: transparent; }
.bg-gris .mall-products-item:hover > a{ background-color: var(--grisC); transform: translateY(-1.5rem); }
.bg-gris .mall-products-item:after{ content: ''; opacity: 0.3; background: url(../themes/dpgreen/assets/img/shadow.svg) no-repeat 50% 50%; transition: all 0.15s ease-in; background-size: 100%; width: 100%; height: 0; position: absolute; left: 0; right: 0; margin: auto; bottom: 0; transform: translateY(100%); }
.bg-gris .mall-products-item:hover:after{ height: 1.5rem; width: 40%; filter: blur(3px); opacity: 0.8; }

/* PRODUCT DETAIL */
#mall-products-productdetail #main{ padding-bottom: 18vw; }
#product-top{ padding-top: 8rem; }
#product h1{ font-weight: bold; font-size: 3rem; margin-bottom: 0.5em; }
#stock-wrapper{ font-size: 0.85em; }
.sku{ font-size: 0.85em; }
#addtocart-wrapper{ max-width: 350px; }
#form-addtocart .form-floating{ margin: 0.6rem 0; position: relative; top: 1px; }
#form-addtocart .btn>*{ margin: 0; }
#infos-wrapper .teaser{ font-family: var(--titleFont); line-height: 1.3em; }
#price-wrapper .price{ display: flex; align-items: baseline; }
#price-wrapper .price > div{ margin: 0 0.2em 0 0; }
#price-wrapper .price > .price-old{ margin-right: 1em; }
#price-wrapper .price-old{ font-size: 1em; color: #c00; text-decoration: line-through; }
#price-wrapper .price-current{ font-size: 1.5em; font-family: var(--titleFont); }
#price-wrapper .tax-include{ margin-right: 0.5em; font-family: var(--titleFont);}
#price-wrapper .tax-data{ font-family: var(--titleFont); }
#produit-bottom h4:after{ content: none; }
#product-links ul,
#product-downloads ul{ padding: 0; }
#product-links li,
#product-downloads li{ list-style: none; }

#mall-products-productdetail h2.moving{ background-color: var(--grisC); margin: 0.6em 0 0.2em; padding: 0.5em 0; }
#mall-products-productdetail h2.moving strong{ opacity: 1; color: #fff; }

#product .product-properties   .form-colors .form-check-input:checked + label { border:1px solid #000; }
#product .product-customfields .form-colors .form-check-input:checked + label { border:1px solid #000 }
#product .product-customfields .form-images .form-check-input:checked + label { border:1px solid #000 }

#product .reviews-form .form-check svg { fill:#e9ecef; }
#product .reviews-form .form-check.active svg { fill:#0d6efd; }
#product .reviews-form .form-check .form-check-label { cursor:pointer; }

#product-added { transform:translateX(100%); transition:all 0.5s ease 0s; z-index: 900; margin-top:60px; }
#product-added.visible { transform:translateX(0); }

.list-group-item.active,
.list-group-item.active:hover{ background-color: rgb(185 198 41 / 50%); border-color: var(--linkColor); cursor: default; }
.list-group-item-action:hover{ background-color: #f5f1ed; }
.list-group-flush>.list-group-item:last-child{ background-color: #ebe8e4; }
.list-group-flush>.list-group-item:last-child:hover{ background-color: #dbd9d7; }

.toast{ font-size: inherit; }
.toast-overlay{ position: fixed; background-color: rgb(0 0 0 / 30%); width: 100vw; height: 100vh; top: 0; left: 0; z-index: 1; backdrop-filter: blur(3px); display: flex; align-items: center; justify-content: center; }
.toast-box{ min-width: 30%; max-width: 95vw; background-color: #fff; border-radius: 3px; }
.toast-header{ padding: 1rem 1rem; color: #fff; background-color: var(--defaultColor); }
.toast-header strong{ color: inherit; font-weight: normal; }
.toast .btn-close{ background: transparent url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23FFF'><path d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/></svg>") center/1em auto no-repeat; }
.toast-body{ padding: 2rem; }
.toast-body h4{ margin-bottom: 0; margin-top: 0.5rem; }

#he #bienfaits{ position: relative; }
#he #bienfaits:after{ content: ''; background: url(../themes/dpgreen/assets/img/pinus-gravure.svg) no-repeat 0 0; transform: rotate(-185deg); width: 15%; height: 60%; background-size: contain; position: absolute; top: 20%; left: 100%; }
#colo #bienfaits{ position: relative; }
#colo #bienfaits:after{ content: ''; background: url(../themes/dpgreen/assets/img/colophane.png) no-repeat 0 0; width: 40%; height: 90%; background-size: contain; position: absolute; top: -10%; left: 80%; }
#hydrolat #bienfaits{ position: relative; }
#hydrolat #bienfaits:after{ content: ''; background: url(../themes/dpgreen/assets/img/pinus-gravure.png) no-repeat 0 0; width: 40%; height: 90%; background-size: contain; position: absolute; top: -10%; left: 80%; }
#hydrolat .certifications{ justify-content: center; margin: 2em 0px; }

#product.colophane .product-banner img { transform: translate(-50%, -72%); }

/* ACCOUNT */
#register .form-intro{ text-align: center; }
#register h2{ text-align: center; }
#addresses .cards > div { height: auto; }
#addresses .flex-btm-between{ display: flex; align-items: flex-end; justify-content: space-between;}
#addresses .card{ height: 100%; padding: 1.5rem; display: flex; flex-direction: column; justify-content: space-between; }
#addresses .card h3{ margin-top: 0; }
#addresses .card .btn{ margin: 0; }
#addresses .card .default-address{ margin: 0; font-size: 0.9em; font-style: italic; }
#addresses .card .default-address svg{ margin: 0.3em 1em; }
#addresses .card .btn>*{ margin: 0;}
#addresses .card.add{ align-items: center; justify-content: center; min-height: 170px;}
#addresses .card .address-wrapper{ height: 100%; display: flex; flex-direction: column; justify-content: space-between; }

/* CHECKOUT */
.mall-form h2{ margin-top: 0; }
.quantity.form-floating > .form-control,
.quantity.form-floating > .form-select { height: auto; padding: 0.5rem .75rem; border: 1px solid var(--grisC); }

.th { font-size: 2rem; font-family: inherit; color: #fff; background-color: var(--defaultColor); height: 2em; display: flex; align-items: center; justify-content: center; margin: 0; }
#bigcart{ padding: 0 10px; }
#bigcart ul{ padding: 0; }
#bigcart li{ list-style: none; padding: 2rem 0; border-bottom: 1px solid var(--defaultColor); }
#bigcart li .row{ align-items: center; }
#bigcart h3{ margin-top: 0; }
#bigcart h3 a{ color: inherit; }
.total{ font-weight: bold; }
.discount{ border: 1px solid var(--grisC); border-right: 0.4em solid var(--titleColor); background-color: #ffffff; padding: 0.8rem 1em 0.8em 0.6em; margin-right: -4.5rem; margin-left: -1.5rem; margin-top: 1em; margin-bottom: 1em; font-style: italic; font-size: 0.9em; }
.discount .trash{ color: var(--defaultColor); padding: 4px; border-radius: 3px; margin-left: 0.2em; transition: all .15s ease-in-out; }
.discount .trash:hover{ background-color: var(--defaultColor); color: #fff; }
#bigcart .aside.not-top{ position: fixed; top: 11rem; }
#cart-wrapper .input-group{ flex-wrap: wrap; }

#checkout{ padding: 0 10px; }
#checkout-form .recap{ position: relative; }
#checkout-form .aside-sticky.fixed{ position: fixed; bottom: 1rem; }
#checkout-form .aside-sticky.bottom{ position: absolute; bottom: -1.2rem; }

.mall .encadre{ padding: 2rem 3rem; }
.mall .encadre .products a{ color: inherit; font-weight: bold; }
.mall .method.border{ background-color: rgb(255 255 255 / 70%); }
.mall .method img{ max-width: 110px; }
.mall .border > h3{ margin-top: 0; }

.checkout h2{ text-align: center; }
.h-control{ height: 6.8rem; display: flex; align-items: center; }

.th.order{ justify-content: space-between; padding: 0 0.5em; margin: 0; background-color: var(--gris70); }
.th.order.nouvelle{ background-color: #8b9338; }
.th.order h2{ font-size: 2rem; font-family: inherit; margin: 0; }
.th.order h2 small{ font-style: italic; }
.th.order p{ font-size: 16px; margin: 0; }
.th.order.annulee small{ color: #900; }

figure.product-in-cmd-list{ display: flex; align-items: center; }
figure.product-in-cmd-list img{ margin-right: 1rem; max-width: 80px; }

#orders > ul{ padding: 0; }
#orders > ul > li{ list-style: none; border: 1px solid var(--grisC); margin: 0; border-radius: 3px; }
#orders .info{ padding: 1rem; }
#orders .info .more{ color: var(--defaultColor); margin-bottom: 0.5em; display: inline-block; }
#orders figure{  margin: 1em 0; }
#orders .status{ margin: 1em 0; font-size: 16px; }
#orders .label{ font-weight: bold; font-size: 16px; }
#orders .total .value{ font-size: 23px; font-family: var(--titleFont); margin-top: 0.5rem; }
#orders .order-2{ text-align: right; }
#orders .actions{ display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; }
#orders .actions .btn>*{ margin: 0; }
#orders .actions .voir{ display: flex; align-items: center; justify-content: flex-start; }
#orders .actions .voir .btn{ margin-right: 0.5em; }

#order .info{ border: 1px solid var(--grisC); border-radius: 0 0 3px 3px; padding: 0 1rem; background-color: rgb(255 255 255 / 70%); }
.mini-product-list{ padding: 0; margin-bottom: 1rem;;}
.mini-product-list li{ list-style: none; margin: 0; border-top: 1px solid var(--grisC); padding-top: 1.5rem; padding-bottom: 0.5rem;}
#order .total{ padding: 1rem 0; border-top: 2px solid var(--grisC); font-weight: normal; }
#order .total p{ display: flex; align-items: center; justify-content: flex-end; }
#order .total p.small{ font-style: italic; }
#order .total p.grand{ font-weight: bold; margin-bottom: 0; }
#order .total .value { width: 100px; text-align: right; }


/* BLOG  */
#articles{ padding-top: 10vmin; }
.blog-post-teaser{ background-color: #ebe8e4; padding: 20px; position: relative; border: 5px solid #ebe8e4; margin: 5vmin 0; opacity: .8; transition: opacity .4s ease-out; }
.blog-post-teaser:hover{ opacity: 1; }
.blog-post-teaser.odd{ background-color: #fff; }
.blog-post-teaser .row{ align-items: flex-end; }
.blog-post-teaser .text{ margin-left: 5vmin; }
.blog-post-teaser h2{ margin: 0; }
.blog-post-teaser .date{ font-size: 0.85em; }
.blog-post-teaser .more{ background: url(../themes/dpgreen/assets/img/fleche-goto.svg) no-repeat calc(100% - 15px) calc(100% - 15px); background-size: 25px; position: absolute; text-indent: 110%; white-space: nowrap; overflow: hidden; width: 100%; height: 100%; top: 0; left: 0; }

.pagination{ justify-content: center;  }
.pagination a{ color: inherit; }
.pagination .pagei{ display: block; }
.pagination .pagei.active a{ background-color: var(--defaultColor); color: var(--grisC); }
.pagination .prev a{ flex-direction: row-reverse; }
.pagination .prev a:after{ content: ''; transform: rotate(180deg); margin-left: 0; margin-right: 1em; }
.pagination .next a:after{ content: ''; }

#blog-post #banner{ align-items: stretch; }
#blog-post #banner > .container{ display: flex; flex-direction: column; }
#blog-post #banner > .container > .h1{ height: 100%; display: flex; align-items: center; justify-content: center; }
#blog-post #banner > .container > .date{ color: #fff; margin-bottom: 0; text-align: center; }

.cb-epigraph{ font-family: var(--titleFont); font-weight: bold; font-size: 1.7em; width: var(--containerWidth); position: relative; left: 50%; transform: translateX(-50%); }

.cb-image figcaption{ margin: 2em 0 1em; text-align: right; font-size: 0.85em; font-style: italic; }

.cb-link .card{ border: 5px solid #ebe8e4; padding: 5px; }
.cb-link .card .row{ align-items: flex-end; }
.cb-link .card-body{ padding-left: 5vmin; padding-right: 6%; }
.cb-link .card-title{ margin-top: 0; }
.cb-link .card-link{ background: url(../themes/dpgreen/assets/img/fleche-goto.svg) no-repeat 98% 94%; background-size: 25px; position: absolute; text-indent: 110%; white-space: nowrap; overflow: hidden; width: 100%; height: 100%; top: 0; left: 0; }

.cb-quote{ background-color: #ebe8e4; padding: 1.5em 3em 0.2em; }
.cb-quote blockquote{ font-family: var(--titleFont); font-size: 1.3em; position: relative;  }
.cb-quote blockquote:before{ content: ''; width: 1.5rem; height: 1.5rem; border: 0 solid #fff; border-width: 0 .5rem; position: absolute; top: -1rem; left: -1rem; visibility: visible; }
.cb-quote blockquote:after { content: ''; width: 1.5rem; height: 1.5rem; border: 0 solid #fff; border-width: 0 .5rem; position: absolute; bottom: 4rem; right: -1rem; }
.cb-quote footer{ font-size: 1.5rem; font-family: 'Roboto', Arial, sans-serif; font-weight: var(--font-regular); font-style: italic; }
.cb-quote footer:before{ content: '—'; margin-right: 0.2em; }

#blog-post aside{ display: flex; }
.blog-post-teaser.mini{ background-color: #ebe8e4; height: 100%; margin: 0; border: 0; border-bottom: 1em solid #fff; }
.blog-post-teaser.mini h3{ margin: 0; font-size: 2.2rem; }
.blog-post-teaser.mini h3:after{ content: none; }
.blog-post-teaser.mini .text{ margin: 1em 0 0; font-size: 0.85em; }
.blog-post-teaser.mini .text p:after{ content: '...'; }
#teasers .btn.blanc{ justify-content: center; margin-top: 1em; }


/* merriweather */
.menu-item{ font-size: 1.3rem; }
h2{ font-size: 3.3rem; }
h3, h4 { font-size: 2rem;  line-height: 1.5em; }
body{ font-size: 1.6rem; }
#alea-product a strong { font-size: 1.6rem; }
body.admin:after{ content:"xl"; position: fixed; bottom: 0; right: 0; padding: 5px 10px; line-height: 30px; background-color:#EEE; z-index: 1000; }

/* CONTAINER */

body{ --containerWidth: 100%; }
@media (min-width:  576px){ body{ --containerWidth:  540px; } }
@media (min-width:  768px){ body{ --containerWidth:  720px; } }
@media (min-width:  992px){ body{ --containerWidth:  960px; } }
@media (min-width: 1200px){ body{ --containerWidth: 1140px; } }
@media (min-width: 1400px){ body{ --containerWidth: 1320px; } }

@media (min-width: 2228px) {
    #pinus .pin:before{ background-position: 100% 100%; }
}
/**
 * XXL
 **/
@media (min-width: 1400px) {
body.admin:after{ content:"xxl"; background-color: black; }
    
}

/**
 * XL
 **/
@media (max-width: 1399px) {
body.admin:after{ content:"xl"; background-color: red; }

}

/**
 * LG
 **/
@media (max-width: 1199px) {
body.admin:after{ content:"lg"; background-color: orange; }
    #pinus .cartes{ max-height: 80%; margin-top: -6rem; }

    .blog-post-teaser .row{ align-items: flex-start; }
    .blog-post-teaser h2{ font-size: 3.4rem; }
    .blog-post-teaser .text { margin-left: 0; }
}

/**
 * MD
 **/
@media (max-width: 991px) {
body.admin:after{ content:"md"; background-color: green; }
html{ font-size: 9px; }

    h2{ font-size: 3.5rem; }

    #header>div{ padding: 0 2rem; }
    .hamburger{ display: flex; }
    .overlay{ content: ''; position: fixed; z-index: 1; width: 100%; height: 100%; left: 0; top: 0; background-color: rgb(0 0 0 / 50%); opacity: 0; pointer-events: none; transition: all 0.5s ease-out; }
    .menu{ position: fixed; z-index: 2; width: 90%; opacity: 0.98; background-color: #F6F5F3; height: 100%; max-width: 500px; left: 0; top: 0; padding-top: var(--headerHeight); transform: translateX(-100%); transition: all 0.5s ease-out 0.2s;
        display: flex; align-items: center; justify-content:flex-start; }
    body.open .menu{ transform: translateX(0);}
    body.open .overlay{ opacity: 1; pointer-events: initial; backdrop-filter: blur(3px); }
    /* 
    .menu > ul{ height: 100%; flex-direction: column; align-items: flex-start; justify-content: center; padding-left: 8%; }
    .menu .menu-item{ font-size: 2.5rem; font-weight: normal; align-items: flex-start; }
    .toggler{ display: inherit; flex-direction: column; }
    */
    .menu ul{ display: block; padding: 0 0 0 2em; }
    .menu .menu-item{ font-size: 2.5rem; font-weight: normal; display: inline-block; position: relative; padding: 1rem 0.5em; }
    .menu .toggler>.menu-item:after{ content: none; }
    .menu .toggler>ul{ height: auto; top: 0; background-color: transparent; padding: 0; } 
    .menu .toggler>ul li{ display: none; } 
    .menu .toggler>ul li:last-child{ display: block; opacity: 0; } 

    #footer-main > div{ flex-wrap: wrap; flex-direction: column; align-items: center; }
    #footer-main .site-id{ order: 1; }
    #footer-main .paiement{ order: 3; }
    #footer-main .paiement p{ white-space: nowrap; }
    #footer-main .socials{ order: 2; margin: 4rem 0; }

    #footer-legal > div{ flex-direction: column; justify-content: center; }
    #footer-legal ul{ justify-content: center; flex-wrap: wrap; }

    #gemmage{ padding-left: 2rem; padding-right: 2rem; }
    #gemmage.pin:before{ content: none; }
    #slide-pins{ padding: 5% 5%; }

    #societe .pomme-de-pin{ display: none; }
    #historique{ padding-left: 0; padding-right: 0; }

    .livres{ flex-wrap: wrap; }

    #alea-product { width: 33%; }
    
    #bigcart .aside.not-top{ position: static; max-width: none;}
    #checkout-form .aside-sticky{ position: static !important; max-width: none;}

    #gamme-bio .mall-products-item{ width: 44%; }
    
}

/**
 * SM
 **/
@media (max-width: 767px) {
body.admin:after{ content:"sm"; background-color: blue; }

    #slide-pins .swiper{ overflow: hidden; }
    #slide-pins .swiper-slide{ transform: none; }
    #slide-pins .swiper-slide-next{ transform: none; }

    #main{ padding-bottom: 15vw; }
    .h1{ font-size: 4.8rem; }
    h2 { font-size: 3rem; }
    h2 strong { font-size: 7.6rem; opacity: 0.2; 
    -webkit-animation: floatText 7s infinite normal linear;
    animation: floatText 7s infinite normal linear; }
    ul.flex-col{ flex-direction: column; }
    ul.flex-col > li{ margin-right: 0; }

    .bloc-text{ padding-left: 2rem; padding-right: 2rem; }    
    h2.moving{ left: calc( var(--asideWidth) * -1 - 2rem); }
    
    #banner .certifications { max-width: 60%; }
    #presentation-produits .outside{ padding-left: 0; margin-top: 5rem; margin-left: calc(var(--bs-gutter-x)/ -2); margin-right: calc(var(--bs-gutter-x)/ -2); }

    .montage-vertical{ flex-direction: row; }
    .montage-vertical .cover{ margin-bottom: 0; margin-right: 0.6rem; }
    .montage-vertical>div{ width: 50%; }

    .histoire{ margin: 8rem 0; margin-right: 5rem; padding-left: 5rem; }
    .histoire .images a{ border-width: 5px 5px 20px; min-height: 26vw; }
    #histoire .coin{ display: none; }
    .histoire .text{ padding-bottom: 5rem; padding-left: 0; }
    .bg-outside.left:before { right: 5rem; height: calc(100% - 10rem); }
    
    #pinus .cartes{ max-height: none; height: auto; margin-top: 2rem; flex-direction: row; padding-bottom: 5rem; width: 100%; align-items: center; }
    #pinus .cartes>:first-child{ margin-bottom: 0; margin-right: 0.75rem; }
    #pinus .cartes>:nth-child(2){ margin-left: 0.75rem; }
    #pinus .pin:before{ box-shadow: 100px 1px 1px rgb(0 0 0 / 40%); }
    
    #composition .bloc-text + img{ margin: 2em auto 1em; display: block; }
    #europe .order-md-2{ max-width: 450px; margin: auto; }

    #alea-product { display: none; }
    #bigcart .aside{ max-width: 315px; }
    
    #gamme-bio .mall-products-item{ width: 100%; }

    #teasers h2.casper{ display: block !important; }
    .blog-post-teaser{ margin: 2rem auto; max-width: 320px; }
    .blog-post-teaser .row{ flex-direction: column-reverse; }
    .blog-post-teaser h2{ margin-top: 1em; }
    .blog-post-teaser .more{ background-position: 95% 97%; }
    .blog-post-teaser.mini{ margin: 0 auto; border: .75rem solid #fff; }
    .blog-post-teaser.mini h3{ margin-top: 1em; }
}

/**
 * XS
 **/
@media (max-width: 575px) {
body.admin:after{ content:"--"; background-color: yellow; }
html{ font-size: 8px; }

    .menu{ height: 75%; }
    .shop{ position: fixed; z-index: 2; width: 90%; opacity: 0.98; background-color: #F6F5F3; height: 25%; max-width: 500px; left: 0; bottom: 0; flex-direction: column-reverse; padding-left: 8%; align-items: flex-start; justify-content: flex-end; transform: translateX(-100%); transition: all 0.5s ease-out 0.2s; }
    .shop .menu-item{ font-size: 2rem; font-weight: normal; }
    body.open .shop{ transform: translateX(0); }
    
    .casper-xs{ display: none; }
    .histoire { margin-right: 2rem; }

    #pinus .cartes{ flex-direction: column; height: auto; }
    #pinus .cartes>*{ margin: 0.75rem 0 !important; }
    #pinus .pin:before{ content: none; }

    #recolte .kakemono{ flex-wrap: wrap; justify-content: center; } 

    .mall-form{ margin-left: 5rem; margin-right: 5rem; }

    #product-top .bloc-text{ max-width: 350px; margin: auto; }
    #images-wrapper{ max-width: 200px; margin: 2em auto; }

    h2.moving{ left: calc( var(--asideWidth) * -1 + 0.75rem ); }

    .livres img { max-height: 35vmin; }

    #presentation-produits {padding: 0 0 5rem;}

}