/*
Theme Name: Latelier
Author: LATELIER
Author URI: https://latelier-conceptionweb.com/
Description: Agence web Nantes et agence de communication Nantes spécialisée dans la création de site internet sur Nantes. LATELIER est votre agence de communication globale et digitale sur Nantes (Print & Digitale).
Version: 1.0.0
*/
.single-post h3 {
        font-size: 1.35rem !important;
    }
.woocommerce {
  min-height: 80vh;
  color:#7b7b7b ;
}

.woocommerce h2 {
    color: #64B1FF;
    font-size: 1.5rem;
    font-weight: 700;
}
.woocommerce div.product {
    padding: 50px 0 50px 0;
}
.product.woocommerce-page .woocommerce {
  display: flex;
  justify-content: center;   /* centre horizontalement */
  align-items: center;       /* centre verticalement */
  min-height: 80vh;         /* au moins toute la hauteur écran */
}

.single-product .product {
  display: flex !important;
  flex-wrap: nowrap !important;
  justify-content: space-between;
  align-items: flex-start;
  max-width: 1260px;
  margin: 0 auto;
}

.single-product .product .woocommerce-product-gallery {
  flex: 0 0 40% !important;
  max-width: 40% !important;
}

.single-product .product .summary {
  flex: 0 0 60% !important;
  max-width: 60% !important;
}

.woocommerce div.product div.images img {

    width: 80%;

}

.woocommerce div.product div.images a {
    pointer-events: none; /* désactive le clic */
    cursor: default; /* enlève le curseur "loupe" */
}



@media (max-width: 768px) {
  .single-product .product {
    flex-direction: column !important;
  }
  .single-product .product .woocommerce-product-gallery,
  .single-product .product .summary {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
}


/* Bouton de localité */
.product-locality-btn {
  display: inline-block;
  background-color: #0047bb !important;
  color: #fff !important;
  font-weight: 400 !important;
  padding: 12px 24px;
  margin-top: 30px !important;
  border-radius: 8px;
  text-decoration: none;
  font-family: Marsek, serif;
  font-size: 13px !important;
  transition: all 0.3s ease;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
.product-locality-btn:hover {
  background: #64B1FF;
  color: #fff !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0,0,0,0.15);
}

/* Container du select */
.product-localities {
  margin: 20px 0;
}

/* Label */
.product-localities label {
  display: block;
  font-weight: 600;
  margin-bottom: 8px;
  color: #135273;
}

/* Select stylisé */
/* Container global */
.product-localities {
  margin: 1.5rem 0;
  font-family: inherit;
}

.product-localities label {
  display: block;
  margin-bottom: 6px;
  font-size: 14px;
  font-weight: 600;
  color: #333;
}

/* Style du select */
.product-localities select {
  width: 100%;
  padding: 10px 14px;
  font-size: 14px;
  color: #333;
  border: 2px solid #E1E1E1;    /* même bordure que tes images */
  border-radius: 8px;           /* coins arrondis */
  background-color: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05); /* légère ombre */
  transition: all 0.3s ease;
  appearance: none;             /* supprime le style natif */
  background-image: url("data:image/svg+xml;utf8,<svg fill='%23666666' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
  cursor: pointer;
}

/* Focus */
.product-localities select:focus {
  outline: none;
  border-color: #64B1FF; /* couleur bleue au focus */
  box-shadow: 0 4px 10px rgba(100,177,255,0.2);
}

/* Option */
.product-localities select option {
  padding: 8px;
}
/* Style des options */
.product-localities select option {
  padding: 10px;
  font-size: 14px;
  color: #333;
  background: #fff;
}

/* Option par défaut (placeholder) */
.product-localities select option[value=""] {
  color: #888;
  font-style: italic;
}

/* Option sélectionnée */
.product-localities select option:checked {
  background: #64B1FF;
  color: #fff;
}

/* Filigrane texte sur les images produit WooCommerce */
.woocommerce div.product div.images {
  position: relative;
}

.woocommerce div.product div.images::after {
  content: "© EVERAXIS";
  position: absolute;
  bottom: 10px;   /* distance du bas */
  Left:5px;  /* distance de la droite */
  font-size: 12px;
  color:#dfe6e9;
  padding: 4px 8px;
  border-radius: 4px;
  pointer-events: none; /* laisse le clic passer */
}
/* Bordure sympa autour des images produit WooCommerce */
.woocommerce div.product div.images img,
.woocommerce ul.products li.product img {
  border: 1px solid #E1E1E1;   /* couleur de ta bordure */
  border-radius: 12px;          /* coins arrondis (ajuste selon ton goût) */
  padding: 6px;                 /* petit espace entre l’image et la bordure */
  background: #fff;             /* fond blanc pour un effet propre */
  box-shadow: 0 2px 6px rgba(0,0,0,0.05); /* légère ombre pour le relief */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Effet au survol */
.woocommerce div.product div.images img:hover,
.woocommerce ul.products li.product img:hover {
  transform: scale(1.02);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}


#tab-extra-form .forminator-ui.forminator-custom-form-1480.forminator-design--default .forminator-button-submit:after {
 background-image: url(assets/img/arrow.png) !important;

}

/* Form */
.forminator-ui .forminator-radio-label {
  font-size: 12px !important; margin-right: 5px;
}
.applications .forminator-radio{
 margin-bottom: 0 !important;
}
.forminator-ui .forminator-radio {
 margin: 0 !important;
}
.forminator-ui .applications .forminator-field {
  display: flex;
  gap: 20px; /* espace entre les options */
  align-items: center;
}

.forminator-ui .applications .forminator-radio {
  display: flex;
  align-items: center;
  gap: 5px;
  max-width: none !important;
}
.applications {
  height: 30px !important
}
.forminator-ui .applications {
  display: flex;
  align-items: center;      /* ✅ Centre verticalement le contenu */
  height: 100%;             /* Optionnel, utile si la div a une hauteur définie */
}
#tab-extra-form .forminator-button-upload {
  background:#3cbfae !important;
  color: #fff;
}