{"id":17,"date":"2026-04-02T13:17:20","date_gmt":"2026-04-02T13:17:20","guid":{"rendered":"https:\/\/tapisoin.fr\/?page_id=17"},"modified":"2026-04-10T07:24:21","modified_gmt":"2026-04-10T07:24:21","slug":"nos-realisations","status":"publish","type":"page","link":"https:\/\/tapisoin.fr\/?page_id=17","title":{"rendered":"Nos R\u00e9alisations"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\r\n\r\n\r\n\r\n\r\nNos R\u00e9alisations \u2014 Tapis<\/title>\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Cormorant+Garamond:ital,wght@0,300;0,500;0,700;1,300;1,500&family=Outfit:wght@300;400;500&display=swap\" rel=\"stylesheet\">\r\n<style>\r\n\r\n\/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n BASE\r\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\r\n\r\n:root {\r\n --bg: #f0e8da;\r\n --dark: #1e1610;\r\n --mid: #6b5740;\r\n --gold: #b8864e;\r\n --cream: #faf5ee;\r\n --shadow: 0 20px 60px rgba(30,22,16,.18);\r\n}\r\n\r\nbody {\r\n background-color: var(--bg);\r\n \/* Grain papier *\/\r\n background-image:\r\n url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='4' stitchTiles='stitch'\/%3E%3C\/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='.04'\/%3E%3C\/svg%3E\");\r\n font-family: 'Outfit', sans-serif;\r\n color: var(--dark);\r\n overflow-x: hidden;\r\n min-height: 100vh;\r\n}\r\n\r\n\/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n HERO\r\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n.hero {\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n text-align: center;\r\n padding: 80px 40px 0;\r\n position: relative;\r\n overflow: visible;\r\n}\r\n\r\n.hero-eyebrow {\r\n font-size: .68rem;\r\n font-weight: 500;\r\n letter-spacing: .28em;\r\n text-transform: uppercase;\r\n color: var(--gold);\r\n margin-bottom: 20px;\r\n opacity: 0;\r\n animation: up .7s .1s forwards;\r\n}\r\n\r\n.hero-title {\r\n font-family: 'Cormorant Garamond', serif;\r\n font-size: clamp(3.8rem, 9vw, 8rem);\r\n font-weight: 300;\r\n line-height: .92;\r\n color: var(--dark);\r\n letter-spacing: -.02em;\r\n opacity: 0;\r\n animation: up .8s .25s forwards;\r\n}\r\n.hero-title em {\r\n font-style: italic;\r\n color: var(--gold);\r\n font-weight: 300;\r\n}\r\n\r\n.hero-sub {\r\n margin-top: 22px;\r\n font-size: .98rem;\r\n font-weight: 300;\r\n color: var(--mid);\r\n line-height: 1.65;\r\n max-width: 400px;\r\n opacity: 0;\r\n animation: up .7s .4s forwards;\r\n}\r\n\r\n\/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n S\u00c9PARATEUR VAGUE\r\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n.wave-wrap {\r\n position: relative;\r\n margin-top: 52px;\r\n line-height: 0;\r\n opacity: 0;\r\n animation: fadeIn .9s .65s forwards;\r\n}\r\n.wave-wrap svg {\r\n width: 100%;\r\n display: block;\r\n}\r\n\r\n\/* Badge \"intro carte\" sur la vague *\/\r\n.intro-badge {\r\n position: absolute;\r\n left: 50%;\r\n top: 50%;\r\n transform: translate(-50%, -50%);\r\n background: var(--dark);\r\n color: var(--cream);\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 12px;\r\n padding: 12px 26px;\r\n border-radius: 100px;\r\n font-size: .8rem;\r\n font-weight: 300;\r\n letter-spacing: .06em;\r\n white-space: nowrap;\r\n box-shadow: 0 8px 32px rgba(30,22,16,.22);\r\n opacity: 0;\r\n animation: pop .55s .95s cubic-bezier(.34,1.56,.64,1) forwards;\r\n z-index: 5;\r\n}\r\n.intro-badge .pulse-dot {\r\n width: 7px; height: 7px;\r\n background: var(--gold);\r\n border-radius: 50%;\r\n flex-shrink: 0;\r\n animation: blink 2.2s 1.5s infinite;\r\n}\r\n@keyframes blink {\r\n 0%,100% { opacity:1; transform:scale(1); }\r\n 50% { opacity:.4; transform:scale(1.5); }\r\n}\r\n\r\n\/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n ZONE \u00c9PARPILL\u00c9E\r\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n.scatter-zone {\r\n position: relative;\r\n min-height: 900px;\r\n max-width: 1280px;\r\n margin: 0 auto;\r\n padding: 60px 60px 140px;\r\n}\r\n\r\n\/* Lignes de liaison d\u00e9coratives *\/\r\n.scatter-zone > svg {\r\n position: absolute;\r\n inset: 0;\r\n width: 100%; height: 100%;\r\n pointer-events: none;\r\n overflow: visible;\r\n}\r\n\r\n\/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n CARTE POLAROID\r\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n.card {\r\n position: absolute;\r\n display: flex;\r\n flex-direction: column;\r\n background: var(--cream);\r\n border-radius: 4px;\r\n box-shadow: var(--shadow);\r\n cursor: pointer;\r\n transition:\r\n transform .45s cubic-bezier(.34,1.4,.64,1),\r\n box-shadow .4s ease;\r\n will-change: transform;\r\n opacity: 0;\r\n animation: cardIn .7s forwards cubic-bezier(.22,1,.36,1);\r\n \/* Bordure style vieux papier *\/\r\n outline: 1px solid rgba(30,22,16,.07);\r\n}\r\n\r\n\/* Rotations & positions pour chaque carte *\/\r\n.card:nth-child(2) { left: 0%; top: 0px; rotate: -6deg; animation-delay: .7s; }\r\n.card:nth-child(3) { left: 20%; top: 260px; rotate: 4deg; animation-delay: .85s; }\r\n.card:nth-child(4) { left: 43%; top: 20px; rotate: -3deg; animation-delay: 1s; }\r\n.card:nth-child(5) { left: 62%; top: 280px; rotate: 6deg; animation-delay: 1.15s;}\r\n.card:nth-child(6) { left: 83%; top: 10px; rotate: -5deg; animation-delay: 1.3s; }\r\n\r\n.card:hover {\r\n transform: translateY(-16px) scale(1.04) rotate(0deg) !important;\r\n box-shadow: 0 36px 80px rgba(30,22,16,.26);\r\n z-index: 20;\r\n}\r\n\r\n\/* Photo en haut de la carte *\/\r\n.card-photo {\r\n width: 260px;\r\n height: 260px;\r\n border-radius: 2px 2px 0 0;\r\n overflow: hidden;\r\n position: relative;\r\n flex-shrink: 0;\r\n}\r\n\r\n\/* Textures carpet par couleur *\/\r\n.card:nth-child(2) .card-photo { background: radial-gradient(ellipse at 35% 40%, #8c3828 0%, #2e0e06 100%); }\r\n.card:nth-child(3) .card-photo { background: radial-gradient(ellipse at 60% 35%, #2a4a38 0%, #091a11 100%); }\r\n.card:nth-child(4) .card-photo { background: radial-gradient(ellipse at 40% 60%, #7a4e1a 0%, #2a1506 100%); }\r\n.card:nth-child(5) .card-photo { background: radial-gradient(ellipse at 55% 35%, #4e1828 0%, #180609 100%); }\r\n.card:nth-child(6) .card-photo { background: radial-gradient(ellipse at 45% 55%, #1e3060 0%, #060c20 100%); }\r\n\r\n\/* Motif tiss\u00e9 sur la photo *\/\r\n.card-photo::before {\r\n content: '';\r\n position: absolute; inset: 0;\r\n background-image:\r\n repeating-linear-gradient(0deg, rgba(255,255,255,.06) 0, rgba(255,255,255,.06) 1px, transparent 1px, transparent 10px),\r\n repeating-linear-gradient(90deg, rgba(255,255,255,.06) 0, rgba(255,255,255,.06) 1px, transparent 1px, transparent 10px),\r\n repeating-linear-gradient(45deg, rgba(255,255,255,.03) 0, rgba(255,255,255,.03) 1px, transparent 1px, transparent 22px);\r\n}\r\n\r\n\/* Si vraie image *\/\r\n.card-photo img {\r\n position: absolute; inset: 0;\r\n width: 100%; height: 100%;\r\n object-fit: cover;\r\n z-index: 2;\r\n}\r\n\r\n\/* Bande blanche \"polaroid\" en bas de la carte *\/\r\n.card-label {\r\n padding: 16px 16px 20px;\r\n display: flex;\r\n flex-direction: column;\r\n gap: 4px;\r\n}\r\n.card-label-title {\r\n font-family: 'Cormorant Garamond', serif;\r\n font-size: 1.25rem;\r\n font-weight: 500;\r\n color: var(--dark);\r\n letter-spacing: .01em;\r\n line-height: 1.15;\r\n white-space: nowrap;\r\n}\r\n.card-label-sub {\r\n font-size: .68rem;\r\n font-weight: 400;\r\n letter-spacing: .18em;\r\n text-transform: uppercase;\r\n color: var(--gold);\r\n}\r\n\r\n\/* Fl\u00e8che hover *\/\r\n.card-arrow {\r\n position: absolute;\r\n bottom: 18px;\r\n right: 14px;\r\n font-size: .75rem;\r\n color: var(--gold);\r\n opacity: 0;\r\n transform: translateX(-4px);\r\n transition: opacity .3s ease, transform .3s ease;\r\n}\r\n.card:hover .card-arrow {\r\n opacity: 1;\r\n transform: translateX(0);\r\n}\r\n\r\n\/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n ANIMATIONS\r\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n@keyframes up {\r\n from { opacity:0; transform:translateY(22px); }\r\n to { opacity:1; transform:translateY(0); }\r\n}\r\n@keyframes fadeIn {\r\n to { opacity:1; }\r\n}\r\n@keyframes pop {\r\n from { opacity:0; transform:translate(-50%,-50%) scale(.8); }\r\n to { opacity:1; transform:translate(-50%,-50%) scale(1); }\r\n}\r\n@keyframes cardIn {\r\n from { opacity:0; transform:translateY(36px) scale(.95); }\r\n to { opacity:1; transform:translateY(0) scale(1); }\r\n}\r\n\r\n\/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n OVERLAY\r\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n.overlay {\r\n position: fixed; inset:0;\r\n background: rgba(16,11,7,.82);\r\n backdrop-filter: blur(16px) saturate(.7);\r\n z-index: 200;\r\n display: flex;\r\n align-items: flex-start;\r\n justify-content: center;\r\n padding: 0;\r\n overflow-y: auto;\r\n opacity: 0;\r\n pointer-events: none;\r\n transition: opacity .35s ease;\r\n}\r\n.overlay.open {\r\n opacity: 1;\r\n pointer-events: all;\r\n}\r\n\r\n.overlay-panel {\r\n width: 100%;\r\n max-width: 1100px;\r\n padding: 56px 56px 80px;\r\n transform: translateY(28px) scale(.98);\r\n transition: transform .45s cubic-bezier(.34,1.3,.64,1);\r\n}\r\n.overlay.open .overlay-panel { transform: translateY(0) scale(1); }\r\n\r\n.ov-head {\r\n display: flex;\r\n align-items: flex-start;\r\n justify-content: space-between;\r\n margin-bottom: 40px;\r\n padding-bottom: 24px;\r\n border-bottom: 1px solid rgba(255,255,255,.1);\r\n}\r\n.ov-info {}\r\n.ov-tag {\r\n font-size: .67rem;\r\n font-weight: 500;\r\n letter-spacing: .22em;\r\n text-transform: uppercase;\r\n color: var(--gold);\r\n margin-bottom: 8px;\r\n}\r\n.ov-title {\r\n font-family: 'Cormorant Garamond', serif;\r\n font-size: clamp(2rem, 4vw, 3.2rem);\r\n font-weight: 300;\r\n color: var(--cream);\r\n line-height: 1.05;\r\n letter-spacing: -.01em;\r\n}\r\n.ov-close {\r\n \/* Reset complet \u2014 Elementor override les boutons *\/\r\n all: unset;\r\n box-sizing: border-box;\r\n width: 40px !important; height: 40px !important;\r\n border: 1px solid rgba(255,255,255,.25) !important;\r\n border-radius: 50% !important;\r\n background: transparent !important;\r\n background-color: transparent !important;\r\n color: var(--cream) !important;\r\n font-size: 1rem !important;\r\n line-height: 1 !important;\r\n cursor: pointer !important;\r\n display: flex !important; align-items:center !important; justify-content:center !important;\r\n flex-shrink: 0;\r\n margin-left: 24px;\r\n margin-top: 6px;\r\n transition: background .2s, border-color .2s, transform .25s;\r\n padding: 0 !important;\r\n text-decoration: none !important;\r\n box-shadow: none !important;\r\n}\r\n.ov-close:hover {\r\n background: var(--gold) !important;\r\n background-color: var(--gold) !important;\r\n border-color: var(--gold) !important;\r\n color: var(--dark) !important;\r\n transform: rotate(90deg) !important;\r\n}\r\n\r\n\/* Couverture r\u00e9elle sur la carte avantapres *\/\r\n.card[data-cat=\"avantapres\"] .card-photo {\r\n background: #1a1410;\r\n}\r\n.card[data-cat=\"avantapres\"] .card-photo img {\r\n position: absolute; inset: 0;\r\n width: 100%; height: 100%;\r\n object-fit: cover;\r\n display: block;\r\n}\r\n\r\n\/* \u2500\u2500 Grille images \u2500\u2500 *\/\r\n.ov-grid {\r\n display: grid;\r\n grid-template-columns: repeat(2, 1fr);\r\n gap: 16px;\r\n}\r\n\r\n\/* Image seule *\/\r\n.ov-img {\r\n aspect-ratio: 3\/2;\r\n border-radius: 4px;\r\n overflow: hidden;\r\n position: relative;\r\n pointer-events: none;\r\n background: #1a1410;\r\n}\r\n.ov-img img { position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:2;display:block; }\r\n.ov-img::after {\r\n content: attr(data-label);\r\n position:absolute;bottom:0;left:0;right:0;\r\n padding:26px 12px 10px;\r\n background: linear-gradient(to top, rgba(16,11,7,.88) 0%, transparent 100%);\r\n color:rgba(250,245,238,.82);\r\n font-size:.72rem;\r\n font-weight:300;\r\n letter-spacing:.04em;\r\n z-index:3;\r\n}\r\n\r\n\/* \u2500\u2500 Slider avant \/ apr\u00e8s \u2500\u2500 *\/\r\n.ba-wrap {\r\n aspect-ratio: 3\/2;\r\n border-radius: 4px;\r\n overflow: hidden;\r\n position: relative;\r\n cursor: col-resize;\r\n user-select: none;\r\n background: #1a1410;\r\n}\r\n\r\n\/* Image AVANT = fond complet (gauche) *\/\r\n.ba-before {\r\n position: absolute; inset: 0;\r\n width: 100%; height: 100%;\r\n object-fit: cover;\r\n display: block;\r\n z-index: 1;\r\n pointer-events: none;\r\n}\r\n\r\n\/* Image APR\u00c8S = r\u00e9v\u00e9l\u00e9e depuis la droite *\/\r\n.ba-after {\r\n position: absolute; inset: 0;\r\n width: 100%; height: 100%;\r\n object-fit: cover;\r\n display: block;\r\n z-index: 2;\r\n pointer-events: none;\r\n clip-path: inset(0 0 0 50%);\r\n transition: clip-path .02s linear;\r\n}\r\n\r\n\/* Ligne s\u00e9paratrice *\/\r\n.ba-line {\r\n position: absolute;\r\n top: 0; bottom: 0;\r\n left: 50%;\r\n width: 2px;\r\n background: rgba(250,245,238,.9);\r\n z-index: 4;\r\n pointer-events: none;\r\n transform: translateX(-50%);\r\n transition: left .02s linear;\r\n}\r\n.ba-line::before {\r\n content: '';\r\n position: absolute;\r\n top: 50%; left: 50%;\r\n transform: translate(-50%,-50%);\r\n width: 28px; height: 28px;\r\n border-radius: 50%;\r\n background: white;\r\n border: 2px solid rgba(30,22,16,.15);\r\n box-shadow: 0 2px 10px rgba(0,0,0,.3);\r\n}\r\n\/* Fl\u00e8ches dans le cercle *\/\r\n.ba-line::after {\r\n content: '\u25c0 \u25b6';\r\n position: absolute;\r\n top: 50%; left: 50%;\r\n transform: translate(-50%,-50%);\r\n font-size: .38rem;\r\n color: var(--mid);\r\n letter-spacing: 1px;\r\n z-index: 5;\r\n pointer-events: none;\r\n}\r\n\r\n\/* Labels Avant \/ Apr\u00e8s *\/\r\n.ba-tag {\r\n position: absolute;\r\n bottom: 10px;\r\n z-index: 5;\r\n font-size: .62rem;\r\n font-weight: 500;\r\n letter-spacing: .16em;\r\n text-transform: uppercase;\r\n color: white;\r\n background: rgba(16,11,7,.55);\r\n padding: 3px 9px;\r\n border-radius: 20px;\r\n pointer-events: none;\r\n backdrop-filter: blur(4px);\r\n}\r\n.ba-tag-av { left: 10px; }\r\n.ba-tag-ap { right: 10px; }\r\n\r\n\/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n OVERLAY \u2014 z-index au-dessus de tout WP\/Elementor\r\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n.overlay {\r\n position: fixed !important;\r\n inset: 0 !important;\r\n top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;\r\n background: rgba(16,11,7,.85) !important;\r\n backdrop-filter: blur(16px) saturate(.7);\r\n -webkit-backdrop-filter: blur(16px) saturate(.7);\r\n z-index: 999999 !important; \/* barre admin WP = 99999 *\/\r\n display: flex !important;\r\n align-items: flex-start;\r\n justify-content: center;\r\n overflow-y: auto;\r\n opacity: 0;\r\n pointer-events: none;\r\n transition: opacity .35s ease;\r\n transform: none !important; \/* \u00e9viter h\u00e9ritage transform Elementor *\/\r\n will-change: opacity;\r\n}\r\n.overlay.open {\r\n opacity: 1 !important;\r\n pointer-events: all !important;\r\n}\r\n@media (max-width: 900px) {\r\n .scatter-zone {\r\n min-height: auto;\r\n padding: 40px 20px 60px;\r\n display: grid;\r\n grid-template-columns: repeat(2, 1fr);\r\n gap: 30px;\r\n place-items: center;\r\n }\r\n .scatter-zone > svg { display: none; }\r\n .card {\r\n position: static !important;\r\n opacity: 1 !important;\r\n rotate: 0deg !important;\r\n animation: none !important;\r\n }\r\n .card-photo { width: 100%; height: 220px; }\r\n .ov-grid { grid-template-columns: 1fr; }\r\n .overlay-panel { padding: 36px 20px 60px; }\r\n .ov-title { font-size: 1.8rem; }\r\n .ba-wrap { aspect-ratio: 4\/3; }\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<!-- \u2550\u2550\u2550 HERO \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n<section class=\"hero\">\r\n <p class=\"hero-eyebrow\">Artisan \u00b7 Tapis & Textiles<\/p>\r\n <h1 class=\"hero-title\">Nos <em>r\u00e9alisations<\/em><\/h1>\r\n <p class=\"hero-sub\">Cliquez sur une carte pour d\u00e9couvrir les photos de chaque prestation.<\/p>\r\n<\/section>\r\n\r\n<!-- \u2550\u2550\u2550 VAGUE + BADGE \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n<div class=\"wave-wrap\">\r\n <svg viewBox=\"0 0 1440 70\" preserveAspectRatio=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\r\n <path d=\"M0,38 C180,10 360,62 540,38 C720,14 900,60 1080,38 C1260,16 1380,48 1440,38 L1440,70 L0,70 Z\"\r\n fill=\"rgba(30,22,16,.06)\"\/>\r\n <path d=\"M0,40 C200,12 400,64 600,40 C800,16 1000,62 1200,40 C1320,26 1400,50 1440,42\"\r\n stroke=\"rgba(30,22,16,.14)\" stroke-width=\"1.2\" fill=\"none\"\/>\r\n <\/svg>\r\n <div class=\"intro-badge\">\r\n <span class=\"pulse-dot\"><\/span>\r\n Cliquez sur une carte pour explorer\r\n <\/div>\r\n<\/div>\r\n\r\n<!-- \u2550\u2550\u2550 CARTES \u00c9PARPILL\u00c9ES \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n<div class=\"scatter-zone\">\r\n\r\n <!-- Fils de liaison -->\r\n <svg viewBox=\"0 0 1160 580\" preserveAspectRatio=\"none\" aria-hidden=\"true\">\r\n <path d=\"M130,120 Q340,300 520,200 Q700,100 860,240 Q1000,340 1080,160\"\r\n stroke=\"rgba(30,22,16,.08)\" stroke-width=\"1.2\" stroke-dasharray=\"6 5\" fill=\"none\"\/>\r\n <path d=\"M220,440 Q480,320 700,400 Q880,460 1060,360\"\r\n stroke=\"rgba(30,22,16,.06)\" stroke-width=\"1\" stroke-dasharray=\"5 6\" fill=\"none\"\/>\r\n <\/svg>\r\n\r\n <!-- 1 \u00b7 R\u00e9paration -->\r\n <div class=\"card\" data-cat=\"reparation\">\r\n <div class=\"card-photo\"><img decoding=\"async\" src=\"https:\/\/tapisoin.fr\/wp-content\/uploads\/2026\/04\/reparationcouv.jpg\" alt=\"R\u00e9paration\"><\/div>\r\n <div class=\"card-label\">\r\n <span class=\"card-label-title\">R\u00e9paration<\/span>\r\n <span class=\"card-label-sub\">01 \u00b7 R\u00e9alisation<\/span>\r\n <\/div>\r\n <span class=\"card-arrow\">\u2192<\/span>\r\n <\/div>\r\n\r\n <!-- 2 \u00b7 Nettoyage -->\r\n <div class=\"card\" data-cat=\"nettoyage\">\r\n <div class=\"card-photo\"><img decoding=\"async\" src=\"https:\/\/tapisoin.fr\/wp-content\/uploads\/2026\/04\/couvnettoyage.jpg\" alt=\"Nettoyage\"><\/div>\r\n <div class=\"card-label\">\r\n <span class=\"card-label-title\">Nettoyage<\/span>\r\n <span class=\"card-label-sub\">02 \u00b7 R\u00e9alisation<\/span>\r\n <\/div>\r\n <span class=\"card-arrow\">\u2192<\/span>\r\n <\/div>\r\n\r\n <!-- 3 \u00b7 Avant \/ Apr\u00e8s -->\r\n <div class=\"card\" data-cat=\"avantapres\">\r\n <div class=\"card-photo\"><img decoding=\"async\" src=\"https:\/\/tapisoin.fr\/wp-content\/uploads\/2026\/04\/couvavap.jpg\" alt=\"Avant Apr\u00e8s\"><\/div>\r\n <div class=\"card-label\">\r\n <span class=\"card-label-title\">Avant \/ Apr\u00e8s<\/span>\r\n <span class=\"card-label-sub\">03 \u00b7 R\u00e9alisation<\/span>\r\n <\/div>\r\n <span class=\"card-arrow\">\u2192<\/span>\r\n <\/div>\r\n\r\n <!-- 4 \u00b7 D\u00e9poussi\u00e9rage -->\r\n <div class=\"card\" data-cat=\"depoussierage\">\r\n <div class=\"card-photo\"><img decoding=\"async\" src=\"https:\/\/tapisoin.fr\/wp-content\/uploads\/2026\/04\/poussierecouv.jpg\" alt=\"D\u00e9poussi\u00e9rage\"><\/div>\r\n <div class=\"card-label\">\r\n <span class=\"card-label-title\">D\u00e9poussi\u00e9rage<\/span>\r\n <span class=\"card-label-sub\">04 \u00b7 R\u00e9alisation<\/span>\r\n <\/div>\r\n <span class=\"card-arrow\">\u2192<\/span>\r\n <\/div>\r\n\r\n <!-- 5 \u00b7 Ravivement -->\r\n <div class=\"card\" data-cat=\"ravivement\">\r\n <div class=\"card-photo\"><img decoding=\"async\" src=\"https:\/\/tapisoin.fr\/wp-content\/uploads\/2026\/04\/ravivementcouv.jpg\" alt=\"Ravivement\"><\/div>\r\n <div class=\"card-label\">\r\n <span class=\"card-label-title\">Ravivement<\/span>\r\n <span class=\"card-label-sub\">05 \u00b7 R\u00e9alisation<\/span>\r\n <\/div>\r\n <span class=\"card-arrow\">\u2192<\/span>\r\n <\/div>\r\n\r\n<\/div><!-- \/scatter-zone -->\r\n\r\n<!-- \u2550\u2550\u2550 OVERLAY \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n<div class=\"overlay\" id=\"overlay\" role=\"dialog\" aria-modal=\"true\">\r\n <div class=\"overlay-panel\">\r\n <div class=\"ov-head\">\r\n <div class=\"ov-info\">\r\n <p class=\"ov-tag\" id=\"oTag\"><\/p>\r\n <h2 class=\"ov-title\" id=\"oTitle\"><\/h2>\r\n <\/div>\r\n <button class=\"ov-close\" id=\"oClose\" aria-label=\"Fermer\">\u2715<\/button>\r\n <\/div>\r\n <div class=\"ov-grid\" id=\"oGrid\"><\/div>\r\n <\/div>\r\n<\/div>\r\n\r\n<script>\r\n\/* \u2500\u2500 D\u00e9placer l'overlay directement sous <body>\r\n pour \u00e9chapper aux conteneurs Elementor (overflow:hidden, z-index, transform) \u2500\u2500 *\/\r\ndocument.addEventListener('DOMContentLoaded', () => {\r\n const ov = document.getElementById('overlay');\r\n if (ov && ov.parentElement !== document.body) {\r\n document.body.appendChild(ov);\r\n }\r\n});\r\n\r\nconst DATA = {\r\n reparation: { tag:'01 \u00b7 R\u00e9alisation', title:'R\u00e9paration',\r\n items:[\r\n { type:'slider', av:'https:\/\/tapisoin.fr\/wp-content\/uploads\/2026\/04\/repav1.webp', ap:'https:\/\/tapisoin.fr\/wp-content\/uploads\/2026\/04\/repap1.webp', label:'R\u00e9paration n\u00b01' },\r\n { type:'slider', av:'https:\/\/tapisoin.fr\/wp-content\/uploads\/2026\/04\/repav2.webp', ap:'https:\/\/tapisoin.fr\/wp-content\/uploads\/2026\/04\/repap2.webp', label:'R\u00e9paration n\u00b02' },\r\n { type:'slider', av:'https:\/\/tapisoin.fr\/wp-content\/uploads\/2026\/04\/repav3.webp', ap:'https:\/\/tapisoin.fr\/wp-content\/uploads\/2026\/04\/repap3.webp', label:'R\u00e9paration n\u00b03' },\r\n { type:'solo', src:'https:\/\/tapisoin.fr\/wp-content\/uploads\/2026\/04\/repavap1.jpg', label:'Avant \/ Apr\u00e8s' },\r\n { type:'solo', src:'https:\/\/tapisoin.fr\/wp-content\/uploads\/2026\/04\/rep5.webp', label:'R\u00e9paration n\u00b05' },\r\n { type:'solo', src:'https:\/\/tapisoin.fr\/wp-content\/uploads\/2026\/04\/rep6.webp', label:'R\u00e9paration n\u00b06' },\r\n ] },\r\n nettoyage: { tag:'02 \u00b7 R\u00e9alisation', title:'Nettoyage',\r\n items:[ {type:'solo',src:'https:\/\/tapisoin.fr\/wp-content\/uploads\/2026\/04\/nettoyage1.webp',label:'Nettoyage n\u00b01'},\r\n {type:'solo',src:'https:\/\/tapisoin.fr\/wp-content\/uploads\/2026\/04\/nettoyage2.webp',label:'Nettoyage n\u00b02'},\r\n {type:'solo',src:'https:\/\/tapisoin.fr\/wp-content\/uploads\/2026\/04\/nettoyage3.webp',label:'Nettoyage n\u00b03'},\r\n {type:'solo',src:'https:\/\/tapisoin.fr\/wp-content\/uploads\/2026\/04\/nettoyage4.webp',label:'Nettoyage n\u00b04'},\r\n {type:'solo',src:'https:\/\/tapisoin.fr\/wp-content\/uploads\/2026\/04\/nettoyage5.webp',label:'Nettoyage n\u00b05'},\r\n {type:'solo',src:'https:\/\/tapisoin.fr\/wp-content\/uploads\/2026\/04\/nettoyage6.webp',label:'Nettoyage n\u00b06'} ] },\r\n\r\n avantapres: { tag:'03 \u00b7 R\u00e9alisation', title:'Avant & Apr\u00e8s',\r\n items:[\r\n { type:'slider', av:'https:\/\/tapisoin.fr\/wp-content\/uploads\/2026\/04\/tapisav1.webp', ap:'https:\/\/tapisoin.fr\/wp-content\/uploads\/2026\/04\/tapisap1.webp', label:'R\u00e9alisation n\u00b01' },\r\n { type:'slider', av:'https:\/\/tapisoin.fr\/wp-content\/uploads\/2026\/04\/tapisav2.webp', ap:'https:\/\/tapisoin.fr\/wp-content\/uploads\/2026\/04\/tapisap2.webp', label:'R\u00e9alisation n\u00b02' },\r\n { type:'slider', av:'https:\/\/tapisoin.fr\/wp-content\/uploads\/2026\/04\/tapisav3.jpeg', ap:'https:\/\/tapisoin.fr\/wp-content\/uploads\/2026\/04\/tapisap3.jpeg', label:'R\u00e9alisation n\u00b03' },\r\n { type:'slider', av:'https:\/\/tapisoin.fr\/wp-content\/uploads\/2026\/04\/tapisav4.jpeg', ap:'https:\/\/tapisoin.fr\/wp-content\/uploads\/2026\/04\/tapisap4.jpeg', label:'R\u00e9alisation n\u00b04' },\r\n { type:'solo', src:'https:\/\/tapisoin.fr\/wp-content\/uploads\/2026\/04\/tapisavap1.webp', label:'Transformation compl\u00e8te' },\r\n { type:'solo', src:'https:\/\/tapisoin.fr\/wp-content\/uploads\/2026\/04\/tapisavap2.jpg', label:'Avant \/ Apr\u00e8s' },\r\n ]\r\n },\r\n\r\n depoussierage:{ tag:'04 \u00b7 R\u00e9alisation', title:'D\u00e9poussi\u00e9rage',\r\n items:[ {type:'solo',src:'https:\/\/tapisoin.fr\/wp-content\/uploads\/2026\/04\/poussiere1.jpg', label:'D\u00e9poussi\u00e9rage n\u00b01'},\r\n {type:'solo',src:'https:\/\/tapisoin.fr\/wp-content\/uploads\/2026\/04\/poussiere2.webp', label:'D\u00e9poussi\u00e9rage n\u00b02'},\r\n {type:'solo',src:'https:\/\/tapisoin.fr\/wp-content\/uploads\/2026\/04\/poussiere3.webp', label:'D\u00e9poussi\u00e9rage n\u00b03'},\r\n {type:'solo',src:'https:\/\/tapisoin.fr\/wp-content\/uploads\/2026\/04\/poussiere4.webp', label:'D\u00e9poussi\u00e9rage n\u00b04'} ] },\r\n ravivement: { tag:'05 \u00b7 R\u00e9alisation', title:'Ravivement de couleur',\r\n items:[\r\n { type:'slider', av:'https:\/\/tapisoin.fr\/wp-content\/uploads\/2026\/04\/ravav1.jpg', ap:'https:\/\/tapisoin.fr\/wp-content\/uploads\/2026\/04\/ravap1.jpg', label:'Ravivement n\u00b01' },\r\n { type:'slider', av:'https:\/\/tapisoin.fr\/wp-content\/uploads\/2026\/04\/ravav2.jpg', ap:'https:\/\/tapisoin.fr\/wp-content\/uploads\/2026\/04\/ravap2.jpg', label:'Ravivement n\u00b02' },\r\n { type:'slider', av:'https:\/\/tapisoin.fr\/wp-content\/uploads\/2026\/04\/ravav3.jpeg', ap:'https:\/\/tapisoin.fr\/wp-content\/uploads\/2026\/04\/ravap3.jpeg', label:'Ravivement n\u00b03' },\r\n { type:'solo', src:'https:\/\/tapisoin.fr\/wp-content\/uploads\/2026\/04\/rav4.webp', label:'Ravivement n\u00b04' },\r\n { type:'solo', src:'https:\/\/tapisoin.fr\/wp-content\/uploads\/2026\/04\/rav5.webp', label:'Ravivement n\u00b05' },\r\n { type:'solo', src:'https:\/\/tapisoin.fr\/wp-content\/uploads\/2026\/04\/rav6.webp', label:'Ravivement n\u00b06' },\r\n ] }\r\n};\r\n\r\nconst overlay = document.getElementById('overlay');\r\nconst oClose = document.getElementById('oClose');\r\n\r\nfunction buildItem(item) {\r\n if (item.type === 'slider') {\r\n return `<div class=\"ba-wrap\">\r\n <img decoding=\"async\" class=\"ba-before\" src=\"${item.av}\" alt=\"Avant\">\r\n <img decoding=\"async\" class=\"ba-after\" src=\"${item.ap}\" alt=\"Apr\u00e8s\">\r\n <div class=\"ba-line\"><\/div>\r\n <span class=\"ba-tag ba-tag-av\">Avant<\/span>\r\n <span class=\"ba-tag ba-tag-ap\">Apr\u00e8s<\/span>\r\n <\/div>`;\r\n }\r\n return `<div class=\"ov-img\" data-label=\"${item.label}\">\r\n ${item.src ? `<img decoding=\"async\" src=\"${item.src}\" alt=\"${item.label}\">` : ''}\r\n <\/div>`;\r\n}\r\n\r\nfunction initSliders() {\r\n document.querySelectorAll('.ba-wrap').forEach(wrap => {\r\n const after = wrap.querySelector('.ba-after');\r\n const line = wrap.querySelector('.ba-line');\r\n\r\n function update(clientX) {\r\n \/* getBoundingClientRect() est fiable m\u00eame dans un scroll container Elementor\r\n car il renvoie les coords viewport absolues *\/\r\n const r = wrap.getBoundingClientRect();\r\n const p = Math.max(0, Math.min(100, ((clientX - r.left) \/ r.width) * 100));\r\n after.style.clipPath = `inset(0 0 0 ${p}%)`;\r\n line.style.left = p + '%';\r\n }\r\n\r\n wrap.addEventListener('mousemove', e => update(e.clientX));\r\n wrap.addEventListener('mouseleave', () => {\r\n after.style.clipPath = 'inset(0 0 0 50%)';\r\n line.style.left = '50%';\r\n });\r\n wrap.addEventListener('touchmove', e => {\r\n e.preventDefault();\r\n update(e.touches[0].clientX);\r\n }, { passive: false });\r\n });\r\n}\r\n\r\n\/* \u2500\u2500 Scroll lock robuste (Elementor peut utiliser un scroll container custom) \u2500\u2500 *\/\r\nfunction lockScroll() {\r\n document.documentElement.style.overflow = 'hidden';\r\n document.body.style.overflow = 'hidden';\r\n}\r\nfunction unlockScroll() {\r\n document.documentElement.style.overflow = '';\r\n document.body.style.overflow = '';\r\n}\r\n\r\nfunction openOverlay(cat) {\r\n const d = DATA[cat]; if (!d) return;\r\n document.getElementById('oTag').textContent = d.tag;\r\n document.getElementById('oTitle').textContent = d.title;\r\n document.getElementById('oGrid').innerHTML = d.items.map(buildItem).join('');\r\n \/* S'assurer que l'overlay est bien enfant direct de body *\/\r\n if (overlay.parentElement !== document.body) document.body.appendChild(overlay);\r\n initSliders();\r\n overlay.classList.add('open');\r\n lockScroll();\r\n oClose.focus();\r\n}\r\n\r\nfunction closeOverlay() {\r\n overlay.classList.remove('open');\r\n unlockScroll();\r\n}\r\n\r\ndocument.querySelectorAll('.card').forEach(c => {\r\n c.addEventListener('click', () => openOverlay(c.dataset.cat));\r\n c.setAttribute('tabindex','0');\r\n c.setAttribute('role','button');\r\n c.addEventListener('keydown', e => { if(e.key==='Enter'||e.key===' ') openOverlay(c.dataset.cat); });\r\n});\r\n\r\noClose.addEventListener('click', closeOverlay);\r\noverlay.addEventListener('click', e => { if(e.target===overlay) closeOverlay(); });\r\ndocument.addEventListener('keydown', e => { if(e.key==='Escape') closeOverlay(); });\r\n<\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Nos R\u00e9alisations \u2014 Tapis Artisan \u00b7 Tapis & Textiles Nos r\u00e9alisations Cliquez sur une carte pour d\u00e9couvrir les photos de chaque prestation. Cliquez sur une carte pour explorer R\u00e9paration 01 \u00b7 R\u00e9alisation \u2192 Nettoyage 02 \u00b7 R\u00e9alisation \u2192 Avant \/ Apr\u00e8s 03 \u00b7 R\u00e9alisation \u2192 D\u00e9poussi\u00e9rage 04 \u00b7 R\u00e9alisation \u2192 Ravivement 05 \u00b7 R\u00e9alisation \u2192 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-17","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/tapisoin.fr\/index.php?rest_route=\/wp\/v2\/pages\/17","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tapisoin.fr\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/tapisoin.fr\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/tapisoin.fr\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/tapisoin.fr\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=17"}],"version-history":[{"count":16,"href":"https:\/\/tapisoin.fr\/index.php?rest_route=\/wp\/v2\/pages\/17\/revisions"}],"predecessor-version":[{"id":168,"href":"https:\/\/tapisoin.fr\/index.php?rest_route=\/wp\/v2\/pages\/17\/revisions\/168"}],"wp:attachment":[{"href":"https:\/\/tapisoin.fr\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=17"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}