/*****************************************************************************/ /******************************* Image Gallery *******************************/ /*****************************************************************************/ /* ========================= */ /* ADMIN BACK-OFFICE */ /* ========================= */ /* Conteneur de la galerie dans l'admin */ body.et-db #et-boc .et-l #product-gallery-container{ display:flex; margin-top:10px; } /* Liste des images sélectionnées */ body.et-db #et-boc .et-l .inside #product-gallery-preview{ display:flex!important; flex-wrap:wrap; gap:10px; padding:0; list-style:none; } /* Vignettes admin */ #product-gallery-preview li{ position:relative; width:100px;height:100px; overflow:hidden; border:1px solid #6d7680; } #product-gallery-preview img{ width:100%;height:100%; object-fit:cover;display:block; } /* Bouton suppression */ .remove-image{ position:absolute;top:-5px;right:-5px; background:#fcc400;color:#fff; border:none;border-radius:50%; width:20px;height:20px;font-size:14px; line-height:20px;text-align:center; cursor:pointer; } /* Bouton ajout */ #add-gallery-images{ margin-top:15px; background:#161616;color:#fff; padding:8px 12px;border:none; border-radius:3px;cursor:pointer; } #add-gallery-images:hover{background:#fcc400;} /* ========================= */ /* FRONT-END */ /* ========================= */ .entete_fp_gallery .et_pb_code_inner { display: flex; } @media (max-width: 768px) { .entete_fp_gallery .et_pb_code_inner { flex-direction: column; } } /* ---------- SLIDER PRINCIPAL ---------- */ .galerie-container{margin:auto;} .main-slider{width:100%;aspect-ratio:4/3;} .main-slider .galerie-wrapper{height:100%;} /* Cacher toutes les slides par défaut… */ .main-slider .galerie-slide{display:none;width:100%;height:100%;} /* …sauf celle marquée .is-active (HTML généré par le shortcode) */ .main-slider .galerie-slide.is-active{display:block;} /* Images principales */ .main-slider .galerie-slide img{ width:100%;height:100%; object-fit:cover;object-position:center; display:block; } /* ---------- MINIATURES ---------- */ .thumb-slider{opacity:0;transition:opacity .25s ease;} /* Révélées quand le JS ajoute .js-gallery-ready sur */ body.js-gallery-ready .thumb-slider{opacity:1 !important;} .thumb-slider .galerie-wrapper{ display:flex; flex-direction: column; gap:15px; overflow-y:auto; } .thumb-slider .galerie-slide{flex:0 0 auto;width:100px;} .thumb-slider .galerie-slide img{ width:100%;height:auto; object-fit:cover;border-radius:4px;display:block; } /* Mise en surbrillance miniature active (JS peut ajouter cette classe) */ .thumb-slider .galerie-slide-thumb-active{border:2px solid var(--main-color);opacity:1;} @media (max-width: 768px) { body.js-gallery-ready .thumb-slider { order: 2; } .thumb-slider .galerie-wrapper { flex-direction: row; gap: 20px; margin-top: 20px; margin-bottom: 20px; flex-wrap: wrap; } .thumb-slider .galerie-slide { width: 80px; } } /* ---------- BOUTONS & PAGINATION (si utilisés) ---------- */ .galerie-button-next, .galerie-button-prev{ color:#161616;border:none;background:none; } .galerie-button-next:hover, .galerie-button-prev:hover{color:#fcc400;} .galerie-pagination-bullet{ background:#6d7680;opacity:.5; } .galerie-pagination-bullet-active{ background:#fcc400;opacity:1; }