* {
    box-sizing: border-box;
    border: 0px solid red;
}

/* Global */
p, h1, h2, h3, h4, h5, h6 {margin-bottom:15px; padding:0;}

/*les polices*/
@font-face {
    font-family: 'Krub';
    src: url('/global/font/Krub-Bold.eot');
    src: url('/global/font/Krub-Bold.eot?#iefix') format('embedded-opentype'),
    url('/global/font/Krub-Bold.woff2') format('woff2'),
    url('/global/font/Krub-Bold.woff') format('woff'),
    url('/global/font/Krub-Bold.ttf') format('truetype'),
    url('/global/font/Krub-Bold.svg#Krub-Bold') format('svg');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Krub';
    src: url('/global/font/Krub-Medium.eot');
    src: url('/global/font/Krub-Medium.eot?#iefix') format('embedded-opentype'),
    url('/global/font/Krub-Medium.woff2') format('woff2'),
    url('/global/font/Krub-Medium.woff') format('woff'),
    url('/global/font/Krub-Medium.ttf') format('truetype'),
    url('/global/font/Krub-Medium.svg#Krub-Medium') format('svg');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Arya';
    src: url('/global/font/Arya-Bold.eot');
    src: url('/global/font/Arya-Bold.eot?#iefix') format('embedded-opentype'),
    url('/global/font/Arya-Bold.woff2') format('woff2'),
    url('/global/font/Arya-Bold.woff') format('woff'),
    url('/global/font/Arya-Bold.ttf') format('truetype'),
    url('/global/font/Arya-Bold.svg#Arya-Bold') format('svg');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Arya';
    src: url('/global/font/Arya-Regular.eot');
    src: url('/global/font/Arya-Regular.eot?#iefix') format('embedded-opentype'),
    url('/global/font/Arya-Regular.woff2') format('woff2'),
    url('/global/font/Arya-Regular.woff') format('woff'),
    url('/global/font/Arya-Regular.ttf') format('truetype'),
    url('/global/font/Arya-Regular.svg#Arya-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Symbol';
    src: url('/global/font/SymbolMT.eot');
    src: url('/global/font/SymbolMT.eot?#iefix') format('embedded-opentype'),
    url('/global/font/SymbolMT.woff2') format('woff2'),
    url('/global/font/SymbolMT.woff') format('woff'),
    url('/global/font/SymbolMT.ttf') format('truetype'),
    url('/global/font/SymbolMT.svg#SymbolMT') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/*Les variables de couleurs*/
:root {
    --color-primary: #f0e6e2;
    --color-secondaire: #f9f6f5;
    --color-tertiare: #bd3134;
    --color-quarternaire: #ecdcd5;
    --color-quinquenaire: #f7f7fa;
    --color-six: #bfa989;
    /*--color-six: #d4a145;*/
}


/*les bases */
body {
    font-family: 'Krub';
    font-weight: 500;
    font-style: normal;
}

main {
    overflow: hidden;
}


.fixed {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 999999;
}

.relative {
    position: relative;
}

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

.w-80 {
    width: 80%;
}

.mx-24{
    margin-left: 6rem;
    margin-right: 6rem;
}

h1 {
    text-align: center;
    font-family: 'Arya';
    font-weight: bold;
    font-style: normal;
    /* text-transform: uppercase; */
    font-size: 4rem;
}

h3 {
    padding: 0px;
    margin: 0px;
    font-size: 1rem;
    font-family: 'Krub';
    font-weight: bold;
    font-style: normal;
}

a {
    text-decoration: none;
    cursor: pointer;
    color: #000000;
}
a:hover {
    color: var(--color-tertiare);
}

ul {
    list-style: none;
    padding-left: 0px;
}

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

figure {
    padding: 0px;
    marign: 0px;
}

svg {
    max-width: 100%;
    height: auto;
    fill: currentColor;
}

.svg_corbeille {
    width: 20px;
    height: 20px;
}

p {
    margin: 0rem;
}

/*les clases*/
/*Les classes background*/
.bg-primary {
    background-color: var(--color-primary);
}

.bg-secondaire {
    background-color: var(--color-secondaire);
}

.bg-tertiaire {
    background-color: var(--color-tertiare);
}

.bg-quartenaire {
    background-color: var(--color-quarternaire);
}

.bg-quenquenaire {
    background-color: var(--color-quinquenaire);
}

/*les classes containers*/
.container-full {
    max-width: 100%;
}

.container-90 {
    max-width: 90%;
    margin: auto;
}

.container-50 {
    max-width: 50%;
}

.m-auto {
    margin: auto;
}

.container-55 {
    max-width: 55%;
}

.container-95 {
    max-width: 95%;
    margin: auto;
}


.flex {
    display: flex;
}

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

.flex-1 {
    flex: 1;
}

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

.between {
    justify-content: space-between;
}

.ml {
    margin-left: 10px;
}


.flex-wrap {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}


.flexCol {
    display: flex;
    flex-direction: column;
}

/*les classes des polices todo //les classe fonts*/
.font-krub-bold {
    font-family: 'Krub';
    font-weight: bold;
    font-style: normal;
}

.font-krub-medium {
    font-family: 'Krub';
    font-weight: 500;
    font-style: normal;
}

.font-p22 {
    font-family: p22-sneaky-pro, sans-serif;
    font-weight: 400;
    font-style: normal;
}

.font-arya-bold {
    font-family: 'Arya';
    font-weight: bold;
    font-style: normal;
}

.font-arya-normal {
    font-family: 'Arya';
    font-weight: normal;
    font-style: normal;
}

.font-symbol-normal {
    font-family: 'Symbol';
    font-weight: normal;
    font-style: normal;
}

/*les classes des bouttons*/

.btn {
    padding: 10px 15px 10px 15px;
}

.btn_full {
    background-color: var(--color-primary);
    border-radius: 500px;
}

.btn_full:hover {
    background-color: var(--color-quarternaire);
    color: #ffffff;
}

/*les pages*/
/*Le headers niveau 1*/
header > div {
    padding-top: 15px;
    padding-bottom: 15px;
}

header > div.abs-banniere{
    padding: 8px 0;
    display: flex ;
    justify-content: center;
}
.abs-banniere{
    background: var(--color-tertiare);
    text-align: center;
    font-size: 1.125rem;
    color: black;
}



/*Le headers niveau 1 block 1*/
header > div > div {
    display: flex;
    justify-content: space-between;
}

header > div > div > div:first-child {
    display: flex;
    justify-content: center;
}

header > div > div > div:first-child svg {
    width: 25px;
    height: 25px;
    fill: var(--color-tertiare);
    margin-right: 15px;
}

header > div > div > div:first-child a {
    padding-left: 10px;
    padding-right: 10px;
    font-family: 'Krub';
    font-weight: bold;
    font-style: normal;
    font-size: 1.125rem;
    display: flex;
    align-items: center;
}

header > div > div > div:first-child a:hover {
    font-family: 'Krub';
    font-weight: bold;
    font-style: normal;
    color: var(--color-tertiare);
}

/*Le headers niveau 1 block 2*/
header > div > div > div:last-child {
    display: flex;
    justify-content: center;
}

header > div > div > div:last-child > div {
    display: flex;
    justify-content: center;
    padding-left: 20px;
    padding-right: 20px;
}

header > div > div > div:last-child > div > a > svg {
    width: 30px;
    height: 30px;
    margin-right: 15px;
    fill: var(--color-tertiare);
}

header > div > div > div:last-child > div > a {
    padding-left: 10px;
    padding-right: 10px;
    font-family: 'Krub';
    font-weight: bold;
    font-style: normal;
    font-size: 1.125rem;
    display: flex;
    align-items: center;
}

header > div > div > div:last-child > div > a:hover {
    font-family: 'Krub';
    font-weight: bold;
    font-style: normal;
    color: var(--color-tertiare);
}

/*le menu langue*/
header .dropbtn {
    font-size: 16px;
    border: none;
    cursor: pointer;
    display: flex;
}

header .dropbtn > img:first-child {
    width: 40px;
    height: 40px;
}

header .dropbtn > img:last-child {
    max-width: 10%;
    height: 20px;
    margin: auto 0 auto 0;
    display: flex;
    align-items: center;
    -moz-box-align: center;
    transform: rotate(90deg);
    -moz-transform: rotate(90deg);
}

header .dropbtn > p {
    padding-left: 10px;
    padding-right: 10px;
    display: flex;
    align-items: center;
}

header .dropdown {
    position: relative;
    display: inline-block;
}

header .dropdown-content {
    display: none;
    position: absolute;
    background-color: var(--color-quarternaire);
    min-width: 160px;
    z-index: 1;
}

header .dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: flex;
    align-items: center;
}

header .dropdown-content a > p {
    margin-left: 10px;
}

header .dropdown-content > a > img:first-child {
    width: 40px;
    height: 40px;
}


header .dropdown-content a:hover {
    background-color: var(--color-tertiare);
}

header .dropDownMenuParent:hover .dropDownMenuContent {
    display: block;
}

header .dropdown:hover .dropdown-content {
    display: block;
}

header .dropDownMenuParent {
    position: relative;
}

header .dropDownMenuContent {
    position: absolute;
    top: 100%;
    opacity: 0;
    display: none;
    transition: 0.2s;
    pointer-events: none;
    width: 145%;
    padding: 0 0 1.5rem;
    /*overflow: hidden;*/
}

.categories-menu-dropdown li {
    position: relative;
    width: max-content;
}

header ul.content-accordeon{
    display:none;
    width: 100%;
    padding: .5rem 0;
    z-index: 10;
    line-height: 23px;
}
#contenu_gauche ul.content-accordeon{
    display:none;
    position: absolute;
    top: -.5rem;
    left: 100%;
    width: max-content;
    padding: .5rem 0;
    z-index: 10;
}


