{"id":3973,"date":"2026-07-14T09:48:42","date_gmt":"2026-07-14T09:48:42","guid":{"rendered":"https:\/\/nobrainnogain.org\/graphiste\/?post_type=projets&#038;p=3973"},"modified":"2026-07-14T16:50:41","modified_gmt":"2026-07-14T16:50:41","slug":"fata-morgana","status":"publish","type":"projets","link":"https:\/\/nobrainnogain.org\/graphiste\/blog\/projets\/fata-morgana\/","title":{"rendered":"Fata morgana"},"content":{"rendered":"\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-8f761849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"751\" src=\"https:\/\/nobrainnogain.org\/graphiste\/wp-content\/uploads\/2025\/06\/Fatamorgana-1024x751.webp\" alt=\"Fatamorgana\" class=\"wp-image-3635\" srcset=\"https:\/\/nobrainnogain.org\/graphiste\/wp-content\/uploads\/2025\/06\/Fatamorgana-1024x751.webp 1024w, https:\/\/nobrainnogain.org\/graphiste\/wp-content\/uploads\/2025\/06\/Fatamorgana-300x220.webp 300w, https:\/\/nobrainnogain.org\/graphiste\/wp-content\/uploads\/2025\/06\/Fatamorgana-768x563.webp 768w, https:\/\/nobrainnogain.org\/graphiste\/wp-content\/uploads\/2025\/06\/Fatamorgana.webp 1396w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-8f761849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p>Une S\u00e9rigraphie sur le th\u00e8me Fata morgana r\u00e9alis\u00e9e dans le cadre de la r\u00e9sidence \u00e9ponyme. La r\u00e9sidence a \u00e9t\u00e9 incluse dans la biennale des arts visuels de <a href=\"https:\/\/biennalewave.fr\" target=\"_blank\" rel=\"noopener\">Waves<\/a> en 2021. Durant cette exposition de deux semaines, les artistes participantes ont d\u00fb se limiter au trois couleurs primaires ( cyan, magenta, jaune) avec une contrainte : aucun m\u00e9lange autoris\u00e9 dans les pots.<br \/>Les s\u00e9rigraphies sont toutes \u00e9puis\u00e9es, mais un retirage est possible.<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-8f761849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n    <!-- data-uid identifie cette instance pr\u00e9cise du shortcode, utilis\u00e9 par le CSS et le JS plus bas -->\n    <div class=\"portfolio-select-wrapper\" data-uid=\"psf-1-icmVnN\">\n\n        <!-- ========================= -->\n        <!-- SELECT DE FILTRE -->\n        <!-- ========================= -->\n        <div class=\"portfolio-select-filter\">\n            <select class=\"portfolio-filter-select\" id=\"psf-1-icmVnN-filter\">\n\n                <!-- Option par d\u00e9faut : affiche tous les projets -->\n                <option value=\"*\">Toutes les cat\u00e9gories<\/option>\n\n                                    <!-- value = slug de la cat\u00e9gorie, utilis\u00e9 comme classe CSS sur chaque item -->\n                    <option value=\"affiche\">\n                        Affiche                    <\/option>\n                                    <!-- value = slug de la cat\u00e9gorie, utilis\u00e9 comme classe CSS sur chaque item -->\n                    <option value=\"fanzine\">\n                        Fanzine                    <\/option>\n                                    <!-- value = slug de la cat\u00e9gorie, utilis\u00e9 comme classe CSS sur chaque item -->\n                    <option value=\"illustration\">\n                        Illustration                    <\/option>\n                                    <!-- value = slug de la cat\u00e9gorie, utilis\u00e9 comme classe CSS sur chaque item -->\n                    <option value=\"mise-en-page\">\n                        Mise en page                    <\/option>\n                                    <!-- value = slug de la cat\u00e9gorie, utilis\u00e9 comme classe CSS sur chaque item -->\n                    <option value=\"motion-design\">\n                        motion design                    <\/option>\n                                    <!-- value = slug de la cat\u00e9gorie, utilis\u00e9 comme classe CSS sur chaque item -->\n                    <option value=\"packaging\">\n                        Packaging                    <\/option>\n                                    <!-- value = slug de la cat\u00e9gorie, utilis\u00e9 comme classe CSS sur chaque item -->\n                    <option value=\"residences\">\n                        R\u00e9sidences                    <\/option>\n                                    <!-- value = slug de la cat\u00e9gorie, utilis\u00e9 comme classe CSS sur chaque item -->\n                    <option value=\"serigraphie\">\n                        S\u00e9rigraphie                    <\/option>\n                                    <!-- value = slug de la cat\u00e9gorie, utilis\u00e9 comme classe CSS sur chaque item -->\n                    <option value=\"web-design\">\n                        web design                    <\/option>\n                \n            <\/select>\n        <\/div>\n\n        <!-- ========================= -->\n        <!-- GRILLE DE PROJETS -->\n        <!-- ========================= -->\n        <div class=\"portfolio-grid\">\n                                <a href=\"https:\/\/nobrainnogain.org\/graphiste\/blog\/projets\/boite-a-pizza-serigraphie\/\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"portfolio-link\">\n\n                        <div class=\"portfolio-item packaging serigraphie\">\n\n                                                            <div class=\"portfolio-thumb\">\n                                    <img decoding=\"async\" width=\"768\" height=\"462\" src=\"https:\/\/nobrainnogain.org\/graphiste\/wp-content\/uploads\/2026\/06\/stella-suzie-768x462.webp\" class=\"attachment-medium_large size-medium_large wp-post-image\" alt=\"Bo\u00eete \u00e0 pizza s\u00e9rigraphi\u00e9e\" loading=\"lazy\" srcset=\"https:\/\/nobrainnogain.org\/graphiste\/wp-content\/uploads\/2026\/06\/stella-suzie-768x462.webp 768w, https:\/\/nobrainnogain.org\/graphiste\/wp-content\/uploads\/2026\/06\/stella-suzie-300x180.webp 300w, https:\/\/nobrainnogain.org\/graphiste\/wp-content\/uploads\/2026\/06\/stella-suzie.webp 1024w\" sizes=\"auto, (max-width: 768px) 100vw, 768px\" \/>                                <\/div>\n                            \n                            <h3>Bo\u00eete \u00e0 pizza s\u00e9rigraphi\u00e9<\/h3>\n\n                        <\/div>\n\n                    <\/a>\n                                        <a href=\"https:\/\/nobrainnogain.org\/graphiste\/blog\/projets\/pepites-de-louest\/\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"portfolio-link\">\n\n                        <div class=\"portfolio-item web-design\">\n\n                                                            <div class=\"portfolio-thumb\">\n                                    <img decoding=\"async\" width=\"768\" height=\"538\" src=\"https:\/\/nobrainnogain.org\/graphiste\/wp-content\/uploads\/2025\/10\/Les-pepites-de-louest-768x538.webp\" class=\"attachment-medium_large size-medium_large wp-post-image\" alt=\"\" loading=\"lazy\" srcset=\"https:\/\/nobrainnogain.org\/graphiste\/wp-content\/uploads\/2025\/10\/Les-pepites-de-louest-768x538.webp 768w, https:\/\/nobrainnogain.org\/graphiste\/wp-content\/uploads\/2025\/10\/Les-pepites-de-louest-300x210.webp 300w, https:\/\/nobrainnogain.org\/graphiste\/wp-content\/uploads\/2025\/10\/Les-pepites-de-louest-1024x717.webp 1024w, https:\/\/nobrainnogain.org\/graphiste\/wp-content\/uploads\/2025\/10\/Les-pepites-de-louest-1536x1075.webp 1536w, https:\/\/nobrainnogain.org\/graphiste\/wp-content\/uploads\/2025\/10\/Les-pepites-de-louest-2048x1434.webp 2048w\" sizes=\"auto, (max-width: 768px) 100vw, 768px\" \/>                                <\/div>\n                            \n                            <h3>P\u00e9pites de l\u2019Ouest<\/h3>\n\n                        <\/div>\n\n                    <\/a>\n                                        <a href=\"https:\/\/nobrainnogain.org\/graphiste\/blog\/projets\/cirque-la-compagnie\/\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"portfolio-link\">\n\n                        <div class=\"portfolio-item affiche illustration mise-en-page\">\n\n                                                            <div class=\"portfolio-thumb\">\n                                    <img decoding=\"async\" width=\"768\" height=\"576\" src=\"https:\/\/nobrainnogain.org\/graphiste\/wp-content\/uploads\/2025\/10\/couv-simones-768x576.webp\" class=\"attachment-medium_large size-medium_large wp-post-image\" alt=\"Cirque la compagnie\" loading=\"lazy\" srcset=\"https:\/\/nobrainnogain.org\/graphiste\/wp-content\/uploads\/2025\/10\/couv-simones-768x576.webp 768w, https:\/\/nobrainnogain.org\/graphiste\/wp-content\/uploads\/2025\/10\/couv-simones-300x225.webp 300w, https:\/\/nobrainnogain.org\/graphiste\/wp-content\/uploads\/2025\/10\/couv-simones.webp 1024w\" sizes=\"auto, (max-width: 768px) 100vw, 768px\" \/>                                <\/div>\n                            \n                            <h3>Cirque la compagnie<\/h3>\n\n                        <\/div>\n\n                    <\/a>\n                                        <a href=\"https:\/\/nobrainnogain.org\/graphiste\/blog\/projets\/coco-pasta\/\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"portfolio-link\">\n\n                        <div class=\"portfolio-item packaging\">\n\n                                                            <div class=\"portfolio-thumb\">\n                                    <img decoding=\"async\" width=\"768\" height=\"512\" src=\"https:\/\/nobrainnogain.org\/graphiste\/wp-content\/uploads\/2025\/06\/Packaging-768x512.webp\" class=\"attachment-medium_large size-medium_large wp-post-image\" alt=\"coco pasta\" loading=\"lazy\" srcset=\"https:\/\/nobrainnogain.org\/graphiste\/wp-content\/uploads\/2025\/06\/Packaging-768x512.webp 768w, https:\/\/nobrainnogain.org\/graphiste\/wp-content\/uploads\/2025\/06\/Packaging-300x200.webp 300w, https:\/\/nobrainnogain.org\/graphiste\/wp-content\/uploads\/2025\/06\/Packaging.webp 1024w\" sizes=\"auto, (max-width: 768px) 100vw, 768px\" \/>                                <\/div>\n                            \n                            <h3>Coco pasta<\/h3>\n\n                        <\/div>\n\n                    <\/a>\n                                        <a href=\"https:\/\/nobrainnogain.org\/graphiste\/blog\/projets\/flyer-poln\/\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"portfolio-link\">\n\n                        <div class=\"portfolio-item mise-en-page\">\n\n                                                            <div class=\"portfolio-thumb\">\n                                    <img decoding=\"async\" width=\"768\" height=\"866\" src=\"https:\/\/nobrainnogain.org\/graphiste\/wp-content\/uploads\/2025\/07\/Flyer-poln-2--768x866.webp\" class=\"attachment-medium_large size-medium_large wp-post-image\" alt=\"\" loading=\"lazy\" srcset=\"https:\/\/nobrainnogain.org\/graphiste\/wp-content\/uploads\/2025\/07\/Flyer-poln-2--768x866.webp 768w, https:\/\/nobrainnogain.org\/graphiste\/wp-content\/uploads\/2025\/07\/Flyer-poln-2--266x300.webp 266w, https:\/\/nobrainnogain.org\/graphiste\/wp-content\/uploads\/2025\/07\/Flyer-poln-2--908x1024.webp 908w, https:\/\/nobrainnogain.org\/graphiste\/wp-content\/uploads\/2025\/07\/Flyer-poln-2--1362x1536.webp 1362w, https:\/\/nobrainnogain.org\/graphiste\/wp-content\/uploads\/2025\/07\/Flyer-poln-2--1816x2048.webp 1816w\" sizes=\"auto, (max-width: 768px) 100vw, 768px\" \/>                                <\/div>\n                            \n                            <h3>Flyer Poln<\/h3>\n\n                        <\/div>\n\n                    <\/a>\n                                        <a href=\"https:\/\/nobrainnogain.org\/graphiste\/blog\/projets\/75h-de-la-serigraphie\/\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"portfolio-link\">\n\n                        <div class=\"portfolio-item residences serigraphie\">\n\n                                                            <div class=\"portfolio-thumb\">\n                                    <img decoding=\"async\" width=\"684\" height=\"1012\" src=\"https:\/\/nobrainnogain.org\/graphiste\/wp-content\/uploads\/2025\/06\/septantes-cinq-heure-de-la-serigraphie.webp\" class=\"attachment-medium_large size-medium_large wp-post-image\" alt=\"\" loading=\"lazy\" srcset=\"https:\/\/nobrainnogain.org\/graphiste\/wp-content\/uploads\/2025\/06\/septantes-cinq-heure-de-la-serigraphie.webp 684w, https:\/\/nobrainnogain.org\/graphiste\/wp-content\/uploads\/2025\/06\/septantes-cinq-heure-de-la-serigraphie-203x300.webp 203w\" sizes=\"auto, (max-width: 684px) 100vw, 684px\" \/>                                <\/div>\n                            \n                            <h3>75h de la S\u00e9rigraphie<\/h3>\n\n                        <\/div>\n\n                    <\/a>\n                                        <a href=\"https:\/\/nobrainnogain.org\/graphiste\/blog\/projets\/heroine-de-la-modernites\/\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"portfolio-link\">\n\n                        <div class=\"portfolio-item motion-design\">\n\n                                                            <div class=\"portfolio-thumb\">\n                                    <img decoding=\"async\" width=\"510\" height=\"895\" src=\"https:\/\/nobrainnogain.org\/graphiste\/wp-content\/uploads\/2025\/06\/vignette-heroines.webp\" class=\"attachment-medium_large size-medium_large wp-post-image\" alt=\"\" loading=\"lazy\" srcset=\"https:\/\/nobrainnogain.org\/graphiste\/wp-content\/uploads\/2025\/06\/vignette-heroines.webp 510w, https:\/\/nobrainnogain.org\/graphiste\/wp-content\/uploads\/2025\/06\/vignette-heroines-171x300.webp 171w\" sizes=\"auto, (max-width: 510px) 100vw, 510px\" \/>                                <\/div>\n                            \n                            <h3>H\u00e9ro\u00efne de la modernit\u00e9s<\/h3>\n\n                        <\/div>\n\n                    <\/a>\n                                        <a href=\"https:\/\/nobrainnogain.org\/graphiste\/blog\/projets\/74-heures-de-la-serigraphie\/\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"portfolio-link\">\n\n                        <div class=\"portfolio-item residences serigraphie\">\n\n                                                            <div class=\"portfolio-thumb\">\n                                    <img decoding=\"async\" width=\"768\" height=\"756\" src=\"https:\/\/nobrainnogain.org\/graphiste\/wp-content\/uploads\/2025\/06\/Kraft-74--768x756.webp\" class=\"attachment-medium_large size-medium_large wp-post-image\" alt=\"\" loading=\"lazy\" srcset=\"https:\/\/nobrainnogain.org\/graphiste\/wp-content\/uploads\/2025\/06\/Kraft-74--768x756.webp 768w, https:\/\/nobrainnogain.org\/graphiste\/wp-content\/uploads\/2025\/06\/Kraft-74--300x295.webp 300w, https:\/\/nobrainnogain.org\/graphiste\/wp-content\/uploads\/2025\/06\/Kraft-74--1024x1008.webp 1024w, https:\/\/nobrainnogain.org\/graphiste\/wp-content\/uploads\/2025\/06\/Kraft-74-.webp 1512w\" sizes=\"auto, (max-width: 768px) 100vw, 768px\" \/>                                <\/div>\n                            \n                            <h3>74 heures de la s\u00e9rigraphie<\/h3>\n\n                        <\/div>\n\n                    <\/a>\n                                        <a href=\"https:\/\/nobrainnogain.org\/graphiste\/blog\/projets\/fanzine-la-mouche\/\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"portfolio-link\">\n\n                        <div class=\"portfolio-item fanzine illustration hidden\">\n\n                                                            <div class=\"portfolio-thumb\">\n                                    <img decoding=\"async\" width=\"724\" height=\"1024\" src=\"https:\/\/nobrainnogain.org\/graphiste\/wp-content\/uploads\/2025\/07\/la-mouche-n23-moche.webp\" class=\"attachment-medium_large size-medium_large wp-post-image\" alt=\"la-mouche-n23-moche\" loading=\"lazy\" srcset=\"https:\/\/nobrainnogain.org\/graphiste\/wp-content\/uploads\/2025\/07\/la-mouche-n23-moche.webp 724w, https:\/\/nobrainnogain.org\/graphiste\/wp-content\/uploads\/2025\/07\/la-mouche-n23-moche-212x300.webp 212w\" sizes=\"auto, (max-width: 724px) 100vw, 724px\" \/>                                <\/div>\n                            \n                            <h3>Fanzine la mouche<\/h3>\n\n                        <\/div>\n\n                    <\/a>\n                                        <a href=\"https:\/\/nobrainnogain.org\/graphiste\/blog\/projets\/batgirl\/\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"portfolio-link\">\n\n                        <div class=\"portfolio-item motion-design hidden\">\n\n                                                            <div class=\"portfolio-thumb\">\n                                    <img decoding=\"async\" width=\"768\" height=\"1\" src=\"https:\/\/nobrainnogain.org\/graphiste\/wp-content\/uploads\/2026\/07\/batgirl-logo-1.svg\" class=\"attachment-medium_large size-medium_large wp-post-image\" alt=\"Batgirl\" loading=\"lazy\" \/>                                <\/div>\n                            \n                            <h3>Batgirl<\/h3>\n\n                        <\/div>\n\n                    <\/a>\n                                        <a href=\"https:\/\/nobrainnogain.org\/graphiste\/blog\/projets\/fata-morgana\/\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"portfolio-link\">\n\n                        <div class=\"portfolio-item serigraphie hidden\">\n\n                                                            <div class=\"portfolio-thumb\">\n                                    <img decoding=\"async\" width=\"768\" height=\"563\" src=\"https:\/\/nobrainnogain.org\/graphiste\/wp-content\/uploads\/2025\/06\/Fatamorgana-768x563.webp\" class=\"attachment-medium_large size-medium_large wp-post-image\" alt=\"Fatamorgana\" loading=\"lazy\" srcset=\"https:\/\/nobrainnogain.org\/graphiste\/wp-content\/uploads\/2025\/06\/Fatamorgana-768x563.webp 768w, https:\/\/nobrainnogain.org\/graphiste\/wp-content\/uploads\/2025\/06\/Fatamorgana-300x220.webp 300w, https:\/\/nobrainnogain.org\/graphiste\/wp-content\/uploads\/2025\/06\/Fatamorgana-1024x751.webp 1024w, https:\/\/nobrainnogain.org\/graphiste\/wp-content\/uploads\/2025\/06\/Fatamorgana.webp 1396w\" sizes=\"auto, (max-width: 768px) 100vw, 768px\" \/>                                <\/div>\n                            \n                            <h3>Fata morgana<\/h3>\n\n                        <\/div>\n\n                    <\/a>\n                                        <a href=\"https:\/\/nobrainnogain.org\/graphiste\/blog\/projets\/animation-de-logo\/\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"portfolio-link\">\n\n                        <div class=\"portfolio-item motion-design hidden\">\n\n                                                            <div class=\"portfolio-thumb\">\n                                    <img decoding=\"async\" width=\"768\" height=\"1\" src=\"https:\/\/nobrainnogain.org\/graphiste\/wp-content\/uploads\/2026\/07\/logo-sellerie.svg\" class=\"attachment-medium_large size-medium_large wp-post-image\" alt=\"\" loading=\"lazy\" \/>                                <\/div>\n                            \n                            <h3>Animation de logo<\/h3>\n\n                        <\/div>\n\n                    <\/a>\n                            <\/div>\n\n        <!-- ========================= -->\n        <!-- BOUTON VOIR PLUS -->\n        <!-- ========================= -->\n        <div class=\"portfolio-load-more-wrap\">\n            <button class=\"portfolio-load-more\" id=\"psf-1-icmVnN-loadmore\">\n                Voir plus            <\/button>\n        <\/div>\n\n    <\/div>\n\n    <!-- ================================================= -->\n    <!-- CSS -->\n    <!-- Chaque r\u00e8gle est pr\u00e9fix\u00e9e par [data-uid=\"...\"] pour isoler -->\n    <!-- le style de cette instance et \u00e9viter tout conflit si le -->\n    <!-- shortcode est utilis\u00e9 plusieurs fois sur la m\u00eame page. -->\n    <!-- ================================================= -->\n    <style>\n        \/* --- Conteneur du select --- *\/\n        [data-uid=\"psf-1-icmVnN\"] .portfolio-select-filter {\n            position: relative;\n            margin-bottom: 40px;\n            font-family: Helvetica, sans-serif;\n            font-weight: 900;\n        }\n\n        \/* Petite fl\u00e8che custom (remplace la fl\u00e8che native du <select>) *\/\n        [data-uid=\"psf-1-icmVnN\"] .portfolio-select-filter::after {\n            content: '\u2304';\n            color: #ffffff;              \/* corrig\u00e9 : \u00e9tait color:\"ffffff\" (invalide) *\/\n            position: absolute;\n            right: 20px;\n            top: 50%;\n            transform: translateY(-50%);\n            pointer-events: none;        \/* laisse les clics passer \u00e0 travers vers le select *\/\n            font-size: 18px;\n        }\n\n        \/* Style du <select> lui-m\u00eame, enti\u00e8rement pilot\u00e9 par les attributs du shortcode *\/\n        [data-uid=\"psf-1-icmVnN\"] .portfolio-filter-select {\n            width: 100%;\n            padding: 16px 22px;\n            background: #0000;\n            color: #fff;\n            border: 5px solid #ffffff;\n            border-radius: 8px;\n            font-family: Helvetica, sans-serif;\n            font-weight: 900;\n            font-size: 20px;\n            line-height: 1.4;\n            cursor: pointer;\n            outline: none;\n            \/* supprime le style natif du select selon les navigateurs *\/\n            appearance: none;\n            -webkit-appearance: none;\n            -moz-appearance: none;\n            transition: .3s;\n        }\n\n        \/* --- Grille responsive : 4 colonnes desktop \/ 2 tablette \/ 1 mobile --- *\/\n        [data-uid=\"psf-1-icmVnN\"] .portfolio-grid {\n            display: grid;\n            grid-template-columns: repeat(4, minmax(0, 1fr));\n            gap: 30px;\n        }\n\n        @media (max-width: 1024px) {\n            [data-uid=\"psf-1-icmVnN\"] .portfolio-grid {\n                grid-template-columns: repeat(2, 1fr);\n            }\n        }\n\n        @media (max-width: 767px) {\n            [data-uid=\"psf-1-icmVnN\"] .portfolio-grid {\n                grid-template-columns: 1fr;\n            }\n        }\n\n        \/* --- Item de la grille --- *\/\n        [data-uid=\"psf-1-icmVnN\"] .portfolio-item {\n            transition: .3s;\n            overflow: hidden; \/* n\u00e9cessaire pour que le zoom au hover ne d\u00e9borde pas de la carte *\/\n        }\n\n        \/* Classe ajout\u00e9e en PHP pour cacher les projets au-del\u00e0 du 8e (voir plus haut) *\/\n        [data-uid=\"psf-1-icmVnN\"] .portfolio-item.hidden {\n            display: none;\n        }\n\n        \/* --- Vignette (ratio fixe 4:3, quelle que soit la taille de l'image d'origine) --- *\/\n        [data-uid=\"psf-1-icmVnN\"] .portfolio-thumb {\n            position: relative;\n            width: 100%;\n            aspect-ratio: 4 \/ 3;\n            overflow: hidden;\n            border-radius: 16px;\n        }\n\n        [data-uid=\"psf-1-icmVnN\"] .portfolio-thumb img {\n            width: 100%;\n            height: 100%;\n            object-fit: cover;   \/* recadre l'image pour remplir le cadre sans la d\u00e9former *\/\n            display: block;\n            transition: transform .5s ease;\n        }\n\n        \/* Effet de zoom l\u00e9ger sur l'image au survol de la carte *\/\n        [data-uid=\"psf-1-icmVnN\"] .portfolio-item:hover img {\n            transform: scale(1.08);\n        }\n\n        \/* --- Bouton \"Voir plus\" --- *\/\n        [data-uid=\"psf-1-icmVnN\"] .portfolio-load-more-wrap {\n            margin-top: 30px;\n            text-align: center;\n        }\n\n        [data-uid=\"psf-1-icmVnN\"] .portfolio-load-more {\n            padding: 10px 20px;\n            border: none;\n            background: #111;\n            color: #ffffff;              \/* corrig\u00e9 : remplace la propri\u00e9t\u00e9 invalide font-color *\/\n            border-radius: 5px;\n            font-family: Helvetica, sans-serif;\n            font-weight: 900;\n            font-size: 20px;             \/* corrig\u00e9 : \"font-size:25px; bold\" n'\u00e9tait pas du CSS valide *\/\n            cursor: pointer;\n            transition: opacity .3s;\n        }\n\n        [data-uid=\"psf-1-icmVnN\"] .portfolio-load-more:hover {\n            opacity: .85;\n        }\n\n        \/* --- Neutralise le style de lien par d\u00e9faut du navigateur sur les cartes --- *\/\n        [data-uid=\"psf-1-icmVnN\"] .portfolio-link,\n        [data-uid=\"psf-1-icmVnN\"] .portfolio-link:visited,\n        [data-uid=\"psf-1-icmVnN\"] .portfolio-link:hover,\n        [data-uid=\"psf-1-icmVnN\"] .portfolio-link:focus,\n        [data-uid=\"psf-1-icmVnN\"] .portfolio-link:active {\n            text-decoration: none !important;\n            color: inherit;\n            display: block;\n        }\n    <\/style>\n\n    <!-- ================================================= -->\n    <!-- JAVASCRIPT -->\n    <!-- Encapsul\u00e9 dans une IIFE (fonction auto-ex\u00e9cut\u00e9e) : -->\n    <!-- aucune variable ne fuit dans l'espace global window, -->\n    <!-- donc aucun risque de conflit entre plusieurs instances -->\n    <!-- du shortcode ou avec d'autres scripts du th\u00e8me\/plugins. -->\n    <!-- ================================================= -->\n    <script>\n    (function() {\n        \/\/ On cible uniquement le wrapper de CETTE instance gr\u00e2ce \u00e0 data-uid\n        var wrapper = document.querySelector('[data-uid=\"psf-1-icmVnN\"]');\n        if (!wrapper) return; \/\/ s\u00e9curit\u00e9 : si le wrapper n'existe pas, on arr\u00eate le script ici\n\n        var filter      = wrapper.querySelector('.portfolio-filter-select');\n        var items       = wrapper.querySelectorAll('.portfolio-item');\n        var loadMoreBtn = wrapper.querySelector('.portfolio-load-more');\n\n        \/**\n         * Applique le filtre choisi : affiche les 8 premiers items correspondant\n         * \u00e0 la cat\u00e9gorie s\u00e9lectionn\u00e9e, cache le reste.\n         *\/\n        function applyFilter(value) {\n            var visibleCount = 0;\n\n            items.forEach(function(item) {\n                item.classList.add('hidden'); \/\/ on cache tout par d\u00e9faut...\n\n                \/\/ \"*\" = toutes cat\u00e9gories, sinon on v\u00e9rifie la classe CSS correspondant au slug\n                var matches = (value === '*') || item.classList.contains(value);\n\n                if (matches) {\n                    if (visibleCount < 8) {\n                        item.classList.remove('hidden'); \/\/ ...puis on r\u00e9-affiche les 8 premiers correspondants\n                    }\n                    visibleCount++;\n                }\n            });\n\n            \/\/ Le bouton \"Voir plus\" ne s'affiche que s'il reste des \u00e9l\u00e9ments \u00e0 charger\n            loadMoreBtn.style.display = (visibleCount <= 8) ? 'none' : 'inline-block';\n        }\n\n        \/\/ D\u00e9clenche le filtrage \u00e0 chaque changement dans le <select>\n        if (filter) {\n            filter.addEventListener('change', function() {\n                applyFilter(this.value);\n            });\n        }\n\n        \/\/ Gestion du clic sur \"Voir plus\" : r\u00e9v\u00e8le 4 \u00e9l\u00e9ments cach\u00e9s suppl\u00e9mentaires\n        if (loadMoreBtn) {\n            loadMoreBtn.addEventListener('click', function() {\n                var value = filter ? filter.value : '*';\n                var hiddenItems = [];\n\n                \/\/ R\u00e9cup\u00e8re la liste des items actuellement cach\u00e9s ET correspondant au filtre actif\n                items.forEach(function(item) {\n                    if (item.classList.contains('hidden')) {\n                        if (value === '*' || item.classList.contains(value)) {\n                            hiddenItems.push(item);\n                        }\n                    }\n                });\n\n                \/\/ R\u00e9v\u00e8le les 4 premiers de cette liste\n                hiddenItems.slice(0, 4).forEach(function(item) {\n                    item.classList.remove('hidden');\n                });\n\n                \/\/ Recalcule combien il en reste de cach\u00e9s, pour savoir si on doit\n                \/\/ masquer le bouton \"Voir plus\" (plus rien \u00e0 charger)\n                var remaining = 0;\n                items.forEach(function(item) {\n                    if (item.classList.contains('hidden') && (value === '*' || item.classList.contains(value))) {\n                        remaining++;\n                    }\n                });\n\n                if (remaining === 0) {\n                    loadMoreBtn.style.display = 'none';\n                }\n            });\n        }\n    })();\n    <\/script>\n\n    \n<\/div>\n<\/div>\n","protected":false},"featured_media":3635,"parent":0,"menu_order":0,"template":"","categorie-travaux":[14],"class_list":["post-3973","projets","type-projets","status-publish","has-post-thumbnail","hentry","categorie-travaux-serigraphie"],"acf":[],"_links":{"self":[{"href":"https:\/\/nobrainnogain.org\/graphiste\/wp-json\/wp\/v2\/projets\/3973","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nobrainnogain.org\/graphiste\/wp-json\/wp\/v2\/projets"}],"about":[{"href":"https:\/\/nobrainnogain.org\/graphiste\/wp-json\/wp\/v2\/types\/projets"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nobrainnogain.org\/graphiste\/wp-json\/wp\/v2\/media\/3635"}],"wp:attachment":[{"href":"https:\/\/nobrainnogain.org\/graphiste\/wp-json\/wp\/v2\/media?parent=3973"}],"wp:term":[{"taxonomy":"categorie-travaux","embeddable":true,"href":"https:\/\/nobrainnogain.org\/graphiste\/wp-json\/wp\/v2\/categorie-travaux?post=3973"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}