{"id":2485,"date":"2024-06-18T16:56:29","date_gmt":"2024-06-18T14:56:29","guid":{"rendered":"https:\/\/www.papierdeparis.com\/contract\/?page_id=2485"},"modified":"2025-09-18T17:15:35","modified_gmt":"2025-09-18T15:15:35","slug":"projets","status":"publish","type":"page","link":"https:\/\/www.papiersdeparis.com\/contract\/projets\/","title":{"rendered":"Projets"},"content":{"rendered":"\n<script>\n  const projects = [\n      { name: \"Intercontinental Paris le Grand\", description: \"R\u00e9alisation d'un d\u00e9cor panoramique sur le Th\u00e8me des monuments de Paris. 400m2 install\u00e9s sur les paliers d'ascenseurs . Variation de couleur pour chaque \u00e9tage .  Impression sur toile Polyester non-feu \", lieu: \"Place de l'Op\u00e9ra, Paris\", img: [\"https:\/\/www.papiersdeparis.com\/contract\/wp-content\/uploads\/2024\/09\/projet-ic-legrand.jpg\",\"https:\/\/www.papiersdeparis.com\/contract\/wp-content\/uploads\/2024\/06\/intercontinental-1.jpg\"] },\n\n      { name: \"Laduree\", description: \"D\u00e9coration de +20 boutiques dans le monde entier - D\u00e9cors sur mesures et livraison internationale\", lieu: \"Lieu de Laduree\", img: [\"https:\/\/www.papiersdeparis.com\/contract\/wp-content\/uploads\/2024\/06\/laduree-1.jpg\"]},\n      { name: \"Hotel d'Aubusson\", description: \"R\u00e9alisation d'un d\u00e9cor mural pour le Spa de l'H\u00f4tel. Imprim\u00e9 sur toile polyester non feu\", lieu: \"Paris, France\", img: [\"https:\/\/www.papiersdeparis.com\/contract\/wp-content\/uploads\/2024\/06\/hotel-aubusson.jpg\", \"https:\/\/www.papiersdeparis.com\/contract\/wp-content\/uploads\/2024\/09\/projet-aubusson.jpg\",\"https:\/\/www.papiersdeparis.com\/contract\/wp-content\/uploads\/2024\/09\/projet1aubusson1.jpg\"] },\n      { name: \"Odeon hotel\", description: \"Adaptation d'un d\u00e9cor avec colorisation sp\u00e9cifique pour la salle de dejeuner\", lieu: \"Paris, France\", img: [\"https:\/\/www.papiersdeparis.com\/contract\/wp-content\/uploads\/2024\/09\/projet-odeon1.jpg\", \"https:\/\/www.papiersdeparis.com\/contract\/wp-content\/uploads\/2024\/09\/projet-odeon.jpg\"] },\n      { name: \"Hotel Aigle Noir\", description: \"D\u00e9cors sur mesure en toiles polyester et papiers peint pour le lobby et les chambres\", lieu: \"Fontainebleau, France\", img: [\"https:\/\/www.papiersdeparis.com\/contract\/wp-content\/uploads\/2024\/06\/Fontainebleau-2.jpg\", \"https:\/\/www.papiersdeparis.com\/contract\/wp-content\/uploads\/2024\/06\/Fontainebleau-1.jpg\"] },\n      { name: \"Marriott\", description: \"Decor mural du Lobby\", lieu: \"Paris, France\", img: [\"https:\/\/www.papiersdeparis.com\/contract\/wp-content\/uploads\/2024\/06\/PAYSAGE-CHAMETRE-Marriott-opera-lounge.jpg\"] },\n      { name: \"Le Laurent\", description: \"Papier peint chinois sur mesure pour une salle priv\u00e9e du restaurant\", lieu: \"Paris, France\", img: [\"https:\/\/www.papiersdeparis.com\/contract\/wp-content\/uploads\/2024\/06\/Laurent-2.jpg\", \"https:\/\/www.papiersdeparis.com\/contract\/wp-content\/uploads\/2024\/06\/Laurent-1.jpg\"] },\n      { name: \"Trudon\", description: \"Papiers peint sur mesure pour la boutique\", lieu: \"Melbourne, Australia\", img: [\"https:\/\/www.papiersdeparis.com\/contract\/wp-content\/uploads\/2024\/06\/trudon.jpg\"] },\n      { name: \"hotels Vienna\", description: \"Papier peint pour les parties communes de l'Hotel\", lieu: \"Vienna, Austria\", img: [\"https:\/\/www.papiersdeparis.com\/contract\/wp-content\/uploads\/2024\/09\/projet-lenikus1.jpg\", \"https:\/\/www.papiersdeparis.com\/contract\/wp-content\/uploads\/2024\/09\/projet-lenikus-2-1.jpg\"] },\n { name: \"Vinpearl\", description: \"D\u00e9cor de 300m2 sur mesure pour le lobby et le Spa- livraison internationale\", lieu: \"Lieu de Vinpearl\", img: [\"https:\/\/www.papiersdeparis.com\/contract\/wp-content\/uploads\/2024\/06\/vinpearl-0.jpg\", \"https:\/\/www.papiersdeparis.com\/contract\/wp-content\/uploads\/2024\/06\/vinpearl-2.jpg\", \"https:\/\/www.papierdeparis.com\/contract\/wp-content\/uploads\/2024\/06\/vinpearl-1.jpg\"] },\n      { name: \"Company Headquarters\", description: \"D\u00e9cor sur mesure pour une salle de conf\u00e9rence de l'entreprise\", lieu: \"Saint Germain en Laye, France\", img: [\"https:\/\/www.papiersdeparis.com\/contract\/wp-content\/uploads\/2024\/09\/projet-ixblue1.jpg\", \"https:\/\/www.papiersdeparis.com\/contract\/wp-content\/uploads\/2024\/09\/projet-ixblue2.jpg\"] }\n  ];\n<\/script>\n\n\n\n<div class=\"wp-block-getwid-section alignfull alignfull getwid-margin-top-none getwid-margin-bottom-none getwid-section-content-full-width\"><div class=\"wp-block-getwid-section__wrapper getwid-padding-top-none getwid-padding-bottom-none getwid-padding-left-none getwid-padding-right-none getwid-margin-left-none getwid-margin-right-none\"><div class=\"wp-block-getwid-section__inner-wrapper\"><div class=\"wp-block-getwid-section__background-holder\"><div class=\"wp-block-getwid-section__background\"><\/div><div class=\"wp-block-getwid-section__foreground\"><\/div><\/div><div class=\"wp-block-getwid-section__content\"><div class=\"wp-block-getwid-section__inner-content\">\n<style>\n    @media screen and (max-width: 600px) {\n    .containerr{display:none !important;}\n    }\n    @media screen and (min-width: 601px) {\n    \n        .site-header {\n            position: relative !important;\n        }\n    .entry-content{\n    width:100vw;\n    margin:0px;\n    }\n    \n        html {\n            height: 100vh !important;\n        }\n        .site-footer {\n            display: none;\n        }\n    \n        .containerr {\n            display: flex;\n            color: #547b54;\n            height: calc(100vh - 112px);\n            transition: 0.5s;\n            opacity: 0;\n        }\n    \n        body {\n            margin: 0px;\n            height: 100vh !important;\n            overflow-y: hidden;\n        }\n    \n        .dflex {\n            display: flex;\n        }\n    \n        .cont {\n            margin: 0px !important;\n            padding: 8vh 3vw 8vh 3vw;\n            flex-grow: 1;\n    overflow-y:scroll;\n    overflow-x:hidden;\n    width:59vw;\n            align-items: flex-end;\n            transition: 1s;\n        }\n    .cont img{\n    height:100% !important}\n    \n        .menu {\n            width: 27vw;\n            padding: 0 2vw;\n            margin: 0px !important;\n            background-color: #f5f5f5;\n            overflow-y: scroll;\n        }\n    .menu::-webkit-scrollbar {\n      width: 5px; \/* width of the entire scrollbar *\/\n    }\n    .menu::-webkit-scrollbar-thumb {\n      background-color: #547B54; \/* color of the scroll thumb *\/\n      border-radius: 20px; \/* roundness of the scroll thumb *\/\n    }\n    \n        \/* Styling suppl\u00e9mentaire si n\u00e9cessaire *\/\n        .menu ul {\n            list-style: none;\n            padding: 0;\n        }\n    \n        p.lieu{\n            margin-bottom:0px;\n        }\n    \n        .menu li {\n            padding: 13px;\n            font-family: \"Cormorant Garamond\", serif;\n            font-weight: 500;\n            font-style: normal;\n            font-size: 33px;\n            cursor: pointer;\n        }\n    \n        .menu li:hover {\n            font-style: italic;\n        }\n    \n    .active{\n            font-weight: 700 !important;\n            font-style: italic !important;\n    }\n    \n        .menu a {\n            text-decoration: none;\n            color: #333;\n            font-size: 30px;\n        }\n    \n        .text {\n            padding-right: 3vw;\n    width:100%;\n        }\n    h2{\n    color:#547B54 !important;\n    }\n    \n    @media screen and (max-width: 1555px) {\n        .menu {\n            width: 20vw;\n            padding: 0 2vw;\n            margin: 0px !important;\n            background-color: #f5f5f5;\n            overflow-y: scroll;\n        }\n        .cont {\n            margin: 0px !important;\n            padding: 14vh 4vw 14vh 4vw;\n            flex-grow: 1;\n            width:67vw;\n            align-items: flex-end;\n        }\n    \n        .menu li {\n            padding: 14px 0px;\n            font-weight: 500;\n            font-style: normal;\n            font-size: 26px;\n            cursor: pointer;\n        }\n    \n        .text {\n            padding-right: 2vw;\n        }\n        .text p{\n            font-size: 12px;\n        }\n    \n        .text h2{\n            margin-bottom:10px;\n        }\n    }\n    \n    @media screen and (max-width: 1200px) {\n        .containerr {\n            height: calc(100vh - 91px);\n        }\n    }\n    @media screen and (max-width: 1024px) {\n        .cont {\n            flex-direction: column;\n            padding: 2vh 7vw 2vh 7vw;\n    width:50vw;\n        }\n        .cont img{\n    height:auto!important;\n    width:100%;\n    }\n    \n    .text {\n            padding-right: 0vw;\n    width:100%;\n        }\n    .menu{\n    width:36vw;\n    }\n    \n    p.lieu{\n            margin-bottom:25px;\n    }\n  \n    .containerr {\n            height: calc(100vh - 81px);\n        }\n    }\n    \n    \/*----------------------------- CAROUSEL ----------------------------*\/\n    \n    \n    .carousel {\n        height: 100% !important;\n        aspect-ratio: 1\/1;\n        overflow: hidden;\n        text-align: center;\n        position: relative;\n        display:block !important;\n        padding: 0;\n        list-style: none;\n    }\n    \n    .carousel__controls,\n    .carousel__activator {\n        display: none;\n    }\n    \n    .carousel__activator:nth-of-type(1):checked ~ .carousel__track {\n        transform: translateX(0%);\n    }\n    \n    .carousel__activator:nth-of-type(1):checked ~ .carousel__slide:nth-of-type(1) {\n        transition: opacity 0.5s, transform 0.5s;\n        top: 0;\n        left: 0;\n        right: 0;\n        opacity: 1;\n        transform: scale(1);\n    }\n    \n    .carousel__activator:nth-of-type(1):checked ~ .carousel__controls:nth-of-type(1) {\n        display: block;\n        opacity: 1;\n    }\n    \n    .carousel__activator:nth-of-type(1):checked ~ .carousel__indicators .carousel__indicator:nth-of-type(1) {\n        opacity: 1;\n    }\n    \n    .carousel__activator:nth-of-type(2):checked ~ .carousel__track {\n        transform: translateX(-100%);\n    }\n    \n    .carousel__activator:nth-of-type(2):checked ~ .carousel__slide:nth-of-type(2) {\n        transition: opacity 0.5s, transform 0.5s;\n        top: 0;\n        left: 0;\n        right: 0;\n        opacity: 1;\n        transform: scale(1);\n    }\n    \n    .carousel__activator:nth-of-type(2):checked ~ .carousel__controls:nth-of-type(2) {\n        display: block;\n        opacity: 1;\n    }\n    \n    .carousel__activator:nth-of-type(2):checked ~ .carousel__indicators .carousel__indicator:nth-of-type(2) {\n        opacity: 1;\n    }\n    \n    .carousel__activator:nth-of-type(3):checked ~ .carousel__track {\n        transform: translateX(-200%);\n    }\n    \n    .carousel__activator:nth-of-type(3):checked ~ .carousel__slide:nth-of-type(3) {\n        transition: opacity 0.5s, transform 0.5s;\n        top: 0;\n        left: 0;\n        right: 0;\n        opacity: 1;\n        transform: scale(1);\n    }\n    \n    .carousel__activator:nth-of-type(3):checked ~ .carousel__controls:nth-of-type(3) {\n        display: block;\n        opacity: 1;\n    }\n    \n    .carousel__activator:nth-of-type(3):checked ~ .carousel__indicators .carousel__indicator:nth-of-type(3) {\n        opacity: 1;\n    }\n    \n    .carousel-container{\n        display:block;\n        height:100%;\n    }\n    \n    .carousel__activator:nth-of-type(4):checked ~ .carousel__track {\n        transform: translateX(-300%);\n    }\n    \n    .carousel__activator:nth-of-type(4):checked ~ .carousel__slide:nth-of-type(4) {\n        transition: opacity 0.5s, transform 0.5s;\n        top: 0;\n        left: 0;\n        right: 0;\n        opacity: 1;\n        transform: scale(1);\n    }\n    \n    .carousel__activator:nth-of-type(4):checked ~ .carousel__controls:nth-of-type(4) {\n        display: block;\n        opacity: 1;\n    }\n    \n    .carousel__activator:nth-of-type(4):checked ~ .carousel__indicators .carousel__indicator:nth-of-type(4) {\n        opacity: 1;\n    }\n    \n    .carousel__activator:nth-of-type(5):checked ~ .carousel__track {\n        transform: translateX(-400%);\n    }\n    \n    .carousel__activator:nth-of-type(5):checked ~ .carousel__slide:nth-of-type(5) {\n        transition: opacity 0.5s, transform 0.5s;\n        top: 0;\n        left: 0;\n        right: 0;\n        opacity: 1;\n        transform: scale(1);\n    }\n    \n    .carousel__activator:nth-of-type(5):checked ~ .carousel__controls:nth-of-type(5) {\n        display: block;\n        opacity: 1;\n    }\n    \n    .carousel__activator:nth-of-type(5):checked ~ .carousel__indicators .carousel__indicator:nth-of-type(5) {\n        opacity: 1;\n    }\n    \n    .carousel__control {\n        height: 30px;\n        width: 30px;\n        margin-top: -15px;\n        top: 50%;\n        position: absolute;\n        display: block;\n        cursor: pointer;\n        border-width: 5px 5px 0 0;\n        border-style: solid;\n        border-color: #fafafa;\n        opacity: 0.6;\n        outline: 0;\n        z-index: 3;\n    }\n    \n    .carousel__control:hover {\n        opacity: 1;\n    }\n    \n    .carousel__control--backward {\n        left: 10px;\n        transform: rotate(-135deg);\n    }\n    \n    .carousel__control--forward {\n        right: 10px;\n        transform: rotate(45deg);\n    }\n    \n    .carousel__indicators {\n        position: absolute;\n        bottom: 20px;\n        width: 100%;\n        text-align: center;\n    }\n    \n    .carousel__indicator {\n        height: 15px;\n        width: 15px;\n        border-radius: 100%;\n        display: inline-block;\n        z-index: 2;\n        cursor: pointer;\n        opacity: 0.6;\n        margin: 0 2.5px 0 2.5px;\n    }\n    \n    .carousel__indicator:hover {\n        opacity: 0.75;\n    }\n    \n    .carousel__track {\n        position: absolute;\n        top: 0;\n        right: 0;\n        bottom: 0;\n        left: 0;\n        padding: 0;\n        margin: 0;\n        transition: transform 0.5s ease 0s;\n    }\n    \n    .carousel__track .carousel__slide {\n        display: block;\n        top: 0;\n        left: 0;\n        right: 0;\n        opacity: 1;\n    }\n    \n    .carousel__track .carousel__slide:nth-of-type(1) {\n        transform: translateX(0%);\n    }\n    \n    .carousel__track .carousel__slide:nth-of-type(2) {\n        transform: translateX(100%);\n    }\n    \n    .carousel__track .carousel__slide:nth-of-type(3) {\n        transform: translateX(200%);\n    }\n    \n    .carousel__track .carousel__slide:nth-of-type(4) {\n        transform: translateX(300%);\n    }\n    \n    .carousel__track .carousel__slide:nth-of-type(5) {\n        transform: translateX(400%);\n    }\n    \n    .carousel--scale .carousel\n    \n    __slide {\n        transform: scale(0);\n    }\n    \n    .carousel__slide {\n        height: 100%;\n        position: absolute;\n        overflow-y: auto;\n        opacity: 0;\n    }\n    \n    .carousel-container {\n        display: inline-block;\n    }\n    \n    .carousel__slide {\n        overflow: hidden;\n    }\n    \n    .carousel--thumb .carousel__indicator {\n        height: 30px;\n        width: 30px;\n    }\n    \n    .carousel__indicator {\n        background-color: #fafafa;\n    }\n    \n    .carousel__slide:nth-of-type(1),\n    .carousel--thumb .carousel__indicators .carousel__indicator:nth-of-type(1) {\n        background-image: url(\"https:\/\/unsplash.it\/300?random\");\n        background-size: cover;\n        background-position: center;\n    }\n    \n    .carousel__slide:nth-of-type(2),\n    .carousel--thumb .carousel__indicators .carousel__indicator:nth-of-type(2) {\n        background-image: url(\"https:\/\/unsplash.it\/600?random\");\n        background-size: cover;\n        background-position: center;\n    }\n    \n    .carousel__slide:nth-of-type(3),\n    .carousel--thumb .carousel__indicators .carousel__indicator:nth-of-type(3) {\n        background-image: url(\"https:\/\/unsplash.it\/900?random\");\n        background-size: cover;\n        background-position: center;\n    }\n    \n    .carousel__slide:nth-of-type(4),\n    .carousel--thumb .carousel__indicators .carousel__indicator:nth-of-type(4) {\n        background-image: url(\"https:\/\/unsplash.it\/1200?random\");\n        background-size: cover;\n        background-position: center;\n    }\n    \n    @media screen and (max-width: 1024px) {\n        .carousel-container {\n        height:auto;\n        width:100%;\n    }\n    }\n    }\n    <\/style>\n    <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n    <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n    <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&#038;display=swap\" rel=\"stylesheet\">\n    \n    <div class=\"containerr\">\n        <div class=\"menu\">\n            <ul>\n            <\/ul>\n        <\/div>\n        <div class=\"dflex cont\">\n            <div class=\"text\">\n    <div style=\"text-align: center; position: relative;\" class=\"separator-container\">\n        <div style=\"color: #547B54; margin: 0 auto; width: 100%; position: relative; display: inline-block;\" class=\"separator line-separator\">\n            <span style=\"position: absolute; top: 50%; left: 0; width: calc(50% - 20px); height: 1px; background-color: #547B54;\"><\/span>\n            \u2318\n            <span style=\"position: absolute; top: 50%; right: 0; width: calc(50% - 20px); height: 1px; background-color: #547B54;\"><\/span>\n        <\/div>\n    <\/div>\n                <h2 class=\"nom\"><\/h2>\n                <p class=\"desc\">\n                <\/p>\n    <div style=\"text-align: center; position: relative;\" class=\"separator-container\">\n        <div style=\"color: #547B54; margin: 0 auto; width: 100%; position: relative; display: inline-block;\" class=\"separator line-separator\">\n            <span style=\"position: absolute; top: 50%; left: 0; width: calc(50% - 20px); height: 1px; background-color: #547B54;\"><\/span>\n            \u2318\n            <span style=\"position: absolute; top: 50%; right: 0; width: calc(50% - 20px); height: 1px; background-color: #547B54;\"><\/span>\n        <\/div>\n    <\/div>\n                <h2 class=\"titre-lieu\">Lieu<\/h2>\n                <p class=\"lieu\"><\/p>\n            <\/div>\n            <div class=\"carousel-container\">\n                <div class=\"carousel my-carousel carousel--translate\">\n                    <input class=\"carousel__activator\" type=\"radio\" name=\"carousel\" checked=\"checked\" \/>\n                    <input class=\"carousel__activator\" type=\"radio\" name=\"carousel\"\/>\n                    <input class=\"carousel__activator\" type=\"radio\" name=\"carousel\"\/>\n                    <input class=\"carousel__activator\" type=\"radio\" name=\"carousel\" \/>\n                    <input class=\"carousel__activator\" type=\"radio\" name=\"carousel\"\/>\n  \n                    <div class=\"carousel__controls\">\n                        <label class=\"carousel__control carousel__control--backward\" for=2><\/label>\n                        <label class=\"carousel__control carousel__control--forward\" for=1><\/label>\n                    <\/div>\n                    <div class=\"carousel__controls\">\n                        <label class=\"carousel__control carousel__control--backward\" for=0><\/label>\n                        <label class=\"carousel__control carousel__control--forward\" for=2><\/label>\n                    <\/div>\n                    <div class=\"carousel__controls\">\n                    <\/div>\n                    <div class=\"carousel__controls\">\n                    <\/div>\n  \n                    <div class=\"carousel__track\"> \n                    <\/div>\n  \n                    <div class=\"carousel__indicators\">\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n    \n    <script>\n                document.addEventListener(\"DOMContentLoaded\", function() {\n        setTimeout(() => {\n            document.querySelector('.containerr').style.opacity=1;\n                }, 500);\n        const firstProject = document.querySelector('.menu li');\n        firstProject.click();\n    });\n        const ulElement = document.querySelector('.containerr ul');\n    \n        projects.forEach(project => {\n            const liElement = document.createElement('li');\n    \n            \/\/ Cr\u00e9er le s\u00e9parateur HTML\n            const separatorHTML = `\n            <div style=\"text-align: center; position: relative;\" class=\"separator-container\">\n                <div style=\"color: #547B54; margin: 0 auto 1em; width: 100%; position: relative; display: inline-block;\" class=\"separator line-separator\">\n                    <span style=\"position: absolute; top: 50%; left: 0; width: calc(100%); height: 1px; background-color: #547B54;\"><\/span>\n                <\/div>\n            <\/div>\n        `;\n            liElement.innerHTML = separatorHTML + project.name;\n    \n            ulElement.appendChild(liElement);\n        });\n        ulElement.querySelector('li').classList.add('active');\n    \n        let nomProjets = document.querySelectorAll('.menu li');\n        nomProjets.forEach(nomProjet => {\n            nomProjet.addEventListener('click', function() {\n                document.querySelector('.cont').style.opacity = 0;\n                setTimeout(() => {\n                document.querySelector('.cont').style.opacity = 1;\n                }, 1000);\n                setTimeout(() => {\n                document.querySelector('.carousel__activator:nth-of-type(1)').checked = true;\n                nomProjets.forEach(item => item.classList.remove('active'));\n                document.querySelector('.carousel__indicators').innerHTML = \"\";\n                document.querySelector('.carousel__track').innerHTML = \"\";\n                document.querySelectorAll('.carousel__activator').forEach(activator => {\n                activator.removeAttribute('id');\n                });\n                \/\/ Ajouter la classe active \u00e0 l'\u00e9l\u00e9ment cliqu\u00e9\n                nomProjet.classList.add('active');\n    \n                let name = document.querySelector('.nom');\n                let desc = document.querySelector('.desc');\n                let lieu = document.querySelector('.lieu');\n                    \n                projects.forEach(project => {\n                    if (project.name === nomProjet.innerText) {\n                        name.innerText = project.name;\n                        desc.innerText = project.description;\n                        lieu.innerText = project.lieu;\n                \nif (project.img.length > 1) {\n    project.img.forEach((image, index) => {\n         document.querySelectorAll('.carousel__controls').forEach(control => {\n            control.style.opacity = 1;\n        });\n        const CarouselSlide = document.createElement('li');\n        CarouselSlide.classList.add('carousel__slide');\n        document.querySelector('.carousel__track').appendChild(CarouselSlide);\n        \/\/ Cr\u00e9er un ID unique remplace l'url\n        const firstSlide = document.querySelector(`.carousel__slide:nth-of-type(${index + 1})`);\n        firstSlide.style.backgroundImage = `url(\"${image}\")`;\n\n        \/\/ Cr\u00e9er et ajouter l'\u00e9l\u00e9ment dans .carousel__indicators, petit point\n        const indicatorLabel = document.createElement('label');\n        indicatorLabel.className = 'carousel__indicator';\n        indicatorLabel.setAttribute('for', index);\n        console.log(index);\n        document.querySelector('.carousel__indicators').appendChild(indicatorLabel);\n\n        \/\/ G\u00e9rer les fl\u00e8ches\n        const carouselControls = document.querySelectorAll('.carousel__controls');\n        console.log(carouselControls);\n        const carouselControl = carouselControls[Math.floor(index)]; \/\/ Choisir la div carousel__controls en fonction de l'ordre\n\n        \/\/ Cr\u00e9er les labels pour les fl\u00e8ches\n        const backwardLabel = document.createElement('label');\n        backwardLabel.className = 'carousel__control carousel__control--backward';\n        backwardLabel.setAttribute('for', index - 1);\n\n        const forwardLabel = document.createElement('label');\n        forwardLabel.className = 'carousel__control carousel__control--forward';\n        forwardLabel.setAttribute('for', index + 1);\n\n        \/\/ Ajouter les labels \u00e0 la div carousel__controls\n        carouselControl.innerHTML = \"\";\n        carouselControl.appendChild(backwardLabel);\n        carouselControl.appendChild(forwardLabel);\n\n        const CarouselActivators = document.querySelectorAll('.carousel__activator');\n        let CarouselActivator = CarouselActivators[Math.floor(index)];\n        CarouselActivator.setAttribute('id', index);\n    });\n} else {\n    const CarouselSlide = document.createElement('li');\n    document.querySelectorAll('.carousel__controls').forEach(control => {\n        control.style.opacity = 0;\n    });\n    CarouselSlide.classList.add('carousel__slide');\n    document.querySelector('.carousel__track').appendChild(CarouselSlide);\n    \/\/ Cr\u00e9er un ID unique remplace l'url\n    const firstSlide = document.querySelector(`.carousel__slide:nth-of-type(1)`);\n    firstSlide.style.backgroundImage = `url(\"${project.img[0]}\")`;\n}\n\n                    }\n  \n                });\n            }, 999);\n            });\n        });\n    <\/script>\n\n\n\n<style>\n  @media screen and (max-width: 600px) {\n      body{\n          margin:0px;\n      }\n      .contain img {\n        width: 100%;\n        height: 200px;\n        object-fit: cover;\n      }\n      section {\n          margin: 0 5vw;\n          transition: 1s;\n      }\n      ul {\n          text-decoration: none;\n          list-style: none;\n          padding: 0px !important;\n          margin:0px !important;\n      }\n      .separator-container {\n          text-align: center;\n          position: relative;\n          font-size: 20px;\n      }\n      .separator {\n          color: #547B54;\n          width: 100%;\n          position: relative;\n          display: inline-block;\n      }\n      .separator .line-separator {\n          position: absolute;\n          top: 50%;\n          margin-top:25px;\n          left: 0;\n          width: calc(100%);\n          height: 1px;\n          background-color: #547B54;\n      }\n      h2 {\n          font-size: 40px;\n          color: #547B54 !important;\nmargin-bottom:10px !important;\n          font-weight: 300;\ntext-align:center;\n          margin-bottom: 0.2em;\n          cursor: pointer;\n      }\n      .popup-project {\n          transition: 1s;\n          opacity: 0;\n          width:100vw;\nbackground-color:white;\n          top:0;\n          left:0;\n          display:none;\n          padding:5vw;\n          background-color: white;\n      }\n      .close-button {\n          background-color: black;\n          color:white;\n          cursor: pointer;\n          margin-bottom:10px;\n          width:32px;\n          height:32px;\n          text-align: center;\n          background-color: #547B54;\n          display: flex;\n          align-items: center;\n          justify-content: center;\n          \n      }\n      .title-popup{\n          text-align: left;\n      }\n      .dflex{\n          display:flex;\n          justify-content: space-between;\n          align-items: center;\n      }\n      .popup-project p{\n          color:#547B54;\n          margin-top:1em;\n      }\n\n\n      \/*----------------------- CAROUSSEL ---------------------*\/\n\n.slider {\n  box-sizing: border-box;\n  background: white;\n  width: 100%;\n  aspect-ratio: 794\/750;\n  overflow: hidden;\n  position: relative;\n}\n\n.slider .slide img {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n\n.slider .progress-bar {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  width: 100%;\n  height: 5px;\n  background-color: rgba(0, 0, 0, 0.3);\n}\n\n.slider .progress {\n  height: 100%;\n  background-color: #547B54;\n  width: 0;\n  transition: width 0.5s ease;\n}\n\n.slider .slides-container {\n  display: flex;\n  width: 100%;\n  height: calc(100% - 5px); \/* R\u00e9serve de la place pour la barre de progression *\/\n  cursor: -webkit-grab;\n  cursor: grab;\n  transition: transform 0.5s;\n}\n\n.slider:active .slides-container {\n  cursor: -webkit-grabbing;\n  cursor: grabbing;\n}\n\n.slider .slides-container.moving {\n  transition: none;\n}\n\n.slider .slides-container.moving .slide {\n  transition: none;\n}\n\n.slider .slides-container.moving .parallax {\n  transition: none;\n}\n\n.slider .slide {\n  position: relative;\n  display: block;\n  width: 100%;\n  height: 100%;\n  background: #1abc9c;\n  opacity: 0.8;\n  transform: scale(0.9);\n  transform-origin: center;\n  transition: transform 0.5s, opacity 0.5s;\n}\n\n.slider .slide.current {\n  opacity: 1;\n  transform: scale(1);\n}\n\n.slider .slide .parallax {\n  position: absolute;\n  top: 0;\n  left: 0;\n  height: 100%;\n  width: 100%;\n  opacity: 0;\n  pointer-events: none;\n  transition: transform 0.5s, opacity 0.5s;\n}\n\n.slider .slide.current .parallax {\n  opacity: 1;\n  transform: translate3d(0, 0, 0);\n}\n\n.slider .slide .parallax p {\n  position: absolute;\n  top: 50%;\n  left: 0;\n  right: 0;\n  transform: translateY(-50%);\n  text-align: center;\n  color: white;\n  font-family: Circular, sans-serif;\n  font-size: 3em;\n}\n\n.slider .slide:nth-child(6n+2) {\n  background: #e74c3c;\n}\n\n.slider .slide:nth-child(6n+3) {\n  background: #3498db;\n}\n\n.slider .slide:nth-child(6n+4) {\n  background: #9b59b6;\n}\n\n.slider .slide:nth-child(6n+5) {\n  background: #34495e;\n}\n\n.slider .slide:nth-child(6n+6) {\n  background: #f1c40f;\n}\n\n.static{\n  width:100% !important;\n}\n\n.popup-img img{\n  aspect-ratio: 794\/750;\n}\n.container-mobile{\n  margin-top:81px !important; \n}\n  }\n  @media screen and (min-width: 601px) {\n  .section-project-mobile{display:none;}\n  .close-button{display:none;}\n.popup-project{display:none !important;}\n.popup-project .line-separator span{\n  display:none;\n}\n  }\n  <\/style>\n  <div class=\"container-mobile\">\n  <section class=\"section-project-mobile\">\n      <ul class=\"contain\">\n      <\/ul>\n  <\/section>\n  \n  <div class=\"popup-project\">\n      <div class=\"separator-container\">\n          <div class=\"separator line-separator\">\n              <span style=\"position: absolute; top: 50%; left: 0; width: calc(50% - 15px); height: 1.7px; background-color: #547B54;\"><\/span>\n              \u2318\n              <span style=\"position: absolute; top: 50%; right: 0; width: calc(50% - 15px); height: 1.7px; background-color: #547B54;\"><\/span>\n          <\/div>\n      <\/div>\n      <div class=\"dflex\">\n      <h2 class=\"name title-popup\"><\/h2><span class=\"close-button\" onclick=\"closePopup()\">\u2a09<\/span><\/div>\n      <div class=\"popup-img\">\n          <div class=\"progress-bar\">\n            <div class=\"progress\"><\/div>\n          <\/div>\n        <\/div>\n      <p class=\"desc\"><\/p>\n      <div class=\"separator-container\">\n          <div class=\"separator line-separator\">\n              <span style=\"position: absolute; top: 50%; left: 0; width: calc(50% - 15px); height: 1.7px; background-color: #547B54;\"><\/span>\n              \u2318\n              <span style=\"position: absolute; top: 50%; right: 0; width: calc(50% - 15px); height: 1.7px; background-color: #547B54;\"><\/span>\n          <\/div>\n      <\/div>\n      <h2 class=\"title-popup\">Lieu<\/h2>\n      <p class=\"lieu\"><\/p>\n  <\/div>\n<\/div>\n  \n  <script>\n    let sliders = [];\n  \n    const ul = document.querySelector('.contain');\n    const popUp = document.querySelector('.popup-project');\n    const popUpImg = document.querySelector('.popup-project .popup-img');\n    const popUpName = document.querySelector('.popup-project .name');\n    const popUpDesc = document.querySelector('.popup-project .desc');\n    const popUpLieu = document.querySelector('.popup-project .lieu');\n  \n    projects.forEach(project => {\n        const li = document.createElement('li');\n        const h2 = document.createElement('h2');\n        const img = document.createElement('img');\n        const separatorContainer = document.createElement('div');\n  \n        h2.textContent = project.name;\n        img.src = project.img[0];\n        img.alt =  project.name;\n  \n        separatorContainer.innerHTML = `\n            <div class=\"separator-container\">\n                <div class=\"separator line-separator\" style=\"margin: 25px 0px 0px 0px;\">\n                    <span style=\"position: absolute; top: 50%; left: 0; width: calc(50% - 15px); height: 1.7px; background-color: #547B54;\"><\/span>\n                    \u2318\n                    <span style=\"position: absolute; top: 50%; right: 0; width: calc(50% - 15px); height: 1.7px; background-color: #547B54;\"><\/span>\n                <\/div>\n            <\/div>\n        `;\n        ul.appendChild(separatorContainer);\n        li.appendChild(h2);\n        li.appendChild(img);\n        ul.appendChild(li);\n    });\n    const lis = document.querySelectorAll('.contain li');\n    lis.forEach((li, index) => {\n        li.addEventListener('click', function () {\n            const project = projects[index];\n            let section = document.querySelector('.container-mobile section')\n            popUpName.textContent = project.name;\n            popUpDesc.textContent = project.description;\n            popUpLieu.textContent = project.lieu;\n  \n            let name = document.querySelector('.nom');\n            let desc = document.querySelector('.desc');\n            let lieu = document.querySelector('.lieu');\n                    name.innerText = project.name;\n                    desc.innerText = project.description;\n                    lieu.innerText = project.lieu;\n\n\n            if(project.img.length > 1){\n\n              popUpImg.classList.add('slider')\n              const ulPopup = document.createElement(\"ul\");\n              ulPopup.classList.add('slides-container')\n              popUpImg.appendChild(ulPopup);\n              project.img.forEach(image => {\n                const liPopup = document.createElement(\"li\");\n                const imag = document.createElement(\"img\");\n                imag.src = image;\n                const div = document.createElement(\"div\");\n                ulPopup.classList.remove(\"static\");\n                div.className = \"parallax\";\n                liPopup.className = \"slide\";\n                popUpImg.appendChild(ulPopup);\n                liPopup.appendChild(imag);\n                liPopup.appendChild(div);\n                ulPopup.appendChild(liPopup);\n                sliderMobile()\n          });\n            }\n            else{\n              popUpImg.classList.remove('slider')\n              const ulPopup = document.createElement(\"ul\");\n              ulPopup.classList.add(\"static\");\n              const liPopup = document.createElement(\"li\");\n              const imag = document.createElement(\"img\");\n              imag.src = project.img;\n              liPopup.appendChild(imag);\n              ulPopup.appendChild(liPopup);\n              popUpImg.appendChild(ulPopup);\n            }\n            section.style.opacity = 0;\n            popUp.style.opacity = 0;\n            popUp.style.display = 'block';\n            setTimeout(() => {\n                section.style.display = \"none\";\n                document.body.scrollTop = 0; \/\/ Pour les navigateurs Chrome, Firefox, IE et Opera\n                document.documentElement.scrollTop = 0; \/\/ Pour Safari\n                popUp.style.opacity = 1;\n            }, 1000);\n        });\n    });\n  \n    function closePopup() {\n        let section = document.querySelector('.container-mobile section')\n        popUp.style.opacity = 0;\n        setTimeout(() => {section.style.display = 'block';}, 900);\n        setTimeout(() => {\n            popUp.style.display = \"none\";\n            popUpImg.innerHTML = '<div class=\"progress-bar\"><div class=\"progress\"><\/div><\/div>';\n            sliders.forEach((slider) => {\n              slider.reset();\n            });\n            section.style.opacity = 1;\n        }, 1000);\n    }\n  \n  function sliderMobile() {\n  class Slider {\n    constructor(el) {\n      console.log('test')\n      this.el = el;\n      this.container = this.el.querySelector('.slides-container');\n      \n      this.slides = this.container.querySelectorAll('.slide');\n      this.parallaxes = this.container.querySelectorAll('.parallax');\n      this.progress = this.el.querySelector('.progress');\n\n      this.current = 0;\n      this.slide = 1;\n      this.currentPos;\n      this.mouseOffset;\n      this.moving = false;\n      this.progress.style.width = ((this.slide \/ this.slides.length) * 100) + '%';\n      console.log(this.slides.length)\n      this.container.style.width = this.slides.length * 100 + '%';\n      this.slides[0].classList.add('current');\n      let startPos, lastTouchX;\n\n      const dragStart = (e) => {\n        if(this.slides.length>1){\n        e.stopPropagation();\n        if (e.touches) lastTouchX = e.touches[0].clientX;\n        startPos = e.clientX || lastTouchX;\n        this.mouseOffset = 0;\n        this.currentPos = this.container.getBoundingClientRect().left;\n        this.moving = true;\n        requestAnimationFrame(this.move.bind(this));\n        }\n      };\n\n      const dragEnd = (e) => {\n        if(this.slides.length>1){\n        if (this.moving) {\n          const moveX = e.clientX || lastTouchX;\n          if (moveX < startPos - 100) this.next();\n          else if (moveX > startPos + 100) this.prev();\n          else this.goTo(this.current);\n          this.moving = false;\n        }\n      }\n      };\n\n      const dragMove = (e) => {\n        if(this.slides.length>1){\n        if (e.touches) lastTouchX = e.touches[0].clientX;\n        const moveX = e.clientX || lastTouchX;\n        this.mouseOffset = moveX - startPos;\n        }\n      };\n\n      this.container.addEventListener('mousedown', dragStart);\n      this.container.addEventListener('touchstart', dragStart);\n\n      window.addEventListener('mouseup', dragEnd);\n      this.container.addEventListener('touchend', dragEnd);\n\n      window.addEventListener('mousemove', dragMove);\n      this.container.addEventListener('touchmove', dragMove);\n\n      window.addEventListener('keydown', (e) => {\n        e = e || window.event;\n        if (e.keyCode == '39') { \/\/ right arrow\n          this.next();\n        } else if (e.keyCode == '37') { \/\/ left arrow\n          this.prev();\n        }\n      });\n    }\n\n    move() {\n      if(this.slides.length>1){\n      if (this.moving) {\n        this.container.style.transform = 'translate3d(' + (this.currentPos + this.mouseOffset) + 'px, 0, 0)';\n        this.container.classList.add('moving');\n        const slideWidth = this.slides[0].offsetWidth;\n        this.slides.forEach(($_slide, i) => {\n          const coef = 1 - Math.abs($_slide.getBoundingClientRect().left \/ slideWidth);\n          $_slide.style.opacity = .5 + (coef * .5);\n          $_slide.style.transform = 'scale(' + (.9 + coef * .1) + ')';\n        });\n        this.parallaxes.forEach(($_item, i) => {\n          const coef = this.slides[i].getBoundingClientRect().left \/ slideWidth;\n          $_item.style.opacity = 1 - Math.abs(coef * 1.8);\n          $_item.style.transform = 'translate3d(' + (-coef * 85) + '%, 0, 0)';\n        });\n        requestAnimationFrame(this.move.bind(this));\n      }\n    }\n    }\n\n    goTo(i) {\n      if(this.slides.length>1){\n      if (i >= 0 && i < this.slides.length) this.current = i;\n      this.container.classList.remove('moving');\n      this.container.style.transform = 'translate3d(' + this.current * -100 \/ this.slides.length + '%, 0, 0)';\n\n      this.slides.forEach(($_slide, i) => {\n        $_slide.classList.remove('current');\n        $_slide.removeAttribute('style');\n      });\n      this.slides[this.current].classList.add('current');\n      this.slides[this.current].removeAttribute('style');\n\n      this.parallaxes.forEach(($_item, i) => {\n        $_item.removeAttribute('style');\n        $_item.style.transform = 'translate3d(' + (i <= this.current ? 85 : -85) + '%, 0, 0)';\n      });\n      this.slides[this.current].querySelector('.parallax').removeAttribute('style');\n    }\n  }\n\n    next() {\n      if(this.slides.length>1){\n      this.goTo(this.current + 1);\n      if (this.slide < this.slides.length) {\n        this.slide = this.slide + 1;\n        this.progress.style.width = ((this.slide \/ this.slides.length) * 100) + '%';\n      }\n    }\n    }\n\n    prev() {\n      if(this.slides.length>1){\n      this.goTo(this.current - 1);\n      if (this.slide > 1) {\n        this.slide = this.slide - 1;\n        this.progress.style.width = ((this.slide \/ this.slides.length) * 100) + '%';\n      }\n    }\n    }\n\n    reset() {\n      this.container.style.transform = '';\n      this.container.classList.remove('moving');\n      this.slides.forEach(($_slide) => {\n        $_slide.classList.remove('current');\n        $_slide.removeAttribute('style');\n      });\n      this.parallaxes.forEach(($_item) => {\n        $_item.removeAttribute('style');\n      });\n      this.progress.style.width = '0%';\n      this.current = 0;\n      this.slide = 1;\n    }\n  }\n\n  var $sliders = document.querySelectorAll('.slider');\n  $sliders.forEach(($slider) => {\n    if ($slider.querySelector('.slides-container')) {\n      sliders.push(new Slider($slider));\n    }\n  });\n}\n<\/script>\n<\/div><\/div><\/div><\/div><\/div>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-2485","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.papiersdeparis.com\/contract\/wp-json\/wp\/v2\/pages\/2485","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.papiersdeparis.com\/contract\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.papiersdeparis.com\/contract\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.papiersdeparis.com\/contract\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.papiersdeparis.com\/contract\/wp-json\/wp\/v2\/comments?post=2485"}],"version-history":[{"count":16,"href":"https:\/\/www.papiersdeparis.com\/contract\/wp-json\/wp\/v2\/pages\/2485\/revisions"}],"predecessor-version":[{"id":2977,"href":"https:\/\/www.papiersdeparis.com\/contract\/wp-json\/wp\/v2\/pages\/2485\/revisions\/2977"}],"wp:attachment":[{"href":"https:\/\/www.papiersdeparis.com\/contract\/wp-json\/wp\/v2\/media?parent=2485"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}