Le Journal - Atelier Bang<\/title>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=League+Spartan:wght@400;500;700;900&display=swap\" rel=\"stylesheet\">\n <style>\n * { margin: 0; padding: 0; box-sizing: border-box; }\n\n body {\n font-family: 'League Spartan', sans-serif;\n background: transparent;\n color: #ffffff;\n line-height: 1.6;\n }\n\n \/* Hero Section *\/\n .hero-section {\n min-height: 90vh;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n position: relative;\n padding: 120px 40px 80px;\n background: transparent;\n }\n\n .hero-section::after {\n content: '';\n position: absolute;\n top: 20%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 400px;\n height: 400px;\n background: radial-gradient(circle, rgba(184,134,11,0.05) 0%, transparent 70%);\n pointer-events: none;\n }\n\n .hero-content {\n position: relative;\n z-index: 2;\n text-align: center;\n max-width: 1200px;\n width: 100%;\n }\n\n .hero-title {\n font-size: clamp(64px, 12vw, 140px);\n font-weight: 900;\n letter-spacing: -4px;\n margin-bottom: 25px;\n line-height: 1;\n background: linear-gradient(180deg, #ffffff 0%, #999999 100%);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n background-clip: text;\n animation: fadeInUp 0.8s ease 0.2s backwards;\n }\n\n .hero-subtitle {\n font-size: clamp(16px, 2vw, 22px);\n color: #999;\n max-width: 800px;\n margin: 0 auto 50px;\n line-height: 1.6;\n font-weight: 400;\n animation: fadeInUp 0.8s ease 0.4s backwards;\n }\n\n \/* Category Buttons *\/\n .category-nav {\n display: flex;\n justify-content: center;\n gap: 15px;\n flex-wrap: wrap;\n animation: fadeInUp 0.8s ease 0.6s backwards;\n margin-bottom: 60px;\n }\n\n .category-btn {\n background: transparent;\n border: 1px solid rgba(255,255,255,0.15);\n color: #999;\n padding: 14px 28px;\n border-radius: 50px;\n font-size: 13px;\n font-weight: 600;\n letter-spacing: 1px;\n cursor: pointer;\n font-family: 'League Spartan', sans-serif;\n transition: all 0.3s ease;\n position: relative;\n overflow: hidden;\n }\n\n .category-btn::before {\n content: '';\n position: absolute;\n top: 0;\n left: -100%;\n width: 100%;\n height: 100%;\n background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);\n transition: left 0.5s;\n }\n\n .category-btn:hover::before { left: 100%; }\n\n .category-btn:hover {\n border-color: rgba(255,255,255,0.3);\n color: #fff;\n transform: translateY(-2px);\n box-shadow: 0 4px 20px rgba(255,255,255,0.1);\n }\n\n .category-btn.active {\n background: #fff;\n color: #000;\n border-color: #fff;\n }\n\n .category-icon { margin-right: 8px; font-size: 16px; }\n\n \/* Stats Bar *\/\n .stats-bar {\n display: flex;\n justify-content: center;\n gap: 60px;\n margin-top: 20px;\n padding: 30px;\n animation: fadeInUp 0.8s ease 0.8s backwards;\n }\n\n .stat-item { text-align: center; }\n\n .stat-number {\n font-size: 36px;\n font-weight: 900;\n background: linear-gradient(135deg, #b8860b, #ffd700);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n background-clip: text;\n display: block;\n margin-bottom: 8px;\n }\n\n .stat-label {\n font-size: 13px;\n color: #666;\n font-weight: 500;\n letter-spacing: 1px;\n }\n\n \/* Scroll Indicator *\/\n .scroll-indicator {\n position: absolute;\n bottom: 40px;\n left: 50%;\n transform: translateX(-50%);\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 10px;\n opacity: 0.5;\n animation: bounce 2s infinite;\n }\n\n .scroll-text { font-size: 11px; letter-spacing: 2px; color: #666; font-weight: 600; }\n\n .scroll-arrow {\n width: 24px;\n height: 36px;\n border: 2px solid rgba(255,255,255,0.2);\n border-radius: 12px;\n position: relative;\n }\n\n .scroll-arrow::before {\n content: '';\n position: absolute;\n top: 8px;\n left: 50%;\n transform: translateX(-50%);\n width: 4px;\n height: 8px;\n background: rgba(255,255,255,0.4);\n border-radius: 2px;\n animation: scrollDot 2s infinite;\n }\n\n \/* Loading state *\/\n .loading-state {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 20px;\n padding: 80px 40px;\n color: #666;\n font-size: 14px;\n letter-spacing: 1px;\n }\n\n .loading-spinner {\n width: 32px;\n height: 32px;\n border: 2px solid rgba(184,134,11,0.2);\n border-top-color: #b8860b;\n border-radius: 50%;\n animation: spin 0.8s linear infinite;\n }\n\n .error-state {\n max-width: 1400px;\n margin: 60px auto;\n padding: 0 40px;\n text-align: center;\n color: #666;\n }\n\n .error-state h3 { font-size: 20px; margin-bottom: 10px; color: #999; font-weight: 500; }\n .error-state p { font-size: 14px; line-height: 1.6; }\n\n \/* Featured Article *\/\n .featured-section {\n max-width: 1400px;\n margin: 0 auto 100px;\n padding: 0 40px;\n }\n\n .section-label {\n font-size: 14px;\n letter-spacing: 2px;\n color: #999;\n margin-bottom: 30px;\n font-weight: 500;\n }\n\n .featured-article {\n position: relative;\n height: 600px;\n border-radius: 8px;\n overflow: hidden;\n cursor: pointer;\n transition: transform 0.3s;\n display: block;\n text-decoration: none;\n color: inherit;\n }\n\n .featured-article:hover { transform: scale(1.01); }\n\n .featured-article img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n }\n\n .featured-article .img-placeholder {\n width: 100%;\n height: 100%;\n background: linear-gradient(135deg, #1a1a1a 0%, #111 100%);\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 48px;\n opacity: 0.3;\n }\n\n .featured-overlay {\n position: absolute;\n bottom: 0;\n left: 0;\n right: 0;\n background: linear-gradient(to top, rgba(0,0,0,0.95), transparent);\n padding: 60px 50px;\n }\n\n .featured-category {\n display: inline-block;\n background: #b8860b;\n color: #000;\n padding: 6px 15px;\n border-radius: 20px;\n font-size: 11px;\n font-weight: 700;\n letter-spacing: 1px;\n margin-bottom: 20px;\n text-transform: uppercase;\n }\n\n .featured-title {\n font-size: 42px;\n font-weight: 900;\n margin-bottom: 15px;\n line-height: 1.2;\n }\n\n .featured-excerpt {\n font-size: 16px;\n color: #ccc;\n max-width: 700px;\n margin-bottom: 20px;\n font-weight: 400;\n }\n\n .featured-meta {\n display: flex;\n gap: 20px;\n font-size: 13px;\n color: #999;\n flex-wrap: wrap;\n }\n\n \/* Category Sections *\/\n .category-section {\n max-width: 1400px;\n margin: 0 auto 100px;\n padding: 0 40px;\n }\n\n .category-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 40px;\n }\n\n .category-header h2 {\n font-size: 32px;\n font-weight: 900;\n display: flex;\n align-items: center;\n gap: 15px;\n }\n\n .view-all {\n color: #fff;\n text-decoration: none;\n font-size: 14px;\n display: flex;\n align-items: center;\n gap: 8px;\n transition: gap 0.3s;\n font-weight: 500;\n }\n\n .view-all:hover { gap: 12px; }\n\n .articles-grid {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));\n gap: 30px;\n }\n\n .article-card {\n background: rgba(17, 17, 17, 0.5);\n backdrop-filter: blur(10px);\n border-radius: 8px;\n overflow: hidden;\n cursor: pointer;\n transition: transform 0.3s, box-shadow 0.3s;\n border: 1px solid rgba(255,255,255,0.05);\n display: block;\n text-decoration: none;\n color: inherit;\n }\n\n .article-card:hover {\n transform: translateY(-5px);\n box-shadow: 0 10px 30px rgba(0,0,0,0.5);\n }\n\n .article-image {\n width: 100%;\n height: 250px;\n object-fit: cover;\n display: block;\n }\n\n .article-img-placeholder {\n width: 100%;\n height: 250px;\n background: linear-gradient(135deg, #1a1a1a 0%, #0d0d0d 100%);\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 36px;\n opacity: 0.3;\n }\n\n .article-content { padding: 25px; }\n\n .article-category-badge {\n display: inline-block;\n padding: 4px 12px;\n border-radius: 15px;\n font-size: 10px;\n font-weight: 700;\n letter-spacing: 1px;\n margin-bottom: 15px;\n text-transform: uppercase;\n }\n\n .badge-atelier { background: #ff6b35; color: #000; }\n .badge-culture { background: #b8860b; color: #000; }\n .badge-mecanique { background: #7c7c7c; color: #fff; }\n .badge-style { background: #8b4513; color: #fff; }\n .badge-default { background: #333; color: #999; }\n\n .article-title {\n font-size: 20px;\n font-weight: 700;\n margin-bottom: 12px;\n line-height: 1.3;\n }\n\n .article-excerpt {\n font-size: 14px;\n color: #999;\n margin-bottom: 20px;\n line-height: 1.6;\n font-weight: 400;\n }\n\n .article-meta {\n display: flex;\n justify-content: space-between;\n font-size: 12px;\n color: #666;\n padding-top: 15px;\n border-top: 1px solid #1a1a1a;\n }\n\n \/* Newsletter *\/\n .newsletter {\n max-width: 1400px;\n margin: 100px auto;\n padding: 80px 40px;\n background: rgba(17, 17, 17, 0.4);\n backdrop-filter: blur(20px);\n border-radius: 12px;\n text-align: center;\n border: 1px solid rgba(255,255,255,0.08);\n }\n\n .newsletter h2 { font-size: 36px; margin-bottom: 15px; font-weight: 900; }\n .newsletter p { color: #999; margin-bottom: 30px; font-size: 16px; font-weight: 400; }\n\n .newsletter-form {\n display: flex;\n gap: 15px;\n max-width: 500px;\n margin: 0 auto;\n }\n\n .newsletter-form input {\n flex: 1;\n padding: 15px 20px;\n background: #000;\n border: 1px solid #333;\n border-radius: 5px;\n color: #fff;\n font-size: 14px;\n font-family: 'League Spartan', sans-serif;\n }\n\n .newsletter-form button {\n padding: 15px 35px;\n background: #fff;\n color: #000;\n border: none;\n border-radius: 5px;\n font-weight: 700;\n cursor: pointer;\n transition: background 0.3s;\n font-family: 'League Spartan', sans-serif;\n }\n\n .newsletter-form button:hover { background: #b8860b; }\n\n \/* No results *\/\n .no-results {\n max-width: 1400px;\n margin: 60px auto;\n padding: 0 40px;\n text-align: center;\n }\n\n .no-results h3 { font-size: 24px; margin-bottom: 15px; font-weight: 700; }\n .no-results p { color: #666; font-size: 16px; }\n\n \/* Animations *\/\n @keyframes fadeInUp {\n from { opacity: 0; transform: translateY(30px); }\n to { opacity: 1; transform: translateY(0); }\n }\n\n @keyframes bounce {\n 0%,20%,50%,80%,100% { transform: translateX(-50%) translateY(0); }\n 40% { transform: translateX(-50%) translateY(-10px); }\n 60% { transform: translateX(-50%) translateY(-5px); }\n }\n\n @keyframes scrollDot {\n 0% { opacity: 1; transform: translateX(-50%) translateY(0); }\n 50% { opacity: 0.3; transform: translateX(-50%) translateY(16px); }\n 100% { opacity: 0; transform: translateX(-50%) translateY(16px); }\n }\n\n @keyframes spin {\n to { transform: rotate(360deg); }\n }\n\n \/* Responsive *\/\n @media (max-width: 768px) {\n .hero-section { min-height: 100vh; padding: 80px 20px 60px; }\n .category-nav { gap: 10px; }\n .category-btn { padding: 12px 20px; font-size: 12px; }\n .stats-bar { gap: 30px; flex-wrap: wrap; margin-top: 40px; }\n .stat-number { font-size: 28px; }\n .articles-grid { grid-template-columns: 1fr; }\n .featured-article { height: auto; min-height: 500px; }\n .featured-overlay { padding: 30px 25px; }\n .featured-title { font-size: 24px; line-height: 1.3; }\n .featured-excerpt { font-size: 14px; margin-bottom: 15px; }\n .featured-meta { font-size: 11px; gap: 12px; }\n .newsletter-form { flex-direction: column; }\n .featured-section, .category-section, .newsletter { padding: 0 20px; }\n }\n <\/style>\n<\/head>\n<body>\n\n \n <section class=\"hero-section\">\n <div class=\"hero-content\">\n <h1 class=\"hero-title\">LE JOURNAL.<\/h1>\n <p class=\"hero-subtitle\">\n Plongez dans l'univers de l'horlogerie : techniques, culture, style et coulisses de l'atelier. D\u00e9couvrez les secrets du mouvement horloger.\n <\/p>\n\n <nav class=\"category-nav\" aria-label=\"Filtrer par cat\u00e9gorie\">\n <button class=\"category-btn active\" data-category=\"tous\">TOUS LES ARTICLES<\/button>\n <button class=\"category-btn\" data-category=\"atelier\"><span class=\"category-icon\">\ud83d\udd27<\/span>ATELIER<\/button>\n <button class=\"category-btn\" data-category=\"culture\"><span class=\"category-icon\">\ud83d\udcda<\/span>CULTURE<\/button>\n <button class=\"category-btn\" data-category=\"mecanique\"><span class=\"category-icon\">\u2699\ufe0f<\/span>M\u00c9CANIQUE<\/button>\n <button class=\"category-btn\" data-category=\"style\"><span class=\"category-icon\">\u2728<\/span>STYLE<\/button>\n <\/nav>\n\n <div class=\"stats-bar\">\n <div class=\"stat-item\">\n <span class=\"stat-number\" id=\"statArticles\">\u2014<\/span>\n <span class=\"stat-label\">ARTICLES<\/span>\n <\/div>\n <div class=\"stat-item\">\n <span class=\"stat-number\">2.1K<\/span>\n <span class=\"stat-label\">LECTEURS<\/span>\n <\/div>\n <div class=\"stat-item\">\n <span class=\"stat-number\">4<\/span>\n <span class=\"stat-label\">CAT\u00c9GORIES<\/span>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"scroll-indicator\" aria-hidden=\"true\">\n <span class=\"scroll-text\">SCROLL<\/span>\n <div class=\"scroll-arrow\"><\/div>\n <\/div>\n <\/section>\n\n \n <div id=\"journalContent\">\n <div class=\"loading-state\">\n <div class=\"loading-spinner\"><\/div>\n <span>Chargement des articles\u2026<\/span>\n <\/div>\n <\/div>\n\n \n <section class=\"newsletter\">\n <h2>LE CLUB BANG.<\/h2>\n <p>Rejoignez notre communaut\u00e9 et recevez en avant-premi\u00e8re nos articles, guides exclusifs et conseils d'experts.<\/p>\n <form class=\"newsletter-form\" onsubmit=\"handleNewsletter(event)\" action=\"\">\n <input type=\"email\" placeholder=\"Votre adresse email\" required autocomplete=\"email\">\n <button type=\"submit\">S'ABONNER<\/button>\n <input type=\"hidden\" name=\"trp-form-language\" value=\"en\"\/><\/form>\n <\/section>\n\n <script>\n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n CONFIG\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n const API_BASE = 'https:\/\/atelier-bang.com\/wp-json\/wp\/v2';\n const PER_PAGE = 20;\n\n \/\/ Correspondance slug WP \u2192 config visuelle\n const CAT_CONFIG = {\n atelier: { label: 'ATELIER', icon: '\ud83d\udd27', badge: 'badge-atelier', archiveUrl: '\/category\/atelier\/' },\n culture: { label: 'CULTURE', icon: '\ud83d\udcda', badge: 'badge-culture', archiveUrl: '\/category\/culture\/' },\n \/\/ Le slug WordPress peut \u00eatre \"mecanique\" ou \"m\u00e9canique\" selon la config\n mecanique: { label: 'M\u00c9CANIQUE', icon: '\u2699\ufe0f', badge: 'badge-mecanique', archiveUrl: '\/category\/mecanique\/' },\n m\u00e9canique: { label: 'M\u00c9CANIQUE', icon: '\u2699\ufe0f', badge: 'badge-mecanique', archiveUrl: '\/category\/mecanique\/' },\n style: { label: 'STYLE', icon: '\u2728', badge: 'badge-style', archiveUrl: '\/category\/style\/' },\n };\n\n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n \u00c9TAT\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n let allPosts = []; \/\/ tous les articles bruts de l'API\n let currentCategory = 'tous';\n\n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n FETCH ARTICLES DEPUIS L'API WORDPRESS\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n async function fetchPosts() {\n \/\/ _embed inclut featured media + termes (cat\u00e9gories) en une seule requ\u00eate\n const url = `${API_BASE}\/posts?_embed&per_page=${PER_PAGE}&orderby=date&order=desc&status=publish`;\n const res = await fetch(url);\n if (!res.ok) throw new Error(`Erreur API : ${res.status}`);\n return res.json();\n }\n\n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n NORMALISE UN POST WP \u2192 OBJET ARTICLE\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n function normalizePost(post) {\n \/\/ Image featured\n const media = post._embedded?.['wp:featuredmedia']?.[0];\n const imageUrl = media?.media_details?.sizes?.medium_large?.source_url\n || media?.source_url\n || null;\n const imageAlt = media?.alt_text || stripHtml(post.title.rendered);\n\n \/\/ Cat\u00e9gorie principale\n const terms = post._embedded?.['wp:term']?.[0] || [];\n const catTerm = terms.find(t => t.taxonomy === 'category' && t.slug !== 'uncategorized')\n || terms[0]\n || null;\n const catSlug = catTerm?.slug?.toLowerCase() || 'uncategorized';\n const catConf = CAT_CONFIG[catSlug] || { label: catSlug.toUpperCase(), icon: '\ud83d\udcf0', badge: 'badge-default', archiveUrl: `\/category\/${catSlug}\/` };\n const catLink = catTerm?.link || catConf.archiveUrl;\n\n \/\/ Extrait sans HTML\n const excerpt = stripHtml(post.excerpt?.rendered || '').slice(0, 160).trim();\n\n \/\/ Date lisible\n const date = new Date(post.date).toLocaleDateString('fr-FR', { day: 'numeric', month: 'short', year: 'numeric' });\n\n \/\/ Temps de lecture estim\u00e9 (~200 mots\/min)\n const wordCount = stripHtml(post.content?.rendered || '').split(\/\\s+\/).length;\n const readMin = Math.max(1, Math.round(wordCount \/ 200));\n\n return {\n id: post.id,\n slug: catSlug,\n catConf,\n catLink,\n title: stripHtml(post.title.rendered),\n excerpt,\n date,\n readMin,\n imageUrl,\n imageAlt,\n link: post.link,\n };\n }\n\n function stripHtml(html) {\n return html.replace(\/<[^>]*>\/g, '').replace(\/&\/g,'&').replace(\/’\/g,\"'\").replace(\/–\/g,'\u2013').replace(\/ \/g,' ').trim();\n }\n\n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n RENDU HTML\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n function buildFeaturedHTML(article) {\n const imgTag = article.imageUrl\n ? `<img decoding=\"async\" src=\"${article.imageUrl}\" alt=\"${escHtml(article.imageAlt)}\" loading=\"eager\">`\n : `<div class=\"img-placeholder\">\u231a<\/div>`;\n return `\n <section class=\"featured-section\">\n <div class=\"section-label\">\u00c0 LA UNE<\/div>\n <a class=\"featured-article\" href=\"${escHtml(article.link)}\">\n ${imgTag}\n <div class=\"featured-overlay\">\n <span class=\"featured-category\">${escHtml(article.catConf.label)}<\/span>\n <h2 class=\"featured-title\">${escHtml(article.title)}<\/h2>\n <p class=\"featured-excerpt\">${escHtml(article.excerpt)}<\/p>\n <div class=\"featured-meta\">\n <span>\ud83d\udc64 Atelier Bang<\/span>\n <span>\ud83d\udcc5 ${article.date}<\/span>\n <span>\u23f1\ufe0f ${article.readMin} min de lecture<\/span>\n <\/div>\n <\/div>\n <\/a>\n <\/section>`;\n }\n\n function buildCategorySection(catKey, catConf, catLink, articles) {\n const cards = articles.map(a => `\n <a class=\"article-card\" href=\"${escHtml(a.link)}\">\n ${a.imageUrl\n ? `<img decoding=\"async\" class=\"article-image\" src=\"${escHtml(a.imageUrl)}\" alt=\"${escHtml(a.imageAlt)}\" loading=\"lazy\">`\n : `<div class=\"article-img-placeholder\">\u231a<\/div>`}\n <div class=\"article-content\">\n <span class=\"article-category-badge ${a.catConf.badge}\">${escHtml(a.catConf.label)}<\/span>\n <h3 class=\"article-title\">${escHtml(a.title)}<\/h3>\n <p class=\"article-excerpt\">${escHtml(a.excerpt)}<\/p>\n <div class=\"article-meta\">\n <span>\ud83d\udcc5 ${a.date}<\/span>\n <span>\u23f1\ufe0f ${a.readMin} min<\/span>\n <\/div>\n <\/div>\n <\/a>`).join('');\n\n return `\n <section class=\"category-section\">\n <div class=\"category-header\">\n <h2><span class=\"category-icon\">${catConf.icon}<\/span> ${catConf.label}<\/h2>\n <a href=\"${escHtml(catLink)}\" class=\"view-all\">Voir tous les articles \u2192<\/a>\n <\/div>\n <div class=\"articles-grid\">${cards}<\/div>\n <\/section>`;\n }\n\n function buildNoResults() {\n return `<div class=\"no-results\">\n <h3>Aucun article dans cette cat\u00e9gorie<\/h3>\n <p>Revenez bient\u00f4t \u2014 de nouveaux contenus sont en pr\u00e9paration.<\/p>\n <\/div>`;\n }\n\n function buildError() {\n return `<div class=\"error-state\">\n <h3>Impossible de charger les articles<\/h3>\n <p>V\u00e9rifiez votre connexion ou r\u00e9essayez dans quelques instants.<br>\n Si le probl\u00e8me persiste, contactez <a href=\"mailto:contact@atelier-bang.com\" style=\"color:#b8860b\">contact@atelier-bang.com<\/a>.<\/p>\n <\/div>`;\n }\n\n function escHtml(str) {\n return String(str).replace(\/&\/g,'&').replace(\/<\/g,'<').replace(\/>\/g,'>').replace(\/\"\/g,'"');\n }\n\n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n RENDER \u2014 appel\u00e9 \u00e0 chaque changement de filtre\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n function render() {\n const container = document.getElementById('journalContent');\n\n \/\/ Filtrer\n const filtered = currentCategory === 'tous'\n ? allPosts\n : allPosts.filter(a => a.slug === currentCategory || a.slug === currentCategory.normalize('NFD').replace(\/[\\u0300-\\u036f]\/g,''));\n\n if (!filtered.length) {\n container.innerHTML = buildNoResults();\n return;\n }\n\n let html = '';\n\n \/\/ Article \u00e0 la une = le plus r\u00e9cent de la s\u00e9lection\n const featured = filtered[0];\n html += buildFeaturedHTML(featured);\n\n \/\/ Regrouper les autres par cat\u00e9gorie (sauf featured pour \u00e9viter le doublon)\n const rest = filtered.slice(1);\n\n if (currentCategory === 'tous') {\n \/\/ Grouper par cat\u00e9gorie\n const groups = {};\n rest.forEach(a => {\n const key = a.slug;\n if (!groups[key]) groups[key] = { catConf: a.catConf, catLink: a.catLink, articles: [] };\n groups[key].articles.push(a);\n });\n Object.values(groups).forEach(g => {\n html += buildCategorySection(null, g.catConf, g.catLink, g.articles);\n });\n } else {\n \/\/ Vue cat\u00e9gorie : grille simple sans groupement\n if (rest.length) {\n const a = rest[0];\n html += buildCategorySection(null, a.catConf, a.catLink, rest);\n }\n }\n\n container.innerHTML = html;\n }\n\n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n INITIALISATION\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n async function init() {\n try {\n const posts = await fetchPosts();\n allPosts = posts.map(normalizePost);\n\n \/\/ Mettre \u00e0 jour le compteur r\u00e9el\n document.getElementById('statArticles').textContent = allPosts.length;\n\n render();\n } catch (err) {\n console.error('[Journal bang.] Erreur chargement :', err);\n document.getElementById('journalContent').innerHTML = buildError();\n }\n }\n\n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n FILTRES CAT\u00c9GORIE\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n document.querySelectorAll('.category-btn').forEach(btn => {\n btn.addEventListener('click', () => {\n document.querySelectorAll('.category-btn').forEach(b => b.classList.remove('active'));\n btn.classList.add('active');\n currentCategory = btn.dataset.category;\n render();\n });\n });\n\n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n NEWSLETTER\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n function handleNewsletter(e) {\n e.preventDefault();\n const btn = e.target.querySelector('button');\n btn.textContent = '\u2713 INSCRIT !';\n btn.style.background = '#b8860b';\n btn.disabled = true;\n }\n\n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n LANCEMENT\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n init();\n <\/script>\n<\/body>\n<\/html>\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":"Le Journal - Atelier Bang LE JOURNAL. Plongez dans l'univers de l'horlogerie : techniques, culture, style et coulisses de l'atelier. D\u00e9couvrez les secrets du mouvement horloger. TOUS LES ARTICLES \ud83d\udd27ATELIER \ud83d\udcdaCULTURE \u2699\ufe0fM\u00c9CANIQUE \u2728STYLE \u2014 ARTICLES 2.1K LECTEURS 4 CAT\u00c9GORIES SCROLL Chargement des articles\u2026 LE CLUB BANG. Rejoignez notre communaut\u00e9 et recevez en avant-premi\u00e8re nos articles, [...]","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-9544","page","type-page","status-publish","hentry"],"yoast_head":"\n<title>Le Journal \u2014 Horlogerie, m\u00e9canique et coulisses | bang. atelier<\/title>\n<meta name=\"description\" content=\"Techniques horlog\u00e8res, culture du sur-mesure, coulisses de l'atelier. Le blog de bang. atelier \u00e0 Poitiers \u2014 pour les passionn\u00e9s de montres automatiques.\" \/>\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\/lejournalbang\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Le Journal \u2014 Horlogerie, m\u00e9canique et coulisses | bang. atelier\" \/>\n<meta property=\"og:description\" content=\"Techniques horlog\u00e8res, culture du sur-mesure, coulisses de l'atelier. Le blog de bang. atelier \u00e0 Poitiers \u2014 pour les passionn\u00e9s de montres automatiques.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/atelier-bang.com\/en\/lejournalbang\/\" \/>\n<meta property=\"og:site_name\" content=\"bang. atelier de montres uniques\" \/>\n<meta property=\"article:modified_time\" content=\"2026-03-28T08:57:34+00:00\" \/>\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\/lejournalbang\/\",\"url\":\"https:\/\/atelier-bang.com\/lejournalbang\/\",\"name\":\"Le Journal \u2014 Horlogerie, m\u00e9canique et coulisses | bang. atelier\",\"isPartOf\":{\"@id\":\"https:\/\/atelier-bang.com\/#website\"},\"datePublished\":\"2026-01-25T18:12:05+00:00\",\"dateModified\":\"2026-03-28T08:57:34+00:00\",\"description\":\"Techniques horlog\u00e8res, culture du sur-mesure, coulisses de l'atelier. Le blog de bang. atelier \u00e0 Poitiers \u2014 pour les passionn\u00e9s de montres automatiques.\",\"breadcrumb\":{\"@id\":\"https:\/\/atelier-bang.com\/lejournalbang\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/atelier-bang.com\/lejournalbang\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/atelier-bang.com\/lejournalbang\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Accueil\",\"item\":\"https:\/\/atelier-bang.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Le journal bang.\"}]},{\"@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_head_json":{"title":"Le Journal \u2014 Horlogerie, m\u00e9canique et coulisses | bang. atelier","description":"Techniques horlog\u00e8res, culture du sur-mesure, coulisses de l'atelier. Le blog de bang. atelier \u00e0 Poitiers \u2014 pour les passionn\u00e9s de montres automatiques.","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\/lejournalbang\/","og_locale":"en_US","og_type":"article","og_title":"Le Journal \u2014 Horlogerie, m\u00e9canique et coulisses | bang. atelier","og_description":"Techniques horlog\u00e8res, culture du sur-mesure, coulisses de l'atelier. Le blog de bang. atelier \u00e0 Poitiers \u2014 pour les passionn\u00e9s de montres automatiques.","og_url":"https:\/\/atelier-bang.com\/en\/lejournalbang\/","og_site_name":"bang. atelier de montres uniques","article_modified_time":"2026-03-28T08:57:34+00:00","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\/lejournalbang\/","url":"https:\/\/atelier-bang.com\/lejournalbang\/","name":"Le Journal \u2014 Horlogerie, m\u00e9canique et coulisses | bang. atelier","isPartOf":{"@id":"https:\/\/atelier-bang.com\/#website"},"datePublished":"2026-01-25T18:12:05+00:00","dateModified":"2026-03-28T08:57:34+00:00","description":"Techniques horlog\u00e8res, culture du sur-mesure, coulisses de l'atelier. Le blog de bang. atelier \u00e0 Poitiers \u2014 pour les passionn\u00e9s de montres automatiques.","breadcrumb":{"@id":"https:\/\/atelier-bang.com\/lejournalbang\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/atelier-bang.com\/lejournalbang\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/atelier-bang.com\/lejournalbang\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Accueil","item":"https:\/\/atelier-bang.com\/"},{"@type":"ListItem","position":2,"name":"Le journal bang."}]},{"@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\/9544","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=9544"}],"version-history":[{"count":27,"href":"https:\/\/atelier-bang.com\/en\/wp-json\/wp\/v2\/pages\/9544\/revisions"}],"predecessor-version":[{"id":9655,"href":"https:\/\/atelier-bang.com\/en\/wp-json\/wp\/v2\/pages\/9544\/revisions\/9655"}],"wp:attachment":[{"href":"https:\/\/atelier-bang.com\/en\/wp-json\/wp\/v2\/media?parent=9544"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\r\n\t

