{"id":61,"date":"2026-01-04T14:21:22","date_gmt":"2026-01-04T13:21:22","guid":{"rendered":"https:\/\/lepontdepierre.com\/?page_id=61"},"modified":"2026-01-05T02:30:10","modified_gmt":"2026-01-05T01:30:10","slug":"mes-creations","status":"publish","type":"page","link":"https:\/\/lepontdepierre.com\/index.php\/mes-creations\/","title":{"rendered":"Mes cr\u00e9ations"},"content":{"rendered":"\n<div class=\"wp-block-group alignfull is-layout-flow wp-block-group-is-layout-flow\">\n<!-- CSS \u00e0 mettre dans Apparence > Personnaliser > CSS additionnel -->\n<style>\n:root {\n    --color-primary: #5D4E3C;\n    --color-secondary: #8B7355;\n    --color-accent: #A89279;\n    --color-dark: #3A2F23;\n    --color-cream: #E8E3D8;\n    --color-warm-white: #F2EFE8;\n    --color-stone: #9B9388;\n    --font-display: 'Cinzel', serif;\n    --font-body: 'Crimson Text', serif;\n}\n\n\/* Hero Section *\/\n.pierre-creations .hero {\n    position: relative;\n    height: 45vh;\n    min-height: 300px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-accent) 100%);\n    margin-bottom: 3rem;\n}\n\n.pierre-creations .hero-content {\n    text-align: center;\n    color: white;\n    padding: 2rem;\n}\n\n.pierre-creations .hero-title {\n    font-family: var(--font-display);\n    font-size: clamp(2.5rem, 6vw, 4rem);\n    font-weight: 600;\n    letter-spacing: 0.15em;\n    text-transform: uppercase;\n    margin-bottom: 0.5rem;\n}\n\n\/* Gallery Section *\/\n.pierre-creations .gallery-section {\n    padding: 0 2rem 6rem;\n    max-width: 1400px;\n    margin: 0 auto;\n}\n\n\/* Filters *\/\n.pierre-creations .filters {\n    display: flex;\n    justify-content: center;\n    flex-wrap: wrap;\n    gap: 0.8rem;\n    margin-bottom: 3rem;\n}\n\n.pierre-creations .filter-btn {\n    padding: 0.7rem 1.8rem;\n    background: white;\n    color: var(--color-dark);\n    border: 2px solid var(--color-stone);\n    font-family: var(--font-display);\n    font-size: 0.8rem;\n    text-transform: uppercase;\n    letter-spacing: 0.08em;\n    cursor: pointer;\n    transition: all 0.3s ease;\n    font-weight: 600;\n    border-radius: 4px;\n}\n\n.pierre-creations .filter-btn:hover,\n.pierre-creations .filter-btn.active {\n    background: var(--color-primary);\n    color: white;\n    border-color: var(--color-primary);\n    transform: translateY(-2px);\n    box-shadow: 0 4px 12px rgba(93, 78, 60, 0.3);\n}\n\n\/* Gallery Grid *\/\n.pierre-creations .gallery-grid {\n    display: grid;\n    grid-template-columns: repeat(3, 1fr);\n    grid-auto-rows: 300px;\n    gap: 1.5rem;\n    margin-bottom: 3rem;\n}\n\n\/* Tailles vari\u00e9es *\/\n.pierre-creations .gallery-item {\n    position: relative;\n    overflow: hidden;\n    cursor: pointer;\n    border-radius: 6px;\n    transition: all 0.3s ease;\n}\n\n.pierre-creations .gallery-item.size-large {\n    grid-column: span 2;\n    grid-row: span 2;\n}\n\n.pierre-creations .gallery-item.size-tall {\n    grid-row: span 2;\n}\n\n.pierre-creations .gallery-item.size-wide {\n    grid-column: span 2;\n}\n\n.pierre-creations .gallery-item:hover {\n    transform: translateY(-5px);\n    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.25);\n}\n\n.pierre-creations .gallery-item.hidden {\n    display: none;\n}\n\n.pierre-creations .gallery-image-wrapper {\n    position: relative;\n    width: 100%;\n    height: 100%;\n    overflow: hidden;\n}\n\n.pierre-creations .gallery-image {\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n    transition: transform 0.5s ease;\n}\n\n.pierre-creations .gallery-item:hover .gallery-image {\n    transform: scale(1.05);\n}\n\n\/* Overlay TOUJOURS VISIBLE - Style Grid Hover 11 *\/\n.pierre-creations .gallery-overlay {\n    position: absolute;\n    inset: 0;\n    background: linear-gradient(\n        180deg,\n        rgba(0, 0, 0, 0) 0%,\n        rgba(0, 0, 0, 0.2) 40%,\n        rgba(0, 0, 0, 0.7) 80%,\n        rgba(0, 0, 0, 0.85) 100%\n    );\n    display: flex;\n    flex-direction: column;\n    justify-content: space-between;\n    padding: 1.5rem;\n}\n\n\/* Badges multiples en haut *\/\n.pierre-creations .gallery-badges {\n    display: flex;\n    gap: 0.5rem;\n    flex-wrap: wrap;\n}\n\n.pierre-creations .gallery-badge {\n    background: var(--color-primary);\n    color: white;\n    padding: 0.35rem 0.9rem;\n    font-family: var(--font-display);\n    font-size: 0.65rem;\n    text-transform: uppercase;\n    letter-spacing: 0.08em;\n    font-weight: 700;\n    border-radius: 3px;\n}\n\n.pierre-creations .gallery-badge.badge-secondary {\n    background: var(--color-secondary);\n}\n\n\/* Contenu en bas *\/\n.pierre-creations .gallery-content {\n    display: flex;\n    flex-direction: column;\n    gap: 0.8rem;\n}\n\n.pierre-creations .gallery-title {\n    font-family: var(--font-display);\n    font-size: 1.3rem;\n    color: white;\n    font-weight: 600;\n    letter-spacing: 0.02em;\n    line-height: 1.35;\n    margin: 0;\n}\n\n.pierre-creations .gallery-meta {\n    display: flex;\n    align-items: center;\n    gap: 1rem;\n    font-size: 0.8rem;\n    color: rgba(255, 255, 255, 0.9);\n    font-family: var(--font-body);\n}\n\n.pierre-creations .meta-item {\n    display: flex;\n    align-items: center;\n    gap: 0.35rem;\n}\n\n.pierre-creations .meta-icon {\n    font-size: 0.85rem;\n}\n\n\/* Load More Button - Style bleu comme l'exemple *\/\n.pierre-creations .load-more-container {\n    text-align: center;\n    margin-top: 2.5rem;\n}\n\n.pierre-creations .load-more-btn {\n    padding: 1rem 2.5rem;\n    background: #2D7EF7;\n    color: white;\n    border: none;\n    font-family: var(--font-display);\n    font-size: 0.8rem;\n    text-transform: uppercase;\n    letter-spacing: 0.1em;\n    cursor: pointer;\n    transition: all 0.3s ease;\n    font-weight: 700;\n    border-radius: 4px;\n    box-shadow: 0 4px 15px rgba(45, 126, 247, 0.3);\n}\n\n.pierre-creations .load-more-btn:hover {\n    background: #1a6be6;\n    transform: translateY(-2px);\n    box-shadow: 0 6px 20px rgba(45, 126, 247, 0.4);\n}\n\n.pierre-creations .load-more-btn.hidden {\n    display: none;\n}\n\n\/* Empty State *\/\n.pierre-creations .empty-state {\n    text-align: center;\n    padding: 4rem 2rem;\n    display: none;\n}\n\n.pierre-creations .empty-state.visible {\n    display: block;\n}\n\n.pierre-creations .empty-icon {\n    font-size: 3rem;\n    margin-bottom: 1rem;\n    opacity: 0.5;\n}\n\n.pierre-creations .empty-title {\n    font-family: var(--font-display);\n    font-size: 1.5rem;\n    color: var(--color-primary);\n    margin-bottom: 0.5rem;\n}\n\n.pierre-creations .empty-text {\n    font-size: 1rem;\n    color: var(--color-dark);\n    opacity: 0.7;\n}\n\n\/* Responsive *\/\n@media (max-width: 968px) {\n    .pierre-creations .gallery-grid {\n        grid-template-columns: repeat(2, 1fr);\n        grid-auto-rows: 280px;\n        gap: 1rem;\n    }\n}\n\n@media (max-width: 640px) {\n    .pierre-creations .gallery-grid {\n        grid-template-columns: 1fr;\n        grid-auto-rows: 320px;\n    }\n    \n    .pierre-creations .gallery-item.size-large,\n    .pierre-creations .gallery-item.size-tall,\n    .pierre-creations .gallery-item.size-wide {\n        grid-column: span 1;\n        grid-row: span 1;\n    }\n    \n    .pierre-creations .filters {\n        gap: 0.5rem;\n    }\n    \n    .pierre-creations .filter-btn {\n        padding: 0.6rem 1.2rem;\n        font-size: 0.7rem;\n    }\n    \n    .pierre-creations .gallery-title {\n        font-size: 1.1rem;\n    }\n}\n\n\/* Animation *\/\n@keyframes fadeInUp {\n    from {\n        opacity: 0;\n        transform: translateY(20px);\n    }\n    to {\n        opacity: 1;\n        transform: translateY(0);\n    }\n}\n\n.pierre-creations .gallery-item {\n    animation: fadeInUp 0.4s ease-out backwards;\n}\n\n.pierre-creations .gallery-item:nth-child(1) { animation-delay: 0.05s; }\n.pierre-creations .gallery-item:nth-child(2) { animation-delay: 0.1s; }\n.pierre-creations .gallery-item:nth-child(3) { animation-delay: 0.15s; }\n.pierre-creations .gallery-item:nth-child(4) { animation-delay: 0.2s; }\n.pierre-creations .gallery-item:nth-child(5) { animation-delay: 0.25s; }\n.pierre-creations .gallery-item:nth-child(6) { animation-delay: 0.3s; }\n<\/style>\n\n<!-- HTML -->\n<div class=\"pierre-creations\">\n    <div class=\"hero\">\n        <div class=\"hero-content\">\n            <h1 class=\"hero-title\">Mes Cr\u00e9ations<\/h1>\n        <\/div>\n    <\/div>\n\n    <section class=\"gallery-section\">\n        <div class=\"filters\">\n            <button class=\"filter-btn active\" data-filter=\"all\">Toutes<\/button>\n            <button class=\"filter-btn\" data-filter=\"sacoche\">Sacoches<\/button>\n            <button class=\"filter-btn\" data-filter=\"bracelet\">Bracelets<\/button>\n            <button class=\"filter-btn\" data-filter=\"porte-monnaie\">Porte-monnaie<\/button>\n            <button class=\"filter-btn\" data-filter=\"sac-a-main\">Sacs \u00e0 main<\/button>\n            <button class=\"filter-btn\" data-filter=\"autres\">Autres<\/button>\n        <\/div>\n\n        <div class=\"gallery-grid\" id=\"galleryGrid\"><\/div>\n\n        <div class=\"empty-state\" id=\"emptyState\">\n            <div class=\"empty-icon\">\ud83d\udd0d<\/div>\n            <h3 class=\"empty-title\">Aucune cr\u00e9ation trouv\u00e9e<\/h3>\n            <p class=\"empty-text\">Essayez un autre filtre<\/p>\n        <\/div>\n\n        <div class=\"load-more-container\">\n            <button class=\"load-more-btn\" id=\"loadMoreBtn\">LOAD MORE<\/button>\n        <\/div>\n    <\/section>\n<\/div>\n\n<!-- JavaScript -->\n<script>\n(function() {\n    const creations = [\n        {\n            id: 1,\n            title: \"Collection Duo Artisanale Premium\",\n            category: \"sacoche\",\n            badges: [\"Sacoche\", \"Nouveau\"],\n            image: \"https:\/\/lepontdepierre.com\/wp-content\/uploads\/2025\/12\/Gemini_Generated_Image_dk53l0dk53l0dk53.png\",\n            author: \"Pierre Mauduit\",\n            date: \"5 Jan 2026\",\n            size: \"normal\"\n        },\n        {\n            id: 2,\n            title: \"Guide Complet des Techniques de Maroquinerie\",\n            category: \"sacoche\",\n            badges: [\"Artisanat\"],\n            image: \"https:\/\/lepontdepierre.com\/wp-content\/uploads\/2025\/12\/Gemini_Generated_Image_b44ty0b44ty0b44t.png\",\n            author: \"Pierre Mauduit\",\n            date: \"4 Jan 2026\",\n            size: \"normal\"\n        },\n        {\n            id: 3,\n            title: \"L'Art de la Cr\u00e9ation en Cuir\",\n            category: \"bracelet\",\n            badges: [\"Bracelet\"],\n            image: \"https:\/\/lepontdepierre.com\/wp-content\/uploads\/2025\/12\/Gemini_Generated_Image_fxzzqffxzzqffxzz.png\",\n            author: \"Pierre Mauduit\",\n            date: \"3 Jan 2026\",\n            size: \"tall\"\n        },\n        {\n            id: 4,\n            title: \"Bracelets Personnalis\u00e9s Techniques Avanc\u00e9es\",\n            category: \"bracelet\",\n            badges: [\"Bracelet\", \"Sur mesure\"],\n            image: \"https:\/\/lepontdepierre.com\/wp-content\/uploads\/2025\/12\/Gemini_Generated_Image_fxzzqffxzzqffxzz.png\",\n            author: \"Pierre Mauduit\",\n            date: \"2 Jan 2026\",\n            size: \"normal\"\n        },\n        {\n            id: 5,\n            title: \"Porte-monnaie Traditionnel Fait Main\",\n            category: \"porte-monnaie\",\n            badges: [\"Porte-monnaie\"],\n            image: \"https:\/\/lepontdepierre.com\/wp-content\/uploads\/2025\/12\/Gemini_Generated_Image_wgfc63wgfc63wgfc.png\",\n            author: \"Pierre Mauduit\",\n            date: \"1 Jan 2026\",\n            size: \"normal\"\n        },\n        {\n            id: 6,\n            title: \"Collection Sac \u00c9l\u00e9gance Premium\",\n            category: \"sac-a-main\",\n            badges: [\"Sac \u00e0 main\"],\n            image: \"https:\/\/lepontdepierre.com\/wp-content\/uploads\/2025\/12\/Gemini_Generated_Image_dk53l0dk53l0dk53.png\",\n            author: \"Pierre Mauduit\",\n            date: \"31 D\u00e9c 2025\",\n            size: \"large\"\n        },\n        {\n            id: 7,\n            title: \"Ceinture Signature Intemporelle\",\n            category: \"autres\",\n            badges: [\"Ceinture\", \"Signature\"],\n            image: \"https:\/\/lepontdepierre.com\/wp-content\/uploads\/2025\/12\/Gemini_Generated_Image_43v7jb43v7jb43v7.png\",\n            author: \"Pierre Mauduit\",\n            date: \"30 D\u00e9c 2025\",\n            size: \"normal\"\n        },\n        {\n            id: 8,\n            title: \"Sac Vintage Collection Exclusive\",\n            category: \"sac-a-main\",\n            badges: [\"Sac \u00e0 main\", \"Vintage\"],\n            image: \"https:\/\/lepontdepierre.com\/wp-content\/uploads\/2025\/12\/Gemini_Generated_Image_cssym8cssym8cssy.png\",\n            author: \"Pierre Mauduit\",\n            date: \"29 D\u00e9c 2025\",\n            size: \"normal\"\n        },\n        {\n            id: 9,\n            title: \"Porte-monnaie Grand-P\u00e8re Authentique\",\n            category: \"porte-monnaie\",\n            badges: [\"Porte-monnaie\"],\n            image: \"https:\/\/lepontdepierre.com\/wp-content\/uploads\/2025\/12\/Gemini_Generated_Image_wgfc63wgfc63wgfc.png\",\n            author: \"Pierre Mauduit\",\n            date: \"28 D\u00e9c 2025\",\n            size: \"tall\"\n        },\n        {\n            id: 10,\n            title: \"L'Artisanale Signature Collection\",\n            category: \"sacoche\",\n            badges: [\"Sacoche\"],\n            image: \"https:\/\/lepontdepierre.com\/wp-content\/uploads\/2025\/12\/Gemini_Generated_Image_cssym8cssym8cssy.png\",\n            author: \"Pierre Mauduit\",\n            date: \"27 D\u00e9c 2025\",\n            size: \"wide\"\n        },\n        {\n            id: 11,\n            title: \"Mini Cartable Cuir Premium\",\n            category: \"autres\",\n            badges: [\"Accessoire\"],\n            image: \"https:\/\/lepontdepierre.com\/wp-content\/uploads\/2025\/12\/Gemini_Generated_Image_wgfc63wgfc63wgfc.png\",\n            author: \"Pierre Mauduit\",\n            date: \"26 D\u00e9c 2025\",\n            size: \"normal\"\n        },\n        {\n            id: 12,\n            title: \"Bracelet Cuir Naturel Grav\u00e9\",\n            category: \"bracelet\",\n            badges: [\"Bracelet\"],\n            image: \"https:\/\/lepontdepierre.com\/wp-content\/uploads\/2025\/12\/Gemini_Generated_Image_fxzzqffxzzqffxzz.png\",\n            author: \"Pierre Mauduit\",\n            date: \"25 D\u00e9c 2025\",\n            size: \"normal\"\n        }\n    ];\n\n    let currentFilter = 'all';\n    let itemsToShow = 9;\n    const itemsPerLoad = 6;\n\n    const galleryGrid = document.getElementById('galleryGrid');\n    const loadMoreBtn = document.getElementById('loadMoreBtn');\n    const emptyState = document.getElementById('emptyState');\n    const filterBtns = document.querySelectorAll('.pierre-creations .filter-btn');\n\n    function createGalleryItem(creation) {\n        const sizeClass = creation.size ? `size-${creation.size}` : 'size-normal';\n        const badgesHTML = creation.badges.map((badge, index) => \n            `<span class=\"gallery-badge ${index > 0 ? 'badge-secondary' : ''}\">${badge}<\/span>`\n        ).join('');\n        \n        return `\n            <div class=\"gallery-item ${sizeClass}\" data-category=\"${creation.category}\">\n                <div class=\"gallery-image-wrapper\">\n                    <img decoding=\"async\" src=\"${creation.image}\" alt=\"${creation.title}\" class=\"gallery-image\">\n                    <div class=\"gallery-overlay\">\n                        <div class=\"gallery-badges\">\n                            ${badgesHTML}\n                        <\/div>\n                        <div class=\"gallery-content\">\n                            <h3 class=\"gallery-title\">${creation.title}<\/h3>\n                            <div class=\"gallery-meta\">\n                                <span class=\"meta-item\">\n                                    <span class=\"meta-icon\">\ud83d\udc64<\/span>\n                                    By ${creation.author}\n                                <\/span>\n                                <span class=\"meta-item\">\n                                    <span class=\"meta-icon\">\ud83d\udcc5<\/span>\n                                    ${creation.date}\n                                <\/span>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n        `;\n    }\n\n    function filterCreations(filter) {\n        currentFilter = filter;\n        itemsToShow = 9;\n\n        const filtered = filter === 'all' ? creations : creations.filter(c => c.category === filter);\n\n        galleryGrid.innerHTML = '';\n\n        if (filtered.length === 0) {\n            emptyState.classList.add('visible');\n            loadMoreBtn.classList.add('hidden');\n        } else {\n            emptyState.classList.remove('visible');\n            \n            const items = filtered.slice(0, itemsToShow);\n            items.forEach(creation => {\n                galleryGrid.innerHTML += createGalleryItem(creation);\n            });\n\n            loadMoreBtn.classList.toggle('hidden', filtered.length <= itemsToShow);\n        }\n    }\n\n    function loadMore() {\n        const filtered = currentFilter === 'all' ? creations : creations.filter(c => c.category === currentFilter);\n        const current = galleryGrid.children.length;\n        const next = filtered.slice(current, current + itemsPerLoad);\n\n        next.forEach(creation => {\n            galleryGrid.innerHTML += createGalleryItem(creation);\n        });\n\n        itemsToShow += itemsPerLoad;\n\n        if (current + next.length >= filtered.length) {\n            loadMoreBtn.classList.add('hidden');\n        }\n    }\n\n    filterBtns.forEach(btn => {\n        btn.addEventListener('click', function() {\n            filterBtns.forEach(b => b.classList.remove('active'));\n            this.classList.add('active');\n            filterCreations(this.dataset.filter);\n        });\n    });\n\n    loadMoreBtn.addEventListener('click', loadMore);\n\n    filterCreations('all');\n})();\n<\/script>\n<\/div>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Mes Cr\u00e9ations Toutes Sacoches Bracelets Porte-monnaie Sacs \u00e0 main Autres \ud83d\udd0d Aucune cr\u00e9ation trouv\u00e9e Essayez un autre filtre LOAD MORE<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"page-templates\/page_fullwidth.php","meta":{"footnotes":""},"class_list":["post-61","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/lepontdepierre.com\/index.php\/wp-json\/wp\/v2\/pages\/61","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/lepontdepierre.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/lepontdepierre.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/lepontdepierre.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/lepontdepierre.com\/index.php\/wp-json\/wp\/v2\/comments?post=61"}],"version-history":[{"count":6,"href":"https:\/\/lepontdepierre.com\/index.php\/wp-json\/wp\/v2\/pages\/61\/revisions"}],"predecessor-version":[{"id":141,"href":"https:\/\/lepontdepierre.com\/index.php\/wp-json\/wp\/v2\/pages\/61\/revisions\/141"}],"wp:attachment":[{"href":"https:\/\/lepontdepierre.com\/index.php\/wp-json\/wp\/v2\/media?parent=61"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}