/*ul.content-accordeon.active {*/
/*    visibility: visible;*/
/*    opacity: 1;*/
/*    !*display: block;*!*/
/*}*/

header .content-accordeon .sublink{
    padding-left: 0.5rem;
    padding-bottom: 0.5rem;
    font-size: 0.85rem;
}

header div nav ul.menu-nav .dropDownMenuContent li a {
    font-size: 1rem;
    line-height: 1.7rem;
    padding: 0 1.5rem;
}

.dropDownMenuContent > li {
    position: relative;
    cursor:pointer;
}
header .set:hover > ul.content-accordeon {
    opacity: 1;
    visibility: visible;
}

.setParent {
    position: relative;
}

.setParent.activeNav > a{
    text-shadow: -0.3px -0.3px 0 var(--color-tertiare),
    0.3px -0.3px 0 var(--color-tertiare),
    -0.3px 0.3px 0 var(--color-tertiare),
    0.3px 0.3px 0 var(--color-tertiare);
    -webkit-transition: all .2s;
    -moz-transition: all .2s;
    -o-transition: all .2s;
    transition: all .2s;
    font-style: normal;
    color: var(--color-tertiare);
}

#contenu_gauche .setParent {
    width: 100%;
    padding-right: 5px;
}

#contenu_gauche .setParent:after {
    content:"";
    position: absolute;
    right: 15px;
}


#menuPV {
    width: 16rem;
}

#menuPV li {
    margin-bottom: 1rem;
}

#menuPV > li:first-child:before {
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: url("/medias/logo/poterie-lehman.png") center no-repeat;
    background-size: contain;
    width: 5rem;
    height: 2rem;
    right: .5rem;
}

#menuPV > li:last-child:before {
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: url("/medias/logo/logo-poterie-alsace-trans.png") center no-repeat;
    background-size: contain;
    width: 5rem;
    height: 2rem;
    right: .5rem;
}

/*le header niveau 2*/
header div nav ul.menu-nav {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

header div nav ul.menu-nav a {
    padding: 15px;
    font-size: 1.2rem;
}


header div nav ul.menu-nav .dropDownMenuContent:hover a {
    pointer-events: auto;
}

header div nav ul.menu-nav a:hover {
    text-shadow: -0.3px -0.3px 0 var(--color-tertiare),
    0.3px -0.3px 0 var(--color-tertiare),
    -0.3px 0.3px 0 var(--color-tertiare),
    0.3px 0.3px 0 var(--color-tertiare);
    -webkit-transition: all .2s;
    -moz-transition: all .2s;
    -o-transition: all .2s;
    transition: all .2s;
    font-style: normal;
    color: var(--color-tertiare);
}

header div nav ul.menu-nav a:active {
    text-shadow: -0.3px -0.3px 0 var(--color-tertiare),
    0.3px -0.3px 0 var(--color-tertiare),
    -0.3px 0.3px 0 var(--color-tertiare),
    0.3px 0.3px 0 var(--color-tertiare);
    -webkit-transition: all .2s;
    -moz-transition: all .2s;
    -o-transition: all .2s;
    transition: all .2s;
    font-style: normal;
    color: var(--color-tertiare);
}

/*la section logo */

#logo .logo {
    width: 100%;

}

/*#logo {*/
/*    background: linear-gradient(to right, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.7) 100%, rgba(255, 255, 255, 0) 100%), url("/medias/photos/koug.jpg") 25% 60% no-repeat;*/
/*    background-size: cover;*/
/*    position: relative;*/
/*    margin-top: 100px;*/
/*}*/

#logo > div {
    display: flex;

}

#logo > div > svg {
    width: 25%;
    height: auto;
    margin-top: 6rem;
    margin-bottom: 5rem;
    margin-left: 8rem;
    opacity: 0.8;
}

#page-home #logo {
    margin-top: 150px;
    background-size: cover;
    background: url("/medias/fonds/poterie-lehmann-bg-accueil.jpg") no-repeat right 90%;
    background-size: cover;
    padding: 4rem 0;
}

#page-home #logo > div > svg {
    width: 30%;
    height: auto;
    margin-top: 3rem;
    margin-bottom: 4rem;
    margin-left: 8rem;
    opacity: 0.8;
}

#shop > #logo{
    background: url("/medias/photos/24-bandeau-boutique-min.jpg") no-repeat center;
    background-size: cover;
    padding-top: 25rem;
    padding-bottom: 7rem;
}

#shop > #logo > .logo{
    display: none;
}

#shop-cart > #logo{
    background: url("/medias/fonds/conseil-recette-min.jpg") no-repeat center;
    background-size: cover;
    padding-top: 25rem;
    padding-bottom: 7rem;
}

#shop-cart > #logo > .logo{
    display: none;
}

.pdv > #logo{
    background: url("/medias/fonds/pdv-soufflenheim-min.jpg") 25% 60% no-repeat;
    background-size: cover;
    margin-top: 150px;
    padding-top: 12rem;
    padding-bottom: 12rem;
}

.pdv > #logo > .logo{
    display: none;
}
.pdv > #logo > .logo > svg{
    display: none;
}


#logo-mobile {
    display: none;
}

.bandeau-pdv{
    background:url("/medias/slider-pdv-sb/38stras.jpg") no-repeat center;
    background-size: cover;
    padding-top: 25rem;
    padding-bottom: 7rem;
}

