/* TEST — retire-moi après 
html::before {
  content: "custom.css OK";
  position: fixed; inset: 8px auto auto 8px; z-index: 999999;
  background: #000; color: #0f0; font: 12px/1 monospace; padding: 4px 6px;
}*/

@import url(https://fonts.googleapis.com/css?family=Oswald|Raleway);
@import url(https://fonts.googleapis.com/css?family=Kaushan+Script);
@import url(https://fonts.googleapis.com/css?family=Julius+Sans+One);

:root{

    --color1:#e92929;
    --color2:#3FA34D;
    --gray1:#444444;
    --gray2:#CCCCCC;
    --gray3:#EEEEEE;
    --text:#000000;
    --text1:#000;  /*Couleur du texte pour la color1 **/
    --text2:#FFFFFF;  /*Couleur du texte pour la color2 **/
    --font1:verdana;
    --font2:Oswald, verdana;
      
      /** Boutons **/
    --button-primary-bg:var(--color2);
    --button-primary-hover-bg:var(--color1);
    --button-primary-border-bg:#FFFFFF;
    --button-primary-border-hover-bg:#FFFFFF;
    --button-primary-color:var(--text2);
    --button-primary-hover-color:var(--text1);
    
    --button-secondary-bg:var(--gray1);
    --button-secondary-hover-bg:var(--gray3);
    --button-secondary-color:var(--gray3);
    --button-secondary-hover-color:var(--gray1);
    
      /** Titres**/
    --h1-bg:var(--color1);
    --h1-color:var(--text2);
    --h2-color:var(--text2);
    --h3-color:var(--text);
     
      /** Liens **/
    --a-color:var(--color1);
    --a-hover-color:var(--color2);
      
      /** Body **/
    --body-bg:#FFFFFF;
    --body-color:var(--text);
      
      /** Top **/
    --top-bg:#000000;
    --top-color:var(--color2);
    --top-a-hover-color:var(--color1);
      
      /** Info bar **/
    --info-bg:#FAFAFA;
    --info-color:var(--gray1);
      
      /** Menu **/
    --menu-bg:#000000;
    --menu-border-bg:var(--color1);
    --menu-color:#FFFFFF;
    --menu-hover-bg:#373737;
    --menu-border-hover-bg:orange;
    --menu-hover-color:orange;
      
      /** Footer **/
    --footer-bg:#000000;
    --footer-color:#FFFFFF;
    --footer-a-hover-color:var(--color1);
    --footer-bullet-color:var(--color1);
    --footer-border-bg:var(--gray3);
    
      /** Bottom **/
    --bottom-bg:#000000;
    --bottom-color:#FFFFFF;
    
      /** Sections **/
    --main-bg:var(--color10);
    --main-content-bg:var(--color10);
    --section-bordered-color:#DDDDDD;
    --login-bg:#e5e5e5;
    
      /** Home **/
    --home-article-bg:transparent;
    --home-products-bg:transparent;
    --themes-bg:transparent;
    
      /** Slidebar mobile **/
    --slidebar-bg:#222222;
    --slidebar-a-color:#FFFFFF;
    --slidebar-a-hover-color:var(--color1);
    --slidebar-a-hover-bg:#111111;
    
      /** Carte **/
    --map-circle-bg:var(--color2);
    
      /** Facebook **/
    --widget-facebook-bg:var(--color1);
    --widget-facebook-color:var(--text1);
    
      /** Liste des produits **/
    --category-a-color:#4f4d4d;
    --category-a-hover-color:var(--color1);
    
    /** Custom Gilbert **/
    --color10:#fdf6ec;


}

h2 {
    color: #000;
}

h3 {
  color: white;
}

h4{
  font-size:20px;
  color: black;
  font-family: var(--font2);
}

header .infoPanel{
  display:none!important;
}

.card-header {
    color: var(--text2);
}

header .top .topStatus, header .top .topBar .navbar a {
    color: var(--color10);
}


/************************************************
FACEBOOK
**************************************************/
#facebookBlock h4 {
    color: white;
}

#facebookBlock h4:before {
    background: #3B5998;
    color: #FFF;
}

/*******************************************************/

/*@media (min-width: 1400px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
        max-width: 100%;
    }
  }*/

#main {
  background-image:none;
}

#main .mainContent  {
    box-shadow: 1px 0px 17px #000;
    
}

.mainContent .unbordered{
  /*color: #FFFFFF;*/
}

.login {
  background-color: transparent; 
}

p {
  color: #333;
}

header .head .menuBar .navbar-nav > li > a:hover, header .head .menuBar .navbar-nav > li.active > a {
    background: none repeat scroll 0 0 var(--menu-hover-bg);
    border-bottom-color: #e82929;
    color: white;
}

.productDetail .text {
  font-size: 14px;
  color: white;
}

.productDetail .note {
  color: white;
}

.modal.cart .cartItem h3 {
  color:black;
}

.mainContent .bordered{
  background-color:#ededed;
}

.homeArticle{
  color:#FFFFFF;
}

.productList .product a,
.productList .cat a{
    background:var(--color1);
    color:var(--text1);
    text-shadow: 1px 2px 2px #000;
}

