{"id":4056,"date":"2025-03-18T15:09:32","date_gmt":"2025-03-18T19:09:32","guid":{"rendered":"https://www.dawsoncollege.qc.ca/oad/?page_id=4056"},"modified":"2026-09-08T10:17:41","modified_gmt":"2026-09-08T14:17:41","slug":"indigenous-perspectives","status":"publish","type":"page","link":"https://www.dawsoncollege.qc.ca/oad/indigenous-perspectives/","title":{"rendered":"Indigenous Perspectives"},"content":{"rendered":"<figure id=\"attachment_4529\" aria-describedby=\"caption-attachment-4529\" style=\"width: 400px\" class=\"wp-caption aligncenter\"><a class=\"link-to-img\" href=\"https://fr.dawsoncollege.qc.ca/oad/wp-content/uploads/sites/146/Indigenous-Perspectives_image.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"size-thumbnail wp-image-4529\" src=\"https://www.dawsoncollege.qc.ca/oad/wp-content/uploads/sites/146/Indigenous-Perspectives_image-400x400.jpg\" alt=\"\" width=\"400\" height=\"400\"></a><figcaption id=\"caption-attachment-4529\" class=\"wp-caption-text\">Illustration un chef indien tatoué</figcaption></figure>\n<h2>Ateliers</h2>\n<p>Calendrier et inscription<br>\n        <style>\n            tr.workshop-item table {\n                margin: 0;\n            }\n\n            tr.workshop-item td:first-child {\n                max-width: 350px;\n            }\n\n            tr.workshop-item td:nth-child(2) {\n                width: 170px;\n            }\n\n            tr.workshop-item td:last-child {\n                width: 190px;\n                text-align: right;\n            }\n\n            tr.workshop-item:nth-child(2n) td {\n                background: #f1f8ff;\n            }\n\n            table.workshops {\n                border-top: none !important;\n            }\n\n            table.workshops a {\n                text-decoration: none !important;\n                font-weight: 600;\n            }\n\n            .workshops {\n                width: 100%;\n                border-collapse: collapse;\n                margin: 0;\n            }\n\n            .workshops-wrapper .dc_accordion .dc_accordion-title {\n                background-color: #0056b7 !important;\n                color: #fff;\n            }\n\n            .workshops-wrapper .dc_accordion .dc_accordion-title a {\n\n                color: #fff;\n            }\n\n            .workshops th,\n            .workshops td {\n                padding: 12px;\n                text-align: left;\n                border-bottom: 1px solid #ddd;\n                vertical-align: middle;\n            }\n\n            .workshop-action-link {\n                display: inline-flex;\n                align-items: center;\n                justify-content: center;\n                width: 160px;\n                padding: 10px 18px;\n                border-radius: 4px;\n                background-color: #23961d;\n                color: #fff !important;\n                font-size: 14px;\n                line-height: 1.2;\n                text-align: center;\n                white-space: nowrap;\n            }\n\n            .workshop-action-link:hover {\n                background-color: #0052a3;\n                color: #fff !important;\n            }\n\n            .workshop-action-link:focus {\n                outline: 2px solid #0052a3;\n                outline-offset: 2px;\n            }\n\n            .workshop-item button {\n                min-width: 90px;\n            }\n\n            .workshop-details-button {\n                display: inline-flex;\n                align-items: center;\n                justify-content: center;\n                width: 160px;\n                padding: 10px 18px;\n                border: 1px solid #c8d4e3;\n                border-radius: 4px;\n                background-color: #fff;\n                color: #1d3557;\n                font-size: 14px;\n                line-height: 1.2;\n                white-space: nowrap;\n            }\n\n            .workshop-actions {\n                display: flex;\n                flex-direction: column;\n                align-items: flex-end;\n                gap: 10px;\n            }\n\n            .workshop-actions:empty {\n                display: none;\n            }\n\n            .workshop-title-row {\n                display: inline-flex;\n                align-items: center;\n                gap: 8px;\n                flex-wrap: wrap;\n            }\n\n            .workshop-status-pill {\n                display: inline-flex;\n                align-items: center;\n                padding: 2px 10px;\n                border-radius: 999px;\n                font-size: 12px;\n                font-weight: 600;\n                line-height: 1.4;\n                white-space: nowrap;\n            }\n\n            .workshop-status-pill--cancelled {\n                background: #f8d7da;\n                color: #7a1f14;\n            }\n\n            .workshop-status-pill--closed {\n                background: #dbeafe;\n                color: #17406d;\n            }\n\n            .workshop-status-pill--full {\n                background: #dcfce7;\n                color: #166534;\n            }\n\n            .workshop-details-button:hover {\n                background-color: #edf4fb;\n                border-color: #9db6d3;\n            }\n\n            .workshop-details-button:focus {\n                outline: 2px solid #0052a3;\n                outline-offset: 2px;\n            }\n\n            /* Modal styles - add these to your CSS */\n            .workshop-modal-overlay {\n                display: none;\n                position: fixed;\n                z-index: 1000;\n                left: 0;\n                top: 0;\n                width: 100%;\n                height: 100%;\n                overflow: auto;\n                background-color: rgba(0, 0, 0, 0.7);\n                animation: fadeIn 0.3s;\n                align-items: center;\n                justify-content: center;\n                padding: 20px;\n            }\n\n            .workshop-modal-overlay.active {\n                display: flex;\n            }\n\n            @keyframes fadeIn {\n                from {\n                    opacity: 0;\n                }\n\n                to {\n                    opacity: 1;\n                }\n            }\n\n            .workshop-modal-content {\n                background-color: white;\n                border-radius: 8px;\n                max-width: 600px;\n                width: 100%;\n                max-height: 90vh;\n                overflow-y: auto;\n                box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n                animation: slideIn 0.3s;\n            }\n\n            @keyframes slideIn {\n                from {\n                    transform: translateY(-50px);\n                    opacity: 0;\n                }\n\n                to {\n                    transform: translateY(0);\n                    opacity: 1;\n                }\n            }\n\n            .workshop-modal-header {\n                padding: 20px;\n                border-bottom: 1px solid #e0e0e0;\n                display: flex;\n                justify-content: space-between;\n                align-items: flex-start;\n                background: #0266cc;\n                color: #fff;\n            }\n\n            .workshop-modal-title {\n                margin: 0;\n                font-size: 2.25rem;\n                font-weight: bold;\n                padding-right: 20px;\n            }\n\n            .workshop-modal-instructor {\n                margin: 5px 0 0 0;\n                font-style: italic;\n                color: #f8f8f8;\n            }\n\n            .workshop-modal-close {\n                background: none;\n                border: none;\n                font-size: 28px;\n                cursor: pointer;\n                color: #666;\n                padding: 0;\n                width: 32px;\n                height: 32px;\n                display: flex;\n                align-items: center;\n                justify-content: center;\n                border-radius: 4px;\n                flex-shrink: 0;\n            }\n\n            .workshop-modal-close:hover {\n                background-color: #f0f0f0;\n                color: #333;\n            }\n\n            .workshop-modal-close:focus {\n                outline: 2px solid #0066cc;\n                outline-offset: 2px;\n            }\n\n            .workshop-modal-body {\n                padding: 20px;\n                line-height: 1.6;\n            }\n\n            .workshop-modal-time {\n                margin-top: 0;\n                padding-top: 0;\n            }\n\n            .workshop-modal-footer {\n                padding: 15px 20px;\n                border-top: 1px solid #e0e0e0;\n                display: flex;\n                justify-content: flex-end;\n                gap: 10px;\n            }\n\n            .workshop-modal-footer a,\n            .workshop-modal-footer button {\n                padding: 10px 20px;\n                border-radius: 4px;\n                text-decoration: none;\n                font-size: 14px;\n                cursor: pointer;\n                border: none;\n            }\n\n            .workshop-modal-footer a {\n                background-color: #23961d;\n                color: white;\n            }\n\n            .workshop-modal-footer a:hover {\n                background-color: #0052a3;\n            }\n\n            .workshop-modal-footer button {\n                background-color: #e0e0e0;\n                color: #333;\n            }\n\n            .workshop-modal-footer button:hover {\n                background-color: #d0d0d0;\n            }\n\n            @media (max-width: 768px) {\n                tr.workshop-item td:last-child {\n                    text-align: left;\n                }\n\n                .workshop-actions {\n                    align-items: flex-start;\n                }\n\n                .workshop-modal-content {\n                    margin: 10px;\n                    max-height: 95vh;\n                }\n\n                .workshop-modal-header {\n                    padding: 15px;\n                }\n\n                .workshop-modal-title {\n                    font-size: 22px;\n                }\n\n                .workshop-modal-body {\n                    padding: 15px;\n                }\n            }\n            a.workshop-action-link[href*=\"waitlist=1\"] {\n                /* Your styles here */\n                background-color: #757575;\n            \n            }\n\n        </style>\n        <script>\n            jQuery(document).ready(function($) {\n                $(document).on('click', '.workshop-item button', function(e) {\n                    e.preventDefault();\n                    e.stopPropagation();\n\n                    const $triggerButton = $(this);\n                    const $row = $triggerButton.closest('.workshop-item');\n                    const $titleLink = $row.find('td:first-child a').first();\n                    const title = $titleLink.text().trim();\n                    const $instructorEm = $row.find('em').first();\n                    const instructor = $instructorEm.length ? $instructorEm.text().trim() : '';\n                    const $detailsDiv = $row.find('.event-details').first();\n                    const details = $detailsDiv.length ? $detailsDiv.html() : '';\n                    const $timeCell = $row.find('td').eq(1);\n                    const time = $timeCell.length ? $timeCell.text().trim() : '';\n                    const $actionLink = $row.find('.workshop-actions').first().find('a.workshop-action-link').first();\n                    const actionLabel = $actionLink.length ? $actionLink.text().trim() : '';\n                    const actionUrl = $actionLink.length ? ($actionLink.attr('href') || '') : '';\n\n                    let duration = '';\n\n                    if ( time ) {\n                        const timeMatch = time.match(/(\\d+):(\\d+)(am|pm).*?(\\d+):(\\d+)(am|pm)/i);\n\n                        if ( timeMatch ) {\n                            let [_, startHour, startMin, startPeriod, endHour, endMin, endPeriod] = timeMatch;\n                            startHour = parseInt(startHour, 10);\n                            endHour = parseInt(endHour, 10);\n\n                            if ( startPeriod.toLowerCase() === 'pm' && startHour !== 12 ) startHour += 12;\n                            if ( startPeriod.toLowerCase() === 'am' && startHour === 12 ) startHour = 0;\n                            if ( endPeriod.toLowerCase() === 'pm' && endHour !== 12 ) endHour += 12;\n                            if ( endPeriod.toLowerCase() === 'am' && endHour === 12 ) endHour = 0;\n\n                            const startMinutes = startHour * 60 + parseInt(startMin, 10);\n                            const endMinutes = endHour * 60 + parseInt(endMin, 10);\n                            const durationMinutes = endMinutes - startMinutes;\n                            const hours = Math.floor(durationMinutes / 60);\n                            const mins = durationMinutes % 60;\n\n                            if ( hours > 0 && mins > 0 ) {\n                                duration = `${hours}h ${mins}min`;\n                            } else if ( hours > 0 ) {\n                                duration = `${hours}h`;\n                            } else if ( mins > 0 ) {\n                                duration = `${mins}min`;\n                            }\n                        }\n                    }\n\n                    const $overlay = $('<div>', {\n                        'class': 'workshop-modal-overlay',\n                        'role': 'dialog',\n                        'aria-modal': 'true',\n                        'aria-labelledby': 'workshop-modal-title'\n                    });\n\n                    $overlay.html(`\n                    <div class=\"workshop-modal-content\">\n                        <div class=\"workshop-modal-header\">\n                            <div>\n                                <h2 id=\"workshop-modal-title\" class=\"workshop-modal-title\">${title}</h2>\n                                ${instructor ? `<p class=\"workshop-modal-instructor\">${instructor}</p>` : ''}\n                            </div>\n                            <button class=\"workshop-modal-close\" aria-label=\"Close modal\">&times;</button>\n                        </div>\n                        <div class=\"workshop-modal-body\">\n                            ${time ? `<p class=\"workshop-modal-time\"><b>Time:</b> ${time}${duration ? ` (${duration})` : ''}</p>` : ''}\n                            ${details}\n                        </div>\n                        <div class=\"workshop-modal-footer\">\n                            <button class=\"workshop-modal-close-btn\">Close</button>\n                            ${actionUrl && actionLabel ? `<a href=\"${actionUrl}\">${actionLabel}</a>` : ''}\n                        </div>\n                    </div>\n                `);\n\n                    $('body').append($overlay);\n\n                    const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;\n                    $('body').css({\n                        'overflow': 'hidden',\n                        'padding-right': scrollbarWidth + 'px'\n                    });\n\n                    setTimeout(() => $overlay.addClass('active'), 10);\n\n                    setTimeout(() => {\n                        $overlay.find('.workshop-modal-close').focus();\n                    }, 350);\n\n                    function closeModal() {\n                        $overlay.removeClass('active');\n                        setTimeout(() => {\n                            $overlay.remove();\n                            $('body').css({\n                                'overflow': '',\n                                'padding-right': ''\n                            });\n                            $triggerButton.focus();\n                        }, 300);\n                    }\n\n                    $overlay.find('.workshop-modal-close, .workshop-modal-close-btn').on('click', closeModal);\n\n                    $overlay.on('click', function(event) {\n                        if ( event.target === $overlay[0] ) {\n                            closeModal();\n                        }\n                    });\n\n                    function escapeHandler(event) {\n                        if ( event.key === 'Escape' ) {\n                            closeModal();\n                            $(document).off('keydown', escapeHandler);\n                        }\n                    }\n\n                    $(document).on('keydown', escapeHandler);\n                });\n            });\n        </script>\n    </p><div class=\"workshops-wrapper\">\n\n\t\t<style>\n\n\n\t\t\t\n\t\t\t.dc_accordion .dc_accordion-body:before{\n\t\t\t\tdisplay: block;\n\t\t\t\theight: 10px;height: 1rem;\n\t\t\t\tcontent: \"\";\n\t\t\t}\n\n\t\t\t\n\n\n\t\t</style>\n\n\n\t\t<div id=\"september-2026\" class=\"new dc_accordion open  multiple\"><h2 class=\"dc_accordion-title highlighta\"><a class=\"\" style=\"\" href=\"#september-2026\">septembre 2026</a></h2><div class=\"dc_accordion-body \" style=\"\"><table class=\"action workshops\">\n<tr class=\"workshop-item\">\n<td>\n<div class=\"workshop-title-row\"><a style=\"\" href=\"https://fr.dawsoncollege.qc.ca/oad/workshop-registration/?wid=4561\">Perspectives autochtones : en quoi la décolonisation et la lutte contre le changement climatique sont étroitement liées.</a></div>\n<p> - <em>Tiio Hemlock</em></p>\n<div class=\"event-details\" style=\"display:none; margin-top:20px;\">\n<p>Kanerahtiio Hemlock est conseiller pédagogique autochtone au Dawson College ; il fera une présentation de 30 minutes, suivie d'un extrait vidéo de 30 minutes, avant d'ouvrir la discussion.</p>\n</div>\n</td>\n<td><b>30 septembre 2026,</b><br/> de 10 h à 11 h 30</td>\n<td>\n<div class=\"workshop-actions\"><a class=\"workshop-action-link\" href=\"https://fr.dawsoncollege.qc.ca/oad/workshop-registration/?wid=4561\">S'inscrire</a><button type=\"button\" class=\"workshop-details-button\">Détails</button></div>\n</td>\n</tr>\n</table></div></div>\n<div id=\"october-2026\" class=\"new dc_accordion open  multiple\"><h2 class=\"dc_accordion-title highlighta\"><a class=\"\" style=\"\" href=\"#october-2026\">Octobre 2026</a></h2><div class=\"dc_accordion-body \" style=\"\"><table class=\"action workshops\">\n<tr class=\"workshop-item\">\n<td>\n<div class=\"workshop-title-row\"><a style=\"\" href=\"https://fr.dawsoncollege.qc.ca/oad/workshop-registration/?wid=4562\">Perspectives autochtones : Christophe Colomb et la doctrine de la découverte</a></div>\n<p> - <em>Tiio Hemlock</em></p>\n<div class=\"event-details\" style=\"display:none; margin-top:20px;\">\n<p>Regardez une courte vidéo, participez à une discussion sur l'histoire et les répercussions réelles de Christophe Colomb, et découvrez pourquoi les peuples autochtones ne célèbrent pas le Jour de Christophe Colomb.</p>\n</div>\n</td>\n<td><b>6 octobre 2026,</b><br/> de 10 h 30 à 11 h 45</td>\n<td>\n<div class=\"workshop-actions\"><a class=\"workshop-action-link\" href=\"https://fr.dawsoncollege.qc.ca/oad/workshop-registration/?wid=4562\">S'inscrire</a><button type=\"button\" class=\"workshop-details-button\">Détails</button></div>\n</td>\n</tr>\n<tr class=\"workshop-item\">\n<td>\n<div class=\"workshop-title-row\"><a style=\"\" href=\"https://fr.dawsoncollege.qc.ca/oad/workshop-registration/?wid=4563\">Perspectives autochtones : Christophe Colomb et la doctrine de la découverte</a></div>\n<p> - <em>Tiio Hemlock</em></p>\n<div class=\"event-details\" style=\"display:none; margin-top:20px;\">\n<p>Regardez une courte vidéo, participez à une discussion sur l'histoire et les répercussions réelles de Christophe Colomb, et découvrez pourquoi les peuples autochtones ne célèbrent pas le Jour de Christophe Colomb.</p>\n</div>\n</td>\n<td><b>7 octobre 2026,</b><br/> 14 h 00 - 15 h 15</td>\n<td>\n<div class=\"workshop-actions\"><a class=\"workshop-action-link\" href=\"https://fr.dawsoncollege.qc.ca/oad/workshop-registration/?wid=4563\">S'inscrire</a><button type=\"button\" class=\"workshop-details-button\">Détails</button></div>\n</td>\n</tr>\n<tr class=\"workshop-item\">\n<td>\n<div class=\"workshop-title-row\"><a style=\"\" href=\"https://fr.dawsoncollege.qc.ca/oad/workshop-registration/?wid=4564\">Perspectives autochtones : série documentaire sur la crise d'Oka de 1990 et débat.</a></div>\n<p> - <em>Tiio Hemlock</em></p>\n<div class=\"event-details\" style=\"display:none; margin-top:20px;\">\n<p>Kanensatake : 270 ans de résistance : ce documentaire canadien retrace la confrontation de 1990 entre la nation mohawk et la ville d'Oka, au Québec, à majorité blanche, qui entendait exploiter des terres considérées comme sacrées par les peuples autochtones. Lorsque les membres de la nation mohawk s'opposent au projet d'extension d'un terrain de golf sur leur territoire, ils érigent une barricade,...</p>\n</div>\n</td>\n<td><b>13 octobre 2026,</b><br/> de 10 h à 12 h</td>\n<td>\n<div class=\"workshop-actions\"><a class=\"workshop-action-link\" href=\"https://fr.dawsoncollege.qc.ca/oad/workshop-registration/?wid=4564\">S'inscrire</a><button type=\"button\" class=\"workshop-details-button\">Détails</button></div>\n</td>\n</tr>\n<tr class=\"workshop-item\">\n<td>\n<div class=\"workshop-title-row\"><a style=\"\" href=\"https://fr.dawsoncollege.qc.ca/oad/workshop-registration/?wid=4565\">Perspectives autochtones : le mythe de la théorie du détroit de Béring.</a></div>\n<p> - <em>Tiio Hemlock</em></p>\n<div class=\"event-details\" style=\"display:none; margin-top:20px;\">\n<p>La société occidentale soutient depuis longtemps que les peuples autochtones ont migré vers notre partie du globe il y a environ 13 000 ans, ce qu'ont toujours contesté les Premières Nations. Nous présenterons des découvertes récentes et des avancées scientifiques qui rendent obsolète la théorie du passage du détroit de Béring.</p>\n</div>\n</td>\n<td><b>20 octobre 2026,</b><br/> de 10 h 30 à 11 h 45</td>\n<td>\n<div class=\"workshop-actions\"><a class=\"workshop-action-link\" href=\"https://fr.dawsoncollege.qc.ca/oad/workshop-registration/?wid=4565\">S'inscrire</a><button type=\"button\" class=\"workshop-details-button\">Détails</button></div>\n</td>\n</tr>\n<tr class=\"workshop-item\">\n<td>\n<div class=\"workshop-title-row\"><a style=\"\" href=\"https://fr.dawsoncollege.qc.ca/oad/workshop-registration/?wid=4567\">Perspectives autochtones : le mythe de la théorie du détroit de Béring.</a></div>\n<p> - <em>Tiio Hemlock</em></p>\n<div class=\"event-details\" style=\"display:none; margin-top:20px;\">\n<p>La société occidentale soutient depuis longtemps que les peuples autochtones ont migré vers notre partie du globe il y a environ 13 000 ans, ce qu'ont toujours contesté les Premières Nations. Nous présenterons des découvertes récentes et des avancées scientifiques qui rendent obsolète la théorie du passage du détroit de Béring.</p>\n</div>\n</td>\n<td><b>21 octobre 2026,</b><br/> 14 h 00 - 15 h 15</td>\n<td>\n<div class=\"workshop-actions\"><a class=\"workshop-action-link\" href=\"https://fr.dawsoncollege.qc.ca/oad/workshop-registration/?wid=4567\">S'inscrire</a><button type=\"button\" class=\"workshop-details-button\">Détails</button></div>\n</td>\n</tr>\n<tr class=\"workshop-item\">\n<td>\n<div class=\"workshop-title-row\"><a style=\"\" href=\"https://fr.dawsoncollege.qc.ca/oad/workshop-registration/?wid=4566\">Perspectives autochtones : série documentaire sur la crise d'Oka de 1990 et débat.</a></div>\n<p> - <em>Tiio Hemlock</em></p>\n<div class=\"event-details\" style=\"display:none; margin-top:20px;\">\n<p>« Acts of Defiance » : Ce long métrage documentaire retrace les événements qui ont entouré et conduit à la crise d'Oka durant l'été 1990. Le film se concentre sur le territoire mohawk de Kahnawake, au Québec, mais propose également une réflexion sur les relations entre le Canada et les peuples autochtones à une période particulière de l'histoire.</p>\n</div>\n</td>\n<td><b>27 octobre 2026,</b><br/> de 10 h à 12 h</td>\n<td>\n<div class=\"workshop-actions\"><a class=\"workshop-action-link\" href=\"https://fr.dawsoncollege.qc.ca/oad/workshop-registration/?wid=4566\">S'inscrire</a><button type=\"button\" class=\"workshop-details-button\">Détails</button></div>\n</td>\n</tr>\n</table></div></div>\n</div>\n        <style>\n            tr.workshop-item table {\n                margin: 0;\n            }\n\n            tr.workshop-item td:first-child {\n                max-width: 350px;\n            }\n\n            tr.workshop-item td:nth-child(2) {\n                width: 170px;\n            }\n\n            tr.workshop-item td:last-child {\n                width: 190px;\n                text-align: right;\n            }\n\n            tr.workshop-item:nth-child(2n) td {\n                background: #f1f8ff;\n            }\n\n            table.workshops {\n                border-top: none !important;\n            }\n\n            table.workshops a {\n                text-decoration: none !important;\n                font-weight: 600;\n            }\n\n            .workshops {\n                width: 100%;\n                border-collapse: collapse;\n                margin: 0;\n            }\n\n            .workshops-wrapper .dc_accordion .dc_accordion-title {\n                background-color: #0056b7 !important;\n                color: #fff;\n            }\n\n            .workshops-wrapper .dc_accordion .dc_accordion-title a {\n\n                color: #fff;\n            }\n\n            .workshops th,\n            .workshops td {\n                padding: 12px;\n                text-align: left;\n                border-bottom: 1px solid #ddd;\n                vertical-align: middle;\n            }\n\n            .workshop-action-link {\n                display: inline-flex;\n                align-items: center;\n                justify-content: center;\n                width: 160px;\n                padding: 10px 18px;\n                border-radius: 4px;\n                background-color: #23961d;\n                color: #fff !important;\n                font-size: 14px;\n                line-height: 1.2;\n                text-align: center;\n                white-space: nowrap;\n            }\n\n            .workshop-action-link:hover {\n                background-color: #0052a3;\n                color: #fff !important;\n            }\n\n            .workshop-action-link:focus {\n                outline: 2px solid #0052a3;\n                outline-offset: 2px;\n            }\n\n            .workshop-item button {\n                min-width: 90px;\n            }\n\n            .workshop-details-button {\n                display: inline-flex;\n                align-items: center;\n                justify-content: center;\n                width: 160px;\n                padding: 10px 18px;\n                border: 1px solid #c8d4e3;\n                border-radius: 4px;\n                background-color: #fff;\n                color: #1d3557;\n                font-size: 14px;\n                line-height: 1.2;\n                white-space: nowrap;\n            }\n\n            .workshop-actions {\n                display: flex;\n                flex-direction: column;\n                align-items: flex-end;\n                gap: 10px;\n            }\n\n            .workshop-actions:empty {\n                display: none;\n            }\n\n            .workshop-title-row {\n                display: inline-flex;\n                align-items: center;\n                gap: 8px;\n                flex-wrap: wrap;\n            }\n\n            .workshop-status-pill {\n                display: inline-flex;\n                align-items: center;\n                padding: 2px 10px;\n                border-radius: 999px;\n                font-size: 12px;\n                font-weight: 600;\n                line-height: 1.4;\n                white-space: nowrap;\n            }\n\n            .workshop-status-pill--cancelled {\n                background: #f8d7da;\n                color: #7a1f14;\n            }\n\n            .workshop-status-pill--closed {\n                background: #dbeafe;\n                color: #17406d;\n            }\n\n            .workshop-status-pill--full {\n                background: #dcfce7;\n                color: #166534;\n            }\n\n            .workshop-details-button:hover {\n                background-color: #edf4fb;\n                border-color: #9db6d3;\n            }\n\n            .workshop-details-button:focus {\n                outline: 2px solid #0052a3;\n                outline-offset: 2px;\n            }\n\n            /* Modal styles - add these to your CSS */\n            .workshop-modal-overlay {\n                display: none;\n                position: fixed;\n                z-index: 1000;\n                left: 0;\n                top: 0;\n                width: 100%;\n                height: 100%;\n                overflow: auto;\n                background-color: rgba(0, 0, 0, 0.7);\n                animation: fadeIn 0.3s;\n                align-items: center;\n                justify-content: center;\n                padding: 20px;\n            }\n\n            .workshop-modal-overlay.active {\n                display: flex;\n            }\n\n            @keyframes fadeIn {\n                from {\n                    opacity: 0;\n                }\n\n                to {\n                    opacity: 1;\n                }\n            }\n\n            .workshop-modal-content {\n                background-color: white;\n                border-radius: 8px;\n                max-width: 600px;\n                width: 100%;\n                max-height: 90vh;\n                overflow-y: auto;\n                box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n                animation: slideIn 0.3s;\n            }\n\n            @keyframes slideIn {\n                from {\n                    transform: translateY(-50px);\n                    opacity: 0;\n                }\n\n                to {\n                    transform: translateY(0);\n                    opacity: 1;\n                }\n            }\n\n            .workshop-modal-header {\n                padding: 20px;\n                border-bottom: 1px solid #e0e0e0;\n                display: flex;\n                justify-content: space-between;\n                align-items: flex-start;\n                background: #0266cc;\n                color: #fff;\n            }\n\n            .workshop-modal-title {\n                margin: 0;\n                font-size: 2.25rem;\n                font-weight: bold;\n                padding-right: 20px;\n            }\n\n            .workshop-modal-instructor {\n                margin: 5px 0 0 0;\n                font-style: italic;\n                color: #f8f8f8;\n            }\n\n            .workshop-modal-close {\n                background: none;\n                border: none;\n                font-size: 28px;\n                cursor: pointer;\n                color: #666;\n                padding: 0;\n                width: 32px;\n                height: 32px;\n                display: flex;\n                align-items: center;\n                justify-content: center;\n                border-radius: 4px;\n                flex-shrink: 0;\n            }\n\n            .workshop-modal-close:hover {\n                background-color: #f0f0f0;\n                color: #333;\n            }\n\n            .workshop-modal-close:focus {\n                outline: 2px solid #0066cc;\n                outline-offset: 2px;\n            }\n\n            .workshop-modal-body {\n                padding: 20px;\n                line-height: 1.6;\n            }\n\n            .workshop-modal-time {\n                margin-top: 0;\n                padding-top: 0;\n            }\n\n            .workshop-modal-footer {\n                padding: 15px 20px;\n                border-top: 1px solid #e0e0e0;\n                display: flex;\n                justify-content: flex-end;\n                gap: 10px;\n            }\n\n            .workshop-modal-footer a,\n            .workshop-modal-footer button {\n                padding: 10px 20px;\n                border-radius: 4px;\n                text-decoration: none;\n                font-size: 14px;\n                cursor: pointer;\n                border: none;\n            }\n\n            .workshop-modal-footer a {\n                background-color: #23961d;\n                color: white;\n            }\n\n            .workshop-modal-footer a:hover {\n                background-color: #0052a3;\n            }\n\n            .workshop-modal-footer button {\n                background-color: #e0e0e0;\n                color: #333;\n            }\n\n            .workshop-modal-footer button:hover {\n                background-color: #d0d0d0;\n            }\n\n            @media (max-width: 768px) {\n                tr.workshop-item td:last-child {\n                    text-align: left;\n                }\n\n                .workshop-actions {\n                    align-items: flex-start;\n                }\n\n                .workshop-modal-content {\n                    margin: 10px;\n                    max-height: 95vh;\n                }\n\n                .workshop-modal-header {\n                    padding: 15px;\n                }\n\n                .workshop-modal-title {\n                    font-size: 22px;\n                }\n\n                .workshop-modal-body {\n                    padding: 15px;\n                }\n            }\n            a.workshop-action-link[href*=\"waitlist=1\"] {\n                /* Your styles here */\n                background-color: #757575;\n            \n            }\n\n        </style>\n        <script>\n            jQuery(document).ready(function($) {\n                $(document).on('click', '.workshop-item button', function(e) {\n                    e.preventDefault();\n                    e.stopPropagation();\n\n                    const $triggerButton = $(this);\n                    const $row = $triggerButton.closest('.workshop-item');\n                    const $titleLink = $row.find('td:first-child a').first();\n                    const title = $titleLink.text().trim();\n                    const $instructorEm = $row.find('em').first();\n                    const instructor = $instructorEm.length ? $instructorEm.text().trim() : '';\n                    const $detailsDiv = $row.find('.event-details').first();\n                    const details = $detailsDiv.length ? $detailsDiv.html() : '';\n                    const $timeCell = $row.find('td').eq(1);\n                    const time = $timeCell.length ? $timeCell.text().trim() : '';\n                    const $actionLink = $row.find('.workshop-actions').first().find('a.workshop-action-link').first();\n                    const actionLabel = $actionLink.length ? $actionLink.text().trim() : '';\n                    const actionUrl = $actionLink.length ? ($actionLink.attr('href') || '') : '';\n\n                    let duration = '';\n\n                    if ( time ) {\n                        const timeMatch = time.match(/(\\d+):(\\d+)(am|pm).*?(\\d+):(\\d+)(am|pm)/i);\n\n                        if ( timeMatch ) {\n                            let [_, startHour, startMin, startPeriod, endHour, endMin, endPeriod] = timeMatch;\n                            startHour = parseInt(startHour, 10);\n                            endHour = parseInt(endHour, 10);\n\n                            if ( startPeriod.toLowerCase() === 'pm' && startHour !== 12 ) startHour += 12;\n                            if ( startPeriod.toLowerCase() === 'am' && startHour === 12 ) startHour = 0;\n                            if ( endPeriod.toLowerCase() === 'pm' && endHour !== 12 ) endHour += 12;\n                            if ( endPeriod.toLowerCase() === 'am' && endHour === 12 ) endHour = 0;\n\n                            const startMinutes = startHour * 60 + parseInt(startMin, 10);\n                            const endMinutes = endHour * 60 + parseInt(endMin, 10);\n                            const durationMinutes = endMinutes - startMinutes;\n                            const hours = Math.floor(durationMinutes / 60);\n                            const mins = durationMinutes % 60;\n\n                            if ( hours > 0 && mins > 0 ) {\n                                duration = `${hours}h ${mins}min`;\n                            } else if ( hours > 0 ) {\n                                duration = `${hours}h`;\n                            } else if ( mins > 0 ) {\n                                duration = `${mins}min`;\n                            }\n                        }\n                    }\n\n                    const $overlay = $('<div>', {\n                        'class': 'workshop-modal-overlay',\n                        'role': 'dialog',\n                        'aria-modal': 'true',\n                        'aria-labelledby': 'workshop-modal-title'\n                    });\n\n                    $overlay.html(`\n                    <div class=\"workshop-modal-content\">\n                        <div class=\"workshop-modal-header\">\n                            <div>\n                                <h2 id=\"workshop-modal-title\" class=\"workshop-modal-title\">${title}</h2>\n                                ${instructor ? `<p class=\"workshop-modal-instructor\">${instructor}</p>` : ''}\n                            </div>\n                            <button class=\"workshop-modal-close\" aria-label=\"Close modal\">&times;</button>\n                        </div>\n                        <div class=\"workshop-modal-body\">\n                            ${time ? `<p class=\"workshop-modal-time\"><b>Time:</b> ${time}${duration ? ` (${duration})` : ''}</p>` : ''}\n                            ${details}\n                        </div>\n                        <div class=\"workshop-modal-footer\">\n                            <button class=\"workshop-modal-close-btn\">Close</button>\n                            ${actionUrl && actionLabel ? `<a href=\"${actionUrl}\">${actionLabel}</a>` : ''}\n                        </div>\n                    </div>\n                `);\n\n                    $('body').append($overlay);\n\n                    const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;\n                    $('body').css({\n                        'overflow': 'hidden',\n                        'padding-right': scrollbarWidth + 'px'\n                    });\n\n                    setTimeout(() => $overlay.addClass('active'), 10);\n\n                    setTimeout(() => {\n                        $overlay.find('.workshop-modal-close').focus();\n                    }, 350);\n\n                    function closeModal() {\n                        $overlay.removeClass('active');\n                        setTimeout(() => {\n                            $overlay.remove();\n                            $('body').css({\n                                'overflow': '',\n                                'padding-right': ''\n                            });\n                            $triggerButton.focus();\n                        }, 300);\n                    }\n\n                    $overlay.find('.workshop-modal-close, .workshop-modal-close-btn').on('click', closeModal);\n\n                    $overlay.on('click', function(event) {\n                        if ( event.target === $overlay[0] ) {\n                            closeModal();\n                        }\n                    });\n\n                    function escapeHandler(event) {\n                        if ( event.key === 'Escape' ) {\n                            closeModal();\n                            $(document).off('keydown', escapeHandler);\n                        }\n                    }\n\n                    $(document).on('keydown', escapeHandler);\n                });\n            });\n        </script>\n    <div class=\"workshops-wrapper\">\n</div>\n        <style>\n            tr.workshop-item table {\n                margin: 0;\n            }\n\n            tr.workshop-item td:first-child {\n                max-width: 350px;\n            }\n\n            tr.workshop-item td:nth-child(2) {\n                width: 170px;\n            }\n\n            tr.workshop-item td:last-child {\n                width: 190px;\n                text-align: right;\n            }\n\n            tr.workshop-item:nth-child(2n) td {\n                background: #f1f8ff;\n            }\n\n            table.workshops {\n                border-top: none !important;\n            }\n\n            table.workshops a {\n                text-decoration: none !important;\n                font-weight: 600;\n            }\n\n            .workshops {\n                width: 100%;\n                border-collapse: collapse;\n                margin: 0;\n            }\n\n            .workshops-wrapper .dc_accordion .dc_accordion-title {\n                background-color: #0056b7 !important;\n                color: #fff;\n            }\n\n            .workshops-wrapper .dc_accordion .dc_accordion-title a {\n\n                color: #fff;\n            }\n\n            .workshops th,\n            .workshops td {\n                padding: 12px;\n                text-align: left;\n                border-bottom: 1px solid #ddd;\n                vertical-align: middle;\n            }\n\n            .workshop-action-link {\n                display: inline-flex;\n                align-items: center;\n                justify-content: center;\n                width: 160px;\n                padding: 10px 18px;\n                border-radius: 4px;\n                background-color: #23961d;\n                color: #fff !important;\n                font-size: 14px;\n                line-height: 1.2;\n                text-align: center;\n                white-space: nowrap;\n            }\n\n            .workshop-action-link:hover {\n                background-color: #0052a3;\n                color: #fff !important;\n            }\n\n            .workshop-action-link:focus {\n                outline: 2px solid #0052a3;\n                outline-offset: 2px;\n            }\n\n            .workshop-item button {\n                min-width: 90px;\n            }\n\n            .workshop-details-button {\n                display: inline-flex;\n                align-items: center;\n                justify-content: center;\n                width: 160px;\n                padding: 10px 18px;\n                border: 1px solid #c8d4e3;\n                border-radius: 4px;\n                background-color: #fff;\n                color: #1d3557;\n                font-size: 14px;\n                line-height: 1.2;\n                white-space: nowrap;\n            }\n\n            .workshop-actions {\n                display: flex;\n                flex-direction: column;\n                align-items: flex-end;\n                gap: 10px;\n            }\n\n            .workshop-actions:empty {\n                display: none;\n            }\n\n            .workshop-title-row {\n                display: inline-flex;\n                align-items: center;\n                gap: 8px;\n                flex-wrap: wrap;\n            }\n\n            .workshop-status-pill {\n                display: inline-flex;\n                align-items: center;\n                padding: 2px 10px;\n                border-radius: 999px;\n                font-size: 12px;\n                font-weight: 600;\n                line-height: 1.4;\n                white-space: nowrap;\n            }\n\n            .workshop-status-pill--cancelled {\n                background: #f8d7da;\n                color: #7a1f14;\n            }\n\n            .workshop-status-pill--closed {\n                background: #dbeafe;\n                color: #17406d;\n            }\n\n            .workshop-status-pill--full {\n                background: #dcfce7;\n                color: #166534;\n            }\n\n            .workshop-details-button:hover {\n                background-color: #edf4fb;\n                border-color: #9db6d3;\n            }\n\n            .workshop-details-button:focus {\n                outline: 2px solid #0052a3;\n                outline-offset: 2px;\n            }\n\n            /* Modal styles - add these to your CSS */\n            .workshop-modal-overlay {\n                display: none;\n                position: fixed;\n                z-index: 1000;\n                left: 0;\n                top: 0;\n                width: 100%;\n                height: 100%;\n                overflow: auto;\n                background-color: rgba(0, 0, 0, 0.7);\n                animation: fadeIn 0.3s;\n                align-items: center;\n                justify-content: center;\n                padding: 20px;\n            }\n\n            .workshop-modal-overlay.active {\n                display: flex;\n            }\n\n            @keyframes fadeIn {\n                from {\n                    opacity: 0;\n                }\n\n                to {\n                    opacity: 1;\n                }\n            }\n\n            .workshop-modal-content {\n                background-color: white;\n                border-radius: 8px;\n                max-width: 600px;\n                width: 100%;\n                max-height: 90vh;\n                overflow-y: auto;\n                box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n                animation: slideIn 0.3s;\n            }\n\n            @keyframes slideIn {\n                from {\n                    transform: translateY(-50px);\n                    opacity: 0;\n                }\n\n                to {\n                    transform: translateY(0);\n                    opacity: 1;\n                }\n            }\n\n            .workshop-modal-header {\n                padding: 20px;\n                border-bottom: 1px solid #e0e0e0;\n                display: flex;\n                justify-content: space-between;\n                align-items: flex-start;\n                background: #0266cc;\n                color: #fff;\n            }\n\n            .workshop-modal-title {\n                margin: 0;\n                font-size: 2.25rem;\n                font-weight: bold;\n                padding-right: 20px;\n            }\n\n            .workshop-modal-instructor {\n                margin: 5px 0 0 0;\n                font-style: italic;\n                color: #f8f8f8;\n            }\n\n            .workshop-modal-close {\n                background: none;\n                border: none;\n                font-size: 28px;\n                cursor: pointer;\n                color: #666;\n                padding: 0;\n                width: 32px;\n                height: 32px;\n                display: flex;\n                align-items: center;\n                justify-content: center;\n                border-radius: 4px;\n                flex-shrink: 0;\n            }\n\n            .workshop-modal-close:hover {\n                background-color: #f0f0f0;\n                color: #333;\n            }\n\n            .workshop-modal-close:focus {\n                outline: 2px solid #0066cc;\n                outline-offset: 2px;\n            }\n\n            .workshop-modal-body {\n                padding: 20px;\n                line-height: 1.6;\n            }\n\n            .workshop-modal-time {\n                margin-top: 0;\n                padding-top: 0;\n            }\n\n            .workshop-modal-footer {\n                padding: 15px 20px;\n                border-top: 1px solid #e0e0e0;\n                display: flex;\n                justify-content: flex-end;\n                gap: 10px;\n            }\n\n            .workshop-modal-footer a,\n            .workshop-modal-footer button {\n                padding: 10px 20px;\n                border-radius: 4px;\n                text-decoration: none;\n                font-size: 14px;\n                cursor: pointer;\n                border: none;\n            }\n\n            .workshop-modal-footer a {\n                background-color: #23961d;\n                color: white;\n            }\n\n            .workshop-modal-footer a:hover {\n                background-color: #0052a3;\n            }\n\n            .workshop-modal-footer button {\n                background-color: #e0e0e0;\n                color: #333;\n            }\n\n            .workshop-modal-footer button:hover {\n                background-color: #d0d0d0;\n            }\n\n            @media (max-width: 768px) {\n                tr.workshop-item td:last-child {\n                    text-align: left;\n                }\n\n                .workshop-actions {\n                    align-items: flex-start;\n                }\n\n                .workshop-modal-content {\n                    margin: 10px;\n                    max-height: 95vh;\n                }\n\n                .workshop-modal-header {\n                    padding: 15px;\n                }\n\n                .workshop-modal-title {\n                    font-size: 22px;\n                }\n\n                .workshop-modal-body {\n                    padding: 15px;\n                }\n            }\n            a.workshop-action-link[href*=\"waitlist=1\"] {\n                /* Your styles here */\n                background-color: #757575;\n            \n            }\n\n        </style>\n        <script>\n            jQuery(document).ready(function($) {\n                $(document).on('click', '.workshop-item button', function(e) {\n                    e.preventDefault();\n                    e.stopPropagation();\n\n                    const $triggerButton = $(this);\n                    const $row = $triggerButton.closest('.workshop-item');\n                    const $titleLink = $row.find('td:first-child a').first();\n                    const title = $titleLink.text().trim();\n                    const $instructorEm = $row.find('em').first();\n                    const instructor = $instructorEm.length ? $instructorEm.text().trim() : '';\n                    const $detailsDiv = $row.find('.event-details').first();\n                    const details = $detailsDiv.length ? $detailsDiv.html() : '';\n                    const $timeCell = $row.find('td').eq(1);\n                    const time = $timeCell.length ? $timeCell.text().trim() : '';\n                    const $actionLink = $row.find('.workshop-actions').first().find('a.workshop-action-link').first();\n                    const actionLabel = $actionLink.length ? $actionLink.text().trim() : '';\n                    const actionUrl = $actionLink.length ? ($actionLink.attr('href') || '') : '';\n\n                    let duration = '';\n\n                    if ( time ) {\n                        const timeMatch = time.match(/(\\d+):(\\d+)(am|pm).*?(\\d+):(\\d+)(am|pm)/i);\n\n                        if ( timeMatch ) {\n                            let [_, startHour, startMin, startPeriod, endHour, endMin, endPeriod] = timeMatch;\n                            startHour = parseInt(startHour, 10);\n                            endHour = parseInt(endHour, 10);\n\n                            if ( startPeriod.toLowerCase() === 'pm' && startHour !== 12 ) startHour += 12;\n                            if ( startPeriod.toLowerCase() === 'am' && startHour === 12 ) startHour = 0;\n                            if ( endPeriod.toLowerCase() === 'pm' && endHour !== 12 ) endHour += 12;\n                            if ( endPeriod.toLowerCase() === 'am' && endHour === 12 ) endHour = 0;\n\n                            const startMinutes = startHour * 60 + parseInt(startMin, 10);\n                            const endMinutes = endHour * 60 + parseInt(endMin, 10);\n                            const durationMinutes = endMinutes - startMinutes;\n                            const hours = Math.floor(durationMinutes / 60);\n                            const mins = durationMinutes % 60;\n\n                            if ( hours > 0 && mins > 0 ) {\n                                duration = `${hours}h ${mins}min`;\n                            } else if ( hours > 0 ) {\n                                duration = `${hours}h`;\n                            } else if ( mins > 0 ) {\n                                duration = `${mins}min`;\n                            }\n                        }\n                    }\n\n                    const $overlay = $('<div>', {\n                        'class': 'workshop-modal-overlay',\n                        'role': 'dialog',\n                        'aria-modal': 'true',\n                        'aria-labelledby': 'workshop-modal-title'\n                    });\n\n                    $overlay.html(`\n                    <div class=\"workshop-modal-content\">\n                        <div class=\"workshop-modal-header\">\n                            <div>\n                                <h2 id=\"workshop-modal-title\" class=\"workshop-modal-title\">${title}</h2>\n                                ${instructor ? `<p class=\"workshop-modal-instructor\">${instructor}</p>` : ''}\n                            </div>\n                            <button class=\"workshop-modal-close\" aria-label=\"Close modal\">&times;</button>\n                        </div>\n                        <div class=\"workshop-modal-body\">\n                            ${time ? `<p class=\"workshop-modal-time\"><b>Time:</b> ${time}${duration ? ` (${duration})` : ''}</p>` : ''}\n                            ${details}\n                        </div>\n                        <div class=\"workshop-modal-footer\">\n                            <button class=\"workshop-modal-close-btn\">Close</button>\n                            ${actionUrl && actionLabel ? `<a href=\"${actionUrl}\">${actionLabel}</a>` : ''}\n                        </div>\n                    </div>\n                `);\n\n                    $('body').append($overlay);\n\n                    const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;\n                    $('body').css({\n                        'overflow': 'hidden',\n                        'padding-right': scrollbarWidth + 'px'\n                    });\n\n                    setTimeout(() => $overlay.addClass('active'), 10);\n\n                    setTimeout(() => {\n                        $overlay.find('.workshop-modal-close').focus();\n                    }, 350);\n\n                    function closeModal() {\n                        $overlay.removeClass('active');\n                        setTimeout(() => {\n                            $overlay.remove();\n                            $('body').css({\n                                'overflow': '',\n                                'padding-right': ''\n                            });\n                            $triggerButton.focus();\n                        }, 300);\n                    }\n\n                    $overlay.find('.workshop-modal-close, .workshop-modal-close-btn').on('click', closeModal);\n\n                    $overlay.on('click', function(event) {\n                        if ( event.target === $overlay[0] ) {\n                            closeModal();\n                        }\n                    });\n\n                    function escapeHandler(event) {\n                        if ( event.key === 'Escape' ) {\n                            closeModal();\n                            $(document).off('keydown', escapeHandler);\n                        }\n                    }\n\n                    $(document).on('keydown', escapeHandler);\n                });\n            });\n        </script>\n    <div class=\"workshops-wrapper\">\n<div id=\"november-2026\" class=\"new dc_accordion open  multiple\"><h2 class=\"dc_accordion-title highlighta\"><a class=\"\" style=\"\" href=\"#november-2026\">novembre 2026</a></h2><div class=\"dc_accordion-body \" style=\"\"><table class=\"action workshops\">\n<tr class=\"workshop-item\">\n<td>\n<div class=\"workshop-title-row\"><a style=\"\" href=\"https://fr.dawsoncollege.qc.ca/oad/workshop-registration/?wid=4568\">Perspectives autochtones : un appel fondamental à la prise de conscience. 1re partie : Le message des Haudenosaunee au monde occidental, à Genève (Suisse), automne 1977</a></div>\n<p> - <em>Tiio Hemlock</em></p>\n<div class=\"event-details\" style=\"display:none; margin-top:20px;\">\n<p>Cette présentation consistera en la lecture et la discussion de deux chapitres : Le spiritualisme, la forme la plus élevée de conscience politique et Le fait évident de notre existence continue ; histoire juridique des Haudenosaunee.</p>\n</div>\n</td>\n<td><b>3 novembre 2026,</b><br/> de 10 h 30 à 11 h 45</td>\n<td>\n<div class=\"workshop-actions\"><a class=\"workshop-action-link\" href=\"https://fr.dawsoncollege.qc.ca/oad/workshop-registration/?wid=4568\">S'inscrire</a><button type=\"button\" class=\"workshop-details-button\">Détails</button></div>\n</td>\n</tr>\n<tr class=\"workshop-item\">\n<td>\n<div class=\"workshop-title-row\"><a style=\"\" href=\"https://fr.dawsoncollege.qc.ca/oad/workshop-registration/?wid=4569\">Perspectives autochtones : un appel fondamental à la prise de conscience. 1re partie : Le message des Haudenosaunee au monde occidental, à Genève (Suisse), automne 1977</a></div>\n<p> - <em>Tiio Hemlock</em></p>\n<div class=\"event-details\" style=\"display:none; margin-top:20px;\">\n<p>Cette présentation consistera en la lecture et la discussion de deux chapitres : Le spiritualisme, la forme la plus élevée de conscience politique et Le fait évident de notre existence continue ; histoire juridique des Haudenosaunee.</p>\n</div>\n</td>\n<td><b>4 novembre 2026,</b><br/> 14 h 00 - 15 h 15</td>\n<td>\n<div class=\"workshop-actions\"><a class=\"workshop-action-link\" href=\"https://fr.dawsoncollege.qc.ca/oad/workshop-registration/?wid=4569\">S'inscrire</a><button type=\"button\" class=\"workshop-details-button\">Détails</button></div>\n</td>\n</tr>\n<tr class=\"workshop-item\">\n<td>\n<div class=\"workshop-title-row\"><a style=\"\" href=\"https://fr.dawsoncollege.qc.ca/oad/workshop-registration/?wid=4570\">Perspectives autochtones : série documentaire sur la crise d'Oka de 1990 et débat.</a></div>\n<p> - <em>Tiio Hemlock</em></p>\n<div class=\"event-details\" style=\"display:none; margin-top:20px;\">\n<p>Spudwrench : Ce documentaire de la célèbre réalisatrice Alanis Obomsawin nous présente Randy Horn, un monteur de structures métalliques issu de la communauté mohawk de Kahnawake, près de Montréal. Défenseur de la culture et des traditions de son peuple, il était surnommé « Spudwrench » lors de la crise d’Oka en 1990. Ce film offre un regard unique, derrière les barricades, sur le combat passionné d’un homme…</p>\n</div>\n</td>\n<td><b>10 novembre 2026,</b><br/> de 10 h à 12 h</td>\n<td>\n<div class=\"workshop-actions\"><a class=\"workshop-action-link\" href=\"https://fr.dawsoncollege.qc.ca/oad/workshop-registration/?wid=4570\">S'inscrire</a><button type=\"button\" class=\"workshop-details-button\">Détails</button></div>\n</td>\n</tr>\n<tr class=\"workshop-item\">\n<td>\n<div class=\"workshop-title-row\"><a style=\"\" href=\"https://fr.dawsoncollege.qc.ca/oad/workshop-registration/?wid=4571\">Perspectives autochtones : un appel fondamental à la prise de conscience. 2e partie : Le message des Haudenosaunee au monde occidental, à Genève (Suisse), à l'automne 1977</a></div>\n<p> - <em>Tiio Hemlock</em></p>\n<div class=\"event-details\" style=\"display:none; margin-top:20px;\">\n<p>Cette présentation consistera en la lecture et la discussion de deux chapitres : Politiques d'oppression au nom de la « démocratie » et Notre stratégie pour survivre.</p>\n</div>\n</td>\n<td><b>24 novembre 2026,</b><br/> 14 h 00 - 15 h 15</td>\n<td>\n<div class=\"workshop-actions\"><a class=\"workshop-action-link\" href=\"https://fr.dawsoncollege.qc.ca/oad/workshop-registration/?wid=4571\">S'inscrire</a><button type=\"button\" class=\"workshop-details-button\">Détails</button></div>\n</td>\n</tr>\n<tr class=\"workshop-item\">\n<td>\n<div class=\"workshop-title-row\"><a style=\"\" href=\"https://fr.dawsoncollege.qc.ca/oad/workshop-registration/?wid=4572\">Perspectives autochtones : un appel fondamental à la prise de conscience. 2e partie : Le message des Haudenosaunee au monde occidental, à Genève (Suisse), à l'automne 1977</a></div>\n<p> - <em>Tiio Hemlock</em></p>\n<div class=\"event-details\" style=\"display:none; margin-top:20px;\">\n<p>Cette présentation consistera en la lecture et la discussion de deux chapitres : Politiques d'oppression au nom de la « démocratie » et Notre stratégie pour survivre.</p>\n</div>\n</td>\n<td><b>25 novembre 2026,</b><br/> de 10 h 30 à 11 h 45</td>\n<td>\n<div class=\"workshop-actions\"><a class=\"workshop-action-link\" href=\"https://fr.dawsoncollege.qc.ca/oad/workshop-registration/?wid=4572\">S'inscrire</a><button type=\"button\" class=\"workshop-details-button\">Détails</button></div>\n</td>\n</tr>\n</table></div></div>\n</div>\n        <style>\n            tr.workshop-item table {\n                margin: 0;\n            }\n\n            tr.workshop-item td:first-child {\n                max-width: 350px;\n            }\n\n            tr.workshop-item td:nth-child(2) {\n                width: 170px;\n            }\n\n            tr.workshop-item td:last-child {\n                width: 190px;\n                text-align: right;\n            }\n\n            tr.workshop-item:nth-child(2n) td {\n                background: #f1f8ff;\n            }\n\n            table.workshops {\n                border-top: none !important;\n            }\n\n            table.workshops a {\n                text-decoration: none !important;\n                font-weight: 600;\n            }\n\n            .workshops {\n                width: 100%;\n                border-collapse: collapse;\n                margin: 0;\n            }\n\n            .workshops-wrapper .dc_accordion .dc_accordion-title {\n                background-color: #0056b7 !important;\n                color: #fff;\n            }\n\n            .workshops-wrapper .dc_accordion .dc_accordion-title a {\n\n                color: #fff;\n            }\n\n            .workshops th,\n            .workshops td {\n                padding: 12px;\n                text-align: left;\n                border-bottom: 1px solid #ddd;\n                vertical-align: middle;\n            }\n\n            .workshop-action-link {\n                display: inline-flex;\n                align-items: center;\n                justify-content: center;\n                width: 160px;\n                padding: 10px 18px;\n                border-radius: 4px;\n                background-color: #23961d;\n                color: #fff !important;\n                font-size: 14px;\n                line-height: 1.2;\n                text-align: center;\n                white-space: nowrap;\n            }\n\n            .workshop-action-link:hover {\n                background-color: #0052a3;\n                color: #fff !important;\n            }\n\n            .workshop-action-link:focus {\n                outline: 2px solid #0052a3;\n                outline-offset: 2px;\n            }\n\n            .workshop-item button {\n                min-width: 90px;\n            }\n\n            .workshop-details-button {\n                display: inline-flex;\n                align-items: center;\n                justify-content: center;\n                width: 160px;\n                padding: 10px 18px;\n                border: 1px solid #c8d4e3;\n                border-radius: 4px;\n                background-color: #fff;\n                color: #1d3557;\n                font-size: 14px;\n                line-height: 1.2;\n                white-space: nowrap;\n            }\n\n            .workshop-actions {\n                display: flex;\n                flex-direction: column;\n                align-items: flex-end;\n                gap: 10px;\n            }\n\n            .workshop-actions:empty {\n                display: none;\n            }\n\n            .workshop-title-row {\n                display: inline-flex;\n                align-items: center;\n                gap: 8px;\n                flex-wrap: wrap;\n            }\n\n            .workshop-status-pill {\n                display: inline-flex;\n                align-items: center;\n                padding: 2px 10px;\n                border-radius: 999px;\n                font-size: 12px;\n                font-weight: 600;\n                line-height: 1.4;\n                white-space: nowrap;\n            }\n\n            .workshop-status-pill--cancelled {\n                background: #f8d7da;\n                color: #7a1f14;\n            }\n\n            .workshop-status-pill--closed {\n                background: #dbeafe;\n                color: #17406d;\n            }\n\n            .workshop-status-pill--full {\n                background: #dcfce7;\n                color: #166534;\n            }\n\n            .workshop-details-button:hover {\n                background-color: #edf4fb;\n                border-color: #9db6d3;\n            }\n\n            .workshop-details-button:focus {\n                outline: 2px solid #0052a3;\n                outline-offset: 2px;\n            }\n\n            /* Modal styles - add these to your CSS */\n            .workshop-modal-overlay {\n                display: none;\n                position: fixed;\n                z-index: 1000;\n                left: 0;\n                top: 0;\n                width: 100%;\n                height: 100%;\n                overflow: auto;\n                background-color: rgba(0, 0, 0, 0.7);\n                animation: fadeIn 0.3s;\n                align-items: center;\n                justify-content: center;\n                padding: 20px;\n            }\n\n            .workshop-modal-overlay.active {\n                display: flex;\n            }\n\n            @keyframes fadeIn {\n                from {\n                    opacity: 0;\n                }\n\n                to {\n                    opacity: 1;\n                }\n            }\n\n            .workshop-modal-content {\n                background-color: white;\n                border-radius: 8px;\n                max-width: 600px;\n                width: 100%;\n                max-height: 90vh;\n                overflow-y: auto;\n                box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n                animation: slideIn 0.3s;\n            }\n\n            @keyframes slideIn {\n                from {\n                    transform: translateY(-50px);\n                    opacity: 0;\n                }\n\n                to {\n                    transform: translateY(0);\n                    opacity: 1;\n                }\n            }\n\n            .workshop-modal-header {\n                padding: 20px;\n                border-bottom: 1px solid #e0e0e0;\n                display: flex;\n                justify-content: space-between;\n                align-items: flex-start;\n                background: #0266cc;\n                color: #fff;\n            }\n\n            .workshop-modal-title {\n                margin: 0;\n                font-size: 2.25rem;\n                font-weight: bold;\n                padding-right: 20px;\n            }\n\n            .workshop-modal-instructor {\n                margin: 5px 0 0 0;\n                font-style: italic;\n                color: #f8f8f8;\n            }\n\n            .workshop-modal-close {\n                background: none;\n                border: none;\n                font-size: 28px;\n                cursor: pointer;\n                color: #666;\n                padding: 0;\n                width: 32px;\n                height: 32px;\n                display: flex;\n                align-items: center;\n                justify-content: center;\n                border-radius: 4px;\n                flex-shrink: 0;\n            }\n\n            .workshop-modal-close:hover {\n                background-color: #f0f0f0;\n                color: #333;\n            }\n\n            .workshop-modal-close:focus {\n                outline: 2px solid #0066cc;\n                outline-offset: 2px;\n            }\n\n            .workshop-modal-body {\n                padding: 20px;\n                line-height: 1.6;\n            }\n\n            .workshop-modal-time {\n                margin-top: 0;\n                padding-top: 0;\n            }\n\n            .workshop-modal-footer {\n                padding: 15px 20px;\n                border-top: 1px solid #e0e0e0;\n                display: flex;\n                justify-content: flex-end;\n                gap: 10px;\n            }\n\n            .workshop-modal-footer a,\n            .workshop-modal-footer button {\n                padding: 10px 20px;\n                border-radius: 4px;\n                text-decoration: none;\n                font-size: 14px;\n                cursor: pointer;\n                border: none;\n            }\n\n            .workshop-modal-footer a {\n                background-color: #23961d;\n                color: white;\n            }\n\n            .workshop-modal-footer a:hover {\n                background-color: #0052a3;\n            }\n\n            .workshop-modal-footer button {\n                background-color: #e0e0e0;\n                color: #333;\n            }\n\n            .workshop-modal-footer button:hover {\n                background-color: #d0d0d0;\n            }\n\n            @media (max-width: 768px) {\n                tr.workshop-item td:last-child {\n                    text-align: left;\n                }\n\n                .workshop-actions {\n                    align-items: flex-start;\n                }\n\n                .workshop-modal-content {\n                    margin: 10px;\n                    max-height: 95vh;\n                }\n\n                .workshop-modal-header {\n                    padding: 15px;\n                }\n\n                .workshop-modal-title {\n                    font-size: 22px;\n                }\n\n                .workshop-modal-body {\n                    padding: 15px;\n                }\n            }\n            a.workshop-action-link[href*=\"waitlist=1\"] {\n                /* Your styles here */\n                background-color: #757575;\n            \n            }\n\n        </style>\n        <script>\n            jQuery(document).ready(function($) {\n                $(document).on('click', '.workshop-item button', function(e) {\n                    e.preventDefault();\n                    e.stopPropagation();\n\n                    const $triggerButton = $(this);\n                    const $row = $triggerButton.closest('.workshop-item');\n                    const $titleLink = $row.find('td:first-child a').first();\n                    const title = $titleLink.text().trim();\n                    const $instructorEm = $row.find('em').first();\n                    const instructor = $instructorEm.length ? $instructorEm.text().trim() : '';\n                    const $detailsDiv = $row.find('.event-details').first();\n                    const details = $detailsDiv.length ? $detailsDiv.html() : '';\n                    const $timeCell = $row.find('td').eq(1);\n                    const time = $timeCell.length ? $timeCell.text().trim() : '';\n                    const $actionLink = $row.find('.workshop-actions').first().find('a.workshop-action-link').first();\n                    const actionLabel = $actionLink.length ? $actionLink.text().trim() : '';\n                    const actionUrl = $actionLink.length ? ($actionLink.attr('href') || '') : '';\n\n                    let duration = '';\n\n                    if ( time ) {\n                        const timeMatch = time.match(/(\\d+):(\\d+)(am|pm).*?(\\d+):(\\d+)(am|pm)/i);\n\n                        if ( timeMatch ) {\n                            let [_, startHour, startMin, startPeriod, endHour, endMin, endPeriod] = timeMatch;\n                            startHour = parseInt(startHour, 10);\n                            endHour = parseInt(endHour, 10);\n\n                            if ( startPeriod.toLowerCase() === 'pm' && startHour !== 12 ) startHour += 12;\n                            if ( startPeriod.toLowerCase() === 'am' && startHour === 12 ) startHour = 0;\n                            if ( endPeriod.toLowerCase() === 'pm' && endHour !== 12 ) endHour += 12;\n                            if ( endPeriod.toLowerCase() === 'am' && endHour === 12 ) endHour = 0;\n\n                            const startMinutes = startHour * 60 + parseInt(startMin, 10);\n                            const endMinutes = endHour * 60 + parseInt(endMin, 10);\n                            const durationMinutes = endMinutes - startMinutes;\n                            const hours = Math.floor(durationMinutes / 60);\n                            const mins = durationMinutes % 60;\n\n                            if ( hours > 0 && mins > 0 ) {\n                                duration = `${hours}h ${mins}min`;\n                            } else if ( hours > 0 ) {\n                                duration = `${hours}h`;\n                            } else if ( mins > 0 ) {\n                                duration = `${mins}min`;\n                            }\n                        }\n                    }\n\n                    const $overlay = $('<div>', {\n                        'class': 'workshop-modal-overlay',\n                        'role': 'dialog',\n                        'aria-modal': 'true',\n                        'aria-labelledby': 'workshop-modal-title'\n                    });\n\n                    $overlay.html(`\n                    <div class=\"workshop-modal-content\">\n                        <div class=\"workshop-modal-header\">\n                            <div>\n                                <h2 id=\"workshop-modal-title\" class=\"workshop-modal-title\">${title}</h2>\n                                ${instructor ? `<p class=\"workshop-modal-instructor\">${instructor}</p>` : ''}\n                            </div>\n                            <button class=\"workshop-modal-close\" aria-label=\"Close modal\">&times;</button>\n                        </div>\n                        <div class=\"workshop-modal-body\">\n                            ${time ? `<p class=\"workshop-modal-time\"><b>Time:</b> ${time}${duration ? ` (${duration})` : ''}</p>` : ''}\n                            ${details}\n                        </div>\n                        <div class=\"workshop-modal-footer\">\n                            <button class=\"workshop-modal-close-btn\">Close</button>\n                            ${actionUrl && actionLabel ? `<a href=\"${actionUrl}\">${actionLabel}</a>` : ''}\n                        </div>\n                    </div>\n                `);\n\n                    $('body').append($overlay);\n\n                    const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;\n                    $('body').css({\n                        'overflow': 'hidden',\n                        'padding-right': scrollbarWidth + 'px'\n                    });\n\n                    setTimeout(() => $overlay.addClass('active'), 10);\n\n                    setTimeout(() => {\n                        $overlay.find('.workshop-modal-close').focus();\n                    }, 350);\n\n                    function closeModal() {\n                        $overlay.removeClass('active');\n                        setTimeout(() => {\n                            $overlay.remove();\n                            $('body').css({\n                                'overflow': '',\n                                'padding-right': ''\n                            });\n                            $triggerButton.focus();\n                        }, 300);\n                    }\n\n                    $overlay.find('.workshop-modal-close, .workshop-modal-close-btn').on('click', closeModal);\n\n                    $overlay.on('click', function(event) {\n                        if ( event.target === $overlay[0] ) {\n                            closeModal();\n                        }\n                    });\n\n                    function escapeHandler(event) {\n                        if ( event.key === 'Escape' ) {\n                            closeModal();\n                            $(document).off('keydown', escapeHandler);\n                        }\n                    }\n\n                    $(document).on('keydown', escapeHandler);\n                });\n            });\n        </script>\n    <div class=\"workshops-wrapper\">\n<div id=\"december-2026\" class=\"new dc_accordion open  multiple\"><h2 class=\"dc_accordion-title highlighta\"><a class=\"\" style=\"\" href=\"#december-2026\">décembre 2026</a></h2><div class=\"dc_accordion-body \" style=\"\"><table class=\"action workshops\">\n<tr class=\"workshop-item\">\n<td>\n<div class=\"workshop-title-row\"><a style=\"\" href=\"https://fr.dawsoncollege.qc.ca/oad/workshop-registration/?wid=4573\">Perspectives autochtones : série documentaire sur la crise d'Oka de 1990 et débat.</a></div>\n<p> - <em>Tiio Hemlock</em></p>\n<div class=\"event-details\" style=\"display:none; margin-top:20px;\">\n<p>Les rochers de Whiskey Trench : Réalisé par Alanis Obomsawin et sorti en 2000, ce film retrace le blocage du pont Honoré-Mercier en 1990, lors de la crise d'Oka, en s'attardant plus particulièrement sur l'incident au cours duquel un groupe de femmes, d'enfants et d'aînés mohawks de Kahnawake, en passe d'être évacués de leur communauté par crainte d'une occupation par les Forces canadiennes, ont été...</p>\n</div>\n</td>\n<td><b>1er décembre 2026,</b><br/> de 10 h à 12 h</td>\n<td>\n<div class=\"workshop-actions\"><a class=\"workshop-action-link\" href=\"https://fr.dawsoncollege.qc.ca/oad/workshop-registration/?wid=4573\">S'inscrire</a><button type=\"button\" class=\"workshop-details-button\">Détails</button></div>\n</td>\n</tr>\n</table></div></div>\n</div>\n<p>À noter :</p>\n<p>L'inscription est obligatoire.</p>\n<p>&nbsp;</p>\n<p>Vous avez des questions? Communiquez avec Tiio Hemlock : <a href=\"mailto:themlock@dawsoncollege.qc.ca\">themlock@dawsoncollege.qc.ca</a></p>\n<p>&nbsp;</p>\n<p><em> Si vous souhaitez participer à un atelier, mais que les horaires ne vous conviennent pas, veuillez nous envoyer un message <a href=\"https://forms.office.com/Pages/ResponsePage.aspx?id=emq2trv7uEKnxXEjQglO76y45kDpzAZDt8YX9EvMUzlUQzM2RTBIUkJRRUNIRVNOSEY1UjBVSVFOSy4u\">ici.</a></em></p>\n","protected":false},"excerpt":{"rendered":"<p>Programme des ateliers et inscriptions Attention : l'inscription est obligatoire pour tous les événements.   Des questions ? Contactez Tiio Hemlock à l'adresse themlock@dawsoncollege.qc.ca   Si vous souhaitez participer à un atelier mais que les horaires proposés ne vous conviennent pas, merci de nous envoyer un message ici.</p>\n","protected":false},"author":0,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-4056","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https://www.dawsoncollege.qc.ca/oad/wp-json/wp/v2/pages/4056","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https://www.dawsoncollege.qc.ca/oad/wp-json/wp/v2/pages"}],"about":[{"href":"https://www.dawsoncollege.qc.ca/oad/wp-json/wp/v2/types/page"}],"replies":[{"embeddable":true,"href":"https://www.dawsoncollege.qc.ca/oad/wp-json/wp/v2/comments?post=4056"}],"version-history":[{"count":11,"href":"https://www.dawsoncollege.qc.ca/oad/wp-json/wp/v2/pages/4056/revisions"}],"predecessor-version":[{"id":4575,"href":"https://www.dawsoncollege.qc.ca/oad/wp-json/wp/v2/pages/4056/revisions/4575"}],"wp:attachment":[{"href":"https://www.dawsoncollege.qc.ca/oad/wp-json/wp/v2/media?parent=4056"}],"curies":[{"name":"wp","href":"https://api.w.org/{rel}","templated":true}]}}