/*.bandeau-pdv > div {*/
/*    width: 26%;*/
/*    background:linear-gradient(to right, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.7));*/
/*    padding-top: 4rem;*/
/*    padding-bottom: 4rem;*/
/*}*/

/*.bandeau-pdv img {*/
/*    width: 100%;*/
/*    height: auto;*/
/*    padding: 2rem;*/
/*    margin:0;*/
/*    opacity: 0.98;*/
/*}*/


#fabrication > #logo{
    background:url("/medias/photos/header-fabrication.jpg") no-repeat center;
    background-size: cover;
    padding-top: 25rem;
    padding-bottom: 7rem;
}

#fabrication > #logo > .logo{
   display: none;
}
#fabrication > #logo > .logo > svg{
    display: none;
}



#fabrication > #contenu > img{
    position: absolute;
    right: 0;
    top: -5rem;
    transform: rotate(90deg);
    z-index: -1;
    width: 35%;
}

.fab-table tr {
    display: table-row;
}

.fab-table th {
    display: table-cell;
    width: auto;
}




a#go-frise {
    text-align: center;
    margin-top: 2rem;
    margin-bottom: 2rem;
}
a#go-frise > img{
    transform:rotate(180deg) ;
    width: 3rem;
    height: 3rem;
    border-radius: 99%;
    padding: 1rem;
    background: var(--color-tertiare);
}
a#go-frise:hover > img{
    transform:rotate(180deg) ;
    width: 3rem;
    height: 3rem;
    border-radius: 99%;
    padding: 1rem;
    background: #d03f42;
}

.info-frise{
    margin-top: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.info-frise > p {
    font-weight: bold;
    text-align: center;
}

.fabrication-container {
    display: none;
}

.fabrication-container > div{
    display: flex;
    justify-content:center;
}


#main-conseils-recettes > #logo{
    background: url("/medias/fonds/conseil-recette-min.jpg") no-repeat center;
    background-size: cover;
    padding-top: 25rem;
    padding-bottom: 7rem;}

#main-conseils-recettes > #logo > .logo{
    display: none;
}
#main-conseils-recettes > #logo > .logo > svg{
    display: none;
}

.conseils-recettes li {
    margin-bottom: 0.5rem;
    line-height: 25px;
}

.association-img {
    position: relative;
    z-index: 10;
}

/*la section presentation */
/*la secitno presentation 1er block*/
#presentation {
    background-image: url("/global/picto/picto-vague.svg");
    background-repeat: no-repeat;
    position: relative;

}

.texte_presentation a {
    color: var(--color-tertiare)
}

#presentation .img-prez-droite-fixed {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    height: 100%;
    display: none;
}

@media screen and (min-width: 1400px) {
    #presentation {
        padding-right: 200px;
    }

    #presentation .img-prez-droite-fixed {
        display: block;
    }
}


#presentation #img-poterie {
    position: absolute;
    top: -60px;
    right: -80px;
    width: 18%;
}

#presentation article {
    padding-top: 60px;
    padding-bottom: 60px;
    display: flex;
    justify-content: space-between;
}


#presentation article p {
    font-size: 1.1rem;
    line-height: 1.65rem;
}

#presentation article > div {
    width: 48%;
}

#presentation article > div:first-of-type {
    padding-right: 80px;
}

#presentation article > div:first-of-type img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


/*#presentation > article > div{*/
/*    display: flex;*/
/*}*/

/*#presentation > article > div:first-child{*/
/*    margin-bottom: 50px;*/
/*}*/

/*#presentation > article > div:first-child > div:nth-child(1) {*/
/*    width: 285px;*/
/*    display: flex;*/
/*    align-items: flex-end;*/
/*    padding-bottom: 20px;*/
/*    margin-right: 50px;*/
/*}*/

/*#presentation .font-p22{*/
/*    font-size: 2.2rem;*/
/*}*/

/*#presentation > article > div:first-child > div:nth-child(2) {*/
/*    width: 400px;*/
/*    height: 230px;*/
/*    overflow: hidden;*/
/*}*/

/*#presentation > article > div:first-child > div:nth-child(2) img{} {*/
/*    object-fit: cover;*/
/*}*/

/*#presentation > article > div:first-child > div:nth-child(3) {*/
/*    position: relative;*/
/*    width: auto;*/
/*    display: flex;*/
/*    align-items: center;*/
/*    margin: auto;*/

/*}*/

/*#presentation > article > div:first-child > div:nth-child(3) > p:nth-child(1) {*/
/*    font-family: 'Arya';*/
/*    font-weight: bold;*/
/*    font-style: normal;*/
/*    text-transform: uppercase;*/
/*    font-size: 4rem;*/
/*    position: absolute;*/
/*    left: -132px;*/
/*    top: 30px;*/
/*}*/

/*#presentation > article > div:first-child > div:nth-child(3) > p:nth-child(2) {*/
/*    font-family: 'Symbol';*/
/*    font-weight: normal;*/
/*    font-style: normal;*/
/*    font-size: 8rem;*/
/*    color: var(--color-quarternaire);*/
/*}*/

/*#presentation > article > div:first-child > div:nth-child(3) > p:nth-child(3) {*/
/*    font-family: 'Arya';*/
/*    font-weight: bold;*/
/*    font-style: normal;*/
/*    text-transform: uppercase;*/
/*    font-size: 4rem;*/
/*    position: absolute;*/
/*    left: 56px;*/
/*    bottom: 0;*/
/*}*/

/*!*section presentation block 2*!*/
/*#presentation > article > div:last-child > div{*/
/*    padding-left: 10px;*/
/*    padding-right: 10px;*/
/*    margin-left: 20px;*/
/*}*/

/*#presentation > article > div:last-child > div:nth-child(1)  {*/
/*    flex-basis: 30%;*/
/*    height: 300px;*/
/*    overflow: hidden;*/
/*}*/

/*#presentation > article > div:last-child > div:nth-child(1) img  {*/
/*    max-width: 110%;*/
/*    object-fit: cover;*/
/*}*/


/*#presentation > article > div:last-child > div:nth-child(2)  {*/
/*    flex: 1;*/
/*    overflow: hidden;*/
/*}*/

/*#presentation > article > div:last-child > div:nth-child(2) img  {*/
/*    max-width: 90%;*/
/*    object-fit: cover;*/
/*}*/

/*#presentation > article > div:last-child > div:nth-child(3)  {*/
/*    flex: 2;*/
/*    text-align: justify;*/
/*    font-size: 1.1rem;*/
/*    margin-left: 23px*/
/*}*/

/*#presentation > article > div:last-child > div:nth-child(3) > p:nth-child(2) {*/
/*    margin-top: 15px;*/
/*    margin-bottom: 15px;*/
/*}*/

/*#presentation > article > div:last-child > div:nth-child(3) > p:nth-child(3) {*/
/*    margin-top: 15px;*/
/*    margin-bottom: 15px;*/
/*}*/



/*la section clickcollect  */
#clickcollect > div {
    display: flex;
    padding-top: 80px;
    padding-bottom: 80px;
    color: #fff;
    justify-content: space-between;
    align-items: stretch;
}

/*la section clickcollect le titre*/
#clickcollect > div > article {
    width: 85%;
}

/*la section clickcollect le titre*/
#clickcollect > div > article > div:first-child {
    position: relative;
    display: flex;
    align-items: center;

}

#clickcollect > div > article > div:first-child > p:nth-child(1) {
    font-family: 'Arya';
    font-weight: bold;
    font-style: normal;
    text-transform: uppercase;
    font-size: 4rem;

}


