Dashboard SCIC<\/title>\r\n \r\n \r\n <link href=\"https:\/\/fonts.googleapis.com\/icon?family=Material+Icons\" rel=\"stylesheet\">\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Roboto:wght@300;400;500;700&display=swap\" rel=\"stylesheet\">\r\n <link href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.5.1\/css\/all.min.css\" rel=\"stylesheet\">\r\n\r\n <style>\r\n \/* Material Design 3 Variables *\/\r\n :root {\r\n \/* Couleurs primaires *\/\r\n --md-sys-color-primary: #006495;\r\n --md-sys-color-primary-container: #cde5ff;\r\n --md-sys-color-on-primary: #ffffff;\r\n --md-sys-color-on-primary-container: #001e31;\r\n \r\n \/* Couleurs secondaires *\/\r\n --md-sys-color-secondary: #50606f;\r\n --md-sys-color-secondary-container: #d3e5f5;\r\n --md-sys-color-on-secondary: #ffffff;\r\n --md-sys-color-on-secondary-container: #0c1d29;\r\n \r\n \/* Couleurs d'erreur *\/\r\n --md-sys-color-error: #ba1a1a;\r\n --md-sys-color-error-container: #ffdad6;\r\n --md-sys-color-on-error: #ffffff;\r\n --md-sys-color-on-error-container: #410002;\r\n \r\n \/* Couleurs de surface *\/\r\n --md-sys-color-surface: #fdfcff;\r\n --md-sys-color-surface-variant: #dee3eb;\r\n --md-sys-color-on-surface: #1a1c1e;\r\n --md-sys-color-on-surface-variant: #42474e;\r\n \r\n \/* Autres couleurs syst\u00e8me *\/\r\n --md-sys-color-background: #fdfcff;\r\n --md-sys-color-on-background: #1a1c1e;\r\n --md-sys-color-outline: #72777f;\r\n --md-sys-color-outline-variant: #c2c7cf;\r\n \r\n \/* \u00c9l\u00e9vations *\/\r\n --md-elevation-level1: 0px 1px 3px 1px rgba(0, 0, 0, 0.15),\r\n 0px 1px 2px 0px rgba(0, 0, 0, 0.30);\r\n --md-elevation-level2: 0px 2px 6px 2px rgba(0, 0, 0, 0.15),\r\n 0px 1px 2px 0px rgba(0, 0, 0, 0.30);\r\n --md-elevation-level3: 0px 4px 8px 3px rgba(0, 0, 0, 0.15),\r\n 0px 1px 3px 0px rgba(0, 0, 0, 0.30);\r\n \r\n \/* Typographie *\/\r\n --md-sys-typescale-headline-small: 24px;\r\n --md-sys-typescale-title-large: 22px;\r\n --md-sys-typescale-title-medium: 16px;\r\n --md-sys-typescale-body-large: 16px;\r\n --md-sys-typescale-body-medium: 14px;\r\n --md-sys-typescale-label-large: 14px;\r\n \r\n \/* Animation *\/\r\n --md-sys-motion-standard: cubic-bezier(0.2, 0, 0, 1);\r\n --md-sys-motion-duration-medium: 250ms;\r\n }\r\n\r\n \/* Dark Mode Variables *\/\r\n @media (prefers-color-scheme: dark) {\r\n :root {\r\n --md-sys-color-primary: #95ccff;\r\n --md-sys-color-primary-container: #004b71;\r\n --md-sys-color-on-primary: #003351;\r\n --md-sys-color-on-primary-container: #cde5ff;\r\n \r\n --md-sys-color-secondary: #b7c9d9;\r\n --md-sys-color-secondary-container: #374956;\r\n --md-sys-color-on-secondary: #21323f;\r\n --md-sys-color-on-secondary-container: #d3e5f5;\r\n \r\n --md-sys-color-surface: #1a1c1e;\r\n --md-sys-color-surface-variant: #42474e;\r\n --md-sys-color-on-surface: #e2e2e5;\r\n --md-sys-color-on-surface-variant: #c2c7cf;\r\n \r\n --md-sys-color-background: #1a1c1e;\r\n --md-sys-color-on-background: #e2e2e5;\r\n }\r\n }\r\n\r\n \/* Reset CSS *\/\r\n * {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n }\r\n\r\n body {\r\n font-family: 'Roboto', sans-serif;\r\n background-color: var(--md-sys-color-background);\r\n color: var(--md-sys-color-on-background);\r\n line-height: 1.5;\r\n -webkit-font-smoothing: antialiased;\r\n -moz-osx-font-smoothing: grayscale;\r\n }\r\n\r\n \/* Components *\/\r\n .md-surface {\r\n background-color: var(--md-sys-color-surface);\r\n border-radius: 16px;\r\n padding: 16px;\r\n box-shadow: var(--md-elevation-level1);\r\n transition: box-shadow var(--md-sys-motion-duration-medium) var(--md-sys-motion-standard);\r\n }\r\n\r\n .md-surface:hover {\r\n box-shadow: var(--md-elevation-level2);\r\n }\r\n\r\n \/* Layout *\/\r\n .container {\r\n max-width: 1200px;\r\n margin: 0 auto;\r\n padding: 24px 16px;\r\n }\r\n\r\n \/* Navigation Tabs *\/\r\n .md-tabs {\r\n display: flex;\r\n gap: 8px;\r\n margin-bottom: 24px;\r\n padding: 4px;\r\n background-color: var(--md-sys-color-surface-variant);\r\n border-radius: 20px;\r\n }\r\n\r\n .md-tab {\r\n position: relative;\r\n padding: 10px 24px;\r\n border: none;\r\n border-radius: 16px;\r\n background: transparent;\r\n color: var(--md-sys-color-on-surface-variant);\r\n font-family: 'Roboto', sans-serif;\r\n font-size: var(--md-sys-typescale-label-large);\r\n font-weight: 500;\r\n cursor: pointer;\r\n transition: all var(--md-sys-motion-duration-medium) var(--md-sys-motion-standard);\r\n }\r\n\r\n .md-tab.active {\r\n background-color: var(--md-sys-color-surface);\r\n color: var(--md-sys-color-primary);\r\n }\r\n\r\n .md-tab:hover:not(.active) {\r\n background-color: rgba(0, 0, 0, 0.05);\r\n }\r\n <\/style>\r\n<\/head>\r\n\r\n<body>\r\n <div class=\"container\">\r\n \r\n <nav class=\"md-tabs\" role=\"tablist\">\r\n <button class=\"md-tab active\" role=\"tab\" data-tab=\"dashboard\" aria-selected=\"true\" aria-controls=\"dashboard-panel\">\r\n <i class=\"material-icons\">dashboard<\/i>\r\n <span>Tableau de bord<\/span>\r\n <\/button>\r\n <button class=\"md-tab\" role=\"tab\" data-tab=\"actions\" aria-selected=\"false\" aria-controls=\"actions-panel\">\r\n <i class=\"material-icons\">bolt<\/i>\r\n <span>Actions rapides<\/span>\r\n <\/button>\r\n <button class=\"md-tab\" role=\"tab\" data-tab=\"planning\" aria-selected=\"false\" aria-controls=\"planning-panel\">\r\n <i class=\"material-icons\">calendar_today<\/i>\r\n <span>Planning<\/span>\r\n <\/button>\r\n <button class=\"md-tab\" role=\"tab\" data-tab=\"meeting\" aria-selected=\"false\" aria-controls=\"meeting-panel\">\r\n <i class=\"material-icons\">description<\/i>\r\n <span>Compte rendu<\/span>\r\n <\/button>\r\n <\/nav>\r\n\r\n \r\n <div class=\"tab-panels\">\r\n <div id=\"dashboard-panel\" class=\"tab-panel active\" role=\"tabpanel\" aria-labelledby=\"dashboard-tab\">\r\n \r\n <\/div>\r\n <div id=\"actions-panel\" class=\"tab-panel\" role=\"tabpanel\" aria-labelledby=\"actions-tab\" hidden>\r\n \r\n <\/div>\r\n <div id=\"planning-panel\" class=\"tab-panel\" role=\"tabpanel\" aria-labelledby=\"planning-tab\" hidden>\r\n \r\n <\/div>\r\n <div id=\"meeting-panel\" class=\"tab-panel\" role=\"tabpanel\" aria-labelledby=\"meeting-tab\" hidden>\r\n \r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <style>\r\n \/* Tab Styling *\/\r\n .md-tabs {\r\n position: sticky;\r\n top: 16px;\r\n z-index: 100;\r\n background-color: var(--md-sys-color-surface);\r\n padding: 8px;\r\n border-radius: 28px;\r\n box-shadow: var(--md-elevation-level2);\r\n display: flex;\r\n gap: 8px;\r\n margin-bottom: 32px;\r\n overflow-x: auto;\r\n scrollbar-width: none; \/* Firefox *\/\r\n -ms-overflow-style: none; \/* IE and Edge *\/\r\n }\r\n\r\n .md-tabs::-webkit-scrollbar {\r\n display: none; \/* Chrome, Safari, Opera *\/\r\n }\r\n\r\n .md-tab {\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n padding: 12px 24px;\r\n border: none;\r\n border-radius: 20px;\r\n background: transparent;\r\n color: var(--md-sys-color-on-surface-variant);\r\n font-family: 'Roboto', sans-serif;\r\n font-size: var(--md-sys-typescale-label-large);\r\n font-weight: 500;\r\n cursor: pointer;\r\n transition: all 0.2s var(--md-sys-motion-standard);\r\n white-space: nowrap;\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n\r\n .md-tab::after {\r\n content: '';\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n bottom: 0;\r\n background: currentColor;\r\n opacity: 0;\r\n transition: opacity 0.2s var(--md-sys-motion-standard);\r\n }\r\n\r\n .md-tab:hover::after {\r\n opacity: 0.08;\r\n }\r\n\r\n .md-tab:active::after {\r\n opacity: 0.12;\r\n }\r\n\r\n .md-tab.active {\r\n background-color: var(--md-sys-color-primary-container);\r\n color: var(--md-sys-color-on-primary-container);\r\n }\r\n\r\n .md-tab .material-icons {\r\n font-size: 20px;\r\n }\r\n\r\n \/* Tab Panel Styling *\/\r\n .tab-panels {\r\n position: relative;\r\n min-height: 400px;\r\n }\r\n\r\n .tab-panel {\r\n opacity: 0;\r\n transform: translateY(10px);\r\n transition: opacity 0.3s var(--md-sys-motion-standard),\r\n transform 0.3s var(--md-sys-motion-standard);\r\n position: absolute;\r\n width: 100%;\r\n top: 0;\r\n left: 0;\r\n }\r\n\r\n .tab-panel.active {\r\n opacity: 1;\r\n transform: translateY(0);\r\n position: relative;\r\n }\r\n\r\n \/* Responsive Design *\/\r\n @media (max-width: 768px) {\r\n .md-tabs {\r\n border-radius: 20px;\r\n padding: 4px;\r\n }\r\n\r\n .md-tab {\r\n padding: 8px 16px;\r\n font-size: 14px;\r\n }\r\n\r\n .md-tab .material-icons {\r\n font-size: 18px;\r\n }\r\n }\r\n\r\n @media (max-width: 480px) {\r\n .md-tab span {\r\n display: none;\r\n }\r\n\r\n .md-tab {\r\n padding: 8px;\r\n }\r\n\r\n .md-tab .material-icons {\r\n margin: 0;\r\n }\r\n }\r\n <\/style>\r\n\r\n <script>\r\n class TabSystem {\r\n constructor() {\r\n this.tabs = document.querySelectorAll('.md-tab');\r\n this.panels = document.querySelectorAll('.tab-panel');\r\n this.init();\r\n }\r\n\r\n init() {\r\n this.tabs.forEach(tab => {\r\n tab.addEventListener('click', (e) => this.handleTabClick(e));\r\n });\r\n\r\n \/\/ Handle keyboard navigation\r\n this.tabs.forEach(tab => {\r\n tab.addEventListener('keydown', (e) => this.handleKeyDown(e));\r\n });\r\n\r\n \/\/ Set initial state\r\n this.showPanel(this.tabs[0]);\r\n }\r\n\r\n handleTabClick(e) {\r\n const tab = e.currentTarget;\r\n this.showPanel(tab);\r\n }\r\n\r\n handleKeyDown(e) {\r\n const tab = e.target;\r\n const tabArray = Array.from(this.tabs);\r\n const index = tabArray.indexOf(tab);\r\n\r\n let newTab;\r\n switch(e.key) {\r\n case 'ArrowLeft':\r\n newTab = tabArray[index - 1] || tabArray[tabArray.length - 1];\r\n break;\r\n case 'ArrowRight':\r\n newTab = tabArray[index + 1] || tabArray[0];\r\n break;\r\n default:\r\n return;\r\n }\r\n\r\n newTab.focus();\r\n this.showPanel(newTab);\r\n }\r\n\r\n showPanel(tab) {\r\n \/\/ Update tabs\r\n this.tabs.forEach(t => {\r\n t.classList.remove('active');\r\n t.setAttribute('aria-selected', 'false');\r\n });\r\n tab.classList.add('active');\r\n tab.setAttribute('aria-selected', 'true');\r\n\r\n \/\/ Update panels\r\n const targetId = `${tab.dataset.tab}-panel`;\r\n this.panels.forEach(panel => {\r\n if (panel.id === targetId) {\r\n panel.classList.add('active');\r\n panel.hidden = false;\r\n } else {\r\n panel.classList.remove('active');\r\n panel.hidden = true;\r\n }\r\n });\r\n\r\n \/\/ Save state\r\n localStorage.setItem('activeTab', tab.dataset.tab);\r\n }\r\n }\r\n\r\n \/\/ Initialize when DOM is ready\r\n document.addEventListener('DOMContentLoaded', () => {\r\n const tabSystem = new TabSystem();\r\n\r\n \/\/ Restore last active tab if available\r\n const lastTab = localStorage.getItem('activeTab');\r\n if (lastTab) {\r\n const tab = document.querySelector(`[data-tab=\"${lastTab}\"]`);\r\n if (tab) tabSystem.showPanel(tab);\r\n }\r\n });\r\n <\/script>\r\n<\/body>\r\n\r\n\r\n<div id=\"dashboard-panel\" class=\"tab-panel active\" role=\"tabpanel\" aria-labelledby=\"dashboard-tab\">\r\n \r\n <div class=\"stats-grid\">\r\n \r\n <div class=\"stats-card\">\r\n <div class=\"stats-icon\" style=\"background: var(--md-sys-color-primary-container)\">\r\n <i class=\"material-icons\">payments<\/i>\r\n <\/div>\r\n <div class=\"stats-content\">\r\n <h3>Chiffre d'affaires<\/h3>\r\n <p class=\"stats-value\">128 742 \u20ac<\/p>\r\n <p class=\"stats-trend positive\">\r\n <i class=\"material-icons\">trending_up<\/i>\r\n +12.3%\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"stats-card\">\r\n <div class=\"stats-icon\" style=\"background: var(--md-sys-color-secondary-container)\">\r\n <i class=\"material-icons\">group<\/i>\r\n <\/div>\r\n <div class=\"stats-content\">\r\n <h3>Soci\u00e9taires<\/h3>\r\n <p class=\"stats-value\">358<\/p>\r\n <p class=\"stats-trend positive\">\r\n <i class=\"material-icons\">trending_up<\/i>\r\n +24 ce mois\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"stats-card\">\r\n <div class=\"stats-icon\" style=\"background: var(--md-sys-color-tertiary-container)\">\r\n <i class=\"material-icons\">inventory_2<\/i>\r\n <\/div>\r\n <div class=\"stats-content\">\r\n <h3>Valeur du stock<\/h3>\r\n <p class=\"stats-value\">45 230 \u20ac<\/p>\r\n <p class=\"stats-trend neutral\">\r\n <i class=\"material-icons\">trending_flat<\/i>\r\n Stable\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"activity-section\">\r\n <h2 class=\"section-title\">Activit\u00e9 r\u00e9cente<\/h2>\r\n <div class=\"activity-timeline\">\r\n <div class=\"activity-item\">\r\n <div class=\"activity-icon\">\r\n <i class=\"material-icons\">person_add<\/i>\r\n <\/div>\r\n <div class=\"activity-content\">\r\n <h4>Nouveau soci\u00e9taire<\/h4>\r\n <p>B\u00e9n\u00e9dicte Leblanc-Gravel a rejoint la SCIC<\/p>\r\n <time>Il y a 2 heures<\/time>\r\n <\/div>\r\n <\/div>\r\n <div class=\"activity-item\">\r\n <div class=\"activity-icon\">\r\n <i class=\"material-icons\">receipt_long<\/i>\r\n <\/div>\r\n <div class=\"activity-content\">\r\n <h4>Commande fournisseur<\/h4>\r\n <p>Commande BioCoop valid\u00e9e - 3420\u20ac<\/p>\r\n <time>Il y a 4 heures<\/time>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"tasks-section\">\r\n <h2 class=\"section-title\">T\u00e2ches \u00e0 suivre<\/h2>\r\n <div class=\"tasks-grid\">\r\n <div class=\"task-card\">\r\n <div class=\"task-priority high\"><\/div>\r\n <div class=\"task-content\">\r\n <h4>Devis point d'eau + WC<\/h4>\r\n <p>\u00c0 transmettre au PETR<\/p>\r\n <div class=\"task-meta\">\r\n <span class=\"task-due\">\u00c9ch\u00e9ance: 2 jours<\/span>\r\n <span class=\"task-assignee\">Marie C.<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"task-card\">\r\n <div class=\"task-priority medium\"><\/div>\r\n <div class=\"task-content\">\r\n <h4>Formation paiements fournisseurs<\/h4>\r\n <p>Former Marie Cambon<\/p>\r\n <div class=\"task-meta\">\r\n <span class=\"task-due\">\u00c9ch\u00e9ance: 5 jours<\/span>\r\n <span class=\"task-assignee\">Damery<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/div>\r\n\r\n<style>\r\n \/* Stats Grid *\/\r\n .stats-grid {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\r\n gap: 24px;\r\n margin-bottom: 32px;\r\n }\r\n\r\n .stats-card {\r\n background: var(--md-sys-color-surface);\r\n border-radius: 16px;\r\n padding: 24px;\r\n display: flex;\r\n align-items: flex-start;\r\n gap: 16px;\r\n box-shadow: var(--md-elevation-level1);\r\n transition: all 0.2s var(--md-sys-motion-standard);\r\n }\r\n\r\n .stats-card:hover {\r\n box-shadow: var(--md-elevation-level2);\r\n transform: translateY(-2px);\r\n }\r\n\r\n .stats-icon {\r\n width: 48px;\r\n height: 48px;\r\n border-radius: 12px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n }\r\n\r\n .stats-icon .material-icons {\r\n font-size: 24px;\r\n color: var(--md-sys-color-on-primary-container);\r\n }\r\n\r\n .stats-content h3 {\r\n font-size: var(--md-sys-typescale-title-medium);\r\n color: var(--md-sys-color-on-surface-variant);\r\n margin-bottom: 8px;\r\n }\r\n\r\n .stats-value {\r\n font-size: var(--md-sys-typescale-headline-small);\r\n font-weight: 500;\r\n color: var(--md-sys-color-on-surface);\r\n margin-bottom: 4px;\r\n }\r\n\r\n .stats-trend {\r\n display: flex;\r\n align-items: center;\r\n gap: 4px;\r\n font-size: var(--md-sys-typescale-body-medium);\r\n }\r\n\r\n .stats-trend.positive {\r\n color: var(--md-sys-color-primary);\r\n }\r\n\r\n .stats-trend.negative {\r\n color: var(--md-sys-color-error);\r\n }\r\n\r\n .stats-trend.neutral {\r\n color: var(--md-sys-color-outline);\r\n }\r\n\r\n \/* Activity Timeline *\/\r\n .activity-section {\r\n background: var(--md-sys-color-surface);\r\n border-radius: 16px;\r\n padding: 24px;\r\n margin-bottom: 32px;\r\n box-shadow: var(--md-elevation-level1);\r\n }\r\n\r\n .section-title {\r\n font-size: var(--md-sys-typescale-title-large);\r\n color: var(--md-sys-color-on-surface);\r\n margin-bottom: 24px;\r\n }\r\n\r\n .activity-timeline {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 16px;\r\n }\r\n\r\n .activity-item {\r\n display: flex;\r\n gap: 16px;\r\n padding: 16px;\r\n border-radius: 8px;\r\n background: var(--md-sys-color-surface-variant);\r\n }\r\n\r\n .activity-icon {\r\n width: 40px;\r\n height: 40px;\r\n border-radius: 20px;\r\n background: var(--md-sys-color-primary-container);\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n }\r\n\r\n .activity-icon .material-icons {\r\n font-size: 20px;\r\n color: var(--md-sys-color-on-primary-container);\r\n }\r\n\r\n .activity-content h4 {\r\n font-size: var(--md-sys-typescale-title-medium);\r\n color: var(--md-sys-color-on-surface);\r\n margin-bottom: 4px;\r\n }\r\n\r\n .activity-content p {\r\n font-size: var(--md-sys-typescale-body-medium);\r\n color: var(--md-sys-color-on-surface-variant);\r\n margin-bottom: 4px;\r\n }\r\n\r\n .activity-content time {\r\n font-size: var(--md-sys-typescale-body-small);\r\n color: var(--md-sys-color-outline);\r\n }\r\n\r\n \/* Tasks Section *\/\r\n .tasks-section {\r\n background: var(--md-sys-color-surface);\r\n border-radius: 16px;\r\n padding: 24px;\r\n box-shadow: var(--md-elevation-level1);\r\n }\r\n\r\n .tasks-grid {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));\r\n gap: 16px;\r\n }\r\n\r\n .task-card {\r\n display: flex;\r\n background: var(--md-sys-color-surface-variant);\r\n border-radius: 8px;\r\n overflow: hidden;\r\n }\r\n\r\n .task-priority {\r\n width: 4px;\r\n }\r\n\r\n .task-priority.high {\r\n background: var(--md-sys-color-error);\r\n }\r\n\r\n .task-priority.medium {\r\n background: var(--md-sys-color-secondary);\r\n }\r\n\r\n .task-content {\r\n padding: 16px;\r\n flex: 1;\r\n }\r\n\r\n .task-content h4 {\r\n font-size: var(--md-sys-typescale-title-medium);\r\n color: var(--md-sys-color-on-surface);\r\n margin-bottom: 4px;\r\n }\r\n\r\n .task-content p {\r\n font-size: var(--md-sys-typescale-body-medium);\r\n color: var(--md-sys-color-on-surface-variant);\r\n margin-bottom: 8px;\r\n }\r\n\r\n .task-meta {\r\n display: flex;\r\n justify-content: space-between;\r\n font-size: var(--md-sys-typescale-label-large);\r\n color: var(--md-sys-color-outline);\r\n }\r\n\r\n @media (max-width: 768px) {\r\n .stats-grid {\r\n grid-template-columns: 1fr;\r\n }\r\n\r\n .tasks-grid {\r\n grid-template-columns: 1fr;\r\n }\r\n\r\n .activity-section,\r\n .tasks-section {\r\n padding: 16px;\r\n }\r\n }\r\n<\/style>\r\n\r\n\r\n<div class=\"charts-section\">\r\n <div class=\"charts-grid\">\r\n \r\n <div class=\"chart-card\">\r\n <div class=\"chart-header\">\r\n <h3>\u00c9volution du CA<\/h3>\r\n <div class=\"chart-actions\">\r\n <button class=\"chart-period-btn active\" data-period=\"month\">Mois<\/button>\r\n <button class=\"chart-period-btn\" data-period=\"year\">Ann\u00e9e<\/button>\r\n <\/div>\r\n <\/div>\r\n <div class=\"chart-container\">\r\n <canvas id=\"revenueChart\"><\/canvas>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"chart-card\">\r\n <div class=\"chart-header\">\r\n <h3>R\u00e9partition des ventes<\/h3>\r\n <div class=\"chart-legend\" id=\"salesLegend\"><\/div>\r\n <\/div>\r\n <div class=\"chart-container\">\r\n <canvas id=\"salesChart\"><\/canvas>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/div>\r\n\r\n<style>\r\n .charts-section {\r\n margin-bottom: 32px;\r\n }\r\n\r\n .charts-grid {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));\r\n gap: 24px;\r\n }\r\n\r\n .chart-card {\r\n background: var(--md-sys-color-surface);\r\n border-radius: 16px;\r\n padding: 24px;\r\n box-shadow: var(--md-elevation-level1);\r\n transition: box-shadow 0.2s var(--md-sys-motion-standard);\r\n }\r\n\r\n .chart-card:hover {\r\n box-shadow: var(--md-elevation-level2);\r\n }\r\n\r\n .chart-header {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n margin-bottom: 16px;\r\n }\r\n\r\n .chart-header h3 {\r\n font-size: var(--md-sys-typescale-title-medium);\r\n color: var(--md-sys-color-on-surface);\r\n }\r\n\r\n .chart-actions {\r\n display: flex;\r\n gap: 8px;\r\n }\r\n\r\n .chart-period-btn {\r\n padding: 6px 12px;\r\n border: none;\r\n border-radius: 16px;\r\n background: var(--md-sys-color-surface-variant);\r\n color: var(--md-sys-color-on-surface-variant);\r\n font-size: var(--md-sys-typescale-label-large);\r\n cursor: pointer;\r\n transition: all 0.2s var(--md-sys-motion-standard);\r\n }\r\n\r\n .chart-period-btn.active {\r\n background: var(--md-sys-color-primary-container);\r\n color: var(--md-sys-color-on-primary-container);\r\n }\r\n\r\n .chart-container {\r\n position: relative;\r\n height: 300px;\r\n }\r\n\r\n .chart-legend {\r\n display: flex;\r\n gap: 16px;\r\n flex-wrap: wrap;\r\n }\r\n\r\n @media (max-width: 768px) {\r\n .charts-grid {\r\n grid-template-columns: 1fr;\r\n }\r\n }\r\n<\/style>\r\n\r\n\r\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/chart.js\"><\/script>\r\n\r\n<script>\r\ndocument.addEventListener('DOMContentLoaded', function() {\r\n \/\/ Configuration commune pour le mode sombre\r\n const isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;\r\n const textColor = isDarkMode ? '#E2E2E5' : '#1A1C1E';\r\n \r\n Chart.defaults.color = textColor;\r\n Chart.defaults.borderColor = isDarkMode ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.1)';\r\n\r\n \/\/ Graphique d'\u00e9volution du CA\r\n const revenueCtx = document.getElementById('revenueChart').getContext('2d');\r\n const revenueChart = new Chart(revenueCtx, {\r\n type: 'line',\r\n data: {\r\n labels: ['Jan', 'F\u00e9v', 'Mar', 'Avr', 'Mai', 'Jun'],\r\n datasets: [{\r\n label: 'CA 2025',\r\n data: [12000, 19000, 15000, 22000, 24000, 28000],\r\n borderColor: '#006495',\r\n backgroundColor: 'rgba(0, 100, 149, 0.1)',\r\n tension: 0.4,\r\n fill: true\r\n }, {\r\n label: 'CA 2024',\r\n data: [10000, 15000, 13000, 17000, 19000, 23000],\r\n borderColor: '#50606F',\r\n backgroundColor: 'rgba(80, 96, 111, 0.1)',\r\n tension: 0.4,\r\n fill: true\r\n }]\r\n },\r\n options: {\r\n responsive: true,\r\n maintainAspectRatio: false,\r\n plugins: {\r\n legend: {\r\n position: 'top',\r\n },\r\n },\r\n scales: {\r\n y: {\r\n beginAtZero: true,\r\n ticks: {\r\n callback: value => value + ' \u20ac'\r\n }\r\n }\r\n },\r\n interaction: {\r\n intersect: false,\r\n mode: 'index'\r\n }\r\n }\r\n });\r\n\r\n \/\/ Graphique de r\u00e9partition des ventes\r\n const salesCtx = document.getElementById('salesChart').getContext('2d');\r\n const salesChart = new Chart(salesCtx, {\r\n type: 'doughnut',\r\n data: {\r\n labels: ['Alimentaire', 'Hygi\u00e8ne', 'Maison', 'Autres'],\r\n datasets: [{\r\n data: [45, 25, 20, 10],\r\n backgroundColor: [\r\n '#006495',\r\n '#50606F',\r\n '#03DAC6',\r\n '#6200EE'\r\n ],\r\n borderWidth: 0\r\n }]\r\n },\r\n options: {\r\n responsive: true,\r\n maintainAspectRatio: false,\r\n plugins: {\r\n legend: {\r\n display: false\r\n }\r\n },\r\n cutout: '70%'\r\n }\r\n });\r\n\r\n \/\/ Cr\u00e9ation de la l\u00e9gende personnalis\u00e9e\r\n const createCustomLegend = () => {\r\n const legend = document.getElementById('salesLegend');\r\n salesChart.data.labels.forEach((label, index) => {\r\n const value = salesChart.data.datasets[0].data[index];\r\n const color = salesChart.data.datasets[0].backgroundColor[index];\r\n \r\n const item = document.createElement('div');\r\n item.style.display = 'flex';\r\n item.style.alignItems = 'center';\r\n item.style.gap = '8px';\r\n item.innerHTML = `\r\n <span style=\"width: 12px; height: 12px; border-radius: 6px; background: ${color}\"><\/span>\r\n <span>${label} (${value}%)<\/span>\r\n `;\r\n legend.appendChild(item);\r\n });\r\n };\r\n\r\n createCustomLegend();\r\n\r\n \/\/ Gestion des boutons de p\u00e9riode\r\n const periodButtons = document.querySelectorAll('.chart-period-btn');\r\n periodButtons.forEach(button => {\r\n button.addEventListener('click', () => {\r\n periodButtons.forEach(btn => btn.classList.remove('active'));\r\n button.classList.add('active');\r\n \r\n \/\/ Simuler un changement de donn\u00e9es\r\n if (button.dataset.period === 'year') {\r\n revenueChart.data.labels = ['2020', '2021', '2022', '2023', '2024', '2025'];\r\n revenueChart.data.datasets[0].data = [150000, 180000, 210000, 250000, 280000, 320000];\r\n revenueChart.data.datasets[1].data = [130000, 160000, 190000, 220000, 260000, 300000];\r\n } else {\r\n revenueChart.data.labels = ['Jan', 'F\u00e9v', 'Mar', 'Avr', 'Mai', 'Jun'];\r\n revenueChart.data.datasets[0].data = [12000, 19000, 15000, 22000, 24000, 28000];\r\n revenueChart.data.datasets[1].data = [10000, 15000, 13000, 17000, 19000, 23000];\r\n }\r\n revenueChart.update();\r\n });\r\n });\r\n});\r\n<\/script>\r\n\r\n<div id=\"dashboard-panel\" class=\"tab-panel active\" role=\"tabpanel\" aria-labelledby=\"dashboard-tab\">\r\n \r\n <div class=\"stats-grid\">\r\n <div class=\"stats-card\">\r\n <div class=\"stats-icon\" style=\"background: var(--md-sys-color-primary-container)\">\r\n <i class=\"material-icons\">payments<\/i>\r\n <\/div>\r\n <div class=\"stats-content\">\r\n <h3>Chiffre d'affaires<\/h3>\r\n <p class=\"stats-value\">128 742 \u20ac<\/p>\r\n <p class=\"stats-trend positive\">\r\n <i class=\"material-icons\">trending_up<\/i>\r\n +12.3%\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"stats-card\">\r\n <div class=\"stats-icon\" style=\"background: var(--md-sys-color-secondary-container)\">\r\n <i class=\"material-icons\">group<\/i>\r\n <\/div>\r\n <div class=\"stats-content\">\r\n <h3>Soci\u00e9taires<\/h3>\r\n <p class=\"stats-value\">358<\/p>\r\n <p class=\"stats-trend positive\">\r\n <i class=\"material-icons\">trending_up<\/i>\r\n +24 ce mois\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"stats-card\">\r\n <div class=\"stats-icon\" style=\"background: var(--md-sys-color-tertiary-container)\">\r\n <i class=\"material-icons\">inventory_2<\/i>\r\n <\/div>\r\n <div class=\"stats-content\">\r\n <h3>Valeur du stock<\/h3>\r\n <p class=\"stats-value\">45 230 \u20ac<\/p>\r\n <p class=\"stats-trend neutral\">\r\n <i class=\"material-icons\">trending_flat<\/i>\r\n Stable\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"charts-section\">\r\n \r\n <\/div>\r\n\r\n \r\n <div class=\"activity-section\">\r\n <h2 class=\"section-title\">Activit\u00e9 r\u00e9cente<\/h2>\r\n <div class=\"activity-timeline\">\r\n <div class=\"activity-item\">\r\n <div class=\"activity-icon\">\r\n <i class=\"material-icons\">person_add<\/i>\r\n <\/div>\r\n <div class=\"activity-content\">\r\n <h4>Nouveau soci\u00e9taire<\/h4>\r\n <p>Marie Dupont a rejoint la SCIC<\/p>\r\n <time>Il y a 2 heures<\/time>\r\n <\/div>\r\n <\/div>\r\n <div class=\"activity-item\">\r\n <div class=\"activity-icon\">\r\n <i class=\"material-icons\">receipt_long<\/i>\r\n <\/div>\r\n <div class=\"activity-content\">\r\n <h4>Commande fournisseur<\/h4>\r\n <p>Commande BioCoop valid\u00e9e - 3420\u20ac<\/p>\r\n <time>Il y a 4 heures<\/time>\r\n <\/div>\r\n <\/div>\r\n <div class=\"activity-item\">\r\n <div class=\"activity-icon\">\r\n <i class=\"material-icons\">store<\/i>\r\n <\/div>\r\n <div class=\"activity-content\">\r\n <h4>Nouveau produit<\/h4>\r\n <p>Ajout gamme produits locaux - Miel<\/p>\r\n <time>Il y a 6 heures<\/time>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/div>\r\n\r\n\r\n<div id=\"actions-panel\" class=\"tab-panel\" role=\"tabpanel\" aria-labelledby=\"actions-tab\" hidden>\r\n <div class=\"quick-actions-grid\">\r\n <div class=\"action-card\">\r\n <div class=\"action-icon\">\r\n <i class=\"material-icons\">add_shopping_cart<\/i>\r\n <\/div>\r\n <h3>Nouvelle commande<\/h3>\r\n <p>Cr\u00e9er une commande fournisseur<\/p>\r\n <button class=\"md-button primary\">Commencer<\/button>\r\n <\/div>\r\n <div class=\"action-card\">\r\n <div class=\"action-icon\">\r\n <i class=\"material-icons\">person_add<\/i>\r\n <\/div>\r\n <h3>Nouveau soci\u00e9taire<\/h3>\r\n <p>Ajouter un nouveau membre<\/p>\r\n <button class=\"md-button primary\">Ajouter<\/button>\r\n <\/div>\r\n <div class=\"action-card\">\r\n <div class=\"action-icon\">\r\n <i class=\"material-icons\">inventory<\/i>\r\n <\/div>\r\n <h3>Inventaire<\/h3>\r\n <p>Lancer un nouvel inventaire<\/p>\r\n <button class=\"md-button primary\">D\u00e9marrer<\/button>\r\n <\/div>\r\n <\/div>\r\n<\/div>\r\n\r\n\r\n<div id=\"planning-panel\" class=\"tab-panel\" role=\"tabpanel\" aria-labelledby=\"planning-tab\" hidden>\r\n <div class=\"planning-calendar\">\r\n <div class=\"calendar-header\">\r\n <h2>Planning des \u00e9v\u00e9nements<\/h2>\r\n <div class=\"calendar-nav\">\r\n <button class=\"md-button icon-button\">\r\n <i class=\"material-icons\">chevron_left<\/i>\r\n <\/button>\r\n <h3>Mai 2024<\/h3>\r\n <button class=\"md-button icon-button\">\r\n <i class=\"material-icons\">chevron_right<\/i>\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n <div class=\"calendar-grid\">\r\n \r\n <\/div>\r\n <div class=\"upcoming-events\">\r\n <h3>\u00c9v\u00e9nements \u00e0 venir<\/h3>\r\n <div class=\"event-list\">\r\n <div class=\"event-item\">\r\n <div class=\"event-date\">\r\n <span class=\"day\">15<\/span>\r\n <span class=\"month\">Mai<\/span>\r\n <\/div>\r\n <div class=\"event-details\">\r\n <h4>Assembl\u00e9e G\u00e9n\u00e9rale<\/h4>\r\n <p>14:00 - Salle des f\u00eates<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"event-item\">\r\n <div class=\"event-date\">\r\n <span class=\"day\">22<\/span>\r\n <span class=\"month\">Mai<\/span>\r\n <\/div>\r\n <div class=\"event-details\">\r\n <h4>Formation nouveaux membres<\/h4>\r\n <p>09:30 - Local SCIC<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/div>\r\n\r\n\r\n<div id=\"meeting-panel\" class=\"tab-panel\" role=\"tabpanel\" aria-labelledby=\"meeting-tab\" hidden>\r\n <div class=\"meeting-section\">\r\n <div class=\"meeting-header\">\r\n <h2>Comptes rendus de r\u00e9union<\/h2>\r\n <button class=\"md-button primary\">\r\n <i class=\"material-icons\">add<\/i>\r\n Nouveau compte rendu\r\n <\/button>\r\n <\/div>\r\n <div class=\"meeting-list\">\r\n <div class=\"meeting-item\">\r\n <div class=\"meeting-meta\">\r\n <span class=\"meeting-date\">12 Mai 2024<\/span>\r\n <span class=\"meeting-type\">AG Extraordinaire<\/span>\r\n <\/div>\r\n <h3>Assembl\u00e9e G\u00e9n\u00e9rale Extraordinaire - Evolution statuts<\/h3>\r\n <p>Discussion sur les modifications statutaires et vote des nouveaux articles.<\/p>\r\n <div class=\"meeting-actions\">\r\n <button class=\"md-button text\">Voir le d\u00e9tail<\/button>\r\n <button class=\"md-button text\">\r\n <i class=\"material-icons\">download<\/i>\r\n PDF\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n <div class=\"meeting-item\">\r\n <div class=\"meeting-meta\">\r\n <span class=\"meeting-date\">5 Mai 2024<\/span>\r\n <span class=\"meeting-type\">Conseil Admin<\/span>\r\n <\/div>\r\n <h3>Conseil d'Administration - Budget 2024<\/h3>\r\n <p>Validation du budget pr\u00e9visionnel et des investissements.<\/p>\r\n <div class=\"meeting-actions\">\r\n <button class=\"md-button text\">Voir le d\u00e9tail<\/button>\r\n <button class=\"md-button text\">\r\n <i class=\"material-icons\">download<\/i>\r\n PDF\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/div>\r\n\r\n<style>\r\n\/* Additional styles for new panels *\/\r\n.quick-actions-grid {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\r\n gap: 24px;\r\n padding: 24px;\r\n}\r\n\r\n.action-card {\r\n background: var(--md-sys-color-surface);\r\n border-radius: 16px;\r\n padding: 24px;\r\n text-align: center;\r\n box-shadow: var(--md-elevation-level1);\r\n transition: all 0.2s var(--md-sys-motion-standard);\r\n}\r\n\r\n.action-card:hover {\r\n box-shadow: var(--md-elevation-level2);\r\n transform: translateY(-2px);\r\n}\r\n\r\n.action-icon {\r\n width: 56px;\r\n height: 56px;\r\n border-radius: 28px;\r\n background: var(--md-sys-color-primary-container);\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n margin: 0 auto 16px;\r\n}\r\n\r\n.action-icon .material-icons {\r\n font-size: 32px;\r\n color: var(--md-sys-color-on-primary-container);\r\n}\r\n\r\n.md-button {\r\n border: none;\r\n border-radius: 20px;\r\n padding: 8px 24px;\r\n font-family: 'Roboto', sans-serif;\r\n font-size: var(--md-sys-typescale-label-large);\r\n font-weight: 500;\r\n cursor: pointer;\r\n transition: all 0.2s var(--md-sys-motion-standard);\r\n}\r\n\r\n.md-button.primary {\r\n background: var(--md-sys-color-primary);\r\n color: var(--md-sys-color-on-primary);\r\n}\r\n\r\n.md-button.text {\r\n background: transparent;\r\n color: var(--md-sys-color-primary);\r\n}\r\n\r\n\/* Planning styles *\/\r\n.planning-calendar {\r\n background: var(--md-sys-color-surface);\r\n border-radius: 16px;\r\n padding: 24px;\r\n box-shadow: var(--md-elevation-level1);\r\n}\r\n\r\n.calendar-header {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n margin-bottom: 24px;\r\n}\r\n\r\n.calendar-nav {\r\n display: flex;\r\n align-items: center;\r\n gap: 16px;\r\n}\r\n\r\n.event-list {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 16px;\r\n}\r\n\r\n.event-item {\r\n display: flex;\r\n gap: 16px;\r\n padding: 16px;\r\n background: var(--md-sys-color-surface-variant);\r\n border-radius: 8px;\r\n}\r\n\r\n\/* Meeting styles *\/\r\n.meeting-section {\r\n padding: 24px;\r\n}\r\n\r\n.meeting-header {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n margin-bottom: 24px;\r\n}\r\n\r\n.meeting-list {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 16px;\r\n}\r\n\r\n.meeting-item {\r\n background: var(--md-sys-color-surface);\r\n border-radius: 16px;\r\n padding: 24px;\r\n box-shadow: var(--md-elevation-level1);\r\n}\r\n\r\n.meeting-meta {\r\n display: flex;\r\n gap: 16px;\r\n margin-bottom: 8px;\r\n}\r\n\r\n.meeting-type {\r\n background: var(--md-sys-color-primary-container);\r\n color: var(--md-sys-color-on-primary-container);\r\n padding: 4px 8px;\r\n border-radius: 4px;\r\n font-size: var(--md-sys-typescale-label-small);\r\n}\r\n\r\n.meeting-actions {\r\n display: flex;\r\n gap: 16px;\r\n margin-top: 16px;\r\n}\r\n\r\n@media (max-width: 768px) {\r\n .quick-actions-grid {\r\n grid-template-columns: 1fr;\r\n }\r\n \r\n .calendar-header {\r\n flex-direction: column;\r\n gap: 16px;\r\n }\r\n \r\n .meeting-header {\r\n flex-direction: column;\r\n gap: 16px;\r\n }\r\n}\r\n<\/style>\r\n\r\n<script>\r\n\/\/ Add this to your existing JavaScript\r\ndocument.addEventListener('DOMContentLoaded', function() {\r\n \/\/ Generate calendar grid\r\n const generateCalendar = () => {\r\n const calendarGrid = document.querySelector('.calendar-grid');\r\n const daysOfWeek = ['Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam', 'Dim'];\r\n \r\n \/\/ Add days of week\r\n daysOfWeek.forEach(day => {\r\n const dayEl = document.createElement('div');\r\n dayEl.className = 'calendar-day-header';\r\n dayEl.textContent = day;\r\n calendarGrid.appendChild(dayEl);\r\n });\r\n \r\n \/\/ Add day cells (simplified - you'd want to calculate actual dates)\r\n for(let i = 1; i <= 31; i++) {\r\n const dayEl = document.createElement('div');\r\n dayEl.className = 'calendar-day';\r\n dayEl.textContent = i;\r\n calendarGrid.appendChild(dayEl);\r\n }\r\n };\r\n\r\n generateCalendar();\r\n});\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Dashboard SCIC dashboard Tableau de bord bolt Actions rapides calendar_today Planning description Compte rendu payments Chiffre d’affaires 128 742 \u20ac trending_up +12.3% group Soci\u00e9taires 358 trending_up +24 ce mois inventory_2 Valeur du stock 45 230 \u20ac trending_flat Stable Activit\u00e9 r\u00e9cente person_add Nouveau soci\u00e9taire B\u00e9n\u00e9dicte Leblanc-Gravel a rejoint la SCIC Il y a 2 heures receipt_long […]<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_mc_calendar":[],"footnotes":""},"class_list":["post-3675","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.lecomptoirjunasol.coop\/index.php?rest_route=\/wp\/v2\/pages\/3675","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.lecomptoirjunasol.coop\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.lecomptoirjunasol.coop\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.lecomptoirjunasol.coop\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.lecomptoirjunasol.coop\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=3675"}],"version-history":[{"count":10,"href":"https:\/\/www.lecomptoirjunasol.coop\/index.php?rest_route=\/wp\/v2\/pages\/3675\/revisions"}],"predecessor-version":[{"id":3800,"href":"https:\/\/www.lecomptoirjunasol.coop\/index.php?rest_route=\/wp\/v2\/pages\/3675\/revisions\/3800"}],"wp:attachment":[{"href":"https:\/\/www.lecomptoirjunasol.coop\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=3675"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t\t\t

\n\t\t\t\t\t

\n\t\t\t

\n\t\t\t\t\t\t

\n\t\t\t\t

\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n \r\n Dashboard SCIC<\/title>\r\n \r\n \r\n <link href=\"https:\/\/fonts.googleapis.com\/icon?family=Material+Icons\" rel=\"stylesheet\">\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Roboto:wght@300;400;500;700&display=swap\" rel=\"stylesheet\">\r\n <link href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.5.1\/css\/all.min.css\" rel=\"stylesheet\">\r\n\r\n <style>\r\n \/* Material Design 3 Variables *\/\r\n :root {\r\n \/* Couleurs primaires *\/\r\n --md-sys-color-primary: #006495;\r\n --md-sys-color-primary-container: #cde5ff;\r\n --md-sys-color-on-primary: #ffffff;\r\n --md-sys-color-on-primary-container: #001e31;\r\n \r\n \/* Couleurs secondaires *\/\r\n --md-sys-color-secondary: #50606f;\r\n --md-sys-color-secondary-container: #d3e5f5;\r\n --md-sys-color-on-secondary: #ffffff;\r\n --md-sys-color-on-secondary-container: #0c1d29;\r\n \r\n \/* Couleurs d'erreur *\/\r\n --md-sys-color-error: #ba1a1a;\r\n --md-sys-color-error-container: #ffdad6;\r\n --md-sys-color-on-error: #ffffff;\r\n --md-sys-color-on-error-container: #410002;\r\n \r\n \/* Couleurs de surface *\/\r\n --md-sys-color-surface: #fdfcff;\r\n --md-sys-color-surface-variant: #dee3eb;\r\n --md-sys-color-on-surface: #1a1c1e;\r\n --md-sys-color-on-surface-variant: #42474e;\r\n \r\n \/* Autres couleurs syst\u00e8me *\/\r\n --md-sys-color-background: #fdfcff;\r\n --md-sys-color-on-background: #1a1c1e;\r\n --md-sys-color-outline: #72777f;\r\n --md-sys-color-outline-variant: #c2c7cf;\r\n \r\n \/* \u00c9l\u00e9vations *\/\r\n --md-elevation-level1: 0px 1px 3px 1px rgba(0, 0, 0, 0.15),\r\n 0px 1px 2px 0px rgba(0, 0, 0, 0.30);\r\n --md-elevation-level2: 0px 2px 6px 2px rgba(0, 0, 0, 0.15),\r\n 0px 1px 2px 0px rgba(0, 0, 0, 0.30);\r\n --md-elevation-level3: 0px 4px 8px 3px rgba(0, 0, 0, 0.15),\r\n 0px 1px 3px 0px rgba(0, 0, 0, 0.30);\r\n \r\n \/* Typographie *\/\r\n --md-sys-typescale-headline-small: 24px;\r\n --md-sys-typescale-title-large: 22px;\r\n --md-sys-typescale-title-medium: 16px;\r\n --md-sys-typescale-body-large: 16px;\r\n --md-sys-typescale-body-medium: 14px;\r\n --md-sys-typescale-label-large: 14px;\r\n \r\n \/* Animation *\/\r\n --md-sys-motion-standard: cubic-bezier(0.2, 0, 0, 1);\r\n --md-sys-motion-duration-medium: 250ms;\r\n }\r\n\r\n \/* Dark Mode Variables *\/\r\n @media (prefers-color-scheme: dark) {\r\n :root {\r\n --md-sys-color-primary: #95ccff;\r\n --md-sys-color-primary-container: #004b71;\r\n --md-sys-color-on-primary: #003351;\r\n --md-sys-color-on-primary-container: #cde5ff;\r\n \r\n --md-sys-color-secondary: #b7c9d9;\r\n --md-sys-color-secondary-container: #374956;\r\n --md-sys-color-on-secondary: #21323f;\r\n --md-sys-color-on-secondary-container: #d3e5f5;\r\n \r\n --md-sys-color-surface: #1a1c1e;\r\n --md-sys-color-surface-variant: #42474e;\r\n --md-sys-color-on-surface: #e2e2e5;\r\n --md-sys-color-on-surface-variant: #c2c7cf;\r\n \r\n --md-sys-color-background: #1a1c1e;\r\n --md-sys-color-on-background: #e2e2e5;\r\n }\r\n }\r\n\r\n \/* Reset CSS *\/\r\n * {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n }\r\n\r\n body {\r\n font-family: 'Roboto', sans-serif;\r\n background-color: var(--md-sys-color-background);\r\n color: var(--md-sys-color-on-background);\r\n line-height: 1.5;\r\n -webkit-font-smoothing: antialiased;\r\n -moz-osx-font-smoothing: grayscale;\r\n }\r\n\r\n \/* Components *\/\r\n .md-surface {\r\n background-color: var(--md-sys-color-surface);\r\n border-radius: 16px;\r\n padding: 16px;\r\n box-shadow: var(--md-elevation-level1);\r\n transition: box-shadow var(--md-sys-motion-duration-medium) var(--md-sys-motion-standard);\r\n }\r\n\r\n .md-surface:hover {\r\n box-shadow: var(--md-elevation-level2);\r\n }\r\n\r\n \/* Layout *\/\r\n .container {\r\n max-width: 1200px;\r\n margin: 0 auto;\r\n padding: 24px 16px;\r\n }\r\n\r\n \/* Navigation Tabs *\/\r\n .md-tabs {\r\n display: flex;\r\n gap: 8px;\r\n margin-bottom: 24px;\r\n padding: 4px;\r\n background-color: var(--md-sys-color-surface-variant);\r\n border-radius: 20px;\r\n }\r\n\r\n .md-tab {\r\n position: relative;\r\n padding: 10px 24px;\r\n border: none;\r\n border-radius: 16px;\r\n background: transparent;\r\n color: var(--md-sys-color-on-surface-variant);\r\n font-family: 'Roboto', sans-serif;\r\n font-size: var(--md-sys-typescale-label-large);\r\n font-weight: 500;\r\n cursor: pointer;\r\n transition: all var(--md-sys-motion-duration-medium) var(--md-sys-motion-standard);\r\n }\r\n\r\n .md-tab.active {\r\n background-color: var(--md-sys-color-surface);\r\n color: var(--md-sys-color-primary);\r\n }\r\n\r\n .md-tab:hover:not(.active) {\r\n background-color: rgba(0, 0, 0, 0.05);\r\n }\r\n <\/style>\r\n<\/head>\r\n\r\n<body>\r\n <div class=\"container\">\r\n \r\n <nav class=\"md-tabs\" role=\"tablist\">\r\n <button class=\"md-tab active\" role=\"tab\" data-tab=\"dashboard\" aria-selected=\"true\" aria-controls=\"dashboard-panel\">\r\n <i class=\"material-icons\">dashboard<\/i>\r\n <span>Tableau de bord<\/span>\r\n <\/button>\r\n <button class=\"md-tab\" role=\"tab\" data-tab=\"actions\" aria-selected=\"false\" aria-controls=\"actions-panel\">\r\n <i class=\"material-icons\">bolt<\/i>\r\n <span>Actions rapides<\/span>\r\n <\/button>\r\n <button class=\"md-tab\" role=\"tab\" data-tab=\"planning\" aria-selected=\"false\" aria-controls=\"planning-panel\">\r\n <i class=\"material-icons\">calendar_today<\/i>\r\n <span>Planning<\/span>\r\n <\/button>\r\n <button class=\"md-tab\" role=\"tab\" data-tab=\"meeting\" aria-selected=\"false\" aria-controls=\"meeting-panel\">\r\n <i class=\"material-icons\">description<\/i>\r\n <span>Compte rendu<\/span>\r\n <\/button>\r\n <\/nav>\r\n\r\n \r\n <div class=\"tab-panels\">\r\n <div id=\"dashboard-panel\" class=\"tab-panel active\" role=\"tabpanel\" aria-labelledby=\"dashboard-tab\">\r\n \r\n <\/div>\r\n <div id=\"actions-panel\" class=\"tab-panel\" role=\"tabpanel\" aria-labelledby=\"actions-tab\" hidden>\r\n \r\n <\/div>\r\n <div id=\"planning-panel\" class=\"tab-panel\" role=\"tabpanel\" aria-labelledby=\"planning-tab\" hidden>\r\n \r\n <\/div>\r\n <div id=\"meeting-panel\" class=\"tab-panel\" role=\"tabpanel\" aria-labelledby=\"meeting-tab\" hidden>\r\n \r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <style>\r\n \/* Tab Styling *\/\r\n .md-tabs {\r\n position: sticky;\r\n top: 16px;\r\n z-index: 100;\r\n background-color: var(--md-sys-color-surface);\r\n padding: 8px;\r\n border-radius: 28px;\r\n box-shadow: var(--md-elevation-level2);\r\n display: flex;\r\n gap: 8px;\r\n margin-bottom: 32px;\r\n overflow-x: auto;\r\n scrollbar-width: none; \/* Firefox *\/\r\n -ms-overflow-style: none; \/* IE and Edge *\/\r\n }\r\n\r\n .md-tabs::-webkit-scrollbar {\r\n display: none; \/* Chrome, Safari, Opera *\/\r\n }\r\n\r\n .md-tab {\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n padding: 12px 24px;\r\n border: none;\r\n border-radius: 20px;\r\n background: transparent;\r\n color: var(--md-sys-color-on-surface-variant);\r\n font-family: 'Roboto', sans-serif;\r\n font-size: var(--md-sys-typescale-label-large);\r\n font-weight: 500;\r\n cursor: pointer;\r\n transition: all 0.2s var(--md-sys-motion-standard);\r\n white-space: nowrap;\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n\r\n .md-tab::after {\r\n content: '';\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n bottom: 0;\r\n background: currentColor;\r\n opacity: 0;\r\n transition: opacity 0.2s var(--md-sys-motion-standard);\r\n }\r\n\r\n .md-tab:hover::after {\r\n opacity: 0.08;\r\n }\r\n\r\n .md-tab:active::after {\r\n opacity: 0.12;\r\n }\r\n\r\n .md-tab.active {\r\n background-color: var(--md-sys-color-primary-container);\r\n color: var(--md-sys-color-on-primary-container);\r\n }\r\n\r\n .md-tab .material-icons {\r\n font-size: 20px;\r\n }\r\n\r\n \/* Tab Panel Styling *\/\r\n .tab-panels {\r\n position: relative;\r\n min-height: 400px;\r\n }\r\n\r\n .tab-panel {\r\n opacity: 0;\r\n transform: translateY(10px);\r\n transition: opacity 0.3s var(--md-sys-motion-standard),\r\n transform 0.3s var(--md-sys-motion-standard);\r\n position: absolute;\r\n width: 100%;\r\n top: 0;\r\n left: 0;\r\n }\r\n\r\n .tab-panel.active {\r\n opacity: 1;\r\n transform: translateY(0);\r\n position: relative;\r\n }\r\n\r\n \/* Responsive Design *\/\r\n @media (max-width: 768px) {\r\n .md-tabs {\r\n border-radius: 20px;\r\n padding: 4px;\r\n }\r\n\r\n .md-tab {\r\n padding: 8px 16px;\r\n font-size: 14px;\r\n }\r\n\r\n .md-tab .material-icons {\r\n font-size: 18px;\r\n }\r\n }\r\n\r\n @media (max-width: 480px) {\r\n .md-tab span {\r\n display: none;\r\n }\r\n\r\n .md-tab {\r\n padding: 8px;\r\n }\r\n\r\n .md-tab .material-icons {\r\n margin: 0;\r\n }\r\n }\r\n <\/style>\r\n\r\n <script>\r\n class TabSystem {\r\n constructor() {\r\n this.tabs = document.querySelectorAll('.md-tab');\r\n this.panels = document.querySelectorAll('.tab-panel');\r\n this.init();\r\n }\r\n\r\n init() {\r\n this.tabs.forEach(tab => {\r\n tab.addEventListener('click', (e) => this.handleTabClick(e));\r\n });\r\n\r\n \/\/ Handle keyboard navigation\r\n this.tabs.forEach(tab => {\r\n tab.addEventListener('keydown', (e) => this.handleKeyDown(e));\r\n });\r\n\r\n \/\/ Set initial state\r\n this.showPanel(this.tabs[0]);\r\n }\r\n\r\n handleTabClick(e) {\r\n const tab = e.currentTarget;\r\n this.showPanel(tab);\r\n }\r\n\r\n handleKeyDown(e) {\r\n const tab = e.target;\r\n const tabArray = Array.from(this.tabs);\r\n const index = tabArray.indexOf(tab);\r\n\r\n let newTab;\r\n switch(e.key) {\r\n case 'ArrowLeft':\r\n newTab = tabArray[index - 1] || tabArray[tabArray.length - 1];\r\n break;\r\n case 'ArrowRight':\r\n newTab = tabArray[index + 1] || tabArray[0];\r\n break;\r\n default:\r\n return;\r\n }\r\n\r\n newTab.focus();\r\n this.showPanel(newTab);\r\n }\r\n\r\n showPanel(tab) {\r\n \/\/ Update tabs\r\n this.tabs.forEach(t => {\r\n t.classList.remove('active');\r\n t.setAttribute('aria-selected', 'false');\r\n });\r\n tab.classList.add('active');\r\n tab.setAttribute('aria-selected', 'true');\r\n\r\n \/\/ Update panels\r\n const targetId = `${tab.dataset.tab}-panel`;\r\n this.panels.forEach(panel => {\r\n if (panel.id === targetId) {\r\n panel.classList.add('active');\r\n panel.hidden = false;\r\n } else {\r\n panel.classList.remove('active');\r\n panel.hidden = true;\r\n }\r\n });\r\n\r\n \/\/ Save state\r\n localStorage.setItem('activeTab', tab.dataset.tab);\r\n }\r\n }\r\n\r\n \/\/ Initialize when DOM is ready\r\n document.addEventListener('DOMContentLoaded', () => {\r\n const tabSystem = new TabSystem();\r\n\r\n \/\/ Restore last active tab if available\r\n const lastTab = localStorage.getItem('activeTab');\r\n if (lastTab) {\r\n const tab = document.querySelector(`[data-tab=\"${lastTab}\"]`);\r\n if (tab) tabSystem.showPanel(tab);\r\n }\r\n });\r\n <\/script>\r\n<\/body>\r\n\r\n\r\n<div id=\"dashboard-panel\" class=\"tab-panel active\" role=\"tabpanel\" aria-labelledby=\"dashboard-tab\">\r\n \r\n <div class=\"stats-grid\">\r\n \r\n <div class=\"stats-card\">\r\n <div class=\"stats-icon\" style=\"background: var(--md-sys-color-primary-container)\">\r\n <i class=\"material-icons\">payments<\/i>\r\n <\/div>\r\n <div class=\"stats-content\">\r\n <h3>Chiffre d'affaires<\/h3>\r\n <p class=\"stats-value\">128 742 \u20ac<\/p>\r\n <p class=\"stats-trend positive\">\r\n <i class=\"material-icons\">trending_up<\/i>\r\n +12.3%\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"stats-card\">\r\n <div class=\"stats-icon\" style=\"background: var(--md-sys-color-secondary-container)\">\r\n <i class=\"material-icons\">group<\/i>\r\n <\/div>\r\n <div class=\"stats-content\">\r\n <h3>Soci\u00e9taires<\/h3>\r\n <p class=\"stats-value\">358<\/p>\r\n <p class=\"stats-trend positive\">\r\n <i class=\"material-icons\">trending_up<\/i>\r\n +24 ce mois\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"stats-card\">\r\n <div class=\"stats-icon\" style=\"background: var(--md-sys-color-tertiary-container)\">\r\n <i class=\"material-icons\">inventory_2<\/i>\r\n <\/div>\r\n <div class=\"stats-content\">\r\n <h3>Valeur du stock<\/h3>\r\n <p class=\"stats-value\">45 230 \u20ac<\/p>\r\n <p class=\"stats-trend neutral\">\r\n <i class=\"material-icons\">trending_flat<\/i>\r\n Stable\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"activity-section\">\r\n <h2 class=\"section-title\">Activit\u00e9 r\u00e9cente<\/h2>\r\n <div class=\"activity-timeline\">\r\n <div class=\"activity-item\">\r\n <div class=\"activity-icon\">\r\n <i class=\"material-icons\">person_add<\/i>\r\n <\/div>\r\n <div class=\"activity-content\">\r\n <h4>Nouveau soci\u00e9taire<\/h4>\r\n <p>B\u00e9n\u00e9dicte Leblanc-Gravel a rejoint la SCIC<\/p>\r\n <time>Il y a 2 heures<\/time>\r\n <\/div>\r\n <\/div>\r\n <div class=\"activity-item\">\r\n <div class=\"activity-icon\">\r\n <i class=\"material-icons\">receipt_long<\/i>\r\n <\/div>\r\n <div class=\"activity-content\">\r\n <h4>Commande fournisseur<\/h4>\r\n <p>Commande BioCoop valid\u00e9e - 3420\u20ac<\/p>\r\n <time>Il y a 4 heures<\/time>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"tasks-section\">\r\n <h2 class=\"section-title\">T\u00e2ches \u00e0 suivre<\/h2>\r\n <div class=\"tasks-grid\">\r\n <div class=\"task-card\">\r\n <div class=\"task-priority high\"><\/div>\r\n <div class=\"task-content\">\r\n <h4>Devis point d'eau + WC<\/h4>\r\n <p>\u00c0 transmettre au PETR<\/p>\r\n <div class=\"task-meta\">\r\n <span class=\"task-due\">\u00c9ch\u00e9ance: 2 jours<\/span>\r\n <span class=\"task-assignee\">Marie C.<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"task-card\">\r\n <div class=\"task-priority medium\"><\/div>\r\n <div class=\"task-content\">\r\n <h4>Formation paiements fournisseurs<\/h4>\r\n <p>Former Marie Cambon<\/p>\r\n <div class=\"task-meta\">\r\n <span class=\"task-due\">\u00c9ch\u00e9ance: 5 jours<\/span>\r\n <span class=\"task-assignee\">Damery<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/div>\r\n\r\n<style>\r\n \/* Stats Grid *\/\r\n .stats-grid {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\r\n gap: 24px;\r\n margin-bottom: 32px;\r\n }\r\n\r\n .stats-card {\r\n background: var(--md-sys-color-surface);\r\n border-radius: 16px;\r\n padding: 24px;\r\n display: flex;\r\n align-items: flex-start;\r\n gap: 16px;\r\n box-shadow: var(--md-elevation-level1);\r\n transition: all 0.2s var(--md-sys-motion-standard);\r\n }\r\n\r\n .stats-card:hover {\r\n box-shadow: var(--md-elevation-level2);\r\n transform: translateY(-2px);\r\n }\r\n\r\n .stats-icon {\r\n width: 48px;\r\n height: 48px;\r\n border-radius: 12px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n }\r\n\r\n .stats-icon .material-icons {\r\n font-size: 24px;\r\n color: var(--md-sys-color-on-primary-container);\r\n }\r\n\r\n .stats-content h3 {\r\n font-size: var(--md-sys-typescale-title-medium);\r\n color: var(--md-sys-color-on-surface-variant);\r\n margin-bottom: 8px;\r\n }\r\n\r\n .stats-value {\r\n font-size: var(--md-sys-typescale-headline-small);\r\n font-weight: 500;\r\n color: var(--md-sys-color-on-surface);\r\n margin-bottom: 4px;\r\n }\r\n\r\n .stats-trend {\r\n display: flex;\r\n align-items: center;\r\n gap: 4px;\r\n font-size: var(--md-sys-typescale-body-medium);\r\n }\r\n\r\n .stats-trend.positive {\r\n color: var(--md-sys-color-primary);\r\n }\r\n\r\n .stats-trend.negative {\r\n color: var(--md-sys-color-error);\r\n }\r\n\r\n .stats-trend.neutral {\r\n color: var(--md-sys-color-outline);\r\n }\r\n\r\n \/* Activity Timeline *\/\r\n .activity-section {\r\n background: var(--md-sys-color-surface);\r\n border-radius: 16px;\r\n padding: 24px;\r\n margin-bottom: 32px;\r\n box-shadow: var(--md-elevation-level1);\r\n }\r\n\r\n .section-title {\r\n font-size: var(--md-sys-typescale-title-large);\r\n color: var(--md-sys-color-on-surface);\r\n margin-bottom: 24px;\r\n }\r\n\r\n .activity-timeline {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 16px;\r\n }\r\n\r\n .activity-item {\r\n display: flex;\r\n gap: 16px;\r\n padding: 16px;\r\n border-radius: 8px;\r\n background: var(--md-sys-color-surface-variant);\r\n }\r\n\r\n .activity-icon {\r\n width: 40px;\r\n height: 40px;\r\n border-radius: 20px;\r\n background: var(--md-sys-color-primary-container);\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n }\r\n\r\n .activity-icon .material-icons {\r\n font-size: 20px;\r\n color: var(--md-sys-color-on-primary-container);\r\n }\r\n\r\n .activity-content h4 {\r\n font-size: var(--md-sys-typescale-title-medium);\r\n color: var(--md-sys-color-on-surface);\r\n margin-bottom: 4px;\r\n }\r\n\r\n .activity-content p {\r\n font-size: var(--md-sys-typescale-body-medium);\r\n color: var(--md-sys-color-on-surface-variant);\r\n margin-bottom: 4px;\r\n }\r\n\r\n .activity-content time {\r\n font-size: var(--md-sys-typescale-body-small);\r\n color: var(--md-sys-color-outline);\r\n }\r\n\r\n \/* Tasks Section *\/\r\n .tasks-section {\r\n background: var(--md-sys-color-surface);\r\n border-radius: 16px;\r\n padding: 24px;\r\n box-shadow: var(--md-elevation-level1);\r\n }\r\n\r\n .tasks-grid {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));\r\n gap: 16px;\r\n }\r\n\r\n .task-card {\r\n display: flex;\r\n background: var(--md-sys-color-surface-variant);\r\n border-radius: 8px;\r\n overflow: hidden;\r\n }\r\n\r\n .task-priority {\r\n width: 4px;\r\n }\r\n\r\n .task-priority.high {\r\n background: var(--md-sys-color-error);\r\n }\r\n\r\n .task-priority.medium {\r\n background: var(--md-sys-color-secondary);\r\n }\r\n\r\n .task-content {\r\n padding: 16px;\r\n flex: 1;\r\n }\r\n\r\n .task-content h4 {\r\n font-size: var(--md-sys-typescale-title-medium);\r\n color: var(--md-sys-color-on-surface);\r\n margin-bottom: 4px;\r\n }\r\n\r\n .task-content p {\r\n font-size: var(--md-sys-typescale-body-medium);\r\n color: var(--md-sys-color-on-surface-variant);\r\n margin-bottom: 8px;\r\n }\r\n\r\n .task-meta {\r\n display: flex;\r\n justify-content: space-between;\r\n font-size: var(--md-sys-typescale-label-large);\r\n color: var(--md-sys-color-outline);\r\n }\r\n\r\n @media (max-width: 768px) {\r\n .stats-grid {\r\n grid-template-columns: 1fr;\r\n }\r\n\r\n .tasks-grid {\r\n grid-template-columns: 1fr;\r\n }\r\n\r\n .activity-section,\r\n .tasks-section {\r\n padding: 16px;\r\n }\r\n }\r\n<\/style>\r\n\r\n\r\n<div class=\"charts-section\">\r\n <div class=\"charts-grid\">\r\n \r\n <div class=\"chart-card\">\r\n <div class=\"chart-header\">\r\n <h3>\u00c9volution du CA<\/h3>\r\n <div class=\"chart-actions\">\r\n <button class=\"chart-period-btn active\" data-period=\"month\">Mois<\/button>\r\n <button class=\"chart-period-btn\" data-period=\"year\">Ann\u00e9e<\/button>\r\n <\/div>\r\n <\/div>\r\n <div class=\"chart-container\">\r\n <canvas id=\"revenueChart\"><\/canvas>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"chart-card\">\r\n <div class=\"chart-header\">\r\n <h3>R\u00e9partition des ventes<\/h3>\r\n <div class=\"chart-legend\" id=\"salesLegend\"><\/div>\r\n <\/div>\r\n <div class=\"chart-container\">\r\n <canvas id=\"salesChart\"><\/canvas>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/div>\r\n\r\n<style>\r\n .charts-section {\r\n margin-bottom: 32px;\r\n }\r\n\r\n .charts-grid {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));\r\n gap: 24px;\r\n }\r\n\r\n .chart-card {\r\n background: var(--md-sys-color-surface);\r\n border-radius: 16px;\r\n padding: 24px;\r\n box-shadow: var(--md-elevation-level1);\r\n transition: box-shadow 0.2s var(--md-sys-motion-standard);\r\n }\r\n\r\n .chart-card:hover {\r\n box-shadow: var(--md-elevation-level2);\r\n }\r\n\r\n .chart-header {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n margin-bottom: 16px;\r\n }\r\n\r\n .chart-header h3 {\r\n font-size: var(--md-sys-typescale-title-medium);\r\n color: var(--md-sys-color-on-surface);\r\n }\r\n\r\n .chart-actions {\r\n display: flex;\r\n gap: 8px;\r\n }\r\n\r\n .chart-period-btn {\r\n padding: 6px 12px;\r\n border: none;\r\n border-radius: 16px;\r\n background: var(--md-sys-color-surface-variant);\r\n color: var(--md-sys-color-on-surface-variant);\r\n font-size: var(--md-sys-typescale-label-large);\r\n cursor: pointer;\r\n transition: all 0.2s var(--md-sys-motion-standard);\r\n }\r\n\r\n .chart-period-btn.active {\r\n background: var(--md-sys-color-primary-container);\r\n color: var(--md-sys-color-on-primary-container);\r\n }\r\n\r\n .chart-container {\r\n position: relative;\r\n height: 300px;\r\n }\r\n\r\n .chart-legend {\r\n display: flex;\r\n gap: 16px;\r\n flex-wrap: wrap;\r\n }\r\n\r\n @media (max-width: 768px) {\r\n .charts-grid {\r\n grid-template-columns: 1fr;\r\n }\r\n }\r\n<\/style>\r\n\r\n\r\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/chart.js\"><\/script>\r\n\r\n<script>\r\ndocument.addEventListener('DOMContentLoaded', function() {\r\n \/\/ Configuration commune pour le mode sombre\r\n const isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;\r\n const textColor = isDarkMode ? '#E2E2E5' : '#1A1C1E';\r\n \r\n Chart.defaults.color = textColor;\r\n Chart.defaults.borderColor = isDarkMode ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.1)';\r\n\r\n \/\/ Graphique d'\u00e9volution du CA\r\n const revenueCtx = document.getElementById('revenueChart').getContext('2d');\r\n const revenueChart = new Chart(revenueCtx, {\r\n type: 'line',\r\n data: {\r\n labels: ['Jan', 'F\u00e9v', 'Mar', 'Avr', 'Mai', 'Jun'],\r\n datasets: [{\r\n label: 'CA 2025',\r\n data: [12000, 19000, 15000, 22000, 24000, 28000],\r\n borderColor: '#006495',\r\n backgroundColor: 'rgba(0, 100, 149, 0.1)',\r\n tension: 0.4,\r\n fill: true\r\n }, {\r\n label: 'CA 2024',\r\n data: [10000, 15000, 13000, 17000, 19000, 23000],\r\n borderColor: '#50606F',\r\n backgroundColor: 'rgba(80, 96, 111, 0.1)',\r\n tension: 0.4,\r\n fill: true\r\n }]\r\n },\r\n options: {\r\n responsive: true,\r\n maintainAspectRatio: false,\r\n plugins: {\r\n legend: {\r\n position: 'top',\r\n },\r\n },\r\n scales: {\r\n y: {\r\n beginAtZero: true,\r\n ticks: {\r\n callback: value => value + ' \u20ac'\r\n }\r\n }\r\n },\r\n interaction: {\r\n intersect: false,\r\n mode: 'index'\r\n }\r\n }\r\n });\r\n\r\n \/\/ Graphique de r\u00e9partition des ventes\r\n const salesCtx = document.getElementById('salesChart').getContext('2d');\r\n const salesChart = new Chart(salesCtx, {\r\n type: 'doughnut',\r\n data: {\r\n labels: ['Alimentaire', 'Hygi\u00e8ne', 'Maison', 'Autres'],\r\n datasets: [{\r\n data: [45, 25, 20, 10],\r\n backgroundColor: [\r\n '#006495',\r\n '#50606F',\r\n '#03DAC6',\r\n '#6200EE'\r\n ],\r\n borderWidth: 0\r\n }]\r\n },\r\n options: {\r\n responsive: true,\r\n maintainAspectRatio: false,\r\n plugins: {\r\n legend: {\r\n display: false\r\n }\r\n },\r\n cutout: '70%'\r\n }\r\n });\r\n\r\n \/\/ Cr\u00e9ation de la l\u00e9gende personnalis\u00e9e\r\n const createCustomLegend = () => {\r\n const legend = document.getElementById('salesLegend');\r\n salesChart.data.labels.forEach((label, index) => {\r\n const value = salesChart.data.datasets[0].data[index];\r\n const color = salesChart.data.datasets[0].backgroundColor[index];\r\n \r\n const item = document.createElement('div');\r\n item.style.display = 'flex';\r\n item.style.alignItems = 'center';\r\n item.style.gap = '8px';\r\n item.innerHTML = `\r\n <span style=\"width: 12px; height: 12px; border-radius: 6px; background: ${color}\"><\/span>\r\n <span>${label} (${value}%)<\/span>\r\n `;\r\n legend.appendChild(item);\r\n });\r\n };\r\n\r\n createCustomLegend();\r\n\r\n \/\/ Gestion des boutons de p\u00e9riode\r\n const periodButtons = document.querySelectorAll('.chart-period-btn');\r\n periodButtons.forEach(button => {\r\n button.addEventListener('click', () => {\r\n periodButtons.forEach(btn => btn.classList.remove('active'));\r\n button.classList.add('active');\r\n \r\n \/\/ Simuler un changement de donn\u00e9es\r\n if (button.dataset.period === 'year') {\r\n revenueChart.data.labels = ['2020', '2021', '2022', '2023', '2024', '2025'];\r\n revenueChart.data.datasets[0].data = [150000, 180000, 210000, 250000, 280000, 320000];\r\n revenueChart.data.datasets[1].data = [130000, 160000, 190000, 220000, 260000, 300000];\r\n } else {\r\n revenueChart.data.labels = ['Jan', 'F\u00e9v', 'Mar', 'Avr', 'Mai', 'Jun'];\r\n revenueChart.data.datasets[0].data = [12000, 19000, 15000, 22000, 24000, 28000];\r\n revenueChart.data.datasets[1].data = [10000, 15000, 13000, 17000, 19000, 23000];\r\n }\r\n revenueChart.update();\r\n });\r\n });\r\n});\r\n<\/script>\r\n\r\n<div id=\"dashboard-panel\" class=\"tab-panel active\" role=\"tabpanel\" aria-labelledby=\"dashboard-tab\">\r\n \r\n <div class=\"stats-grid\">\r\n <div class=\"stats-card\">\r\n <div class=\"stats-icon\" style=\"background: var(--md-sys-color-primary-container)\">\r\n <i class=\"material-icons\">payments<\/i>\r\n <\/div>\r\n <div class=\"stats-content\">\r\n <h3>Chiffre d'affaires<\/h3>\r\n <p class=\"stats-value\">128 742 \u20ac<\/p>\r\n <p class=\"stats-trend positive\">\r\n <i class=\"material-icons\">trending_up<\/i>\r\n +12.3%\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"stats-card\">\r\n <div class=\"stats-icon\" style=\"background: var(--md-sys-color-secondary-container)\">\r\n <i class=\"material-icons\">group<\/i>\r\n <\/div>\r\n <div class=\"stats-content\">\r\n <h3>Soci\u00e9taires<\/h3>\r\n <p class=\"stats-value\">358<\/p>\r\n <p class=\"stats-trend positive\">\r\n <i class=\"material-icons\">trending_up<\/i>\r\n +24 ce mois\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"stats-card\">\r\n <div class=\"stats-icon\" style=\"background: var(--md-sys-color-tertiary-container)\">\r\n <i class=\"material-icons\">inventory_2<\/i>\r\n <\/div>\r\n <div class=\"stats-content\">\r\n <h3>Valeur du stock<\/h3>\r\n <p class=\"stats-value\">45 230 \u20ac<\/p>\r\n <p class=\"stats-trend neutral\">\r\n <i class=\"material-icons\">trending_flat<\/i>\r\n Stable\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"charts-section\">\r\n \r\n <\/div>\r\n\r\n \r\n <div class=\"activity-section\">\r\n <h2 class=\"section-title\">Activit\u00e9 r\u00e9cente<\/h2>\r\n <div class=\"activity-timeline\">\r\n <div class=\"activity-item\">\r\n <div class=\"activity-icon\">\r\n <i class=\"material-icons\">person_add<\/i>\r\n <\/div>\r\n <div class=\"activity-content\">\r\n <h4>Nouveau soci\u00e9taire<\/h4>\r\n <p>Marie Dupont a rejoint la SCIC<\/p>\r\n <time>Il y a 2 heures<\/time>\r\n <\/div>\r\n <\/div>\r\n <div class=\"activity-item\">\r\n <div class=\"activity-icon\">\r\n <i class=\"material-icons\">receipt_long<\/i>\r\n <\/div>\r\n <div class=\"activity-content\">\r\n <h4>Commande fournisseur<\/h4>\r\n <p>Commande BioCoop valid\u00e9e - 3420\u20ac<\/p>\r\n <time>Il y a 4 heures<\/time>\r\n <\/div>\r\n <\/div>\r\n <div class=\"activity-item\">\r\n <div class=\"activity-icon\">\r\n <i class=\"material-icons\">store<\/i>\r\n <\/div>\r\n <div class=\"activity-content\">\r\n <h4>Nouveau produit<\/h4>\r\n <p>Ajout gamme produits locaux - Miel<\/p>\r\n <time>Il y a 6 heures<\/time>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/div>\r\n\r\n\r\n<div id=\"actions-panel\" class=\"tab-panel\" role=\"tabpanel\" aria-labelledby=\"actions-tab\" hidden>\r\n <div class=\"quick-actions-grid\">\r\n <div class=\"action-card\">\r\n <div class=\"action-icon\">\r\n <i class=\"material-icons\">add_shopping_cart<\/i>\r\n <\/div>\r\n <h3>Nouvelle commande<\/h3>\r\n <p>Cr\u00e9er une commande fournisseur<\/p>\r\n <button class=\"md-button primary\">Commencer<\/button>\r\n <\/div>\r\n <div class=\"action-card\">\r\n <div class=\"action-icon\">\r\n <i class=\"material-icons\">person_add<\/i>\r\n <\/div>\r\n <h3>Nouveau soci\u00e9taire<\/h3>\r\n <p>Ajouter un nouveau membre<\/p>\r\n <button class=\"md-button primary\">Ajouter<\/button>\r\n <\/div>\r\n <div class=\"action-card\">\r\n <div class=\"action-icon\">\r\n <i class=\"material-icons\">inventory<\/i>\r\n <\/div>\r\n <h3>Inventaire<\/h3>\r\n <p>Lancer un nouvel inventaire<\/p>\r\n <button class=\"md-button primary\">D\u00e9marrer<\/button>\r\n <\/div>\r\n <\/div>\r\n<\/div>\r\n\r\n\r\n<div id=\"planning-panel\" class=\"tab-panel\" role=\"tabpanel\" aria-labelledby=\"planning-tab\" hidden>\r\n <div class=\"planning-calendar\">\r\n <div class=\"calendar-header\">\r\n <h2>Planning des \u00e9v\u00e9nements<\/h2>\r\n <div class=\"calendar-nav\">\r\n <button class=\"md-button icon-button\">\r\n <i class=\"material-icons\">chevron_left<\/i>\r\n <\/button>\r\n <h3>Mai 2024<\/h3>\r\n <button class=\"md-button icon-button\">\r\n <i class=\"material-icons\">chevron_right<\/i>\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n <div class=\"calendar-grid\">\r\n \r\n <\/div>\r\n <div class=\"upcoming-events\">\r\n <h3>\u00c9v\u00e9nements \u00e0 venir<\/h3>\r\n <div class=\"event-list\">\r\n <div class=\"event-item\">\r\n <div class=\"event-date\">\r\n <span class=\"day\">15<\/span>\r\n <span class=\"month\">Mai<\/span>\r\n <\/div>\r\n <div class=\"event-details\">\r\n <h4>Assembl\u00e9e G\u00e9n\u00e9rale<\/h4>\r\n <p>14:00 - Salle des f\u00eates<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"event-item\">\r\n <div class=\"event-date\">\r\n <span class=\"day\">22<\/span>\r\n <span class=\"month\">Mai<\/span>\r\n <\/div>\r\n <div class=\"event-details\">\r\n <h4>Formation nouveaux membres<\/h4>\r\n <p>09:30 - Local SCIC<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/div>\r\n\r\n\r\n<div id=\"meeting-panel\" class=\"tab-panel\" role=\"tabpanel\" aria-labelledby=\"meeting-tab\" hidden>\r\n <div class=\"meeting-section\">\r\n <div class=\"meeting-header\">\r\n <h2>Comptes rendus de r\u00e9union<\/h2>\r\n <button class=\"md-button primary\">\r\n <i class=\"material-icons\">add<\/i>\r\n Nouveau compte rendu\r\n <\/button>\r\n <\/div>\r\n <div class=\"meeting-list\">\r\n <div class=\"meeting-item\">\r\n <div class=\"meeting-meta\">\r\n <span class=\"meeting-date\">12 Mai 2024<\/span>\r\n <span class=\"meeting-type\">AG Extraordinaire<\/span>\r\n <\/div>\r\n <h3>Assembl\u00e9e G\u00e9n\u00e9rale Extraordinaire - Evolution statuts<\/h3>\r\n <p>Discussion sur les modifications statutaires et vote des nouveaux articles.<\/p>\r\n <div class=\"meeting-actions\">\r\n <button class=\"md-button text\">Voir le d\u00e9tail<\/button>\r\n <button class=\"md-button text\">\r\n <i class=\"material-icons\">download<\/i>\r\n PDF\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n <div class=\"meeting-item\">\r\n <div class=\"meeting-meta\">\r\n <span class=\"meeting-date\">5 Mai 2024<\/span>\r\n <span class=\"meeting-type\">Conseil Admin<\/span>\r\n <\/div>\r\n <h3>Conseil d'Administration - Budget 2024<\/h3>\r\n <p>Validation du budget pr\u00e9visionnel et des investissements.<\/p>\r\n <div class=\"meeting-actions\">\r\n <button class=\"md-button text\">Voir le d\u00e9tail<\/button>\r\n <button class=\"md-button text\">\r\n <i class=\"material-icons\">download<\/i>\r\n PDF\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/div>\r\n\r\n<style>\r\n\/* Additional styles for new panels *\/\r\n.quick-actions-grid {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\r\n gap: 24px;\r\n padding: 24px;\r\n}\r\n\r\n.action-card {\r\n background: var(--md-sys-color-surface);\r\n border-radius: 16px;\r\n padding: 24px;\r\n text-align: center;\r\n box-shadow: var(--md-elevation-level1);\r\n transition: all 0.2s var(--md-sys-motion-standard);\r\n}\r\n\r\n.action-card:hover {\r\n box-shadow: var(--md-elevation-level2);\r\n transform: translateY(-2px);\r\n}\r\n\r\n.action-icon {\r\n width: 56px;\r\n height: 56px;\r\n border-radius: 28px;\r\n background: var(--md-sys-color-primary-container);\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n margin: 0 auto 16px;\r\n}\r\n\r\n.action-icon .material-icons {\r\n font-size: 32px;\r\n color: var(--md-sys-color-on-primary-container);\r\n}\r\n\r\n.md-button {\r\n border: none;\r\n border-radius: 20px;\r\n padding: 8px 24px;\r\n font-family: 'Roboto', sans-serif;\r\n font-size: var(--md-sys-typescale-label-large);\r\n font-weight: 500;\r\n cursor: pointer;\r\n transition: all 0.2s var(--md-sys-motion-standard);\r\n}\r\n\r\n.md-button.primary {\r\n background: var(--md-sys-color-primary);\r\n color: var(--md-sys-color-on-primary);\r\n}\r\n\r\n.md-button.text {\r\n background: transparent;\r\n color: var(--md-sys-color-primary);\r\n}\r\n\r\n\/* Planning styles *\/\r\n.planning-calendar {\r\n background: var(--md-sys-color-surface);\r\n border-radius: 16px;\r\n padding: 24px;\r\n box-shadow: var(--md-elevation-level1);\r\n}\r\n\r\n.calendar-header {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n margin-bottom: 24px;\r\n}\r\n\r\n.calendar-nav {\r\n display: flex;\r\n align-items: center;\r\n gap: 16px;\r\n}\r\n\r\n.event-list {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 16px;\r\n}\r\n\r\n.event-item {\r\n display: flex;\r\n gap: 16px;\r\n padding: 16px;\r\n background: var(--md-sys-color-surface-variant);\r\n border-radius: 8px;\r\n}\r\n\r\n\/* Meeting styles *\/\r\n.meeting-section {\r\n padding: 24px;\r\n}\r\n\r\n.meeting-header {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n margin-bottom: 24px;\r\n}\r\n\r\n.meeting-list {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 16px;\r\n}\r\n\r\n.meeting-item {\r\n background: var(--md-sys-color-surface);\r\n border-radius: 16px;\r\n padding: 24px;\r\n box-shadow: var(--md-elevation-level1);\r\n}\r\n\r\n.meeting-meta {\r\n display: flex;\r\n gap: 16px;\r\n margin-bottom: 8px;\r\n}\r\n\r\n.meeting-type {\r\n background: var(--md-sys-color-primary-container);\r\n color: var(--md-sys-color-on-primary-container);\r\n padding: 4px 8px;\r\n border-radius: 4px;\r\n font-size: var(--md-sys-typescale-label-small);\r\n}\r\n\r\n.meeting-actions {\r\n display: flex;\r\n gap: 16px;\r\n margin-top: 16px;\r\n}\r\n\r\n@media (max-width: 768px) {\r\n .quick-actions-grid {\r\n grid-template-columns: 1fr;\r\n }\r\n \r\n .calendar-header {\r\n flex-direction: column;\r\n gap: 16px;\r\n }\r\n \r\n .meeting-header {\r\n flex-direction: column;\r\n gap: 16px;\r\n }\r\n}\r\n<\/style>\r\n\r\n<script>\r\n\/\/ Add this to your existing JavaScript\r\ndocument.addEventListener('DOMContentLoaded', function() {\r\n \/\/ Generate calendar grid\r\n const generateCalendar = () => {\r\n const calendarGrid = document.querySelector('.calendar-grid');\r\n const daysOfWeek = ['Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam', 'Dim'];\r\n \r\n \/\/ Add days of week\r\n daysOfWeek.forEach(day => {\r\n const dayEl = document.createElement('div');\r\n dayEl.className = 'calendar-day-header';\r\n dayEl.textContent = day;\r\n calendarGrid.appendChild(dayEl);\r\n });\r\n \r\n \/\/ Add day cells (simplified - you'd want to calculate actual dates)\r\n for(let i = 1; i <= 31; i++) {\r\n const dayEl = document.createElement('div');\r\n dayEl.className = 'calendar-day';\r\n dayEl.textContent = i;\r\n calendarGrid.appendChild(dayEl);\r\n }\r\n };\r\n\r\n generateCalendar();\r\n});\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Dashboard SCIC dashboard Tableau de bord bolt Actions rapides calendar_today Planning description Compte rendu payments Chiffre d’affaires 128 742 \u20ac trending_up +12.3% group Soci\u00e9taires 358 trending_up +24 ce mois inventory_2 Valeur du stock 45 230 \u20ac trending_flat Stable Activit\u00e9 r\u00e9cente person_add Nouveau soci\u00e9taire B\u00e9n\u00e9dicte Leblanc-Gravel a rejoint la SCIC Il y a 2 heures receipt_long […]<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_mc_calendar":[],"footnotes":""},"class_list":["post-3675","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.lecomptoirjunasol.coop\/index.php?rest_route=\/wp\/v2\/pages\/3675","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.lecomptoirjunasol.coop\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.lecomptoirjunasol.coop\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.lecomptoirjunasol.coop\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.lecomptoirjunasol.coop\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=3675"}],"version-history":[{"count":10,"href":"https:\/\/www.lecomptoirjunasol.coop\/index.php?rest_route=\/wp\/v2\/pages\/3675\/revisions"}],"predecessor-version":[{"id":3800,"href":"https:\/\/www.lecomptoirjunasol.coop\/index.php?rest_route=\/wp\/v2\/pages\/3675\/revisions\/3800"}],"wp:attachment":[{"href":"https:\/\/www.lecomptoirjunasol.coop\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=3675"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}