/*
 Theme Name:   Hello Elementor Child
 Template:     hello-elementor
 Author:       [Chloe]
 Description:  Un thème enfant pour Hello Elementor.
 Version:      1.0.0
*/
/* — PRÉDÉCLARATIONS DES FONTS — */
@font-face {
  font-family: 'Marvel';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/Marvel-Regular.woff2') format('woff2');
}

@font-face {
  font-family: 'Marvel';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/Marvel-Italic.woff2') format('woff2');
}

@font-face {
  font-family: 'Marvel';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/Marvel-Bold.woff2') format('woff2');
}

@font-face {
  font-family: 'Marvel';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/Marvel-BoldItalic.woff2') format('woff2');
}

.elementor-nav-menu a {
  display: inline-block !important;
  /* optionally revert any other flex rules too, e.g. */
  align-items: initial !important;
  justify-content: initial !important;
}

/* Style général pour les messages WooCommerce */
.woocommerce-message {
    background-color: #FFF; /* Couleur de fond */
	margin-left: 100px; /* Espace gauche de la boîte de notification */
		margin-right: 100px; /* Espace droite de la boîte de notification */
    border-top: 4px solid #663366; /* Bordure à gauche */
    color: #663366; /* Couleur du texte */
    padding-left: 50px; /* Espace interne */
    font-size: 16px; /* Taille du texte */
    border-radius: 5px; /* Coins arrondis */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Ombre */
}

.woocommerce-message::before {
    content: "✔"; /* Code Unicode ou texte */
    color: #32cd32; /* Couleur du crochet */
    font-size: 15px; /* Taille du crochet */
    padding-left: -10px; /* Espacement avec le texte */
    font-weight: bold; /* Épaisseur */
}

/* Style pour le lien dans le message */
.woocommerce-message a {
    color: #FFCC66; /* Couleur des liens */
    text-decoration: underline; /* Soulignement */
    font-weight: bold; /* Texte en gras */
}

.woocommerce-message a:hover {
    color: #006400; /* Couleur des liens au survol */
}

.woocommerce-info {
    background-color: #FFF; /* Couleur de fond */
	margin-left: 0px; /* Espace gauche de la boîte de notification */
		margin-right: 0px; /* Espace droite de la boîte de notification */
    border-top: 4px solid #663366; /* Bordure à gauche */
    color: #663366; /* Couleur du texte */
    padding-left: 50px; /* Espace interne */
    font-size: 16px; /* Taille du texte */
    border-radius: 5px; /* Coins arrondis */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Ombre */
}

.woocommerce-info::before {
    content: "🛒"; /* Icône Unicode pour un panier */
    color: #663366; /* Couleur du crochet */
    font-size: 15px; /* Taille du crochet */
    padding-left: -10px; /* Espacement avec le texte */
    font-weight: bold; /* Épaisseur */
}

.woo-variation-gallery-wrapper 
.woo-variation-gallery-slider img,
.woo-variation-gallery-wrapper 
.woo-variation-gallery-slider img:hover, 
.elementor img,
.elementor img:hover {
    border-radius: 20px !important;
	overflow: hidden;
} /* page produit arrondis images */

.woo-variation-gallery-wrapper .wvg-gallery-thumbnail-image img {
    padding: 5px !important;
padding-top: 10px !important;
		border-radius: 20px !important;
    overflow: hidden;
} /* page produit espace thumbnails */

.woocommerce .variations_form .variations {
    width: auto !important; /* Annule la largeur forcée */
}

.woocommerce-privacy-policy-text a {
    color: #333333 !important;
	font-style: italic;
 /* Couleur pour remplacer le bleu pâle par défaut */
} 

.woocommerce-privacy-policy-text a:hover {
    color: #FFCC66 !important;
 /* Couleur pour remplacer le bleu pâle par défaut */
} 

.woocommerce div.product p.price, 
.woocommerce div.product span.price {
    color: #663366 !important; /* Remplace #xxxxx par la couleur souhaitée */
}

/* Changer la position du terme couleur de la variante et pastilles dessous */
.variations .label {
  display: inline-block;
  vertical-align: middle;
  white-space: nowrap;
  margin-right: 10px;
  padding-left: 10px;
}

.variations .value {
  display: inline-block;
  vertical-align: middle;
}

/* Forcer Couleur sur sa ligne + pastilles en dessous */
.variations tr {
  display: block;
  margin-bottom: 10px;
}

.variations td.label {
  display: block;
  margin-bottom: 5px;
  padding-bottom: 0;
  padding-top: 0;
  white-space: normal;
}