/*#clickcollect > div > article > div:first-child > p:nth-child(2) {*/
/*   display: none;*/
/*}*/

#clickcollect > div > article > div:first-child > p:nth-child(3) {
    font-family: 'Arya';
    font-weight: bold;
    font-style: normal;
    text-transform: uppercase;

}


#clickcollect > div > article > div:last-child {
    /*width: 72%;*/
    width: 85%;
    font-size: 1.1rem;
    line-height: 1.8rem;
}



#clickcollect > div > article > div:last-child > p:first-child {
    font-family: 'Arya';
    font-weight: bold;
    font-style: normal;
    font-size: 1.2rem;
}

#clickcollect > div > article > div:last-child > ul {
    width: 92%;
}

#clickcollect > div > article > div:last-child > ul > li {
    padding-left: 20px;
    position: relative;
}


#clickcollect > div > article > div:last-child > p:nth-child(4) {
    font-family: 'Arya';
    font-weight: bold;
    font-style: normal;
    font-size: 1.2rem;
}

#clickcollect > div > article > div:last-child > p:last-child {
    font-family: p22-sneaky-pro, sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 2rem;
    margin-top: 10px
}


#clickcollect > div > div:last-child {
    position: relative;
    width: 48%;
}

#clickcollect > div > div:last-child > div:nth-child(1) {
    /*position: absolute;*/
    /*left: -132px;*/
    /*top: -42px;*/
}



#clickcollect > div > div:last-child > div:nth-child(1) > div {
    position: relative;
}

#clickcollect > div > div:last-child > div:nth-child(1) > div > p {
    /*position: absolute;*/
    /*top: 44px;*/
    color: #000000;
    /*text-align: center;*/
    font-size: 1.2rem;
    font-family: 'Krub';
    font-weight: bold;
    font-style: normal;
}

#clickcollect > div > div:last-child > div:nth-child(1) > div > p > strong {
    color: var(--color-tertiare);
    font-size: 2rem;
    /*font-family: hobo-std, sans-serif;*/
    font-family: p22-sneaky-pro, sans-serif;
}

#clickcollect > div > div:last-child > div:nth-child(2) {
    flex-basis: 48%;
    /*height: 517px;*/
    height: 100%;
    overflow: hidden;
}

#clickcollect > div > div:last-child > div:nth-child(2) img {
    width: 100%;
    object-fit: cover;
    height: 100%;
}

#clickcollect > div > div:last-child > div:nth-child(3) {
    position: absolute;
    bottom: -25px;
    right: -20px;
    width: 30px;
}

.pointdevente_content {
   margin: 5rem 0rem;
}

.pointdevente_content p {
    width: 60%;
    margin-left: 2rem;
}

.pointdevente_content img {
    width: 60%;
    /*height: 100%;*/
}



/*Points de vente*/
#points-vente .lign-container {
    background-color: #fff9f9;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: space-between;
    margin-top: 1.8rem;
    padding-bottom: 1rem;

}

/*#points-vente .lign-container > div {*/
/*    display: flex;*/
/*    flex-direction: column;*/
/*    justify-content: center;*/
/*    !*width: 50%;*!*/
/*}*/

/*#points-vente .lign-container > div:first-of-type {*/
/*    width: 50%;*/
/*}*/

#points-vente .lign-container > div.container-text {
    padding: 0 5% 5%;
}


#points-vente .lign-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#points-vente .bg-swiper {
    background-color: red;
}

#points-vente .bg-swiper img {
    width: 100%;
}


.swiperGalerieSouffl-container{
    width: 35vw;
}

#swiperGalerieSouffl {
    height: 30rem;
    /*max-height: 500px;*/
    margin: 0;
    padding-bottom: 5rem;
}

#swiperGalerieSouffl .swiper-slide {
    background-position: center;
    background-size: cover;
}


#points-vente .lign-container h2 {
    text-align: center;
}

#main-conseils-recettes {
    position: relative;
}

.conseils-recettes ul {
    list-style: inherit !important;
    padding-left: 30px;
}

#main-conseils-recettes #poterieSvg {
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 0;
}

#main-conseils-recettes .container-90 {
    position: relative;
    z-index: 50;
}

#main-conseils-recettes .container-90:first-of-type > div:first-of-type {
    width: 66.66%;
    padding-right: 50px;
}

#main-conseils-recettes .container-90:nth-of-type(2) {
    margin-top: 5rem;
}

#main-conseils-recettes .container-90:nth-of-type(2) .col {
    /*width: 50%;*/
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#main-conseils-recettes .container-90:nth-of-type(2) .col:first-of-type {
    width: 66.66%;
    padding-right: 50px;
}

#main-conseils-recettes .container-90:nth-of-type(2) .col:nth-of-type(2) {
    width: 33.33%;
}

#main-conseils-recettes .container-90:nth-of-type(2) .flex {
    justify-content: center;
    align-items: stretch;
}

.liens_recettes {
    display: flex;
    align-items: center;
    margin-top: 1.5rem;
}


.liens_recettes > .btn_recettes {
    border-radius: 99%;
    background:var(--color-tertiare);
    color:var(--color-primary);
    font-weight: bold;
    margin-left: 1rem;
    text-decoration: none!important;
    padding: 4px;
    border: solid 2px var(--color-tertiare);
    font-size: small;

}

.liens_recettes > .btn_recettes:hover {
    border-radius: 99%;
    background: var(--color-primary);
    color:var(--color-tertiare);
    transition: 0.3s;
    font-weight: bold;
    text-decoration: none!important;
    border: solid 2px var(--color-primary);
    font-size: small;
}

/*la section notreboutique */
#notreboutique {
    padding-top: 2rem;
    padding-bottom: 60px;
    z-index: 1;
    background:linear-gradient(RGBA(248,248,245,0.83),RGBA(248,248,245,0.83)), url("/global/picto/picto-vague.svg") top left no-repeat;
    background-size: 100%;
}

#notreboutique > article > div:first-child {
    margin-bottom: 2rem;
}

#notreboutique > article > div:first-child > h1 {
    font-size: 3rem;
    /*font-family: p22-sneaky-pro, sans-serif;*/
    font-family: 'Arya';
    font-weight: 400;
    font-style: normal;
    font-size: 4rem;
    /*font-family: hobo-std, sans-serif;*/
    /*font-weight: bold;*/
    font-style: normal;
    text-align: center;
    margin-bottom: 0;
}

/*#notreboutique > article > div:first-child > p {*/
/*    font-family: p22-sneaky-pro, sans-serif;*/
/*    font-weight: 400;*/
/*    font-style: normal;*/
/*    font-size: 4rem;*/
/*    text-align: center;*/
/*    color: var(--color-tertiare);*/
/*}*/


/*section notre boutique swiperOne ToDo //ici swiper 1*/


#coup_coeur{
    display: flex;
    padding-left: 8rem;
    padding-right: 12rem;
    padding-top: 4rem;
    align-items: center;
    flex-direction: row;
    position: relative;
}

.notreboutique_texte {
    width: 50%;
    height: 100%;
    font-family: 'Krub';
    padding: 0 4rem 0 0;
    display: flex;
    flex-direction: column;
    justify-content: center;

}

.notreboutique_texte p {
    font-size: 1.35rem;
    letter-spacing: 1px;
    line-height: 1.65rem;
    margin-bottom: 4rem;
    color: #423226;
}
#coup_coeur .swiperOne-container {
    width: 50%;
    /*height: 100%;*/
}

img.lamala{
    height:100%;
}

