{"id":35,"date":"2026-10-06T18:19:55","date_gmt":"2026-10-06T18:19:55","guid":{"rendered":"https:\/\/picos-amenagement.ma\/?page_id=35"},"modified":"2026-10-06T19:31:17","modified_gmt":"2026-10-06T19:31:17","slug":"test-page","status":"publish","type":"page","link":"https:\/\/picos-amenagement.ma\/","title":{"rendered":"Accueil"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"35\" class=\"elementor elementor-35\">\n\t\t\t\t<section class=\"elementor-element elementor-element-417591c e-con e-atomic-element e-flexbox-base e-default-section e-491e0ba \" data-id=\"417591c\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"417591c\">\n    \t\t<div class=\"elementor-element elementor-element-e8c000b elementor-widget elementor-widget-html\" data-id=\"e8c000b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- ========================================================================= -->\n<!-- PICOS AM\u00c9NAGEMENT \u2014 HOMEPAGE ELEMENTOR (PROJETS R\u00c9ELS & SANS ROSE)        -->\n<!-- ========================================================================= -->\n\n<!-- Google Fonts: Cormorant Garamond & Manrope -->\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;1,400&family=Manrope:wght@300;400;500;600;700&display=swap\" rel=\"stylesheet\">\n\n<!-- Tailwind CSS via CDN -->\n<script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n<script>\n  tailwind.config = {\n    theme: {\n      extend: {\n        colors: {\n          picos: {\n            taupe: '#AC9C8D',\n            'taupe-light': '#C4B7AA',\n            'taupe-dark': '#8E7E6F',\n            dark: '#322D29',\n            'dark-surface': '#272320',\n            'dark-deep': '#1D1917',\n            ivory: '#F3EAE0',\n            'ivory-light': '#F9F5F0',\n            'ivory-dark': '#E6D9CB',\n          }\n        },\n        fontFamily: {\n          serif: ['\"Cormorant Garamond\"', 'Georgia', 'serif'],\n          sans: ['\"Manrope\"', 'sans-serif'],\n        },\n        letterSpacing: {\n          widest: '0.25em',\n          ultra: '0.35em',\n        }\n      }\n    }\n  }\n<\/script>\n\n<style>\n  :root {\n    --picos-taupe: #AC9C8D;\n    --picos-dark: #322D29;\n    --picos-ivory: #F3EAE0;\n    --picos-white: #FFFFFF;\n  }\n\n  \/* ========================================================================= *\/\n  \/* BOUCLIER ANTI-ROSE ELEMENTOR STRICT (HOVER, FOCUS, OUTLINE, BORDER)       *\/\n  \/* ========================================================================= *\/\n  .picos-wrapper,\n  .picos-wrapper *,\n  .picos-wrapper *:hover,\n  .picos-wrapper *:focus,\n  .picos-wrapper *:active {\n    -webkit-tap-highlight-color: transparent !important;\n    outline: none !important;\n    outline-color: transparent !important;\n    box-shadow: none !important;\n  }\n\n  .picos-wrapper button,\n  .picos-wrapper a,\n  .picos-wrapper input,\n  .picos-wrapper select,\n  .picos-wrapper textarea {\n    border-radius: 0px !important;\n    text-decoration: none !important;\n  }\n\n  \/* Force les couleurs PICOS au survol sur tous les boutons & liens *\/\n  .picos-wrapper a:hover,\n  .picos-wrapper a:focus,\n  .picos-wrapper button:hover,\n  .picos-wrapper button:focus {\n    color: inherit !important;\n    border-color: #AC9C8D !important;\n  }\n\n  .picos-wrapper .btn-taupe-hover:hover {\n    background-color: #AC9C8D !important;\n    color: #322D29 !important;\n    border-color: #AC9C8D !important;\n  }\n\n  .picos-wrapper .btn-dark-hover:hover {\n    background-color: #322D29 !important;\n    color: #FFFFFF !important;\n    border-color: #322D29 !important;\n  }\n\n  \/* Style global conteneur *\/\n  .picos-wrapper {\n    background-color: var(--picos-dark);\n    color: var(--picos-dark);\n    font-family: 'Manrope', sans-serif;\n    overflow-x: hidden;\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n  }\n\n  \/* Curseur architectural personnalis\u00e9 *\/\n  .custom-cursor-dot,\n  .custom-cursor-ring {\n    pointer-events: none;\n    position: fixed;\n    top: 0;\n    left: 0;\n    border-radius: 50%;\n    z-index: 9999;\n    transition: transform 0.15s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.3s ease;\n    will-change: transform;\n  }\n  .custom-cursor-dot {\n    width: 8px;\n    height: 8px;\n    background-color: #AC9C8D;\n    transform: translate(-50%, -50%);\n  }\n  .custom-cursor-ring {\n    width: 44px;\n    height: 44px;\n    border: 1px solid rgba(172, 156, 141, 0.6) !important;\n    transform: translate(-50%, -50%);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font-size: 8px;\n    text-transform: uppercase;\n    letter-spacing: 0.15em;\n    color: #F3EAE0;\n    background: rgba(50, 45, 41, 0.15);\n    backdrop-filter: blur(2px);\n  }\n  .custom-cursor-ring.active-hover {\n    width: 80px;\n    height: 80px;\n    background: rgba(172, 156, 141, 0.92);\n    border-color: #AC9C8D !important;\n    color: #1D1917;\n    font-weight: 600;\n  }\n\n  @media (hover: none) and (pointer: coarse) {\n    .custom-cursor-dot,\n    .custom-cursor-ring {\n      display: none !important;\n    }\n  }\n\n  \/* Barre de progression verticale *\/\n  #scrollProgress {\n    position: fixed;\n    top: 0;\n    right: 0;\n    width: 3px;\n    height: 0%;\n    background: #AC9C8D;\n    z-index: 999;\n    transition: height 0.1s linear;\n  }\n\n  \/* Motifs de grilles architecturales *\/\n  .arch-grid-pattern {\n    background-size: 40px 40px;\n    background-image: \n      linear-gradient(to right, rgba(172, 156, 141, 0.05) 1px, transparent 1px),\n      linear-gradient(to bottom, rgba(172, 156, 141, 0.05) 1px, transparent 1px);\n  }\n  .arch-grid-pattern-dark {\n    background-size: 48px 48px;\n    background-image: \n      linear-gradient(to right, rgba(243, 234, 224, 0.03) 1px, transparent 1px),\n      linear-gradient(to bottom, rgba(243, 234, 224, 0.03) 1px, transparent 1px);\n  }\n\n  \/* Animations au d\u00e9filement *\/\n  .reveal-on-scroll {\n    opacity: 0;\n    transform: translateY(28px);\n    filter: blur(4px);\n    transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1), \n                transform 1s cubic-bezier(0.16, 1, 0.3, 1),\n                filter 1s cubic-bezier(0.16, 1, 0.3, 1);\n    will-change: transform, opacity, filter;\n  }\n  .reveal-on-scroll.is-revealed {\n    opacity: 1;\n    transform: translateY(0);\n    filter: blur(0);\n  }\n\n  .delay-100 { transition-delay: 100ms; }\n  .delay-200 { transition-delay: 200ms; }\n  .delay-300 { transition-delay: 300ms; }\n\n  .serif-display {\n    font-family: 'Cormorant Garamond', Georgia, serif;\n    font-feature-settings: \"liga\" 1, \"dlig\" 1;\n  }\n\n  \/* Diaporamas & Vues sans d\u00e9formation *\/\n  .thumb-slide {\n    position: absolute;\n    inset: 0;\n    opacity: 0;\n    transition: opacity 0.4s ease-in-out;\n  }\n  .thumb-slide.active-slide {\n    opacity: 1;\n    z-index: 2;\n  }\n  .thumb-slide img {\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n    object-position: center center;\n  }\n<\/style>\n\n<div class=\"picos-wrapper relative selection:bg-picos-taupe selection:text-white\">\n\n  <!-- Indicateur de progression du d\u00e9filement -->\n  <div id=\"scrollProgress\" class=\"hidden md:block\"><\/div>\n\n  <!-- Curseur personnalis\u00e9 (Desktop) -->\n  <div id=\"cursorDot\" class=\"custom-cursor-dot hidden md:block\"><\/div>\n  <div id=\"cursorRing\" class=\"custom-cursor-ring hidden md:block\"><\/div>\n\n  <!-- ========================================================================= -->\n  <!-- 00 \u2014 CHARGEMENT INITIAL (Court et architectural)                          -->\n  <!-- ========================================================================= -->\n  <div id=\"pageLoader\" class=\"fixed inset-0 bg-picos-dark z-[10000] flex flex-col items-center justify-center transition-all duration-700 ease-[cubic-bezier(0.77,0,0.175,1)]\">\n    <div class=\"relative flex flex-col items-center\">\n      <div id=\"loaderIcon\" class=\"w-16 h-16 sm:w-20 sm:h-20 mb-8 transform scale-90 opacity-0 transition-all duration-700 ease-out\">\n        <img decoding=\"async\" src=\"https:\/\/i.ibb.co\/Q3jLZvvy\/Picos-Icon.png\" referrerpolicy=\"no-referrer\" alt=\"PICOS Monogram\" class=\"w-full h-full object-contain filter brightness-110 drop-shadow-md\" \/>\n      <\/div>\n      <div class=\"overflow-hidden\">\n        <p id=\"loaderText\" class=\"text-xs uppercase tracking-ultra text-picos-taupe font-medium opacity-0 transform translate-y-4 transition-all duration-500 font-mono\">\n          Architecture &middot; Am&eacute;nagement &middot; Rabat 10100\n        <\/p>\n      <\/div>\n      <div class=\"w-32 h-[1px] bg-white\/10 mt-6 overflow-hidden relative\">\n        <div id=\"loaderBar\" class=\"absolute left-0 top-0 bottom-0 w-0 bg-picos-taupe transition-all duration-1000 ease-out\"><\/div>\n      <\/div>\n    <\/div>\n  <\/div>\n\n\n  <!-- ========================================================================= -->\n  <!-- SECTION 01 \u2014 HERO                                                         -->\n  <!-- ========================================================================= -->\n  <section id=\"hero\" class=\"relative w-full min-h-screen flex items-end justify-start px-6 sm:px-12 lg:px-24 pb-16 sm:pb-24 pt-24 sm:pt-32 overflow-hidden bg-picos-dark\">\n    <div class=\"absolute inset-0 z-0\">\n      <img decoding=\"async\" id=\"heroImage\" src=\"https:\/\/images.unsplash.com\/photo-1600210492486-724fe5c67fb0?auto=format&fit=crop&w=2000&q=85\" referrerpolicy=\"no-referrer\" alt=\"Architecture d'int\u00e9rieur de prestige\" class=\"w-full h-full object-cover object-center brightness-90\" \/>\n      <div class=\"absolute inset-0 bg-gradient-to-t from-[#201C19]\/95 via-[#25211E]\/55 to-[#1D1917]\/40\"><\/div>\n      <div class=\"absolute inset-0 arch-grid-pattern-dark opacity-30\"><\/div>\n    <\/div>\n\n    <div class=\"absolute top-10 sm:top-14 right-6 sm:right-16 z-10 hidden md:block text-right\">\n      <p class=\"text-[9px] uppercase tracking-ultra text-picos-taupe font-mono\">COORD. 34&deg;01' N &mdash; 06&deg;50' W<\/p>\n      <p class=\"text-[9px] uppercase tracking-widest text-white\/50 font-mono mt-0.5\">RABAT 10100 &middot; MAROC<\/p>\n    <\/div>\n\n    <div class=\"relative z-10 max-w-5xl text-white\">\n      <div class=\"flex items-center gap-3 mb-6 reveal-on-scroll\">\n        <span class=\"w-8 h-[1px] bg-picos-taupe\"><\/span>\n        <span class=\"text-[11px] font-semibold uppercase tracking-ultra text-picos-taupe\">PICOS AM&Eacute;NAGEMENT<\/span>\n      <\/div>\n\n      <h1 class=\"serif-display text-4xl sm:text-6xl md:text-7xl lg:text-8xl font-light leading-[1.05] tracking-tight text-picos-ivory max-w-4xl reveal-on-scroll delay-100\">\n        L'espace prend une autre dimension.\n      <\/h1>\n\n      <p class=\"mt-8 text-base sm:text-lg md:text-xl font-light text-white\/80 max-w-2xl leading-relaxed reveal-on-scroll delay-200\">\n        Architecture int&eacute;rieure, am&eacute;nagement et r&eacute;alisation globale&nbsp;: PICOS accompagne chaque projet de la premi&egrave;re intention jusqu'aux derni&egrave;res finitions.\n      <\/p>\n\n      <div class=\"mt-10 flex flex-col sm:flex-row items-start sm:items-center gap-5 sm:gap-6 reveal-on-scroll delay-300\">\n        <a href=\"#realisations\" class=\"px-8 py-4 bg-picos-ivory text-picos-dark text-[11px] uppercase font-semibold tracking-ultra hover:bg-picos-taupe hover:text-white transition-all duration-300 shadow-md border-0 btn-taupe-hover\" data-cursor-text=\"PROJETS\">\n          D&eacute;couvrir nos r&eacute;alisations\n        <\/a>\n\n        <button type=\"button\" onclick=\"toggleProjectModal(true)\" class=\"px-8 py-4 border border-picos-taupe bg-transparent text-picos-ivory text-[11px] uppercase font-medium tracking-ultra hover:bg-picos-taupe\/20 transition-all duration-300\" data-cursor-text=\"PARLER\">\n          Parler de votre projet\n        <\/button>\n      <\/div>\n\n      <div class=\"mt-8 text-[11px] uppercase tracking-widest text-white\/50 reveal-on-scroll delay-300\">\n        Architecture int&eacute;rieure &middot; Am&eacute;nagement &middot; Contractant G&eacute;n&eacute;ral\n      <\/div>\n    <\/div>\n\n    <div class=\"absolute bottom-8 right-6 sm:right-16 z-10 flex flex-col items-center gap-2\">\n      <span class=\"text-[9px] uppercase tracking-ultra text-picos-taupe [writing-mode:vertical-lr] font-mono\">D&Eacute;FILER<\/span>\n      <div class=\"w-[1px] h-12 bg-white\/20 relative overflow-hidden\">\n        <div class=\"w-full h-1\/2 bg-picos-taupe animate-[bounce_2s_infinite]\"><\/div>\n      <\/div>\n    <\/div>\n  <\/section>\n\n\n  <!-- ========================================================================= -->\n  <!-- SECTION 02 \u2014 INTRODUCTION                                                 -->\n  <!-- ========================================================================= -->\n  <section id=\"about\" class=\"relative w-full py-24 sm:py-32 px-6 sm:px-12 lg:px-24 bg-picos-ivory text-picos-dark overflow-hidden arch-grid-pattern\">\n    <div class=\"max-w-7xl mx-auto\">\n      <div class=\"flex items-center gap-3 mb-10 reveal-on-scroll\">\n        <span class=\"w-8 h-[1px] bg-picos-taupe\"><\/span>\n        <span class=\"text-[11px] font-semibold uppercase tracking-ultra text-picos-taupe-dark\">PICOS AM&Eacute;NAGEMENT<\/span>\n        <span class=\"text-[10px] text-picos-dark\/40 font-mono\">\/ 01<\/span>\n      <\/div>\n\n      <div class=\"grid grid-cols-1 lg:grid-cols-12 gap-12 lg:gap-16 items-start\">\n        <div class=\"lg:col-span-7\">\n          <h2 class=\"serif-display text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-normal leading-[1.1] tracking-tight text-picos-dark reveal-on-scroll\">\n            Un espace ne se r&eacute;sume pas &agrave; ce que l'on voit.\n          <\/h2>\n\n          <div class=\"mt-10 pt-6 border-t border-picos-taupe\/30 reveal-on-scroll delay-200\">\n            <p class=\"serif-display text-2xl sm:text-3xl text-picos-taupe-dark italic font-light\">\n              &laquo; Concevoir. Coordonner. R&eacute;aliser. &raquo;\n            <\/p>\n          <\/div>\n        <\/div>\n\n        <div class=\"lg:col-span-5 flex flex-col justify-between space-y-6 lg:pl-6\">\n          <div class=\"space-y-5 text-base sm:text-lg font-normal text-picos-dark\/80 leading-relaxed reveal-on-scroll delay-100\">\n            <p>\n              Derri&egrave;re chaque int&eacute;rieur abouti se rencontrent une vision, une conception pr&eacute;cise, une ma&icirc;trise technique et une ex&eacute;cution parfaitement coordonn&eacute;e.\n            <\/p>\n            <p class=\"text-sm sm:text-base text-picos-dark\/70\">\n              PICOS Am&eacute;nagement r&eacute;unit ces expertises au sein d'une m&ecirc;me &eacute;quipe pour accompagner chaque projet, de la premi&egrave;re intention jusqu'&agrave; sa livraison.\n            <\/p>\n          <\/div>\n\n          <div class=\"p-5 bg-white border border-picos-taupe\/20 shadow-sm reveal-on-scroll delay-200\">\n            <div class=\"flex items-center justify-between border-b border-picos-ivory-dark pb-2 mb-2\">\n              <span class=\"text-[10px] uppercase tracking-widest text-picos-taupe-dark font-mono\">POSTURE CONTRACTUELLE<\/span>\n              <span class=\"text-[10px] text-picos-taupe-dark font-mono\">R&Eacute;F. CG-01<\/span>\n            <\/div>\n            <p class=\"text-xs text-picos-dark\/80 leading-relaxed\">\n              Un engagement global sur la qualit&eacute;, les co&ucirc;ts, les d&eacute;tails constructifs et les d&eacute;lais d'ex&eacute;cution.\n            <\/p>\n          <\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/section>\n\n\n  <!-- ========================================================================= -->\n  <!-- SECTION 03 \u2014 CONTRACTANT G\u00c9N\u00c9RAL                                          -->\n  <!-- ========================================================================= -->\n  <section id=\"contractant\" class=\"relative w-full py-24 sm:py-32 px-6 sm:px-12 lg:px-24 bg-picos-dark text-white overflow-hidden arch-grid-pattern-dark\">\n    <div class=\"max-w-7xl mx-auto relative z-10\">\n      \n      <div class=\"flex flex-col md:flex-row md:items-end justify-between mb-16 pb-6 border-b border-white\/10 gap-8\">\n        <div>\n          <div class=\"flex items-center gap-3 mb-4 reveal-on-scroll\">\n            <span class=\"w-8 h-[1px] bg-picos-taupe\"><\/span>\n            <span class=\"text-[11px] font-semibold uppercase tracking-ultra text-picos-taupe\">LE M&Eacute;TIER PICOS<\/span>\n            <span class=\"text-[10px] text-white\/40 font-mono\">\/ 02<\/span>\n          <\/div>\n          <h2 class=\"serif-display text-4xl sm:text-5xl md:text-6xl font-light text-picos-ivory reveal-on-scroll delay-100\">\n            Un projet. Un interlocuteur.\n          <\/h2>\n        <\/div>\n        <p class=\"max-w-md text-sm sm:text-base text-white\/70 font-light leading-relaxed reveal-on-scroll delay-200\">\n          De la conception aux derni&egrave;res finitions, PICOS prend en charge l'ensemble des &eacute;tapes n&eacute;cessaires &agrave; la transformation d'un espace.\n        <\/p>\n      <\/div>\n\n      <div class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6\">\n        <div class=\"p-7 bg-picos-dark-surface border border-white\/10 hover:border-picos-taupe transition-colors duration-300 reveal-on-scroll\">\n          <span class=\"serif-display text-5xl text-picos-taupe\/40 block mb-6 font-light\">01<\/span>\n          <h3 class=\"serif-display text-2xl text-picos-ivory font-normal mb-3\">CONCEVOIR<\/h3>\n          <p class=\"text-xs sm:text-sm text-white\/60 leading-relaxed font-light\">\n            Architecture int&eacute;rieure, plans, mati&egrave;res, mobilier et mod&eacute;lisation 3D pour donner une direction claire.\n          <\/p>\n        <\/div>\n\n        <div class=\"p-7 bg-picos-dark-surface border border-white\/10 hover:border-picos-taupe transition-colors duration-300 reveal-on-scroll delay-100\">\n          <span class=\"serif-display text-5xl text-picos-taupe\/40 block mb-6 font-light\">02<\/span>\n          <h3 class=\"serif-display text-2xl text-picos-ivory font-normal mb-3\">PR&Eacute;PARER<\/h3>\n          <p class=\"text-xs sm:text-sm text-white\/60 leading-relaxed font-light\">\n            &Eacute;tudes techniques, budget d&eacute;taill&eacute;, planning et coordination des diff&eacute;rents corps d'&eacute;tat.\n          <\/p>\n        <\/div>\n\n        <div class=\"p-7 bg-picos-dark-surface border border-white\/10 hover:border-picos-taupe transition-colors duration-300 reveal-on-scroll delay-200\">\n          <span class=\"serif-display text-5xl text-picos-taupe\/40 block mb-6 font-light\">03<\/span>\n          <h3 class=\"serif-display text-2xl text-picos-ivory font-normal mb-3\">R&Eacute;ALISER<\/h3>\n          <p class=\"text-xs sm:text-sm text-white\/60 leading-relaxed font-light\">\n            Travaux, installations techniques, agencement, menuiserie et finitions sous une seule responsabilit&eacute;.\n          <\/p>\n        <\/div>\n\n        <div class=\"p-7 bg-picos-dark-surface border border-white\/10 hover:border-picos-taupe transition-colors duration-300 reveal-on-scroll delay-300\">\n          <span class=\"serif-display text-5xl text-picos-taupe\/40 block mb-6 font-light\">04<\/span>\n          <h3 class=\"serif-display text-2xl text-picos-ivory font-normal mb-3\">LIVRER<\/h3>\n          <p class=\"text-xs sm:text-sm text-white\/60 leading-relaxed font-light\">\n            Contr&ocirc;le des d&eacute;tails, finitions ultimes et remise d'un espace achev&eacute;, coh&eacute;rent et imm&eacute;diat.\n          <\/p>\n        <\/div>\n      <\/div>\n\n    <\/div>\n  <\/section>\n\n\n  <!-- ========================================================================= -->\n  <!-- SECTION 04 \u2014 R\u00c9ALISATIONS CONCR\u00c8TES (PROJETS 1 \u00c0 8)                       -->\n  <!-- ========================================================================= -->\n  <section id=\"realisations\" class=\"relative w-full py-24 sm:py-32 px-6 sm:px-12 lg:px-24 bg-white text-picos-dark\">\n    <div class=\"max-w-7xl mx-auto\">\n      \n      <!-- En-t\u00eate de section -->\n      <div class=\"flex flex-col md:flex-row md:items-end justify-between mb-12 pb-6 border-b border-picos-dark\/10 gap-6\">\n        <div>\n          <div class=\"flex items-center gap-3 mb-3 reveal-on-scroll\">\n            <span class=\"w-8 h-[1px] bg-picos-taupe\"><\/span>\n            <span class=\"text-[11px] font-semibold uppercase tracking-ultra text-picos-taupe-dark\">NOTRE TRAVAIL<\/span>\n            <span class=\"text-[10px] text-picos-dark\/40 font-mono\">\/ PORTFOLIO R\u00c9EL<\/span>\n          <\/div>\n          <h2 class=\"serif-display text-4xl sm:text-5xl md:text-6xl font-light text-picos-dark reveal-on-scroll delay-100\">\n            Nos r&eacute;alisations\n          <\/h2>\n          <p class=\"mt-2 text-base text-picos-dark\/70 font-normal reveal-on-scroll delay-200\">\n            Du retail commercial aux r&eacute;novations r&eacute;sidentielles compl&egrave;tes.\n          <\/p>\n        <\/div>\n\n        <!-- Filtres pr\u00e9cis (sans violet\/rose, 100% charte PICOS) -->\n        <div class=\"flex flex-wrap gap-2 text-[10px] uppercase font-mono tracking-widest reveal-on-scroll delay-200\">\n          <button type=\"button\" onclick=\"filterProjects('all')\" class=\"filter-btn px-4 py-2 bg-picos-dark text-white border border-picos-dark transition-colors\" data-filter=\"all\">Tous<\/button>\n          <button type=\"button\" onclick=\"filterProjects('business')\" class=\"filter-btn px-4 py-2 bg-transparent text-picos-dark\/70 border border-picos-dark\/20 hover:border-picos-dark transition-colors\" data-filter=\"business\">Business<\/button>\n          <button type=\"button\" onclick=\"filterProjects('residentiel')\" class=\"filter-btn px-4 py-2 bg-transparent text-picos-dark\/70 border border-picos-dark\/20 hover:border-picos-dark transition-colors\" data-filter=\"residentiel\">R&eacute;sidentiel<\/button>\n          <button type=\"button\" onclick=\"filterProjects('cuisine')\" class=\"filter-btn px-4 py-2 bg-transparent text-picos-dark\/70 border border-picos-dark\/20 hover:border-picos-dark transition-colors\" data-filter=\"cuisine\">Cuisines<\/button>\n          <button type=\"button\" onclick=\"filterProjects('sdb')\" class=\"filter-btn px-4 py-2 bg-transparent text-picos-dark\/70 border border-picos-dark\/20 hover:border-picos-dark transition-colors\" data-filter=\"sdb\">Salles de bain<\/button>\n        <\/div>\n      <\/div>\n\n      <!-- Grille des projets concrets -->\n      <div id=\"projectsGrid\" class=\"grid grid-cols-1 md:grid-cols-12 gap-8 items-start\">\n        \n        <!-- =================================================================== -->\n        <!-- PROJET 1 : PARAOUTLET (BUSINESS) \u2014 SLIDESHOW                       -->\n        <!-- =================================================================== -->\n        <div class=\"project-card md:col-span-8 group\" data-category=\"business\" id=\"project-card-1\">\n          <div class=\"relative w-full aspect-[16\/10] bg-picos-dark overflow-hidden border border-picos-taupe\/30 shadow-sm cursor-pointer\" onclick=\"openModalProject(1)\">\n            \n            <div class=\"thumb-slide active-slide\" data-slide-index=\"0\">\n              <img decoding=\"async\" src=\"https:\/\/picos-amenagement.ma\/wp-content\/uploads\/2026\/10\/images-1.jpeg\" referrerpolicy=\"no-referrer\" alt=\"ParaOutlet - Am\u00e9nagement Ext\u00e9rieur & Fa\u00e7ade\" \/>\n            <\/div>\n            <div class=\"thumb-slide\" data-slide-index=\"1\">\n              <img decoding=\"async\" src=\"https:\/\/picos-amenagement.ma\/wp-content\/uploads\/2026\/10\/20240208_180032-scaled-e1791309596591.jpg\" referrerpolicy=\"no-referrer\" alt=\"ParaOutlet - Signal\u00e9tique & Int\u00e9rieur\" \/>\n            <\/div>\n            <div class=\"thumb-slide\" data-slide-index=\"2\">\n              <img decoding=\"async\" src=\"https:\/\/picos-amenagement.ma\/wp-content\/uploads\/2026\/10\/20240221_114642-scaled.jpg\" referrerpolicy=\"no-referrer\" alt=\"ParaOutlet - Agencement & Rayonnage\" \/>\n            <\/div>\n\n            <span class=\"absolute top-4 left-4 z-10 bg-picos-dark\/90 text-white px-3 py-1 text-[9px] uppercase font-mono tracking-widest border border-white\/10\">\n              BUSINESS &bull; RETAIL\n            <\/span>\n\n            <span class=\"absolute top-4 right-4 z-10 bg-white\/90 text-picos-dark px-2.5 py-1 text-[9px] uppercase font-mono tracking-widest\">\n              SLIDESHOW 3 VUES\n            <\/span>\n\n            <!-- Boutons Slideshow (Neutres) -->\n            <div class=\"absolute inset-y-0 left-0 right-0 flex items-center justify-between px-3 z-10 opacity-80 group-hover:opacity-100 transition-opacity\">\n              <button type=\"button\" onclick=\"event.stopPropagation(); changeCardSlide('project-card-1', -1);\" class=\"w-9 h-9 bg-picos-dark\/80 hover:bg-picos-taupe text-white border border-white\/20 flex items-center justify-center transition-colors shadow-md\" aria-label=\"Photo pr\u00e9c\u00e9dente\">\n                <svg class=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.8\" d=\"M15 19l-7-7 7-7\" \/><\/svg>\n              <\/button>\n              <button type=\"button\" onclick=\"event.stopPropagation(); changeCardSlide('project-card-1', 1);\" class=\"w-9 h-9 bg-picos-dark\/80 hover:bg-picos-taupe text-white border border-white\/20 flex items-center justify-center transition-colors shadow-md\" aria-label=\"Photo suivante\">\n                <svg class=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.8\" d=\"M9 5l7 7-7 7\" \/><\/svg>\n              <\/button>\n            <\/div>\n\n            <div class=\"absolute bottom-3 left-4 z-10 flex items-center gap-1.5 bg-picos-dark\/70 px-2 py-1\">\n              <span class=\"slide-dot w-2 h-2 bg-picos-taupe transition-all\" data-dot-index=\"0\"><\/span>\n              <span class=\"slide-dot w-2 h-2 bg-white\/40 transition-all\" data-dot-index=\"1\"><\/span>\n              <span class=\"slide-dot w-2 h-2 bg-white\/40 transition-all\" data-dot-index=\"2\"><\/span>\n            <\/div>\n          <\/div>\n\n          <div class=\"mt-4 flex flex-col sm:flex-row sm:items-baseline justify-between gap-2 cursor-pointer\" onclick=\"openModalProject(1)\">\n            <div>\n              <h3 class=\"serif-display text-3xl sm:text-4xl text-picos-dark hover:text-picos-taupe-dark transition-colors font-medium\">\n                ParaOutlet\n              <\/h3>\n              <p class=\"text-xs text-picos-dark\/70 mt-1 font-light\">\n                Am&eacute;nagement ext&eacute;rieur &bull; Signal&eacute;tique &bull; Am&eacute;nagement int&eacute;rieur &bull; Agencement commercial\n              <\/p>\n            <\/div>\n            <span class=\"text-xs font-mono text-picos-taupe-dark\">RABAT \/ CASABLANCA<\/span>\n          <\/div>\n        <\/div>\n\n        <!-- =================================================================== -->\n        <!-- PROJET 2 : CUISINE LIGNE D'OMBRE (RABAT) \u2014 AVANT \/ APR\u00c8S          -->\n        <!-- =================================================================== -->\n        <div class=\"project-card md:col-span-4 group\" data-category=\"residentiel cuisine\" id=\"project-card-2\">\n          <div class=\"relative w-full aspect-[4\/5] bg-picos-dark overflow-hidden border border-picos-taupe\/20 shadow-sm cursor-pointer\" onclick=\"openModalProject(2)\">\n            \n            <img decoding=\"async\" id=\"card-img-2\" src=\"https:\/\/picos-amenagement.ma\/wp-content\/uploads\/2026\/10\/PHOTO-2026-03-26-22-25-52-e1791311597640.jpg\" referrerpolicy=\"no-referrer\" alt=\"Cuisine Ligne d'Ombre - R\u00e9sultat Apr\u00e8s\" class=\"w-full h-full object-cover transition-opacity duration-300\" \/>\n\n            <span class=\"absolute top-4 left-4 z-10 bg-picos-dark\/90 text-white px-3 py-1 text-[9px] uppercase font-mono tracking-widest border border-white\/10\">\n              CUISINE &bull; RABAT\n            <\/span>\n\n            <!-- Bouton interactif Avant \/ Apr\u00e8s sur la vignette -->\n            <button type=\"button\" onclick=\"event.stopPropagation(); toggleCardBeforeAfter(2, 'https:\/\/picos-amenagement.ma\/wp-content\/uploads\/2026\/10\/PHOTO-2026-03-26-22-25-52-e1791311597640.jpg', 'https:\/\/picos-amenagement.ma\/wp-content\/uploads\/2026\/10\/PHOTO-2026-03-26-22-25-53-e1791311617138.jpg', this);\" class=\"absolute bottom-3 right-3 z-10 px-3 py-1.5 bg-picos-dark\/85 hover:bg-picos-taupe text-white text-[9px] font-mono uppercase tracking-widest border border-white\/20 transition-colors\">\n              Voir Avant\n            <\/button>\n          <\/div>\n\n          <div class=\"mt-4 flex items-baseline justify-between cursor-pointer\" onclick=\"openModalProject(2)\">\n            <div>\n              <h3 class=\"serif-display text-2xl text-picos-dark hover:text-picos-taupe-dark transition-colors font-medium\">\n                Cuisine Ligne d'Ombre\n              <\/h3>\n              <p class=\"text-xs text-picos-dark\/60 mt-0.5\">R&eacute;am&eacute;nagement int&eacute;gral, plans de travail &amp; menuiserie<\/p>\n            <\/div>\n            <span class=\"text-xs font-mono text-picos-taupe-dark\">RABAT<\/span>\n          <\/div>\n        <\/div>\n\n        <!-- =================================================================== -->\n        <!-- PROJET 3 : SALLE DE BAIN MIN\u00c9RALE I \u2014 AVANT \/ APR\u00c8S                -->\n        <!-- =================================================================== -->\n        <div class=\"project-card md:col-span-4 group\" data-category=\"residentiel sdb\" id=\"project-card-3\">\n          <div class=\"relative w-full aspect-[4\/5] bg-picos-dark overflow-hidden border border-picos-taupe\/20 shadow-sm cursor-pointer\" onclick=\"openModalProject(3)\">\n            <img decoding=\"async\" id=\"card-img-3\" src=\"https:\/\/picos-amenagement.ma\/wp-content\/uploads\/2026\/10\/12.jpg\" referrerpolicy=\"no-referrer\" alt=\"Salle de bain Min\u00e9rale I\" class=\"w-full h-full object-cover transition-opacity duration-300\" \/>\n            \n            <span class=\"absolute top-4 left-4 z-10 bg-picos-dark\/90 text-white px-3 py-1 text-[9px] uppercase font-mono tracking-widest border border-white\/10\">\n              SALLE DE BAIN\n            <\/span>\n\n            <button type=\"button\" onclick=\"event.stopPropagation(); toggleCardBeforeAfter(3, 'https:\/\/picos-amenagement.ma\/wp-content\/uploads\/2026\/10\/12.jpg', 'https:\/\/picos-amenagement.ma\/wp-content\/uploads\/2026\/10\/11.jpg', this);\" class=\"absolute bottom-3 right-3 z-10 px-3 py-1.5 bg-picos-dark\/85 hover:bg-picos-taupe text-white text-[9px] font-mono uppercase tracking-widest border border-white\/20 transition-colors\">\n              Voir Avant\n            <\/button>\n          <\/div>\n\n          <div class=\"mt-4 flex items-baseline justify-between cursor-pointer\" onclick=\"openModalProject(3)\">\n            <div>\n              <h3 class=\"serif-display text-2xl text-picos-dark hover:text-picos-taupe-dark transition-colors font-medium\">\n                Bain Min&eacute;ral I\n              <\/h3>\n              <p class=\"text-xs text-picos-dark\/60 mt-0.5\">R&eacute;novation cl&eacute; en main, &eacute;tanch&eacute;it&eacute; &amp; c&eacute;ramique<\/p>\n            <\/div>\n            <span class=\"text-xs font-mono text-picos-taupe-dark\">RABAT<\/span>\n          <\/div>\n        <\/div>\n\n        <!-- =================================================================== -->\n        <!-- PROJET 4 : SALLE DE BAIN MONOLITHE II \u2014 AVANT \/ APR\u00c8S              -->\n        <!-- =================================================================== -->\n        <div class=\"project-card md:col-span-4 group\" data-category=\"residentiel sdb\" id=\"project-card-4\">\n          <div class=\"relative w-full aspect-[4\/5] bg-picos-dark overflow-hidden border border-picos-taupe\/20 shadow-sm cursor-pointer\" onclick=\"openModalProject(4)\">\n            <img decoding=\"async\" id=\"card-img-4\" src=\"https:\/\/picos-amenagement.ma\/wp-content\/uploads\/2026\/10\/10.jpg\" referrerpolicy=\"no-referrer\" alt=\"Salle de bain Monolithe II\" class=\"w-full h-full object-cover transition-opacity duration-300\" \/>\n            \n            <span class=\"absolute top-4 left-4 z-10 bg-picos-dark\/90 text-white px-3 py-1 text-[9px] uppercase font-mono tracking-widest border border-white\/10\">\n              SALLE DE BAIN\n            <\/span>\n\n            <button type=\"button\" onclick=\"event.stopPropagation(); toggleCardBeforeAfter(4, 'https:\/\/picos-amenagement.ma\/wp-content\/uploads\/2026\/10\/10.jpg', 'https:\/\/picos-amenagement.ma\/wp-content\/uploads\/2026\/10\/9.jpg', this);\" class=\"absolute bottom-3 right-3 z-10 px-3 py-1.5 bg-picos-dark\/85 hover:bg-picos-taupe text-white text-[9px] font-mono uppercase tracking-widest border border-white\/20 transition-colors\">\n              Voir Avant\n            <\/button>\n          <\/div>\n\n          <div class=\"mt-4 flex items-baseline justify-between cursor-pointer\" onclick=\"openModalProject(4)\">\n            <div>\n              <h3 class=\"serif-display text-2xl text-picos-dark hover:text-picos-taupe-dark transition-colors font-medium\">\n                Bain Monolithe II\n              <\/h3>\n              <p class=\"text-xs text-picos-dark\/60 mt-0.5\">Plomberie encastr&eacute;e &amp; fa&iuml;ence grand format<\/p>\n            <\/div>\n            <span class=\"text-xs font-mono text-picos-taupe-dark\">RABAT<\/span>\n          <\/div>\n        <\/div>\n\n        <!-- =================================================================== -->\n        <!-- PROJET 5 : ESPACE D'EAU TRAVERTIN III \u2014 AVANT \/ APR\u00c8S              -->\n        <!-- =================================================================== -->\n        <div class=\"project-card md:col-span-4 group\" data-category=\"residentiel sdb\" id=\"project-card-5\">\n          <div class=\"relative w-full aspect-[4\/5] bg-picos-dark overflow-hidden border border-picos-taupe\/20 shadow-sm cursor-pointer\" onclick=\"openModalProject(5)\">\n            <img decoding=\"async\" id=\"card-img-5\" src=\"https:\/\/picos-amenagement.ma\/wp-content\/uploads\/2026\/10\/8.jpg\" referrerpolicy=\"no-referrer\" alt=\"Espace d'Eau Travertin III\" class=\"w-full h-full object-cover transition-opacity duration-300\" \/>\n            \n            <span class=\"absolute top-4 left-4 z-10 bg-picos-dark\/90 text-white px-3 py-1 text-[9px] uppercase font-mono tracking-widest border border-white\/10\">\n              SALLE DE BAIN\n            <\/span>\n\n            <button type=\"button\" onclick=\"event.stopPropagation(); toggleCardBeforeAfter(5, 'https:\/\/picos-amenagement.ma\/wp-content\/uploads\/2026\/10\/8.jpg', 'https:\/\/picos-amenagement.ma\/wp-content\/uploads\/2026\/10\/7.jpg', this);\" class=\"absolute bottom-3 right-3 z-10 px-3 py-1.5 bg-picos-dark\/85 hover:bg-picos-taupe text-white text-[9px] font-mono uppercase tracking-widest border border-white\/20 transition-colors\">\n              Voir Avant\n            <\/button>\n          <\/div>\n\n          <div class=\"mt-4 flex items-baseline justify-between cursor-pointer\" onclick=\"openModalProject(5)\">\n            <div>\n              <h3 class=\"serif-display text-2xl text-picos-dark hover:text-picos-taupe-dark transition-colors font-medium\">\n                Bain Nuance III\n              <\/h3>\n              <p class=\"text-xs text-picos-dark\/60 mt-0.5\">R&eacute;am&eacute;nagement douche &amp; vasque suspendue<\/p>\n            <\/div>\n            <span class=\"text-xs font-mono text-picos-taupe-dark\">RABAT<\/span>\n          <\/div>\n        <\/div>\n\n        <!-- =================================================================== -->\n        <!-- PROJET 6 : CUISINE ATELIER \u00c9PURE \u2014 AVANT \/ APR\u00c8S                   -->\n        <!-- =================================================================== -->\n        <div class=\"project-card md:col-span-6 group\" data-category=\"residentiel cuisine\" id=\"project-card-6\">\n          <div class=\"relative w-full aspect-[16\/10] bg-picos-dark overflow-hidden border border-picos-taupe\/20 shadow-sm cursor-pointer\" onclick=\"openModalProject(6)\">\n            <img decoding=\"async\" id=\"card-img-6\" src=\"https:\/\/picos-amenagement.ma\/wp-content\/uploads\/2026\/10\/6.jpg\" referrerpolicy=\"no-referrer\" alt=\"Cuisine Atelier \u00c9pure\" class=\"w-full h-full object-cover transition-opacity duration-300\" \/>\n            \n            <span class=\"absolute top-4 left-4 z-10 bg-picos-dark\/90 text-white px-3 py-1 text-[9px] uppercase font-mono tracking-widest border border-white\/10\">\n              CUISINE\n            <\/span>\n\n            <button type=\"button\" onclick=\"event.stopPropagation(); toggleCardBeforeAfter(6, 'https:\/\/picos-amenagement.ma\/wp-content\/uploads\/2026\/10\/6.jpg', 'https:\/\/picos-amenagement.ma\/wp-content\/uploads\/2026\/10\/5.jpg', this);\" class=\"absolute bottom-3 right-3 z-10 px-3 py-1.5 bg-picos-dark\/85 hover:bg-picos-taupe text-white text-[9px] font-mono uppercase tracking-widest border border-white\/20 transition-colors\">\n              Voir Avant\n            <\/button>\n          <\/div>\n\n          <div class=\"mt-4 flex items-baseline justify-between cursor-pointer\" onclick=\"openModalProject(6)\">\n            <div>\n              <h3 class=\"serif-display text-2xl text-picos-dark hover:text-picos-taupe-dark transition-colors font-medium\">\n                Cuisine Atelier &Eacute;pure\n              <\/h3>\n              <p class=\"text-xs text-picos-dark\/60 mt-0.5\">Agencement sur mesure, &eacute;lectrom&eacute;nager int&eacute;gr&eacute;<\/p>\n            <\/div>\n            <span class=\"text-xs font-mono text-picos-taupe-dark\">RABAT<\/span>\n          <\/div>\n        <\/div>\n\n        <!-- =================================================================== -->\n        <!-- PROJET 7 : SALLE DE BAIN NUANCE IV \u2014 AVANT \/ APR\u00c8S                 -->\n        <!-- =================================================================== -->\n        <div class=\"project-card md:col-span-6 group\" data-category=\"residentiel sdb\" id=\"project-card-7\">\n          <div class=\"relative w-full aspect-[16\/10] bg-picos-dark overflow-hidden border border-picos-taupe\/20 shadow-sm cursor-pointer\" onclick=\"openModalProject(7)\">\n            <img decoding=\"async\" id=\"card-img-7\" src=\"https:\/\/picos-amenagement.ma\/wp-content\/uploads\/2026\/10\/4.jpg\" referrerpolicy=\"no-referrer\" alt=\"Salle de Bain Nuance IV\" class=\"w-full h-full object-cover transition-opacity duration-300\" \/>\n            \n            <span class=\"absolute top-4 left-4 z-10 bg-picos-dark\/90 text-white px-3 py-1 text-[9px] uppercase font-mono tracking-widest border border-white\/10\">\n              SALLE DE BAIN\n            <\/span>\n\n            <button type=\"button\" onclick=\"event.stopPropagation(); toggleCardBeforeAfter(7, 'https:\/\/picos-amenagement.ma\/wp-content\/uploads\/2026\/10\/4.jpg', 'https:\/\/picos-amenagement.ma\/wp-content\/uploads\/2026\/10\/3.jpg', this);\" class=\"absolute bottom-3 right-3 z-10 px-3 py-1.5 bg-picos-dark\/85 hover:bg-picos-taupe text-white text-[9px] font-mono uppercase tracking-widest border border-white\/20 transition-colors\">\n              Voir Avant\n            <\/button>\n          <\/div>\n\n          <div class=\"mt-4 flex items-baseline justify-between cursor-pointer\" onclick=\"openModalProject(7)\">\n            <div>\n              <h3 class=\"serif-display text-2xl text-picos-dark hover:text-picos-taupe-dark transition-colors font-medium\">\n                Bain Signature IV\n              <\/h3>\n              <p class=\"text-xs text-picos-dark\/60 mt-0.5\">Douche &agrave; l'italienne, niches r&eacute;tro&eacute;clair&eacute;es<\/p>\n            <\/div>\n            <span class=\"text-xs font-mono text-picos-taupe-dark\">RABAT<\/span>\n          <\/div>\n        <\/div>\n\n        <!-- =================================================================== -->\n        <!-- PROJET 8 : APPARTEMENT HOSPITALITY AIRBNB (MARRAKECH)               -->\n        <!-- =================================================================== -->\n        <div class=\"project-card md:col-span-12 group\" data-category=\"business residentiel\" id=\"project-card-8\">\n          <div class=\"grid grid-cols-1 lg:grid-cols-12 gap-8 bg-picos-ivory p-6 sm:p-10 border border-picos-taupe\/30\">\n            \n            <div class=\"lg:col-span-7 relative aspect-[16\/10] bg-picos-dark overflow-hidden border border-picos-taupe\/30 shadow-md cursor-pointer\" onclick=\"openModalProject(8)\">\n              <img decoding=\"async\" id=\"airbnb-main-img\" src=\"https:\/\/picos-amenagement.ma\/wp-content\/uploads\/2026\/10\/1111111.jpeg\" referrerpolicy=\"no-referrer\" alt=\"Appartement Airbnb Marrakech - R\u00e9sultat\" class=\"w-full h-full object-cover\" \/>\n              \n              <span class=\"absolute top-4 left-4 z-10 bg-picos-dark text-white px-3 py-1 text-[9px] uppercase font-mono tracking-widest border border-white\/10\">\n                HOSPITALITY &bull; AIRBNB PREMIUM\n              <\/span>\n\n              <span class=\"absolute bottom-4 right-4 z-10 bg-white\/90 text-picos-dark px-3 py-1 text-[9px] font-mono uppercase tracking-widest\">\n                MARRAKECH &bull; 10 PHOTOS\n              <\/span>\n            <\/div>\n\n            <div class=\"lg:col-span-5 flex flex-col justify-between space-y-5\">\n              <div>\n                <span class=\"text-[10px] font-mono text-picos-taupe-dark uppercase tracking-widest block mb-1\">INVESTISSEMENT LOCATIF &bull; CL\u00c9 EN MAIN<\/span>\n                <h3 class=\"serif-display text-3xl sm:text-4xl text-picos-dark font-medium leading-tight\">\n                  Appartement Hospitality Marrakech\n                <\/h3>\n                <p class=\"text-xs text-picos-dark\/70 mt-3 font-light leading-relaxed\">\n                  R&eacute;am&eacute;nagement int&eacute;gral d'un appartement destin&eacute; &agrave; la location courte dur&eacute;e haut de gamme. Optimisation de l'espace, ambiance marrakchie contemporaine, agencement menuis&eacute; et &eacute;quipement cl&eacute; en main pour rentabilit&eacute; imm&eacute;diate.\n                <\/p>\n\n                <!-- Miniatures de pr\u00e9visualisation rapide -->\n                <div class=\"grid grid-cols-4 gap-2 mt-5\">\n                  <div onclick=\"switchAirbnbPreview('https:\/\/picos-amenagement.ma\/wp-content\/uploads\/2026\/10\/1111111.jpeg')\" class=\"cursor-pointer aspect-[4\/3] border border-picos-taupe overflow-hidden bg-black\">\n                    <img decoding=\"async\" src=\"https:\/\/picos-amenagement.ma\/wp-content\/uploads\/2026\/10\/1111111.jpeg\" class=\"w-full h-full object-cover\" alt=\"Vue 1\" \/>\n                  <\/div>\n                  <div onclick=\"switchAirbnbPreview('https:\/\/picos-amenagement.ma\/wp-content\/uploads\/2026\/10\/C1111111.jpeg')\" class=\"cursor-pointer aspect-[4\/3] border border-white\/20 hover:border-picos-taupe overflow-hidden bg-black transition-colors\">\n                    <img decoding=\"async\" src=\"https:\/\/picos-amenagement.ma\/wp-content\/uploads\/2026\/10\/C1111111.jpeg\" class=\"w-full h-full object-cover\" alt=\"Vue 2\" \/>\n                  <\/div>\n                  <div onclick=\"switchAirbnbPreview('https:\/\/picos-amenagement.ma\/wp-content\/uploads\/2026\/10\/C2992.jpeg')\" class=\"cursor-pointer aspect-[4\/3] border border-white\/20 hover:border-picos-taupe overflow-hidden bg-black transition-colors\">\n                    <img decoding=\"async\" src=\"https:\/\/picos-amenagement.ma\/wp-content\/uploads\/2026\/10\/C2992.jpeg\" class=\"w-full h-full object-cover\" alt=\"Vue 3\" \/>\n                  <\/div>\n                  <div onclick=\"switchAirbnbPreview('https:\/\/picos-amenagement.ma\/wp-content\/uploads\/2026\/10\/C999.jpeg')\" class=\"cursor-pointer aspect-[4\/3] border border-white\/20 hover:border-picos-taupe overflow-hidden bg-black transition-colors\">\n                    <img decoding=\"async\" src=\"https:\/\/picos-amenagement.ma\/wp-content\/uploads\/2026\/10\/C999.jpeg\" class=\"w-full h-full object-cover\" alt=\"Vue 4\" \/>\n                  <\/div>\n                <\/div>\n              <\/div>\n\n              <button type=\"button\" onclick=\"openModalProject(8)\" class=\"w-full py-3.5 bg-picos-dark text-white text-[11px] font-mono uppercase tracking-widest hover:bg-picos-taupe hover:text-picos-dark transition-colors border-0\">\n                Ouvrir la galerie compl&egrave;te (10 photos)\n              <\/button>\n            <\/div>\n\n          <\/div>\n        <\/div>\n\n      <\/div>\n\n    <\/div>\n  <\/section>\n\n\n  <!-- ========================================================================= -->\n  <!-- SECTION 05 \u2014 M\u00c9THODE                                                      -->\n  <!-- ========================================================================= -->\n  <section id=\"methode\" class=\"relative w-full py-24 sm:py-32 px-6 sm:px-12 lg:px-24 bg-picos-dark text-white overflow-hidden arch-grid-pattern-dark\">\n    <div class=\"max-w-7xl mx-auto\">\n      \n      <div class=\"max-w-3xl mb-16\">\n        <div class=\"flex items-center gap-3 mb-4 reveal-on-scroll\">\n          <span class=\"w-8 h-[1px] bg-picos-taupe\"><\/span>\n          <span class=\"text-[11px] font-semibold uppercase tracking-ultra text-picos-taupe\">NOTRE M&Eacute;THODE<\/span>\n          <span class=\"text-[10px] text-white\/40 font-mono\">\/ 04<\/span>\n        <\/div>\n        <h2 class=\"serif-display text-4xl sm:text-5xl md:text-6xl font-light text-picos-ivory reveal-on-scroll delay-100\">\n          Une m&eacute;thode pens&eacute;e pour simplifier vos projets.\n        <\/h2>\n      <\/div>\n\n      <div class=\"relative pl-6 sm:pl-12 lg:pl-16 border-l border-white\/10 space-y-12\">\n        <div class=\"timeline-step relative group reveal-on-scroll\">\n          <div class=\"absolute -left-[31px] sm:-left-[55px] lg:-left-[71px] top-1.5 w-3 h-3 bg-picos-taupe border-2 border-picos-dark\"><\/div>\n          <div class=\"grid grid-cols-1 md:grid-cols-12 gap-3 items-baseline\">\n            <div class=\"md:col-span-3\">\n              <span class=\"text-xs uppercase font-mono tracking-widest text-picos-taupe block\">01 \/ &Eacute;TAPE<\/span>\n              <h3 class=\"serif-display text-3xl text-picos-ivory mt-1\">&Eacute;COUTER<\/h3>\n            <\/div>\n            <div class=\"md:col-span-9\">\n              <p class=\"text-sm text-white\/70 font-light leading-relaxed\">\n                Comprendre vos usages, vos contraintes et vos ambitions pour poser un cadre s&eacute;curis&eacute;.\n              <\/p>\n            <\/div>\n          <\/div>\n        <\/div>\n\n        <div class=\"timeline-step relative group reveal-on-scroll delay-100\">\n          <div class=\"absolute -left-[31px] sm:-left-[55px] lg:-left-[71px] top-1.5 w-3 h-3 bg-white\/30 border-2 border-picos-dark\"><\/div>\n          <div class=\"grid grid-cols-1 md:grid-cols-12 gap-3 items-baseline\">\n            <div class=\"md:col-span-3\">\n              <span class=\"text-xs uppercase font-mono tracking-widest text-picos-taupe block\">02 \/ &Eacute;TAPE<\/span>\n              <h3 class=\"serif-display text-3xl text-picos-ivory mt-1\">CONCEVOIR<\/h3>\n            <\/div>\n            <div class=\"md:col-span-9\">\n              <p class=\"text-sm text-white\/70 font-light leading-relaxed\">\n                Transformer les intentions en plans 2D, mati&egrave;res nobles et mod&eacute;lisations 3D immersives.\n              <\/p>\n            <\/div>\n          <\/div>\n        <\/div>\n\n        <div class=\"timeline-step relative group reveal-on-scroll delay-200\">\n          <div class=\"absolute -left-[31px] sm:-left-[55px] lg:-left-[71px] top-1.5 w-3 h-3 bg-white\/30 border-2 border-picos-dark\"><\/div>\n          <div class=\"grid grid-cols-1 md:grid-cols-12 gap-3 items-baseline\">\n            <div class=\"md:col-span-3\">\n              <span class=\"text-xs uppercase font-mono tracking-widest text-picos-taupe block\">03 \/ &Eacute;TAPE<\/span>\n              <h3 class=\"serif-display text-3xl text-picos-ivory mt-1\">R&Eacute;ALISER &amp; LIVRER<\/h3>\n            <\/div>\n            <div class=\"md:col-span-9\">\n              <p class=\"text-sm text-white\/70 font-light leading-relaxed\">\n                Coordination stricte des corps d'&eacute;tat, suivi de chantier au millim&egrave;tre et r&eacute;ception cl&eacute; en main.\n              <\/p>\n            <\/div>\n          <\/div>\n        <\/div>\n      <\/div>\n\n    <\/div>\n  <\/section>\n\n\n  <!-- ========================================================================= -->\n  <!-- SECTION 06 \u2014 FINAL CTA                                                    -->\n  <!-- ========================================================================= -->\n  <section class=\"relative w-full py-28 sm:py-36 px-6 sm:px-12 lg:px-24 bg-picos-dark text-white overflow-hidden text-center arch-grid-pattern-dark\">\n    <div class=\"max-w-4xl mx-auto relative z-10\">\n      <span class=\"text-[11px] font-semibold uppercase tracking-ultra text-picos-taupe block mb-4 reveal-on-scroll\">\n        VOTRE PROJET\n      <\/span>\n\n      <h2 class=\"serif-display text-4xl sm:text-6xl md:text-7xl font-light text-picos-ivory leading-tight reveal-on-scroll delay-100\">\n        Votre espace m&eacute;rite plus qu'une ex&eacute;cution.\n      <\/h2>\n      <p class=\"serif-display text-3xl sm:text-5xl text-picos-taupe font-light italic mt-2 reveal-on-scroll delay-200\">\n        Il m&eacute;rite une vision.\n      <\/p>\n\n      <p class=\"mt-6 text-sm sm:text-base text-white\/70 max-w-xl mx-auto font-light leading-relaxed reveal-on-scroll delay-200\">\n        Parlons de votre projet et imaginons ensemble ce qu'il peut devenir.\n      <\/p>\n\n      <div class=\"mt-10 flex flex-col sm:flex-row items-center justify-center gap-4 reveal-on-scroll delay-300\">\n        <button type=\"button\" onclick=\"toggleProjectModal(true)\" class=\"px-10 py-4 bg-picos-ivory text-picos-dark text-xs uppercase font-semibold tracking-ultra hover:bg-picos-taupe hover:text-white transition-colors border-0 btn-taupe-hover\" data-cursor-text=\"CONTACT\">\n          Parler de mon projet\n        <\/button>\n        <a href=\"tel:+212666202260\" class=\"px-8 py-4 border border-white\/20 text-picos-ivory text-xs uppercase tracking-ultra hover:border-picos-taupe transition-colors\">\n          0666-202260\n        <\/a>\n      <\/div>\n    <\/div>\n  <\/section>\n\n\n  <!-- ========================================================================= -->\n  <!-- SECTION 07 \u2014 FOOTER                                                       -->\n  <!-- ========================================================================= -->\n  <footer class=\"relative w-full bg-picos-dark-deep text-white\/70 pt-16 pb-12 px-6 sm:px-12 lg:px-24 border-t border-white\/10\">\n    <div class=\"max-w-7xl mx-auto\">\n      \n      <div class=\"grid grid-cols-1 md:grid-cols-12 gap-10 pb-12 border-b border-white\/10\">\n        <div class=\"md:col-span-5 space-y-4\">\n          <img decoding=\"async\" src=\"https:\/\/i.ibb.co\/wF4xv0mG\/Picos-Logo.png\" referrerpolicy=\"no-referrer\" alt=\"PICOS AM\u00c9NAGEMENT\" class=\"h-16 w-auto object-contain filter brightness-110\" \/>\n          <p class=\"text-xs font-light text-white\/60 uppercase tracking-widest leading-relaxed max-w-sm\">\n            Architecture int&eacute;rieure &middot; Am&eacute;nagement &middot; Contractant G&eacute;n&eacute;ral\n          <\/p>\n          <div class=\"text-xs text-picos-taupe font-mono\">\n            RABAT 10100 &middot; CASABLANCA &middot; MAROC\n          <\/div>\n        <\/div>\n\n        <div class=\"md:col-span-3 space-y-3\">\n          <h4 class=\"text-[10px] uppercase font-mono tracking-ultra text-picos-taupe\">NAVIGATION<\/h4>\n          <ul class=\"space-y-2 text-xs text-white\/80\">\n            <li><a href=\"#about\" class=\"hover:text-picos-taupe transition-colors\">PICOS<\/a><\/li>\n            <li><a href=\"#realisations\" class=\"hover:text-picos-taupe transition-colors\">R&eacute;alisations<\/a><\/li>\n            <li><a href=\"#methode\" class=\"hover:text-picos-taupe transition-colors\">M&eacute;thode<\/a><\/li>\n          <\/ul>\n        <\/div>\n\n        <div class=\"md:col-span-4 space-y-3\">\n          <h4 class=\"text-[10px] uppercase font-mono tracking-ultra text-picos-taupe\">COORDONN&Eacute;ES<\/h4>\n          <p class=\"text-xs text-white\/90 leading-relaxed font-mono\">\n            AG 1,2, 082 D RUE ARROMANE,<br\/>Rabat 10100, Maroc\n          <\/p>\n          <p class=\"text-xs text-white\/90 font-mono pt-1\">\n            T&eacute;l&eacute;phone&nbsp;: <a href=\"tel:+212666202260\" class=\"text-picos-ivory hover:text-picos-taupe transition-colors font-semibold\">0666-202260<\/a>\n          <\/p>\n          \n          <div class=\"pt-2 flex items-center space-x-4 text-xs font-mono\">\n            <a href=\"https:\/\/www.instagram.com\/picos.morocco\/\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"text-picos-taupe hover:text-white transition-colors flex items-center gap-1.5\" data-cursor-text=\"INSTAGRAM\">\n              <span>Instagram&nbsp;: @picos.morocco<\/span>\n            <\/a>\n          <\/div>\n        <\/div>\n      <\/div>\n\n      <div class=\"pt-6 flex flex-col sm:flex-row items-center justify-between gap-4 text-[10px] text-white\/40 uppercase font-mono tracking-widest\">\n        <div>&copy; 2026 PICOS AM&Eacute;NAGEMENT. TOUS DROITS R&Eacute;SERV&Eacute;S.<\/div>\n      <\/div>\n\n    <\/div>\n  <\/footer>\n\n\n  <!-- ========================================================================= -->\n  <!-- MODALE UNIFI\u00c9E DE VISUALISATION DES PROJETS (100% SANS ROGNAGE & SANS ROSE)-->\n  <!-- ========================================================================= -->\n  <div id=\"picosUniversalModal\" class=\"fixed inset-0 z-[9995] bg-picos-dark\/95 backdrop-blur-xl flex items-center justify-center p-4 sm:p-8 opacity-0 pointer-events-none transition-opacity duration-300 overflow-y-auto\">\n    <div class=\"relative w-full max-w-6xl bg-picos-dark-surface border border-white\/10 text-white p-6 sm:p-10 shadow-2xl my-auto\">\n      \n      <!-- Bouton Fermer -->\n      <button type=\"button\" onclick=\"closeModalProject()\" class=\"absolute top-5 right-5 text-white\/70 hover:text-picos-taupe p-2 transition-colors z-20 border-0 bg-transparent\" aria-label=\"Fermer\">\n        <svg class=\"w-7 h-7\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n          <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" d=\"M6 18L18 6M6 6l12 12\" \/>\n        <\/svg>\n      <\/button>\n\n      <div class=\"grid grid-cols-1 lg:grid-cols-12 gap-8 items-start\">\n        \n        <!-- Colonne Gauche : Visionneuse d'image plein \u00e9cran non rogn\u00e9e -->\n        <div class=\"lg:col-span-7 space-y-4\">\n          <div class=\"aspect-[16\/10] bg-[#141210] border border-white\/10 relative flex items-center justify-center overflow-hidden\">\n            <img decoding=\"async\" id=\"modalMainImg\" src=\"\" alt=\"Vue Projet\" class=\"w-full h-full object-contain transition-opacity duration-300\" \/>\n            <div id=\"modalImgBadge\" class=\"absolute bottom-3 left-3 bg-picos-dark\/90 px-3 py-1 text-[9px] font-mono uppercase tracking-widest text-picos-taupe border border-picos-taupe\/40\">\n              R\u00c9SULTAT LIVR\u00c9\n            <\/div>\n          <\/div>\n\n          <!-- Miniatures directes (pour changer d'image ou voir Avant\/Apr\u00e8s) -->\n          <div id=\"modalThumbsContainer\" class=\"flex flex-wrap gap-2\"><\/div>\n        <\/div>\n\n        <!-- Colonne Droite : Fiche descriptive technique -->\n        <div class=\"lg:col-span-5 space-y-5\">\n          <div>\n            <span id=\"modalCategoryBadge\" class=\"text-[10px] font-mono text-picos-taupe uppercase tracking-widest block mb-1\">PROJET R\u00c9EL<\/span>\n            <h3 id=\"modalProjectTitle\" class=\"serif-display text-3xl sm:text-4xl text-picos-ivory font-normal leading-tight\">Titre<\/h3>\n            <p id=\"modalProjectSubtitle\" class=\"text-xs text-white\/70 mt-1 font-light\">Sous-titre<\/p>\n          <\/div>\n\n          <!-- Specs techniques -->\n          <div class=\"p-4 bg-white\/5 border border-white\/10 space-y-2 text-xs\">\n            <div class=\"flex justify-between border-b border-white\/5 pb-2\">\n              <span class=\"text-picos-taupe font-mono\">Mission PICOS&nbsp;:<\/span>\n              <span class=\"text-white font-medium\">Contractant G&eacute;n&eacute;ral<\/span>\n            <\/div>\n            <div class=\"flex justify-between border-b border-white\/5 pb-2\">\n              <span class=\"text-picos-taupe font-mono\">Intervention&nbsp;:<\/span>\n              <span id=\"modalInterventionText\" class=\"text-white\">Tous corps d'&eacute;tat<\/span>\n            <\/div>\n            <div class=\"flex justify-between\">\n              <span class=\"text-picos-taupe font-mono\">Localisation&nbsp;:<\/span>\n              <span id=\"modalLocationText\" class=\"text-white\">Rabat<\/span>\n            <\/div>\n          <\/div>\n\n          <p id=\"modalDescriptionText\" class=\"text-xs text-white\/70 leading-relaxed font-light\">\n            Description d\u00e9taill\u00e9e...\n          <\/p>\n\n          <button type=\"button\" onclick=\"closeModalProject(); toggleProjectModal(true);\" class=\"w-full py-3.5 bg-picos-taupe text-picos-dark text-[11px] uppercase font-semibold tracking-widest text-center hover:bg-picos-ivory transition-colors border-0 btn-taupe-hover\">\n            Discuter d'un projet similaire\n          <\/button>\n        <\/div>\n\n      <\/div>\n\n    <\/div>\n  <\/div>\n\n\n  <!-- ========================================================================= -->\n  <!-- MODAL \/ FORMULAIRE DE PROJET                                              -->\n  <!-- ========================================================================= -->\n  <div id=\"projectModal\" class=\"fixed inset-0 z-[9990] bg-picos-dark\/80 backdrop-blur-md flex items-center justify-center p-4 sm:p-6 opacity-0 pointer-events-none transition-opacity duration-300\">\n    <div class=\"relative w-full max-w-2xl bg-picos-dark-surface border border-picos-taupe\/30 text-white p-8 sm:p-10 shadow-2xl\">\n      \n      <button type=\"button\" onclick=\"toggleProjectModal(false)\" class=\"absolute top-5 right-5 text-white\/70 hover:text-picos-taupe p-2 transition-colors border-0 bg-transparent\" aria-label=\"Fermer\">\n        <svg class=\"w-6 h-6\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n          <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" d=\"M6 18L18 6M6 6l12 12\" \/>\n        <\/svg>\n      <\/button>\n\n      <div class=\"mb-6\">\n        <span class=\"text-[10px] uppercase font-mono tracking-ultra text-picos-taupe\">D&Eacute;MARRER UNE CONVERSATION<\/span>\n        <h3 class=\"serif-display text-3xl sm:text-4xl text-picos-ivory mt-1\">Parlez-nous de votre projet<\/h3>\n        <p class=\"text-xs text-white\/70 mt-1\">\n          Ligne directe : <a href=\"tel:+212666202260\" class=\"text-picos-taupe font-mono hover:underline\">0666-202260<\/a>\n        <\/p>\n      <\/div>\n\n      <form onsubmit=\"handleFormSubmit(event)\" class=\"space-y-4\">\n        <div class=\"grid grid-cols-1 sm:grid-cols-2 gap-4\">\n          <div>\n            <label class=\"block text-[10px] uppercase tracking-widest text-picos-taupe mb-1 font-mono\">Votre Nom<\/label>\n            <input type=\"text\" required placeholder=\"Nom complet\" class=\"w-full bg-picos-dark border border-white\/20 px-4 py-2.5 text-xs text-white focus:border-picos-taupe transition-colors\" \/>\n          <\/div>\n          <div>\n            <label class=\"block text-[10px] uppercase tracking-widest text-picos-taupe mb-1 font-mono\">Contact (Email ou T&eacute;l)<\/label>\n            <input type=\"text\" required placeholder=\"06... \/ email@domaine.com\" class=\"w-full bg-picos-dark border border-white\/20 px-4 py-2.5 text-xs text-white focus:border-picos-taupe transition-colors\" \/>\n          <\/div>\n        <\/div>\n\n        <div class=\"grid grid-cols-1 sm:grid-cols-2 gap-4\">\n          <div>\n            <label class=\"block text-[10px] uppercase tracking-widest text-picos-taupe mb-1 font-mono\">Typologie de projet<\/label>\n            <select class=\"w-full bg-picos-dark border border-white\/20 px-4 py-2.5 text-xs text-white focus:border-picos-taupe transition-colors\">\n              <option value=\"cuisine\">Cuisine sur mesure<\/option>\n              <option value=\"sdb\">Salle de bain<\/option>\n              <option value=\"hospitality\">Hospitality \/ Investissement Airbnb<\/option>\n              <option value=\"business\">Business \/ Commercial (ex: ParaOutlet)<\/option>\n              <option value=\"global\">R&eacute;novation compl&egrave;te r&eacute;sidentielle<\/option>\n            <\/select>\n          <\/div>\n          <div>\n            <label class=\"block text-[10px] uppercase tracking-widest text-picos-taupe mb-1 font-mono\">Ville \/ Localisation<\/label>\n            <input type=\"text\" placeholder=\"Rabat, Casablanca, Marrakech...\" class=\"w-full bg-picos-dark border border-white\/20 px-4 py-2.5 text-xs text-white focus:border-picos-taupe transition-colors\" \/>\n          <\/div>\n        <\/div>\n\n        <div>\n          <label class=\"block text-[10px] uppercase tracking-widest text-picos-taupe mb-1 font-mono\">D&eacute;tails &amp; ambitions<\/label>\n          <textarea rows=\"3\" placeholder=\"Surface estim&eacute;e, &eacute;ch&eacute;ance souhait&eacute;e...\" class=\"w-full bg-picos-dark border border-white\/20 px-4 py-2.5 text-xs text-white focus:border-picos-taupe transition-colors\"><\/textarea>\n        <\/div>\n\n        <div class=\"flex items-center justify-between pt-2\">\n          <span class=\"text-[9px] text-white\/40 font-mono\">R&Eacute;PONSE SOUS 48H<\/span>\n          <button type=\"submit\" class=\"px-7 py-3 bg-picos-taupe text-picos-dark text-[11px] uppercase font-semibold tracking-widest hover:bg-picos-ivory transition-colors border-0 btn-taupe-hover\">\n            Transmettre la demande\n          <\/button>\n        <\/div>\n      <\/form>\n\n      <div id=\"formSuccessMessage\" class=\"hidden absolute inset-0 bg-picos-dark-surface p-10 flex flex-col items-center justify-center text-center\">\n        <h4 class=\"serif-display text-3xl text-picos-ivory\">Demande transmise avec succ&egrave;s.<\/h4>\n        <p class=\"text-xs text-white\/70 mt-2\">Notre &eacute;quipe de ma&icirc;trise d'&oelig;uvre vous contactera rapidement.<\/p>\n        <button type=\"button\" onclick=\"toggleProjectModal(false)\" class=\"mt-6 px-6 py-2 border border-picos-taupe text-picos-taupe text-xs uppercase font-mono\">Fermer<\/button>\n      <\/div>\n\n    <\/div>\n  <\/div>\n\n<\/div><!-- \/.picos-wrapper -->\n\n\n<!-- ========================================================================= -->\n<!-- JAVASCRIPT LOGIC & ENGINE                                                 -->\n<!-- ========================================================================= -->\n<script>\n  \/\/ 01. PAGE LOADER\n  window.addEventListener('DOMContentLoaded', () => {\n    const loader = document.getElementById('pageLoader');\n    const loaderIcon = document.getElementById('loaderIcon');\n    const loaderText = document.getElementById('loaderText');\n    const loaderBar = document.getElementById('loaderBar');\n\n    setTimeout(() => {\n      if (loaderIcon) { loaderIcon.style.opacity = '1'; loaderIcon.style.transform = 'scale(1)'; }\n      if (loaderText) { loaderText.style.opacity = '1'; loaderText.style.transform = 'translateY(0)'; }\n      if (loaderBar) { loaderBar.style.width = '100%'; }\n    }, 100);\n\n    setTimeout(() => {\n      if (loader) {\n        loader.style.transform = 'translateY(-100%)';\n        setTimeout(() => { loader.style.display = 'none'; }, 700);\n      }\n    }, 1000);\n  });\n\n  \/\/ 02. SCROLL PROGRESS\n  const scrollProgress = document.getElementById('scrollProgress');\n  window.addEventListener('scroll', () => {\n    const scrollPos = window.scrollY;\n    const docHeight = document.documentElement.scrollHeight - window.innerHeight;\n    const progressPercent = (scrollPos \/ docHeight) * 100;\n    if (scrollProgress) {\n      scrollProgress.style.height = `${progressPercent}%`;\n    }\n  });\n\n  \/\/ 03. SCROLL REVEAL OBSERVER\n  const revealElements = document.querySelectorAll('.reveal-on-scroll');\n  const revealObserver = new IntersectionObserver((entries, observer) => {\n    entries.forEach(entry => {\n      if (entry.isIntersecting) {\n        entry.target.classList.add('is-revealed');\n        observer.unobserve(entry.target);\n      }\n    });\n  }, {\n    rootMargin: '0px 0px -60px 0px',\n    threshold: 0.1\n  });\n  revealElements.forEach(el => revealObserver.observe(el));\n\n  \/\/ 04. BASE DE DONN\u00c9ES DES 8 VRAIS PROJETS PICOS\n  const picosProjectsData = {\n    1: {\n      title: \"ParaOutlet\",\n      subtitle: \"Am\u00e9nagement commercial global, signal\u00e9tique & retail\",\n      category: \"BUSINESS \u2022 CONTRACTANT G\u00c9N\u00c9RAL\",\n      location: \"Rabat \/ Casablanca\",\n      intervention: \"Ext\u00e9rieur, enseigne lumineuse, rayonnage & agencement\",\n      description: \"Une m\u00e9tamorphose totale orchestr\u00e9e par PICOS pour cr\u00e9er une identit\u00e9 de marque puissante et p\u00e9renne : restructuration de la fa\u00e7ade ext\u00e9rieure, enseignes r\u00e9tro\u00e9clair\u00e9es, parcours client optimis\u00e9 et mobilier sur mesure adapt\u00e9 aux flux retail.\",\n      images: [\n        { label: \"Vue 1 \u2022 Fa\u00e7ade\", url: \"https:\/\/picos-amenagement.ma\/wp-content\/uploads\/2026\/10\/images-1.jpeg\" },\n        { label: \"Vue 2 \u2022 Int\u00e9rieur\", url: \"https:\/\/picos-amenagement.ma\/wp-content\/uploads\/2026\/10\/20240208_180032-scaled-e1791309596591.jpg\" },\n        { label: \"Vue 3 \u2022 Rayonnage\", url: \"https:\/\/picos-amenagement.ma\/wp-content\/uploads\/2026\/10\/20240221_114642-scaled.jpg\" },\n        { label: \"Vue 4 \u2022 D\u00e9tails\", url: \"https:\/\/picos-amenagement.ma\/wp-content\/uploads\/2026\/10\/20230612_185231-scaled.jpg\" }\n      ]\n    },\n    2: {\n      title: \"Cuisine Ligne d'Ombre\",\n      subtitle: \"R\u00e9am\u00e9nagement d'envergure, menuiserie & marbrerie\",\n      category: \"R\u00c9SIDENTIEL \u2022 CUISINE\",\n      location: \"Rabat\",\n      intervention: \"D\u00e9molition, plomberie, faux-plafonds & menuiserie sur mesure\",\n      description: \"Transformation spectaculaire d'un espace cuisine obsol\u00e8te en une pi\u00e8ce de vie contemporaine. Int\u00e9gration de caissons sur mesure, r\u00e9alignement des r\u00e9seaux techniques et mariage harmonieux entre laque mate et plan de travail min\u00e9ral.\",\n      images: [\n        { label: \"R\u00c9SULTAT (APR\u00c8S)\", url: \"https:\/\/picos-amenagement.ma\/wp-content\/uploads\/2026\/10\/PHOTO-2026-03-26-22-25-52-e1791311597640.jpg\" },\n        { label: \"\u00c9TAT INITIAL (AVANT)\", url: \"https:\/\/picos-amenagement.ma\/wp-content\/uploads\/2026\/10\/PHOTO-2026-03-26-22-25-53-e1791311617138.jpg\" }\n      ]\n    },\n    3: {\n      title: \"Bain Min\u00e9ral I\",\n      subtitle: \"R\u00e9novation compl\u00e8te de salle de bain & douche \u00e0 l'italienne\",\n      category: \"R\u00c9SIDENTIEL \u2022 SALLE DE BAIN\",\n      location: \"Rabat\",\n      intervention: \"\u00c9tanch\u00e9it\u00e9 sous carrelage, plomberie & c\u00e9ramique\",\n      description: \"Repenser les volumes d'une salle de bain pour maximiser la lumi\u00e8re et la sensation d'espace. Douche \u00e0 l'italienne de plain-pied, fa\u00efence textur\u00e9e et robinetterie noire mate encastr\u00e9e.\",\n      images: [\n        { label: \"R\u00c9SULTAT (APR\u00c8S)\", url: \"https:\/\/picos-amenagement.ma\/wp-content\/uploads\/2026\/10\/12.jpg\" },\n        { label: \"\u00c9TAT INITIAL (AVANT)\", url: \"https:\/\/picos-amenagement.ma\/wp-content\/uploads\/2026\/10\/11.jpg\" }\n      ]\n    },\n    4: {\n      title: \"Bain Monolithe II\",\n      subtitle: \"\u00c9l\u00e9gance min\u00e9rale, c\u00e9ramique grand format & r\u00e9tro\u00e9clairage\",\n      category: \"R\u00c9SIDENTIEL \u2022 SALLE DE BAIN\",\n      location: \"Rabat\",\n      intervention: \"Sanitaires suspendus, niches & verri\u00e8re sur mesure\",\n      description: \"Refonte architecturale int\u00e9grale : remplacement d'anciennes installations par un am\u00e9nagement \u00e9pur\u00e9 aux lignes nettes et aux finitions soign\u00e9es.\",\n      images: [\n        { label: \"R\u00c9SULTAT (APR\u00c8S)\", url: \"https:\/\/picos-amenagement.ma\/wp-content\/uploads\/2026\/10\/10.jpg\" },\n        { label: \"\u00c9TAT INITIAL (AVANT)\", url: \"https:\/\/picos-amenagement.ma\/wp-content\/uploads\/2026\/10\/9.jpg\" }\n      ]\n    },\n    5: {\n      title: \"Bain Nuance III\",\n      subtitle: \"Restructuration d'espace d'eau & vasque sur mesure\",\n      category: \"R\u00c9SIDENTIEL \u2022 SALLE DE BAIN\",\n      location: \"Rabat\",\n      intervention: \"Plomberie cuivre\/multicouche, ventilation & carrelage\",\n      description: \"Une m\u00e9tamorphose totale qui apporte confort et fluidit\u00e9. PICOS a g\u00e9r\u00e9 la d\u00e9pose compl\u00e8te, la r\u00e9fection des circuits de fluides et la pose millim\u00e9tr\u00e9e des rev\u00eatements.\",\n      images: [\n        { label: \"R\u00c9SULTAT (APR\u00c8S)\", url: \"https:\/\/picos-amenagement.ma\/wp-content\/uploads\/2026\/10\/8.jpg\" },\n        { label: \"\u00c9TAT INITIAL (AVANT)\", url: \"https:\/\/picos-amenagement.ma\/wp-content\/uploads\/2026\/10\/7.jpg\" }\n      ]\n    },\n    6: {\n      title: \"Cuisine Atelier \u00c9pure\",\n      subtitle: \"Modernisation compl\u00e8te, \u00eelot & \u00e9clairage architectural\",\n      category: \"R\u00c9SIDENTIEL \u2022 CUISINE\",\n      location: \"Rabat\",\n      intervention: \"\u00c9lectricit\u00e9 encastr\u00e9e, faux-plafond & menuiserie\",\n      description: \"Passage d'une configuration ferm\u00e9e et assombrie \u00e0 une cuisine lumineuse, fonctionnelle et ergonomique. Chaque centim\u00e8tre carr\u00e9 a \u00e9t\u00e9 optimis\u00e9 par notre bureau d'\u00e9tudes.\",\n      images: [\n        { label: \"R\u00c9SULTAT (APR\u00c8S)\", url: \"https:\/\/picos-amenagement.ma\/wp-content\/uploads\/2026\/10\/6.jpg\" },\n        { label: \"\u00c9TAT INITIAL (AVANT)\", url: \"https:\/\/picos-amenagement.ma\/wp-content\/uploads\/2026\/10\/5.jpg\" }\n      ]\n    },\n    7: {\n      title: \"Bain Signature IV\",\n      subtitle: \"Modernit\u00e9 g\u00e9om\u00e9trique & sanitaires contemporains\",\n      category: \"R\u00c9SIDENTIEL \u2022 SALLE DE BAIN\",\n      location: \"Rabat\",\n      intervention: \"Miroiterie sur mesure, \u00e9tanch\u00e9it\u00e9 & raccordements\",\n      description: \"Une r\u00e9alisation qui d\u00e9montre notre exigence d'alignement des joints et d'int\u00e9gration parfaite des \u00e9l\u00e9ments techniques dans l'espace.\",\n      images: [\n        { label: \"R\u00c9SULTAT (APR\u00c8S)\", url: \"https:\/\/picos-amenagement.ma\/wp-content\/uploads\/2026\/10\/4.jpg\" },\n        { label: \"\u00c9TAT INITIAL (AVANT)\", url: \"https:\/\/picos-amenagement.ma\/wp-content\/uploads\/2026\/10\/3.jpg\" }\n      ]\n    },\n    8: {\n      title: \"Appartement Hospitality Gu\u00e9liz\",\n      subtitle: \"Transformation int\u00e9grale pour investissement locatif premium\",\n      category: \"HOSPITALITY \u2022 AIRBNB CL\u00c9 EN MAIN\",\n      location: \"Marrakech\",\n      intervention: \"R\u00e9novation totale, agencement, ameublement & d\u00e9coration\",\n      description: \"PICOS a pris en charge la m\u00e9tamorphose compl\u00e8te de cet appartement marrakchi pour en faire une r\u00e9sidence d'exception pr\u00eate \u00e0 louer sur Airbnb : redistributions des pi\u00e8ces, int\u00e9gration de zelliges contemporains, menuiseries sur mesure, peinture chaleureuse et s\u00e9lection compl\u00e8te du mobilier.\",\n      images: [\n        { label: \"Salon Principal\", url: \"https:\/\/picos-amenagement.ma\/wp-content\/uploads\/2026\/10\/1111111.jpeg\" },\n        { label: \"Espace Repas\", url: \"https:\/\/picos-amenagement.ma\/wp-content\/uploads\/2026\/10\/C1111111.jpeg\" },\n        { label: \"Chambre Suite\", url: \"https:\/\/picos-amenagement.ma\/wp-content\/uploads\/2026\/10\/C2992.jpeg\" },\n        { label: \"D\u00e9tails Mobilier\", url: \"https:\/\/picos-amenagement.ma\/wp-content\/uploads\/2026\/10\/C999.jpeg\" },\n        { label: \"Cuisine Ouverte\", url: \"https:\/\/picos-amenagement.ma\/wp-content\/uploads\/2026\/10\/C3.jpeg\" },\n        { label: \"Salle d'Eau\", url: \"https:\/\/picos-amenagement.ma\/wp-content\/uploads\/2026\/10\/78998898978987.jpeg\" },\n        { label: \"Perspective\", url: \"https:\/\/picos-amenagement.ma\/wp-content\/uploads\/2026\/10\/8474747847847.jpeg\" },\n        { label: \"Terrasse & Lumi\u00e8re\", url: \"https:\/\/picos-amenagement.ma\/wp-content\/uploads\/2026\/10\/111212112.jpeg\" },\n        { label: \"Agencement Lit\", url: \"https:\/\/picos-amenagement.ma\/wp-content\/uploads\/2026\/10\/41214141.jpeg\" },\n        { label: \"D\u00e9tail D\u00e9co\", url: \"https:\/\/picos-amenagement.ma\/wp-content\/uploads\/2026\/10\/1234.jpeg\" }\n      ]\n    }\n  };\n\n  \/\/ 05. GESTION DES FILTRES DE PROJETS\n  function filterProjects(category) {\n    const cards = document.querySelectorAll('.project-card');\n    const buttons = document.querySelectorAll('.filter-btn');\n\n    buttons.forEach(btn => {\n      if (btn.getAttribute('data-filter') === category) {\n        btn.classList.add('bg-picos-dark', 'text-white', 'border-picos-dark');\n        btn.classList.remove('bg-transparent', 'text-picos-dark\/70', 'border-picos-dark\/20');\n      } else {\n        btn.classList.remove('bg-picos-dark', 'text-white', 'border-picos-dark');\n        btn.classList.add('bg-transparent', 'text-picos-dark\/70', 'border-picos-dark\/20');\n      }\n    });\n\n    cards.forEach(card => {\n      const cardCat = card.getAttribute('data-category');\n      if (category === 'all' || (cardCat && cardCat.includes(category))) {\n        card.style.display = 'block';\n        setTimeout(() => { card.style.opacity = '1'; }, 30);\n      } else {\n        card.style.opacity = '0';\n        setTimeout(() => { card.style.display = 'none'; }, 200);\n      }\n    });\n  }\n\n  \/\/ 06. TOGGLE AVANT \/ APR\u00c8S SUR LES VIGNETTES\n  function toggleCardBeforeAfter(id, afterUrl, beforeUrl, btnEl) {\n    const imgEl = document.getElementById(`card-img-${id}`);\n    if (!imgEl) return;\n\n    if (imgEl.src === beforeUrl) {\n      imgEl.src = afterUrl;\n      btnEl.textContent = 'Voir Avant';\n    } else {\n      imgEl.src = beforeUrl;\n      btnEl.textContent = 'Voir Apr\u00e8s';\n    }\n  }\n\n  \/\/ 07. SLIDESHOW PARAOUTLET VIGNETTE\n  let currentParaOutletSlide = 0;\n  function changeCardSlide(cardId, direction) {\n    const card = document.getElementById(cardId);\n    if (!card) return;\n\n    const slides = card.querySelectorAll('.thumb-slide');\n    const dots = card.querySelectorAll('.slide-dot');\n    const total = slides.length;\n\n    currentParaOutletSlide = (currentParaOutletSlide + direction + total) % total;\n\n    slides.forEach((slide, idx) => {\n      if (idx === currentParaOutletSlide) slide.classList.add('active-slide');\n      else slide.classList.remove('active-slide');\n    });\n\n    dots.forEach((dot, idx) => {\n      if (idx === currentParaOutletSlide) {\n        dot.classList.add('bg-picos-taupe');\n        dot.classList.remove('bg-white\/40');\n      } else {\n        dot.classList.remove('bg-picos-taupe');\n        dot.classList.add('bg-white\/40');\n      }\n    });\n  }\n\n  \/\/ 08. PR\u00c9VISUALISATION AIRBNB RAPIDE\n  function switchAirbnbPreview(url) {\n    const mainImg = document.getElementById('airbnb-main-img');\n    if (mainImg) {\n      mainImg.style.opacity = '0.3';\n      setTimeout(() => {\n        mainImg.src = url;\n        mainImg.style.opacity = '1';\n      }, 100);\n    }\n  }\n\n  \/\/ 09. MODALE UNIFI\u00c9E PICOS\n  function openModalProject(projectId) {\n    const project = picosProjectsData[projectId];\n    if (!project) return;\n\n    document.getElementById('modalProjectTitle').textContent = project.title;\n    document.getElementById('modalProjectSubtitle').textContent = project.subtitle;\n    document.getElementById('modalCategoryBadge').textContent = project.category;\n    document.getElementById('modalLocationText').textContent = project.location;\n    document.getElementById('modalInterventionText').textContent = project.intervention;\n    document.getElementById('modalDescriptionText').textContent = project.description;\n\n    const mainImg = document.getElementById('modalMainImg');\n    const badge = document.getElementById('modalImgBadge');\n    mainImg.src = project.images[0].url;\n    badge.textContent = project.images[0].label;\n\n    \/\/ G\u00e9n\u00e9ration des miniatures\n    const thumbsContainer = document.getElementById('modalThumbsContainer');\n    thumbsContainer.innerHTML = '';\n\n    project.images.forEach((item, idx) => {\n      const thumbBtn = document.createElement('button');\n      thumbBtn.type = 'button';\n      thumbBtn.className = `px-3 py-1.5 text-[9px] font-mono uppercase tracking-widest border transition-colors ${idx === 0 ? 'bg-picos-taupe text-picos-dark border-picos-taupe font-semibold' : 'bg-white\/5 text-white\/80 border-white\/20 hover:border-picos-taupe'}`;\n      thumbBtn.textContent = item.label;\n      thumbBtn.onclick = () => {\n        mainImg.style.opacity = '0.3';\n        setTimeout(() => {\n          mainImg.src = item.url;\n          badge.textContent = item.label;\n          mainImg.style.opacity = '1';\n        }, 120);\n\n        thumbsContainer.querySelectorAll('button').forEach(b => {\n          b.className = 'px-3 py-1.5 text-[9px] font-mono uppercase tracking-widest border transition-colors bg-white\/5 text-white\/80 border-white\/20 hover:border-picos-taupe';\n        });\n        thumbBtn.className = 'px-3 py-1.5 text-[9px] font-mono uppercase tracking-widest border transition-colors bg-picos-taupe text-picos-dark border-picos-taupe font-semibold';\n      };\n      thumbsContainer.appendChild(thumbBtn);\n    });\n\n    const modal = document.getElementById('picosUniversalModal');\n    modal.classList.remove('opacity-0', 'pointer-events-none');\n  }\n\n  function closeModalProject() {\n    const modal = document.getElementById('picosUniversalModal');\n    modal.classList.add('opacity-0', 'pointer-events-none');\n  }\n\n  \/\/ 10. MODAL FORMULAIRE CONTACT\n  function toggleProjectModal(open) {\n    const modal = document.getElementById('projectModal');\n    const successMsg = document.getElementById('formSuccessMessage');\n    if (open) {\n      if (successMsg) successMsg.classList.add('hidden');\n      modal.classList.remove('opacity-0', 'pointer-events-none');\n    } else {\n      modal.classList.add('opacity-0', 'pointer-events-none');\n    }\n  }\n\n  function handleFormSubmit(e) {\n    e.preventDefault();\n    const successMsg = document.getElementById('formSuccessMessage');\n    if (successMsg) successMsg.classList.remove('hidden');\n  }\n\n  \/\/ 11. CURSEUR SUR ORDINATEUR\n  const cursorDot = document.getElementById('cursorDot');\n  const cursorRing = document.getElementById('cursorRing');\n\n  if (window.matchMedia('(pointer: fine)').matches && cursorDot && cursorRing) {\n    let mouseX = window.innerWidth \/ 2;\n    let mouseY = window.innerHeight \/ 2;\n    let ringX = mouseX;\n    let ringY = mouseY;\n\n    window.addEventListener('mousemove', (e) => {\n      mouseX = e.clientX;\n      mouseY = e.clientY;\n      cursorDot.style.transform = `translate(${mouseX}px, ${mouseY}px)`;\n    });\n\n    function renderCursor() {\n      ringX += (mouseX - ringX) * 0.18;\n      ringY += (mouseY - ringY) * 0.18;\n      cursorRing.style.transform = `translate(${ringX}px, ${ringY}px)`;\n      requestAnimationFrame(renderCursor);\n    }\n    requestAnimationFrame(renderCursor);\n\n    document.querySelectorAll('[data-cursor-text]').forEach(el => {\n      el.addEventListener('mouseenter', () => {\n        cursorRing.classList.add('active-hover');\n        cursorRing.textContent = el.getAttribute('data-cursor-text');\n      });\n      el.addEventListener('mouseleave', () => {\n        cursorRing.classList.remove('active-hover');\n        cursorRing.textContent = '';\n      });\n    });\n  }\n<\/script>\t\t\t\t<\/div>\n\t\t\n<\/section>\n\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Architecture &middot; Am&eacute;nagement &middot; Rabat 10100 COORD. 34&deg;01&prime; N &mdash; 06&deg;50&prime; W RABAT 10100 &middot; MAROC PICOS AM&Eacute;NAGEMENT L&rsquo;espace prend une autre dimension. Architecture int&eacute;rieure, am&eacute;nagement et r&eacute;alisation globale&nbsp;: PICOS accompagne chaque projet de la premi&egrave;re intention jusqu&rsquo;aux derni&egrave;res finitions. D&eacute;couvrir nos r&eacute;alisations Parler de votre projet Architecture int&eacute;rieure &middot; Am&eacute;nagement &middot; Contractant G&eacute;n&eacute;ral D&Eacute;FILER [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-35","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/picos-amenagement.ma\/index.php?rest_route=\/wp\/v2\/pages\/35","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/picos-amenagement.ma\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/picos-amenagement.ma\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/picos-amenagement.ma\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/picos-amenagement.ma\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=35"}],"version-history":[{"count":14,"href":"https:\/\/picos-amenagement.ma\/index.php?rest_route=\/wp\/v2\/pages\/35\/revisions"}],"predecessor-version":[{"id":84,"href":"https:\/\/picos-amenagement.ma\/index.php?rest_route=\/wp\/v2\/pages\/35\/revisions\/84"}],"wp:attachment":[{"href":"https:\/\/picos-amenagement.ma\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=35"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}