Document<\/title>\r\n<\/head>\r\n <style>\r\n .buttons-container {\r\n display: flex;\r\n gap: 30px;\r\n justify-content: center;\r\n align-items: center;\r\n margin-bottom: 60px;\r\n flex-wrap: wrap;\r\n }\r\n \r\n.create-btn {\r\n --offset: 2px;\r\n position: relative;\r\n background: linear-gradient(135deg, #B8020A 0%, #9D0208 50%, #7A0106 100%);\r\n color: #F8F6F3;\r\n padding: 18px 45px;\r\n font-family: var(--font-family);\r\n font-size: 13px;\r\n font-weight: 600;\r\n text-transform: uppercase;\r\n letter-spacing: 2px;\r\n cursor: pointer;\r\n border-radius: 6px;\r\n overflow: hidden;\r\n transition: all 0.3s ease;\r\n border: none;\r\n box-shadow:\r\n inset 0 1px 0 rgba(255, 255, 255, 0.1),\r\n inset 0 -1px 0 rgba(0, 0, 0, 0.3),\r\n 0 4px 0 #4D0103,\r\n 0 8px 25px rgba(0, 0, 0, 0.4);\r\n text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);\r\n }\r\n\r\n .create-btn::before {\r\n content: '';\r\n background: conic-gradient(from 0deg,\r\n transparent 0deg,\r\n rgba(250, 163, 7, 0.01) 15deg,\r\n rgba(250, 163, 7, 0.03) 30deg,\r\n rgba(250, 163, 7, 0.06) 45deg,\r\n rgba(250, 163, 7, 0.12) 60deg,\r\n rgba(250, 163, 7, 0.25) 75deg,\r\n rgba(250, 163, 7, 0.45) 90deg,\r\n rgba(250, 163, 7, 0.7) 105deg,\r\n #FAA307 120deg,\r\n #E85D04 180deg,\r\n rgba(232, 93, 4, 0.7) 195deg,\r\n rgba(232, 93, 4, 0.45) 210deg,\r\n rgba(232, 93, 4, 0.25) 225deg,\r\n rgba(232, 93, 4, 0.12) 240deg,\r\n rgba(232, 93, 4, 0.06) 255deg,\r\n rgba(232, 93, 4, 0.03) 270deg,\r\n rgba(232, 93, 4, 0.01) 285deg,\r\n transparent 300deg,\r\n transparent 360deg);\r\n position: absolute;\r\n top: 50%;\r\n left: 50%;\r\n transform: translate(-50%, -50%) scale(1.1);\r\n aspect-ratio: 1;\r\n width: 100%;\r\n animation: dragonnier-rotate 4s linear infinite;\r\n z-index: 1;\r\n }\r\n\r\n .create-btn::after {\r\n content: '';\r\n background: inherit;\r\n border-radius: inherit;\r\n position: absolute;\r\n inset: var(--offset);\r\n height: calc(100% - 2 * var(--offset));\r\n width: calc(100% - 2 * var(--offset));\r\n z-index: 2;\r\n }\r\n\r\n .create-btn-text {\r\n position: relative;\r\n z-index: 10;\r\n text-shadow: 0 0 4px rgba(255, 220, 180, 0.3);\r\n }@keyframes dragonnier-rotate {\r\n from {\r\n transform: translate(-50%, -50%) scale(1.1) rotate(0turn);\r\n }\r\n\r\n to {\r\n transform: translate(-50%, -50%) scale(1.1) rotate(1turn);\r\n }\r\n }\r\n\r\n .create-btn:hover {\r\n transform: translateY(-2px);\r\n box-shadow:\r\n inset 0 1px 0 rgba(255, 255, 255, 0.15),\r\n inset 0 -1px 0 rgba(0, 0, 0, 0.3),\r\n 0 6px 0 #4D0103,\r\n 0 12px 35px rgba(0, 0, 0, 0.5);\r\n background: linear-gradient(135deg, #C5020C 0%, #B8020A 50%, #9D0208 100%);\r\n color:white;\r\n }\r\n\r\n .create-btn-blade {\r\n content: '';\r\n position: absolute;\r\n top: -50%;\r\n left: -150%;\r\n width: 50%;\r\n height: 200%;\r\n background: linear-gradient(135deg,\r\n transparent 0%,\r\n rgba(255, 255, 255, 0.1) 30%,\r\n rgba(255, 255, 255, 0.4) 50%,\r\n rgba(255, 255, 255, 0.1) 70%,\r\n transparent 100%);\r\n transform: skewX(20deg);\r\n transition: left 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);\r\n z-index: 15;\r\n pointer-events: none;\r\n }\r\n\r\n .create-btn:hover .create-btn-blade {\r\n left: 120%;\r\n }\r\n\r\n <\/style>\r\n <body>\r\n <div class=\"buttons-container\">\r\n \r\n <a class=\"create-btn\" href=\"#anchor-presentation\">\r\n <span class=\"create-btn-text\">Me d\u00e9couvrir<\/span>\r\n <div class=\"create-btn-blade\"><\/div>\r\n <\/a>\r\n\r\n <\/div>\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\t\t<div class=\"elementor-element elementor-element-c7688f0 elementor-widget elementor-widget-html\" data-id=\"c7688f0\" data-element_type=\"widget\" data-e-type=\"widget\" id=\"anchor-presentation\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!DOCTYPE html>\n<html lang=\"fr\">\n<head>\n <meta charset=\"UTF--8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>Le Dragonnier - Cr\u00e9ation, Boutique & Ateliers<\/title>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Playfair+Display:ital,wght@0,400;0,500;1,400&display=swap\" rel=\"stylesheet\">\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Crimson+Text:wght@400;600&display=swap\" rel=\"stylesheet\">\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Immortal:wght@400;500&display=swap\" rel=\"stylesheet\">\n \n <style>\n \/* NOUVEAU CORRECTIF : plus puissant *\/\nhtml, body {\n width: 100%;\n overflow-x: hidden;\n}\n \/* ================================================\n STYLES DU FICHIER 1 (CTA, TIMELINE, PORTFOLIO, CARROUSEL)\n ================================================ *\/\n .dragonnierCarrousel {\n --primary-red: #9D0208;\n --secondary-orange: #FAA307;\n --accent-orange: #E85D04;\n --dark-text: #121212;\n --light-bg: #F8F6F3;\n --warm-white: #FEFCFA;\n --font-family: 'Immortal', 'Playfair Display', serif;\n --container-padding: 40px;\n --section-spacing: 100px;\n --step-spacing: 80px;\n --transition-smooth: all 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);\n --shadow-light: 0 4px 15px rgba(250, 163, 7, 0.3);\n --shadow-medium: 0 20px 60px rgba(157, 2, 8, 0.12);\n --shadow-heavy: 0 35px 90px rgba(157, 2, 8, 0.18);\n }\n\n @font-face {\n font-family: 'Immortal';\n src: url('data:font\/woff2;base64,d09GMgABAAAAAAOcAAoAAAAABIAAAANRAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAABmAAgkIKgmyCKQsGAAE2AiQDCAQgBQYHMBuEA8iO0UuLw5gJk5NTziGeeN5\/v\/\/al+xJ\/E8mSTyJJE0kPEIWsaTJVKJ5xhvP80\/7y\/\/M3szOzD+qM5s6K7OyDkLyYuq2bnAmgcUWyKADDzjwNg26gO0pG4KZmKYt9HxnSEzUOx8C3jo0\/2ztUnoDANkCAE8vL8+w\/0M\/hHyYL+SbUyCQpwCcCBoaNgIea8JG5wRdF36ImfUDTwTIErCzgI4FXgDfAHRQWqeBaTJyGhIBCo+GhETM4nFe4mIuStzCRYnzwUWLU3rXwq35OXxcFMTjnL6+eBQM5Lj9hzL9FEzHM8PFvDF4KLNVnRUOKv+ZPJcZKM3NG5L9fMwrBIsrUy9n7mVPRO\/EbiTvZc6F7kTPBW8EzsVuZU7Eb0fPBW7\/0A+SD5I3Av8QfgJ9AvoK+Bv4O\/hf0A\/hpxAOcD\/lAxw==') format('woff2');\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n }\n\n .dragonnierCarrousel {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n }\n\n .dragonnierCarrousel {\n font-family: var(--font-family);\n background-color: var(--light-bg);\n color: var(--dark-text);\n line-height: 1.6;\n overflow-x: hidden;\n -webkit-font-smoothing: antialiased;\n }\n\n .cta-principale {\n position: relative;\n max-height: 100vh;\n height: 100vh;\n display: flex;\n align-items: center;\n justify-content: center;\n overflow: hidden;\n z-index: 1;\n }\n\n .cta-principale::before {\n content: '';\n position: absolute;\n inset: 0;\n z-index: -2;\n background: url('https:\/\/ledragonnier.com\/wp-content\/uploads\/2025\/07\/Grains-de-bois-polies-et-detaillees.png') center center \/ cover no-repeat;\n background-attachment: scroll;\n }\n\n .cta-principale::after {\n content: '';\n position: absolute;\n inset: 0;\n z-index: -1;\n background: linear-gradient(180deg,\n rgba(18, 18, 18, 0.4) 0%,\n rgba(18, 18, 18, 0.8) 50%,\n rgba(18, 18, 18, 1) 100%);\n pointer-events: none;\n }\n\n .content {\n position: relative;\n z-index: 10;\n text-align: center;\n max-width: 900px;\n padding: 0 40px;\n display: flex;\n flex-direction: column;\n align-items: center;\n }\n\n .cta-principale .subtitle {\n font-size: 11px;\n letter-spacing: 4px;\n text-transform: uppercase;\n color: rgba(255, 255, 255, 0.8);\n margin-bottom: 30px;\n margin-top: 60px;\n font-weight: 200;\n }\n\n .title {\n font-family: var(--font-family);\n font-size: clamp(3.5rem, 8vw, 72px);\n font-weight: 200;\n line-height: 1.1;\n margin-bottom: 40px;\n color: white;\n text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.7);\n letter-spacing: -2px;\n }\n\n .description {\n font-family: var(--font-family), serif;\n font-size: clamp(1.2rem, 3vw, 24px);\n line-height: 1.8;\n color: rgba(255, 255, 255, 0.9);\n margin-bottom: 20px;\n font-weight: 500;\n max-width: 800px;\n margin-bottom: 40px;\n }\n\n #highlight {\n font-weight: bold;\n color: var(--secondary-orange);\n }\n\n .ornament {\n display: flex;\n align-items: center;\n justify-content: center;\n margin: 40px 0;\n gap: 15px;\n }\n\n .ornament::before,\n .ornament::after {\n content: '';\n width: 60px;\n height: 1px;\n background: #d4af37;\n transition: width 0.3s ease;\n }\n\n .ornament-center {\n width: 8px;\n height: 8px;\n background: #d4af37;\n border-radius: 50%;\n position: relative;\n }\n\n .ornament-center::before,\n .ornament-center::after {\n content: '';\n position: absolute;\n width: 6px;\n height: 6px;\n background: #d4af37;\n border-radius: 50%;\n top: 50%;\n transform: translateY(-50%);\n }\n\n .ornament-center::before {\n left: -15px;\n }\n\n .ornament-center::after {\n right: -15px;\n }\n\n .buttons-container {\n display: flex;\n gap: 30px;\n justify-content: center;\n align-items: center;\n margin-bottom: 60px;\n flex-wrap: wrap;\n }\n \n .create-btn {\n --offset: 2px;\n position: relative;\n background: linear-gradient(135deg, #B8020A 0%, #9D0208 50%, #7A0106 100%);\n color: #F8F6F3;\n padding: 18px 45px;\n font-family: var(--font-family);\n font-size: 13px;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 2px;\n cursor: pointer;\n border-radius: 6px;\n overflow: hidden;\n transition: all 0.3s ease;\n border: none;\n box-shadow:\n inset 0 1px 0 rgba(255, 255, 255, 0.1),\n inset 0 -1px 0 rgba(0, 0, 0, 0.3),\n 0 4px 0 #4D0103,\n 0 8px 25px rgba(0, 0, 0, 0.4);\n text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);\n }\n .boutton-timeline{\n margin:40px;\n }\n\n .create-btn::before {\n content: '';\n background: conic-gradient(from 0deg,\n transparent 0deg,\n rgba(250, 163, 7, 0.01) 15deg,\n rgba(250, 163, 7, 0.03) 30deg,\n rgba(250, 163, 7, 0.06) 45deg,\n rgba(250, 163, 7, 0.12) 60deg,\n rgba(250, 163, 7, 0.25) 75deg,\n rgba(250, 163, 7, 0.45) 90deg,\n rgba(250, 163, 7, 0.7) 105deg,\n #FAA307 120deg,\n #E85D04 180deg,\n rgba(232, 93, 4, 0.7) 195deg,\n rgba(232, 93, 4, 0.45) 210deg,\n rgba(232, 93, 4, 0.25) 225deg,\n rgba(232, 93, 4, 0.12) 240deg,\n rgba(232, 93, 4, 0.06) 255deg,\n rgba(232, 93, 4, 0.03) 270deg,\n rgba(232, 93, 4, 0.01) 285deg,\n transparent 300deg,\n transparent 360deg);\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%) scale(1.1);\n aspect-ratio: 1;\n width: 100%;\n animation: dragonnier-rotate 4s linear infinite;\n z-index: 1;\n }\n\n .create-btn::after {\n content: '';\n background: inherit;\n border-radius: inherit;\n position: absolute;\n inset: var(--offset);\n height: calc(100% - 2 * var(--offset));\n width: calc(100% - 2 * var(--offset));\n z-index: 2;\n }\n\n .create-btn-text {\n position: relative;\n z-index: 10;\n text-shadow: 0 0 4px rgba(255, 220, 180, 0.3);\n }\n #btn-text{\n position: relative;\n z-index: 10;\n text-shadow: 0 0 4px rgba(255, 220, 180, 0.3);\n }\n\n @keyframes dragonnier-rotate {\n from {\n transform: translate(-50%, -50%) scale(1.1) rotate(0turn);\n }\n\n to {\n transform: translate(-50%, -50%) scale(1.1) rotate(1turn);\n }\n }\n\n .create-btn:hover {\n transform: translateY(-2px);\n box-shadow:\n inset 0 1px 0 rgba(255, 255, 255, 0.15),\n inset 0 -1px 0 rgba(0, 0, 0, 0.3),\n 0 6px 0 #4D0103,\n 0 12px 35px rgba(0, 0, 0, 0.5);\n background: linear-gradient(135deg, #C5020C 0%, #B8020A 50%, #9D0208 100%);\n }\n\n .create-btn-blade {\n content: '';\n position: absolute;\n top: -50%;\n left: -150%;\n width: 50%;\n height: 200%;\n background: linear-gradient(135deg,\n transparent 0%,\n rgba(255, 255, 255, 0.1) 30%,\n rgba(255, 255, 255, 0.4) 50%,\n rgba(255, 255, 255, 0.1) 70%,\n transparent 100%);\n transform: skewX(20deg);\n transition: left 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);\n z-index: 15;\n pointer-events: none;\n }\n\n .create-btn:hover .create-btn-blade {\n left: 120%;\n }\n\n .cta-principale .view-btn {\n background: rgba(255, 255, 255, 0.05);\n color: rgba(255, 255, 255, 0.85);\n border: 1px solid rgba(255, 255, 255, 0.6);\n padding: 16px 40px;\n font-size: 13px;\n font-weight: 500;\n text-transform: lowercase;\n letter-spacing: 2px;\n cursor: pointer;\n transition: all 0.3s ease;\n position: relative;\n font-family: var(--font-family);\n text-shadow: 0 0 4px rgba(255, 255, 255, 0.15);\n border-radius: 6px;\n }\n\n .cta-principale .view-btn:hover {\n background: rgba(255, 255, 255, 0.08);\n color: white;\n border-color: rgba(255, 255, 255, 0.8);\n transform: translateY(-1px);\n }\n\n .side-decoration {\n position: absolute;\n left: 50px;\n top: 20%;\n z-index: 20;\n width: 20px;\n height: 20px;\n border: 2px solid #d4af37;\n transform: rotate(45deg);\n background: transparent;\n animation: floatRotate 4s ease-in-out infinite;\n }\n\n .side-decoration-right {\n position: absolute;\n right: 50px;\n bottom: 20%;\n z-index: 20;\n width: 20px;\n height: 20px;\n border: 2px solid #d4af37;\n transform: rotate(45deg);\n background: transparent;\n animation: floatRotateReverse 4s ease-in-out infinite;\n }\n\n @keyframes floatRotate {\n\n 0%,\n 100% {\n transform: rotate(45deg) translateY(0px);\n opacity: 0.8;\n }\n\n 50% {\n transform: rotate(45deg) translateY(-8px);\n opacity: 1;\n }\n }\n\n @keyframes floatRotateReverse {\n\n 0%,\n 100% {\n transform: rotate(45deg) translateY(0px);\n opacity: 0.8;\n }\n\n 50% {\n transform: rotate(45deg) translateY(8px);\n opacity: 1;\n }\n }\n\n .timeline-section {\n position: relative;\n background: var(--light-bg);\n padding: var(--section-spacing) 0;\n border-top: 1px solid rgba(157, 2, 8, 0.1);\n }\n\n .timeline-container {\n max-width: 1200px;\n margin: 0 auto;\n padding: 0 var(--container-padding);\n }\n\n .timeline-header {\n text-align: center;\n margin-bottom: 60px;\n opacity: 0;\n transform: translateY(50px);\n transition: var(--transition-smooth);\n }\n\n .timeline-header.visible {\n opacity: 1;\n transform: translateY(0);\n }\n\n .timeline-title {\n font-size: clamp(2.5rem, 5vw, 4rem);\n color: var(--primary-red);\n margin-bottom: 20px;\n font-weight: 400;\n letter-spacing: 2px;\n }\n\n .timeline-title::after {\n content: '';\n position: absolute;\n bottom: -15px;\n left: 50%;\n transform: translateX(-50%);\n width: 0;\n height: 3px;\n background: linear-gradient(90deg, var(--secondary-orange), var(--accent-orange));\n transition: width 1s ease 0.8s;\n }\n\n .timeline-header.visible .timeline-title::after {\n width: 120px;\n }\n\n .timeline-subtitle {\n font-size: 1.2rem;\n color: var(--dark-text);\n opacity: 0.8;\n max-width: 600px;\n margin: 0 auto 80px auto;\n line-height: 1.8;\n }\n\n .discover-btn {\n display: inline-block;\n background: linear-gradient(135deg, var(--primary-red) 0%, var(--accent-orange) 100%);\n color: var(--warm-white);\n padding: 16px 40px;\n font-family: var(--font-family);\n font-size: 14px;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 2px;\n text-decoration: none;\n border-radius: 8px;\n transition: var(--transition-smooth);\n box-shadow: 0 8px 25px rgba(157, 2, 8, 0.3);\n cursor: pointer;\n border: none;\n position: relative;\n overflow: hidden;\n margin-top: 40px;\n }\n\n .discover-btn::before {\n content: '';\n position: absolute;\n top: 0;\n left: -100%;\n width: 100%;\n height: 100%;\n background: linear-gradient(90deg,\n transparent,\n rgba(255, 255, 255, 0.2),\n transparent);\n transition: left 0.5s ease;\n }\n\n .discover-btn:hover {\n transform: translateY(-3px);\n box-shadow: 0 12px 35px rgba(157, 2, 8, 0.4);\n }\n\n .discover-btn:hover::before {\n left: 100%;\n }\n\n .timeline-content {\n max-height: 0;\n overflow: hidden;\n transition: max-height 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);\n opacity: 0;\n }\n\n .timeline-content.expanded {\n max-height: 5000px;\n opacity: 1;\n transition: max-height 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94),\n opacity 0.5s ease 0.3s;\n }\n\n .timeline {\n position: relative;\n padding: 60px 0 0 0;\n margin: 0;\n }\n\n .timeline::before {\n content: '';\n position: absolute;\n left: 50%;\n top: 0;\n width: 4px;\n height: 100%;\n background: linear-gradient(180deg,\n var(--primary-red) 0%,\n var(--accent-orange) 50%,\n var(--secondary-orange) 100%);\n transform: translateX(-50%);\n border-radius: 2px;\n }\n\n .timeline-step {\n position: relative;\n padding: var(--step-spacing) 0;\n opacity: 0;\n transform: translateY(60px);\n transition: var(--transition-smooth);\n }\n\n .timeline-step.visible {\n opacity: 1;\n transform: translateY(0);\n }\n\n .step-content {\n display: grid;\n grid-template-columns: 0.9fr 1.1fr;\n gap: 100px;\n align-items: center;\n }\n\n .step-text {\n padding: 0;\n }\n\n .step-visual {\n width: 100%;\n height: 200px;\n max-width: none;\n display: flex;\n justify-content: flex-end;\n padding-right: 0;\n }\n\n .step-marker {\n position: absolute;\n left: 50%;\n top: 50%;\n transform: translate(-50%, -50%);\n width: 24px;\n height: 24px;\n background: var(--secondary-orange);\n border: 4px solid var(--warm-white);\n border-radius: 50%;\n z-index: 10;\n box-shadow: 0 4px 15px rgba(250, 163, 7, 0.4);\n }\n\n .step-badge {\n display: inline-block;\n background: var(--primary-red);\n color: var(--warm-white);\n padding: 8px 20px;\n border-radius: 20px;\n font-size: 11px;\n text-transform: uppercase;\n letter-spacing: 2px;\n font-weight: 600;\n margin-bottom: 20px;\n }\n\n .step-title {\n font-size: clamp(2rem, 4vw, 2.8rem);\n color: var(--primary-red);\n margin: 0 0 20px 0;\n font-weight: 400;\n letter-spacing: 1px;\n }\n\n .step-description {\n font-size: 1.1rem;\n line-height: 1.8;\n color: var(--dark-text);\n opacity: 0.85;\n margin-bottom: 15px;\n }\n\n .step-description:last-child {\n margin-bottom: 0;\n }\n\n .step-image-container {\n width: 85%;\n height: 100%;\n border-radius: 12px;\n overflow: hidden;\n box-shadow: 0 10px 30px rgba(157, 2, 8, 0.1);\n transition: all 0.3s ease;\n }\n\n .step-image-container:hover {\n transform: translateY(-4px);\n box-shadow: 0 12px 30px rgba(157, 2, 8, 0.12);\n }\n\n .step-image {\n width: 100%;\n height: 100%;\n object-fit: cover;\n display: block;\n }\n\n .step-image-container:hover {\n box-shadow: 0 15px 40px rgba(157, 2, 8, 0.15);\n }\n\n @media (max-width: 768px) {\n .timeline::before {\n left: 30px;\n transform: none;\n }\n\n .step-content {\n display: block !important;\n padding-left: 70px;\n }\n\n .step-text {\n padding: 0 !important;\n margin-bottom: 30px;\n }\n\n .step-marker {\n left: 30px;\n transform: translateY(-50%);\n }\n\n .step-visual {\n height: 160px;\n justify-content: center;\n padding-right: 0;\n }\n\n .step-image-container {\n width: 100%;\n }\n\n .buttons-container {\n flex-direction: column;\n gap: 20px;\n }\n\n .create-btn,\n .cta-principale .view-btn {\n width: 100%;\n max-width: 300px;\n }\n\n .side-decoration,\n .side-decoration-right {\n display: none;\n }\n }\n\n @media (max-width: 480px) {\n .content {\n padding: 0 clamp(16px, 4vw, 24px);\n }\n\n .cta-principale .subtitle {\n font-size: 10px;\n letter-spacing: 2px;\n word-break: break-word;\n }\n\n .title {\n font-size: clamp(2rem, 8vw, 2.8rem);\n letter-spacing: -1px;\n line-height: 1.1;\n }\n\n .description {\n font-size: clamp(1rem, 4vw, 1.1rem);\n margin-bottom: 30px;\n }\n\n .create-btn,\n .cta-principale .view-btn {\n width: 100%;\n max-width: 320px;\n padding: 16px 30px;\n font-size: 12px;\n }\n\n .info-container {\n gap: 12px;\n margin-bottom: 40px;\n }\n\n .info-item {\n font-size: 0.8rem;\n }\n\n .ornament::before,\n .ornament::after {\n width: 40px;\n }\n }\n\n @media (min-width: 1600px) {\n .timeline-container {\n max-width: 1600px;\n }\n }\n\n .services-section {\n background: var(--light-bg);\n padding: var(--section-spacing) 0;\n border-top: 1px solid rgba(157, 2, 8, 0.1);\n }\n\n .services-header {\n text-align: center;\n margin-bottom: 80px;\n opacity: 0;\n transform: translateY(50px);\n transition: var(--transition-smooth);\n }\n\n .services-header.visible {\n opacity: 1;\n transform: translateY(0);\n }\n\n .services-title {\n font-size: clamp(2.5rem, 5vw, 4rem);\n color: var(--primary-red);\n margin-bottom: 20px;\n font-weight: 400;\n letter-spacing: 2px;\n position: relative;\n }\n\n .services-title::after {\n content: '';\n position: absolute;\n bottom: -15px;\n left: 50%;\n transform: translateX(-50%);\n width: 0;\n height: 3px;\n background: linear-gradient(90deg, var(--secondary-orange), var(--accent-orange));\n transition: width 1s ease 0.8s;\n }\n\n .services-header.visible .services-title::after {\n width: 120px;\n }\n\n .services-subtitle {\n font-size: 1.2rem;\n color: var(--dark-text);\n opacity: 0.8;\n max-width: 600px;\n margin: 0 auto;\n line-height: 1.8;\n }\n\n .creation-section {\n margin-bottom: 80px;\n opacity: 0;\n transform: translateY(60px);\n transition: var(--transition-smooth);\n background: rgba(157, 2, 8, 0.02);\n border-radius: 16px;\n padding: 50px;\n border: 1px solid rgba(157, 2, 8, 0.08);\n }\n\n .creation-section.visible {\n opacity: 1;\n transform: translateY(0);\n }\n\n .creation-header {\n margin-bottom: 30px;\n }\n\n .creation-title {\n font-size: 2rem;\n color: var(--primary-red);\n margin: 0 0 8px 0;\n font-weight: 500;\n }\n\n .creation-subtitle {\n font-size: 1.2rem;\n color: var(--accent-orange);\n opacity: 0.9;\n margin-bottom: 20px;\n }\n\n .creation-description {\n font-size: 1.1rem;\n color: var(--dark-text);\n opacity: 0.85;\n max-width: 700px;\n margin: 0 0 0 0;\n line-height: 1.6;\n }\n\n .formulas-container {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 80px;\n margin-bottom: 40px;\n max-width: 1200px;\n margin-left: auto;\n margin-right: auto;\n }\n\n @media (min-width: 1400px) {\n .formulas-container {\n grid-template-columns: 1fr 1fr;\n gap: 120px;\n max-width: 1400px;\n }\n }\n\n .formula-block {\n position: relative;\n padding: 30px 0;\n border-left: 3px solid rgba(157, 2, 8, 0.2);\n padding-left: 30px;\n transition: var(--transition-smooth);\n }\n\n .formula-block.featured {\n border-left-color: var(--secondary-orange);\n border-left-width: 4px;\n }\n\n .formula-block:hover {\n transform: translateX(10px);\n border-left-color: var(--primary-red);\n }\n\n .formula-badge {\n position: absolute;\n top: -5px;\n left: -10px;\n background: var(--secondary-orange);\n color: white;\n font-size: 0.7rem;\n font-weight: 600;\n padding: 6px 12px;\n border-radius: 8px;\n letter-spacing: 1px;\n }\n\n .formula-name {\n font-size: 1.4rem;\n color: var(--primary-red);\n margin: 0 0 15px 0;\n font-weight: 600;\n }\n\n .formula-price {\n font-size: 1.8rem;\n color: var(--primary-red);\n font-weight: 700;\n margin-bottom: 15px;\n display: inline-block;\n background: rgba(157, 2, 8, 0.05);\n padding: 5px 15px;\n border-radius: 8px;\n }\n\n .formula-desc {\n font-size: 1rem;\n color: var(--dark-text);\n opacity: 0.8;\n margin-bottom: 20px;\n line-height: 1.5;\n }\n\n .formula-details {\n list-style: none;\n padding: 0;\n margin: 0;\n }\n\n .formula-details li {\n font-size: 0.95rem;\n color: var(--dark-text);\n opacity: 0.7;\n padding: 6px 0;\n position: relative;\n padding-left: 25px;\n }\n\n .formula-details li::before {\n content: '\u2022';\n position: absolute;\n left: 0;\n color: var(--secondary-orange);\n font-weight: bold;\n font-size: 1.2rem;\n }\n\n .creation-cta {\n text-align: center;\n display: flex;\n justify-content: center;\n width: 100%;\n }\n\n .services-separator {\n height: 1px;\n background: linear-gradient(90deg,\n transparent 0%,\n rgba(157, 2, 8, 0.2) 25%,\n rgba(250, 163, 7, 0.4) 50%,\n rgba(157, 2, 8, 0.2) 75%,\n transparent 100%);\n margin: 80px 0;\n position: relative;\n }\n\n .services-separator::before {\n content: '\u2766';\n position: absolute;\n top: -10px;\n left: 50%;\n transform: translateX(-50%);\n background: var(--light-bg);\n color: var(--secondary-orange);\n font-size: 1.2rem;\n padding: 0 15px;\n }\n\n .sharpening-section {\n opacity: 0;\n transform: translateY(60px);\n transition: var(--transition-smooth);\n background: rgba(250, 163, 7, 0.02);\n border-radius: 16px;\n padding: 50px;\n border: 1px solid rgba(250, 163, 7, 0.08);\n }\n\n .sharpening-section.visible {\n opacity: 1;\n transform: translateY(0);\n }\n\n .sharpening-layout {\n display: grid;\n grid-template-columns: 1.5fr 1fr;\n gap: 100px;\n align-items: start;\n }\n\n @media (min-width: 1400px) {\n .sharpening-layout {\n grid-template-columns: 1.6fr 1fr;\n gap: 140px;\n }\n }\n\n .sharpening-header {\n margin-bottom: 30px;\n }\n\n .sharpening-title {\n font-size: 2rem;\n color: var(--primary-red);\n margin: 0 0 8px 0;\n font-weight: 500;\n }\n\n .sharpening-subtitle {\n font-size: 1.1rem;\n color: var(--accent-orange);\n opacity: 0.9;\n }\n\n .sharpening-details {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 40px;\n }\n\n .specialties-title {\n font-size: 1.2rem;\n color: var(--primary-red);\n margin: 0 0 20px 0;\n font-weight: 500;\n }\n\n .specialties-list {\n list-style: none;\n padding: 0;\n margin: 0;\n }\n\n .specialties-list li {\n font-size: 1rem;\n color: var(--dark-text);\n opacity: 0.8;\n padding: 8px 0;\n position: relative;\n padding-left: 25px;\n }\n\n .specialties-list li::before {\n content: '\u2022';\n position: absolute;\n left: 0;\n color: var(--secondary-orange);\n font-weight: bold;\n font-size: 1.2rem;\n }\n\n .pricing-block {\n display: flex;\n flex-direction: column;\n gap: 25px;\n }\n\n .price-highlight {\n text-align: center;\n padding: 25px 20px;\n background: linear-gradient(135deg, rgba(157, 2, 8, 0.05) 0%, rgba(250, 163, 7, 0.05) 100%);\n border-radius: 12px;\n border: 2px solid rgba(157, 2, 8, 0.1);\n transition: var(--transition-smooth);\n }\n\n .price-highlight:hover {\n border-color: rgba(250, 163, 7, 0.3);\n transform: translateY(-2px);\n }\n\n .price-amount {\n display: block;\n font-size: 3rem;\n color: var(--primary-red);\n font-weight: 700;\n margin-bottom: 5px;\n }\n\n .price-unit {\n font-size: 1rem;\n color: var(--dark-text);\n opacity: 0.7;\n }\n\n .contact-block {\n text-align: center;\n }\n\n .contact-text {\n display: block;\n font-size: 0.9rem;\n color: var(--dark-text);\n opacity: 0.7;\n margin-bottom: 10px;\n }\n\n .phone-number {\n font-size: 1.5rem;\n color: var(--primary-red);\n font-weight: 600;\n text-decoration: none;\n transition: var(--transition-smooth);\n }\n\n .phone-number:hover {\n color: var(--accent-orange);\n transform: scale(1.05);\n }\n\n .service-btn {\n display: inline-block;\n padding: 16px 40px;\n font-family: var(--font-family);\n font-size: 14px;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 2px;\n text-decoration: none;\n border-radius: 12px;\n transition: var(--transition-smooth);\n cursor: pointer;\n border: none;\n }\n\n .primary-btn {\n background: linear-gradient(135deg, var(--primary-red) 0%, var(--accent-orange) 100%);\n color: var(--warm-white);\n box-shadow: 0 10px 30px rgba(157, 2, 8, 0.3);\n }\n\n .primary-btn:hover {\n transform: translateY(-3px);\n box-shadow: 0 15px 40px rgba(157, 2, 8, 0.4);\n }\n\n @media (max-width: 768px) {\n .formulas-container {\n grid-template-columns: 1fr;\n gap: 30px;\n }\n\n .formula-block.featured {\n border-left-width: 3px;\n }\n\n .sharpening-layout {\n grid-template-columns: 1fr;\n gap: 40px;\n }\n\n .sharpening-details {\n grid-template-columns: 1fr;\n gap: 30px;\n }\n\n .formula-block {\n padding-left: 20px;\n }\n }\n\n @media (max-width: 480px) {\n .timeline-container {\n padding: 0 20px;\n }\n\n .creation-title {\n font-size: 1.8rem;\n }\n\n .formula-price {\n font-size: 1.5rem;\n }\n\n .price-amount {\n font-size: 2.5rem;\n }\n\n .formula-block {\n padding-left: 15px;\n border-left-width: 2px;\n }\n }\n\n .info-container {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 40px;\n max-width: 600px;\n width: 100%;\n margin-bottom: 60px;\n margin-top: 30px;\n }\n\n .info-item {\n display: flex;\n align-items: center;\n gap: 8px;\n color: rgba(255, 255, 255, 0.9);\n font-size: 0.9rem;\n font-weight: 500;\n text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);\n letter-spacing: 0.3px;\n opacity: 0;\n transform: translateY(20px);\n animation: fadeInUp 0.6s ease forwards;\n }\n\n .info-item:nth-child(1) {\n animation-delay: 0.1s;\n }\n\n .info-item:nth-child(2) {\n animation-delay: 0.2s;\n }\n\n .info-item:nth-child(3) {\n animation-delay: 0.3s;\n }\n\n .info-icon {\n font-size: 1rem;\n filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));\n }\n\n .info-text {\n white-space: nowrap;\n }\n\n .info-duration .info-icon {\n color: #FAA307;\n }\n\n .info-price .info-icon {\n color: #E85D04;\n }\n\n .info-group .info-icon {\n color: #9D0208;\n }\n\n .info-item:not(:last-child)::after {\n content: '';\n position: absolute;\n right: -20px;\n top: 50%;\n transform: translateY(-50%);\n width: 1px;\n height: 20px;\n background: linear-gradient(180deg,\n transparent 0%,\n rgba(255, 255, 255, 0.3) 20%,\n rgba(255, 255, 255, 0.5) 50%,\n rgba(255, 255, 255, 0.3) 80%,\n transparent 100%);\n }\n\n .info-item {\n position: relative;\n }\n\n @keyframes fadeInUp {\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n\n @media (max-width: 768px) {\n .info-container {\n flex-direction: column;\n gap: 15px;\n align-items: center;\n }\n\n .info-item:not(:last-child)::after {\n display: none;\n }\n\n .info-item {\n font-size: 0.85rem;\n }\n\n .info-icon {\n font-size: 0.9rem;\n }\n }\n\n @media (max-width: 480px) {\n .info-container {\n gap: 12px;\n }\n\n .info-item {\n font-size: 0.8rem;\n gap: 6px;\n }\n }\n\n .dragonnierPortfolio {\n --primary-red: #9D0208;\n --secondary-orange: #FAA307;\n --accent-orange: #E85D04;\n --dark-text: #121212;\n --light-bg: #F5F5F5;\n --font-family: 'Immortal', serif;\n --space: 40px;\n --space-sm: 40px;\n --transition-smooth: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);\n --shadow-subtle: 0 2px 8px rgba(0, 0, 0, 0.06);\n --shadow-medium: 0 8px 25px rgba(0, 0, 0, 0.12);\n --shadow-strong: 0 15px 35px rgba(0, 0, 0, 0.18);\n --text-secondary: #5a5a5a;\n font-family: var(--font-family);\n background: var(--light-bg);\n color: var(--dark-text);\n padding: var(--space);\n margin: 0;\n box-sizing: border-box;\n }\n\n .section-title .h1-title {\n font-family: var(--font-family) !important;\n color: var(--primary-red) !important;\n font-size: clamp(2.5rem, 4vw, 3.5rem) !important;\n margin: 0 0 var(--space-sm) 0 !important;\n font-weight: 400 !important;\n letter-spacing: 2px !important;\n position: relative !important;\n cursor: default !important;\n transition: var(--transition-smooth) !important;\n text-align: center;\n }\n\n .section-title .h1-title::after {\n content: '' !important;\n position: absolute !important;\n bottom: -20px !important;\n left: 50% !important;\n transform: translateX(-50%) !important;\n width: 100px !important;\n height: 3px !important;\n background: linear-gradient(90deg, var(--secondary-orange) 0%, var(--accent-orange) 100%);\n transition: width 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.4s;\n }\n\n .h3-title {\n font-family: var(--font-family);\n color: var(--secondary-orange);\n font-size: clamp(1.8rem, 3vw, 2.4rem);\n margin: 0 0 8px 0;\n font-weight: 400;\n letter-spacing: 1.5px;\n }\n \n \n p {\n font-family: var(--body-font);\n font-size: 1.1rem;\n line-height: 1.7;\n margin-bottom: 20px;\n color: var(--text-secondary);\n }\n\n .highlight {\n background: linear-gradient(120deg, rgba(250, 163, 7, 0.08) 0%, rgba(232, 93, 4, 0.05) 100%);\n padding: 25px 30px;\n border-left: 4px solid var(--secondary-orange);\n border-radius: 0 12px 12px 0;\n font-style: italic;\n color: var(--accent-orange);\n margin: 35px 0;\n position: relative;\n overflow: hidden;\n }\n\n .highlight::before {\n content: '';\n position: absolute;\n top: -2px;\n right: -2px;\n bottom: -2px;\n left: -6px;\n background: linear-gradient(120deg, rgba(250, 163, 7, 0.1) 0%, rgba(232, 93, 4, 0.05) 100%);\n border-radius: 0 14px 14px 0;\n z-index: -1;\n opacity: 0;\n transition: opacity 0.6s ease 0.3s;\n }\n\n .highlight::after {\n content: '';\n position: absolute;\n top: 0;\n left: -100%;\n width: 100%;\n height: 100%;\n background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.2) 50%, transparent 100%);\n transition: left 0.8s ease;\n }\n\n .highlight:hover::after {\n left: 100%;\n }\n\n .alternating-section {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 60px;\n align-items: center;\n margin: 80px 10%;\n min-height: 400px;\n }\n\n .alternating-section.reverse {\n direction: rtl;\n }\n\n .alternating-section.reverse>* {\n direction: ltr;\n }\n\n .section-image {\n width: 100%;\n height: 350px;\n object-fit: cover;\n border-radius: 12px;\n box-shadow: 0 8px 30px rgba(157, 2, 8, 0.15);\n transition: var(--transition-smooth);\n }\n\n .section-image:hover {\n transform: translateY(-5px);\n box-shadow: 0 15px 40px rgba(157, 2, 8, 0.25);\n }\n\n .section-content h3 {\n margin-bottom: 20px;\n }\n\n .section-content p {\n font-size: 1.1rem;\n line-height: 1.7;\n margin-bottom: 25px;\n }\n\n @media (max-width: 768px) {\n .alternating-section {\n grid-template-columns: 1fr;\n gap: 30px;\n margin: 50px 0;\n }\n\n .alternating-section.reverse {\n direction: ltr;\n }\n\n .section-image {\n height: 250px;\n }\n }\n \n .dragonnierPortfolio .view-btn {\n background: transparent;\n color: var(--secondary-orange);\n border: 2px solid var(--secondary-orange);\n padding: 16px 40px;\n font-size: 13px;\n font-weight: 500;\n text-transform: lowercase;\n letter-spacing: 2px;\n cursor: pointer;\n transition: all 0.3s ease;\n position: relative;\n font-family: var(--font-family);\n border-radius: 6px;\n }\n\n .dragonnierPortfolio .view-btn:hover {\n background: var(--secondary-orange);\n color: white;\n transform: translateY(-1px);\n box-shadow: 0 6px 15px rgba(250, 163, 7, 0.3);\n }\n\n .btn-secondary {\n background: transparent;\n color: var(--primary-red);\n border: 2px solid var(--primary-red);\n padding: 16px 35px;\n font-family: var(--font-family);\n font-size: 13px;\n font-weight: 500;\n text-transform: uppercase;\n letter-spacing: 2px;\n cursor: pointer;\n border-radius: 6px;\n transition: var(--transition-smooth);\n }\n\n .btn-secondary:hover {\n background: var(--primary-red);\n color: white;\n transform: translateY(-2px);\n box-shadow: 0 8px 20px rgba(157, 2, 8, 0.3);\n }\n\n .faq-container {\n max-width: 800px;\n margin: 60px auto;\n }\n\n .faq-item {\n background: white;\n border: 1px solid #e5e5e5;\n border-radius: 8px;\n margin-bottom: 10px;\n overflow: hidden;\n }\n\n .faq-question {\n width: 100%;\n background: none;\n border: none;\n padding: 20px 25px;\n text-align: left;\n cursor: pointer;\n font-size: 1.1rem;\n font-weight: 500;\n color: var(--dark-text);\n position: relative;\n transition: background-color 0.3s ease;\n }\n\n .faq-question:hover {\n background: rgba(250, 163, 7, 0.05);\n }\n\n .faq-question::after {\n content: '+';\n position: absolute;\n right: 25px;\n font-size: 1.5rem;\n color: var(--secondary-orange);\n transition: transform 0.3s ease;\n }\n\n .faq-item[open] .faq-question::after {\n transform: rotate(45deg);\n }\n\n .faq-answer {\n padding: 0 25px 20px;\n color: #666;\n line-height: 1.6;\n }\n\n .cta-banner {\n color: white;\n text-align: center;\n border-radius: 12px;\n position: relative;\n overflow: hidden;\n }\n\n .cta-banner::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: url('data:image\/svg+xml,<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 100 100\"><circle cx=\"50\" cy=\"50\" r=\"2\" fill=\"rgba(255,255,255,0.1)\"\/><\/svg>') repeat;\n opacity: 0.3;\n }\n\n .cta-content {\n position: relative;\n z-index: 2;\n }\n\n .cta-title {\n font-size: 2.5rem;\n margin-bottom: 15px;\n font-weight: 400;\n letter-spacing: 1px;\n }\n\n .cta-subtitle {\n font-size: 1.2rem;\n margin-bottom: 30px;\n opacity: 0.9;\n }\n\n .cta-buttons {\n display: flex;\n gap: 20px;\n justify-content: center;\n flex-wrap: wrap;\n margin-top: 50px;\n }\n\n .cta-btn-primary {\n background: var(--secondary-orange);\n color: white;\n padding: 18px 40px;\n border: none;\n border-radius: 6px;\n font-size: 1.1rem;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 1px;\n cursor: pointer;\n transition: all 0.3s ease;\n }\n\n .cta-btn-primary:hover {\n background: var(--accent-orange);\n transform: translateY(-2px);\n box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);\n }\n\n .cta-btn-secondary {\n background: transparent;\n color: white;\n border: 2px solid white;\n padding: 16px 35px;\n border-radius: 6px;\n font-size: 1rem;\n font-weight: 500;\n cursor: pointer;\n transition: all 0.3s ease;\n }\n\n .cta-btn-secondary:hover {\n background: white;\n color: var(--primary-red);\n }\n\n @media (max-width: 768px) {\n .cta-title {\n font-size: 2rem;\n }\n\n .cta-buttons {\n flex-direction: column;\n align-items: center;\n }\n\n .cta-btn-primary,\n .cta-btn-secondary {\n width: 100%;\n max-width: 280px;\n }\n }\n\n\n .knives-carousel * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n \n \n .dragonnierCarrousel {\n --primary-red: #9D0208;\n --secondary-orange: #FAA307;\n --accent-orange: #E85D04;\n --dark-text: #121212;\n --light-bg: #F5F5F3;\n --transition-smooth: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);\n --overlay-black: rgba(18, 18, 18, 0.65);\n --space-sm: 2rem;\n background: var(--light-bg);\n }\n\n .carousel-section-title {\n padding: 60px 0 40px 0;\n background: var(--light-bg);\n text-align: center;\n }\n\n .carousel-section-title h1 {\n font-family: var(--font-family);\n color: var(--primary-red);\n font-size: clamp(2.5rem, 4vw, 3.5rem);\n margin: 0 0 var(--space-sm) 0;\n font-weight: 400;\n letter-spacing: 2px;\n position: relative;\n cursor: default;\n transition: var(--transition-smooth);\n text-align: center;\n }\n\n .carousel-section-title h1::after {\n content: '';\n position: absolute;\n bottom: -20px;\n left: 50%;\n transform: translateX(-50%);\n width: 100px;\n height: 3px;\n background: linear-gradient(90deg, var(--secondary-orange) 0%, var(--accent-orange) 100%);\n transition: width 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.4s;\n }\n\n .wp-site-blocks .alignfull,\n .entry-content .alignfull,\n .knives-carousel {\n margin-left: calc(50% - 50vw) !important;\n margin-right: calc(50% - 50vw) !important;\n width: 100vw !important;\n max-width: 100vw !important;\n }\n\n .knives-carousel {\n position: relative;\n width: 100%;\n height: calc(100svh - var(--wp-admin--admin-bar--height, 0px));\n min-height: calc(100dvh - var(--wp-admin--admin-bar--height, 0px));\n margin: 0;\n overflow: hidden;\n background: var(--dark-text);\n font-family: var(--font-family);\n z-index: 0;\n }\n\n .knives-carousel button {\n appearance: none;\n background: none;\n border: none;\n outline: none;\n text-decoration: none;\n font-family: var(--body-font);\n font-size: inherit;\n line-height: inherit;\n color: inherit;\n cursor: pointer;\n }\n \n \/* PARTIE 1 : On restaure le bouton parent LUI-M\u00caME *\/\n .knives-carousel a.create-btn {\n text-align: center;\n \/* Apparence g\u00e9n\u00e9rale et 3D *\/\n background: linear-gradient(135deg, #B8020A 0%, #9D0208 50%, #7A0106 100%);\n border: none;\n border-radius: 6px;\n padding: 18px 5px;\n overflow: hidden;\n width: 60%;\n margin: 10px 0px;\n box-shadow: \n inset 0 1px 0 rgba(255, 255, 255, 0.1), \n inset 0 -1px 0 rgba(0, 0, 0, 0.3), \n 0 4px 0 #4D0103, \n 0 8px 25px rgba(0, 0, 0, 0.4);\n transition: all 0.3s ease;\n\n \/* Style du texte pour qu'il soit identique au \"bon\" bouton *\/\n color: #F8F6F3;\n font-family: var(--font-family);\n font-size: 13px;\n font-weight: 600;\n text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);\n letter-spacing: 2px; \/* On ajoute l'espacement comme le bon bouton *\/\n }\n\n \/* PARTIE 2 : On restaure la SURFACE ROUGE (la couche ::after) *\/\n \/* C'EST LA PARTIE CRUCIALE QUI MANQUAIT *\/\n .knives-carousel a.create-btn::after {\n content: '';\n background: inherit;\n border-radius: inherit;\n position: absolute;\n inset: 2px; \/* Correspond \u00e0 la variable --offset *\/\n height: calc(100% - 4px);\n width: calc(100% - 4px);\n z-index: 2;\n }\n\n \/* PARTIE 3 : On s'assure que la LUEUR ANIM\u00c9E (la couche ::before) reste bien derri\u00e8re *\/\n .knives-carousel a.create-btn::before {\n content: '';\n z-index: 1;\n}\n .knives-carousel img {\n display: block;\n max-width: none !important;\n width: 100%;\n height: 100%;\n object-fit: cover;\n border: none;\n box-shadow: none;\n border-radius: 0;\n }\n\n .knives-carousel .carousel-slides {\n display: flex;\n transition: transform 0.8s cubic-bezier(0.65, 0, 0.35, 1);\n width: 400%;\n height: 100%;\n }\n\n .knives-carousel .carousel-slide {\n width: 25%;\n height: 100%;\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n overflow: hidden;\n }\n\n .knives-carousel .slide-media {\n position: absolute;\n inset: 0;\n overflow: hidden;\n z-index: 0;\n }\n\n .knives-carousel .slide-bg-image {\n width: 100%;\n height: 100%;\n object-fit: cover;\n object-position: center;\n transform: scale(1.15);\n transition: transform 12s ease-out;\n }\n\n .knives-carousel .carousel-slide:first-child .slide-bg-image {\n loading: eager;\n fetchpriority: high;\n }\n\n .knives-carousel .carousel-slide.active .slide-bg-image {\n transform: scale(1) translateY(-2%);\n }\n\n .knives-carousel .slide-overlay {\n position: absolute;\n inset: 0;\n background: var(--overlay-black);\n z-index: 1;\n }\n\n .knives-carousel .slide-content {\n position: relative;\n z-index: 2;\n text-align: left;\n max-width: 650px;\n padding: 0 60px;\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n gap: 15px;\n margin-left: 100px;\n }\n\n .knives-carousel .carousel-slide.active .slide-content>* {\n animation: fadeInUp 0.6s ease-out forwards;\n opacity: 0;\n }\n\n .knives-carousel .carousel-slide.active .slide-title {\n animation-delay: 0.1s;\n }\n\n .knives-carousel .carousel-slide.active .slide-subtitle {\n animation-delay: 0.2s;\n }\n\n .knives-carousel .carousel-slide.active {\n animation-delay: 0.3s;\n }\n\n .knives-carousel .carousel-slide.active .slide-description {\n animation-delay: 0.4s;\n }\n\n .knives-carousel .slide-title {\n font-family: var(--font-family) !important;\n font-size: clamp(3.5rem, 6vw, 5rem) !important;\n color: white !important;\n margin: 0 !important;\n font-weight: 400 !important;\n letter-spacing: 2px;\n text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);\n line-height: 0.9 !important;\n text-decoration: none !important;\n }\n\n .knives-carousel .slide-subtitle {\n font-family: var(--font-family) !important;\n color: var(--secondary-orange) !important;\n font-size: clamp(1rem, 1.8vw, 1.3rem) !important;\n font-weight: 400 !important;\n margin: -5px 0 15px 0 !important;\n text-transform: uppercase;\n letter-spacing: 3px;\n opacity: 0.9;\n text-decoration: none !important;\n }\n\n .knives-carousel .slide-price {\n font-family: var(--font-family) !important;\n color: var(--secondary-orange) !important;\n font-size: clamp(2rem, 3.5vw, 2.8rem) !important;\n font-weight: 600 !important;\n margin: 5px 0 25px 0 !important;\n letter-spacing: 1px;\n text-shadow: 0 3px 12px rgba(250, 163, 7, 0.4);\n position: relative;\n display: inline-block;\n }\n\n .knives-carousel .slide-price::before {\n content: '\u20ac';\n font-size: 0.75em;\n margin-right: 6px;\n opacity: 0.9;\n font-weight: 500;\n }\n\n .knives-carousel .slide-price::after {\n content: '';\n position: absolute;\n bottom: -8px;\n left: 0;\n width: 100%;\n height: 2px;\n background: linear-gradient(90deg, var(--secondary-orange), var(--accent-orange));\n transform: scaleX(0);\n transform-origin: left;\n transition: transform 0.6s ease;\n }\n\n .knives-carousel .carousel-slide.active .slide-price::after {\n transform: scaleX(1);\n animation-delay: 0.25s;\n }\n\n .knives-carousel .slide-description {\n font-size: clamp(1rem, 1.4vw, 1.1rem) !important;\n line-height: 1.8 !important;\n color: rgba(255, 255, 255, 0.85) !important;\n margin: 0 !important;\n max-width: 500px;\n overflow: hidden;\n text-overflow: ellipsis;\n font-family: var(--font-family) !important;\n }\n\n .knives-carousel .carousel-nav {\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n background: rgba(255, 255, 255, 0.08) !important;\n border: 1px solid rgba(255, 255, 255, 0.2) !important;\n color: white !important;\n width: 50px !important;\n height: 50px !important;\n border-radius: 50% !important;\n cursor: pointer;\n transition: all 0.3s ease !important;\n z-index: 3;\n display: flex;\n align-items: center;\n justify-content: center;\n backdrop-filter: blur(10px);\n opacity: 0.6;\n appearance: none !important;\n outline: none !important;\n text-decoration: none !important;\n }\n\n .knives-carousel .carousel-nav:hover {\n opacity: 1 !important;\n background: rgba(255, 255, 255, 0.12) !important;\n border-color: rgba(255, 255, 255, 0.3) !important;\n }\n\n .knives-carousel .carousel-nav::before {\n content: '';\n width: 10px;\n height: 10px;\n border-top: 2px solid white;\n border-right: 2px solid white;\n }\n\n .knives-carousel .carousel-prev {\n left: 30px;\n }\n\n .knives-carousel .carousel-prev::before {\n transform: rotate(-135deg) translateX(2px);\n }\n\n .knives-carousel .carousel-next {\n right: 30px;\n }\n\n .knives-carousel .carousel-next::before {\n transform: rotate(45deg) translateX(-2px);\n }\n\n .knives-carousel .carousel-pagination {\n position: absolute;\n bottom: 40px;\n left: 50%;\n transform: translateX(-50%);\n display: flex;\n gap: 12px;\n z-index: 3;\n }\n\n .knives-carousel .pagination-dot {\n width: 10px !important;\n height: 10px !important;\n border-radius: 50% !important;\n background: rgba(255, 255, 255, 0.3) !important;\n border: none !important;\n cursor: pointer;\n transition: all 0.4s ease !important;\n position: relative;\n appearance: none !important;\n outline: none !important;\n }\n\n .knives-carousel .pagination-dot:hover {\n background: rgba(255, 255, 255, 0.5) !important;\n }\n\n .knives-carousel .pagination-dot.active {\n background: white !important;\n width: 30px !important;\n border-radius: 15px !important;\n }\n\n .knives-carousel .swipe-hint {\n position: absolute;\n bottom: 100px;\n left: 50%;\n transform: translateX(-50%);\n color: rgba(255, 255, 255, 0.5);\n font-size: 0.85rem;\n text-transform: uppercase;\n letter-spacing: 2px;\n display: none;\n animation: pulse 2s ease infinite;\n font-family: var(--font-family);\n }\n\n @keyframes pulse {\n\n 0%,\n 100% {\n opacity: 0.5;\n }\n\n 50% {\n opacity: 0.8;\n }\n }\n\n @media (max-width: 768px) {\n .knives-carousel a.create-btn {\n \/* Apparence g\u00e9n\u00e9rale et 3D *\/\n position: relative;\n background: linear-gradient(135deg, #B8020A 0%, #9D0208 50%, #7A0106 100%);\n border: none;\n border-radius: 6px;\n padding: 14px 10px;\n overflow: hidden;\n width: 60%;\n margin: 10px 0px;\n box-shadow: \n inset 0 1px 0 rgba(255, 255, 255, 0.1), \n inset 0 -1px 0 rgba(0, 0, 0, 0.3), \n 0 4px 0 #4D0103, \n 0 8px 25px rgba(0, 0, 0, 0.4);\n transition: all 0.3s ease;\n\n \/* Style du texte pour qu'il soit identique au \"bon\" bouton *\/\n color: #F8F6F3;\n font-family: var(--font-family);\n font-size: 9px;\n font-weight: 600;\n text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);\n text-transform: uppercase; \/* On met en majuscules comme le bon bouton *\/\n letter-spacing: 2px; \/* On ajoute l'espacement comme le bon bouton *\/\n }\n .knives-carousel {\n height: 65vh !important;\n min-height: 65vh !important;\n }\n\n .knives-carousel .slide-content {\n padding: 0 30px;\n margin-left: 0;\n max-width: 100%;\n gap: 30px;\n align-items: center;\n text-align: center; \/* Centre aussi le texte des titres *\/\n }\n \n .knives-carousel .slide-title {\n font-size: 2.2rem !important;\n }\n\n .knives-carousel .slide-subtitle {\n font-size: 0.9rem !important;\n margin-top: -17px!important;\n }\n\n .knives-carousel .slide-price {\n font-size: 1.6rem !important;\n margin: 0 0 15px 0 !important;\n }\n\n .knives-carousel .slide-description {\n font-size: 0.9rem !important;\n -webkit-line-clamp: 2;\n width: 100%; \/* Elle prend toute la largeur disponible *\/\n text-align: center; \/* Et son texte est align\u00e9 \u00e0 gauche pour la lisibilit\u00e9 *\/\n }\n\n .knives-carousel .carousel-nav {\n display: none;\n }\n\n .knives-carousel .swipe-hint {\n display: block;\n bottom: 20px;\n }\n\n .knives-carousel .carousel-pagination {\n bottom: 20px;\n }\n .knives-carousel .slide-title { order: 1; }\n .knives-carousel .slide-subtitle { order: 2; }\n .knives-carousel .slide-price { order: 3; }\n .knives-carousel .slide-description { order: 4; }\n .knives-carousel a.create-btn { order: 5; } \/* On met le bouton en dernier *\/\n\n }\n\n @media (min-width: 1024px) {\n .knives-carousel .slide-bg-image {\n object-position: center 40%;\n }\n }\n \n \/* ===============================================\n STYLES DU FICHIER 2 (HISTOIRE & PORTRAIT)\n =============================================== *\/\n .PresentationDragonnier {\n --primary-red: #9D0208;\n --secondary-orange: #FAA307;\n --accent-orange: #E85D04;\n --dark-text: #121212;\n --light-bg: #F5F5F5;\n --font-family: 'Immortal', serif;\n \n --shadow-light: 0 8px 30px rgba(18, 18, 18, 0.08);\n --shadow-medium: 0 20px 60px rgba(157, 2, 8, 0.12);\n --shadow-heavy: 0 35px 90px rgba(157, 2, 8, 0.18);\n \n --border-radius: 16px;\n --transition-smooth: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);\n --transition-bounce: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);\n box-sizing: border-box;\n background: var(--light-bg);\n margin: 0;\n font-family: var(--font-family);\n overflow-x: hidden;\n }\n\n .section-histoire {\n background: \n radial-gradient(circle at 25% 25%, rgba(250, 163, 7, 0.008) 0%, transparent 50%),\n radial-gradient(circle at 75% 75%, rgba(157, 2, 8, 0.005) 0%, transparent 50%),\n linear-gradient(45deg, transparent 25%, rgba(18, 18, 18, 0.003) 25.5%, transparent 26%),\n var(--light-bg);\n padding: 80px 0 40px 0; \/* R\u00e9duit le padding bottom *\/\n position: relative;\n overflow: hidden;\n }\n \n .section-histoire::before {\n content: '';\n position: absolute;\n top: 60px;\n right: 8%;\n width: 80px;\n height: 120px;\n background-image: url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' viewBox='0 0 80 120' fill='none'%3E%3Cpath d='M40 10 C45 15, 50 25, 45 35 C42 45, 38 55, 40 65 C42 75, 45 85, 40 95 C35 105, 30 110, 40 115' stroke='%23121212' stroke-width='0.8' opacity='0.08' fill='none'\/%3E%3Cpath d='M35 20 C40 25, 38 30, 35 35 M45 30 C48 35, 46 40, 43 45' stroke='%23121212' stroke-width='0.6' opacity='0.06' fill='none'\/%3E%3C\/svg%3E\");\n background-repeat: no-repeat;\n background-size: contain;\n opacity: 0.4;\n z-index: 0;\n animation: breathe 6s ease-in-out infinite;\n }\n \n .PresentationDragonnier .container {\n max-width: 1200px;\n margin: 0 auto;\n padding: 0 40px;\n position: relative;\n z-index: 1;\n }\n \n .histoire-grid {\n display: grid;\n grid-template-columns: 1fr 1.3fr;\n gap: 80px;\n align-items: center;\n }\n \n .histoire-content {\n opacity: 0;\n transform: translateY(60px);\n transition: var(--transition-smooth);\n position: relative;\n }\n \n .histoire-title {\n font-family: var(--font-family);\n color: var(--primary-red);\n font-size: clamp(2.5rem, 4vw, 3.5rem);\n margin: 0 0 40px 0;\n font-weight: 400;\n letter-spacing: 1px;\n position: relative;\n cursor: default;\n transition: var(--transition-smooth);\n }\n \n .histoire-title:hover {\n transform: translateY(-3px);\n text-shadow: 0 4px 8px rgba(157, 2, 8, 0.2);\n }\n \n .histoire-title::after {\n content: '';\n position: absolute;\n bottom: -15px;\n left: 0;\n width: 0;\n height: 3px;\n background: linear-gradient(90deg, var(--secondary-orange) 0%, var(--accent-orange) 100%);\n transition: width 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.5s;\n }\n \n .histoire-text {\n font-family: var(--font-family);\n color: var(--dark-text);\n font-size: 1.1rem;\n line-height: 1.7;\n position: relative;\n }\n \n .histoire-text::before {\n content: '';\n position: absolute;\n top: -20px;\n left: -40px;\n width: 25px;\n height: calc(100% + 120px);\n background-image: url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' viewBox='0 0 25 400' fill='none'%3E%3Cpath d='M8 10 C12 20, 15 40, 12 80 C10 120, 8 160, 12 200 C15 240, 12 280, 8 320 C10 340, 12 360, 15 380' stroke='%23FAA307' stroke-width='2' opacity='0.6' fill='none'\/%3E%3Ccircle cx='12' cy='50' r='2' fill='%23E85D04' opacity='0.4'\/%3E%3Ccircle cx='10' cy='150' r='1.5' fill='%23FAA307' opacity='0.5'\/%3E%3Ccircle cx='13' cy='250' r='2' fill='%23E85D04' opacity='0.3'\/%3E%3Ccircle cx='11' cy='320' r='1.5' fill='%23FAA307' opacity='0.4'\/%3E%3C\/svg%3E\");\n background-repeat: no-repeat;\n background-size: contain;\n opacity: 0;\n transition: opacity 0.8s ease 0.6s;\n animation: breathe 4s ease-in-out infinite 2s;\n }\n \n .histoire-text p {\n margin: 0 0 20px 0;\n opacity: 0;\n transform: translateY(30px);\n transition: var(--transition-smooth);\n }\n \n .histoire-text .intro {\n color: var(--primary-red);\n font-size: 1.2rem;\n font-weight: 500;\n margin-bottom: 30px;\n position: relative;\n padding-left: 25px;\n }\n \n .histoire-text .closing {\n font-style: italic;\n color: var(--accent-orange);\n margin-top: 30px;\n border-left: 3px solid var(--secondary-orange);\n padding-left: 20px;\n background: linear-gradient(90deg, rgba(250, 163, 7, 0.05) 0%, transparent 100%);\n border-radius: 0 8px 8px 0;\n padding: 15px 20px;\n }\n \n .histoire-media {\n opacity: 0;\n transform: translateY(80px);\n transition: all 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);\n position: relative;\n }\n \n .histoire-media::before {\n content: '';\n position: absolute;\n top: -15px;\n right: -15px;\n width: 30px;\n height: 30px;\n background-image: url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' viewBox='0 0 30 30' fill='none'%3E%3Cpath d='M5 5 L25 5 L25 25' stroke='%23FAA307' stroke-width='2' opacity='0.6' fill='none'\/%3E%3Ccircle cx='20' cy='10' r='1.5' fill='%23E85D04' opacity='0.8'\/%3E%3C\/svg%3E\");\n background-repeat: no-repeat;\n background-size: contain;\n opacity: 0;\n transition: opacity 0.6s ease 1.6s;\n z-index: 2;\n }\n \n .media-wrapper {\n width: 100%;\n max-width: 600px;\n border-radius: var(--border-radius);\n overflow: hidden;\n margin: 0 auto;\n position: relative;\n background: var(--dark-text);\n box-shadow: \n var(--shadow-medium),\n var(--shadow-light),\n 0 2px 8px rgba(250, 163, 7, 0.08),\n inset 0 0 0 1px rgba(250, 163, 7, 0.1);\n border: 1px solid rgba(250, 163, 7, 0.2);\n transition: var(--transition-smooth);\n transform: perspective(1200px) rotateY(-2deg) rotateX(1deg);\n }\n \n .media-wrapper:hover {\n transform: perspective(1200px) rotateY(0deg) rotateX(0deg) translateY(-12px);\n box-shadow: \n var(--shadow-heavy),\n 0 15px 50px rgba(18, 18, 18, 0.2),\n 0 5px 18px rgba(250, 163, 7, 0.12),\n inset 0 0 0 1px rgba(250, 163, 7, 0.15);\n border-color: rgba(250, 163, 7, 0.3);\n }\n \n .media-wrapper iframe {\n width: 100%;\n height: 315px;\n display: block;\n border-radius: calc(var(--border-radius) - 1px);\n transition: transform 0.4s ease;\n }\n \n .media-wrapper:hover iframe {\n transform: scale(1.02);\n }\n \n .signature-artisan {\n text-align: center;\n margin-top: 60px;\n opacity: 0;\n transform: translateY(30px);\n transition: var(--transition-smooth);\n }\n \n .signature-artisan p {\n font-family: var(--font-family);\n font-style: italic;\n font-size: 1rem;\n color: var(--accent-orange);\n margin: 0;\n position: relative;\n padding: 15px 60px;\n background: linear-gradient(45deg, transparent 30%, rgba(250, 163, 7, 0.08) 50%, transparent 70%);\n background-size: 200% 200%;\n border-radius: 25px;\n animation: shimmer 4s ease-in-out infinite;\n }\n \n .signature-artisan p::before,\n .signature-artisan p::after {\n content: '\u2014';\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n color: var(--secondary-orange);\n opacity: 0.6;\n font-size: 1.2rem;\n }\n \n .signature-artisan p::before {\n left: 20px;\n }\n \n .signature-artisan p::after {\n right: 20px;\n }\n \n .transition-ornement {\n height: 150px; \/* R\u00e9duit de 300px \u00e0 150px *\/\n position: relative;\n background: var(--light-bg); \/* Fond uniforme sans d\u00e9grad\u00e9s orange *\/\n overflow: hidden;\n display: flex;\n align-items: center;\n justify-content: center;\n margin: -10px 0; \/* Chevauchement l\u00e9ger *\/\n width: 100vw; \/* Largeur pleine viewport *\/\n margin-left: calc(-50vw + 50%); \/* Centrage pour sortir du container *\/\n }\n \n .transition-ornement::before {\n content: '';\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 100%; \/* Largeur compl\u00e8te au lieu de 400px *\/\n height: 120px; \/* R\u00e9duit de 180px *\/\n background-image: url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' viewBox='0 0 1200 120' fill='none'%3E%3C!-- Ligne centrale principale rouge --%3E%3Cpath d='M0 60 L1200 60' stroke='%239D0208' stroke-width='2' opacity='0.6' fill='none'\/%3E%3C!-- Ligne ornement\u00e9e m\u00e9di\u00e9vale --%3E%3Cpath d='M50 60 C150 50, 250 45, 350 55 C450 65, 550 75, 650 60 C750 45, 850 55, 950 60 C1050 65, 1150 55, 1150 60' stroke='%23FAA307' stroke-width='3' opacity='0.8' fill='none'\/%3E%3C!-- \u00c9p\u00e9es m\u00e9di\u00e9vales stylis\u00e9es --%3E%3Cg transform='translate(150,30)'%3E%3Cpath d='M0 45 L0 15 M-3 18 L3 18 M-5 15 L5 15' stroke='%239D0208' stroke-width='2.5' opacity='0.7' fill='none'\/%3E%3Crect x='-1' y='15' width='2' height='25' fill='%239D0208' opacity='0.6'\/%3E%3C\/g%3E%3Cg transform='translate(450,25)'%3E%3Cpath d='M0 50 L0 20 M-4 23 L4 23 M-6 20 L6 20' stroke='%239D0208' stroke-width='2.5' opacity='0.7' fill='none'\/%3E%3Crect x='-1' y='20' width='2' height='30' fill='%239D0208' opacity='0.6'\/%3E%3C\/g%3E%3Cg transform='translate(750,30)'%3E%3Cpath d='M0 45 L0 15 M-3 18 L3 18 M-5 15 L5 15' stroke='%239D0208' stroke-width='2.5' opacity='0.7' fill='none'\/%3E%3Crect x='-1' y='15' width='2' height='25' fill='%239D0208' opacity='0.6'\/%3E%3C\/g%3E%3Cg transform='translate(1050,25)'%3E%3Cpath d='M0 50 L0 20 M-4 23 L4 23 M-6 20 L6 20' stroke='%239D0208' stroke-width='2.5' opacity='0.7' fill='none'\/%3E%3Crect x='-1' y='20' width='2' height='30' fill='%239D0208' opacity='0.6'\/%3E%3C\/g%3E%3C!-- Ornements de forge --%3E%3Ccircle cx='100' cy='60' r='3' fill='%239D0208' opacity='0.8'\/%3E%3Ccircle cx='300' cy='60' r='4' fill='%23FAA307' opacity='0.9'\/%3E%3Ccircle cx='500' cy='60' r='3' fill='%239D0208' opacity='0.8'\/%3E%3Ccircle cx='700' cy='60' r='4' fill='%23FAA307' opacity='0.9'\/%3E%3Ccircle cx='900' cy='60' r='3' fill='%239D0208' opacity='0.8'\/%3E%3Ccircle cx='1100' cy='60' r='4' fill='%23FAA307' opacity='0.9'\/%3E%3C!-- Motifs h\u00e9raldiques m\u00e9di\u00e9vaux --%3E%3Cg transform='translate(200,45)'%3E%3Cpath d='M0 0 C5 5, 10 5, 15 0 C10 10, 5 10, 0 0' fill='%239D0208' opacity='0.5'\/%3E%3C\/g%3E%3Cg transform='translate(400,40)'%3E%3Cpath d='M0 0 C6 6, 12 6, 18 0 C12 15, 6 15, 0 0' fill='%23FAA307' opacity='0.6'\/%3E%3C\/g%3E%3Cg transform='translate(600,45)'%3E%3Cpath d='M0 0 C5 5, 10 5, 15 0 C10 10, 5 10, 0 0' fill='%239D0208' opacity='0.5'\/%3E%3C\/g%3E%3Cg transform='translate(800,40)'%3E%3Cpath d='M0 0 C6 6, 12 6, 18 0 C12 15, 6 15, 0 0' fill='%23FAA307' opacity='0.6'\/%3E%3C\/g%3E%3Cg transform='translate(1000,45)'%3E%3Cpath d='M0 0 C5 5, 10 5, 15 0 C10 10, 5 10, 0 0' fill='%239D0208' opacity='0.5'\/%3E%3C\/g%3E%3C!-- Filigranes m\u00e9di\u00e9vaux --%3E%3Cpath d='M80 40 C85 35, 90 40, 95 35 C100 40, 95 45, 90 40 C85 45, 80 40, 85 35' stroke='%239D0208' stroke-width='1.5' opacity='0.4' fill='none'\/%3E%3Cpath d='M280 80 C285 75, 290 80, 295 75 C300 80, 295 85, 290 80 C285 85, 280 80, 285 75' stroke='%23FAA307' stroke-width='1.5' opacity='0.5' fill='none'\/%3E%3Cpath d='M480 40 C485 35, 490 40, 495 35 C500 40, 495 45, 490 40 C485 45, 480 40, 485 35' stroke='%239D0208' stroke-width='1.5' opacity='0.4' fill='none'\/%3E%3Cpath d='M680 80 C685 75, 690 80, 695 75 C700 80, 695 85, 690 80 C685 85, 680 80, 685 75' stroke='%23FAA307' stroke-width='1.5' opacity='0.5' fill='none'\/%3E%3Cpath d='M880 40 C885 35, 890 40, 895 35 C900 40, 895 45, 890 40 C885 45, 880 40, 885 35' stroke='%239D0208' stroke-width='1.5' opacity='0.4' fill='none'\/%3E%3Cpath d='M1080 80 C1085 75, 1090 80, 1095 75 C1100 80, 1095 85, 1090 80 C1085 85, 1080 80, 1085 75' stroke='%23FAA307' stroke-width='1.5' opacity='0.5' fill='none'\/%3E%3C!-- Bordures d\u00e9coratives --%3E%3Cpath d='M50 30 L1150 30 M50 90 L1150 90' stroke='%239D0208' stroke-width='1' opacity='0.3' fill='none'\/%3E%3C!-- Fleurons aux extr\u00e9mit\u00e9s --%3E%3Cg transform='translate(30,45)'%3E%3Cpath d='M0 15 C5 10, 10 10, 15 15 C10 20, 5 20, 0 15 M15 0 C20 5, 20 10, 15 15 C10 10, 10 5, 15 0 M15 15 C20 20, 20 25, 15 30 C10 25, 10 20, 15 15 M0 15 C-5 10, -5 5, 0 0 C5 5, 5 10, 0 15 M0 15 C-5 20, -5 25, 0 30 C5 25, 5 20, 0 15' stroke='%239D0208' stroke-width='2' opacity='0.6' fill='none'\/%3E%3C\/g%3E%3Cg transform='translate(1155,45)'%3E%3Cpath d='M0 15 C5 10, 10 10, 15 15 C10 20, 5 20, 0 15 M15 0 C20 5, 20 10, 15 15 C10 10, 10 5, 15 0 M15 15 C20 20, 20 25, 15 30 C10 25, 10 20, 15 15 M0 15 C-5 10, -5 5, 0 0 C5 5, 5 10, 0 15 M0 15 C-5 20, -5 25, 0 30 C5 25, 5 20, 0 15' stroke='%239D0208' stroke-width='2' opacity='0.6' fill='none'\/%3E%3C\/g%3E%3C\/svg%3E\");\n background-repeat: no-repeat;\n background-size: cover; \/* Cover pour s'adapter \u00e0 toute la largeur *\/\n background-position: center;\n opacity: 0;\n animation: transitionFadeIn 1.5s ease-out 0.3s forwards;\n }\n \n .transition-ornement::after {\n content: '';\n position: absolute;\n top: 50%;\n left: 8%;\n transform: translateY(-50%);\n width: 60px; \/* R\u00e9duit de 80px *\/\n height: 60px;\n background-image: url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' viewBox='0 0 60 60' fill='none'%3E%3Cpath d='M30 12 C36 18, 42 24, 36 34 C30 44, 24 40, 30 34 C36 28, 30 24, 30 18' stroke='%23FAA307' stroke-width='2.5' opacity='0.5' fill='none'\/%3E%3Ccircle cx='30' cy='30' r='3' fill='%23E85D04' opacity='0.7'\/%3E%3C\/svg%3E\");\n background-repeat: no-repeat;\n background-size: contain;\n opacity: 0;\n animation: transitionSlideLeft 1.2s ease-out 0.7s forwards;\n }\n \n .transition-ligne-droite {\n position: absolute;\n top: 50%;\n right: 8%;\n transform: translateY(-50%) scaleX(-1);\n width: 60px;\n height: 60px;\n background-image: url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' viewBox='0 0 60 60' fill='none'%3E%3Cpath d='M30 12 C36 18, 42 24, 36 34 C30 44, 24 40, 30 34 C36 28, 30 24, 30 18' stroke='%23FAA307' stroke-width='2.5' opacity='0.5' fill='none'\/%3E%3Ccircle cx='30' cy='30' r='3' fill='%23E85D04' opacity='0.7'\/%3E%3C\/svg%3E\");\n background-repeat: no-repeat;\n background-size: contain;\n opacity: 0;\n animation: transitionSlideRight 1.2s ease-out 0.9s forwards;\n }\n \n .section-portrait {\n background: \n radial-gradient(circle at 15% 85%, rgba(250, 163, 7, 0.006) 0%, transparent 40%),\n radial-gradient(circle at 85% 15%, rgba(157, 2, 8, 0.004) 0%, transparent 50%),\n linear-gradient(135deg, transparent 30%, rgba(18, 18, 18, 0.002) 30.5%, transparent 31%),\n var(--light-bg);\n padding: 60px 0 120px 0; \/* Padding top r\u00e9duit *\/\n position: relative;\n overflow: hidden;\n }\n \n .section-portrait::before {\n content: '';\n position: absolute;\n top: 80px;\n left: 5%;\n width: 60px;\n height: 140px;\n background-image: url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' viewBox='0 0 60 140' fill='none'%3E%3Cpath d='M25 15 C30 25, 35 45, 30 65 C28 85, 25 105, 30 125 C32 135, 28 140, 25 130' stroke='%23FAA307' stroke-width='1.2' opacity='0.08' fill='none'\/%3E%3Ccircle cx='28' cy='40' r='1.5' fill='%23E85D04' opacity='0.06'\/%3E%3C\/svg%3E\");\n background-repeat: no-repeat;\n background-size: contain;\n opacity: 0.3;\n z-index: 0;\n animation: breathe 5s ease-in-out infinite 1s;\n }\n \n .PresentationDragonnier .section-title {\n text-align: center;\n margin-bottom: 80px;\n opacity: 0;\n transform: translateY(50px);\n transition: var(--transition-smooth);\n position: relative;\n z-index: 1;\n }\n \n .PresentationDragonnier .section-title h2 {\n font-family: var(--font-family);\n color: var(--primary-red);\n font-size: clamp(2.8rem, 5vw, 4rem);\n margin: 0;\n font-weight: 400;\n letter-spacing: 2px;\n position: relative;\n cursor: default;\n transition: var(--transition-smooth);\n }\n \n .PresentationDragonnier .section-title h2:hover {\n transform: translateY(-3px);\n text-shadow: 0 4px 8px rgba(157, 2, 8, 0.2);\n }\n \n .PresentationDragonnier .section-title h2::after {\n content: '';\n position: absolute;\n bottom: -20px;\n left: 50%;\n transform: translateX(-50%);\n width: 0;\n height: 3px;\n background: linear-gradient(90deg, var(--secondary-orange) 0%, var(--accent-orange) 100%);\n transition: width 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.4s;\n }\n \n .portrait-grid {\n display: grid;\n grid-template-columns: 1.2fr 1fr;\n gap: 100px;\n align-items: flex-start;\n }\n \n .portrait-photo {\n opacity: 0;\n transform: translateY(80px);\n transition: all 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);\n position: relative;\n }\n \n .portrait-photo::before {\n content: '';\n position: absolute;\n top: -20px;\n left: -20px;\n width: 40px;\n height: 40px;\n background-image: url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' viewBox='0 0 40 40' fill='none'%3E%3Cpath d='M8 8 L32 8 L32 32' stroke='%23FAA307' stroke-width='2.5' opacity='0.7' fill='none'\/%3E%3Cpath d='M8 8 L8 32 L32 32' stroke='%23E85D04' stroke-width='1.5' opacity='0.4' fill='none'\/%3E%3Ccircle cx='25' cy='15' r='2' fill='%23FAA307' opacity='0.6'\/%3E%3C\/svg%3E\");\n background-repeat: no-repeat;\n background-size: contain;\n opacity: 0;\n transition: opacity 1s ease 1.5s;\n z-index: 2;\n }\n \n .portrait-photo::after {\n content: '';\n position: absolute;\n bottom: -15px;\n right: -15px;\n width: 30px;\n height: 30px;\n background-image: url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' viewBox='0 0 30 30' fill='none'%3E%3Cpath d='M22 22 L8 22 L8 8' stroke='%23E85D04' stroke-width='2' opacity='0.5' fill='none'\/%3E%3Ccircle cx='12' cy='18' r='1.5' fill='%23FAA307' opacity='0.7'\/%3E%3C\/svg%3E\");\n background-repeat: no-repeat;\n background-size: contain;\n opacity: 0;\n transition: opacity 1s ease 1.8s;\n z-index: 2;\n }\n \n .photo-wrapper {\n width: 100%;\n max-width: 500px;\n margin: 0 auto;\n position: relative;\n border-radius: var(--border-radius);\n overflow: hidden;\n background: var(--dark-text);\n box-shadow: \n var(--shadow-medium),\n var(--shadow-light),\n 0 3px 12px rgba(250, 163, 7, 0.08),\n inset 0 0 0 1px rgba(250, 163, 7, 0.1);\n border: 2px solid rgba(250, 163, 7, 0.15);\n transition: var(--transition-smooth);\n transform: perspective(1200px) rotateY(-3deg) rotateX(2deg);\n }\n \n .photo-wrapper:hover {\n transform: perspective(1200px) rotateY(0deg) rotateX(0deg) translateY(-15px);\n box-shadow: \n var(--shadow-heavy),\n 0 20px 60px rgba(18, 18, 18, 0.25),\n 0 8px 25px rgba(250, 163, 7, 0.15),\n inset 0 0 0 1px rgba(250, 163, 7, 0.15);\n border-color: rgba(250, 163, 7, 0.3);\n }\n \n .photo-wrapper img {\n width: 100%;\n height: auto;\n display: block;\n transition: transform 0.5s ease;\n }\n \n .photo-wrapper:hover img {\n transform: scale(1.03);\n }\n \n .photo-signature {\n position: absolute;\n bottom: 20px;\n right: 25px;\n background: linear-gradient(135deg, rgba(250, 163, 7, 0.9) 0%, rgba(232, 93, 4, 0.85) 100%);\n color: var(--light-bg);\n padding: 8px 16px;\n border-radius: 20px;\n font-family: var(--font-family);\n font-size: 0.85rem;\n font-weight: 500;\n letter-spacing: 0.5px;\n opacity: 0;\n transform: translateY(20px);\n transition: var(--transition-bounce) 1.6s;\n backdrop-filter: blur(8px);\n border: 1px solid rgba(255, 255, 255, 0.2);\n }\n \n .portrait-content {\n opacity: 0;\n transform: translateY(100px);\n transition: all 1.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);\n position: relative;\n }\n \n .portrait-content::before {\n content: '';\n position: absolute;\n top: -30px;\n left: -50px;\n width: 30px;\n height: calc(100% + 150px);\n background-image: url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' viewBox='0 0 30 400' fill='none'%3E%3Cpath d='M10 20 C15 40, 18 80, 15 120 C12 160, 10 200, 15 240 C18 280, 15 320, 10 360' stroke='%23FAA307' stroke-width='2.2' opacity='0.5' fill='none'\/%3E%3Ccircle cx='15' cy='80' r='2.5' fill='%23E85D04' opacity='0.4'\/%3E%3Ccircle cx='12' cy='180' r='2' fill='%23FAA307' opacity='0.5'\/%3E%3Ccircle cx='16' cy='280' r='2.5' fill='%23E85D04' opacity='0.3'\/%3E%3C\/svg%3E\");\n background-repeat: no-repeat;\n background-size: contain;\n opacity: 0;\n transition: opacity 1s ease 1s;\n animation: breathe 4s ease-in-out infinite 3s;\n }\n \n .portrait-name {\n margin-bottom: 50px;\n }\n \n .portrait-name h3 {\n font-family: var(--font-family);\n color: var(--secondary-orange);\n font-size: clamp(2.2rem, 3.5vw, 3rem);\n margin: 0 0 8px 0;\n font-weight: 400;\n letter-spacing: 1.5px;\n opacity: 0;\n transform: translateY(40px);\n transition: var(--transition-smooth);\n }\n \n .portrait-name .subtitle {\n font-family: var(--font-family);\n color: var(--accent-orange);\n font-size: 1.3rem;\n font-weight: 500;\n margin: 0;\n opacity: 0;\n transform: translateY(40px);\n transition: var(--transition-smooth);\n position: relative;\n }\n \n .portrait-name .subtitle::after {\n content: '';\n position: absolute;\n bottom: -8px;\n left: 0;\n width: 0;\n height: 2px;\n background: linear-gradient(90deg, var(--accent-orange) 0%, var(--secondary-orange) 100%);\n transition: width 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) 1.2s;\n }\n \n .portrait-text {\n font-family: var(--font-family);\n color: var(--dark-text);\n font-size: 1.1rem;\n line-height: 1.8;\n position: relative;\n }\n \n .portrait-text p {\n margin: 0 0 25px 0;\n opacity: 0;\n transform: translateY(50px);\n transition: var(--transition-smooth);\n }\n \n .portrait-text .intro {\n color: var(--primary-red);\n font-size: 1.25rem;\n font-weight: 500;\n margin-bottom: 35px;\n position: relative;\n padding-left: 25px;\n }\n \n .portrait-text .intro::before {\n content: '\u2766';\n position: absolute;\n left: 0;\n top: 0;\n color: var(--secondary-orange);\n font-size: 1.1rem;\n opacity: 0;\n transition: opacity 0.6s ease 1.8s;\n animation: pulse 2s ease-in-out infinite 4s;\n }\n \n .portrait-text .highlight {\n background: linear-gradient(120deg, rgba(250, 163, 7, 0.08) 0%, rgba(232, 93, 4, 0.05) 100%);\n padding: 25px 30px;\n border-left: 4px solid var(--secondary-orange);\n border-radius: 0 12px 12px 0;\n font-style: italic;\n color: var(--accent-orange);\n margin: 35px 0;\n position: relative;\n overflow: hidden;\n }\n \n .portrait-text .highlight::before {\n content: '';\n position: absolute;\n top: -2px;\n right: -2px;\n bottom: -2px;\n left: -6px;\n background: linear-gradient(120deg, rgba(250, 163, 7, 0.1) 0%, rgba(232, 93, 4, 0.05) 100%);\n border-radius: 0 14px 14px 0;\n z-index: -1;\n opacity: 0;\n transition: opacity 0.6s ease 0.3s;\n }\n \n .portrait-text .highlight::after {\n content: '';\n position: absolute;\n top: 0;\n left: -100%;\n width: 100%;\n height: 100%;\n background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.2) 50%, transparent 100%);\n transition: left 0.8s ease;\n }\n \n .portrait-text .highlight:hover::after {\n left: 100%;\n }\n \n @keyframes breathe {\n 0%, 100% { \n opacity: 0.6; \n transform: scale(1); \n }\n 50% { \n opacity: 0.8; \n transform: scale(1.02); \n }\n }\n \n @keyframes shimmer {\n 0% { \n background-position: -200% 0; \n }\n 100% { \n background-position: 200% 0; \n }\n }\n \n @keyframes transitionFadeIn {\n 0% {\n opacity: 0;\n transform: translate(-50%, -50%) scale(0.8);\n }\n 100% {\n opacity: 1;\n transform: translate(-50%, -50%) scale(1);\n }\n }\n \n @keyframes transitionSlideLeft {\n 0% {\n opacity: 0;\n transform: translateY(-50%) translateX(-60px);\n }\n 100% {\n opacity: 1;\n transform: translateY(-50%) translateX(0);\n }\n }\n \n @keyframes transitionSlideRight {\n 0% {\n opacity: 0;\n transform: translateY(-50%) scaleX(-1) translateX(-60px);\n }\n 100% {\n opacity: 1;\n transform: translateY(-50%) scaleX(-1) translateX(0);\n }\n }\n \n \/* Section Histoire *\/\n .section-histoire.in-view .histoire-content {\n opacity: 1;\n transform: translateY(0);\n transition-delay: 0.2s;\n }\n \n .section-histoire.in-view .histoire-title::after {\n width: 100%;\n }\n \n .section-histoire.in-view .histoire-text::before {\n opacity: 1;\n }\n \n .section-histoire.in-view .histoire-text .intro::before {\n opacity: 1;\n }\n \n .section-histoire.in-view .histoire-text p:nth-child(1) {\n opacity: 1;\n transform: translateY(0);\n transition-delay: 0.6s;\n }\n \n .section-histoire.in-view .histoire-text p:nth-child(2) {\n opacity: 1;\n transform: translateY(0);\n transition-delay: 0.8s;\n }\n \n .section-histoire.in-view .histoire-text p:nth-child(3) {\n opacity: 1;\n transform: translateY(0);\n transition-delay: 1s;\n }\n \n .section-histoire.in-view .histoire-text p:nth-child(4) {\n opacity: 1;\n transform: translateY(0);\n transition-delay: 1.2s;\n }\n \n .section-histoire.in-view .histoire-text p:nth-child(5) {\n opacity: 1;\n transform: translateY(0);\n transition-delay: 1.4s;\n }\n \n .section-histoire.in-view .histoire-media {\n opacity: 1;\n transform: translateY(0);\n transition-delay: 0.4s;\n }\n \n .section-histoire.in-view .histoire-media::before {\n opacity: 1;\n }\n \n .section-histoire.in-view .signature-artisan {\n opacity: 1;\n transform: translateY(0);\n transition-delay: 1.8s;\n }\n \n \/* Section Portrait *\/\n .section-portrait.in-view .section-title {\n opacity: 1;\n transform: translateY(0);\n transition-delay: 0.2s;\n }\n \n .section-portrait.in-view .section-title h2::after {\n width: 80px;\n }\n \n .section-portrait.in-view .portrait-photo {\n opacity: 1;\n transform: translateY(0);\n transition-delay: 0.4s;\n }\n \n .section-portrait.in-view .portrait-photo::before,\n .section-portrait.in-view .portrait-photo::after {\n opacity: 1;\n }\n \n .section-portrait.in-view .photo-signature {\n opacity: 1;\n transform: translateY(0);\n }\n \n .section-portrait.in-view .portrait-content {\n opacity: 1;\n transform: translateY(0);\n transition-delay: 0.6s;\n }\n \n .section-portrait.in-view .portrait-content::before {\n opacity: 1;\n }\n \n .section-portrait.in-view .portrait-name h3 {\n opacity: 1;\n transform: translateY(0);\n transition-delay: 0.8s;\n }\n \n .section-portrait.in-view .portrait-name .subtitle {\n opacity: 1;\n transform: translateY(0);\n transition-delay: 1s;\n }\n \n .section-portrait.in-view .portrait-name .subtitle::after {\n width: 120px;\n }\n \n .section-portrait.in-view .portrait-text .intro::before {\n opacity: 1;\n }\n \n .section-portrait.in-view .portrait-text p:nth-child(1) {\n opacity: 1;\n transform: translateY(0);\n transition-delay: 1.2s;\n }\n \n .section-portrait.in-view .portrait-text p:nth-child(2) {\n opacity: 1;\n transform: translateY(0);\n transition-delay: 1.4s;\n }\n \n .section-portrait.in-view .portrait-text p:nth-child(3) {\n opacity: 1;\n transform: translateY(0);\n transition-delay: 1.6s;\n }\n \n .section-portrait.in-view .portrait-text p:nth-child(4) {\n opacity: 1;\n transform: translateY(0);\n transition-delay: 1.8s;\n }\n \n .section-portrait.in-view .portrait-text .highlight::before {\n opacity: 1;\n }\n \n @media (max-width: 1024px) {\n .section-histoire::before,\n .section-portrait::before {\n display: none;\n }\n \n .histoire-grid,\n .portrait-grid {\n grid-template-columns: 1fr;\n gap: 60px;\n text-align: center;\n }\n \n .portrait-content::before {\n left: -30px;\n width: 25px;\n height: calc(100% + 120px);\n }\n \n .transition-ornement {\n height: 120px;\n }\n \n .transition-ornement::before {\n width: 100%;\n height: 100px;\n background-image: url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' viewBox='0 0 1024 100' fill='none'%3E%3C!-- Ligne centrale rouge --%3E%3Cpath d='M0 50 L1024 50' stroke='%239D0208' stroke-width='2' opacity='0.6' fill='none'\/%3E%3C!-- Ligne ornement\u00e9e --%3E%3Cpath d='M40 50 C140 40, 240 35, 340 45 C440 55, 540 65, 640 50 C740 35, 840 45, 940 50 C980 52, 1000 50, 1024 50' stroke='%23FAA307' stroke-width='3' opacity='0.8' fill='none'\/%3E%3C!-- \u00c9p\u00e9es m\u00e9di\u00e9vales --%3E%3Cg transform='translate(120,25)'%3E%3Cpath d='M0 40 L0 10 M-3 13 L3 13 M-4 10 L4 10' stroke='%239D0208' stroke-width='2' opacity='0.7' fill='none'\/%3E%3Crect x='-1' y='10' width='2' height='25' fill='%239D0208' opacity='0.6'\/%3E%3C\/g%3E%3Cg transform='translate(350,20)'%3E%3Cpath d='M0 45 L0 15 M-3 18 L3 18 M-5 15 L5 15' stroke='%239D0208' stroke-width='2' opacity='0.7' fill='none'\/%3E%3Crect x='-1' y='15' width='2' height='25' fill='%239D0208' opacity='0.6'\/%3E%3C\/g%3E%3Cg transform='translate(580,25)'%3E%3Cpath d='M0 40 L0 10 M-3 13 L3 13 M-4 10 L4 10' stroke='%239D0208' stroke-width='2' opacity='0.7' fill='none'\/%3E%3Crect x='-1' y='10' width='2' height='25' fill='%239D0208' opacity='0.6'\/%3E%3C\/g%3E%3Cg transform='translate(810,20)'%3E%3Cpath d='M0 45 L0 15 M-3 18 L3 18 M-5 15 L5 15' stroke='%239D0208' stroke-width='2' opacity='0.7' fill='none'\/%3E%3Crect x='-1' y='15' width='2' height='25' fill='%239D0208' opacity='0.6'\/%3E%3C\/g%3E%3C!-- Ornements --%3E%3Ccircle cx='85' cy='50' r='3' fill='%239D0208' opacity='0.8'\/%3E%3Ccircle cx='250' cy='50' r='4' fill='%23FAA307' opacity='0.9'\/%3E%3Ccircle cx='450' cy='50' r='3' fill='%239D0208' opacity='0.8'\/%3E%3Ccircle cx='650' cy='50' r='4' fill='%23FAA307' opacity='0.9'\/%3E%3Ccircle cx='850' cy='50' r='3' fill='%239D0208' opacity='0.8'\/%3E%3C!-- Motifs h\u00e9raldiques --%3E%3Cg transform='translate(170,35)'%3E%3Cpath d='M0 0 C4 4, 8 4, 12 0 C8 8, 4 8, 0 0' fill='%239D0208' opacity='0.5'\/%3E%3C\/g%3E%3Cg transform='translate(400,30)'%3E%3Cpath d='M0 0 C5 5, 10 5, 15 0 C10 12, 5 12, 0 0' fill='%23FAA307' opacity='0.6'\/%3E%3C\/g%3E%3Cg transform='translate(700,35)'%3E%3Cpath d='M0 0 C4 4, 8 4, 12 0 C8 8, 4 8, 0 0' fill='%239D0208' opacity='0.5'\/%3E%3C\/g%3E%3C!-- Fleurons aux extr\u00e9mit\u00e9s --%3E%3Cg transform='translate(20,35)'%3E%3Cpath d='M0 10 C3 7, 6 7, 9 10 C6 13, 3 13, 0 10 M9 2 C12 5, 12 8, 9 10 C6 8, 6 5, 9 2 M9 10 C12 13, 12 16, 9 18 C6 16, 6 13, 9 10' stroke='%239D0208' stroke-width='1.5' opacity='0.6' fill='none'\/%3E%3C\/g%3E%3Cg transform='translate(995,35)'%3E%3Cpath d='M0 10 C3 7, 6 7, 9 10 C6 13, 3 13, 0 10 M9 2 C12 5, 12 8, 9 10 C6 8, 6 5, 9 2 M9 10 C12 13, 12 16, 9 18 C6 16, 6 13, 9 10' stroke='%239D0208' stroke-width='1.5' opacity='0.6' fill='none'\/%3E%3C\/g%3E%3C\/svg%3E\");\n }\n \n .transition-ornement::after,\n .transition-ligne-droite {\n width: 50px;\n height: 50px;\n }\n }\n \n @media (max-width: 768px) {\n .PresentationDragonnier .container {\n padding: 0 20px;\n }\n \n .section-histoire,\n .section-portrait {\n padding: 60px 0 80px 0;\n }\n \n .PresentationDragonnier .section-title {\n margin-bottom: 50px;\n }\n \n .PresentationDragonnier .section-title h2 {\n font-size: 2.5rem;\n }\n \n .histoire-grid,\n .portrait-grid {\n gap: 40px;\n }\n \n .histoire-title {\n font-size: 2rem;\n margin-bottom: 25px;\n }\n \n .histoire-text,\n .portrait-text {\n font-size: 1rem;\n }\n \n .histoire-text::before,\n .portrait-content::before {\n display: none;\n }\n \n .histoire-text .intro,\n .portrait-text .intro {\n padding-left: 0;\n font-size: 1.1rem;\n }\n \n .histoire-text .intro::before,\n .portrait-text .intro::before {\n display: none;\n }\n \n .signature-artisan p {\n padding: 12px 40px;\n font-size: 0.9rem;\n }\n \n .signature-artisan p::before,\n .signature-artisan p::after {\n display: none;\n }\n \n .media-wrapper iframe {\n height: 250px;\n }\n \n .portrait-name h3 {\n font-size: 2rem;\n }\n \n .portrait-name .subtitle {\n font-size: 1.1rem;\n }\n \n .portrait-photo::before,\n .portrait-photo::after {\n width: 25px;\n height: 25px;\n }\n \n .photo-wrapper {\n transform: none;\n max-width: 400px;\n }\n \n .photo-wrapper:hover {\n transform: translateY(-8px);\n }\n \n .transition-ornement {\n height: 100px;\n width: 100vw;\n margin-left: calc(-50vw + 50%);\n }\n \n .transition-ornement::before {\n width: 100%;\n height: 80px;\n \/* background-image: url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' viewBox='0 0 768 80' fill='none'%3E%3C!-- Ligne centrale rouge --%3E%3Cpath d='M0 40 L768 40' stroke='%239D0208' stroke-width='2' opacity='0.6' fill='none'\/%3E%3C!-- Ligne ornement\u00e9e --%3E%3Cpath d='M30 40 C130 30, 230 25, 330 35 C430 45, 530 55, 630 40 C680 32, 720 38, 768 40' stroke='%23FAA307' stroke-width='3' opacity='0.8' fill='none'\/%3E%3C!-- \u00c9p\u00e9es m\u00e9di\u00e9vales --%3E%3Cg transform='translate(100,20)'%3E%3Cpath d='M0 35 L0 5 M-2 8 L2 8 M-3 5 L3 5' stroke='%239D0208' stroke-width='2' opacity='0.7' fill='none'\/%3E%3Crect x='-1' y='5' width='2' height='20' fill='%239D0208' opacity='0.6'\/%3E%3C\/g%3E%3Cg transform='translate(280,15)'%3E%3Cpath d='M0 40 L0 10 M-3 13 L3 13 M-4 10 L4 10' stroke='%239D0208' stroke-width='2' opacity='0.7' fill='none'\/%3E%3Crect x='-1' y='10' width='2' height='25' fill='%239D0208' opacity='0.6'\/%3E%3C\/g%3E%3Cg transform='translate(460,20)'%3E%3Cpath d='M0 35 L0 5 M-2 8 L2 8 M-3 5 L3 5' stroke='%239D0208' stroke-width='2' opacity='0.7' fill='none'\/%3E%3Crect x='-1' y='5' width='2' height='20' fill='%239D0208' opacity='0.6'\/%3E%3C\/g%3E%3Cg transform='translate(640,15)'%3E%3Cpath d='M0 40 L0 10 M-3 13 L3 13 M-4 10 L4 10' stroke='%239D0208' stroke-width='2' opacity='0.7' fill='none'\/%3E%3Crect x='-1' y='10' width='2' height='25' fill='%239D0208' opacity='0.6'\/%3E%3C\/g%3E%3C!-- Ornements --%3E%3Ccircle cx='70' cy='40' r='3' fill='%239D0208' opacity='0.8'\/%3E%3Ccircle cx='200' cy='40' r='4' fill='%23FAA307' opacity='0.9'\/%3E%3Ccircle cx='350' cy='40' r='3' fill='%239D0208' opacity='0.8'\/%3E%3Ccircle cx='500' cy='40' r='4' fill='%23FAA307' opacity='0.9'\/%3E%3Ccircle cx='650' cy='40' r='3' fill='%239D0208' opacity='0.8'\/%3E%3C!-- Motifs h\u00e9raldiques --%3E%3Cg transform='translate(140,28)'%3E%3Cpath d='M0 0 C3 3, 6 3, 9 0 C6 6, 3 6, 0 0' fill='%239D0208' opacity='0.5'\/%3E%3C\/g%3E%3Cg transform='translate(320,25)'%3E%3Cpath d='M0 0 C4 4, 8 4, 12 0 C8 10, 4 10, 0 0' fill='%23FAA307' opacity='0.6'\/%3E%3C\/g%3E%3Cg transform='translate(540,28)'%3E%3Cpath d='M0 0 C3 3, 6 3, 9 0 C6 6, 3 6, 0 0' fill='%239D0208' opacity='0.5'\/%3E%3C\/g%3E%3C!-- Fleurons --%3E%3Cg transform='translate(15,28)'%3E%3Cpath d='M0 8 C2 6, 4 6, 6 8 C4 10, 2 10, 0 8 M6 2 C8 4, 8 6, 6 8 C4 6, 4 4, 6 2 M6 8 C8 10, 8 12, 6 14 C4 12, 4 10, 6 8' stroke='%239D0208' stroke-width='1.5' opacity='0.6' fill='none'\/%3E%3C\/g%3E%3Cg transform='translate(747,28)'%3E%3Cpath d='M0 8 C2 6, 4 6, 6 8 C4 10, 2 10, 0 8 M6 2 C8 4, 8 6, 6 8 C4 6, 4 4, 6 2 M6 8 C8 10, 8 12, 6 14 C4 12, 4 10, 6 8' stroke='%239D0208' stroke-width='1.5' opacity='0.6' fill='none'\/%3E%3C\/g%3E%3C\/svg%3E\");%23E85D04' opacity='0.7'\/%3E%3C\/svg%3E\"); *\/\n }\n \n .transition-ornement::after,\n .transition-ligne-droite {\n width: 40px;\n height: 40px;\n left: 5%;\n right: 5%;\n }\n \n .portrait-text .highlight {\n padding: 20px 25px;\n margin: 25px 0;\n }\n }\n \n @media (max-width: 480px) {\n .PresentationDragonnier .container {\n padding: 0 15px;\n }\n \n .histoire-title {\n font-size: 1.8rem;\n }\n \n .PresentationDragonnier .section-title h2 {\n font-size: 2.2rem;\n }\n \n .portrait-name h3 {\n font-size: 1.8rem;\n }\n \n .histoire-text,\n .portrait-text {\n font-size: 0.95rem;\n line-height: 1.6;\n }\n \n .media-wrapper iframe {\n height: 200px;\n }\n \n .photo-wrapper {\n max-width: 320px;\n }\n \n .transition-ornement {\n height: 80px;\n width: 100vw;\n margin-left: calc(-50vw + 50%);\n }\n \n .transition-ornement::before {\n width: 100%;\n height: 60px;\n background-image: url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' viewBox='0 0 480 60' fill='none'%3E%3Cpath d='M0 30 L480 30' stroke='%23FAA307' stroke-width='2' opacity='0.4' fill='none'\/%3E%3Cpath d='M20 30 C90 20, 160 15, 230 25 C300 35, 370 45, 430 30 C450 27, 470 29, 480 30' stroke='%23FAA307' stroke-width='3' opacity='0.7' fill='none'\/%3E%3Ccircle cx='80' cy='30' r='3' fill='%23E85D04' opacity='0.5'\/%3E%3Ccircle cx='160' cy='30' r='4' fill='%23FAA307' opacity='0.7'\/%3E%3Ccircle cx='240' cy='30' r='3' fill='%23E85D04' opacity='0.6'\/%3E%3Ccircle cx='320' cy='30' r='3' fill='%23FAA307' opacity='0.5'\/%3E%3Ccircle cx='400' cy='30' r='4' fill='%23E85D04' opacity='0.7'\/%3E%3C\/svg%3E\");\n }\n }\n \n @media (prefers-reduced-motion: reduce) {\n *,\n *::before,\n *::after {\n animation-duration: 0.01ms !important;\n animation-iteration-count: 1 !important;\n transition-duration: 0.01ms !important;\n }\n }\n \n .media-wrapper,\n .photo-wrapper,\n .histoire-content,\n .portrait-content {\n will-change: transform;\n }\n \n body {\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n text-rendering: optimizeLegibility;\n }\n#creation_anchor{\n scroll-margin-top: 30px; \/* Hauteur du menu sur ORDINATEUR *\/\n}\n#boutique_anchor{\n scroll-margin-top: 30px; \/* \u00c0 remplacer par la hauteur de votre menu sur mobile *\/\n }\n #prestations_anchor{\n scroll-margin-top: 200px; \/* \u00c0 remplacer par la hauteur de votre menu sur mobile *\/\n }\n\/* 2. POUR LES TABLETTES *\/\n@media (max-width: 992px) {\n #creation_anchor {\n scroll-margin-top: 70px; \/* \u00c0 remplacer par la hauteur de votre menu sur tablette *\/\n }\n}\n\n\n\/* 3. POUR LES MOBILES *\/\n@media (max-width: 768px) {\n #creation_anchor {\n scroll-margin-top: 70px; \/* \u00c0 remplacer par la hauteur de votre menu sur mobile *\/\n }\n #boutique_anchor{\n scroll-margin-top: 140px; \/* \u00c0 remplacer par la hauteur de votre menu sur mobile *\/\n }\n #prestations_anchor{\n scroll-margin-top: 100px; \/* \u00c0 remplacer par la hauteur de votre menu sur mobile *\/\n }\n .timeline-header .create-btn {\n margin-top: 30px;\n}\n#bouton-creation-timeline {\n margin-top: 30px !important; \n}\n\n}\n <\/style>\n<\/head>\n\n<body>\n<div class=\"PresentationDragonnier\">\n<div id=\"leo-presentation\"><\/div>\n <section class=\"section-histoire\">\n <div class=\"container\">\n <div class=\"histoire-grid\">\n <div class=\"histoire-content\">\n <h1 class=\"histoire-title\">Une Histoire<\/h1>\n <div class=\"histoire-text\">\n <p class=\"intro\">\n Dans cette maison familiale de P\u00e9zenas, l\u2019artisanat rena\u00eet. De mon arri\u00e8re-grand-p\u00e8re Antoine Jaudon \u00e0 moi, de tapissier sur meuble \u00e0 coutelier.\n <\/p>\n <p>\n Le Dragonnier est un nom qui m\u00eale un genre de plante Dracaena et qui \u00e9voque \u00e0 la fois les mythes et l\u00e9gendes m\u00e9di\u00e9vales, un dompteur de dragon ! \n\n <\/p>\n <p>\n Mon logo est le fruit de ces 2 identit\u00e9s, li\u00e9 \u00e0 la nature et \u00e0 tout ce qu\u2019elle nous offre, ainsi qu\u2019\u00e0 notre histoire et aux l\u00e9gendes de notre enfance.\n <\/p>\n <p class=\"closing\">\n P\u00e9zenas, berceau d'un artisanat familial.\n <\/p>\n <\/div>\n <\/div>\n \n <div class=\"histoire-media\">\n <div class=\"media-wrapper\">\n <iframe\n src=\"\"\n width=\"100%\"\n height=\"315\"\n frameborder=\"0\"\n allow=\"encrypted-media\"\n allowfullscreen\n loading=\"lazy\"\n title=\"Le Dragonnier - Pr\u00e9sentation de l'artisan coutelier\">\n <\/iframe>\n <\/div>\n <\/div>\n <\/div>\n \n <div class=\"signature-artisan\">\n <p>\"Chaque lame raconte une histoire, chaque manche porte une \u00e2me\"<\/p>\n <\/div>\n <\/div>\n <\/section>\n \n <div class=\"transition-ornement\">\n <div class=\"transition-ligne-droite\" aria-hidden=\"true\"><\/div>\n <\/div>\n \n <section class=\"section-portrait\">\n <div class=\"container\">\n <div class=\"section-title\">\n <div id=\"anchor-presentation\"><\/div>\n\n <h2>Qui je suis ?<\/h2>\n <\/div>\n \n <div class=\"portrait-grid\">\n <div class=\"portrait-photo\">\n <div class=\"photo-wrapper\">\n <img loading=\"lazy\" decoding=\"async\" \n src=\"\" \n alt=\"L\u00e9o Jaudon - Artisan coutelier du Dragonnier \u00e0 P\u00e9zenas\"\n width=\"800\"\n height=\"600\"\n loading=\"lazy\"\n \/>\n <div class=\"photo-signature\">Le Dragonnier<\/div>\n <\/div>\n <\/div>\n \n <div class=\"portrait-content\">\n <div class=\"portrait-name\">\n <h3>L\u00e9o Jaudon<\/h3>\n <div class=\"subtitle\">Le Dragonnier<\/div>\n <\/div>\n \n <div class=\"portrait-text\">\n <p class=\"intro\">\n Originaire de Montpellier, je me d\u00e9couvre tr\u00e8s t\u00f4t une passion pour la coutellerie.\n <\/p>\n <p>\nEnfant, je fabrique mes premiers couteaux en taillant du bois, guid\u00e9 par une imagination d\u00e9bordante et le plaisir du travail manuel.\n <\/p>\n <p>\nJe me forme \u00e0 Thiers, au sein de la coutellerie Robert David, et j\u2019obtiens mon CAP Instruments Coupants et de Chirurgie. Je compl\u00e8te ma formation avec un Certificat de Qualification Paritaire de la M\u00e9tallurgie (CQPM) \u2013 Technicien de Fabrication d\u2019Instruments Coupants.\n\n <\/p>\n <p class=\"highlight\">\nAujourd\u2019hui install\u00e9 \u00e0 P\u00e9zenas, je con\u00e7ois mes couteaux, \u00e9tape par \u00e9tape. J\u2019accorde beaucoup d\u2019importance au choix de mes mat\u00e9riaux, et encore plus \u00e0 la qualit\u00e9 de mon travail.\n <\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n <\/div>\n <section class=\"cta-principale\">\n <div class=\"main-container\">\n <div class=\"side-decoration\"><\/div>\n <div class=\"side-decoration-right\"><\/div>\n <div class=\"content\">\n \n\n <div class=\"subtitle\">STAGE DE COUTELLERIE<\/div>\n <h1 class=\"title\">Fabriquez votre propre couteau<\/h1>\n <div class=\"ornament\">\n <div class=\"ornament-center\"><\/div>\n <\/div>\n <p class=\"description\">\n R\u00e9servez un atelier pour monter votre propre couteau pliant Le <span id=\"highlight\"> Sylvarak<\/span><br>\nJe vous propose deux options, la demi-journ\u00e9e ou une journ\u00e9e compl\u00e8te.\n <\/p>\n <div class=\"info-container\">\n <div class=\"info-item info-duration\">\n <span class=\"info-icon\">\u23f1\ufe0f<\/span>\n <span class=\"info-text\">3h ou 1 journ\u00e9e<\/span>\n <\/div>\n <div class=\"info-item info-price\">\n <span class=\"info-icon\">\ud83d\udcb6<\/span>\n <span class=\"info-text\">\u00c0 partir de 85\u20ac<\/span>\n <\/div>\n <div class=\"info-item info-group\">\n <span class=\"info-icon\">\ud83d\udc65<\/span>\n <span class=\"info-text\">Max 5 personnes<\/span>\n <\/div>\n <\/div>\n <div class=\"buttons-container\">\n <a href=\"tel:+33687463258\"class=\"create-btn\">\n <span class=\"create-btn-text\">Appelez moi<\/span>\n <div class=\"create-btn-blade\"><\/div>\n <\/a>\n <a class=\"view-btn\" href=\"https:\/\/ledragonnier.com\/index.php\/portfolio\/\">voir les cr\u00e9ations<\/a>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n\n <div class=\"dragonnierCarrousel\">\n <section class=\"timeline-section\">\n <div class=\"timeline-container\">\n <header class=\"timeline-header\">\n <h2 class=\"timeline-title\">Comment na\u00eet un couteau ?<\/h2>\n <p class=\"timeline-subtitle\">\n D\u00e9couvrez les \u00e9tapes essentielles de cr\u00e9ation d\u2019un couteau artisanal, d\u2019une id\u00e9e \u00e0 un produit.\n\n <\/p>\n <div class=\"boutton-timeline\">\n <button class=\"create-btn\" onclick=\"toggleTimeline()\">\n <span id=\"btn-text\">D\u00e9couvrir les \u00e9tapes<\/span>\n <\/button>\n <\/div>\n <\/header>\n <div class=\"timeline-content\" id=\"timeline-content\">\n <div class=\"timeline\">\n <div class=\"timeline-step\">\n <div class=\"step-marker\"><\/div>\n <div class=\"step-content\">\n <div class=\"step-text\">\n <div class=\"step-badge\">\u00c9TAPE 1<\/div>\n <h3 class=\"step-title\">Design<\/h3>\n <p class=\"step-description\">R\u00e9alisation d\u2019un croquis et de plans techniques, je mets sur papier une id\u00e9e.<\/p>\n <p class=\"step-description\">Choix des mat\u00e9riaux<\/p>\n <\/div>\n <div class=\"step-visual\">\n <div class=\"step-image-container\">\n <img decoding=\"async\" src=\"\" class=\"step-image\" alt=\"Croquis et plans techniques de couteau\" loading=\"lazy\">\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"timeline-step\">\n <div class=\"step-marker\"><\/div>\n <div class=\"step-content\">\n <div class=\"step-text\">\n <div class=\"step-badge\">\u00c9TAPE 2<\/div>\n <h3 class=\"step-title\">Sous-traitance<\/h3>\n <p class=\"step-description\">D\u00e9coupe laser, \u00e9mouture et traitements thermiques fait par une entreprise fran\u00e7aise dans le bassin Thiernois, cela permet une production et une qualit\u00e9 optimale pour toutes les pi\u00e8ces.<\/p>\n <p class=\"step-description\">Pon\u00e7age pour donner volume et forme<\/p>\n <\/div>\n <div class=\"step-visual\">\n <div class=\"step-image-container\">\n <img decoding=\"async\" src=\"\" class=\"step-image\" alt=\"Fa\u00e7onnage de la lame\" loading=\"lazy\">\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"timeline-step\">\n <div class=\"step-marker\"><\/div>\n <div class=\"step-content\">\n <div class=\"step-text\">\n <div class=\"step-badge\">\u00c9TAPE 3<\/div>\n <h3 class=\"step-title\">Production<\/h3>\n <p class=\"step-description\">Pr\u00e9paration des pi\u00e8ces, montage et fa\u00e7onnage, qui me permettent de donner vie au produit.<\/p>\n <\/div>\n <div class=\"step-visual\">\n <div class=\"step-image-container\">\n <img decoding=\"async\" src=\"\" class=\"step-image\" alt=\"Gravure et ornementation\" loading=\"lazy\">\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"timeline-step\">\n <div class=\"step-marker\"><\/div>\n <div class=\"step-content\">\n <div class=\"step-text\">\n <div class=\"step-badge\">\u00c9TAPE 4<\/div>\n <h3 class=\"step-title\">Ornementation<\/h3>\n <p class=\"step-description\">Guillochage, polissage et finitions, c\u2019est l\u00e0 que chaque pi\u00e8ce devient unique.<\/p>\n <p class=\"step-description\">Polissage minutieux de chaque pi\u00e8ce<\/p>\n <\/div>\n <div class=\"step-visual\">\n <div class=\"step-image-container\">\n <img decoding=\"async\" src=\"\" class=\"step-image\" alt=\"Assemblage du couteau\" loading=\"lazy\">\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"timeline-step\">\n <div class=\"step-marker\"><\/div>\n <div class=\"step-content\">\n <div class=\"step-text\">\n <div class=\"step-badge\">\u00c9TAPE 5<\/div>\n <h3 class=\"step-title\">Aff\u00fbtage et Contr\u00f4le<\/h3>\n <p class=\"step-description\">Je finis par affuter les couteaux et je fais un contr\u00f4le qualit\u00e9 pour m\u2019assurer de n\u2019avoir fait aucune erreur.<\/p>\n <\/div>\n <div class=\"step-visual\">\n <div class=\"step-image-container\">\n <img decoding=\"async\" src=\"\" class=\"step-image\" alt=\"Aff\u00fbtage professionnel\" loading=\"lazy\">\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <section class=\"services-section\">\n <div class=\"timeline-container\">\n <header class=\"services-header\">\n <div id=\"prestations_anchor\"><\/div>\n <h2 class=\"services-title\">Nos Services<\/h2>\n <p class=\"services-subtitle\">\n Cr\u00e9ez votre couteau ou confiez-nous l'entretien de vos lames\n <\/p>\n <\/header>\n <div class=\"creation-section\">\n <div class=\"creation-header\">\n <h3 class=\"creation-title\">Atelier Cr\u00e9ation<\/h3>\n <div class=\"creation-subtitle\">Forgez votre premi\u00e8re lame<\/div>\n <\/div>\n <div class=\"formulas-container\">\n <div class=\"formula-block\">\n <div class=\"formula-info\">\n <h4 class=\"formula-name\">Formule 3H<\/h4>\n <div class=\"formula-price\">85\u20ac\/personne<\/div>\n <p class=\"formula-desc\">Montage d'un couteau pliant (manche olivier, sans guillochage)<\/p>\n <ul class=\"formula-details\">\n <li>Assemblage des pi\u00e8ces m\u00e9talliques<\/li>\n <li>Observation du polissage<\/li>\n <li>Maximum 5 personnes<\/li>\n <\/ul>\n <\/div>\n <\/div>\n <div class=\"formula-block featured\">\n <div class=\"formula-badge\">POPULAIRE<\/div>\n <div class=\"formula-info\">\n <h4 class=\"formula-name\">Formule Journ\u00e9e<\/h4>\n <div class=\"formula-price\">300\u20ac\/personne<\/div>\n <p class=\"formula-desc\">Une journ\u00e9e compl\u00e8te avec moi, 9h-18h (ces horaires peuvent \u00eatre am\u00e9nag\u00e9s au-del\u00e0 de 3 personnes)<\/p>\n <ul class=\"formula-details\">\n \n <li>Matin : d\u00e9couverte du guillochage<\/li>\n <li>Choix du manche<\/li>\n <li>Apr\u00e8s-midi : montage de votre couteau et observation du polissage<\/li>\n <li>Maximum 5 personnes<\/li>\n <\/ul>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"creation-cta\">\n <a href=\"tel:+33687463258\" class=\"create-btn\">\n <span class=\"create-btn-text\">Appelez moi<\/span>\n <div class=\"create-btn-blade\"><\/div>\n <\/a>\n <\/div>\n <\/div>\n\n <div class=\"services-separator\"><\/div>\n\n <div class=\"sharpening-section\">\n <div class=\"sharpening-layout\">\n <div class=\"sharpening-content\">\n <div class=\"sharpening-header\">\n <h3 class=\"sharpening-title\">Service d'Aff\u00fbtage<\/h3>\n <div class=\"sharpening-subtitle\">Aiguisage Professionnel<\/div>\n <\/div>\n <div class=\"sharpening-details\">\n <div class=\"specialties-block\">\n <h4 class=\"specialties-title\">Nos Sp\u00e9cialit\u00e9s<\/h4>\n <ul class=\"specialties-list\">\n <li>Couteaux de cuisine<\/li>\n <li>Ciseaux (Bois, Couture, Coiffeur)<\/li>\n <li>Lames de robots Culinaires<\/li>\n <li>Haches et outils de jardin<\/li>\n <li>Tous outils tranchants<\/li>\n <\/ul>\n <\/div>\n <div class=\"pricing-block\">\n <div class=\"price-highlight\">\n <span class=\"price-amount\">5\u20ac<\/span>\n <span class=\"price-unit\">par lame, sur place<\/span>\n <\/div>\n <div class=\"contact-block\">\n <span class=\"contact-text\">Prise de rendez-vous<\/span>\n <a href=\"tel:06 87 46 32 58\" class=\"phone-number\">06 87 46 32 58<\/a>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n \n <\/div>\n <\/div>\n <\/section>\n\n <\/div>\n <div class=\"dragonnierCarrousel\">\n <div class=\"carousel-section-title\">\n <div id=\"boutique_anchor\"><\/div>\n <h1>Boutique<\/h1>\n <\/div>\n\n <div class=\"knives-carousel alignfull\">\n <div id=\"boutique_anchor\"><\/div>\n <div class=\"carousel-slides\" id=\"carouselSlides\">\n <div class=\"carousel-slide\" data-product-id=\"19077\">\n <div class=\"slide-media\">\n <img src=\"\" alt=\"Sylvarak - Couteau pliant artisanal\" class=\"slide-bg-image\" loading=\"eager\" fetchpriority=\"high\" decoding=\"async\">\n <div class=\"slide-overlay\"><\/div>\n <\/div>\n <div class=\"slide-content\">\n <h2 class=\"slide-title\">Sylvarak<\/h2>\n <p class=\"slide-subtitle\">Le couteau pliant<\/p>\n <div class=\"slide-price\"><\/div>\n <a href=\"\" class=\"create-btn\">\n <span class=\"create-btn-text\">Commander Sylvarak<\/span>\n <div class=\"create-btn-blade\"><\/div>\n <\/a>\n <p class=\"slide-description\">\n Sylvarak est un couteau de poche, fin et l\u00e9ger. Il saura vous accompagner sur votre chemin.\n <\/p>\n <\/div>\n <\/div>\n <div class=\"carousel-slide active\" data-product-id=\"19093\">\n <div class=\"slide-media\">\n <img src=\"\" alt=\"Ornak - Couteau de table \u00e9l\u00e9gant\" class=\"slide-bg-image\" loading=\"lazy\" decoding=\"async\">\n <div class=\"slide-overlay\"><\/div>\n <\/div>\n <div class=\"slide-content\">\n <h2 class=\"slide-title\">Ornak<\/h2>\n <p class=\"slide-subtitle\">Le couteau de table<\/p>\n <div class=\"slide-price\"><\/div>\n <a href=\"\" class=\"create-btn\">\n <span class=\"create-btn-text\">Commander Ornak<\/span>\n <div class=\"create-btn-blade\"><\/div>\n <\/a>\n <p class=\"slide-description\">\n \u00e0 partir de 25\u20ac unit\u00e9 - Vendu par 4 ou par 6\n Ornak est un couteau simple, \u00e9pur\u00e9e, qui mettra en valeur votre table pour profiter pleinement de vos repas. \n <\/p>\n <\/div>\n <\/div>\n <div class=\"carousel-slide\" data-product-id=\"19051\">\n <div class=\"slide-media\">\n <img src=\"\" alt=\"Velkaran - Couteau de cuisine professionnel\" class=\"slide-bg-image\" loading=\"lazy\" decoding=\"async\">\n <div class=\"slide-overlay\"><\/div>\n <\/div>\n <div class=\"slide-content\">\n <h2 class=\"slide-title\">Velkaran<\/h2>\n <p class=\"slide-subtitle\">Le couteau de cuisine<\/p>\n <div class=\"slide-price\"><\/div>\n <a href=\"\" class=\"create-btn\">\n <span class=\"create-btn-text\">Commander Velkaran<\/span>\n <div class=\"create-btn-blade\"><\/div>\n <\/a>\n <p class=\"slide-description\">\n Velkaran est le couteau de chef parfait pour cuisiner. Laissez sa ligne majestueuse <br> vous s\u00e9duire.\n <\/p>\n <\/div>\n <\/div>\n <div class=\"carousel-slide\" data-product-id=\"19084\">\n <div class=\"slide-media\">\n <img src=\"\" alt=\"Feranak - Couteau d'office de pr\u00e9cision\" class=\"slide-bg-image\" loading=\"lazy\" decoding=\"async\">\n <div class=\"slide-overlay\"><\/div>\n <\/div>\n <div class=\"slide-content\">\n <h2 class=\"slide-title\">Feranak<\/h2>\n <p class=\"slide-subtitle\">Le couteau d'office<\/p>\n <div class=\"slide-price\"><\/div>\n <a href=\"https:\/\/ledragonnier.com\/index.php\/produit\/feranak-le-couteau-doffice\/\" class=\"create-btn\">\n <span class=\"create-btn-text\">Commander Feranak<\/span>\n <div class=\"create-btn-blade\"><\/div>\n <\/a>\n <p class=\"slide-description\">\n Feranak est l\u00e0 pour vous accompagner aux fourneaux. Petit et polyvalent, il est parfait en compl\u00e9ment d\u2019un bon couteau de chef.\n <\/p>\n <\/div>\n <\/div>\n \n <\/div>\n <button class=\"carousel-nav carousel-prev\" onclick=\"dragonnierCarousel.changeSlide(-1)\" aria-label=\"Slide pr\u00e9c\u00e9dent\"><\/button>\n <button class=\"carousel-nav carousel-next\" onclick=\"dragonnierCarousel.changeSlide(1)\" aria-label=\"Slide suivant\"><\/button>\n <div class=\"carousel-pagination\">\n <button class=\"pagination-dot active\" onclick=\"dragonnierCarousel.goToSlide(0)\" aria-label=\"Ornak\"><\/button>\n <button class=\"pagination-dot\" onclick=\"dragonnierCarousel.goToSlide(1)\" aria-label=\"Sylvarak\"><\/button>\n <button class=\"pagination-dot\" onclick=\"dragonnierCarousel.goToSlide(2)\" aria-label=\"Feranak\"><\/button>\n <button class=\"pagination-dot\" onclick=\"dragonnierCarousel.goToSlide(3)\" aria-label=\"Velkaran\"><\/button>\n <\/div>\n <div class=\"swipe-hint\">\u2190 Glissez \u2192<\/div>\n<\/div>\n <\/div>\n <div id=\"creation_anchor\"><\/div>\n <div class=\"dragonnierPortfolio\">\n <section>\n \n <div class=\"section-title\">\n <h1 class=\"h1-title\">Mes Cr\u00e9ations<\/h1>\n <\/div>\n <div class=\"alternating-section\">\n <img decoding=\"async\" src=\"\" alt=\"Cr\u00e9ations uniques Le Dragonnier\" class=\"section-image\">\n <div class=\"section-content\">\n <h3 class=\"h3-title\">Cr\u00e9ations Uniques<\/h3>\n <p class=\"formula-desc\">D\u00e9couvrez mes couteaux dans des versions uniques. La cr\u00e9ativit\u00e9 est mise en avant sur ces pi\u00e8ces. Venez d\u00e9couvrir un panel de possibilit\u00e9s.\nCouteau pliant ou couteau de chef, d\u00e9couvrez mon savoir-faire artisanal au travers de mes cr\u00e9ations pens\u00e9es pour durer.\n<\/p>\n <a class=\"view-btn\" href=\"https:\/\/ledragonnier.com\/index.php\/piece-unique\/\">voir les cr\u00e9ations<\/a>\n <\/div>\n <\/div>\n <div class=\"alternating-section reverse\">\n <img decoding=\"async\" src=\"\" alt=\"Portfolio des cr\u00e9ations\" class=\"section-image\">\n <div class=\"section-content\">\n <h3 class=\"h3-title\">Portfolio<\/h3>\n <p>Chaque pi\u00e8ce raconte une histoire, celle d'une rencontre entre l'artisan et son client. Parcourez mes r\u00e9alisations sur mesure, t\u00e9moins de la diversit\u00e9 et de la richesse de mon art.\n<\/p>\n <a class=\"view-btn\" href=\"https:\/\/ledragonnier.com\/index.php\/portfolio\/\">voir les cr\u00e9ations<\/a>\n <\/div>\n <\/div>\n <\/section>\n <div class=\"services-separator\"><\/div>\n <div class=\"cta-banner\">\n <div class=\"cta-content\">\n \n <div class=\"section-title\">\n <h1 class=\"h1-title\">Un projet sur mesure<\/h1>\n <\/div>\n <h3 class=\"h3-title\">Venez en discuter avec moi autour d'un caf\u00e9<\/h3>\n <div class=\"cta-buttons\">\n <a href=\"https:\/\/ledragonnier.com\/index.php\/contact\/\" class=\"create-btn\">\n <span class=\"create-btn-text\">Contactez moi<\/span>\n <div class=\"create-btn-blade\"><\/div>\n <\/a>\n <button class=\"view-btn\">Voir la galerie<\/button>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"services-separator\"><\/div>\n <div class=\"section-title\">\n \n\n <h1 class=\"h1-title\">Question fr\u00e9quentes<\/h1>\n <\/div>\n <div class=\"faq-container\">\n <details class=\"faq-item\">\n <summary class=\"faq-question\">Quel est le d\u00e9lai de fabrication ?<\/summary>\n <div class=\"faq-answer\">\nLe d\u00e9lai varie suivant la complexit\u00e9 de la demande : 2 semaines pour un couteau simple avec les options disponibles, pour les pi\u00e8ces uniques, ou les commandes sp\u00e9ciales, les d\u00e9lais peuvent \u00eatre plus long.\n <\/div>\n <\/details>\n <details class=\"faq-item\">\n <summary class=\"faq-question\">Proposez-vous un service d'aff\u00fbtage ?<\/summary>\n <div class=\"faq-answer\">\n Oui, je propose un service d'aff\u00fbtage et d'entretien pour tous mes couteaux. Le premier aff\u00fbtage dans l'ann\u00e9e suivant l'achat est gratuit.\n <\/div>\n <\/details>\n <details class=\"faq-item\">\n <summary class=\"faq-question\">Puis-je personnaliser compl\u00e8tement mon couteau ?<\/summary>\n <div class=\"faq-answer\">\nAbsolument ! Pour les pi\u00e8ces d'exception, nous travaillons ensemble sur chaque d\u00e9tail : Finition des pi\u00e8ces, mati\u00e8res du manche, guillochage\u2026\n <\/div>\n <\/details>\n <details class=\"faq-item\">\n <summary class=\"faq-question\">Quelles sont les essences de bois disponibles ?<\/summary>\n <div class=\"faq-answer\">\nJe travaille principalement avec des essences locales : olivier, buis, cade mais aussi des bois exotiques comme l\u2019\u00e9b\u00e8ne, et un mat\u00e9riau composite \u00e9cologique, le paperstone.\n <\/div>\n <\/details>\n <\/div>\n <\/div>\n<\/body>\n\n <script>\n \/\/ --- SCRIPTS DU FICHIER CTA & TIMELINE ---\n let timelineExpanded = false;\n\n function toggleTimeline() {\n const content = document.getElementById('timeline-content');\n const btnText = document.getElementById('btn-text');\n if (!timelineExpanded) {\n content.classList.add('expanded');\n btnText.textContent = 'Masquer les \u00e9tapes';\n timelineExpanded = true;\n setTimeout(() => {\n const steps = document.querySelectorAll('.timeline-step');\n steps.forEach((step, index) => {\n setTimeout(() => {\n step.classList.add('visible');\n }, index * 200);\n });\n }, 400);\n } else {\n content.classList.remove('expanded');\n btnText.textContent = 'D\u00e9couvrir les \u00e9tapes';\n timelineExpanded = false;\n const steps = document.querySelectorAll('.timeline-step');\n steps.forEach(step => {\n step.classList.remove('visible');\n });\n }\n }\n\n document.addEventListener('DOMContentLoaded', function() {\n const observer = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n entry.target.classList.add('visible');\n observer.unobserve(entry.target);\n }\n });\n }, {\n threshold: 0.2,\n rootMargin: '0px 0px -50px 0px'\n });\n\n document.querySelectorAll('.timeline-header').forEach(el => {\n observer.observe(el);\n });\n\n const createBtn = document.querySelector('.create-btn');\n const viewBtn = document.querySelector('.view-btn');\n if (createBtn) {\n createBtn.addEventListener('click', function() {\n this.style.transform = 'scale(0.95) translateY(2px)';\n setTimeout(() => {\n this.style.transform = '';\n }, 150);\n console.log('Cr\u00e9ation de couteau personnalis\u00e9...');\n });\n }\n if (viewBtn) {\n viewBtn.addEventListener('click', function() {\n console.log('D\u00e9couvrez nos cr\u00e9ations...');\n });\n }\n });\n\n document.addEventListener('DOMContentLoaded', function() {\n const headerObserver = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n entry.target.classList.add('visible');\n headerObserver.unobserve(entry.target);\n }\n });\n }, {\n threshold: 0.2,\n rootMargin: '0px 0px -50px 0px'\n });\n\n const sectionObserver = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n entry.target.classList.add('visible');\n sectionObserver.unobserve(entry.target);\n }\n });\n }, {\n threshold: 0.3,\n rootMargin: '0px 0px -30px 0px'\n });\n\n setTimeout(() => {\n document.querySelector('.services-header').classList.add('visible');\n setTimeout(() => {\n document.querySelector('.creation-section').classList.add('visible');\n }, 400);\n setTimeout(() => {\n document.querySelector('.sharpening-section').classList.add('visible');\n }, 800);\n }, 100);\n\n document.querySelectorAll('.services-header').forEach(el => {\n headerObserver.observe(el);\n });\n\n document.querySelectorAll('.creation-section, .sharpening-section').forEach(section => {\n sectionObserver.observe(section);\n });\n\n document.querySelector('.primary-btn').addEventListener('click', function() {\n this.style.transform = 'scale(0.95) translateY(2px)';\n setTimeout(() => {\n this.style.transform = '';\n }, 150);\n console.log('R\u00e9servation atelier demand\u00e9e...');\n });\n });\n\n \/\/ --- SCRIPTS DU FICHIER CARROUSEL ---\n window.dragonnierCarousel = (function() {\n if (document.readyState === 'loading') {\n document.addEventListener('DOMContentLoaded', init);\n } else {\n init();\n }\n let currentSlide = 0;\n let totalSlides = 4;\n let slidesContainer, dots, slides, carousel;\n let autoPlayInterval;\n let isTransitioning = false;\n\n function init() {\n slidesContainer = document.getElementById('carouselSlides');\n if (!slidesContainer) return;\n dots = document.querySelectorAll('.knives-carousel .pagination-dot');\n slides = document.querySelectorAll('.knives-carousel .carousel-slide');\n carousel = document.querySelector('.knives-carousel');\n totalSlides = slides.length;\n \n if (slides.length > 0) {\n slidesContainer.style.width = `${slides.length * 100}%`;\n slides.forEach(slide => {\n slide.style.width = `${100 \/ slides.length}%`;\n });\n }\n\n if (dots.length === 0 || slides.length === 0) return;\n updateCarousel();\n startAutoPlay();\n setupEventListeners();\n }\n\n function updateCarousel() {\n if (isTransitioning || !slidesContainer) return;\n isTransitioning = true;\n const translateX = -currentSlide * (100 \/ totalSlides);\n slidesContainer.style.transform = `translateX(${translateX}%)`;\n slides.forEach((slide, index) => {\n slide.classList.toggle('active', index === currentSlide);\n });\n dots.forEach((dot, index) => {\n dot.classList.toggle('active', index === currentSlide);\n });\n setTimeout(() => {\n isTransitioning = false;\n }, 800);\n }\n\n function changeSlide(direction) {\n currentSlide += direction;\n if (currentSlide >= totalSlides) {\n currentSlide = 0;\n } else if (currentSlide < 0) {\n currentSlide = totalSlides - 1;\n }\n updateCarousel();\n }\n\n function goToSlide(slideIndex) {\n if (slideIndex >= 0 && slideIndex < totalSlides) {\n currentSlide = slideIndex;\n updateCarousel();\n }\n }\n\n function startAutoPlay() {\n stopAutoPlay();\n autoPlayInterval = setInterval(() => {\n changeSlide(1);\n }, 12000);\n }\n\n function stopAutoPlay() {\n if (autoPlayInterval) {\n clearInterval(autoPlayInterval);\n autoPlayInterval = null;\n }\n }\n\n function setupEventListeners() {\n if (!carousel) return;\n carousel.addEventListener('mouseenter', stopAutoPlay);\n carousel.addEventListener('mouseleave', startAutoPlay);\n document.addEventListener('keydown', (e) => {\n if (e.key === 'ArrowLeft') {\n changeSlide(-1);\n stopAutoPlay();\n startAutoPlay();\n } else if (e.key === 'ArrowRight') {\n changeSlide(1);\n stopAutoPlay();\n startAutoPlay();\n }\n });\n let touchStartX = 0, touchEndX = 0, touchStartY = 0, touchEndY = 0;\n carousel.addEventListener('touchstart', (e) => {\n touchStartX = e.changedTouches[0].screenX;\n touchStartY = e.changedTouches[0].screenY;\n }, { passive: true });\n carousel.addEventListener('touchend', (e) => {\n touchEndX = e.changedTouches[0].screenX;\n touchEndY = e.changedTouches[0].screenY;\n const diffX = touchStartX - touchEndX;\n const diffY = Math.abs(touchStartY - touchEndY);\n if (Math.abs(diffX) > 50 && diffY < 100) {\n changeSlide(diffX > 0 ? 1 : -1);\n stopAutoPlay();\n startAutoPlay();\n }\n }, { passive: true });\n carousel.addEventListener('touchend', () => {\n const hint = carousel.querySelector('.swipe-hint');\n if (hint) {\n hint.style.display = 'none';\n }\n }, { once: true, passive: true });\n }\n return {\n changeSlide,\n goToSlide,\n startAutoPlay,\n stopAutoPlay\n };\n })();\n\n (function() {\n function productEndpoint(id) {\n var pretty = \"\/wp-json\/wc\/store\/v1\/products\/\" + id;\n var fallback = \"\/index.php?rest_route=\/wc\/store\/v1\/products\/\" + id;\n return fetch(pretty).then(r => r.ok ? r : fetch(fallback));\n }\n document.querySelectorAll('[data-product-id]').forEach(card => {\n var id = card.getAttribute('data-product-id');\n var priceEl = card.querySelector('.slide-price');\n if (!id || !priceEl) return;\n productEndpoint(id)\n .then(res => res.json())\n .then(prod => {\n priceEl.innerHTML = prod && prod.price_html ? prod.price_html : '\u2014';\n })\n .catch(() => { priceEl.textContent = '\u2014'; });\n });\n })();\n\n \/\/ --- SCRIPTS DU FICHIER HISTOIRE & PORTRAIT ---\n document.addEventListener('DOMContentLoaded', function() {\n const observerOptions = {\n threshold: 0.15,\n rootMargin: '0px 0px -80px 0px'\n };\n \n const sectionsObserver = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n entry.target.classList.add('in-view');\n sectionsObserver.unobserve(entry.target);\n }\n });\n }, observerOptions);\n \n const sections = document.querySelectorAll('.section-histoire, .section-portrait');\n sections.forEach(section => {\n sectionsObserver.observe(section);\n });\n \n const transitionElement = document.querySelector('.transition-ornement');\n \n if (transitionElement) {\n const transitionObserver = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n entry.target.style.setProperty('--transition-active', '1');\n transitionObserver.unobserve(entry.target);\n }\n });\n }, {\n threshold: 0.5\n });\n \n transitionObserver.observe(transitionElement);\n }\n \n const iframe = document.querySelector('.media-wrapper iframe');\n if (iframe) {\n const videoObserver = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n const src = entry.target.src;\n if (!src.includes('autoplay=1')) {\n \/\/ entry.target.src = src.replace('autoplay=0', 'autoplay=1&mute=1');\n }\n videoObserver.unobserve(entry.target);\n }\n });\n }, {\n threshold: 0.5\n });\n \n videoObserver.observe(iframe);\n }\n \n const criticalImages = document.querySelectorAll('img[loading=\"lazy\"]');\n if ('IntersectionObserver' in window) {\n const imageObserver = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n const img = entry.target;\n img.src = img.dataset.src || img.src;\n img.classList.remove('lazy');\n imageObserver.unobserve(img);\n }\n });\n });\n \n criticalImages.forEach(img => {\n imageObserver.observe(img);\n });\n }\n });\n <\/script>\n\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>Le Dragonnier Coutellerie Artisanale dans le coeur de p\u00e9z\u00e9nas Document Me d\u00e9couvrir Le Dragonnier – Cr\u00e9ation, Boutique & Ateliers Une Histoire Dans cette maison familiale de P\u00e9zenas, l\u2019artisanat rena\u00eet. De mon arri\u00e8re-grand-p\u00e8re Antoine Jaudon \u00e0 moi, de tapissier sur meuble \u00e0 coutelier. Le Dragonnier est un nom qui m\u00eale un genre de plante Dracaena et […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-18522","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/ledragonnier.com\/index.php\/wp-json\/wp\/v2\/pages\/18522","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=18522"}],"version-history":[{"count":778,"href":"https:\/\/ledragonnier.com\/index.php\/wp-json\/wp\/v2\/pages\/18522\/revisions"}],"predecessor-version":[{"id":21131,"href":"https:\/\/ledragonnier.com\/index.php\/wp-json\/wp\/v2\/pages\/18522\/revisions\/21131"}],"wp:attachment":[{"href":"https:\/\/ledragonnier.com\/index.php\/wp-json\/wp\/v2\/media?parent=18522"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}