#swiperOne{
    height: 32rem;
    overflow: hidden;
    padding-bottom: 5rem;
}

#swiperOne .swiper-slide {
    text-align: center;
    font-size: 18px;
    /*background: var(--color-primary);*/
    /*height: 500px;*/

    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}

#swiperOne .arrow {
    position: relative;
    width: 32%;
    margin: auto;
}


.swiper-nav >.swiper-button-next:after {
    content: url("/global/picto/picto-arrow.svg");
    width: 20px;
    height: 20px;
}

.swiper-nav > .swiper-button-prev:after {
    content: url("/global/picto/picto-arrow-left.svg");
    width: 20px;
    height: 20px;
}

#coup_coeur .swiper-button-prev {
    position: absolute;
    top: inherit;
    bottom: -2rem;
    display: block;
}

#coup_coeur .swiper-button-next {
    position: absolute;
    top: inherit;
    bottom: -2rem;
    display: block;
}

/*todo //ici */
/*le block tarif bas*/

/*#swiperOne {*/
/*    padding-bottom: 3rem;*/
/*}*/

#swiperOne a {
    position: relative;
    display: block;
    height: 100%;
    /*cursor: url(/global/picto/picto-cursor.svg) 2 2, auto;*/
}

#swiperOne a span {
    opacity: 0;
    visibility: hidden;
    margin: auto;
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    display: inline-block;
    width: 199px;
    background-color: var(--color-tertiare);
    font-size: 16px;
    color: #ffffff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
    transition: all .3s ease;
    z-index: 1;
}

#swiperOne a span:before {
    content: url("/global/picto/picto-apercu.svg");
    position: absolute;
    left: 10px;
    width: 20px;
}

#swiperOne a:hover span {
    opacity: 1;
    visibility: visible;
    top: 45%;
}

#swiperOne #produits {
    display: flex;
    padding: 0.5rem 1rem;
    border-radius: 1rem;
    position: absolute;
    top: 2rem;
    left: 3rem;
    justify-content: center;
    width: 30%;
    height: auto;
    background: var(--color-tertiare);
}
#swiperOne #produits > p {
    text-transform: uppercase;
    font-family: 'Arya';
    color: var(--color-secondaire);
    font-weight: bold;
    font-style: normal;
    font-size: 1.2rem;
    text-align: left;
}


.slide-container {
    height: 100%;
}

.slide-container {
    height: 100%;
}

.slide-container > a > div:not(#produits) {
    height: 100%;
}

.slide-container img {
    object-fit: cover;
    height: 100%;
}
.slide-container:hover img{
    transition: 0.3s;
    filter: opacity(0.5);
}

.slide-container:hover #produits{
    transition: 0.3s;
    opacity: 0;

}

#swiperOne #produitsTarifs {
    position: relative;
    flex: 1;
}

#swiperOne #produitsTarifs > p {
    position: absolute;
    top: 12px;
    right: 23px;
    color: #ffffff;
    z-index: 1;
}

#swiperOne #produitsTarifs > div {
    position: absolute;
    top: -2px;
    right: 9px;
}

/*le block inverse*/
#swiperOne #produitsHaut {
    display: flex;
    flex-direction: column-reverse;
}

#swiperOne #produitsHaut > #produits {
    margin-top: 0;
    margin-bottom: -33px;
}

.swiper-nav{
    position: relative;
    display: flex;
    justify-content: center;
    width: 50%;
    margin: auto;
    padding-top: 2rem;
}

/*la section ambiances*/

#ambiances {
    padding: 4rem 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
}

.svg-container{
    position: absolute;
    top: -45%;
    left: 0;
    width: 100%;
    opacity: 0.1;
    z-index:0;
    transform: rotate(-180deg);
}

#ambiances h2 {
    /*font-family: 'p22-sneaky-pro';*/
    font-family: 'Arya';
    font-style: normal;
    color: #1c1616;
    font-size: 4rem;
    text-align: left;
    z-index:2;
    position: relative;
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 2rem;
    padding-bottom: 5rem;
    padding-left: 5rem;
    background: url("/global/picto/Ellipse.png") no-repeat top left;
    background-size: contain;
}

#ambiances h2:after {
    content: "";
    width: 2.5rem;
    height: 2.5rem;
    position: absolute;
    left: 1.5rem;
    top: 3rem;
    background: url("/global/picto/picto-forme.svg") no-repeat center;
    background-size: contain;
}

#ambiances #swiperAmbiance {
    height: 29rem;
    margin-top: -3rem;
    margin-left: 5rem;
}

#ambiances .swiperAmb-container{
    width: 60%;
}

#swiperAmbiance .swiper-slide-active {
    opacity: 1;
    transition: 1s;
}

#swiperAmbiance .swiper-slide > div {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

#swiperAmbiance .swiper-slide > div > img{
    object-fit: cover;
    height:100%;
    width:100%;
}

#swiperAmbiance img{
    object-fit: cover;
    height:100%;
    width:100%;
}

/*la section poterie*/
#poterie {
    padding-top: 60px;
    padding-bottom: 60px;
    position: relative;
}

#poterie h3 {
    /*width: 50%;*/
    font-size: 2.5rem;
    font-family: p22-sneaky-pro, sans-serif;
    color: var(--color-tertiare);
    line-height: 2.5rem;
}




#poterie #poterieSvg {
    position: absolute;
    /*top: -150px;*/
    bottom: 0;
    right: 0;
    z-index: -1;
}

#poterie #img-poterie-deux {
    position: absolute;
    bottom: -48px;
    width: 20%;
}

#poterie > div:not[poterieSvg] {
    display: flex;
    flex-direction: column;
    z-index: 2;
}

#poterie > div > article {
    /*flex: 5;*/
    /*z-index: 1;*/
}

#poterie > div > article:nth-child(2) {
    position: relative;
    margin-top:7rem ;
    z-index: 1;
}

#poterie > div > div {
    flex: 1;
}

#poterie > div > article > div:first-child {
    /*width: 77%;*/
}

#poterie  h2 {
    font-size: 3rem;
    /*font-family: hobo-std, sans-serif;*/
    /*font-family: p22-sneaky-pro, sans-serif;*/
    font-family: 'Arya';
    font-style: normal;
    margin-bottom: 3rem;
}

/*#poterie > div > article > div:first-child > p {*/
/*    font-family: p22-sneaky-pro, sans-serif;*/
/*    font-weight: 400;*/
/*    font-style: normal;*/
/*    font-size: 3rem;*/
/*    text-align: right;*/
/*    color: var(--color-quarternaire);*/
/*    margin-right: -37px;*/
/*}*/

/*#poterie > div > article > div:last-child {*/
/*    display: flex;*/
/*    font-size: 1.1rem;*/
/*    margin-top: 30px;*/
/*    align-items: start;*/
/*}*/

#poterie #logo-poterie-alsace {
    width: 250px;
    margin-left: 5rem;
    height: fit-content;
}

.poterie_content {
    display: flex;
    align-items: center;
}

.poterie_texte {
    width: 65%;
    font-size: 1.2rem;
    margin-bottom: 1rem;
    text-align: justify;
    line-height: 1.5;
}

.poterie_texte p {
    margin-bottom: 1rem;
}


/*#poterie > div > article > div:last-child > div:last-child {*/
/*    !*display: flex;*!*/
/*    margin-left: 30px;*/
/*    width: 90%;*/
/*}*/

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

/*#poterie > div > article > div:last-child > div:last-child > img {*/
/*    width: 20%;*/
/*}*/

/*#poterie > div > div:last-child {*/
/*    background-color: var(--color-tertiare);*/
/*}*/

