:root {
  /* Couleurs originales */
  /* --color-primary: #629D23; */
  /* --color-secondary: #1F1F25; */
  /* --color-body: #6E777D; */
  /* --color-heading-1: #2C3C28; */
  
  /* Nouvelles couleurs avec orange vif dominant */
  --color-primary: #FF6B00;      /* Orange très vif comme couleur principale */
  --color-primary-light: #FF8C33; /* Version plus claire pour les survols */
  --color-primary-dark: #E05A00;  /* Version plus foncée pour les éléments actifs */
  
  --color-secondary: #2D3748;    /* Gris ardoise foncé pour les éléments secondaires */
  --color-body: #718096;         /* Gris moyen élégant pour le texte */
  --color-heading-1: #333333;    /* Gris foncé pour les titres */
  
  --color-white: #fff;
  --color-light-bg: #FFF9F2;     /* Fond très légèrement orangé pour certaines sections */
  
  --color-success: #68B3A2;      /* Turquoise doux pour le succès */
  --color-danger: #E57373;       /* Rouge danger plus doux */
  --color-warning: #FF6B00;      /* Orange pour l'avertissement (même que primaire) */
  --color-info: #63B3ED;         /* Bleu info doux */
  
  /* Couleur bleu nuit pour remplacer le vert */
  --color-blue-dark: #1A365D;    /* Bleu nuit comme celui du logo */
}

/* Import de la police Quicksand */
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300..700&display=swap');

/* Appliquer Quicksand comme police principale mais exclure les icônes */
body, html, p, h1, h2, h3, h4, h5, h6, span:not(.fa):not(.fa-regular):not(.fa-light):not(.fa-solid):not(.fa-brands), div, a, button, input, textarea, select, option, label, li, td, th {
  font-family: "Quicksand", sans-serif !important;
}

/* Ajuster les poids de police pour Quicksand */
h1, h2, h3, h4, h5, h6 {
  font-weight: 600 !important;
}

.font-bold, strong, b {
  font-weight: 700 !important;
}

.font-light {
  font-weight: 300 !important;
}

.font-normal {
  font-weight: 400 !important;
}

.font-medium {
  font-weight: 500 !important;
}

/* Corriger l'espacement et l'affichage du chevron dans les sélecteurs */
.language-selector,
.currency-selector {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-right: 20px !important; /* Réduit de 35px à 20px */
  position: relative;
  padding-right: 12px; /* Réduit de 15px à 12px */
}

