/*!
Theme Name: Profecient Child
Theme URI: https://profecient.jegtheme.com/
Description: This is Profecient child theme
Author: jegtheme
Author URI: https://themeforest.net/user/jegtheme
Template: profecient-theme
Version: 1.0.0
License: http://themeforest.net/licenses/
License URI: http://themeforest.net/licenses/
Tags: custom-background, custom-colors, custom-menu, editor-style, featured-images, full-width-template, sticky-post, threaded-comments, translation-ready
Text Domain: profecient-child
*/


/* 
   --- Conteneur global : on prévoit le défilement horizontal et le "snap" 
   pour un slider purement CSS.
*/
.produits-similaires-linked {
  width: 100%;
  position: relative;
  overflow-x: auto;            /* scroll horizontal */
  padding: 1rem 0;             /* un peu d'espace en haut/bas */
  scroll-snap-type: x proximity; /* effet "magnétique" si souhaité */
  /* facultatif: masquer la scrollbar sur certains navigateurs */
  -webkit-overflow-scrolling: touch; 
}

.produits-similaires-titre {
 	text-align:center;
	color: var(--e-global-color-primary);
    text-transform: initial;
	font-weight:700;
	margin:25px 0px;
}

/* 
   --- Liste des produits : en flex pour afficher les cartes sur une ligne.
*/
.products-linked {
  display: flex;
  gap: 1rem;       /* espace horizontal entre chaque carte */
  margin: 0;
  padding: 0;
  list-style: none;
}

/* 
   --- Chaque "carte" produit : on fixe une largeur pour en voir 3 + la 4ᵉ partielle.
   Sur un grand écran, ~30% par carte => 3 cartes = 90%, donc 10% restant 
   pour entrevoir la 4ᵉ. Ajustez à votre goût.
*/
.product-linked {
    display: flex;
    flex: 0 0 calc(30% - 1rem);
    flex-direction: column;
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 10px;
    box-sizing: border-box;
    padding: 1rem;
    text-align: center;
    scroll-snap-align: start;
    justify-content: space-between;
}

/* Petits ajustements sur les images */
.product-linked img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto 1rem;
}

.en-savoir-plus {
    width: 100%;
    color: #fff;
    text-decoration: none;
    text-align: center;
    border-radius: 3px;
    transition: background-color 0.3s ease;
    display: block;
    background-color: #1d71bb;
    padding: 10px;
    border-radius: 30px;
}

.en-savoir-plus:hover {
    background-color: #166099; /* Optionnel : une teinte légèrement plus foncée pour l'effet hover */
	color: #fff !important;
}


/* 
   --- Responsivité : on change la largeur des cartes 
   pour n'en afficher que 2 (ou 1) par "page" sur écran plus petit.
*/

/* Tablette ~ en dessous de 992px : 2 cartes + partielle */
@media (max-width: 992px) {
  .product-linked {
    flex: 0 0 calc(45% - 1rem);
  }
}

/* Mobile ~ en dessous de 600px : 1 carte + partielle */
@media (max-width: 600px) {
  .product-linked {
    flex: 0 0 calc(80% - 1rem);
  }
}

/* Pleine largeur pour mon modèle : Product Floody*/

.site-main {
        max-width: 100%;
}


/* Page produit simple */
.acf-bon-a-savoir .title {
    height: 40px;
    width: 250px;
    background-image: url('https://preprodsedipec.floody.fr/wp-content/uploads/2025/03/visuel.jpg');
    background-size: cover;        /* adapte la taille pour couvrir l'élément */
    background-position: center;   /* centre l'image */
    background-repeat: no-repeat;  /* évite la répétition de l'image */
    color: white;
    padding: 0px 10px;
    display: flex;
    align-items: center;
    font-weight: 400;
    border-radius: 10px 0px 0px 0px;
}

.acf_text{
    padding: 0px 15px;
}