#poterie #swiperTwo {
    height: 450px;
}

#poterie .swiper-container {
    width: 100%;
    height: 100%;
}

#poterie .swiper-slide {
    text-align: center;
    font-size: 18px;
    overflow: hidden;
}

#swiperTwo .pagination-droit {
    right: 10px;
    top: 62%;
    transform: translate3d(0px, 40%, 0);
}

#swiperTwo .swiper-pagination-bullet {
    position: relative;
    width: 15px;
    height: 15px;
    border: 2px solid var(--color-tertiare);
    border-radius: 100%;
    background: transparent;
    margin: 12px 0;
}

#swiperTwo .swiper-pagination-bullet-active {
    position: relative;
    border: 2px solid var(--color-primary);
}

#swiperTwo .swiper-pagination-bullet-active:before {
    content: "";
    position: absolute;
    top: -4px;
    right: -4px;
    width: 20px;
    height: 20px;
    border-radius: 100%;
    background: var(--color-tertiare);
    z-index: -1;

}

/* Pages de contenu */

#contenu_boutique{
    padding-top: 40px;
    padding-bottom: 100px;
    background-size: cover;
    background: linear-gradient(rgba(255,255,255,0.2), rgba(255,255,255,0.2)), url("/global/img/bg/bg-poterie-boutique-3.png") repeat fixed 51% 83%;
}


#contenu {
    padding-top: 40px;
    padding-bottom: 100px;
    background-size: cover;
    background: linear-gradient(rgba(255,255,255,0.4), rgba(255,255,255,0.4));
}

#contenu p {
    line-height: 24px;
    margin-bottom: 10px;
    font-size: large;
}

#contenu a:not(.btn_recettes) {
    color: var(--color-tertiare);
    text-decoration: underline;
}

#contenu a:not(.btn_recettes):hover {
    color: var(--color-tertiare);
    text-decoration: none;
}

#contenu h1 {
    font-size: 3rem;
    font-family: 'Arya';
    /*font-family: hobo-std, sans-serif;*/
    /*font-family: p22-sneaky-pro, sans-serif;*/

    font-weight: bold;
    font-style: normal;
    text-align: left;
    margin-bottom: 20px;
    color: #2d2320;
    position: relative;
    padding-left: 2.5rem;
}

#contenu h1:after {
    content: '';
    position: absolute;
    left: 0;
    width: 2rem;
    height: 2rem;
    background: url("/global/picto/picto-forme.svg") no-repeat center;
    background-size: contain;
    top:50%;
    transform:translateY(-50%);
}

#contenu h2 {
    font-size: 2.5rem;
    /*font-family: hobo-std, sans-serif;*/
    /*font-family: p22-sneaky-pro, sans-serif;*/
    font-family: 'Arya';
    font-style: normal;
    text-align: left;
    margin-bottom: 15px;
    margin-top: 15px;
    color: #392d2a;
}


/*le 3e swiper*/

#swiperTree .swiper-container {
    width: 100%;
    height: 100%;
}

#swiperTree .swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;

    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}

#swiperTree .block_img {
    height: 327px;
    overflow: hidden;
}

#swiperTree .swiper-button-prev {
    color: var(--color-tertiare);
}

#swiperTree .swiper-button-next {
    color: var(--color-tertiare);
}


/*le footer*/
/*le footer niveau 1*/

footer section:first-child {
    padding-top: 60px;
    padding-bottom: 60px;
}

footer section:first-child > div {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

footer section:first-child > div > div:last-child > img {
    max-width: 70%;
}


footer section div:first-child h3 {
    position: relative;
    padding-left: 20px;
    margin-bottom: 15px;
}

footer section div:first-child h3:before {
    content: url("/global/picto/picto-forme.svg");
    position: absolute;
    left: 0;
    width: 15px;
    height: 15px;
}

footer section:first-child p {
    font-size: 1rem;
    padding-top: 3px;
    padding-bottom: 3px;
}

footer section:first-child > div > div > div {
    padding-left: 19px;
}

footer section:first-child > div > div > div > div {
    margin-bottom: 10px;
}

#information > div {
    /*display: flex;*/
    margin-bottom: 15px;
}
#information .info-line{
    display: flex;
    align-items: center;
}

#information .info-line > img {
    width: 35px;
    height: auto;
    margin-right: 15px;
}

#information > div > p {
    font-family: 'Krub';
    font-weight: bold;
    font-style: normal;
}

#reseausociaux {
    margin-top: 10px;
    display: flex
}

#reseausociaux a {
    width: 40px;
    height: 40px;
    padding: 3px;
}

/*le footer niveau 2*/
footer section:last-child {
    padding-top: 10px;
    padding-bottom: 10px;
}

footer section:last-child div {
    display: flex;
    justify-content: center;
    font-size: 0.8rem;
}

footer section:last-child div p {
    display: flex;
    align-items: center;
}

footer section:last-child div a {
    font-family: 'Krub';
    font-weight: 500;
    font-style: normal;
    /*color: var(--color-tertiare);*/
}

footer section:last-child div span {
    margin-left: 15px;
    margin-right: 15px;
    font-size: 0.8rem;
    display: flex;
    align-items: center;
}

footer section:last-child div a img {
    width: 60px;
    height: auto;
    margin-left: 15px;
}

#mention_cookies {
    position: fixed;
    bottom: 0;
    width: 100%;
    padding: 20px 0 20px 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    z-index: 50;
    background-color: var(--color-tertiare);
}


#to-top {
    position: fixed;
    z-index: 1;
    bottom: 1.5rem;
    right: 2rem;
    opacity: 1;
    transition: 0.35s;
    background-color: var(--color-tertiare);
    padding: 6px;
    border-radius: 100px;
    width: 1.8rem;
    height: 1.8rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

#to-top:hover {
    transform: scale(1.2);
}

#to-top.invisible {
    opacity: 0;
}

#to-top img {
    width: 100%;
    /*transform: rotate(-90deg);*/
}

/*la page contact*/

#contact > #logo{
    background: url("/medias/photos/43-bandeau-contact-min.jpg") no-repeat center;
    background-size: cover;
    padding-top: 25rem;
    padding-bottom: 7rem;
}

#contact > #logo > .logo{
   display: none;
}

#rgpd_contact p{
    font-size: small;
    text-align: justify;
}

#RGPD_consent{
    height: 25px;
    width: 75px;
    margin-right: 10px;
}


#formulaire-contact > h1 {

    font-family: 'Arya';
    /*font-family: hobo-std, sans-serif;*/
    /*font-family: p22-sneaky-pro, sans-serif;*/
    font-weight: bold;
    font-style: normal;
    /*text-transform: uppercase;*/
    font-size: 3rem;
}

#formulaire-contact > h1:after {
    content: '';
    position: absolute;
    left: 0;
    width: 2rem;
    height: 2rem;
    background: url("/global/picto/picto-forme.svg") no-repeat center;
    background-size: contain;
    top:50%;
    transform:translateY(-50%);
}

#formulaire-contact form {
    display: flex;
    justify-content: center;
}

#formulaire-contact form > div > div {
    margin: 25px auto;
}

#formulaire-contact .small-text {
    font-size: 0.8rem;
}

#formulaire-contact .form-contact-img {
    width: 100%;
    max-width: 740px;
    margin: 2.5rem 2rem;

}

#formulaire-contact .form-contact-img img {
    display: block;
    width: 100%;

}


#adresse-contact {
    padding: 100px;
    text-align: center;
    position: relative;

}

#adresse-contact > div > div:first-child > div {
    padding-top: 15px;
    padding-bottom: 15px;
}