/* Masquer les chevrons par défaut et les remplacer par des chevrons personnalisés */
.language-selector::after,
.currency-selector::after {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 4px solid transparent; /* Réduit de 5px à 4px */
  border-right: 4px solid transparent; /* Réduit de 5px à 4px */
  border-top: 4px solid #666; /* Réduit de 5px à 4px */
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

/* Cacher les chevrons natifs des sélecteurs */
select.language-selector,
select.currency-selector {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: none !important;
}

/* Styles pour les éléments dropdown */
.language-dropdown-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* S'assurer que les icônes utilisent la bonne police */
.fa, .fa-regular, .fa-light, .fa-solid, .fa-brands, 
i.fa, i.fa-regular, i.fa-light, i.fa-solid, i.fa-brands {
  font-family: "Font Awesome 6 Pro", "Font Awesome 6 Free", "FontAwesome" !important;
}

/* Ajouter une marge aux éléments de la liste de navigation */
.nav-h_top li {
  margin-right: 10px;
  margin-left: -5px; /* Ajout d'une marge négative à gauche */
}

/* Ajouter une marge spécifique au sélecteur de devise */
.currency-selector-container {
  margin-right: 15px !important; /* Réduit de 35px à 15px */
  position: relative;
}

/* Styles spécifiques pour les sélecteurs de langue et devise */
.dropdown-toggle.nav-link {
  padding-right: 12px !important;
  margin-right: 10px !important;
}

/* Ajuster le positionnement des drapeaux et textes */
.flag {
  margin-right: 4px;
}

/* Appliquer les nouvelles couleurs aux éléments principaux */
.btn-primary {
  background-color: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  color: white !important;
}

.btn-primary:hover {
  background-color: var(--color-primary-dark) !important;
  border-color: var(--color-primary-dark) !important;
  color: white !important;
}

/* S'assurer que les icônes et le texte dans les boutons sont blancs */
.btn-primary i,
.btn-primary span,
.btn-primary div,
.rts-btn.btn-primary i,
.rts-btn.btn-primary span,
.rts-btn.btn-primary div,
.rts-btn.btn-primary .single-action {
  color: white !important;
}

.btn-outline-primary {
  color: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
}

.btn-outline-primary:hover {
  background-color: var(--color-primary) !important;
  color: white !important;
}

/* Couleur des liens */
a {
  color: var(--color-primary);
}

a:hover {
  color: var(--color-primary-dark);
}

/* Couleur des titres */
h1, h2, h3, h4, h5, h6 {
  color: var(--color-heading-1);
}

/* Couleur du texte */
body, p {
  color: var(--color-body);
}

/* Couleur de fond pour certaines sections */
.bg-light {
  background-color: var(--color-light-bg) !important;
}

/* Couleur des badges */
.badge-primary {
  background-color: var(--color-primary) !important;
}

/* Couleur des bordures */
.border-primary {
  border-color: var(--color-primary) !important;
}

/* Couleur des éléments actifs dans la navigation */
.nav-link.active {
  color: var(--color-primary) !important;
}

/* Couleur des icônes */
.icon-primary {
  color: var(--color-primary);
}

/* Couleur des alertes */
.alert-success {
  background-color: rgba(104, 179, 162, 0.15);
  border-color: var(--color-success);
  color: var(--color-success);
}

.alert-danger {
  background-color: rgba(229, 115, 115, 0.15);
  border-color: var(--color-danger);
  color: var(--color-danger);
}

.alert-warning {
  background-color: rgba(255, 107, 0, 0.15);
  border-color: var(--color-warning);
  color: var(--color-warning);
}

.alert-info {
  background-color: rgba(99, 179, 237, 0.15);
  border-color: var(--color-info);
  color: var(--color-info);
}

/* Couleur des spinners et loaders */
.spinner-border.text-primary {
  color: var(--color-primary) !important;
}

/* Couleur des éléments de formulaire */
.form-control:focus {
  border-color: var(--color-primary-light);
  box-shadow: 0 0 0 0.2rem rgba(255, 107, 0, 0.25);
}

/* Couleur des éléments de pagination */
.page-item.active .page-link {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

.page-link {
  color: var(--color-primary);
}

.page-link:hover {
  color: var(--color-primary-dark);
}

/* Couleur des éléments de liste */
.list-group-item.active {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

/* Couleur des cartes */
.card-header {
  background-color: rgba(255, 107, 0, 0.1);
}

/* Couleur des tableaux */
.table-primary, 
.table-primary > th, 
.table-primary > td {
  background-color: rgba(255, 107, 0, 0.1);
}

/* Couleur des tooltips */
.tooltip-inner {
  background-color: var(--color-secondary);
}

.bs-tooltip-top .arrow::before {
  border-top-color: var(--color-secondary);
}

.bs-tooltip-right .arrow::before {
  border-right-color: var(--color-secondary);
}

.bs-tooltip-bottom .arrow::before {
  border-bottom-color: var(--color-secondary);
}

.bs-tooltip-left .arrow::before {
  border-left-color: var(--color-secondary);
}

/* Couleur des modals */
.modal-header {
  border-bottom-color: rgba(255, 107, 0, 0.2);
}

.modal-footer {
  border-top-color: rgba(255, 107, 0, 0.2);
}

/* Couleur des progress bars */
.progress-bar {
  background-color: var(--color-primary);
}

/* Couleur des tabs */
.nav-tabs .nav-link.active {
  color: var(--color-primary);
  border-color: rgba(255, 107, 0, 0.2) rgba(255, 107, 0, 0.2) #fff;
}

.nav-tabs .nav-link:hover {
  border-color: rgba(255, 107, 0, 0.1) rgba(255, 107, 0, 0.1) rgba(255, 107, 0, 0.2);
}

/* Couleur des accordions */
.accordion .card-header {
  background-color: rgba(255, 107, 0, 0.05);
}

/* Couleur des dropdowns */
.dropdown-item:active {
  background-color: var(--color-primary);
}

/* Couleur des badges */
.badge-secondary {
  background-color: var(--color-secondary);
}

/* Couleur des textes */
.text-primary {
  color: var(--color-primary) !important;
}

.text-secondary {
  color: var(--color-secondary) !important;
}

/* Couleur de fond */
.bg-primary {
  background-color: var(--color-primary) !important;
}

.bg-secondary {
  background-color: var(--color-secondary) !important;
}

/* Styles pour les sélecteurs de langue et devise */
.language-selector, .currency-selector {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  border-radius: 4px;
  background-color: transparent;
  color: var(--color-primary);
  cursor: pointer;
  margin-right: 20px; /* Augmenté de 15px à 20px */
  transition: all 0.3s ease;
}

.language-selector:hover, .currency-selector:hover {
  color: var(--color-primary-dark);
}

.language-selector .flag, .currency-selector .flag {
  margin-right: 5px;
  width: 24px;
  height: 16px;
  object-fit: cover;
  border-radius: 2px;
}

.language-dropdown, .currency-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  display: none;
  min-width: 120px;
  padding: 5px 0;
  margin: 2px 0 0;
  background-color: white;
  border: 1px solid rgba(0,0,0,0.15);
  border-radius: 4px;
  box-shadow: 0 6px 12px rgba(0,0,0,0.175);
}

.language-selector:hover .language-dropdown,
.currency-selector:hover .currency-dropdown {
  display: block;
}

.language-dropdown-item, .currency-dropdown-item {
  display: flex;
  align-items: center;
  padding: 5px 10px;
  clear: both;
  font-weight: 400;
  color: #333;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.language-dropdown-item:hover, .currency-dropdown-item:hover {
  background-color: rgba(255, 107, 0, 0.1);
  color: var(--color-primary);
}

.language-dropdown-item .flag, .currency-dropdown-item .flag {
  margin-right: 5px;
  width: 24px;
  height: 16px;
  object-fit: cover;
  border-radius: 2px;
}

/* Surcharger les éléments verts dans le footer */
footer .text-success, 
footer .text-green, 
footer .icon-success, 
footer .icon-green,
footer [style*="color: #84b840"],
footer [style*="color: #629D23"],
footer [style*="color: #7AAD4C"],
footer [style*="color:#84b840"],
footer [style*="color:#629D23"],
footer [style*="color:#7AAD4C"],
footer .rts-footer-one .footer-one-single-wized .title,
footer .rts-footer-one .footer-one-single-wized .title span,
footer .rts-footer-one .footer-one-single-wized .title::after,
footer .rts-footer-one .footer-one-single-wized .title::before,
footer .rts-footer-one .footer-one-single-wized .rts-footer-time .single span,
footer .rts-footer-one .footer-one-single-wized .rts-footer-time .single i,
footer .rts-footer-one .footer-one-single-wized .rts-footer-time .single a,
footer .rts-footer-one .footer-one-single-wized .quick-link-footer li a:hover,
footer .rts-footer-one .footer-one-single-wized .quick-contact-footer li a:hover,
footer .rts-footer-one .footer-one-single-wized .quick-contact-footer li i {
  color: var(--color-blue-dark) !important;
}

footer .bg-success, 
footer .bg-green,
footer [style*="background-color: #84b840"],
footer [style*="background-color: #629D23"],
footer [style*="background-color: #7AAD4C"],
footer [style*="background-color:#84b840"],
footer [style*="background-color:#629D23"],
footer [style*="background-color:#7AAD4C"],
footer .rts-footer-one .footer-one-single-wized .title::after,
footer .rts-footer-one .footer-one-single-wized .title::before,
footer .rts-footer-one .footer-one-single-wized .newsletter-footer .subscribe-btn {
  background-color: var(--color-blue-dark) !important;
}

footer .border-success, 
footer .border-green,
footer [style*="border-color: #84b840"],
footer [style*="border-color: #629D23"],
footer [style*="border-color: #7AAD4C"],
footer [style*="border-color:#84b840"],
footer [style*="border-color:#629D23"],
footer [style*="border-color:#7AAD4C"],
footer .rts-footer-one .footer-one-single-wized .newsletter-footer .email {
  border-color: var(--color-blue-dark) !important;
}

footer svg path[fill="#84b840"],
footer svg path[fill="#629D23"],
footer svg path[fill="#7AAD4C"] {
  fill: var(--color-blue-dark) !important;
}

footer svg path[stroke="#84b840"],
footer svg path[stroke="#629D23"],
footer svg path[stroke="#7AAD4C"] {
  stroke: var(--color-blue-dark) !important;
}

/* Styles supplémentaires pour les éléments verts restants dans le footer */
footer .rts-footer-one {
  --footer-primary-color: var(--color-blue-dark);
}

footer .rts-footer-one .footer-one-single-wized .newsletter-footer .email:focus {
  border-color: var(--color-blue-dark) !important;
}

footer .rts-footer-one .footer-one-single-wized .newsletter-footer .subscribe-btn:hover {
  background-color: var(--color-blue-dark) !important;
  opacity: 0.9;
}

footer .rts-footer-one .footer-one-single-wized .quick-link-footer li a::before,
footer .rts-footer-one .footer-one-single-wized .quick-contact-footer li a::before {
  color: var(--color-blue-dark) !important;
}

/* Surcharger les éléments verts dans la pagination */
.pagination .page-item.active .page-link {
  background-color: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
}

/* Surcharger les boutons verts */
.btn-success, 
.btn-green {
  background-color: var(--color-blue-dark) !important;
  border-color: var(--color-blue-dark) !important;
}

.btn-outline-success, 
.btn-outline-green {
  color: var(--color-blue-dark) !important;
  border-color: var(--color-blue-dark) !important;
}

.btn-outline-success:hover, 
.btn-outline-green:hover {
  background-color: var(--color-blue-dark) !important;
  color: white !important;
}

/* Augmenter la taille des tooltips et infobulles */
.openuptip[data-flow="up"]::before,
.openuptip[data-flow="up"]::after,
[data-tooltip]::before,
[data-tooltip]::after,
.tooltip-inner {
  font-size: 1.1rem !important;
  padding: 8px 12px !important;
}

/* S'assurer que les devises sont correctement affichées dans les tooltips */
.tooltip-inner .currency,
.tooltip .currency,
[data-tooltip] .currency {
  display: none !important;
}

/* Augmenter la taille du champ de quantité dans les pages de détail */
.quantity-field,
.quantity-number,
.quantity-adder input {
  font-size: 1.2rem !important;
  font-weight: bold !important;
  min-width: 50px !important;
  text-align: center !important;
}

/* Améliorer l'apparence des boutons de quantité */
.quantity-adder {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0; /* Supprimé la marge pour un meilleur alignement */
  height: 50px; /* Même hauteur que le bouton Ajouter */
}

.quantity-adder .button {
  background-color: #f5f5f5;
  border: 1px solid #ddd;
  padding: 8px 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 1.3rem;
  width: 50px;
  height: 50px; /* Même hauteur que le bouton Ajouter */
  display: flex;
  align-items: center;
  justify-content: center;
}

.quantity-adder .button:hover {
  background-color: #e9e9e9;
}

.quantity-adder .button.minus {
  border-radius: 4px 0 0 4px;
}

.quantity-adder .button.plus {
  border-radius: 0 4px 4px 0;
}

.quantity-adder .quantity-field {
  border: 1px solid #ddd;
  border-left: none;
  border-right: none;
  text-align: center;
  padding: 8px;
  font-weight: bold;
  font-size: 2rem; /* Taille encore augmentée */
  width: 80px; /* Largeur augmentée */
  height: 50px; /* Même hauteur que le bouton Ajouter */
}

/* S'assurer que le bouton Ajouter a la bonne hauteur */
.rts-btn.btn-primary.radious-sm.with-icon {
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Aligner le dispositif de quantité avec le bouton Ajouter */
.cart-edits {
  display: flex;
  align-items: center;
  margin-right: 15px; /* Marge entre le sélecteur de quantité et le bouton */
}

.product-bottom-action {
  display: flex;
  align-items: center;
  margin-top: 15px; /* Espace au-dessus de la ligne des boutons */
}

/* Améliorer l'apparence du bandeau d'en-tête avec le slogan */
.header-top-area {
  background: linear-gradient(to right, #1A365D, #2A4A7F);
  padding: 15px 0;
  height: auto;
}

.header-top-area .disc {
  color: white;
  font-size: 1.1rem;
  font-weight: 500;
  margin: 0;
  padding: 5px 10px;
  text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);
  letter-spacing: 0.5px;
}

.header-top-area .contact-number-area p {
  color: white;
  font-size: 1rem;
  font-weight: 500;
}

.header-top-area .contact-number-area a {
  color: #FF6B00;
  font-weight: 600;
  transition: all 0.3s ease;
}

.header-top-area .contact-number-area a:hover {
  color: white;
  text-decoration: underline;
}

.bwtween-area-header-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 0;
}

/* Styles pour les mots-clés de commerce et les séparateurs */
.commerce-keyword {
  color: #1A365D;
  font-weight: 500;
  font-size: 1.05rem;
  cursor: default;
}

.nav-h_top .divider {
  color: #ccc;
  margin: 0 10px;
  font-weight: 300;
}

/* Augmenter la taille du texte d'aide et du numéro de téléphone */
.contact-number-area p {
  font-size: 1.15rem !important;
  font-weight: 500 !important;
  display: flex;
  align-items: center;
  gap: 5px;
}

.contact-number-area a {
  font-size: 1.15rem !important;
  font-weight: 600 !important;
}

/* Corriger l'espacement du chevron dans le sélecteur de pays */
.language-dropdown-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Ajouter une marge aux éléments de la liste de navigation */
.nav-h_top li {
  margin-right: 10px;
  margin-left: -5px; /* Ajout d'une marge négative à gauche */
}

/* Ajouter une marge spécifique au sélecteur de devise */
.currency-selector-container {
  margin-right: 15px !important; /* Réduit de 35px à 15px */
  position: relative;
}

/* Améliorer l'apparence générale du header */
.header-mid-wrapper-between {
  padding: 15px 0;
}

.nav-h_top {
  display: flex;
  align-items: center;
}