Boutique - Version Optimis\u00e9e<\/title>\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 \/* === 1. VARIABLES & RESET === *\/\r\n :root {\r\n \/* Palette harmonis\u00e9e *\/\r\n --color-primary: #9D0208;\r\n --color-accent: #E85D04;\r\n --color-text-dark: #1A1A1A;\r\n --color-text-medium: #4A4A4A;\r\n --color-text-light: #6B6B6B;\r\n --color-bg-page: #F5F5F5;\r\n --color-bg-white: #FFFFFF;\r\n --color-border: rgba(157, 2, 8, 0.15);\r\n \r\n \/* Une seule police : Immortal *\/\r\n --font-main: 'Immortal', serif;\r\n \r\n \/* Ombres coh\u00e9rentes *\/\r\n --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.06);\r\n --shadow-card-hover: 0 8px 20px rgba(0, 0, 0, 0.10);\r\n --shadow-focus: 0 0 0 3px rgba(157, 2, 8, 0.2);\r\n \r\n \/* Rayons uniformes *\/\r\n --radius: 8px;\r\n \r\n \/* Transitions *\/\r\n --transition: all 0.2s ease;\r\n }\r\n\r\n * {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n }\r\n\r\n body {\r\n font-family: var(--font-main);\r\n background-color: var(--color-bg-page);\r\n color: var(--color-text-dark);\r\n line-height: 1.6; \/* Adapt\u00e9 pour Immortal *\/\r\n }\r\n\r\n \/* === 2. HEADER OPTIMIS\u00c9 === *\/\r\n .header-wrapper {\r\n background-color: var(--color-bg-white);\r\n padding: 20px 0 25px 0; \/* R\u00e9duit pour moins d'espace *\/\r\n border-bottom: 2px solid var(--color-border); \/* Bordure plus douce *\/\r\n margin-bottom: 0;\r\n }\r\n\r\n .page-header {\r\n text-align: center;\r\n max-width: 1200px;\r\n margin: 0 auto;\r\n padding: 0 20px;\r\n }\r\n\r\n .page-title {\r\n font-family: var(--font-main);\r\n font-size: clamp(2rem, 4vw, 2.8rem); \/* L\u00e9g\u00e8rement r\u00e9duit *\/\r\n color: var(--color-primary);\r\n font-weight: 400;\r\n letter-spacing: 1.5px;\r\n margin-bottom: 8px; \/* Espace minimal *\/\r\n position: relative;\r\n }\r\n\r\n \/* Barre d\u00e9corative sous le titre plus subtile *\/\r\n .page-title::after {\r\n content: '';\r\n position: absolute;\r\n bottom: -6px;\r\n left: 50%;\r\n transform: translateX(-50%);\r\n width: 80px;\r\n height: 2px; \/* Plus fine *\/\r\n background: linear-gradient(90deg, var(--color-accent), var(--color-primary));\r\n border-radius: 1px;\r\n opacity: 0.8;\r\n }\r\n\r\n .page-subtitle {\r\n font-family: var(--font-main);\r\n font-size: 0.9rem;\r\n text-transform: uppercase;\r\n letter-spacing: 0.12em;\r\n color: var(--color-text-medium);\r\n font-style: italic;\r\n margin: 20px 0 0 0; \/* Padding coh\u00e9rent avant la grille *\/\r\n }\r\n\r\n \/* === 3. CONTAINER & GRILLE === *\/\r\n .shop-container {\r\n width: 100%;\r\n max-width: 1200px;\r\n margin: 0 auto;\r\n padding: 40px 20px 60px 20px; \/* Resserr\u00e9 verticalement *\/\r\n }\r\n\r\n .products-grid {\r\n display: grid;\r\n gap: 28px; \/* Espacement optimis\u00e9 *\/\r\n width: 100%;\r\n }\r\n\r\n \/* Grille responsive *\/\r\n @media (min-width: 0px) { \r\n .products-grid { grid-template-columns: 1fr; }\r\n }\r\n @media (min-width: 640px) { \r\n .products-grid { grid-template-columns: repeat(2, 1fr); }\r\n }\r\n @media (min-width: 1024px) { \r\n .products-grid { grid-template-columns: repeat(3, 1fr); }\r\n }\r\n @media (min-width: 1440px) { \r\n \/* Grands \u00e9crans PC - 4 colonnes *\/\r\n .products-grid { \r\n grid-template-columns: repeat(4, 1fr);\r\n gap: 24px;\r\n }\r\n }\r\n @media (min-width: 1920px) { \r\n \/* \u00c9crans Full HD et plus - 5 colonnes *\/\r\n .products-grid { \r\n grid-template-columns: repeat(5, 1fr);\r\n gap: 20px;\r\n max-width: 1600px; \/* Limite la largeur totale pour maintenir la lisibilit\u00e9 *\/\r\n }\r\n \r\n .product-info {\r\n padding: 18px;\r\n }\r\n \r\n .product-name {\r\n font-size: 1.3rem; \/* Gard\u00e9 plus grand m\u00eame sur 5 colonnes *\/\r\n }\r\n \r\n .product-price-label {\r\n font-size: 1rem;\r\n }\r\n \r\n .product-description {\r\n font-size: 0.8rem;\r\n margin-bottom: 22px; \/* Espace adapt\u00e9 pour 5 colonnes *\/\r\n }\r\n \r\n .cta-button {\r\n padding: 10px 24px; \/* Padding adapt\u00e9 *\/\r\n font-size: 0.78rem;\r\n }\r\n }\r\n\r\n \/* === 4. CARTE PRODUIT OPTIMIS\u00c9E === *\/\r\n .product-card {\r\n background: var(--color-bg-white);\r\n border-radius: var(--radius);\r\n overflow: hidden;\r\n box-shadow: var(--shadow-card);\r\n transition: var(--transition);\r\n text-decoration: none;\r\n color: inherit;\r\n display: flex;\r\n flex-direction: column;\r\n position: relative;\r\n cursor: pointer; \/* Toute la carte est cliquable *\/\r\n height: 100%; \/* Hauteur uniforme *\/\r\n }\r\n\r\n \/* Hover et focus accessibles *\/\r\n .product-card:hover {\r\n transform: translateY(-3px);\r\n box-shadow: var(--shadow-card-hover);\r\n }\r\n\r\n .product-card:focus-visible {\r\n outline: none;\r\n box-shadow: var(--shadow-focus), var(--shadow-card-hover);\r\n }\r\n\r\n \/* === 5. IMAGE PRODUIT === *\/\r\n .product-image {\r\n width: 100%;\r\n aspect-ratio: 4 \/ 3; \/* Ratio fixe *\/\r\n overflow: hidden;\r\n background: #F0F0F0;\r\n position: relative;\r\n }\r\n\r\n .product-image img {\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n display: block;\r\n transition: transform 0.3s ease;\r\n }\r\n\r\n \/* Barre d\u00e9corative subtile *\/\r\n .product-image::after {\r\n content: \"\";\r\n position: absolute;\r\n left: 0;\r\n bottom: 0;\r\n height: 2px; \/* Plus fine *\/\r\n width: 100%;\r\n background: linear-gradient(90deg, var(--color-accent), var(--color-primary));\r\n opacity: 0.7;\r\n }\r\n\r\n .product-card:hover .product-image img {\r\n transform: scale(1.04); \/* Zoom subtil *\/\r\n }\r\n\r\n \/* === 6. CONTENU CARTE === *\/\r\n .product-info {\r\n padding: 20px;\r\n display: flex;\r\n flex-direction: column;\r\n flex-grow: 1;\r\n }\r\n\r\n \/* Titre produit *\/\r\n .product-name {\r\n font-family: var(--font-main);\r\n font-size: 1.45rem; \/* Augment\u00e9 pour plus d'impact *\/\r\n color: var(--color-text-dark);\r\n font-weight: 400;\r\n line-height: 1.3;\r\n margin-bottom: 10px;\r\n }\r\n\r\n \/* Prix - plus visible *\/\r\n .product-price-label {\r\n font-family: var(--font-main);\r\n font-size: 1.1rem; \/* Plus grand *\/\r\n font-weight: 500;\r\n color: var(--color-primary); \/* Couleur primaire pour visibilit\u00e9 *\/\r\n margin-bottom: 12px;\r\n }\r\n\r\n \/* Texte \"\u00c0 partir de\" plus petit *\/\r\n .price-prefix {\r\n font-size: 0.65rem; \/* Beaucoup plus petit *\/\r\n font-weight: 400;\r\n opacity: 0.8;\r\n display: block;\r\n margin-bottom: 2px;\r\n }\r\n\r\n \/* Description - limit\u00e9e \u00e0 2-3 lignes *\/\r\n .product-description {\r\n font-family: var(--font-main);\r\n font-size: 0.85rem;\r\n color: var(--color-text-medium);\r\n line-height: 1.5;\r\n margin-bottom: 20px; \/* Espace entre la description et le bouton *\/\r\n \r\n \/* Limite \u00e0 2-3 lignes *\/\r\n display: -webkit-box;\r\n -webkit-line-clamp: 2;\r\n -webkit-box-orient: vertical;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n \r\n flex-grow: 1;\r\n }\r\n\r\n \/* Bouton CTA - rouge avec marge sup\u00e9rieure *\/\r\n .cta-button {\r\n display: inline-block;\r\n background-color: var(--color-primary); \/* Rouge primaire *\/\r\n color: white;\r\n padding: 12px 28px; \/* Padding g\u00e9n\u00e9reux *\/\r\n margin-top: 15px; \/* Marge sup\u00e9rieure ajout\u00e9e pour plus d'espace *\/\r\n border-radius: 4px;\r\n text-transform: uppercase;\r\n font-family: var(--font-main);\r\n font-weight: 400;\r\n font-size: 0.8rem;\r\n letter-spacing: 0.08em;\r\n text-align: center;\r\n align-self: flex-start;\r\n transition: var(--transition);\r\n pointer-events: none;\r\n }\r\n\r\n .product-card:hover .cta-button {\r\n background-color: #c4030a; \/* Rouge l\u00e9g\u00e8rement plus clair *\/\r\n transform: translateY(-1px);\r\n }\r\n\r\n \/* === 7. RESPONSIVE === *\/\r\n @media (max-width: 768px) {\r\n .header-wrapper {\r\n padding: 15px 0 20px 0;\r\n }\r\n \r\n .page-title {\r\n font-size: 1.8rem;\r\n }\r\n \r\n .shop-container {\r\n padding: 30px 15px 50px 15px;\r\n }\r\n \r\n .products-grid {\r\n gap: 20px;\r\n }\r\n \r\n .product-info {\r\n padding: 16px;\r\n }\r\n \r\n .product-name {\r\n font-size: 1.3rem; \/* Augment\u00e9 sur mobile aussi *\/\r\n }\r\n \r\n .product-price-label {\r\n font-size: 1rem;\r\n }\r\n \r\n .product-description {\r\n font-size: 0.8rem;\r\n margin-bottom: 18px; \/* Espace adapt\u00e9 sur mobile *\/\r\n }\r\n \r\n .cta-button {\r\n padding: 11px 26px; \/* Bon padding sur mobile *\/\r\n font-size: 0.9rem;\r\n margin-top: 12px; \/* Marge adapt\u00e9e sur mobile *\/\r\n }\r\n }\r\n\r\n \/* === 8. \u00c9TATS DE CHARGEMENT === *\/\r\n .loading-state {\r\n grid-column: 1 \/ -1;\r\n text-align: center;\r\n padding: 60px 20px;\r\n font-family: var(--font-main);\r\n color: var(--color-text-light);\r\n font-size: 0.9rem;\r\n }\r\n\r\n \/* === 9. ANIMATIONS === *\/\r\n @keyframes fadeIn {\r\n from { opacity: 0; transform: translateY(10px); }\r\n to { opacity: 1; transform: translateY(0); }\r\n }\r\n\r\n .product-card {\r\n animation: fadeIn 0.4s ease backwards;\r\n }\r\n\r\n .product-card:nth-child(2) { animation-delay: 0.1s; }\r\n .product-card:nth-child(3) { animation-delay: 0.2s; }\r\n .product-card:nth-child(4) { animation-delay: 0.3s; }\r\n .product-card:nth-child(5) { animation-delay: 0.4s; }\r\n .product-card:nth-child(6) { animation-delay: 0.5s; }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div class=\"header-wrapper\">\r\n <div class=\"page-header\">\r\n <h1 class=\"page-title\">Boutique<\/h1>\r\n <p class=\"page-subtitle\">Fabriqu\u00e9 en France<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"shop-container\">\r\n <div class=\"products-grid\" id=\"productsGrid\" aria-live=\"polite\">\r\n <noscript>\r\n <div class=\"loading-state\">Veuillez activer JavaScript pour voir la boutique.<\/div>\r\n <\/noscript>\r\n <div class=\"loading-state\">Chargement des cr\u00e9ations...<\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <script>\r\n document.addEventListener('DOMContentLoaded', async function() {\r\n const productsGrid = document.getElementById('productsGrid');\r\n if (!productsGrid) return;\r\n\r\n const stripHtml = (html) => {\r\n const doc = new DOMParser().parseFromString(html, 'text\/html');\r\n return doc.body.textContent || \"\";\r\n }\r\n\r\n \/\/ Fonction pour nettoyer les mentions inutiles\r\n const cleanProductDescription = (text) => {\r\n \/\/ Supprimer les mentions \"Couteau unique\", \"Pi\u00e8ce unique\", etc.\r\n const cleanText = text\r\n .replace(\/couteau unique[\\s,.-]*\/gi, '')\r\n .replace(\/pi\u00e8ce unique[\\s,.-]*\/gi, '')\r\n .replace(\/unique[\\s,.-]*\/gi, '')\r\n .replace(\/^\\s*[,.-]\\s*\/, '') \/\/ Nettoyer la ponctuation en d\u00e9but\r\n .trim();\r\n \r\n return cleanText;\r\n }\r\n\r\n try {\r\n const apiUrl = `${window.location.origin}\/wp-json\/wc\/store\/v1\/products?per_page=20&orderby=menu_order&order=asc&_fields=id,name,images,prices,permalink,description,short_description`; \r\n \r\n const response = await fetch(apiUrl);\r\n if (!response.ok) throw new Error('Erreur r\u00e9seau');\r\n const products = await response.json();\r\n\r\n if (!Array.isArray(products) || products.length === 0) {\r\n productsGrid.innerHTML = '<div class=\"loading-state\">Aucune cr\u00e9ation disponible pour le moment.<\/div>';\r\n return;\r\n }\r\n \r\n let html = '';\r\n \r\n products.forEach((product, index) => {\r\n const image = product.images[0]?.src || '';\r\n const name = product.name || 'Cr\u00e9ation artisanale';\r\n const link = product.permalink || '#';\r\n \r\n \/\/ R\u00e9cup\u00e9ration et formatage du prix\r\n const rawPrice = product.prices?.price || '';\r\n const currencySymbol = product.prices?.currency_symbol || '\u20ac';\r\n const currencyDecimals = product.prices?.currency_minor_unit || 2;\r\n \r\n let priceDisplay = '';\r\n if (rawPrice) {\r\n const priceValue = parseInt(rawPrice) \/ Math.pow(10, currencyDecimals);\r\n const formattedPrice = priceValue.toFixed(currencyDecimals).replace('.', ',');\r\n priceDisplay = `<span class=\"price-prefix\">\u00c0 partir de<\/span>${formattedPrice} ${currencySymbol}`;\r\n }\r\n\r\n \/\/ Description nettoy\u00e9e et limit\u00e9e\r\n const rawDesc = product.short_description || product.description || \"Forg\u00e9 avec passion dans notre atelier fran\u00e7ais.\";\r\n let cleanDesc = cleanProductDescription(stripHtml(rawDesc));\r\n \r\n \/\/ Limiter \u00e0 ~80 caract\u00e8res pour 2-3 lignes\r\n if (cleanDesc.length > 80) {\r\n cleanDesc = cleanDesc.substring(0, 77) + '...';\r\n }\r\n\r\n \/\/ Alt text descriptif simple\r\n const altText = `${name} - Cr\u00e9ation artisanale fran\u00e7aise`;\r\n\r\n html += `\r\n <a href=\"${link}\" class=\"product-card\" style=\"animation-delay: ${index * 0.1}s\">\r\n <div class=\"product-image\">\r\n <img decoding=\"async\" src=\"${image}\" alt=\"${altText}\" loading=\"lazy\">\r\n <\/div>\r\n \r\n <div class=\"product-info\">\r\n <h3 class=\"product-name\">${name}<\/h3>\r\n \r\n ${priceDisplay ? `<div class=\"product-price-label\">${priceDisplay}<\/div>` : ''}\r\n \r\n <p class=\"product-description\">${cleanDesc}<\/p>\r\n \r\n <span class=\"cta-button\" aria-hidden=\"true\">D\u00e9couvrir<\/span>\r\n <\/div>\r\n <\/a>\r\n `;\r\n });\r\n\r\n productsGrid.innerHTML = html;\r\n\r\n } catch (error) {\r\n console.error('Erreur:', error);\r\n productsGrid.innerHTML = `<div class=\"loading-state\">Impossible de charger la boutique. Veuillez r\u00e9essayer.<\/div>`;\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<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Boutique – Version Optimis\u00e9e Boutique Fabriqu\u00e9 en France Veuillez activer JavaScript pour voir la boutique. Chargement des cr\u00e9ations…<\/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-18256","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/ledragonnier.com\/index.php\/wp-json\/wp\/v2\/pages\/18256","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=18256"}],"version-history":[{"count":141,"href":"https:\/\/ledragonnier.com\/index.php\/wp-json\/wp\/v2\/pages\/18256\/revisions"}],"predecessor-version":[{"id":21115,"href":"https:\/\/ledragonnier.com\/index.php\/wp-json\/wp\/v2\/pages\/18256\/revisions\/21115"}],"wp:attachment":[{"href":"https:\/\/ledragonnier.com\/index.php\/wp-json\/wp\/v2\/media?parent=18256"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n Boutique - Version Optimis\u00e9e<\/title>\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 \/* === 1. VARIABLES & RESET === *\/\r\n :root {\r\n \/* Palette harmonis\u00e9e *\/\r\n --color-primary: #9D0208;\r\n --color-accent: #E85D04;\r\n --color-text-dark: #1A1A1A;\r\n --color-text-medium: #4A4A4A;\r\n --color-text-light: #6B6B6B;\r\n --color-bg-page: #F5F5F5;\r\n --color-bg-white: #FFFFFF;\r\n --color-border: rgba(157, 2, 8, 0.15);\r\n \r\n \/* Une seule police : Immortal *\/\r\n --font-main: 'Immortal', serif;\r\n \r\n \/* Ombres coh\u00e9rentes *\/\r\n --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.06);\r\n --shadow-card-hover: 0 8px 20px rgba(0, 0, 0, 0.10);\r\n --shadow-focus: 0 0 0 3px rgba(157, 2, 8, 0.2);\r\n \r\n \/* Rayons uniformes *\/\r\n --radius: 8px;\r\n \r\n \/* Transitions *\/\r\n --transition: all 0.2s ease;\r\n }\r\n\r\n * {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n }\r\n\r\n body {\r\n font-family: var(--font-main);\r\n background-color: var(--color-bg-page);\r\n color: var(--color-text-dark);\r\n line-height: 1.6; \/* Adapt\u00e9 pour Immortal *\/\r\n }\r\n\r\n \/* === 2. HEADER OPTIMIS\u00c9 === *\/\r\n .header-wrapper {\r\n background-color: var(--color-bg-white);\r\n padding: 20px 0 25px 0; \/* R\u00e9duit pour moins d'espace *\/\r\n border-bottom: 2px solid var(--color-border); \/* Bordure plus douce *\/\r\n margin-bottom: 0;\r\n }\r\n\r\n .page-header {\r\n text-align: center;\r\n max-width: 1200px;\r\n margin: 0 auto;\r\n padding: 0 20px;\r\n }\r\n\r\n .page-title {\r\n font-family: var(--font-main);\r\n font-size: clamp(2rem, 4vw, 2.8rem); \/* L\u00e9g\u00e8rement r\u00e9duit *\/\r\n color: var(--color-primary);\r\n font-weight: 400;\r\n letter-spacing: 1.5px;\r\n margin-bottom: 8px; \/* Espace minimal *\/\r\n position: relative;\r\n }\r\n\r\n \/* Barre d\u00e9corative sous le titre plus subtile *\/\r\n .page-title::after {\r\n content: '';\r\n position: absolute;\r\n bottom: -6px;\r\n left: 50%;\r\n transform: translateX(-50%);\r\n width: 80px;\r\n height: 2px; \/* Plus fine *\/\r\n background: linear-gradient(90deg, var(--color-accent), var(--color-primary));\r\n border-radius: 1px;\r\n opacity: 0.8;\r\n }\r\n\r\n .page-subtitle {\r\n font-family: var(--font-main);\r\n font-size: 0.9rem;\r\n text-transform: uppercase;\r\n letter-spacing: 0.12em;\r\n color: var(--color-text-medium);\r\n font-style: italic;\r\n margin: 20px 0 0 0; \/* Padding coh\u00e9rent avant la grille *\/\r\n }\r\n\r\n \/* === 3. CONTAINER & GRILLE === *\/\r\n .shop-container {\r\n width: 100%;\r\n max-width: 1200px;\r\n margin: 0 auto;\r\n padding: 40px 20px 60px 20px; \/* Resserr\u00e9 verticalement *\/\r\n }\r\n\r\n .products-grid {\r\n display: grid;\r\n gap: 28px; \/* Espacement optimis\u00e9 *\/\r\n width: 100%;\r\n }\r\n\r\n \/* Grille responsive *\/\r\n @media (min-width: 0px) { \r\n .products-grid { grid-template-columns: 1fr; }\r\n }\r\n @media (min-width: 640px) { \r\n .products-grid { grid-template-columns: repeat(2, 1fr); }\r\n }\r\n @media (min-width: 1024px) { \r\n .products-grid { grid-template-columns: repeat(3, 1fr); }\r\n }\r\n @media (min-width: 1440px) { \r\n \/* Grands \u00e9crans PC - 4 colonnes *\/\r\n .products-grid { \r\n grid-template-columns: repeat(4, 1fr);\r\n gap: 24px;\r\n }\r\n }\r\n @media (min-width: 1920px) { \r\n \/* \u00c9crans Full HD et plus - 5 colonnes *\/\r\n .products-grid { \r\n grid-template-columns: repeat(5, 1fr);\r\n gap: 20px;\r\n max-width: 1600px; \/* Limite la largeur totale pour maintenir la lisibilit\u00e9 *\/\r\n }\r\n \r\n .product-info {\r\n padding: 18px;\r\n }\r\n \r\n .product-name {\r\n font-size: 1.3rem; \/* Gard\u00e9 plus grand m\u00eame sur 5 colonnes *\/\r\n }\r\n \r\n .product-price-label {\r\n font-size: 1rem;\r\n }\r\n \r\n .product-description {\r\n font-size: 0.8rem;\r\n margin-bottom: 22px; \/* Espace adapt\u00e9 pour 5 colonnes *\/\r\n }\r\n \r\n .cta-button {\r\n padding: 10px 24px; \/* Padding adapt\u00e9 *\/\r\n font-size: 0.78rem;\r\n }\r\n }\r\n\r\n \/* === 4. CARTE PRODUIT OPTIMIS\u00c9E === *\/\r\n .product-card {\r\n background: var(--color-bg-white);\r\n border-radius: var(--radius);\r\n overflow: hidden;\r\n box-shadow: var(--shadow-card);\r\n transition: var(--transition);\r\n text-decoration: none;\r\n color: inherit;\r\n display: flex;\r\n flex-direction: column;\r\n position: relative;\r\n cursor: pointer; \/* Toute la carte est cliquable *\/\r\n height: 100%; \/* Hauteur uniforme *\/\r\n }\r\n\r\n \/* Hover et focus accessibles *\/\r\n .product-card:hover {\r\n transform: translateY(-3px);\r\n box-shadow: var(--shadow-card-hover);\r\n }\r\n\r\n .product-card:focus-visible {\r\n outline: none;\r\n box-shadow: var(--shadow-focus), var(--shadow-card-hover);\r\n }\r\n\r\n \/* === 5. IMAGE PRODUIT === *\/\r\n .product-image {\r\n width: 100%;\r\n aspect-ratio: 4 \/ 3; \/* Ratio fixe *\/\r\n overflow: hidden;\r\n background: #F0F0F0;\r\n position: relative;\r\n }\r\n\r\n .product-image img {\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n display: block;\r\n transition: transform 0.3s ease;\r\n }\r\n\r\n \/* Barre d\u00e9corative subtile *\/\r\n .product-image::after {\r\n content: \"\";\r\n position: absolute;\r\n left: 0;\r\n bottom: 0;\r\n height: 2px; \/* Plus fine *\/\r\n width: 100%;\r\n background: linear-gradient(90deg, var(--color-accent), var(--color-primary));\r\n opacity: 0.7;\r\n }\r\n\r\n .product-card:hover .product-image img {\r\n transform: scale(1.04); \/* Zoom subtil *\/\r\n }\r\n\r\n \/* === 6. CONTENU CARTE === *\/\r\n .product-info {\r\n padding: 20px;\r\n display: flex;\r\n flex-direction: column;\r\n flex-grow: 1;\r\n }\r\n\r\n \/* Titre produit *\/\r\n .product-name {\r\n font-family: var(--font-main);\r\n font-size: 1.45rem; \/* Augment\u00e9 pour plus d'impact *\/\r\n color: var(--color-text-dark);\r\n font-weight: 400;\r\n line-height: 1.3;\r\n margin-bottom: 10px;\r\n }\r\n\r\n \/* Prix - plus visible *\/\r\n .product-price-label {\r\n font-family: var(--font-main);\r\n font-size: 1.1rem; \/* Plus grand *\/\r\n font-weight: 500;\r\n color: var(--color-primary); \/* Couleur primaire pour visibilit\u00e9 *\/\r\n margin-bottom: 12px;\r\n }\r\n\r\n \/* Texte \"\u00c0 partir de\" plus petit *\/\r\n .price-prefix {\r\n font-size: 0.65rem; \/* Beaucoup plus petit *\/\r\n font-weight: 400;\r\n opacity: 0.8;\r\n display: block;\r\n margin-bottom: 2px;\r\n }\r\n\r\n \/* Description - limit\u00e9e \u00e0 2-3 lignes *\/\r\n .product-description {\r\n font-family: var(--font-main);\r\n font-size: 0.85rem;\r\n color: var(--color-text-medium);\r\n line-height: 1.5;\r\n margin-bottom: 20px; \/* Espace entre la description et le bouton *\/\r\n \r\n \/* Limite \u00e0 2-3 lignes *\/\r\n display: -webkit-box;\r\n -webkit-line-clamp: 2;\r\n -webkit-box-orient: vertical;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n \r\n flex-grow: 1;\r\n }\r\n\r\n \/* Bouton CTA - rouge avec marge sup\u00e9rieure *\/\r\n .cta-button {\r\n display: inline-block;\r\n background-color: var(--color-primary); \/* Rouge primaire *\/\r\n color: white;\r\n padding: 12px 28px; \/* Padding g\u00e9n\u00e9reux *\/\r\n margin-top: 15px; \/* Marge sup\u00e9rieure ajout\u00e9e pour plus d'espace *\/\r\n border-radius: 4px;\r\n text-transform: uppercase;\r\n font-family: var(--font-main);\r\n font-weight: 400;\r\n font-size: 0.8rem;\r\n letter-spacing: 0.08em;\r\n text-align: center;\r\n align-self: flex-start;\r\n transition: var(--transition);\r\n pointer-events: none;\r\n }\r\n\r\n .product-card:hover .cta-button {\r\n background-color: #c4030a; \/* Rouge l\u00e9g\u00e8rement plus clair *\/\r\n transform: translateY(-1px);\r\n }\r\n\r\n \/* === 7. RESPONSIVE === *\/\r\n @media (max-width: 768px) {\r\n .header-wrapper {\r\n padding: 15px 0 20px 0;\r\n }\r\n \r\n .page-title {\r\n font-size: 1.8rem;\r\n }\r\n \r\n .shop-container {\r\n padding: 30px 15px 50px 15px;\r\n }\r\n \r\n .products-grid {\r\n gap: 20px;\r\n }\r\n \r\n .product-info {\r\n padding: 16px;\r\n }\r\n \r\n .product-name {\r\n font-size: 1.3rem; \/* Augment\u00e9 sur mobile aussi *\/\r\n }\r\n \r\n .product-price-label {\r\n font-size: 1rem;\r\n }\r\n \r\n .product-description {\r\n font-size: 0.8rem;\r\n margin-bottom: 18px; \/* Espace adapt\u00e9 sur mobile *\/\r\n }\r\n \r\n .cta-button {\r\n padding: 11px 26px; \/* Bon padding sur mobile *\/\r\n font-size: 0.9rem;\r\n margin-top: 12px; \/* Marge adapt\u00e9e sur mobile *\/\r\n }\r\n }\r\n\r\n \/* === 8. \u00c9TATS DE CHARGEMENT === *\/\r\n .loading-state {\r\n grid-column: 1 \/ -1;\r\n text-align: center;\r\n padding: 60px 20px;\r\n font-family: var(--font-main);\r\n color: var(--color-text-light);\r\n font-size: 0.9rem;\r\n }\r\n\r\n \/* === 9. ANIMATIONS === *\/\r\n @keyframes fadeIn {\r\n from { opacity: 0; transform: translateY(10px); }\r\n to { opacity: 1; transform: translateY(0); }\r\n }\r\n\r\n .product-card {\r\n animation: fadeIn 0.4s ease backwards;\r\n }\r\n\r\n .product-card:nth-child(2) { animation-delay: 0.1s; }\r\n .product-card:nth-child(3) { animation-delay: 0.2s; }\r\n .product-card:nth-child(4) { animation-delay: 0.3s; }\r\n .product-card:nth-child(5) { animation-delay: 0.4s; }\r\n .product-card:nth-child(6) { animation-delay: 0.5s; }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div class=\"header-wrapper\">\r\n <div class=\"page-header\">\r\n <h1 class=\"page-title\">Boutique<\/h1>\r\n <p class=\"page-subtitle\">Fabriqu\u00e9 en France<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"shop-container\">\r\n <div class=\"products-grid\" id=\"productsGrid\" aria-live=\"polite\">\r\n <noscript>\r\n <div class=\"loading-state\">Veuillez activer JavaScript pour voir la boutique.<\/div>\r\n <\/noscript>\r\n <div class=\"loading-state\">Chargement des cr\u00e9ations...<\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <script>\r\n document.addEventListener('DOMContentLoaded', async function() {\r\n const productsGrid = document.getElementById('productsGrid');\r\n if (!productsGrid) return;\r\n\r\n const stripHtml = (html) => {\r\n const doc = new DOMParser().parseFromString(html, 'text\/html');\r\n return doc.body.textContent || \"\";\r\n }\r\n\r\n \/\/ Fonction pour nettoyer les mentions inutiles\r\n const cleanProductDescription = (text) => {\r\n \/\/ Supprimer les mentions \"Couteau unique\", \"Pi\u00e8ce unique\", etc.\r\n const cleanText = text\r\n .replace(\/couteau unique[\\s,.-]*\/gi, '')\r\n .replace(\/pi\u00e8ce unique[\\s,.-]*\/gi, '')\r\n .replace(\/unique[\\s,.-]*\/gi, '')\r\n .replace(\/^\\s*[,.-]\\s*\/, '') \/\/ Nettoyer la ponctuation en d\u00e9but\r\n .trim();\r\n \r\n return cleanText;\r\n }\r\n\r\n try {\r\n const apiUrl = `${window.location.origin}\/wp-json\/wc\/store\/v1\/products?per_page=20&orderby=menu_order&order=asc&_fields=id,name,images,prices,permalink,description,short_description`; \r\n \r\n const response = await fetch(apiUrl);\r\n if (!response.ok) throw new Error('Erreur r\u00e9seau');\r\n const products = await response.json();\r\n\r\n if (!Array.isArray(products) || products.length === 0) {\r\n productsGrid.innerHTML = '<div class=\"loading-state\">Aucune cr\u00e9ation disponible pour le moment.<\/div>';\r\n return;\r\n }\r\n \r\n let html = '';\r\n \r\n products.forEach((product, index) => {\r\n const image = product.images[0]?.src || '';\r\n const name = product.name || 'Cr\u00e9ation artisanale';\r\n const link = product.permalink || '#';\r\n \r\n \/\/ R\u00e9cup\u00e9ration et formatage du prix\r\n const rawPrice = product.prices?.price || '';\r\n const currencySymbol = product.prices?.currency_symbol || '\u20ac';\r\n const currencyDecimals = product.prices?.currency_minor_unit || 2;\r\n \r\n let priceDisplay = '';\r\n if (rawPrice) {\r\n const priceValue = parseInt(rawPrice) \/ Math.pow(10, currencyDecimals);\r\n const formattedPrice = priceValue.toFixed(currencyDecimals).replace('.', ',');\r\n priceDisplay = `<span class=\"price-prefix\">\u00c0 partir de<\/span>${formattedPrice} ${currencySymbol}`;\r\n }\r\n\r\n \/\/ Description nettoy\u00e9e et limit\u00e9e\r\n const rawDesc = product.short_description || product.description || \"Forg\u00e9 avec passion dans notre atelier fran\u00e7ais.\";\r\n let cleanDesc = cleanProductDescription(stripHtml(rawDesc));\r\n \r\n \/\/ Limiter \u00e0 ~80 caract\u00e8res pour 2-3 lignes\r\n if (cleanDesc.length > 80) {\r\n cleanDesc = cleanDesc.substring(0, 77) + '...';\r\n }\r\n\r\n \/\/ Alt text descriptif simple\r\n const altText = `${name} - Cr\u00e9ation artisanale fran\u00e7aise`;\r\n\r\n html += `\r\n <a href=\"${link}\" class=\"product-card\" style=\"animation-delay: ${index * 0.1}s\">\r\n <div class=\"product-image\">\r\n <img decoding=\"async\" src=\"${image}\" alt=\"${altText}\" loading=\"lazy\">\r\n <\/div>\r\n \r\n <div class=\"product-info\">\r\n <h3 class=\"product-name\">${name}<\/h3>\r\n \r\n ${priceDisplay ? `<div class=\"product-price-label\">${priceDisplay}<\/div>` : ''}\r\n \r\n <p class=\"product-description\">${cleanDesc}<\/p>\r\n \r\n <span class=\"cta-button\" aria-hidden=\"true\">D\u00e9couvrir<\/span>\r\n <\/div>\r\n <\/a>\r\n `;\r\n });\r\n\r\n productsGrid.innerHTML = html;\r\n\r\n } catch (error) {\r\n console.error('Erreur:', error);\r\n productsGrid.innerHTML = `<div class=\"loading-state\">Impossible de charger la boutique. Veuillez r\u00e9essayer.<\/div>`;\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<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Boutique – Version Optimis\u00e9e Boutique Fabriqu\u00e9 en France Veuillez activer JavaScript pour voir la boutique. Chargement des cr\u00e9ations…<\/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-18256","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/ledragonnier.com\/index.php\/wp-json\/wp\/v2\/pages\/18256","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=18256"}],"version-history":[{"count":141,"href":"https:\/\/ledragonnier.com\/index.php\/wp-json\/wp\/v2\/pages\/18256\/revisions"}],"predecessor-version":[{"id":21115,"href":"https:\/\/ledragonnier.com\/index.php\/wp-json\/wp\/v2\/pages\/18256\/revisions\/21115"}],"wp:attachment":[{"href":"https:\/\/ledragonnier.com\/index.php\/wp-json\/wp\/v2\/media?parent=18256"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}