{"id":18808,"date":"2025-06-07T14:06:58","date_gmt":"2025-06-07T12:06:58","guid":{"rendered":"https:\/\/ledragonnier.com\/?page_id=18808"},"modified":"2025-09-17T21:01:16","modified_gmt":"2025-09-17T19:01:16","slug":"portfolio","status":"publish","type":"page","link":"https:\/\/ledragonnier.com\/index.php\/portfolio\/","title":{"rendered":"Porfolio"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n Portfolio Masonry - Le Dragonnier<\/title>\r\n \r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Immortal:wght@400;500&display=swap\" rel=\"stylesheet\">\r\n \r\n <style>\r\n \/* --- VARIABLES PORTFOLIO MASONRY --- *\/\r\n .portfolio-masonry {\r\n --primary-red: #9D0208;\r\n --secondary-orange: #FAA307;\r\n --accent-orange: #E85D04;\r\n --dark-text: #2c2c2c;\r\n --light-bg: #F8F6F3;\r\n --white: #ffffff;\r\n --font-family: 'Immortal', serif;\r\n --transition-smooth: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);\r\n --gap: 24px;\r\n --border-radius: 20px;\r\n margin-top: 0px;\r\n }\r\n .container {\r\n max-width: 1400px;\r\n margin: 0 auto;\r\n }\r\n \/* --- TITRE SECTION --- *\/\r\n .portfolio-title {\r\n font-family: var(--font-family);\r\n color: var(--primary-red);\r\n font-size: clamp(2.5rem, 4vw, 3.5rem);\r\n margin: 80px 0 60px 0;\r\n font-weight: 400;\r\n letter-spacing: 1px;\r\n position: relative;\r\n text-align: center;\r\n transition: var(--transition-smooth);\r\n }\r\n .portfolio-title::after {\r\n content: '';\r\n position: absolute;\r\n bottom: -20px;\r\n left: 50%;\r\n transform: translateX(-50%);\r\n width: 120px;\r\n height: 3px;\r\n background: linear-gradient(90deg, var(--secondary-orange) 0%, var(--accent-orange) 100%);\r\n transition: width 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.3s;\r\n }\r\n .portfolio-subtitle {\r\n text-align: center;\r\n color: var(--accent-orange);\r\n font-size: 1.1rem;\r\n font-style: italic;\r\n opacity: 0.8;\r\n margin-bottom: 80px;\r\n }\r\n \/* --- LOADING STATE --- *\/\r\n .loading-state {\r\n text-align: center;\r\n padding: 100px 20px;\r\n color: var(--dark-text);\r\n font-size: 1.1rem;\r\n }\r\n .loading-spinner {\r\n display: inline-block;\r\n width: 40px;\r\n height: 40px;\r\n border: 3px solid rgba(157, 2, 8, 0.1);\r\n border-radius: 50%;\r\n border-top: 3px solid var(--primary-red);\r\n animation: spin 1s linear infinite;\r\n margin-bottom: 20px;\r\n }\r\n @keyframes spin {\r\n 0% { transform: rotate(0deg); }\r\n 100% { transform: rotate(360deg); }\r\n }\r\n \/* --- MASONRY GRID --- *\/\r\n .masonry-container {\r\n opacity: 0;\r\n transform: translateY(40px);\r\n transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);\r\n }\r\n .masonry-container.loaded {\r\n opacity: 1;\r\n transform: translateY(0);\r\n margin-top: 100px;\r\n }\r\n .masonry-grid {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));\r\n gap: var(--gap);\r\n align-items: start;\r\n }\r\n \/* --- CARTE PRODUIT MASONRY PREMIUM --- *\/\r\n .masonry-card {\r\n background: var(--white);\r\n border-radius: var(--border-radius);\r\n overflow: hidden;\r\n position: relative;\r\n cursor: pointer;\r\n transition: var(--transition-smooth);\r\n box-shadow: \r\n 0 4px 20px rgba(0, 0, 0, 0.04),\r\n 0 1px 3px rgba(0, 0, 0, 0.02),\r\n inset 0 1px 0 rgba(255, 255, 255, 0.5);\r\n border: 1px solid rgba(157, 2, 8, 0.04);\r\n text-decoration: none;\r\n color: inherit;\r\n display: block;\r\n break-inside: avoid;\r\n margin-bottom: var(--gap);\r\n backdrop-filter: blur(1px);\r\n }\r\n .masonry-card::before {\r\n content: '';\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n bottom: 0;\r\n background: linear-gradient(135deg, \r\n rgba(250, 163, 7, 0.02) 0%, \r\n transparent 50%,\r\n rgba(157, 2, 8, 0.01) 100%);\r\n opacity: 0;\r\n transition: var(--transition-smooth);\r\n z-index: 1;\r\n }\r\n .masonry-card:hover {\r\n transform: translateY(-16px) scale(1.015);\r\n box-shadow: \r\n 0 32px 64px rgba(0, 0, 0, 0.12),\r\n 0 16px 32px rgba(157, 2, 8, 0.06),\r\n inset 0 1px 0 rgba(255, 255, 255, 0.6);\r\n border-color: rgba(250, 163, 7, 0.12);\r\n }\r\n .masonry-card:hover::before {\r\n opacity: 1;\r\n }\r\n \/* --- IMAGES PREMIUM REDESIGN --- *\/\r\n .card-image-container {\r\n position: relative;\r\n overflow: hidden;\r\n background: linear-gradient(135deg, #fafafa 0%, #f0f0f0 100%);\r\n border-radius: var(--border-radius) var(--border-radius) 0 0;\r\n height: 280px; \/* Hauteur fixe pour uniformit\u00e9 *\/\r\n }\r\n .card-image {\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n object-position: center center;\r\n transition: var(--transition-smooth);\r\n position: relative;\r\n z-index: 2;\r\n filter: saturate(0.9) contrast(1.1);\r\n }\r\n .masonry-card:hover .card-image {\r\n transform: scale(1.06);\r\n filter: saturate(1) contrast(1.15);\r\n }\r\n \/* Overlay gradient subtil pour le contraste *\/\r\n .card-image-container::after {\r\n content: '';\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n bottom: 0;\r\n background: linear-gradient(\r\n 135deg, \r\n rgba(157, 2, 8, 0.03) 0%, \r\n transparent 30%,\r\n transparent 70%,\r\n rgba(0, 0, 0, 0.05) 100%\r\n );\r\n z-index: 2;\r\n pointer-events: none;\r\n }\r\n \/* --- BADGES & PRIX PREMIUM --- *\/\r\n .category-badge {\r\n position: absolute;\r\n top: 24px;\r\n left: 24px;\r\n background: linear-gradient(135deg, rgba(157, 2, 8, 0.95) 0%, rgba(125, 1, 6, 0.95) 100%);\r\n color: white;\r\n padding: 10px 18px;\r\n border-radius: 25px;\r\n font-size: 0.7rem;\r\n font-weight: 600;\r\n text-transform: uppercase;\r\n letter-spacing: 2px;\r\n backdrop-filter: blur(12px);\r\n z-index: 4;\r\n transition: var(--transition-smooth);\r\n box-shadow: 0 4px 12px rgba(157, 2, 8, 0.25);\r\n border: 1px solid rgba(255, 255, 255, 0.1);\r\n }\r\n .masonry-card:hover .category-badge {\r\n background: linear-gradient(135deg, var(--secondary-orange) 0%, var(--accent-orange) 100%);\r\n transform: scale(1.05) translateY(-2px);\r\n box-shadow: 0 8px 20px rgba(250, 163, 7, 0.3);\r\n }\r\n .price-tag {\r\n position: absolute;\r\n bottom: 24px;\r\n right: 24px;\r\n background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 246, 243, 0.95) 100%);\r\n color: var(--primary-red);\r\n padding: 12px 20px;\r\n border-radius: 30px;\r\n font-family: var(--font-family);\r\n font-size: 1.1rem;\r\n font-weight: 500;\r\n letter-spacing: 0.5px;\r\n z-index: 4;\r\n box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);\r\n transition: var(--transition-smooth);\r\n backdrop-filter: blur(12px);\r\n border: 1px solid rgba(157, 2, 8, 0.1);\r\n }\r\n .masonry-card:hover .price-tag {\r\n transform: scale(1.08) translateY(-4px) rotate(1deg);\r\n background: linear-gradient(135deg, var(--secondary-orange) 0%, var(--accent-orange) 100%);\r\n color: white;\r\n box-shadow: 0 12px 32px rgba(250, 163, 7, 0.3);\r\n }\r\n \/* --- CONTENU PREMIUM --- *\/\r\n .card-content {\r\n padding: 35px 30px 30px 30px;\r\n background: var(--white);\r\n position: relative;\r\n z-index: 3;\r\n min-height: 140px;\r\n }\r\n .product-name {\r\n font-family: var(--font-family);\r\n color: var(--primary-red);\r\n font-size: clamp(1.4rem, 2.5vw, 1.7rem);\r\n font-weight: 500;\r\n margin: 0 0 10px 0;\r\n letter-spacing: 0.8px;\r\n line-height: 1.2;\r\n text-shadow: 0 1px 2px rgba(157, 2, 8, 0.05);\r\n }\r\n .product-subtitle {\r\n color: var(--accent-orange);\r\n font-size: 0.85rem;\r\n font-weight: 500;\r\n text-transform: uppercase;\r\n letter-spacing: 2.5px;\r\n opacity: 0.85;\r\n margin-bottom: 18px;\r\n position: relative;\r\n }\r\n .product-subtitle::after {\r\n content: '';\r\n position: absolute;\r\n bottom: -8px;\r\n left: 0;\r\n width: 40px;\r\n height: 1px;\r\n background: linear-gradient(90deg, var(--accent-orange) 0%, transparent 100%);\r\n opacity: 0.4;\r\n }\r\n \/* --- CTA HOVER PREMIUM --- *\/\r\n .card-cta {\r\n position: absolute;\r\n bottom: 0;\r\n left: 0;\r\n right: 0;\r\n background: linear-gradient(135deg, var(--primary-red) 0%, #7A0106 100%);\r\n color: white;\r\n padding: 22px 30px;\r\n text-align: center;\r\n font-size: 0.9rem;\r\n font-weight: 600;\r\n letter-spacing: 1.5px;\r\n text-transform: uppercase;\r\n transform: translateY(100%);\r\n opacity: 0;\r\n transition: var(--transition-smooth);\r\n z-index: 5;\r\n box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);\r\n }\r\n .masonry-card:hover .card-cta {\r\n transform: translateY(0);\r\n opacity: 1;\r\n }\r\n .masonry-card:hover .card-content {\r\n transform: translateY(-22px);\r\n }\r\n \/* --- EFFET BRILLANCE --- *\/\r\n .card-shine {\r\n position: absolute;\r\n top: -50%;\r\n left: -50%;\r\n width: 30%;\r\n height: 200%;\r\n background: linear-gradient(135deg, \r\n transparent 0%, \r\n rgba(255, 255, 255, 0.15) 45%, \r\n rgba(255, 255, 255, 0.3) 50%, \r\n rgba(255, 255, 255, 0.15) 55%, \r\n transparent 100%);\r\n transform: skewX(25deg);\r\n transition: left 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);\r\n z-index: 5;\r\n pointer-events: none;\r\n opacity: 0;\r\n }\r\n .masonry-card:hover .card-shine {\r\n left: 120%;\r\n opacity: 1;\r\n }\r\n \/* --- RESPONSIVE MASONRY --- *\/\r\n @media (max-width: 1200px) {\r\n .masonry-grid {\r\n grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));\r\n gap: 20px;\r\n }\r\n }\r\n @media (max-width: 768px) {\r\n .masonry-grid {\r\n grid-template-columns: 1fr;\r\n gap: 16px;\r\n }\r\n .masonry-card {\r\n margin-bottom: 16px;\r\n }\r\n .card-content {\r\n padding: 25px;\r\n }\r\n \/* Hauteurs uniformes pour premium *\/\r\n .masonry-card .card-image-container {\r\n height: 240px !important;\r\n }\r\n }\r\n \/* --- ANIMATION D'APPARITION --- *\/\r\n .masonry-card {\r\n animation: fadeInUp 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;\r\n opacity: 0;\r\n transform: translateY(40px);\r\n }\r\n .masonry-card:nth-child(1) { animation-delay: 0.1s; }\r\n .masonry-card:nth-child(2) { animation-delay: 0.2s; }\r\n .masonry-card:nth-child(3) { animation-delay: 0.3s; }\r\n .masonry-card:nth-child(4) { animation-delay: 0.4s; }\r\n .masonry-card:nth-child(5) { animation-delay: 0.5s; }\r\n .masonry-card:nth-child(6) { animation-delay: 0.6s; }\r\n .masonry-card:nth-child(7) { animation-delay: 0.7s; }\r\n .masonry-card:nth-child(8) { animation-delay: 0.8s; }\r\n .masonry-card:nth-child(9) { animation-delay: 0.9s; }\r\n .masonry-card:nth-child(10) { animation-delay: 1s; }\r\n @keyframes fadeInUp {\r\n to {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n }\r\n \/* --- SEPARATEUR DECORATIF --- *\/\r\n .decorative-separator {\r\n height: 1px;\r\n background: linear-gradient(90deg,\r\n transparent 0%,\r\n rgba(157, 2, 8, 0.2) 25%,\r\n rgba(250, 163, 7, 0.4) 50%,\r\n rgba(157, 2, 8, 0.2) 75%,\r\n transparent 100%);\r\n position: relative;\r\n margin: 80px 0 40px 0;\r\n }\r\n .decorative-separator::before {\r\n content: '\u2766';\r\n position: absolute;\r\n top: -12px;\r\n left: 50%;\r\n transform: translateX(-50%);\r\n color: var(--secondary-orange);\r\n font-size: 1.4rem;\r\n background: white;\r\n padding: 0 20px;\r\n }\r\n \r\n <\/style>\r\n <\/head>\r\n <body>\r\n \r\n <div class=\"container\">\r\n \r\n <div class=\"portfolio-masonry\">\r\n \r\n <div class=\"decorative-separator\"><\/div>\r\n \r\n \r\n <h1 class=\"portfolio-title\">Portfolio d'Exception<\/h1>\r\n \r\n <p class=\"portfolio-subtitle\">Une s\u00e9lection de nos plus belles cr\u00e9ations artisanales<\/p>\r\n \r\n <div id=\"portfolio-masonry-container\">\r\n \r\n <div class=\"loading-state\">\r\n \r\n <div class=\"loading-spinner\"><\/div>\r\n \r\n <p>Chargement de nos cr\u00e9ations d'exception...<\/p>\r\n \r\n <\/div>\r\n \r\n <\/div>\r\n \r\n <\/div>\r\n \r\n <\/div>\r\n <script>\r\n document.addEventListener('DOMContentLoaded', async function() {\r\n const container = document.getElementById('portfolio-masonry-container');\r\n \r\n if (!container) return;\r\n \r\n try {\r\n console.log('\ud83d\udd0d R\u00e9cup\u00e9ration de tous les produits puis filtrage par cat\u00e9gorie...');\r\n \r\n \/\/ L'API Store ne supporte pas category_slug, on r\u00e9cup\u00e8re tout puis on filtre\r\n const response = await fetch('\/wp-json\/wc\/store\/v1\/products?per_page=50&orderby=menu_order&order=asc');\r\n \r\n if (!response.ok) {\r\n throw new Error(`Erreur HTTP: ${response.status}`);\r\n }\r\n \r\n const products = await response.json();\r\n console.log('\ud83d\udce6 Nombre total de produits re\u00e7us:', products.length);\r\n \r\n \/\/ Filtrage manuel pour la cat\u00e9gorie \"porfolio\" (sans le 't')\r\n const portfolioProducts = products.filter(product => {\r\n const hasPortfolioCategory = product.categories?.some(category => \r\n category.slug === 'porfolio' || \r\n category.name.toLowerCase().includes('porfolio')\r\n );\r\n \r\n if (hasPortfolioCategory) {\r\n console.log(`\u2705 Produit \"${product.name}\" appartient \u00e0 porfolio`);\r\n }\r\n \r\n return hasPortfolioCategory;\r\n });\r\n \r\n console.log(`\ud83c\udfaf ${portfolioProducts.length} produits trouv\u00e9s dans la cat\u00e9gorie \"porfolio\"`);\r\n \r\n \/\/ Utiliser UNIQUEMENT les produits filtr\u00e9s\r\n const finalProducts = portfolioProducts;\r\n \r\n if (finalProducts.length === 0) {\r\n container.innerHTML = `\r\n <div class=\"loading-state\">\r\n <p>Aucun produit trouv\u00e9 dans la cat\u00e9gorie \"porfolio\".<\/p>\r\n <small style=\"opacity: 0.6; margin-top: 10px; display: block;\">\r\n V\u00e9rifiez que vos produits sont bien dans la cat\u00e9gorie \"porfolio\".\r\n <\/small>\r\n <\/div>\r\n `;\r\n return;\r\n }\r\n \r\n \/\/ Construction de la grille masonry\r\n const masonryContainer = document.createElement('div');\r\n masonryContainer.className = 'masonry-container';\r\n \r\n const masonryGrid = document.createElement('div');\r\n masonryGrid.className = 'masonry-grid';\r\n \r\n finalProducts.forEach((product, index) => {\r\n \/\/ Cr\u00e9ation de la carte produit\r\n const card = document.createElement('a');\r\n card.href = product.permalink;\r\n card.className = 'masonry-card';\r\n \r\n \/\/ Container image\r\n const imageContainer = document.createElement('div');\r\n imageContainer.className = 'card-image-container';\r\n \r\n \/\/ Image principale\r\n const img = document.createElement('img');\r\n img.src = product.images[0]?.src || '';\r\n img.alt = product.images[0]?.alt || product.name;\r\n img.className = 'card-image';\r\n \r\n \/\/ Badge cat\u00e9gorie\r\n const categoryBadge = document.createElement('div');\r\n categoryBadge.className = 'category-badge';\r\n categoryBadge.textContent = 'Portfolio';\r\n \r\n \r\n \r\n \/\/ Contenu texte\r\n const cardContent = document.createElement('div');\r\n cardContent.className = 'card-content';\r\n \r\n \/\/ Parsing du nom produit (comme dans le Bento)\r\n const nomComplet = product.name;\r\n const parts = nomComplet.split(' \u2014 ');\r\n const nomPrincipal = parts[0];\r\n const sousTitre = parts.length > 1 ? parts[1] : '';\r\n \r\n const productName = document.createElement('h2');\r\n productName.className = 'product-name';\r\n productName.innerHTML = nomPrincipal;\r\n \r\n const productSubtitle = document.createElement('p');\r\n productSubtitle.className = 'product-subtitle';\r\n productSubtitle.innerHTML = sousTitre; \/\/ Correction appliqu\u00e9e ici aussi\r\n \r\n \/\/ CTA hover\r\n const cardCTA = document.createElement('div');\r\n cardCTA.className = 'card-cta';\r\n cardCTA.innerHTML = `D\u00e9couvrir ${nomPrincipal} \u2192`;\r\n \r\n \/\/ Effet brillance\r\n const cardShine = document.createElement('div');\r\n cardShine.className = 'card-shine';\r\n \r\n \/\/ Assemblage de la carte\r\n imageContainer.appendChild(img);\r\n imageContainer.appendChild(categoryBadge);\r\n imageContainer.appendChild(cardShine);\r\n \r\n cardContent.appendChild(productName);\r\n if (sousTitre) cardContent.appendChild(productSubtitle);\r\n \r\n card.appendChild(imageContainer);\r\n card.appendChild(cardContent);\r\n card.appendChild(cardCTA);\r\n \r\n masonryGrid.appendChild(card);\r\n });\r\n \r\n masonryContainer.appendChild(masonryGrid);\r\n \r\n \/\/ Remplacement du loading par la grille\r\n container.innerHTML = '';\r\n container.appendChild(masonryContainer);\r\n \r\n \/\/ Animation d'apparition\r\n setTimeout(() => {\r\n masonryContainer.classList.add('loaded');\r\n }, 100);\r\n \r\n } catch (error) {\r\n console.error('Erreur lors du chargement du portfolio:', error);\r\n container.innerHTML = `\r\n <div class=\"loading-state\">\r\n <p style=\"color: var(--primary-red);\">Erreur lors du chargement du portfolio.<\/p>\r\n <small style=\"opacity: 0.6; margin-top: 10px; display: block;\">\r\n ${error.message}\r\n <\/small>\r\n <\/div>\r\n `;\r\n }\r\n });\r\n \r\n <\/script>\r\n <\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Portfolio Masonry – Le Dragonnier Portfolio d’Exception Une s\u00e9lection de nos plus belles cr\u00e9ations artisanales Chargement de nos cr\u00e9ations d’exception…<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-18808","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/ledragonnier.com\/index.php\/wp-json\/wp\/v2\/pages\/18808","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ledragonnier.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/ledragonnier.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/ledragonnier.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ledragonnier.com\/index.php\/wp-json\/wp\/v2\/comments?post=18808"}],"version-history":[{"count":83,"href":"https:\/\/ledragonnier.com\/index.php\/wp-json\/wp\/v2\/pages\/18808\/revisions"}],"predecessor-version":[{"id":20298,"href":"https:\/\/ledragonnier.com\/index.php\/wp-json\/wp\/v2\/pages\/18808\/revisions\/20298"}],"wp:attachment":[{"href":"https:\/\/ledragonnier.com\/index.php\/wp-json\/wp\/v2\/media?parent=18808"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}