/*
CSS by Manu LECHAT
https://e-lechat.com
*/


@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,600;1,600&display=swap');


:root {
  --black : "black";
  --grid_unit: calc(100vw / 8);
  --space_unit: 1vw;
  --padding_v_sections: 60px;
  --site_max_width: 1440px;
  --site_slim_width: 1080px;

  --fontSize_unit: 10px;
  --color_txt : #1d1d1b;
  --color_alt: #c39c71;
  --color_dark : #1d1d1b;
  --color_light:  #7a7a7a ;


}



.droid_regular{
  font-family: "droid-serif", serif;
  font-weight: 400;
  font-style: normal;


}
i, .italic{
font-family: "droid-serif", serif;
font-weight: 400;
font-style: italic;
}
.droid_bold{
font-family: "droid-serif", serif;
font-weight: 700;
font-style: normal;
}
.bold_italic{
font-family: "droid-serif", serif;
font-weight: 700;
font-style: italic;
}

/* titles */

.txt_13 { font-size: 0.8125rem; }
.txt_14 { font-size: 0.875rem ;  letter-spacing: 0; line-height: 1.65em;  }
.txt_15 { font-size: 0.9375rem; }
.txt_16 { font-size: 1rem ;  letter-spacing: 0; }
.txt_21 { font-size: 1.3rem ; line-height: 1.25em;  }
.txt_26 { font-size: 1.625rem ; line-height: 1.25em;  }
.txt_085 { font-size: 0.85rem; }
.txt_0875 { font-size: 0.875rem; }
.txt_100 { font-size: 1rem ; }
.txt_130 { font-size: 1.3rem ; }
.txt_225 { font-size: 2.25rem; }
.txt_275 { font-size: 2.75rem; }

.maj{ text-transform: uppercase; letter-spacing: -0.04em;    }

