/*
 Theme Name:   Retailsy Child
 Theme URI:    https://jnbandpartners.com/formation
 Description:  Theme enfant de Retailsy pour customisations
 Author:       Lionelle
 Author URI:   https://jnbandpartners.com/formation
 Template:     retailsy
 Version:      1.0.0
 Text Domain:  retailsy-child
*/

 /* ------------------------------------
      Cacher entièrement la bannière
      (section.bread-title) sur tout le site
   ------------------------------------- */
   section.bread-title {
     display: none !important;
   }
/* Test de base : cache TOUTES les product-action */
.product-action {
  display: none !important;
}

/* ------------------------------------
   1) RETIRER LES BORDURES / ombres
   ------------------------------------ */
.woocommerce ul.products li.product .product,
.woocommerce ul.products li.product .product-single {
  border: none !important;
  box-shadow: none !important;
}

/* ------------------------------------
   2) RÉDUIRE LA TAILLE DU TITRE PRODUIT
   ------------------------------------ */
.woocommerce ul.products li.product .product-content h3 a {
  font-size: 12px !important;   /* ajustez selon vos besoins */
  line-height: 1.3;
}


.button-inscrire {
  display: inline-block;
  margin-top: 0.5em;
  padding: 0.5em 1em;
  background-color: #EF7E1B;
  color: blue;
  text-decoration: none;
  border-radius: 3px;
  font-size: 10px;
  width : 152px;
  height : 36px;
  font-weight: 500;
  transition: background-color .2s ease;
}
.button-inscrire:hover {
  background-color: #de6d10;
}

/* 1) On force la grille produits en flex pour des hauteurs égales */
ul.products li.product {
  display: flex;              /* active flexbox sur chaque carte */
  flex-direction: column;     /* empile les éléments verticalement */
  align-items: stretch;       /* étire le contenu à la même largeur */
  height: 100%;               /* pour participer aux calculs de hauteur */
}

/* 2) On fait du lien produit un conteneur flex pour gérer l’espace */
ul.products li.product .woocommerce-loop-product__link {
  display: flex;
  flex-direction: column;
  flex: 1;                    /* prend tout l’espace dispo */
}

/* 3) On pousse le bouton toujours en bas de la carte */
ul.products li.product .button-inscrire {
  display: block;             /* toujours visible */
  margin-top: auto;           /* pousse le bouton vers le bas */
  background-color: #2b4279;  /* votre couleur bleu foncé */
  color: #ffffff;             /* texte blanc */
  text-decoration: none;
  padding: 0.75em 1em;        /* ajustez la hauteur du bouton */
  text-align: center;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 600;
  transition: background-color .2s ease;
}

/* 4) État hover du bouton */
ul.products li.product .button-inscrire:hover {
  background-color: #1f2a38;
}

/* 5) Remise à zéro des styles « cachés » du thème d’origine */
ul.products li.product .button-inscrire {
  opacity:         1    !important;
  visibility:      visible !important;
  transform:       none !important;
}

/* 6) Facultatif : fixer une hauteur minimum pour homogénéiser */
ul.products li.product .woocommerce-loop-product__link {
  min-height: 150px;     /* ajustez selon votre design */
}

/* ========== Supprimer tout overlay sombre sur la vignette ========== */

/* 1) On neutralise tous les pseudo-éléments before/after 
     qui pourraient servir d’overlay */
.product-img::before,
.product-img::after,
.product-img a.product-link-image::before,
.product-img a.product-link-image::after {
  display: none !important;
  background: none !important;
  visibility: hidden !important;
}

/* 2) On force l’opacité de l’image à 100% */
.product-img img {
  opacity: 1 !important;
  filter: none !important;
}

/* 3) Au survol, on maintient l’image à pleine opacité */
.product-img:hover img,
.product-img a.product-link-image:hover img {
  opacity: 1 !important;
  filter: none !important;
}