#adresse-contact > div > div {
    margin: 45px auto;
}

#adresse-contact #poterieSvg {
    position: absolute;
    top: -150px;
    right: 0;
    z-index: -1;
}


/*la page fabrication poterie*/


#fabrication-poterie > div > h1 {
    text-align: center;
    font-family: 'Arya';
    font-weight: bold;
    font-style: normal;
    text-transform: uppercase;
    font-size: 4rem;
    margin-bottom: 50px;
}

#fabrication-poterie > .flex {
    align-items: flex-start;
    margin-top: 3rem;
}

#fabrication-poterie .col-66 {
    width: 66.66%;
    padding-right: 3rem;
}

#fabrication-poterie .col-66 img {
    width: 100%;
}

#fabrication-poterie .col-33 p:first-of-type {
    font-style: italic;
}

#fabrication-poterie .col-33 {
    width: 33.33%;
}

.block_fabriation {
    margin-top: 100px;
}


/*les templages des pages* Todo //ici template boutique/ */
#contenu_gauche {
    width: 20%;
    letter-spacing: 1px;
    line-height: 1.4rem;
}

#contenu_gauche .content-accordeon {
    display: none;
    padding: 5px 12px 10px 5px;
}

#contenu_gauche .content-accordeon .sublink {
    font-size: 0.9rem;
}

#contenu_droite_haut h1{
    text-align: center;
    font-family: 'Arya';
    font-weight: bold;
    font-style: normal;
    font-size: 2.5rem;
}
#contenu_droite {
    width: 80%;
    /*border: 1px solid var(--color-tertiare);*/
    padding: 20px;
    background-color: var(--color-secondaire);
}

#contenu > #template_produits_details h1 {
    font-size: 2.5rem;
    font-family: 'Arya';
    font-weight: bold;
    font-style: normal;
    text-align: left;
    margin-bottom: 20px;
    color: #2d2320;
    position: relative;
    padding-left: 2.5rem;
}

.c_terrine,
.c_article, .article_image {
    width: 350px;
    margin: 0px auto;
    position: relative;
    background-color: white;
    box-shadow: 1px 1px 5px rgba(0,0,0,0.1) ;
    padding: 12px;
    margin-bottom: 20px;
}

/*pour que tous les boutons voir le produit / ajouter au panier / titre de produit*/
/*soient alignés, peu importe la taille de l'image*/

.c_terrine > h2,
.c_art_titre > h2 {
    font-size: 1rem !important;
    margin-top: 0;
}

.c_ter_image,
.c_art_image, .article_bord {
    overflow: hidden;
}

.article_bord {
    padding: 12px
}

.c_art_titre h2 {
    text-align: center !important;
}

.c_art_titre a {
    color: #222222 !important;
    text-decoration: none !important;
}

.c_art_prix {
    position: absolute;
    top: -10px;
    right: -16px;
    background-image: url("/global/picto/picto-cercle-caramel.svg");
    background-repeat: no-repeat;
    background-position: center;
    /*sans le bg cover, l'image est un peu rognée'*/
    background-size: cover;
    width: 89px;
    height: 45px;
    text-align: center;
    padding: 12px;
    color: #ffffff;
}

.c_art_liens {
    display: flex;
    justify-content: center;
}
.c_ter_liens{
    display: flex;
    align-items: center;
}

.a_art {
    color:var(--color-tertiare);
    text-decoration: underline;
}
.a_art:hover{
   font-weight: bolder;
    transition: 0.3s;
}



.c_ter_liens a:nth-child(1),
.c_art_liens a:nth-child(1) {
    display: flex;
    justify-content: flex-end;
    width: 50%;
    color: #ffffff !important;
    /*background-color: var(--color-tertiare);*/
    background-color:var(--color-six);
    font-size: 13px;
    border-radius: 6px;
    padding: 10px 20px 6px;
    text-decoration: none !important;
    position: relative;
    border: 1px solid var(--color-six);

}

.c_ter_liens a:nth-child(2),
.c_art_liens a:nth-child(2) {
    display: flex;
    justify-content: flex-end;
    width: 50%;
    color: #ffffff !important;
    background-color: var(--color-tertiare);
    /*background-color:var(--color-six);*/
    font-size: 13px;
    border-radius: 6px;
    padding: 10px 20px 6px;
    text-decoration: none !important;
    position: relative;
    border: 1px solid var(--color-tertiare);

}

.c_ter_liens a:nth-child(1):hover,
.c_art_liens a:nth-child(1):hover {
    color: var(--color-six) !important;
    font-weight: bold;
    background-color: white;

}

.c_ter_liens a:nth-child(1):before,
.c_art_liens a:nth-child(1):before {
    content: url("/global/picto/picto-apercu.svg");
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 15px;
    width: 25px;

}

.c_ter_liens a:nth-child(1):hover:before,
.c_art_liens a:nth-child(1):hover:before {
    content: url("/global/picto/picto-apercu-caramel.svg");
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 15px;
    width: 25px;

}

.c_ter_liens a:nth-child(2):hover,
.c_art_liens a:nth-child(2):hover {
    color: var(--color-tertiare) !important;
    font-weight: bold;
    background-color: white;

}

.c_ter_liens a:nth-child(2):hover:before,
.c_art_liens a:nth-child(2):hover:before {
    content: url("/global/picto/picto-panier-red.svg");
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 5px;
    width: 20px;

}

.c_ter_liens a:nth-child(2):before,
.c_art_liens a:nth-child(2):before {
    content: url("/global/picto/picto-panier-blanc.svg");
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 5px;
    width: 20px;

}


.cadre_hover_dispo {
    position: absolute;
    background: RGBA(255, 255, 255, 0.7);
    display: none;
    height: 30%;
    text-align: center;
    padding-top: 100px;
    z-index: 1;
}

.cadre_hover_dispo a {
    padding: 0 5%;
    text-align: center;
    display: block;
    margin: auto;
    line-height: 1.5rem;
}


#boutique h1 {
    text-align: center;
    font-family: 'Arya';
    font-weight: bold;
    font-style: normal;
    font-size: 2.3rem;

}

#boutique h3 {
    /*font-family: p22-sneaky-pro, sans-serif;*/
    font-family: 'Arya';
    font-weight: 400;
    font-style: normal;
    font-size: 2.2rem;
    text-align: center;
    padding-top: 30px;
    padding-bottom: 30px;
    color: var(--color-tertiare);

}


/*ici template de la page produit détails */

#template_produits_details h1 {
    text-align: center;
    font-family: 'Arya';
    font-weight: bold;
    font-style: normal;
    font-size: 2.5rem;
    margin-top: 0;
    margin-bottom: 1rem;
}


#contenu_droite > .contenu > div:nth-child(1) {
    display: flex;
    justify-content: space-between;
    margin-bottom: 50px;
}

#contenu_droite > .contenu > div:nth-child(2) > div {
    margin: 20px auto;
}

#contenu_droite .colonne_250 {
    display: flex;
    align-items: center;
    flex: 1;
}

#contenu_droite .block_ajouter {
    width: 100%;
}

#contenu_droite .block_ajouter div {
    margin: 20px auto;
}


#contenu_droite .block_ajouter .art_c_dispo > img {
    margin-right: 10px;
}


#contenu_droite .art_prix {
    position: relative;
    margin: auto;
    width: 130px;
    height: 25px;
    color: var(--color-tertiare);
    font-size: 2rem;
    text-align: center;
    font-weight: bold;
    padding-top: 5px;
}

