{"id":5624,"date":"2019-10-09T15:52:55","date_gmt":"2019-10-09T15:52:55","guid":{"rendered":"https:\/\/atelier-bang.com\/?page_id=5624"},"modified":"2026-04-01T17:49:44","modified_gmt":"2026-04-01T15:49:44","slug":"1-accueil","status":"publish","type":"page","link":"https:\/\/atelier-bang.com\/en\/","title":{"rendered":"Home"},"content":{"rendered":"<div class=\"wpb-content-wrapper\"><div id=\"ut-row-69e60c091cd03\" data-vc-full-width=\"true\" data-vc-full-width-init=\"false\" class=\"vc_row wpb_row vc_row-fluid vc_column-gap-0 ut-row-69e60c091cd10\" ><div class=\"wpb_column vc_column_container vc_col-sm-12\" ><div id=\"ut_inner_column_69e60c091d3cc\" class=\"vc_column-inner\" ><div class=\"wpb_wrapper\">\r\n\t<div class=\"wpb_raw_code wpb_raw_html wpb_content_element\" >\r\n\t\t<div class=\"wpb_wrapper\">\r\n\t\t\t<style>\n  \/* IMPORT FONTS *\/\n  @import url('https:\/\/fonts.googleapis.com\/css2?family=League+Spartan:wght@300;400;600;800&display=swap');\n\n  \/* --- CONTENEUR PRINCIPAL --- *\/\n  .bang-hero-wp {\n      position: relative;\n      height: 98vh; \n      width: 100vw; \n      position: relative;\n      left: 50%;\n      right: 50%;\n      margin-left: -50vw;\n      margin-right: -50vw;\n      \n      display: flex;\n      align-items: center; \n      justify-content: flex-start;\n      background-color: #050505;\n      font-family: 'League Spartan', Impact, sans-serif; \n      overflow: hidden;\n      color: #ffffff;\n      box-sizing: border-box;\n  }\n\n  \/* --- HEADER (PC) --- *\/\n  .bang-nav {\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 100%;\n      padding: 30px 5%; \n      z-index: 10; \n      display: flex;\n      justify-content: flex-end; \n      align-items: center;\n      box-sizing: border-box;\n      height: 0; \n  }\n\n  \/* --- LOGO EN POSITION ABSOLUE (FLOTTANT) --- *\/\n  .bang-logo-link {\n      position: absolute;\n      top: 30px;\n      left: 5%;\n      z-index: 20;\n      display: block;\n      line-height: 0;\n  }\n\n  .bang-logo-img {\n      height: 350px; \n      width: auto;\n      display: block;\n      object-fit: contain;\n  }\n\n  .bang-menu {\n      display: flex;\n      gap: 30px;\n      margin-top: 60px;\n  }\n\n  .bang-menu-link {\n      font-size: 13px;\n      font-weight: 600;\n      text-transform: uppercase;\n      text-decoration: none;\n      color: #ffffff;\n      letter-spacing: 1px;\n      transition: color 0.3s ease;\n      opacity: 0.8;\n  }\n\n  .bang-menu-link:hover {\n      color: #d4af37; \n      opacity: 1;\n  }\n\n  \/* --- LE CARROUSEL --- *\/\n  .bang-carousel { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; }\n  .bang-carousel-image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; background-position: center center; opacity: 0; animation: carouselFade 24s infinite ease-in-out; }\n  \n  .bang-image-1 { background-image: url('https:\/\/atelier-bang.com\/wp-content\/uploads\/2026\/01\/Untitled-design-3.png'); animation-delay: 0s; }\n  .bang-image-2 { background-image: url('https:\/\/atelier-bang.com\/wp-content\/uploads\/2026\/01\/IMG_4483-1.png'); animation-delay: 6s; }\n  .bang-image-3 { background-image: url('https:\/\/atelier-bang.com\/wp-content\/uploads\/2026\/01\/IMG_4484-1.png'); animation-delay: 12s; }\n  .bang-image-4 { background-image: url('https:\/\/atelier-bang.com\/wp-content\/uploads\/2026\/01\/IMG_4521-1.png'); animation-delay: 18s; }\n\n  .bang-vignette { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2; background: radial-gradient(circle at 40% center, rgba(5,5,5,0) 10%, rgba(5,5,5,0.4) 50%, #050505 95%); pointer-events: none; }\n  \n  .bang-content { position: relative; z-index: 3; width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 40px; }\n\n  .bang-eyebrow { font-size: 13px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: #d4af37; margin-bottom: 15px; display: flex; align-items: center; gap: 12px; }\n  .bang-eyebrow::before { content: ''; display: block; width: 25px; height: 2px; background-color: #d4af37; }\n\n  .bang-title { font-size: clamp(40px, 5vw, 90px); font-weight: 800; line-height: 1; text-transform: uppercase; margin-bottom: 25px; word-wrap: break-word; }\n  .text-outline { -webkit-text-stroke: 1.5px #ffffff; color: transparent; display: block; }\n\n  .bang-subtitle { font-size: 22px; font-weight: 400; color: #e0e0e0; max-width: 500px; line-height: 1.5; margin-bottom: 35px; border-left: 3px solid rgba(255,255,255,0.3); padding-left: 20px; }\n\n  .bang-btn { display: inline-block; padding: 16px 36px; background-color: #ffffff; color: #050505; font-weight: 800; text-transform: uppercase; text-decoration: none; font-size: 14px; letter-spacing: 2px; border: 2px solid #050505; transition: all 0.3s ease; }\n  .bang-btn:hover { background-color: transparent; color: #ffffff; letter-spacing: 3px; }\n\n  @keyframes carouselFade { 0% { opacity: 0; transform: scale(1); } 5% { opacity: 1; } 25% { opacity: 1; } 30% { opacity: 0; transform: scale(1.05); } 100% { opacity: 0; } }\n\n  \/* --- RESPONSIVE MOBILE --- *\/\n  @media (max-width: 768px) {\n      .bang-hero-wp { \n          justify-content: center; \n          text-align: center; \n          height: auto; \n          padding: 300px 0 20px 0;\n      }\n      \n      .bang-vignette { background: radial-gradient(circle at center, rgba(5,5,5,0) 0%, rgba(5,5,5,0.6) 50%, #050505 100%); }\n      .bang-eyebrow { justify-content: center; }\n      .bang-eyebrow::before { display: none; }\n      .bang-subtitle { margin: 0 auto 35px auto; border-left: none; padding-left: 0; font-size: 18px; }\n\n      .bang-nav {\n          position: absolute;\n          height: auto;\n          flex-direction: column;\n          padding: 20px;\n          justify-content: flex-start;\n          background: linear-gradient(to bottom, rgba(0,0,0,0.8), transparent); \n      }\n      \n      .bang-logo-link {\n          position: relative;\n          top: auto;\n          left: auto;\n          margin-bottom: 20px;\n      }\n      \n      .bang-logo-img { \n          height: 180px;\n      } \n      \n      \/* CORRECTIF MENU MOBILE *\/\n      .bang-menu { \n          margin-top: 0;\n          display: flex; \n          gap: 15px; \n          justify-content: flex-start;\n          flex-wrap: nowrap;\n          overflow-x: auto;\n          width: 100%;\n          padding: 0 15px 5px 15px;\n          -webkit-overflow-scrolling: touch;\n          scrollbar-width: none;\n      }\n\n      .bang-menu::-webkit-scrollbar {\n          display: none;\n      }\n      \n      .bang-menu-link {\n          font-size: 11px;\n          letter-spacing: 1px;\n          white-space: nowrap;\n          flex-shrink: 0;\n      }\n  }\n<\/style>\n\n<div class=\"bang-hero-wp\">\n    \n    <nav class=\"bang-nav\">\n        <a href=\"https:\/\/atelier-bang.com\/en\/\" class=\"bang-logo-link\">\n            <img decoding=\"async\" src=\"https:\/\/atelier-bang.com\/wp-content\/uploads\/2025\/10\/LOGO-FRENG-2-1.png\" alt=\"BANG.\" class=\"bang-logo-img\">\n        <\/a>\n        \n        <div class=\"bang-menu\">\n            <a href=\"https:\/\/atelier-bang.com\/en\/notre-histoire\/\" class=\"bang-menu-link\">Our history<\/a>\n            <a href=\"https:\/\/atelier-bang.com\/en\/catalogue\/\" class=\"bang-menu-link\">Catalogue<\/a>\n            <a href=\"https:\/\/atelier-bang.com\/en\/simulateur\/\" class=\"bang-menu-link\">Simulateur de prix<\/a>\n            <a href=\"https:\/\/atelier-bang.com\/en\/verify\/\" class=\"bang-menu-link\">Le Club<\/a>\n            <a href=\"https:\/\/atelier-bang.com\/en\/atelier\/\" class=\"bang-menu-link\">L'Atelier<\/a>\n            <a href=\"https:\/\/atelier-bang.com\/en\/lejournalbang\/\" class=\"bang-menu-link\">The bang newspaper.<\/a>\n        <\/div>\n    <\/nav>\n\n    <div class=\"bang-carousel\">\n        <div class=\"bang-carousel-image bang-image-1\"><\/div>\n        <div class=\"bang-carousel-image bang-image-2\"><\/div>\n        <div class=\"bang-carousel-image bang-image-3\"><\/div>\n        <div class=\"bang-carousel-image bang-image-4\"><\/div>\n    <\/div>\n    \n    <div class=\"bang-vignette\"><\/div>\n\n    <div class=\"bang-content\">\n        <div class=\"bang-eyebrow\">Atelier Fran\u00e7ais - Poitiers (86)<\/div>\n        <h1 class=\"bang-title\">\n            Automatic Watches<br>\n            <span class=\"text-outline\">Made to measure.<\/span>\n        <\/h1>\n        <p class=\"bang-subtitle\">\n            We don't produce series. We create your unique piece.<br>\n            Custom design, reliable mechanics and hand assembly.\n        <\/p>\n        <a href=\"https:\/\/calendly.com\/atelierbang\/30min\" class=\"bang-btn\">RESERVE MY SLOT<\/a>\n    <\/div>\n<\/div>\r\n\t\t<\/div>\r\n\t<\/div>\r\n\r\n\t<div class=\"wpb_raw_code wpb_raw_html wpb_content_element\" >\r\n\t\t<div class=\"wpb_wrapper\">\r\n\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>Indicateurs Manufacture<\/title>\n    <style>\n        \/* Import de la police League Spartan *\/\n        @import url('https:\/\/fonts.googleapis.com\/css2?family=League+Spartan:wght@300;400;500;600;700&display=swap');\n\n        * {\n            margin: 0;\n            padding: 0;\n            box-sizing: border-box;\n        }\n\n        body {\n            font-family: 'League Spartan', sans-serif;\n            background-color: #1a1a1a;\n        }\n\n        \/* --- SECTION INDICATEURS DE MANUFACTURE --- *\/\n        .trust-bar-section {\n            background: transparent;\n            padding: 80px 0; \n            color: #E8E8E8;\n            position: relative;\n            width: 100%;\n            margin: 0 auto;\n            overflow: hidden;\n        }\n\n        \/* Effet de texture subtile horlog\u00e8re - transparent *\/\n        .trust-bar-section::before {\n            content: '';\n            position: absolute;\n            top: 0;\n            left: 0;\n            right: 0;\n            bottom: 0;\n            background: transparent;\n            pointer-events: none;\n        }\n\n        .trust-container {\n            display: flex;\n            justify-content: space-between;\n            align-items: stretch; \n            max-width: 1400px;\n            margin: 0 auto;\n            padding: 0 4%; \n            position: relative;\n            z-index: 1;\n        }\n\n        .trust-item {\n            flex: 1;\n            padding: 0 25px;\n            position: relative;\n            display: flex;\n            flex-direction: column;\n            align-items: center;\n            text-align: center;\n            opacity: 0;\n            transform: translateY(30px);\n            animation: fadeInUp 0.8s ease forwards;\n        }\n\n        \/* Animation d'apparition d\u00e9cal\u00e9e *\/\n        @keyframes fadeInUp {\n            to {\n                opacity: 1;\n                transform: translateY(0);\n            }\n        }\n\n        .trust-item:nth-child(1) { animation-delay: 0.1s; }\n        .trust-item:nth-child(2) { animation-delay: 0.2s; }\n        .trust-item:nth-child(3) { animation-delay: 0.3s; }\n        .trust-item:nth-child(4) { animation-delay: 0.4s; }\n        .trust-item:nth-child(5) { animation-delay: 0.5s; }\n\n        \/* S\u00e9parateurs verticaux entre les items *\/\n        .trust-item:not(:last-child)::after {\n            content: '';\n            position: absolute;\n            right: 0;\n            top: 15%;\n            bottom: 15%;\n            width: 1px;\n            background: linear-gradient(\n                to bottom,\n                transparent,\n                rgba(212, 175, 55, 0.2) 20%,\n                rgba(212, 175, 55, 0.2) 80%,\n                transparent\n            );\n        }\n\n        \/* Ic\u00f4nes SVG avec style horloger raffin\u00e9 *\/\n        .trust-item .icon {\n            margin-bottom: 18px;\n            display: block;\n            line-height: 1;\n            transition: all 0.5s ease;\n        }\n\n        .trust-item .icon svg {\n            width: 32px;\n            height: 32px;\n            color: #C5A572;\n            opacity: 0.9;\n            transition: all 0.5s ease;\n        }\n\n        \/* Animation rotation subtile de l'ic\u00f4ne au hover *\/\n        @keyframes iconPulse {\n            0%, 100% { transform: scale(1) rotate(0deg); }\n            50% { transform: scale(1.15) rotate(5deg); }\n        }\n\n        .trust-item:hover .icon svg {\n            animation: iconPulse 1.2s ease;\n            color: #D4AF37;\n            opacity: 1;\n            filter: drop-shadow(0 0 8px rgba(212, 175, 55, 0.4));\n        }\n\n        \/* Valeurs m\u00e9triques avec animation de compteur *\/\n        .counter-value {\n            font-size: 42px; \n            font-weight: 600; \n            color: #FFFFFF;\n            margin-bottom: 12px;\n            line-height: 1;\n            letter-spacing: -0.5px;\n            transition: all 0.4s ease;\n            position: relative;\n        }\n\n        \/* Effet de brillance sur les chiffres *\/\n        @keyframes shimmer {\n            0% {\n                background-position: -200% center;\n            }\n            100% {\n                background-position: 200% center;\n            }\n        }\n\n        .trust-item:hover .counter-value {\n            background: linear-gradient(\n                90deg,\n                #FFFFFF 30%,\n                #D4AF37 50%,\n                #FFFFFF 70%\n            );\n            background-size: 200% auto;\n            -webkit-background-clip: text;\n            -webkit-text-fill-color: transparent;\n            background-clip: text;\n            animation: shimmer 2s linear infinite;\n        }\n\n        \/* Labels avec typographie horlog\u00e8re classique *\/\n        .trust-item .label {\n            font-size: 11px;\n            font-weight: 500;\n            color: #9B9B9B; \n            letter-spacing: 1.8px;\n            text-transform: uppercase;\n            line-height: 1.5;\n            max-width: 180px;\n            margin-top: 8px;\n            transition: color 0.4s ease;\n        }\n\n        \/* Accent dor\u00e9 subtil sur le label au survol *\/\n        .trust-item:hover .label {\n            color: #C5A572;\n        }\n\n        \/* Animation de la bordure du bas au hover *\/\n        .trust-item::before {\n            content: '';\n            position: absolute;\n            bottom: 0;\n            left: 50%;\n            transform: translateX(-50%);\n            width: 0;\n            height: 2px;\n            background: linear-gradient(\n                90deg,\n                transparent,\n                #C5A572,\n                transparent\n            );\n            transition: width 0.6s ease;\n        }\n\n        .trust-item:hover::before {\n            width: 80%;\n        }\n\n        \/* --- RESPONSIVE MOBILE --- *\/\n        @media (max-width: 968px) {\n            .trust-bar-section {\n                padding: 60px 0;\n            }\n            \n            .trust-container { \n                flex-direction: column;\n                gap: 0;\n            }\n            \n            .trust-item {\n                width: 100%;\n                padding: 32px 20px;\n                border-bottom: 1px solid rgba(197, 165, 114, 0.12);\n            }\n            \n            .trust-item:last-child {\n                border-bottom: none;\n            }\n            \n            .trust-item:not(:last-child)::after {\n                display: none;\n            }\n            \n            .counter-value { \n                font-size: 38px; \n            }\n            \n            .trust-item .label { \n                font-size: 10px;\n                letter-spacing: 1.5px;\n            }\n            \n            .trust-item .icon {\n                font-size: 26px;\n                margin-bottom: 14px;\n            }\n\n            .trust-item .icon svg {\n                width: 28px;\n                height: 28px;\n            }\n        }\n\n        @media (max-width: 480px) {\n            .counter-value { \n                font-size: 34px; \n            }\n        }\n    <\/style>\n<\/head>\n<body>\n    <section class=\"trust-bar-section\">\n        <div class=\"trust-container\">\n            \n            <div class=\"trust-item\">\n                <div class=\"icon\">\n                    <svg width=\"32\" height=\"32\" viewbox=\"0 0 32 32\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                        <circle cx=\"16\" cy=\"16\" r=\"14\" stroke=\"currentColor\" stroke-width=\"1.5\"\/>\n                        <circle cx=\"16\" cy=\"16\" r=\"10\" stroke=\"currentColor\" stroke-width=\"1\"\/>\n                        <circle cx=\"16\" cy=\"16\" r=\"2\" fill=\"currentColor\"\/>\n                        <line x1=\"16\" y1=\"6\" x2=\"16\" y2=\"10\" stroke=\"currentColor\" stroke-width=\"1.5\"\/>\n                        <line x1=\"16\" y1=\"22\" x2=\"16\" y2=\"26\" stroke=\"currentColor\" stroke-width=\"1.5\"\/>\n                        <line x1=\"26\" y1=\"16\" x2=\"22\" y2=\"16\" stroke=\"currentColor\" stroke-width=\"1.5\"\/>\n                        <line x1=\"10\" y1=\"16\" x2=\"6\" y2=\"16\" stroke=\"currentColor\" stroke-width=\"1.5\"\/>\n                    <\/svg>\n                <\/div>\n                <div class=\"counter-value\" data-target=\"77\">0<\/div>\n                <div class=\"label\">Time-on-call<\/div>\n            <\/div>\n            \n            <div class=\"trust-item\">\n                <div class=\"icon\">\n                    <svg width=\"32\" height=\"32\" viewbox=\"0 0 32 32\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                        <rect x=\"6\" y=\"6\" width=\"20\" height=\"20\" rx=\"2\" stroke=\"currentColor\" stroke-width=\"1.5\"\/>\n                        <path d=\"M6 12H26M12 6V26M20 6V26M6 20H26\" stroke=\"currentColor\" stroke-width=\"1\"\/>\n                        <circle cx=\"16\" cy=\"16\" r=\"3\" stroke=\"currentColor\" stroke-width=\"1.5\"\/>\n                        <path d=\"M16 13V16L18 18\" stroke=\"currentColor\" stroke-width=\"1\"\/>\n                    <\/svg>\n                <\/div>\n                <div class=\"counter-value\" data-target=\"12\">0<\/div>\n                <div class=\"label\">Customizable components<\/div>\n            <\/div>\n            \n            <div class=\"trust-item\">\n                <div class=\"icon\">\n                    <svg width=\"32\" height=\"32\" viewbox=\"0 0 32 32\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                        <circle cx=\"16\" cy=\"16\" r=\"13\" stroke=\"currentColor\" stroke-width=\"1.5\"\/>\n                        <path d=\"M16 8V16L22 19\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"\/>\n                        <circle cx=\"16\" cy=\"16\" r=\"1.5\" fill=\"currentColor\"\/>\n                        <path d=\"M16 3V5M16 27V29M29 16H27M5 16H3\" stroke=\"currentColor\" stroke-width=\"1\"\/>\n                    <\/svg>\n                <\/div>\n                <div class=\"counter-value\" data-target=\"41\">0<\/div>\n                <div class=\"label\">Power reserve<\/div>\n            <\/div>\n            \n            <div class=\"trust-item\">\n                <div class=\"icon\">\n                    <svg width=\"32\" height=\"32\" viewbox=\"0 0 32 32\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                        <path d=\"M16 3L19 13L29 16L19 19L16 29L13 19L3 16L13 13L16 3Z\" stroke=\"currentColor\" stroke-width=\"1.5\" fill=\"none\"\/>\n                        <circle cx=\"16\" cy=\"16\" r=\"4\" stroke=\"currentColor\" stroke-width=\"1\"\/>\n                    <\/svg>\n                <\/div>\n                <div class=\"counter-value\" data-target=\"2\">0<\/div>\n                <div class=\"label\">Manufacturer's warranty<\/div>\n            <\/div>\n            \n            <div class=\"trust-item\">\n                <div class=\"icon\">\n                    <svg width=\"32\" height=\"32\" viewbox=\"0 0 32 32\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                        <path d=\"M16 4L18.5 11.5L26 14L18.5 16.5L16 24L13.5 16.5L6 14L13.5 11.5L16 4Z\" stroke=\"currentColor\" stroke-width=\"1.5\" fill=\"none\"\/>\n                        <path d=\"M24 8L25 10L27 11L25 12L24 14L23 12L21 11L23 10L24 8Z\" stroke=\"currentColor\" stroke-width=\"1\"\/>\n                        <path d=\"M8 20L9 22L11 23L9 24L8 26L7 24L5 23L7 22L8 20Z\" stroke=\"currentColor\" stroke-width=\"1\"\/>\n                    <\/svg>\n                <\/div>\n                <div class=\"counter-value\" data-target=\"4.7\">0<\/div>\n                <div class=\"label\">Customer satisfaction<\/div>\n            <\/div>\n            \n        <\/div>\n    <\/section>\n\n    <script>\n        \/\/ Animation de compteur pour les valeurs\n        function animateCounter(element) {\n            const target = parseFloat(element.getAttribute('data-target'));\n            const duration = 2000; \/\/ 2 secondes\n            const increment = target \/ (duration \/ 16); \/\/ 60fps\n            let current = 0;\n            const isDecimal = target % 1 !== 0;\n            const suffix = element.closest('.trust-item').querySelector('.label').textContent.includes('R\u00e9serve') ? 'H' : \n                          element.closest('.trust-item').querySelector('.label').textContent.includes('Garantie') ? ' ANS' :\n                          element.closest('.trust-item').querySelector('.label').textContent.includes('Satisfaction') ? '\/5' : '+';\n            \n            const timer = setInterval(() => {\n                current += increment;\n                if (current >= target) {\n                    current = target;\n                    clearInterval(timer);\n                }\n                \n                if (isDecimal) {\n                    element.textContent = current.toFixed(1) + suffix;\n                } else {\n                    element.textContent = Math.floor(current) + suffix;\n                }\n            }, 16);\n        }\n\n        \/\/ Observer pour d\u00e9clencher l'animation au scroll\n        const observer = new IntersectionObserver((entries) => {\n            entries.forEach(entry => {\n                if (entry.isIntersecting) {\n                    const counters = entry.target.querySelectorAll('.counter-value');\n                    counters.forEach(counter => {\n                        if (counter.textContent === '0') {\n                            animateCounter(counter);\n                        }\n                    });\n                }\n            });\n        }, { threshold: 0.5 });\n\n        observer.observe(document.querySelector('.trust-bar-section'));\n    <\/script>\n<\/body>\n<\/html>\r\n\t\t<\/div>\r\n\t<\/div>\r\n\r\n\t<div class=\"wpb_raw_code wpb_raw_html wpb_content_element\" >\r\n\t\t<div class=\"wpb_wrapper\">\r\n\t\t\t<style>\n\/* CSS pour la section Gammes *\/\n@import url('https:\/\/fonts.googleapis.com\/css2?family=League+Spartan:wght@300;400;600;800&display=swap');\n\n.gammes-section {\n    font-family: 'League Spartan', sans-serif;\n    \/* COULEUR FINALE : #13161B *\/\n    background-color: #13161B; \n    color: #f0f0f0;\n    padding: 100px 0; \n    \n    width: 100%;\n    margin: 0 auto;\n    box-sizing: border-box;\n}\n\n.gammes-header h2 {\n    font-size: clamp(30px, 4vw, 55px);\n    font-weight: 800;\n    text-align: center;\n    text-transform: uppercase;\n    margin-bottom: 20px;\n    letter-spacing: 2px;\n}\n\n.gammes-header p {\n    text-align: center;\n    max-width: 700px;\n    margin: 0 auto 60px auto;\n    font-size: 18px;\n    color: #aaaaaa;\n    font-weight: 300;\n}\n\n\/* Conteneur des deux cartes *\/\n.gammes-card-container {\n    display: flex;\n    gap: 30px;\n    max-width: 1200px;\n    margin: 0 auto;\n    padding: 0 5%; \n}\n\n.gamme-card {\n    flex: 1; \n    padding: 40px;\n    \/* Fond de carte transparent sur le #13161B *\/\n    background-color: transparent; \n    border: 1px solid rgba(255, 255, 255, 0.1); \n    transition: transform 0.3s ease, border-color 0.3s ease;\n}\n\n.gamme-card:hover {\n    transform: translateY(-5px); \n    border-color: rgba(212, 175, 55, 0.5); \n}\n\n.gamme-card h3 {\n    font-size: 24px;\n    font-weight: 600;\n    text-transform: uppercase;\n    margin-bottom: 10px;\n    letter-spacing: 1px;\n}\n\n.gamme-card .prix {\n    font-size: 28px;\n    font-weight: 800;\n    color: #ffffff;\n    margin-bottom: 25px;\n}\n\n.gamme-card ul {\n    list-style: none;\n    padding: 0;\n    margin: 30px 0;\n}\n\n.gamme-card li {\n    padding: 10px 0;\n    border-top: 1px dashed rgba(255, 255, 255, 0.1);\n    font-size: 16px;\n    font-weight: 300;\n}\n\n.gamme-card li::before {\n    content: \"\u2022\";\n    color: #d4af37; \n    font-weight: bold;\n    display: inline-block; \n    width: 1em;\n    margin-left: -1em;\n}\n\n\/* Mise en \u00e9vidence de la gamme Signature (Couleur Or) *\/\n.card-signature h3 {\n    color: #d4af37; \n}\n.card-signature .prix {\n    color: #d4af37; \n}\n.card-signature {\n    border: 2px solid #d4af37; \n}\n.card-signature:hover {\n    box-shadow: 0 0 15px rgba(212, 175, 55, 0.4); \n}\n\n\n\/* Bouton de la section Gammes *\/\n.gammes-btn {\n    display: inline-block;\n    padding: 14px 30px;\n    background-color: transparent;\n    color: #ffffff;\n    font-weight: 600;\n    text-transform: uppercase;\n    text-decoration: none;\n    font-size: 14px;\n    border: 1px solid #ffffff;\n    transition: all 0.3s ease;\n    letter-spacing: 1px;\n    margin-top: 20px;\n}\n.gammes-btn:hover {\n    background-color: #ffffff;\n    \/* Couleur du texte au survol = couleur de fond *\/\n    color: #13161B; \n}\n\n\n\/* RESPONSIVE MOBILE *\/\n@media (max-width: 768px) {\n    .gammes-card-container {\n        flex-direction: column; \n    }\n    .gamme-card {\n        padding: 30px 20px;\n    }\n}\n<\/style>\n\n<section id=\"gammes-section\" class=\"gammes-section\">\n    <div class=\"gammes-header\">\n        <h2>Your project. two demanding standards.<\/h2>\n        <p>\n            Every watch is unique. To guarantee you the best possible experience, we have defined two assembly standards depending on the origin and quality of the components.\n        <\/p>\n    <\/div>\n\n    <div class=\"gammes-card-container\">\n        \n        <div class=\"gamme-card card-initial\">\n            <h3>Initial configuration<\/h3>\n            <p class=\"prix\">320\u20ac - 490\u20ac+<\/p>\n            \n            <p style=\"font-size:16px; margin-bottom: 20px; font-weight: 600;\">Tailor-made for your everyday life.<\/p>\n            \n            <ul>\n                <li>NH35\/38 SSI\/TMI movement (proven reliability)<\/li>\n                <li>Optimized sourcing (best value for money)<\/li>\n                <li>Workshop assembly, adjustment and testing<\/li>\n                <li>Standard sapphire crystal<\/li>\n            <\/ul>\n        <\/div>\n\n        <div class=\"gamme-card card-signature\">\n            <h3>Signature configuration<\/h3>\n            <p class=\"prix\">520\u20ac - 950\u20ac and more<\/p>\n            \n            <p style=\"font-size:16px; margin-bottom: 20px; font-weight: 600;\">Excellence without compromise.<\/p>\n\n            <ul>\n                <li>High-end components from international suppliers<\/li>\n                <li>Top-of-the-range Anti-Reflective (AR) sapphire glass<\/li>\n                <li>High-intensity Swiss Luminescence (Super-LumiNova\u00ae)<\/li>\n                <li>Finely regulated movement in the workshop<\/li>\n                <li>One-off pieces and unique materials (carbon, ceramics).<\/li>\n            <\/ul>\n        <\/div>\n    <\/div>\n    \n    <div style=\"text-align: center; margin-top: 60px;\">\n        <p style=\"color: #aaaaaa;\">\n            Now that you have a vision of the bang requirement, start designing your part.\n        <\/p>\n        <a href=\"https:\/\/calendly.com\/atelierbang\/30min\" class=\"gammes-btn\">Go to the Project Brief<\/a>\n    <\/div>\n\n<\/section>\r\n\t\t<\/div>\r\n\t<\/div>\r\n\r\n\t<div class=\"wpb_raw_code wpb_raw_html wpb_content_element\" >\r\n\t\t<div class=\"wpb_wrapper\">\r\n\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>Preview \u2014 Teaser Simulateur bang.<\/title>\n  <link href=\"https:\/\/fonts.googleapis.com\/css2?family=League+Spartan:wght@300;400;500;600;700&family=DM+Mono:wght@300;400;500&display=swap\" rel=\"stylesheet\" \/>\n  <!-- PAGE DE PREVIEW UNIQUEMENT \u2014 le fond noir simule le site bang. -->\n  <style>\n    body { background: #0a0a0a; margin: 0; padding: 60px 24px; font-family: 'League Spartan', sans-serif; }\n  <\/style>\n<\/head>\n<body>\n\n<!-- ============================================================\n     BLOC \u00c0 COLLER DANS WPBAKERY \/ HTML PERSONNALIS\u00c9\n     Placement : apr\u00e8s la section \"Votre projet. deux standards\"\n     ============================================================ -->\n<section class=\"bang-sim-teaser\">\n\n  <!-- Ligne d\u00e9corative -->\n  <div class=\"bst-rule\"><\/div>\n\n  <div class=\"bst-inner\">\n\n    <!-- GAUCHE : texte -->\n    <div class=\"bst-left\">\n      <span class=\"bst-overtitle\">Nouveau<\/span>\n      <h2 class=\"bst-title\">Combien co\u00fbte<br><em>votre montre ?<\/em><\/h2>\n      <p class=\"bst-body\">\n        Cadran, bo\u00eetier, bracelet, options\u2026 Configurez chaque d\u00e9tail et obtenez une estimation de prix en temps r\u00e9el \u2014 sans engagement, en 2 minutes.\n      <\/p>\n\n      <div class=\"bst-features\">\n        <div class=\"bst-feat\">\n          <span class=\"bst-feat-icon\">\u25c8<\/span>\n          <span>15+ composants configurables<\/span>\n        <\/div>\n        <div class=\"bst-feat\">\n          <span class=\"bst-feat-icon\">\u25c8<\/span>\n          <span>Prix mis \u00e0 jour en direct<\/span>\n        <\/div>\n        <div class=\"bst-feat\">\n          <span class=\"bst-feat-icon\">\u25c8<\/span>\n          <span>Sans inscription ni engagement<\/span>\n        <\/div>\n      <\/div>\n\n      <a class=\"bst-cta\" href=\"\/en\/simulateur\/\">\n        Estimer mon projet\n        <span class=\"bst-arrow\">\u2192<\/span>\n      <\/a>\n      <p class=\"bst-sub\">Puis r\u00e9servez votre cr\u00e9neau en un clic.<\/p>\n    <\/div>\n\n    <!-- DROITE : mini-aper\u00e7u du simulateur -->\n    <div class=\"bst-right\">\n      <div class=\"bst-preview-card\">\n\n        <div class=\"bst-preview-header\">\n          <span class=\"bst-preview-dot red\"><\/span>\n          <span class=\"bst-preview-dot amber\"><\/span>\n          <span class=\"bst-preview-dot green\"><\/span>\n          <span class=\"bst-preview-title\">Simulateur de prix \u2014 bang.<\/span>\n        <\/div>\n\n        <div class=\"bst-preview-body\">\n\n          <!-- Config selector -->\n          <div class=\"bst-mock-label\">Configuration de base<\/div>\n          <div class=\"bst-mock-pills\" id=\"bst-pills-config\">\n            <div class=\"bst-mock-pill active\" data-price=\"405\">Initiale <span>320\u2013490\u20ac<\/span><\/div>\n            <div class=\"bst-mock-pill\" data-price=\"735\">Signature <span>520\u2013950\u20ac<\/span><\/div>\n          <\/div>\n\n          <!-- Cadran -->\n          <div class=\"bst-mock-label\" style=\"margin-top:12px\">Dial<\/div>\n          <div class=\"bst-mock-pills\" id=\"bst-pills-cadran\">\n            <div class=\"bst-mock-pill active\" data-price=\"0\">Standard<\/div>\n            <div class=\"bst-mock-pill\" data-price=\"60\">Galvanique<\/div>\n            <div class=\"bst-mock-pill\" data-price=\"90\">Textur\u00e9<\/div>\n            <div class=\"bst-mock-pill\" data-price=\"180\">Squelette<\/div>\n          <\/div>\n\n          <!-- Bo\u00eetier -->\n          <div class=\"bst-mock-label\" style=\"margin-top:12px\">Housing<\/div>\n          <div class=\"bst-mock-pills\" id=\"bst-pills-boitier\">\n            <div class=\"bst-mock-pill active\" data-price=\"0\">Acier bross\u00e9<\/div>\n            <div class=\"bst-mock-pill\" data-price=\"75\">PVD Noir<\/div>\n            <div class=\"bst-mock-pill\" data-price=\"90\">PVD Or<\/div>\n            <div class=\"bst-mock-pill\" data-price=\"160\">Carbone<\/div>\n          <\/div>\n\n          <!-- Divider -->\n          <div class=\"bst-mock-divider\"><\/div>\n\n          <!-- Prix live -->\n          <div class=\"bst-mock-price-row\">\n            <div>\n              <div class=\"bst-mock-price-label\">Estimation indicative<\/div>\n              <div class=\"bst-mock-price\" id=\"bst-animated-price\">405 \u20ac<\/div>\n            <\/div>\n            <div class=\"bst-mock-badge\">\n              <span class=\"bst-mock-pulse\"><\/span>\n              En direct\n            <\/div>\n          <\/div>\n\n          <!-- Barre de progression prix -->\n          <div class=\"bst-price-bar-track\">\n            <div class=\"bst-price-bar-fill\" id=\"bst-price-bar\"><\/div>\n          <\/div>\n          <div class=\"bst-price-bar-labels\">\n            <span>320 \u20ac<\/span><span>950 \u20ac+<\/span>\n          <\/div>\n\n          <!-- CTA dans le mock -->\n          <div class=\"bst-mock-btn\">R\u00e9server mon cr\u00e9neau \u2192<\/div>\n\n        <\/div>\n      <\/div>\n\n      <!-- Floating badge urgency -->\n      <div class=\"bst-urgency-badge\">\n        <span class=\"bst-ub-dot\"><\/span>\n        <span><strong>3<\/strong> cr\u00e9neaux restants ce mois<\/span>\n      <\/div>\n    <\/div>\n\n  <\/div>\n\n  <!-- Ligne d\u00e9corative bas -->\n  <div class=\"bst-rule\"><\/div>\n\n<\/section>\n\n<style>\n\/* \u2500\u2500\u2500 VARIABLES (h\u00e9rit\u00e9es du site bang.) \u2500\u2500\u2500 *\/\n.bang-sim-teaser {\n  --gold:       #c9a96e;\n  --gold-light: #e8c98a;\n  --gold-dim:   rgba(201,169,110,0.12);\n  --bg-card:    #111111;\n  --bg-deep:    #0d0d0d;\n  --border:     #1e1e1e;\n  --text:       #f0ede8;\n  --text-muted: #888880;\n  --text-dim:   #444440;\n  --red:        #e05a5a;\n  --green:      #4caf80;\n  --font:       'League Spartan', system-ui, sans-serif;\n  --mono:       'DM Mono', monospace;\n\n  font-family: var(--font);\n  color: var(--text);\n  padding: 72px 0;\n  position: relative;\n}\n\n\/* \u2500\u2500\u2500 R\u00c8GLE D\u00c9CORATIVE \u2500\u2500\u2500 *\/\n.bst-rule {\n  height: 1px;\n  background: linear-gradient(90deg,\n    transparent 0%,\n    rgba(201,169,110,0.3) 30%,\n    rgba(201,169,110,0.6) 50%,\n    rgba(201,169,110,0.3) 70%,\n    transparent 100%);\n  margin-bottom: 72px;\n}\n.bst-rule:last-child { margin-bottom: 0; margin-top: 72px; }\n\n\/* \u2500\u2500\u2500 INNER LAYOUT \u2500\u2500\u2500 *\/\n.bst-inner {\n  max-width: 1100px;\n  margin: 0 auto;\n  padding: 0 32px;\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 64px;\n  align-items: center;\n}\n\n\/* \u2500\u2500\u2500 GAUCHE \u2500\u2500\u2500 *\/\n.bst-overtitle {\n  display: inline-block;\n  font-family: var(--mono);\n  font-size: 0.6rem;\n  letter-spacing: 0.22em;\n  text-transform: uppercase;\n  color: var(--gold);\n  border: 1px solid rgba(201,169,110,0.4);\n  padding: 5px 12px;\n  border-radius: 2px;\n  margin-bottom: 20px;\n}\n\n.bst-title {\n  font-size: clamp(2rem, 3.5vw, 2.8rem);\n  font-weight: 700;\n  letter-spacing: -0.03em;\n  line-height: 1.05;\n  text-transform: uppercase;\n  margin: 0 0 20px;\n  color: var(--text);\n}\n.bst-title em {\n  font-style: normal;\n  color: var(--gold-light);\n}\n\n.bst-body {\n  font-size: 0.9rem;\n  color: var(--text-muted);\n  line-height: 1.75;\n  max-width: 420px;\n  margin-bottom: 28px;\n}\n\n\/* Features *\/\n.bst-features {\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n  margin-bottom: 36px;\n}\n.bst-feat {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  font-size: 0.8rem;\n  color: var(--text-muted);\n}\n.bst-feat-icon {\n  color: var(--gold);\n  font-size: 0.65rem;\n  flex-shrink: 0;\n}\n\n\/* CTA *\/\n.bst-cta {\n  display: inline-flex;\n  align-items: center;\n  gap: 10px;\n  background: var(--gold);\n  color: #0a0a0a;\n  font-family: var(--mono);\n  font-size: 0.72rem;\n  font-weight: 500;\n  letter-spacing: 0.16em;\n  text-transform: uppercase;\n  text-decoration: none;\n  padding: 16px 28px;\n  border-radius: 3px;\n  transition: all 0.2s ease;\n}\n.bst-cta:hover {\n  background: var(--gold-light);\n  transform: translateY(-2px);\n  box-shadow: 0 10px 32px rgba(201,169,110,0.22);\n  color: #0a0a0a;\n  text-decoration: none;\n}\n.bst-arrow {\n  transition: transform 0.2s;\n}\n.bst-cta:hover .bst-arrow { transform: translateX(4px); }\n\n.bst-sub {\n  font-size: 0.68rem;\n  color: var(--text-dim);\n  margin-top: 12px;\n  font-family: var(--mono);\n  letter-spacing: 0.06em;\n}\n\n\/* \u2500\u2500\u2500 DROITE \u2014 PREVIEW CARD \u2500\u2500\u2500 *\/\n.bst-right {\n  position: relative;\n}\n\n.bst-preview-card {\n  background: var(--bg-card);\n  border: 1px solid var(--border);\n  border-radius: 8px;\n  overflow: hidden;\n  box-shadow:\n    0 0 0 1px rgba(201,169,110,0.08),\n    0 32px 80px rgba(0,0,0,0.6),\n    0 0 60px rgba(201,169,110,0.04);\n  transform: perspective(1000px) rotateY(-4deg) rotateX(2deg);\n  transition: transform 0.4s ease;\n}\n.bst-preview-card:hover {\n  transform: perspective(1000px) rotateY(-1deg) rotateX(0deg);\n}\n\n\/* Fausse barre de fen\u00eatre *\/\n.bst-preview-header {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 10px 14px;\n  background: #0d0d0d;\n  border-bottom: 1px solid var(--border);\n}\n.bst-preview-dot {\n  width: 9px; height: 9px;\n  border-radius: 50%;\n  flex-shrink: 0;\n}\n.bst-preview-dot.red   { background: #ff5f56; }\n.bst-preview-dot.amber { background: #ffbd2e; }\n.bst-preview-dot.green { background: #27c93f; }\n.bst-preview-title {\n  font-family: var(--mono);\n  font-size: 0.58rem;\n  color: var(--text-dim);\n  letter-spacing: 0.1em;\n  margin-left: 6px;\n}\n\n.bst-preview-body {\n  padding: 18px 20px 20px;\n}\n\n\/* Pill selecting flash *\/\n.bst-mock-pill {\n  transition: all 0.18s ease;\n  cursor: default;\n}\n.bst-mock-pill.selecting {\n  border-color: rgba(201,169,110,0.8) !important;\n  background: rgba(201,169,110,0.18) !important;\n  transform: scale(1.04);\n}\n\n\/* Price bar *\/\n.bst-price-bar-track {\n  height: 3px;\n  background: rgba(255,255,255,0.06);\n  border-radius: 2px;\n  margin-bottom: 4px;\n  overflow: hidden;\n}\n.bst-price-bar-fill {\n  height: 100%;\n  background: linear-gradient(90deg, var(--gold), var(--gold-light));\n  border-radius: 2px;\n  width: 20%;\n  transition: width 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);\n}\n.bst-price-bar-labels {\n  display: flex;\n  justify-content: space-between;\n  font-family: var(--mono);\n  font-size: 0.52rem;\n  color: var(--text-dim);\n  letter-spacing: 0.08em;\n  margin-bottom: 14px;\n}\n\n\/* Price counter flash *\/\n.bst-mock-price.flash {\n  color: var(--gold-light);\n}\n\n\/* Mock label *\/\n.bst-mock-label {\n  font-family: var(--mono);\n  font-size: 0.55rem;\n  letter-spacing: 0.14em;\n  text-transform: uppercase;\n  color: var(--text-dim);\n  margin-bottom: 7px;\n}\n\n\/* Mock pills *\/\n.bst-mock-pills {\n  display: flex;\n  gap: 6px;\n  flex-wrap: wrap;\n}\n.bst-mock-pill {\n  font-size: 0.7rem;\n  padding: 6px 10px;\n  border: 1px solid var(--border);\n  border-radius: 3px;\n  color: var(--text-muted);\n  background: var(--bg-deep);\n  display: flex;\n  align-items: center;\n  gap: 5px;\n}\n.bst-mock-pill span {\n  font-family: var(--mono);\n  font-size: 0.6rem;\n  color: var(--text-dim);\n}\n.bst-mock-pill.active {\n  border-color: rgba(201,169,110,0.5);\n  background: rgba(201,169,110,0.07);\n  color: var(--text);\n}\n.bst-mock-pill.active span { color: var(--gold); }\n\n\/* Divider *\/\n.bst-mock-divider {\n  height: 1px;\n  background: var(--border);\n  margin: 16px 0;\n}\n\n\/* Prix live *\/\n.bst-mock-price-row {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin-bottom: 14px;\n}\n.bst-mock-price-label {\n  font-family: var(--mono);\n  font-size: 0.55rem;\n  letter-spacing: 0.12em;\n  text-transform: uppercase;\n  color: var(--text-dim);\n  margin-bottom: 3px;\n}\n.bst-mock-price {\n  font-size: 1.8rem;\n  font-weight: 700;\n  letter-spacing: -0.03em;\n  color: var(--text);\n  font-family: var(--font);\n  transition: color 0.3s ease;\n}\n\n.bst-mock-badge {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  font-family: var(--mono);\n  font-size: 0.58rem;\n  letter-spacing: 0.1em;\n  text-transform: uppercase;\n  color: var(--green);\n  background: rgba(76,175,128,0.08);\n  border: 1px solid rgba(76,175,128,0.2);\n  padding: 5px 9px;\n  border-radius: 3px;\n}\n.bst-mock-pulse {\n  display: inline-block;\n  width: 6px; height: 6px;\n  background: var(--green);\n  border-radius: 50%;\n  animation: bst-pulse 1.4s ease-in-out infinite;\n}\n@keyframes bst-pulse {\n  0%, 100% { opacity: 1; transform: scale(1); }\n  50% { opacity: 0.4; transform: scale(0.65); }\n}\n\n\/* Mock CTA *\/\n.bst-mock-btn {\n  background: linear-gradient(135deg, var(--gold), var(--gold-light));\n  color: #0a0a0a;\n  font-family: var(--mono);\n  font-size: 0.62rem;\n  font-weight: 500;\n  letter-spacing: 0.14em;\n  text-transform: uppercase;\n  text-align: center;\n  padding: 12px;\n  border-radius: 3px;\n  cursor: default;\n}\n\n\/* \u2500\u2500\u2500 BADGE URGENCY \u2500\u2500\u2500 *\/\n.bst-urgency-badge {\n  position: absolute;\n  bottom: -18px;\n  right: -18px;\n  background: var(--bg-card);\n  border: 1px solid rgba(201,169,110,0.25);\n  border-radius: 50px;\n  padding: 9px 16px;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  font-size: 0.7rem;\n  color: var(--text-muted);\n  font-family: var(--mono);\n  letter-spacing: 0.06em;\n  box-shadow: 0 8px 24px rgba(0,0,0,0.5);\n  white-space: nowrap;\n}\n.bst-urgency-badge strong { color: var(--gold); }\n.bst-ub-dot {\n  width: 7px; height: 7px;\n  background: var(--red);\n  border-radius: 50%;\n  flex-shrink: 0;\n  animation: bst-pulse 1.4s ease-in-out infinite;\n}\n\n\/* \u2500\u2500\u2500 RESPONSIVE \u2500\u2500\u2500 *\/\n@media (max-width: 860px) {\n  .bst-inner {\n    grid-template-columns: 1fr;\n    gap: 48px;\n    padding: 0 24px;\n  }\n  .bst-right {\n    padding-bottom: 28px; \/* espace pour le badge *\/\n  }\n  .bst-preview-card {\n    transform: none;\n    max-width: 480px;\n    margin: 0 auto;\n  }\n  .bst-urgency-badge {\n    right: 0;\n    bottom: 0;\n  }\n  .bst-title { font-size: 1.8rem; }\n  .bang-sim-teaser { padding: 48px 0; }\n  .bst-rule { margin-bottom: 48px; }\n  .bst-rule:last-child { margin-top: 48px; }\n}\n\n@media (max-width: 480px) {\n  .bst-inner { padding: 0 18px; }\n  .bst-mock-pills { flex-wrap: nowrap; overflow-x: auto; }\n  .bst-urgency-badge { font-size: 0.62rem; right: 4px; }\n}\n<\/style>\n\n<script>\n(function () {\n\n  \/* \u2500\u2500 Donn\u00e9es \u2500\u2500 *\/\n  const GROUPS = {\n    config:  { id: 'bst-pills-config',  pills: null },\n    cadran:  { id: 'bst-pills-cadran',  pills: null },\n    boitier: { id: 'bst-pills-boitier', pills: null },\n  };\n\n  const MIN_PRICE = 320;\n  const MAX_PRICE = 950;\n\n  let currentPrice = 405;\n  let targetPrice  = 405;\n  let countInterval = null;\n\n  \/* \u2500\u2500 Init \u2500\u2500 *\/\n  function init() {\n    Object.keys(GROUPS).forEach(function(k) {\n      const wrap = document.getElementById(GROUPS[k].id);\n      if (wrap) GROUPS[k].pills = wrap.querySelectorAll('.bst-mock-pill');\n    });\n    updateBar(currentPrice);\n    startLoop();\n  }\n\n  \/* \u2500\u2500 Calcule le prix total \u00e0 partir des pills actives \u2500\u2500 *\/\n  function calcPrice() {\n    let total = 0;\n    Object.keys(GROUPS).forEach(function(k) {\n      const pills = GROUPS[k].pills;\n      if (!pills) return;\n      pills.forEach(function(p) {\n        if (p.classList.contains('active')) {\n          total += parseInt(p.dataset.price || '0', 10);\n        }\n      });\n    });\n    return total;\n  }\n\n  \/* \u2500\u2500 S\u00e9lectionne un pill au hasard dans un groupe \u2500\u2500 *\/\n  function pickRandom(groupKey, cb) {\n    const pills = GROUPS[groupKey].pills;\n    if (!pills || pills.length === 0) { cb && cb(); return; }\n\n    \/\/ Pill candidate diff\u00e9rente de l'active\n    const active = Array.from(pills).findIndex(p => p.classList.contains('active'));\n    let next = active;\n    while (next === active && pills.length > 1) {\n      next = Math.floor(Math.random() * pills.length);\n    }\n\n    const target = pills[next];\n\n    \/\/ Flash \"selecting\"\n    target.classList.add('selecting');\n\n    setTimeout(function() {\n      target.classList.remove('selecting');\n      \/\/ D\u00e9sactive tous, active la cible\n      pills.forEach(p => p.classList.remove('active'));\n      target.classList.add('active');\n      cb && cb();\n    }, 280);\n  }\n\n  \/* \u2500\u2500 Anime le compteur de prix \u2500\u2500 *\/\n  function animatePrice(from, to) {\n    if (countInterval) clearInterval(countInterval);\n    const priceEl = document.getElementById('bst-animated-price');\n    if (!priceEl) return;\n\n    const duration = 500; \/\/ ms\n    const steps    = 20;\n    const stepMs   = duration \/ steps;\n    const diff     = to - from;\n    let   step     = 0;\n\n    priceEl.classList.add('flash');\n\n    countInterval = setInterval(function() {\n      step++;\n      const eased = easeOut(step \/ steps);\n      const val   = Math.round(from + diff * eased);\n      priceEl.textContent = val + ' \u20ac';\n      if (step >= steps) {\n        clearInterval(countInterval);\n        priceEl.textContent = to + ' \u20ac';\n        priceEl.classList.remove('flash');\n      }\n    }, stepMs);\n\n    updateBar(to);\n    currentPrice = to;\n  }\n\n  function easeOut(t) { return 1 - Math.pow(1 - t, 3); }\n\n  \/* \u2500\u2500 Met \u00e0 jour la barre de progression \u2500\u2500 *\/\n  function updateBar(price) {\n    const bar = document.getElementById('bst-price-bar');\n    if (!bar) return;\n    const pct = Math.min(100, Math.max(5,\n      ((price - MIN_PRICE) \/ (MAX_PRICE - MIN_PRICE)) * 100\n    ));\n    bar.style.width = pct + '%';\n  }\n\n  \/* \u2500\u2500 S\u00e9quence : choisit un groupe, change le pill, met \u00e0 jour le prix \u2500\u2500 *\/\n  function runStep() {\n    \/\/ Choisit un groupe au hasard\n    const keys  = Object.keys(GROUPS);\n    const key   = keys[Math.floor(Math.random() * keys.length)];\n\n    pickRandom(key, function() {\n      const newPrice = calcPrice();\n      animatePrice(currentPrice, newPrice);\n    });\n  }\n\n  \/* \u2500\u2500 Boucle principale \u2500\u2500 *\/\n  function startLoop() {\n    \/\/ D\u00e9lai variable entre 1.4s et 2.8s pour que \u00e7a paraisse humain\n    function schedule() {\n      const delay = 1400 + Math.random() * 1400;\n      setTimeout(function() {\n        runStep();\n        schedule();\n      }, delay);\n    }\n    \/\/ Premier changement apr\u00e8s 1.2s\n    setTimeout(function() {\n      runStep();\n      schedule();\n    }, 1200);\n  }\n\n  \/* \u2500\u2500 Lancement \u2500\u2500 *\/\n  if (document.readyState === 'loading') {\n    document.addEventListener('DOMContentLoaded', init);\n  } else {\n    init();\n  }\n\n})();\n<\/script>\n\n<\/body>\n<\/html>\r\n\t\t<\/div>\r\n\t<\/div>\r\n\r\n\t<div class=\"wpb_raw_code wpb_raw_html wpb_content_element\" >\r\n\t\t<div class=\"wpb_wrapper\">\r\n\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>Disponibilit\u00e9s Atelier<\/title>\n    <style>\n        \/* Import Police *\/\n        @import url('https:\/\/fonts.googleapis.com\/css2?family=League+Spartan:wght@300;400;500;600;700;800&display=swap');\n\n        * {\n            margin: 0;\n            padding: 0;\n            box-sizing: border-box;\n        }\n\n        body {\n            font-family: 'League Spartan', sans-serif;\n            background-color: #1a1a1a;\n        }\n\n        .scarcity-section {\n            background: transparent;\n            color: #E8E8E8;\n            padding: 80px 0 120px 0;\n            width: 100%;\n            margin: 0 auto;\n            text-align: center;\n            position: relative;\n        }\n\n        \/* Animation d'apparition *\/\n        @keyframes fadeInScale {\n            from {\n                opacity: 0;\n                transform: scale(0.95) translateY(20px);\n            }\n            to {\n                opacity: 1;\n                transform: scale(1) translateY(0);\n            }\n        }\n\n        \/* LA CARTE DE STATUT *\/\n        .status-card {\n            background: linear-gradient(\n                135deg,\n                rgba(255, 255, 255, 0.02) 0%,\n                rgba(255, 255, 255, 0.01) 100%\n            );\n            backdrop-filter: blur(10px);\n            border: 1px solid rgba(197, 165, 114, 0.15);\n            max-width: 900px;\n            width: 90%;\n            margin: 0 auto;\n            padding: 60px 50px;\n            position: relative;\n            box-shadow: \n                0 8px 32px rgba(0, 0, 0, 0.4),\n                inset 0 1px 0 rgba(255, 255, 255, 0.05);\n            animation: fadeInScale 0.8s ease-out;\n        }\n\n        \/* Effet de bordure dor\u00e9e anim\u00e9e *\/\n        .status-card::before {\n            content: '';\n            position: absolute;\n            top: -1px;\n            left: -1px;\n            right: -1px;\n            bottom: -1px;\n            background: linear-gradient(\n                45deg,\n                transparent 30%,\n                rgba(197, 165, 114, 0.3) 50%,\n                transparent 70%\n            );\n            background-size: 200% 200%;\n            animation: borderShine 6s ease infinite;\n            z-index: -1;\n            opacity: 0;\n            transition: opacity 0.5s;\n        }\n\n        .status-card:hover::before {\n            opacity: 1;\n        }\n\n        @keyframes borderShine {\n            0%, 100% { background-position: 0% 50%; }\n            50% { background-position: 100% 50%; }\n        }\n\n        \/* Header avec Month Display *\/\n        .status-header {\n            display: flex;\n            justify-content: center;\n            align-items: center;\n            gap: 15px;\n            margin-bottom: 45px;\n            padding-bottom: 25px;\n            position: relative;\n        }\n\n        .status-header::after {\n            content: '';\n            position: absolute;\n            bottom: 0;\n            left: 50%;\n            transform: translateX(-50%);\n            width: 60%;\n            height: 1px;\n            background: linear-gradient(\n                90deg,\n                transparent,\n                rgba(197, 165, 114, 0.3) 50%,\n                transparent\n            );\n        }\n\n        \/* Point Live avec animation pulse *\/\n        .live-dot {\n            width: 14px;\n            height: 14px;\n            background-color: #4CAF50;\n            border-radius: 50%;\n            box-shadow: \n                0 0 0 0 rgba(76, 175, 80, 0.7),\n                0 0 15px rgba(76, 175, 80, 0.5);\n            animation: pulseDot 2s infinite;\n            position: relative;\n        }\n\n        @keyframes pulseDot {\n            0% {\n                box-shadow: \n                    0 0 0 0 rgba(76, 175, 80, 0.7),\n                    0 0 15px rgba(76, 175, 80, 0.5);\n            }\n            50% {\n                box-shadow: \n                    0 0 0 8px rgba(76, 175, 80, 0),\n                    0 0 20px rgba(76, 175, 80, 0.7);\n            }\n            100% {\n                box-shadow: \n                    0 0 0 0 rgba(76, 175, 80, 0),\n                    0 0 15px rgba(76, 175, 80, 0.5);\n            }\n        }\n\n        #current-month-display {\n            font-size: 18px;\n            font-weight: 600;\n            text-transform: uppercase;\n            letter-spacing: 3px;\n            color: #C5A572;\n            opacity: 0;\n            animation: fadeIn 0.8s ease 0.3s forwards;\n        }\n\n        @keyframes fadeIn {\n            to { opacity: 1; }\n        }\n\n        \/* Container des slots *\/\n        .slots-container {\n            margin-bottom: 45px;\n            position: relative;\n        }\n\n        .slots-number {\n            font-size: 110px;\n            font-weight: 700;\n            line-height: 1;\n            color: #FFFFFF;\n            display: block;\n            margin-bottom: 15px;\n            letter-spacing: -2px;\n            opacity: 0;\n            animation: fadeInScale 0.8s ease 0.5s forwards;\n            transition: all 0.4s ease;\n        }\n\n        .slots-number.counting {\n            animation: countPulse 0.3s ease;\n        }\n\n        @keyframes countPulse {\n            0%, 100% { transform: scale(1); }\n            50% { transform: scale(1.05); }\n        }\n\n        .slots-label {\n            font-size: 16px;\n            text-transform: uppercase;\n            color: #9B9B9B;\n            letter-spacing: 3px;\n            font-weight: 500;\n            opacity: 0;\n            animation: fadeIn 0.8s ease 0.7s forwards;\n        }\n\n        \/* Barre de progression \u00e9l\u00e9gante *\/\n        .capacity-bar-container {\n            margin: 0 auto 35px auto;\n            max-width: 600px;\n        }\n\n        .capacity-bar-bg {\n            width: 100%;\n            height: 6px;\n            background-color: rgba(255, 255, 255, 0.08);\n            border-radius: 3px;\n            overflow: hidden;\n            position: relative;\n            box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3);\n        }\n\n        .capacity-bar-fill {\n            height: 100%;\n            background: linear-gradient(\n                90deg,\n                #4CAF50 0%,\n                #66BB6A 100%\n            );\n            width: 0%;\n            transition: width 1.5s cubic-bezier(0.4, 0, 0.2, 1);\n            position: relative;\n            box-shadow: 0 0 10px rgba(76, 175, 80, 0.5);\n        }\n\n        \/* Effet de brillance sur la barre *\/\n        .capacity-bar-fill::after {\n            content: '';\n            position: absolute;\n            top: 0;\n            left: -100%;\n            width: 100%;\n            height: 100%;\n            background: linear-gradient(\n                90deg,\n                transparent,\n                rgba(255, 255, 255, 0.3),\n                transparent\n            );\n            animation: barShine 2s ease-in-out infinite;\n        }\n\n        @keyframes barShine {\n            0% { left: -100%; }\n            100% { left: 200%; }\n        }\n\n        .capacity-bar-labels {\n            display: flex;\n            justify-content: space-between;\n            margin-top: 10px;\n            font-size: 11px;\n            color: #6B6B6B;\n            letter-spacing: 1px;\n            text-transform: uppercase;\n        }\n\n        .status-footer {\n            font-size: 13px;\n            color: #7A7A7A;\n            font-weight: 400;\n            margin-bottom: 45px;\n            letter-spacing: 0.5px;\n            opacity: 0;\n            animation: fadeIn 0.8s ease 0.9s forwards;\n        }\n\n        \/* Bouton CTA Premium *\/\n        .scarcity-cta-btn {\n            display: inline-block;\n            padding: 22px 70px;\n            background: linear-gradient(\n                135deg,\n                #FFFFFF 0%,\n                #F5F5F5 100%\n            );\n            color: #0A0C0F;\n            font-weight: 700;\n            font-size: 14px;\n            text-transform: uppercase;\n            text-decoration: none;\n            letter-spacing: 2.5px;\n            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);\n            border: 1px solid transparent;\n            position: relative;\n            overflow: hidden;\n            opacity: 0;\n            animation: fadeInScale 0.8s ease 1.1s forwards;\n        }\n\n        .scarcity-cta-btn::before {\n            content: '';\n            position: absolute;\n            top: 0;\n            left: -100%;\n            width: 100%;\n            height: 100%;\n            background: linear-gradient(\n                135deg,\n                transparent,\n                rgba(197, 165, 114, 0.3),\n                transparent\n            );\n            transition: left 0.6s ease;\n        }\n\n        .scarcity-cta-btn:hover::before {\n            left: 100%;\n        }\n\n        .scarcity-cta-btn:hover {\n            background: linear-gradient(\n                135deg,\n                #C5A572 0%,\n                #D4AF37 100%\n            );\n            color: #FFFFFF;\n            transform: translateY(-2px);\n            box-shadow: 0 10px 30px rgba(197, 165, 114, 0.3);\n        }\n\n        .scarcity-cta-btn span {\n            position: relative;\n            z-index: 1;\n        }\n\n        \/* \u00c9tats d'urgence *\/\n        .status-card.urgent .live-dot {\n            background-color: #FFC107;\n            animation: pulseUrgent 1.5s infinite;\n        }\n\n        @keyframes pulseUrgent {\n            0%, 100% {\n                box-shadow: \n                    0 0 0 0 rgba(255, 193, 7, 0.7),\n                    0 0 20px rgba(255, 193, 7, 0.5);\n            }\n            50% {\n                box-shadow: \n                    0 0 0 10px rgba(255, 193, 7, 0),\n                    0 0 25px rgba(255, 193, 7, 0.7);\n            }\n        }\n\n        .status-card.full .live-dot {\n            background-color: #F44336;\n            animation: pulseFull 1s infinite;\n        }\n\n        @keyframes pulseFull {\n            0%, 100% {\n                box-shadow: \n                    0 0 0 0 rgba(244, 67, 54, 0.7),\n                    0 0 20px rgba(244, 67, 54, 0.6);\n            }\n            50% {\n                box-shadow: \n                    0 0 0 10px rgba(244, 67, 54, 0),\n                    0 0 30px rgba(244, 67, 54, 0.8);\n            }\n        }\n\n        \/* RESPONSIVE *\/\n        @media (max-width: 768px) {\n            .scarcity-section {\n                padding: 60px 0 80px 0;\n            }\n\n            .status-card {\n                width: 92%;\n                padding: 45px 30px;\n            }\n\n            .slots-number {\n                font-size: 80px;\n            }\n\n            .scarcity-cta-btn {\n                width: 100%;\n                padding: 20px 0;\n            }\n\n            #current-month-display {\n                font-size: 15px;\n                letter-spacing: 2px;\n            }\n\n            .capacity-bar-container {\n                max-width: 100%;\n            }\n        }\n\n        @media (max-width: 480px) {\n            .slots-number {\n                font-size: 65px;\n            }\n\n            .status-card {\n                padding: 40px 25px;\n            }\n        }\n    <\/style>\n<\/head>\n<body>\n    <section class=\"scarcity-section\">\n        <div class=\"status-card\" id=\"status-card\">\n            <div class=\"status-header\">\n                <div class=\"live-dot\" id=\"status-light\"><\/div>\n                <div id=\"current-month-display\">LOADING...<\/div>\n            <\/div>\n\n            <div class=\"slots-container\">\n                <span class=\"slots-number\" id=\"slots-left\">0<\/span>\n                <span class=\"slots-label\">Available slots<\/span>\n            <\/div>\n\n            <div class=\"capacity-bar-container\">\n                <div class=\"capacity-bar-bg\">\n                    <div class=\"capacity-bar-fill\" id=\"capacity-fill\"><\/div>\n                <\/div>\n                <div class=\"capacity-bar-labels\">\n                    <span>Workshop capacity<\/span>\n                    <span id=\"capacity-text\">0\/7<\/span>\n                <\/div>\n            <\/div>\n            \n            <div class=\"status-footer\">\n                Monthly capacity limited to <span id=\"total-capacity\">7<\/span> watchmaking projects\n            <\/div>\n\n            <a href=\"https:\/\/calendly.com\/atelierbang\/30min\" class=\"scarcity-cta-btn\">\n                <span id=\"cta-text\">RESERVE MY SLOT<\/span>\n            <\/a>\n        <\/div>\n    <\/section>\n\n    <script>\n        document.addEventListener('DOMContentLoaded', function() {\n            \n            \/\/ --- \u2699\ufe0f CONFIGURATION MANUELLE ICI --- \/\/\n            const totalSlots = 7;     \n            const remainingSlots = 3;  \/\/ <--- CHANGEZ CE CHIFFRE SELON VOS DISPOS\n            \/\/ ------------------------------------- \/\/\n\n            const statusCard = document.getElementById('status-card');\n            const dot = document.getElementById('status-light');\n            const fill = document.getElementById('capacity-fill');\n            const slotsLeftElement = document.getElementById('slots-left');\n            const ctaText = document.getElementById('cta-text');\n\n            \/\/ 1. Mise \u00e0 jour du Mois Automatique (En Fran\u00e7ais)\n            const date = new Date();\n            const monthName = date.toLocaleString('fr-FR', { month: 'long', year: 'numeric' });\n            document.getElementById('current-month-display').innerText = monthName.toUpperCase();\n\n            \/\/ 2. Animation du compteur\n            let currentCount = 0;\n            const countInterval = setInterval(() => {\n                if (currentCount < remainingSlots) {\n                    currentCount++;\n                    slotsLeftElement.textContent = currentCount;\n                    slotsLeftElement.classList.add('counting');\n                    setTimeout(() => slotsLeftElement.classList.remove('counting'), 300);\n                } else {\n                    clearInterval(countInterval);\n                }\n            }, 80);\n\n            \/\/ 3. Mise \u00e0 jour de la capacit\u00e9\n            document.getElementById('total-capacity').innerText = totalSlots;\n            const usedSlots = totalSlots - remainingSlots;\n            document.getElementById('capacity-text').innerText = `${usedSlots}\/${totalSlots}`;\n\n            \/\/ 4. Animation de la barre\n            const percentageFilled = (usedSlots \/ totalSlots) * 100;\n            \n            setTimeout(() => {\n                document.getElementById('capacity-fill').style.width = percentageFilled + \"%\";\n            }, 800);\n\n            \/\/ 5. Changement de couleur et \u00e9tat selon l'urgence\n            if (remainingSlots === 0) {\n                \/\/ COMPLET\n                statusCard.classList.add('full');\n                fill.style.background = \"linear-gradient(90deg, #F44336 0%, #E53935 100%)\";\n                fill.style.boxShadow = \"0 0 15px rgba(244, 67, 54, 0.6)\";\n                slotsLeftElement.innerText = \"COMPLET\";\n                slotsLeftElement.style.fontSize = \"55px\";\n                ctaText.innerText = \"LISTE D'ATTENTE\";\n            } else if (remainingSlots <= 3) {\n                \/\/ URGENT\n                statusCard.classList.add('urgent');\n                fill.style.background = \"linear-gradient(90deg, #FFC107 0%, #FFD54F 100%)\";\n                fill.style.boxShadow = \"0 0 15px rgba(255, 193, 7, 0.5)\";\n            } else {\n                \/\/ DISPONIBLE\n                fill.style.background = \"linear-gradient(90deg, #4CAF50 0%, #66BB6A 100%)\";\n                fill.style.boxShadow = \"0 0 12px rgba(76, 175, 80, 0.5)\";\n            }\n        });\n    <\/script>\n<\/body>\n<\/html>\r\n\t\t<\/div>\r\n\t<\/div>\r\n\r\n\t<div class=\"wpb_raw_code wpb_raw_html wpb_content_element\" >\r\n\t\t<div class=\"wpb_wrapper\">\r\n\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>Preview \u2014 Section Portfolio bang.<\/title>\n  <link href=\"https:\/\/fonts.googleapis.com\/css2?family=League+Spartan:wght@300;400;600;700;800;900&family=DM+Mono:wght@300;400;500&display=swap\" rel=\"stylesheet\" \/>\n  <style>\n    \/* PREVIEW ONLY *\/\n    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\n    body { background: #0a0a0a; font-family: 'League Spartan', sans-serif; -webkit-font-smoothing: antialiased; }\n  <\/style>\n<\/head>\n<body>\n\n<!-- ============================================================\n     BLOC \u00c0 COLLER DANS WPBAKERY \u2014 HTML PERSONNALIS\u00c9\n     Remplace la section \"L'UNIQUE DANS SES D\u00c9TAILS\"\n     ============================================================ -->\n\n<section class=\"bpf-section\">\n\n  <!-- EN-T\u00caTE -->\n  <div class=\"bpf-header\">\n    <div class=\"bpf-header-left\">\n      <span class=\"bpf-overtitle\">Signature configuration<\/span>\n      <h2 class=\"bpf-title\">L'unique<br><em>dans ses d\u00e9tails.<\/em><\/h2>\n    <\/div>\n    <div class=\"bpf-header-right\">\n      <p class=\"bpf-desc\">Chaque montre bang. est une promesse tenue. Des cadrans rares \u00e0 la signature de notre rotor \u2014 l'\u00e9tendue de nos r\u00e9alisations.<\/p>\n      <div class=\"bpf-line\"><\/div>\n    <\/div>\n  <\/div>\n\n  <!-- GRILLE ASYM\u00c9TRIQUE -->\n  <div class=\"bpf-grid\">\n\n    <!-- GRANDE CARTE \u2014 aiguille -->\n    <a href=\"https:\/\/atelier-bang.com\/en\/atelier\/\" class=\"bpf-card bpf-card--large\">\n      <div class=\"bpf-img\" style=\"background-image:url('https:\/\/bangmod.fr\/wp-content\/uploads\/2025\/12\/IMG_3744.jpeg')\"><\/div>\n      <div class=\"bpf-overlay\"><\/div>\n      <div class=\"bpf-content\">\n        <span class=\"bpf-num\">01<\/span>\n        <div class=\"bpf-text\">\n          <div class=\"bpf-tag\">Finition<\/div>\n          <div class=\"bpf-card-title\">Aiguille<br>Haut de Gamme<\/div>\n          <div class=\"bpf-card-sub\">S\u00e9lection internationale exclusive<\/div>\n        <\/div>\n        <div class=\"bpf-arrow\">\n          <svg width=\"20\" height=\"20\" viewbox=\"0 0 20 20\" fill=\"none\"><path d=\"M4 10h12M12 6l4 4-4 4\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg>\n        <\/div>\n      <\/div>\n      <div class=\"bpf-scan\"><\/div>\n    <\/a>\n\n    <!-- COLONNE DROITE -->\n    <div class=\"bpf-col-right\">\n\n      <!-- CARTE MEDIUM \u2014 rotor -->\n      <a href=\"https:\/\/atelier-bang.com\/en\/atelier\/\" class=\"bpf-card bpf-card--medium\">\n        <div class=\"bpf-img\" style=\"background-image:url('https:\/\/bangmod.fr\/wp-content\/uploads\/2025\/12\/IMG_3750-1.jpeg')\"><\/div>\n        <div class=\"bpf-overlay\"><\/div>\n        <div class=\"bpf-content\">\n          <span class=\"bpf-num\">02<\/span>\n          <div class=\"bpf-text\">\n            <div class=\"bpf-tag\">M\u00e9canique<\/div>\n            <div class=\"bpf-card-title\">Rotor Fran\u00e7ais Sign\u00e9<\/div>\n            <div class=\"bpf-card-sub\">Signature de l'atelier grav\u00e9e<\/div>\n          <\/div>\n          <div class=\"bpf-arrow\">\n            <svg width=\"20\" height=\"20\" viewbox=\"0 0 20 20\" fill=\"none\"><path d=\"M4 10h12M12 6l4 4-4 4\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg>\n          <\/div>\n        <\/div>\n        <div class=\"bpf-scan\"><\/div>\n      <\/a>\n\n      <!-- RANG\u00c9E BAS \u2014 deux petites cartes -->\n      <div class=\"bpf-row-bottom\">\n\n        <!-- CARTE SMALL \u2014 lume -->\n        <a href=\"https:\/\/atelier-bang.com\/en\/atelier\/\" class=\"bpf-card bpf-card--small\">\n          <div class=\"bpf-img\" style=\"background-image:url('https:\/\/bangmod.fr\/wp-content\/uploads\/2025\/12\/IMG_3748-1.jpeg')\"><\/div>\n          <div class=\"bpf-overlay\"><\/div>\n          <div class=\"bpf-content\">\n            <span class=\"bpf-num\">03<\/span>\n            <div class=\"bpf-text\">\n              <div class=\"bpf-tag\">Luminescence<\/div>\n              <div class=\"bpf-card-title\">Super-LumiNova\u00ae<\/div>\n            <\/div>\n            <div class=\"bpf-arrow\">\n              <svg width=\"16\" height=\"16\" viewbox=\"0 0 20 20\" fill=\"none\"><path d=\"M4 10h12M12 6l4 4-4 4\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg>\n            <\/div>\n          <\/div>\n          <div class=\"bpf-scan\"><\/div>\n        <\/a>\n\n        <!-- CARTE SMALL \u2014 cadran -->\n        <a href=\"https:\/\/atelier-bang.com\/en\/atelier\/\" class=\"bpf-card bpf-card--small\">\n          <div class=\"bpf-img\" style=\"background-image:url('https:\/\/bangmod.fr\/wp-content\/uploads\/2025\/12\/IMG_4024-1.jpeg')\"><\/div>\n          <div class=\"bpf-overlay\"><\/div>\n          <div class=\"bpf-content\">\n            <span class=\"bpf-num\">04<\/span>\n            <div class=\"bpf-text\">\n              <div class=\"bpf-tag\">Dial<\/div>\n              <div class=\"bpf-card-title\">Cadran Unique<\/div>\n            <\/div>\n            <div class=\"bpf-arrow\">\n              <svg width=\"16\" height=\"16\" viewbox=\"0 0 20 20\" fill=\"none\"><path d=\"M4 10h12M12 6l4 4-4 4\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg>\n            <\/div>\n          <\/div>\n          <div class=\"bpf-scan\"><\/div>\n        <\/a>\n\n      <\/div><!-- \/row-bottom -->\n\n    <\/div><!-- \/col-right -->\n\n  <\/div><!-- \/grid -->\n\n  <!-- CTA AM\u00c9LIOR\u00c9 -->\n  <div class=\"bpf-cta\">\n    <p class=\"bpf-cta-text\">Ready to see your vision come to life?<\/p>\n    <a href=\"https:\/\/calendly.com\/atelierbang\/30min\" class=\"bpf-btn\">\n      <span class=\"bpf-btn-text\">D\u00e9marrer mon brief complet<\/span>\n      <span class=\"bpf-btn-icon\">\n        <svg width=\"18\" height=\"18\" viewbox=\"0 0 20 20\" fill=\"none\"><path d=\"M4 10h12M12 6l4 4-4 4\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg>\n      <\/span>\n    <\/a>\n    <span class=\"bpf-cta-note\">\u00c9change de 30 min \u2014 sans engagement<\/span>\n  <\/div>\n\n<\/section>\n\n<style>\n\/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n   VARIABLES\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n.bpf-section {\n  --gold:       #c9a96e;\n  --gold-light: #e8c98a;\n  --bg:         #0a0a0a;\n  --bg-card:    #0e0e0e;\n  --border:     rgba(255,255,255,0.06);\n  --text:       #f0ede8;\n  --muted:      #888880;\n  --dim:        #44443e;\n  --font:       'League Spartan', system-ui, sans-serif;\n  --mono:       'DM Mono', monospace;\n\n  font-family: var(--font);\n  background: transparent;\n  color: var(--text);\n  padding: 80px 0 72px;\n\n  \/* FULL WIDTH WP *\/\n  width: 100vw;\n  position: relative;\n  left: 50%;\n  margin-left: -50vw;\n  box-sizing: border-box;\n}\n\n\/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n   EN-T\u00caTE\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n.bpf-header {\n  display: flex;\n  align-items: flex-end;\n  justify-content: space-between;\n  gap: 48px;\n  max-width: 1280px;\n  margin: 0 auto 48px;\n  padding: 0 40px;\n}\n\n.bpf-overtitle {\n  display: inline-block;\n  font-family: var(--mono);\n  font-size: 0.6rem;\n  letter-spacing: 0.22em;\n  text-transform: uppercase;\n  color: var(--gold);\n  border: 1px solid rgba(201,169,110,0.35);\n  padding: 5px 12px;\n  border-radius: 2px;\n  margin-bottom: 16px;\n}\n\n.bpf-title {\n  font-size: clamp(2.2rem, 4vw, 3.4rem);\n  font-weight: 800;\n  text-transform: uppercase;\n  letter-spacing: -0.03em;\n  line-height: 1.0;\n}\n.bpf-title em {\n  font-style: normal;\n  color: var(--gold);\n  display: block;\n}\n\n.bpf-header-right {\n  max-width: 380px;\n  flex-shrink: 0;\n}\n.bpf-desc {\n  font-size: 0.9rem;\n  color: var(--muted);\n  line-height: 1.75;\n  margin-bottom: 20px;\n}\n.bpf-line {\n  height: 1px;\n  background: linear-gradient(90deg, var(--gold), transparent);\n  width: 100%;\n}\n\n\/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n   GRILLE ASYM\u00c9TRIQUE\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n.bpf-grid {\n  display: grid;\n  grid-template-columns: 1.15fr 1fr;\n  grid-template-rows: 580px; \/* hauteur commune impos\u00e9e aux deux colonnes *\/\n  gap: 3px;\n  max-width: 1280px;\n  margin: 0 auto;\n  padding: 0 40px;\n}\n\n.bpf-col-right {\n  display: grid;\n  grid-template-rows: 1fr auto; \/* medium prend le reste, row-bottom fixe *\/\n  gap: 3px;\n  height: 100%; \/* colle exactement \u00e0 la hauteur de la grille *\/\n}\n\n.bpf-row-bottom {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 3px;\n  height: 240px; \/* hauteur fixe pour les deux petites cartes *\/\n}\n\n\/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n   CARTES \u2014 BASE\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n.bpf-card {\n  position: relative;\n  display: block;\n  overflow: hidden;\n  text-decoration: none;\n  cursor: pointer;\n  background: transparent;\n}\n\n\/* Hauteurs \u2014 toutes cal\u00e9es sur leur cellule de grille *\/\n.bpf-card--large  { height: 100%; width: 100%; }\n.bpf-card--medium { height: 100%; width: 100%; }\n.bpf-card--small  { height: 100%; width: 100%; }\n\n\/* Image *\/\n.bpf-img {\n  position: absolute;\n  inset: 0;\n  background-size: cover;\n  background-position: center;\n  transform: scale(1.04);\n  transition: transform 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94),\n              filter 0.9s ease;\n  filter: brightness(0.75) saturate(0.9);\n  will-change: transform;\n}\n.bpf-card:hover .bpf-img {\n  transform: scale(1.12);\n  filter: brightness(0.55) saturate(1.1);\n}\n\n\/* Overlay gradient *\/\n.bpf-overlay {\n  position: absolute;\n  inset: 0;\n  background: linear-gradient(\n    180deg,\n    rgba(0,0,0,0.0) 30%,\n    rgba(0,0,0,0.85) 100%\n  );\n  z-index: 1;\n  transition: opacity 0.4s ease;\n}\n.bpf-card:hover .bpf-overlay {\n  opacity: 0.9;\n}\n\n\/* Ligne scan anim\u00e9e au hover *\/\n.bpf-scan {\n  position: absolute;\n  inset: 0;\n  z-index: 2;\n  pointer-events: none;\n  overflow: hidden;\n}\n.bpf-scan::after {\n  content: '';\n  position: absolute;\n  left: 0; right: 0;\n  height: 1px;\n  background: linear-gradient(90deg,\n    transparent,\n    rgba(201,169,110,0.8) 40%,\n    rgba(232,201,138,1) 50%,\n    rgba(201,169,110,0.8) 60%,\n    transparent);\n  top: -2px;\n  transition: top 0s;\n}\n.bpf-card:hover .bpf-scan::after {\n  top: 0;\n  transition: top 0.7s cubic-bezier(0.4, 0, 0.2, 1);\n  animation: bpf-scan-move 0.7s cubic-bezier(0.4, 0, 0.2, 1) forwards;\n}\n@keyframes bpf-scan-move {\n  from { top: 0%; }\n  to   { top: 100%; }\n}\n\n\/* Contenu *\/\n.bpf-content {\n  position: absolute;\n  inset: 0;\n  z-index: 3;\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  padding: 20px 22px;\n}\n\n\/* Num\u00e9ro *\/\n.bpf-num {\n  font-family: var(--mono);\n  font-size: 0.58rem;\n  letter-spacing: 0.16em;\n  color: rgba(201,169,110,0.7);\n  align-self: flex-end;\n  background: rgba(0,0,0,0.4);\n  padding: 3px 7px;\n  border-radius: 2px;\n  border: 1px solid rgba(201,169,110,0.2);\n  transition: color 0.3s, border-color 0.3s;\n}\n.bpf-card:hover .bpf-num {\n  color: var(--gold);\n  border-color: rgba(201,169,110,0.5);\n}\n\n\/* Texte bas *\/\n.bpf-text {\n  transform: translateY(8px);\n  transition: transform 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94);\n}\n.bpf-card:hover .bpf-text {\n  transform: translateY(0);\n}\n\n.bpf-tag {\n  font-family: var(--mono);\n  font-size: 0.52rem;\n  letter-spacing: 0.18em;\n  text-transform: uppercase;\n  color: var(--gold);\n  margin-bottom: 5px;\n  opacity: 0;\n  transform: translateY(6px);\n  transition: opacity 0.35s ease 0.05s, transform 0.35s ease 0.05s;\n}\n.bpf-card:hover .bpf-tag {\n  opacity: 1;\n  transform: translateY(0);\n}\n\n.bpf-card-title {\n  font-size: clamp(0.95rem, 1.5vw, 1.2rem);\n  font-weight: 700;\n  text-transform: uppercase;\n  letter-spacing: 0.04em;\n  line-height: 1.15;\n  color: var(--text);\n}\n\n.bpf-card-sub {\n  font-size: 0.7rem;\n  color: rgba(240,237,232,0.55);\n  margin-top: 5px;\n  opacity: 0;\n  transform: translateY(4px);\n  transition: opacity 0.35s ease 0.1s, transform 0.35s ease 0.1s;\n}\n.bpf-card:hover .bpf-card-sub {\n  opacity: 1;\n  transform: translateY(0);\n}\n\n\/* Fl\u00e8che *\/\n.bpf-arrow {\n  position: absolute;\n  bottom: 20px;\n  right: 22px;\n  color: var(--gold);\n  opacity: 0;\n  transform: translateX(-8px);\n  transition: opacity 0.35s ease 0.08s, transform 0.35s ease 0.08s;\n}\n.bpf-card:hover .bpf-arrow {\n  opacity: 1;\n  transform: translateX(0);\n}\n\n\/* Bordure gold au hover *\/\n.bpf-card::before {\n  content: '';\n  position: absolute;\n  inset: 0;\n  border: 1px solid rgba(201,169,110,0);\n  z-index: 4;\n  transition: border-color 0.4s ease;\n  pointer-events: none;\n}\n.bpf-card:hover::before {\n  border-color: rgba(201,169,110,0.3);\n}\n\n\/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n   CTA\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n.bpf-cta {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 16px;\n  padding: 64px 40px 0;\n  max-width: 1280px;\n  margin: 0 auto;\n}\n\n.bpf-cta-text {\n  font-size: 0.85rem;\n  color: var(--muted);\n  letter-spacing: 0.06em;\n  text-transform: uppercase;\n  font-family: var(--mono);\n}\n\n.bpf-btn {\n  display: inline-flex;\n  align-items: center;\n  gap: 14px;\n  padding: 16px 36px;\n  border: 1px solid rgba(201,169,110,0.5);\n  color: var(--gold);\n  text-decoration: none;\n  font-family: var(--font);\n  font-size: 0.78rem;\n  font-weight: 700;\n  letter-spacing: 0.16em;\n  text-transform: uppercase;\n  position: relative;\n  overflow: hidden;\n  transition: color 0.35s ease, border-color 0.35s ease;\n}\n\n\/* Fond qui remonte au hover *\/\n.bpf-btn::before {\n  content: '';\n  position: absolute;\n  inset: 0;\n  background: var(--gold);\n  transform: translateY(101%);\n  transition: transform 0.38s cubic-bezier(0.76, 0, 0.24, 1);\n  z-index: 0;\n}\n.bpf-btn:hover::before {\n  transform: translateY(0);\n}\n.bpf-btn:hover {\n  color: #0a0a0a;\n  border-color: var(--gold);\n  text-decoration: none;\n}\n.bpf-btn-text { position: relative; z-index: 1; }\n.bpf-btn-icon {\n  position: relative;\n  z-index: 1;\n  display: flex;\n  align-items: center;\n  transition: transform 0.3s ease;\n}\n.bpf-btn:hover .bpf-btn-icon {\n  transform: translateX(5px);\n}\n\n.bpf-cta-note {\n  font-family: var(--mono);\n  font-size: 0.58rem;\n  color: var(--dim);\n  letter-spacing: 0.12em;\n  text-transform: uppercase;\n}\n\n\/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n   RESPONSIVE\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n@media (max-width: 1024px) {\n  .bpf-header { flex-direction: column; align-items: flex-start; gap: 24px; padding: 0 28px; }\n  .bpf-header-right { max-width: 100%; }\n  .bpf-grid {\n    grid-template-columns: 1fr;\n    grid-template-rows: auto;\n    padding: 0 28px;\n    gap: 3px;\n  }\n  .bpf-card--large  { height: 420px; }\n  .bpf-col-right    { height: auto; grid-template-rows: 280px 220px; }\n  .bpf-row-bottom   { height: 220px; }\n}\n\n@media (max-width: 640px) {\n  .bpf-section { padding: 56px 0 56px; }\n  .bpf-header { padding: 0 20px; margin-bottom: 32px; }\n  .bpf-title { font-size: 2rem; }\n  .bpf-grid { padding: 0; gap: 2px; }\n  .bpf-card--large  { height: 300px; }\n  .bpf-col-right    { grid-template-rows: 220px 180px; }\n  .bpf-row-bottom   { height: 180px; gap: 2px; }\n  .bpf-card-title   { font-size: 0.82rem; }\n  .bpf-content      { padding: 14px 16px; }\n  .bpf-cta          { padding: 48px 20px 0; }\n  .bpf-btn          { padding: 14px 28px; font-size: 0.72rem; }\n}\n\n@media (max-width: 420px) {\n  .bpf-row-bottom   { grid-template-columns: 1fr; height: auto; }\n  .bpf-card--small  { height: 160px; }\n  .bpf-col-right    { grid-template-rows: 200px auto; }\n}\n<\/style>\n\n<\/body>\n<\/html>\r\n\t\t<\/div>\r\n\t<\/div>\r\n\r\n\t<div class=\"wpb_raw_code wpb_raw_html wpb_content_element\" >\r\n\t\t<div class=\"wpb_wrapper\">\r\n\t\t\t<style>\n\/* Import de la police *\/\n@import url('https:\/\/fonts.googleapis.com\/css2?family=League+Spartan:wght@300;400;600;800;900&display=swap');\n\n\/* --- SECTION PROCESS (FULL WIDTH) --- *\/\n.process-section {\n    font-family: 'League Spartan', sans-serif;\n    background-color: #13161B; \n    color: #f0f0f0;\n    padding: 100px 0;\n    \n    \/* HACK FULL WIDTH *\/\n    width: 100vw; \n    position: relative;\n    left: 50%;\n    right: 50%;\n    margin-left: -50vw;\n    margin-right: -50vw;\n    box-sizing: border-box;\n    border-top: 1px solid rgba(255, 255, 255, 0.05); \/* S\u00e9parateur subtil *\/\n}\n\n.process-header {\n    text-align: center;\n    max-width: 800px;\n    margin: 0 auto 80px auto;\n    padding: 0 5%;\n}\n\n.process-header h2 {\n    font-size: clamp(30px, 4vw, 55px);\n    font-weight: 800;\n    text-transform: uppercase;\n    margin-bottom: 20px;\n    letter-spacing: 2px;\n}\n\n.process-header p {\n    font-size: 18px;\n    color: #aaaaaa;\n    font-weight: 300;\n}\n\n\/* --- GRILLE DES \u00c9TAPES --- *\/\n.process-grid {\n    display: flex;\n    justify-content: space-around;\n    max-width: 1200px;\n    margin: 0 auto;\n    padding: 0 5%;\n    gap: 40px;\n}\n\n.process-step {\n    flex: 1;\n    text-align: center;\n    position: relative;\n}\n\n\/* Num\u00e9ro g\u00e9ant en arri\u00e8re-plan *\/\n.step-number {\n    font-size: 120px;\n    font-weight: 900;\n    color: rgba(255, 255, 255, 0.03); \/* Tr\u00e8s subtil *\/\n    line-height: 1;\n    position: absolute;\n    top: -40px;\n    left: 50%;\n    transform: translateX(-50%);\n    z-index: 0;\n}\n\n.step-content {\n    position: relative;\n    z-index: 1;\n}\n\n.step-icon {\n    font-size: 40px;\n    margin-bottom: 20px;\n    display: inline-block;\n    color: #ffffff; \/* Ic\u00f4ne blanche *\/\n}\n\n.step-title {\n    font-size: 24px;\n    font-weight: 700;\n    text-transform: uppercase;\n    margin-bottom: 15px;\n    color: #ffffff;\n    letter-spacing: 1px;\n}\n\n.step-desc {\n    font-size: 16px;\n    color: #aaaaaa;\n    line-height: 1.6;\n    font-weight: 300;\n}\n\n\/* Ligne de connexion entre les \u00e9tapes (Desktop seulement) *\/\n.process-step:not(:last-child)::after {\n    content: '';\n    position: absolute;\n    top: 60px; \/* Ajuster selon la hauteur de l'ic\u00f4ne *\/\n    right: -20px;\n    width: 40px; \/* Longueur de la ligne *\/\n    height: 1px;\n    background-color: rgba(255, 255, 255, 0.1);\n    display: none; \/* Masqu\u00e9 par d\u00e9faut, activ\u00e9 si vous voulez *\/\n}\n\n\/* --- RESPONSIVE MOBILE --- *\/\n@media (max-width: 768px) {\n    .process-grid {\n        flex-direction: column;\n        gap: 60px;\n    }\n    .step-number {\n        font-size: 100px;\n        top: -30px;\n    }\n}\n<\/style>\n\n<section class=\"process-section\">\n    <div class=\"process-header\">\n        <h2>FROM DREAM TO WRIST.<\/h2>\n        <p>No unnecessary complexity. We've simplified the creation of your unique piece into a seamless, fluid process.<\/p>\n    <\/div>\n\n    <div class=\"process-grid\">\n        \n        <div class=\"process-step\">\n            <div class=\"step-number\">01<\/div>\n            <div class=\"step-content\">\n                <div class=\"step-icon\">\ud83d\udcac<\/div>\n                <h3 class=\"step-title\">Le Brief<\/h3>\n                <p class=\"step-desc\">\n                    It all starts with a discussion. You share your inspirations or choose a base. Together, we validate the technical feasibility and design.\n                <\/p>\n            <\/div>\n        <\/div>\n\n        <div class=\"process-step\">\n            <div class=\"step-number\">02<\/div>\n            <div class=\"step-content\">\n                <div class=\"step-icon\">\ud83d\udee0\ufe0f<\/div>\n                <h3 class=\"step-title\">Assembly<\/h3>\n                <p class=\"step-desc\">\n                    Once the components have been received, your watch is assembled by hand in Poitiers. Movement regulated, joints greased, water-resistance tested.\n                <\/p>\n            <\/div>\n        <\/div>\n\n        <div class=\"process-step\">\n            <div class=\"step-number\">03<\/div>\n            <div class=\"step-content\">\n                <div class=\"step-icon\">\ud83d\udce6<\/div>\n                <h3 class=\"step-title\">Delivery<\/h3>\n                <p class=\"step-desc\">\n                    Secure, tracked shipping. You receive your unique piece in its box, ready to be worn and tell your story.\n                <\/p>\n            <\/div>\n        <\/div>\n\n    <\/div>\n<\/section>\r\n\t\t<\/div>\r\n\t<\/div>\r\n<\/div><\/div><\/div><\/div><div class=\"vc_row-full-width vc_clearfix\"><\/div>\n<\/div>","protected":false},"excerpt":{"rendered":"Notre histoire Catalogue Simulateur de prix Le Club L'Atelier Le journal bang. Atelier Fran\u00e7ais \u2014 Poitiers (86) Montres Automatiques Sur Mesure. Nous ne produisons pas de s\u00e9rie. Nous cr\u00e9ons votre pi\u00e8ce unique. Conception personnalis\u00e9e, m\u00e9canique fiable et assemblage \u00e0 la main. R\u00c9SERVER MON CR\u00c9NEAU Indicateurs Manufacture 0 Garde-Temps Uniques 0 Composants Personnalisables 0 R\u00e9serve de [...]","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-5624","page","type-page","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.8 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Montre automatique sur mesure \u2014 Atelier bang. | Poitiers<\/title>\n<meta name=\"description\" content=\"Cr\u00e9ez votre montre automatique unique \u00e0 Poitiers. Cadran, bo\u00eetier, mouvement : chaque pi\u00e8ce est assembl\u00e9e \u00e0 la main selon votre brief. 7 cr\u00e9neaux\/mois. Devis gratuit en 30 min.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/atelier-bang.com\/en\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"bang. atelier de montre sur-mesure\" \/>\n<meta property=\"og:description\" content=\"Quand l&#039;horlogerie rencontre l&#039;art du sur mesure. Chaque cr\u00e9ation est unique, \u00e0 votre image. Bienvenue chez bang.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/atelier-bang.com\/en\/\" \/>\n<meta property=\"og:site_name\" content=\"bang. atelier de montres uniques\" \/>\n<meta property=\"article:modified_time\" content=\"2026-04-01T15:49:44+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/atelier-bang.com\/wp-content\/uploads\/2024\/11\/Design_sans_titre__7_-removebg-preview.png\" \/>\n\t<meta property=\"og:image:width\" content=\"250\" \/>\n\t<meta property=\"og:image:height\" content=\"250\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/atelier-bang.com\/\",\"url\":\"https:\/\/atelier-bang.com\/\",\"name\":\"Montre automatique sur mesure \u2014 Atelier bang. | Poitiers\",\"isPartOf\":{\"@id\":\"https:\/\/atelier-bang.com\/#website\"},\"datePublished\":\"2019-10-09T15:52:55+00:00\",\"dateModified\":\"2026-04-01T15:49:44+00:00\",\"description\":\"Cr\u00e9ez votre montre automatique unique \u00e0 Poitiers. Cadran, bo\u00eetier, mouvement : chaque pi\u00e8ce est assembl\u00e9e \u00e0 la main selon votre brief. 7 cr\u00e9neaux\/mois. Devis gratuit en 30 min.\",\"breadcrumb\":{\"@id\":\"https:\/\/atelier-bang.com\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/atelier-bang.com\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/atelier-bang.com\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Accueil\",\"item\":\"https:\/\/atelier-bang.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Accueil\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/atelier-bang.com\/#website\",\"url\":\"https:\/\/atelier-bang.com\/\",\"name\":\"bang . atelier de montre sur-mesure\",\"description\":\"Choisissez une montre qui vous ressemble\",\"publisher\":{\"@id\":\"https:\/\/atelier-bang.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/atelier-bang.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/atelier-bang.com\/#organization\",\"name\":\"bang . atelier de montre sur-mesure\",\"url\":\"https:\/\/atelier-bang.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/atelier-bang.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/atelier-bang.com\/wp-content\/uploads\/2024\/11\/Design_sans_titre__7_-removebg-preview.png\",\"contentUrl\":\"https:\/\/atelier-bang.com\/wp-content\/uploads\/2024\/11\/Design_sans_titre__7_-removebg-preview.png\",\"width\":250,\"height\":250,\"caption\":\"bang . atelier de montre sur-mesure\"},\"image\":{\"@id\":\"https:\/\/atelier-bang.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.instagram.com\/bang.poitiers\/\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Montre automatique sur mesure \u2014 Atelier bang. | Poitiers","description":"Cr\u00e9ez votre montre automatique unique \u00e0 Poitiers. Cadran, bo\u00eetier, mouvement : chaque pi\u00e8ce est assembl\u00e9e \u00e0 la main selon votre brief. 7 cr\u00e9neaux\/mois. Devis gratuit en 30 min.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/atelier-bang.com\/en\/","og_locale":"en_US","og_type":"article","og_title":"bang. atelier de montre sur-mesure","og_description":"Quand l'horlogerie rencontre l'art du sur mesure. Chaque cr\u00e9ation est unique, \u00e0 votre image. Bienvenue chez bang.","og_url":"https:\/\/atelier-bang.com\/en\/","og_site_name":"bang. atelier de montres uniques","article_modified_time":"2026-04-01T15:49:44+00:00","og_image":[{"width":250,"height":250,"url":"https:\/\/atelier-bang.com\/wp-content\/uploads\/2024\/11\/Design_sans_titre__7_-removebg-preview.png","type":"image\/png"}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/atelier-bang.com\/","url":"https:\/\/atelier-bang.com\/","name":"Montre automatique sur mesure \u2014 Atelier bang. | Poitiers","isPartOf":{"@id":"https:\/\/atelier-bang.com\/#website"},"datePublished":"2019-10-09T15:52:55+00:00","dateModified":"2026-04-01T15:49:44+00:00","description":"Cr\u00e9ez votre montre automatique unique \u00e0 Poitiers. Cadran, bo\u00eetier, mouvement : chaque pi\u00e8ce est assembl\u00e9e \u00e0 la main selon votre brief. 7 cr\u00e9neaux\/mois. Devis gratuit en 30 min.","breadcrumb":{"@id":"https:\/\/atelier-bang.com\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/atelier-bang.com\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/atelier-bang.com\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Accueil","item":"https:\/\/atelier-bang.com\/"},{"@type":"ListItem","position":2,"name":"Accueil"}]},{"@type":"WebSite","@id":"https:\/\/atelier-bang.com\/#website","url":"https:\/\/atelier-bang.com\/","name":"bang . atelier de montre sur-mesure","description":"Choisissez une montre qui vous ressemble","publisher":{"@id":"https:\/\/atelier-bang.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/atelier-bang.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/atelier-bang.com\/#organization","name":"bang . atelier de montre sur-mesure","url":"https:\/\/atelier-bang.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/atelier-bang.com\/#\/schema\/logo\/image\/","url":"https:\/\/atelier-bang.com\/wp-content\/uploads\/2024\/11\/Design_sans_titre__7_-removebg-preview.png","contentUrl":"https:\/\/atelier-bang.com\/wp-content\/uploads\/2024\/11\/Design_sans_titre__7_-removebg-preview.png","width":250,"height":250,"caption":"bang . atelier de montre sur-mesure"},"image":{"@id":"https:\/\/atelier-bang.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.instagram.com\/bang.poitiers\/"]}]}},"_links":{"self":[{"href":"https:\/\/atelier-bang.com\/en\/wp-json\/wp\/v2\/pages\/5624","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/atelier-bang.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/atelier-bang.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/atelier-bang.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/atelier-bang.com\/en\/wp-json\/wp\/v2\/comments?post=5624"}],"version-history":[{"count":170,"href":"https:\/\/atelier-bang.com\/en\/wp-json\/wp\/v2\/pages\/5624\/revisions"}],"predecessor-version":[{"id":9658,"href":"https:\/\/atelier-bang.com\/en\/wp-json\/wp\/v2\/pages\/5624\/revisions\/9658"}],"wp:attachment":[{"href":"https:\/\/atelier-bang.com\/en\/wp-json\/wp\/v2\/media?parent=5624"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}