\r\n\t\t

\r\n\t\t\t\n\n\n \n \n Le Journal - Atelier Bang<\/title>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=League+Spartan:wght@400;500;700;900&display=swap\" rel=\"stylesheet\">\n <style>\n * { margin: 0; padding: 0; box-sizing: border-box; }\n\n body {\n font-family: 'League Spartan', sans-serif;\n background: transparent;\n color: #ffffff;\n line-height: 1.6;\n }\n\n \/* Hero Section *\/\n .hero-section {\n min-height: 90vh;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n position: relative;\n padding: 120px 40px 80px;\n background: transparent;\n }\n\n .hero-section::after {\n content: '';\n position: absolute;\n top: 20%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 400px;\n height: 400px;\n background: radial-gradient(circle, rgba(184,134,11,0.05) 0%, transparent 70%);\n pointer-events: none;\n }\n\n .hero-content {\n position: relative;\n z-index: 2;\n text-align: center;\n max-width: 1200px;\n width: 100%;\n }\n\n .hero-title {\n font-size: clamp(64px, 12vw, 140px);\n font-weight: 900;\n letter-spacing: -4px;\n margin-bottom: 25px;\n line-height: 1;\n background: linear-gradient(180deg, #ffffff 0%, #999999 100%);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n background-clip: text;\n animation: fadeInUp 0.8s ease 0.2s backwards;\n }\n\n .hero-subtitle {\n font-size: clamp(16px, 2vw, 22px);\n color: #999;\n max-width: 800px;\n margin: 0 auto 50px;\n line-height: 1.6;\n font-weight: 400;\n animation: fadeInUp 0.8s ease 0.4s backwards;\n }\n\n \/* Category Buttons *\/\n .category-nav {\n display: flex;\n justify-content: center;\n gap: 15px;\n flex-wrap: wrap;\n animation: fadeInUp 0.8s ease 0.6s backwards;\n margin-bottom: 60px;\n }\n\n .category-btn {\n background: transparent;\n border: 1px solid rgba(255,255,255,0.15);\n color: #999;\n padding: 14px 28px;\n border-radius: 50px;\n font-size: 13px;\n font-weight: 600;\n letter-spacing: 1px;\n cursor: pointer;\n font-family: 'League Spartan', sans-serif;\n transition: all 0.3s ease;\n position: relative;\n overflow: hidden;\n }\n\n .category-btn::before {\n content: '';\n position: absolute;\n top: 0;\n left: -100%;\n width: 100%;\n height: 100%;\n background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);\n transition: left 0.5s;\n }\n\n .category-btn:hover::before { left: 100%; }\n\n .category-btn:hover {\n border-color: rgba(255,255,255,0.3);\n color: #fff;\n transform: translateY(-2px);\n box-shadow: 0 4px 20px rgba(255,255,255,0.1);\n }\n\n .category-btn.active {\n background: #fff;\n color: #000;\n border-color: #fff;\n }\n\n .category-icon { margin-right: 8px; font-size: 16px; }\n\n \/* Stats Bar *\/\n .stats-bar {\n display: flex;\n justify-content: center;\n gap: 60px;\n margin-top: 20px;\n padding: 30px;\n animation: fadeInUp 0.8s ease 0.8s backwards;\n }\n\n .stat-item { text-align: center; }\n\n .stat-number {\n font-size: 36px;\n font-weight: 900;\n background: linear-gradient(135deg, #b8860b, #ffd700);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n background-clip: text;\n display: block;\n margin-bottom: 8px;\n }\n\n .stat-label {\n font-size: 13px;\n color: #666;\n font-weight: 500;\n letter-spacing: 1px;\n }\n\n \/* Scroll Indicator *\/\n .scroll-indicator {\n position: absolute;\n bottom: 40px;\n left: 50%;\n transform: translateX(-50%);\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 10px;\n opacity: 0.5;\n animation: bounce 2s infinite;\n }\n\n .scroll-text { font-size: 11px; letter-spacing: 2px; color: #666; font-weight: 600; }\n\n .scroll-arrow {\n width: 24px;\n height: 36px;\n border: 2px solid rgba(255,255,255,0.2);\n border-radius: 12px;\n position: relative;\n }\n\n .scroll-arrow::before {\n content: '';\n position: absolute;\n top: 8px;\n left: 50%;\n transform: translateX(-50%);\n width: 4px;\n height: 8px;\n background: rgba(255,255,255,0.4);\n border-radius: 2px;\n animation: scrollDot 2s infinite;\n }\n\n \/* Loading state *\/\n .loading-state {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 20px;\n padding: 80px 40px;\n color: #666;\n font-size: 14px;\n letter-spacing: 1px;\n }\n\n .loading-spinner {\n width: 32px;\n height: 32px;\n border: 2px solid rgba(184,134,11,0.2);\n border-top-color: #b8860b;\n border-radius: 50%;\n animation: spin 0.8s linear infinite;\n }\n\n .error-state {\n max-width: 1400px;\n margin: 60px auto;\n padding: 0 40px;\n text-align: center;\n color: #666;\n }\n\n .error-state h3 { font-size: 20px; margin-bottom: 10px; color: #999; font-weight: 500; }\n .error-state p { font-size: 14px; line-height: 1.6; }\n\n \/* Featured Article *\/\n .featured-section {\n max-width: 1400px;\n margin: 0 auto 100px;\n padding: 0 40px;\n }\n\n .section-label {\n font-size: 14px;\n letter-spacing: 2px;\n color: #999;\n margin-bottom: 30px;\n font-weight: 500;\n }\n\n .featured-article {\n position: relative;\n height: 600px;\n border-radius: 8px;\n overflow: hidden;\n cursor: pointer;\n transition: transform 0.3s;\n display: block;\n text-decoration: none;\n color: inherit;\n }\n\n .featured-article:hover { transform: scale(1.01); }\n\n .featured-article img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n }\n\n .featured-article .img-placeholder {\n width: 100%;\n height: 100%;\n background: linear-gradient(135deg, #1a1a1a 0%, #111 100%);\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 48px;\n opacity: 0.3;\n }\n\n .featured-overlay {\n position: absolute;\n bottom: 0;\n left: 0;\n right: 0;\n background: linear-gradient(to top, rgba(0,0,0,0.95), transparent);\n padding: 60px 50px;\n }\n\n .featured-category {\n display: inline-block;\n background: #b8860b;\n color: #000;\n padding: 6px 15px;\n border-radius: 20px;\n font-size: 11px;\n font-weight: 700;\n letter-spacing: 1px;\n margin-bottom: 20px;\n text-transform: uppercase;\n }\n\n .featured-title {\n font-size: 42px;\n font-weight: 900;\n margin-bottom: 15px;\n line-height: 1.2;\n }\n\n .featured-excerpt {\n font-size: 16px;\n color: #ccc;\n max-width: 700px;\n margin-bottom: 20px;\n font-weight: 400;\n }\n\n .featured-meta {\n display: flex;\n gap: 20px;\n font-size: 13px;\n color: #999;\n flex-wrap: wrap;\n }\n\n \/* Category Sections *\/\n .category-section {\n max-width: 1400px;\n margin: 0 auto 100px;\n padding: 0 40px;\n }\n\n .category-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 40px;\n }\n\n .category-header h2 {\n font-size: 32px;\n font-weight: 900;\n display: flex;\n align-items: center;\n gap: 15px;\n }\n\n .view-all {\n color: #fff;\n text-decoration: none;\n font-size: 14px;\n display: flex;\n align-items: center;\n gap: 8px;\n transition: gap 0.3s;\n font-weight: 500;\n }\n\n .view-all:hover { gap: 12px; }\n\n .articles-grid {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));\n gap: 30px;\n }\n\n .article-card {\n background: rgba(17, 17, 17, 0.5);\n backdrop-filter: blur(10px);\n border-radius: 8px;\n overflow: hidden;\n cursor: pointer;\n transition: transform 0.3s, box-shadow 0.3s;\n border: 1px solid rgba(255,255,255,0.05);\n display: block;\n text-decoration: none;\n color: inherit;\n }\n\n .article-card:hover {\n transform: translateY(-5px);\n box-shadow: 0 10px 30px rgba(0,0,0,0.5);\n }\n\n .article-image {\n width: 100%;\n height: 250px;\n object-fit: cover;\n display: block;\n }\n\n .article-img-placeholder {\n width: 100%;\n height: 250px;\n background: linear-gradient(135deg, #1a1a1a 0%, #0d0d0d 100%);\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 36px;\n opacity: 0.3;\n }\n\n .article-content { padding: 25px; }\n\n .article-category-badge {\n display: inline-block;\n padding: 4px 12px;\n border-radius: 15px;\n font-size: 10px;\n font-weight: 700;\n letter-spacing: 1px;\n margin-bottom: 15px;\n text-transform: uppercase;\n }\n\n .badge-atelier { background: #ff6b35; color: #000; }\n .badge-culture { background: #b8860b; color: #000; }\n .badge-mecanique { background: #7c7c7c; color: #fff; }\n .badge-style { background: #8b4513; color: #fff; }\n .badge-default { background: #333; color: #999; }\n\n .article-title {\n font-size: 20px;\n font-weight: 700;\n margin-bottom: 12px;\n line-height: 1.3;\n }\n\n .article-excerpt {\n font-size: 14px;\n color: #999;\n margin-bottom: 20px;\n line-height: 1.6;\n font-weight: 400;\n }\n\n .article-meta {\n display: flex;\n justify-content: space-between;\n font-size: 12px;\n color: #666;\n padding-top: 15px;\n border-top: 1px solid #1a1a1a;\n }\n\n \/* Newsletter *\/\n .newsletter {\n max-width: 1400px;\n margin: 100px auto;\n padding: 80px 40px;\n background: rgba(17, 17, 17, 0.4);\n backdrop-filter: blur(20px);\n border-radius: 12px;\n text-align: center;\n border: 1px solid rgba(255,255,255,0.08);\n }\n\n .newsletter h2 { font-size: 36px; margin-bottom: 15px; font-weight: 900; }\n .newsletter p { color: #999; margin-bottom: 30px; font-size: 16px; font-weight: 400; }\n\n .newsletter-form {\n display: flex;\n gap: 15px;\n max-width: 500px;\n margin: 0 auto;\n }\n\n .newsletter-form input {\n flex: 1;\n padding: 15px 20px;\n background: #000;\n border: 1px solid #333;\n border-radius: 5px;\n color: #fff;\n font-size: 14px;\n font-family: 'League Spartan', sans-serif;\n }\n\n .newsletter-form button {\n padding: 15px 35px;\n background: #fff;\n color: #000;\n border: none;\n border-radius: 5px;\n font-weight: 700;\n cursor: pointer;\n transition: background 0.3s;\n font-family: 'League Spartan', sans-serif;\n }\n\n .newsletter-form button:hover { background: #b8860b; }\n\n \/* No results *\/\n .no-results {\n max-width: 1400px;\n margin: 60px auto;\n padding: 0 40px;\n text-align: center;\n }\n\n .no-results h3 { font-size: 24px; margin-bottom: 15px; font-weight: 700; }\n .no-results p { color: #666; font-size: 16px; }\n\n \/* Animations *\/\n @keyframes fadeInUp {\n from { opacity: 0; transform: translateY(30px); }\n to { opacity: 1; transform: translateY(0); }\n }\n\n @keyframes bounce {\n 0%,20%,50%,80%,100% { transform: translateX(-50%) translateY(0); }\n 40% { transform: translateX(-50%) translateY(-10px); }\n 60% { transform: translateX(-50%) translateY(-5px); }\n }\n\n @keyframes scrollDot {\n 0% { opacity: 1; transform: translateX(-50%) translateY(0); }\n 50% { opacity: 0.3; transform: translateX(-50%) translateY(16px); }\n 100% { opacity: 0; transform: translateX(-50%) translateY(16px); }\n }\n\n @keyframes spin {\n to { transform: rotate(360deg); }\n }\n\n \/* Responsive *\/\n @media (max-width: 768px) {\n .hero-section { min-height: 100vh; padding: 80px 20px 60px; }\n .category-nav { gap: 10px; }\n .category-btn { padding: 12px 20px; font-size: 12px; }\n .stats-bar { gap: 30px; flex-wrap: wrap; margin-top: 40px; }\n .stat-number { font-size: 28px; }\n .articles-grid { grid-template-columns: 1fr; }\n .featured-article { height: auto; min-height: 500px; }\n .featured-overlay { padding: 30px 25px; }\n .featured-title { font-size: 24px; line-height: 1.3; }\n .featured-excerpt { font-size: 14px; margin-bottom: 15px; }\n .featured-meta { font-size: 11px; gap: 12px; }\n .newsletter-form { flex-direction: column; }\n .featured-section, .category-section, .newsletter { padding: 0 20px; }\n }\n <\/style>\n<\/head>\n<body>\n\n \n <section class=\"hero-section\">\n <div class=\"hero-content\">\n <h1 class=\"hero-title\">LE JOURNAL.<\/h1>\n <p class=\"hero-subtitle\">\n Plongez dans l'univers de l'horlogerie : techniques, culture, style et coulisses de l'atelier. D\u00e9couvrez les secrets du mouvement horloger.\n <\/p>\n\n <nav class=\"category-nav\" aria-label=\"Filtrer par cat\u00e9gorie\">\n <button class=\"category-btn active\" data-category=\"tous\">TOUS LES ARTICLES<\/button>\n <button class=\"category-btn\" data-category=\"atelier\"><span class=\"category-icon\">\ud83d\udd27<\/span>ATELIER<\/button>\n <button class=\"category-btn\" data-category=\"culture\"><span class=\"category-icon\">\ud83d\udcda<\/span>CULTURE<\/button>\n <button class=\"category-btn\" data-category=\"mecanique\"><span class=\"category-icon\">\u2699\ufe0f<\/span>M\u00c9CANIQUE<\/button>\n <button class=\"category-btn\" data-category=\"style\"><span class=\"category-icon\">\u2728<\/span>STYLE<\/button>\n <\/nav>\n\n <div class=\"stats-bar\">\n <div class=\"stat-item\">\n <span class=\"stat-number\" id=\"statArticles\">\u2014<\/span>\n <span class=\"stat-label\">ARTICLES<\/span>\n <\/div>\n <div class=\"stat-item\">\n <span class=\"stat-number\">2.1K<\/span>\n <span class=\"stat-label\">LECTEURS<\/span>\n <\/div>\n <div class=\"stat-item\">\n <span class=\"stat-number\">4<\/span>\n <span class=\"stat-label\">CAT\u00c9GORIES<\/span>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"scroll-indicator\" aria-hidden=\"true\">\n <span class=\"scroll-text\">SCROLL<\/span>\n <div class=\"scroll-arrow\"><\/div>\n <\/div>\n <\/section>\n\n \n <div id=\"journalContent\">\n <div class=\"loading-state\">\n <div class=\"loading-spinner\"><\/div>\n <span>Chargement des articles\u2026<\/span>\n <\/div>\n <\/div>\n\n \n <section class=\"newsletter\">\n <h2>LE CLUB BANG.<\/h2>\n <p>Rejoignez notre communaut\u00e9 et recevez en avant-premi\u00e8re nos articles, guides exclusifs et conseils d'experts.<\/p>\n <form class=\"newsletter-form\" onsubmit=\"handleNewsletter(event)\" action=\"\">\n <input type=\"email\" placeholder=\"Votre adresse email\" required autocomplete=\"email\">\n <button type=\"submit\">S'ABONNER<\/button>\n <input type=\"hidden\" name=\"trp-form-language\" value=\"en\"\/><\/form>\n <\/section>\n\n <script>\n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n CONFIG\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n const API_BASE = 'https:\/\/atelier-bang.com\/wp-json\/wp\/v2';\n const PER_PAGE = 20;\n\n \/\/ Correspondance slug WP \u2192 config visuelle\n const CAT_CONFIG = {\n atelier: { label: 'ATELIER', icon: '\ud83d\udd27', badge: 'badge-atelier', archiveUrl: '\/category\/atelier\/' },\n culture: { label: 'CULTURE', icon: '\ud83d\udcda', badge: 'badge-culture', archiveUrl: '\/category\/culture\/' },\n \/\/ Le slug WordPress peut \u00eatre \"mecanique\" ou \"m\u00e9canique\" selon la config\n mecanique: { label: 'M\u00c9CANIQUE', icon: '\u2699\ufe0f', badge: 'badge-mecanique', archiveUrl: '\/category\/mecanique\/' },\n m\u00e9canique: { label: 'M\u00c9CANIQUE', icon: '\u2699\ufe0f', badge: 'badge-mecanique', archiveUrl: '\/category\/mecanique\/' },\n style: { label: 'STYLE', icon: '\u2728', badge: 'badge-style', archiveUrl: '\/category\/style\/' },\n };\n\n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n \u00c9TAT\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n let allPosts = []; \/\/ tous les articles bruts de l'API\n let currentCategory = 'tous';\n\n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n FETCH ARTICLES DEPUIS L'API WORDPRESS\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n async function fetchPosts() {\n \/\/ _embed inclut featured media + termes (cat\u00e9gories) en une seule requ\u00eate\n const url = `${API_BASE}\/posts?_embed&per_page=${PER_PAGE}&orderby=date&order=desc&status=publish`;\n const res = await fetch(url);\n if (!res.ok) throw new Error(`Erreur API : ${res.status}`);\n return res.json();\n }\n\n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n NORMALISE UN POST WP \u2192 OBJET ARTICLE\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n function normalizePost(post) {\n \/\/ Image featured\n const media = post._embedded?.['wp:featuredmedia']?.[0];\n const imageUrl = media?.media_details?.sizes?.medium_large?.source_url\n || media?.source_url\n || null;\n const imageAlt = media?.alt_text || stripHtml(post.title.rendered);\n\n \/\/ Cat\u00e9gorie principale\n const terms = post._embedded?.['wp:term']?.[0] || [];\n const catTerm = terms.find(t => t.taxonomy === 'category' && t.slug !== 'uncategorized')\n || terms[0]\n || null;\n const catSlug = catTerm?.slug?.toLowerCase() || 'uncategorized';\n const catConf = CAT_CONFIG[catSlug] || { label: catSlug.toUpperCase(), icon: '\ud83d\udcf0', badge: 'badge-default', archiveUrl: `\/category\/${catSlug}\/` };\n const catLink = catTerm?.link || catConf.archiveUrl;\n\n \/\/ Extrait sans HTML\n const excerpt = stripHtml(post.excerpt?.rendered || '').slice(0, 160).trim();\n\n \/\/ Date lisible\n const date = new Date(post.date).toLocaleDateString('fr-FR', { day: 'numeric', month: 'short', year: 'numeric' });\n\n \/\/ Temps de lecture estim\u00e9 (~200 mots\/min)\n const wordCount = stripHtml(post.content?.rendered || '').split(\/\\s+\/).length;\n const readMin = Math.max(1, Math.round(wordCount \/ 200));\n\n return {\n id: post.id,\n slug: catSlug,\n catConf,\n catLink,\n title: stripHtml(post.title.rendered),\n excerpt,\n date,\n readMin,\n imageUrl,\n imageAlt,\n link: post.link,\n };\n }\n\n function stripHtml(html) {\n return html.replace(\/<[^>]*>\/g, '').replace(\/&\/g,'&').replace(\/’\/g,\"'\").replace(\/–\/g,'\u2013').replace(\/ \/g,' ').trim();\n }\n\n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n RENDU HTML\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n function buildFeaturedHTML(article) {\n const imgTag = article.imageUrl\n ? `<img decoding=\"async\" src=\"${article.imageUrl}\" alt=\"${escHtml(article.imageAlt)}\" loading=\"eager\">`\n : `<div class=\"img-placeholder\">\u231a<\/div>`;\n return `\n <section class=\"featured-section\">\n <div class=\"section-label\">\u00c0 LA UNE<\/div>\n <a class=\"featured-article\" href=\"${escHtml(article.link)}\">\n ${imgTag}\n <div class=\"featured-overlay\">\n <span class=\"featured-category\">${escHtml(article.catConf.label)}<\/span>\n <h2 class=\"featured-title\">${escHtml(article.title)}<\/h2>\n <p class=\"featured-excerpt\">${escHtml(article.excerpt)}<\/p>\n <div class=\"featured-meta\">\n <span>\ud83d\udc64 Atelier Bang<\/span>\n <span>\ud83d\udcc5 ${article.date}<\/span>\n <span>\u23f1\ufe0f ${article.readMin} min de lecture<\/span>\n <\/div>\n <\/div>\n <\/a>\n <\/section>`;\n }\n\n function buildCategorySection(catKey, catConf, catLink, articles) {\n const cards = articles.map(a => `\n <a class=\"article-card\" href=\"${escHtml(a.link)}\">\n ${a.imageUrl\n ? `<img decoding=\"async\" class=\"article-image\" src=\"${escHtml(a.imageUrl)}\" alt=\"${escHtml(a.imageAlt)}\" loading=\"lazy\">`\n : `<div class=\"article-img-placeholder\">\u231a<\/div>`}\n <div class=\"article-content\">\n <span class=\"article-category-badge ${a.catConf.badge}\">${escHtml(a.catConf.label)}<\/span>\n <h3 class=\"article-title\">${escHtml(a.title)}<\/h3>\n <p class=\"article-excerpt\">${escHtml(a.excerpt)}<\/p>\n <div class=\"article-meta\">\n <span>\ud83d\udcc5 ${a.date}<\/span>\n <span>\u23f1\ufe0f ${a.readMin} min<\/span>\n <\/div>\n <\/div>\n <\/a>`).join('');\n\n return `\n <section class=\"category-section\">\n <div class=\"category-header\">\n <h2><span class=\"category-icon\">${catConf.icon}<\/span> ${catConf.label}<\/h2>\n <a href=\"${escHtml(catLink)}\" class=\"view-all\">Voir tous les articles \u2192<\/a>\n <\/div>\n <div class=\"articles-grid\">${cards}<\/div>\n <\/section>`;\n }\n\n function buildNoResults() {\n return `<div class=\"no-results\">\n <h3>Aucun article dans cette cat\u00e9gorie<\/h3>\n <p>Revenez bient\u00f4t \u2014 de nouveaux contenus sont en pr\u00e9paration.<\/p>\n <\/div>`;\n }\n\n function buildError() {\n return `<div class=\"error-state\">\n <h3>Impossible de charger les articles<\/h3>\n <p>V\u00e9rifiez votre connexion ou r\u00e9essayez dans quelques instants.<br>\n Si le probl\u00e8me persiste, contactez <a href=\"mailto:contact@atelier-bang.com\" style=\"color:#b8860b\">contact@atelier-bang.com<\/a>.<\/p>\n <\/div>`;\n }\n\n function escHtml(str) {\n return String(str).replace(\/&\/g,'&').replace(\/<\/g,'<').replace(\/>\/g,'>').replace(\/\"\/g,'"');\n }\n\n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n RENDER \u2014 appel\u00e9 \u00e0 chaque changement de filtre\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n function render() {\n const container = document.getElementById('journalContent');\n\n \/\/ Filtrer\n const filtered = currentCategory === 'tous'\n ? allPosts\n : allPosts.filter(a => a.slug === currentCategory || a.slug === currentCategory.normalize('NFD').replace(\/[\\u0300-\\u036f]\/g,''));\n\n if (!filtered.length) {\n container.innerHTML = buildNoResults();\n return;\n }\n\n let html = '';\n\n \/\/ Article \u00e0 la une = le plus r\u00e9cent de la s\u00e9lection\n const featured = filtered[0];\n html += buildFeaturedHTML(featured);\n\n \/\/ Regrouper les autres par cat\u00e9gorie (sauf featured pour \u00e9viter le doublon)\n const rest = filtered.slice(1);\n\n if (currentCategory === 'tous') {\n \/\/ Grouper par cat\u00e9gorie\n const groups = {};\n rest.forEach(a => {\n const key = a.slug;\n if (!groups[key]) groups[key] = { catConf: a.catConf, catLink: a.catLink, articles: [] };\n groups[key].articles.push(a);\n });\n Object.values(groups).forEach(g => {\n html += buildCategorySection(null, g.catConf, g.catLink, g.articles);\n });\n } else {\n \/\/ Vue cat\u00e9gorie : grille simple sans groupement\n if (rest.length) {\n const a = rest[0];\n html += buildCategorySection(null, a.catConf, a.catLink, rest);\n }\n }\n\n container.innerHTML = html;\n }\n\n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n INITIALISATION\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n async function init() {\n try {\n const posts = await fetchPosts();\n allPosts = posts.map(normalizePost);\n\n \/\/ Mettre \u00e0 jour le compteur r\u00e9el\n document.getElementById('statArticles').textContent = allPosts.length;\n\n render();\n } catch (err) {\n console.error('[Journal bang.] Erreur chargement :', err);\n document.getElementById('journalContent').innerHTML = buildError();\n }\n }\n\n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n FILTRES CAT\u00c9GORIE\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n document.querySelectorAll('.category-btn').forEach(btn => {\n btn.addEventListener('click', () => {\n document.querySelectorAll('.category-btn').forEach(b => b.classList.remove('active'));\n btn.classList.add('active');\n currentCategory = btn.dataset.category;\n render();\n });\n });\n\n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n NEWSLETTER\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n function handleNewsletter(e) {\n e.preventDefault();\n const btn = e.target.querySelector('button');\n btn.textContent = '\u2713 INSCRIT !';\n btn.style.background = '#b8860b';\n btn.disabled = true;\n }\n\n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n LANCEMENT\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n init();\n <\/script>\n<\/body>\n<\/html>\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":"Le Journal - Atelier Bang LE JOURNAL. Plongez dans l'univers de l'horlogerie : techniques, culture, style et coulisses de l'atelier. D\u00e9couvrez les secrets du mouvement horloger. TOUS LES ARTICLES \ud83d\udd27ATELIER \ud83d\udcdaCULTURE \u2699\ufe0fM\u00c9CANIQUE \u2728STYLE \u2014 ARTICLES 2.1K LECTEURS 4 CAT\u00c9GORIES SCROLL Chargement des articles\u2026 LE CLUB BANG. Rejoignez notre communaut\u00e9 et recevez en avant-premi\u00e8re nos articles, [...]","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-9544","page","type-page","status-publish","hentry"],"yoast_head":"\n<title>Le Journal \u2014 Horlogerie, m\u00e9canique et coulisses | bang. atelier<\/title>\n<meta name=\"description\" content=\"Techniques horlog\u00e8res, culture du sur-mesure, coulisses de l'atelier. Le blog de bang. atelier \u00e0 Poitiers \u2014 pour les passionn\u00e9s de montres automatiques.\" \/>\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\/lejournalbang\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Le Journal \u2014 Horlogerie, m\u00e9canique et coulisses | bang. atelier\" \/>\n<meta property=\"og:description\" content=\"Techniques horlog\u00e8res, culture du sur-mesure, coulisses de l'atelier. Le blog de bang. atelier \u00e0 Poitiers \u2014 pour les passionn\u00e9s de montres automatiques.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/atelier-bang.com\/en\/lejournalbang\/\" \/>\n<meta property=\"og:site_name\" content=\"bang. atelier de montres uniques\" \/>\n<meta property=\"article:modified_time\" content=\"2026-03-28T08:57:34+00:00\" \/>\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\/lejournalbang\/\",\"url\":\"https:\/\/atelier-bang.com\/lejournalbang\/\",\"name\":\"Le Journal \u2014 Horlogerie, m\u00e9canique et coulisses | bang. atelier\",\"isPartOf\":{\"@id\":\"https:\/\/atelier-bang.com\/#website\"},\"datePublished\":\"2026-01-25T18:12:05+00:00\",\"dateModified\":\"2026-03-28T08:57:34+00:00\",\"description\":\"Techniques horlog\u00e8res, culture du sur-mesure, coulisses de l'atelier. Le blog de bang. atelier \u00e0 Poitiers \u2014 pour les passionn\u00e9s de montres automatiques.\",\"breadcrumb\":{\"@id\":\"https:\/\/atelier-bang.com\/lejournalbang\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/atelier-bang.com\/lejournalbang\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/atelier-bang.com\/lejournalbang\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Accueil\",\"item\":\"https:\/\/atelier-bang.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Le journal bang.\"}]},{\"@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_head_json":{"title":"Le Journal \u2014 Horlogerie, m\u00e9canique et coulisses | bang. atelier","description":"Techniques horlog\u00e8res, culture du sur-mesure, coulisses de l'atelier. Le blog de bang. atelier \u00e0 Poitiers \u2014 pour les passionn\u00e9s de montres automatiques.","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\/lejournalbang\/","og_locale":"en_US","og_type":"article","og_title":"Le Journal \u2014 Horlogerie, m\u00e9canique et coulisses | bang. atelier","og_description":"Techniques horlog\u00e8res, culture du sur-mesure, coulisses de l'atelier. Le blog de bang. atelier \u00e0 Poitiers \u2014 pour les passionn\u00e9s de montres automatiques.","og_url":"https:\/\/atelier-bang.com\/en\/lejournalbang\/","og_site_name":"bang. atelier de montres uniques","article_modified_time":"2026-03-28T08:57:34+00:00","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\/lejournalbang\/","url":"https:\/\/atelier-bang.com\/lejournalbang\/","name":"Le Journal \u2014 Horlogerie, m\u00e9canique et coulisses | bang. atelier","isPartOf":{"@id":"https:\/\/atelier-bang.com\/#website"},"datePublished":"2026-01-25T18:12:05+00:00","dateModified":"2026-03-28T08:57:34+00:00","description":"Techniques horlog\u00e8res, culture du sur-mesure, coulisses de l'atelier. Le blog de bang. atelier \u00e0 Poitiers \u2014 pour les passionn\u00e9s de montres automatiques.","breadcrumb":{"@id":"https:\/\/atelier-bang.com\/lejournalbang\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/atelier-bang.com\/lejournalbang\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/atelier-bang.com\/lejournalbang\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Accueil","item":"https:\/\/atelier-bang.com\/"},{"@type":"ListItem","position":2,"name":"Le journal bang."}]},{"@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\/9544","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=9544"}],"version-history":[{"count":27,"href":"https:\/\/atelier-bang.com\/en\/wp-json\/wp\/v2\/pages\/9544\/revisions"}],"predecessor-version":[{"id":9655,"href":"https:\/\/atelier-bang.com\/en\/wp-json\/wp\/v2\/pages\/9544\/revisions\/9655"}],"wp:attachment":[{"href":"https:\/\/atelier-bang.com\/en\/wp-json\/wp\/v2\/media?parent=9544"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}