strong { font-weight: 700; }
.black { font-weight: 700; }
.white{ color: #fff; }
.titre{ line-height: 1.1em; margin-bottom: 0.5em; }
.color_alt{ color: var(--color_alt) }
.color_light{color:  var(--color_light) }
.bolder{ font-weight: bolder; }
.burger{ display: none; }

.display_none{ display: none; }
.bt_contact:hover{ cursor: pointer; }

.typo_sans{ font-family: montserrat, sans-serif; }
.titre_small{ font-family: montserrat, sans-serif; width: fit-content; text-transform: uppercase; letter-spacing: 0.1em;  }
::selection {  background-color: rgba(0, 0, 0, 0.3); opacity: 0.1; transition: all .3s; ;  text-shadow: none; }
* {  box-sizing: border-box; outline: none; /*text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; */ }

html{ min-height: 100vh; background: white;   font-weight: 500; color: var(--color_txt);  min-height: 100vh;  top:0; left: 0; margin: 0; padding: 0; width:100%;-webkit-font-smoothing: antialiased;   box-sizing: border-box;  position: relative;  text-rendering: optimizeLegibility;  }
body{ background: white; min-height: 100vh;  font-family: "droid-serif", serif; font-size: 1rem; line-height: 1.65em;  overflow-x: hidden;  width: 100vw; overflow-y: auto; color: var(--color_txt); margin: 0; padding: 0; top:0; left: 0; }
body.shownav{ overflow: hidden; }
div{  position: relative; display: block;   }
header, section, main{ width: 100vw; position: relative; }
img{  max-width: 100%; max-height: 100%; width: auto; height: auto; display: block; object-fit: contain; }
ul{ margin: 0; display: block; text-align: left; padding: 0;}
li{ margin: 0;  list-style: none; padding: 0px;  }
h1,h2,h3,h4, h5{ font-family: "droid-serif", serif; font-weight: 700; font-style: normal; margin-block-start: 0; margin-block-end: 0; width: fit-content;   display: block; margin: 0; clear: both; break-after: always;   line-height: 1.2em; letter-spacing: -0.05em;  }
span{ display: inline-block; }
a{ width: fit-content;  position: relative; color: var(--color_txt);  text-align: left; text-decoration: none;  }
a:hover{ cursor: pointer; }
p{   font-weight: 400; clear: both; display: block; padding: 0; margin: 0; line-height: 1.65em;  }
p a{ text-decoration: underline;  color: var(--color_alt); }
p a:hover{ text-decoration: underline; }
.bold{  font-weight: bold; }
.bold .em{  font-style: italic;  }

u{ position: relative; text-decoration: none; z-index:2;  }
u::before{  pointer-events: none; opacity: 0.6; mix-blend-mode: multiply; position: absolute; transform: rotate(2deg); z-index:1;  top: 0.3em; left: 0; width: 100%; height: .8em; background-color: var(--color_theme); content: "";  }
li{ font-size: 1rem; line-height: 1.35em; }

iframe{ border: none; width: 100%; height: 100%; margin: 0; }
a.over_underline{  width: fit-content;}
a.over_underline:after{ content:""; position: absolute; bottom:0; left: 0; transition: all .1s cubic-bezier(.17,.67,.68,1.01); width:0%; height: 2px; background: var(--color_txt); }
a.over_underline:hover:after{ width:100%;  }
blockquote{ margin: 1em 0; }
.section{ max-width:  100% ; width: var(--w_wrapper); margin: 0 auto;  }
.main_container{ width: 100%; }
.center{ text-align: center; margin: 0 auto; }


/*

 /^^                                                                /^^
 /^^                                                                /^^
 /^^        /^^         /^^   /^^        /^^         /^^  /^^     /^/^ /^
 /^^      /^^  /^^       /^^ /^^       /^^  /^^      /^^  /^^       /^^
 /^^     /^^   /^^         /^^^       /^^    /^^     /^^  /^^       /^^
 /^^     /^^   /^^          /^^        /^^  /^^      /^^  /^^       /^^
/^^^       /^^ /^^^        /^^           /^^           /^^/^^        /^^
                         /^^
*/

.mobile_nav{ display: none; }

.bt_cta{ color: white; min-height: 54px; font-family: montserrat, sans-serif; padding: 1rem 2rem 1rem 2rem;    letter-spacing: 1px;  font-size: .8125rem; font-weight: 600; display: flex; align-items: center; text-transform: uppercase; border-radius: 5px;  background-color: var(--color_alt); display: flex; text-align: center; gap:10px }
.bt_cta img{ width: 15px;  }
.bt_cta:hover {  background-color: #b4834d; }
.bt_cta svg{ width: 15px; }
.bt_cta svg path{  fill: white; }

.bt_cta_border{ color:var(--color_alt)!important; border: 1px solid var(--color_alt); gap: 10px; font-family: montserrat, sans-serif;    text-transform: uppercase;  padding:  .8em 1.5em; display: flex; align-items: center;   letter-spacing: 1px;  font-size: .8125rem; font-weight: 600; border-radius: 5px; }
.bt_cta_border img{ width: 15px; }
.bt_cta_border svg path{ fill: var(--color_alt); }

.bt_cta_border:hover{ background-color: var(--color_alt); color: white!important ; transition: all.17s; }
.bt_cta_border:hover svg path{ fill: white!important }

.centered{ margin: 0px auto ; text-align: center; align-items: center; }
.page_wraper{ min-height: 60vh; }
.container{ width: 100%; max-width: var(--site_max_width); margin: auto; padding-right: 80px; padding-left: 80px; }
.container_slim{ width: 100%; max-width: var(--site_slim_width); margin: auto; padding-right: 80px; padding-left: 80px; }
.container_flex{  display: flex; gap: var(--page_grid_gap); }
.container_full{ background-color: #f5efea;  width: 100%;  padding-right: 80px; padding-left: 80px;  }

/* topbar */
.topbar{ width: 100%; background-color: var(--color_dark);  display: flex; justify-content: space-between;  }
.topbar .col{ display: flex; gap: 30px;  width: 100%; padding: 6px 15px; }
.topbar .col2{ justify-content: center;  align-items: center; }
.topbar .col3{ justify-content: flex-end; }
.topbar a {  white-space: nowrap;  display: flex;  gap: 8px; align-items: center;  padding: 0px 10px 0px 35px; height: 25px; }
.topbar a .nav_icon{  max-height:25px; position: absolute; top: 0; left: 0;}
.topbar a span{ font-family: montserrat, sans-serif;; font-family: "Montserrat", sans-serif; font-optical-sizing: auto;  font-weight: 600;  font-style: normal; color: white; font-size: .8125rem; width: max-content; color: white; text-transform: uppercase;  width: fit-content; }

/* navbar */
.navbar{ width: 83%; margin: auto; justify-content: center; display: flex;  }
.navbar .main_logo{ width : 310px; margin: 0 10px 0 10px; }
.navbar .main_logo svg{ width : 100%; }
.navbar .col{ display: flex; gap: 2rem; width: 30%; padding: 6px 15px; align-items: center; }
.navbar .col2{ width: 33%; display: flex; justify-content: center;  padding-left:2rem; padding-right: 2rem;  align-items: center; }
.navbar .item{  width: 17%; display: flex; align-items: center; justify-content: center; }
.navbar .col3{ justify-content: flex-start;  }
.navbar a{ text-align: center; font-size: 1rem; font-family: "Montserrat", sans-serif;  font-optical-sizing: auto; font-weight: 600; letter-spacing: 1px;  font-style: normal; padding: .625rem; padding-top: 0; text-transform: uppercase;   display: inline-block; }


/* page article */



.bg_leaf{ background: top 170px left -20px no-repeat url(../images/bg_article_left.png), top 0px right -100px no-repeat url(../images/bg_article_right.png); /*background-attachment: fixed;*/ }
.bg_bottom{ position: absolute; bottom: 0; right: 60px;  }


.page_article .container_article{max-width: var(--site_slim_width);  padding-top: 20px; padding-bottom: 80px; width: 100%; }
.article{ display: flex; flex-direction: column; gap: 2rem;  }

.article .article_blocks p{ font-size: 1.1rem; }



/* .article_content */
/* .article_content h1{  color: #1d1d1b !important; font-size: 2.8rem; margin-bottom: .6em;  margin-top: .6em; } */


/* article_nav */
.ariane_container{ margin: 40px auto; align-items: center; display: flex;  justify-content: space-between; }
.ariane_container .prevnext{ display: flex; gap: 15px; width: fit-content; }
.ariane_container .prevnext a{ display: flex; align-items: center; }
/* title_container */
.titre_deco_container{padding: 40px 0; }
.titre_deco_container .titre_deco{background: center 0px no-repeat url(../images/bg_titre.svg);  background-size: auto 32px;  color: #1d1d1b;     letter-spacing: 1px;    overflow: hidden;    text-align: center;    padding-top: 20px;    padding-bottom: 20px;  margin-top: 40px;    margin-left: auto;    margin-right: auto;    text-transform: uppercase;   width: auto; }
.titre_deco span:before, .titre_deco span:after {  z-index: 3;  content: "";  display: inline-block;  position: absolute;  top: 50%;  width: 100px;  height: 5px;  border-color: #371d00;  border-top: 1px solid;  border-bottom: 1px solid;  margin: 0 20px; }
.txt_085.titre_deco span:before, .txt_085.titre_deco span:after{ top:25% }
.titre_deco span { padding-right: 140px;  padding-left: 140px; position: relative;  display: inline-block;  text-transform: uppercase; margin-top: 25px; }
.titre_deco span:before { right: 0; }
.titre_deco span:after { left: 0; }


/* article_cards_grid */

.article_cards_grid{ display: grid;  padding-bottom: 80px; grid-template-columns: 1fr 1fr 1fr; gap: 40px; }
.article_cards_grid .article_card{ background: white; border-radius: 0 0 8px 8px; z-index: 2; width: 100%; padding: 0px; border-radius: 8px; }
.article_cards_grid .article_card:after{ border-radius: 8px;  background: white;  z-index: -1; position: absolute; content: ""; display: block;  box-shadow: 0px 10px 20px 16px rgba(0, 0, 0, .05) ; width: 100%; height: 100%; top: 0; left: 0; }
.article_cards_grid .article_card .bottom{  padding: 30px 20px; width: 100%; height: calc(100% - 200px); gap: 20px;  display: flex; flex-direction: column;  justify-content: space-between; }
.article_cards_grid .article_card .text_wrapper{ width: 100%; display: flex; flex-direction: column; gap: 20px; }
.article_cards_grid .article_card .cover_wrapper{ background-color: #f5efea; border-radius: 8px 8px 0 0; overflow: hidden; width: 100%; margin: 0; height: 200px; float: right; object-fit: cover; }
.article_cards_grid .article_card .cover_wrapper img{ width: 100%; height: 100%;  object-fit: cover;}


/* page_articles */

.page_articles{ padding-bottom: 300px; }
.page_articles .article_cards_grid{ grid-template-columns: 1fr 1fr 1fr; }


/* page_article */
.page_article .article_content{ display: flex; flex-direction: column; gap: 3rem; }
.page_article .article_content .cover_wrapper{ border-radius: 8px; overflow: hidden; width: 100%; aspect-ratio: 16/9; float: right;  height: auto; object-fit: cover; }
.page_article .article_content .cover_wrapper img{ width: 100%; height: 100%;  object-fit: cover;}
.page_article .article_content .page_title{ max-width: 32ch; }
.page_article .article_content h2{ font-size: 2.25rem; margin-bottom: 2rem;  margin-top: 2rem; }
.page_article .article_content h3{ font-size: 1.5rem; margin-bottom: 2rem;  margin-top: 2rem; }
.page_article .article_content p{ margin-bottom: 1rem; text-align: justify; }
.page_article .article_content ul{  margin-bottom: 1rem; margin-left: 2rem; }
.page_article .article_content li{ list-style: disc; }
.page_article .title_next{ text-align: center; width: 100%; padding: 6rem 4rem; font-family: droid-serif, serif; font-weight: 700;  font-style: normal;  font-size: 2.9rem;  letter-spacing: -2px;  color: #1d1d1b; }
.page_article .section_block{  display: inline-block; }
.page_article .section_block.container_full{  margin-top: 80px; margin-bottom: 80px;  }
.page_article .next_articles{ margin-top: 2rem; }
.section_blocks_wrapper{ display: flex; flex-direction: column; gap: 1rem; }
.block-type-paragraphe .paragraphe { display: flex; flex-direction: column; gap: 1em; }
.block-type-paragraphe h2{ letter-spacing: 0; margin-top: 1rem; margin-bottom: 1rem;}

/* blocks  */

.page_article .block-type-heading h1{ font-weight: bold; }
.page_article .block-type-heading h2{ font-weight: bold; font-size: 2.25rem; margin-bottom: 2rem;  margin-top: 2rem; }
.page_article .block-type-heading h3{ font-weight: bold; font-size: 1.5rem; margin-bottom: 2rem;  margin-top: 2rem; }
.page_article .block-type-heading h4{ font-weight: bold; }
.page_article .block-type-video {  aspect-ratio: 16/9; width: 100%;  margin-bottom: 1rem; }
.page_article .block-type-video figure { border: none; width: 100%; height: 100%; margin: 0; display: contents; }
.page_article .block-type-video iframe{ border: none; width: 100%; height: 100%; margin: 0; }
.page_article .block-type-citation{ background: url(../images/grain_de_cafe.png); margin-top: 40px; background-repeat: no-repeat; background-size: 120px; background-position: top center; padding: 80px  0 40px 0 ; text-align: center;font-size: 1.3rem; line-height: 1.5em; font-family: "droid-serif", serif; color: var(--color_alt);  font-weight: 700; font-style: italic;  }
.page_article .block-type-citation blockquote{ max-width: 48ch; margin: auto; }
.page_article .block-type-citation footer{ position: relative;  margin-top: 40px; font-size: 1rem; color: var(--color_txt); }
.page_article .block-type-citation footer::before{ content: ''; position: absolute; top: -20px; left: calc(50% - 20px); width: 40px; background-color: var(--color_txt); height: 1px; display: block;  }
.page_article .block-type-button{ padding: 40px; display: flex; justify-content: center; }
.page_article .bt_back{ margin: 40px auto 120px auto; }
.page_article .block-type-exergue .cols{  grid-template-columns: 1fr 1fr;   display: grid; height: auto; justify-content: center;  }
.page_article .block-type-exergue .col1{ width: 100%;   padding: 120px 40px; display: flex; gap: 30px; flex-direction: column;     justify-content: center;  }
.page_article .block-type-exergue .col2{ width: 100%; height:100%;   display: flex; flex-direction: column; justify-content: center; }
.page_article .block-type-exergue .col2 .cover{ width: 100%; height: 100%;  }
.page_article .block-type-exergue .col2 .cover img{ width: 100%; height: 100%; object-fit: cover; }
.page_article .block-type-exergue .exergue_wrapper .titre{ margin: 0; position: relative; }
.page_article .block-type-exergue .exergue_wrapper .titre:after{ z-index: 3;  content: "";  display: inline-block;  position: absolute; top: 50%; transform: translateY(-50%);  right: -125px;  width: 100px;  height: 5px;  border-color: #371d00;  border-top: 1px solid;  border-bottom: 1px solid;  }
.page_article .block-type-exergue .exergue_wrapper{ width: 100%; margin: auto; max-width: var(--site_slim_width);  }

section.pro h2 { color: var(--color_alt); font-weight: normal;}

.page_article .block-type-image img{ border-radius: 8px; }
.page_article .block-type-columns figure img{ border-radius: 8px; }

/* columns */

.block-type-columns blockquote{  max-width: 48ch; margin: 2rem  auto;  text-align: left;font-size: 1.3rem; line-height: 1.5em; font-family: "droid-serif", serif; color: var(--color_alt);  font-weight: 700; font-style: italic;  }

.block-type-columns .blocks{ display: flex; flex-direction: column; gap: 1rem; }
.block-type-columns .blocks .bt_cta{ margin-top: 1rem; }


.block-type-columns .grid{  width: 100%;
  display: grid;
  grid-template-columns: repeat(12, 1fr); /* grille de 12 colonnes égales */
  gap: 1.5rem; /* espace entre les colonnes */ }

/* Colonne avec largeur dynamique selon --columns */
.block-type-columns .column {
  grid-column: span var(--columns, 12); /* par défaut, une colonne prend toute la largeur */
}

.block-type-columns

/* page_layouts */

.section_layout {  display: grid;  grid-template-columns: repeat(6, 1fr); /* Crée une grille avec 6 colonnes égales */gap: 1rem; /* Espace entre les colonnes */}
.column {  grid-column: span var(--span, 1); /* Utilise la valeur de --span pour définir le span de la colonne, par défaut 1 */}

/* page_produits */

.page_produits { padding-bottom: 340px; }
.page_produits .page_intro{ margin: 3rem 0 1rem 0; }
.page_produits .product_info{ width: 100%; padding: 40px 0; border-bottom: 1px solid var(--color_alt); display: flex; }
.page_produits .product_info .cover_wrapper{ width: 240px; height: 240px; }
.page_produits .product_info .title{ margin-top: 2rem; margin-bottom: 1rem; }
.page_produits .product_info .col2{ display: flex;flex-direction: column; gap: 1rem; }
.page_produits .product_info .intensite{ width: 50%; }
.page_produits .product_info .aromatique{ width: 50%; }
.page_produits .product_info .intensite_level{ margin: 1rem 0; display: flex; gap: 5px; }
.page_produits .product_info .intensite_level svg{ width: 15px; }
.page_produits .product_info .bt_cta_border{ margin: 10px auto; }
.page_produits .product_info .ligne2{ display: flex; margin-top: 10px; gap: 10px 0; flex-wrap: wrap;  }
.page_produits .aromatique { display: flex; flex-direction: column; gap: .75rem; }
.page_produits .aromatique ul{ display: flex; gap: .5em;  }
.page_produits .aromatique li:after{ content:" - "  }
.page_produits .aromatique li:last-child:after{ content:""  }
.page_produits .link_wrapper{ width: auto;  }
.page_produits .blank_gap{ width: 50%;  }

/* footer */

.footer { padding-top: 2.5rem;  padding-bottom: 2.5rem;  background: #18100d; color: #fff; }
.footer .footer_container{ display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; }
.footer .social_items{ display: flex; gap: 0rem; }
.footer .social_items  a {   overflow: hidden; border-radius: 100%;  display: inline-block;  width: 2.5rem;  height: 2.5rem;  margin: .5rem;  cursor: pointer;  background-repeat: no-repeat; }
.footer .social_items  a svg path{ fill: var(--color_alt); transition: all .37s; }
.footer .social_items  a:hover svg path{ fill: white; transition: all .17s; }
.footer .social_items li span{ visibility: hidden; }
.footer .col{ gap:1rem; padding: 3rem 1rem 1rem 1rem; display: flex; flex-direction: column; }
.footer .col1{ border-right: 1px solid #7a7a7a; gap: 3rem; }
.footer .col2{ border-right: 1px solid #7a7a7a; align-items: center; }
.footer .col3{ align-items: center;  border-right: 1px solid #7a7a7a; text-align: center; }
.footer .col4{   align-items: center; }
.footer .logo_footer{ width: 100%; margin-top: 2rem; }
.footer .logo_footer svg{ width: 100%; }
.footer .logo_footer svg path{ fill: white;  }
.footer a{ color: var(--color_light); }
.footer .footer_nav{ border-top:1px solid white; padding: 1.5rem  1rem;  display: flex; flex-direction: column; gap: 1rem; }
.footer .footer_nav a{ padding-left: 12px; transition: all .17s;}
.footer .footer_nav a:hover{ color: white;}
.footer .footer_nav a:before{ content: ">"; color: var(--color_alt); position: absolute; top: 0; left: 0; }
.footer .lien_mail{ display: flex; gap: .6rem; align-items: center; justify-content: center;    }
.footer .lien_mail svg path{ fill: var(--color_alt);  }
.footer .lien_mail:hover { color: white;  }
.footer .lien_mail:hover svg path{ fill: white;  }
.footer-decorated :before {  right: 2.375rem;  margin-left: -50%; }
.footer .footer_end{ margin: 0; display: flex;    justify-content: center; }
.footer .footer_grain{ padding: 3rem;  background: #18100d; width: fit-content; }
.footer .footer_grain svg{ width: 54px; height: auto; }
.footer .footer_lines { border-color: #46403d !important; border-top: 1px solid;  border-bottom: 1px solid; content: "";  display: inline-block; height: 10px;  position: absolute;  top: calc(50% - 5px);  vertical-align: middle;  width: 100%; }

/*


/^^^^^^^
/^^    /^^
/^^    /^^          /^^          /^^^^      /^ /^^        /^^^^      /^^     /^^
/^ /^^            /^   /^^      /^^         /^  /^^      /^^          /^^   /^^
/^^  /^^         /^^^^^ /^^       /^^^      /^   /^^       /^^^        /^^ /^^
/^^    /^^       /^                 /^^     /^^ /^^          /^^        /^/^^
/^^      /^^       /^^^^        /^^ /^^     /^^          /^^ /^^         /^^
                                            /^^


*/


@media ( min-width: 1920px){

  :root {
  --grid_unit: 260px;
  }

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

  :root {
   --fontSize_unit: 8px;
   --page_grid_global:94vw;
   --space_unit: 5vw;
   --section_padding: 3vw;
   --padding_mobile: 20px;
   --padding_v_sections: 30px;
  }
  /* fonts */
  .txt_14 { font-size: 12px; }
  .txt_16 { font-size: 12px; }
  .txt_18 { font-size: 14px; }
  .txt_21 {  font-size: 16px; }
  .txt_28{ font-size: 18px; }
  .txt_36 {  font-size: 24px; }
  .txt_46 { font-size: 24px; }
  .txt_82 {    font-size: calc( var(--fontSize_unit) * 5.2); }
  .txt_64 {   font-size: calc( var(--fontSize_unit) * 4.4); }
  .txt_130 {  font-size: 1.15rem!important }

  .navbar{ height: 90px; }
  .bg_leaf{ background-size: 50vw auto, 80vw auto;  }
  .titre_deco_container .titre_deco{ width: 100%;  }
  .titre_deco_container .titre_deco{  width: 100%; font-size: 1rem; font-family: "Montserrat", sans-serif;; }
  .titre_deco_container .titre_deco span{ padding-right: 80px; padding-left:80px; }
  .titre_deco span:before, .titre_deco span:after { width: 50px }
  .titre_deco_container{ padding-top: 0; }
  .page_produits .product_info{ }
  .page_produits .product_info .cover_wrapper{ width: 40vw; height: auto; margin: auto;  }
  .ariane_container .prevnext{ display: none; }
  .exergue_wrapper{ flex-direction: column-reverse; }
  .container{ padding-left: 20px; padding-right: 20px;  }
  .container_slim{ padding-left: 20px; padding-right: 20px; }
  .article_cards_grid{ display: flex; flex-direction: column; }
  .ariane_container{ margin: 40px 0; justify-content: flex-start; flex-direction: column;  gap: 20px; align-items: flex-start; }
  .page_articles {  padding-bottom: 150px; }
  .footer .footer_container{ display: flex; flex-direction: column; }
  .footer .col{ padding: 2rem 1rem; }
  .footer .col1{ border-right: none; border-bottom: 1px solid #7a7a7a;  }
  .footer .col2{ border-right: none; border-bottom: 1px solid #7a7a7a;  }
  .footer .col3{ border-right: none; border-bottom: 1px solid #7a7a7a; text-align: center; }
  .footer .logo_footer{ width: 60%; margin-left: auto; margin-right: auto; }
  .footer .footer_grain svg { width: 33px; }
  .footer .footer_grain{  padding: 2rem;  }

  .topbar .col1, .topbar .col3{  display: none;  }
  .navbar .item.desktop_nav{ display: none; }
  .navbar .item.logo_nav{ width: 240px; max-width: 70%; }
  .navbar .logo_nav .date{ display: none; }

  .navbar .main_logo{ width: 68%;; }
  .icon_burger{ z-index: 100; transition: all .17s; display: flex; gap: 3px; flex-direction: column;justify-content: center;  align-items: center;  justify-items: center; width: 40px; height: 40px;  border-radius: 100%; position: absolute; top: 40px; left: 10px; }
  .icon_burge:hover{ gap: 5px; }
  .icon_burger span{ transition: all.17s; transform-origin: center; width: 18px; height: 2px; background-color: #18100d; border-radius: 2px; }

  .shownav .icon_burger span{ position: absolute; }
  .shownav .icon_burger span:nth-child(1){ transform: rotate(45deg)  }
  .shownav .icon_burger span:nth-child(2){ transform: rotate(45deg); display: none; }
  .shownav .icon_burger span:nth-child(3){ transform: rotate(-45deg)}

  .shownav .mobile_nav{  transform: translateY(0%);   visibility: visible; opacity: 1; }
  .mobile_nav{ justify-content: center; padding: 100px 5vw 40px 5vw; min-height: 100vh; transition: all .3s; visibility: hidden; opacity: 0; display: flex; transform: translateY(-50px); background-color: #f5efea; flex-direction: column; z-index: 90;  gap: 15vw; position: fixed; top: 0px; width: 100%;  }
  .mobile_nav .nav1{ display: flex;  flex-direction: column;  gap: 6vw;  transition: all .37s;  }
  .mobile_nav .nav2{ display: flex;  flex-direction: column;  gap: 3vw; transition: all .37s;  }
  .shownav .mobile_nav .nav1{ gap: 3vw; transition: all .17s; }
  .shownav  .mobile_nav .nav2{ gap: 0vw; transition: all .17s; }
  .mobile_nav a{ font-family: "Montserrat", sans-serif; font-size: 1.2rem; text-transform: uppercase; }
  .mobile_nav .nav1 a{ color: var(--color_alt);  font-size: 0.8rem; }
  .mobile_nav .nav2 a{     padding:  5vw 0;  width: 100%;  border-bottom: 1px solid #e2d5d5; }
  .block-type-columns .grid {  grid-template-columns: repeat(6, 1fr); }
  .page_produits .product_info .ligne2{ flex-direction: column; }
  .page_produits .product_info .intensite{ width: 100%; }
  .page_produits .link_wrapper{ width: 100%; }
  .page_produits .product_info .aromatique{ width: 100%; }
  .page_produits .product_info .bt_cta_border{ margin: 0px; }
  .page_article .article_content .page_title{ font-size: 1.85rem; }
  .page_article .article_content h2{ font-size: 1.5rem; }
  .page_article .article_content p{ font-size: .85rem; }
  .page_produits .link_wrapper{ margin-top: 10px; }
  .page_produits .product_info .cover_wrapper{ position: relative }
  .page_produits .product_info .cover_wrapper img{  width: 140%;    max-width: 140%;    margin-left: -20%; margin-top: 20px;}
  .navbar .main_logo{ margin-top: 20px; }
  .navbar .main_logo svg{ height: auto; }
  .bg_bottom { right: -60px;  max-width: 140%; width: 140%; }

}

@media ( max-width: 600px){

  .template_home .zone_intro .intro{ font-size: 8vw; }
}


@keyframes fadeIn{
  to { opacity: 1; transform:translate3D(0,0,0) }
}



@keyframes anim_contact_popup{
  0% {  opacity: 0; transform: scale(0.95); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes anim_titre_banner{
  0% {   width: 100%;   }
  100% {  width: 0%; }
}


@keyframes loop{
  0% {
    transform: rotateZ(0deg)    ;
  }
  50% {
    transform: rotateZ(175deg) ;
  }
  100% {
    transform: rotateZ(350deg)  ;
  }
}

@keyframes anim_h1_mask{
  0% {   width: 130%; left: 0;   }
  100% {  width: 0%; left: 130%; }
}


@keyframes anim_h1_submask{
  10% {   width: 0%; left: 0;   }
  50% {   width: 80%; left: -2%;   }
  100% {  width: 0%; left: 102%; }
}

@keyframes anim_h1{
  0% { opacity: 0; transform: translate3d(10%,0,0) scaleX(1.2);  }
  100% { opacity: 1; transform: translateX(0px,0,0) scaleX(1); }
}


@keyframes anim_img_intro{
  0%  { opacity: 0; transform:scale(1.05) rotate(2deg)}
  100%  { opacity: 1; transform:scale(1) rotate(0deg) }
}


@keyframes anim_img_header{
  0%  { filter: brightness(10) grayscale(1);}
  100%  { filter: brightness(1.3) grayscale(1);}
}