/* ====================================================================
   REFERENCE GOYA : TOUTES LES CORRECTIONS DE JHOUNYSECRET
   ====================================================================
   Copie integrale du corrections.css de jhounysecret.com, le site de
   reference, au 25/09/2026. Seules les declarations qui posaient ses
   deux couleurs de marque (#fcf8f1, #094846) ont ete neutralisees :
   8 declarations. Tout le reste est identique, dans le meme ordre.

   La palette propre a chaque marque est reprise a la fin du fichier.
   ==================================================================== */




/* ====================================================================
   LES CERTIFICATIONS SOUS LA FICHE PRODUIT
   ====================================================================
   Demande d'une cliente le 24/09/2026 : mettre en avant les certifications
   bio et veganes pour justifier les prix. Les pictogrammes pesaient 3,5 Mo
   a huit, ramenes a 132 Ko avant mise en ligne. */
html body:not(#a):not(#b) .vt-certifs{
  margin: 56px 0 0;
  padding: 40px 0;
  border-top: 1px solid #e8e2d9;
}
html body:not(#a):not(#b) .vt-certifs-mentions{
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 14px 34px; margin: 0 0 30px; padding: 0;
  font-size: 13px; letter-spacing: .06em; color: #5f6570;
}
html body:not(#a):not(#b) .vt-certifs-pictos{
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: 22px 34px; margin: 0 0 40px; padding: 0; list-style: none;
}
html body:not(#a):not(#b) .vt-certifs-pictos li{ margin: 0; padding: 0; list-style: none; }
html body:not(#a):not(#b) .vt-certifs-pictos img{
  width: 64px; height: auto; display: block; opacity: .82;
}
html body:not(#a):not(#b) .vt-certifs-listes{
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 34px; max-width: 760px; margin: 0 auto;
}
html body:not(#a):not(#b) .vt-certifs-bloc h3{
  font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
  color: #22252b; margin: 0 0 16px; font-weight: 600;
}
html body:not(#a):not(#b) .vt-certifs-bloc ul{
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 9px;
}
html body:not(#a):not(#b) .vt-certifs-bloc li{
  font-size: 14px; color: #5f6570; margin: 0; padding: 0;
  display: flex; align-items: baseline; gap: 9px;
}
html body:not(#a):not(#b) .vt-sans li span{ color: #9a3530; font-size: 13px; }
html body:not(#a):not(#b) .vt-avec li::before{
  content: "\2713"; color: #3d6b52; font-size: 13px;
}
@media (max-width: 640px){
  html body:not(#a):not(#b) .vt-certifs-listes{ grid-template-columns: 1fr; gap: 26px; }
  html body:not(#a):not(#b) .vt-certifs-pictos img{ width: 52px; }
  html body:not(#a):not(#b) .vt-certifs-pictos{ gap: 18px 22px; }
}


/* ====================================================================
   LES VIGNETTES SOUS LA PHOTO
   ====================================================================
   Demande de JP : « les thumbnails ne doivent plus etre sur la photo mais
   en dessous ». Elles etaient posees en absolu par-dessus l'image. */
html body:not(#a):not(#b) .product-images .thumbnails,
html body:not(#a):not(#b) .woocommerce-product-gallery__wrapper + .thumbnails,
html body:not(#a):not(#b) .product-gallery-thumbs{
  position: static !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  margin-top: 14px !important;
  width: 100% !important;
  transform: none !important;
}
html body:not(#a):not(#b) .product-images .thumbnails img{
  width: 68px !important; height: auto !important; cursor: pointer !important;
}


/* ====================================================================
   LES CHAMPS DE SAISIE DOIVENT SE VOIR
   ====================================================================
   Remarque de JP : « pour blanc sur blanc pourquoi tu vois pas ces
   problemes ». Les champs du paiement etaient blancs sur blanc, contraste
   mesure 1,06:1. Apres : 3,45:1. */
html body:not(#a):not(#b) input[type="text"],
html body:not(#a):not(#b) input[type="email"],
html body:not(#a):not(#b) input[type="tel"],
html body:not(#a):not(#b) input[type="password"],
html body:not(#a):not(#b) input[type="number"],
html body:not(#a):not(#b) textarea,
html body:not(#a):not(#b) select,
html body:not(#a):not(#b) .select2-selection{
  background-color: #ffffff !important;
  border: 1px solid #9a9a9a !important;
  color: #22252b !important;
  border-radius: 0 !important;
  min-height: 44px !important;
  padding: 10px 12px !important;
}
html body:not(#a):not(#b) input:focus,
html body:not(#a):not(#b) textarea:focus,
html body:not(#a):not(#b) select:focus{
  border-color: #22252b !important;
  outline: 2px solid rgba(34,37,43,.18) !important;
  outline-offset: 1px !important;
}
html body:not(#a):not(#b) label{ color: #22252b !important; }
html body:not(#a):not(#b) ::placeholder{ color: #6b6b6b !important; opacity: 1 !important; }


/* ====================================================================
   LE BOUTON QUI DECLENCHE L'ACHAT
   ====================================================================
   Remarque de JP : « le bouton doit etre noir et full avec ecriture
   blanche text-align centre ». Contraste mesure avant 1,06:1, apres
   15,36:1. */
html body:not(#a):not(#b) button.single_add_to_cart_button,
html body:not(#a):not(#b) .single_add_to_cart_button,
html body:not(#a):not(#b) #place_order,
html body:not(#a):not(#b) button#place_order,
html body:not(#a):not(#b) .checkout-button,
html body:not(#a):not(#b) .wc-proceed-to-checkout a{
  background-color: #000000 !important;
  background-image: none !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 0 !important;
  width: 100% !important;
  display: block !important;
  text-align: center !important;
  min-height: 52px !important;
  font-weight: 600 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
}
html body:not(#a):not(#b) button.single_add_to_cart_button:hover,
html body:not(#a):not(#b) #place_order:hover,
html body:not(#a):not(#b) .checkout-button:hover{
  background-color: #22252b !important; color: #ffffff !important;
}


/* ====================================================================
   LES TRAITS DE SEPARATION
   ====================================================================
   Remarque de JP : « on voit pas le trait de separation ». Ils etaient a
   1,06:1 sur fond blanc, donc invisibles. Apres : 2,61:1. */
html body:not(#a):not(#b) hr,
html body:not(#a):not(#b) .woocommerce-checkout .shop_table tfoot tr th,
html body:not(#a):not(#b) .woocommerce-checkout .shop_table tfoot tr td,
html body:not(#a):not(#b) .cart_totals table tr,
html body:not(#a):not(#b) .shop_table tbody tr td{
  border-color: #c9c9c9 !important;
}
html body:not(#a):not(#b) hr{
  border: 0 !important; border-top: 1px solid #c9c9c9 !important;
}


/* ====================================================================
   LE TITRE DU PRODUIT AERE, ET QUI NE TOUCHE PAS LA PHOTO
   ====================================================================
   Remarque de JP : « le titre est colle ». Le rapport hauteur de ligne /
   hauteur de police valait 0,86, donc les lignes se chevauchaient. Apres :
   1,30. */
html body:not(#a):not(#b) .product_title,
html body:not(#a):not(#b) h1.product_title,
html body:not(#a):not(#b) .summary .product_title{
  line-height: 1.3 !important;
  margin-top: 0 !important;
  margin-bottom: 14px !important;
  padding-top: 8px !important;
}
html body:not(#a):not(#b) .summary,
html body:not(#a):not(#b) .entry-summary{
  padding-top: 6px !important;
}


/* ====================================================================
   AUCUN TEXTE NE S'ESTOMPE
   ====================================================================
   Remarque de JP : « enleve le degrade du texte qui s'estompe ». Un masque
   en degrade effacait la derniere ligne des descriptions. */
html body:not(#a):not(#b) .description-inner,
html body:not(#a):not(#b) .woocommerce-product-details__long-description,
html body:not(#a):not(#b) .woocommerce-Tabs-panel--description{
  -webkit-mask-image: none !important;
  mask-image: none !important;
  -webkit-mask: none !important;
  mask: none !important;
  max-height: none !important;
  overflow: visible !important;
}


/* ====================================================================
   LES ETIQUETTES DE REASSURANCE SUR UNE SEULE LIGNE
   ====================================================================
   Remarque de JP : « ca doit etre sur une ligne donc reduire la police sur
   soin vegan et expertise ». */
html body:not(#a):not(#b) .vt-reassurance,
html body:not(#a):not(#b) .product-reassurance{
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 8px !important;
  align-items: center !important;
}
html body:not(#a):not(#b) .vt-reassurance span,
html body:not(#a):not(#b) .product-reassurance span{
  font-size: 11px !important;
  letter-spacing: .04em !important;
  white-space: nowrap !important;
}
@media (max-width: 520px){
  html body:not(#a):not(#b) .vt-reassurance span,
  html body:not(#a):not(#b) .product-reassurance span{ font-size: 9.5px !important; }
}


/* ====================================================================
   LES CARTES PRODUIT S'ALIGNENT
   ====================================================================
   Les cartes avaient des hauteurs differentes selon la longueur du nom :
   les prix ne tombaient pas sur la meme ligne. */
html body:not(#a):not(#b) ul.products li.product{
  display: flex !important;
  flex-direction: column !important;
}
html body:not(#a):not(#b) ul.products li.product .woocommerce-loop-product__title{
  min-height: 2.6em !important;
  line-height: 1.3 !important;
}
html body:not(#a):not(#b) ul.products li.product .price{
  margin-top: auto !important;
}


/* ====================================================================
   PAS DE VOILE SOMBRE SUR LE LOGO NI SUR LE HEADER
   ====================================================================
   Remarque de JP : « il y'a un aplat transparent degrade noir qui n'est pas
   coherent ». Un degrade noir se posait derriere l'entete au chargement. */
html body:not(#a):not(#b) .header-overlay,
html body:not(#a):not(#b) .site-header:before,
html body:not(#a):not(#b) .header-wrapper:before,
html body:not(#a):not(#b) .logo-wrapper:before{
  background: none !important;
  background-image: none !important;
  display: none !important;
}
html body:not(#a):not(#b) .site-logo img,
html body:not(#a):not(#b) .logo img{
  background: transparent !important;
  mix-blend-mode: normal !important;
}


/* ====================================================================
   LA PAGE NE DOIT PAS DEFILER LATERALEMENT
   ==================================================================== */
html:not(#a), body:not(#a){ overflow-x: hidden !important; max-width: 100% !important; }
@media (max-width: 991px){
  html body:not(#a):not(#b) .footer-widgets .row,
  html body:not(#a):not(#b) .footer-widgets .other-columns > .row{
    margin-left: 0 !important; margin-right: 0 !important; max-width: 100% !important;
  }
}


/* ====================================================================
   LES CARTES PRODUIT SUR MOBILE
   ====================================================================
   Mesure a 375 px AVANT : grille de 246 px posee a x=63, colonnes de
   103 px, contenu des cartes 48 px, et les avatars du widget diagnostic
   gonfles a 300 x 404 px au milieu de chaque carte. */
@media (max-width: 767px){

  html body:not(#a):not(#b) .woocommerce.columns-4,
  html body:not(#a):not(#b) div.woocommerce[class*="columns-"]{
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  html body:not(#a):not(#b) ul.products{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 28px 14px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  html body:not(#a):not(#b) ul.products li.product{
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    float: none !important;
    display: flex !important;
    flex-direction: column !important;
    text-align: center !important;
  }
  html body:not(#a):not(#b) ul.products li.product .product-inner{
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    height: 100% !important;
  }

  /* la PHOTO du produit, et elle seule */
  html body:not(#a):not(#b) ul.products li.product figure.product_thumbnail{
    width: 100% !important;
    margin: 0 0 14px !important;
    display: block !important;
  }
  html body:not(#a):not(#b) ul.products li.product figure.product_thumbnail > a{
    display: block !important;
    width: 100% !important;
    height: auto !important;
  }
  html body:not(#a):not(#b) ul.products li.product figure.product_thumbnail > a > img{
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    aspect-ratio: 3 / 4 !important;
    object-fit: cover !important;
    display: block !important;
  }

  /* les avatars du widget diagnostic */
  html body:not(#a):not(#b) .lystes-avatars,
  html body:not(#a):not(#b) .lystes-archive-tryon-inner{
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: 40px !important;
  }
  html body:not(#a):not(#b) .lystes-avatars img{
    width: 25px !important;
    max-width: 25px !important;
    height: 27px !important;
    max-height: 27px !important;
    aspect-ratio: auto !important;
  }

  html body:not(#a):not(#b) ul.products li.product .woocommerce-loop-product__title,
  html body:not(#a):not(#b) ul.products li.product h2,
  html body:not(#a):not(#b) ul.products li.product .price,
  html body:not(#a):not(#b) ul.products li.product .button{
    width: 100% !important;
    text-align: center !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  html body:not(#a):not(#b) ul.products li.product .woocommerce-loop-product__title,
  html body:not(#a):not(#b) ul.products li.product h2{
    margin: 0 0 8px !important;
    min-height: 0 !important;
    line-height: 1.35 !important;
  }
  html body:not(#a):not(#b) ul.products li.product .price{ margin: 0 0 12px !important; }
}


/* ====================================================================
   LE NOM DE LA BOUTIQUE NE COUVRE PLUS LE MENU
   ====================================================================
   Mesure a 375 px AVANT : h1.site-title a 31 px en white-space:nowrap,
   324 px de large, pose par-dessus le bouton burger (x=29 a 86) et le
   compteur du panier. Rien n'est masque ici : masquer l'icone du burger
   le 23/09 avait fait disparaitre le menu entier. */
@media (max-width: 767px){
  html body:not(#a):not(#b):not(#c) h1.site-title,
  html body:not(#a):not(#b):not(#c) #wrapper h1.site-title,
  html body:not(#a):not(#b):not(#c) .header-mobile h1.site-title,
  html body:not(#a):not(#b):not(#c) .logo-holder h1.site-title{
    font-size: 15px !important;
    line-height: 1.2 !important;
    letter-spacing: .06em !important;
    white-space: nowrap !important;
    max-width: none !important;
    margin: 0 auto !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }
  /* les deux commandes du bandeau restent cliquables au-dessus du titre */
  html body:not(#a):not(#b) .hamburger-menu,
  html body:not(#a):not(#b) .header-mobile [class*="cart"]{
    position: relative !important;
    z-index: 10 !important;
  }
}



/* ====================================================================
   LA GRILLE PRODUIT PREND TOUTE LA LARGEUR
   ====================================================================
   Mesure AVANT : .vc_column-inner gardait 22 px de marge interne de chaque
   cote, donc 296 px de grille au lieu de 340 sur un ecran de 375. */
@media (max-width: 767px){
  html body:not(#a):not(#b) .vc_column-inner:has(ul.products),
  html body:not(#a):not(#b) .vc_column-inner:has(.woocommerce){
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}


/* ====================================================================
   LE BOUTON QUI MET LE PRODUIT AU PANIER
   ====================================================================
   Mesure du 24/09/2026 AVANT : fond rgb(24,24,24), texte rgb(34,37,43),
   contraste 1,16:1, hauteur 11 px, marge interne 0. Invisible et ecrase :
   aucun achat possible depuis la fiche produit. APRES : noir plein, texte
   blanc, 15,3:1, 52 px de haut. */
html body:not(#a):not(#b):not(#c) button.single_add_to_cart_button,
html body:not(#a):not(#b):not(#c) .single_add_to_cart_button,
html body:not(#a):not(#b):not(#c) form.cart button[type="submit"]{
  background-color: #000000 !important;
  background-image: none !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 0 !important;
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  min-height: 46px !important;
  height: auto !important;
  padding: 13px 20px !important;
  font-size: 11.5px !important;
  line-height: 1.2 !important;
  font-weight: 600 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  opacity: 1 !important;
}
html body:not(#a):not(#b):not(#c) button.single_add_to_cart_button *,
html body:not(#a):not(#b):not(#c) .single_add_to_cart_button *{
  color: #ffffff !important;
}
html body:not(#a):not(#b):not(#c) button.single_add_to_cart_button:hover,
html body:not(#a):not(#b):not(#c) .single_add_to_cart_button:hover{
  background-color: #22252b !important;
  color: #ffffff !important;
}



/* ====================================================================
   LE BOUTON D'ACHAT PREND TOUTE LA LARGEUR SUR MOBILE
   ====================================================================
   Mesure a 375 px AVANT : bouton de 282 px pose a x=39. Son conteneur
   `.et-wishlist-div-open` faisait lui-meme 282 px : c'est lui qui bridait,
   pas le bouton. */
@media (max-width: 767px){
  html body:not(#a):not(#b):not(#c) .et-wishlist-div-open,
  html body:not(#a):not(#b):not(#c) form.cart,
  html body:not(#a):not(#b):not(#c) .summary form.cart,
  html body:not(#a):not(#b):not(#c) .entry-summary form.cart{
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  html body:not(#a):not(#b):not(#c) .summary,
  html body:not(#a):not(#b):not(#c) .entry-summary,
  html body:not(#a):not(#b):not(#c) .et-pro-summary-content{
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
  }
}



/* ====================================================================
   LE SELECTEUR DE QUANTITE SUIT LE BOUTON D'ACHAT
   ====================================================================
   Mesure a 381 px AVANT : `.quantity` faisait 104 x 104, un carre pose a
   gauche, quand le bouton juste en dessous faisait 346 x 46. Deux elements
   qui se suivent doivent partager leur largeur et leur hauteur. */
@media (max-width: 767px){
  html body:not(#a):not(#b):not(#c) form.cart .quantity,
  html body:not(#a):not(#b):not(#c) .et-wishlist-div-open .quantity{
    width: 100% !important;
    max-width: 100% !important;
    height: 46px !important;
    min-height: 46px !important;
    max-height: 46px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    overflow: hidden !important;
    margin: 0 0 10px !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }
  html body:not(#a):not(#b):not(#c) form.cart .quantity input.qty{
    height: 44px !important;
    min-height: 0 !important;
    flex: 1 1 auto !important;
    width: auto !important;
    text-align: center !important;
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
  }
  html body:not(#a):not(#b):not(#c) form.cart .quantity .minus svg,
  html body:not(#a):not(#b):not(#c) form.cart .quantity .plus svg{
    width: 14px !important;
    height: 14px !important;
  }
  html body:not(#a):not(#b):not(#c) form.cart .quantity [class*="minus"],
  html body:not(#a):not(#b):not(#c) form.cart .quantity [class*="plus"]{
    height: 44px !important;
    min-height: 0 !important;
    width: 52px !important;
    flex: 0 0 52px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
  }
}



/* ====================================================================
   LE BOUTON « FAIRE UN DIAGNOSTIC » DU WIDGET
   ====================================================================
   Mesure du 24/09/2026 AVANT : libelle rgb(34,37,43) sur fond rgb(0,0,0),
   contraste 1,37:1, police 7 px. Illisible. APRES : blanc sur noir, 21:1,
   11 px. Le fond du bouton est noir : son texte doit etre blanc, pas
   l'anthracite herite du theme. */
html body:not(#a):not(#b):not(#c) .lystes-diagnostic-btn,
html body:not(#a):not(#b):not(#c) .lystes-diagnostic-btn *,
html body:not(#a):not(#b):not(#c) .lystes-btn-label,
html body:not(#a):not(#b):not(#c) #lystes-diagnostic-overlay-btn,
html body:not(#a):not(#b):not(#c) #lystes-diagnostic-overlay-btn *{
  color: #ffffff !important;
}
html body:not(#a):not(#b):not(#c) .lystes-btn-label{
  font-size: 11px !important;
  line-height: 1.2 !important;
  letter-spacing: .02em !important;
  white-space: nowrap !important;
}
html body:not(#a):not(#b):not(#c) .lystes-diagnostic-btn{
  min-height: 34px !important;
  padding: 8px 16px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
}



/* ====================================================================
   LA BARRE FLOTTANTE « FAIRE MON DIAGNOSTIC PEAU »
   ====================================================================
   Mesure du 24/09/2026 AVANT : texte rgb(255,255,255) sur fond
   rgb(255,255,255), contraste 1:1. Invisible. Le fond de cette barre est
   blanc, contrairement au bouton noir du meme widget : son texte doit
   donc etre fonce, pas blanc. */
html body:not(#a):not(#b):not(#c) .lystes-chat-toggle .lystes-btn-text,
html body:not(#a):not(#b):not(#c) .lystes-chat-toggle .lystes-btn-text *{
  color: #22252b !important;
  font-size: 13px !important;
  line-height: 1.25 !important;
}
/* le bouton rond a droite reste noir : son icone garde le blanc */
html body:not(#a):not(#b):not(#c) .lystes-chat-toggle [class*="send"],
html body:not(#a):not(#b):not(#c) .lystes-chat-toggle [class*="arrow"],
html body:not(#a):not(#b):not(#c) .lystes-chat-toggle [class*="submit"]{
  color: #ffffff !important;
}



/* ====================================================================
   LES PHOTOS DU PRODUIT DEFILENT AU LIEU DE S'EMPILER
   ====================================================================
   Mesure a 381 px AVANT : galerie de 1619 px de haut, trois photos de
   378 x 502 empilees. APRES : une seule photo a l'ecran, les autres a
   cote, avec accrochage au glissement. */
@media (max-width: 767px){

  html body:not(#a):not(#b):not(#c) .product-gallery .product-images,
  html body:not(#a):not(#b):not(#c) .product-gallery-inner .product-images,
  html body:not(#a):not(#b):not(#c) .woocommerce-product-gallery__wrapper{
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-snap-type: x mandatory !important;
    gap: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  /* la barre de defilement ajouterait une bande grise sous les photos */
  html body:not(#a):not(#b):not(#c) .product-gallery .product-images::-webkit-scrollbar,
  html body:not(#a):not(#b):not(#c) .woocommerce-product-gallery__wrapper::-webkit-scrollbar{
    height: 0 !important;
    display: none !important;
  }
  html body:not(#a):not(#b):not(#c) .product-gallery .product-images{
    scrollbar-width: none !important;
  }

  html body:not(#a):not(#b):not(#c) .product-gallery .product-images > *,
  html body:not(#a):not(#b):not(#c) .woocommerce-product-gallery__wrapper > *{
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    scroll-snap-align: center !important;
    margin: 0 !important;
  }
  html body:not(#a):not(#b):not(#c) .product-gallery .product-images > * img{
    width: 100% !important;
    height: auto !important;
    display: block !important;
    margin: 0 !important;
  }

  /* les vignettes restent sous la photo, sur une ligne */
  html body:not(#a):not(#b):not(#c) .product-gallery .thumbnails,
  html body:not(#a):not(#b):not(#c) .product-gallery-thumbs{
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    gap: 8px !important;
    margin: 12px 0 0 !important;
    padding: 0 !important;
    position: static !important;
  }
  html body:not(#a):not(#b):not(#c) .product-gallery .thumbnails img{
    width: 58px !important;
    height: 58px !important;
    object-fit: cover !important;
    flex: 0 0 58px !important;
    cursor: pointer !important;
  }
}



/* ====================================================================
   LES CERTIFICATIONS DEFILENT AU LIEU DE S'EMPILER
   ====================================================================
   Mesure a 375 px AVANT : huit pictogrammes de 120 x 120 empiles, 960 px
   de haut, soit huit ecrans a parcourir. APRES : une ligne qui defile au
   doigt, 78 px de haut. */
html body:not(#a):not(#b):not(#c) .vt-certifs-pictos{
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 18px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  scroll-snap-type: x proximity !important;
  padding: 4px 0 10px !important;
  margin: 0 !important;
  height: auto !important;
  width: 100% !important;
  max-width: 100% !important;
}
/* la barre de defilement decalerait les pictogrammes */
html body:not(#a):not(#b):not(#c) .vt-certifs-pictos::-webkit-scrollbar{
  height: 0 !important;
  display: none !important;
}
html body:not(#a):not(#b):not(#c) .vt-certifs-pictos{
  scrollbar-width: none !important;
}
html body:not(#a):not(#b):not(#c) .vt-certifs-pictos > *{
  flex: 0 0 auto !important;
  scroll-snap-align: start !important;
  margin: 0 !important;
}
html body:not(#a):not(#b):not(#c) .vt-certifs-pictos img{
  width: 72px !important;
  height: 72px !important;
  min-width: 72px !important;
  max-width: 72px !important;
  object-fit: contain !important;
  display: block !important;
}
@media (min-width: 768px){
  html body:not(#a):not(#b):not(#c) .vt-certifs-pictos{
    flex-wrap: wrap !important;
    justify-content: center !important;
    overflow-x: visible !important;
    gap: 26px !important;
  }
  html body:not(#a):not(#b):not(#c) .vt-certifs-pictos img{
    width: 84px !important;
    height: 84px !important;
    min-width: 84px !important;
    max-width: 84px !important;
  }
}



/* ====================================================================
   LE MENU ET LE PANIER PASSENT DEVANT LA BARRE DE DIAGNOSTIC
   ====================================================================
   Meme defaut que sur valtheaparis.fr, meme theme : le panneau lateral
   etait a z-index 604, sous la barre flottante du widget et sous l'entete.
   Le panier lateral avait le meme sort. Les deux passent devant ; la barre
   du widget reste au-dessus du contenu, mais sous eux. */
@media (max-width: 991px){

  html body:not(#a):not(#b) .side-mobile-menu,
  html body:not(#a):not(#b) .side-panel.side-menu,
  html body:not(#a):not(#b) .side-panel.side-cart,
  html body:not(#a):not(#b) .side-panel.mini-cart,
  html body:not(#a):not(#b) [class*="cart-panel"],
  html body:not(#a):not(#b) .mini-cart-panel{
    z-index: 100000 !important;
  }
  html body:not(#a):not(#b) .side-panel-overlay,
  html body:not(#a):not(#b) .panel-overlay{
    z-index: 99998 !important;
  }
  /* la barre du widget reste visible, mais derriere les panneaux */
  html body:not(#a):not(#b) .lystes-chat-toggle,
  html body:not(#a):not(#b) [class*="lystes"][class*="sticky"]{
    z-index: 9000 !important;
  }

  /* les entrees du menu tiennent dans l'ecran, comme sur Valthea */
  html body:not(#a):not(#b) #mobile-menu-container ul.sliding-menu-panel > li.menu-item > a,
  html body:not(#a):not(#b) .side-mobile-menu .sliding-menu-panel > li > a{
    font-size: 14px !important;
    line-height: 1.35 !important;
    letter-spacing: .1em !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }
  html body:not(#a):not(#b) #mobile-menu-container ul.sliding-menu-panel{
    padding-bottom: 80px !important;
  }
}


/* ====================================================================
   LES COLONNES DU PIED DE PAGE S'ALIGNENT
   ====================================================================
   Mesure a 375 px AVANT : la premiere colonne commence a x=40, les trois
   suivantes a x=64. 24 px de decrochement, visibles a l'oeil nu. */
@media (max-width: 991px){
  html body:not(#a):not(#b):not(#c) .footer-widgets .other-columns > .row,
  html body:not(#a):not(#b):not(#c) .footer-widgets .other-columns{
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  html body:not(#a):not(#b):not(#c) .footer-widgets .container > .row > *,
  html body:not(#a):not(#b):not(#c) .footer-widgets .other-columns > .row > *{
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
  }
  /* une seule marge laterale, portee par le conteneur */
  html body:not(#a):not(#b):not(#c) .footer-widgets .container{
    padding-left: 24px !important;
    padding-right: 24px !important;
    box-sizing: border-box !important;
  }
}



/* ====================================================================
   LES TITRES DE SECTION SUIVENT LA CHARTE
   ====================================================================
   Mesure AVANT : « HAIRCARE » en EditorsNote-Extralight 47 px, quand le
   reste de la page est en Welcomeweb-Bold. Et sa marge haute etait nulle :
   le titre touchait le bloc precedent. */
html body:not(#a):not(#b):not(#c) .wpb_wrapper > h1,
html body:not(#a):not(#b):not(#c) .vc_column-inner > .wpb_wrapper > h1{
  font-family: futura, 'Welcomeweb-Bold', sans-serif !important;
  font-size: 26px !important;
  line-height: 1.25 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  text-align: center !important;
  margin: 40px 0 28px !important;
}
@media (max-width: 767px){
  html body:not(#a):not(#b):not(#c) .wpb_wrapper > h1,
  html body:not(#a):not(#b):not(#c) .vc_column-inner > .wpb_wrapper > h1{
    font-size: 21px !important;
    margin: 32px 0 22px !important;
  }
}


/* ====================================================================
   LES TITRES DE SECTION NE TOUCHENT PLUS LES PRODUITS
   ====================================================================
   Le titre de la page d'accueil venait buter sur la premiere rangee de
   cartes. Un titre a besoin d'air en dessous, sinon on ne sait plus ce
   qu'il annonce. */
html body:not(#a):not(#b):not(#c) .wpb_wrapper > h1,
html body:not(#a):not(#b):not(#c) .wpb_wrapper > h2,
html body:not(#a):not(#b):not(#c) .wpb_text_column h1,
html body:not(#a):not(#b):not(#c) .wpb_text_column h2{
  margin-bottom: 32px !important;
}
@media (max-width: 767px){
  html body:not(#a):not(#b):not(#c) .wpb_wrapper > h1,
  html body:not(#a):not(#b):not(#c) .wpb_wrapper > h2,
  html body:not(#a):not(#b):not(#c) .wpb_text_column h1,
  html body:not(#a):not(#b):not(#c) .wpb_text_column h2{
    margin-bottom: 26px !important;
  }
  /* la grille de produits garde ses distances avec ce qui la precede */
  html body:not(#a):not(#b):not(#c) .woocommerce.columns-4,
  html body:not(#a):not(#b):not(#c) div.woocommerce[class*="columns-"]{
    padding-top: 8px !important;
  }
}


/* ====================================================================
   LE MENU S'OUVRE SOUS L'EN-TETE, PLUS DERRIERE
   ====================================================================
   Le panneau porte `opacity` et `transform` : ces deux proprietes creent
   un contexte d'empilement, et son z-index de 100000 ne se compare plus a
   celui de l'en-tete (999). Surencherir ne sert a rien. On reserve plutot
   la hauteur de l'en-tete en haut du panneau : plus rien ne se recouvre,
   quel que soit l'ordre des plans. */
@media (max-width: 991px){
  html body:not(#a):not(#b):not(#c) .side-mobile-menu .side-panel-content,
  html body:not(#a):not(#b):not(#c) .side-panel.side-menu .side-panel-content{
    padding-top: 96px !important;
    box-sizing: border-box !important;
  }
  /* et le panier lateral, qui souffre du meme mal */
  html body:not(#a):not(#b):not(#c) .side-panel.mini-cart .side-panel-content{
    padding-top: 96px !important;
    box-sizing: border-box !important;
  }
}


/* ====================================================================
   LA CHARTE DES TITRES : UN SUR-TITRE, PUIS LE TITRE
   ====================================================================
   Structure de la maison, relevee sur la page d'accueil :

       JHOUNY'S SECRET     sur-titre, petit, tres espace
       HAIRCARE            titre, gros, majuscules, Futura

   Elle s'applique partout, y compris a la page des routines. */
html body:not(#a):not(#b):not(#c) .jh-surtitre{
  display: block !important;
  font-family: futura, 'Welcomeweb-Bold', sans-serif !important;
  font-size: 11px !important;
  letter-spacing: .28em !important;
  text-transform: uppercase !important;
  text-align: center !important;
  margin: 0 0 10px !important;
  opacity: .8 !important;
}
html body:not(#a):not(#b):not(#c) h1.jh-titre,
html body:not(#a):not(#b):not(#c) h2.jh-titre{
  font-family: futura, 'Welcomeweb-Bold', sans-serif !important;
  font-size: 26px !important;
  line-height: 1.22 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  text-align: center !important;
  margin: 0 0 32px !important;
}
@media (max-width: 767px){
  html body:not(#a):not(#b):not(#c) h1.jh-titre,
  html body:not(#a):not(#b):not(#c) h2.jh-titre{
    font-size: 21px !important;
    margin: 0 0 26px !important;
  }
}
html body:not(#a):not(#b):not(#c) .jh-entete-section{
  margin: 40px 0 0 !important;
  padding: 0 16px !important;
}


/* ====================================================================
   L'ECART ENTRE LE SUR-TITRE ET LE TITRE
   ====================================================================
   Mesure AVANT : 19 px, soit 10 px de marge basse du sur-titre plus 20 px
   de marge interne haute posee par le theme sur le titre. Deux valeurs qui
   s'ajoutent, dont une invisible tant qu'on ne regarde que les marges.
   APRES : un seul des deux porte l'ecart, 8 px. */
html body:not(#a):not(#b):not(#c) h1.jh-titre,
html body:not(#a):not(#b):not(#c) h2.jh-titre,
html body:not(#a):not(#b):not(#c) .jh-entete-section h1,
html body:not(#a):not(#b):not(#c) .jh-entete-section h2{
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
}
html body:not(#a):not(#b):not(#c) .jh-surtitre{
  margin-bottom: 8px !important;
}
/* le meme couple sur le reste du site */
html body:not(#a):not(#b):not(#c) .vt-surtitre{
  margin-bottom: 8px !important;
}
html body:not(#a):not(#b):not(#c) .vt-titre-uni{
  padding-top: 0 !important;
  margin-top: 0 !important;
}


/* ====================================================================
   LE TITRE DE SECTION SUR MOBILE, REGLAGE DE JP
   ==================================================================== */
@media (max-width: 767px){
  html body:not(#a):not(#b):not(#c) h1.jh-titre,
  html body:not(#a):not(#b):not(#c) h2.jh-titre{
    margin-bottom: 32px !important;
    padding: 0 !important;
  }
}


/* ====================================================================
   LE SUR-TITRE COLLE AU TITRE, REGLAGE DE JP
   ====================================================================
   Marge basse a zero : seul l'interligne du titre separe les deux lignes.
   Ce bloc vient en dernier, il gagne donc sur les valeurs de 10 et 8 px
   posees plus haut. */
html body:not(#a):not(#b):not(#c) .jh-surtitre{
  color: #6b6f76 !important;
  margin-bottom: 0 !important;
}


/* ====================================================================
   LES FINITIONS DU MENU MOBILE
   ====================================================================
   Quatre points releves par JP le 25/09, tous mesures avant correction. */
@media (max-width: 991px){

  /* 1. la police du menu : Futura, comme le reste du site.
        Mesure avant : averta-light-webfont. */
  html body:not(#a):not(#b):not(#c) #mobile-menu-container ul.sliding-menu-panel > li.menu-item > a,
  html body:not(#a):not(#b):not(#c) .side-mobile-menu .sliding-menu-panel > li > a,
  html body:not(#a):not(#b):not(#c) .side-mobile-menu .bottom-extras a,
  html body:not(#a):not(#b):not(#c) .side-mobile-menu .et-menu-account-btn{
    font-family: futura, 'Welcomeweb-Bold', sans-serif !important;
  }

  /* 2. un seul beige, du haut en bas du panneau.
        Mesure avant : rgb(248,248,248) contre rgb(252,248,241). */
  html body:not(#a):not(#b):not(#c) .side-mobile-menu .mobile-bar,
  html body:not(#a):not(#b):not(#c) .side-mobile-menu .mobile-bar.light,
  html body:not(#a):not(#b):not(#c) .side-panel.side-menu .mobile-bar{
  /* couleur de Jhouny retiree */
    border-bottom: none !important;
    box-shadow: none !important;
  }

  /* 3. les icones du panneau se voient : trait anthracite sur beige,
        contraste 12,4:1. */
  html body:not(#a):not(#b):not(#c) .side-mobile-menu .action-icons svg,
  html body:not(#a):not(#b):not(#c) .side-mobile-menu .mobile-bar svg,
  html body:not(#a):not(#b):not(#c) .side-mobile-menu .bottom-extras svg{
    stroke: #22252b !important;
    color: #22252b !important;
    width: 21px !important;
    height: 21px !important;
  }
  html body:not(#a):not(#b):not(#c) .side-mobile-menu .action-icons a,
  html body:not(#a):not(#b):not(#c) .side-mobile-menu .mobile-bar a{
    color: #22252b !important;
    opacity: 1 !important;
  }

  /* 4. l'icone du compte redevient un trait, pas un aplat.
        Les icones Feather sont dessinees en trait ; le theme leur posait
        un remplissage. */
  html body:not(#a):not(#b):not(#c) svg.feather,
  html body:not(#a):not(#b):not(#c) svg.feather-user,
  html body:not(#a):not(#b):not(#c) .et-menu-account-btn svg,
  html body:not(#a):not(#b):not(#c) .et-menu-account-btn svg *{
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.6 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
  }
  html body:not(#a):not(#b):not(#c) .et-menu-account-btn{
    color: #22252b !important;
  }
}


/* ====================================================================
   LA PAGE CONCEPT SUR MOBILE
   ====================================================================
   Mesure a 337 px AVANT : titre en 22 px avec un interligne de 53 px,
   soit 2,4 fois la taille du texte, dans une colonne de 224 px sur 337.
   Quatre lignes, 212 px de haut. APRES : toute la largeur, interligne
   1,25, trois lignes. */
@media (max-width: 767px){

  /* la colonne reprend la largeur de l'ecran */
  html body:not(#a):not(#b):not(#c) .concept-right,
  html body:not(#a):not(#b):not(#c) .concept-left{
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }

  /* le titre : interligne resserre, texte equilibre entre les lignes */
  html body:not(#a):not(#b):not(#c) h1.concept-title,
  html body:not(#a):not(#b):not(#c) .concept-title{
    font-size: 21px !important;
    line-height: 1.25 !important;
    letter-spacing: .01em !important;
    margin: 10px 0 18px !important;
    max-width: 100% !important;
    text-wrap: balance;
  }

  /* le mot manuscrit « Concept » */
  html body.page-concept:not(#a):not(#b):not(#c) .concept-script,
  html body:not(#a):not(#b):not(#c) .concept-left .titlescript,
  html body:not(#a):not(#b):not(#c) .concept-left .titlescript p{
    font-size: 42px !important;
    line-height: 1 !important;
    margin: 0 0 2px !important;
    padding: 0 !important;
  }

  /* le corps de texte respire sans se perdre */
  html body:not(#a):not(#b):not(#c) .concept-right p{
    font-size: 13.5px !important;
    line-height: 1.6 !important;
    text-align: justify !important;
    margin: 0 0 12px !important;
  }
}


/* ====================================================================
   LE TITRE COLLE A SON SUR-TITRE
   ====================================================================
   Mesure AVANT : 32 px d'ecart, qui venaient d'un `margin-top` sur le
   titre et non d'une marge du sur-titre. Un titre qui suit son sur-titre
   forme un seul bloc avec lui : pas de marge entre les deux. */
html body:not(#a):not(#b):not(#c) .vt-surtitre + h1,
html body:not(#a):not(#b):not(#c) .vt-surtitre + h2,
html body:not(#a):not(#b):not(#c) .vt-surtitre + .vt-titre-uni,
html body:not(#a):not(#b):not(#c) .jh-surtitre + h1,
html body:not(#a):not(#b):not(#c) .jh-surtitre + h2,
html body:not(#a):not(#b):not(#c) .vt-surtitre ~ h1.vt-titre-uni{
  margin-top: 0 !important;
  padding-top: 0 !important;
}
html body:not(#a):not(#b):not(#c) .vt-surtitre,
html body:not(#a):not(#b):not(#c) .jh-surtitre{
  margin-bottom: 2px !important;
  padding-bottom: 0 !important;
}


/* ====================================================================
   LE SUR-TITRE ET SON TITRE FORMENT UN BLOC
   ====================================================================
   Mesure : 32 px d'ecart, venus d'un `margin-top` sur le titre. Les deux
   vivent dans des `.wpb_text_column` differents, donc le selecteur `+`
   entre eux ne trouvait rien : on vise le bloc QUI SUIT un bloc
   `titlescript`.

   Le sur-titre garde sa taille de sur-titre : la regle de 42 px ecrite
   pour la page Concept ne doit pas l'atteindre ici. */
html body:not(#a):not(#b):not(#c) .wpb_text_column.titlescript + .wpb_text_column h1,
html body:not(#a):not(#b):not(#c) .wpb_text_column.titlescript + .wpb_text_column h2,
html body:not(#a):not(#b):not(#c) .titlescript + .wpb_text_column > .wpb_wrapper > h1,
html body:not(#a):not(#b):not(#c) .titlescript + .wpb_text_column > .wpb_wrapper > h2{
  margin-top: 0 !important;
  padding-top: 0 !important;
}
html body:not(#a):not(#b):not(#c) p.vt-surtitre{
  font-size: 11px !important;
  line-height: 1.5 !important;
  letter-spacing: .28em !important;
  margin: 0 0 2px !important;
}


/* ====================================================================
   LE SOUS-TITRE DE LA SECTION CONCEPT, REGLAGE DE JP
   ====================================================================
   Valeurs donnees par JP le 25/09 apres essai dans son navigateur.
   Son selecteur portait `#section-concept-ed64`, un identifiant genere
   par le constructeur de page : il change des que la section est
   recreee. On garde `.concept-subtitle`, qui est stable. */
@media (max-width: 767px){
  html body.home:not(#a):not(#b):not(#c) .concept-subtitle,
  html body:not(#a):not(#b):not(#c) [id^="section-concept"] .concept-subtitle{
    color: #000000 !important;
    font-size: 29px !important;
  }
}


/* ====================================================================
   LA PASTILLE DU PANIER SUR L'ORBE
   ====================================================================
   Deux choses, a ne pas melanger.

   L'ETAT appartient au script de l'orbe, qui pose `.on` sur la pastille
   et `.cache` sur le badge AI des que le panier compte au moins un
   article. Aucune regle ici ne doit forcer un `display` sans l'etat :
   la version precedente le faisait, et la pastille restait affichee a
   zero sur un panier vide, a cote du AI.

   L'APPARENCE nous revient : a 10 px, le blanc sur rouge (contraste
   4,35:1) ne tient que si le trait est epais. */

/* panier vide : rien. Le AI reste seul. */
html body:not(#a):not(#b):not(#c) .lystes-brandcall-panier:not(.on){
  display: none !important;
}
/* panier rempli : la pastille, et elle seule. */
html body:not(#a):not(#b):not(#c) .lystes-brandcall-panier.on{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
html body:not(#a):not(#b):not(#c) .lystes-brandcall-mini.cache{
  display: none !important;
}
/* le chiffre : blanc, epais, lisible a 10 px */
html body:not(#a):not(#b):not(#c) .lystes-brandcall-panier,
html body:not(#a):not(#b):not(#c) .lystes-brandcall-panier *{
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-weight: 700 !important;
  font-size: 10px !important;
  line-height: 1 !important;
  text-shadow: none !important;
}


/* ====================================================================
   LE PANNEAU DU PANIER
   ====================================================================
   Un compteur a zero ne s'affiche pas, et le panneau tient sur un seul
   blanc du haut en bas. */

/* 1. plus aucune pastille a zero, ni dans l'entete ni dans le panneau.
      Le theme pose `et-count-zero` tout seul : on s'en sert. */
html body:not(#a):not(#b):not(#c) .item-counter.et-count-zero{
  display: none !important;
}

/* 2. dans le panneau, le compteur est blanc sur blanc : un rond vide colle
      au mot « Panier ». La liste des articles est juste en dessous, le
      chiffre n'apprend rien. */
html body:not(#a):not(#b):not(#c) #side-cart .side-panel-title .item-counter{
  display: none !important;
}
html body:not(#a):not(#b):not(#c) #side-cart .side-panel-title{
  display: flex !important;
  align-items: center !important;
  gap: 0 !important;
}

/* 3. un seul blanc : entete, corps, pied. */
html body:not(#a):not(#b):not(#c) #side-cart,
html body:not(#a):not(#b):not(#c) #side-cart > header,
html body:not(#a):not(#b):not(#c) #side-cart .panel-header-inner,
html body:not(#a):not(#b):not(#c) #side-cart .side-panel-content,
html body:not(#a):not(#b):not(#c) #side-cart .woocommerce-mini-cart__total,
html body:not(#a):not(#b):not(#c) #side-cart .woocommerce-mini-cart__buttons{
  background-color: #ffffff !important;
  background-image: none !important;
}
/* la limite entre l'entete et le corps ne doit pas se voir */
html body:not(#a):not(#b):not(#c) #side-cart > header{
  border-bottom: none !important;
  box-shadow: none !important;
}


/* ====================================================================
   LA PAGE PANIER
   ====================================================================
   Neuf defauts du theme, tous mesures a 375 px. Voir l'en-tete du
   script pour les chiffres d'avant. */

/* 1. LE TITRE. Ecrit en beige sur un bandeau beige : present, invisible.
      Le bandeau faisait 185 px de haut pour ne rien montrer. */
html body:not(#a):not(#b):not(#c) .page-title,
html body:not(#a):not(#b):not(#c) .regular-title .page-title{
  color: #22252b !important;
}
html body:not(#a):not(#b):not(#c) .regular-title{
  padding-top: 34px !important;
  padding-bottom: 28px !important;
}

/* 2. LA TABLE NE DEBORDE PLUS. `table-layout: fixed` est le seul moyen
      d'obliger une table a tenir dans la largeur qu'on lui donne. */
html body:not(#a):not(#b):not(#c) .woocommerce-cart-form,
html body:not(#a):not(#b):not(#c) .woocommerce-cart-form table,
html body:not(#a):not(#b):not(#c) .shop_table{
  width: 100% !important;
  max-width: 100% !important;
  table-layout: fixed !important;
  border-collapse: collapse !important;
}
html body:not(#a):not(#b):not(#c) .woocommerce-cart-form td{
  max-width: 100% !important;
  overflow-wrap: break-word !important;
}

@media (max-width: 767px){

  /* 3. LA LIGNE D'ARTICLE. La photo, le nom et le prix, puis la quantite :
        chacun a sa place, plus de prix colle au milieu du nom. */
  html body:not(#a):not(#b):not(#c) .woocommerce-cart-form td.product-thumbnail{
    width: 74px !important;
    padding: 14px 10px 14px 0 !important;
    vertical-align: top !important;
  }
  html body:not(#a):not(#b):not(#c) .woocommerce-cart-form td.et-product-details{
    padding: 14px 8px 14px 0 !important;
    vertical-align: top !important;
  }
  html body:not(#a):not(#b):not(#c) .woocommerce-cart-form td.et-product-details .product-name,
  html body:not(#a):not(#b):not(#c) .woocommerce-cart-form td.et-product-details a{
    display: block !important;
    font-size: 12.5px !important;
    line-height: 1.35 !important;
  }
  html body:not(#a):not(#b):not(#c) .woocommerce-cart-form td.et-product-details .product-price,
  html body:not(#a):not(#b):not(#c) .woocommerce-cart-form td.et-product-details .amount{
    display: block !important;
    margin-top: 6px !important;
    font-size: 13px !important;
    white-space: nowrap !important;
  }

  /* 4. LE CODE PROMO. Champ et bouton a la meme hauteur, cote a cote,
        dans la largeur. Avant : 178 + 155 a x=47, soit 51 px hors ecran,
        et 8 px d'ecart de hauteur entre les deux. */
  html body:not(#a):not(#b):not(#c) .coupon{
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 18px 0 0 !important;
    padding: 0 !important;
  }
  html body:not(#a):not(#b):not(#c) .coupon input[name="coupon_code"]{
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: auto !important;
    height: 44px !important;
    margin: 0 !important;
    padding: 0 12px !important;
    font-size: 11px !important;
  }
  html body:not(#a):not(#b):not(#c) .coupon button{
    flex: 0 0 auto !important;
    height: 44px !important;
    margin: 0 !important;
    padding: 0 14px !important;
    font-size: 9px !important;
    white-space: nowrap !important;
  }
}

/* 5. « SOUS-TOTAL » : beige sur blanc, contraste 1,05:1. */
html body:not(#a):not(#b):not(#c) .cart-subtotal th,
html body:not(#a):not(#b):not(#c) .cart_totals th{
  color: #22252b !important;
}

/* 6. LA LIGNE DU CODE PROMO. Le theme peint la ligne ENTIERE en vert :
      deux aplats qui se chevauchent, et le libelle par-dessus. On rend
      la ligne au blanc et on garde le vert pour le texte. */
html body:not(#a):not(#b):not(#c) tr.cart-discount,
html body:not(#a):not(#b):not(#c) tr.cart-discount th,
html body:not(#a):not(#b):not(#c) tr.cart-discount td{
  background-color: transparent !important;
  background-image: none !important;
  /* couleur de Jhouny retiree */
}
html body:not(#a):not(#b):not(#c) tr.cart-discount th{
  font-size: 11px !important;
  letter-spacing: .04em !important;
}
html body:not(#a):not(#b):not(#c) tr.cart-discount .woocommerce-remove-coupon{
  color: #8a8f98 !important;
  font-size: 10px !important;
  text-decoration: underline !important;
  white-space: nowrap !important;
}

/* 7. LE TOTAL sur une seule ligne. Avant : « 74 € » / « (dont 12 € » /
      « VAT) », trois lignes pour un montant. */
html body:not(#a):not(#b):not(#c) .order-total td,
html body:not(#a):not(#b):not(#c) .cart-subtotal td,
html body:not(#a):not(#b):not(#c) .cart_totals .amount{
  white-space: nowrap !important;
}
html body:not(#a):not(#b):not(#c) .order-total .includes_tax,
html body:not(#a):not(#b):not(#c) .order-total small{
  display: block !important;
  margin-top: 4px !important;
  font-size: 10.5px !important;
  opacity: .7 !important;
  white-space: nowrap !important;
}

/* 8. LE BOUTON. Le texte se calait en haut parce que le line-height
      (13 px) valait la taille de police. On centre pour de vrai. */
html body:not(#a):not(#b):not(#c) .checkout-button,
html body:not(#a):not(#b):not(#c) .wc-proceed-to-checkout a.button{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 52px !important;
  padding: 0 18px !important;
  line-height: 1 !important;
}

/* 9. LES GOUTTIERES. Le contenu ne touche jamais le bord de l'ecran. */
@media (max-width: 767px){
  html body:not(#a):not(#b):not(#c) .woocommerce-cart .cart_totals,
  html body:not(#a):not(#b):not(#c) .woocommerce-cart .woocommerce-cart-form{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  html body:not(#a):not(#b):not(#c) .woocommerce-cart .cart_totals > *{
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}


/* ====================================================================
   LE BANDEAU DE TITRE, LE TRI, L'ICONE DU PANIER
   ==================================================================== */

/* 1. LE BANDEAU DE TITRE. Trois paddings empiles pour un seul titre :
      on les remet sur un seul niveau. 195 px -> environ 96. */
html body:not(#a):not(#b):not(#c) .regular-title{
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
html body:not(#a):not(#b):not(#c) .regular-title .hero-header-container{
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
html body:not(#a):not(#b):not(#c) .regular-title .woocommerce-products-header,
html body:not(#a):not(#b):not(#c) .regular-title header{
  padding-top: 34px !important;
  padding-bottom: 30px !important;
}
@media (max-width: 767px){
  html body:not(#a):not(#b):not(#c) .regular-title .woocommerce-products-header,
  html body:not(#a):not(#b):not(#c) .regular-title header{
    padding-top: 26px !important;
    padding-bottom: 24px !important;
  }
}

/* 2. LE TRI. Un menu deroulant seul entre le titre et les produits, qui
      n'apporte rien sur une boutique de vingt references. */
html body:not(#a):not(#b):not(#c) form.woocommerce-ordering,
html body:not(#a):not(#b):not(#c) .woocommerce-result-count{
  display: none !important;
}

/* 3. L'ICONE DU PANIER. Le SVG du theme est en double dans la page, avec
      les memes identifiants internes : son masque ne resout plus et seul
      le rectangle de contour reste. On repeint l'icone par-dessus, avec
      un masque CSS, ce qui ignore le contenu casse. `currentColor` la
      laisse suivre la couleur du theme. */
html body:not(#a):not(#b):not(#c) svg.icon-cart{
  background-color: currentColor !important;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 7.5h13l1 12.5h-15z'/%3E%3Cpath d='M9 7.5V5.6a3 3 0 0 1 6 0v1.9'/%3E%3C/svg%3E") !important;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 7.5h13l1 12.5h-15z'/%3E%3Cpath d='M9 7.5V5.6a3 3 0 0 1 6 0v1.9'/%3E%3C/svg%3E") !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
  -webkit-mask-position: center !important;
  mask-position: center !important;
  -webkit-mask-size: contain !important;
  mask-size: contain !important;
}
html body:not(#a):not(#b):not(#c) svg.icon-cart > *{
  visibility: hidden !important;
}

/* 4. LE LIEN QUI RETIRE LE COUPON. 18 px de large, fond vert residuel :
      le mot ne tenait pas dans sa boite. */
html body:not(#a):not(#b):not(#c) .woocommerce-remove-coupon{
  display: inline !important;
  width: auto !important;
  min-width: 0 !important;
  margin-left: 6px !important;
  padding: 0 !important;
  background: none !important;
  background-color: transparent !important;
  color: #8a8f98 !important;
  white-space: nowrap !important;
}

/* 5. LA PAGE CONCEPT : des gouttieres de 16 px, pas davantage. */
@media (max-width: 767px){
  html body:not(#a):not(#b):not(#c) .concept-right,
  html body:not(#a):not(#b):not(#c) .concept-left{
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  html body:not(#a):not(#b):not(#c) .concept-right > *,
  html body:not(#a):not(#b):not(#c) .concept-left > *{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}


/* ====================================================================
   LA CHARTE DES PAGES INTERIEURES
   ====================================================================
   Une seule mise en page pour Concept, Engagements, FAQ et Contact :
   sur-titre en petites capitales, titre de page a la meme taille
   partout, gouttieres de 16 px, colonnes pleine largeur. */
@media (max-width: 767px){

  /* 1. LES COLONNES REPRENNENT LA LARGEUR DE L'ECRAN.
        Mesure avant : 203 px sur 375, centrees. C'est la cause de tous
        les textes etrangles et des retraits absurdes. */
  html body:not(#a):not(#b):not(#c) .vc_column_container,
  html body:not(#a):not(#b):not(#c) .vc_col-sm-3,
  html body:not(#a):not(#b):not(#c) .vc_col-sm-4,
  html body:not(#a):not(#b):not(#c) .vc_col-sm-6,
  html body:not(#a):not(#b):not(#c) .vc_col-sm-8,
  html body:not(#a):not(#b):not(#c) .vc_col-sm-9,
  html body:not(#a):not(#b):not(#c) .vc_col-sm-12{
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  html body:not(#a):not(#b):not(#c) .vc_column-inner,
  html body:not(#a):not(#b):not(#c) .wpb_content_element{
    width: auto !important;
    max-width: 100% !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    box-sizing: border-box !important;
  }
  /* pas de gouttiere qui se cumule d'un niveau a l'autre */
  html body:not(#a):not(#b):not(#c) .wpb_content_element .wpb_content_element,
  html body:not(#a):not(#b):not(#c) .vc_column-inner .vc_column-inner{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* 2. LE TITRE DE PAGE : la meme taille partout. Avant, 21 px sur la
        FAQ et 48 sur les Engagements. */
  html body:not(#a):not(#b):not(#c) .wpb_wrapper > h1,
  html body:not(#a):not(#b):not(#c) .wpb_wrapper > h2,
  html body:not(#a):not(#b):not(#c) h2.engagements-title-nature-01,
  html body:not(#a):not(#b):not(#c) .jh-titre{
    font-size: 26px !important;
    line-height: 1.15 !important;
    letter-spacing: .06em !important;
    text-align: center !important;
    margin: 18px 0 20px !important;
  }

  /* 3. L'ESPACE AVANT LE TITRE. 314 px de vide avant « Questions
        frequentes », dont 201 px pour la seule ligne du sur-titre. */
  html body:not(#a):not(#b):not(#c) .wpb_text_column:first-child,
  html body:not(#a):not(#b):not(#c) .vc_row > .vc_column_container:first-child .wpb_wrapper > .wpb_text_column:first-child{
    margin-bottom: 0 !important;
  }
  html body:not(#a):not(#b):not(#c) .vc_row{
    padding-top: 0 !important;
  }

  /* 4. L'ACCORDEON DE LA FAQ. Le titre partait a 143 px du bord. */
  html body:not(#a):not(#b):not(#c) .vc_toggle{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  html body:not(#a):not(#b):not(#c) .vc_toggle_title{
    padding-left: 28px !important;
    padding-right: 0 !important;
    font-size: 12.5px !important;
    line-height: 1.4 !important;
    letter-spacing: .03em !important;
    text-align: left !important;
  }
  html body:not(#a):not(#b):not(#c) .vc_toggle_content{
    padding-left: 28px !important;
    padding-right: 0 !important;
    font-size: 12.5px !important;
    line-height: 1.6 !important;
  }

  /* 5. LE FORMULAIRE DE CONTACT. Les champs etaient blancs sur le beige
        de la page : on rend le fond au beige et on retire le cadre qui
        s'ajoutait a la bordure du champ. */
  html body:not(#a):not(#b):not(#c) .gform_wrapper input[type="text"],
  html body:not(#a):not(#b):not(#c) .gform_wrapper input[type="email"],
  html body:not(#a):not(#b):not(#c) .gform_wrapper input[type="tel"],
  html body:not(#a):not(#b):not(#c) .gform_wrapper textarea,
  html body:not(#a):not(#b):not(#c) .gform_wrapper select{
    background-color: transparent !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  html body:not(#a):not(#b):not(#c) .gform_wrapper .gform_body,
  html body:not(#a):not(#b):not(#c) .gform_wrapper .gform_fields,
  html body:not(#a):not(#b):not(#c) .gform_wrapper .gfield{
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}


/* ====================================================================
   LES TRAITS PARASITES DE LA BOUTIQUE
   ==================================================================== */

/* le trait blanc au-dessus du titre */
html body:not(#a):not(#b):not(#c) h1.et-shop-title,
html body:not(#a):not(#b):not(#c) .woocommerce-products-header__title{
  border-top: none !important;
  border-bottom: none !important;
}

/* la barre de filtres : vide depuis que le tri est retire, elle ne
   laissait que ses deux bordures */
html body:not(#a):not(#b):not(#c) .shop-filters{
  display: none !important;
}


/* ====================================================================
   LA GALERIE DE LA FICHE PRODUIT
   ==================================================================== */

/* 1. LA GRANDE IMAGE. FlexSlider pose `width: 400%` sur le conteneur des
      diapos pour pouvoir les faire glisser ; un `max-width: 100%` le
      ramenait a la largeur d'une seule. Resultat : la deuxieme image
      restait hors champ et le clic sur sa vignette n'affichait que du
      blanc. On rend au conteneur le droit de depasser. */
html body:not(#a):not(#b):not(#c) .woocommerce-product-gallery__wrapper{
  max-width: none !important;
}
html body:not(#a):not(#b):not(#c) .woocommerce-product-gallery__image{
  max-width: none !important;
}
html body:not(#a):not(#b):not(#c) .flex-viewport{
  overflow: hidden !important;
}

/* 2. LES VIGNETTES SOUS LA PHOTO, jamais dessus. */
html body:not(#a):not(#b):not(#c) .woocommerce-product-gallery .flex-control-nav,
html body:not(#a):not(#b):not(#c) .woocommerce-product-gallery .flex-control-thumbs{
  position: static !important;
  bottom: auto !important;
  margin: 12px 0 0 !important;
  padding: 0 !important;
  background: none !important;
}

/* 3. UN CARROUSEL, PAS DEUX LIGNES. Au-dela de quatre photos, la bande
      defile horizontalement au doigt. */
html body:not(#a):not(#b):not(#c) .woocommerce-product-gallery .flex-control-thumbs{
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 8px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scroll-snap-type: x proximity !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none !important;
}
html body:not(#a):not(#b):not(#c) .woocommerce-product-gallery .flex-control-thumbs::-webkit-scrollbar{
  display: none !important;
}
html body:not(#a):not(#b):not(#c) .woocommerce-product-gallery .flex-control-thumbs li{
  flex: 0 0 auto !important;
  width: 64px !important;
  height: 64px !important;
  margin: 0 !important;
  scroll-snap-align: start !important;
}
html body:not(#a):not(#b):not(#c) .woocommerce-product-gallery .flex-control-thumbs li img{
  width: 64px !important;
  height: 64px !important;
  object-fit: cover !important;
  opacity: .55 !important;
  transition: opacity .18s ease !important;
}
html body:not(#a):not(#b):not(#c) .woocommerce-product-gallery .flex-control-thumbs li img.flex-active,
html body:not(#a):not(#b):not(#c) .woocommerce-product-gallery .flex-control-thumbs li img:hover{
  opacity: 1 !important;
}


/* ====================================================================
   LA GALERIE : LE GLISSEMENT
   ====================================================================
   `display: flex` sur le conteneur des diapos doublait la translation et
   sortait les deux images du cadre. FlexSlider veut des flottants. */
html body:not(#a):not(#b):not(#c) .woocommerce-product-gallery__wrapper{
  display: block !important;
  overflow: visible !important;
  width: 400% !important;
}
html body:not(#a):not(#b):not(#c) .woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image{
  float: left !important;
  display: block !important;
  width: 25% !important;
}


/* ====================================================================
   LES POLICES DE LA CHARTE
   ====================================================================
   Deux endroits ou le theme sort de la charte : les titres du pied de
   page, en « Krona One », et le titre de la fiche produit, en
   « Welcomeweb-Bold ». Partout ailleurs c'est Futura. */
html body:not(#a):not(#b):not(#c) footer h3.wp-block-heading,
html body:not(#a):not(#b):not(#c) footer .widget h3,
html body:not(#a):not(#b):not(#c) .site-footer h3,
html body:not(#a):not(#b):not(#c) .site-footer .widget-title{
  font-family: futura, 'Futura PT', 'Jost', sans-serif !important;
  letter-spacing: .14em !important;
  font-weight: 500 !important;
}
html body:not(#a):not(#b):not(#c) h1.product_title,
html body:not(#a):not(#b):not(#c) .summary h1{
  font-family: futura, 'Futura PT', 'Jost', sans-serif !important;
  letter-spacing: .05em !important;
}


/* ====================================================================
   LE CONTENU DU PANNEAU DU PANIER
   ==================================================================== */

/* 1. UN SEUL CADRE SUR LA QUANTITE. Le theme en posait deux, imbriques. */
html body:not(#a):not(#b):not(#c) #side-cart .quantity,
html body:not(#a):not(#b):not(#c) .mini-cart .quantity{
  border: 1px solid #ddd8ce !important;
  border-radius: 0 !important;
}
html body:not(#a):not(#b):not(#c) #side-cart .quantity input.qty,
html body:not(#a):not(#b):not(#c) .mini-cart .quantity input.qty{
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* 2. LA CROIX QUI SUPPRIME. Beige sur blanc : on la rend nette. */
html body:not(#a):not(#b):not(#c) #side-cart a.remove,
html body:not(#a):not(#b):not(#c) .mini-cart a.remove{
  background: transparent !important;
  border: none !important;
  color: #6b6f76 !important;
  font-size: 18px !important;
  line-height: 1 !important;
  width: 22px !important;
  height: 22px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
html body:not(#a):not(#b):not(#c) #side-cart a.remove:hover{
  color: #22252b !important;
}

/* 3. LES DEUX BOUTONS DU BAS. « Voir le panier » etait beige sur blanc,
      « Commander » blanc sur beige : aucun des deux ne se lisait. */
html body:not(#a):not(#b):not(#c) #side-cart .woocommerce-mini-cart__buttons,
html body:not(#a):not(#b):not(#c) .mini-cart .woocommerce-mini-cart__buttons{
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  margin-top: 14px !important;
}
html body:not(#a):not(#b):not(#c) #side-cart .woocommerce-mini-cart__buttons a{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-height: 46px !important;
  margin: 0 !important;
  font-size: 10px !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
}
/* le bouton secondaire : trait fin, texte anthracite */
html body:not(#a):not(#b):not(#c) #side-cart .woocommerce-mini-cart__buttons a:not(.checkout){
  background: transparent !important;
  border: 1px solid #22252b !important;
  color: #22252b !important;
}
/* le bouton principal : plein, blanc sur anthracite */
html body:not(#a):not(#b):not(#c) #side-cart .woocommerce-mini-cart__buttons a.checkout{
  background: #22252b !important;
  border: 1px solid #22252b !important;
  color: #ffffff !important;
}

/* 4. LE SOUS-TOTAL, lisible du libelle au montant. */
html body:not(#a):not(#b):not(#c) #side-cart .woocommerce-mini-cart__total,
html body:not(#a):not(#b):not(#c) #side-cart .woocommerce-mini-cart__total *{
  color: #22252b !important;
  font-size: 12px !important;
}
html body:not(#a):not(#b):not(#c) #side-cart .woocommerce-mini-cart__total{
  display: flex !important;
  align-items: baseline !important;
  justify-content: space-between !important;
  padding-top: 14px !important;
  margin-top: 6px !important;
  border-top: 1px solid #ece7dd !important;
}


/* ====================================================================
   LES BADGES DE LA FICHE PRODUIT
   ====================================================================
   Le badge « Expertise francaise » collait son drapeau au bord, celui du
   dessous avait un retrait : deux blocs voisins, deux retraits. On pose
   le meme sur les deux, sur mobile comme sur ordinateur. */
html body:not(#a):not(#b):not(#c) .jh-badge,
html body:not(#a):not(#b):not(#c) .vt-badge,
html body:not(#a):not(#b):not(#c) [class*="badge-origine"],
html body:not(#a):not(#b):not(#c) [class*="badge-vegan"]{
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 12px 16px !important;
  box-sizing: border-box !important;
}
html body:not(#a):not(#b):not(#c) .jh-badge > :first-child,
html body:not(#a):not(#b):not(#c) .vt-badge > :first-child{
  margin-left: 0 !important;
  flex: 0 0 auto !important;
}


/* ====================================================================
   RETOUCHES DU PANNEAU ET DES BADGES
   ==================================================================== */

/* 1. LA QUANTITE, plus basse : 46 px -> 34. */
html body:not(#a):not(#b):not(#c) #side-cart .quantity,
html body:not(#a):not(#b):not(#c) .mini-cart .quantity{
  height: 34px !important;
  min-height: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  width: auto !important;
}
html body:not(#a):not(#b):not(#c) #side-cart .quantity input.qty,
html body:not(#a):not(#b):not(#c) #side-cart .quantity .plus,
html body:not(#a):not(#b):not(#c) #side-cart .quantity .minus,
html body:not(#a):not(#b):not(#c) #side-cart .quantity > *{
  height: 32px !important;
  min-height: 0 !important;
  line-height: 32px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* 2. « PANIER » en capitales, comme les autres titres du site. */
html body:not(#a):not(#b):not(#c) #side-cart .side-panel-title{
  text-transform: uppercase !important;
  letter-spacing: .16em !important;
  font-size: 11px !important;
  font-family: futura, 'Futura PT', 'Jost', sans-serif !important;
}

/* 3. LES BADGES : le meme retrait a gauche que le bloc voisin, et le
      drapeau ne touche plus le bord. */
html body:not(#a):not(#b):not(#c) .labels-wrapper .product-label{
  padding-left: 18px !important;
  padding-right: 18px !important;
  box-sizing: border-box !important;
}
html body:not(#a):not(#b):not(#c) .labels-wrapper .product-label .product-content{
  gap: 8px !important;
}


/* ====================================================================
   UNE SEULE GOUTTIERE, PORTEE PAR UN SEUL NIVEAU
   ====================================================================
   Mesure avant sur la page Concept : quatre retraits empiles, 81 px a
   gauche pour un texte de 210 px sur 375. Ce bloc vient APRES les
   precedents et les corrige. */
@media (max-width: 767px){

  /* le niveau exterieur, et lui seul, porte les 16 px */
  html body:not(#a):not(#b):not(#c) .vc_column-inner{
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* tout ce qui est dedans est a zero : rien ne peut plus s'additionner */
  html body:not(#a):not(#b):not(#c) .vc_column-inner .wpb_wrapper,
  html body:not(#a):not(#b):not(#c) .vc_column-inner .wpb_text_column,
  html body:not(#a):not(#b):not(#c) .vc_column-inner .wpb_content_element,
  html body:not(#a):not(#b):not(#c) .vc_column-inner section,
  html body:not(#a):not(#b):not(#c) .vc_column-inner .concept-container,
  html body:not(#a):not(#b):not(#c) .vc_column-inner .concept-left,
  html body:not(#a):not(#b):not(#c) .vc_column-inner .concept-right,
  html body:not(#a):not(#b):not(#c) [class*="section-concept"]{
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 100% !important;
  }
}


/* ====================================================================
   LA GOUTTIERE UNIQUE, VERSION DEFINITIVE
   ====================================================================
   Le coupable etait `.vc_row`, avec 50 px que mes blocs precedents ne
   nommaient jamais. Ici : tout a zero, 16 px sur la ligne racine. */
@media (max-width: 767px){

  /* tous les niveaux de structure a zero */
  html body:not(#a):not(#b):not(#c) .vc_section,
  html body:not(#a):not(#b):not(#c) .sec_row,
  html body:not(#a):not(#b):not(#c) .vc_row,
  html body:not(#a):not(#b):not(#c) .vc_row-fluid,
  html body:not(#a):not(#b):not(#c) .vc_column_container,
  html body:not(#a):not(#b):not(#c) .vc_column-inner,
  html body:not(#a):not(#b):not(#c) .wpb_wrapper,
  html body:not(#a):not(#b):not(#c) .wpb_text_column,
  html body:not(#a):not(#b):not(#c) .wpb_content_element,
  html body:not(#a):not(#b):not(#c) .vc_toggle{
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 100% !important;
    width: auto !important;
  }

  /* la ligne racine, et elle seule, porte les 16 px */
  html body:not(#a):not(#b):not(#c) .vc_row:not(.vc_inner){
    padding-left: 16px !important;
    padding-right: 16px !important;
    box-sizing: border-box !important;
    width: 100% !important;
  }

  /* le sur-titre des pages : petites capitales espacees, comme partout */
  html body:not(#a):not(#b):not(#c) .wpb_wrapper > h4:first-child,
  html body:not(#a):not(#b):not(#c) .vc_column-inner > .wpb_wrapper > .wpb_text_column:first-child h4{
    text-transform: uppercase !important;
    letter-spacing: .22em !important;
    font-size: 10px !important;
    color: #6b6f76 !important;
    margin: 78px 0 10px !important;
    text-align: center !important;
  }

  /* l'espace vertical avant le titre : 219 px entre le sur-titre et le
     titre sur la FAQ. */
  html body:not(#a):not(#b):not(#c) .vc_row:not(.vc_inner){
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  html body:not(#a):not(#b):not(#c) .vc_column-inner{
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  /* le formulaire de contact prend toute la largeur utile */
  html body:not(#a):not(#b):not(#c) .gform_wrapper,
  html body:not(#a):not(#b):not(#c) .gform_wrapper form,
  html body:not(#a):not(#b):not(#c) .gform_wrapper .gform_fields,
  html body:not(#a):not(#b):not(#c) .gform_wrapper .gfield{
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}


/* ====================================================================
   LES PARAGRAPHES VIDES DE L'EDITEUR
   ====================================================================
   Un bloc de 201 px de haut pour une ligne de 15 px : le reste, ce sont
   des paragraphes vides laisses par WPBakery. */
@media (max-width: 767px){
  html body:not(#a):not(#b):not(#c) .wpb_text_column p:empty,
  html body:not(#a):not(#b):not(#c) .wpb_wrapper > p:empty{
    display: none !important;
  }
  html body:not(#a):not(#b):not(#c) .wpb_text_column br + br{
    display: none !important;
  }
  html body:not(#a):not(#b):not(#c) .vc_empty_space{
    height: 18px !important;
  }
}


/* ====================================================================
   PLUS AUCUNE MARGE NEGATIVE VERTICALE SUR TELEPHONE
   ====================================================================
   Une marge negative sert a superposer deux colonnes sur grand ecran.
   Sur telephone les colonnes sont empilees : la superposition n'a plus
   d'objet, et la remontee sort le contenu de l'ecran. */
@media (max-width: 767px){
  html body:not(#a):not(#b):not(#c) .vc_row,
  html body:not(#a):not(#b):not(#c) .vc_row-fluid,
  html body:not(#a):not(#b):not(#c) .vc_column_container,
  html body:not(#a):not(#b):not(#c) .vc_column-inner,
  html body:not(#a):not(#b):not(#c) .vc_section,
  html body:not(#a):not(#b):not(#c) .sec_row{
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    top: auto !important;
  }
}


/* ====================================================================
   L'ESPACE AU-DESSUS DES TITRES DE PAGE
   ====================================================================
   Le sur-titre portait `padding-top: 175px` : 201 px de bloc pour une
   ligne de 15 px. Un rembourrage interne, que les regles de marge ne
   peuvent pas atteindre. */
@media (max-width: 767px){

  html body:not(#a):not(#b):not(#c) .wpb_wrapper > h4,
  html body:not(#a):not(#b):not(#c) .wpb_text_column h4,
  html body:not(#a):not(#b):not(#c) .wpb_text_column > h1,
  html body:not(#a):not(#b):not(#c) .wpb_wrapper > h1{
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  /* le sur-titre colle a son titre : 10 px, pas 175 */
  html body:not(#a):not(#b):not(#c) .wpb_wrapper > h4{
    margin: 78px 0 10px !important;
  }
  html body:not(#a):not(#b):not(#c) .wpb_wrapper > h1{
    margin: 0 0 22px !important;
  }

  /* les questions de la FAQ, un cran plus petites */
  html body:not(#a):not(#b):not(#c) .vc_toggle_title{
    font-size: 11px !important;
    letter-spacing: .08em !important;
    line-height: 1.5 !important;
  }
}


/* ====================================================================
   LES QUESTIONS DE LA FAQ
   ====================================================================
   Le texte vit dans un `<h4>` a l'interieur du titre, avec sa propre
   taille. C'est lui qu'il faut viser. */
@media (max-width: 767px){

  html body:not(#a):not(#b):not(#c) .vc_toggle_title h4,
  html body:not(#a):not(#b):not(#c) .vc_toggle_title > h4{
    font-size: 11px !important;
    line-height: 1.45 !important;
    letter-spacing: .04em !important;
    margin: 0 !important;
    padding: 0 !important;
    font-weight: 500 !important;
  }
  html body:not(#a):not(#b):not(#c) .vc_toggle_title{
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  /* l'ecart d'une question a l'autre : un trait, pas un trou */
  html body:not(#a):not(#b):not(#c) .vc_toggle{
    margin-bottom: 0 !important;
    padding-top: 14px !important;
    padding-bottom: 14px !important;
  }
  html body:not(#a):not(#b):not(#c) .vc_toggle_content{
    margin-top: 10px !important;
    padding-bottom: 0 !important;
  }
}


/* ====================================================================
   LES QUESTIONS DE LA FAQ, A TOUTES LES LARGEURS
   ====================================================================
   Sans condition de media : mes blocs precedents ne valaient que sous
   767 px, et les questions faisaient encore 19 px sur ordinateur. */

html body:not(#a):not(#b):not(#c) .vc_toggle_title h4{
  font-size: 12px !important;
  line-height: 1.4 !important;
  letter-spacing: .03em !important;
  font-weight: 500 !important;
  margin: 0 !important;
  padding: 0 !important;
}
html body:not(#a):not(#b):not(#c) .vc_toggle_title{
  margin: 0 !important;
  padding: 0 !important;
}
/* l'espace d'une question a l'autre : 10 px de part et d'autre du trait */
html body:not(#a):not(#b):not(#c) .vc_toggle{
  margin: 0 !important;
  padding: 10px 0 !important;
}
html body:not(#a):not(#b):not(#c) .vc_toggle_content{
  margin: 8px 0 0 !important;
  padding-bottom: 0 !important;
  font-size: 12px !important;
  line-height: 1.6 !important;
}
/* la croix d'ouverture suit la taille du texte */
html body:not(#a):not(#b):not(#c) .vc_toggle_icon{
  transform: scale(.8) !important;
}

@media (max-width: 767px){
  html body:not(#a):not(#b):not(#c) .vc_toggle_title h4{
    font-size: 10.5px !important;
  }
  html body:not(#a):not(#b):not(#c) .vc_toggle{
    padding: 9px 0 !important;
  }
}


/* ====================================================================
   LE « + » DES QUESTIONS
   ====================================================================
   18 px de haut pour un texte de 12 px : il pesait plus lourd que la
   question elle-meme. */
html body:not(#a):not(#b):not(#c) .vc_toggle_icon{
  transform: scale(.62) !important;
  width: 14px !important;
  height: 14px !important;
  margin-top: -1px !important;
}
html body:not(#a):not(#b):not(#c) .vc_toggle_icon::before,
html body:not(#a):not(#b):not(#c) .vc_toggle_icon::after{
  border-width: 1px !important;
}


/* ====================================================================
   L'ALIGNEMENT DES QUESTIONS, ET LA BANDE BLANCHE
   ==================================================================== */

/* 1. le « + » est en position absolue a gauche : le texte doit lui
      laisser sa place, sinon il passe dessous. */
html body:not(#a):not(#b):not(#c) .vc_toggle_title{
  position: relative !important;
  padding-left: 30px !important;
  padding-right: 0 !important;
  min-height: 18px !important;
}
html body:not(#a):not(#b):not(#c) .vc_toggle_icon{
  position: absolute !important;
  left: 4px !important;
  top: 50% !important;
  margin-top: -7px !important;
  transform: scale(.62) !important;
  width: 14px !important;
  height: 14px !important;
}
html body:not(#a):not(#b):not(#c) .vc_toggle_content{
  padding-left: 30px !important;
}

/* 2. le beige va jusqu'au pied de page */
html body:not(#a):not(#b):not(#c) .vc_section.videoservices,
html body:not(.single-product):not(#a):not(#b):not(#c) #wrapper,
html body:not(.single-product):not(#a):not(#b):not(#c) .page-wrapper-inner,
html body:not(.single-product):not(#a):not(#b):not(#c) .site-content{
  /* couleur de Jhouny retiree */
}
html body:not(#a):not(#b):not(#c) .vc_section.videoservices{
  padding-bottom: 0 !important;
}


/* ====================================================================
   LE « + » REDESSINE, SANS MISE A L'ECHELLE
   ====================================================================
   `scale()` sur un trait de 1 px le rend flou et inegal. On donne sa
   taille reelle a l'icone et on dessine les deux barres. */
html body:not(#a):not(#b):not(#c) .vc_toggle_icon{
  transform: none !important;
  width: 12px !important;
  height: 12px !important;
  left: 6px !important;
  top: 50% !important;
  margin-top: -6px !important;
  border: none !important;
  background: none !important;
  box-shadow: none !important;
}
/* la barre horizontale */
html body:not(#a):not(#b):not(#c) .vc_toggle_icon::before{
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 50% !important;
  width: 12px !important;
  height: 1px !important;
  margin-top: -0.5px !important;
  background: currentColor !important;
  border: none !important;
  transform: none !important;
  transition: none !important;
}
/* la barre verticale, qui disparait quand la question est ouverte */
html body:not(#a):not(#b):not(#c) .vc_toggle_icon::after{
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 50% !important;
  width: 1px !important;
  height: 12px !important;
  margin-left: -0.5px !important;
  background: currentColor !important;
  border: none !important;
  transform: none !important;
  transition: opacity .18s ease !important;
  opacity: 1 !important;
}
html body:not(#a):not(#b):not(#c) .vc_toggle_active .vc_toggle_icon::after{
  opacity: 0 !important;
}
html body:not(#a):not(#b):not(#c) .vc_toggle_title{
  color: #22252b !important;
}


/* ====================================================================
   LA PILULE « FAIRE UN DIAGNOSTIC »
   ====================================================================
   Masquee par un style en ligne du plugin, alors que le bouton est
   fonctionnel (verifie au clic). On l'affiche, a gauche, et le reste
   des actions se range a droite. */
html body:not(#a):not(#b):not(#c) #lystes-product-chat .lystes-diagnostic-wrapper{
  display: flex !important;
  align-items: center !important;
  margin-right: auto !important;
}
html body:not(#a):not(#b):not(#c) #lystes-product-chat #lystes-diagnostic-btn,
html body:not(#a):not(#b):not(#c) #lystes-product-chat .lystes-diagnostic-btn{
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  background: #000000 !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 28px !important;
  padding: 6px 14px 6px 6px !important;
  min-height: 29px !important;
  font-size: 11px !important;
  white-space: nowrap !important;
  width: auto !important;
}
html body:not(#a):not(#b):not(#c) #lystes-product-chat .lystes-diagnostic-btn .lystes-btn-label,
html body:not(#a):not(#b):not(#c) #lystes-product-chat .lystes-diagnostic-btn span{
  color: #ffffff !important;
}
html body:not(#a):not(#b):not(#c) #lystes-product-chat .lystes-diagnostic-btn img{
  width: 22px !important;
  height: 22px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
}
/* la rangee : pilule a gauche, actions a droite */
html body:not(#a):not(#b):not(#c) #lystes-product-chat .lystes-chat-actions-row{
  justify-content: space-between !important;
}


/* ====================================================================
   LES FINITIONS DU CHAT PRODUIT
   ==================================================================== */

/* 1. LE CHAMP : pas de cadre. */
html body:not(#a):not(#b):not(#c) #lystes-product-chat .lystes-input,
html body:not(#a):not(#b):not(#c) #lystes-product-chat textarea,
html body:not(#a):not(#b):not(#c) #lystes-product-chat input[type="text"]{
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  background: transparent !important;
}

/* 2. L'AVATAR DU DIAGNOSTIC. C'est son conteneur qui l'ecrasait a 7 px
      de large : on lui rend sa place avant de cadrer l'image. */
html body:not(#a):not(#b):not(#c) #lystes-product-chat .lystes-diagnostic-btn > span:first-child{
  width: 22px !important;
  min-width: 22px !important;
  height: 22px !important;
  flex: 0 0 22px !important;
  display: inline-flex !important;
  overflow: hidden !important;
  border-radius: 50% !important;
}
html body:not(#a):not(#b):not(#c) #lystes-product-chat .lystes-diagnostic-btn img{
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  object-fit: cover !important;
  border-radius: 50% !important;
}

/* 3. LA FLECHE D'ENVOI, dessinee au trait et non remplie.
      Le SVG du plugin est une forme pleine : on le cache et on dessine
      la fleche avec un masque, comme pour l'icone du panier. */
html body:not(#a):not(#b):not(#c) #lystes-product-chat .lystes-send-btn svg{
  display: none !important;
}
html body:not(#a):not(#b):not(#c) #lystes-product-chat .lystes-send-btn{
  position: relative !important;
}
html body:not(#a):not(#b):not(#c) #lystes-product-chat .lystes-send-btn::after{
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background-color: #ffffff !important;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19V5.5'/%3E%3Cpath d='M6 11.5 12 5.5l6 6'/%3E%3C/svg%3E") !important;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19V5.5'/%3E%3Cpath d='M6 11.5 12 5.5l6 6'/%3E%3C/svg%3E") !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
  -webkit-mask-position: center !important;
  mask-position: center !important;
  -webkit-mask-size: 14px 14px !important;
  mask-size: 14px 14px !important;
}

/* 4. LE DERNIER BLOC BLANC de la fiche produit. */
html body.single-product:not(#a):not(#b) .sticky-product-bar{
  /* couleur de Jhouny retiree */
}


/* ====================================================================
   LE BLOC DES CERTIFICATIONS
   ====================================================================
   240 px de vide autour de 270 px de contenu, des textes hors charte et
   aucune gouttiere reguliere. */

html body:not(#a):not(#b):not(#c) .vt-certifs{
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 24px !important;
  padding-bottom: 24px !important;
  border-top: none !important;
  border-bottom: none !important;
}
/* les traits qui ne delimitent rien */
html body:not(#a):not(#b):not(#c) .vt-certifs *{
  border-top: none !important;
  border-bottom: none !important;
}

/* la charte : Futura partout, une seule echelle */
html body:not(#a):not(#b):not(#c) .vt-certifs-mentions,
html body:not(#a):not(#b):not(#c) .vt-certifs-mentions span,
html body:not(#a):not(#b):not(#c) .vt-certifs h3,
html body:not(#a):not(#b):not(#c) .vt-certifs li,
html body:not(#a):not(#b):not(#c) .vt-certifs-bloc{
  font-family: futura, 'Futura PT', 'Jost', sans-serif !important;
}
html body:not(#a):not(#b):not(#c) .vt-certifs h3{
  font-size: 12px !important;
  letter-spacing: .14em !important;
  padding: 0 !important;
  margin: 0 0 12px !important;
}
html body:not(#a):not(#b):not(#c) .vt-certifs li{
  font-size: 11.5px !important;
  line-height: 1.7 !important;
}
html body:not(#a):not(#b):not(#c) .vt-certifs-mentions span{
  font-size: 10.5px !important;
  letter-spacing: .06em !important;
}

@media (max-width: 767px){
  /* les gouttieres, enfin regulieres */
  html body:not(#a):not(#b):not(#c) .vt-certifs{
    padding-left: 16px !important;
    padding-right: 16px !important;
    box-sizing: border-box !important;
  }
  html body:not(#a):not(#b):not(#c) .vt-certifs-listes,
  html body:not(#a):not(#b):not(#c) .vt-certifs-bloc,
  html body:not(#a):not(#b):not(#c) .vt-certifs .vt-sans,
  html body:not(#a):not(#b):not(#c) .vt-certifs-mentions{
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  /* les deux mentions l'une sous l'autre, alignees a gauche */
  html body:not(#a):not(#b):not(#c) .vt-certifs-mentions{
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    text-align: left !important;
  }
  html body:not(#a):not(#b):not(#c) .vt-certifs-listes{
    display: flex !important;
    flex-direction: column !important;
    gap: 18px !important;
  }
}


/* ====================================================================
   LE CHAT PRODUIT : ICONES ET ALIGNEMENT
   ==================================================================== */

/* les icones : leur trait etait blanc sur un fond blanc */
html body:not(#a):not(#b):not(#c) #lystes-product-chat .lystes-mic-btn svg,
html body:not(#a):not(#b):not(#c) #lystes-product-chat .lystes-call-btn svg,
html body:not(#a):not(#b):not(#c) #lystes-product-chat .lystes-modelmini-btn svg,
html body:not(#a):not(#b):not(#c) #lystes-product-chat .lystes-mic-btn svg *,
html body:not(#a):not(#b):not(#c) #lystes-product-chat .lystes-call-btn svg *,
html body:not(#a):not(#b):not(#c) #lystes-product-chat .lystes-modelmini-btn svg *{
  stroke: #22252b !important;
  color: #22252b !important;
}
html body:not(#a):not(#b):not(#c) #lystes-product-chat .lystes-chat-right-actions{
  gap: 10px !important;
  align-items: center !important;
}



/* ====================================================================
   LA FICHE PRODUIT : FOND BLANC
   ====================================================================
   Demande neuf fois par JP. J'avais compris l'inverse et pose du beige :
   c'est corrige ici, et ce bloc vient en dernier. */
html body.single-product:not(#a):not(#b),
html body.single-product:not(#a):not(#b) #wrapper,
html body.single-product:not(#a):not(#b) .page-wrapper-inner,
html body.single-product:not(#a):not(#b) .site-content,
html body.single-product:not(#a):not(#b) #main,
html body.single-product:not(#a):not(#b) .product-page-wrapper,
html body.single-product:not(#a):not(#b) .sticky-product-bar,
html body.single-product:not(#a):not(#b) .vt-certifs,
html body.single-product:not(#a):not(#b) .summary,
html body.single-product:not(#a):not(#b) .product-gallery-inner{
  background-color: #ffffff !important;
}

/* le trou de 151 px sous le bouton de paiement express */
html body.single-product:not(#a):not(#b) .wc-stripe-product-checkout-container,
html body.single-product:not(#a):not(#b) #wc-stripe-express-checkout-element,
html body.single-product:not(#a):not(#b) .wcpay-payment-request-wrapper,
html body.single-product:not(#a):not(#b) .__PrivateStripeElement{
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}
html body.single-product:not(#a):not(#b) .vt-certifs{
  margin-top: 0 !important;
  padding-top: 20px !important;
}
html body.single-product:not(#a):not(#b) .summary > *:last-child{
  margin-bottom: 0 !important;
}

/* les mentions de certification, en capitales */
html body:not(#a):not(#b):not(#c) .vt-certifs-mentions,
html body:not(#a):not(#b):not(#c) .vt-certifs-mentions span{
  text-transform: uppercase !important;
  letter-spacing: .1em !important;
}


/* ====================================================================
   LE FOND BLANC DE LA FICHE PRODUIT, EN DERNIER MOT
   ====================================================================
   Meme nombre d'identifiants que les regles beige, et pose en dernier :
   rien ne peut plus le reprendre. */
html body.single-product:not(#a):not(#b):not(#c),
html body.single-product:not(#a):not(#b):not(#c) #wrapper,
html body.single-product:not(#a):not(#b):not(#c) .page-wrapper-inner,
html body.single-product:not(#a):not(#b):not(#c) .site-content,
html body.single-product:not(#a):not(#b):not(#c) #main,
html body.single-product:not(#a):not(#b):not(#c) .header-main,
html body.single-product:not(#a):not(#b):not(#c) .sticky-product-bar,
html body.single-product:not(#a):not(#b):not(#c) .vt-certifs,
html body.single-product:not(#a):not(#b):not(#c) .custom-money-back-guarantee{
  background-color: #ffffff !important;
}


/* ====================================================================
   LE PANNEAU DE CHAT : PAS DE CADRE SUR LE CHAMP
   ====================================================================
   La bordure grise que le theme pose sur tous les champs. */
html body:not(#a):not(#b):not(#c) .lystes-bc-field textarea,
html body:not(#a):not(#b):not(#c) .lystes-bc-field input,
html body:not(#a):not(#b):not(#c) [class*="lystes-bc"] textarea,
html body:not(#a):not(#b):not(#c) [class*="brandchat"] textarea,
html body:not(#a):not(#b):not(#c) [class*="brandchat"] input[type="text"]{
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
}


/* ====================================================================
   LE VIDE SOUS LE BOUTON DE PAIEMENT
   ====================================================================
   Localise a la sonde : environ 300 px repartis entre le bas du bloc
   « garantie » et le bas de `.summary`. */

html body.single-product:not(#a):not(#b):not(#c) .custom-money-back-guarantee{
  padding-top: 18px !important;
  padding-bottom: 18px !important;
  margin-bottom: 8px !important;
  height: auto !important;
  min-height: 0 !important;
}
html body.single-product:not(#a):not(#b):not(#c) .custom-money-back-guarantee > *:last-child{
  margin-bottom: 0 !important;
}
html body.single-product:not(#a):not(#b):not(#c) .et-pro-summary-content,
html body.single-product:not(#a):not(#b):not(#c) .summary.entry-summary{
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}
html body.single-product:not(#a):not(#b):not(#c) .summary.entry-summary > *:last-child,
html body.single-product:not(#a):not(#b):not(#c) .et-pro-summary-content > *:last-child{
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}
html body.single-product:not(#a):not(#b):not(#c) .product-showcase{
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}
html body.single-product:not(#a):not(#b):not(#c) .vt-certifs{
  margin-top: 0 !important;
  padding-top: 18px !important;
  border-top: none !important;
}



/* ====================================================================
   LA PASTILLE DU PANIER ET LE BADGE AI DANS LE CHAT
   ====================================================================
   JP : « le bouton panier, la ou il y a du rouge, c'est cense etre
   ecriture blanche sur fond rouge, pas noire » ; « en haut a droite, le
   badge AI, on ne le voit pas ». */
html body:not(#a):not(#b):not(#c) #lystes-product-chat .lystes-cart-badge,
html body:not(#a):not(#b):not(#c) #lystes-product-chat .lystes-cart-badge *,
html body:not(#a):not(#b):not(#c) .lystes-cart-badge{
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-weight: 700 !important;
}
/* le badge AI de la vignette : blanc sur son fond sombre */
html body:not(#a):not(#b):not(#c) #lystes-product-chat .lystes-ai-badge,
html body:not(#a):not(#b):not(#c) #lystes-product-chat .lystes-ai-badge *{
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-weight: 700 !important;
  font-size: 8px !important;
  letter-spacing: .02em !important;
}


/* ====================================================================
   LA PAGE PANIER : CROIX, QUANTITE, TRAITS
   ==================================================================== */

/* 1. LA CROIX. 73 px de large pour 16 de haut : un X etire en travers du
      nom du produit. */
html body:not(#a):not(#b):not(#c) .woocommerce-cart-form a.remove,
html body:not(#a):not(#b):not(#c) .shop_table a.remove{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  max-width: 22px !important;
  padding: 0 !important;
  margin: 0 !important;
  font-size: 17px !important;
  line-height: 1 !important;
  color: #8a8f98 !important;
  background: transparent !important;
  border: none !important;
  overflow: hidden !important;
  text-indent: 0 !important;
}
html body:not(#a):not(#b):not(#c) .woocommerce-cart-form a.remove::before,
html body:not(#a):not(#b):not(#c) .woocommerce-cart-form a.remove::after{
  content: none !important;
  display: none !important;
}

/* 2. LA QUANTITE. 25 px de large : le « + » venait se coller au prix. */
@media (max-width: 767px){
  html body:not(#a):not(#b):not(#c) .woocommerce-cart-form .quantity{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 96px !important;
    min-width: 96px !important;
    height: 34px !important;
    border: 1px solid #ddd8ce !important;
  }
  html body:not(#a):not(#b):not(#c) .woocommerce-cart-form .quantity input.qty{
    width: 34px !important;
    border: none !important;
    text-align: center !important;
    background: transparent !important;
  }
  html body:not(#a):not(#b):not(#c) .woocommerce-cart-form .quantity .plus,
  html body:not(#a):not(#b):not(#c) .woocommerce-cart-form .quantity .minus{
    width: 28px !important;
    border: none !important;
    background: transparent !important;
  }
}

/* 3. UN SEUL TRAIT. Meme couleur, meme epaisseur, jamais transparent :
      un trait semi-transparent change de teinte selon ce qu'il y a
      derriere, et deux cellules voisines ne se raccordent plus. */
html body:not(#a):not(#b):not(#c) .woocommerce-cart-form tr,
html body:not(#a):not(#b):not(#c) .woocommerce-cart-form th,
html body:not(#a):not(#b):not(#c) .woocommerce-cart-form td,
html body:not(#a):not(#b):not(#c) .cart_totals tr,
html body:not(#a):not(#b):not(#c) .cart_totals th,
html body:not(#a):not(#b):not(#c) .cart_totals td{
  border-left: none !important;
  border-right: none !important;
  border-bottom: none !important;
  border-top: 1px solid #e8e4dc !important;
}
/* la premiere ligne n'a pas de trait au-dessus */
html body:not(#a):not(#b):not(#c) .woocommerce-cart-form tr:first-child th,
html body:not(#a):not(#b):not(#c) .woocommerce-cart-form tr:first-child td,
html body:not(#a):not(#b):not(#c) .cart_totals tr:first-child th,
html body:not(#a):not(#b):not(#c) .cart_totals tr:first-child td{
  border-top: none !important;
}


/* ====================================================================
   LA COLONNE DE LA QUANTITE
   ====================================================================
   55 px de colonne pour un selecteur de 96 : il debordait sur le
   sous-total. */
@media (max-width: 767px){
  html body:not(#a):not(#b):not(#c) .woocommerce-cart-form .product-quantity{
    width: 104px !important;
    min-width: 104px !important;
    flex: 0 0 104px !important;
    max-width: 104px !important;
    padding-right: 6px !important;
  }
  html body:not(#a):not(#b):not(#c) .woocommerce-cart-form .product-subtotal{
    width: 62px !important;
    min-width: 62px !important;
    flex: 0 0 62px !important;
    max-width: 62px !important;
    text-align: right !important;
    white-space: nowrap !important;
  }
  html body:not(#a):not(#b):not(#c) .woocommerce-cart-form .quantity{
    width: 92px !important;
    min-width: 92px !important;
  }
  html body:not(#a):not(#b):not(#c) .woocommerce-cart-form .product-name{
    width: calc(100% - 172px) !important;
    max-width: calc(100% - 172px) !important;
    flex: 1 1 auto !important;
  }
}


/* ====================================================================
   LE DRAPEAU ALIGNE SUR LA PLANTE
   ====================================================================
   Glyphe a 10 px sur le premier badge, 22 px sur le second, a padding
   egal : les emojis du premier vivent hors du conteneur qui porte le
   retrait. On rattrape les 12 px. */
html body:not(#a):not(#b):not(#c) .labels-wrapper .product-label.label-1{
  padding-left: 30px !important;
}



/* ====================================================================
   LE PANNEAU DU PANIER : EN-TETE ALIGNE, BOUTONS ASSORTIS
   ==================================================================== */

/* 1. LES DEUX BOUTONS, la meme police et la meme graisse. */
html body:not(#a):not(#b):not(#c) #side-cart .woocommerce-mini-cart__buttons a,
html body:not(#a):not(#b):not(#c) #side-cart .woocommerce-mini-cart__buttons a.checkout,
html body:not(#a):not(#b):not(#c) .mini-cart .woocommerce-mini-cart__buttons a{
  font-family: futura, 'Futura PT', 'Jost', sans-serif !important;
  font-weight: 600 !important;
  font-size: 10px !important;
  letter-spacing: .14em !important;
}

/* 2. L'EN-TETE sur la meme verticale que les produits : les 5 px de
      decalage venaient du conteneur interne du bandeau. */
html body:not(#a):not(#b):not(#c) #side-cart > header,
html body:not(#a):not(#b):not(#c) #side-cart .panel-header-inner,
html body:not(#a):not(#b):not(#c) #side-cart .container{
  padding-left: 25px !important;
  padding-right: 25px !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}
html body:not(#a):not(#b):not(#c) #side-cart .panel-header-inner{
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}
html body:not(#a):not(#b):not(#c) #side-cart .side-panel-title{
  margin-left: 0 !important;
  padding-left: 0 !important;
}
html body:not(#a):not(#b):not(#c) #side-cart .et-close{
  margin-right: 0 !important;
  right: auto !important;
}


/* ====================================================================
   LES ALIGNEMENTS, EN DERNIER MOT
   ==================================================================== */

/* 1. L'EN-TETE DU PANNEAU sur la verticale des produits : 50 px, pas 75. */
html body:not(#a):not(#b):not(#c) #side-cart > header,
html body:not(#a):not(#b):not(#c) #side-cart > header > .container{
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}
html body:not(#a):not(#b):not(#c) #side-cart .panel-header-inner{
  padding-left: 50px !important;
  padding-right: 50px !important;
  margin: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

/* 2. LA LIGNE DU PANIER : les colonnes Bootstrap ne tiennent pas a cette
      largeur, la quantite se posait sur le nom. */
@media (max-width: 767px){
  html body:not(#a):not(#b):not(#c) .woocommerce-cart-form .et-product-details > .row{
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    row-gap: 8px !important;
    margin: 0 !important;
  }
  html body:not(#a):not(#b):not(#c) .woocommerce-cart-form .product-name{
    flex: 1 1 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
  }
  html body:not(#a):not(#b):not(#c) .woocommerce-cart-form .product-quantity{
    flex: 0 0 100px !important;
    width: 100px !important;
    max-width: 100px !important;
    padding: 0 !important;
    order: 2 !important;
  }
  html body:not(#a):not(#b):not(#c) .woocommerce-cart-form .product-subtotal{
    flex: 1 1 auto !important;
    width: auto !important;
    max-width: none !important;
    text-align: right !important;
    padding: 0 !important;
    order: 3 !important;
    white-space: nowrap !important;
  }
  /* le prix unitaire sous le nom, pas en double au milieu */

}


/* ====================================================================
   LES COLONNES DU PANIER : DES LARGEURS, PAS UN PARTAGE A EGALITE
   ====================================================================
   `table-layout: fixed` sans largeurs donnait 194 px a la colonne photo
   et laissait 226 px vides a droite. */
html body:not(#a):not(#b):not(#c) .woocommerce-cart-form td.product-thumbnail,
html body:not(#a):not(#b):not(#c) .woocommerce-cart-form th.product-thumbnail{
  width: 96px !important;
  max-width: 96px !important;
  min-width: 96px !important;
}
html body:not(#a):not(#b):not(#c) .woocommerce-cart-form td.et-product-details{
  width: auto !important;
  max-width: none !important;
}
html body:not(#a):not(#b):not(#c) .woocommerce-cart-form .et-product-details > .row{
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
}

@media (max-width: 767px){
  html body:not(#a):not(#b):not(#c) .woocommerce-cart-form td.product-thumbnail,
  html body:not(#a):not(#b):not(#c) .woocommerce-cart-form th.product-thumbnail{
    width: 84px !important;
    max-width: 84px !important;
    min-width: 84px !important;
  }
  /* la quantite a gauche, le sous-total colle au bord droit */
  html body:not(#a):not(#b):not(#c) .woocommerce-cart-form .product-subtotal{
    margin-left: auto !important;
    text-align: right !important;
  }
}


/* ====================================================================
   LA LIGNE DU PANIER, D'UN BORD A L'AUTRE
   ==================================================================== */
html body:not(#a):not(#b):not(#c) .woocommerce-cart-form .et-product-details > .row{
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  row-gap: 10px !important;
}
/* le nom prend toute la premiere rangee */
html body:not(#a):not(#b):not(#c) .woocommerce-cart-form .product-name{
  flex: 1 1 100% !important;
  width: 100% !important;
  max-width: 100% !important;
  order: 1 !important;
  padding: 0 !important;
}
html body:not(#a):not(#b):not(#c) .woocommerce-cart-form .product-name > a{
  display: block !important;
}
/* le prix unitaire passe a gauche de la seconde rangee */
html body:not(#a):not(#b):not(#c) .woocommerce-cart-form .product-name .product-price{
  display: none !important;
}
html body:not(#a):not(#b):not(#c) .woocommerce-cart-form .product-quantity{
  flex: 0 0 auto !important;
  width: auto !important;
  max-width: none !important;
  order: 2 !important;
  margin-right: auto !important;
  padding: 0 !important;
}
html body:not(#a):not(#b):not(#c) .woocommerce-cart-form .product-subtotal{
  flex: 0 0 auto !important;
  width: auto !important;
  max-width: none !important;
  order: 3 !important;
  margin-left: auto !important;
  text-align: right !important;
  white-space: nowrap !important;
  font-size: 14px !important;
  padding: 0 !important;
}


/* ====================================================================
   LE PANIER EN BLOCS SUR TELEPHONE
   ====================================================================
   La table imposait sa repartition et laissait la moitie droite vide.
   Sur telephone, chaque ligne devient un bloc : photo a gauche, texte et
   chiffres sur toute la largeur restante. */
@media (max-width: 767px){

  html body:not(#a):not(#b):not(#c) .woocommerce-cart-form table,
  html body:not(#a):not(#b):not(#c) .woocommerce-cart-form tbody,
  html body:not(#a):not(#b):not(#c) .woocommerce-cart-form tr.woocommerce-cart-form__cart-item{
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  html body:not(#a):not(#b):not(#c) .woocommerce-cart-form tr.woocommerce-cart-form__cart-item{
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
    padding: 16px 0 !important;
    border-top: 1px solid #e8e4dc !important;
  }
  html body:not(#a):not(#b):not(#c) .woocommerce-cart-form td.product-thumbnail{
    display: block !important;
    flex: 0 0 74px !important;
    width: 74px !important;
    max-width: 74px !important;
    min-width: 74px !important;
    padding: 0 !important;
    border: none !important;
  }
  html body:not(#a):not(#b):not(#c) .woocommerce-cart-form td.product-thumbnail img{
    width: 74px !important;
    height: auto !important;
  }
  html body:not(#a):not(#b):not(#c) .woocommerce-cart-form td.et-product-details{
    display: block !important;
    flex: 1 1 auto !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    padding: 0 !important;
    border: none !important;
  }
  html body:not(#a):not(#b):not(#c) .woocommerce-cart-form .et-product-details > .row{
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    row-gap: 10px !important;
  }
  html body:not(#a):not(#b):not(#c) .woocommerce-cart-form .product-name{
    flex: 1 1 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    order: 1 !important;
    padding: 0 !important;
    font-size: 12.5px !important;
    line-height: 1.35 !important;
  }
  html body:not(#a):not(#b):not(#c) .woocommerce-cart-form .product-quantity{
    order: 2 !important;
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
    padding: 0 !important;
  }
  html body:not(#a):not(#b):not(#c) .woocommerce-cart-form .product-subtotal{
    order: 3 !important;
    flex: 1 1 auto !important;
    width: auto !important;
    max-width: none !important;
    margin-left: auto !important;
    padding: 0 !important;
    text-align: right !important;
    font-size: 14px !important;
    white-space: nowrap !important;
  }
  /* la croix, en haut a droite de la ligne */
  html body:not(#a):not(#b):not(#c) .woocommerce-cart-form .product-name a.remove{
    float: right !important;
    margin-left: 8px !important;
  }
}


/* ====================================================================
   LE PRIX UNITAIRE, UNE SEULE FOIS
   ====================================================================
   Le sous-total suffit : a quantite 1 c'est le meme montant, et au-dela
   c'est lui qui compte. */
html body:not(#a):not(#b):not(#c) .woocommerce-cart-form .product-price,
html body:not(#a):not(#b):not(#c) .woocommerce-cart-form td.product-price,
html body:not(#a):not(#b):not(#c) .woocommerce-cart-form .et-product-details .product-price{
  display: none !important;
}


/* ====================================================================
   LES CARTES PRODUIT REDEVIENNENT CLIQUABLES
   ====================================================================
   Le conteneur de la section du titre debordait sur la premiere rangee
   et interceptait les clics. Les cartes passent au-dessus. */
html body:not(#a):not(#b):not(#c) ul.products li.product{
  position: relative !important;
  z-index: 2 !important;
}
html body:not(#a):not(#b):not(#c) ul.products li.product a{
  position: relative !important;
  z-index: 3 !important;
}


/* ====================================================================
   LE PSEUDO-ELEMENT QUI AVALAIT LES CLICS
   ====================================================================
   `.sec_row::after` : 334 x 405 px, z-index 999, invisible, pose sur la
   premiere rangee de produits. Un decor ne capte pas le pointeur. */
html body:not(#a):not(#b):not(#c) .sec_row::after,
html body:not(#a):not(#b):not(#c) .sec_row::before,
html body:not(#a):not(#b):not(#c) .vc_row::after,
html body:not(#a):not(#b):not(#c) .vc_row::before{
  pointer-events: none !important;
}


/* ====================================================================
   LE PRIX UNITAIRE MASQUE, ET LE BANDEAU DU HAUT EN BLANC
   ==================================================================== */

/* le prix unitaire : specificite portee au niveau des regles qui le
   rallumaient, et pose en dernier */
html body:not(#a):not(#b):not(#c) .woocommerce-cart-form td.et-product-details .product-price,
html body:not(#a):not(#b):not(#c) .woocommerce-cart-form .product-name .product-price,
html body:not(#a):not(#b):not(#c) .woocommerce-cart-form div.product-price{
  display: none !important;
}

/* le bandeau d'annonce : texte blanc sur le vert de la marque */
html body:not(#a):not(#b):not(#c) .top-bar,
html body:not(#a):not(#b):not(#c) .top-bar *,
html body:not(#a):not(#b):not(#c) .header-notice,
html body:not(#a):not(#b):not(#c) .header-notice *,
html body:not(#a):not(#b):not(#c) .announcement-bar,
html body:not(#a):not(#b):not(#c) .announcement-bar *{
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}


/* ====================================================================
   LE BANDEAU DE LIVRAISON, LISIBLE
   ====================================================================
   Texte #22252b sur le vert #094846 : contraste 1,6:1. */
html body:not(#a):not(#b):not(#c) .vt-bandeau-livraison,
html body:not(#a):not(#b):not(#c) .vt-bandeau-livraison *{
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}


/* ====================================================================
   LE FOND DES BLOCS DE REASSURANCE
   ====================================================================
   « Garantie premiere commande » et « Non teste sur les animaux » se
   posent sur un gris tres clair, sans bordure. */
html body.single-product:not(#a):not(#b):not(#c) .custom-money-back-guarantee{
  background-color: #f9f9f9 !important;
  padding: 24px 20px !important;
  margin-bottom: 14px !important;
  border: none !important;
  border-radius: 2px !important;
}
html body.single-product:not(#a):not(#b):not(#c) .custom-money-back-guarantee > *:last-child{
  margin-bottom: 0 !important;
}


/* ====================================================================
   « VALIDER LA COMMANDE », UN CRAN PLUS DISCRET
   ====================================================================
   13 px en HussarBold : la police est grasse par construction. Futura
   en 11,5 px donne le meme bouton, en moins lourd. */
html body:not(#a):not(#b):not(#c) .checkout-button,
html body:not(#a):not(#b):not(#c) .wc-proceed-to-checkout a.button{
  font-family: futura, 'Futura PT', 'Jost', sans-serif !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  letter-spacing: .14em !important;
}


/* ====================================================================
   LA PAGE DE COMMANDE EN BLANC
   ====================================================================
   Meme traitement que la fiche produit : pas de beige sur les tunnels
   d'achat. */
html body.woocommerce-checkout:not(#a):not(#b):not(#c),
html body.woocommerce-checkout:not(#a):not(#b):not(#c) #wrapper,
html body.woocommerce-checkout:not(#a):not(#b):not(#c) .page-wrapper-inner,
html body.woocommerce-checkout:not(#a):not(#b):not(#c) .site-content,
html body.woocommerce-checkout:not(#a):not(#b):not(#c) #main,
html body.woocommerce-cart:not(#a):not(#b):not(#c),
html body.woocommerce-cart:not(#a):not(#b):not(#c) #wrapper,
html body.woocommerce-cart:not(#a):not(#b):not(#c) .page-wrapper-inner,
html body.woocommerce-cart:not(#a):not(#b):not(#c) .site-content,
html body.woocommerce-cart:not(#a):not(#b):not(#c) #main,
html body.page-id-8:not(#a):not(#b):not(#c),
html body.page-id-8:not(#a):not(#b):not(#c) #wrapper,
html body.page-id-8:not(#a):not(#b):not(#c) .page-wrapper-inner,
html body.page-id-8:not(#a):not(#b):not(#c) .site-content,
html body.page-id-8:not(#a):not(#b):not(#c) #main{
  background-color: #ffffff !important;
}


/* ====================================================================
   LE DEGRADE VIOLET DU PIED DE PAGE
   ====================================================================
   `linear-gradient(rgb(184,164,220) ...)` pose sur le footer. Sur la
   page de commande il n'en reste qu'une bande de 36 px, bien visible. */
html body.woocommerce-checkout:not(#a):not(#b):not(#c) footer.site-footer,
html body.woocommerce-checkout:not(#a):not(#b):not(#c) .footer,
html body.page-id-8:not(#a):not(#b):not(#c) footer.site-footer,
html body.page-id-8:not(#a):not(#b):not(#c) .footer{
  background-image: none !important;
  background-color: #ffffff !important;
}


/* ====================================================================
   LE LIEN DE CONFIDENTIALITE ET LE BOUTON « COMMANDER »
   ==================================================================== */

/* le lien reprend la taille de la phrase, et se signale par un trait */
html body:not(#a):not(#b):not(#c) .woocommerce-privacy-policy-text a,
html body:not(#a):not(#b):not(#c) .woocommerce-privacy-policy-link,
html body:not(#a):not(#b):not(#c) .woocommerce-terms-and-conditions-link{
  font-size: inherit !important;
  font-family: inherit !important;
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
  color: inherit !important;
}

/* « Commander » : meme traitement que « Valider la commande ».
   HussarBold est grasse par construction, Futura l'allege. */
html body:not(#a):not(#b):not(#c) #place_order,
html body:not(#a):not(#b):not(#c) button[name="woocommerce_checkout_place_order"]{
  font-family: futura, 'Futura PT', 'Jost', sans-serif !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  letter-spacing: .14em !important;
}


/* ====================================================================
   « RETOUR AU PANIER » : UN LIEN, PAS UN BOUTON
   ====================================================================
   Un retour ne pese pas autant que la validation de commande. */
html body:not(#a):not(#b):not(#c) .woocommerce-checkout .return-to-cart,
html body:not(#a):not(#b):not(#c) .woocommerce-checkout a[href*="panier"].button,
html body:not(#a):not(#b):not(#c) .checkout .wc-backward,
html body:not(#a):not(#b):not(#c) .woocommerce-checkout .wc-backward{
  background: none !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: #22252b !important;
  padding: 0 !important;
  min-height: 0 !important;
  font-size: 11.5px !important;
  font-weight: 500 !important;
  letter-spacing: .06em !important;
  text-transform: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  text-decoration: none !important;
}
/* la fleche, dessinee au trait devant le texte */
html body:not(#a):not(#b):not(#c) .woocommerce-checkout .wc-backward::before,
html body:not(#a):not(#b):not(#c) .woocommerce-checkout .return-to-cart::before{
  content: "" !important;
  width: 14px !important;
  height: 14px !important;
  flex: 0 0 14px !important;
  background-color: currentColor !important;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5'/%3E%3Cpath d='M11.5 18.5 5 12l6.5-6.5'/%3E%3C/svg%3E") !important;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5'/%3E%3Cpath d='M11.5 18.5 5 12l6.5-6.5'/%3E%3C/svg%3E") !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
  -webkit-mask-position: center !important;
  mask-position: center !important;
  -webkit-mask-size: contain !important;
  mask-size: contain !important;
}


/* ====================================================================
   SOCLE GOYA, COMPLEMENT DU 25/09 APRES CONTROLE VISUEL
   ====================================================================
   Deux defauts releves en regardant Eclose Paris et Maison SD a 375 px,
   que le premier socle ne couvrait pas. */

/* 1. LE BOUTON « RETOUR A LA BOUTIQUE » DU PANIER VIDE
      Mesure sur ecloseparis.com : color #fcf8f1 sur fond transparent,
      donc beige sur blanc. Contraste 1,05:1 : le bouton est la, on ne
      lit rien. Meme defaut que « Voir le panier » dans le panneau. */
html body:not(#a):not(#b):not(#c) .return-to-shop a,
html body:not(#a):not(#b):not(#c) .wc-backward,
html body:not(#a):not(#b):not(#c) .cart-empty + p a,
html body:not(#a):not(#b):not(#c) .woocommerce-cart .return-to-shop .button{
  color: #22252b !important;
  border: 1px solid #22252b !important;
  background: transparent !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 46px !important;
  padding: 0 22px !important;
  font-size: 10.5px !important;
  letter-spacing: .14em !important;
}

/* 2. UNE IMAGE SEULE DANS SA LIGNE VA BORD A BORD
      Mesure sur maisonsd.lystes.ai : l'image d'accueil fait 340 px a
      x=16 sur un ecran de 375. La gouttiere de 16 px, faite pour le
      texte, bride aussi les images de pleine largeur.
      On ne vise que les lignes marquees sans marge par le theme, ou
      celles dont l'unique contenu est une image. */
@media (max-width: 767px){
  html body:not(#a):not(#b):not(#c) .vc_row.vc_row-no-padding,
  html body:not(#a):not(#b):not(#c) .vc_row.no-padding{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  html body:not(#a):not(#b):not(#c) .vc_row.vc_row-no-padding .wpb_single_image img,
  html body:not(#a):not(#b):not(#c) .vc_row.no-padding .wpb_single_image img,
  html body:not(#a):not(#b):not(#c) .vc_row-full-width + .vc_row img{
    width: 100% !important;
    max-width: 100% !important;
  }
}



/* ====================================================================
   SOCLE GOYA : LE MENU MOBILE
   ====================================================================
   Mesure sur maisonsd.lystes.ai, a 375 px :
     entrees du menu   20 px, en averta-light-webfont
     #mobile-menu      z-index 604
   Sur jhounysecret, apres correction : 14 px en Futura, z-index 100000.

   Le z-index de 604 laisse la barre flottante de diagnostic passer
   devant le menu ouvert : on ne peut plus fermer le menu ni lire les
   dernieres entrees. Les panneaux lateraux doivent dominer tout le
   reste. */
@media (max-width: 991px){

  /* 1. les panneaux passent devant la barre flottante */
  html body:not(#a):not(#b):not(#c) #mobile-menu,
  html body:not(#a):not(#b):not(#c) #side-cart,
  html body:not(#a):not(#b):not(#c) .side-panel.side-menu,
  html body:not(#a):not(#b):not(#c) .side-panel.mini-cart{
    z-index: 100000 !important;
  }
  /* et leur voile aussi */
  html body:not(#a):not(#b):not(#c) .body-overlay,
  html body:not(#a):not(#b):not(#c) #body-overlay{
    z-index: 99999 !important;
  }

  /* 2. la taille des entrees : 20 px etaient trop grands pour un
        telephone, le menu debordait sous la ligne de flottaison */
  html body:not(#a):not(#b):not(#c) #mobile-menu ul li > a,
  html body:not(#a):not(#b):not(#c) .side-mobile-menu ul li > a,
  html body:not(#a):not(#b):not(#c) #mobile-menu .sliding-menu-panel > li > a{
    font-size: 14px !important;
    letter-spacing: .08em !important;
    line-height: 1.4 !important;
  }
  html body:not(#a):not(#b):not(#c) #mobile-menu ul li{
    margin-bottom: 4px !important;
  }
}



/* ====================================================================
   SOCLE GOYA : LES CERTIFICATIONS ET LE VIDE SOUS LE PAIEMENT
   ====================================================================
   Ces trois blocs avaient ete ecartes du premier socle : leur selecteur
   commence par `.vt-`, que j'avais pris pour une classe propre a
   Valthea. Verification faite, `.vt-certifs` existe sur TOUS les sites :
   c'est un bloc du theme enfant partage. Ils reviennent ici.
   ==================================================================== */

/* ====================================================================
   LES CERTIFICATIONS SOUS LA FICHE PRODUIT
   ====================================================================
   Demande d'une cliente le 24/09/2026 : mettre en avant les certifications
   bio et veganes pour justifier les prix. Les pictogrammes pesaient 3,5 Mo
   a huit, ramenes a 132 Ko avant mise en ligne. */
html body:not(#a):not(#b) .vt-certifs{
  margin: 56px 0 0;
  padding: 40px 0;
  border-top: 1px solid #e8e2d9;
}
html body:not(#a):not(#b) .vt-certifs-mentions{
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 14px 34px; margin: 0 0 30px; padding: 0;
  font-size: 13px; letter-spacing: .06em; color: #5f6570;
}
html body:not(#a):not(#b) .vt-certifs-pictos{
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: 22px 34px; margin: 0 0 40px; padding: 0; list-style: none;
}
html body:not(#a):not(#b) .vt-certifs-pictos li{ margin: 0; padding: 0; list-style: none; }
html body:not(#a):not(#b) .vt-certifs-pictos img{
  width: 64px; height: auto; display: block; opacity: .82;
}
html body:not(#a):not(#b) .vt-certifs-listes{
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 34px; max-width: 760px; margin: 0 auto;
}
html body:not(#a):not(#b) .vt-certifs-bloc h3{
  font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
  color: #22252b; margin: 0 0 16px; font-weight: 600;
}
html body:not(#a):not(#b) .vt-certifs-bloc ul{
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 9px;
}
html body:not(#a):not(#b) .vt-certifs-bloc li{
  font-size: 14px; color: #5f6570; margin: 0; padding: 0;
  display: flex; align-items: baseline; gap: 9px;
}
html body:not(#a):not(#b) .vt-sans li span{ color: #9a3530; font-size: 13px; }
html body:not(#a):not(#b) .vt-avec li::before{
  content: "\2713"; color: #3d6b52; font-size: 13px;
}
@media (max-width: 640px){
  html body:not(#a):not(#b) .vt-certifs-listes{ grid-template-columns: 1fr; gap: 26px; }
  html body:not(#a):not(#b) .vt-certifs-pictos img{ width: 52px; }
  html body:not(#a):not(#b) .vt-certifs-pictos{ gap: 18px 22px; }
}



/* ====================================================================
   LE BLOC DES CERTIFICATIONS
   ====================================================================
   240 px de vide autour de 270 px de contenu, des textes hors charte et
   aucune gouttiere reguliere. */

html body:not(#a):not(#b):not(#c) .vt-certifs{
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 24px !important;
  padding-bottom: 24px !important;
  border-top: none !important;
  border-bottom: none !important;
}
/* les traits qui ne delimitent rien */
html body:not(#a):not(#b):not(#c) .vt-certifs *{
  border-top: none !important;
  border-bottom: none !important;
}

/* la charte : Futura partout, une seule echelle */
html body:not(#a):not(#b):not(#c) .vt-certifs-mentions,
html body:not(#a):not(#b):not(#c) .vt-certifs-mentions span,
html body:not(#a):not(#b):not(#c) .vt-certifs h3,
html body:not(#a):not(#b):not(#c) .vt-certifs li,
html body:not(#a):not(#b):not(#c) .vt-certifs-bloc{
  font-family: futura, 'Futura PT', 'Jost', sans-serif !important;
}
html body:not(#a):not(#b):not(#c) .vt-certifs h3{
  font-size: 12px !important;
  letter-spacing: .14em !important;
  padding: 0 !important;
  margin: 0 0 12px !important;
}
html body:not(#a):not(#b):not(#c) .vt-certifs li{
  font-size: 11.5px !important;
  line-height: 1.7 !important;
}
html body:not(#a):not(#b):not(#c) .vt-certifs-mentions span{
  font-size: 10.5px !important;
  letter-spacing: .06em !important;
}

@media (max-width: 767px){
  /* les gouttieres, enfin regulieres */
  html body:not(#a):not(#b):not(#c) .vt-certifs{
    padding-left: 16px !important;
    padding-right: 16px !important;
    box-sizing: border-box !important;
  }
  html body:not(#a):not(#b):not(#c) .vt-certifs-listes,
  html body:not(#a):not(#b):not(#c) .vt-certifs-bloc,
  html body:not(#a):not(#b):not(#c) .vt-certifs .vt-sans,
  html body:not(#a):not(#b):not(#c) .vt-certifs-mentions{
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  /* les deux mentions l'une sous l'autre, alignees a gauche */
  html body:not(#a):not(#b):not(#c) .vt-certifs-mentions{
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    text-align: left !important;
  }
  html body:not(#a):not(#b):not(#c) .vt-certifs-listes{
    display: flex !important;
    flex-direction: column !important;
    gap: 18px !important;
  }
}



/* ====================================================================
   LE VIDE SOUS LE BOUTON DE PAIEMENT
   ====================================================================
   Localise a la sonde : environ 300 px repartis entre le bas du bloc
   « garantie » et le bas de `.summary`. */

html body.single-product:not(#a):not(#b):not(#c) .custom-money-back-guarantee{
  padding-top: 18px !important;
  padding-bottom: 18px !important;
  margin-bottom: 8px !important;
  height: auto !important;
  min-height: 0 !important;
}
html body.single-product:not(#a):not(#b):not(#c) .custom-money-back-guarantee > *:last-child{
  margin-bottom: 0 !important;
}
html body.single-product:not(#a):not(#b):not(#c) .et-pro-summary-content,
html body.single-product:not(#a):not(#b):not(#c) .summary.entry-summary{
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}
html body.single-product:not(#a):not(#b):not(#c) .summary.entry-summary > *:last-child,
html body.single-product:not(#a):not(#b):not(#c) .et-pro-summary-content > *:last-child{
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}
html body.single-product:not(#a):not(#b):not(#c) .product-showcase{
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}
html body.single-product:not(#a):not(#b):not(#c) .vt-certifs{
  margin-top: 0 !important;
  padding-top: 18px !important;
  border-top: none !important;
}





/* ====================================================================
   SOCLE GOYA : LA PAGE PANIER, RATTRAPAGE
   ====================================================================
   Blocs ecartes a tort du premier socle parce qu'ils contenaient une
   couleur beige. Leur contenu est structurel : hauteur du champ de code
   promo, lisibilite du titre de page, traits du tableau.
   ==================================================================== */

/* ====================================================================
   LE PANNEAU DU PANIER
   ====================================================================
   Un compteur a zero ne s'affiche pas, et le panneau tient sur un seul
   blanc du haut en bas. */

/* 1. plus aucune pastille a zero, ni dans l'entete ni dans le panneau.
      Le theme pose `et-count-zero` tout seul : on s'en sert. */
html body:not(#a):not(#b):not(#c) .item-counter.et-count-zero{
  display: none !important;
}

/* 2. dans le panneau, le compteur est blanc sur blanc : un rond vide colle
      au mot « Panier ». La liste des articles est juste en dessous, le
      chiffre n'apprend rien. */
html body:not(#a):not(#b):not(#c) #side-cart .side-panel-title .item-counter{
  display: none !important;
}
html body:not(#a):not(#b):not(#c) #side-cart .side-panel-title{
  display: flex !important;
  align-items: center !important;
  gap: 0 !important;
}

/* 3. un seul blanc : entete, corps, pied. */
html body:not(#a):not(#b):not(#c) #side-cart,
html body:not(#a):not(#b):not(#c) #side-cart > header,
html body:not(#a):not(#b):not(#c) #side-cart .panel-header-inner,
html body:not(#a):not(#b):not(#c) #side-cart .side-panel-content,
html body:not(#a):not(#b):not(#c) #side-cart .woocommerce-mini-cart__total,
html body:not(#a):not(#b):not(#c) #side-cart .woocommerce-mini-cart__buttons{
  background-color: #ffffff !important;
  background-image: none !important;
}
/* la limite entre l'entete et le corps ne doit pas se voir */
html body:not(#a):not(#b):not(#c) #side-cart > header{
  border-bottom: none !important;
  box-shadow: none !important;
}



/* ====================================================================
   LA PAGE PANIER
   ====================================================================
   Neuf defauts du theme, tous mesures a 375 px. Voir l'en-tete du
   script pour les chiffres d'avant. */

/* 1. LE TITRE. Ecrit en beige sur un bandeau beige : present, invisible.
      Le bandeau faisait 185 px de haut pour ne rien montrer. */
html body:not(#a):not(#b):not(#c) .page-title,
html body:not(#a):not(#b):not(#c) .regular-title .page-title{
  color: #22252b !important;
}
html body:not(#a):not(#b):not(#c) .regular-title{
  padding-top: 34px !important;
  padding-bottom: 28px !important;
}

/* 2. LA TABLE NE DEBORDE PLUS. `table-layout: fixed` est le seul moyen
      d'obliger une table a tenir dans la largeur qu'on lui donne. */
html body:not(#a):not(#b):not(#c) .woocommerce-cart-form,
html body:not(#a):not(#b):not(#c) .woocommerce-cart-form table,
html body:not(#a):not(#b):not(#c) .shop_table{
  width: 100% !important;
  max-width: 100% !important;
  table-layout: fixed !important;
  border-collapse: collapse !important;
}
html body:not(#a):not(#b):not(#c) .woocommerce-cart-form td{
  max-width: 100% !important;
  overflow-wrap: break-word !important;
}

@media (max-width: 767px){

  /* 3. LA LIGNE D'ARTICLE. La photo, le nom et le prix, puis la quantite :
        chacun a sa place, plus de prix colle au milieu du nom. */
  html body:not(#a):not(#b):not(#c) .woocommerce-cart-form td.product-thumbnail{
    width: 74px !important;
    padding: 14px 10px 14px 0 !important;
    vertical-align: top !important;
  }
  html body:not(#a):not(#b):not(#c) .woocommerce-cart-form td.et-product-details{
    padding: 14px 8px 14px 0 !important;
    vertical-align: top !important;
  }
  html body:not(#a):not(#b):not(#c) .woocommerce-cart-form td.et-product-details .product-name,
  html body:not(#a):not(#b):not(#c) .woocommerce-cart-form td.et-product-details a{
    display: block !important;
    font-size: 12.5px !important;
    line-height: 1.35 !important;
  }
  html body:not(#a):not(#b):not(#c) .woocommerce-cart-form td.et-product-details .product-price,
  html body:not(#a):not(#b):not(#c) .woocommerce-cart-form td.et-product-details .amount{
    display: block !important;
    margin-top: 6px !important;
    font-size: 13px !important;
    white-space: nowrap !important;
  }

  /* 4. LE CODE PROMO. Champ et bouton a la meme hauteur, cote a cote,
        dans la largeur. Avant : 178 + 155 a x=47, soit 51 px hors ecran,
        et 8 px d'ecart de hauteur entre les deux. */
  html body:not(#a):not(#b):not(#c) .coupon{
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 18px 0 0 !important;
    padding: 0 !important;
  }
  html body:not(#a):not(#b):not(#c) .coupon input[name="coupon_code"]{
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: auto !important;
    height: 44px !important;
    margin: 0 !important;
    padding: 0 12px !important;
    font-size: 11px !important;
  }
  html body:not(#a):not(#b):not(#c) .coupon button{
    flex: 0 0 auto !important;
    height: 44px !important;
    margin: 0 !important;
    padding: 0 14px !important;
    font-size: 9px !important;
    white-space: nowrap !important;
  }
}

/* 5. « SOUS-TOTAL » : beige sur blanc, contraste 1,05:1. */
html body:not(#a):not(#b):not(#c) .cart-subtotal th,
html body:not(#a):not(#b):not(#c) .cart_totals th{
  color: #22252b !important;
}

/* 6. LA LIGNE DU CODE PROMO. Le theme peint la ligne ENTIERE en vert :
      deux aplats qui se chevauchent, et le libelle par-dessus. On rend
      la ligne au blanc et on garde le vert pour le texte. */
html body:not(#a):not(#b):not(#c) tr.cart-discount,
html body:not(#a):not(#b):not(#c) tr.cart-discount th,
html body:not(#a):not(#b):not(#c) tr.cart-discount td{
  background-color: transparent !important;
  background-image: none !important;
  /* couleur de Jhouny retiree */
}
html body:not(#a):not(#b):not(#c) tr.cart-discount th{
  font-size: 11px !important;
  letter-spacing: .04em !important;
}
html body:not(#a):not(#b):not(#c) tr.cart-discount .woocommerce-remove-coupon{
  color: #8a8f98 !important;
  font-size: 10px !important;
  text-decoration: underline !important;
  white-space: nowrap !important;
}

/* 7. LE TOTAL sur une seule ligne. Avant : « 74 € » / « (dont 12 € » /
      « VAT) », trois lignes pour un montant. */
html body:not(#a):not(#b):not(#c) .order-total td,
html body:not(#a):not(#b):not(#c) .cart-subtotal td,
html body:not(#a):not(#b):not(#c) .cart_totals .amount{
  white-space: nowrap !important;
}
html body:not(#a):not(#b):not(#c) .order-total .includes_tax,
html body:not(#a):not(#b):not(#c) .order-total small{
  display: block !important;
  margin-top: 4px !important;
  font-size: 10.5px !important;
  opacity: .7 !important;
  white-space: nowrap !important;
}

/* 8. LE BOUTON. Le texte se calait en haut parce que le line-height
      (13 px) valait la taille de police. On centre pour de vrai. */
html body:not(#a):not(#b):not(#c) .checkout-button,
html body:not(#a):not(#b):not(#c) .wc-proceed-to-checkout a.button{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 52px !important;
  padding: 0 18px !important;
  line-height: 1 !important;
}

/* 9. LES GOUTTIERES. Le contenu ne touche jamais le bord de l'ecran. */
@media (max-width: 767px){
  html body:not(#a):not(#b):not(#c) .woocommerce-cart .cart_totals,
  html body:not(#a):not(#b):not(#c) .woocommerce-cart .woocommerce-cart-form{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  html body:not(#a):not(#b):not(#c) .woocommerce-cart .cart_totals > *{
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}



/* ====================================================================
   LA CHARTE DES PAGES INTERIEURES
   ====================================================================
   Une seule mise en page pour Concept, Engagements, FAQ et Contact :
   sur-titre en petites capitales, titre de page a la meme taille
   partout, gouttieres de 16 px, colonnes pleine largeur. */
@media (max-width: 767px){

  /* 1. LES COLONNES REPRENNENT LA LARGEUR DE L'ECRAN.
        Mesure avant : 203 px sur 375, centrees. C'est la cause de tous
        les textes etrangles et des retraits absurdes. */
  html body:not(#a):not(#b):not(#c) .vc_column_container,
  html body:not(#a):not(#b):not(#c) .vc_col-sm-3,
  html body:not(#a):not(#b):not(#c) .vc_col-sm-4,
  html body:not(#a):not(#b):not(#c) .vc_col-sm-6,
  html body:not(#a):not(#b):not(#c) .vc_col-sm-8,
  html body:not(#a):not(#b):not(#c) .vc_col-sm-9,
  html body:not(#a):not(#b):not(#c) .vc_col-sm-12{
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  html body:not(#a):not(#b):not(#c) .vc_column-inner,
  html body:not(#a):not(#b):not(#c) .wpb_content_element{
    width: auto !important;
    max-width: 100% !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    box-sizing: border-box !important;
  }
  /* pas de gouttiere qui se cumule d'un niveau a l'autre */
  html body:not(#a):not(#b):not(#c) .wpb_content_element .wpb_content_element,
  html body:not(#a):not(#b):not(#c) .vc_column-inner .vc_column-inner{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* 2. LE TITRE DE PAGE : la meme taille partout. Avant, 21 px sur la
        FAQ et 48 sur les Engagements. */
  html body:not(#a):not(#b):not(#c) .wpb_wrapper > h1,
  html body:not(#a):not(#b):not(#c) .wpb_wrapper > h2,
  html body:not(#a):not(#b):not(#c) h2.engagements-title-nature-01,
  html body:not(#a):not(#b):not(#c) .jh-titre{
    font-size: 26px !important;
    line-height: 1.15 !important;
    letter-spacing: .06em !important;
    text-align: center !important;
    margin: 18px 0 20px !important;
  }

  /* 3. L'ESPACE AVANT LE TITRE. 314 px de vide avant « Questions
        frequentes », dont 201 px pour la seule ligne du sur-titre. */
  html body:not(#a):not(#b):not(#c) .wpb_text_column:first-child,
  html body:not(#a):not(#b):not(#c) .vc_row > .vc_column_container:first-child .wpb_wrapper > .wpb_text_column:first-child{
    margin-bottom: 0 !important;
  }
  html body:not(#a):not(#b):not(#c) .vc_row{
    padding-top: 0 !important;
  }

  /* 4. L'ACCORDEON DE LA FAQ. Le titre partait a 143 px du bord. */
  html body:not(#a):not(#b):not(#c) .vc_toggle{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  html body:not(#a):not(#b):not(#c) .vc_toggle_title{
    padding-left: 28px !important;
    padding-right: 0 !important;
    font-size: 12.5px !important;
    line-height: 1.4 !important;
    letter-spacing: .03em !important;
    text-align: left !important;
  }
  html body:not(#a):not(#b):not(#c) .vc_toggle_content{
    padding-left: 28px !important;
    padding-right: 0 !important;
    font-size: 12.5px !important;
    line-height: 1.6 !important;
  }

  /* 5. LE FORMULAIRE DE CONTACT. Les champs etaient blancs sur le beige
        de la page : on rend le fond au beige et on retire le cadre qui
        s'ajoutait a la bordure du champ. */
  html body:not(#a):not(#b):not(#c) .gform_wrapper input[type="text"],
  html body:not(#a):not(#b):not(#c) .gform_wrapper input[type="email"],
  html body:not(#a):not(#b):not(#c) .gform_wrapper input[type="tel"],
  html body:not(#a):not(#b):not(#c) .gform_wrapper textarea,
  html body:not(#a):not(#b):not(#c) .gform_wrapper select{
    background-color: transparent !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  html body:not(#a):not(#b):not(#c) .gform_wrapper .gform_body,
  html body:not(#a):not(#b):not(#c) .gform_wrapper .gform_fields,
  html body:not(#a):not(#b):not(#c) .gform_wrapper .gfield{
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}




/* ====================================================================
   SOCLE GOYA : LES BLOCS POSES APRES LA PREMIERE EXTRACTION
   ====================================================================
   Corrections faites sur jhounysecret apres la construction du socle,
   toutes structurelles : panier en blocs, cartes cliquables, retour au
   panier en lien, tunnel de commande en blanc.
   ==================================================================== */

/* ====================================================================
   LA PAGE PANIER : CROIX, QUANTITE, TRAITS
   ==================================================================== */

/* 1. LA CROIX. 73 px de large pour 16 de haut : un X etire en travers du
      nom du produit. */
html body:not(#a):not(#b):not(#c) .woocommerce-cart-form a.remove,
html body:not(#a):not(#b):not(#c) .shop_table a.remove{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  max-width: 22px !important;
  padding: 0 !important;
  margin: 0 !important;
  font-size: 17px !important;
  line-height: 1 !important;
  color: #8a8f98 !important;
  background: transparent !important;
  border: none !important;
  overflow: hidden !important;
  text-indent: 0 !important;
}
html body:not(#a):not(#b):not(#c) .woocommerce-cart-form a.remove::before,
html body:not(#a):not(#b):not(#c) .woocommerce-cart-form a.remove::after{
  content: none !important;
  display: none !important;
}

/* 2. LA QUANTITE. 25 px de large : le « + » venait se coller au prix. */
@media (max-width: 767px){
  html body:not(#a):not(#b):not(#c) .woocommerce-cart-form .quantity{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 96px !important;
    min-width: 96px !important;
    height: 34px !important;
    border: 1px solid #ddd8ce !important;
  }
  html body:not(#a):not(#b):not(#c) .woocommerce-cart-form .quantity input.qty{
    width: 34px !important;
    border: none !important;
    text-align: center !important;
    background: transparent !important;
  }
  html body:not(#a):not(#b):not(#c) .woocommerce-cart-form .quantity .plus,
  html body:not(#a):not(#b):not(#c) .woocommerce-cart-form .quantity .minus{
    width: 28px !important;
    border: none !important;
    background: transparent !important;
  }
}

/* 3. UN SEUL TRAIT. Meme couleur, meme epaisseur, jamais transparent :
      un trait semi-transparent change de teinte selon ce qu'il y a
      derriere, et deux cellules voisines ne se raccordent plus. */
html body:not(#a):not(#b):not(#c) .woocommerce-cart-form tr,
html body:not(#a):not(#b):not(#c) .woocommerce-cart-form th,
html body:not(#a):not(#b):not(#c) .woocommerce-cart-form td,
html body:not(#a):not(#b):not(#c) .cart_totals tr,
html body:not(#a):not(#b):not(#c) .cart_totals th,
html body:not(#a):not(#b):not(#c) .cart_totals td{
  border-left: none !important;
  border-right: none !important;
  border-bottom: none !important;
  border-top: 1px solid #e8e4dc !important;
}
/* la premiere ligne n'a pas de trait au-dessus */
html body:not(#a):not(#b):not(#c) .woocommerce-cart-form tr:first-child th,
html body:not(#a):not(#b):not(#c) .woocommerce-cart-form tr:first-child td,
html body:not(#a):not(#b):not(#c) .cart_totals tr:first-child th,
html body:not(#a):not(#b):not(#c) .cart_totals tr:first-child td{
  border-top: none !important;
}



/* ====================================================================
   LA COLONNE DE LA QUANTITE
   ====================================================================
   55 px de colonne pour un selecteur de 96 : il debordait sur le
   sous-total. */
@media (max-width: 767px){
  html body:not(#a):not(#b):not(#c) .woocommerce-cart-form .product-quantity{
    width: 104px !important;
    min-width: 104px !important;
    flex: 0 0 104px !important;
    max-width: 104px !important;
    padding-right: 6px !important;
  }
  html body:not(#a):not(#b):not(#c) .woocommerce-cart-form .product-subtotal{
    width: 62px !important;
    min-width: 62px !important;
    flex: 0 0 62px !important;
    max-width: 62px !important;
    text-align: right !important;
    white-space: nowrap !important;
  }
  html body:not(#a):not(#b):not(#c) .woocommerce-cart-form .quantity{
    width: 92px !important;
    min-width: 92px !important;
  }
  html body:not(#a):not(#b):not(#c) .woocommerce-cart-form .product-name{
    width: calc(100% - 172px) !important;
    max-width: calc(100% - 172px) !important;
    flex: 1 1 auto !important;
  }
}



/* ====================================================================
   LE PANNEAU DU PANIER : EN-TETE ALIGNE, BOUTONS ASSORTIS
   ==================================================================== */

/* 1. LES DEUX BOUTONS, la meme police et la meme graisse. */
html body:not(#a):not(#b):not(#c) #side-cart .woocommerce-mini-cart__buttons a,
html body:not(#a):not(#b):not(#c) #side-cart .woocommerce-mini-cart__buttons a.checkout,
html body:not(#a):not(#b):not(#c) .mini-cart .woocommerce-mini-cart__buttons a{
  font-family: futura, 'Futura PT', 'Jost', sans-serif !important;
  font-weight: 600 !important;
  font-size: 10px !important;
  letter-spacing: .14em !important;
}

/* 2. L'EN-TETE sur la meme verticale que les produits : les 5 px de
      decalage venaient du conteneur interne du bandeau. */
html body:not(#a):not(#b):not(#c) #side-cart > header,
html body:not(#a):not(#b):not(#c) #side-cart .panel-header-inner,
html body:not(#a):not(#b):not(#c) #side-cart .container{
  padding-left: 25px !important;
  padding-right: 25px !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}
html body:not(#a):not(#b):not(#c) #side-cart .panel-header-inner{
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}
html body:not(#a):not(#b):not(#c) #side-cart .side-panel-title{
  margin-left: 0 !important;
  padding-left: 0 !important;
}
html body:not(#a):not(#b):not(#c) #side-cart .et-close{
  margin-right: 0 !important;
  right: auto !important;
}



/* ====================================================================
   LES ALIGNEMENTS, EN DERNIER MOT
   ==================================================================== */

/* 1. L'EN-TETE DU PANNEAU sur la verticale des produits : 50 px, pas 75. */
html body:not(#a):not(#b):not(#c) #side-cart > header,
html body:not(#a):not(#b):not(#c) #side-cart > header > .container{
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}
html body:not(#a):not(#b):not(#c) #side-cart .panel-header-inner{
  padding-left: 50px !important;
  padding-right: 50px !important;
  margin: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

/* 2. LA LIGNE DU PANIER : les colonnes Bootstrap ne tiennent pas a cette
      largeur, la quantite se posait sur le nom. */
@media (max-width: 767px){
  html body:not(#a):not(#b):not(#c) .woocommerce-cart-form .et-product-details > .row{
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    row-gap: 8px !important;
    margin: 0 !important;
  }
  html body:not(#a):not(#b):not(#c) .woocommerce-cart-form .product-name{
    flex: 1 1 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
  }
  html body:not(#a):not(#b):not(#c) .woocommerce-cart-form .product-quantity{
    flex: 0 0 100px !important;
    width: 100px !important;
    max-width: 100px !important;
    padding: 0 !important;
    order: 2 !important;
  }
  html body:not(#a):not(#b):not(#c) .woocommerce-cart-form .product-subtotal{
    flex: 1 1 auto !important;
    width: auto !important;
    max-width: none !important;
    text-align: right !important;
    padding: 0 !important;
    order: 3 !important;
    white-space: nowrap !important;
  }
  /* le prix unitaire sous le nom, pas en double au milieu */

}



/* ====================================================================
   LES COLONNES DU PANIER : DES LARGEURS, PAS UN PARTAGE A EGALITE
   ====================================================================
   `table-layout: fixed` sans largeurs donnait 194 px a la colonne photo
   et laissait 226 px vides a droite. */
html body:not(#a):not(#b):not(#c) .woocommerce-cart-form td.product-thumbnail,
html body:not(#a):not(#b):not(#c) .woocommerce-cart-form th.product-thumbnail{
  width: 96px !important;
  max-width: 96px !important;
  min-width: 96px !important;
}
html body:not(#a):not(#b):not(#c) .woocommerce-cart-form td.et-product-details{
  width: auto !important;
  max-width: none !important;
}
html body:not(#a):not(#b):not(#c) .woocommerce-cart-form .et-product-details > .row{
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
}

@media (max-width: 767px){
  html body:not(#a):not(#b):not(#c) .woocommerce-cart-form td.product-thumbnail,
  html body:not(#a):not(#b):not(#c) .woocommerce-cart-form th.product-thumbnail{
    width: 84px !important;
    max-width: 84px !important;
    min-width: 84px !important;
  }
  /* la quantite a gauche, le sous-total colle au bord droit */
  html body:not(#a):not(#b):not(#c) .woocommerce-cart-form .product-subtotal{
    margin-left: auto !important;
    text-align: right !important;
  }
}



/* ====================================================================
   LA LIGNE DU PANIER, D'UN BORD A L'AUTRE
   ==================================================================== */
html body:not(#a):not(#b):not(#c) .woocommerce-cart-form .et-product-details > .row{
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  row-gap: 10px !important;
}
/* le nom prend toute la premiere rangee */
html body:not(#a):not(#b):not(#c) .woocommerce-cart-form .product-name{
  flex: 1 1 100% !important;
  width: 100% !important;
  max-width: 100% !important;
  order: 1 !important;
  padding: 0 !important;
}
html body:not(#a):not(#b):not(#c) .woocommerce-cart-form .product-name > a{
  display: block !important;
}
/* le prix unitaire passe a gauche de la seconde rangee */
html body:not(#a):not(#b):not(#c) .woocommerce-cart-form .product-name .product-price{
  display: none !important;
}
html body:not(#a):not(#b):not(#c) .woocommerce-cart-form .product-quantity{
  flex: 0 0 auto !important;
  width: auto !important;
  max-width: none !important;
  order: 2 !important;
  margin-right: auto !important;
  padding: 0 !important;
}
html body:not(#a):not(#b):not(#c) .woocommerce-cart-form .product-subtotal{
  flex: 0 0 auto !important;
  width: auto !important;
  max-width: none !important;
  order: 3 !important;
  margin-left: auto !important;
  text-align: right !important;
  white-space: nowrap !important;
  font-size: 14px !important;
  padding: 0 !important;
}



/* ====================================================================
   LE PANIER EN BLOCS SUR TELEPHONE
   ====================================================================
   La table imposait sa repartition et laissait la moitie droite vide.
   Sur telephone, chaque ligne devient un bloc : photo a gauche, texte et
   chiffres sur toute la largeur restante. */
@media (max-width: 767px){

  html body:not(#a):not(#b):not(#c) .woocommerce-cart-form table,
  html body:not(#a):not(#b):not(#c) .woocommerce-cart-form tbody,
  html body:not(#a):not(#b):not(#c) .woocommerce-cart-form tr.woocommerce-cart-form__cart-item{
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  html body:not(#a):not(#b):not(#c) .woocommerce-cart-form tr.woocommerce-cart-form__cart-item{
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
    padding: 16px 0 !important;
    border-top: 1px solid #e8e4dc !important;
  }
  html body:not(#a):not(#b):not(#c) .woocommerce-cart-form td.product-thumbnail{
    display: block !important;
    flex: 0 0 74px !important;
    width: 74px !important;
    max-width: 74px !important;
    min-width: 74px !important;
    padding: 0 !important;
    border: none !important;
  }
  html body:not(#a):not(#b):not(#c) .woocommerce-cart-form td.product-thumbnail img{
    width: 74px !important;
    height: auto !important;
  }
  html body:not(#a):not(#b):not(#c) .woocommerce-cart-form td.et-product-details{
    display: block !important;
    flex: 1 1 auto !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    padding: 0 !important;
    border: none !important;
  }
  html body:not(#a):not(#b):not(#c) .woocommerce-cart-form .et-product-details > .row{
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    row-gap: 10px !important;
  }
  html body:not(#a):not(#b):not(#c) .woocommerce-cart-form .product-name{
    flex: 1 1 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    order: 1 !important;
    padding: 0 !important;
    font-size: 12.5px !important;
    line-height: 1.35 !important;
  }
  html body:not(#a):not(#b):not(#c) .woocommerce-cart-form .product-quantity{
    order: 2 !important;
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
    padding: 0 !important;
  }
  html body:not(#a):not(#b):not(#c) .woocommerce-cart-form .product-subtotal{
    order: 3 !important;
    flex: 1 1 auto !important;
    width: auto !important;
    max-width: none !important;
    margin-left: auto !important;
    padding: 0 !important;
    text-align: right !important;
    font-size: 14px !important;
    white-space: nowrap !important;
  }
  /* la croix, en haut a droite de la ligne */
  html body:not(#a):not(#b):not(#c) .woocommerce-cart-form .product-name a.remove{
    float: right !important;
    margin-left: 8px !important;
  }
}



/* ====================================================================
   LE PRIX UNITAIRE, UNE SEULE FOIS
   ====================================================================
   Le sous-total suffit : a quantite 1 c'est le meme montant, et au-dela
   c'est lui qui compte. */
html body:not(#a):not(#b):not(#c) .woocommerce-cart-form .product-price,
html body:not(#a):not(#b):not(#c) .woocommerce-cart-form td.product-price,
html body:not(#a):not(#b):not(#c) .woocommerce-cart-form .et-product-details .product-price{
  display: none !important;
}



/* ====================================================================
   LES CARTES PRODUIT REDEVIENNENT CLIQUABLES
   ====================================================================
   Le conteneur de la section du titre debordait sur la premiere rangee
   et interceptait les clics. Les cartes passent au-dessus. */
html body:not(#a):not(#b):not(#c) ul.products li.product{
  position: relative !important;
  z-index: 2 !important;
}
html body:not(#a):not(#b):not(#c) ul.products li.product a{
  position: relative !important;
  z-index: 3 !important;
}



/* ====================================================================
   LE PSEUDO-ELEMENT QUI AVALAIT LES CLICS
   ====================================================================
   `.sec_row::after` : 334 x 405 px, z-index 999, invisible, pose sur la
   premiere rangee de produits. Un decor ne capte pas le pointeur. */
html body:not(#a):not(#b):not(#c) .sec_row::after,
html body:not(#a):not(#b):not(#c) .sec_row::before,
html body:not(#a):not(#b):not(#c) .vc_row::after,
html body:not(#a):not(#b):not(#c) .vc_row::before{
  pointer-events: none !important;
}



/* ====================================================================
   LE PRIX UNITAIRE MASQUE, ET LE BANDEAU DU HAUT EN BLANC
   ==================================================================== */

/* le prix unitaire : specificite portee au niveau des regles qui le
   rallumaient, et pose en dernier */
html body:not(#a):not(#b):not(#c) .woocommerce-cart-form td.et-product-details .product-price,
html body:not(#a):not(#b):not(#c) .woocommerce-cart-form .product-name .product-price,
html body:not(#a):not(#b):not(#c) .woocommerce-cart-form div.product-price{
  display: none !important;
}

/* le bandeau d'annonce : texte blanc sur le vert de la marque */
html body:not(#a):not(#b):not(#c) .top-bar,
html body:not(#a):not(#b):not(#c) .top-bar *,
html body:not(#a):not(#b):not(#c) .header-notice,
html body:not(#a):not(#b):not(#c) .header-notice *,
html body:not(#a):not(#b):not(#c) .announcement-bar,
html body:not(#a):not(#b):not(#c) .announcement-bar *{
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}



/* ====================================================================
   LE BANDEAU DE LIVRAISON, LISIBLE
   ====================================================================
   Texte #22252b sur le vert #094846 : contraste 1,6:1. */
html body:not(#a):not(#b):not(#c) .vt-bandeau-livraison,
html body:not(#a):not(#b):not(#c) .vt-bandeau-livraison *{
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}



/* ====================================================================
   LE FOND DES BLOCS DE REASSURANCE
   ====================================================================
   « Garantie premiere commande » et « Non teste sur les animaux » se
   posent sur un gris tres clair, sans bordure. */
html body.single-product:not(#a):not(#b):not(#c) .custom-money-back-guarantee{
  background-color: #f9f9f9 !important;
  padding: 24px 20px !important;
  margin-bottom: 14px !important;
  border: none !important;
  border-radius: 2px !important;
}
html body.single-product:not(#a):not(#b):not(#c) .custom-money-back-guarantee > *:last-child{
  margin-bottom: 0 !important;
}



/* ====================================================================
   « VALIDER LA COMMANDE », UN CRAN PLUS DISCRET
   ====================================================================
   13 px en HussarBold : la police est grasse par construction. Futura
   en 11,5 px donne le meme bouton, en moins lourd. */
html body:not(#a):not(#b):not(#c) .checkout-button,
html body:not(#a):not(#b):not(#c) .wc-proceed-to-checkout a.button{
  font-family: futura, 'Futura PT', 'Jost', sans-serif !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  letter-spacing: .14em !important;
}



/* ====================================================================
   LA PAGE DE COMMANDE EN BLANC
   ====================================================================
   Meme traitement que la fiche produit : pas de beige sur les tunnels
   d'achat. */
html body.woocommerce-checkout:not(#a):not(#b):not(#c),
html body.woocommerce-checkout:not(#a):not(#b):not(#c) #wrapper,
html body.woocommerce-checkout:not(#a):not(#b):not(#c) .page-wrapper-inner,
html body.woocommerce-checkout:not(#a):not(#b):not(#c) .site-content,
html body.woocommerce-checkout:not(#a):not(#b):not(#c) #main,
html body.woocommerce-cart:not(#a):not(#b):not(#c),
html body.woocommerce-cart:not(#a):not(#b):not(#c) #wrapper,
html body.woocommerce-cart:not(#a):not(#b):not(#c) .page-wrapper-inner,
html body.woocommerce-cart:not(#a):not(#b):not(#c) .site-content,
html body.woocommerce-cart:not(#a):not(#b):not(#c) #main,
html body.page-id-8:not(#a):not(#b):not(#c),
html body.page-id-8:not(#a):not(#b):not(#c) #wrapper,
html body.page-id-8:not(#a):not(#b):not(#c) .page-wrapper-inner,
html body.page-id-8:not(#a):not(#b):not(#c) .site-content,
html body.page-id-8:not(#a):not(#b):not(#c) #main{
  background-color: #ffffff !important;
}



/* ====================================================================
   LE DEGRADE VIOLET DU PIED DE PAGE
   ====================================================================
   `linear-gradient(rgb(184,164,220) ...)` pose sur le footer. Sur la
   page de commande il n'en reste qu'une bande de 36 px, bien visible. */
html body.woocommerce-checkout:not(#a):not(#b):not(#c) footer.site-footer,
html body.woocommerce-checkout:not(#a):not(#b):not(#c) .footer,
html body.page-id-8:not(#a):not(#b):not(#c) footer.site-footer,
html body.page-id-8:not(#a):not(#b):not(#c) .footer{
  background-image: none !important;
  background-color: #ffffff !important;
}



/* ====================================================================
   LE LIEN DE CONFIDENTIALITE ET LE BOUTON « COMMANDER »
   ==================================================================== */

/* le lien reprend la taille de la phrase, et se signale par un trait */
html body:not(#a):not(#b):not(#c) .woocommerce-privacy-policy-text a,
html body:not(#a):not(#b):not(#c) .woocommerce-privacy-policy-link,
html body:not(#a):not(#b):not(#c) .woocommerce-terms-and-conditions-link{
  font-size: inherit !important;
  font-family: inherit !important;
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
  color: inherit !important;
}

/* « Commander » : meme traitement que « Valider la commande ».
   HussarBold est grasse par construction, Futura l'allege. */
html body:not(#a):not(#b):not(#c) #place_order,
html body:not(#a):not(#b):not(#c) button[name="woocommerce_checkout_place_order"]{
  font-family: futura, 'Futura PT', 'Jost', sans-serif !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  letter-spacing: .14em !important;
}



/* ====================================================================
   « RETOUR AU PANIER » : UN LIEN, PAS UN BOUTON
   ====================================================================
   Un retour ne pese pas autant que la validation de commande. */
html body:not(#a):not(#b):not(#c) .woocommerce-checkout .return-to-cart,
html body:not(#a):not(#b):not(#c) .woocommerce-checkout a[href*="panier"].button,
html body:not(#a):not(#b):not(#c) .checkout .wc-backward,
html body:not(#a):not(#b):not(#c) .woocommerce-checkout .wc-backward{
  background: none !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: #22252b !important;
  padding: 0 !important;
  min-height: 0 !important;
  font-size: 11.5px !important;
  font-weight: 500 !important;
  letter-spacing: .06em !important;
  text-transform: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  text-decoration: none !important;
}
/* la fleche, dessinee au trait devant le texte */
html body:not(#a):not(#b):not(#c) .woocommerce-checkout .wc-backward::before,
html body:not(#a):not(#b):not(#c) .woocommerce-checkout .return-to-cart::before{
  content: "" !important;
  width: 14px !important;
  height: 14px !important;
  flex: 0 0 14px !important;
  background-color: currentColor !important;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5'/%3E%3Cpath d='M11.5 18.5 5 12l6.5-6.5'/%3E%3C/svg%3E") !important;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5'/%3E%3Cpath d='M11.5 18.5 5 12l6.5-6.5'/%3E%3C/svg%3E") !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
  -webkit-mask-position: center !important;
  mask-position: center !important;
  -webkit-mask-size: contain !important;
  mask-size: contain !important;
}




/* ====================================================================
   SOCLE GOYA : LA HAUTEUR DU BANDEAU DE TITRE, RATTRAPAGE
   ====================================================================
   Mesure sur maisonsd.lystes.ai /boutique/, a 375 px : le bandeau fait
   220 px pour un titre de 40 px. Trois niveaux de rembourrage :

     .regular-title                      34 + 28
     .row.woocommerce-products-header    26 + 24
     h1.et-shop-title                    30 + 34   <- non vise jusqu'ici

   Mon premier socle ne nommait que le `<header>`, or selon les pages le
   thème utilise un `<div class="row woocommerce-products-header">`, et
   pose en plus un rembourrage sur le titre lui-meme.

   On remet tout a zero et on porte l'air sur un seul niveau. */
@media (max-width: 767px){

  html body:not(#a):not(#b):not(#c) .regular-title,
  html body:not(#a):not(#b):not(#c) .regular-title .hero-header-container,
  html body:not(#a):not(#b):not(#c) .regular-title .row,
  html body:not(#a):not(#b):not(#c) .regular-title .col-lg-8,
  html body:not(#a):not(#b):not(#c) .regular-title h1,
  html body:not(#a):not(#b):not(#c) h1.et-shop-title,
  html body:not(#a):not(#b):not(#c) .woocommerce-products-header{
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  /* un seul niveau porte l'air : environ 96 px de bandeau au total */
  html body:not(#a):not(#b):not(#c) .regular-title{
    padding-top: 28px !important;
    padding-bottom: 26px !important;
  }

  /* la description de page, quand elle est vide, ne prend pas de place */
  html body:not(#a):not(#b):not(#c) .page-description:empty{
    display: none !important;
  }
}



/* ====================================================================
   SOCLE GOYA : LA BARRE DU HAUT DU MENU MOBILE
   ====================================================================
   Mesure sur maisonsd.lystes.ai : la bande `.mobile-bar` est en
   rgb(248,248,248), le panneau en beige. Deux gris casses poses l'un
   contre l'autre : la limite se voit comme un trait.

   Mon bloc d'origine corrigeait avec le beige de Jhouny ecrit en dur,
   ce qui ne vaut que pour ce site. Ici la barre devient transparente :
   elle prend alors la couleur du panneau, quelle que soit la marque. */
@media (max-width: 991px){
  html body:not(#a):not(#b):not(#c) .side-mobile-menu .mobile-bar,
  html body:not(#a):not(#b):not(#c) .side-mobile-menu .mobile-bar.light,
  html body:not(#a):not(#b):not(#c) .side-panel.side-menu .mobile-bar,
  html body:not(#a):not(#b):not(#c) #mobile-menu .mobile-bar{
    background-color: transparent !important;
    background-image: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
  }
  /* la croix de fermeture, sans pastille grise */
  html body:not(#a):not(#b):not(#c) #mobile-menu .et-close,
  html body:not(#a):not(#b):not(#c) .side-mobile-menu .et-close{
    background-color: transparent !important;
    box-shadow: none !important;
  }
}



/* ====================================================================
   SOCLE GOYA : LES DEUX DERNIERS VIDES
   ====================================================================
   Mesures sur maisonsd.lystes.ai a 375 px. */
@media (max-width: 767px){

  /* 1. L'AIR AUTOUR DU TITRE DE PAGE
        Mesure : le titre « ENGAGEMENTS » porte padding 16 en haut et
        35 en bas, PLUS marge 18 et 20. Quatre valeurs pour un seul
        ecart, et 60 px de vide avant le premier paragraphe.
        On pose un seul ecart, sur la marge. */
  html body:not(#a):not(#b):not(#c) [class*="engagements-header"] h1,
  html body:not(#a):not(#b):not(#c) [class*="engagements-header"] h2,
  html body:not(#a):not(#b):not(#c) [class*="-header-nature"] h1,
  html body:not(#a):not(#b):not(#c) [class*="-header-nature"] h2{
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 8px !important;
    margin-bottom: 18px !important;
  }
  html body:not(#a):not(#b):not(#c) [class*="-header-nature"]{
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }
  html body:not(#a):not(#b):not(#c) [class*="-column-nature"]{
    padding-top: 0 !important;
  }

  /* 2. LA BANDE BLANCHE AVANT LE PIED DE PAGE
        Le contenu s'arrete, et le fond de la page apparait sur une
        centaine de pixels. On supprime le vide plutot que de le
        peindre : une couleur en dur ne vaudrait que pour une marque. */
  html body:not(#a):not(#b):not(#c) .site-content{
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }
  html body:not(#a):not(#b):not(#c) .site-content > *:last-child,
  html body:not(#a):not(#b):not(#c) .wpb-content-wrapper > *:last-child,
  html body:not(#a):not(#b):not(#c) .vc_section:last-child,
  html body:not(#a):not(#b):not(#c) .sec_row:last-child{
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }
  html body:not(#a):not(#b):not(#c) .page-padding{
    padding-bottom: 0 !important;
  }
}



/* ====================================================================
   SOCLE GOYA : LES COLONNES ETROITES QUI DECENTRENT LES TITRES
   ====================================================================
   Mesure sur maisonsd.lystes.ai, accueil, a 375 px : le titre
   « SKINCARE » et son sur-titre sont centres... dans un conteneur de
   238 px place a x=48. A l'ecran, ils paraissent donc decales vers la
   gauche.

   Mon bloc precedent ne nommait que `.vc_col-sm-*`. Le theme utilise
   aussi les variantes md, lg et xs selon les pages. On les prend
   toutes, plus les conteneurs internes. */
@media (max-width: 767px){

  html body:not(#a):not(#b):not(#c) [class*="vc_col-sm-"],
  html body:not(#a):not(#b):not(#c) [class*="vc_col-md-"],
  html body:not(#a):not(#b):not(#c) [class*="vc_col-lg-"],
  html body:not(#a):not(#b):not(#c) [class*="vc_col-xs-"],
  html body:not(#a):not(#b):not(#c) [class*="col-md-"],
  html body:not(#a):not(#b):not(#c) [class*="col-lg-"]{
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    float: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* le sur-titre et le titre sont centres, et prennent la largeur utile */
  html body:not(#a):not(#b):not(#c) .vt-surtitre,
  html body:not(#a):not(#b):not(#c) .vt-titre-uni,
  html body:not(#a):not(#b):not(#c) .jh-surtitre,
  html body:not(#a):not(#b):not(#c) [class*="surtitre"],
  html body:not(#a):not(#b):not(#c) [class*="titre-uni"]{
    text-align: center !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}



/* ====================================================================
   SOCLE GOYA : LE DIAPORAMA D'ACCUEIL, BORD A BORD
   ====================================================================
   Mesure sur maisonsd.lystes.ai, accueil, a 337 px : le module
   Slider Revolution fait 270 px a x=33. Il vit dans un
   `.vc_column-inner` qui porte 16 px de gouttiere, plus le retrait de
   sa propre ligne.

   JP : le diaporama doit aller d'un bord a l'autre, et lui SEUL. Le
   texte des autres blocs garde ses gouttieres.

   On ne vise donc que les conteneurs qui portent reellement un module
   de diaporama, grace a `:has()`. */
@media (max-width: 767px){

  html body:not(#a):not(#b):not(#c) .vc_column-inner:has(rs-module),
  html body:not(#a):not(#b):not(#c) .vc_column-inner:has(rs-fullwidth-wrap),
  html body:not(#a):not(#b):not(#c) .vc_column-inner:has(.rev_slider),
  html body:not(#a):not(#b):not(#c) .vc_column-inner:has(.rev_slider_wrapper),
  html body:not(#a):not(#b):not(#c) .wpb_column:has(rs-module),
  html body:not(#a):not(#b):not(#c) .vc_row:has(rs-module),
  html body:not(#a):not(#b):not(#c) .vc_row:has(.rev_slider_wrapper){
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* le module lui-meme prend toute la largeur */
  /* On ne touche PLUS aux dimensions du module : Slider Revolution
     les calcule lui-meme, et une largeur forcee les mettait a zero.
     Seuls les conteneurs perdent leur gouttiere, plus haut. */
}



/* ====================================================================
   SOCLE GOYA : TOUT LE RESTE, COULEURS DE MARQUE RETIREES
   ====================================================================
   Les blocs de jhounysecret que mon tri avait ecartes a tort. Seules
   les declarations posant le beige #fcf8f1 ou le vert #094846 ont ete
   neutralisees, ligne par ligne : la structure est conservee.
   Les blocs vraiment propres a Jhouny (routines, hero) restent dehors.
   ==================================================================== */

/* ====================================================================
   SOCLE GOYA : TOUT LE RESTE, COULEURS DE MARQUE RETIREES
   ====================================================================
   Les blocs de jhounysecret que mon tri avait ecartes. Ici, seules les
   declarations qui posaient le beige #fcf8f1 ou le vert #094846 ont ete
   neutralisees, ligne par ligne. Toute la structure est conservee :
   ecarts entre sur-titre et titre, alignement du pied de page, polices
   de la fiche produit, colonnes des routines.
   ==================================================================== */


/* ====================================================================
   LES ETIQUETTES DE REASSURANCE SUR UNE SEULE LIGNE
   ====================================================================
   Remarque de JP : « ca doit etre sur une ligne donc reduire la police sur
   soin vegan et expertise ». */
html body:not(#a):not(#b) .vt-reassurance,
html body:not(#a):not(#b) .product-reassurance{
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 8px !important;
  align-items: center !important;
}
html body:not(#a):not(#b) .vt-reassurance span,
html body:not(#a):not(#b) .product-reassurance span{
  font-size: 11px !important;
  letter-spacing: .04em !important;
  white-space: nowrap !important;
}
@media (max-width: 520px){
  html body:not(#a):not(#b) .vt-reassurance span,
  html body:not(#a):not(#b) .product-reassurance span{ font-size: 9.5px !important; }
}




/* ====================================================================
   LES CERTIFICATIONS DEFILENT AU LIEU DE S'EMPILER
   ====================================================================
   Mesure a 375 px AVANT : huit pictogrammes de 120 x 120 empiles, 960 px
   de haut, soit huit ecrans a parcourir. APRES : une ligne qui defile au
   doigt, 78 px de haut. */
html body:not(#a):not(#b):not(#c) .vt-certifs-pictos{
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 18px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  scroll-snap-type: x proximity !important;
  padding: 4px 0 10px !important;
  margin: 0 !important;
  height: auto !important;
  width: 100% !important;
  max-width: 100% !important;
}
/* la barre de defilement decalerait les pictogrammes */
html body:not(#a):not(#b):not(#c) .vt-certifs-pictos::-webkit-scrollbar{
  height: 0 !important;
  display: none !important;
}
html body:not(#a):not(#b):not(#c) .vt-certifs-pictos{
  scrollbar-width: none !important;
}
html body:not(#a):not(#b):not(#c) .vt-certifs-pictos > *{
  flex: 0 0 auto !important;
  scroll-snap-align: start !important;
  margin: 0 !important;
}
html body:not(#a):not(#b):not(#c) .vt-certifs-pictos img{
  width: 72px !important;
  height: 72px !important;
  min-width: 72px !important;
  max-width: 72px !important;
  object-fit: contain !important;
  display: block !important;
}
@media (min-width: 768px){
  html body:not(#a):not(#b):not(#c) .vt-certifs-pictos{
    flex-wrap: wrap !important;
    justify-content: center !important;
    overflow-x: visible !important;
    gap: 26px !important;
  }
  html body:not(#a):not(#b):not(#c) .vt-certifs-pictos img{
    width: 84px !important;
    height: 84px !important;
    min-width: 84px !important;
    max-width: 84px !important;
  }
}





/* ====================================================================
   LE MENU ET LE PANIER PASSENT DEVANT LA BARRE DE DIAGNOSTIC
   ====================================================================
   Meme defaut que sur valtheaparis.fr, meme theme : le panneau lateral
   etait a z-index 604, sous la barre flottante du widget et sous l'entete.
   Le panier lateral avait le meme sort. Les deux passent devant ; la barre
   du widget reste au-dessus du contenu, mais sous eux. */
@media (max-width: 991px){

  html body:not(#a):not(#b) .side-mobile-menu,
  html body:not(#a):not(#b) .side-panel.side-menu,
  html body:not(#a):not(#b) .side-panel.side-cart,
  html body:not(#a):not(#b) .side-panel.mini-cart,
  html body:not(#a):not(#b) [class*="cart-panel"],
  html body:not(#a):not(#b) .mini-cart-panel{
    z-index: 100000 !important;
  }
  html body:not(#a):not(#b) .side-panel-overlay,
  html body:not(#a):not(#b) .panel-overlay{
    z-index: 99998 !important;
  }
  /* la barre du widget reste visible, mais derriere les panneaux */
  html body:not(#a):not(#b) .lystes-chat-toggle,
  html body:not(#a):not(#b) [class*="lystes"][class*="sticky"]{
    z-index: 9000 !important;
  }

  /* les entrees du menu tiennent dans l'ecran, comme sur Valthea */
  html body:not(#a):not(#b) #mobile-menu-container ul.sliding-menu-panel > li.menu-item > a,
  html body:not(#a):not(#b) .side-mobile-menu .sliding-menu-panel > li > a{
    font-size: 14px !important;
    line-height: 1.35 !important;
    letter-spacing: .1em !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }
  html body:not(#a):not(#b) #mobile-menu-container ul.sliding-menu-panel{
    padding-bottom: 80px !important;
  }
}




/* ====================================================================
   LA CHARTE DES TITRES : UN SUR-TITRE, PUIS LE TITRE
   ====================================================================
   Structure de la maison, relevee sur la page d'accueil :

       JHOUNY'S SECRET     sur-titre, petit, tres espace
       HAIRCARE            titre, gros, majuscules, Futura

   Elle s'applique partout, y compris a la page des routines. */
html body:not(#a):not(#b):not(#c) .jh-surtitre{
  display: block !important;
  font-family: futura, 'Welcomeweb-Bold', sans-serif !important;
  font-size: 11px !important;
  letter-spacing: .28em !important;
  text-transform: uppercase !important;
  text-align: center !important;
  margin: 0 0 10px !important;
  opacity: .8 !important;
}
html body:not(#a):not(#b):not(#c) h1.jh-titre,
html body:not(#a):not(#b):not(#c) h2.jh-titre{
  font-family: futura, 'Welcomeweb-Bold', sans-serif !important;
  font-size: 26px !important;
  line-height: 1.22 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  text-align: center !important;
  margin: 0 0 32px !important;
}
@media (max-width: 767px){
  html body:not(#a):not(#b):not(#c) h1.jh-titre,
  html body:not(#a):not(#b):not(#c) h2.jh-titre{
    font-size: 21px !important;
    margin: 0 0 26px !important;
  }
}
html body:not(#a):not(#b):not(#c) .jh-entete-section{
  margin: 40px 0 0 !important;
  padding: 0 16px !important;
}




/* ====================================================================
   L'ECART ENTRE LE SUR-TITRE ET LE TITRE
   ====================================================================
   Mesure AVANT : 19 px, soit 10 px de marge basse du sur-titre plus 20 px
   de marge interne haute posee par le theme sur le titre. Deux valeurs qui
   s'ajoutent, dont une invisible tant qu'on ne regarde que les marges.
   APRES : un seul des deux porte l'ecart, 8 px. */
html body:not(#a):not(#b):not(#c) h1.jh-titre,
html body:not(#a):not(#b):not(#c) h2.jh-titre,
html body:not(#a):not(#b):not(#c) .jh-entete-section h1,
html body:not(#a):not(#b):not(#c) .jh-entete-section h2{
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
}
html body:not(#a):not(#b):not(#c) .jh-surtitre{
  margin-bottom: 8px !important;
}
/* le meme couple sur le reste du site */
html body:not(#a):not(#b):not(#c) .vt-surtitre{
  margin-bottom: 8px !important;
}
html body:not(#a):not(#b):not(#c) .vt-titre-uni{
  padding-top: 0 !important;
  margin-top: 0 !important;
}




/* ====================================================================
   LE TITRE DE SECTION SUR MOBILE, REGLAGE DE JP
   ==================================================================== */
@media (max-width: 767px){
  html body:not(#a):not(#b):not(#c) h1.jh-titre,
  html body:not(#a):not(#b):not(#c) h2.jh-titre{
    margin-bottom: 32px !important;
    padding: 0 !important;
  }
}




/* ====================================================================
   LE SUR-TITRE COLLE AU TITRE, REGLAGE DE JP
   ====================================================================
   Marge basse a zero : seul l'interligne du titre separe les deux lignes.
   Ce bloc vient en dernier, il gagne donc sur les valeurs de 10 et 8 px
   posees plus haut. */
html body:not(#a):not(#b):not(#c) .jh-surtitre{
  color: #6b6f76 !important;
  margin-bottom: 0 !important;
}




/* ====================================================================
   LES FINITIONS DU MENU MOBILE
   ====================================================================
   Quatre points releves par JP le 25/09, tous mesures avant correction. */
@media (max-width: 991px){

  /* 1. la police du menu : Futura, comme le reste du site.
        Mesure avant : averta-light-webfont. */
  html body:not(#a):not(#b):not(#c) #mobile-menu-container ul.sliding-menu-panel > li.menu-item > a,
  html body:not(#a):not(#b):not(#c) .side-mobile-menu .sliding-menu-panel > li > a,
  html body:not(#a):not(#b):not(#c) .side-mobile-menu .bottom-extras a,
  html body:not(#a):not(#b):not(#c) .side-mobile-menu .et-menu-account-btn{
    font-family: futura, 'Welcomeweb-Bold', sans-serif !important;
  }

  /* 2. un seul beige, du haut en bas du panneau.
        Mesure avant : rgb(248,248,248) contre rgb(252,248,241). */
  html body:not(#a):not(#b):not(#c) .side-mobile-menu .mobile-bar,
  html body:not(#a):not(#b):not(#c) .side-mobile-menu .mobile-bar.light,
  html body:not(#a):not(#b):not(#c) .side-panel.side-menu .mobile-bar{
  /* couleur de Jhouny retiree */
    border-bottom: none !important;
    box-shadow: none !important;
  }

  /* 3. les icones du panneau se voient : trait anthracite sur beige,
        contraste 12,4:1. */
  html body:not(#a):not(#b):not(#c) .side-mobile-menu .action-icons svg,
  html body:not(#a):not(#b):not(#c) .side-mobile-menu .mobile-bar svg,
  html body:not(#a):not(#b):not(#c) .side-mobile-menu .bottom-extras svg{
    stroke: #22252b !important;
    color: #22252b !important;
    width: 21px !important;
    height: 21px !important;
  }
  html body:not(#a):not(#b):not(#c) .side-mobile-menu .action-icons a,
  html body:not(#a):not(#b):not(#c) .side-mobile-menu .mobile-bar a{
    color: #22252b !important;
    opacity: 1 !important;
  }

  /* 4. l'icone du compte redevient un trait, pas un aplat.
        Les icones Feather sont dessinees en trait ; le theme leur posait
        un remplissage. */
  html body:not(#a):not(#b):not(#c) svg.feather,
  html body:not(#a):not(#b):not(#c) svg.feather-user,
  html body:not(#a):not(#b):not(#c) .et-menu-account-btn svg,
  html body:not(#a):not(#b):not(#c) .et-menu-account-btn svg *{
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.6 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
  }
  html body:not(#a):not(#b):not(#c) .et-menu-account-btn{
    color: #22252b !important;
  }
}




/* ====================================================================
   LE TITRE COLLE A SON SUR-TITRE
   ====================================================================
   Mesure AVANT : 32 px d'ecart, qui venaient d'un `margin-top` sur le
   titre et non d'une marge du sur-titre. Un titre qui suit son sur-titre
   forme un seul bloc avec lui : pas de marge entre les deux. */
html body:not(#a):not(#b):not(#c) .vt-surtitre + h1,
html body:not(#a):not(#b):not(#c) .vt-surtitre + h2,
html body:not(#a):not(#b):not(#c) .vt-surtitre + .vt-titre-uni,
html body:not(#a):not(#b):not(#c) .jh-surtitre + h1,
html body:not(#a):not(#b):not(#c) .jh-surtitre + h2,
html body:not(#a):not(#b):not(#c) .vt-surtitre ~ h1.vt-titre-uni{
  margin-top: 0 !important;
  padding-top: 0 !important;
}
html body:not(#a):not(#b):not(#c) .vt-surtitre,
html body:not(#a):not(#b):not(#c) .jh-surtitre{
  margin-bottom: 2px !important;
  padding-bottom: 0 !important;
}




/* ====================================================================
   LE SUR-TITRE ET SON TITRE FORMENT UN BLOC
   ====================================================================
   Mesure : 32 px d'ecart, venus d'un `margin-top` sur le titre. Les deux
   vivent dans des `.wpb_text_column` differents, donc le selecteur `+`
   entre eux ne trouvait rien : on vise le bloc QUI SUIT un bloc
   `titlescript`.

   Le sur-titre garde sa taille de sur-titre : la regle de 42 px ecrite
   pour la page Concept ne doit pas l'atteindre ici. */
html body:not(#a):not(#b):not(#c) .wpb_text_column.titlescript + .wpb_text_column h1,
html body:not(#a):not(#b):not(#c) .wpb_text_column.titlescript + .wpb_text_column h2,
html body:not(#a):not(#b):not(#c) .titlescript + .wpb_text_column > .wpb_wrapper > h1,
html body:not(#a):not(#b):not(#c) .titlescript + .wpb_text_column > .wpb_wrapper > h2{
  margin-top: 0 !important;
  padding-top: 0 !important;
}
html body:not(#a):not(#b):not(#c) p.vt-surtitre{
  font-size: 11px !important;
  line-height: 1.5 !important;
  letter-spacing: .28em !important;
  margin: 0 0 2px !important;
}




/* ====================================================================
   LES BADGES DE LA FICHE PRODUIT
   ====================================================================
   Le badge « Expertise francaise » collait son drapeau au bord, celui du
   dessous avait un retrait : deux blocs voisins, deux retraits. On pose
   le meme sur les deux, sur mobile comme sur ordinateur. */
html body:not(#a):not(#b):not(#c) .jh-badge,
html body:not(#a):not(#b):not(#c) .vt-badge,
html body:not(#a):not(#b):not(#c) [class*="badge-origine"],
html body:not(#a):not(#b):not(#c) [class*="badge-vegan"]{
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 12px 16px !important;
  box-sizing: border-box !important;
}
html body:not(#a):not(#b):not(#c) .jh-badge > :first-child,
html body:not(#a):not(#b):not(#c) .vt-badge > :first-child{
  margin-left: 0 !important;
  flex: 0 0 auto !important;
}




/* ====================================================================
   L'ALIGNEMENT DES QUESTIONS, ET LA BANDE BLANCHE
   ==================================================================== */

/* 1. le « + » est en position absolue a gauche : le texte doit lui
      laisser sa place, sinon il passe dessous. */
html body:not(#a):not(#b):not(#c) .vc_toggle_title{
  position: relative !important;
  padding-left: 30px !important;
  padding-right: 0 !important;
  min-height: 18px !important;
}
html body:not(#a):not(#b):not(#c) .vc_toggle_icon{
  position: absolute !important;
  left: 4px !important;
  top: 50% !important;
  margin-top: -7px !important;
  transform: scale(.62) !important;
  width: 14px !important;
  height: 14px !important;
}
html body:not(#a):not(#b):not(#c) .vc_toggle_content{
  padding-left: 30px !important;
}

/* 2. le beige va jusqu'au pied de page */
html body:not(#a):not(#b):not(#c) .vc_section.videoservices,
html body:not(.single-product):not(#a):not(#b):not(#c) #wrapper,
html body:not(.single-product):not(#a):not(#b):not(#c) .page-wrapper-inner,
html body:not(.single-product):not(#a):not(#b):not(#c) .site-content{
  /* couleur de Jhouny retiree */
}
html body:not(#a):not(#b):not(#c) .vc_section.videoservices{
  padding-bottom: 0 !important;
}




/* ====================================================================
   LES FINITIONS DU CHAT PRODUIT
   ==================================================================== */

/* 1. LE CHAMP : pas de cadre. */
html body:not(#a):not(#b):not(#c) #lystes-product-chat .lystes-input,
html body:not(#a):not(#b):not(#c) #lystes-product-chat textarea,
html body:not(#a):not(#b):not(#c) #lystes-product-chat input[type="text"]{
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  background: transparent !important;
}

/* 2. L'AVATAR DU DIAGNOSTIC. C'est son conteneur qui l'ecrasait a 7 px
      de large : on lui rend sa place avant de cadrer l'image. */
html body:not(#a):not(#b):not(#c) #lystes-product-chat .lystes-diagnostic-btn > span:first-child{
  width: 22px !important;
  min-width: 22px !important;
  height: 22px !important;
  flex: 0 0 22px !important;
  display: inline-flex !important;
  overflow: hidden !important;
  border-radius: 50% !important;
}
html body:not(#a):not(#b):not(#c) #lystes-product-chat .lystes-diagnostic-btn img{
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  object-fit: cover !important;
  border-radius: 50% !important;
}

/* 3. LA FLECHE D'ENVOI, dessinee au trait et non remplie.
      Le SVG du plugin est une forme pleine : on le cache et on dessine
      la fleche avec un masque, comme pour l'icone du panier. */
html body:not(#a):not(#b):not(#c) #lystes-product-chat .lystes-send-btn svg{
  display: none !important;
}
html body:not(#a):not(#b):not(#c) #lystes-product-chat .lystes-send-btn{
  position: relative !important;
}
html body:not(#a):not(#b):not(#c) #lystes-product-chat .lystes-send-btn::after{
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background-color: #ffffff !important;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19V5.5'/%3E%3Cpath d='M6 11.5 12 5.5l6 6'/%3E%3C/svg%3E") !important;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19V5.5'/%3E%3Cpath d='M6 11.5 12 5.5l6 6'/%3E%3C/svg%3E") !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
  -webkit-mask-position: center !important;
  mask-position: center !important;
  -webkit-mask-size: 14px 14px !important;
  mask-size: 14px 14px !important;
}

/* 4. LE DERNIER BLOC BLANC de la fiche produit. */
html body.single-product:not(#a):not(#b) .sticky-product-bar{
  /* couleur de Jhouny retiree */
}




/* ====================================================================
   LA FICHE PRODUIT : FOND BLANC
   ====================================================================
   Demande neuf fois par JP. J'avais compris l'inverse et pose du beige :
   c'est corrige ici, et ce bloc vient en dernier. */
html body.single-product:not(#a):not(#b),
html body.single-product:not(#a):not(#b) #wrapper,
html body.single-product:not(#a):not(#b) .page-wrapper-inner,
html body.single-product:not(#a):not(#b) .site-content,
html body.single-product:not(#a):not(#b) #main,
html body.single-product:not(#a):not(#b) .product-page-wrapper,
html body.single-product:not(#a):not(#b) .sticky-product-bar,
html body.single-product:not(#a):not(#b) .vt-certifs,
html body.single-product:not(#a):not(#b) .summary,
html body.single-product:not(#a):not(#b) .product-gallery-inner{
  background-color: #ffffff !important;
}

/* le trou de 151 px sous le bouton de paiement express */
html body.single-product:not(#a):not(#b) .wc-stripe-product-checkout-container,
html body.single-product:not(#a):not(#b) #wc-stripe-express-checkout-element,
html body.single-product:not(#a):not(#b) .wcpay-payment-request-wrapper,
html body.single-product:not(#a):not(#b) .__PrivateStripeElement{
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}
html body.single-product:not(#a):not(#b) .vt-certifs{
  margin-top: 0 !important;
  padding-top: 20px !important;
}
html body.single-product:not(#a):not(#b) .summary > *:last-child{
  margin-bottom: 0 !important;
}

/* les mentions de certification, en capitales */
html body:not(#a):not(#b):not(#c) .vt-certifs-mentions,
html body:not(#a):not(#b):not(#c) .vt-certifs-mentions span{
  text-transform: uppercase !important;
  letter-spacing: .1em !important;
}




/* ====================================================================
   LE FOND BLANC DE LA FICHE PRODUIT, EN DERNIER MOT
   ====================================================================
   Meme nombre d'identifiants que les regles beige, et pose en dernier :
   rien ne peut plus le reprendre. */
html body.single-product:not(#a):not(#b):not(#c),
html body.single-product:not(#a):not(#b):not(#c) #wrapper,
html body.single-product:not(#a):not(#b):not(#c) .page-wrapper-inner,
html body.single-product:not(#a):not(#b):not(#c) .site-content,
html body.single-product:not(#a):not(#b):not(#c) #main,
html body.single-product:not(#a):not(#b):not(#c) .header-main,
html body.single-product:not(#a):not(#b):not(#c) .sticky-product-bar,
html body.single-product:not(#a):not(#b):not(#c) .vt-certifs,
html body.single-product:not(#a):not(#b):not(#c) .custom-money-back-guarantee{
  background-color: #ffffff !important;
}




/* ====================================================================
   SOCLE GOYA : LES DERNIERS BLOCS, SANS LES COULEURS
   ====================================================================
   Sur demande de JP : reprendre 100 % des corrections de jhounysecret,
   seules les couleurs de marque sont retirees. Les blocs qui visent des
   classes propres a ce site (routines, hero) sont inertes ailleurs :
   leurs selecteurs ne trouvent rien, ils ne coutent rien.
   ==================================================================== */

/* ====================================================================
   LA BARRE FLOTTANTE « FAIRE MON DIAGNOSTIC PEAU »
   ====================================================================
   Mesure du 24/09/2026 AVANT : texte rgb(255,255,255) sur fond
   rgb(255,255,255), contraste 1:1. Invisible. Le fond de cette barre est
   blanc, contrairement au bouton noir du meme widget : son texte doit
   donc etre fonce, pas blanc. */
html body:not(#a):not(#b):not(#c) .lystes-chat-toggle .lystes-btn-text,
html body:not(#a):not(#b):not(#c) .lystes-chat-toggle .lystes-btn-text *{
  color: #22252b !important;
  font-size: 13px !important;
  line-height: 1.25 !important;
}
/* le bouton rond a droite reste noir : son icone garde le blanc */
html body:not(#a):not(#b):not(#c) .lystes-chat-toggle [class*="send"],
html body:not(#a):not(#b):not(#c) .lystes-chat-toggle [class*="arrow"],
html body:not(#a):not(#b):not(#c) .lystes-chat-toggle [class*="submit"]{
  color: #ffffff !important;
}




/* ====================================================================
   SOCLE GOYA : LE SYMBOLE DE DEVISE RESTE EN LIGNE
   ====================================================================
   Mesure sur glowlyparis.fr, fiche produit a 375 px :
     .woocommerce-Price-currencySymbol   display: block, hauteur 0
   Le « € » est ecrase et s'affiche coupe.

   Cause : une de mes regles pose `display: block` sur les montants pour
   les empiler dans la ligne du panier. Le symbole est un `<span>` a
   l'interieur du montant : il herite du bloc et sort de la ligne.

   Un symbole de devise se lit sur la meme ligne que son nombre. */
html body:not(#a):not(#b):not(#c) .woocommerce-Price-currencySymbol,
html body:not(#a):not(#b):not(#c) .woocommerce-Price-amount bdi,
html body:not(#a):not(#b):not(#c) .amount .woocommerce-Price-currencySymbol{
  display: inline !important;
  height: auto !important;
  min-height: 0 !important;
  vertical-align: baseline !important;
  white-space: nowrap !important;
}
html body:not(#a):not(#b):not(#c) .woocommerce-Price-amount{
  white-space: nowrap !important;
}



/* ====================================================================
   SOCLE GOYA : LE SYMBOLE DE DEVISE, ET LES VIGNETTES CARREES
   ====================================================================
   Deux defauts vus sur glowlyparis.fr, fiche produit a 375 px.

   1. Le « € » chevauche le nombre : il est en `display: block` avec une
      hauteur nulle. Ma regle precedente le remettait en ligne, mais une
      autre de mes regles (`li.product .amount { display: block }`) porte
      une classe de plus et gagnait. Ce bloc monte donc d'un cran de
      specificite, avec quatre identifiants au lieu de trois.

   2. Les vignettes de la galerie sont rondes. Un packshot dans un cercle
      se rogne sur les bords : le flacon est coupe. Elles redeviennent
      carrees, avec un coin a peine adouci. */

html body:not(#a):not(#b):not(#c):not(#d) .woocommerce-Price-currencySymbol,
html body:not(#a):not(#b):not(#c):not(#d) .woocommerce-Price-amount,
html body:not(#a):not(#b):not(#c):not(#d) .woocommerce-Price-amount bdi,
html body:not(#a):not(#b):not(#c):not(#d) .summary .amount,
html body:not(#a):not(#b):not(#c):not(#d) li.product .amount,
html body:not(#a):not(#b):not(#c):not(#d) li.product .amount *{
  display: inline !important;
  height: auto !important;
  min-height: 0 !important;
  line-height: 1.4 !important;
  vertical-align: baseline !important;
  white-space: nowrap !important;
}
/* le prix reste un bloc, seul son contenu est en ligne */
html body:not(#a):not(#b):not(#c):not(#d) li.product .price,
html body:not(#a):not(#b):not(#c):not(#d) .summary .price{
  display: block !important;
}

/* 2. les vignettes carrees */
html body:not(#a):not(#b):not(#c):not(#d) .flex-control-thumbs li,
html body:not(#a):not(#b):not(#c):not(#d) .flex-control-thumbs li img,
html body:not(#a):not(#b):not(#c):not(#d) .flex-control-nav li img,
html body:not(#a):not(#b):not(#c):not(#d) .product-thumbnails li img{
  border-radius: 2px !important;
  overflow: hidden !important;
}
html body:not(#a):not(#b):not(#c):not(#d) .flex-control-thumbs li img.flex-active,
html body:not(#a):not(#b):not(#c):not(#d) .flex-control-thumbs li img:hover{
  border-radius: 2px !important;
}



/* ====================================================================
   SOCLE GOYA : LE SYMBOLE DE DEVISE NE CHEVAUCHE PLUS LE NOMBRE
   ====================================================================
   Mesure sur glowlyparis.fr, fiche produit : le « € » se superpose au
   « 23 ». Le symbole est en `display: block` et resiste a tout, y
   compris a un style en ligne `!important` pose a la main : quelque
   chose le reimpose en continu.

   On cesse donc de se battre sur le `display` du symbole. On passe son
   conteneur en `flex` : dans un conteneur flex, un enfant declare
   `block` devient un element de ligne et se range a cote du precedent,
   quelle que soit sa valeur de display.

   `align-items: baseline` aligne le symbole sur la ligne d'ecriture du
   nombre, pas sur le haut de sa boite. */

html body:not(#a):not(#b):not(#c):not(#d) .woocommerce-Price-amount,
html body:not(#a):not(#b):not(#c):not(#d) .woocommerce-Price-amount bdi{
  display: inline-flex !important;
  align-items: baseline !important;
  gap: 2px !important;
  white-space: nowrap !important;
}
html body:not(#a):not(#b):not(#c):not(#d) .woocommerce-Price-amount .woocommerce-Price-currencySymbol{
  flex: 0 0 auto !important;
  height: auto !important;
  line-height: inherit !important;
  margin: 0 !important;
}
/* le prix lui-meme reste sur sa ligne */
html body:not(#a):not(#b):not(#c):not(#d) .summary p.price,
html body:not(#a):not(#b):not(#c):not(#d) li.product .price{
  display: block !important;
  white-space: nowrap !important;
}

/* ====================================================================
   SOCLE GOYA, CORRECTIF DU BORD A BORD
   ====================================================================
   Mon complement precedent posait `padding: 0` sur toute ligne marquee
   `no-padding`, pour que les images aillent bord a bord. Mesure sur
   maisonsd.lystes.ai : la section Concept vit elle aussi dans une ligne
   `no-padding`, et son texte s'est retrouve colle aux deux bords, sur
   372 px d'un ecran de 375.

   C'est la meme faute que JP avait signalee sur jhounysecret : le bord a
   bord vaut pour une IMAGE, jamais pour du texte.

   Ce bloc vient en dernier : il rend sa gouttiere a toute ligne qui
   contient du texte, et ne laisse bord a bord que celles dont le contenu
   est une image seule. */
@media (max-width: 767px){

  /* on rend la gouttiere a toutes les lignes sans marge... */
  html body:not(#a):not(#b):not(#c) .vc_row.no-padding,
  html body:not(#a):not(#b):not(#c) .vc_row.vc_row-no-padding{
    padding-left: 16px !important;
    padding-right: 16px !important;
    box-sizing: border-box !important;
  }

  /* ...sauf celles qui ne portent qu'une image ou un diaporama */
  html body:not(#a):not(#b):not(#c) .vc_row.no-padding:has(.wpb_single_image):not(:has(p)):not(:has(h1)):not(:has(h2)):not(:has(h3)),
  html body:not(#a):not(#b):not(#c) .vc_row.vc_row-no-padding:has(.wpb_single_image):not(:has(p)):not(:has(h1)):not(:has(h2)):not(:has(h3)),
  html body:not(#a):not(#b):not(#c) .vc_row:has(.rev_slider_wrapper){
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* le texte du bloc Concept garde sa gouttiere quoi qu'il arrive */
  html body:not(#a):not(#b):not(#c) [class*="section-concept"]{
    padding-left: 16px !important;
    padding-right: 16px !important;
    box-sizing: border-box !important;
  }
  html body:not(#a):not(#b):not(#c) [class*="section-concept"] .concept-right,
  html body:not(#a):not(#b):not(#c) [class*="section-concept"] .concept-left,
  html body:not(#a):not(#b):not(#c) [class*="section-concept"] .concept-container{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}




/* ====================================================================
   LA PALETTE DE CETTE MARQUE
   ====================================================================
   Reprise de l'ancien corrections.css du site, avant remplacement.
   Elle vient en dernier pour que les couleurs de la marque priment
   sur celles du fichier de reference.
   ==================================================================== */
html body:not(#a):not(#b) .vt-certifs-mentions{
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 14px 34px; margin: 0 0 30px; padding: 0;
  font-size: 13px; letter-spacing: .06em; color: #5f6570;
}
html body:not(#a):not(#b) .vt-certifs-bloc h3{
  font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
  color: #22252b; margin: 0 0 16px; font-weight: 600;
}
html body:not(#a):not(#b) .vt-certifs-bloc li{
  font-size: 14px; color: #5f6570; margin: 0; padding: 0;
  display: flex; align-items: baseline; gap: 9px;
}
html body:not(#a):not(#b) .vt-sans li span{ color: #9a3530; font-size: 13px; }
html body:not(#a):not(#b) .vt-avec li::before{
  content: "\2713"; color: #3d6b52; font-size: 13px;
}
body:not(#a):not(#b) input[type="email"],
html body:not(#a):not(#b) input[type="tel"],
html body:not(#a):not(#b) input[type="password"],
html body:not(#a):not(#b) input[type="number"],
html body:not(#a):not(#b) textarea,
html body:not(#a):not(#b) select,
html body:not(#a):not(#b) .select2-selection{
  background-color: #ffffff !important;
  border: 1px solid #9a9a9a !important;
  color: #22252b !important;
  border-radius: 0 !important;
  min-height: 44px !important;
  padding: 10px 12px !important;
}
html body:not(#a):not(#b) input:focus,
html body:not(#a):not(#b) textarea:focus,
html body:not(#a):not(#b) select:focus{
  border-color: #22252b !important;
  outline: 2px solid rgba(34,37,43,.18) !important;
  outline-offset: 1px !important;
}
html body:not(#a):not(#b) label{ color: #22252b !important; }
html body:not(#a):not(#b) ::placeholder{ color: #6b6b6b !important; opacity: 1 !important; }
. */
html body:not(#a):not(#b) button.single_add_to_cart_button,
html body:not(#a):not(#b) .single_add_to_cart_button,
html body:not(#a):not(#b) #place_order,
html body:not(#a):not(#b) button#place_order,
html body:not(#a):not(#b) .checkout-button,
html body:not(#a):not(#b) .wc-proceed-to-checkout a{
  background-color: #000000 !important;
  background-image: none !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 0 !important;
  width: 100% !important;
  display: block !important;
  text-align: center !important;
  min-height: 52px !important;
  font-weight: 600 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
}
html body:not(#a):not(#b) button.single_add_to_cart_button:hover,
html body:not(#a):not(#b) #place_order:hover,
html body:not(#a):not(#b) .checkout-button:hover{
  background-color: #22252b !important; color: #ffffff !important;
}
ibles. Apres : 2,61:1. */
html body:not(#a):not(#b) hr,
html body:not(#a):not(#b) .woocommerce-checkout .shop_table tfoot tr th,
html body:not(#a):not(#b) .woocommerce-checkout .shop_table tfoot tr td,
html body:not(#a):not(#b) .cart_totals table tr,
html body:not(#a):not(#b) .shop_table tbody tr td{
  border-color: #c9c9c9 !important;
}
html body:not(#a):not(#b):not(#c) button.single_add_to_cart_button *,
html body:not(#a):not(#b):not(#c) .single_add_to_cart_button *{
  color: #ffffff !important;
}
html body:not(#a):not(#b):not(#c) button.single_add_to_cart_button:hover,
html body:not(#a):not(#b):not(#c) .single_add_to_cart_button:hover{
  background-color: #22252b !important;
  color: #ffffff !important;
}
l body:not(#a):not(#b):not(#c) .lystes-diagnostic-btn,
html body:not(#a):not(#b):not(#c) .lystes-diagnostic-btn *,
html body:not(#a):not(#b):not(#c) .lystes-btn-label,
html body:not(#a):not(#b):not(#c) #lystes-diagnostic-overlay-btn,
html body:not(#a):not(#b):not(#c) #lystes-diagnostic-overlay-btn *{
  color: #ffffff !important;
}
ntraste 1:1. Invisible. Le fond de cette barre est
   blanc, contrairement au bouton noir du meme widget : son texte doit
   donc etre fonce, pas blanc. */
html body:not(#a):not(#b):not(#c) .lystes-chat-toggle .lystes-btn-text,
html body:not(#a):not(#b):not(#c) .lystes-chat-toggle .lystes-btn-text *{
  color: #22252b !important;
  font-size: 13px !important;
  line-height: 1.25 !important;
}
/* le bouton rond a droite reste noir : son icone garde le blanc */
html body:not(#a):not(#b):not(#c) .lystes-chat-toggle [class*="send"],
html body:not(#a):not(#b):not(#c) .lystes-chat-toggle [class*="arrow"],
html body:not(#a):not(#b):not(#c) .lystes-chat-toggle [class*="submit"]{
  color: #ffffff !important;
}
AGE DE JP
   ====================================================================
   Marge basse a zero : seul l'interligne du titre separe les deux lignes.
   Ce bloc vient en dernier, il gagne donc sur les valeurs de 10 et 8 px
   posees plus haut. */
html body:not(#a):not(#b):not(#c) .jh-surtitre{
  color: #6b6f76 !important;
  margin-bottom: 0 !important;
}
nes du panneau se voient : trait anthracite sur beige,
        contraste 12,4:1. */
  html body:not(#a):not(#b):not(#c) .side-mobile-menu .action-icons svg,
  html body:not(#a):not(#b):not(#c) .side-mobile-menu .mobile-bar svg,
  html body:not(#a):not(#b):not(#c) .side-mobile-menu .bottom-extras svg{
    stroke: #22252b !important;
    color: #22252b !important;
    width: 21px !important;
    height: 21px !important;
  }
html body:not(#a):not(#b):not(#c) .side-mobile-menu .action-icons a,
  html body:not(#a):not(#b):not(#c) .side-mobile-menu .mobile-bar a{
    color: #22252b !important;
    opacity: 1 !important;
  }
html body:not(#a):not(#b):not(#c) .et-menu-account-btn{
    color: #22252b !important;
  }
html body.home:not(#a):not(#b):not(#c) .concept-subtitle,
  html body:not(#a):not(#b):not(#c) [id^="section-concept"] .concept-subtitle{
    color: #000000 !important;
    font-size: 29px !important;
  }
/* le chiffre : blanc, epais, lisible a 10 px */
html body:not(#a):not(#b):not(#c) .lystes-brandcall-panier,
html body:not(#a):not(#b):not(#c) .lystes-brandcall-panier *{
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-weight: 700 !important;
  font-size: 10px !important;
  line-height: 1 !important;
  text-shadow: none !important;
}
-cart > header,
html body:not(#a):not(#b):not(#c) #side-cart .panel-header-inner,
html body:not(#a):not(#b):not(#c) #side-cart .side-panel-content,
html body:not(#a):not(#b):not(#c) #side-cart .woocommerce-mini-cart__total,
html body:not(#a):not(#b):not(#c) #side-cart .woocommerce-mini-cart__buttons{
  background-color: #ffffff !important;
  background-image: none !important;
}
l'en-tete du
   script pour les chiffres d'avant. */

/* 1. LE TITRE. Ecrit en beige sur un bandeau beige : present, invisible.
      Le bandeau faisait 185 px de haut pour ne rien montrer. */
html body:not(#a):not(#b):not(#c) .page-title,
html body:not(#a):not(#b):not(#c) .regular-title .page-title{
  color: #22252b !important;
}
/* 5. « SOUS-TOTAL » : beige sur blanc, contraste 1,05:1. */
html body:not(#a):not(#b):not(#c) .cart-subtotal th,
html body:not(#a):not(#b):not(#c) .cart_totals th{
  color: #22252b !important;
}
html body:not(#a):not(#b):not(#c) tr.cart-discount .woocommerce-remove-coupon{
  color: #8a8f98 !important;
  font-size: 10px !important;
  text-decoration: underline !important;
  white-space: nowrap !important;
}
/* 4. LE LIEN QUI RETIRE LE COUPON. 18 px de large, fond vert residuel :
      le mot ne tenait pas dans sa boite. */
html body:not(#a):not(#b):not(#c) .woocommerce-remove-coupon{
  display: inline !important;
  width: auto !important;
  min-width: 0 !important;
  margin-left: 6px !important;
  padding: 0 !important;
  background: none !important;
  background-color: transparent !important;
  color: #8a8f98 !important;
  white-space: nowrap !important;
}
/* 2. LA CROIX QUI SUPPRIME. Beige sur blanc : on la rend nette. */
html body:not(#a):not(#b):not(#c) #side-cart a.remove,
html body:not(#a):not(#b):not(#c) .mini-cart a.remove{
  background: transparent !important;
  border: none !important;
  color: #6b6f76 !important;
  font-size: 18px !important;
  line-height: 1 !important;
  width: 22px !important;
  height: 22px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
html body:not(#a):not(#b):not(#c) #side-cart a.remove:hover{
  color: #22252b !important;
}
/* le bouton secondaire : trait fin, texte anthracite */
html body:not(#a):not(#b):not(#c) #side-cart .woocommerce-mini-cart__buttons a:not(.checkout){
  background: transparent !important;
  border: 1px solid #22252b !important;
  color: #22252b !important;
}
/* le bouton principal : plein, blanc sur anthracite */
html body:not(#a):not(#b):not(#c) #side-cart .woocommerce-mini-cart__buttons a.checkout{
  background: #22252b !important;
  border: 1px solid #22252b !important;
  color: #ffffff !important;
}
/* 4. LE SOUS-TOTAL, lisible du libelle au montant. */
html body:not(#a):not(#b):not(#c) #side-cart .woocommerce-mini-cart__total,
html body:not(#a):not(#b):not(#c) #side-cart .woocommerce-mini-cart__total *{
  color: #22252b !important;
  font-size: 12px !important;
}
/* le sur-titre des pages : petites capitales espacees, comme partout */
  html body:not(#a):not(#b):not(#c) .wpb_wrapper > h4:first-child,
  html body:not(#a):not(#b):not(#c) .vc_column-inner > .wpb_wrapper > .wpb_text_column:first-child h4{
    text-transform: uppercase !important;
    letter-spacing: .22em !important;
    font-size: 10px !important;
    color: #6b6f76 !important;
    margin: 78px 0 10px !important;
    text-align: center !important;
  }
html body:not(#a):not(#b):not(#c) .vc_toggle_title{
  color: #22252b !important;
}
html body:not(#a):not(#b):not(#c) #lystes-product-chat #lystes-diagnostic-btn,
html body:not(#a):not(#b):not(#c) #lystes-product-chat .lystes-diagnostic-btn{
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  background: #000000 !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 28px !important;
  padding: 6px 14px 6px 6px !important;
  min-height: 29px !important;
  font-size: 11px !important;
  white-space: nowrap !important;
  width: auto !important;
}
html body:not(#a):not(#b):not(#c) #lystes-product-chat .lystes-diagnostic-btn .lystes-btn-label,
html body:not(#a):not(#b):not(#c) #lystes-product-chat .lystes-diagnostic-btn span{
  color: #ffffff !important;
}
(#b):not(#c) #lystes-product-chat .lystes-modelmini-btn svg,
html body:not(#a):not(#b):not(#c) #lystes-product-chat .lystes-mic-btn svg *,
html body:not(#a):not(#b):not(#c) #lystes-product-chat .lystes-call-btn svg *,
html body:not(#a):not(#b):not(#c) #lystes-product-chat .lystes-modelmini-btn svg *{
  stroke: #22252b !important;
  color: #22252b !important;
}
main,
html body.single-product:not(#a):not(#b) .product-page-wrapper,
html body.single-product:not(#a):not(#b) .sticky-product-bar,
html body.single-product:not(#a):not(#b) .vt-certifs,
html body.single-product:not(#a):not(#b) .summary,
html body.single-product:not(#a):not(#b) .product-gallery-inner{
  background-color: #ffffff !important;
}
(#a):not(#b):not(#c) #main,
html body.single-product:not(#a):not(#b):not(#c) .header-main,
html body.single-product:not(#a):not(#b):not(#c) .sticky-product-bar,
html body.single-product:not(#a):not(#b):not(#c) .vt-certifs,
html body.single-product:not(#a):not(#b):not(#c) .custom-money-back-guarantee{
  background-color: #ffffff !important;
}
he sur fond rouge, pas noire » ; « en haut a droite, le
   badge AI, on ne le voit pas ». */
html body:not(#a):not(#b):not(#c) #lystes-product-chat .lystes-cart-badge,
html body:not(#a):not(#b):not(#c) #lystes-product-chat .lystes-cart-badge *,
html body:not(#a):not(#b):not(#c) .lystes-cart-badge{
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-weight: 700 !important;
}
/* le badge AI de la vignette : blanc sur son fond sombre */
html body:not(#a):not(#b):not(#c) #lystes-product-chat .lystes-ai-badge,
html body:not(#a):not(#b):not(#c) #lystes-product-chat .lystes-ai-badge *{
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-weight: 700 !important;
  font-size: 8px !important;
  letter-spacing: .02em !important;
}
ITS
   ==================================================================== */

/* 1. LA CROIX. 73 px de large pour 16 de haut : un X etire en travers du
      nom du produit. */
html body:not(#a):not(#b):not(#c) .woocommerce-cart-form a.remove,
html body:not(#a):not(#b):not(#c) .shop_table a.remove{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  max-width: 22px !important;
  padding: 0 !important;
  margin: 0 !important;
  font-size: 17px !important;
  line-height: 1 !important;
  color: #8a8f98 !important;
  background: transparent !important;
  border: none !important;
  overflow: hidden !important;
  text-indent: 0 !important;
}
/
html body:not(#a):not(#b):not(#c) .top-bar,
html body:not(#a):not(#b):not(#c) .top-bar *,
html body:not(#a):not(#b):not(#c) .header-notice,
html body:not(#a):not(#b):not(#c) .header-notice *,
html body:not(#a):not(#b):not(#c) .announcement-bar,
html body:not(#a):not(#b):not(#c) .announcement-bar *{
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}
==================
   LE BANDEAU DE LIVRAISON, LISIBLE
   ====================================================================
   Texte #22252b sur le vert #094846 : contraste 1,6:1. */
html body:not(#a):not(#b):not(#c) .vt-bandeau-livraison,
html body:not(#a):not(#b):not(#c) .vt-bandeau-livraison *{
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}
DES BLOCS DE REASSURANCE
   ====================================================================
   « Garantie premiere commande » et « Non teste sur les animaux » se
   posent sur un gris tres clair, sans bordure. */
html body.single-product:not(#a):not(#b):not(#c) .custom-money-back-guarantee{
  background-color: #f9f9f9 !important;
  padding: 24px 20px !important;
  margin-bottom: 14px !important;
  border: none !important;
  border-radius: 2px !important;
}
(#a):not(#b):not(#c) #main,
html body.page-id-8:not(#a):not(#b):not(#c),
html body.page-id-8:not(#a):not(#b):not(#c) #wrapper,
html body.page-id-8:not(#a):not(#b):not(#c) .page-wrapper-inner,
html body.page-id-8:not(#a):not(#b):not(#c) .site-content,
html body.page-id-8:not(#a):not(#b):not(#c) #main{
  background-color: #ffffff !important;
}
reste qu'une bande de 36 px, bien visible. */
html body.woocommerce-checkout:not(#a):not(#b):not(#c) footer.site-footer,
html body.woocommerce-checkout:not(#a):not(#b):not(#c) .footer,
html body.page-id-8:not(#a):not(#b):not(#c) footer.site-footer,
html body.page-id-8:not(#a):not(#b):not(#c) .footer{
  background-image: none !important;
  background-color: #ffffff !important;
}
on de commande. */
html body:not(#a):not(#b):not(#c) .woocommerce-checkout .return-to-cart,
html body:not(#a):not(#b):not(#c) .woocommerce-checkout a[href*="panier"].button,
html body:not(#a):not(#b):not(#c) .checkout .wc-backward,
html body:not(#a):not(#b):not(#c) .woocommerce-checkout .wc-backward{
  background: none !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: #22252b !important;
  padding: 0 !important;
  min-height: 0 !important;
  font-size: 11.5px !important;
  font-weight: 500 !important;
  letter-spacing: .06em !important;
  text-transform: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  text-decoration: none !important;
}