{"id":7,"date":"2026-08-11T18:35:49","date_gmt":"2026-08-11T18:35:49","guid":{"rendered":"https:\/\/www.clara-belbachir-garnier.fr\/?page_id=7"},"modified":"2026-09-22T14:56:25","modified_gmt":"2026-09-22T14:56:25","slug":"page-daccueil","status":"publish","type":"page","link":"https:\/\/www.clara-belbachir-garnier.fr\/","title":{"rendered":"PAGE D&rsquo;ACCUEIL"},"content":{"rendered":"\n<!-- ========================================================\n     CBG \/ ARCHIVE HEADER \u2014 DYNAMIC VERSION\n     ======================================================== -->\n\n<div class=\"cbg-archive-header\">\n\n    <div class=\"cbg-header-left\">\n        <span class=\"cbg-header-marker\"><\/span>\n        <span>CBG \/ VISUAL ARCHIVE<\/span>\n    <\/div>\n\n    <div class=\"cbg-header-center\">\n        <span class=\"cbg-header-line\"><\/span>\n        <span>IMAGE \/ EDITORIAL \/ DIRECTION<\/span>\n        <span class=\"cbg-header-line\"><\/span>\n    <\/div>\n\n    <div class=\"cbg-header-right\">\n        <span>2026<\/span>\n        <span class=\"cbg-header-index\">001<\/span>\n    <\/div>\n\n<\/div>\n\n\n<style>\n\n\/* =========================================================\n   CBG \u2014 DYNAMIC ARCHIVE HEADER\n   ========================================================= *\/\n\n.cbg-archive-header {\n\n    position: relative;\n\n    width: 100%;\n    min-height: 42px;\n\n    padding: 0 16px;\n\n    display: grid;\n    grid-template-columns: 1fr auto 1fr;\n\n    align-items: center;\n\n    box-sizing: border-box;\n\n    border-top: 1px solid rgba(0,0,0,.25);\n    border-bottom: 1px solid rgba(0,0,0,.25);\n\n    background: rgba(244,243,239,.72);\n\n    backdrop-filter: blur(2px);\n\n    font-family:\n        \"IBM Plex Mono\",\n        \"Courier New\",\n        monospace;\n\n    font-size: 8px;\n    line-height: 1;\n\n    letter-spacing: .13em;\n\n    text-transform: uppercase;\n\n    color: #111;\n\n    z-index: 100;\n\n    overflow: hidden;\n}\n\n\n\/* ---------------------------------------------------------\n   LEFT\n   --------------------------------------------------------- *\/\n\n.cbg-header-left {\n\n    display: flex;\n    align-items: center;\n    gap: 9px;\n\n    white-space: nowrap;\n}\n\n\n.cbg-header-marker {\n\n    width: 7px;\n    height: 7px;\n\n    display: inline-block;\n\n    background: #FFE600;\n\n    box-shadow:\n        0 0 0 1px #111;\n\n    animation:\n        cbg-header-blink\n        2.2s\n        steps(1)\n        infinite;\n}\n\n\n@keyframes cbg-header-blink {\n\n    0%,\n    48% {\n        opacity: 1;\n    }\n\n    50%,\n    53% {\n        opacity: .15;\n    }\n\n    55%,\n    100% {\n        opacity: 1;\n    }\n\n}\n\n\n\/* ---------------------------------------------------------\n   CENTER\n   --------------------------------------------------------- *\/\n\n.cbg-header-center {\n\n    display: flex;\n    align-items: center;\n    gap: 10px;\n\n    white-space: nowrap;\n\n    opacity: .72;\n}\n\n\n.cbg-header-line {\n\n    width: 24px;\n    height: 1px;\n\n    background: #111;\n\n    display: inline-block;\n\n    transform-origin: center;\n\n    animation:\n        cbg-header-line\n        3.5s\n        ease-in-out\n        infinite;\n}\n\n\n@keyframes cbg-header-line {\n\n    0%,\n    100% {\n        transform: scaleX(.45);\n        opacity: .35;\n    }\n\n    50% {\n        transform: scaleX(1);\n        opacity: .8;\n    }\n\n}\n\n\n\/* ---------------------------------------------------------\n   RIGHT\n   --------------------------------------------------------- *\/\n\n.cbg-header-right {\n\n    justify-self: end;\n\n    display: flex;\n    align-items: center;\n    gap: 13px;\n\n    white-space: nowrap;\n}\n\n\n.cbg-header-index {\n\n    padding-left: 10px;\n\n    border-left: 1px solid rgba(0,0,0,.25);\n\n    opacity: .45;\n}\n\n\n\/* ---------------------------------------------------------\n   MOVING SCAN LINE\n   --------------------------------------------------------- *\/\n\n.cbg-archive-header::after {\n\n    content: \"\";\n\n    position: absolute;\n\n    top: 0;\n    left: -15%;\n\n    width: 8%;\n    height: 100%;\n\n    background:\n        linear-gradient(\n            90deg,\n            transparent,\n            rgba(0,0,0,.055),\n            transparent\n        );\n\n    pointer-events: none;\n\n    animation:\n        cbg-header-scan\n        7s\n        linear\n        infinite;\n}\n\n\n@keyframes cbg-header-scan {\n\n    0% {\n        transform: translateX(0);\n    }\n\n    100% {\n        transform: translateX(1450%);\n    }\n\n}\n\n\n\/* ---------------------------------------------------------\n   MOBILE\n   --------------------------------------------------------- *\/\n\n@media (max-width: 700px) {\n\n    .cbg-archive-header {\n\n        grid-template-columns: 1fr auto;\n\n        min-height: 38px;\n\n        padding: 0 11px;\n\n        font-size: 7px;\n\n    }\n\n    .cbg-header-center {\n        display: none;\n    }\n\n    .cbg-header-left {\n        gap: 7px;\n    }\n\n    .cbg-header-marker {\n        width: 6px;\n        height: 6px;\n    }\n\n}\n\n\n\/* ---------------------------------------------------------\n   VERY SMALL\n   --------------------------------------------------------- *\/\n\n@media (max-width: 390px) {\n\n    .cbg-archive-header {\n\n        font-size: 6px;\n\n    }\n\n    .cbg-header-index {\n        display: none;\n    }\n\n}\n\n<\/style>\n\n\n\n<style>\n\/* =========================================================\n   GLOBAL BACKGROUND \u2014 ENTIRE PAGE\n   ========================================================= *\/\n\nhtml,\nbody {\n    background: #F4F3EF !important;\n    background-color: #F4F3EF !important;\n}\n\n\/* WordPress *\/\n#page,\n#content,\n.site,\n.site-content,\nmain,\narticle {\n    background: #F4F3EF !important;\n    background-color: #F4F3EF !important;\n}\n\n\/* Elementor \/ containers \u00e9ventuels *\/\n.elementor,\n.elementor-page,\n.elementor-section,\n.elementor-container,\n.elementor-widget-wrap,\n.e-con,\n.e-con-inner {\n    background-color: transparent !important;\n}\n\n\/* Force the HTML page itself *\/\nbody > * {\n    background-color: transparent;\n}\n\n\/* Keep the actual page background visible *\/\nbody {\n    min-height: 100vh;\n}\n\n\/* =========================================================\n   LIGHT SCANNER \/ PAPER BASE\n   ========================================================= *\/\n\nbody::before {\n    content: \"\";\n    position: fixed;\n    inset: 0;\n    z-index: -9999;\n    pointer-events: none;\n\n    background:\n        repeating-linear-gradient(\n            0deg,\n            rgba(0,0,0,0.018) 0px,\n            rgba(0,0,0,0.018) 1px,\n            transparent 1px,\n            transparent 4px\n        ),\n        #F4F3EF;\n}\n<\/style>\n\n\n\n<!-- =========================================================\n     CBG \u2014 GOTHIC FISH \/ SWORD\n     ========================================================= -->\n\n<section id=\"cbg-fish\">\n\n    <div class=\"cbg-fish-inner\">\n\n        \n\n        <div class=\"cbg-fish-stage\">\n\n            <!-- scan -->\n            <div class=\"cbg-fish-scan\"><\/div>\n\n            <!-- corner marks -->\n            <span class=\"cbg-fish-corner cbg-fish-tl\"><\/span>\n            <span class=\"cbg-fish-corner cbg-fish-tr\"><\/span>\n            <span class=\"cbg-fish-corner cbg-fish-bl\"><\/span>\n            <span class=\"cbg-fish-corner cbg-fish-br\"><\/span>\n\n            <!-- FISH + SWORD -->\n            <svg class=\"cbg-fish-svg\" viewBox=\"0 0 500 300\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" aria-label=\"Gothic fish holding a sword\" role=\"img\">\n\n                <!-- subtle ground -->\n                <line x1=\"105\" y1=\"245\" x2=\"395\" y2=\"245\" stroke=\"#111\" stroke-width=\"1\" opacity=\".35\"><\/line>\n\n                <!-- FISH -->\n                <g class=\"cbg-fish-character\">\n\n                    <!-- tail -->\n                    <path d=\"M155 145\n                           L95 105\n                           L108 150\n                           L95 195\n                           L155 165\n                           Z\" fill=\"#111\"><\/path>\n\n                    <!-- body -->\n                    <path d=\"M145 145\n                           C170 102 245 94 302 125\n                           C325 137 338 150 342 158\n                           C338 166 325 179 302 191\n                           C245 222 170 212 145 170\n                           C138 160 138 153 145 145\n                           Z\" fill=\"#111\"><\/path>\n\n                    <!-- dorsal fin -->\n                    <path d=\"M205 110\n                           L230 75\n                           L250 112\n                           Z\" fill=\"#111\"><\/path>\n\n                    <!-- lower fin -->\n                    <path d=\"M220 205\n                           L245 232\n                           L265 197\n                           Z\" fill=\"#111\"><\/path>\n\n                    <!-- eye -->\n                    <circle cx=\"292\" cy=\"145\" r=\"5\" fill=\"#F4F3EF\"><\/circle>\n\n                    <!-- tiny yellow pupil -->\n                    <circle cx=\"293\" cy=\"145\" r=\"2\" fill=\"#FFE600\"><\/circle>\n\n                    <!-- mouth -->\n                    <path d=\"M326 163\n                           Q337 168 345 162\" fill=\"none\" stroke=\"#F4F3EF\" stroke-width=\"2\"><\/path>\n\n                    <!-- fish arm -->\n                    <path d=\"M255 174\n                           Q275 193 300 181\" fill=\"none\" stroke=\"#F4F3EF\" stroke-width=\"7\" stroke-linecap=\"square\"><\/path>\n\n                    <!-- hand -->\n                    <rect x=\"295\" y=\"177\" width=\"13\" height=\"9\" fill=\"#111\"><\/rect>\n\n                <\/g>\n\n\n                <!-- SWORD -->\n                <g class=\"cbg-fish-sword\">\n\n                    <!-- blade -->\n                    <path d=\"M302 181\n                           L405 52\n                           L321 190\n                           Z\" fill=\"#111\"><\/path>\n\n                    <!-- blade highlight -->\n                    <path d=\"M314 180\n                           L399 61\" fill=\"none\" stroke=\"#F4F3EF\" stroke-width=\"2\" opacity=\".8\"><\/path>\n\n                    <!-- guard -->\n                    <rect x=\"286\" y=\"181\" width=\"43\" height=\"6\" rx=\"1\" fill=\"#111\" transform=\"rotate(-28 307 184)\"><\/rect>\n\n                    <!-- handle -->\n                    <rect x=\"300\" y=\"183\" width=\"9\" height=\"32\" fill=\"#111\" transform=\"rotate(-28 304 199)\"><\/rect>\n\n                    <!-- pommel -->\n                    <circle cx=\"297\" cy=\"214\" r=\"6\" fill=\"#111\"><\/circle>\n\n                    <!-- tiny yellow mark -->\n                    <rect x=\"298\" y=\"191\" width=\"5\" height=\"5\" fill=\"#FFE600\" transform=\"rotate(-28 300 193)\"><\/rect>\n\n                <\/g>\n\n            <\/svg>\n\n        <\/div>\n\n\n        <!-- NAME -->\n\n        <div class=\"cbg-fish-name\">\n            <span class=\"cbg-fish-pixel\">CLARA<\/span>\n            <span class=\"cbg-fish-gothic\">BELBACHIR<\/span>\n            <span class=\"cbg-fish-pixel\">GARNIER<\/span>\n        <\/div>\n\n\n        <div class=\"cbg-fish-footer\">\n            <span>IMAGE \/ DIRECTION \/ ARCHIVE<\/span>\n            <span>001 \u2014 003<\/span>\n        <\/div>\n\n    <\/div>\n\n<\/section>\n\n\n<style>\n\n\/* =========================================================\n   CBG FISH \u2014 FULLY ISOLATED\n   ========================================================= *\/\n\n#cbg-fish {\n    width: 100%;\n    box-sizing: border-box;\n\n    padding: 75px 15px 90px;\n\n    background: transparent !important;\n\n    color: #111;\n\n    overflow: hidden;\n\n    isolation: isolate;\n}\n\n\n#cbg-fish *,\n#cbg-fish *::before,\n#cbg-fish *::after {\n    box-sizing: border-box;\n}\n\n\n\/* =========================================================\n   INNER\n   ========================================================= *\/\n\n#cbg-fish .cbg-fish-inner {\n    width: 100%;\n    max-width: 650px;\n\n    margin: 0 auto;\n\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n}\n\n\n\/* =========================================================\n   META\n   ========================================================= *\/\n\n#cbg-fish .cbg-fish-meta {\n    width: 100%;\n\n    display: flex;\n    justify-content: space-between;\n\n    padding-bottom: 9px;\n    margin-bottom: 18px;\n\n    border-bottom: 1px solid rgba(0,0,0,.16);\n\n    font-family:\n        \"Courier New\",\n        monospace;\n\n    font-size: 8px;\n    line-height: 1;\n\n    letter-spacing: .14em;\n\n    text-transform: uppercase;\n}\n\n\n\/* =========================================================\n   STAGE\n   ========================================================= *\/\n\n#cbg-fish .cbg-fish-stage {\n    position: relative;\n\n    width: min(500px, 92vw);\n    aspect-ratio: 5 \/ 3;\n\n    background: #EAE9E4 !important;\n\n    border: 1px solid #111;\n\n    overflow: hidden;\n}\n\n\n\/* =========================================================\n   SCAN\n   ========================================================= *\/\n\n#cbg-fish .cbg-fish-scan {\n    position: absolute;\n\n    inset: 0;\n\n    z-index: 10;\n\n    pointer-events: none;\n\n    background:\n        repeating-linear-gradient(\n            0deg,\n            rgba(0,0,0,.035) 0px,\n            rgba(0,0,0,.035) 1px,\n            transparent 1px,\n            transparent 5px\n        );\n\n    opacity: .8;\n}\n\n\n\/* =========================================================\n   CORNERS\n   ========================================================= *\/\n\n#cbg-fish .cbg-fish-corner {\n    position: absolute;\n\n    width: 10px;\n    height: 10px;\n\n    z-index: 20;\n}\n\n#cbg-fish .cbg-fish-corner::before,\n#cbg-fish .cbg-fish-corner::after {\n    content: \"\";\n\n    position: absolute;\n\n    background: #111;\n}\n\n#cbg-fish .cbg-fish-corner::before {\n    width: 1px;\n    height: 10px;\n}\n\n#cbg-fish .cbg-fish-corner::after {\n    width: 10px;\n    height: 1px;\n}\n\n#cbg-fish .cbg-fish-tl {\n    top: 9px;\n    left: 9px;\n}\n\n#cbg-fish .cbg-fish-tr {\n    top: 9px;\n    right: 9px;\n    transform: rotate(90deg);\n}\n\n#cbg-fish .cbg-fish-bl {\n    bottom: 9px;\n    left: 9px;\n    transform: rotate(-90deg);\n}\n\n#cbg-fish .cbg-fish-br {\n    bottom: 9px;\n    right: 9px;\n    transform: rotate(180deg);\n}\n\n\n\/* =========================================================\n   SVG\n   ========================================================= *\/\n\n#cbg-fish .cbg-fish-svg {\n    position: absolute;\n\n    width: 100%;\n    height: 100%;\n\n    inset: 0;\n\n    display: block;\n\n    image-rendering: pixelated;\n\n    z-index: 5;\n}\n\n\n\/* =========================================================\n   ANIMATION\n   ========================================================= *\/\n\n#cbg-fish .cbg-fish-character {\n    transform-origin: 250px 160px;\n\n    animation:\n        cbg-fish-float\n        4s\n        ease-in-out\n        infinite;\n}\n\n#cbg-fish .cbg-fish-sword {\n    transform-origin: 300px 190px;\n\n    animation:\n        cbg-fish-sword\n        4s\n        ease-in-out\n        infinite;\n}\n\n\n@keyframes cbg-fish-float {\n\n    0% {\n        transform: translateY(0);\n    }\n\n    50% {\n        transform: translateY(-4px);\n    }\n\n    100% {\n        transform: translateY(0);\n    }\n\n}\n\n\n@keyframes cbg-fish-sword {\n\n    0% {\n        transform: rotate(0deg);\n    }\n\n    50% {\n        transform: rotate(-2deg);\n    }\n\n    100% {\n        transform: rotate(0deg);\n    }\n\n}\n\n\n\/* =========================================================\n   NAME\n   ========================================================= *\/\n\n#cbg-fish .cbg-fish-name {\n    margin-top: 18px;\n\n    display: flex;\n    align-items: baseline;\n    justify-content: center;\n\n    gap: 11px;\n\n    width: 100%;\n\n    white-space: nowrap;\n}\n\n\n#cbg-fish .cbg-fish-pixel {\n    font-family:\n        \"Courier New\",\n        monospace;\n\n    font-size: 22px;\n    font-weight: 700;\n\n    letter-spacing: .08em;\n}\n\n\n#cbg-fish .cbg-fish-gothic {\n    font-family:\n        \"Times New Roman\",\n        Times,\n        serif;\n\n    font-size: 28px;\n    font-style: italic;\n\n    letter-spacing: -.03em;\n}\n\n\n\/* =========================================================\n   FOOTER\n   ========================================================= *\/\n\n#cbg-fish .cbg-fish-footer {\n    width: 100%;\n\n    margin-top: 10px;\n    padding-top: 8px;\n\n    border-top: 1px solid rgba(0,0,0,.12);\n\n    display: flex;\n    justify-content: space-between;\n\n    font-family:\n        \"Courier New\",\n        monospace;\n\n    font-size: 7px;\n\n    line-height: 1;\n\n    letter-spacing: .12em;\n\n    text-transform: uppercase;\n}\n\n\n\/* =========================================================\n   MOBILE\n   ========================================================= *\/\n\n@media screen and (max-width: 600px) {\n\n    #cbg-fish {\n        padding: 50px 10px 70px;\n    }\n\n    #cbg-fish .cbg-fish-stage {\n        width: 94vw;\n    }\n\n    #cbg-fish .cbg-fish-name {\n        gap: 6px;\n    }\n\n    #cbg-fish .cbg-fish-pixel {\n        font-size: 17px;\n    }\n\n    #cbg-fish .cbg-fish-gothic {\n        font-size: 21px;\n    }\n\n    #cbg-fish .cbg-fish-footer {\n        font-size: 6px;\n    }\n\n}\n\n@media screen and (max-width: 380px) {\n\n    #cbg-fish .cbg-fish-name {\n        gap: 4px;\n    }\n\n    #cbg-fish .cbg-fish-pixel {\n        font-size: 15px;\n    }\n\n    #cbg-fish .cbg-fish-gothic {\n        font-size: 18px;\n    }\n\n}\n\n<\/style>\n\n\n\n<div style=\"height:182px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<style data-wp-block-html=\"css\">\n\/* =========================================================\n   CLARA \u2014 SCANNER \/ PHOTOCOPY PAPER BACKGROUND\n   Remplace le fond lilas par une texture \u00e9ditoriale\n   ========================================================= *\/\n\nhtml,\nbody {\n    background: #f1f0ec !important;\n}\n\n\/* Couche principale de mati\u00e8re *\/\nbody::before {\n    content: \"\";\n    position: fixed;\n    inset: 0;\n    z-index: -9999;\n    pointer-events: none;\n\n    background:\n        \/* petites variations de lumi\u00e8re *\/\n        radial-gradient(\n            circle at 18% 22%,\n            rgba(255,255,255,0.42) 0,\n            rgba(255,255,255,0) 28%\n        ),\n\n        radial-gradient(\n            circle at 78% 68%,\n            rgba(0,0,0,0.035) 0,\n            rgba(0,0,0,0) 30%\n        ),\n\n        \/* trame tr\u00e8s fine de photocopie *\/\n        repeating-linear-gradient(\n            0deg,\n            rgba(0,0,0,0.018) 0px,\n            rgba(0,0,0,0.018) 1px,\n            transparent 1px,\n            transparent 4px\n        ),\n\n        \/* seconde trame d\u00e9cal\u00e9e *\/\n        repeating-linear-gradient(\n            90deg,\n            rgba(255,255,255,0.035) 0px,\n            rgba(255,255,255,0.035) 1px,\n            transparent 1px,\n            transparent 5px\n        ),\n\n        #f1f0ec;\n\n    opacity: 0.95;\n    mix-blend-mode: multiply;\n}\n\n\n\/* Grain photocopie *\/\nbody::after {\n    content: \"\";\n    position: fixed;\n    inset: -50%;\n    z-index: -9998;\n    pointer-events: none;\n\n    background-image:\n        radial-gradient(\n            rgba(0,0,0,0.13) 0.55px,\n            transparent 0.65px\n        );\n\n    background-size: 4px 4px;\n\n    opacity: 0.12;\n    mix-blend-mode: multiply;\n\n    transform: rotate(0.2deg);\n}\n\n\n\/* =========================================================\n   FORCE LES SECTIONS ELEMENTOR \u00c0 RESTER TRANSPARENTES\n   ========================================================= *\/\n\n.elementor,\n.elementor-section,\n.elementor-container,\n.elementor-widget-wrap,\n.elementor-element {\n    background-color: transparent !important;\n}\n\n\n\/* =========================================================\n   PETITE VARIATION DE TEXTURE AU SURVOL\n   ========================================================= *\/\n\nbody::before {\n    animation: scannerPaper 18s ease-in-out infinite alternate;\n}\n\n@keyframes scannerPaper {\n    0% {\n        transform: translate(0, 0);\n    }\n\n    50% {\n        transform: translate(-1px, 1px);\n    }\n\n    100% {\n        transform: translate(1px, -1px);\n    }\n}\n\n\n\/* =========================================================\n   MOBILE\n   ========================================================= *\/\n\n@media (max-width: 768px) {\n\n    body::before {\n        opacity: 0.9;\n    }\n\n    body::after {\n        opacity: 0.09;\n    }\n\n}\n<\/style>\n\n\n\n<style data-wp-block-html=\"css\">\n\/* --- 1. IMPORTS TYPOS --- *\/\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Syne:wght@700&family=VT323&display=swap');\n\n\/* Masquer les \u00e9l\u00e9ments d'ent\u00eate WP *\/\nheader, site-header, .site-header, .wp-block-template-part, nav.main-navigation, .entry-title, .page-title, h1.wp-block-post-title {\n    display: none !important;\n}\n\n\/* --- 2. CONFIGURATION GLOBALE --- *\/\nhtml, body {\n    margin: 0 !important;\n    padding: 0 !important;\n    overflow-x: hidden;\n    scroll-behavior: smooth;\n}\n\nbody {\n    background: linear-gradient(135deg, #c3d5ff, #fbd3e9, #e0c3fc, #c3d5ff) !important;\n    background-size: 400% 400% !important;\n    animation: gradientFlow 15s ease infinite !important;\n    font-family: 'Syne', sans-serif !important;\n}\n\n@keyframes gradientFlow {\n    0% { background-position: 0% 50%; }\n    50% { background-position: 100% 50%; }\n    100% { background-position: 0% 50%; }\n}\n\nbody::before {\n    content: \"\";\n    position: fixed;\n    top: 0; left: 0;\n    width: 100vw; height: 100vh;\n    background-image: url(\"data:image\/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http:\/\/www.w3.org\/2000\/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'\/%3E%3C\/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.22'\/%3E%3C\/svg%3E\");\n    pointer-events: none;\n    z-index: 10;\n}\n\n\/* PARTICULES PIXEL FLOTTANTES *\/\n.pixel-bg-container {\n    position: fixed;\n    top: 0; left: 0;\n    width: 100vw; height: 100vh;\n    pointer-events: none;\n    z-index: 2;\n    overflow: hidden;\n}\n\n.pixel-particle {\n    position: absolute;\n    width: 10px; height: 10px;\n    background: rgba(255, 255, 255, 0.45);\n    box-shadow: 0 0 8px rgba(255, 255, 255, 0.8);\n    bottom: -20px;\n    animation: floatPixels 8s linear infinite;\n}\n\n.px-1 { left: 12%; width: 14px; height: 14px; animation-duration: 9s; animation-delay: 0s; }\n.px-2 { left: 28%; width: 8px; height: 8px; animation-duration: 6s; animation-delay: 2s; }\n.px-3 { left: 48%; width: 12px; height: 12px; animation-duration: 11s; animation-delay: 1s; }\n.px-4 { left: 68%; width: 10px; height: 10px; animation-duration: 7s; animation-delay: 4s; }\n.px-5 { left: 85%; width: 16px; height: 16px; animation-duration: 10s; animation-delay: 3s; }\n\n@keyframes floatPixels {\n    0% { transform: translateY(0) rotate(0deg); opacity: 0; }\n    20% { opacity: 0.8; }\n    80% { opacity: 0.8; }\n    100% { transform: translateY(-105vh) rotate(360deg); opacity: 0; }\n}\n\n\/* --- SECTION 1 : HERO (R\u00c9HAUSS\u00c9E ET CENTR\u00c9E) --- *\/\n.section-hero-flash {\n    height: 100vh;\n    width: 100vw;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    position: relative;\n    z-index: 5;\n}\n\n.hero-layout {\n    display: grid;\n    grid-template-columns: 1fr auto 1fr;\n    align-items: center;\n    justify-items: center;\n    gap: 30px;\n    width: 95vw;\n    max-width: 1400px;\n    height: 78vh;\n    margin-top: -300px; \/* <--- R\u00c9HAUSSE TOUT LE BLOC VERS LE HAUT *\/\nmargin-left : 0 ; \n}\n\n\/* COLONNES VERTICALES DE MOTS *\/\n.side-words-column {\n    display: flex;\n    flex-direction: column;\n    justify-content: space-between;\n    height: 100%;\n    width: 100%;\n}\n\n.side-words-column.left {\n    align-items: flex-end;\n}\n\n.side-words-column.right {\n    align-items: flex-start;\n}\n\n.column-word {\n    font-family: 'VT323', monospace !important;\n    font-size: 3.2rem;\n    color: #ffffff;\n    text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.2), 0 0 12px rgba(255, 255, 255, 0.6);\n    letter-spacing: 0.08em;\n    text-transform: uppercase;\n    margin: 0;\n    line-height: 1;\n    opacity: 0;\n    transform: translateY(12px);\n    \/* Transition plus lente (0.6 secondes au lieu de 0.15s) *\/\n    transition: opacity 0.6s ease-in-out, transform 0.6s ease-in-out;\n}\n\n.column-word.visible {\n    opacity: 1;\n    transform: translateY(0);\n    \/* Une fois visible, on d\u00e9clenche un clignotement doux en boucle *\/\n    animation: wordBlink 1.5s infinite ease-in-out;\n}\n\n\/* Animation du clignotement *\/\n@keyframes wordBlink {\n    0%, 100% { opacity: 1; }\n    50% { opacity: 0.4; } \/* S'estompe l\u00e9g\u00e8rement \u00e0 moiti\u00e9 avant de revenir *\/\n}\n\n\/* On garde ton style rose et g\u00e9ant pour EXPERIMENTAL \u00e0 gauche *\/\n.side-words-column.left .column-word {\n    font-size: 5.5rem !important;\n    color: #ff007f !important;\n    text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.3), 0 0 15px rgba(255, 0, 127, 0.6) !important;\n}\n\n\/* EXPERIMENTAL \u00e0 gauche : BEAUCOUP plus gros et ROSE *\/\n.side-words-column.left .column-word {\n    font-size: 5.5rem !important; \/* <--- Augmente ou r\u00e9duit cette taille si tu veux encore plus gros *\/\n    color: #ff007f !important; \/* <--- Couleur rose vif *\/\n    text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.3), 0 0 15px rgba(255, 0, 127, 0.6) !important;\n}\n\n.column-word.visible {\n    opacity: 1;\n    transform: translateY(0);\n}\n\n\/* DIAPORAMA CENTR\u00c9 *\/\n.flash-container {\n    position: relative;\n    width: 32vw;\n    max-width: 460px;\n    height: 100%;\n    flex-shrink: 0;\n}\n\n.flash-image {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n    border-radius: 0 !important;\n    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.25);\n    opacity: 0;\n    transition: opacity 0.05s ease-in-out;\n}\n\n.flash-image.active {\n    opacity: 1;\n}\n\n\/* Indication de Scroll *\/\n.scroll-indicator {\n    position: absolute;\n    bottom: 25px;\n    left: 50%;\n    transform: translateX(-50%);\n    font-family: 'VT323', monospace;\n    font-size: 1.6rem;\n    color: #ffffff;\n    opacity: 0.85;\n    animation: bounce 2s infinite;\n}\n\n@keyframes bounce {\n    0%, 20%, 50%, 80%, 100% { transform: translateY(0) translateX(-50%); }\n    40% { transform: translateY(-8px) translateX(-50%); }\n    60% { transform: translateY(-4px) translateX(-50%); }\n}\n\n\/* --- SECTION 2 : BLOC DE COMP\u00c9TENCES COD\u00c9 --- *\/\n.section-text-code {\n    min-height: 80vh;\n    width: 100vw;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    position: relative;\n    z-index: 5;\n    padding: 40px 20px;\n    box-sizing: border-box;\n}\n\n.hero-typography-container {\n    max-width: 850px;\n    text-align: center;\n}\n\n.hero-text {\n    font-size: 2.1rem;\n    line-height: 1.5;\n    color: #ffffff;\n    text-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);\n    margin: 0;\n}\n\n.pixel-italic {\n    font-family: 'VT323', monospace !important;\n    font-size: 2.7rem;\n    font-weight: 400;\n    letter-spacing: 0.02em;\n    color: #ffffff;\n    text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.15), 0 0 10px rgba(255, 255, 255, 0.5);\n    display: inline-block;\n    padding: 0 4px;\n}\n\n.code-tag {\n    font-family: 'VT323', monospace !important;\n    font-size: 1.6rem;\n    color: #ff007f;\n    background: rgba(255, 255, 255, 0.2);\n    padding: 2px 6px;\n    border-radius: 4px;\n    vertical-align: middle;\n}\n\n.code-cursor {\n    display: inline-block;\n    font-family: 'VT323', monospace;\n    font-size: 2.3rem;\n    color: #ffffff;\n    animation: blink 0.6s infinite;\n}\n\n@keyframes blink {\n    0%, 100% { opacity: 1; }\n    50% { opacity: 0; }\n}\n\n.wp-site-blocks, main, header, footer { background-color: transparent !important; }\n\n@media (max-width: 1024px) {\n    .side-words-column { display: none; }\n    .hero-layout { grid-template-columns: 1fr; margin-top: 0; }\n    .flash-container { width: 85vw; height: 55vh; }\n    .hero-text { font-size: 1.8rem; }\n    .pixel-italic { font-size: 2.3rem; }\n}\n<\/style>\n\n<style>\nhtml, body {\n    background: #F4F3EF !important;\n}\n\nbody * {\n    --e-global-color-primary: #000000 !important;\n}\n\n\/* Tous les conteneurs de la page *\/\nsection,\ndiv,\nmain,\narticle,\nheader,\nfooter {\n    background-color: transparent !important;\n}\n\n\/* Fond g\u00e9n\u00e9ral *\/\nbody {\n    background: #F4F3EF !important;\n}\n\n\/* Neutralise explicitement les fonds lilas courants *\/\n[style*=\"background\"],\n[style*=\"background-color\"] {\n    background-color: transparent !important;\n}\n\n\/* On remet notre fond derri\u00e8re absolument tout *\/\nbody::after {\n    content: \"\";\n    position: fixed;\n    inset: 0;\n    z-index: -10000;\n    background: #F4F3EF;\n    pointer-events: none;\n}\n<\/style>\n<style>\n\n\/* =========================================================\n   CB \u2014 HERO \/ ARCHIVE \/ SCAN\n   ========================================================= *\/\n\n#cbg-hero {\n  position: relative !important;\n  isolation: isolate !important;\n\n  width: 100% !important;\n\n  background: #f4f3ef !important;\n\n  color: #111 !important;\n\n  padding: 0 !important;\n\n  \/*\n  FORCE LE FOND IVOIRE \u00c0 D\u00c9BORDER\n  DU CONTENEUR ELEMENTOR\n  *\/\n  box-shadow:\n    0 0 0 100vmax #f4f3ef !important;\n\n  clip-path: inset(0 -100vmax);\n\n  \/*\n  ESPACE AVEC LE BLOC SUIVANT\n  *\/\n  margin-bottom: 110px !important;\n}\n\n\n\/* =========================================================\n   CONTENU\n   ========================================================= *\/\n\n.cbg-hero-inner {\n  position: relative !important;\n  z-index: 2 !important;\n\n  width: 100% !important;\n  max-width: 1550px !important;\n\n  margin: 0 auto !important;\n\n  padding:\n    30px\n    35px\n    0 !important;\n\n  box-sizing: border-box !important;\n}\n\n\n\/* =========================================================\n   IMAGE + TEXTE\n   ========================================================= *\/\n\n.cbg-main-row {\n  display: grid !important;\n\n  grid-template-columns:\n    minmax(0, 1fr)\n    250px !important;\n\n  gap: 45px !important;\n\n  align-items: stretch !important;\n\n  \/*\n  HAUTEUR FIXE :\n  LE HERO NE BOUGE PLUS\n  *\/\n  height: min(72vh, 780px) !important;\n}\n\n\n\/* =========================================================\n   SLIDESHOW\n   ========================================================= *\/\n\n.cbg-slideshow {\n\n  position: relative !important;\n\n  width: 100% !important;\n  height: 100% !important;\n\n  min-width: 0 !important;\n\n  background: #e7e5df !important;\n\n  border: 1px solid #111 !important;\n\n  overflow: hidden !important;\n\n  box-sizing: border-box !important;\n}\n\n\n\/*\nTOUTES LES IMAGES SONT DANS LE M\u00caME CADRE.\nAUCUNE NE PEUT CHANGER LA HAUTEUR DU HERO.\n*\/\n\n.cbg-slide {\n\n  display: none !important;\n\n  position: absolute !important;\n\n  top: 0 !important;\n  left: 0 !important;\n\n  width: 100% !important;\n  height: 100% !important;\n\n  max-width: none !important;\n\n  \/*\n  IMPORTANT :\n  IMAGE ENTI\u00c8REMENT VISIBLE\n  *\/\n  object-fit: contain !important;\n\n  object-position: center center !important;\n\n  margin: 0 !important;\n  padding: 0 !important;\n\n  background: #e7e5df !important;\n}\n\n\n.cbg-slide.active {\n  display: block !important;\n}\n\n\n\/* =========================================================\n   SCAN \u2014 VERSION PLUS FORTE\n   ========================================================= *\/\n\n.cbg-scan {\n\n  position: absolute !important;\n\n  inset: 0 !important;\n\n  z-index: 10 !important;\n\n  pointer-events: none !important;\n\n  \/*\n  SCAN LINES\n  *\/\n  background:\n    repeating-linear-gradient(\n      to bottom,\n\n      rgba(0,0,0,0.16) 0px,\n      rgba(0,0,0,0.16) 1px,\n\n      transparent 1px,\n      transparent 4px\n    ) !important;\n\n  mix-blend-mode: multiply !important;\n\n  opacity: 0.55 !important;\n}\n\n\n\/*\nDEUXI\u00c8ME TRAME\n*\/\n\n.cbg-scan::before {\n\n  content: \"\";\n\n  position: absolute;\n\n  inset: 0;\n\n  background:\n    repeating-linear-gradient(\n      to bottom,\n\n      transparent 0px,\n      transparent 9px,\n\n      rgba(0,0,0,0.08) 10px,\n      transparent 11px\n    );\n\n  opacity: 0.8;\n}\n\n\n\/*\nGRAIN PHOTOCOPIE\n*\/\n\n.cbg-scan::after {\n\n  content: \"\";\n\n  position: absolute;\n\n  inset: -20%;\n\n  background-image:\n    radial-gradient(\n      rgba(0,0,0,0.20) 0.65px,\n      transparent 0.8px\n    );\n\n  background-size: 3px 3px;\n\n  opacity: 0.32;\n\n  pointer-events: none;\n}\n\n\n\/*\nL\u00c9G\u00c8RE D\u00c9GRADATION PHOTOCOPIE\n*\/\n\n.cbg-slideshow::after {\n\n  content: \"\";\n\n  position: absolute;\n\n  inset: 0;\n\n  z-index: 11;\n\n  pointer-events: none;\n\n  background:\n    linear-gradient(\n      90deg,\n\n      rgba(0,0,0,0.08),\n      transparent 12%,\n      transparent 88%,\n      rgba(0,0,0,0.06)\n    );\n\n  mix-blend-mode: multiply;\n}\n\n\n\/* =========================================================\n   TEXTE \u00c0 DROITE\n   ========================================================= *\/\n\n.cbg-skills {\n\n  min-width: 0 !important;\n\n  height: 100% !important;\n\n  display: flex !important;\n\n  flex-direction: column !important;\n\n  justify-content: flex-end !important;\n\n  box-sizing: border-box !important;\n\n  padding-bottom: 0 !important;\n}\n\n\n.cbg-skills-label {\n\n  font-family:\n    \"IBM Plex Mono\",\n    \"Courier New\",\n    monospace !important;\n\n  font-size: 9px !important;\n\n  letter-spacing: 0.15em !important;\n\n  text-transform: uppercase !important;\n\n  border-top: 1px solid #111 !important;\n\n  padding-top: 8px !important;\n\n  margin-bottom: 20px !important;\n}\n\n\n\/*\nIMPORTANT :\nZONE DE TEXTE FIXE\nDONC AUCUN SAUT DE HAUTEUR\n*\/\n\n#cbg-skill-word {\n\n  display: block !important;\n\n  width: 100% !important;\n\n  height: 100px !important;\n\n  min-height: 100px !important;\n\n  overflow: hidden !important;\n\n  font-family:\n    \"Helvetica Neue\",\n    Helvetica,\n    Arial,\n    sans-serif !important;\n\n  font-size:\n    clamp(25px, 2.5vw, 40px) !important;\n\n  line-height: 0.95 !important;\n\n  font-weight: 500 !important;\n\n  letter-spacing: -0.045em !important;\n\n  text-transform: uppercase !important;\n}\n\n\n\/*\nCURSEUR\n*\/\n\n#cbg-skill-word::after {\n\n  content: \"\u258c\";\n\n  font-family:\n    \"Courier New\",\n    monospace;\n\n  font-size: 0.6em;\n\n  margin-left: 4px;\n\n  animation:\n    cbg-blink 0.7s steps(1) infinite;\n}\n\n\n@keyframes cbg-blink {\n\n  0%,\n  50% {\n    opacity: 1;\n  }\n\n  51%,\n  100% {\n    opacity: 0;\n  }\n}\n\n\n\/* =========================================================\n   INFOS\n   ========================================================= *\/\n\n.cbg-meta {\n\n  margin-top: 25px !important;\n\n  font-family:\n    \"IBM Plex Mono\",\n    \"Courier New\",\n    monospace !important;\n\n  font-size: 8px !important;\n\n  line-height: 1.5 !important;\n\n  text-transform: uppercase !important;\n\n  letter-spacing: 0.08em !important;\n\n  opacity: 0.7 !important;\n}\n\n\n.cbg-meta span {\n  display: block !important;\n}\n\n\n\/* =========================================================\n   \u00c9TOILES JAUNES\n   ========================================================= *\/\n\n.cbg-star {\n\n  position: absolute !important;\n\n  z-index: 20 !important;\n\n  color: #ffe600 !important;\n\n  font-family: monospace !important;\n\n  font-size: 16px !important;\n\n  pointer-events: none !important;\n}\n\n\n\/* =========================================================\n   SCROLL\n   ========================================================= *\/\n\n.cbg-scroll {\n\n  display: flex !important;\n\n  justify-content: space-between !important;\n\n  align-items: center !important;\n\n  margin-top: 28px !important;\n\n  padding-top: 8px !important;\n\n  border-top: 1px solid #111 !important;\n\n  font-family:\n    \"IBM Plex Mono\",\n    \"Courier New\",\n    monospace !important;\n\n  font-size: 8px !important;\n\n  letter-spacing: 0.12em !important;\n\n  text-transform: uppercase !important;\n}\n\n\n\/* =========================================================\n   TABLET\n   ========================================================= *\/\n\n@media (max-width: 900px) {\n\n  .cbg-main-row {\n\n    grid-template-columns:\n      minmax(0, 1fr)\n      190px !important;\n\n    gap: 25px !important;\n\n    height: 65vh !important;\n  }\n\n  .cbg-hero-inner {\n\n    padding-left: 20px !important;\n    padding-right: 20px !important;\n  }\n\n  #cbg-skill-word {\n\n    font-size: 25px !important;\n\n  }\n}\n\n\n\/* =========================================================\n   MOBILE\n   ========================================================= *\/\n\n@media (max-width: 650px) {\n\n  #cbg-hero {\n\n    margin-bottom: 80px !important;\n  }\n\n\n  .cbg-hero-inner {\n\n    padding:\n      15px\n      12px\n      0 !important;\n  }\n\n\n  \/*\n  TEXTE AU-DESSUS\n  *\/\n\n  .cbg-main-row {\n\n    display: flex !important;\n\n    flex-direction: column !important;\n\n    height: auto !important;\n\n    gap: 14px !important;\n  }\n\n\n  .cbg-skills {\n\n    order: -1 !important;\n\n    width: 100% !important;\n\n    height: 78px !important;\n\n    min-height: 78px !important;\n\n    flex-shrink: 0 !important;\n\n    display: block !important;\n  }\n\n\n  .cbg-skills-label {\n\n    margin-bottom: 7px !important;\n  }\n\n\n  #cbg-skill-word {\n\n    height: 48px !important;\n\n    min-height: 48px !important;\n\n    font-size: 25px !important;\n\n    line-height: 0.95 !important;\n  }\n\n\n  .cbg-meta {\n\n    display: none !important;\n  }\n\n\n  \/*\n  CADRE IMAGE FIXE\n  *\/\n\n  .cbg-slideshow {\n\n    width: 100% !important;\n\n    height: 68vh !important;\n\n    min-height: 420px !important;\n\n    max-height: 650px !important;\n\n    flex-shrink: 0 !important;\n  }\n\n\n  .cbg-slide {\n\n    object-fit: contain !important;\n  }\n\n\n  .cbg-scroll {\n\n    margin-top: 18px !important;\n  }\n\n\n  .cbg-star {\n\n    font-size: 12px !important;\n  }\n}\n\n\n\/* =========================================================\n   PETIT MOBILE\n   ========================================================= *\/\n\n@media (max-width: 380px) {\n\n  .cbg-slideshow {\n\n    height: 62vh !important;\n\n    min-height: 380px !important;\n  }\n\n  #cbg-skill-word {\n\n    font-size: 22px !important;\n  }\n\n}\n\n<\/style>\n\n\n<section id=\"cbg-hero\">\n\n  <div class=\"cbg-hero-inner\">\n\n    <div class=\"cbg-main-row\">\n\n\n      <!-- =================================================\n           SLIDESHOW\n           ================================================= -->\n\n      <div class=\"cbg-slideshow\" id=\"cbg-slideshow\">\n\n        <img decoding=\"async\" class=\"cbg-slide active\" src=\"http:\/\/www.clara-belbachir-garnier.fr\/wp-content\/uploads\/2026\/08\/MAGAZINE_JALOUSIE18.png\" alt=\"\">\n\n        <img decoding=\"async\" class=\"cbg-slide\" src=\"http:\/\/www.clara-belbachir-garnier.fr\/wp-content\/uploads\/2026\/08\/MAGAZINE_JALOUSIE26.png\" alt=\"\">\n\n        <img decoding=\"async\" class=\"cbg-slide\" src=\"http:\/\/www.clara-belbachir-garnier.fr\/wp-content\/uploads\/2026\/08\/masque-internet.jpg\" alt=\"\">\n\n        <img decoding=\"async\" class=\"cbg-slide\" src=\"http:\/\/www.clara-belbachir-garnier.fr\/wp-content\/uploads\/2026\/08\/dac982cc56ea3b6f0c2a6aa74ef5e054.jpg\" alt=\"\">\n\n        <img decoding=\"async\" class=\"cbg-slide\" src=\"http:\/\/www.clara-belbachir-garnier.fr\/wp-content\/uploads\/2026\/08\/lemia-asset-7-scaled.png\" alt=\"\">\n\n        <img decoding=\"async\" class=\"cbg-slide\" src=\"http:\/\/www.clara-belbachir-garnier.fr\/wp-content\/uploads\/2026\/08\/lemia-set5-scaled.png\" alt=\"\">\n\n        <img decoding=\"async\" class=\"cbg-slide\" src=\"http:\/\/www.clara-belbachir-garnier.fr\/wp-content\/uploads\/2026\/08\/TETEJV.webp\" alt=\"\">\n\n        <img decoding=\"async\" class=\"cbg-slide\" src=\"http:\/\/www.clara-belbachir-garnier.fr\/wp-content\/uploads\/2026\/08\/COVERRIKILL.png\" alt=\"\">\n\n        <img decoding=\"async\" class=\"cbg-slide\" src=\"http:\/\/www.clara-belbachir-garnier.fr\/wp-content\/uploads\/2026\/08\/rikill-chaise-V2.png\" alt=\"\">\n\n        <img decoding=\"async\" class=\"cbg-slide\" src=\"http:\/\/www.clara-belbachir-garnier.fr\/wp-content\/uploads\/2026\/08\/OPHELIE_SCIARPA_SOLO-Recupere.png\" alt=\"\">\n\n        <img decoding=\"async\" class=\"cbg-slide\" src=\"http:\/\/www.clara-belbachir-garnier.fr\/wp-content\/uploads\/2026\/08\/ASSET_5_LEMIA_SERRURE-scaled.jpg\" alt=\"\">\n\n        <img decoding=\"async\" class=\"cbg-slide\" src=\"http:\/\/www.clara-belbachir-garnier.fr\/wp-content\/uploads\/2026\/08\/SCIARPA.2.png\" alt=\"\">\n\n        <img decoding=\"async\" class=\"cbg-slide\" src=\"http:\/\/www.clara-belbachir-garnier.fr\/wp-content\/uploads\/2026\/08\/SCIARPA.4-copie-scaled.png\" alt=\"\">\n\n\n        <!-- SCAN -->\n\n        <div class=\"cbg-scan\"><\/div>\n\n\n        <!-- STARS -->\n\n        <span class=\"cbg-star\">\u205c<\/span>\n        <span class=\"cbg-star\">\u205c<\/span>\n        <span class=\"cbg-star\">\u205c<\/span>\n        <span class=\"cbg-star\">\u205c<\/span>\n\n      <\/div>\n\n\n      <!-- =================================================\n           TEXTE\n           ================================================= -->\n\n      <div class=\"cbg-skills\">\n\n        <div class=\"cbg-skills-label\">\n          \/ CAPABILITIES \/ 001\u2014009\n        <\/div>\n\n        <div id=\"cbg-skill-word\"><\/div>\n\n        <div class=\"cbg-meta\">\n\n          <span>\n            Creative Direction\n          <\/span>\n\n          <span>\n            Editorial \/ Image\n          <\/span>\n\n          <span>\n            Strategy \/ Production\n          <\/span>\n\n        <\/div>\n\n      <\/div>\n\n    <\/div>\n\n\n    <!-- =================================================\n         SCROLL\n         ================================================= -->\n\n    <div class=\"cbg-scroll\">\n\n      <span>\n        Scroll to explore\n      <\/span>\n\n      <span>\n        \u2193\n      <\/span>\n\n    <\/div>\n\n  <\/div>\n\n<\/section>\n\n\n<script>\n\n(function(){\n\n  \/* =====================================================\n     SLIDESHOW\n     ===================================================== *\/\n\n  const slides =\n    document.querySelectorAll(\n      \"#cbg-hero .cbg-slide\"\n    );\n\n  let current = 0;\n\n\n  function showSlide(index){\n\n    slides.forEach(function(slide, i){\n\n      slide.classList.toggle(\n        \"active\",\n        i === index\n      );\n\n    });\n\n  }\n\n\n  \/*\n  RAPIDE COMME AVANT\n  MAIS SANS JAMAIS MODIFIER\n  LA HAUTEUR DU CONTENEUR\n  *\/\n\n  setInterval(function(){\n\n    current++;\n\n    if(current >= slides.length){\n      current = 0;\n    }\n\n    showSlide(current);\n\n  }, 120);\n\n\n  \/* =====================================================\n     TYPEWRITER\n     ===================================================== *\/\n\n  const skills = [\n\n    \"Copywriting\",\n    \"Storytelling\",\n    \"Creative Direction\",\n    \"Brand Content\",\n    \"Editorial Layers\",\n    \"Visual Research\",\n    \"Shooting Production\",\n    \"E-commerce\",\n    \"Fashion Photography\"\n\n  ];\n\n\n  const target =\n    document.getElementById(\n      \"cbg-skill-word\"\n    );\n\n\n  let skillIndex = 0;\n\n  let charIndex = 0;\n\n  let deleting = false;\n\n\n  function type(){\n\n    const word =\n      skills[skillIndex];\n\n\n    if(!deleting){\n\n      target.textContent =\n        word.substring(\n          0,\n          charIndex + 1\n        );\n\n      charIndex++;\n\n\n      if(charIndex === word.length){\n\n        deleting = true;\n\n        setTimeout(\n          type,\n          900\n        );\n\n        return;\n      }\n\n\n      setTimeout(\n        type,\n        65\n      );\n\n    }\n\n\n    else {\n\n      target.textContent =\n        word.substring(\n          0,\n          charIndex - 1\n        );\n\n      charIndex--;\n\n\n      if(charIndex === 0){\n\n        deleting = false;\n\n        skillIndex++;\n\n\n        if(skillIndex >= skills.length){\n          skillIndex = 0;\n        }\n\n\n        setTimeout(\n          type,\n          250\n        );\n\n        return;\n      }\n\n\n      setTimeout(\n        type,\n        35\n      );\n\n    }\n\n  }\n\n\n  type();\n\n\n  \/* =====================================================\n     STARS\n     ===================================================== *\/\n\n  const stars =\n    document.querySelectorAll(\n      \"#cbg-hero .cbg-star\"\n    );\n\n\n  stars.forEach(function(star){\n\n    star.style.left =\n      Math.random() * 92 + \"%\";\n\n    star.style.top =\n      Math.random() * 92 + \"%\";\n\n    star.style.opacity =\n      0.4 +\n      Math.random() * 0.6;\n\n    star.style.transform =\n      \"scale(\" +\n      (\n        0.7 +\n        Math.random() * 0.9\n      ) +\n      \")\";\n\n  });\n\n\n})();\n\n<\/script>\n\n\n\n<style data-wp-block-html=\"css\">\n\/* =========================================================\n   BOOK AREA \u2014 PLUS COMPACT\n   ========================================================= *\/\n\n.cbg-lblb-book-area {\n  width: 100%;\n\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  gap: 18px;\n}\n\n\n\/* =========================================================\n   BOOK \u2014 TAILLE R\u00c9DUITE\n   ========================================================= *\/\n\n.cbg-lblb-book {\n  position: relative;\n\n  width: min(58vw, 720px);\n\n  min-height: 0;\n\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  perspective: 1800px;\n}\n\n\n\/* =========================================================\n   PAGE WRAPPER \u2014 BLANC PUR\n   ========================================================= *\/\n\n.cbg-lblb-page-wrap {\n  position: relative;\n\n  width: 100%;\n  max-width: 720px;\n\n  background: #fff;\n\n  box-shadow: none;\n\n  overflow: hidden;\n}\n\n\n\/* =========================================================\n   PAGES\n   ========================================================= *\/\n\n.cbg-lblb-page {\n  position: relative;\n\n  width: 100%;\n\n  background: #fff;\n\n  transform-origin: left center;\n\n  backface-visibility: hidden;\n}\n\n.cbg-lblb-page canvas {\n  display: block;\n\n  width: 100%;\n  height: auto;\n}\n\n\n\/* =========================================================\n   HEADER \u2014 PLUS COMPACT\n   ========================================================= *\/\n\n.cbg-lblb-header {\n  width: 100%;\n  margin-bottom: 35px;\n}\n\n.cbg-lblb-kicker {\n  font-size: 9px;\n  letter-spacing: .18em;\n  text-transform: uppercase;\n  margin-bottom: 14px;\n}\n\n.cbg-lblb-title {\n  margin: 0;\n\n  font-size: clamp(38px, 5.5vw, 82px);\n  line-height: .88;\n\n  font-weight: 400;\n  letter-spacing: -.055em;\n\n  text-transform: uppercase;\n}\n\n.cbg-lblb-meta {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n\n  margin-top: 18px;\n\n  padding-top: 10px;\n  border-top: 1px solid #000;\n\n  font-size: 9px;\n  letter-spacing: .12em;\n  text-transform: uppercase;\n}\n\n\n\/* =========================================================\n   ARROWS \u2014 PLUS DISCR\u00c8TES\n   ========================================================= *\/\n\n.cbg-lblb-arrow {\n  flex: 0 0 auto;\n\n  width: 38px;\n  height: 38px;\n\n  border: 1px solid #000;\n  border-radius: 50%;\n\n  background: #fff;\n  color: #000;\n\n  font-size: 15px;\n\n  cursor: pointer;\n\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  transition:\n    background .2s ease,\n    color .2s ease,\n    transform .2s ease;\n}\n\n.cbg-lblb-arrow:hover {\n  background: #000;\n  color: #fff;\n\n  transform: scale(1.05);\n}\n\n\n\/* =========================================================\n   BOTTOM\n   ========================================================= *\/\n\n.cbg-lblb-bottom {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n\n  margin-top: 14px;\n}\n\n.cbg-lblb-counter {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n\n  font-size: 10px;\n  letter-spacing: .08em;\n}\n\n.cbg-lblb-counter-line {\n  width: 28px;\n  height: 1px;\n\n  background: #000;\n}\n\n.cbg-lblb-hint {\n  font-size: 8px;\n  letter-spacing: .14em;\n  opacity: .45;\n}\n\n\n\/* =========================================================\n   DESCRIPTION\n   ========================================================= *\/\n\n.cbg-lblb-description {\n  display: grid;\n  grid-template-columns: 1fr 2fr;\n\n  gap: 40px;\n\n  width: 100%;\n\n  margin-top: 80px;\n\n  padding-top: 18px;\n\n  border-top: 1px solid #000;\n}\n\n.cbg-lblb-description-label {\n  font-size: 9px;\n  letter-spacing: .16em;\n  text-transform: uppercase;\n}\n\n.cbg-lblb-description-text {\n  max-width: 600px;\n\n  font-size: 15px;\n  line-height: 1.4;\n}\n\n.cbg-lblb-description-text p {\n  margin: 0 0 15px;\n}\n\n\n\/* =========================================================\n   MOBILE\n   ========================================================= *\/\n\n@media (max-width: 700px) {\n\n  #cbg-lblb-project {\n    padding: 60px 18px 70px;\n  }\n\n  .cbg-lblb-header {\n    margin-bottom: 28px;\n  }\n\n  .cbg-lblb-title {\n    font-size: 40px;\n  }\n\n  .cbg-lblb-book-area {\n    gap: 7px;\n  }\n\n  .cbg-lblb-book {\n    width: calc(100vw - 75px);\n  }\n\n  .cbg-lblb-arrow {\n    width: 34px;\n    height: 34px;\n    font-size: 14px;\n  }\n\n  .cbg-lblb-description {\n    display: block;\n    margin-top: 60px;\n  }\n\n  .cbg-lblb-description-text {\n    margin-top: 20px;\n    font-size: 14px;\n  }\n\n}\n<\/style>\n\n<!-- =========================================================\n     CLARA BELBACHIR GARNIER \u2014 LA BRUNE ET LA BLONDE\n     Compact interactive PDF\n     ========================================================= -->\n\n<section id=\"cbg-lblb-project\">\n\n  <div class=\"cbg-lblb-header\">\n\n    <div class=\"cbg-lblb-kicker\">\n      SELECTED WORK \/ 01\n    <\/div>\n\n    <h1 class=\"cbg-lblb-title\">\n      LA BRUNE ET LA BLONDE\n    <\/h1>\n\n    <div class=\"cbg-lblb-meta\">\n      <span>CREATIVE DIRECTION<\/span>\n      <span>IMAGE \/ CONTENT \/ EDITORIAL<\/span>\n    <\/div>\n\n  <\/div>\n\n\n  <!-- =======================================================\n       PDF VIEWER\n       ======================================================= -->\n\n  <div class=\"cbg-lblb-viewer\">\n\n    <button\n      class=\"cbg-lblb-arrow cbg-lblb-prev\"\n      type=\"button\"\n      aria-label=\"Previous page\"\n    >\n      \u2190\n    <\/button>\n\n\n    <div class=\"cbg-lblb-book\">\n\n      <div class=\"cbg-lblb-loading\">\n        LOADING PRESENTATION\n      <\/div>\n\n      <div class=\"cbg-lblb-page-wrap\">\n\n        <canvas\n          id=\"cbg-lblb-canvas-current\">\n        <\/canvas>\n\n        <canvas\n          id=\"cbg-lblb-canvas-next\">\n        <\/canvas>\n\n      <\/div>\n\n    <\/div>\n\n\n    <button\n      class=\"cbg-lblb-arrow cbg-lblb-next\"\n      type=\"button\"\n      aria-label=\"Next page\"\n    >\n      \u2192\n    <\/button>\n\n  <\/div>\n\n\n  <!-- =======================================================\n       COUNTER\n       ======================================================= -->\n\n  <div class=\"cbg-lblb-bottom\">\n\n    <div class=\"cbg-lblb-counter\">\n\n      <span id=\"cbg-lblb-page-number\">\n        01\n      <\/span>\n\n      <span class=\"cbg-lblb-counter-line\"><\/span>\n\n      <span>09<\/span>\n\n    <\/div>\n\n    <div class=\"cbg-lblb-hint\">\n      CLICK \/ DRAG \/ \u2190 \u2192\n    <\/div>\n\n  <\/div>\n\n\n  <!-- =======================================================\n       DESCRIPTION\n       ======================================================= -->\n\n  <div class=\"cbg-lblb-description\">\n\n    <div class=\"cbg-lblb-description-label\">\n      ABOUT THE PROJECT\n    <\/div>\n\n    <div class=\"cbg-lblb-description-text\">\n\n      <p>\n        Creative direction, image and content development for\n        La Brune et La Blonde.\n      <\/p>\n\n      <p>\n        Renewal of the visual grammar while preserving the\n        house's core codes: red, diamond and femininity.\n      <\/p>\n\n    <\/div>\n\n  <\/div>\n\n<\/section>\n\n\n<style>\n\n\/* =========================================================\n   RESET\n   ========================================================= *\/\n\n#cbg-lblb-project,\n#cbg-lblb-project * {\n  box-sizing: border-box;\n}\n\n\n\/* =========================================================\n   MAIN SECTION\n   ========================================================= *\/\n\n#cbg-lblb-project {\n\n  position: relative;\n\n  width: 100%;\n\n  margin: 0;\n  padding: 80px 5vw 100px;\n\n  background: #fff !important;\n  color: #000 !important;\n\n  font-family:\n    Arial,\n    Helvetica,\n    sans-serif;\n\n  overflow: hidden;\n\n}\n\n\n\/* =========================================================\n   HEADER\n   ========================================================= *\/\n\n.cbg-lblb-header {\n\n  width: 100%;\n\n  margin-bottom: 35px;\n\n}\n\n\n.cbg-lblb-kicker {\n\n  margin-bottom: 14px;\n\n  font-size: 9px;\n\n  line-height: 1;\n\n  letter-spacing: .18em;\n\n  text-transform: uppercase;\n\n}\n\n\n.cbg-lblb-title {\n\n  margin: 0;\n\n  padding: 0;\n\n  font-size:\n    clamp(36px, 5vw, 72px);\n\n  line-height: .88;\n\n  font-weight: 400;\n\n  letter-spacing: -.055em;\n\n  text-transform: uppercase;\n\n}\n\n\n.cbg-lblb-meta {\n\n  display: flex;\n\n  justify-content: space-between;\n\n  align-items: center;\n\n  margin-top: 18px;\n\n  padding-top: 10px;\n\n  border-top:\n    1px solid #000;\n\n  font-size: 9px;\n\n  line-height: 1.3;\n\n  letter-spacing: .12em;\n\n  text-transform: uppercase;\n\n}\n\n\n\/* =========================================================\n   VIEWER\n   ========================================================= *\/\n\n.cbg-lblb-viewer {\n\n  display: flex;\n\n  align-items: center;\n\n  justify-content: center;\n\n  gap: 18px;\n\n  width: 100%;\n\n}\n\n\n\/* =========================================================\n   BOOK\n   ========================================================= *\/\n\n.cbg-lblb-book {\n\n  position: relative;\n\n  width: min(42vw, 520px);\n\n  max-width: 520px;\n\n  min-width: 0;\n\n  background: #fff !important;\n\n}\n\n\n\/* =========================================================\n   PAGE WRAPPER\n   ========================================================= *\/\n\n.cbg-lblb-page-wrap {\n\n  position: relative;\n\n  width: 100%;\n\n  max-width: 520px;\n\n  margin: 0 auto;\n\n  padding: 0;\n\n  background: #fff !important;\n\n  box-shadow: none !important;\n\n  border: none !important;\n\n  overflow: hidden;\n\n}\n\n\n\/* =========================================================\n   CANVAS\n   ========================================================= *\/\n\n.cbg-lblb-page-wrap canvas {\n\n  display: block;\n\n  width: 100% !important;\n\n  height: auto !important;\n\n  margin: 0;\n\n  padding: 0;\n\n  background: #fff !important;\n\n}\n\n\n\/* =========================================================\n   CURRENT PAGE\n   ========================================================= *\/\n\n#cbg-lblb-canvas-current {\n\n  position: relative;\n\n  z-index: 2;\n\n}\n\n\n\/* =========================================================\n   NEXT PAGE\n   ========================================================= *\/\n\n#cbg-lblb-canvas-next {\n\n  position: absolute;\n\n  top: 0;\n  left: 0;\n\n  z-index: 1;\n\n  visibility: hidden;\n\n}\n\n\n\/* =========================================================\n   LOADING\n   ========================================================= *\/\n\n.cbg-lblb-loading {\n\n  position: absolute;\n\n  inset: 0;\n\n  z-index: 20;\n\n  display: flex;\n\n  align-items: center;\n\n  justify-content: center;\n\n  background: #fff !important;\n\n  color: #000;\n\n  font-size: 9px;\n\n  letter-spacing: .15em;\n\n  text-transform: uppercase;\n\n}\n\n\n.cbg-lblb-loading.is-hidden {\n\n  display: none;\n\n}\n\n\n\/* =========================================================\n   ARROWS\n   ========================================================= *\/\n\n.cbg-lblb-arrow {\n\n  flex: 0 0 auto;\n\n  width: 34px;\n  height: 34px;\n\n  padding: 0;\n\n  border:\n    1px solid #000;\n\n  border-radius: 50%;\n\n  background: #fff !important;\n\n  color: #000 !important;\n\n  font-family:\n    Arial,\n    Helvetica,\n    sans-serif;\n\n  font-size: 13px;\n\n  line-height: 1;\n\n  cursor: pointer;\n\n  display: flex;\n\n  align-items: center;\n\n  justify-content: center;\n\n  transition:\n    background .2s ease,\n    color .2s ease,\n    transform .2s ease;\n\n}\n\n\n.cbg-lblb-arrow:hover {\n\n  background: #000 !important;\n\n  color: #fff !important;\n\n  transform: scale(1.05);\n\n}\n\n\n.cbg-lblb-arrow:disabled {\n\n  opacity: .2;\n\n  cursor: default;\n\n  transform: none;\n\n}\n\n\n\/* =========================================================\n   BOTTOM\n   ========================================================= *\/\n\n.cbg-lblb-bottom {\n\n  width: min(42vw, 520px);\n\n  margin: 12px auto 0;\n\n  display: flex;\n\n  justify-content: space-between;\n\n  align-items: center;\n\n}\n\n\n.cbg-lblb-counter {\n\n  display: flex;\n\n  align-items: center;\n\n  gap: 7px;\n\n  font-size: 9px;\n\n  letter-spacing: .08em;\n\n}\n\n\n.cbg-lblb-counter-line {\n\n  width: 25px;\n\n  height: 1px;\n\n  background: #000;\n\n}\n\n\n.cbg-lblb-hint {\n\n  font-size: 8px;\n\n  letter-spacing: .13em;\n\n  opacity: .45;\n\n}\n\n\n\/* =========================================================\n   DESCRIPTION\n   ========================================================= *\/\n\n.cbg-lblb-description {\n\n  display: grid;\n\n  grid-template-columns:\n    1fr 2fr;\n\n  gap: 40px;\n\n  width: 100%;\n\n  margin-top: 75px;\n\n  padding-top: 16px;\n\n  border-top:\n    1px solid #000;\n\n}\n\n\n.cbg-lblb-description-label {\n\n  font-size: 9px;\n\n  line-height: 1;\n\n  letter-spacing: .15em;\n\n  text-transform: uppercase;\n\n}\n\n\n.cbg-lblb-description-text {\n\n  max-width: 570px;\n\n  font-size: 14px;\n\n  line-height: 1.4;\n\n}\n\n\n.cbg-lblb-description-text p {\n\n  margin:\n    0 0 14px;\n\n}\n\n\n\/* =========================================================\n   MOBILE\n   ========================================================= *\/\n\n@media (max-width: 700px) {\n\n  #cbg-lblb-project {\n\n    padding:\n      60px\n      18px\n      70px;\n\n  }\n\n\n  .cbg-lblb-header {\n\n    margin-bottom: 28px;\n\n  }\n\n\n  .cbg-lblb-title {\n\n    font-size: 40px;\n\n  }\n\n\n  .cbg-lblb-meta {\n\n    display: block;\n\n    line-height: 1.8;\n\n  }\n\n\n  .cbg-lblb-meta span {\n\n    display: block;\n\n  }\n\n\n  .cbg-lblb-viewer {\n\n    gap: 7px;\n\n  }\n\n\n  .cbg-lblb-book {\n\n    width:\n      calc(100vw - 85px);\n\n    max-width:\n      calc(100vw - 85px);\n\n  }\n\n\n  .cbg-lblb-page-wrap {\n\n    width: 100%;\n\n  }\n\n\n  .cbg-lblb-arrow {\n\n    width: 32px;\n    height: 32px;\n\n    font-size: 12px;\n\n  }\n\n\n  .cbg-lblb-bottom {\n\n    width:\n      calc(100vw - 85px);\n\n    max-width: none;\n\n    margin-top: 10px;\n\n  }\n\n\n  .cbg-lblb-hint {\n\n    display: none;\n\n  }\n\n\n  .cbg-lblb-description {\n\n    display: block;\n\n    margin-top: 60px;\n\n  }\n\n\n  .cbg-lblb-description-text {\n\n    margin-top: 20px;\n\n    font-size: 14px;\n\n  }\n\n}\n\n<\/style>\n\n\n<!-- =========================================================\n     PDF.JS\n     ========================================================= -->\n\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/pdf.js\/3.11.174\/pdf.min.js\"><\/script>\n\n<script>\n\n(function () {\n\n  const PDF_URL =\n    \"https:\/\/www.clara-belbachir-garnier.fr\/wp-content\/uploads\/2026\/09\/PRESENTATION-LABRUNETLABLONDE.pdf\";\n\n  const TOTAL_PAGES = 9;\n\n  let pdf = null;\n\n  let currentPage = 1;\n\n  let isRendering = false;\n\n\n  \/* =======================================================\n     ELEMENTS\n     ======================================================= *\/\n\n  const project =\n    document.getElementById(\n      \"cbg-lblb-project\"\n    );\n\n  const pageWrap =\n    project.querySelector(\n      \".cbg-lblb-page-wrap\"\n    );\n\n  const canvasCurrent =\n    document.getElementById(\n      \"cbg-lblb-canvas-current\"\n    );\n\n  const canvasNext =\n    document.getElementById(\n      \"cbg-lblb-canvas-next\"\n    );\n\n  const pageNumber =\n    document.getElementById(\n      \"cbg-lblb-page-number\"\n    );\n\n  const loading =\n    project.querySelector(\n      \".cbg-lblb-loading\"\n    );\n\n  const previousButton =\n    project.querySelector(\n      \".cbg-lblb-prev\"\n    );\n\n  const nextButton =\n    project.querySelector(\n      \".cbg-lblb-next\"\n    );\n\n\n  \/* =======================================================\n     PDF WORKER\n     ======================================================= *\/\n\n  pdfjsLib.GlobalWorkerOptions.workerSrc =\n    \"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/pdf.js\/3.11.174\/pdf.worker.min.js\";\n\n\n  \/* =======================================================\n     LOAD PDF\n     ======================================================= *\/\n\n  pdfjsLib\n    .getDocument(PDF_URL)\n    .promise\n    .then(function (loadedPdf) {\n\n      pdf = loadedPdf;\n\n      loading.classList.add(\n        \"is-hidden\"\n      );\n\n      renderPage(\n        currentPage,\n        canvasCurrent\n      );\n\n      updateInterface();\n\n    })\n    .catch(function (error) {\n\n      console.error(\n        \"LBLB PDF error:\",\n        error\n      );\n\n      loading.textContent =\n        \"UNABLE TO LOAD PRESENTATION\";\n\n    });\n\n\n  \/* =======================================================\n     RENDER\n     ======================================================= *\/\n\n  async function renderPage(\n    pageNumberValue,\n    canvas\n  ) {\n\n    if (!pdf) return;\n\n\n    const page =\n      await pdf.getPage(\n        pageNumberValue\n      );\n\n\n    const viewport =\n      page.getViewport({\n        scale: 1\n      });\n\n\n    const containerWidth =\n      pageWrap.clientWidth;\n\n\n    const scale =\n      containerWidth \/\n      viewport.width;\n\n\n    const scaledViewport =\n      page.getViewport({\n        scale: scale\n      });\n\n\n    const context =\n      canvas.getContext(\"2d\");\n\n\n    canvas.width =\n      scaledViewport.width;\n\n    canvas.height =\n      scaledViewport.height;\n\n\n    await page.render({\n\n      canvasContext:\n        context,\n\n      viewport:\n        scaledViewport\n\n    }).promise;\n\n  }\n\n\n  \/* =======================================================\n     UI\n     ======================================================= *\/\n\n  function updateInterface() {\n\n    pageNumber.textContent =\n      String(currentPage)\n        .padStart(2, \"0\");\n\n\n    previousButton.disabled =\n      currentPage === 1;\n\n\n    nextButton.disabled =\n      currentPage === TOTAL_PAGES;\n\n  }\n\n\n  \/* =======================================================\n     PAGE CHANGE\n     ======================================================= *\/\n\n  async function goToPage(\n    targetPage,\n    direction\n  ) {\n\n    if (\n      isRendering ||\n      !pdf ||\n      targetPage < 1 ||\n      targetPage > TOTAL_PAGES ||\n      targetPage === currentPage\n    ) {\n\n      return;\n\n    }\n\n\n    isRendering = true;\n\n\n    await renderPage(\n      targetPage,\n      canvasNext\n    );\n\n\n    canvasNext.style.visibility =\n      \"visible\";\n\n\n    canvasCurrent.style.opacity =\n      \"0\";\n\n\n    setTimeout(function () {\n\n      const currentContext =\n        canvasCurrent.getContext(\n          \"2d\"\n        );\n\n\n      currentContext.clearRect(\n        0,\n        0,\n        canvasCurrent.width,\n        canvasCurrent.height\n      );\n\n\n      canvasCurrent.width =\n        canvasNext.width;\n\n      canvasCurrent.height =\n        canvasNext.height;\n\n\n      currentContext.drawImage(\n        canvasNext,\n        0,\n        0\n      );\n\n\n      canvasNext.style.visibility =\n        \"hidden\";\n\n\n      canvasCurrent.style.opacity =\n        \"1\";\n\n\n      currentPage =\n        targetPage;\n\n\n      updateInterface();\n\n\n      isRendering =\n        false;\n\n    }, 180);\n\n  }\n\n\n  \/* =======================================================\n     BUTTONS\n     ======================================================= *\/\n\n  previousButton.addEventListener(\n    \"click\",\n    function () {\n\n      goToPage(\n        currentPage - 1,\n        \"prev\"\n      );\n\n    }\n  );\n\n\n  nextButton.addEventListener(\n    \"click\",\n    function () {\n\n      goToPage(\n        currentPage + 1,\n        \"next\"\n      );\n\n    }\n  );\n\n\n  \/* =======================================================\n     KEYBOARD\n     ======================================================= *\/\n\n  document.addEventListener(\n    \"keydown\",\n    function (event) {\n\n      if (\n        event.key === \"ArrowRight\"\n      ) {\n\n        goToPage(\n          currentPage + 1,\n          \"next\"\n        );\n\n      }\n\n\n      if (\n        event.key === \"ArrowLeft\"\n      ) {\n\n        goToPage(\n          currentPage - 1,\n          \"prev\"\n        );\n\n      }\n\n    }\n  );\n\n\n  \/* =======================================================\n     CLICK\n     ======================================================= *\/\n\n  pageWrap.addEventListener(\n    \"click\",\n    function (event) {\n\n      const rect =\n        pageWrap.getBoundingClientRect();\n\n\n      const position =\n        event.clientX -\n        rect.left;\n\n\n      if (\n        position >\n        rect.width \/ 2\n      ) {\n\n        goToPage(\n          currentPage + 1,\n          \"next\"\n        );\n\n      } else {\n\n        goToPage(\n          currentPage - 1,\n          \"prev\"\n        );\n\n      }\n\n    }\n  );\n\n\n  \/* =======================================================\n     SWIPE\n     ======================================================= *\/\n\n  let touchStartX = 0;\n\n\n  pageWrap.addEventListener(\n    \"touchstart\",\n    function (event) {\n\n      touchStartX =\n        event.changedTouches[0]\n          .screenX;\n\n    },\n    {\n      passive: true\n    }\n  );\n\n\n  pageWrap.addEventListener(\n    \"touchend\",\n    function (event) {\n\n      const touchEndX =\n        event.changedTouches[0]\n          .screenX;\n\n\n      const difference =\n        touchStartX -\n        touchEndX;\n\n\n      if (\n        Math.abs(difference) < 40\n      ) {\n\n        return;\n\n      }\n\n\n      if (difference > 0) {\n\n        goToPage(\n          currentPage + 1,\n          \"next\"\n        );\n\n      } else {\n\n        goToPage(\n          currentPage - 1,\n          \"prev\"\n        );\n\n      }\n\n    },\n    {\n      passive: true\n    }\n  );\n\n\n  \/* =======================================================\n     RESIZE\n     ======================================================= *\/\n\n  let resizeTimeout;\n\n\n  window.addEventListener(\n    \"resize\",\n    function () {\n\n      clearTimeout(\n        resizeTimeout\n      );\n\n\n      resizeTimeout =\n        setTimeout(\n          function () {\n\n            if (pdf) {\n\n              renderPage(\n                currentPage,\n                canvasCurrent\n              );\n\n            }\n\n          },\n          250\n        );\n\n    }\n  );\n\n\n  updateInterface();\n\n})();\n\n<\/script>\n\n\n\n<!-- =========================================================\n     CLARA BELBACHIR GARNIER\n     SELECTED WORK \u2014 PROJECT NETWORK\n     ========================================================= -->\n\n<section id=\"cbg-work-network\">\n\n  <svg\n    id=\"cbg-work-lines\"\n    aria-hidden=\"true\"\n    preserveAspectRatio=\"none\"\n  >\n    <line data-line=\"0\"><\/line>\n    <line data-line=\"1\"><\/line>\n    <line data-line=\"2\"><\/line>\n    <line data-line=\"3\"><\/line>\n    <line data-line=\"4\"><\/line>\n    <line data-line=\"5\"><\/line>\n  <\/svg>\n\n\n  <!-- =======================================================\n       PROJECT 01 \u2014 SCIARPA\n       ======================================================= -->\n\n  <article\n    class=\"cbg-work-project\"\n    data-project=\"sciarpa\"\n    data-x=\"10\"\n    data-y=\"15\"\n    data-speed=\"0.35\"\n    data-radius=\"2.5\"\n  >\n\n    <div class=\"cbg-work-label\">\n\n      <span>SCIARPA<\/span>\n\n      <small>\n        CREATIVE DIRECTION \/ EDITING\n      <\/small>\n\n    <\/div>\n\n    <div class=\"cbg-work-dot\"><\/div>\n\n    <img decoding=\"async\"\n      src=\"http:\/\/www.clara-belbachir-garnier.fr\/wp-content\/uploads\/2026\/08\/21-copie-scaled.jpg\"\n      alt=\"Sciarpa \u2014 creative direction\"\n      loading=\"lazy\"\n    >\n\n  <\/article>\n\n\n  <!-- =======================================================\n       PROJECT 02 \u2014 LA BRUNE ET LA BLONDE\n       ======================================================= -->\n\n  <article\n    class=\"cbg-work-project\"\n    data-project=\"lblb\"\n    data-x=\"55\"\n    data-y=\"15\"\n    data-speed=\"0.4\"\n    data-radius=\"2.5\"\n  >\n\n    <div class=\"cbg-work-label\">\n\n      <span>LA BRUNE ET LA BLONDE<\/span>\n\n      <small>\n        CREATIVE DIRECTION \/ IMAGE \/ CONTENT\n      <\/small>\n\n    <\/div>\n\n    <div class=\"cbg-work-dot\"><\/div>\n\n    <img decoding=\"async\"\n      src=\"http:\/\/www.clara-belbachir-garnier.fr\/wp-content\/uploads\/2026\/08\/SET-7-PHOTO-1-copie-scaled.jpg\"\n      alt=\"La Brune et La Blonde \u2014 creative direction\"\n      loading=\"lazy\"\n    >\n\n  <\/article>\n\n\n  <!-- =======================================================\n       PROJECT 03 \u2014 RIKILL\n       ======================================================= -->\n\n  <article\n    class=\"cbg-work-project\"\n    data-project=\"rikill\"\n    data-x=\"32\"\n    data-y=\"38\"\n    data-speed=\"0.28\"\n    data-radius=\"2.5\"\n  >\n\n    <div class=\"cbg-work-label\">\n\n      <span>RIKILL<\/span>\n\n      <small>\n        CREATIVE DIRECTION \/ EDITING\n      <\/small>\n\n    <\/div>\n\n    <div class=\"cbg-work-dot\"><\/div>\n\n    <img decoding=\"async\"\n      src=\"http:\/\/www.clara-belbachir-garnier.fr\/wp-content\/uploads\/2026\/08\/COVERRIKILL.png\"\n      alt=\"Rikill \u2014 creative direction\"\n      loading=\"lazy\"\n    >\n\n  <\/article>\n\n\n  <!-- =======================================================\n       PROJECT 04 \u2014 LEMIA\n       ======================================================= -->\n\n  <article\n    class=\"cbg-work-project\"\n    data-project=\"lemia\"\n    data-x=\"10\"\n    data-y=\"65\"\n    data-speed=\"0.32\"\n    data-radius=\"2.5\"\n  >\n\n    <div class=\"cbg-work-label\">\n\n      <span>LEMIA<\/span>\n\n      <small>\n        CREATIVE DIRECTION \/ PRODUCTION\n      <\/small>\n\n    <\/div>\n\n    <div class=\"cbg-work-dot\"><\/div>\n\n    <img decoding=\"async\"\n      src=\"http:\/\/www.clara-belbachir-garnier.fr\/wp-content\/uploads\/2026\/08\/IHBWY-scaled.jpg\"\n      alt=\"Lemia \u2014 creative direction\"\n      loading=\"lazy\"\n    >\n\n  <\/article>\n\n\n  <!-- =======================================================\n       PROJECT 05 \u2014 MARYAM MAHDAVI\n       ======================================================= -->\n\n  <article\n    class=\"cbg-work-project\"\n    data-project=\"maryam\"\n    data-x=\"52\"\n    data-y=\"65\"\n    data-speed=\"0.3\"\n    data-radius=\"2.5\"\n  >\n\n    <div class=\"cbg-work-label\">\n\n      <span>MARYAM MAHDAVI<\/span>\n\n      <small>\n        CREATIVE BRAND STRATEGY\n      <\/small>\n\n    <\/div>\n\n    <div class=\"cbg-work-dot\"><\/div>\n\n    <img decoding=\"async\"\n      src=\"http:\/\/www.clara-belbachir-garnier.fr\/wp-content\/uploads\/2026\/08\/maryampetasse.png\"\n      alt=\"Maryam Mahdavi \u2014 creative brand strategy\"\n      loading=\"lazy\"\n    >\n\n  <\/article>\n\n\n  <!-- =======================================================\n       PROJECT 06 \u2014 LOVESNAP\n       ======================================================= -->\n\n  <article\n    class=\"cbg-work-project\"\n    data-project=\"lovesnap\"\n    data-x=\"32\"\n    data-y=\"82\"\n    data-speed=\"0.38\"\n    data-radius=\"2.5\"\n  >\n\n    <div class=\"cbg-work-label\">\n\n      <span>LOVESNAP<\/span>\n\n      <small>\n        CREATIVE PRODUCTION \/ CURATION\n      <\/small>\n\n    <\/div>\n\n    <div class=\"cbg-work-dot\"><\/div>\n\n    <img decoding=\"async\"\n      src=\"http:\/\/www.clara-belbachir-garnier.fr\/wp-content\/uploads\/2026\/08\/MAHDAVIXLOVESNAP.png\"\n      alt=\"Lovesnap \u2014 creative production\"\n      loading=\"lazy\"\n    >\n\n  <\/article>\n\n<\/section>\n\n\n<!-- =========================================================\n     PROJECT OVERLAY\n     ========================================================= -->\n\n<div\n  id=\"cbg-work-overlay\"\n  aria-hidden=\"true\"\n>\n\n  <div id=\"cbg-work-overlay-inner\">\n\n    <button\n      id=\"cbg-work-close\"\n      type=\"button\"\n      aria-label=\"Close project\"\n    >\n      \u00d7\n    <\/button>\n\n    <div id=\"cbg-work-gallery\"><\/div>\n\n  <\/div>\n\n<\/div>\n\n\n<style>\n\n\/* =========================================================\n   WORK NETWORK\n   ========================================================= *\/\n\n#cbg-work-network {\n\n  position: relative;\n\n  width: 100%;\n\n  height: 820px;\n\n  margin: 0;\n\n  padding: 0;\n\n  overflow: hidden;\n\n  background: transparent;\n\n  isolation: isolate;\n\n}\n\n\n\/* =========================================================\n   LINES\n   ========================================================= *\/\n\n#cbg-work-lines {\n\n  position: absolute;\n\n  inset: 0;\n\n  width: 100%;\n\n  height: 100%;\n\n  pointer-events: none;\n\n  z-index: 0;\n\n}\n\n\n#cbg-work-lines line {\n\n  stroke: #fff;\n\n  stroke-width: 1;\n\n  opacity: .22;\n\n}\n\n\n\/* =========================================================\n   PROJECT\n   ========================================================= *\/\n\n#cbg-work-network\n.cbg-work-project {\n\n  position: absolute;\n\n  z-index: 2;\n\n  width: max-content;\n\n  cursor: pointer;\n\n  transform: translateZ(0);\n\n  transition:\n    opacity .35s ease;\n\n}\n\n\n#cbg-work-network\n.cbg-work-project:hover {\n\n  z-index: 20;\n\n}\n\n\n\/* =========================================================\n   LABEL\n   ========================================================= *\/\n\n.cbg-work-label {\n\n  display: flex;\n\n  align-items: baseline;\n\n  gap: 5px;\n\n  width: max-content;\n\n  margin-bottom: 4px;\n\n  white-space: nowrap;\n\n  line-height: 1;\n\n}\n\n\n.cbg-work-label span {\n\n  font-family:\n    'VT323',\n    monospace;\n\n  font-size: 16px;\n\n  color: #fff;\n\n  letter-spacing: .04em;\n\n  text-shadow:\n    1px 1px 0 #000;\n\n}\n\n\n.cbg-work-label small {\n\n  font-family:\n    'VT323',\n    monospace;\n\n  font-size: 12px;\n\n  color: #ff5500;\n\n  letter-spacing: .04em;\n\n  text-shadow:\n    1px 1px 0 #000;\n\n}\n\n\n\/* =========================================================\n   IMAGE\n   ========================================================= *\/\n\n.cbg-work-project img {\n\n  display: block;\n\n  object-fit: cover;\n\n  margin: 0;\n\n  padding: 0;\n\n  border: 1px solid #fff;\n\n  background: #000;\n\n  transition:\n    transform .5s cubic-bezier(.22,.61,.36,1);\n\n}\n\n\n\/* tailles *\/\n\n.cbg-work-project[data-project=\"sciarpa\"] img {\n\n  width: 140px;\n  height: 110px;\n\n}\n\n\n.cbg-work-project[data-project=\"lblb\"] img {\n\n  width: 160px;\n  height: 180px;\n\n}\n\n\n.cbg-work-project[data-project=\"rikill\"] img {\n\n  width: 110px;\n  height: 135px;\n\n}\n\n\n.cbg-work-project[data-project=\"lemia\"] img {\n\n  width: 110px;\n  height: 135px;\n\n}\n\n\n.cbg-work-project[data-project=\"maryam\"] img {\n\n  width: 190px;\n  height: 215px;\n\n}\n\n\n.cbg-work-project[data-project=\"lovesnap\"] img {\n\n  width: 160px;\n  height: 180px;\n\n}\n\n\n\/* =========================================================\n   DOT\n   ========================================================= *\/\n\n.cbg-work-dot {\n\n  position: absolute;\n\n  top: -5px;\n  left: -5px;\n\n  width: 8px;\n  height: 8px;\n\n  border-radius: 50%;\n\n  background: #ff007f;\n\n  border: 1px solid #fff;\n\n  z-index: 5;\n\n}\n\n\n\/* =========================================================\n   HOVER\n   ========================================================= *\/\n\n#cbg-work-network:hover\n.cbg-work-project:not(:hover) {\n\n  opacity: .55;\n\n}\n\n\n.cbg-work-project:hover img {\n\n  transform: scale(1.12);\n\n}\n\n\n\/* =========================================================\n   OVERLAY\n   ========================================================= *\/\n\n#cbg-work-overlay {\n\n  position: fixed;\n\n  inset: 0;\n\n  z-index: 999999;\n\n  display: none;\n\n  align-items: center;\n\n  justify-content: center;\n\n  padding: 30px;\n\n  background:\n    rgba(0,0,0,.88);\n\n}\n\n\n#cbg-work-overlay.is-open {\n\n  display: flex;\n\n}\n\n\n#cbg-work-overlay-inner {\n\n  position: relative;\n\n  width: min(900px, 90vw);\n\n  max-height: 88vh;\n\n  overflow-y: auto;\n\n  background: #fff;\n\n  padding: 45px 25px 25px;\n\n}\n\n\n#cbg-work-close {\n\n  position: absolute;\n\n  top: 12px;\n\n  right: 16px;\n\n  width: 28px;\n\n  height: 28px;\n\n  padding: 0;\n\n  border: 0;\n\n  background: transparent;\n\n  color: #000;\n\n  font-size: 24px;\n\n  line-height: 1;\n\n  cursor: pointer;\n\n}\n\n\n#cbg-work-gallery {\n\n  display: grid;\n\n  grid-template-columns:\n    repeat(2, minmax(0, 1fr));\n\n  gap: 12px;\n\n}\n\n\n#cbg-work-gallery img {\n\n  display: block;\n\n  width: 100%;\n\n  height: auto;\n\n}\n\n\n\/* =========================================================\n   MOBILE\n   ========================================================= *\/\n\n@media (max-width: 768px) {\n\n  #cbg-work-network {\n\n    height: 680px;\n\n  }\n\n\n  .cbg-work-label {\n\n    display: block;\n\n  }\n\n\n  .cbg-work-label span {\n\n    display: block;\n\n    font-size: 13px;\n\n  }\n\n\n  .cbg-work-label small {\n\n    display: block;\n\n    margin-top: 2px;\n\n    font-size: 9px;\n\n  }\n\n\n  .cbg-work-project[data-project=\"sciarpa\"] img {\n\n    width: 90px;\n    height: 70px;\n\n  }\n\n\n  .cbg-work-project[data-project=\"lblb\"] img {\n\n    width: 105px;\n    height: 120px;\n\n  }\n\n\n  .cbg-work-project[data-project=\"rikill\"] img {\n\n    width: 75px;\n    height: 90px;\n\n  }\n\n\n  .cbg-work-project[data-project=\"lemia\"] img {\n\n    width: 75px;\n    height: 90px;\n\n  }\n\n\n  .cbg-work-project[data-project=\"maryam\"] img {\n\n    width: 125px;\n    height: 140px;\n\n  }\n\n\n  .cbg-work-project[data-project=\"lovesnap\"] img {\n\n    width: 105px;\n    height: 120px;\n\n  }\n\n\n  #cbg-work-overlay {\n\n    padding: 12px;\n\n  }\n\n\n  #cbg-work-overlay-inner {\n\n    width: 94vw;\n\n    max-height: 90vh;\n\n    padding:\n      40px\n      12px\n      12px;\n\n  }\n\n\n  #cbg-work-gallery {\n\n    grid-template-columns: 1fr;\n\n  }\n\n}\n\n\n\/* =========================================================\n   REDUCED MOTION\n   ========================================================= *\/\n\n@media (prefers-reduced-motion: reduce) {\n\n  #cbg-work-network\n  .cbg-work-project {\n\n    transition: none;\n\n  }\n\n  .cbg-work-project:hover img {\n\n    transform: none;\n\n  }\n\n}\n\n<\/style>\n\n\n<script>\n\n(function () {\n\n  const network =\n    document.getElementById(\n      \"cbg-work-network\"\n    );\n\n  if (!network) return;\n\n\n  const projects =\n    Array.from(\n      network.querySelectorAll(\n        \".cbg-work-project\"\n      )\n    );\n\n\n  const lines =\n    Array.from(\n      network.querySelectorAll(\n        \"#cbg-work-lines line\"\n      )\n    );\n\n\n  const overlay =\n    document.getElementById(\n      \"cbg-work-overlay\"\n    );\n\n\n  const gallery =\n    document.getElementById(\n      \"cbg-work-gallery\"\n    );\n\n\n  const closeButton =\n    document.getElementById(\n      \"cbg-work-close\"\n    );\n\n\n  \/* =======================================================\n     GALLERIES\n     ======================================================= *\/\n\n  const galleries = {\n\n    sciarpa: [\n\n      \"http:\/\/www.clara-belbachir-garnier.fr\/wp-content\/uploads\/2026\/08\/21-copie-scaled.jpg\",\n\n      \"http:\/\/www.clara-belbachir-garnier.fr\/wp-content\/uploads\/2026\/08\/SCIARPA.TRIO_.TABLE_.jpg\",\n\n      \"http:\/\/www.clara-belbachir-garnier.fr\/wp-content\/uploads\/2026\/08\/SCIARPA-4.png\",\n\n      \"http:\/\/www.clara-belbachir-garnier.fr\/wp-content\/uploads\/2026\/08\/SCIARPA-3.png\",\n\n      \"http:\/\/www.clara-belbachir-garnier.fr\/wp-content\/uploads\/2026\/08\/SCIARPA.4-copie-scaled.png\",\n\n      \"http:\/\/www.clara-belbachir-garnier.fr\/wp-content\/uploads\/2026\/08\/SCIARPA.2.png\"\n\n    ],\n\n    rikill: [\n\n      \"http:\/\/www.clara-belbachir-garnier.fr\/wp-content\/uploads\/2026\/08\/COVERRIKILL.png\",\n\n      \"http:\/\/www.clara-belbachir-garnier.fr\/wp-content\/uploads\/2026\/08\/ricardochaise2-1-scaled.png\",\n\n      \"http:\/\/www.clara-belbachir-garnier.fr\/wp-content\/uploads\/2026\/08\/ZINEZOOMMAIN-copie.png\",\n\n      \"http:\/\/www.clara-belbachir-garnier.fr\/wp-content\/uploads\/2026\/08\/IMG_0187.jpeg\",\n\n      \"http:\/\/www.clara-belbachir-garnier.fr\/wp-content\/uploads\/2026\/08\/RIKILL-SET3-copie.png\",\n\n      \"http:\/\/www.clara-belbachir-garnier.fr\/wp-content\/uploads\/2026\/08\/PHOTO-2026-07-25-15-10-24.jpg\",\n\n      \"http:\/\/www.clara-belbachir-garnier.fr\/wp-content\/uploads\/2026\/08\/rikill-chaise-V2.png\"\n\n    ],\n\n    lemia: [\n\n      \"http:\/\/www.clara-belbachir-garnier.fr\/wp-content\/uploads\/2026\/08\/IHBWY-scaled.jpg\",\n\n      \"http:\/\/www.clara-belbachir-garnier.fr\/wp-content\/uploads\/2026\/08\/lemia-asset-7-scaled.png\",\n\n      \"http:\/\/www.clara-belbachir-garnier.fr\/wp-content\/uploads\/2026\/08\/lemia-set5-scaled.png\",\n\n      \"http:\/\/www.clara-belbachir-garnier.fr\/wp-content\/uploads\/2026\/08\/ASSET_5_LEMIA_SERRURE-scaled.jpg\",\n\n      \"http:\/\/www.clara-belbachir-garnier.fr\/wp-content\/uploads\/2026\/08\/lemia-asset-2-scaled.jpg\",\n\n      \"http:\/\/www.clara-belbachir-garnier.fr\/wp-content\/uploads\/2026\/08\/lemia-asset-6-scaled.png\"\n\n    ],\n\n    maryam: [\n\n      \"http:\/\/www.clara-belbachir-garnier.fr\/wp-content\/uploads\/2026\/08\/maryampetasse.png\",\n\n      \"http:\/\/www.clara-belbachir-garnier.fr\/wp-content\/uploads\/2026\/08\/leopard.jpeg\",\n\n      \"http:\/\/www.clara-belbachir-garnier.fr\/wp-content\/uploads\/2026\/08\/EDITO.2026.13-scaled.png\",\n\n      \"http:\/\/www.clara-belbachir-garnier.fr\/wp-content\/uploads\/2026\/08\/EDITO.2026.12-scaled.png\",\n\n      \"http:\/\/www.clara-belbachir-garnier.fr\/wp-content\/uploads\/2026\/08\/EDITO-MAHDAVI-33.png\",\n\n      \"http:\/\/www.clara-belbachir-garnier.fr\/wp-content\/uploads\/2026\/08\/EDITO-23-scaled.png\",\n\n      \"http:\/\/www.clara-belbachir-garnier.fr\/wp-content\/uploads\/2026\/08\/EDITO-22-scaled.png\",\n\n      \"http:\/\/www.clara-belbachir-garnier.fr\/wp-content\/uploads\/2026\/08\/EDITO-2-dernierepage-scaled.png\",\n\n      \"http:\/\/www.clara-belbachir-garnier.fr\/wp-content\/uploads\/2026\/08\/25e455c2ac54add46ba1bedab05a6baf.jpg\"\n\n    ],\n\n    lovesnap: [\n\n      \"http:\/\/www.clara-belbachir-garnier.fr\/wp-content\/uploads\/2026\/08\/MAHDAVIXLOVESNAP.png\",\n\n      \"http:\/\/www.clara-belbachir-garnier.fr\/wp-content\/uploads\/2026\/08\/FK0_6932-copie-scaled.jpg\",\n\n      \"http:\/\/www.clara-belbachir-garnier.fr\/wp-content\/uploads\/2026\/08\/FK0_6929-copie-scaled.jpg\"\n\n    ]\n\n  };\n\n\n  \/* =======================================================\n     CONNECTIONS\n     ======================================================= *\/\n\n  const connections = [\n\n    [0, 1],\n    [1, 2],\n    [2, 4],\n    [3, 0],\n    [4, 5],\n    [2, 3]\n\n  ];\n\n\n  \/* =======================================================\n     POSITIONING\n     ======================================================= *\/\n\n  let animationFrame;\n\n  let time = 0;\n\n\n  function updateNetwork() {\n\n    time += 0.006;\n\n\n    const networkRect =\n      network.getBoundingClientRect();\n\n\n    const centers = [];\n\n\n    projects.forEach(\n      function (project, index) {\n\n        const baseX =\n          parseFloat(\n            project.dataset.x\n          );\n\n\n        const baseY =\n          parseFloat(\n            project.dataset.y\n          );\n\n\n        const speed =\n          parseFloat(\n            project.dataset.speed\n          );\n\n\n        const radius =\n          parseFloat(\n            project.dataset.radius\n          );\n\n\n        const x =\n          baseX +\n          Math.sin(\n            time * speed + index\n          ) * radius;\n\n\n        const y =\n          baseY +\n          Math.cos(\n            time * speed * .8 + index\n          ) * radius;\n\n\n        project.style.left =\n          x + \"%\";\n\n\n        project.style.top =\n          y + \"%\";\n\n\n        const rect =\n          project.getBoundingClientRect();\n\n\n        centers.push({\n\n          x:\n            rect.left -\n            networkRect.left +\n            rect.width \/ 2,\n\n          y:\n            rect.top -\n            networkRect.top +\n            rect.height \/ 2\n\n        });\n\n      }\n    );\n\n\n    connections.forEach(\n      function (connection, index) {\n\n        const a =\n          centers[connection[0]];\n\n\n        const b =\n          centers[connection[1]];\n\n\n        if (!a || !b || !lines[index])\n          return;\n\n\n        lines[index].setAttribute(\n          \"x1\",\n          a.x\n        );\n\n\n        lines[index].setAttribute(\n          \"y1\",\n          a.y\n        );\n\n\n        lines[index].setAttribute(\n          \"x2\",\n          b.x\n        );\n\n\n        lines[index].setAttribute(\n          \"y2\",\n          b.y\n        );\n\n      }\n    );\n\n\n    animationFrame =\n      requestAnimationFrame(\n        updateNetwork\n      );\n\n  }\n\n\n  \/* =======================================================\n     START \/ STOP ANIMATION\n     ======================================================= *\/\n\n  const observer =\n    new IntersectionObserver(\n      function (entries) {\n\n        entries.forEach(\n          function (entry) {\n\n            if (entry.isIntersecting) {\n\n              if (!animationFrame) {\n\n                updateNetwork();\n\n              }\n\n            } else {\n\n              cancelAnimationFrame(\n                animationFrame\n              );\n\n              animationFrame =\n                null;\n\n            }\n\n          }\n        );\n\n      },\n      {\n        threshold: 0\n      }\n    );\n\n\n  observer.observe(network);\n\n\n  \/* =======================================================\n     OPEN PROJECT\n     ======================================================= *\/\n\n  projects.forEach(\n    function (project) {\n\n      project.addEventListener(\n        \"click\",\n        function () {\n\n          const projectName =\n            project.dataset.project;\n\n\n          \/*\n           * LBLB :\n           * le nouveau lecteur PDF\n           * reste sur la page.\n           *\/\n\n          if (\n            projectName === \"lblb\"\n          ) {\n\n            const lblb =\n              document.getElementById(\n                \"cbg-lblb-project\"\n              );\n\n\n            if (lblb) {\n\n              lblb.scrollIntoView({\n\n                behavior: \"smooth\",\n\n                block: \"start\"\n\n              });\n\n            }\n\n            return;\n\n          }\n\n\n          const images =\n            galleries[\n              projectName\n            ];\n\n\n          if (!images) return;\n\n\n          gallery.innerHTML = \"\";\n\n\n          images.forEach(\n            function (src) {\n\n              const img =\n                document.createElement(\n                  \"img\"\n                );\n\n\n              img.src = src;\n\n              img.alt = \"\";\n\n              img.loading = \"lazy\";\n\n              gallery.appendChild(\n                img\n              );\n\n            }\n          );\n\n\n          overlay.classList.add(\n            \"is-open\"\n          );\n\n\n          overlay.setAttribute(\n            \"aria-hidden\",\n            \"false\"\n          );\n\n\n          document.body.style.overflow =\n            \"hidden\";\n\n        }\n      );\n\n    }\n  );\n\n\n  \/* =======================================================\n     CLOSE\n     ======================================================= *\/\n\n  function closeOverlay() {\n\n    overlay.classList.remove(\n      \"is-open\"\n    );\n\n\n    overlay.setAttribute(\n      \"aria-hidden\",\n      \"true\"\n    );\n\n\n    document.body.style.overflow =\n      \"\";\n\n  }\n\n\n  closeButton.addEventListener(\n    \"click\",\n    closeOverlay\n  );\n\n\n  overlay.addEventListener(\n    \"click\",\n    function (event) {\n\n      if (\n        event.target === overlay\n      ) {\n\n        closeOverlay();\n\n      }\n\n    }\n  );\n\n\n  document.addEventListener(\n    \"keydown\",\n    function (event) {\n\n      if (\n        event.key === \"Escape\"\n      ) {\n\n        closeOverlay();\n\n      }\n\n    }\n  );\n\n\n  \/* =======================================================\n     RESIZE\n     ======================================================= *\/\n\n  window.addEventListener(\n    \"resize\",\n    function () {\n\n      if (!animationFrame) {\n\n        updateNetwork();\n\n        cancelAnimationFrame(\n          animationFrame\n        );\n\n        animationFrame = null;\n\n      }\n\n    }\n  );\n\n})();\n<\/script>\n\n\n\n<div style=\"height:249px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<!-- =========================================================\n     MAISON.MARGIELA \/ FOLDERS\n     ========================================================= -->\n\n<section class=\"mm-folders-archive\">\n\n    <!-- HEADER -->\n\n    <div class=\"mm-folders-header\">\n\n        <div class=\"mm-folders-code\">\n            MM \/ FOLDERS \/ 2026\n        <\/div>\n\n        <div class=\"mm-folders-project\">\n            Maison.Margiela\/Folders\n        <\/div>\n\n        <div class=\"mm-folders-category\">\n            VISUAL RESEARCH \/ TEXT\n        <\/div>\n\n    <\/div>\n\n\n    <!-- DESCRIPTION -->\n\n    <div class=\"mm-folders-copy\">\n\n        <div class=\"mm-folders-index\">\n            01\n        <\/div>\n\n        <div class=\"mm-folders-description\">\n            Visual research and writing developed for\n            the Maison.Margiela\/Folders campaign.\n        <\/div>\n\n        <div class=\"mm-folders-note\">\n            Selected material \u2014 documents available upon request.\n        <\/div>\n\n    <\/div>\n\n\n    <!-- TWO IMAGES -->\n\n    <div class=\"mm-folders-images\">\n\n        <div class=\"mm-folders-slot mm-slot-left\">\n\n            <span class=\"mm-image-code\">\n                IMAGE \/ 01\n            <\/span>\n\n            <img decoding=\"async\" src=\"http:\/\/www.clara-belbachir-garnier.fr\/wp-content\/uploads\/2026\/09\/MM_FOLDERS_CROP-scaled.jpg\" alt=\"Maison.Margiela\/Folders\">\n\n        <\/div>\n\n\n        <div class=\"mm-folders-slot mm-slot-right\">\n\n            <span class=\"mm-image-code\">\n                IMAGE \/ 02\n            <\/span>\n\n            <img decoding=\"async\" src=\"http:\/\/www.clara-belbachir-garnier.fr\/wp-content\/uploads\/2026\/09\/698b4857444ad087ba978bcd_2_MM_Folders_Anonymity_Anders-Edstrom_02.webp\" alt=\"Maison.Margiela\/Folders\">\n\n        <\/div>\n\n    <\/div>\n\n\n    <!-- FOOTER -->\n\n    <div class=\"mm-folders-footer\">\n\n        <span>HERITAGE \/ IMAGE \/ EDITORIAL<\/span>\n\n        <span>01 \u2014 02<\/span>\n\n    <\/div>\n\n<\/section>\n\n\n<style>\n\n\/* =========================================================\n   BASE\n   ========================================================= *\/\n\n.mm-folders-archive {\n\n    position: relative;\n\n    width: 100%;\n\n    padding:\n        70px\n        6vw\n        85px;\n\n    box-sizing: border-box;\n\n    color: #111;\n\n    background: transparent;\n\n    font-family:\n        Arial,\n        Helvetica,\n        sans-serif;\n\n    overflow: hidden;\n\n}\n\n\n\/* =========================================================\n   SUBTLE SCAN TEXTURE\n   ========================================================= *\/\n\n.mm-folders-archive::before {\n\n    content: \"\";\n\n    position: absolute;\n\n    inset: 0;\n\n    pointer-events: none;\n\n    opacity: .2;\n\n    background:\n        repeating-linear-gradient(\n            0deg,\n            rgba(0,0,0,.018) 0,\n            rgba(0,0,0,.018) 1px,\n            transparent 1px,\n            transparent 5px\n        );\n\n    mix-blend-mode: multiply;\n\n}\n\n\n\/* =========================================================\n   HEADER\n   ========================================================= *\/\n\n.mm-folders-header {\n\n    position: relative;\n\n    display: grid;\n\n    grid-template-columns:\n        1fr\n        1.5fr\n        1fr;\n\n    align-items: end;\n\n    padding-bottom: 18px;\n\n    border-bottom:\n        1px solid rgba(0,0,0,.55);\n\n    z-index: 2;\n\n}\n\n\n.mm-folders-code,\n.mm-folders-category {\n\n    font-family:\n        \"Courier New\",\n        monospace;\n\n    font-size: 8px;\n\n    letter-spacing: .08em;\n\n    text-transform: uppercase;\n\n}\n\n\n.mm-folders-category {\n\n    text-align: right;\n\n}\n\n\n.mm-folders-project {\n\n    font-size:\n        clamp(20px, 2.5vw, 32px);\n\n    font-weight: 300;\n\n    letter-spacing: -.045em;\n\n    line-height: 1;\n\n    text-align: center;\n\n}\n\n\n\/* =========================================================\n   TEXT \u2014 ABOVE IMAGES\n   ========================================================= *\/\n\n.mm-folders-copy {\n\n    position: relative;\n\n    display: flex;\n\n    align-items: baseline;\n\n    gap: 35px;\n\n    padding:\n        25px\n        0\n        30px;\n\n    z-index: 2;\n\n}\n\n\n.mm-folders-index {\n\n    flex-shrink: 0;\n\n    font-family:\n        \"Courier New\",\n        monospace;\n\n    font-size: 8px;\n\n    letter-spacing: .08em;\n\n}\n\n\n.mm-folders-description {\n\n    max-width: 430px;\n\n    font-size: 10px;\n\n    line-height: 1.55;\n\n}\n\n\n.mm-folders-note {\n\n    margin-left: auto;\n\n    max-width: 220px;\n\n    font-family:\n        \"Courier New\",\n        monospace;\n\n    font-size: 7px;\n\n    line-height: 1.5;\n\n    letter-spacing: .04em;\n\n    opacity: .5;\n\n    text-align: right;\n\n}\n\n\n\/* =========================================================\n   IMAGES \u2014 FULL WIDTH \/ TWO COLUMNS\n   ========================================================= *\/\n\n.mm-folders-images {\n\n    position: relative;\n\n    display: grid;\n\n    grid-template-columns:\n        repeat(2, minmax(0, 1fr));\n\n    gap: 12px;\n\n    width: 100%;\n\n    max-width: 1050px;\n\n    margin: 0 auto;\n\n    z-index: 2;\n\n}\n\n\n\/* =========================================================\n   IMAGE SLOTS\n   ========================================================= *\/\n\n.mm-folders-slot {\n\n    position: relative;\n\n    width: 100%;\n\n    aspect-ratio: 1 \/ 1;\n\n    overflow: hidden;\n\n    background: #ddd;\n\n}\n\n\n\/* petite asym\u00e9trie *\/\n\n.mm-slot-left {\n\n    margin-top: 20px;\n\n}\n\n\n.mm-slot-right {\n\n    margin-top: 0;\n\n}\n\n\n\/* =========================================================\n   IMAGES\n   ========================================================= *\/\n\n.mm-folders-slot img {\n\n    display: block;\n\n    width: 100% !important;\n\n    height: 100% !important;\n\n    object-fit: cover;\n\n    margin: 0 !important;\n\n    padding: 0 !important;\n\n}\n\n\n\/* =========================================================\n   IMAGE LABEL\n   ========================================================= *\/\n\n.mm-image-code {\n\n    position: absolute;\n\n    top: 8px;\n\n    left: 8px;\n\n    z-index: 3;\n\n    padding: 3px 5px;\n\n    background: rgba(255,255,255,.78);\n\n    font-family:\n        \"Courier New\",\n        monospace;\n\n    font-size: 7px;\n\n    letter-spacing: .06em;\n\n}\n\n\n\/* =========================================================\n   FOOTER\n   ========================================================= *\/\n\n.mm-folders-footer {\n\n    position: relative;\n\n    display: flex;\n\n    justify-content: space-between;\n\n    margin-top: 22px;\n\n    padding-top: 12px;\n\n    border-top:\n        1px solid rgba(0,0,0,.45);\n\n    font-family:\n        \"Courier New\",\n        monospace;\n\n    font-size: 7px;\n\n    letter-spacing: .08em;\n\n    z-index: 2;\n\n}\n\n\n\/* =========================================================\n   MOBILE\n   ========================================================= *\/\n\n@media (max-width: 768px) {\n\n    .mm-folders-archive {\n\n        padding:\n            55px\n            18px\n            70px;\n\n    }\n\n\n    .mm-folders-header {\n\n        display: block;\n\n    }\n\n\n    .mm-folders-project {\n\n        margin-top: 12px;\n\n        text-align: left;\n\n        font-size: 25px;\n\n    }\n\n\n    .mm-folders-category {\n\n        margin-top: 8px;\n\n        text-align: left;\n\n    }\n\n\n    .mm-folders-copy {\n\n        display: block;\n\n        padding:\n            22px\n            0\n            25px;\n\n    }\n\n\n    .mm-folders-index {\n\n        margin-bottom: 12px;\n\n    }\n\n\n    .mm-folders-description {\n\n        max-width: 300px;\n\n    }\n\n\n    .mm-folders-note {\n\n        margin-top: 14px;\n\n        text-align: left;\n\n    }\n\n\n    .mm-folders-images {\n\n        gap: 6px;\n\n    }\n\n\n    .mm-slot-left {\n\n        margin-top: 12px;\n\n    }\n\n\n    .mm-folders-footer {\n\n        margin-top: 18px;\n\n    }\n\n}\n\n<\/style>\n\n\n<script>\n\n(function() {\n\n    const slot1 =\n        document.querySelector(\".mm-slot-left\");\n\n    const slot2 =\n        document.querySelector(\".mm-slot-right\");\n\n    if (!slot1 || !slot2) return;\n\n\n    setInterval(function() {\n\n        const image1 =\n            slot1.querySelector(\"img\");\n\n        const image2 =\n            slot2.querySelector(\"img\");\n\n        if (!image1 || !image2) return;\n\n\n        slot1.appendChild(image2);\n\n        slot2.appendChild(image1);\n\n    }, 1800);\n\n})();\n\n<\/script>\n\n\n\n<!-- =========================================================\n     REELS \/ MOVING IMAGE \u2014 ARCHIVE\n     ========================================================= -->\n\n<section class=\"cbg-reels\" id=\"cbgReels\">\n\n\n    <!-- HEADER -->\n\n    <header class=\"cbg-reels-header\">\n\n        <div class=\"cbg-reels-title-wrap\">\n\n            <div class=\"cbg-reels-index\">\n                03 \/ MOVING IMAGE\n            <\/div>\n\n            <h2 class=\"cbg-reels-title\">\n                REELS\n            <\/h2>\n\n        <\/div>\n\n        <div class=\"cbg-reels-meta\">\n            FASHION FILMS \/ IMAGE \/ DIRECTION\n        <\/div>\n\n    <\/header>\n\n\n    <!-- =====================================================\n         THREE FILMS\n         ===================================================== -->\n\n    <div class=\"cbg-reels-grid\">\n\n\n        <!-- FILM 01 -->\n\n        <article class=\"cbg-reel-card\">\n\n            <a href=\"https:\/\/www.youtube.com\/watch?v=GMFBnqFkJTM\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"cbg-reel-object\">\n\n                <div class=\"cbg-reel-code\">\n                    001\n                <\/div>\n\n                <div class=\"cbg-reel-video\">\n\n                    <iframe src=\"https:\/\/www.youtube.com\/embed\/GMFBnqFkJTM?autoplay=1&amp;mute=1&amp;controls=0&amp;modestbranding=1&amp;loop=1&amp;playlist=GMFBnqFkJTM&amp;playsinline=1\" title=\"Red Mind\" loading=\"eager\" allow=\"autoplay; encrypted-media\" referrerpolicy=\"strict-origin-when-cross-origin\">\n                    <\/iframe>\n\n                <\/div>\n\n            <\/a>\n\n\n            <div class=\"cbg-reel-info\">\n\n                <div class=\"cbg-reel-top\">\n\n                    <span>01<\/span>\n\n                    <span>2025<\/span>\n\n                <\/div>\n\n                <div class=\"cbg-reel-name\">\n                    RED MIND\n                <\/div>\n\n                <div class=\"cbg-reel-role\">\n                    CREATIVE DIRECTION \/ MOVING IMAGE\n                <\/div>\n\n            <\/div>\n\n        <\/article>\n\n\n\n        <!-- FILM 02 -->\n\n        <article class=\"cbg-reel-card\">\n\n            <a href=\"https:\/\/www.youtube.com\/watch?v=SEJ5pSvs1lA\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"cbg-reel-object\">\n\n                <div class=\"cbg-reel-code\">\n                    002\n                <\/div>\n\n                <div class=\"cbg-reel-video\">\n\n                    <iframe src=\"https:\/\/www.youtube.com\/embed\/SEJ5pSvs1lA?autoplay=1&amp;mute=1&amp;controls=0&amp;modestbranding=1&amp;loop=1&amp;playlist=SEJ5pSvs1lA&amp;playsinline=1\" title=\"Male Mori\" loading=\"lazy\" allow=\"autoplay; encrypted-media\" referrerpolicy=\"strict-origin-when-cross-origin\">\n                    <\/iframe>\n\n                <\/div>\n\n            <\/a>\n\n\n            <div class=\"cbg-reel-info\">\n\n                <div class=\"cbg-reel-top\">\n\n                    <span>02<\/span>\n\n                    <span>2025<\/span>\n\n                <\/div>\n\n                <div class=\"cbg-reel-name\">\n                    MALE MORI\n                <\/div>\n\n                <div class=\"cbg-reel-role\">\n                    CREATIVE DIRECTION \/ EDITING\n                <\/div>\n\n            <\/div>\n\n        <\/article>\n\n\n\n        <!-- FILM 03 -->\n\n        <article class=\"cbg-reel-card\">\n\n            <a href=\"https:\/\/www.youtube.com\/watch?v=S2a7YMWjsr0\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"cbg-reel-object\">\n\n                <div class=\"cbg-reel-code\">\n                    003\n                <\/div>\n\n                <div class=\"cbg-reel-video\">\n\n                    <iframe src=\"https:\/\/www.youtube.com\/embed\/S2a7YMWjsr0?autoplay=1&amp;mute=1&amp;controls=0&amp;modestbranding=1&amp;loop=1&amp;playlist=S2a7YMWjsr0&amp;playsinline=1\" title=\"La Mouche\" loading=\"lazy\" allow=\"autoplay; encrypted-media\" referrerpolicy=\"strict-origin-when-cross-origin\">\n                    <\/iframe>\n\n                <\/div>\n\n            <\/a>\n\n\n            <div class=\"cbg-reel-info\">\n\n                <div class=\"cbg-reel-top\">\n\n                    <span>03<\/span>\n\n                    <span>2025<\/span>\n\n                <\/div>\n\n                <div class=\"cbg-reel-name\">\n                    LA MOUCHE\n                <\/div>\n\n                <div class=\"cbg-reel-role\">\n                    IMAGE \/ CREATIVE DIRECTION \/ EDITING\n                <\/div>\n\n            <\/div>\n\n        <\/article>\n\n\n    <\/div>\n\n\n    <!-- FOOTER -->\n\n    <footer class=\"cbg-reels-footer\">\n\n        <span>CLARA BELBACHIR-GARNIER<\/span>\n\n        <span>SELECTED MOVING IMAGE<\/span>\n\n        <span>03 \/ 03<\/span>\n\n    <\/footer>\n\n\n<\/section>\n\n\n\n<style>\n\n\/* =========================================================\n   BASE\n   ========================================================= *\/\n\n.cbg-reels {\n\n    position: relative;\n\n    width: 100%;\n\n    padding:\n        75px\n        5vw\n        80px;\n\n    box-sizing: border-box;\n\n    color: #111;\n\n    background: transparent;\n\n    overflow: hidden;\n\n    font-family:\n        Arial,\n        Helvetica,\n        sans-serif;\n\n}\n\n\n\/* =========================================================\n   SUBTLE SCAN TEXTURE\n   ========================================================= *\/\n\n.cbg-reels::before {\n\n    content: \"\";\n\n    position: absolute;\n\n    inset: 0;\n\n    pointer-events: none;\n\n    opacity: .25;\n\n    background:\n\n        repeating-linear-gradient(\n            0deg,\n            rgba(0,0,0,.018) 0,\n            rgba(0,0,0,.018) 1px,\n            transparent 1px,\n            transparent 5px\n        );\n\n    mix-blend-mode: multiply;\n\n}\n\n\n\/* =========================================================\n   HEADER\n   ========================================================= *\/\n\n.cbg-reels-header {\n\n    position: relative;\n\n    display: flex;\n\n    align-items: flex-end;\n\n    justify-content: space-between;\n\n    padding-bottom: 24px;\n\n    margin-bottom: 48px;\n\n    border-bottom:\n        1px solid rgba(0,0,0,.55);\n\n    z-index: 2;\n\n}\n\n\n.cbg-reels-index {\n\n    margin-bottom: 10px;\n\n    font-family:\n        \"Courier New\",\n        monospace;\n\n    font-size: 8px;\n\n    letter-spacing: .09em;\n\n}\n\n\n.cbg-reels-title {\n\n    margin: 0;\n\n    font-family:\n        \"Helvetica Neue\",\n        Helvetica,\n        Arial,\n        sans-serif;\n\n    font-size:\n        clamp(48px, 7vw, 100px);\n\n    font-weight: 300;\n\n    letter-spacing: -.075em;\n\n    line-height: .72;\n\n}\n\n\n.cbg-reels-meta {\n\n    padding-bottom: 4px;\n\n    font-family:\n        \"Courier New\",\n        monospace;\n\n    font-size: 8px;\n\n    letter-spacing: .08em;\n\n    text-transform: uppercase;\n\n}\n\n\n\/* =========================================================\n   GRID\n   ========================================================= *\/\n\n.cbg-reels-grid {\n\n    position: relative;\n\n    display: grid;\n\n    grid-template-columns:\n        repeat(3, minmax(0, 1fr));\n\n    gap:\n        clamp(20px, 3vw, 55px);\n\n    align-items: start;\n\n    z-index: 2;\n\n}\n\n\n\/* =========================================================\n   CARD\n   ========================================================= *\/\n\n.cbg-reel-card {\n\n    position: relative;\n\n    min-width: 0;\n\n}\n\n\n\/* petite asym\u00e9trie *\/\n\n.cbg-reel-card:nth-child(1) {\n\n    padding-top: 20px;\n\n}\n\n\n.cbg-reel-card:nth-child(2) {\n\n    padding-top: 0;\n\n}\n\n\n.cbg-reel-card:nth-child(3) {\n\n    padding-top: 35px;\n\n}\n\n\n\/* =========================================================\n   VIDEO OBJECT\n   ========================================================= *\/\n\n.cbg-reel-object {\n\n    position: relative;\n\n    display: block;\n\n    width: 100%;\n\n    text-decoration: none;\n\n    color: inherit;\n\n    transition:\n        transform .55s cubic-bezier(.2,.7,.2,1);\n\n}\n\n\n.cbg-reel-object:hover {\n\n    transform:\n        translateY(-6px);\n\n}\n\n\n\/* =========================================================\n   CODE\n   ========================================================= *\/\n\n.cbg-reel-code {\n\n    position: absolute;\n\n    top: -15px;\n\n    left: -15px;\n\n    z-index: 5;\n\n    font-family:\n        \"Courier New\",\n        monospace;\n\n    font-size: 8px;\n\n    letter-spacing: .08em;\n\n    writing-mode: vertical-rl;\n\n    opacity: .55;\n\n}\n\n\n\/* =========================================================\n   VIDEO\n   ========================================================= *\/\n\n.cbg-reel-video {\n\n    position: relative;\n\n    width: 100%;\n\n    \/*\n       BIGGER VIDEO\n    *\/\n\n    aspect-ratio:\n        3 \/ 4;\n\n    overflow: hidden;\n\n    background: #111;\n\n    border:\n        1px solid rgba(0,0,0,.8);\n\n}\n\n\n\/* scan lines *\/\n\n.cbg-reel-video::after {\n\n    content: \"\";\n\n    position: absolute;\n\n    inset: 0;\n\n    pointer-events: none;\n\n    background:\n\n        repeating-linear-gradient(\n            0deg,\n            transparent 0,\n            transparent 5px,\n            rgba(255,255,255,.025) 5px,\n            rgba(255,255,255,.025) 6px\n        );\n\n    opacity: .4;\n\n}\n\n\n.cbg-reel-video iframe {\n\n    display: block;\n\n    width: 100%;\n\n    height: 100%;\n\n    border: 0;\n\n}\n\n\n\/* =========================================================\n   INFO\n   ========================================================= *\/\n\n.cbg-reel-info {\n\n    padding-top: 11px;\n\n}\n\n\n.cbg-reel-top {\n\n    display: flex;\n\n    justify-content: space-between;\n\n    margin-bottom: 15px;\n\n    font-family:\n        \"Courier New\",\n        monospace;\n\n    font-size: 8px;\n\n    letter-spacing: .08em;\n\n}\n\n\n.cbg-reel-name {\n\n    margin-bottom: 7px;\n\n    font-size:\n        clamp(18px, 2vw, 28px);\n\n    font-weight: 300;\n\n    letter-spacing:\n        -.045em;\n\n    line-height: 1;\n\n}\n\n\n.cbg-reel-role {\n\n    font-family:\n        \"Courier New\",\n        monospace;\n\n    font-size: 7px;\n\n    line-height: 1.5;\n\n    letter-spacing: .06em;\n\n    opacity: .65;\n\n}\n\n\n\/* =========================================================\n   FOOTER\n   ========================================================= *\/\n\n.cbg-reels-footer {\n\n    position: relative;\n\n    display: grid;\n\n    grid-template-columns:\n        1fr 1fr 1fr;\n\n    margin-top: 60px;\n\n    padding-top: 13px;\n\n    border-top:\n        1px solid rgba(0,0,0,.45);\n\n    font-family:\n        \"Courier New\",\n        monospace;\n\n    font-size: 7px;\n\n    letter-spacing: .08em;\n\n    z-index: 2;\n\n}\n\n\n.cbg-reels-footer span:nth-child(2) {\n\n    text-align: center;\n\n}\n\n\n.cbg-reels-footer span:last-child {\n\n    text-align: right;\n\n}\n\n\n\/* =========================================================\n   MOBILE\n   ========================================================= *\/\n\n@media (max-width: 768px) {\n\n    .cbg-reels {\n\n        padding:\n            50px\n            18px\n            65px;\n\n    }\n\n\n    .cbg-reels-header {\n\n        display: block;\n\n        margin-bottom: 38px;\n\n    }\n\n\n    .cbg-reels-title {\n\n        font-size: 58px;\n\n    }\n\n\n    .cbg-reels-meta {\n\n        margin-top: 15px;\n\n        font-size: 7px;\n\n    }\n\n\n    .cbg-reels-grid {\n\n        grid-template-columns: 1fr;\n\n        gap: 65px;\n\n    }\n\n\n    .cbg-reel-card:nth-child(1),\n    .cbg-reel-card:nth-child(2),\n    .cbg-reel-card:nth-child(3) {\n\n        padding-top: 0;\n\n    }\n\n\n    .cbg-reel-card:nth-child(2) {\n\n        width: 90%;\n\n        margin-left: auto;\n\n    }\n\n\n    .cbg-reel-card:nth-child(3) {\n\n        width: 95%;\n\n    }\n\n\n    .cbg-reels-footer {\n\n        display: flex;\n\n        flex-direction: column;\n\n        gap: 8px;\n\n    }\n\n\n    .cbg-reels-footer span {\n\n        text-align: left !important;\n\n    }\n\n}\n\n<\/style>\n\n\n\n<!-- CURSEUR PERSONNALIS\u00c9 : GROS POINT BLEU -->\n<div class=\"custom-cursor\" id=\"customCursor\"><\/div>\n\n<style>\n\/* Cache le curseur par d\u00e9faut de la souris sur tout le site *\/\nbody {\n    cursor: none;\n}\n\n\/* Style du gros point bleu *\/\n.custom-cursor {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 30px;\n    height: 30px;\n    background-color: #0055ff; \/* Bleu vif *\/\n    border-radius: 50%;\n    pointer-events: none; \/* Permet de cliquer \u00e0 travers *\/\n    transform: translate(-50%, -50%);\n    transition: transform 0.1s ease-out, background-color 0.2s ease;\n    z-index: 99999;\n    box-shadow: 0 0 10px rgba(0, 85, 255, 0.6);\n}\n\n\/* Effet au survol des liens ou \u00e9l\u00e9ments cliquables (grossit l\u00e9g\u00e8rement) *\/\nbody:hover .custom-cursor.hovered {\n    transform: translate(-50%, -50%) scale(1.5);\n    background-color: #00ffff;\n}\n<\/style>\n\n<script>\ndocument.addEventListener(\"DOMContentLoaded\", function() {\n    const cursor = document.getElementById(\"customCursor\");\n\n    \/\/ Suivi du mouvement de la souris\n    window.addEventListener(\"mousemove\", function(e) {\n        cursor.style.left = e.clientX + \"px\";\n        cursor.style.top = e.clientY + \"px\";\n    });\n\n    \/\/ Optionnel : Effet dynamique quand on clique\n    window.addEventListener(\"mousedown\", function() {\n        cursor.style.transform = \"translate(-50%, -50%) scale(0.8)\";\n    });\n\n    window.addEventListener(\"mouseup\", function() {\n        cursor.style.transform = \"translate(-50%, -50%) scale(1)\";\n    });\n});\n<\/script>\n\n\n\n<section class=\"cbg-print\" id=\"cbgPrint\">\n\n<style>\n\/* =========================\n   PRINT \u2014 JEALOUZINE\n   ========================= *\/\n\n.cbg-print{\n    width:100%;\n    box-sizing:border-box;\n    padding:80px 4vw 100px;\n    background:#F4F3EF;\n    color:#0A0A0A;\n    overflow:hidden;\n}\n\n.cbg-print *{\n    box-sizing:border-box;\n}\n\n.cbg-print-header{\n    display:flex;\n    justify-content:space-between;\n    align-items:flex-end;\n    gap:30px;\n    border-bottom:1px solid rgba(0,0,0,.22);\n    padding-bottom:14px;\n    margin-bottom:45px;\n}\n\n.cbg-print-title{\n    font-family:Arial,Helvetica,sans-serif;\n    font-size:clamp(80px,14vw,190px);\n    font-weight:900;\n    line-height:.78;\n    letter-spacing:-.075em;\n}\n\n.cbg-print-header-meta{\n    font-family:\"Courier New\",monospace;\n    font-size:9px;\n    letter-spacing:.14em;\n    text-transform:uppercase;\n    padding-bottom:5px;\n}\n\n\n\/* =========================\n   ZINE\n   ========================= *\/\n\n.cbg-print-main{\n    width:100%;\n    max-width:720px;\n    margin:0 auto;\n}\n\n\n\/*\n   IMPORTANT :\n   pas de ratio forc\u00e9.\n   Le conteneur prend le ratio r\u00e9el\n   du zine.\n*\/\n\n.cbg-print-object{\n    position:relative;\n    width:100%;\n    display:block;\n    overflow:hidden;\n    background:#111;\n    border:1px solid #111;\n    text-decoration:none;\n    cursor:pointer;\n    line-height:0;\n}\n\n\n\/* =========================\n   IMAGES\n   ========================= *\/\n\n.cbg-jealouzine-slides{\n    position:relative;\n    width:100%;\n    height:auto;\n    line-height:0;\n}\n\n.cbg-jealouzine-slides img{\n    position:absolute;\n    top:0;\n    left:0;\n\n    width:100%;\n    height:auto;\n\n    display:block;\n\n    opacity:0;\n    transition:opacity .18s linear;\n\n    pointer-events:none;\n}\n\n\n\/*\n   La premi\u00e8re image sert \u00e0 d\u00e9finir\n   la hauteur r\u00e9elle du bloc.\n*\/\n\n.cbg-jealouzine-slides img:first-child{\n    position:relative;\n    opacity:1;\n}\n\n\n\/* =========================\n   SCAN\n   ========================= *\/\n\n.cbg-print-scan{\n    position:absolute;\n    inset:0;\n    z-index:4;\n    pointer-events:none;\n\n    background:\n        repeating-linear-gradient(\n            0deg,\n            rgba(255,255,255,.045) 0px,\n            rgba(255,255,255,.045) 1px,\n            transparent 1px,\n            transparent 5px\n        );\n\n    mix-blend-mode:screen;\n    opacity:.5;\n}\n\n\n\/* =========================\n   LABELS\n   ========================= *\/\n\n.cbg-print-code{\n    position:absolute;\n    top:14px;\n    left:15px;\n    z-index:6;\n\n    font-family:\"Courier New\",monospace;\n    font-size:9px;\n    line-height:1;\n    letter-spacing:.14em;\n\n    color:#fff;\n    background:#000;\n\n    padding:7px 8px;\n}\n\n.cbg-print-open{\n    position:absolute;\n    right:15px;\n    bottom:15px;\n    z-index:6;\n\n    font-family:\"Courier New\",monospace;\n    font-size:9px;\n    line-height:1;\n    letter-spacing:.13em;\n\n    color:#000;\n    background:#FFE600;\n\n    padding:8px 9px;\n}\n\n\n\/* =========================\n   INFO\n   ========================= *\/\n\n.cbg-print-info{\n    display:grid;\n    grid-template-columns:1fr auto;\n    gap:30px;\n\n    margin-top:14px;\n    padding-top:12px;\n\n    border-top:1px solid rgba(0,0,0,.2);\n}\n\n.cbg-print-name{\n    font-family:Arial,Helvetica,sans-serif;\n    font-size:clamp(22px,3vw,36px);\n    font-weight:700;\n    letter-spacing:-.04em;\n    line-height:1;\n}\n\n.cbg-print-description{\n    max-width:540px;\n    margin-top:9px;\n\n    font-family:\"Courier New\",monospace;\n    font-size:10px;\n    line-height:1.5;\n    letter-spacing:.04em;\n    text-transform:uppercase;\n}\n\n.cbg-print-year{\n    font-family:\"Courier New\",monospace;\n    font-size:9px;\n    line-height:1.5;\n    letter-spacing:.12em;\n    text-align:right;\n}\n\n\n\/* =========================\n   FOOTER\n   ========================= *\/\n\n.cbg-print-footer{\n    display:flex;\n    justify-content:space-between;\n    gap:20px;\n\n    margin-top:55px;\n    padding-top:12px;\n\n    border-top:1px solid rgba(0,0,0,.15);\n\n    font-family:\"Courier New\",monospace;\n    font-size:8px;\n    letter-spacing:.12em;\n    text-transform:uppercase;\n}\n\n\n\/* =========================\n   MOBILE\n   ========================= *\/\n\n@media(max-width:700px){\n\n    .cbg-print{\n        padding:55px 18px 70px;\n    }\n\n    .cbg-print-header{\n        margin-bottom:30px;\n    }\n\n    .cbg-print-title{\n        font-size:clamp(64px,22vw,110px);\n    }\n\n    .cbg-print-header-meta{\n        font-size:8px;\n    }\n\n    .cbg-print-main{\n        max-width:100%;\n    }\n\n    .cbg-print-info{\n        grid-template-columns:1fr;\n    }\n\n    .cbg-print-year{\n        text-align:left;\n    }\n\n    .cbg-print-footer{\n        flex-direction:column;\n        gap:7px;\n    }\n\n}\n<\/style>\n\n\n<header class=\"cbg-print-header\">\n\n    <div class=\"cbg-print-title\">\n        PRINT\n    <\/div>\n\n    <div class=\"cbg-print-header-meta\">\n        02 \/ PUBLICATIONS\n    <\/div>\n\n<\/header>\n\n\n<div class=\"cbg-print-main\">\n\n    <a\n        class=\"cbg-print-object\"\n        id=\"jealouzineObject\"\n        href=\"http:\/\/www.clara-belbachir-garnier.fr\/wp-content\/uploads\/2026\/08\/MAGAZINE_JALOUSIE.png\"\n        target=\"_blank\"\n        rel=\"noopener noreferrer\"\n    >\n\n        <div class=\"cbg-jealouzine-slides\">\n\n            <!-- COVER -->\n            <img decoding=\"async\"\n                src=\"http:\/\/www.clara-belbachir-garnier.fr\/wp-content\/uploads\/2026\/08\/MAGAZINE_JALOUSIE.png\"\n                alt=\"JEALOUZINE cover\"\n            >\n\n            <!-- PAGES -->\n            <img decoding=\"async\"\n                src=\"http:\/\/www.clara-belbachir-garnier.fr\/wp-content\/uploads\/2026\/08\/muglermagazine_page-0001.jpg\"\n                alt=\"JEALOUZINE page 01\"\n            >\n\n            <img decoding=\"async\"\n                src=\"http:\/\/www.clara-belbachir-garnier.fr\/wp-content\/uploads\/2026\/08\/ZINE.2_page-0001.jpg\"\n                alt=\"JEALOUZINE page 02\"\n            >\n\n            <img decoding=\"async\"\n                src=\"http:\/\/www.clara-belbachir-garnier.fr\/wp-content\/uploads\/2026\/08\/doublepagelemiatexte_page-0001.jpg\"\n                alt=\"JEALOUZINE page 03\"\n            >\n\n            <img decoding=\"async\"\n                src=\"http:\/\/www.clara-belbachir-garnier.fr\/wp-content\/uploads\/2026\/08\/divine_page-0001.jpg\"\n                alt=\"JEALOUZINE page 04\"\n            >\n\n            <img decoding=\"async\"\n                src=\"http:\/\/www.clara-belbachir-garnier.fr\/wp-content\/uploads\/2026\/08\/dernierepage-read_page-0001.jpg\"\n                alt=\"JEALOUZINE final page\"\n            >\n\n        <\/div>\n\n        <div class=\"cbg-print-scan\"><\/div>\n\n        <span class=\"cbg-print-code\">\n            001 \/ JEALOUZINE\n        <\/span>\n\n        <span class=\"cbg-print-open\">\n            OPEN \u2197\n        <\/span>\n\n    <\/a>\n\n\n    <div class=\"cbg-print-info\">\n\n        <div>\n\n            <div class=\"cbg-print-name\">\n                JEALOUZINE\n            <\/div>\n\n            <div class=\"cbg-print-description\">\n                ZINE CREATED AROUND JEALOUSY IN A DIGITAL-GOTHIC THEME.\n                FULL ZINE AVAILABLE IN PDF OR PRINT UPON REQUEST.\n            <\/div>\n\n        <\/div>\n\n        <div class=\"cbg-print-year\">\n            DIGITAL-GOTHIC<br>\n            2026\n        <\/div>\n\n    <\/div>\n\n<\/div>\n\n\n<footer class=\"cbg-print-footer\">\n\n    <span>\n        PRINT \/ EDITORIAL \/ VISUAL RESEARCH\n    <\/span>\n\n    <span>\n        CLARA BELBACHIR-GARNIER\n    <\/span>\n\n<\/footer>\n\n\n<script>\n(function(){\n\n    const object = document.getElementById(\"jealouzineObject\");\n\n    if(!object) return;\n\n    const images = object.querySelectorAll(\n        \".cbg-jealouzine-slides img\"\n    );\n\n    let interval = null;\n    let current = 0;\n\n    function showImage(index){\n\n        images.forEach(function(img){\n            img.style.opacity = \"0\";\n        });\n\n        images[index].style.opacity = \"1\";\n    }\n\n\n    function startSlideshow(){\n\n        if(interval) return;\n\n        current = 0;\n\n        \/*\n         * La couverture dispara\u00eet seulement\n         * quand on entre avec la souris.\n         *\/\n\n        showImage(1);\n        current = 1;\n\n        interval = setInterval(function(){\n\n            current++;\n\n            if(current >= images.length){\n                current = 1;\n            }\n\n            showImage(current);\n\n        },1200);\n\n    }\n\n\n    function stopSlideshow(){\n\n        if(interval){\n            clearInterval(interval);\n            interval = null;\n        }\n\n        \/*\n         * Retour syst\u00e9matique \u00e0 la couverture\n         *\/\n\n        current = 0;\n\n        showImage(0);\n\n    }\n\n\n    object.addEventListener(\n        \"mouseenter\",\n        startSlideshow\n    );\n\n    object.addEventListener(\n        \"mouseleave\",\n        stopSlideshow\n    );\n\n})();\n<\/script>\n\n<\/section>\n\n\n\n<section class=\"cbg-ihbwy\" id=\"cbgIHBWY\">\n\n<style>\n\/* =========================================\n   IHBWY \u2014 EDITORIAL DOCUMENT\n   ========================================= *\/\n\n.cbg-ihbwy{\n    width:100%;\n    box-sizing:border-box;\n    padding:90px 4vw 110px;\n    background:#F4F3EF;\n    color:#0A0A0A;\n    overflow:hidden;\n}\n\n.cbg-ihbwy *{\n    box-sizing:border-box;\n}\n\n\/* HEADER *\/\n\n.cbg-ihbwy-header{\n    display:flex;\n    justify-content:space-between;\n    align-items:flex-end;\n    gap:30px;\n\n    padding-bottom:14px;\n    margin-bottom:45px;\n\n    border-bottom:1px solid rgba(0,0,0,.22);\n}\n\n.cbg-ihbwy-title{\n    font-family:Arial,Helvetica,sans-serif;\n    font-size:clamp(70px,12vw,165px);\n    font-weight:900;\n    line-height:.78;\n    letter-spacing:-.075em;\n}\n\n.cbg-ihbwy-meta{\n    font-family:\"Courier New\",monospace;\n    font-size:9px;\n    letter-spacing:.14em;\n    text-transform:uppercase;\n    padding-bottom:5px;\n}\n\n\n\/* MAIN OBJECT *\/\n\n.cbg-ihbwy-main{\n    width:100%;\n    max-width:900px;\n    margin:0 auto;\n}\n\n.cbg-ihbwy-object{\n    position:relative;\n    width:100%;\n\n    display:block;\n    overflow:hidden;\n\n    background:#111;\n    border:1px solid #111;\n\n    line-height:0;\n    cursor:pointer;\n}\n\n\n\/*\n   Le canvas prend le ratio r\u00e9el\n   de la premi\u00e8re page du PDF.\n*\/\n\n.cbg-ihbwy-pages{\n    position:relative;\n    width:100%;\n    line-height:0;\n}\n\n.cbg-ihbwy-pages canvas{\n    position:relative;\n    display:block;\n\n    width:100%;\n    height:auto;\n\n    margin:0;\n    padding:0;\n\n    background:#F4F3EF;\n}\n\n.cbg-ihbwy-pages canvas{\n    image-rendering:auto;\n}\n\n\n\/* SCAN *\/\n\n.cbg-ihbwy-scan{\n    position:absolute;\n    inset:0;\n    z-index:4;\n\n    pointer-events:none;\n\n    background:\n        repeating-linear-gradient(\n            0deg,\n            rgba(255,255,255,.045) 0px,\n            rgba(255,255,255,.045) 1px,\n            transparent 1px,\n            transparent 5px\n        );\n\n    mix-blend-mode:multiply;\n    opacity:.38;\n}\n\n\n\/* ARCHIVE LABEL *\/\n\n.cbg-ihbwy-code{\n    position:absolute;\n    top:15px;\n    left:15px;\n    z-index:7;\n\n    font-family:\"Courier New\",monospace;\n    font-size:9px;\n    line-height:1;\n    letter-spacing:.14em;\n\n    color:#fff;\n    background:#000;\n\n    padding:7px 8px;\n}\n\n\n\/* YELLOW MARKER *\/\n\n.cbg-ihbwy-marker{\n    position:absolute;\n    right:17px;\n    top:17px;\n    z-index:7;\n\n    width:8px;\n    height:8px;\n\n    background:#FFE600;\n}\n\n\n\/* OPEN *\/\n\n.cbg-ihbwy-open{\n    position:absolute;\n    right:15px;\n    bottom:15px;\n    z-index:7;\n\n    font-family:\"Courier New\",monospace;\n    font-size:9px;\n    line-height:1;\n    letter-spacing:.13em;\n\n    color:#000;\n    background:#FFE600;\n\n    padding:8px 9px;\n}\n\n\n\/* INFO *\/\n\n.cbg-ihbwy-info{\n    display:grid;\n    grid-template-columns:1fr auto;\n    gap:30px;\n\n    margin-top:14px;\n    padding-top:13px;\n\n    border-top:1px solid rgba(0,0,0,.2);\n}\n\n.cbg-ihbwy-name{\n    font-family:Arial,Helvetica,sans-serif;\n    font-size:clamp(24px,3.5vw,42px);\n    font-weight:700;\n    line-height:.95;\n    letter-spacing:-.045em;\n}\n\n.cbg-ihbwy-description{\n    max-width:560px;\n    margin-top:10px;\n\n    font-family:\"Courier New\",monospace;\n    font-size:10px;\n    line-height:1.5;\n    letter-spacing:.045em;\n    text-transform:uppercase;\n}\n\n.cbg-ihbwy-year{\n    font-family:\"Courier New\",monospace;\n    font-size:9px;\n    line-height:1.5;\n    letter-spacing:.12em;\n    text-align:right;\n}\n\n\n\/* FOOTER *\/\n\n.cbg-ihbwy-footer{\n    display:flex;\n    justify-content:space-between;\n    gap:20px;\n\n    margin-top:55px;\n    padding-top:12px;\n\n    border-top:1px solid rgba(0,0,0,.15);\n\n    font-family:\"Courier New\",monospace;\n    font-size:8px;\n    letter-spacing:.12em;\n    text-transform:uppercase;\n}\n\n\n\/* MOBILE *\/\n\n@media(max-width:700px){\n\n    .cbg-ihbwy{\n        padding:60px 18px 75px;\n    }\n\n    .cbg-ihbwy-header{\n        margin-bottom:30px;\n    }\n\n    .cbg-ihbwy-title{\n        font-size:clamp(60px,20vw,105px);\n    }\n\n    .cbg-ihbwy-meta{\n        font-size:8px;\n    }\n\n    .cbg-ihbwy-main{\n        max-width:100%;\n    }\n\n    .cbg-ihbwy-info{\n        grid-template-columns:1fr;\n    }\n\n    .cbg-ihbwy-year{\n        text-align:left;\n    }\n\n    .cbg-ihbwy-footer{\n        flex-direction:column;\n        gap:7px;\n    }\n}\n<\/style>\n\n\n<header class=\"cbg-ihbwy-header\">\n\n    <div class=\"cbg-ihbwy-title\">\n        IHBWY\n    <\/div>\n\n    <div class=\"cbg-ihbwy-meta\">\n        03 \/ EDITORIAL DOCUMENT\n    <\/div>\n\n<\/header>\n\n\n<div class=\"cbg-ihbwy-main\">\n\n    <a\n        class=\"cbg-ihbwy-object\"\n        id=\"ihbwyObject\"\n        href=\"https:\/\/www.clara-belbachir-garnier.fr\/wp-content\/uploads\/2026\/09\/IHBWY-Pages.pdf\"\n        target=\"_blank\"\n        rel=\"noopener noreferrer\"\n    >\n\n        <div class=\"cbg-ihbwy-pages\">\n\n            <canvas id=\"ihbwyCanvas\"><\/canvas>\n\n        <\/div>\n\n        <div class=\"cbg-ihbwy-scan\"><\/div>\n\n        <span class=\"cbg-ihbwy-code\">\n            002 \/ IHBWY\n        <\/span>\n\n        <span class=\"cbg-ihbwy-marker\"><\/span>\n\n        <span class=\"cbg-ihbwy-open\">\n            OPEN PDF \u2197\n        <\/span>\n\n    <\/a>\n\n\n    <div class=\"cbg-ihbwy-info\">\n\n        <div>\n\n            <div class=\"cbg-ihbwy-name\">\n                IHBWY\n            <\/div>\n\n            <div class=\"cbg-ihbwy-description\">\n                EDITORIAL PUBLICATION \/ VISUAL RESEARCH \/\n                IMAGE \/ TEXT\n            <\/div>\n\n        <\/div>\n\n        <div class=\"cbg-ihbwy-year\">\n            8 PAGES<br>\n            2026\n        <\/div>\n\n    <\/div>\n\n<\/div>\n\n\n<footer class=\"cbg-ihbwy-footer\">\n\n    <span>\n        EDITORIAL \/ IMAGE \/ RESEARCH\n    <\/span>\n\n    <span>\n        CLARA BELBACHIR-GARNIER\n    <\/span>\n\n<\/footer>\n\n\n<script type=\"module\">\n\n(async function(){\n\n    const object = document.getElementById(\"ihbwyObject\");\n    const canvas = document.getElementById(\"ihbwyCanvas\");\n\n    if(!object || !canvas) return;\n\n    const ctx = canvas.getContext(\"2d\");\n\n    const pdfURL =\n        \"https:\/\/www.clara-belbachir-garnier.fr\/wp-content\/uploads\/2026\/09\/IHBWY-Pages.pdf\";\n\n    try{\n\n        const pdfjsLib = await import(\n            \"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/pdf.js\/4.4.168\/pdf.min.mjs\"\n        );\n\n        pdfjsLib.GlobalWorkerOptions.workerSrc =\n            \"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/pdf.js\/4.4.168\/pdf.worker.min.mjs\";\n\n\n        const pdf = await pdfjsLib.getDocument(pdfURL).promise;\n\n        let currentPage = 1;\n        let interval = null;\n\n\n        async function renderPage(pageNumber){\n\n            const page = await pdf.getPage(pageNumber);\n\n            const containerWidth =\n                object.getBoundingClientRect().width;\n\n            const baseViewport =\n                page.getViewport({scale:1});\n\n            const scale =\n                containerWidth \/ baseViewport.width;\n\n            const viewport =\n                page.getViewport({scale:scale});\n\n\n            canvas.width = viewport.width;\n            canvas.height = viewport.height;\n\n            await page.render({\n                canvasContext:ctx,\n                viewport:viewport\n            }).promise;\n\n        }\n\n\n        \/* PREMI\u00c8RE PAGE VISIBLE PAR D\u00c9FAUT *\/\n\n        await renderPage(1);\n\n\n        \/* SLIDESHOW UNIQUEMENT AU SURVOL *\/\n\n        object.addEventListener(\"mouseenter\",function(){\n\n            if(interval) return;\n\n            currentPage = 1;\n\n            interval = setInterval(async function(){\n\n                currentPage++;\n\n                if(currentPage > pdf.numPages){\n                    currentPage = 1;\n                }\n\n                await renderPage(currentPage);\n\n            },1200);\n\n        });\n\n\n        \/* RETOUR \u00c0 LA PREMI\u00c8RE PAGE *\/\n\n        object.addEventListener(\"mouseleave\",async function(){\n\n            if(interval){\n                clearInterval(interval);\n                interval = null;\n            }\n\n            currentPage = 1;\n\n            await renderPage(1);\n\n        });\n\n\n        \/* RECALCUL RESPONSIVE *\/\n\n        window.addEventListener(\"resize\",async function(){\n\n            await renderPage(currentPage);\n\n        });\n\n    }catch(error){\n\n        console.error(\n            \"IHBWY PDF preview error:\",\n            error\n        );\n\n    }\n\n})();\n\n<\/script>\n\n<\/section>\n\n\n\n<section class=\"cbg-fish-skeleton\" aria-label=\"Fish skeleton \u2014 Paris Worldwide\">\n\n  <div class=\"cbg-fish-stage\">\n\n    <div class=\"cbg-fish-side-label\">ARCHIVE \/ SPECIMEN<\/div>\n\n    <div class=\"cbg-fish-drawing\">\n\n      <svg viewBox=\"0 0 900 430\" role=\"img\" aria-label=\"Fish skeleton holding a sword\"\n           xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n\n        <!-- SWORD -->\n        <g class=\"cbg-sword\">\n\n          <!-- blade -->\n          <path d=\"M255 208 L720 208\"\n                fill=\"none\"\n                stroke=\"#0A0A0A\"\n                stroke-width=\"3\"\/>\n\n          <!-- blade point -->\n          <path d=\"M720 208 L700 201 L700 215 Z\"\n                fill=\"#0A0A0A\"\/>\n\n          <!-- blade detail -->\n          <path d=\"M300 202 L690 202\"\n                fill=\"none\"\n                stroke=\"#0A0A0A\"\n                stroke-width=\"0.8\"\n                opacity=\".5\"\/>\n\n          <!-- guard -->\n          <path d=\"M245 185 Q260 208 245 231\"\n                fill=\"none\"\n                stroke=\"#0A0A0A\"\n                stroke-width=\"4\"\/>\n\n          <!-- handle -->\n          <path d=\"M180 208 L245 208\"\n                fill=\"none\"\n                stroke=\"#0A0A0A\"\n                stroke-width=\"7\"\/>\n\n          <!-- handle grip -->\n          <path d=\"M188 198 L188 218 M198 198 L198 218 M208 198 L208 218 M218 198 L218 218 M228 198 L228 218\"\n                stroke=\"#0A0A0A\"\n                stroke-width=\"2\"\/>\n\n        <\/g>\n\n\n        <!-- FISH SKELETON -->\n        <g class=\"cbg-skeleton\">\n\n          <!-- skull -->\n          <g class=\"cbg-skull\">\n\n            <path d=\"M150 205\n                     C125 180 105 165 78 172\n                     C55 178 48 199 55 218\n                     C63 238 88 246 110 239\n                     C130 233 145 220 150 205 Z\"\n                  fill=\"none\"\n                  stroke=\"#0A0A0A\"\n                  stroke-width=\"3\"\/>\n\n            <!-- jaw -->\n            <path d=\"M75 218\n                     Q100 230 133 216\"\n                  fill=\"none\"\n                  stroke=\"#0A0A0A\"\n                  stroke-width=\"2\"\/>\n\n            <!-- eye socket -->\n            <circle cx=\"91\" cy=\"195\" r=\"10\"\n                    fill=\"none\"\n                    stroke=\"#0A0A0A\"\n                    stroke-width=\"2\"\/>\n\n            <circle cx=\"91\" cy=\"195\" r=\"2.5\"\n                    fill=\"#0A0A0A\"\/>\n\n            <!-- skull openings -->\n            <path d=\"M112 181 L125 193 L115 204\"\n                  fill=\"none\"\n                  stroke=\"#0A0A0A\"\n                  stroke-width=\"1.5\"\/>\n\n            <path d=\"M70 185 L82 178\"\n                  stroke=\"#0A0A0A\"\n                  stroke-width=\"1.5\"\/>\n\n            <!-- teeth -->\n            <path d=\"M64 221 L70 228 L76 222 L82 231 L88 224\"\n                  fill=\"none\"\n                  stroke=\"#0A0A0A\"\n                  stroke-width=\"1.2\"\/>\n\n          <\/g>\n\n\n          <!-- SPINE -->\n          <path d=\"M145 207\n                   C210 198 275 202 340 208\n                   C420 215 495 214 570 208\"\n                fill=\"none\"\n                stroke=\"#0A0A0A\"\n                stroke-width=\"4\"\/>\n\n\n          <!-- VERTEBRAE -->\n          <g class=\"cbg-vertebrae\">\n\n            <ellipse cx=\"165\" cy=\"207\" rx=\"8\" ry=\"5\"\/>\n            <ellipse cx=\"185\" cy=\"204\" rx=\"8\" ry=\"5\"\/>\n            <ellipse cx=\"205\" cy=\"203\" rx=\"8\" ry=\"5\"\/>\n            <ellipse cx=\"225\" cy=\"203\" rx=\"8\" ry=\"5\"\/>\n            <ellipse cx=\"245\" cy=\"204\" rx=\"8\" ry=\"5\"\/>\n            <ellipse cx=\"265\" cy=\"205\" rx=\"8\" ry=\"5\"\/>\n            <ellipse cx=\"285\" cy=\"206\" rx=\"8\" ry=\"5\"\/>\n            <ellipse cx=\"305\" cy=\"207\" rx=\"8\" ry=\"5\"\/>\n            <ellipse cx=\"325\" cy=\"208\" rx=\"8\" ry=\"5\"\/>\n            <ellipse cx=\"345\" cy=\"209\" rx=\"8\" ry=\"5\"\/>\n            <ellipse cx=\"365\" cy=\"210\" rx=\"8\" ry=\"5\"\/>\n            <ellipse cx=\"385\" cy=\"211\" rx=\"8\" ry=\"5\"\/>\n            <ellipse cx=\"405\" cy=\"212\" rx=\"8\" ry=\"5\"\/>\n            <ellipse cx=\"425\" cy=\"212\" rx=\"8\" ry=\"5\"\/>\n            <ellipse cx=\"445\" cy=\"212\" rx=\"8\" ry=\"5\"\/>\n            <ellipse cx=\"465\" cy=\"212\" rx=\"8\" ry=\"5\"\/>\n            <ellipse cx=\"485\" cy=\"211\" rx=\"8\" ry=\"5\"\/>\n            <ellipse cx=\"505\" cy=\"210\" rx=\"8\" ry=\"5\"\/>\n            <ellipse cx=\"525\" cy=\"209\" rx=\"8\" ry=\"5\"\/>\n            <ellipse cx=\"545\" cy=\"208\" rx=\"8\" ry=\"5\"\/>\n\n          <\/g>\n\n\n          <!-- RIBS -->\n          <g class=\"cbg-ribs\">\n\n            <path d=\"M175 205 Q170 250 205 275\"\/>\n            <path d=\"M195 203 Q190 258 225 285\"\/>\n            <path d=\"M215 203 Q210 265 245 292\"\/>\n            <path d=\"M235 203 Q230 270 265 297\"\/>\n            <path d=\"M255 204 Q250 275 285 300\"\/>\n            <path d=\"M275 205 Q270 280 305 301\"\/>\n            <path d=\"M295 206 Q290 280 325 300\"\/>\n            <path d=\"M315 207 Q310 278 345 296\"\/>\n            <path d=\"M335 208 Q330 274 365 290\"\/>\n            <path d=\"M355 209 Q350 270 385 285\"\/>\n            <path d=\"M375 210 Q370 265 405 280\"\/>\n            <path d=\"M395 211 Q390 260 425 274\"\/>\n            <path d=\"M415 212 Q410 258 445 270\"\/>\n\n          <\/g>\n\n\n          <!-- UPPER FIN BONES -->\n          <g class=\"cbg-fins\">\n\n            <path d=\"M270 205 L285 155 L295 205\"\/>\n            <path d=\"M290 206 L310 148 L318 207\"\/>\n            <path d=\"M310 207 L335 145 L340 208\"\/>\n            <path d=\"M330 208 L355 150 L360 209\"\/>\n\n            <!-- lower fin -->\n            <path d=\"M300 208 L315 250 L325 210\"\/>\n            <path d=\"M325 209 L340 250 L350 210\"\/>\n\n          <\/g>\n\n\n          <!-- FRONT FIN \/ HAND HOLDING SWORD -->\n          <g class=\"cbg-sword-fin\">\n\n            <path d=\"M150 207\n                     C175 215 190 225 205 240\n                     C220 254 235 245 245 230\"\n                  fill=\"none\"\n                  stroke=\"#0A0A0A\"\n                  stroke-width=\"3\"\/>\n\n            <path d=\"M202 238 L218 218\"\n                  stroke=\"#0A0A0A\"\n                  stroke-width=\"2\"\/>\n\n            <path d=\"M212 245 L228 220\"\n                  stroke=\"#0A0A0A\"\n                  stroke-width=\"2\"\/>\n\n            <!-- little yellow registration mark -->\n            <rect x=\"230\" y=\"224\" width=\"7\" height=\"7\"\n                  fill=\"#FFE600\"\/>\n\n          <\/g>\n\n\n          <!-- TAIL -->\n          <g class=\"cbg-tail\">\n\n            <path d=\"M565 208\n                     C610 190 650 170 700 145\"\n                  fill=\"none\"\n                  stroke=\"#0A0A0A\"\n                  stroke-width=\"3\"\/>\n\n            <path d=\"M565 208\n                     C615 225 655 250 700 280\"\n                  fill=\"none\"\n                  stroke=\"#0A0A0A\"\n                  stroke-width=\"3\"\/>\n\n            <!-- tail rays -->\n            <path d=\"M700 145 L735 125\"\/>\n            <path d=\"M700 160 L745 150\"\/>\n            <path d=\"M700 175 L750 175\"\/>\n            <path d=\"M700 190 L755 200\"\/>\n            <path d=\"M700 205 L760 225\"\/>\n            <path d=\"M700 220 L750 250\"\/>\n            <path d=\"M700 235 L740 270\"\/>\n            <path d=\"M700 250 L730 290\"\/>\n            <path d=\"M700 265 L715 305\"\/>\n\n          <\/g>\n\n\n          <!-- tiny archive marker -->\n          <circle cx=\"570\" cy=\"208\" r=\"3\" fill=\"#FFE600\"\/>\n\n        <\/g>\n\n      <\/svg>\n\n    <\/div>\n\n    <div class=\"cbg-fish-side-label cbg-fish-side-right\">\n      SPECIMEN \/ 001\n    <\/div>\n\n  <\/div>\n\n\n  <div class=\"cbg-fish-location\">\n    <span>PARIS<\/span>\n    <span class=\"cbg-fish-dash\">-<\/span>\n    <span>WORLDWIDE<\/span>\n  <\/div>\n\n\n  <div class=\"cbg-fish-footer\">\n    <span>CLARA BELBACHIR-GARNIER<\/span>\n    <span>CREATIVE DIRECTION \/ IMAGE<\/span>\n    <span>2026<\/span>\n  <\/div>\n\n<\/section>\n\n\n<style>\n\n.cbg-fish-skeleton {\n  width: 100%;\n  padding: 70px 5vw 45px;\n  box-sizing: border-box;\n  background: transparent;\n  color: #0A0A0A;\n  overflow: hidden;\n}\n\n.cbg-fish-stage {\n  width: 100%;\n  max-width: 1350px;\n  margin: 0 auto;\n  display: grid;\n  grid-template-columns: 110px minmax(0, 1fr) 110px;\n  align-items: center;\n  gap: 20px;\n}\n\n.cbg-fish-drawing {\n  width: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n\n.cbg-fish-drawing svg {\n  width: 100%;\n  max-width: 900px;\n  height: auto;\n  display: block;\n  overflow: visible;\n}\n\n\/* skeleton *\/\n\n.cbg-skeleton {\n  transform-origin: center;\n  animation: cbgFishFloat 5s ease-in-out infinite;\n}\n\n.cbg-skeleton path,\n.cbg-skeleton ellipse,\n.cbg-skeleton circle {\n  vector-effect: non-scaling-stroke;\n}\n\n.cbg-ribs path,\n.cbg-fins path,\n.cbg-tail path {\n  fill: none;\n  stroke: #0A0A0A;\n  stroke-width: 1.5;\n  stroke-linecap: round;\n  stroke-linejoin: round;\n}\n\n.cbg-vertebrae ellipse {\n  fill: none;\n  stroke: #0A0A0A;\n  stroke-width: 1.5;\n}\n\n.cbg-sword {\n  transform-origin: 450px 208px;\n  animation: cbgSwordMove 5s ease-in-out infinite;\n}\n\n\/* archive labels *\/\n\n.cbg-fish-side-label {\n  font-family: \"Courier New\", monospace;\n  font-size: 8px;\n  letter-spacing: .16em;\n  text-transform: uppercase;\n  writing-mode: vertical-rl;\n  transform: rotate(180deg);\n  opacity: .55;\n  white-space: nowrap;\n}\n\n.cbg-fish-side-right {\n  transform: rotate(0deg);\n  justify-self: end;\n}\n\n\/* location *\/\n\n.cbg-fish-location {\n  margin-top: 18px;\n  padding-top: 18px;\n  border-top: 1px solid rgba(0,0,0,.18);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  gap: 18px;\n  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;\n  font-size: clamp(20px, 3vw, 42px);\n  font-weight: 500;\n  letter-spacing: -.035em;\n  text-transform: uppercase;\n}\n\n.cbg-fish-dash {\n  font-weight: 300;\n}\n\n\/* footer *\/\n\n.cbg-fish-footer {\n  max-width: 1350px;\n  margin: 25px auto 0;\n  padding-top: 10px;\n  border-top: 1px solid rgba(0,0,0,.10);\n  display: flex;\n  justify-content: space-between;\n  gap: 20px;\n  font-family: \"Courier New\", monospace;\n  font-size: 7px;\n  letter-spacing: .12em;\n  text-transform: uppercase;\n  opacity: .55;\n}\n\n@keyframes cbgFishFloat {\n  0%,100% {\n    transform: translateY(0);\n  }\n  50% {\n    transform: translateY(-4px);\n  }\n}\n\n@keyframes cbgSwordMove {\n  0%,100% {\n    transform: rotate(0deg);\n  }\n  50% {\n    transform: rotate(-.5deg);\n  }\n}\n\n\n\/* MOBILE *\/\n\n@media (max-width: 768px) {\n\n  .cbg-fish-skeleton {\n    padding: 45px 18px 30px;\n  }\n\n  .cbg-fish-stage {\n    display: block;\n  }\n\n  .cbg-fish-side-label {\n    display: none;\n  }\n\n  .cbg-fish-drawing {\n    width: 100%;\n  }\n\n  .cbg-fish-drawing svg {\n    width: 110%;\n    max-width: none;\n    margin-left: -5%;\n  }\n\n  .cbg-fish-location {\n    margin-top: 8px;\n    padding-top: 14px;\n    gap: 10px;\n    font-size: 24px;\n  }\n\n  .cbg-fish-footer {\n    flex-direction: column;\n    gap: 6px;\n    font-size: 7px;\n  }\n\n}\n\n<\/style>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<section class=\"cbg-bio\">\n\n  <div class=\"cbg-bio-top\">\n    <span>06 \/ ABOUT<\/span>\n    <span>PROFILE \/ CONTACT<\/span>\n  <\/div>\n\n  <div class=\"cbg-bio-main\">\n\n    <div class=\"cbg-bio-number\">\n      06\n    <\/div>\n\n    <div class=\"cbg-bio-copy\">\n\n      <p class=\"cbg-bio-text\" id=\"bio-output-1\"><\/p>\n\n      <div class=\"cbg-bio-rule\"><\/div>\n\n      <p class=\"cbg-bio-contact\" id=\"bio-output-2\"><\/p>\n\n    <\/div>\n\n  <\/div>\n\n  <div class=\"cbg-bio-footer\">\n    <span>CLARA BELBACHIR-GARNIER<\/span>\n    <span>PARIS - WORLDWIDE<\/span>\n    <span>IMAGE \/ EDITORIAL \/ DIRECTION<\/span>\n  <\/div>\n\n<\/section>\n\n\n<style>\n\n.cbg-bio {\n  width: 100%;\n  box-sizing: border-box;\n  padding: 80px 5vw 45px;\n  color: #0A0A0A;\n  background: transparent !important;\n}\n\n\/* TOP *\/\n\n.cbg-bio-top {\n  width: 100%;\n  padding-bottom: 10px;\n  border-bottom: 1px solid rgba(0,0,0,.18);\n\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n\n  font-family: \"Courier New\", monospace;\n  font-size: 8px;\n  letter-spacing: .14em;\n  text-transform: uppercase;\n}\n\n\/* MAIN *\/\n\n.cbg-bio-main {\n  max-width: 1180px;\n  margin: 0 auto;\n  padding: 65px 0 70px;\n\n  display: grid;\n  grid-template-columns: 100px minmax(0, 720px);\n  gap: 45px;\n\n  align-items: start;\n}\n\n.cbg-bio-number {\n  font-family: \"Courier New\", monospace;\n  font-size: 10px;\n  letter-spacing: .14em;\n  padding-top: 9px;\n  opacity: .5;\n}\n\n.cbg-bio-copy {\n  width: 100%;\n}\n\n\/* TEXT *\/\n\n.cbg-bio-text {\n  margin: 0;\n\n  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;\n  font-size: clamp(28px, 3.3vw, 47px);\n  font-weight: 400;\n  line-height: 1.08;\n  letter-spacing: -.035em;\n\n  max-width: 850px;\n}\n\n\/* TYPOGRAPHIC MIX *\/\n\n.cbg-bio-text .bio-vt323 {\n  font-family: \"Courier New\", monospace;\n  font-size: .52em;\n  letter-spacing: .015em;\n  vertical-align: .08em;\n}\n\n.cbg-bio-text .bio-mono {\n  font-family: \"Courier New\", monospace;\n  font-size: .47em;\n  letter-spacing: .04em;\n  font-weight: 400;\n  vertical-align: .12em;\n  text-transform: uppercase;\n}\n\n\/* RULE *\/\n\n.cbg-bio-rule {\n  width: 100%;\n  height: 1px;\n  background: rgba(0,0,0,.16);\n  margin: 38px 0 24px;\n}\n\n\/* CONTACT *\/\n\n.cbg-bio-contact {\n  margin: 0;\n\n  font-family: \"Courier New\", monospace;\n  font-size: 11px;\n  line-height: 1.6;\n  letter-spacing: .07em;\n  text-transform: uppercase;\n}\n\n.bio-email {\n  color: #0A0A0A;\n  text-decoration: underline;\n  text-decoration-thickness: 1px;\n  text-underline-offset: 4px;\n  transition: background .15s ease;\n}\n\n.bio-email:hover {\n  background: #FFE600;\n  text-decoration: none;\n}\n\n\/* FOOTER *\/\n\n.cbg-bio-footer {\n  border-top: 1px solid rgba(0,0,0,.12);\n  padding-top: 11px;\n\n  display: flex;\n  justify-content: space-between;\n  gap: 20px;\n\n  font-family: \"Courier New\", monospace;\n  font-size: 7px;\n  letter-spacing: .12em;\n  text-transform: uppercase;\n\n  opacity: .55;\n}\n\n\n\/* MOBILE *\/\n\n@media (max-width: 768px) {\n\n  .cbg-bio {\n    padding: 55px 18px 30px;\n  }\n\n  .cbg-bio-top {\n    font-size: 7px;\n  }\n\n  .cbg-bio-main {\n    display: block;\n    padding: 45px 0 50px;\n  }\n\n  .cbg-bio-number {\n    margin-bottom: 22px;\n    font-size: 8px;\n  }\n\n  .cbg-bio-text {\n    font-size: clamp(25px, 8vw, 36px);\n    line-height: 1.1;\n  }\n\n  .cbg-bio-text .bio-vt323 {\n    font-size: .55em;\n  }\n\n  .cbg-bio-text .bio-mono {\n    font-size: .5em;\n  }\n\n  .cbg-bio-rule {\n    margin: 30px 0 20px;\n  }\n\n  .cbg-bio-contact {\n    font-size: 9px;\n    line-height: 1.7;\n    overflow-wrap: anywhere;\n  }\n\n  .cbg-bio-footer {\n    flex-direction: column;\n    gap: 6px;\n    font-size: 7px;\n  }\n\n}\n\n<\/style>\n\n\n<script>\n\ndocument.addEventListener(\"DOMContentLoaded\", function () {\n\n  const bioText1 =\n    \"Clara Belbachir-Garnier is a graduate of \u00c9cole du Louvre with background experience in luxury fashion houses. Based in Paris & worldwide.\";\n\n  const bioText2 =\n    \"For inquiries & collaborations: belbachirgarnierclara@gmail.com\";\n\n  const output1 = document.getElementById(\"bio-output-1\");\n  const output2 = document.getElementById(\"bio-output-2\");\n\n  const fontStyles = [\"bio-vt323\", \"bio-mono\"];\n\n  function renderMixedText(text, container, email = false) {\n\n    if (!container) return;\n\n    const words = text.split(\" \");\n\n    words.forEach((word, index) => {\n\n      const span = document.createElement(\"span\");\n\n      \/*\n       * M\u00e9lange contr\u00f4l\u00e9 :\n       * majorit\u00e9 typo principale,\n       * quelques mots seulement en mono.\n       *\/\n      const useAltFont =\n        Math.random() > 0.72;\n\n      span.className = useAltFont\n        ? fontStyles[Math.floor(Math.random() * fontStyles.length)]\n        : \"\";\n\n      if (\n        email &&\n        word.includes(\"belbachirgarnierclara@gmail.com\")\n      ) {\n\n        const link = document.createElement(\"a\");\n\n        link.href = \"mailto:belbachirgarnierclara@gmail.com\";\n        link.className = \"bio-email\";\n        link.textContent = word;\n\n        span.appendChild(link);\n\n      } else {\n\n        span.textContent = word;\n\n      }\n\n      container.appendChild(span);\n\n      if (index < words.length - 1) {\n        container.appendChild(\n          document.createTextNode(\" \")\n        );\n      }\n\n    });\n\n  }\n\n  renderMixedText(\n    bioText1,\n    output1\n  );\n\n  renderMixedText(\n    bioText2,\n    output2,\n    true\n  );\n\n});\n\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>CBG \/ VISUAL ARCHIVE IMAGE \/ EDITORIAL \/ DIRECTION 2026 001 CLARA BELBACHIR GARNIER IMAGE \/ DIRECTION \/ ARCHIVE 001 \u2014 003 \u205c \u205c \u205c \u205c \/ CAPABILITIES \/ 001\u2014009 Creative Direction Editorial \/ Image Strategy \/ Production Scroll to explore \u2193 SELECTED WORK \/ 01 LA BRUNE ET LA BLONDE CREATIVE DIRECTION IMAGE \/ [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-7","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.clara-belbachir-garnier.fr\/index.php\/wp-json\/wp\/v2\/pages\/7","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.clara-belbachir-garnier.fr\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.clara-belbachir-garnier.fr\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.clara-belbachir-garnier.fr\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.clara-belbachir-garnier.fr\/index.php\/wp-json\/wp\/v2\/comments?post=7"}],"version-history":[{"count":254,"href":"https:\/\/www.clara-belbachir-garnier.fr\/index.php\/wp-json\/wp\/v2\/pages\/7\/revisions"}],"predecessor-version":[{"id":350,"href":"https:\/\/www.clara-belbachir-garnier.fr\/index.php\/wp-json\/wp\/v2\/pages\/7\/revisions\/350"}],"wp:attachment":[{"href":"https:\/\/www.clara-belbachir-garnier.fr\/index.php\/wp-json\/wp\/v2\/media?parent=7"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}