/*
 * Custom style goes here.
 * A template should always ship with an empty custom.css
 */
 /*
 * Custom style goes here.
 * A template should always ship with an empty custom.css
 */
 /* TEST MOCA */

 <style>

.section-why-moca .feature,
.section-why-moca .feature2 {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  background-color:#ffffff;
}
/* Liste à puces stylées - Section "Vous êtes au bon endroit" */
.section-solution ul {
  list-style: none; /* supprime les puces natives HTML */
  padding-left: 0;
}

.section-solution ul li {
  margin-bottom: 0.5rem;
  position: relative;
  padding-left: 1.2rem;
}

.section-solution ul li::before {
  content: "•";
  color: #b66a2d; /* ton cuivré Moca */
  position: absolute;
  left: 0;
  top: 0;
  line-height: 1.5;
}
/* style nos machine fond clair*/
.section-machines .banner1 a span {
  display: block;
}

.section-machines .banner1 a span.fw-bold {
  color: #ffffff;
}

.section-machines .banner1 a span.text-muted1 {
  color: #ffffff;
}
/* Section machines — texte sous l'image */
.section-machines .machine-info {
  text-align: center;
}

.section-machines .machine-info .fw-bold {
  color: #ffffff;
  font-weight: 700;
  margin-bottom: 4px;
}