.productList .product a img,
.productList .cat a img {
    max-width: none;
}
.productList .cat a .title h3, .productList .product a .title h3{
    font-size: 18px;
}

.btn-outline-secondary {
    color: var(--color10);
    background-color: var(--color1);
    border-color: var(--button-secondary-bg);
}

.productDetail .ingredientsLabel .add {
    color: #ffffff;
}

nav.categories li img {
  border-radius:10px;
}

nav.categories li a {
/*  transform: translateX(0);       /* position de base 
  transition: transform .8s ease; */


 --dx: 25px;                   /* distance */
  --t: .9s;                    /* durée */
  display: inline-block;
  transform: translateX(0);
  transition: transform var(--t) cubic-bezier(.22,.61,.36,1); /* retour doux */
}


nav.categories li a:hover {
   transform: translateX(25px);
    transition: transform .8s ease;


  transform: translateX(var(--dx));
  transition-timing-function: cubic-bezier(.34,1.56,.64,1);  /* aller avec léger dépassement */
}

.sidebar .information img {
 border-radius:10px;
 width: 100%;
    transform: rotate(356deg);
    border: solid 4px #FFD;
    box-shadow: 2px -3px 7px 1px rgb(0 0 0 / 51%), 0 5px 5px rgba(0, 0, 0, 0.15);
}


.tinymce img {
    border-radius: 10px;
    border: 2px solid #ff0000;
    transform: rotate(356deg);
    box-shadow: 2px -3px 7px 1px rgb(0 0 0 / 51%), 0 5px 5px rgba(0, 0, 0, 0.15);

}

/*********************************************************
ACCORDEON
***********************************************************/
.accordion-button {
    font-size: 1.5rem;
    color: #ffffff;
    text-align: center;
    background-color: #c37a06;
}

.accordion-button:not(.collapsed) {
    color: #ffffff;
    background-color: #500e0e;
    box-shadow: inset 0 -1px 0 rgb(0 0 0 / 13%);
}

.accordion-button:focus {
    z-index: 3;
    border-color: #000000;
    box-shadow: none;
}

/*********************************************
THEMES
**********************************************/

.productList .product a .priceTTC {
    background-color: var(--color1);
}

/***********************************************
FOOTER
****************************************************/

footer {
    font-family: Poppins;
}

/*********************************************
ALERT
*********************************************/
.alert-warning {
    color: #000000;
    background-color: #FFEB3B;
    border-color: #ffecb5;
}


/******************************************
SLIDE 100% CHAT
********************************************/

/* 0) Pas de scroll horizontal quand on déborde en 100vw */
html, body { overflow-x: hidden !important; }

/* 1) Si un parent "coupe", on le détend (reste raisonnable) */
main, .site, .site-content, .page, .content { overflow: visible !important; }

/* 2) Cible large : tout ce qui s'appelle slider/hero (class ou id) */
[id*="slider"], [class*="slider"],
[id*="carousel"], [class*="carousel"],
.hero, .hero-slider, .banner, .banner-hero {
  position: relative !important;
  left: 50% !important;
  right: 50% !important;
  margin-left: -50vw !important;
  margin-right: -50vw !important;
  width: 100vw !important;
  max-width: 100vw !important;
}

/* 3) Pistes internes des libs courantes (si utilisées) */
.slick-list, .slick-track,
.swiper, .swiper-wrapper,
.splide__track, .splide__list { width: 100% !important; }

/* 4) Images/Backgrounds : ratio propre en cover (régle les vh à ton goût) */
:root{ --slider-h-mobile:58vh; --slider-h-tablet:62vh; --slider-h-desktop:70vh; --slider-max-h:900px; }

[id*="slider"] img, [class*="slider"] img,
[id*="carousel"] img, [class*="carousel"] img,
.hero img, .banner img {
  width: 100% !important;
  height: var(--slider-h-mobile) !important;
  max-height: var(--slider-max-h) !important;
  object-fit: cover !important;
  display: block !important;
}

@media (min-width:640px){
  [id*="slider"] img, [class*="slider"] img,
  [id*="carousel"] img, [class*="carousel"] img,
  .hero img, .banner img { height: var(--slider-h-tablet) !important; }
}
@media (min-width:1024px){
  [id*="slider"] img, [class*="slider"] img,
  [id*="carousel"] img, [class*="carousel"] img,
  .hero img, .banner img { height: var(--slider-h-desktop) !important; }
}

/* 5) Flèches/dots/captions au-dessus si présents */
.slick-prev, .slick-next,
.swiper-button-prev, .swiper-button-next { z-index: 5 !important; }

.slick-slide, .swiper-slide, .banner, .hero {
  min-height: var(--slider-h-mobile) !important;
  background-size: cover !important;
  background-position: center !important;
}
@media (min-width:640px){ .slick-slide, .swiper-slide, .banner, .hero { min-height: var(--slider-h-tablet) !important; } }
@media (min-width:1024px){ .slick-slide, .swiper-slide, .banner, .hero { min-height: var(--slider-h-desktop) !important; } }





/* DEBUG 10s — à retirer ensuite */
[id*="slider"], [class*="slider"], .hero, .banner { outline: 3px dashed red !important; }