/* ========================================================= cssgalerie.css — MASTER CLEAN (sans doublons) Compatible : gallery-auto (oeuvres) + page gallery (index) ========================================================= */ /* ----------------------------- VARIABLES (facultatif) ------------------------------ */ :root{ --card-pad: 14px; --card-radius: 10px; --img-radius: 8px; --border: 1px solid rgba(0,0,0,0.18); --shadow: 0 6px 14px rgba(0,0,0,.12); --shadow-hover: 0 10px 22px rgba(0,0,0,.16); --price-blue: #069bb0; --orange: #FF8C00; --orange-dark: #f57f17; --red: #e30613; } /* ========================================================= 1) GALERIES AUTO (floral / abstraits / stilllife…) ========================================================= */ /* CARTE PRODUIT (cadre + ombre + padding interne) */ .gallery-auto .grid-item.album-item{ background: #fff; border: var(--border); border-radius: var(--card-radius); box-shadow: var(--shadow); padding: var(--card-pad); box-sizing: border-box; margin-bottom: 24px; /* IMPORTANT : rend l'ombre visible verticalement */ overflow: visible; /* IMPORTANT : ne pas couper l'ombre */ transition: transform .18s ease, box-shadow .18s ease; } .gallery-auto .grid-item.album-item:hover{ transform: translateY(-2px); box-shadow: var(--shadow-hover); } /* ZONE IMAGE (arrondi + petit espace) */ .gallery-auto .album-thumb{ position: relative; margin-bottom: 10px; border-radius: var(--img-radius); overflow: hidden; /* arrondi image */ } .gallery-auto .album-thumb img{ display:block; width:100%; height:auto; } /* BADGE VENDU (élégant, discret) */ .gallery-auto .badge-vendu{ position:absolute; top:10px; right:10px; width: 12px; height: 12px; border-radius: 50%; background: var(--red); box-shadow: 0 6px 14px rgba(0,0,0,.15); display:none; } .gallery-auto .album-item.vendu .badge-vendu{ display:block; } /* Texte */ .gallery-auto .grid-item.album-item h2{ margin: 6px 0 4px; font-size: 16px; } .gallery-auto .grid-item.album-item p{ margin: 0 0 10px; font-size: 13px; opacity: .86; } /* Zone prix + actions */ .gallery-auto .achat-zone{ display:flex; justify-content: space-between; align-items: center; gap: 10px; } .gallery-auto .art-price{ display:flex; align-items:center; gap: 8px; min-width: 60px; } /* PRIX */ .gallery-auto .price-new{ color: var(--price-blue); font-size: 18px; font-weight: 900; } .gallery-auto .price-old{ text-decoration: line-through; opacity: 0.6; font-size: 14px; } /* Actions */ .gallery-auto .actions{ display:flex; align-items:center; gap: 10px; } /* Par défaut on cache tout (le JS applyGalleryAutoFix affiche au bon moment) */ .gallery-auto .btn-offre, .gallery-auto .btn-message, .gallery-auto .bouton-achat{ display:none; } /* Boutons ronds (coeur + enveloppe) */ .gallery-auto .btn-heart{ display:inline-flex; align-items:center; justify-content:center; width: 25px; height: 25px; border-radius: 50%; color: #fff; font-size: 14px; cursor: pointer; text-decoration:none; } /* Couleurs */ .gallery-auto .btn-offre{ background: var(--orange-dark); } .gallery-auto .btn-message{ background: var(--orange); } /* Panier : icône orange (pas rond) */ .gallery-auto .bouton-achat{ display:inline-flex; align-items:center; justify-content:center; width: 25px; height: 25px; cursor:pointer; color: var(--orange); font-size: 18px; } /* Assure que les icônes FA s’affichent (au cas où) */ .gallery-auto .btn-heart i, .gallery-auto .bouton-achat i{ display:inline-block; opacity:1; visibility:visible; } /* Si tu utilises parfois la classe FontAwesome directement sur */ .gallery-auto .btn-offre.fa::before, .gallery-auto .btn-message.fa::before{ font-family: FontAwesome; color:#fff; } /* ========================================================= 2) PAGE "gallery.html" (index des catégories) => ajoute ========================================================= */ .page-gallery-index .grid-item.album-item > a{ display:block; background:#fff; border: var(--border); border-radius: var(--card-radius); box-shadow: var(--shadow); overflow:hidden; text-decoration:none; /* padding interne de la carte (donc image pas collée) */ padding: var(--card-pad); box-sizing:border-box; transition: transform .18s ease, box-shadow .18s ease; } .page-gallery-index .grid-item.album-item > a:hover{ transform: translateY(-2px); box-shadow: var(--shadow-hover); } /* Image avec arrondi interne + espace bas */ .page-gallery-index .grid-item.album-item .album-thumb{ border-radius: var(--img-radius); overflow:hidden; margin-bottom: 10px; aspect-ratio: 4/3; display:flex; align-items:center; justify-content:center; background:#f5f5f5; } .page-gallery-index .grid-item.album-item .album-thumb img{ display:block; max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; } /* Texte album */ .page-gallery-index .album-name{ margin-top: 6px; font-weight: 700; color: inherit; } .page-gallery-index .album-desc{ margin-top: 4px; opacity:.85; font-size: 13px; color: inherit; } /* Un peu d’air vertical (utile même en Masonry) */ .page-gallery-index .grid-item.album-item{ margin-bottom: 24px; } /* ========================================================= ZOOM (Magnific Popup) — SPLIT FINAL (image gauche, infos droite) Objectifs: - Fond homogène (pas de décalage gris/blanc) - Colonne droite plus large - Titre visible - Prix + actions juste au-dessus des conditions - Conditions collées en bas à droite ========================================================= */ .grid-item.section-row .section-inner{ text-align: center; } /* Dimension globale */ .mfp-figure-split .mfp-content{ width: 94vw !important; max-width: 1550px !important; } .mfp-figure-split .mfp-figure{ width: 100% !important; max-width: 100% !important; } /* Layout 2 colonnes : droite plus large */ .mfp-figure-split .mfp-split{ display: grid !important; grid-template-columns: 0.95fr 1.05fr !important; /* droite plus large */ gap: 16px !important; height: 86vh !important; padding: 16px !important; box-sizing: border-box; background: #f2f2f2 !important; border-radius: 10px !important; } /* Colonne gauche : image centrée, fond identique au global */ .mfp-figure-split .mfp-left{ min-height: 100%; min-width: 0; } .mfp-figure-split .mfp-img-wrap{ height: 100%; display:flex !important; align-items:center !important; justify-content:center !important; background: #f2f2f2 !important; border: 1px solid rgba(0,0,0,.10) !important; border-radius: 10px !important; padding: 10px !important; box-sizing: border-box; } .mfp-figure-split img.mfp-img{ max-height: 82vh !important; max-width: 100% !important; width: auto !important; height: auto !important; object-fit: contain !important; object-position: center !important; } /* Colonne droite : stack + bas fixé */ .mfp-figure-split .mfp-right{ background:#fff !important; border: 1px solid rgba(0,0,0,.10) !important; border-radius: 10px !important; padding: 14px 16px !important; display:flex !important; flex-direction:column !important; overflow:hidden !important; min-width: 0; } /* Contenu scrollable (titre/tech/texte) */ .mfp-figure-split .mfp-scroll{ overflow-y:auto !important; padding-right: 6px !important; display: flex !important; flex-direction: column !important; justify-content: center !important; flex: 1 !important; min-height: 0 !important; } /* Titre bien visible */ .mfp-figure-split .mfp-title{ display:block !important; font-size: 24px !important; font-weight: 800 !important; color: rgba(6,155,176,0.85) !important; margin: 0 0 16px 0 !important; letter-spacing: 0.5px; text-align: center !important; } .mfp-figure-split .mfp-technique{ font-size: 14px !important; color: rgba(6,155,176,0.75) !important; margin: 0 0 20px 0 !important; padding-bottom: 16px !important; border-bottom: 1px solid rgba(0,0,0,.08) !important; text-align: center !important; } .mfp-figure-split .mfp-desc{ white-space: pre-line !important; line-height: 1.6 !important; margin-top: 10px !important; text-align: center !important; } /* Zone basse (prix + actions) : juste au-dessus des conditions */ .mfp-figure-split .mfp-bottom{ margin-top: 10px !important; display:flex !important; align-items:center !important; justify-content: space-between !important; gap: 12px !important; } .mfp-figure-split .mfp-prices{ display:flex !important; align-items: baseline !important; gap: 10px !important; margin: 0 !important; } .mfp-figure-split .mfp-actions{ display:flex !important; align-items:center !important; gap: 10px !important; margin: 0 !important; border: 0 !important; padding: 0 !important; } /* Conditions collées en bas */ .mfp-figure-split .mfp-conditions{ margin-top: auto !important; padding-top: 12px !important; border-top: 1px solid rgba(0,0,0,.12) !important; font-size: 13px !important; color: rgba(6,155,176,0.75) !important; line-height: 1.45 !important; white-space: pre-line !important; min-height: 44px !important; } /* Mobile */ @media (max-width: 900px){ .mfp-figure-split .mfp-split{ grid-template-columns: 1fr !important; height: auto !important; } .mfp-figure-split img.mfp-img{ max-height: 60vh !important; } .mfp-figure-split .mfp-right{ overflow: visible !important; } .mfp-figure-split .mfp-scroll{ overflow: visible !important; } } /* Bande série pleine largeur */ .grid-item.album-item.section-row{width:100% !important; left:0 !important;} .grid-item.album-item.section-row .section-inner{text-align:center; padding:14px 18px; background:#f2f2f2; border-radius:10px; border:1px solid rgba(0,0,0,.10);} /* MODE SIMPLE : cacher achats/boutons */ .mode-simple .achat-zone, .mode-simple .actions, .mode-simple .btn-heart, .mode-simple .bouton-achat, .mode-simple .art-price{ display: none !important; } /* Vignettes images complementaires dans popup */ #mfpExtrasBar { flex-wrap: wrap; gap: 6px; justify-content: center; padding: 8px 0 4px; margin-top: 6px; border-top: 1px solid rgba(0,0,0,.08); } #mfpExtrasBar img { height: 52px; width: 52px; object-fit: cover; border-radius: 6px; cursor: pointer !important; border: 2px solid transparent; opacity: 0.75; transition: border-color .15s, opacity .15s; pointer-events: all !important; } #mfpExtrasBar img:hover { opacity: 1; border-color: #069bb0; } #mfpExtrasBar img.active { border-color: #f98e13; opacity: 1; }