{"id":10168,"date":"2020-11-16T20:58:20","date_gmt":"2020-11-16T19:58:20","guid":{"rendered":"https:\/\/mytestarea.razbar.de\/instruments\/"},"modified":"2026-03-15T16:18:39","modified_gmt":"2026-03-15T15:18:39","slug":"instruments","status":"publish","type":"page","link":"https:\/\/www.razbar.de\/fr\/instruments\/","title":{"rendered":"Instruments"},"content":{"rendered":"<p><style>\n\/* &#9472;&#9472; Razbar Instruments Hero &#9472;&#9472; *\/\n#rzb-hero{position:relative;width:100vw;max-width:100vw;height:900px;overflow:visible;background:#0a0a0a;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);margin-top:-15px}\n\/* BG wrapper &#8212; overflow:hidden only here, so text animations are never clipped *\/\n#rzb-hero-bg-wrap{position:absolute;inset:0;overflow:hidden}\n#rzb-hero-bg{position:absolute;inset:0}\n\/* Main image: slides up from below *\/\n#rzb-hero-bg img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block;transform:translateY(60%);animation:rzb-img-rise 1600ms cubic-bezier(0.645,0.045,0.355,1) 300ms forwards}\n@keyframes rzb-img-rise{to{transform:translateY(0)}}\n\/* Dark image layer *\/\n#rzb-hero-dark{position:absolute;inset:0;z-index:3;transform:translateY(0);animation:rzb-dark-exit 1800ms cubic-bezier(0.645,0.045,0.355,1) 400ms forwards}\n#rzb-hero-dark img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block;filter:brightness(0.18)}\n@keyframes rzb-dark-exit{to{transform:translateY(-100%)}}\n\/* White cover *\/\n#rzb-hero-white{position:absolute;inset:0;background:#fff;z-index:4;transform:translateY(0);animation:rzb-white-exit 1400ms cubic-bezier(0.645,0.045,0.355,1) 0ms forwards}\n@keyframes rzb-white-exit{to{transform:translateY(-100%)}}\n\/* Gradient overlay *\/\n#rzb-hero-ov{position:absolute;inset:0;z-index:2;background:linear-gradient(to top,rgba(43,67,118,0.96) 0%,rgba(55,43,110,0.80) 25%,rgba(55,43,110,0.30) 50%,transparent 72%)}\n\/* Content: bottom-left, z-index above bg-wrap *\/\n#rzb-hero-inner{position:relative;z-index:10;height:100%;max-width:1240px;margin:0 auto;padding:0 80px 70px;display:flex;align-items:flex-end;box-sizing:border-box}\n.rzb-hero-col{max-width:600px}\n\/* Force colors + text-transform &#8212; override theme h1 uppercase *\/\n#rzb-hero .rzb-hero-caption{font-family:'Raleway',sans-serif!important;font-size:13px!important;font-weight:600!important;letter-spacing:4px!important;text-transform:uppercase!important;color:#e8ba98!important;margin:0 0 18px!important;line-height:1.4!important;display:block!important}\n#rzb-hero .rzb-hero-headline{font-family:'Playfair Display',serif!important;font-size:clamp(38px,4.8vw,68px)!important;font-weight:700!important;color:#ffffff!important;line-height:1.05!important;margin:0 0 18px!important;letter-spacing:-1px!important;display:block!important;width:600px!important;max-width:100%!important;word-break:normal!important;overflow-wrap:normal!important;white-space:normal!important;text-transform:none!important}\n#rzb-hero .rzb-hero-paragraph{font-family:'Raleway',sans-serif!important;font-size:16px!important;font-weight:400!important;color:#ffffff!important;line-height:1.55!important;margin:0!important;display:block!important;text-transform:none!important}\n\/* Right column: line + scroll stacked, absolutely on right edge *\/\n#rzb-hero .rzb-hero-rcol{position:absolute!important;right:18px!important;bottom:10%!important;display:flex!important;flex-direction:column!important;align-items:center!important;gap:14px!important}\n\/* Vertical line (layer 31: 1px &#215; 170px, grows from center) *\/\n#rzb-hero .rzb-hero-vline{width:1px!important;height:170px!important;background:#e8ba98!important;transform:scaleY(0)!important;transform-origin:center center!important;transition:transform 1000ms cubic-bezier(0.455,0.030,0.515,0.955)!important;flex-shrink:0!important}\n#rzb-hero .rzb-hero-vline.rzb-in{transform:scaleY(1)!important}\n\/* Scroll text &#8212; vertical, slides in from below via translateY in writing-mode space *\/\n#rzb-hero .rzb-hero-scroll{font-family:'Raleway',sans-serif!important;font-size:13px!important;font-weight:600!important;letter-spacing:4px!important;text-transform:uppercase!important;color:#e8ba98!important;writing-mode:vertical-lr!important;transform:rotate(180deg) translateY(-60px)!important;opacity:0!important;transition:transform 1000ms cubic-bezier(0.455,0.030,0.515,0.955),opacity 800ms ease!important}\n#rzb-hero .rzb-hero-scroll.rzb-in{transform:rotate(180deg) translateY(0)!important;opacity:1!important}\n\/* RTL *\/\n.rzb-hero-rtl{text-align:right}\n.rzb-hero-rtl .rzb-hero-caption,.rzb-hero-rtl .rzb-hero-paragraph{font-family:'Raleway',sans-serif!important}\n.rzb-hero-rtl .rzb-hero-headline{font-family:'Raleway',sans-serif!important;letter-spacing:0!important}\n\/* &#9472;&#9472; Animations &#8212; exact RevSlider Power2.easeInOut = cubic-bezier(0.455,0.030,0.515,0.955) &#9472;&#9472; *\/\n\/* Column container fades in (like RevSlider layer 26 opacity 0&#8594;1) *\/\n.rzb-hero-col{opacity:0;transition:opacity 800ms cubic-bezier(0.455,0.030,0.515,0.955)}\n.rzb-hero-col.rzb-col-in{opacity:1}\n\/* Caption: translateY(-100px) &#8594; 0, delay 540ms, 1000ms, no opacity change on element *\/\n.rzb-hero-caption{transform:translateY(-100px);transition:transform 1000ms cubic-bezier(0.455,0.030,0.515,0.955)}\n.rzb-hero-caption.rzb-in{transform:translateY(0)}\n\/* Headline: translateY(-200px) &#8594; 0, delay 640ms, 1000ms *\/\n.rzb-hero-headline{transform:translateY(-200px);transition:transform 1000ms cubic-bezier(0.455,0.030,0.515,0.955)}\n.rzb-hero-headline.rzb-in{transform:translateY(0)}\n\/* Paragraph: translateY(200px) &#8594; 0, delay 770ms, 1000ms *\/\n.rzb-hero-paragraph{transform:translateY(200px);transition:transform 1000ms cubic-bezier(0.455,0.030,0.515,0.955)}\n.rzb-hero-paragraph.rzb-in{transform:translateY(0)}\n\/* Scroll animation handled in rcol section above *\/\n\/* Responsive &#8212; exact RevSlider breakpoints *\/\n@media(max-width:1024px){\n  #rzb-hero{height:768px}\n  #rzb-hero-inner{padding:0 48px 56px}\n  #rzb-hero .rzb-hero-headline{font-size:clamp(34px,5vw,58px)!important}\n}\n@media(max-width:778px){\n  #rzb-hero{height:calc(100svh - 80px)}\n  #rzb-hero-inner{padding:0 28px 44px}\n  .rzb-hero-col{max-width:100%}\n  #rzb-hero .rzb-hero-headline{font-size:clamp(28px,7vw,48px)!important}\n  #rzb-hero .rzb-hero-paragraph{font-size:14px!important}\n  \/* Hide right column (scroll indicator) entirely on mobile *\/\n  #rzb-hero .rzb-hero-rcol{display:none!important}\n}\n@media(max-width:480px){\n  #rzb-hero{height:calc(100svh - 80px)}\n  #rzb-hero-inner{padding:0 20px 36px}\n  #rzb-hero .rzb-hero-caption{font-size:13px!important;letter-spacing:3px!important}\n  #rzb-hero .rzb-hero-paragraph{font-size:14px!important}\n}\n@media(prefers-reduced-motion:reduce){\n  .rzb-hero-col{opacity:1!important;transition:none!important}\n  .rzb-hero-caption,.rzb-hero-headline,.rzb-hero-paragraph{transform:none!important;transition:none!important}\n  #rzb-hero .rzb-hero-scroll{transform:rotate(-90deg) translateX(0)!important;transition:none!important}\n}\n<\/style>\n\n<section id=\"rzb-hero\" aria-label=\"Galerie\nd'instruments\">\n  <div id=\"rzb-hero-bg-wrap\" aria-hidden=\"true\">\n    <div id=\"rzb-hero-bg\">\n      <img decoding=\"async\" src=\"https:\/\/www.razbar.de\/wp-content\/uploads\/Daf-Tanbur-2048x1152.jpeg\" alt=\"Galerie\nd'instruments\" loading=\"eager\" fetchpriority=\"high\"\/>\n    <\/div>\n    <div id=\"rzb-hero-ov\"><\/div>\n    <div id=\"rzb-hero-dark\">\n      <img decoding=\"async\" src=\"https:\/\/www.razbar.de\/wp-content\/uploads\/Daf-Tanbur-2048x1152.jpeg\" alt=\"\"\/>\n    <\/div>\n    <div id=\"rzb-hero-white\"><\/div>\n  <\/div>\n  <div id=\"rzb-hero-inner\">\n    <div class=\"rzb-hero-col\">\n      <p class=\"rzb-hero-caption\">Patrimoine culturel mat&eacute;riel<\/p>\n      <h1 class=\"rzb-hero-headline\">Galerie<br>d'instruments<\/h1>\n      <p class=\"rzb-hero-paragraph\">Une exposition virtuelle de l'instrumentarium de l'ensemble Razbar<\/p>\n    <\/div>\n    <div class=\"rzb-hero-rcol\" aria-hidden=\"true\">\n      <div class=\"rzb-hero-vline\"><\/div>\n      <div class=\"rzb-hero-scroll\">d&eacute;filer<\/div>\n    <\/div>\n  <\/div>\n<\/section>\n<script>\n(function(){\n  \/* Prevent browser from restoring previous scroll position \u2014 hero animation must play from top *\/\n  if ('scrollRestoration' in history) history.scrollRestoration = 'manual';\n  window.scrollTo(0, 0);\n  var hero = document.getElementById('rzb-hero');\n  if (!hero) return;\n  function animate() {\n    var col = hero.querySelector('.rzb-hero-col');\n    \/\/ Column container fades in immediately (layer 26 in RevSlider)\n    if (col) requestAnimationFrame(function(){ col.classList.add('rzb-col-in'); });\n    \/\/ Individual elements slide per exact export timing\n    var seq = [\n      ['.rzb-hero-caption',  540],   \/\/ layer 29: start 540ms\n      ['.rzb-hero-headline', 640],   \/\/ layer 27: start 640ms\n      ['.rzb-hero-paragraph',770],   \/\/ layer 28: start 770ms\n      ['.rzb-hero-vline',    930],   \/\/ layer 31: start 930ms, scaleY from center\n      ['.rzb-hero-scroll',   990]    \/\/ layer 32: start 990ms, slides up\n    ];\n    seq.forEach(function(item) {\n      var el = hero.querySelector(item[0]);\n      if (!el) return;\n      setTimeout(function(){ el.classList.add('rzb-in'); }, item[1]);\n    });\n  }\n  if (document.readyState === 'loading') {\n    document.addEventListener('DOMContentLoaded', animate);\n  } else {\n    animate();\n  }\n})();\n<\/script>\n<br>\n<style>\n\/* &#9472;&#9472; Razbar Instruments Carousel v2 (scoped to #rzb-ic-1) &#9472;&#9472; *\/\n#rzb-ic-1{position:relative;width:100vw;max-width:100vw;overflow:hidden;background:linear-gradient(180deg,#f7f7f7 0%,#d7d7d7 100%);padding:50px 0 80px;box-sizing:border-box;perspective:1200px;--rzb-card-w:360px;--rzb-card-h:560px;--rzb-gap:20px;--rzb-vis:5;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}\n#rzb-ic-1 .rzb-vp{position:relative;width:calc(var(--rzb-vis)*(var(--rzb-card-w) + var(--rzb-gap)) - var(--rzb-gap));max-width:100%;margin:0 auto;height:var(--rzb-card-h);overflow:visible;padding:8px 0}\n#rzb-ic-1 .rzb-track{position:absolute;top:0;left:0;display:flex;align-items:center;gap:var(--rzb-gap);will-change:transform}\n#rzb-ic-1 .rzb-card{flex:0 0 var(--rzb-card-w);width:var(--rzb-card-w);height:var(--rzb-card-h);background:#fff;border-radius:14px;box-shadow:0 6px 24px rgba(0,0,0,.13),0 1px 4px rgba(0,0,0,.06);overflow:hidden;cursor:pointer;transition:transform 600ms cubic-bezier(.34,1.56,.64,1),box-shadow 600ms cubic-bezier(.34,1.56,.64,1),opacity 600ms ease;display:flex;flex-direction:column;position:relative;transform-origin:center center;transform-style:preserve-3d;user-select:none;-webkit-user-select:none}\n#rzb-ic-1 .rzb-img{flex:0 0 62%;height:62%;position:relative;overflow:hidden}\n#rzb-ic-1 .rzb-img img{width:100%;height:100%;object-fit:cover;object-position:center;display:block;transition:transform 500ms ease}\n#rzb-ic-1 .rzb-img::after{content:'';position:absolute;bottom:0;left:0;width:100%;height:50%;background:linear-gradient(to top,rgba(0,0,0,.4) 0%,transparent 100%);pointer-events:none}\n#rzb-ic-1 .rzb-lbl{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:18px 22px 20px;backface-visibility:hidden;min-height:0;overflow:hidden}\n#rzb-ic-1 .rzb-lbl-name{font-size:22px;font-weight:700;letter-spacing:.03em;color:#1a1a1a;text-align:center;line-height:1.2;margin:0;flex-shrink:0}\n#rzb-ic-1 .rzb-lbl-desc{font-size:14px;font-weight:400;color:#444;text-align:center;line-height:1.6;margin:0;overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;width:100%;flex-shrink:0}\n#rzb-ic-1 .rzb-lbl-more{font-size:13px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:#7a5c38;text-decoration:none;margin-top:10px;opacity:.8;transition:opacity 200ms ease;display:block}\n#rzb-ic-1 .rzb-card:hover .rzb-lbl-more{opacity:1}\n\/* Position classes *\/\n#rzb-ic-1 .rzb-p0{transform:scale(1) rotateY(0deg);opacity:1;z-index:5}\n#rzb-ic-1 .rzb-p0:hover{transform:scale(1) rotateY(0deg) translateY(-5px);box-shadow:0 20px 50px rgba(0,0,0,.18),0 4px 12px rgba(0,0,0,.09)}\n#rzb-ic-1 .rzb-p0:hover .rzb-img img{transform:scale(1.04)}\n#rzb-ic-1 .rzb-pp1{transform:scale(.85) rotateY(-18deg);opacity:.88;z-index:4}\n#rzb-ic-1 .rzb-pm1{transform:scale(.85) rotateY(18deg);opacity:.88;z-index:4}\n#rzb-ic-1 .rzb-pp2{transform:scale(.70) rotateY(-30deg);opacity:.58;z-index:3}\n#rzb-ic-1 .rzb-pm2{transform:scale(.70) rotateY(30deg);opacity:.58;z-index:3}\n#rzb-ic-1 .rzb-ph{transform:scale(.55) rotateY(45deg);opacity:0;pointer-events:none;z-index:1}\n\/* Arrows *\/\n#rzb-ic-1 .rzb-arrows{position:absolute;top:calc(50% - 20px);width:100%;left:0;transform:translateY(-50%);pointer-events:none;display:flex;justify-content:space-between;padding:0 14px;box-sizing:border-box;z-index:10}\n#rzb-ic-1 .rzb-arrow{pointer-events:all;background:rgba(255,255,255,.88);border:none;border-radius:50%;width:48px;height:48px;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 2px 10px rgba(0,0,0,.12);transition:background 200ms,box-shadow 200ms,transform 150ms;color:#3a3a3a;line-height:1;padding:0}\n#rzb-ic-1 .rzb-arrow svg{width:18px;height:18px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}\n#rzb-ic-1 .rzb-arrow:hover{background:#fff;box-shadow:0 0 0 2px rgba(122,92,56,.3),0 6px 18px rgba(0,0,0,.15);transform:scale(1.07);color:#7a5c38}\n#rzb-ic-1 .rzb-arrow:active{transform:scale(.94)}\n#rzb-ic-1 .rzb-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}\n\/* Dots *\/\n#rzb-ic-1 .rzb-dots{display:flex;justify-content:center;align-items:center;gap:7px;margin-top:30px;position:relative;z-index:10}\n#rzb-ic-1 .rzb-dot{width:7px;height:7px;border-radius:50%;background:rgba(0,0,0,.2);cursor:pointer;border:none;padding:0;transition:background 300ms,transform 300ms,width 300ms}\n#rzb-ic-1 .rzb-dot.rzb-active{background:#7a5c38;transform:scale(1.3);width:20px;border-radius:4px}\n\/* Safety hide for any legacy slider on this page *\/\n#rzb-ic-1 ~ .rzb-modal-hidden,.rzb-modal-hidden{display:none!important}\n\/* Responsive *\/\n@media(max-width:1100px){\n  #rzb-ic-1{--rzb-card-w:270px;--rzb-card-h:500px}\n}\n@media(max-width:700px){\n  #rzb-ic-1{--rzb-card-w:240px;--rzb-card-h:460px;--rzb-gap:14px;--rzb-vis:1;padding:36px 0 56px;touch-action:pan-y;perspective:none}\n  #rzb-ic-1 .rzb-pp1{transform:scale(.84);opacity:.22}\n  #rzb-ic-1 .rzb-pm1{transform:scale(.84);opacity:.22}\n  #rzb-ic-1 .rzb-pp2,#rzb-ic-1 .rzb-pm2,#rzb-ic-1 .rzb-ph{opacity:0;pointer-events:none}\n  #rzb-ic-1 .rzb-vp{overflow:hidden}\n  #rzb-ic-1 .rzb-arrow{width:44px;height:44px;touch-action:manipulation}\n  #rzb-ic-1 .rzb-lbl{padding:14px 16px 16px}\n  #rzb-ic-1 .rzb-lbl-name{font-size:20px}\n  #rzb-ic-1 .rzb-lbl-desc{font-size:13px;-webkit-line-clamp:4}\n  \/* Dots: 36px tap targets, visual dot via ::after &#8212; no negative-margin overlap *\/\n  #rzb-ic-1 .rzb-dots{gap:2px;flex-wrap:wrap}\n  #rzb-ic-1 .rzb-dot{width:36px;height:36px;padding:0;margin:0;background:transparent;border-radius:0;transform:none;display:grid;place-items:center;transition:none}\n  #rzb-ic-1 .rzb-dot.rzb-active{background:transparent;transform:none;width:36px}\n  #rzb-ic-1 .rzb-dot::after{content:'';display:block;width:8px;height:8px;border-radius:50%;background:rgba(0,0,0,.2);transition:background 300ms,width 300ms,border-radius 300ms}\n  #rzb-ic-1 .rzb-dot.rzb-active::after{background:#7a5c38;width:20px;border-radius:4px}\n  \/* Hide progress ring on mobile &#8212; pagination dots are sufficient *\/\n  #rzb-ic-1 .rzb-prog{display:none}\n}\n@media(max-width:480px){\n  #rzb-ic-1{--rzb-vis:1;--rzb-card-w:260px;--rzb-card-h:400px;--rzb-gap:16px;padding:28px 0 48px;perspective:none}\n  #rzb-ic-1 .rzb-pp1{transform:scale(.82);opacity:.22}\n  #rzb-ic-1 .rzb-pm1{transform:scale(.82);opacity:.22}\n  #rzb-ic-1 .rzb-pp2,#rzb-ic-1 .rzb-pm2,#rzb-ic-1 .rzb-ph{opacity:0;pointer-events:none}\n  #rzb-ic-1 .rzb-vp{overflow:hidden}\n  #rzb-ic-1 .rzb-lbl{padding:12px 14px 14px}\n  #rzb-ic-1 .rzb-lbl-name{font-size:19px}\n  #rzb-ic-1 .rzb-lbl-desc{font-size:13px;-webkit-line-clamp:4}\n  #rzb-ic-1 .rzb-lbl-more{font-size:12px}\n  #rzb-ic-1 .rzb-prog{display:none}\n}\n\/* Progress ring *\/\n#rzb-ic-1 .rzb-prog{position:absolute;bottom:36px;left:50%;transform:translateX(-50%);width:36px;height:36px;z-index:20;pointer-events:none;filter:drop-shadow(0 1px 2px rgba(0,0,0,.18))}\n#rzb-ic-1 .rzb-prog-bg{fill:none;stroke:rgba(0,0,0,.12);stroke-width:2.5}\n#rzb-ic-1 .rzb-prog-arc{fill:none;stroke:#7a5c38;stroke-width:2.5;stroke-linecap:round;stroke-dasharray:62.83;stroke-dashoffset:62.83;animation:rzb-prog-fill 5s linear forwards}\n@keyframes rzb-prog-fill{from{stroke-dashoffset:62.83}to{stroke-dashoffset:0}}\n\/* Reduced motion *\/\n@media(prefers-reduced-motion:reduce){\n  #rzb-ic-1 .rzb-track{transition:none!important}\n  #rzb-ic-1 .rzb-card{transition:none!important}\n  #rzb-ic-1 .rzb-prog-arc{animation:none!important}\n}\n<\/style>\n\n<\/p><div id=\"rzb-ic-1\" role=\"region\" aria-label=\"Instruments Carousel\">\n  <div class=\"rzb-arrows\" aria-hidden=\"true\">\n    <button class=\"rzb-arrow rzb-prev\" aria-label=\"Previous instrument\">\n      <svg viewbox=\"0 0 24 24\"><polyline points=\"15 18 9 12 15 6\"><\/polyline><\/svg>\n      <span class=\"rzb-sr\">Previous<\/span>\n    <\/button>\n    <button class=\"rzb-arrow rzb-next\" aria-label=\"Next instrument\">\n      <svg viewbox=\"0 0 24 24\"><polyline points=\"9 6 15 12 9 18\"><\/polyline><\/svg>\n      <span class=\"rzb-sr\">Next<\/span>\n    <\/button>\n  <\/div>\n  <div class=\"rzb-vp\"><div class=\"rzb-track\" role=\"list\" aria-live=\"polite\"><\/div><\/div>\n  <div class=\"rzb-dots\" role=\"tablist\" aria-label=\"Slide position\"><\/div>\n  <div class=\"rzb-prog\" aria-hidden=\"true\">\n    <svg viewbox=\"0 0 36 36\" width=\"36\" height=\"36\">\n      <circle class=\"rzb-prog-bg\" cx=\"18\" cy=\"18\" r=\"10\"><\/circle>\n      <circle class=\"rzb-prog-arc\" cx=\"18\" cy=\"18\" r=\"10\" transform=\"rotate(-90 18 18)\"><\/circle>\n    <\/svg>\n  <\/div>\n<\/div>\n\n<script>\n(function(){\n'use strict';\nvar ITEMS=[{\"key\":\"tanbur\",\"image\":\"https:\/\/www.razbar.de\/wp-content\/uploads\/revslider\/Instruments-Details\/Tanbur_Small.jpeg\",\"name\":\"Tanbur\",\"short\":\"Luth \\u00e0 long manche \\u00e0 caisse piriforme mont\\u00e9e de 2 cordes.\\u2026\",\"readmore\":\"En savoir plus\",\"slideIndex\":0},{\"key\":\"kamantche\",\"image\":\"https:\/\/www.razbar.de\/wp-content\/uploads\/revslider\/Instruments-Details\/Kamancheh-1024x576.jpg\",\"name\":\"Kamantche\",\"short\":\"Vi\\u00e8le \\u00e0 pique (Mu-kesh) au corps sph\\u00e9rique et table en parchemin.\\u2026\",\"readmore\":\"En savoir plus\",\"slideIndex\":1},{\"key\":\"daf\",\"image\":\"https:\/\/www.razbar.de\/wp-content\/uploads\/revslider\/Instruments-Details\/Daf_0000140-1024x576.jpg\",\"name\":\"Daf\",\"short\":\"Les tambours sur cadre \\u00e9taient courants en Iran il y a au moins 2 500 ans.\\u2026\",\"readmore\":\"En savoir plus\",\"slideIndex\":2},{\"key\":\"surnay\",\"image\":\"https:\/\/www.razbar.de\/wp-content\/uploads\/revslider\/Instruments-Details\/Sorna-1024x576.jpg\",\"name\":\"Surn\\u00e2y\",\"short\":\"Un hautbois (Surn\\u00e2y) r\\u00e9pandu du Maghreb \\u00e0 l'Extr\\u00eame-Orient, indispensable aux f\\u00eates et c\\u00e9r\\u00e9monies.\\u2026\",\"readmore\":\"En savoir plus\",\"slideIndex\":3},{\"key\":\"balaban\",\"image\":\"https:\/\/www.razbar.de\/wp-content\/uploads\/revslider\/Instruments-Details\/Balaban_Scaled-4-1024x576.jpg\",\"name\":\"Balaban\",\"short\":\"Fl\\u00fbte \\u00e0 anche double \\u2014 narme ney au Kurdistan, mey en Anatolie, duduk en Arm\\u00e9nie.\\u2026\",\"readmore\":\"En savoir plus\",\"slideIndex\":4},{\"key\":\"dohol\",\"image\":\"https:\/\/www.razbar.de\/wp-content\/uploads\/revslider\/Instruments-Details\/Dohol-BG-dae1e7-768x827.jpg\",\"name\":\"Dohol\",\"short\":\"Grand tambour cylindrique frapp\\u00e9 d'un b\\u00e2ton courb\\u00e9 (chogan) et d'une fine baguette.\\u2026\",\"readmore\":\"En savoir plus\",\"slideIndex\":5},{\"key\":\"dozale\",\"image\":\"https:\/\/www.razbar.de\/wp-content\/uploads\/revslider\/Instruments-Details\/Dozale-Scaled-3-1024x576.jpg\",\"name\":\"Dozale\",\"short\":\"Double fl\\u00fbte kurde (Zamareh) en os d'aigle \\u00e0 anche de roseau.\\u2026\",\"readmore\":\"En savoir plus\",\"slideIndex\":6},{\"key\":\"shemshal\",\"image\":\"https:\/\/www.razbar.de\/wp-content\/uploads\/revslider\/Instruments-Details\/Shemshal-Scaled-1024x576.jpg\",\"name\":\"Shemshal\",\"short\":\"Fl\\u00fbte droite (Blwer) en roseau, bois ou m\\u00e9tal, par excellence l'instrument des bergers kurdes.\\u2026\",\"readmore\":\"En savoir plus\",\"slideIndex\":7}];\nvar TOTAL=ITEMS.length, CLONES=3;\nvar root=document.getElementById('rzb-ic-1');\nvar track=root.querySelector('.rzb-track');\nvar vp=root.querySelector('.rzb-vp');\nvar dotsEl=root.querySelector('.rzb-dots');\nvar btnP=root.querySelector('.rzb-prev');\nvar btnN=root.querySelector('.rzb-next');\nvar curIdx=0, animating=false, tIdx=CLONES;\nvar allCards=[], autoTimer=null;\nvar progArc=root.querySelector('.rzb-prog-arc');\nfunction resetProg(){\n  if(!progArc||!progArc.parentNode) return;\n  \/* Replace element &#8212; guaranteed fresh CSS animation start *\/\n  var ns='http:\/\/www.w3.org\/2000\/svg';\n  var fresh=document.createElementNS(ns,'circle');\n  fresh.setAttribute('class','rzb-prog-arc');\n  fresh.setAttribute('cx','18'); fresh.setAttribute('cy','18');\n  fresh.setAttribute('r','10'); fresh.setAttribute('transform','rotate(-90 18 18)');\n  progArc.parentNode.replaceChild(fresh,progArc);\n  progArc=fresh;\n}\n\nfunction mkCard(item,clone){\n  var c=document.createElement('div');\n  c.className='rzb-card rzb-ph';\n  c.setAttribute('role','listitem');\n  c.setAttribute('aria-label',item.name);\n  if(clone) c.setAttribute('aria-hidden','true');\n\n  \/* Image *\/\n  var iw=document.createElement('div'); iw.className='rzb-img';\n  var img=document.createElement('img'); img.src=item.image; img.alt=item.name; img.loading='lazy';\n  iw.appendChild(img);\n\n  \/* Label: name + description + read more *\/\n  var lbl=document.createElement('div'); lbl.className='rzb-lbl';\n  var nm=document.createElement('p'); nm.className='rzb-lbl-name'; nm.textContent=item.name;\n  var ds=document.createElement('p'); ds.className='rzb-lbl-desc'; ds.textContent=item.short;\n  var rm=document.createElement('span'); rm.className='rzb-lbl-more'; rm.textContent=item.readmore+' \\u203a';\n  lbl.appendChild(nm); lbl.appendChild(ds); lbl.appendChild(rm);\n\n  c.appendChild(iw); c.appendChild(lbl);\n\n  \/* Entire card surface is clickable *\/\n  if(!clone){\n    (function(si){ c.addEventListener('click',function(){ openModal(si); }); })(item.slideIndex);\n  }\n  return c;\n}\n\nfunction buildTrack(){\n  track.innerHTML=''; allCards=[];\n  for(var i=TOTAL-CLONES;i<TOTAL;i++){ var c=mkCard(ITEMS[i],true); track.appendChild(c); allCards.push(c); }\n  for(var j=0;j<TOTAL;j++){ var rc=mkCard(ITEMS[j],false); track.appendChild(rc); allCards.push(rc); }\n  for(var k=0;k<CLONES;k++){ var rc2=mkCard(ITEMS[k],true); track.appendChild(rc2); allCards.push(rc2); }\n}\n\nfunction cw(){ return parseFloat(getComputedStyle(root).getPropertyValue('--rzb-card-w'))||360; }\nfunction gap(){ return parseFloat(getComputedStyle(root).getPropertyValue('--rzb-gap'))||20; }\nfunction step(){ return cw()+gap(); }\nfunction calcTx(ti){ return vp.offsetWidth\/2 - cw()\/2 - ti*step(); }\n\nfunction applyPos(){\n  for(var i=0;i<allCards.length;i++){\n    var el=allCards[i], d=i-tIdx;\n    el.className=el.className.replace(\/\\brzb-p\\S+\/g,'').trim();\n    el.classList.add(d===0?'rzb-p0':d===1?'rzb-pp1':d===-1?'rzb-pm1':d===2?'rzb-pp2':d===-2?'rzb-pm2':'rzb-ph');\n  }\n}\n\nfunction instant(v){ track.style.transition='none'; track.style.transform='translateX('+v+'px)'; void track.offsetWidth; }\n\/* Snap card positions without triggering their CSS transitions (used on loop jump) *\/\nfunction snapCards(){\n  for(var i=0;i<allCards.length;i++) allCards[i].style.transition='none';\n  applyPos();\n  void track.offsetWidth; \/* commit with no-transition *\/\n  for(var i=0;i<allCards.length;i++) allCards[i].style.transition='';\n}\nfunction animated(v){ track.style.transition='transform 600ms cubic-bezier(.34,1.56,.64,1)'; track.style.transform='translateX('+v+'px)'; }\n\nfunction next(){\n  if(animating) return; animating=true;\n  tIdx++; curIdx=(curIdx+1)%TOTAL;\n  applyPos(); animated(calcTx(tIdx)); updateDots(); resetProg();\n}\nfunction prev(){\n  if(animating) return; animating=true;\n  tIdx--; curIdx=((curIdx-1)+TOTAL)%TOTAL;\n  applyPos(); animated(calcTx(tIdx)); updateDots(); resetProg();\n}\nfunction goTo(li){\n  if(animating) return; animating=true;\n  li=((li%TOTAL)+TOTAL)%TOTAL;\n  tIdx+=li-curIdx; curIdx=li;\n  applyPos(); animated(calcTx(tIdx)); updateDots(); resetProg();\n}\n\ntrack.addEventListener('transitionend',function(e){\n  if(e.target!==track||e.propertyName!=='transform') return;\n  if(tIdx>CLONES+TOTAL-1){ tIdx-=TOTAL; instant(calcTx(tIdx)); snapCards(); resetProg(); }\n  else if(tIdx<CLONES){ tIdx+=TOTAL; instant(calcTx(tIdx)); snapCards(); resetProg(); }\n  animating=false;\n});\n\n\/* Autorotation &#8212; 5 s, pauses on hover *\/\nfunction startAuto(){ autoTimer=setInterval(function(){ next(); },5000); resetProg(); }\nfunction stopAuto(){ clearInterval(autoTimer); autoTimer=null; if(progArc) progArc.style.animationPlayState='paused'; }\nroot.addEventListener('mouseenter', stopAuto);\nroot.addEventListener('mouseleave', startAuto);\n\nfunction buildDots(){\n  dotsEl.innerHTML='';\n  for(var i=0;i<TOTAL;i++){\n    var d=document.createElement('button');\n    d.className='rzb-dot'; d.setAttribute('role','tab');\n    d.setAttribute('aria-label','Go to slide '+(i+1)); d.setAttribute('data-i',i);\n    dotsEl.appendChild(d);\n  }\n  dotsEl.addEventListener('click',function(e){\n    if(e.target.classList.contains('rzb-dot')){ stopAuto(); goTo(parseInt(e.target.getAttribute('data-i'),10)); }\n  });\n}\nfunction updateDots(){\n  var ds=dotsEl.querySelectorAll('.rzb-dot');\n  for(var i=0;i<ds.length;i++){ ds[i].classList.toggle('rzb-active',i===curIdx); ds[i].setAttribute('aria-selected',i===curIdx?'true':'false'); }\n}\n\nfunction openModal(si){\n  if(typeof window.rzbOpenModal === 'function'){ window.rzbOpenModal(si); }\n}\n\n\/* Touch \/ Swipe *\/\nvar tx0=0,ty0=0,tdx=0;\nroot.addEventListener('touchstart',function(e){ tx0=e.touches[0].clientX; ty0=e.touches[0].clientY; tdx=0; },{passive:true});\nroot.addEventListener('touchmove',function(e){ tdx=e.touches[0].clientX-tx0; if(Math.abs(tdx)>Math.abs(e.touches[0].clientY-ty0)&&Math.abs(tdx)>8) e.preventDefault(); },{passive:false});\nroot.addEventListener('touchend',function(){\n  if(tdx<-50){ next(); } else if(tdx>50){ prev(); }\n  tdx=0;\n  \/* Restart auto-rotation after any touch interaction *\/\n  stopAuto(); startAuto();\n});\n\n\/* Keyboard *\/\nroot.setAttribute('tabindex','0');\nroot.addEventListener('keydown',function(e){\n  if(e.key==='ArrowLeft'){ e.preventDefault(); stopAuto(); prev(); }\n  else if(e.key==='ArrowRight'){ e.preventDefault(); stopAuto(); next(); }\n});\n\n\/* Arrow buttons *\/\nbtnP.addEventListener('click',function(){ stopAuto(); prev(); });\nbtnN.addEventListener('click',function(){ stopAuto(); next(); });\n\n\/* Resize *\/\nvar rt;\nwindow.addEventListener('resize',function(){ clearTimeout(rt); rt=setTimeout(function(){ instant(calcTx(tIdx)); },60); });\n\n\/* Init *\/\nbuildTrack(); buildDots();\ntIdx=CLONES; curIdx=0;\napplyPos(); instant(calcTx(tIdx)); updateDots();\nstartAuto();\n})();\n<\/script>\n\n","protected":false},"excerpt":{"rendered":"<p>Patrimoine culturel mat&eacute;riel Galeried'instruments Une exposition virtuelle de l'instrumentarium de l'ensemble Razbar d&eacute;filer Previous Next<\/p>","protected":false},"author":15,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-10168","page","type-page","status-publish","hentry"],"acf":[],"jetpack_sharing_enabled":false,"_links":{"self":[{"href":"https:\/\/www.razbar.de\/fr\/wp-json\/wp\/v2\/pages\/10168","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.razbar.de\/fr\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.razbar.de\/fr\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.razbar.de\/fr\/wp-json\/wp\/v2\/users\/15"}],"replies":[{"embeddable":true,"href":"https:\/\/www.razbar.de\/fr\/wp-json\/wp\/v2\/comments?post=10168"}],"version-history":[{"count":1,"href":"https:\/\/www.razbar.de\/fr\/wp-json\/wp\/v2\/pages\/10168\/revisions"}],"predecessor-version":[{"id":13565,"href":"https:\/\/www.razbar.de\/fr\/wp-json\/wp\/v2\/pages\/10168\/revisions\/13565"}],"wp:attachment":[{"href":"https:\/\/www.razbar.de\/fr\/wp-json\/wp\/v2\/media?parent=10168"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}