/************************************************************ 1 — STRUCTURE DES PAGES GALERIES *************************************************************/ .am-galerie { background: transparent !important; } .am-gallery-wrap { width: 100%; } /************************************************************ 1bis — GRILLE GALERIE *************************************************************/ .am-gallery { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) !important; gap: 32px; width: 100%; } /************************************************************ 1ter — ITEM GALERIE *************************************************************/ .am-gallery-item { display: flex; flex-direction: column; align-items: center; } .am-image-wrapper { position: relative; width: 100%; aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; overflow: hidden; } .am-gallery-item img { width: 100%; height: 100%; object-fit: contain; display: block; } /************************************************************ 2 — LÉGENDE *************************************************************/ .am-caption { background: rgba(0, 0, 0, 0.70); padding: 12px 20px; margin-top: 10px; border-radius: 20px; color: #fff; font-size: 0.95em; text-align: center; display: inline-block; } /************************************************************ PULSE — "Cliquez pour zoomer" (HORIZONTAL LENT, MILIEU ÉCRAN) *************************************************************/ /* ===== BASE COMMUNE ===== */ .am-gallery-floating-pulse{ position: fixed; top: 50%; left: 0; z-index: 999999; display: flex; align-items: center; justify-content: center; border-radius: 999px; text-align: center; line-height: 1.15; font-weight: 700; pointer-events: none; user-select: none; transform: translateY(-50%); /* ✅ CONTOUR NOIR VISIBLE (PAS MASQUÉ PAR LE BLUR) */ box-shadow: 0 0 0 2px rgba(0,0,0,0.85), 0 10px 24px rgba(0,0,0,0.25); } /* ================= DESKTOP ================= */ @media (min-width: 769px){ .am-gallery-floating-pulse{ width: 120px; height: 120px; font-size: 14px; background: rgba(255,255,255,0.30); color: rgba(0,0,0,0.70); animation: amupPulseLRDesktop 25s linear infinite; } @keyframes amupPulseLRDesktop{ 0% { transform: translate(0, -50%); } 50% { transform: translate(calc(100vw - 120px), -50%); } 100% { transform: translate(0, -50%); } } } /* ================= MOBILE ================= */ @media (max-width: 768px){ .am-gallery-floating-pulse{ width: 88px; height: 88px; font-size: 12px; background: rgba(255,255,255,0.30); color: rgba(0,0,0,0.70); animation: amupPulseLRMobile 14s linear infinite; } @keyframes amupPulseLRMobile{ 0% { transform: translate(0, -50%); } 50% { transform: translate(calc(100vw - 88px), -50%); } 100% { transform: translate(0, -50%); } } } /************************************************************ MOBILE — GRILLE *************************************************************/ @media (max-width: 768px) { .am-gallery { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important; } .am-gallery-hover-hint { opacity: 1; width: 100px; height: 100px; } } /************************************************************ 4 — FONDS DESKTOP (INCHANGÉS) *************************************************************/ body.page-id-1438 { background-image: url("https://www.amupcycling.fr/wp-content/uploads/2026/01/fd-autruche.webp") !important; } body.page-id-1344 { background-image: url("https://www.amupcycling.fr/wp-content/uploads/2026/01/fd-chat.webp") !important; } body.page-id-1345 { background-image: url("https://www.amupcycling.fr/wp-content/uploads/2026/01/fd-meubles.webp") !important; } body.page-id-1334 { background-image: url("https://www.amupcycling.fr/wp-content/uploads/2026/01/fd-poissons.webp") !important; } body.page-id-1813 { background-image: url("https://www.amupcycling.fr/wp-content/uploads/2026/01/fd_echassiers.webp") !important; } body.page-id-1864 { background-image: url("https://www.amupcycling.fr/wp-content/uploads/2026/01/fd-oiseaux.webp") !important; } body.page-id-1850 { background-image: url("https://www.amupcycling.fr/wp-content/uploads/2026/01/fd_mignons.webp") !important; } body.page-id-1853 { background-image: url("https://www.amupcycling.fr/wp-content/uploads/2026/01/fd-hachoirs.webp") !important; } body.page-id-1820 { background-image: url("https://www.amupcycling.fr/wp-content/uploads/2026/01/fd-tableaux.webp") !important; } body.page-id-1876 { background-image: url("https://www.amupcycling.fr/wp-content/uploads/2026/01/fd-luminaires.webp") !important; } body.page-id-1884 { background-image: url("https://www.amupcycling.fr/wp-content/uploads/2026/01/fd-coq.webp") !important; } body.page-id-1887 { background-image: url("https://www.amupcycling.fr/wp-content/uploads/2026/01/fd-silhouettes.webp") !important; } body.page-id-1892 { background-image: url("https://www.amupcycling.fr/wp-content/uploads/2026/01/fd-futs.webp") !important; } /************************************************************ 4bis — FOND DE PAGE MOBILE (VERSION FONCTIONNELLE) OBJECTIF : - image = VRAI fond de page (pas overlay) - 1 seule image en haut, pleine largeur - reste de la page = couleur --amup-bg-tone - aucune répétition *************************************************************/ @media (max-width: 768px) { /* 🔒 ANNULATION TOTALE DES FONDS DESKTOP */ html, body{ background-image: none !important; background-repeat: no-repeat !important; background-attachment: scroll !important; } /* 🎯 FOND MOBILE À 2 COUCHES : 1) image en haut 2) couleur sur tout le reste */ body{ background-image: var(--amup-bg-image), linear-gradient( var(--amup-bg-tone, #f5f5f5), var(--amup-bg-tone, #f5f5f5) ) !important; background-repeat: no-repeat, no-repeat; background-position: top center, top left; background-size: 100% 42vh, 100% 100%; background-attachment: scroll, scroll; margin: 0; } /* 🧼 TOUS LES CONTENEURS TRANSPARENTS */ #outer-wrap, #content-wrap, #main, .site-content, .container, .page-header, .page-header-inner, .page-header-bg{ background: transparent !important; } /* 🖼️ IMAGE PAR GALERIE */ body.page-id-1438 { --amup-bg-image: url("https://www.amupcycling.fr/wp-content/uploads/2026/01/fd-autruche_mob.webp"); } body.page-id-1344 { --amup-bg-image: url("https://www.amupcycling.fr/wp-content/uploads/2026/01/fd-chat_mob.webp"); } body.page-id-1345 { --amup-bg-image: url("https://www.amupcycling.fr/wp-content/uploads/2026/01/fd-meubles_mob.webp"); } body.page-id-1334 { --amup-bg-image: url("https://www.amupcycling.fr/wp-content/uploads/2026/01/fd-poissons_mob.webp"); } body.page-id-1813 { --amup-bg-image: url("https://www.amupcycling.fr/wp-content/uploads/2026/01/fd_echassiers_mob.webp"); } body.page-id-1864 { --amup-bg-image: url("https://www.amupcycling.fr/wp-content/uploads/2026/01/fd-oiseaux_mob.webp"); } body.page-id-1850 { --amup-bg-image: url("https://www.amupcycling.fr/wp-content/uploads/2026/01/fd_mignons_mob.webp"); } body.page-id-1853 { --amup-bg-image: url("https://www.amupcycling.fr/wp-content/uploads/2026/01/fd-hachoirs_mob.webp"); } body.page-id-1820 { --amup-bg-image: url("https://www.amupcycling.fr/wp-content/uploads/2026/01/fd-tableaux_mob.webp"); } body.page-id-1876 { --amup-bg-image: url("https://www.amupcycling.fr/wp-content/uploads/2026/01/fd-luminaires_mob.webp"); } body.page-id-1884 { --amup-bg-image: url("https://www.amupcycling.fr/wp-content/uploads/2026/01/fd-coq_mob.webp"); } body.page-id-1887 { --amup-bg-image: url("https://www.amupcycling.fr/wp-content/uploads/2026/01/fd-silhouettes_mob.webp"); } body.page-id-1892 { --amup-bg-image: url("https://www.amupcycling.fr/wp-content/uploads/2026/01/fd-futs_mob.webp"); } }