{"id":18522,"date":"2025-05-27T21:31:12","date_gmt":"2025-05-27T19:31:12","guid":{"rendered":"https:\/\/ledragonnier.com\/?page_id=18522"},"modified":"2026-10-10T20:20:59","modified_gmt":"2026-10-10T18:20:59","slug":"elementor-18522","status":"publish","type":"page","link":"https:\/\/ledragonnier.com\/","title":{"rendered":"Accueil"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"18522\" class=\"elementor elementor-18522\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-f9ec2ca e-con-full e-flex e-con e-parent\" data-id=\"f9ec2ca\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-42b59f9 elementor-widget elementor-widget-html\" data-id=\"42b59f9\" data-element_type=\"widget\" data-e-type=\"widget\" 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 rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n    <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n    <link rel=\"preload\" href=\"\/wp-content\/uploads\/2025\/05\/immortal.woff2\" as=\"font\" type=\"font\/woff2\" crossorigin>\n    <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Lora:ital,wght@0,400;0,500;0,600;1,400;1,500&display=swap\" rel=\"stylesheet\">\n\n    <style>\n        \/* Police de titre Immortal (fichier du dossier Fonts).\n           Sur WordPress : t\u00e9l\u00e9verser IMMORTAL.ttf dans la m\u00e9diath\u00e8que et remplacer l'URL ci-dessous. *\/\n        @font-face {\n            font-family: 'Immortal';\n            \/* Chemins du site WordPress d'abord (m\u00eame domaine, pas de blocage CORS) ;\n               copie locale du dossier Fonts en secours pour l'aper\u00e7u hors WordPress. *\/\n            src: url('\/wp-content\/uploads\/2025\/05\/immortal.woff2') format('woff2'), url('\/wp-content\/uploads\/2025\/05\/IMMORTAL.ttf') format('truetype'), url('Fonts\/IMMORTAL.woff2') format('woff2');\n            font-weight: 400;\n            font-style: normal;\n            font-display: swap;\n        }\n\n        html, body {\n            width: 100%;\n            margin: 0;\n            overflow-x: hidden;\n        }\n\n        \/* ===============================================\n           JETONS\n        =============================================== *\/\n        .dg {\n            --red: #9D0208;\n            --red-deep: #7A0106;\n            --orange: #E85D04;\n            --amber: #FAA307;\n            --ochre: #8F3B00;\n            --gilt: #C2852A;\n            --ink: #2B211B;\n            --ink-strong: #17110D;\n            --muted: #3F342D;\n            --line: rgba(43, 33, 27, 0.14);\n            --paper: #F4EDE1;\n            --paper-light: #FAF6EE;\n            --tint: #EADFCB;\n            --frame: #E3D8C6;\n            --night: #121212;\n            --display: 'Immortal', 'Lora', Georgia, serif;\n            --text: 'Lora', Georgia, serif;\n            --radius: 18px;\n            --radius-lg: 28px;\n            --gutter: clamp(20px, 4vw, 40px);\n            --section: clamp(64px, 7vw, 100px);\n\n            \/* \u00c9chelle typographique : un r\u00f4le = une taille *\/\n            --fs-label: 0.82rem;\n            --fs-small: 0.9rem;\n            --fs-lede: 1.15rem;\n            --fs-h3: clamp(1.7rem, 1.4rem + 0.8vw, 2.1rem);\n            --fs-price: clamp(2rem, 1.7rem + 0.8vw, 2.4rem);\n\n            background-color: var(--paper);\n            background-image: url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'\/%3E%3CfeColorMatrix values='0 0 0 0 0.35 0 0 0 0 0.25 0 0 0 0 0.15 0 0 0 0.06 0'\/%3E%3C\/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'\/%3E%3C\/svg%3E\");\n            color: var(--ink);\n            font-family: var(--text);\n            font-size: 17px;\n            line-height: 1.7;\n            -webkit-font-smoothing: antialiased;\n            overflow-x: hidden;\n        }\n\n        .dg *,\n        .dg *::before,\n        .dg *::after {\n            box-sizing: border-box;\n        }\n\n        .dg img {\n            display: block;\n            max-width: 100%;\n            height: auto;\n        }\n\n        .dg p {\n            margin: 0 0 1em;\n            text-wrap: pretty;\n        }\n\n        .dg h1,\n        .dg h2,\n        .dg h3,\n        .dg h4 {\n            margin: 0;\n            font-weight: 400;\n        }\n\n        .dg-wrap {\n            width: 100%;\n            max-width: 1080px;\n            margin: 0 auto;\n            padding: 0 var(--gutter);\n        }\n\n        \/* ===============================================\n           0. HERO (vid\u00e9o en fond)\n        =============================================== *\/\n        .dg-hero {\n            position: relative;\n            display: grid;\n            place-items: center;\n            min-height: calc(100svh - var(--wp-admin--admin-bar--height, 0px));\n            overflow: hidden;\n            background: var(--night);\n            text-align: center;\n        }\n\n        .dg-hero-video {\n            position: absolute;\n            inset: 0;\n            width: 100%;\n            height: 100%;\n            object-fit: cover;\n        }\n\n        \/* En portrait, on recadre sur l'\u00e9p\u00e9e (\u00e0 droite de l'image). *\/\n        @media (max-aspect-ratio: 1 \/ 1) {\n            .dg-hero-video {\n                object-position: 74% center;\n            }\n        }\n\n        .dg-hero::after {\n            content: '';\n            position: absolute;\n            inset: 0;\n            background: rgba(18, 18, 18, 0.45);\n        }\n\n        .dg-hero-content {\n            position: relative;\n            z-index: 1;\n            padding: 0 var(--gutter);\n        }\n\n        .dg .dg-hero-title {\n            font-family: var(--display);\n            font-size: clamp(3rem, 1.8rem + 5vw, 6rem);\n            line-height: 1;\n            color: var(--paper-light);\n        }\n\n        .dg .dg-hero-subtitle {\n            margin: 24px 0 36px;\n            font-family: var(--display);\n            font-size: clamp(1.1rem, 0.9rem + 0.8vw, 1.6rem);\n            color: var(--paper-light);\n        }\n\n        .dg-section {\n            padding: var(--section) 0;\n        }\n\n        .dg-section--light {\n            background-color: rgba(250, 246, 238, 0.7);\n        }\n\n        \/* ===============================================\n           TITRES DE SECTION + FLEURONS\n        =============================================== *\/\n        .dg-head {\n            text-align: center;\n            max-width: 680px;\n            margin: 0 auto 48px;\n        }\n\n        .dg-eyebrow {\n            display: inline-flex;\n            align-items: center;\n            gap: 14px;\n            font-family: var(--text);\n            font-size: var(--fs-label);\n            font-weight: 600;\n            letter-spacing: 0.2em;\n            text-transform: uppercase;\n            color: var(--ochre);\n            margin-bottom: 14px;\n        }\n\n        .dg-eyebrow::before,\n        .dg-eyebrow::after {\n            content: '';\n            width: 22px;\n            height: 7px;\n            background: url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' viewBox='0 0 22 7' fill='none'%3E%3Cpath d='M0 3.5h15' stroke='%23C2852A'\/%3E%3Cpath d='M18.5 0.5l3 3-3 3-3-3z' stroke='%23C2852A'\/%3E%3C\/svg%3E\") center \/ contain no-repeat;\n        }\n\n        .dg-eyebrow::after {\n            transform: scaleX(-1);\n        }\n\n        .dg-head--left .dg-eyebrow::before {\n            display: none;\n        }\n\n        .dg-title {\n            font-family: var(--display);\n            font-size: clamp(2.2rem, 1.6rem + 1.8vw, 3rem);\n            line-height: 1.1;\n            color: var(--red);\n            text-wrap: balance;\n        }\n\n        .dg-title::after {\n            content: '';\n            display: block;\n            width: 150px;\n            height: 18px;\n            margin: 18px auto 0;\n            background: url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' viewBox='0 0 150 18' fill='none' stroke='%23C2852A'%3E%3Cpath d='M0 9h52'\/%3E%3Cpath d='M98 9h52'\/%3E%3Cpath d='M52 9c6 0 8-6 14-6M98 9c-6 0-8-6-14-6M52 9c6 0 8 6 14 6M98 9c-6 0-8 6-14 6'\/%3E%3Cpath d='M75 2l7 7-7 7-7-7z'\/%3E%3Ccircle cx='75' cy='9' r='1.6' fill='%23C2852A'\/%3E%3Ccircle cx='3' cy='9' r='1.2' fill='%23C2852A'\/%3E%3Ccircle cx='147' cy='9' r='1.2' fill='%23C2852A'\/%3E%3C\/svg%3E\") center \/ contain no-repeat;\n        }\n\n        .dg-head--left {\n            text-align: left;\n            margin-left: 0;\n        }\n\n        .dg-head--left .dg-title::after {\n            margin-left: 0;\n        }\n\n        .dg .dg-lede {\n            font-size: var(--fs-lede);\n            color: var(--muted);\n            margin: 20px auto 0;\n            max-width: 56ch;\n        }\n\n        .dg-divider {\n            width: min(420px, 70%);\n            height: 34px;\n            margin: 0 auto;\n            background: url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' viewBox='0 0 420 34' fill='none' stroke='%23C2852A'%3E%3Cpath d='M0 17h150M270 17h150'\/%3E%3Cpath d='M150 17c10 0 14-11 26-11 9 0 12 6 12 11M270 17c-10 0-14-11-26-11-9 0-12 6-12 11M150 17c10 0 14 11 26 11 9 0 12-6 12-11M270 17c-10 0-14 11-26 11-9 0-12-6-12-11'\/%3E%3Cpath d='M210 3l14 14-14 14-14-14z'\/%3E%3Cpath d='M210 9l8 8-8 8-8-8z' fill='%23C2852A' fill-opacity='.25'\/%3E%3Ccircle cx='4' cy='17' r='2' fill='%23C2852A'\/%3E%3Ccircle cx='416' cy='17' r='2' fill='%23C2852A'\/%3E%3C\/svg%3E\") center \/ contain no-repeat;\n        }\n\n        .dg-sep {\n            padding: clamp(40px, 5vw, 64px) 0;\n        }\n\n        \/* ===============================================\n           BOUTONS ET LIENS\n        =============================================== *\/\n        .dg-btn {\n            display: inline-flex;\n            align-items: center;\n            justify-content: center;\n            gap: 10px;\n            padding: 15px 30px;\n            border-radius: 999px;\n            border: 1px solid var(--red);\n            background: var(--red);\n            color: var(--paper-light);\n            font-family: var(--text);\n            font-size: var(--fs-small);\n            font-weight: 600;\n            letter-spacing: 0.08em;\n            text-transform: uppercase;\n            text-decoration: none;\n            cursor: pointer;\n            box-shadow: inset 0 0 0 3px var(--red), inset 0 0 0 4px rgba(250, 246, 238, 0.45);\n            transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;\n        }\n\n        .dg-btn:hover {\n            background: var(--red-deep);\n            border-color: var(--red-deep);\n            box-shadow: inset 0 0 0 3px var(--red-deep), inset 0 0 0 4px rgba(250, 246, 238, 0.6);\n        }\n\n        .dg-btn--line {\n            background: transparent;\n            color: var(--ink);\n            border-color: rgba(43, 33, 27, 0.45);\n            box-shadow: none;\n        }\n\n        .dg-btn--line:hover {\n            background: transparent;\n            color: var(--red);\n            border-color: var(--red);\n            box-shadow: none;\n        }\n\n        .dg-btn--light {\n            background: transparent;\n            color: var(--paper-light);\n            border-color: rgba(250, 246, 238, 0.6);\n            box-shadow: none;\n        }\n\n        .dg-btn--light:hover {\n            background: rgba(250, 246, 238, 0.1);\n            border-color: var(--paper-light);\n            box-shadow: none;\n        }\n\n        .dg-link {\n            display: inline-flex;\n            align-items: center;\n            gap: 8px;\n            min-height: 44px;\n            padding: 6px 0;\n            color: var(--red);\n            font-weight: 600;\n            text-decoration: none;\n            border-bottom: 1px solid rgba(157, 2, 8, 0.35);\n            transition: border-color 0.25s ease;\n        }\n\n        .dg-link:hover {\n            border-bottom-color: var(--red);\n        }\n\n        .dg :is(a, button, summary):focus-visible {\n            outline: 2px solid var(--orange);\n            outline-offset: 4px;\n        }\n\n        \/* ===============================================\n           CADRES PHOTO (coins arrondis, double filet)\n           Le cadre reste visible tant que l'image n'est pas fournie.\n        =============================================== *\/\n        .dg-frame {\n            position: relative;\n            margin: 0;\n            overflow: hidden;\n            border-radius: var(--radius);\n            background:\n                radial-gradient(120% 80% at 50% 0%, rgba(250, 246, 238, 0.6) 0%, transparent 60%),\n                linear-gradient(160deg, rgba(157, 2, 8, 0.07) 0%, rgba(194, 133, 42, 0.14) 100%),\n                var(--frame);\n        }\n\n        .dg-frame::after {\n            content: '';\n            position: absolute;\n            inset: 10px;\n            border: 1px solid rgba(250, 246, 238, 0.7);\n            border-radius: calc(var(--radius) - 8px);\n            pointer-events: none;\n        }\n\n        .dg-frame img,\n        .dg-frame iframe {\n            width: 100%;\n            height: 100%;\n            object-fit: cover;\n            border: 0;\n        }\n\n        .dg-frame img[src=\"\"],\n        .dg-frame img:not([src]),\n        .dg-frame iframe[src=\"\"] {\n            visibility: hidden;\n        }\n\n        \/* Cadre sans image : on le retire tant que la photo n'est pas fournie *\/\n        .dg-frame:has(> img[src=\"\"]),\n        .dg-frame:has(> img:not([src])) {\n            display: none;\n        }\n\n        \/* ===============================================\n           1. HISTOIRE ET 2. QUI JE SUIS\n        =============================================== *\/\n        .dg-split {\n            display: grid;\n            grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);\n            gap: clamp(40px, 5vw, 72px);\n            align-items: center;\n        }\n\n        .dg-split--reverse .dg-split-media {\n            order: -1;\n        }\n\n        .dg-prose p {\n            color: var(--ink);\n            line-height: 1.7;\n            max-width: 58ch;\n        }\n\n        .dg .dg-prose .dg-intro {\n            margin-bottom: 1.1em;\n            font-size: clamp(1.3rem, 1.15rem + 0.5vw, 1.5rem);\n            font-weight: 500;\n            line-height: 1.4;\n            color: var(--ink-strong);\n            max-width: 32ch;\n            text-wrap: balance;\n        }\n\n        .dg-prose .dg-closing {\n            font-style: italic;\n            color: var(--ochre);\n            margin-top: 1.4em;\n        }\n\n        .dg-video {\n            aspect-ratio: 16 \/ 9;\n            border-radius: var(--radius-lg);\n        }\n\n        .dg-video::after {\n            border-radius: calc(var(--radius-lg) - 8px);\n        }\n\n        \/* Mini carrousel en fondu (vitrine de l'atelier) *\/\n        .dg-fade img {\n            position: absolute;\n            inset: 0;\n            opacity: 0;\n            transition: opacity 1.2s ease;\n        }\n\n        .dg-fade img.is-active {\n            opacity: 1;\n        }\n\n        .dg-fade-dots {\n            position: absolute;\n            left: 50%;\n            bottom: 22px;\n            z-index: 2;\n            display: flex;\n            gap: 10px;\n            transform: translateX(-50%);\n        }\n\n        .dg-fade-dots button {\n            position: relative;\n            width: 8px;\n            height: 8px;\n            padding: 0;\n            border: 0;\n            border-radius: 999px;\n            background: rgba(250, 246, 238, 0.6);\n            cursor: pointer;\n            transition: width 0.35s ease, background-color 0.35s ease;\n        }\n\n        .dg-fade-dots button::after {\n            content: '';\n            position: absolute;\n            inset: -12px -6px;\n        }\n\n        .dg-fade-dots button.is-active {\n            width: 24px;\n            background: var(--paper-light);\n        }\n\n\n        .dg-portrait {\n            aspect-ratio: 4 \/ 5;\n            max-width: 420px;\n            width: 100%;\n            justify-self: center;\n        }\n\n        .dg-portrait img {\n            object-position: 50% 35%;\n        }\n\n        .dg-portrait-badge,\n        .dg-knife-badge {\n            position: absolute;\n            right: 24px;\n            bottom: 24px;\n            z-index: 1;\n            padding: 8px 18px;\n            border-radius: 999px;\n            background: rgba(157, 2, 8, 0.92);\n            color: var(--paper-light);\n            font-family: var(--display);\n            font-size: 1rem;\n        }\n\n        .dg-name {\n            margin: 0 0 24px;\n        }\n\n        .dg-name h3 {\n            font-family: var(--display);\n            font-size: var(--fs-h3);\n            line-height: 1.1;\n            color: var(--ink);\n        }\n\n        .dg-name span {\n            font-style: italic;\n            color: var(--ochre);\n        }\n\n        .dg-prose .dg-quote {\n            margin: 0;\n            padding: 0;\n            font-size: 1.2rem;\n            font-style: italic;\n            line-height: 1.6;\n            color: var(--ink-strong);\n            max-width: 52ch;\n        }\n\n        \/* ===============================================\n           3. STAGE (fond bois, DA d'origine)\n        =============================================== *\/\n        .dg-stage {\n            position: relative;\n            isolation: isolate;\n            min-height: 60vh;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            padding: var(--section) var(--gutter);\n            text-align: center;\n            color: var(--paper-light);\n            overflow: hidden;\n        }\n\n        .dg-stage::before {\n            content: '';\n            position: absolute;\n            inset: 0;\n            z-index: -2;\n            background: url('https:\/\/ledragonnier.com\/wp-content\/uploads\/2026\/10\/Gemini-Generated-Image-Workshop-Recreation-scaled.jpeg') 50% 45% \/ cover no-repeat;\n            filter: blur(2px) saturate(0.9);\n            transform: scale(1.06);\n        }\n\n        .dg-stage::after {\n            content: '';\n            position: absolute;\n            inset: 0;\n            z-index: -1;\n            background:\n                radial-gradient(ellipse 60% 70% at 50% 50%, rgba(18, 18, 18, 0.72) 0%, rgba(18, 18, 18, 0) 100%),\n                linear-gradient(180deg, rgba(18, 18, 18, 0.6) 0%, rgba(18, 18, 18, 0.72) 50%, rgba(18, 18, 18, 0.92) 100%);\n        }\n\n        .dg-stage-inner {\n            max-width: 980px;\n        }\n\n        .dg-stage .dg-eyebrow {\n            color: var(--amber);\n        }\n\n        .dg-stage h1 {\n            font-family: var(--display);\n            font-size: clamp(2.6rem, 1.6rem + 3vw, 3.8rem);\n            line-height: 1.08;\n            color: var(--paper-light);\n            text-wrap: balance;\n            margin-bottom: 28px;\n            text-shadow: 0 2px 18px rgba(0, 0, 0, 0.55);\n        }\n\n        .dg-stage .dg-divider {\n            margin-bottom: 32px;\n        }\n\n        .dg-stage .dg-stage-desc {\n            font-size: clamp(1.15rem, 1rem + 0.6vw, 1.4rem);\n            line-height: 1.5;\n            color: var(--paper-light);\n            margin: 0 auto 8px;\n            max-width: 60ch;\n            text-wrap: balance;\n            text-shadow: 0 1px 10px rgba(0, 0, 0, 0.6);\n        }\n\n        .dg-stage .dg-stage-sub {\n            font-size: var(--fs-lede);\n            letter-spacing: 0.01em;\n            color: rgba(250, 246, 238, 0.95);\n            margin: 0 auto 44px;\n            max-width: 60ch;\n            text-wrap: balance;\n            text-shadow: 0 1px 10px rgba(0, 0, 0, 0.6);\n        }\n\n        .dg-stage-desc strong {\n            color: var(--amber);\n            font-weight: 600;\n        }\n\n        .dg-stage-infos {\n            display: flex;\n            flex-wrap: wrap;\n            justify-content: center;\n            margin: 0 auto;\n            padding: 0;\n            list-style: none;\n        }\n\n        .dg-stage-infos li {\n            display: inline-flex;\n            align-items: center;\n            gap: 10px;\n            padding: 6px 22px;\n            letter-spacing: 0.01em;\n            color: rgba(250, 246, 238, 0.92);\n        }\n\n        .dg-stage-infos li + li {\n            border-left: 1px solid rgba(250, 246, 238, 0.25);\n        }\n\n        .dg-stage-infos svg {\n            width: 20px;\n            height: 20px;\n            color: var(--amber);\n            flex: none;\n        }\n\n        \/* ===============================================\n           4. COMMENT NA\u00ceT UN COUTEAU (timeline)\n        =============================================== *\/\n        .dg-timeline-toggle {\n            margin-top: 32px;\n        }\n\n        .dg-timeline-content {\n            display: grid;\n            grid-template-rows: 0fr;\n            opacity: 0;\n            transition: grid-template-rows 0.8s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.5s ease;\n        }\n\n        .dg-timeline-content.expanded {\n            grid-template-rows: 1fr;\n            opacity: 1;\n        }\n\n        .dg-timeline-content > div {\n            overflow: hidden;\n        }\n\n        .dg-timeline {\n            position: relative;\n            list-style: none;\n            margin: 0;\n            padding: 48px 0 0;\n        }\n\n        .dg-timeline::before {\n            content: '';\n            position: absolute;\n            left: 50%;\n            top: 48px;\n            bottom: 0;\n            width: 2px;\n            transform: translateX(-50%);\n            background: linear-gradient(180deg, var(--red) 0%, var(--gilt) 100%);\n            opacity: 0.6;\n        }\n\n        .dg-tl-step {\n            position: relative;\n            display: grid;\n            grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);\n            gap: 80px;\n            align-items: center;\n            padding: 40px 0;\n            opacity: 0;\n            transform: translateY(24px);\n            transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);\n        }\n\n        .dg-tl-step.visible {\n            opacity: 1;\n            transform: none;\n        }\n\n        .dg-tl-marker {\n            position: absolute;\n            left: 50%;\n            top: 50%;\n            width: 18px;\n            height: 18px;\n            transform: translate(-50%, -50%) rotate(45deg);\n            background: var(--red);\n            border: 3px solid var(--paper);\n            box-shadow: 0 0 0 1px var(--gilt);\n        }\n\n        .dg-tl-badge {\n            display: inline-block;\n            padding: 6px 16px;\n            border-radius: 999px;\n            background: var(--red);\n            color: var(--paper-light);\n            font-size: var(--fs-label);\n            font-weight: 600;\n            letter-spacing: 0.16em;\n            margin-bottom: 16px;\n        }\n\n        .dg-tl-step h3 {\n            font-family: var(--display);\n            font-size: var(--fs-h3);\n            line-height: 1.1;\n            color: var(--red);\n            margin-bottom: 14px;\n        }\n\n        .dg-tl-step p {\n            color: var(--muted);\n            margin-bottom: 10px;\n        }\n\n        .dg-tl-step .dg-frame {\n            aspect-ratio: 16 \/ 10;\n        }\n\n        \/* ===============================================\n           5. MES SERVICES\n        =============================================== *\/\n        .dg-atelier {\n            display: grid;\n            grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);\n            gap: clamp(40px, 6vw, 80px);\n            align-items: center;\n        }\n\n        .dg-atelier .dg-frame {\n            aspect-ratio: 4 \/ 3;\n        }\n\n        .dg-atelier .dg-frame img {\n            object-position: 55% 40%;\n        }\n\n        .dg-formulas-section {\n            padding-bottom: clamp(56px, 7vw, 88px);\n            padding-top: clamp(56px, 7vw, 88px);\n        }\n\n        .dg-stage-offer {\n            display: grid;\n            grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);\n            gap: clamp(40px, 5vw, 72px);\n            align-items: stretch;\n        }\n\n        .dg-stage-media {\n            display: flex;\n            flex-direction: column;\n            gap: 16px;\n        }\n\n        .dg-stage-photo {\n            flex: 1;\n            min-height: 0;\n        }\n\n        .dg-stage-knife {\n            flex: none;\n            display: flex;\n            height: clamp(150px, 13vw, 184px);\n            padding: 28px 24px 44px;\n        }\n\n        .dg-stage-knife img {\n            object-fit: contain;\n            mix-blend-mode: multiply;\n        }\n\n        .dg-knife-badge {\n            right: auto;\n            left: 20px;\n            bottom: 18px;\n        }\n\n        .dg-stage-photo img {\n            position: absolute;\n            inset: 0;\n            object-position: 54% 50%;\n        }\n\n        .dg-formulas {\n            display: flex;\n            flex-direction: column;\n            justify-content: center;\n        }\n\n        .dg-offer-head {\n            padding-bottom: 20px;\n            border-bottom: 1px solid var(--line);\n        }\n\n        .dg-offer-title {\n            font-family: var(--text);\n            font-size: var(--fs-label);\n            font-weight: 600;\n            letter-spacing: 0.2em;\n            text-transform: uppercase;\n            color: var(--ochre);\n        }\n\n        .dg .dg-offer-sub {\n            margin: 12px 0 0;\n            font-family: var(--display);\n            font-size: clamp(2.1rem, 1.6rem + 1.4vw, 2.8rem);\n            line-height: 1.15;\n            color: var(--ink);\n        }\n\n        .dg .dg-formula-promise {\n            position: relative;\n            align-self: end;\n            margin: 24px 0 0;\n            padding-left: 22px;\n            font-family: var(--display);\n            font-size: 1.1rem;\n            line-height: 1.35;\n            color: var(--ink);\n        }\n\n        .dg-formula-promise::before {\n            content: '';\n            position: absolute;\n            left: 1px;\n            top: 0.45em;\n            width: 8px;\n            height: 8px;\n            background: var(--gilt);\n            transform: rotate(45deg);\n        }\n\n        .dg-offer-sub strong {\n            font-weight: 400;\n            color: var(--red);\n        }\n\n        .dg-offer-grid {\n            display: grid;\n            grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);\n            grid-template-rows: repeat(4, auto);\n            column-gap: 0;\n            padding: 32px 0;\n        }\n\n        .dg-offer-grid .dg-formula {\n            display: grid;\n            grid-row: span 4;\n            grid-template-rows: subgrid;\n            align-content: start;\n        }\n\n        .dg-offer-grid .dg-formula + .dg-formula {\n            padding-left: clamp(24px, 3vw, 40px);\n            border-left: 1px solid var(--line);\n        }\n\n        .dg-offer-grid .dg-formula:first-child {\n            padding-right: clamp(24px, 3vw, 40px);\n        }\n\n        .dg-formula h3 {\n            font-family: var(--display);\n            font-size: 1.5rem;\n            line-height: 1.2;\n            color: var(--ink);\n        }\n\n        .dg .dg-formula-price {\n            margin: 8px 0 0;\n            font-family: var(--display);\n            font-size: clamp(1.7rem, 1.5rem + 0.6vw, 2.1rem);\n            line-height: 1;\n            color: var(--ink);\n        }\n\n        .dg-formula-price small {\n            margin-left: 6px;\n            font-family: var(--text);\n            font-size: 1rem;\n            color: var(--muted);\n        }\n\n        .dg-program {\n            margin-top: 14px;\n        }\n\n        .dg .dg-formula-tag {\n            margin: 10px 0 0;\n            font-family: var(--display);\n            font-size: 1.15rem;\n            font-style: italic;\n            color: var(--ochre);\n        }\n\n        .dg .dg-program-head {\n            margin: 10px 0 4px;\n            font-size: var(--fs-label);\n            font-weight: 600;\n            letter-spacing: 0.16em;\n            text-transform: uppercase;\n            color: var(--muted);\n        }\n\n        .dg-program .dg-formula-note {\n            margin: 12px 0 0 30px;\n        }\n\n        .dg-program summary {\n            display: inline-flex;\n            align-items: center;\n            gap: 8px;\n            padding: 6px 0;\n            font-size: var(--fs-small);\n            font-weight: 600;\n            letter-spacing: 0.04em;\n            color: var(--red);\n            cursor: pointer;\n            list-style: none;\n        }\n\n        .dg-program summary::-webkit-details-marker {\n            display: none;\n        }\n\n        .dg-program summary::before {\n            content: '+';\n            font-size: 1.15rem;\n            line-height: 1;\n            transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);\n        }\n\n        .dg-program[open] summary::before {\n            transform: rotate(45deg);\n        }\n\n        .dg-program .dg-list {\n            margin-top: 8px;\n        }\n\n        .dg-offer-foot {\n            padding-top: 24px;\n            border-top: 1px solid var(--line);\n        }\n\n        .dg .dg-offer-cap {\n            margin: 0 0 20px;\n            color: var(--muted);\n        }\n\n        .dg-offer-cta {\n            display: flex;\n            flex-wrap: wrap;\n            align-items: center;\n            gap: 16px 28px;\n        }\n\n        .dg-formula {\n            padding: 0;\n        }\n\n        .dg-formula-top {\n            display: flex;\n            flex-wrap: wrap;\n            justify-content: space-between;\n            align-items: baseline;\n            gap: 4px 24px;\n            padding-bottom: 18px;\n            border-bottom: 1px solid var(--line);\n        }\n\n        .dg-formula-top h3 {\n            font-family: var(--display);\n            font-size: clamp(2rem, 1.6rem + 1.2vw, 2.6rem);\n            line-height: 1.1;\n            color: var(--ink);\n        }\n\n        .dg-formula-top .dg-formula-price {\n            font-family: var(--display);\n            font-size: var(--fs-price);\n            line-height: 1;\n            color: var(--red);\n            white-space: nowrap;\n        }\n\n        .dg-formula-top .dg-formula-price small {\n            font-family: var(--text);\n            font-size: var(--fs-small);\n            color: var(--muted);\n            margin-left: 8px;\n        }\n\n        .dg .dg-formula .dg-formula-desc {\n            font-size: 1rem;\n            line-height: 1.6;\n            color: var(--muted);\n            margin: 16px 0 0;\n            max-width: 32ch;\n            hyphens: manual;\n            text-wrap: pretty;\n        }\n\n        .dg-program .dg-list {\n            position: relative;\n            margin: 14px 0 0 4px;\n        }\n\n        .dg-program .dg-list::before {\n            content: '';\n            position: absolute;\n            left: 3px;\n            top: 0.7em;\n            bottom: 0.7em;\n            width: 1px;\n            background: rgba(194, 133, 42, 0.45);\n        }\n\n        .dg-formula .dg-program .dg-list li {\n            padding: 0 0 14px 26px;\n            font-size: 0.93rem;\n            line-height: 1.45;\n            color: var(--ink);\n        }\n\n        .dg-formula .dg-program .dg-list li:last-child {\n            padding-bottom: 0;\n        }\n\n        .dg-program .dg-list li::before {\n            left: 0;\n            top: 0.42em;\n            width: 7px;\n            height: 7px;\n            border: 0;\n            background: var(--gilt);\n            box-shadow: 0 0 0 3px var(--paper);\n        }\n\n        .dg-when {\n            color: var(--ochre);\n            font-weight: 600;\n        }\n\n        .dg-formula .dg-list li {\n            padding-left: 26px;\n        }\n\n        .dg-list {\n            list-style: none;\n            margin: 6px 0 0;\n            padding: 0;\n        }\n\n        .dg-list li {\n            position: relative;\n            padding: 3px 0 3px 22px;\n            color: var(--ink);\n        }\n\n        .dg-list li::before {\n            content: '';\n            position: absolute;\n            left: 3px;\n            top: 0.75em;\n            width: 8px;\n            height: 8px;\n            border: 1px solid rgba(43, 33, 27, 0.3);\n            transform: rotate(45deg);\n        }\n\n        .dg-formula-note {\n            display: block;\n            margin-top: 6px;\n            font-size: 0.82rem;\n            line-height: 1.5;\n            font-style: italic;\n            color: var(--muted);\n        }\n\n        \/* Label + bouton t\u00e9l\u00e9phone, m\u00eame mod\u00e8le que sous les formules *\/\n        .dg-book {\n            display: flex;\n            flex-direction: column;\n            align-items: flex-start;\n            gap: 14px;\n            margin-top: 32px;\n        }\n\n        .dg-book .dg-btn {\n            flex: none;\n        }\n\n        \/* Bouton num\u00e9ro de t\u00e9l\u00e9phone : plus grand que les boutons d'action *\/\n        .dg-btn--phone {\n            gap: 14px;\n            padding: 18px 38px;\n            font-size: 1.15rem;\n            letter-spacing: 0.12em;\n        }\n\n        .dg-btn.dg-btn--phone svg {\n            width: 22px;\n            height: 22px;\n        }\n\n        .dg .dg-book-label {\n            margin: 0;\n            font-size: 0.95rem;\n            line-height: 1.4;\n            font-weight: 600;\n            letter-spacing: 0.16em;\n            text-transform: uppercase;\n            color: var(--ochre);\n        }\n\n        .dg .dg-sharpen-price {\n            font-family: var(--display);\n            font-size: var(--fs-price);\n            line-height: 1;\n            color: var(--red);\n            margin: 0 0 24px;\n        }\n\n        .dg-sharpen-price small {\n            font-family: var(--text);\n            font-size: var(--fs-small);\n            color: var(--muted);\n            margin-left: 8px;\n        }\n\n        .dg-sharpen-list li {\n            padding: 6px 0 6px 24px;\n        }\n\n        .dg-sharpen-list li::before {\n            top: 1.05em;\n        }\n\n        \/* ===============================================\n           6. BOUTIQUE (carrousel encadr\u00e9, texte \u00e0 c\u00f4t\u00e9)\n        =============================================== *\/\n        .dg-shop-head {\n            padding-top: 0;\n            padding-bottom: 48px;\n        }\n\n        .dg-shop-head .dg-head {\n            margin-bottom: 0;\n        }\n\n        .dg-shop-body {\n            padding-bottom: var(--section);\n        }\n\n        .knives-carousel {\n            position: relative;\n            width: 100%;\n            overflow: hidden;\n        }\n\n        .knives-carousel .carousel-slides {\n            display: flex;\n            height: 100%;\n            transition: transform 0.8s cubic-bezier(0.65, 0, 0.35, 1);\n        }\n\n        .knives-carousel .carousel-slide {\n            position: relative;\n            display: grid;\n            grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);\n            gap: clamp(32px, 5vw, 64px);\n            align-items: center;\n        }\n\n        .knives-carousel .slide-media {\n            position: relative;\n            aspect-ratio: 4 \/ 3;\n            overflow: hidden;\n            border-radius: var(--radius);\n            background: var(--frame);\n        }\n\n        .knives-carousel .slide-media::after {\n            content: '';\n            position: absolute;\n            inset: 10px;\n            border: 1px solid rgba(250, 246, 238, 0.7);\n            border-radius: calc(var(--radius) - 8px);\n            pointer-events: none;\n        }\n\n        .knives-carousel .slide-media img {\n            width: 100%;\n            height: 100%;\n            max-width: none;\n            object-fit: cover;\n            object-position: center 40%;\n            transform: scale(1.05);\n            transition: transform 12s ease-out;\n        }\n\n        .knives-carousel .carousel-slide.active .slide-media img {\n            transform: scale(1);\n        }\n\n        .knives-carousel .slide-overlay {\n            display: none;\n        }\n\n        .knives-carousel .slide-content {\n            display: flex;\n            flex-direction: column;\n            align-items: flex-start;\n            color: var(--ink);\n        }\n\n        .knives-carousel .slide-title {\n            font-family: var(--display);\n            font-size: clamp(2.4rem, 1.8rem + 2vw, 3.4rem);\n            line-height: 1;\n            color: var(--ink);\n        }\n\n        .knives-carousel .slide-subtitle {\n            font-style: italic;\n            color: var(--ochre);\n            margin: 6px 0 0;\n        }\n\n        .knives-carousel .slide-price {\n            font-family: var(--display);\n            font-size: clamp(1.8rem, 1.4rem + 1.5vw, 2.6rem);\n            line-height: 1;\n            color: var(--red);\n            margin-top: 20px;\n        }\n\n        .knives-carousel .slide-price:empty {\n            display: none;\n        }\n\n        .knives-carousel .slide-price del {\n            opacity: 0.6;\n            margin-right: 8px;\n        }\n\n        .knives-carousel .slide-description {\n            max-width: 46ch;\n            line-height: 1.7;\n            color: var(--ink);\n            margin: 24px 0 28px;\n        }\n\n        .knives-carousel .carousel-nav {\n            position: relative;\n            width: 40px;\n            height: 40px;\n            display: grid;\n            place-items: center;\n            padding: 0;\n            border-radius: 50%;\n            border: 1px solid var(--line);\n            background: transparent;\n            color: var(--ink);\n            cursor: pointer;\n            transition: background-color 0.25s ease, border-color 0.25s ease;\n        }\n\n        .knives-carousel .carousel-nav:hover {\n            background: var(--tint);\n            border-color: var(--gilt);\n        }\n\n        .knives-carousel .carousel-nav::before {\n            content: '';\n            width: 10px;\n            height: 10px;\n            border-top: 2px solid currentColor;\n            border-right: 2px solid currentColor;\n        }\n\n        .knives-carousel .carousel-prev::before {\n            transform: rotate(-135deg) translate(-2px, 2px);\n        }\n\n        .knives-carousel .carousel-next::before {\n            transform: rotate(45deg) translate(-2px, 2px);\n        }\n\n        .knives-carousel .carousel-pagination {\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            gap: 20px;\n            margin-top: 40px;\n        }\n\n        .knives-carousel .pagination-pause {\n            display: grid;\n            place-items: center;\n            width: 40px;\n            height: 40px;\n            margin-left: 8px;\n            padding: 0;\n            border: 1px solid var(--line);\n            border-radius: 50%;\n            background: transparent;\n            color: var(--ink);\n            cursor: pointer;\n        }\n\n        .knives-carousel .pagination-pause svg {\n            width: 14px;\n            height: 14px;\n        }\n\n        .knives-carousel .pagination-pause .icon-play,\n        .knives-carousel .pagination-pause[aria-pressed=\"true\"] .icon-pause {\n            display: none;\n        }\n\n        .knives-carousel .pagination-pause[aria-pressed=\"true\"] .icon-play {\n            display: block;\n        }\n\n        .knives-carousel .pagination-dot {\n            position: relative;\n            width: 10px;\n            height: 10px;\n            padding: 0;\n            border: 0;\n            border-radius: 999px;\n            background: rgba(43, 33, 27, 0.2);\n            cursor: pointer;\n            transition: width 0.35s ease, background-color 0.35s ease;\n        }\n\n        .knives-carousel .pagination-dot::after {\n            content: '';\n            position: absolute;\n            inset: -17px -8px;\n        }\n\n        .knives-carousel .pagination-dot.active {\n            width: 30px;\n            background: var(--gilt);\n        }\n\n        .knives-carousel .swipe-hint {\n            display: none;\n        }\n\n        \/* ===============================================\n           7. MES CR\u00c9ATIONS\n        =============================================== *\/\n        .dg-creations {\n            display: grid;\n            grid-template-columns: repeat(2, minmax(0, 1fr));\n            gap: 40px;\n        }\n\n        .dg-creation .dg-frame {\n            aspect-ratio: 5 \/ 4;\n            margin-bottom: 24px;\n        }\n\n        .dg-creation h3 {\n            font-family: var(--display);\n            font-size: var(--fs-h3);\n            line-height: 1.1;\n            color: var(--ink);\n            margin-bottom: 10px;\n        }\n\n        .dg-creation p {\n            color: var(--muted);\n            max-width: 52ch;\n        }\n\n        \/* ===============================================\n           8. SUR MESURE\n        =============================================== *\/\n        .dg-band {\n            position: relative;\n            max-width: 1200px;\n            margin: 0 auto;\n            padding: clamp(64px, 8vw, 96px) var(--gutter);\n            border-radius: var(--radius-lg);\n            background: var(--night);\n            border: 1px solid rgba(194, 133, 42, 0.35);\n            text-align: center;\n            isolation: isolate;\n            overflow: hidden;\n            color: var(--paper-light);\n        }\n\n        .dg-band::before {\n            content: '';\n            position: absolute;\n            inset: 0;\n            z-index: -2;\n            background: url('https:\/\/ledragonnier.com\/wp-content\/uploads\/2026\/10\/Person-Holding-Cup-scaled.jpg') 50% 30% \/ cover no-repeat;\n            filter: blur(3px);\n            transform: scale(1.06);\n        }\n\n        .dg-band::after {\n            content: '';\n            position: absolute;\n            inset: 0;\n            z-index: -1;\n            background: radial-gradient(ellipse 70% 80% at 50% 50%, rgba(18, 18, 18, 0.62) 0%, rgba(18, 18, 18, 0.35) 100%);\n        }\n\n        .dg-band .dg-eyebrow {\n            color: var(--amber);\n        }\n\n        .dg-band .dg-title {\n            color: var(--paper-light);\n        }\n\n        .dg .dg-band .dg-lede {\n            color: var(--paper-light);\n        }\n\n        .dg-band-corners {\n            position: absolute;\n            inset: 14px;\n            pointer-events: none;\n        }\n\n        .dg-band-corners span {\n            position: absolute;\n            width: 44px;\n            height: 44px;\n            background: url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' viewBox='0 0 44 44' fill='none' stroke='%23C2852A'%3E%3Cpath d='M2 42V14C2 7 7 2 14 2h28'\/%3E%3Cpath d='M8 42V18c0-6 4-10 10-10h24'\/%3E%3Cpath d='M14 14l5 5-5 5-5-5z'\/%3E%3C\/svg%3E\") center \/ contain no-repeat;\n        }\n\n        .dg-band-corners span:nth-child(1) { top: 0; left: 0; }\n        .dg-band-corners span:nth-child(2) { top: 0; right: 0; transform: scaleX(-1); }\n        .dg-band-corners span:nth-child(3) { bottom: 0; left: 0; transform: scaleY(-1); }\n        .dg-band-corners span:nth-child(4) { bottom: 0; right: 0; transform: scale(-1, -1); }\n\n        .dg .dg-band .dg-lede {\n            margin-bottom: 32px;\n        }\n\n        \/* ===============================================\n           9. FAQ\n        =============================================== *\/\n        .dg-faq {\n            max-width: 780px;\n            margin: 0 auto;\n            border-top: 1px solid var(--line);\n        }\n\n        .dg-faq details {\n            border-bottom: 1px solid var(--line);\n        }\n\n        .dg-faq summary {\n            position: relative;\n            padding: 24px 48px 24px 0;\n            font-size: var(--fs-lede);\n            font-weight: 500;\n            color: var(--ink);\n            cursor: pointer;\n            list-style: none;\n        }\n\n        .dg-faq summary::-webkit-details-marker {\n            display: none;\n        }\n\n        .dg-faq summary::after {\n            content: '+';\n            position: absolute;\n            right: 8px;\n            top: 50%;\n            transform: translateY(-50%);\n            font-size: 1.6rem;\n            line-height: 1;\n            color: var(--red);\n            transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);\n        }\n\n        .dg-faq details[open] summary::after {\n            transform: translateY(-50%) rotate(45deg);\n        }\n\n        .dg-faq .dg-answer {\n            padding: 0 48px 24px 0;\n            color: var(--muted);\n        }\n\n        \/* Ancres : d\u00e9calage sous le menu WordPress *\/\n        #leo-presentation,\n        #anchor-presentation,\n        #prestations_anchor,\n        #boutique_anchor,\n        #creation_anchor {\n            scroll-margin-top: 90px;\n        }\n\n        \/* ===============================================\n           RESPONSIVE\n        =============================================== *\/\n        @media (max-width: 860px) {\n            .dg {\n                font-size: 16px;\n            }\n\n            .dg-split,\n            .dg-atelier {\n                grid-template-columns: 1fr;\n            }\n\n            .dg-split--reverse .dg-split-media {\n                order: 0;\n            }\n\n            .dg-atelier .dg-frame {\n                aspect-ratio: 16 \/ 10;\n            }\n\n            .dg-stage {\n                min-height: 0;\n            }\n\n            .dg-stage-infos {\n                flex-direction: column;\n                align-items: center;\n                gap: 6px;\n            }\n\n            .dg-stage-infos li + li {\n                border-left: 0;\n            }\n\n            .dg-timeline::before {\n                left: 9px;\n                transform: none;\n            }\n\n            .dg-tl-step {\n                grid-template-columns: 1fr;\n                gap: 24px;\n                padding: 40px 0 40px 44px;\n            }\n\n            .dg-tl-marker {\n                left: 10px;\n                top: 52px;\n            }\n\n            .dg-creations {\n                grid-template-columns: 1fr;\n            }\n\n            .dg-stage-offer {\n                grid-template-columns: 1fr;\n            }\n\n            .dg-stage-photo {\n                flex: none;\n                min-height: 0;\n                aspect-ratio: 16 \/ 10;\n            }\n\n            .dg-offer-grid {\n                grid-template-columns: minmax(0, 1fr);\n                grid-template-rows: none;\n                gap: 28px;\n            }\n\n            .dg-offer-grid .dg-formula {\n                display: block;\n            }\n\n            .dg-offer-grid .dg-formula + .dg-formula {\n                padding: 28px 0 0;\n                border-left: 0;\n                border-top: 1px solid var(--line);\n            }\n\n            .dg-offer-grid .dg-formula:first-child {\n                padding-right: 0;\n            }\n\n            .dg-stage-knife {\n                flex: none;\n                height: 168px;\n                padding: 22px 24px 60px;\n            }\n\n            .dg-offer-cta .dg-btn {\n                flex: 1 1 100%;\n            }\n\n            .knives-carousel .carousel-slide {\n                grid-template-columns: 1fr;\n                gap: 28px;\n            }\n\n            .knives-carousel .slide-content {\n                align-items: center;\n                text-align: center;\n            }\n        }\n\n        @media (max-width: 520px) {\n            .dg-eyebrow {\n                gap: 10px;\n                letter-spacing: 0.12em;\n            }\n\n            .dg-eyebrow::before,\n            .dg-eyebrow::after {\n                width: 16px;\n            }\n\n            .dg-band .dg-btn,\n            .knives-carousel .dg-btn {\n                width: 100%;\n            }\n\n            .dg-book .dg-btn {\n                align-self: stretch;\n            }\n\n            .dg-band-corners span {\n                width: 30px;\n                height: 30px;\n            }\n        }\n\n        @media (prefers-reduced-motion: reduce) {\n            .dg *,\n            .dg *::before,\n            .dg *::after {\n                transition-duration: 0.01ms !important;\n            }\n        }\n\n        \/* ===============================================\n           STAGE DE COUTELLERIE (accroche + formules)\n        =============================================== *\/\n        .dg-sc-hero {\n            display: grid;\n            grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);\n            gap: clamp(40px, 6vw, 80px);\n            align-items: center;\n        }\n\n        .dg-sc .dg-head {\n            margin-bottom: 20px;\n        }\n\n        .dg-sc .dg-title {\n            font-size: clamp(2.4rem, 1.6rem + 1.8vw, 3.1rem);\n        }\n\n        .dg .dg-sc-lede {\n            margin: 0 0 20px;\n            font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);\n            font-style: italic;\n            color: var(--ochre);\n        }\n\n        .dg .dg-sc-desc {\n            margin: 0 0 20px;\n            font-size: var(--fs-lede);\n            line-height: 1.65;\n            color: var(--muted);\n        }\n\n        .dg-sc-desc strong {\n            color: var(--ink);\n            font-weight: 500;\n        }\n\n        .dg-sc-infos {\n            list-style: none;\n            margin: 0 0 28px;\n            padding: 0;\n            display: grid;\n            gap: 10px;\n        }\n\n        .dg-sc-infos li {\n            display: flex;\n            align-items: center;\n            gap: 14px;\n            color: var(--ink);\n        }\n\n        .dg-sc-infos svg {\n            width: 22px;\n            height: 22px;\n            flex: none;\n            color: var(--gilt);\n        }\n\n        .dg-btn svg {\n            width: 18px;\n            height: 18px;\n            flex: none;\n        }\n\n        .dg-sc-photo {\n            aspect-ratio: 4 \/ 3;\n            box-shadow: 0 24px 48px -20px rgba(43, 33, 27, 0.45);\n        }\n\n        .dg-sc-photo img {\n            object-position: 50% 45%;\n        }\n\n        .dg-sc-formulas {\n            padding: clamp(48px, 6vh, 72px) 0;\n        }\n\n        .dg-sc-formulas .dg-wrap {\n            max-width: 1280px;\n        }\n\n        .dg-sc-layout {\n            display: grid;\n            grid-template-columns: minmax(0, 0.8fr) minmax(0, 2fr);\n            gap: clamp(32px, 4vw, 56px);\n            align-items: center;\n        }\n\n        .dg-sc-aside .dg-head {\n            margin-bottom: 24px;\n        }\n\n        .dg-sc-aside .dg-lede {\n            margin-top: 16px;\n        }\n\n        .dg .dg-sc-aside-cap {\n            margin: 0 0 20px;\n            color: var(--muted);\n        }\n\n        .dg-sc-grid {\n            display: grid;\n            grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);\n            gap: clamp(20px, 2vw, 28px);\n            align-items: stretch;\n        }\n\n        .dg-sc-card {\n            position: relative;\n            display: flex;\n            flex-direction: column;\n            overflow: hidden;\n            border-radius: var(--radius);\n            background: var(--paper-light);\n            border: 1px solid var(--line);\n            box-shadow: 0 6px 18px -12px rgba(43, 33, 27, 0.25);\n            transition: transform 0.3s ease, box-shadow 0.3s ease;\n        }\n\n        .dg-sc-card:hover {\n            transform: translateY(-4px);\n            box-shadow: 0 18px 36px -18px rgba(43, 33, 27, 0.35);\n        }\n\n        .dg-sc-card--featured {\n            border-color: rgba(194, 133, 42, 0.6);\n            box-shadow: 0 18px 40px -20px rgba(43, 33, 27, 0.4);\n        }\n\n        .dg-sc-badge {\n            position: absolute;\n            top: 0;\n            right: 24px;\n            z-index: 1;\n            padding: 5px 12px;\n            border-radius: 0 0 8px 8px;\n            background: var(--ochre);\n            color: var(--paper-light);\n            font-size: var(--fs-label);\n            font-weight: 600;\n            letter-spacing: 0.08em;\n            text-transform: uppercase;\n        }\n\n        .dg-sc-card-media {\n            margin: 0;\n            height: 224px;\n            background: #fff;\n        }\n\n        .dg-sc-card-media img {\n            width: 100%;\n            height: 100%;\n            object-fit: cover;\n            object-position: 50% 30%;\n            display: block;\n        }\n\n        .dg-sc-card-body {\n            display: flex;\n            flex-direction: column;\n            flex: 1;\n            padding: 36px clamp(22px, 2.4vw, 30px) 26px;\n        }\n\n        .dg-sc-card-head {\n            display: flex;\n            align-items: baseline;\n            justify-content: space-between;\n            gap: 12px;\n            margin-bottom: 16px;\n            padding-bottom: 16px;\n            border-bottom: 1px solid var(--line);\n        }\n\n        .dg-sc-card-head h3 {\n            font-family: var(--display);\n            font-size: clamp(1.7rem, 1.4rem + 0.8vw, 2.1rem);\n            line-height: 1.1;\n            color: var(--ink);\n        }\n\n        .dg .dg-sc-price {\n            margin: 0;\n            font-family: var(--display);\n            font-size: clamp(1.7rem, 1.4rem + 0.8vw, 2.1rem);\n            line-height: 1;\n            color: var(--red);\n            white-space: nowrap;\n        }\n\n        .dg-sc-price small {\n            margin-left: 4px;\n            font-family: var(--text);\n            font-size: var(--fs-small);\n            color: var(--muted);\n        }\n\n        .dg .dg-sc-card-desc {\n            margin: 0 0 28px;\n            font-size: 1.15rem;\n            font-weight: 600;\n            line-height: 1.45;\n            color: #1C1917;\n        }\n\n        .dg .dg-sc-label {\n            margin: 0 0 6px;\n            font-size: var(--fs-label);\n            font-weight: 600;\n            font-weight: 700;\n            letter-spacing: 0.05em;\n            text-transform: uppercase;\n            color: #A8A29E;\n        }\n\n        .dg-sc-card .dg-list {\n            display: grid;\n            gap: 12px;\n            margin-top: 10px;\n        }\n\n        .dg-sc-card .dg-list li {\n            padding: 0 0 0 30px;\n            line-height: 1.55;\n            color: #57534E;\n        }\n\n        .dg-sc-card .dg-list li::before {\n            left: 0;\n            top: 0.1em;\n            width: 18px;\n            height: 18px;\n            border: 0;\n            transform: none;\n            background: var(--gilt);\n            -webkit-mask: url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'\/%3E%3C\/svg%3E\") center \/ contain no-repeat;\n            mask: url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'\/%3E%3C\/svg%3E\") center \/ contain no-repeat;\n        }\n\n        .dg-sc-steps {\n            list-style: none;\n            margin: 10px 0 0;\n            padding: 0;\n        }\n\n        .dg-sc-steps li {\n            display: grid;\n            grid-template-columns: 6.5rem minmax(0, 1fr);\n            gap: 16px;\n            padding: 12px 0;\n            border-top: 1px solid var(--line);\n            line-height: 1.55;\n            color: #57534E;\n        }\n\n        .dg-sc-steps li:first-child {\n            border-top: 0;\n            padding-top: 4px;\n        }\n\n        .dg-sc-steps li:nth-child(2) {\n            border-top: 0;\n            padding-top: 0;\n        }\n\n        @media (max-width: 860px) {\n            .dg-sc-steps li {\n                grid-template-columns: 5.5rem minmax(0, 1fr);\n            }\n        }\n\n        .dg-sc-when {\n            font-weight: 700;\n            color: #44403C;\n        }\n\n        .dg-sc-card .dg-when {\n            color: #44403C;\n            font-weight: 700;\n        }\n\n        .dg .dg-sc-note {\n            margin: 24px 0 0;\n            padding: 12px 16px;\n            border-radius: 6px;\n            background: var(--paper);\n            font-size: 0.82rem;\n            font-style: italic;\n            text-align: center;\n            color: #78716C;\n        }\n\n        .dg-sc-foot {\n            margin-top: clamp(48px, 5vw, 64px);\n            text-align: center;\n        }\n\n        .dg .dg-sc-foot p {\n            margin: 0 0 20px;\n            color: var(--muted);\n        }\n\n        @media (max-width: 860px) {\n            .dg-sc-hero,\n            .dg-sc-layout,\n            .dg-sc-grid {\n                grid-template-columns: minmax(0, 1fr);\n            }\n\n            .dg-sc-photo {\n                aspect-ratio: 16 \/ 10;\n            }\n\n            .dg-sc-foot .dg-btn {\n                width: 100%;\n            }\n        }\n        \/* ===============================================\n           LE COUTEAU QUE VOUS ALLEZ MONTER\n        =============================================== *\/\n        .dg-kn-block {\n            margin-top: clamp(32px, 5vh, 56px);\n            padding-top: clamp(24px, 4vh, 40px);\n            border-top: 1px solid var(--line);\n            text-align: center;\n        }\n\n        .dg .dg-kn-label {\n            margin: 0 0 6px;\n            font-size: var(--fs-label);\n            font-weight: 600;\n            letter-spacing: 0.2em;\n            text-transform: uppercase;\n            color: var(--ochre);\n        }\n\n        .dg .dg-kn-block .dg-kn-text {\n            margin: 0 auto;\n            max-width: 52ch;\n        }\n\n        .dg-kn-block .dg-divider {\n            margin-bottom: clamp(8px, 1.5vh, 16px);\n        }\n\n        .dg .dg-kn-title {\n            margin-bottom: 14px;\n            font-family: var(--display);\n            font-size: clamp(2rem, 1.5rem + 1.4vw, 2.6rem);\n            line-height: 1.1;\n            color: var(--red);\n        }\n\n        .dg .dg-kn-block .dg-kn-title {\n            margin-bottom: 0;\n        }\n\n        .dg-kn-block .dg-kn-figure {\n            margin-top: 0;\n            margin-bottom: -14px;\n            padding: 0;\n        }\n\n        .dg .dg-kn-sub {\n            margin-bottom: 10px;\n            font-family: var(--display);\n            font-size: clamp(1.5rem, 1.2rem + 0.8vw, 1.9rem);\n            line-height: 1.2;\n            color: var(--ink);\n        }\n\n        .dg-kn-figure figcaption {\n            margin-top: 14px;\n            font-size: var(--fs-label);\n            font-weight: 600;\n            letter-spacing: 0.16em;\n            text-transform: uppercase;\n            color: var(--ochre);\n        }\n\n        .dg .dg-kn-note {\n            margin: clamp(20px, 3.5vh, 32px) auto 0;\n            font-size: var(--fs-small);\n            color: #6B5C50;\n        }\n\n        .dg-kn-note strong {\n            font-weight: 600;\n            color: var(--ink);\n        }\n\n        .dg-kn-text strong {\n            font-weight: 400;\n            font-style: normal;\n            color: var(--red);\n        }\n\n        .dg-kn-figure {\n            position: relative;\n            margin: 0 auto;\n            max-width: 780px;\n            padding: clamp(24px, 5vh, 56px) 0;\n        }\n\n        .dg-kn-figure::before {\n            content: '';\n            position: absolute;\n            inset: 0 -10%;\n            z-index: -1;\n            background: radial-gradient(ellipse 50% 45% at 50% 55%, rgba(194, 133, 42, 0.16) 0%, rgba(194, 133, 42, 0) 100%);\n        }\n\n        .dg-kn-figure img {\n            display: block;\n            width: 100%;\n            height: auto;\n            mix-blend-mode: multiply;\n        }\n\n        .dg-kn-specs {\n            display: grid;\n            grid-template-columns: repeat(3, minmax(0, 1fr));\n            max-width: 980px;\n            margin: clamp(8px, 2vh, 24px) auto 0;\n            text-align: left;\n        }\n\n        .dg-kn-specs > div {\n            padding: 4px clamp(20px, 2.5vw, 32px);\n        }\n\n        .dg-kn-specs > div + div {\n            border-left: 1px solid rgba(194, 133, 42, 0.45);\n        }\n\n        .dg-kn-specs dt {\n            margin-bottom: 8px;\n            font-family: var(--display);\n            font-size: 1.35rem;\n            color: var(--ink);\n        }\n\n        .dg-kn-specs dd {\n            margin: 0;\n            line-height: 1.6;\n            color: var(--muted);\n        }\n\n        .dg .dg-kn-text {\n            margin: 0 auto;\n            max-width: 46ch;\n            font-size: clamp(1.15rem, 1rem + 0.5vw, 1.35rem);\n            line-height: 1.6;\n            color: var(--muted);\n        }\n\n        \/* ===============================================\n           CHOISISSEZ VOTRE FORMULE\n        =============================================== *\/\n        .dg .dg-sc {\n            padding-top: clamp(40px, 6vh, 64px);\n            padding-bottom: clamp(40px, 6vh, 64px);\n        }\n\n        @media (min-width: 861px) {\n            .dg .dg-sc .dg-sc-hero {\n                grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);\n            }\n        }\n\n        .dg .dg-fo {\n            padding-top: clamp(40px, 6vh, 64px);\n        }\n\n        .dg-fo .dg-head {\n            margin-bottom: clamp(32px, 5vh, 56px);\n        }\n\n        .dg-fo-grid {\n            display: grid;\n            grid-template-columns: repeat(2, minmax(0, 1fr));\n            gap: clamp(24px, 3vw, 40px);\n            max-width: 1040px;\n            margin: 0 auto;\n        }\n\n        .dg-fo-card {\n            position: relative;\n            display: flex;\n            flex-direction: column;\n            overflow: hidden;\n            border-radius: var(--radius);\n            background: var(--paper-light);\n            border: 1px solid var(--line);\n            box-shadow: 0 2px 6px -2px rgba(43, 33, 27, 0.12);\n            transition: transform 0.25s ease, box-shadow 0.25s ease;\n        }\n\n        .dg-fo-card:hover {\n            transform: translateY(-4px);\n            box-shadow: 0 16px 32px -16px rgba(43, 33, 27, 0.3);\n        }\n\n        .dg-fo-card--featured {\n            border-color: rgba(194, 133, 42, 0.65);\n            box-shadow: 0 18px 40px -18px rgba(43, 33, 27, 0.35);\n        }\n\n        .dg-fo-badge {\n            position: absolute;\n            top: 0;\n            right: 24px;\n            z-index: 2;\n            padding: 6px 14px;\n            border-radius: 0 0 10px 10px;\n            background: var(--ochre);\n            color: var(--paper-light);\n            font-size: var(--fs-label);\n            font-weight: 600;\n            letter-spacing: 0.12em;\n            text-transform: uppercase;\n        }\n\n        .dg-fo-media {\n            position: relative;\n            margin: 0;\n            height: clamp(180px, 24vh, 240px);\n        }\n\n        .dg-fo-media img {\n            display: block;\n            width: 100%;\n            height: 100%;\n            object-fit: cover;\n        }\n\n        .dg-fo-card .dg-fo-media img {\n            object-position: 50% 40%;\n        }\n\n        .dg-fo-body {\n            display: flex;\n            flex: 1;\n            flex-direction: column;\n            padding: clamp(24px, 3vw, 32px);\n        }\n\n        .dg-fo-top {\n            display: flex;\n            align-items: baseline;\n            justify-content: space-between;\n            gap: 12px;\n            margin-bottom: 14px;\n        }\n\n        .dg-fo-top h3 {\n            font-family: var(--display);\n            font-size: clamp(1.7rem, 1.4rem + 0.8vw, 2.1rem);\n            line-height: 1.1;\n            color: var(--ink);\n        }\n\n        .dg .dg-fo-price {\n            margin: 0;\n            font-family: var(--display);\n            font-size: clamp(1.6rem, 1.3rem + 0.8vw, 2rem);\n            line-height: 1;\n            color: var(--red);\n            white-space: nowrap;\n        }\n\n        .dg-fo-price small {\n            margin-left: 4px;\n            font-family: var(--text);\n            font-size: var(--fs-small);\n            color: var(--muted);\n        }\n\n        \/* Trois niveaux : l'accroche (1re phrase, Lora medium), le d\u00e9tail\n           (texte courant, plus clair), puis le programme sous un filet. *\/\n        .dg .dg-fo-desc {\n            margin: 0 0 24px;\n            font-size: 1rem;\n            line-height: 1.6;\n            color: var(--muted);\n        }\n\n        .dg-fo-hook {\n            display: block;\n            margin-bottom: 8px;\n            font-size: 1.15rem;\n            font-weight: 500;\n            line-height: 1.4;\n            color: var(--ink-strong);\n        }\n\n        .dg .dg-fo-label {\n            margin: 0 0 12px;\n            padding-top: 20px;\n            border-top: 1px solid var(--line);\n            font-size: var(--fs-label);\n            font-weight: 600;\n            letter-spacing: 0.16em;\n            text-transform: uppercase;\n            color: #6B5C50;\n        }\n\n        .dg-fo-list {\n            list-style: none;\n            margin: 0;\n            padding: 0;\n            display: grid;\n            gap: 10px;\n        }\n\n        .dg-fo-list li {\n            position: relative;\n            padding-left: 28px;\n            font-size: 0.95rem;\n            line-height: 1.5;\n            color: var(--muted);\n        }\n\n        .dg-fo-list li::before {\n            content: '';\n            position: absolute;\n            left: 0;\n            top: 0.15em;\n            width: 18px;\n            height: 18px;\n            background: var(--gilt);\n            -webkit-mask: url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'\/%3E%3C\/svg%3E\") center \/ contain no-repeat;\n            mask: url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'\/%3E%3C\/svg%3E\") center \/ contain no-repeat;\n        }\n\n        .dg-fo-list strong {\n            font-weight: 500;\n            color: var(--ink);\n        }\n\n        .dg .dg-fo-note {\n            margin: auto 0 0;\n            padding: 10px 14px;\n            border-radius: 8px;\n            background: var(--paper);\n            font-size: var(--fs-small);\n            text-align: center;\n            color: var(--muted);\n        }\n\n        .dg-fo-card--featured .dg-fo-list {\n            margin-bottom: 22px;\n        }\n\n        .dg-fo-foot {\n            margin-top: clamp(32px, 5vh, 56px);\n            text-align: center;\n        }\n\n        .dg .dg-fo-foot .dg-book-label {\n            margin: 32px 0 14px;\n            color: var(--ochre);\n        }\n\n        .dg .dg-fo-foot p {\n            margin: 0 0 18px;\n            color: var(--muted);\n        }\n\n        @media (max-width: 860px) {\n            .dg-fo {\n                min-height: 0;\n            }\n\n            .dg-kn-specs {\n                grid-template-columns: minmax(0, 1fr);\n                gap: 20px;\n            }\n\n            .dg-kn-specs > div {\n                padding: 0;\n            }\n\n            .dg-kn-specs > div + div {\n                border-left: 0;\n                border-top: 1px solid rgba(194, 133, 42, 0.45);\n                padding-top: 20px;\n            }\n\n            .dg-fo-grid {\n                grid-template-columns: minmax(0, 1fr);\n            }\n\n            .dg-fo-foot .dg-btn {\n                width: 100%;\n            }\n        }\n\n        .dg .dg-title-sub {\n            margin: 14px 0 0;\n            font-size: 1.05rem;\n            letter-spacing: 0.02em;\n            color: var(--ochre);\n        }\n\n        .dg-split:has(.dg-emblem) {\n            align-items: center;\n        }\n\n        .dg-emblem {\n            display: grid;\n            grid-template-columns: 112px minmax(0, 1fr);\n            gap: 28px;\n            align-items: center;\n            margin: 32px 0 0;\n            padding-top: 28px;\n            border-top: 1px solid var(--line);\n        }\n\n        .dg-emblem img {\n            width: 112px;\n            mix-blend-mode: multiply;\n        }\n\n        .dg-emblem figcaption {\n            display: flex;\n            flex-direction: column;\n        }\n\n        .dg-emblem-label {\n            font-size: var(--fs-label);\n            font-weight: 600;\n            letter-spacing: 0.2em;\n            text-transform: uppercase;\n            color: var(--ochre);\n        }\n\n        .dg-emblem-title {\n            margin: 4px 0 10px;\n            font-family: var(--display);\n            font-size: 1.6rem;\n            line-height: 1.15;\n            color: var(--red);\n        }\n\n        .dg-emblem-text {\n            font-size: var(--fs-small);\n            line-height: 1.65;\n            color: var(--muted);\n        }\n\n        @media (max-width: 600px) {\n            .dg-emblem {\n                grid-template-columns: 72px minmax(0, 1fr);\n                gap: 18px;\n                align-items: start;\n            }\n\n            .dg-emblem img {\n                width: 72px;\n            }\n        }\n\n        .dg-path {\n            margin: 1.6em 0;\n            padding: 22px 26px;\n            border-radius: var(--radius);\n            background: var(--paper-light);\n            border: 1px solid rgba(194, 133, 42, 0.35);\n            max-width: 52ch;\n        }\n\n        .dg .dg-path-label {\n            margin: 0 0 4px;\n            font-size: var(--fs-label);\n            font-weight: 600;\n            letter-spacing: 0.2em;\n            text-transform: uppercase;\n            color: var(--ochre);\n        }\n\n        .dg .dg-path-title {\n            margin: 0;\n            font-family: var(--display);\n            font-size: 1.6rem;\n            line-height: 1.15;\n            color: var(--ink-strong);\n        }\n\n        .dg .dg-path-sub {\n            margin: 2px 0 12px;\n            font-size: var(--fs-small);\n            color: var(--muted);\n        }\n\n        .dg-diplomas {\n            list-style: none;\n            margin: 0;\n            padding: 0;\n        }\n\n        .dg-diplomas li {\n            display: grid;\n            grid-template-columns: 64px minmax(0, 1fr);\n            gap: 14px;\n            align-items: baseline;\n            padding: 6px 0;\n        }\n\n        .dg-diplomas strong {\n            font-family: var(--display);\n            font-size: 1.1rem;\n            font-weight: 400;\n            color: var(--red);\n        }\n\n        .dg-diplomas span {\n            font-size: var(--fs-small);\n            line-height: 1.5;\n            color: var(--ink);\n        }\n\n        .dg-diplomas small {\n            display: block;\n            margin-top: 2px;\n            font-size: 0.8rem;\n            color: var(--muted);\n        }\n\n        .dg-path-line strong {\n            font-weight: 600;\n            color: var(--ink-strong);\n        }\n\n        .dg .dg-path-notes {\n            margin-top: -0.6em;\n            margin-bottom: 1.6em;\n            font-size: var(--fs-small);\n            font-style: italic;\n            line-height: 1.6;\n            color: var(--muted);\n        }\n\n        \/* \u00c9chelle desktop : le site \u00e9tait un peu trop grand (rendu \u00e9quivalent \u00e0 un zoom navigateur de 90 %) *\/\n        @media (min-width: 1024px) {\n            .dg {\n                zoom: 0.9;\n            }\n        }\n\n    <\/style>\n<\/head>\n\n<body>\n<div class=\"dg\">\n\n    <!-- 0. HERO -->\n    <section class=\"dg-hero\">\n        <video class=\"dg-hero-video\" src=\"https:\/\/ledragonnier.com\/wp-content\/uploads\/2026\/10\/Le-Feu-Free-1.mp4\" autoplay muted loop playsinline preload=\"auto\" aria-hidden=\"true\"><\/video>\n        <div class=\"dg-hero-content\">\n            <h1 class=\"dg-hero-title\">Le Dragonnier<\/h1>\n            <p class=\"dg-hero-subtitle\">coutellerie artisanale dans le coeur de p\u00e9zenas<\/p>\n            <a href=\"#anchor-presentation\" class=\"dg-btn\">Me d\u00e9couvrir<\/a>\n        <\/div>\n    <\/section>\n\n    <!-- 1. HISTOIRE -->\n    <section class=\"dg-section\">\n        <div id=\"leo-presentation\"><\/div>\n        <div class=\"dg-wrap\">\n            <div class=\"dg-split\">\n                <div class=\"dg-prose\">\n                    <div class=\"dg-head dg-head--left\">\n                        <span class=\"dg-eyebrow\">P\u00e9zenas<\/span>\n                        <h2 class=\"dg-title\">Une Histoire<\/h2>\n                        <p class=\"dg-title-sub\">De tapissier sur meuble \u00e0 coutelier<\/p>\n                    <\/div>\n                    <p class=\"dg-intro\">Mon arri\u00e8re&#8209;grand&#8209;p\u00e8re, Antoine Jaudon, \u00e9tait artisan tapissier sur meuble.<\/p>\n                    <p>J\u2019ai repris notre maison familiale de P\u00e9zenas et je l\u2019ai am\u00e9nag\u00e9e en atelier de coutellerie&nbsp;: l\u2019artisanat y rena\u00eet.<\/p>\n                    <p class=\"dg-closing\">P\u00e9zenas est pour moi le berceau d'un artisanat familial.<\/p>\n                    <figure class=\"dg-emblem\">\n                    <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/ledragonnier.com\/wp-content\/uploads\/2025\/02\/Dragon_sur_Ecu.png\" width=\"300\" height=\"340\" alt=\"Embl\u00e8me Le Dragonnier : un dragon qui forme le feuillage d\u2019un dragonnier, dans un \u00e9cu\" loading=\"lazy\">\n                    <figcaption>\n                        <span class=\"dg-emblem-label\">L\u2019embl\u00e8me du dragonnier<\/span>\n                        <span class=\"dg-emblem-title\">Le dragon et l\u2019arbre<\/span>\n                        <span class=\"dg-emblem-text\">Mon embl\u00e8me porte un dragonnier dont le feuillage est un dragon&nbsp;: l\u2019arbre pour la nature et tout ce qu\u2019elle nous offre, le dragon pour notre histoire et les l\u00e9gendes de notre enfance.<\/span>\n                    <\/figcaption>\n                    <\/figure>\n                <\/div>\n                <div class=\"dg-split-media\">\n                    <figure class=\"dg-frame dg-video dg-fade\" aria-roledescription=\"carrousel\" aria-label=\"La vitrine de l'atelier\">\n                        <img fetchpriority=\"high\" decoding=\"async\" class=\"is-active\" src=\"https:\/\/ledragonnier.com\/wp-content\/uploads\/2026\/10\/velkaran-intro-scaled.png\" width=\"2560\" height=\"1454\" alt=\"Couteaux Le Dragonnier en vitrine \u00e0 l'atelier de P\u00e9zenas\" loading=\"eager\">\n                        <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/ledragonnier.com\/wp-content\/uploads\/2026\/10\/WhatsApp-Image-2026-10-10-at-20.10.00-2-scaled.jpeg\" width=\"2560\" height=\"1920\" alt=\"Couteaux de cuisine Velkaran en vitrine\" loading=\"lazy\">\n                        <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/ledragonnier.com\/wp-content\/uploads\/2026\/10\/WhatsApp-Image-2026-10-10-at-20.10.00-1-scaled.jpeg\" width=\"2560\" height=\"1920\" alt=\"Couteaux de table Ornak en vitrine\" loading=\"lazy\">\n                        <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/ledragonnier.com\/wp-content\/uploads\/2026\/10\/WhatsApp-Image-2026-10-10-at-20.10.00-scaled.jpeg\" width=\"2560\" height=\"1920\" alt=\"Couteaux Feranak et Ornak en vitrine\" loading=\"lazy\">\n                        <div class=\"dg-fade-dots\">\n                            <button type=\"button\" class=\"is-active\" aria-label=\"Photo 1\"><\/button>\n                            <button type=\"button\" aria-label=\"Photo 2\"><\/button>\n                            <button type=\"button\" aria-label=\"Photo 3\"><\/button>\n                            <button type=\"button\" aria-label=\"Photo 4\"><\/button>\n                        <\/div>\n                    <\/figure>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/section>\n\n    <!-- 2. QUI JE SUIS -->\n    <section class=\"dg-section dg-section--light\">\n        <div class=\"dg-wrap\">\n            <div id=\"anchor-presentation\"><\/div>\n            <div class=\"dg-head\">\n                <span class=\"dg-eyebrow\">Le coutelier<\/span>\n                <h2 class=\"dg-title\">Qui je suis ?<\/h2>\n            <\/div>\n\n            <div class=\"dg-split dg-split--reverse\">\n                <div class=\"dg-prose\">\n                    <div class=\"dg-name\">\n                        <h3>L\u00e9o Jaudon<\/h3>\n                        <span>Le Dragonnier<\/span>\n                    <\/div>\n                    <p class=\"dg-intro\">Originaire de Montpellier, je me d\u00e9couvre tr\u00e8s t\u00f4t une passion pour la coutellerie.<\/p>\n                    <p>Enfant, je fabrique mes premiers couteaux en taillant du bois, guid\u00e9 par une imagination d\u00e9bordante et le plaisir du travail manuel.<\/p>\n                    <p class=\"dg-path-line\"><strong>Form\u00e9 \u00e0 Thiers<\/strong>, \u00e0 la coutellerie Robert David.<br>J\u2019y obtiens un <strong>CAP Instruments Coupants et de Chirurgie<\/strong>, puis je me perfectionne pour devenir <strong>Technicien de Fabrication d\u2019Instruments Coupants<\/strong> (CQPM).<\/p>\n                    <p class=\"dg-quote\">Aujourd\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.<\/p>\n                <\/div>\n                <div class=\"dg-split-media\">\n                    <figure class=\"dg-frame dg-portrait\">\n                        <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/ledragonnier.com\/wp-content\/uploads\/2026\/10\/Face-Expression-Modification-Image-1.jpeg\" width=\"1200\" height=\"899\" alt=\"L\u00e9o Jaudon - Artisan coutelier du Dragonnier \u00e0 P\u00e9zenas\" loading=\"lazy\">\n                        <figcaption class=\"dg-portrait-badge\">Le Dragonnier<\/figcaption>\n                    <\/figure>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/section>\n\n    <!-- 3. BOUTIQUE -->\n    <section class=\"dg-section--light\">\n        <div id=\"boutique_anchor\"><\/div>\n        <div class=\"dg-wrap dg-shop-head\">\n            <div class=\"dg-head\">\n                <span class=\"dg-eyebrow\">Collection<\/span>\n                <h2 class=\"dg-title\">Boutique<\/h2>\n            <\/div>\n        <\/div>\n\n        <div class=\"dg-wrap dg-shop-body\">\n        <div class=\"knives-carousel\" role=\"region\" aria-roledescription=\"carrousel\" aria-label=\"Boutique : les couteaux\">\n            <div class=\"carousel-slides\" id=\"carouselSlides\">\n                <div class=\"carousel-slide active\" data-product-id=\"19077\">\n                    <div class=\"slide-media\">\n                        <img src=\"https:\/\/ledragonnier.com\/wp-content\/uploads\/2026\/04\/Sylvarak_1-scaled.png\" alt=\"Sylvarak - Couteau pliant artisanal\" loading=\"eager\" fetchpriority=\"high\" decoding=\"async\">\n                        <div class=\"slide-overlay\"><\/div>\n                    <\/div>\n                    <div class=\"slide-content\">\n                        <h3 class=\"slide-title\">Sylvarak<\/h3>\n                        <p class=\"slide-subtitle\">Le couteau pliant<\/p>\n                        <div class=\"slide-price\"><\/div>\n                        <p class=\"slide-description\">Sylvarak est un couteau de poche, fin et l\u00e9ger. Il saura vous accompagner sur votre chemin.<\/p>\n                        <a href=\"https:\/\/ledragonnier.com\/index.php\/produit\/sylvarak-couteau-pliant\/\" class=\"dg-btn\">Commander Sylvarak<\/a>\n                    <\/div>\n                <\/div>\n                <div class=\"carousel-slide\" data-product-id=\"19093\">\n                    <div class=\"slide-media\">\n                        <img src=\"https:\/\/ledragonnier.com\/wp-content\/uploads\/2026\/04\/Ornak_1-scaled.png\" alt=\"Ornak - Couteau de table \u00e9l\u00e9gant\" loading=\"lazy\" decoding=\"async\">\n                        <div class=\"slide-overlay\"><\/div>\n                    <\/div>\n                    <div class=\"slide-content\">\n                        <h3 class=\"slide-title\">Ornak<\/h3>\n                        <p class=\"slide-subtitle\">Le couteau de table<\/p>\n                        <div class=\"slide-price\"><\/div>\n                        <p class=\"slide-description\">\u00e0 partir de 25\u20ac unit\u00e9 - Vendu par 4 ou par 6. Ornak est un couteau simple, \u00e9pur\u00e9, qui mettra en valeur votre table.<\/p>\n                        <a href=\"https:\/\/ledragonnier.com\/index.php\/produit\/ornak-le-couteau-de-table\/\" class=\"dg-btn\">Commander Ornak<\/a>\n                    <\/div>\n                <\/div>\n                <div class=\"carousel-slide\" data-product-id=\"19051\">\n                    <div class=\"slide-media\">\n                        <img src=\"https:\/\/ledragonnier.com\/wp-content\/uploads\/2026\/04\/Velkaran_2-scaled.png\" alt=\"Velkaran - Couteau de cuisine professionnel\" loading=\"lazy\" decoding=\"async\">\n                        <div class=\"slide-overlay\"><\/div>\n                    <\/div>\n                    <div class=\"slide-content\">\n                        <h3 class=\"slide-title\">Velkaran<\/h3>\n                        <p class=\"slide-subtitle\">Le couteau de cuisine<\/p>\n                        <div class=\"slide-price\"><\/div>\n                        <p class=\"slide-description\">Velkaran est le couteau de chef parfait pour cuisiner. Laissez sa ligne majestueuse vous s\u00e9duire.<\/p>\n                        <a href=\"https:\/\/ledragonnier.com\/index.php\/produit\/velkaran-couteau-cuisine\/\" class=\"dg-btn\">Commander Velkaran<\/a>\n                    <\/div>\n                <\/div>\n                <div class=\"carousel-slide\" data-product-id=\"19084\">\n                    <div class=\"slide-media\">\n                        <img src=\"https:\/\/ledragonnier.com\/wp-content\/uploads\/2026\/04\/Feranak_1-scaled.png\" alt=\"Feranak - Couteau d'office de pr\u00e9cision\" loading=\"lazy\" decoding=\"async\">\n                        <div class=\"slide-overlay\"><\/div>\n                    <\/div>\n                    <div class=\"slide-content\">\n                        <h3 class=\"slide-title\">Feranak<\/h3>\n                        <p class=\"slide-subtitle\">Le couteau d\u2019office<\/p>\n                        <div class=\"slide-price\"><\/div>\n                        <p class=\"slide-description\">Feranak est l\u00e0 pour vous accompagner aux fourneaux. Petit et polyvalent, il est parfait en compl\u00e9ment d\u2019un bon couteau de chef.<\/p>\n                        <a href=\"https:\/\/ledragonnier.com\/index.php\/produit\/feranak-le-couteau-doffice\/\" class=\"dg-btn\">Commander Feranak<\/a>\n                    <\/div>\n                <\/div>\n            <\/div>\n            <div class=\"carousel-pagination\">\n                <button type=\"button\" class=\"carousel-nav carousel-prev\" onclick=\"dragonnierCarousel.changeSlide(-1)\" aria-label=\"Slide pr\u00e9c\u00e9dent\"><\/button>\n                <button type=\"button\" class=\"pagination-dot active\" onclick=\"dragonnierCarousel.goToSlide(0)\" aria-label=\"Sylvarak\"><\/button>\n                <button type=\"button\" class=\"pagination-dot\" onclick=\"dragonnierCarousel.goToSlide(1)\" aria-label=\"Ornak\"><\/button>\n                <button type=\"button\" class=\"pagination-dot\" onclick=\"dragonnierCarousel.goToSlide(2)\" aria-label=\"Velkaran\"><\/button>\n                <button type=\"button\" class=\"pagination-dot\" onclick=\"dragonnierCarousel.goToSlide(3)\" aria-label=\"Feranak\"><\/button>\n                <button type=\"button\" class=\"carousel-nav carousel-next\" onclick=\"dragonnierCarousel.changeSlide(1)\" aria-label=\"Slide suivant\"><\/button>\n                <button type=\"button\" class=\"pagination-pause\" onclick=\"dragonnierCarousel.togglePause()\" aria-label=\"Mettre en pause le d\u00e9filement\" aria-pressed=\"false\">\n                    <svg class=\"icon-pause\" viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\"><rect x=\"7\" y=\"5\" width=\"3.5\" height=\"14\" rx=\"1\"\/><rect x=\"13.5\" y=\"5\" width=\"3.5\" height=\"14\" rx=\"1\"\/><\/svg>\n                    <svg class=\"icon-play\" viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\"><path d=\"M8 5.5v13l11-6.5z\"\/><\/svg>\n                <\/button>\n            <\/div>\n        <\/div>\n        <\/div>\n    <\/section>\n\n    <div class=\"dg-sep\" aria-hidden=\"true\"><div class=\"dg-divider\"><\/div><\/div>\n\n    <!-- 4. STAGE DE COUTELLERIE -->\n    <section class=\"dg-section dg-section--light dg-sc\">\n        <div id=\"prestations_anchor\"><\/div>\n        <div class=\"dg-wrap\">\n            <div class=\"dg-sc-hero\">\n                <div class=\"dg-sc-text\">\n                    <div class=\"dg-head dg-head--left\">\n                        <span class=\"dg-eyebrow\">\u00c0 l'atelier de P\u00e9zenas<\/span>\n                        <h1 class=\"dg-title\">Stage de coutellerie<\/h1>\n                    <\/div>\n                    <p class=\"dg-sc-lede\">Repartez avec le couteau que vous avez mont\u00e9.<\/p>\n                    <p class=\"dg-sc-desc\">Montez de vos mains le&nbsp;<strong>Sylvarak<\/strong>, mon couteau pliant, et repartez avec. En 3&nbsp;heures ou sur une journ\u00e9e enti\u00e8re, \u00e0 mes c\u00f4t\u00e9s.<\/p>\n                    <ul class=\"dg-sc-infos\">\n                        <li>\n                            <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.4\" aria-hidden=\"true\"><circle cx=\"12\" cy=\"13\" r=\"8\"\/><path d=\"M12 9v4l2.5 2.5M9 2h6\"\/><\/svg>\n                            Une demi&#8209;journ\u00e9e ou une journ\u00e9e\n                        <\/li>\n                        <li>\n                            <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.4\" aria-hidden=\"true\"><circle cx=\"9\" cy=\"8\" r=\"3.2\"\/><path d=\"M3 20c0-3.3 2.7-6 6-6s6 2.7 6 6\"\/><circle cx=\"17\" cy=\"9\" r=\"2.5\"\/><path d=\"M16 14.2c2.8.2 5 2.6 5 5.8\"\/><\/svg>\n                            Petit groupe, 5&nbsp;personnes maximum\n                        <\/li>\n                        <li>\n                            <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.4\" aria-hidden=\"true\"><path d=\"M17 6.5A7 7 0 1 0 17 17.5\"\/><path d=\"M4 10.5h9M4 13.5h9\"\/><\/svg>\n                            D\u00e8s 85&nbsp;\u20ac par personne\n                        <\/li>\n                    <\/ul>\n                    <div class=\"dg-book\">\n                        <p class=\"dg-book-label\">R\u00e9server par t\u00e9l\u00e9phone<\/p>\n                        <a href=\"tel:+33687463258\" class=\"dg-btn dg-btn--phone\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" aria-hidden=\"true\"><path d=\"M5 4h4l2 5-2.5 1.5a11 11 0 0 0 5 5L15 13l5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2\"\/><\/svg>06 87 46 32 58<\/a>\n                    <\/div>\n                <\/div>\n                <figure class=\"dg-frame dg-sc-photo\">\n                    <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/ledragonnier.com\/wp-content\/uploads\/2026\/10\/Gemini-Generated-Image-Workshop-Recreation-scaled.jpeg\" width=\"1400\" height=\"727\" alt=\"Stage de coutellerie \u00e0 l'atelier Le Dragonnier de P\u00e9zenas\" loading=\"lazy\">\n                <\/figure>\n            <\/div>\n\n            <div class=\"dg-kn-block\">\n                <p class=\"dg-kn-label\">Le couteau que vous allez monter<\/p>\n                <h3 class=\"dg-kn-title\">Le Sylvarak<\/h3>\n                <figure class=\"dg-kn-figure\">\n                    <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/ledragonnier.com\/wp-content\/uploads\/2026\/10\/sylvarak-detoure.jpg\" width=\"850\" height=\"200\" alt=\"Le Sylvarak, couteau pliant manche olivier mont\u00e9 pendant le stage\" loading=\"lazy\">\n                <\/figure>\n                <p class=\"dg-kn-text\">Pi\u00e8ce par pi\u00e8ce, vous assemblez <strong>le&nbsp;Sylvarak<\/strong>, mon couteau pliant. Et vous repartez avec.<\/p>\n                <p class=\"dg-kn-note\">En formule journ\u00e9e, vous choisissez le bois du manche et le motif de guillochage.<\/p>\n            <\/div>\n        <\/div>\n    <\/section>\n\n    <!-- 5. FORMULES DE L'ATELIER -->\n    <section class=\"dg-section dg-section--light dg-fo\">\n        <div class=\"dg-wrap\">\n            <div class=\"dg-head\">\n                <h2 class=\"dg-title\">Choisissez votre formule<\/h2>\n                <p class=\"dg-lede\">Deux formats pens\u00e9s pour s'adapter \u00e0 votre temps et vos envies d'apprentissage.<\/p>\n            <\/div>\n\n            <div class=\"dg-fo-grid\">\n                <article class=\"dg-fo-card\">\n                    <figure class=\"dg-fo-media\">\n                        <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/ledragonnier.com\/wp-content\/uploads\/2026\/10\/Gemini-Generated-Image-Workshop-Recreation-scaled.jpeg\" width=\"1400\" height=\"727\" alt=\"Stagiaires montant leur couteau \u00e0 l'\u00e9tabli, atelier Le Dragonnier\" loading=\"lazy\">\n                    <\/figure>\n                    <div class=\"dg-fo-body\">\n                        <div class=\"dg-fo-top\">\n                            <h3>3 heures<\/h3>\n                            <p class=\"dg-fo-price\">85&nbsp;\u20ac<small>\/pers<\/small><\/p>\n                        <\/div>\n                        <p class=\"dg-fo-desc\"><span class=\"dg-fo-hook\">Vous repartez avec votre Sylvarak.<\/span> Votre premi\u00e8re prise en main du m\u00e9tier, \u00e0 l'\u00e9tabli, \u00e0 mes c\u00f4t\u00e9s. Manche en olivier.<\/p>\n                        <p class=\"dg-fo-label\">Programme \u00b7 3&nbsp;h<\/p>\n                        <ul class=\"dg-fo-list\">\n                            <li>Vous assemblez lame, ressort et platines<\/li>\n                            <li>Vous me voyez polir votre couteau<\/li>\n                        <\/ul>\n                    <\/div>\n                <\/article>\n\n                <article class=\"dg-fo-card dg-fo-card--featured\">\n                    <span class=\"dg-fo-badge\">Id\u00e9al pour offrir<\/span>\n                    <figure class=\"dg-fo-media\">\n                        <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/ledragonnier.com\/wp-content\/uploads\/2026\/10\/Leo_image_2-scaled.jpeg\" width=\"1400\" height=\"781\" alt=\"Montage d'un couteau pliant pendant un stage \u00e0 l'atelier Le Dragonnier\" loading=\"lazy\">\n                    <\/figure>\n                    <div class=\"dg-fo-body\">\n                        <div class=\"dg-fo-top\">\n                            <h3>1 journ\u00e9e<\/h3>\n                            <p class=\"dg-fo-price\">300&nbsp;\u20ac<small>\/pers<\/small><\/p>\n                        <\/div>\n                        <p class=\"dg-fo-desc\"><span class=\"dg-fo-hook\">Manche au choix, ressort guilloch\u00e9.<\/span> Une journ\u00e9e pour vous initier au guillochage, puis monter votre couteau dans l'essence de votre choix.<\/p>\n                        <p class=\"dg-fo-label\">Programme \u00b7 9h\u201318h<\/p>\n                        <ul class=\"dg-fo-list\">\n                            <li><strong>Matin :<\/strong> vous apprenez le guillochage, le motif d\u00e9coratif du ressort<\/li>\n                            <li>Vous choisissez le bois de votre manche<\/li>\n                            <li><strong>Apr\u00e8s-midi :<\/strong> vous assemblez lame, ressort et platines<\/li>\n                            <li>Vous assistez au polissage de votre couteau<\/li>\n                        <\/ul>\n                        <p class=\"dg-fo-note\">* Ces horaires peuvent \u00eatre am\u00e9nag\u00e9s au&#8209;del\u00e0 de 3&nbsp;personnes.<\/p>\n                    <\/div>\n                <\/article>\n            <\/div>\n\n            <div class=\"dg-fo-foot\">\n                <p>5 personnes maximum, pour que chacun m'ait \u00e0 ses c\u00f4t\u00e9s.<\/p>\n                <p class=\"dg-book-label\">R\u00e9server par t\u00e9l\u00e9phone<\/p>\n                <a href=\"tel:+33687463258\" class=\"dg-btn dg-btn--phone\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" aria-hidden=\"true\"><path d=\"M5 4h4l2 5-2.5 1.5a11 11 0 0 0 5 5L15 13l5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2\"\/><\/svg>06 87 46 32 58<\/a>\n            <\/div>\n        <\/div>\n    <\/section>\n\n    <!-- 6. AFF\u00dbTAGE -->\n    <section class=\"dg-section\">\n        <div class=\"dg-wrap\">\n            <div class=\"dg-head\">\n                <span class=\"dg-eyebrow\">Sur place, \u00e0 l'atelier<\/span>\n                <h2 class=\"dg-title\">Aff\u00fbtage<\/h2>\n            <\/div>\n\n            <div class=\"dg-atelier\">\n                <figure class=\"dg-frame\">\n                    <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/ledragonnier.com\/wp-content\/uploads\/2026\/10\/Person-with-Black-Tool-scaled.jpg\" width=\"1400\" height=\"933\" alt=\"Aff\u00fbtage d'une lame sur touret \u00e0 l'atelier Le Dragonnier\" loading=\"lazy\">\n                <\/figure>\n\n                <div>\n                    <p class=\"dg-sharpen-price\">5\u20ac<small>par lame, sur place<\/small><\/p>\n                    <ul class=\"dg-list dg-sharpen-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\n                    <div class=\"dg-book\">\n                        <p class=\"dg-book-label\">Sur rendez-vous, par t\u00e9l\u00e9phone<\/p>\n                        <a href=\"tel:+33687463258\" class=\"dg-btn dg-btn--phone\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" aria-hidden=\"true\"><path d=\"M5 4h4l2 5-2.5 1.5a11 11 0 0 0 5 5L15 13l5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2\"\/><\/svg>06 87 46 32 58<\/a>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/section>\n\n    <!-- 7. COMMENT NA\u00ceT UN COUTEAU -->\n    <section class=\"dg-section dg-section--light\">\n        <div class=\"dg-wrap\">\n            <div class=\"dg-head\">\n                <span class=\"dg-eyebrow\">Savoir-faire<\/span>\n                <h2 class=\"dg-title\">Comment na\u00eet un couteau ?<\/h2>\n                <p class=\"dg-lede\">D\u00e9couvrez les \u00e9tapes essentielles de cr\u00e9ation d\u2019un couteau artisanal, d\u2019une id\u00e9e \u00e0 un produit.<\/p>\n                <button type=\"button\" class=\"dg-btn dg-timeline-toggle\" aria-expanded=\"false\" aria-controls=\"timeline-content\" onclick=\"toggleTimeline()\">\n                    <span id=\"btn-text\">D\u00e9couvrir les \u00e9tapes<\/span>\n                <\/button>\n            <\/div>\n\n            <div class=\"dg-timeline-content\" id=\"timeline-content\" inert>\n                <div>\n                    <ol class=\"dg-timeline\">\n                        <li class=\"dg-tl-step\">\n                            <span class=\"dg-tl-marker\" aria-hidden=\"true\"><\/span>\n                            <div>\n                                <span class=\"dg-tl-badge\">\u00c9TAPE 1<\/span>\n                                <h3>Design<\/h3>\n                                <p>R\u00e9alisation d\u2019un croquis et de plans techniques, je mets sur papier une id\u00e9e.<\/p>\n                                <p>Choix des mat\u00e9riaux<\/p>\n                            <\/div>\n                            <figure class=\"dg-frame\">\n                                <img decoding=\"async\" src=\"\" alt=\"Croquis et plans techniques de couteau\" loading=\"lazy\">\n                            <\/figure>\n                        <\/li>\n                        <li class=\"dg-tl-step\">\n                            <span class=\"dg-tl-marker\" aria-hidden=\"true\"><\/span>\n                            <div>\n                                <span class=\"dg-tl-badge\">\u00c9TAPE 2<\/span>\n                                <h3>Sous-traitance<\/h3>\n                                <p>D\u00e9coupe laser, \u00e9mouture et traitements thermiques faits 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>Pon\u00e7age pour donner volume et forme<\/p>\n                            <\/div>\n                            <figure class=\"dg-frame\">\n                                <img decoding=\"async\" src=\"\" alt=\"Fa\u00e7onnage de la lame\" loading=\"lazy\">\n                            <\/figure>\n                        <\/li>\n                        <li class=\"dg-tl-step\">\n                            <span class=\"dg-tl-marker\" aria-hidden=\"true\"><\/span>\n                            <div>\n                                <span class=\"dg-tl-badge\">\u00c9TAPE 3<\/span>\n                                <h3>Production<\/h3>\n                                <p>Pr\u00e9paration des pi\u00e8ces, montage et fa\u00e7onnage, qui me permettent de donner vie au produit.<\/p>\n                            <\/div>\n                            <figure class=\"dg-frame\">\n                                <img decoding=\"async\" src=\"\" alt=\"Assemblage du couteau\" loading=\"lazy\">\n                            <\/figure>\n                        <\/li>\n                        <li class=\"dg-tl-step\">\n                            <span class=\"dg-tl-marker\" aria-hidden=\"true\"><\/span>\n                            <div>\n                                <span class=\"dg-tl-badge\">\u00c9TAPE 4<\/span>\n                                <h3>Ornementation<\/h3>\n                                <p>Guillochage, polissage et finitions, c\u2019est l\u00e0 que chaque pi\u00e8ce devient unique.<\/p>\n                                <p>Polissage minutieux de chaque pi\u00e8ce<\/p>\n                            <\/div>\n                            <figure class=\"dg-frame\">\n                                <img decoding=\"async\" src=\"\" alt=\"Gravure et ornementation\" loading=\"lazy\">\n                            <\/figure>\n                        <\/li>\n                        <li class=\"dg-tl-step\">\n                            <span class=\"dg-tl-marker\" aria-hidden=\"true\"><\/span>\n                            <div>\n                                <span class=\"dg-tl-badge\">\u00c9TAPE 5<\/span>\n                                <h3>Aff\u00fbtage et Contr\u00f4le<\/h3>\n                                <p>Je finis par aff\u00fbter les couteaux et je fais un contr\u00f4le qualit\u00e9 pour m\u2019assurer de n\u2019avoir fait aucune erreur.<\/p>\n                            <\/div>\n                            <figure class=\"dg-frame\">\n                                <img decoding=\"async\" src=\"\" alt=\"Aff\u00fbtage professionnel\" loading=\"lazy\">\n                            <\/figure>\n                        <\/li>\n                    <\/ol>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/section>\n\n    <!-- 8. MES CR\u00c9ATIONS -->\n    <section class=\"dg-section\">\n        <div id=\"creation_anchor\"><\/div>\n        <div class=\"dg-wrap\">\n            <div class=\"dg-head\">\n                <span class=\"dg-eyebrow\">Pi\u00e8ces uniques &amp; sur mesure<\/span>\n                <h2 class=\"dg-title\">Mes Cr\u00e9ations<\/h2>\n            <\/div>\n\n            <div class=\"dg-creations\">\n                <article class=\"dg-creation\">\n                    <figure class=\"dg-frame\">\n                        <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/ledragonnier.com\/wp-content\/uploads\/2026\/10\/Screenshot-2026-10-10-at-20.07.17-scaled.png\" width=\"2560\" height=\"1446\" alt=\"D\u00e9tail grav\u00e9 d'une pi\u00e8ce unique Le Dragonnier\" loading=\"lazy\">\n                    <\/figure>\n                    <h3>Cr\u00e9ations Uniques<\/h3>\n                    <p>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. Couteau pliant ou couteau de chef, d\u00e9couvrez mon savoir-faire artisanal au travers de mes cr\u00e9ations pens\u00e9es pour durer.<\/p>\n                    <a class=\"dg-link\" href=\"https:\/\/ledragonnier.com\/index.php\/piece-unique\/\">Voir les pi\u00e8ces uniques <span aria-hidden=\"true\">\u2192<\/span><\/a>\n                <\/article>\n                <article class=\"dg-creation\">\n                    <figure class=\"dg-frame\">\n                        <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/ledragonnier.com\/wp-content\/uploads\/2026\/10\/WhatsApp-Image-2026-10-10-at-20.12.51.jpeg\" width=\"2048\" height=\"945\" alt=\"Couteau pliant Le Dragonnier, manche en bois, pos\u00e9 sur la pierre\" loading=\"lazy\">\n                    <\/figure>\n                    <h3>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.<\/p>\n                    <a class=\"dg-link\" href=\"https:\/\/ledragonnier.com\/index.php\/portfolio\/\">Voir le portfolio <span aria-hidden=\"true\">\u2192<\/span><\/a>\n                <\/article>\n            <\/div>\n        <\/div>\n    <\/section>\n\n    <!-- 9. SUR MESURE -->\n    <section class=\"dg-wrap\">\n        <div class=\"dg-band\">\n            <div class=\"dg-band-corners\" aria-hidden=\"true\"><span><\/span><span><\/span><span><\/span><span><\/span><\/div>\n            <span class=\"dg-eyebrow\">Commande personnalis\u00e9e<\/span>\n            <h2 class=\"dg-title\">Un projet sur mesure<\/h2>\n            <p class=\"dg-lede\">Venez en discuter avec moi autour d'un caf\u00e9<\/p>\n            <a href=\"https:\/\/ledragonnier.com\/index.php\/contact\/\" class=\"dg-btn\">Contactez-moi<\/a>\n        <\/div>\n    <\/section>\n\n    <!-- 10. FAQ -->\n    <section class=\"dg-section\">\n        <div class=\"dg-wrap\">\n            <div class=\"dg-head\">\n                <h2 class=\"dg-title\">Questions fr\u00e9quentes<\/h2>\n            <\/div>\n            <div class=\"dg-faq\">\n                <details>\n                    <summary>Quel est le d\u00e9lai de fabrication ?<\/summary>\n                    <div class=\"dg-answer\">Le 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 longs.<\/div>\n                <\/details>\n                <details>\n                    <summary>Proposez-vous un service d'aff\u00fbtage ?<\/summary>\n                    <div class=\"dg-answer\">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.<\/div>\n                <\/details>\n                <details>\n                    <summary>Puis-je personnaliser compl\u00e8tement mon couteau ?<\/summary>\n                    <div class=\"dg-answer\">Absolument ! Pour les pi\u00e8ces d'exception, nous travaillons ensemble sur chaque d\u00e9tail : Finition des pi\u00e8ces, mati\u00e8res du manche, guillochage\u2026<\/div>\n                <\/details>\n                <details>\n                    <summary>Quelles sont les essences de bois disponibles ?<\/summary>\n                    <div class=\"dg-answer\">Je 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.<\/div>\n                <\/details>\n            <\/div>\n        <\/div>\n    <\/section>\n\n<\/div>\n\n<script>\n    \/\/ Timeline : ouverture \/ fermeture des \u00e9tapes\n    var timelineExpanded = false;\n\n    function toggleTimeline() {\n        var content = document.getElementById('timeline-content');\n        var btnText = document.getElementById('btn-text');\n        var btn = btnText.closest('button');\n        var steps = document.querySelectorAll('.dg-tl-step');\n        timelineExpanded = !timelineExpanded;\n        content.classList.toggle('expanded', timelineExpanded);\n        content.inert = !timelineExpanded;\n        btn.setAttribute('aria-expanded', String(timelineExpanded));\n        btnText.textContent = timelineExpanded ? 'Masquer les \u00e9tapes' : 'D\u00e9couvrir les \u00e9tapes';\n        steps.forEach(function (step, index) {\n            if (timelineExpanded) {\n                setTimeout(function () { step.classList.add('visible'); }, 300 + index * 150);\n            } else {\n                step.classList.remove('visible');\n            }\n        });\n    }\n\n    \/\/ Carrousel de la boutique\n    window.dragonnierCarousel = (function () {\n        var currentSlide = 0;\n        var totalSlides = 0;\n        var slidesContainer, dots, slides, carousel;\n        var autoPlayInterval = null;\n        var isTransitioning = false;\n\n        function init() {\n            slidesContainer = document.getElementById('carouselSlides');\n            if (!slidesContainer) return;\n            carousel = slidesContainer.closest('.knives-carousel');\n            slides = carousel.querySelectorAll('.carousel-slide');\n            dots = carousel.querySelectorAll('.pagination-dot');\n            totalSlides = slides.length;\n            if (!totalSlides) return;\n\n            slidesContainer.style.width = (totalSlides * 100) + '%';\n            slides.forEach(function (slide) {\n                slide.style.width = (100 \/ totalSlides) + '%';\n            });\n\n            update();\n            startAutoPlay();\n            setupEventListeners();\n        }\n\n        function update() {\n            if (isTransitioning) return;\n            isTransitioning = true;\n            slidesContainer.style.transform = 'translateX(' + (-currentSlide * (100 \/ totalSlides)) + '%)';\n            slides.forEach(function (slide, i) {\n                slide.classList.toggle('active', i === currentSlide);\n                slide.setAttribute('aria-hidden', String(i !== currentSlide));\n                slide.inert = i !== currentSlide;\n            });\n            dots.forEach(function (dot, i) {\n                dot.classList.toggle('active', i === currentSlide);\n            });\n            setTimeout(function () { isTransitioning = false; }, 800);\n        }\n\n        function changeSlide(direction) {\n            currentSlide = (currentSlide + direction + totalSlides) % totalSlides;\n            update();\n        }\n\n        function goToSlide(index) {\n            if (index >= 0 && index < totalSlides) {\n                currentSlide = index;\n                update();\n            }\n        }\n\n        var userPaused = false;\n\n        function togglePause() {\n            userPaused = !userPaused;\n            var btn = carousel.querySelector('.pagination-pause');\n            btn.setAttribute('aria-pressed', String(userPaused));\n            btn.setAttribute('aria-label', userPaused ? 'Reprendre le d\u00e9filement' : 'Mettre en pause le d\u00e9filement');\n            if (userPaused) stopAutoPlay(); else startAutoPlay();\n        }\n\n        function startAutoPlay() {\n            stopAutoPlay();\n            if (userPaused) return;\n            if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;\n            autoPlayInterval = setInterval(function () { changeSlide(1); }, 12000);\n        }\n\n        function stopAutoPlay() {\n            if (autoPlayInterval) {\n                clearInterval(autoPlayInterval);\n                autoPlayInterval = null;\n            }\n        }\n\n        function setupEventListeners() {\n            carousel.addEventListener('mouseenter', stopAutoPlay);\n            carousel.addEventListener('mouseleave', startAutoPlay);\n            carousel.addEventListener('focusin', stopAutoPlay);\n            carousel.addEventListener('focusout', startAutoPlay);\n\n            document.addEventListener('keydown', function (e) {\n                if (!carousel.contains(document.activeElement)) return;\n                if (e.key === 'ArrowLeft') changeSlide(-1);\n                if (e.key === 'ArrowRight') changeSlide(1);\n            });\n\n            var startX = 0, startY = 0;\n            carousel.addEventListener('touchstart', function (e) {\n                startX = e.changedTouches[0].screenX;\n                startY = e.changedTouches[0].screenY;\n            }, { passive: true });\n            carousel.addEventListener('touchend', function (e) {\n                var dx = startX - e.changedTouches[0].screenX;\n                var dy = Math.abs(startY - e.changedTouches[0].screenY);\n                if (Math.abs(dx) > 50 && dy < 100) {\n                    changeSlide(dx > 0 ? 1 : -1);\n                    startAutoPlay();\n                }\n            }, { passive: true });\n        }\n\n        if (document.readyState === 'loading') {\n            document.addEventListener('DOMContentLoaded', init);\n        } else {\n            init();\n        }\n\n        return { changeSlide: changeSlide, togglePause: togglePause, goToSlide: goToSlide };\n    })();\n\n    \/\/ Prix et lien produit \u00e0 jour depuis WooCommerce ; les liens en dur restent en secours.\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(function (r) { return r.ok ? r : fetch(fallback); });\n        }\n\n        document.querySelectorAll('[data-product-id]').forEach(function (slide) {\n            var id = slide.getAttribute('data-product-id');\n            var priceEl = slide.querySelector('.slide-price');\n            var link = slide.querySelector('a.dg-btn');\n            productEndpoint(id)\n                .then(function (res) { return res.json(); })\n                .then(function (prod) {\n                    if (prod && prod.price_html && priceEl) priceEl.innerHTML = prod.price_html;\n                    if (prod && prod.permalink && link) link.href = prod.permalink;\n                })\n                .catch(function () {});\n        });\n    })();\n\n    \/\/ Mini carrousel en fondu : d\u00e9file toutes les 5 s, sauf si l'utilisateur r\u00e9duit les animations.\n    document.querySelectorAll('.dg-fade').forEach(function (fade) {\n        var imgs = fade.querySelectorAll('img');\n        var dots = fade.querySelectorAll('.dg-fade-dots button');\n        var current = 0;\n        var timer = null;\n\n        function show(i) {\n            imgs[current].classList.remove('is-active');\n            dots[current].classList.remove('is-active');\n            current = (i + imgs.length) % imgs.length;\n            imgs[current].classList.add('is-active');\n            dots[current].classList.add('is-active');\n        }\n\n        function start() {\n            if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;\n            timer = setInterval(function () { show(current + 1); }, 5000);\n        }\n\n        dots.forEach(function (dot, i) {\n            dot.addEventListener('click', function () {\n                clearInterval(timer);\n                show(i);\n                start();\n            });\n        });\n\n        start();\n    });\n<\/script>\n<\/body>\n<\/html>\n\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 &#8211; Cr\u00e9ation, Boutique &#038; Ateliers Le Dragonnier coutellerie artisanale dans le coeur de p\u00e9zenas Me d\u00e9couvrir P\u00e9zenas Une Histoire De tapissier sur meuble \u00e0 coutelier Mon arri\u00e8re&#8209;grand&#8209;p\u00e8re, Antoine Jaudon, \u00e9tait artisan tapissier sur meuble. J\u2019ai repris notre maison familiale de P\u00e9zenas et je l\u2019ai am\u00e9nag\u00e9e en atelier de coutellerie&nbsp;: l\u2019artisanat y rena\u00eet. P\u00e9zenas [&hellip;]<\/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":787,"href":"https:\/\/ledragonnier.com\/index.php\/wp-json\/wp\/v2\/pages\/18522\/revisions"}],"predecessor-version":[{"id":21628,"href":"https:\/\/ledragonnier.com\/index.php\/wp-json\/wp\/v2\/pages\/18522\/revisions\/21628"}],"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}]}}