/* Icône téléphone avant le lien dans le menu */
#text-11 p::before {
    content: "\f025"; /* Unicode Font Awesome pour 'fa-headphones' */
    font-family: "FontAwesome";
    margin-right: 8px;
    font-style: normal;
    font-weight: normal;
    display: inline-block;
	color: #f77c29;
}
#text-12 p::before {
    content: "\f0e0"; /* Unicode Font Awesome pour 'fa-envelope' */
    font-family: "FontAwesome";
    margin-right: 8px;
    font-style: normal;
    font-weight: normal;
    display: inline-block;
    color: #f77c29;
}

/* cacher la barre blanche */
.nav-area {
    display: none !important;
}

ul.products.columns-4 li.product {
    margin-right: 0.5% !important;
    margin-bottom: 15px;
}

/* Cible le bouton Retour à la boutique que vous avez injecté */
.jc-return-shop-before-nav .button {
  background-color: #F77C29 !important; /* votre orange */
  color:           #ffffff !important; /* texte blanc */
  border:          1px solid #F77C29 !important; /* bordure assortie */
  text-decoration: none !important;
}

.jc-return-shop-before-nav .button,
.jc-return-shop-before-nav .button:hover,
.jc-return-shop-before-nav .button:focus,
.jc-return-shop-before-nav .button:active {
  background-color:   #F77C29 !important;
  border-color:       #F77C29 !important;
  color:              #ffffff !important;
  text-decoration:    none !important;
  -webkit-text-fill-color: #ffffff !important; /* pour WebKit */
}

/* Au cas où un <span> soit injecté par le thème : */
.jc-return-shop-before-nav .button *,
.jc-return-shop-before-nav .button:hover *,
.jc-return-shop-before-nav .button:focus *,
.jc-return-shop-before-nav .button:active * {
  color: #ffffff !important;
  text-decoration: none !important;
  -webkit-text-fill-color: #ffffff !important;
}
   /* Force la police FontAwesome pour les <i> */
   .fa {
     font-family: FontAwesome !important;
     speak: none;
     font-style: normal;
     font-weight: normal;
     font-variant: normal;
     text-transform: none;
     line-height: 1;
   }

/* ==============
   Liste des icônes sociales
   ============== */
.widget_custom_html .jc-social-list {
  list-style: none;
  margin: 0;
  padding: 0;
  margin-top: 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.widget_custom_html .jc-social-list li {
  margin: 0;
  padding: 0;
}

/* Icônes : forme, taille, couleur par défaut */
.widget_custom_html .jc-social-list a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-size: 20px;
  text-decoration: none;
  background-color: transparent !important;
  color:            #000         !important;
  transition: background-color .3s ease,
              color            .3s ease,
              transform        .3s ease;
}

/* ==============
   Hover / Focus / Active : cercle orange + icône blanche
   ============== */
.widget_custom_html .jc-social-list a:hover,
.widget_custom_html .jc-social-list a:focus,
.widget_custom_html .jc-social-list a.active {
  background-color: #F77C29 !important;
  color:            #fff     !important;
  transform:        scale(1.1);
}

/* On force la couleur blanche DANS l’élément <i> (fa et fab) */
.widget_custom_html .jc-social-list a:hover .fa,
.widget_custom_html .jc-social-list a:hover .fab,
.widget_custom_html .jc-social-list a:focus .fa,
.widget_custom_html .jc-social-list a:focus .fab,
.widget_custom_html .jc-social-list a.active .fa,
.widget_custom_html .jc-social-list a.active .fab {
  color: #fff !important;
}

/* ==============
   Animation “pop + shake” sur l’icône au survol
   ============== */
/* on cible fa ET fab */
.widget_custom_html .jc-social-list a .fa,
.widget_custom_html .jc-social-list a .fab {
  display: inline-block;
  transition: transform .3s ease, color .3s ease;
}

.widget_custom_html .jc-social-list a:hover .fa,
.widget_custom_html .jc-social-list a:hover .fab {
  animation: jc-icon-hover 0.6s ease both;
}

@keyframes jc-icon-hover {
  0%   { transform: scale(1)   rotate(0deg); }
  30%  { transform: scale(1.2) rotate(-8deg); }
  60%  { transform: scale(1.1) rotate(6deg); }
  100% { transform: scale(1)   rotate(0deg); }
}