{"id":42904,"date":"2026-09-03T12:10:06","date_gmt":"2026-09-03T12:10:06","guid":{"rendered":"https:\/\/rotary9103.org\/?page_id=42904"},"modified":"2026-09-07T16:17:14","modified_gmt":"2026-09-07T16:17:14","slug":"phototheque","status":"publish","type":"page","link":"https:\/\/rotary9103.org\/?page_id=42904","title":{"rendered":"Phototh\u00e8que"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"42904\" class=\"elementor elementor-42904\">\n\t\t\t\t<div class=\"elementor-element elementor-element-a7840e8 e-flex e-con-boxed e-con e-parent\" data-id=\"a7840e8\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-a9a4c64 elementor-widget elementor-widget-shortcode\" data-id=\"a9a4c64\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\">\n<section class=\"d9103-photo-section\">\n\n\n    <!-- =====================================================\n         HEADER DE LA PHOTOTH\u00c8QUE\n         LE BACKGROUND IMAGE EST UNIQUEMENT SUR CE BLOC\n         ===================================================== -->\n\n    <div class=\"d9103-photo-header\">\n\n        <div class=\"d9103-photo-header-content\">\n\n            <span class=\"d9103-photo-label\">\n                PHOTOTH\u00c8QUE\n            <\/span>\n\n\n            <h1>\n                Les temps forts du District 9103 en images\n            <\/h1>\n\n\n            <p>\n                D\u00e9couvrez les \u00e9v\u00e9nements, actions, rencontres\n                et initiatives qui rythment la vie du District 9103.\n            <\/p>\n\n        <\/div>\n\n    <\/div>\n\n\n\n    <!-- =====================================================\n         CONTENU DE LA PHOTOTH\u00c8QUE\n         AUCUN BACKGROUND IMAGE ICI\n         ===================================================== -->\n\n    <div class=\"d9103-photo-container\">\n\n\n        \n\n\n        \n\n            <div class=\"d9103-photo-filters\">\n\n\n                <button\n                    class=\"d9103-filter active\"\n                    data-filter=\"all\"\n                >\n                    Tous\n                <\/button>\n\n\n\n                \n\n                    <button\n                        class=\"d9103-filter\"\n                        data-filter=\"actions-humanitaires\"\n                    >\n\n\n                        Actions humanitaires\n\n                    <\/button>\n\n\n                \n\n            <\/div>\n\n\n        \n\n\n        \n\n            <div class=\"d9103-albums-grid\">\n\n\n                \n\n\n                    <article\n                        class=\"d9103-album-card\"\n                        data-category=\"actions-humanitaires\"\n                    >\n\n\n\n                        <a\n                            href=\"https:\/\/rotary9103.org\/?d9103_album=agir-ensemble-au-service-des-communautes\"\n                            class=\"d9103-album-image\"\n                        >\n\n\n\n                            \n\n                                <img decoding=\"async\"\n                                    src=\"https:\/\/rotary9103.org\/wp-content\/uploads\/2026\/09\/action_humanitaire_6.jpg\"\n                                    alt=\"Agir ensemble au service des communaut\u00e9s\"\n                                    loading=\"lazy\"\n                                >\n\n\n\n                            \n\n\n                            <span class=\"d9103-photo-count\">\n\n\n                                6\n\n                                 photos\n\n                            <\/span>\n\n\n                        <\/a>\n\n\n\n                        <div class=\"d9103-album-content\">\n\n\n                            <span class=\"d9103-album-category\">\n\n\n                                Actions humanitaires\n\n                            <\/span>\n\n\n\n                            <h2>\n\n\n                                <a\n                                    href=\"https:\/\/rotary9103.org\/?d9103_album=agir-ensemble-au-service-des-communautes\"\n                                >\n\n\n                                    Agir ensemble au service des communaut\u00e9s\n\n                                <\/a>\n\n\n                            <\/h2>\n\n\n\n                            \n\n\n                            <a\n                                class=\"d9103-view-album\"\n                                href=\"https:\/\/rotary9103.org\/?d9103_album=agir-ensemble-au-service-des-communautes\"\n                            >\n\n                                Voir l'album \u2192\n\n                            <\/a>\n\n\n                        <\/div>\n\n\n                    <\/article>\n\n\n\n                \n\n            <\/div>\n\n\n\n        \n\n    <\/div>\n\n\n<\/section>\n\n\n\n<style>\n\n\n\/* =========================================================\n   SECTION PRINCIPALE\n   ========================================================= *\/\n\n.d9103-photo-section {\n\n    width: 100%;\n\n    padding: 0;\n\n    background: #f2f4f7;\n\n    font-family:\n        \"Open Sans\",\n        Arial,\n        sans-serif;\n\n}\n\n\n\n\/* =========================================================\n   HEADER\n   BACKGROUND IMAGE UNIQUEMENT ICI\n   ========================================================= *\/\n\n.d9103-photo-header {\n\n    width: 100%;\n\n    padding: 75px 0 90px;\n\n    background-image:\n        url(\"https:\/\/rotary9103.org\/wp-content\/uploads\/2026\/09\/im6.jpg\");\n\n    background-size: cover;\n\n    background-position: center;\n\n    background-repeat: no-repeat;\n\n    margin: 0 auto 40px;\n\n    text-align: center;\n\n}\n\n\n\n\/* =========================================================\n   CONTENU DU HEADER\n   ========================================================= *\/\n\n.d9103-photo-header-content {\n\n    max-width: 800px;\n\n    margin: 0 auto;\n\n    padding: 0 20px;\n\n}\n\n\n\n\/* =========================================================\n   LABEL\n   ========================================================= *\/\n\n.d9103-photo-label {\n\n    display: inline-block;\n\n    margin-bottom: 12px;\n\n    color: #f59a23;\n\n    font-size: 13px;\n\n    font-weight: 700;\n\n    letter-spacing: 2px;\n\n}\n\n\n\n\/* =========================================================\n   TITRE\n   ========================================================= *\/\n\n.d9103-photo-header h1 {\n\n    margin:\n        0 0 17px;\n\n    color: #14284a;\n\n    font-size: 48px;\n\n    line-height: 1.1;\n\n    font-weight: 700;\n\n}\n\n\n\n\/* =========================================================\n   DESCRIPTION\n   ========================================================= *\/\n\n.d9103-photo-header p {\n\n    max-width: 700px;\n\n    margin: 0 auto;\n\n    color: #14284a;\n\n    font-size: 17px;\n\n    font-weight: 600;\n\n    line-height: 1.7;\n\n    text-shadow:\n        0 1px 2px rgba(255, 255, 255, 0.7);\n\n}\n\n\n\/* =========================================================\n   CONTAINER\n   SANS IMAGE DE BACKGROUND\n   ========================================================= *\/\n\n.d9103-photo-container {\n\n    width: 100%;\n\n    max-width: 1200px;\n\n    margin: 0 auto;\n\n    padding: 0 30px 90px;\n\n    box-sizing: border-box;\n\n    background: #f2f4f7;\n\n}\n\n\n\n\/* =========================================================\n   FILTRES\n   ========================================================= *\/\n\n.d9103-photo-filters {\n\n    display: flex;\n\n    justify-content: center;\n\n    flex-wrap: wrap;\n\n    gap: 10px;\n\n    margin:\n        0 0 40px;\n\n}\n\n\n\n\/* =========================================================\n   BOUTONS FILTRES\n   ========================================================= *\/\n\n.d9103-filter {\n\n    padding:\n        10px 19px;\n\n    border:\n        1px solid #dfe4eb;\n\n    border-radius: 30px;\n\n    background: #fff;\n\n    color: #14284a;\n\n    font-size: 14px;\n\n    font-weight: 600;\n\n    cursor: pointer;\n\n    transition:\n        .2s ease;\n\n}\n\n\n\n.d9103-filter:hover,\n.d9103-filter.active {\n\n    border-color: #0755b8;\n\n    background: #0755b8;\n\n    color: #fff;\n\n}\n\n\n\n\/* =========================================================\n   GRILLE DES ALBUMS\n   ========================================================= *\/\n\n.d9103-albums-grid {\n\n    display: grid;\n\n    grid-template-columns:\n        repeat(\n            3,\n            minmax(0, 1fr)\n        );\n\n    gap: 25px;\n\n}\n\n\n\n\/* =========================================================\n   CARTE ALBUM\n   ========================================================= *\/\n\n.d9103-album-card {\n\n    overflow: hidden;\n\n    background: #fff;\n\n    border:\n        1px solid\n        rgba(\n            223,\n            228,\n            235,\n            .7\n        );\n\n    border-radius: 16px;\n\n    box-shadow:\n        0 8px 24px\n        rgba(\n            20,\n            40,\n            74,\n            .08\n        );\n\n    transition:\n        transform .25s ease,\n        box-shadow .25s ease;\n\n}\n\n\n\n.d9103-album-card:hover {\n\n    transform:\n        translateY(-4px);\n\n    box-shadow:\n        0 14px 35px\n        rgba(\n            20,\n            40,\n            74,\n            .14\n        );\n\n}\n\n\n\n\/* =========================================================\n   IMAGE ALBUM\n   ========================================================= *\/\n\n.d9103-album-image {\n\n    position: relative;\n\n    display: block;\n\n    width: 100%;\n\n    height: 280px;\n\n    overflow: hidden;\n\n    background: #e9eef5;\n\n}\n\n\n\n.d9103-album-image img {\n\n    display: block;\n\n    width: 100%;\n\n    height: 100%;\n\n    object-fit: cover;\n\n    object-position: center;\n\n    transition:\n        transform .4s ease;\n\n}\n\n\n\n.d9103-album-card:hover\n.d9103-album-image img {\n\n    transform:\n        scale(1.04);\n\n}\n\n\n\n\/* =========================================================\n   PAS DE COUVERTURE\n   ========================================================= *\/\n\n.d9103-no-cover {\n\n    display: flex;\n\n    align-items: center;\n\n    justify-content: center;\n\n    width: 100%;\n\n    height: 100%;\n\n    color: #617085;\n\n    font-weight: 600;\n\n}\n\n\n\n\/* =========================================================\n   COMPTEUR PHOTOS\n   ========================================================= *\/\n\n.d9103-photo-count {\n\n    position: absolute;\n\n    right: 15px;\n\n    bottom: 15px;\n\n    padding:\n        7px 11px;\n\n    border-radius: 20px;\n\n    background:\n        rgba(\n            20,\n            40,\n            74,\n            .88\n        );\n\n    color: #fff;\n\n    font-size: 12px;\n\n    font-weight: 600;\n\n}\n\n\n\n\/* =========================================================\n   CONTENU ALBUM\n   ========================================================= *\/\n\n.d9103-album-content {\n\n    padding:\n        22px 23px 25px;\n\n}\n\n\n\n\/* =========================================================\n   CAT\u00c9GORIE\n   ========================================================= *\/\n\n.d9103-album-category {\n\n    display: inline-block;\n\n    margin-bottom: 11px;\n\n    padding:\n        5px 10px;\n\n    border-radius: 14px;\n\n    background: #eaf4ff;\n\n    color: #0755b8;\n\n    font-size: 12px;\n\n    font-weight: 700;\n\n}\n\n\n\n\/* =========================================================\n   TITRE ALBUM\n   ========================================================= *\/\n\n.d9103-album-content h2 {\n\n    margin:\n        0 0 10px;\n\n    font-size: 20px;\n\n    line-height: 1.35;\n\n}\n\n\n\n.d9103-album-content h2 a {\n\n    color: #14284a;\n\n    text-decoration: none;\n\n}\n\n\n\n.d9103-album-content h2 a:hover {\n\n    color: #0755b8;\n\n    text-decoration: none;\n\n}\n\n\n\n\/* =========================================================\n   DATE\n   ========================================================= *\/\n\n.d9103-album-date {\n\n    margin-bottom: 17px;\n\n    color: #7b8798;\n\n    font-size: 13px;\n\n}\n\n\n\n\/* =========================================================\n   LIEN ALBUM\n   ========================================================= *\/\n\n.d9103-view-album {\n\n    color: #0755b8;\n\n    font-size: 14px;\n\n    font-weight: 700;\n\n    text-decoration: none;\n\n}\n\n\n\n.d9103-view-album:hover {\n\n    color: #f59a23;\n\n    text-decoration: none;\n\n}\n\n\n\n\/* =========================================================\n   AUCUN ALBUM\n   ========================================================= *\/\n\n.d9103-no-albums {\n\n    padding:\n        60px 20px;\n\n    background: #fff;\n\n    border-radius: 16px;\n\n    text-align: center;\n\n}\n\n\n\n\/* =========================================================\n   TABLETTE\n   ========================================================= *\/\n\n@media(max-width:1024px) {\n\n\n    .d9103-albums-grid {\n\n        grid-template-columns:\n            repeat(\n                2,\n                minmax(0, 1fr)\n            );\n\n    }\n\n\n    .d9103-photo-header h1 {\n\n        font-size: 40px;\n\n    }\n\n}\n\n\n\n\/* =========================================================\n   MOBILE\n   ========================================================= *\/\n\n@media(max-width:650px) {\n\n\n    .d9103-photo-header {\n\n        padding:\n            45px 0 60px;\n\n        margin-bottom: 30px;\n\n    }\n\n\n    .d9103-photo-header-content {\n\n        padding:\n            0 15px;\n\n    }\n\n\n    .d9103-photo-container {\n\n        padding:\n            0 15px 60px;\n\n    }\n\n\n    .d9103-photo-header h1 {\n\n        font-size: 30px;\n\n    }\n\n\n    .d9103-photo-filters {\n\n        justify-content: flex-start;\n\n        margin-bottom: 28px;\n\n    }\n\n\n    .d9103-albums-grid {\n\n        grid-template-columns: 1fr;\n\n        gap: 18px;\n\n    }\n\n\n    .d9103-album-image {\n\n        height: 260px;\n\n    }\n\n}\n\n<\/style>\n\n\n\n    <script>\n\n    document.addEventListener(\n        \"DOMContentLoaded\",\n        function () {\n\n\n            const filters =\n                document.querySelectorAll(\n                    \".d9103-filter\"\n                );\n\n\n            const albums =\n                document.querySelectorAll(\n                    \".d9103-album-card\"\n                );\n\n\n            filters.forEach(\n                function (filter) {\n\n\n                    filter.addEventListener(\n                        \"click\",\n                        function () {\n\n\n                            const category =\n                                this.dataset.filter;\n\n\n                            filters.forEach(\n                                function (button) {\n\n                                    button.classList.remove(\n                                        \"active\"\n                                    );\n                                }\n                            );\n\n\n                            this.classList.add(\n                                \"active\"\n                            );\n\n\n                            albums.forEach(\n                                function (album) {\n\n\n                                    if (\n                                        category === \"all\"\n                                        ||\n                                        album.dataset.category\n                                        === category\n                                    ) {\n\n                                        album.style.display =\n                                            \"\";\n\n                                    } else {\n\n                                        album.style.display =\n                                            \"none\";\n                                    }\n\n                                }\n                            );\n\n                        }\n                    );\n\n                }\n            );\n\n\n        }\n    );\n\n    <\/script>\n\n\n    <\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"","protected":false},"author":4,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_monsterinsights_skip_tracking":false,"footnotes":""},"class_list":["post-42904","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/rotary9103.org\/index.php?rest_route=\/wp\/v2\/pages\/42904","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rotary9103.org\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/rotary9103.org\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/rotary9103.org\/index.php?rest_route=\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/rotary9103.org\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=42904"}],"version-history":[{"count":22,"href":"https:\/\/rotary9103.org\/index.php?rest_route=\/wp\/v2\/pages\/42904\/revisions"}],"predecessor-version":[{"id":43149,"href":"https:\/\/rotary9103.org\/index.php?rest_route=\/wp\/v2\/pages\/42904\/revisions\/43149"}],"wp:attachment":[{"href":"https:\/\/rotary9103.org\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=42904"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}