.variations td.value {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding-top: 10;
  padding-bottom: 0;
	background: transparent !important;
  box-shadow: none !important;
}

.variations td.value {
  background: none !important;
  box-shadow: none !important;
}

.variations td.value .thwvsf-wrapper-ul {
  background: none !important;
  box-shadow: none !important;
  border: none !important;
}

/* Forcer la couleur hover pour le menu de pied de page */
.elementor-nav-menu--main .elementor-nav-menu a:hover {
  color: #FFCC66 !important; /* Jaune ou la couleur que tu veux */
}

ul.thwvsf-wrapper-ul {
  display: flex;
  flex-wrap: wrap;
}

/* Pastille sur mesure à la fin de la liste des pastilles pages produits */
ul.thwvsf-wrapper-ul li[data-value="choix-personnalise"] {
  order: 99;
}

/* Section diffuseur panier - 4 accessoires ajustés en CSS */
/* --- Grille responsive des produits complémentaires (cross-sells) --- */
.cross-sells ul.products {
  display: grid !important;
  grid-template-columns: repeat(5, 1fr);
  gap: 18px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.cross-sells ul.products li.product {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  width: 100% !important;
  padding: 10px 0;
  border-bottom: none;
  min-height: 200px; /* pour alignement vertical uniforme */
}

/* --- Titre (h2) du bloc cross-sells --- */
.cross-sells h2 {
  font-size: 18px;
  color: #663366;
	padding-top: 30px;
	padding-left: 19px;
}

/* --- Taille des images plus compacte --- */
.cross-sells ul.products li.product img {
  width: 80px;
  height: auto;
  border-radius: 4px;
  margin-bottom: 5px;
}

/* --- Ajustement du prix --- */
.cross-sells ul.products li.product .price {
  font-size: 14px;
  margin: 5px 0;
  color: #663366; /* mauve */
}

/* --- Lien au survol (titre et prix) --- */
.cross-sells ul.products li.product a:hover {
  color: #FFFFFF !important;
  text-decoration: none;
}

/* --- Bouton Ajouter au panier : contour mauve + fond transparent --- */
.cross-sells ul.products li.product .button {
  font-size: 16px;
  font-family: Marvel;
  padding: 6px 12px;
  background-color: transparent;
  border: 1px solid #663366;
  color: #663366;
  border-radius: 4px;
  margin-top: 5px;
  transition: all 0.3s ease;
}

.cross-sells ul.products li.product .button:hover {
  background-color: #663366;
  color: #fff;
}

/* --- Responsive --- */
@media (max-width: 1024px) {
  .cross-sells ul.products {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .cross-sells ul.products {
    grid-template-columns: 1fr;
  }
}

/* Cacher la 1ʳᵉ miniature dans le slider thumbnails */
.woocommerce-product-gallery .flex-control-nav li:first-child {
  display: none !important;
}

/* Liens sur fond foncé */
.link-dark-bg a {
    color: #FFCC66 !important; /* Jaune */
}

.link-dark-bg a:hover {
    color: #ffffff !important; /* Variante claire au survol */
}

/* Liens sur fond pâle */
.link-light-bg a,
.link-light-bg a:visited {
  color: #663366 !important;
	font-weight: 900;
}

.link-light-bg a:hover {
  color: #FFCC66 !important;
	font-weight: 900;
}

/* Couleurs liens woocommerce checkout page */ 
.elementor-widget-woocommerce-checkout-page a {
  color: #663366 !important;
  font-weight: 700 !important;
}
.woocommerce-table__product-name a:hover {
  color: #FFCC66 !important;
}

/* — Menu Header — */
.elementor-element-9bae43c .elementor-nav-menu--main .elementor-item {
  color: #663366 !important;
  transition: color .2s;
}
.elementor-element-9bae43c .elementor-nav-menu--main .elementor-item:hover {
  color: #66336696 !important;
}


/* — Menu Footer gauche — */
.elementor-element-ff88417 .elementor-nav-menu--main .elementor-item {
  color: #FFF !important;
  transition: color .2s;
}
.elementor-element-ff88417 .elementor-nav-menu--main .elementor-item:hover {
  color: #FFCC66 !important;
}

/* — Menu Footer droite — */
.elementor-element-018597e .elementor-nav-menu--main .elementor-item {
  color: #FFF !important;
  transition: color .2s;
}
.elementor-element-018597e .elementor-nav-menu--main .elementor-item:hover {
  color: #FFCC66 !important;
}