.section-machines .machine-info .text-muted1 {
  color: #ffffff;
  font-weight: 400;
}
/* Section partenaires carrousel standard */
.section-partenaires .partenaire-logo {
  max-height: 80px;
  opacity: 0.8;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.section-partenaires .partenaire-logo:hover {
  opacity: 1;
  transform: scale(1.05);
}
/* Section Partenaires - Carrousel fluide */
.logo-carousel {
  overflow: hidden;
  position: relative;
  width: 100%;
}

.logo-track {
  display: flex;
  width: calc(250px * 16); /* largeur totale (ajuste selon nb de logos) */
  animation: scroll 40s linear infinite;
}

.partenaire-logo {
  height: 80px;
  margin: 0 30px;
  opacity: 0.8;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.partenaire-logo:hover {
  opacity: 1;
  transform: scale(1.05);
}

@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* Responsive : réduire la vitesse et taille sur mobile */
@media (max-width: 768px) {
  .logo-track {
    animation: scroll 60s linear infinite;
  }
  .partenaire-logo {
    height: 60px;
    margin: 0 20px;
  }
}
/* ajuster blocs*/
.section-why-moca .row > [class*="col-"] {
  display: flex;
}

.section-why-moca .feature,
.section-why-moca .feature2 {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
/* Couleurs de base du bloc "Pourquoi choisir Moca" */
.section-why-moca .feature,
.section-why-moca .feature2 {
  color: #28140b;
  transition: all 0.3s ease;
}

.section-why-moca .feature h3,
.section-why-moca .feature2 h3 {
  color: #28140b;
  font-weight: 700;
  transition: color 0.3s ease;
}

.section-why-moca .feature span.fa,
.section-why-moca .feature2 span.fa {
  transition: color 0.3s ease, transform 0.3s ease;
}

/* Effet hover */
.section-why-moca .feature:hover,
.section-why-moca .feature2:hover {
  transform: translateY(-4px);
}

.section-why-moca .feature:hover h3,
.section-why-moca .feature2:hover h3 {
  color: #3a1f11; /* brun un peu plus foncé */
}

.section-why-moca .feature:hover span.fa,
.section-why-moca .feature2:hover span.fa {
  transform: scale(1.1);
}
/* version box blanc fond noir */
/*
.main-product-details {
  background-color: #fffff !important; 
}
.main-product-details .product-price {
  color: #ffffff ; 
}
#product .blockreassurance-product {
  background-color: #bc9f91 ; 
  margin:20px;
}
/* fin version box noir*/
/* bloc intensité sur produits*/
/* version all noir*/
#product .blockreassurance-product {
  background-color: #ffffff ; 
margin:20px;
}
.main-product-details .product-price {
color: #ffffff ; 
}
/*fin version all noir*/

.coffee-scale {
  background-color: #9c7b63; /* fond personnalisable */
  border-radius: 15px;
  padding: 0.2rem 4rem 0 1rem;
  color: #fff;
  display: inline-block;
  align-items: center;
}
@media (max-width: 768px) {
  .coffee-scale {
     width: 100%;
  }
}

/* Une ligne = une caractéristique */
.coffee-row {
  display: flex;
  align-items: center;
  margin: 1rem 1rem;
}

/* Label à gauche */
.coffee-label {
  font-size: 0.9rem;
  font-weight: 500;
  text-transform: uppercase;
  width: 100%;
  margin-right: 1.5rem;
  text-align: right;
}

/* Ligne de grains */
.coffee-beans {
  display: flex;
  gap: 0.5rem;
}

/* Un grain individuel */
.bean {
  width: 20px;
  height: 20px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

/* Plein / Vide / Moitié */
.bean.filled {
  background-image: url('../img/icons/bean-full.svg');
  color: #28140b;
}

.bean.empty {
  background-image: url('../img/icons/bean-empty.svg');
}

.bean.half {
  background-image: url('../img/icons/bean-half.svg');
}

/*fond blacn bloc accueil*/
.feature,
.feature2 {
  background-color: #ffffff !important;
  color: #28140b;
}
/*marge block page d'accueil*/
.block_id_3 {
margin-top: 30px;
}
/* justifier le texte home*/
.banner1 p {
  text-align: justify;
  text-justify: inter-word;
}
/* test style offre comme flyer*/
/* Bloc principal */
.offer-section {
  background-color: #000;
  color: #fff;
  padding: 50px 20px;
  border-radius: 10px;
  position: relative;
}

/* Couleur marron (style Zone) */
.text-brown {
  color: #b17e52;
}

/* Espacement lettres */
.letter-spacing-2 {
  letter-spacing: 0.15em;
}

/* Titres */
.zone-solutions h2,
.zone-inclus h2 {
  font-weight: 700;
  color: #fff;
  text-transform: uppercase;
}

/* Ligne verticale (desktop) */
.offer-wrapper {
  position: relative;
}

.offer-wrapper::after {
  content: "";
  position: absolute;
  top: 10%;
  bottom: 10%;
  left: 50%;
  width: 1px;
  background-color: #b17e52;
  transform: translateX(-50%);
}

/* Responsive (mobile) */
@media (max-width: 768px) {
  .offer-wrapper::after {
    top: auto;
    bottom: 0;
    left: 10%;
    right: 10%;
    height: 1px;
    width: 80%;
    transform: none;
  }
}
/* class pour bord arrondi*/
.imgrad {
  border-radius: 10px;
}
/* pour le flex de restaurateur*/
/* Bloc texte propre basé sur le style Zone */
.text-block {
  display: block;
  column-count: 1;
}

/* Espacement et confort de lecture */
.text-block p {
  display: block;
  width: 100%;
  margin-bottom: 1rem;
  text-align: justify; /* Optionnel : retire-le si tu préfères aligné à gauche */
  line-height: 1.6;
}
/* marge top pour les blocs*/
.margebloc {
margin-top:80px;
}
/* Fiche technique (section caractéristiques produit) */
.product-features,
.product-features dt,
.product-features dd {
  color: #28140b /* couleur de texte principale */
}

/* Si tu veux aussi ajuster le fond pour un meilleur contraste */
.product-features dd.value {
  background-color: #f7f7f7; /* optionnel */
}

/* Optionnel : mets les titres (dt) un peu plus visibles */
.product-features dt.name {
  font-weight: 600;
  color: #3b2314; /* une nuance légèrement plus foncée */
}
.imgabout{
	padding-left:40px;
	padding-right:40px;
}
/* page paiement*/

.payment-table {
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
}

.payment-table th {
  background-color: #28140b;
  color: #fff;
  font-weight: 600;
  letter-spacing: 0.05em;
}

.payment-table td {
  background-color: #f9f9f9;
  color: #333;
  vertical-align: middle;
}

.payment-table tr:nth-child(even) td {
  background-color: #f1f1f1;
}

.text-brown {
  color: #7b4a2b; /* teinte café douce */
}

/* Responsive : petit écran */
@media (max-width: 768px) {
  .payment-table th, .payment-table td {
    font-size: 0.9rem;
    padding: 0.75rem;
  }
}
/* page service bureau*/
.text-brown {
  color: #8b5c3b;
}

.srv-separator {
  border: none;
  border-top: 2px solid #8b5c3b;
  width: 85%;
  margin: 2rem auto;
  opacity: 0.6;
}

.offer-box {
  border: 3px solid #fff;
  padding: 1.5rem;
  display: inline-block;
  border-radius: 8px;
  font-size: 1.2rem;
  line-height: 1.4;
}

.offer-box strong {
  display: block;
  font-size: 1.4rem;
  margin-top: 0.5rem;
}

.mascotte-img {
  max-width: 120px !important;
}
/*taille machine icone*/
.offer-icon {
  max-width: 100px !important;      /* taille de l’image */
  height: auto;
  margin: 0 auto;
  display: block;
}
/* Grossir le bouton Ajouter au panier */
button.btn.add-to-cart {
  font-size: 1.1rem;         /* texte un peu plus grand */
  padding: 12px 22px;        /* plus de hauteur et largeur */
  border-radius: 6px;        /* arrondir légèrement les bords */
  font-weight: 600;          /* texte plus visible */
  transition: all 0.2s ease; /* animation douce au survol */
}

/* Option : effet au survol */
button.btn.add-to-cart:hover {
  transform: scale(1.03);
  background-color: #8b5c3b !important; /* plus foncé au hover */
}
.bruncolor {
  color: #28140b;
}
.icomach {
max-width:50% !important;	
}
.smaltxt {
	font-size:14px;
}
.slidstyle {
	font-size: 53px !important;
}
/* ===========================================================
   QUICK VIEW (Fenêtre modale produit)
   =========================================================== */
#quickviewProduct,
#quickviewProduct .modal-body,
#quickviewProduct .modal-content {
  color: #1a1a1a; /* texte sombre lisible */
}

#quickviewProduct h1,
#quickviewProduct h2,
#quickviewProduct h3,
#quickviewProduct h4,
#quickviewProduct h5,
#quickviewProduct span,
#quickviewProduct .price,
#quickviewProduct .product-price {
  color: #1a1a1a;
}


/* ===========================================================
   PAGE PANIER
   (limité à la section .page-cart pour éviter les conflits)
   =========================================================== */

.page-cart {
  color: #fff; /* texte général clair */
}

.page-cart .cart-grid,
.page-cart .cart-overview,
.page-cart .cart-summary,
.page-cart .product-line-grid,
.page-cart .cart-item {
  color: inherit;
}

/* Titres et prix */
.page-cart h1,
.page-cart h2,
.page-cart h3,
.page-cart h4,
.page-cart .product-price,
.page-cart .cart-summary-line .value,
.page-cart .cart-summary-line .label {
  color: #fff;
}

/* Liens */
.page-cart .product-name a {
  color: #d6b89a;
  transition: color 0.2s ease;
}

.page-cart .product-name a:hover {
  color: #8b5c3b;
}

/* Bloc réassurance */
.page-cart .block-reassurance-item,
.page-cart .block-reassurance-item strong,
.page-cart .block-reassurance-item span {
  color: #fff;
}


/* ===========================================================
   PAGE CONFIRMATION DE COMMANDE
   =========================================================== */

.page-order-confirmation {
  color: #fff;
}
.page-order-confirmation .product-line-grid-body .product-name {
  color: #d6b89a; /* beige clair juste pour le nom */
}


/* Prix et valeurs */
.page-order-confirmation .price,
.page-order-confirmation .value,
.page-order-confirmation .label {
  color: #d6b89a; /* beige clair pour contraste */
}

/* Détails de commande (dt/dd) */
.page-order-confirmation dt,
.page-order-confirmation dd {
  color: #28140b;
}


.page-order-confirmation a:hover {
  color: #8b5c3b;
}

/* Encadrés et cartes */
.page-order-confirmation .card,
.page-order-confirmation .box {
  background-color: #1a1a1a;
  border: 1px solid #3b2b1f;
}

/* Bandeau succès */
.page-order-confirmation .alert-success {
  background-color: #8b5c3b;
  color: #fff;
  border: none;
}

/* Champs de paiement */
.page-order-confirmation input,
.page-order-confirmation .form-control {
  background-color: #2b2b2b;
  color: #fff;
  border: 1px solid #3b2b1f;
}
/* mot de passe oublié*/
.ps-alert-error{
	color: #28140b;
}
.ps-alert-success {
	color: #28140b;
}
/* font de la page produit */
h1 {
  font-size: 1.8rem !important;
  font-weight: 700;
  margin-bottom: 1rem;
}

h2 {
  font-size: 1.4rem;
  font-weight: 700;
  margin-top: 1.5rem;
  margin-bottom: 0.8rem;
}

h3 {
  font-size: 1.2rem;
  font-weight: 700;
  margin-top: 1.2rem;
  margin-bottom: 0.6rem;
}
p {
	line-height: 1.4;
}

/* Optionnel : meilleure lisibilité sur mobile */
@media (max-width: 768px) {
h1 {
    font-size: 1.5rem !important;
  }
h2 {
    font-size: 1.2rem;
  }
h3 {
    font-size: 1.1rem;
  }
}

/* overpass-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Overpass';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/overpass-v19-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* overpass-italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Overpass';
  font-style: italic;
  font-weight: 400;
  src: url('../fonts/overpass-v19-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* overpass-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Overpass';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/overpass-v19-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* overpass-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Overpass';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/overpass-v19-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
</style>