#contenu_droite .art_qte input {
    text-align: center;
    font-size: 14px;
    border: 1px solid #DBB177;
    color: var(--color-tertiare);
    font-weight: bold;
    width: 80px;
}

#contenu_droite .art_qte a {
    text-decoration: none !important;
    font-size: 2rem;
    margin: auto 10px;
}


#contenu_droite .art_btn a {
    display: inline-block;
    width: 250px;
    color: #ffffff !important;
    background-color: var(--color-tertiare);
    font-size: 16px;
    text-align: center;
    border-radius: 6px;
    padding: 15px 35px;
    text-decoration: none !important;
    position: relative;
}

#contenu_droite .art_btn a:hover {
    color: #ffffff !important;
    background-color: var(--color-quarternaire);
}

#contenu_droite .art_btn a:before {
    content: url("/global/picto/picto-panier-blanc.svg");
    position: absolute;
    top: 10px;
    left: 8px;
    width: 25px;
}

/*ici le template de la page panier*/
#template_panier h1 {
    text-align: center;
    font-family: 'Arya';
    font-weight: bold;
    font-style: normal;
    font-size: 4rem;
}

#panier_etapes {
    position: relative;
    margin: auto;
    padding: 10px;
    border-radius: 100px;
    background-color: #FFF;
    margin-bottom: 20px;
}

#template_panier #panier {
    flex-direction: column;
}

#template_panier .panier_ligne {
    display: flex;
    justify-content: space-between;
    margin-top: 30px;
}

#template_panier .mobile {
    display: none;
}

.bt_bas_cde {
    text-align: center;
}

.bt_bas_cde a {
    background-color: var(--color-quarternaire);
    color: #000000;
    border: 1px solid #FFFFFF;
    font-size: 12px;
    padding: 12px;
    border-radius: 20px;
    -moz-border-radius: 20px;
    letter-spacing: 1px;
    cursor: pointer;
    font-family: 'Krub';
    font-weight: 500;
    font-style: normal;
    text-decoration: none;
}

.bt_bas_cde a:hover {
    background-color: var(--color-tertiare);
    color: #ffffff;
}


#template_panier .panier_cadre_recap {
    width: 100%;
    max-width: 300px;
    margin: 20px auto 40px;
    padding: 10px;
    border: 1px solid var(--color-tertiare);
}


#template_panier .panier_cadre_recap > div {
    margin: 10px auto;
}


#bon_cadeau {
    text-align: center;
}

#bon_cadeau > div {
    margin: 20px auto;
}


#template_panier .block_cadeau {
    margin: 20px auto;
    background-color: var(--color-tertiare);
    padding: 20px 5px;
    color: #ffffff;
}

#template_panier .bords_arrondis {
    flex: 1;
    text-align: center;
}


#autres_pays {
    display: flex;
    flex-wrap: wrap;
}

#autres_pays > div {
    width: 10%;
    padding: 10px;
}


#template_compte .bords_arrondis {
    flex: 1;
    text-align: center;
}

#template_compte .bords_arrondis form {
    margin-top: 20px;
}

#template_compte > #contenu_droite > .contenu > .bords_arrondis {
    display: block;
    width: 50%;
    text-align: center;
}


/*la page template du compte client*/
#template_compte #contenu_droite > .contenu > div:nth-child(2) {
    display: flex;
}

#template_panier #contenu_droite > .contenu > div:nth-child(2) > div {
    flex: 1;
    text-align: center;
}

#template_compte #panier_etapes {
    text-align: center;
    display: block;
}

/*template commande livraison*/
#template_livraison #panier_etapes {
    text-align: center;
    display: block;
}

/*template commande paiement*/
#template_paiement #panier_etapes {
    text-align: center;
    display: block;
}

/*Template information livraiosn */
#template_information_livraison h2 {
    font-size: 1.3rem;
    font-weight: 200;
}

#template_information_livraison h2 strong {
    font-size: 1.3rem;
    font-weight: 200;
}

#template_information_livraison > ul > li > h2 > strong {
    font-size: 1.3rem;
    font-weight: 200;
}


/*template poterie*/
#catalogue #contenu_droite > .contenu > div:nth-child(2) > div {
    margin: 20px;
}


#catalogue #contenu_droite > .contenu > div:nth-child(1) {
    display: block;
}

#catalogue .article_image > a {
    display: block;
    width: 100%;
    color: #ffffff !important;
    background-color: var(--color-tertiare);
    font-size: 16px;
    text-align: center;
    border-radius: 6px;
    padding: 15px 27px;
    text-decoration: none !important;
    position: relative;
    margin-top: 20px;
}

#catalogue .article_image > a:hover {
    color: #000000 !important;
    background-color: var(--color-quarternaire);
}


/*les collorbox */
/*la colorbox de ajouter aux panier*/

.btn_rouge {
    display: block;
    width: 100%;
    color: #ffffff !important;
    background-color: var(--color-tertiare);
    font-size: 16px;
    text-align: center;
    border-radius: 6px;
    padding: 15px 10px;
    text-decoration: none !important;
    position: relative;
}

.btn_blanc {
    display: block;
    width: 100%;
    color: #000000 !important;
    background-color: var(--color-quarternaire);
    font-size: 16px;
    text-align: center;
    border-radius: 6px;
    padding: 15px 27px;
    text-decoration: none !important;
    position: relative;
}

.btn_compte{
    display: block;
    margin-top: 1rem;
    width: 200px;
    padding: 5px 3px;
    color: #ffffff !important;
    background-color: var(--color-tertiare);
    font-size: 16px;
    text-align: center;
    border-radius: 6px;
    text-decoration: none !important;
    position: relative;
}

/* Anciens styles */
.cadre {
    border: 1px solid #BD9975
}

.colonne_200 {
    position: relative;
    flex: 1;

}

.colonne_350 {
    position: relative;
    flex: 1;

}

/*.clear {*/
/*    clear: both;*/
/*}*/
.colonne_300 {
    position: relative;
    flex: 1;
}

.colonne_100 {
    position: relative;
    flex: 1;
}

.colonne_50 {
    flex: 1;
}


.colonne_400 {
    flex: 1;
}


input[type="text"], input[type="password"], input[type="tel"], select, textarea, .input {
    font-family: Trebuchet MS, Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    background-color: #FFFFFF;
    color: var(--color-tertiare);
    border: 1px solid var(--color-tertiare);
    padding: 12px;
    font-size: 12px;
    max-width: 100%;
}

input[type="submit"], input[type="button"], .btn, .bouton {
    background-color: var(--color-tertiare);
    color: #FFFFFF;
    border: 1px solid #FFFFFF;
    font-size: 12px;
    padding: 12px;
    border-radius: 20px;
    -moz-border-radius: 20px;
    letter-spacing: 1px;
    cursor: pointer;
    font-family: 'Krub';
    font-weight: 500;
    font-style: normal;
}

input[type="submit"]:hover, .btn:hover, .bouton:hover {
    background-color: transparent;
    border: 1px solid var(--color-tertiare);
    color: var(--color-tertiare);
}


/*le menu de gauche*/
.titre_article {
    margin-left: 20px;
    margin-top: 25px;
    margin-bottom: 5px;
    font-size: 16px;
    color: #000000;
    font-weight: bold;
    position: relative;
}

.titre_article:before {
    content: url(/global/picto/picto-forme.svg);
    position: absolute;
    left: -24px;
    width: 15px;
    height: 15px;
}

#contenu-page {
    padding:4.5rem 0;
}
#contenu-page h1{
    font-size: 2.4rem;
}

#contenu-page h2{
    font-size: 1.25rem;
}