Mon Agenda du Sommeil<\/title>\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/Chart.js\/3.9.1\/chart.min.js\"><\/script>\n <style>\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n\n .sleep-app {\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;\n background: linear-gradient(135deg, #e0e7ff 0%, #ede9fe 50%, #fce7f3 100%);\n min-height: 100vh;\n padding: 20px;\n }\n\n .container {\n max-width: 1200px;\n margin: 0 auto;\n }\n\n .header {\n background: white;\n border-radius: 24px;\n box-shadow: 0 10px 30px rgba(0,0,0,0.1);\n padding: 24px;\n margin-bottom: 24px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n flex-wrap: wrap;\n gap: 16px;\n }\n\n .header-left {\n display: flex;\n align-items: center;\n gap: 16px;\n }\n\n .icon-box {\n background: linear-gradient(135deg, #a855f7 0%, #ec4899 100%);\n padding: 12px;\n border-radius: 16px;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n .icon-box svg {\n width: 32px;\n height: 32px;\n fill: white;\n }\n\n h1 {\n background: linear-gradient(135deg, #7c3aed 0%, #ec4899 100%);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n background-clip: text;\n font-size: 28px;\n font-weight: 700;\n }\n\n .subtitle {\n color: #6b7280;\n font-size: 14px;\n }\n\n .nav-tabs {\n background: white;\n border-radius: 16px;\n box-shadow: 0 4px 12px rgba(0,0,0,0.08);\n padding: 8px;\n margin-bottom: 24px;\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));\n gap: 8px;\n }\n\n .nav-tab {\n background: transparent;\n border: none;\n padding: 12px 16px;\n border-radius: 12px;\n cursor: pointer;\n font-weight: 500;\n font-size: 14px;\n color: #4b5563;\n transition: all 0.2s;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 8px;\n }\n\n .nav-tab:hover {\n background: #f3f4f6;\n }\n\n .nav-tab.active {\n background: linear-gradient(135deg, #a855f7 0%, #ec4899 100%);\n color: white;\n box-shadow: 0 4px 12px rgba(168, 85, 247, 0.4);\n }\n\n .nav-tab svg {\n width: 20px;\n height: 20px;\n }\n\n .card {\n background: white;\n border-radius: 24px;\n box-shadow: 0 10px 30px rgba(0,0,0,0.1);\n padding: 32px;\n margin-bottom: 24px;\n }\n\n .card-title {\n font-size: 24px;\n font-weight: 700;\n color: #1f2937;\n margin-bottom: 24px;\n display: flex;\n align-items: center;\n gap: 12px;\n }\n\n .grid {\n display: grid;\n gap: 24px;\n }\n\n .grid-2 {\n grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n }\n\n .form-group {\n margin-bottom: 16px;\n }\n\n .form-label {\n display: block;\n font-size: 14px;\n font-weight: 600;\n color: #374151;\n margin-bottom: 8px;\n }\n\n .form-input {\n width: 100%;\n padding: 12px 16px;\n border: 2px solid #e9d5ff;\n border-radius: 12px;\n font-size: 14px;\n transition: border-color 0.2s;\n }\n\n .form-input:focus {\n outline: none;\n border-color: #a855f7;\n }\n\n .star-rating {\n display: flex;\n gap: 8px;\n }\n\n .star {\n width: 40px;\n height: 40px;\n cursor: pointer;\n fill: #d1d5db;\n transition: all 0.2s;\n }\n\n .star:hover, .star.active {\n fill: #fbbf24;\n transform: scale(1.1);\n }\n\n .mood-selector {\n display: grid;\n grid-template-columns: repeat(4, 1fr);\n gap: 8px;\n }\n\n .mood-btn {\n padding: 12px;\n border: 2px solid #e5e7eb;\n border-radius: 12px;\n background: white;\n cursor: pointer;\n transition: all 0.2s;\n font-size: 24px;\n text-align: center;\n }\n\n .mood-btn:hover {\n border-color: #a855f7;\n }\n\n .mood-btn.active {\n border-color: #a855f7;\n background: #faf5ff;\n transform: scale(1.05);\n }\n\n .mood-label {\n font-size: 11px;\n display: block;\n margin-top: 4px;\n text-transform: capitalize;\n }\n\n .btn-primary {\n width: 100%;\n padding: 16px;\n background: linear-gradient(135deg, #a855f7 0%, #ec4899 100%);\n color: white;\n border: none;\n border-radius: 12px;\n font-size: 16px;\n font-weight: 700;\n cursor: pointer;\n transition: all 0.2s;\n margin-top: 24px;\n }\n\n .btn-primary:hover {\n transform: scale(1.02);\n box-shadow: 0 8px 24px rgba(168, 85, 247, 0.4);\n }\n\n .stat-card {\n background: linear-gradient(135deg, #faf5ff 0%, #fce7f3 100%);\n border-radius: 16px;\n padding: 24px;\n display: flex;\n align-items: flex-start;\n gap: 16px;\n }\n\n .stat-card svg {\n width: 40px;\n height: 40px;\n }\n\n .stat-value {\n font-size: 32px;\n font-weight: 700;\n margin-top: 8px;\n }\n\n .stat-label {\n font-size: 14px;\n color: #6b7280;\n font-weight: 500;\n }\n\n .advice-card {\n border-radius: 16px;\n padding: 24px;\n border: 2px solid #e5e7eb;\n display: flex;\n gap: 16px;\n transition: box-shadow 0.2s;\n }\n\n .advice-card:hover {\n box-shadow: 0 8px 24px rgba(0,0,0,0.1);\n }\n\n .advice-icon {\n background: white;\n border-radius: 12px;\n padding: 12px;\n box-shadow: 0 2px 8px rgba(0,0,0,0.08);\n flex-shrink: 0;\n }\n\n .advice-icon svg {\n width: 24px;\n height: 24px;\n }\n\n .advice-category {\n font-size: 11px;\n font-weight: 600;\n text-transform: uppercase;\n color: #6b7280;\n letter-spacing: 0.5px;\n margin-bottom: 8px;\n }\n\n .advice-title {\n font-weight: 700;\n color: #1f2937;\n margin-bottom: 8px;\n }\n\n .advice-text {\n font-size: 14px;\n color: #4b5563;\n line-height: 1.5;\n }\n\n .info-box {\n background: linear-gradient(135deg, #a855f7 0%, #ec4899 100%);\n color: white;\n border-radius: 24px;\n padding: 32px;\n box-shadow: 0 10px 30px rgba(168, 85, 247, 0.3);\n }\n\n .info-box h3 {\n font-size: 20px;\n font-weight: 700;\n margin-bottom: 16px;\n }\n\n .chart-container {\n position: relative;\n height: 300px;\n margin-bottom: 32px;\n }\n\n .hidden {\n display: none;\n }\n\n @media (max-width: 768px) {\n .sleep-app {\n padding: 12px;\n }\n \n .header {\n padding: 16px;\n }\n \n h1 {\n font-size: 22px;\n }\n \n .nav-tabs {\n grid-template-columns: repeat(2, 1fr);\n }\n \n .card {\n padding: 20px;\n }\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"sleep-app\" id=\"app\">\n <div class=\"container\">\n \n <div class=\"header\">\n <div class=\"header-left\">\n <div class=\"icon-box\">\n <svg viewBox=\"0 0 24 24\">\n <path d=\"M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z\"\/>\n <\/svg>\n <\/div>\n <div>\n <h1>Mon Agenda du Sommeil<\/h1>\n <p class=\"subtitle\">Suivez et am\u00e9liorez votre sommeil<\/p>\n <\/div>\n <\/div>\n <svg width=\"48\" height=\"48\" viewBox=\"0 0 24 24\" fill=\"#fbbf24\">\n <circle cx=\"12\" cy=\"12\" r=\"5\"\/>\n <line x1=\"12\" y1=\"1\" x2=\"12\" y2=\"3\" stroke=\"#fbbf24\" stroke-width=\"2\"\/>\n <line x1=\"12\" y1=\"21\" x2=\"12\" y2=\"23\" stroke=\"#fbbf24\" stroke-width=\"2\"\/>\n <line x1=\"4.22\" y1=\"4.22\" x2=\"5.64\" y2=\"5.64\" stroke=\"#fbbf24\" stroke-width=\"2\"\/>\n <line x1=\"18.36\" y1=\"18.36\" x2=\"19.78\" y2=\"19.78\" stroke=\"#fbbf24\" stroke-width=\"2\"\/>\n <line x1=\"1\" y1=\"12\" x2=\"3\" y2=\"12\" stroke=\"#fbbf24\" stroke-width=\"2\"\/>\n <line x1=\"21\" y1=\"12\" x2=\"23\" y2=\"12\" stroke=\"#fbbf24\" stroke-width=\"2\"\/>\n <line x1=\"4.22\" y1=\"19.78\" x2=\"5.64\" y2=\"18.36\" stroke=\"#fbbf24\" stroke-width=\"2\"\/>\n <line x1=\"18.36\" y1=\"5.64\" x2=\"19.78\" y2=\"4.22\" stroke=\"#fbbf24\" stroke-width=\"2\"\/>\n <\/svg>\n <\/div>\n\n \n <div class=\"nav-tabs\">\n <button class=\"nav-tab active\" onclick=\"switchView('home')\">\n <svg viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z\"\/><\/svg>\n <span>Accueil<\/span>\n <\/button>\n <button class=\"nav-tab\" onclick=\"switchView('add')\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><line x1=\"12\" y1=\"5\" x2=\"12\" y2=\"19\"\/><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/><\/svg>\n <span>Nouvelle Nuit<\/span>\n <\/button>\n <button class=\"nav-tab\" onclick=\"switchView('stats')\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><line x1=\"12\" y1=\"20\" x2=\"12\" y2=\"10\"\/><line x1=\"18\" y1=\"20\" x2=\"18\" y2=\"4\"\/><line x1=\"6\" y1=\"20\" x2=\"6\" y2=\"16\"\/><\/svg>\n <span>Statistiques<\/span>\n <\/button>\n <button class=\"nav-tab\" onclick=\"switchView('advice')\">\n <svg viewBox=\"0 0 24 24\" fill=\"currentColor\"><polygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2\"\/><\/svg>\n <span>Conseils<\/span>\n <\/button>\n <\/div>\n\n \n <div id=\"view-home\" class=\"view\">\n \n <\/div>\n\n <div id=\"view-add\" class=\"view hidden\">\n \n <\/div>\n\n <div id=\"view-stats\" class=\"view hidden\">\n \n <\/div>\n\n <div id=\"view-advice\" class=\"view hidden\">\n \n <\/div>\n <\/div>\n <\/div>\n\n <script>\n \/\/ \u00c9tat de l'application\n let currentView = 'home';\n let sleepEntries = [];\n let charts = {};\n\n \/\/ Charger les donn\u00e9es au d\u00e9marrage (pour WordPress avec localStorage)\n function loadData() {\n const saved = localStorage.getItem('sleepDiaryData');\n if (saved) {\n sleepEntries = JSON.parse(saved);\n } else {\n \/\/ Donn\u00e9es d'exemple\n sleepEntries = [{\n date: '2025-10-08',\n bedTime: '23:00',\n sleepTime: '23:30',\n wakeTime: '07:00',\n riseTime: '07:30',\n nightWakings: 2,\n quality: 3,\n mood: 'moyen',\n notes: ''\n }];\n }\n }\n\n \/\/ Sauvegarder les donn\u00e9es (pour WordPress avec localStorage)\n function saveData() {\n localStorage.setItem('sleepDiaryData', JSON.stringify(sleepEntries));\n }\n\n \/\/ Calculer les m\u00e9triques de sommeil\n function calculateMetrics(entry) {\n const sleepStart = new Date(`2000-01-01T${entry.sleepTime}`);\n let sleepEnd = new Date(`2000-01-01T${entry.wakeTime}`);\n \n if (sleepEnd < sleepStart) {\n sleepEnd = new Date(`2000-01-02T${entry.wakeTime}`);\n }\n \n const totalMinutes = (sleepEnd - sleepStart) \/ (1000 * 60);\n const totalHours = (totalMinutes \/ 60).toFixed(1);\n \n const bedStart = new Date(`2000-01-01T${entry.bedTime}`);\n const sleepStartTime = new Date(`2000-01-01T${entry.sleepTime}`);\n const latency = (sleepStartTime - bedStart) \/ (1000 * 60);\n \n return {\n totalHours,\n latency,\n efficiency: ((totalMinutes \/ 480) * 100).toFixed(0)\n };\n }\n\n \/\/ Changer de vue\n function switchView(view) {\n currentView = view;\n \n \/\/ Mettre \u00e0 jour les tabs\n document.querySelectorAll('.nav-tab').forEach(tab => {\n tab.classList.remove('active');\n });\n event.target.closest('.nav-tab').classList.add('active');\n \n \/\/ Cacher toutes les vues\n document.querySelectorAll('.view').forEach(v => {\n v.classList.add('hidden');\n });\n \n \/\/ Afficher la vue s\u00e9lectionn\u00e9e\n document.getElementById(`view-${view}`).classList.remove('hidden');\n \n \/\/ Rafra\u00eechir le contenu\n renderView(view);\n }\n\n \/\/ Obtenir l'emoji humeur\n function getMoodEmoji(mood) {\n const emojis = {\n excellent: '\ud83d\ude0a',\n bon: '\ud83d\ude42',\n moyen: '\ud83d\ude10',\n mauvais: '\ud83d\ude14'\n };\n return emojis[mood] || '\ud83d\ude10';\n }\n\n \/\/ Rendre une vue\n function renderView(view) {\n const container = document.getElementById(`view-${view}`);\n \n if (view === 'home') {\n renderHomeView(container);\n } else if (view === 'add') {\n renderAddView(container);\n } else if (view === 'stats') {\n renderStatsView(container);\n } else if (view === 'advice') {\n renderAdviceView(container);\n }\n }\n\n \/\/ Vue Accueil\n function renderHomeView(container) {\n const lastEntry = sleepEntries.length > 0 ? sleepEntries[sleepEntries.length - 1] : null;\n const metrics = lastEntry ? calculateMetrics(lastEntry) : null;\n \n container.innerHTML = `\n <div class=\"grid grid-2\">\n <div class=\"info-box\">\n <h3>\ud83c\udf19 Bienvenue !<\/h3>\n <p style=\"font-size: 16px; margin-bottom: 20px; opacity: 0.95;\">\n Cette application vous aide \u00e0 suivre votre sommeil selon les principes des th\u00e9rapies cognitives et comportementales.\n <\/p>\n <div style=\"background: rgba(255,255,255,0.2); backdrop-filter: blur(10px); border-radius: 16px; padding: 20px;\">\n <h4 style=\"font-weight: 600; margin-bottom: 12px;\">Objectifs :<\/h4>\n <div style=\"display: flex; flex-direction: column; gap: 12px;\">\n <div style=\"display: flex; gap: 12px;\">\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><polygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2\"\/><\/svg>\n <span>Identifier vos habitudes de sommeil<\/span>\n <\/div>\n <div style=\"display: flex; gap: 12px;\">\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polyline points=\"23 6 13.5 15.5 8.5 10.5 1 18\"\/><\/svg>\n <span>Am\u00e9liorer progressivement la qualit\u00e9<\/span>\n <\/div>\n <div style=\"display: flex; gap: 12px;\">\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><rect x=\"3\" y=\"4\" width=\"18\" height=\"18\" rx=\"2\" ry=\"2\"\/><line x1=\"16\" y1=\"2\" x2=\"16\" y2=\"6\"\/><line x1=\"8\" y1=\"2\" x2=\"8\" y2=\"6\"\/><line x1=\"3\" y1=\"10\" x2=\"21\" y2=\"10\"\/><\/svg>\n <span>R\u00e9gulariser votre rythme circadien<\/span>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"card\">\n <h3 class=\"card-title\">Derni\u00e8re nuit enregistr\u00e9e<\/h3>\n ${lastEntry ? `\n <div style=\"display: flex; flex-direction: column; gap: 16px;\">\n <div style=\"background: #faf5ff; border-radius: 16px; padding: 16px; display: flex; justify-content: space-between;\">\n <span style=\"color: #4b5563; font-weight: 500;\">Date<\/span>\n <span style=\"color: #7c3aed; font-weight: 700;\">${lastEntry.date}<\/span>\n <\/div>\n <div style=\"background: #eff6ff; border-radius: 16px; padding: 16px; display: flex; justify-content: space-between;\">\n <span style=\"color: #4b5563; font-weight: 500;\">Dur\u00e9e du sommeil<\/span>\n <span style=\"color: #2563eb; font-weight: 700;\">${metrics.totalHours}h<\/span>\n <\/div>\n <div style=\"background: #fce7f3; border-radius: 16px; padding: 16px; display: flex; justify-content: space-between;\">\n <span style=\"color: #4b5563; font-weight: 500;\">Qualit\u00e9<\/span>\n <div>\n ${'\u2605'.repeat(lastEntry.quality)}${'\u2606'.repeat(5 - lastEntry.quality)}\n <\/div>\n <\/div>\n <div style=\"background: #ecfdf5; border-radius: 16px; padding: 16px; display: flex; justify-content: space-between;\">\n <span style=\"color: #4b5563; font-weight: 500;\">Humeur au r\u00e9veil<\/span>\n <span style=\"font-size: 24px;\">${getMoodEmoji(lastEntry.mood)}<\/span>\n <\/div>\n <\/div>\n ` : '<p style=\"text-align: center; color: #6b7280; padding: 32px;\">Aucune nuit enregistr\u00e9e<\/p>'}\n <\/div>\n <\/div>\n `;\n }\n\n \/\/ Vue Ajouter\n function renderAddView(container) {\n const today = new Date().toISOString().split('T')[0];\n \n container.innerHTML = `\n <div class=\"card\">\n <h2 class=\"card-title\">\n <svg width=\"32\" height=\"32\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#7c3aed\" stroke-width=\"2\">\n <line x1=\"12\" y1=\"5\" x2=\"12\" y2=\"19\"\/>\n <line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/>\n <\/svg>\n Enregistrer une nouvelle nuit\n <\/h2>\n \n <form id=\"sleepForm\" onsubmit=\"submitEntry(event)\">\n <div class=\"grid grid-2\">\n <div>\n <div class=\"form-group\">\n <label class=\"form-label\">Date<\/label>\n <input type=\"date\" class=\"form-input\" id=\"date\" value=\"${today}\" required>\n <\/div>\n <div class=\"form-group\">\n <label class=\"form-label\">Heure du coucher<\/label>\n <input type=\"time\" class=\"form-input\" id=\"bedTime\" value=\"22:00\" required>\n <\/div>\n <div class=\"form-group\">\n <label class=\"form-label\">Heure d'endormissement<\/label>\n <input type=\"time\" class=\"form-input\" id=\"sleepTime\" value=\"22:30\" required>\n <\/div>\n <div class=\"form-group\">\n <label class=\"form-label\">Heure de r\u00e9veil<\/label>\n <input type=\"time\" class=\"form-input\" id=\"wakeTime\" value=\"07:00\" required>\n <\/div>\n <\/div>\n \n <div>\n <div class=\"form-group\">\n <label class=\"form-label\">Heure de lever du lit<\/label>\n <input type=\"time\" class=\"form-input\" id=\"riseTime\" value=\"07:30\" required>\n <\/div>\n <div class=\"form-group\">\n <label class=\"form-label\">Nombre de r\u00e9veils nocturnes<\/label>\n <input type=\"number\" class=\"form-input\" id=\"nightWakings\" value=\"0\" min=\"0\" required>\n <\/div>\n <div class=\"form-group\">\n <label class=\"form-label\">Qualit\u00e9 du sommeil<\/label>\n <div class=\"star-rating\" id=\"qualityRating\">\n ${[1,2,3,4,5].map(n => `\n <svg class=\"star ${n <= 3 ? 'active' : ''}\" data-rating=\"${n}\" onclick=\"setRating(${n})\" viewBox=\"0 0 24 24\">\n <polygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2\"\/>\n <\/svg>\n `).join('')}\n <\/div>\n <input type=\"hidden\" id=\"quality\" value=\"3\">\n <\/div>\n <div class=\"form-group\">\n <label class=\"form-label\">Humeur au r\u00e9veil<\/label>\n <div class=\"mood-selector\">\n ${['excellent', 'bon', 'moyen', 'mauvais'].map(mood => `\n <button type=\"button\" class=\"mood-btn ${mood === 'bon' ? 'active' : ''}\" onclick=\"setMood('${mood}')\">\n ${getMoodEmoji(mood)}\n <span class=\"mood-label\">${mood}<\/span>\n <\/button>\n `).join('')}\n <\/div>\n <input type=\"hidden\" id=\"mood\" value=\"bon\">\n <\/div>\n <div class=\"form-group\">\n <label class=\"form-label\">Notes (optionnel)<\/label>\n <textarea class=\"form-input\" id=\"notes\" rows=\"3\" placeholder=\"Stress, repas copieux, etc...\"><\/textarea>\n <\/div>\n <\/div>\n <\/div>\n \n <button type=\"submit\" class=\"btn-primary\">Enregistrer cette nuit<\/button>\n <\/form>\n <\/div>\n `;\n }\n\n \/\/ Vue Statistiques\n function renderStatsView(container) {\n if (sleepEntries.length === 0) {\n container.innerHTML = '<div class=\"card\"><p style=\"text-align: center; color: #6b7280; padding: 32px;\">Enregistrez des nuits pour voir vos statistiques<\/p><\/div>';\n return;\n }\n\n const avgSleep = sleepEntries.reduce((sum, e) => sum + parseFloat(calculateMetrics(e).totalHours), 0) \/ sleepEntries.length;\n const avgQuality = sleepEntries.reduce((sum, e) => sum + e.quality, 0) \/ sleepEntries.length;\n const avgWakings = sleepEntries.reduce((sum, e) => sum + e.nightWakings, 0) \/ sleepEntries.length;\n\n container.innerHTML = `\n <div class=\"card\">\n <h2 class=\"card-title\">\n <svg width=\"32\" height=\"32\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#7c3aed\" stroke-width=\"2\">\n <line x1=\"12\" y1=\"20\" x2=\"12\" y2=\"10\"\/>\n <line x1=\"18\" y1=\"20\" x2=\"18\" y2=\"4\"\/>\n <line x1=\"6\" y1=\"20\" x2=\"6\" y2=\"16\"\/>\n <\/svg>\n \u00c9volution de votre sommeil\n <\/h2>\n \n <div>\n <h3 style=\"font-size: 18px; font-weight: 600; color: #374151; margin-bottom: 16px;\">Dur\u00e9e du sommeil (heures)<\/h3>\n <div class=\"chart-container\">\n <canvas id=\"sleepChart\"><\/canvas>\n <\/div>\n <\/div>\n\n <div>\n <h3 style=\"font-size: 18px; font-weight: 600; color: #374151; margin-bottom: 16px;\">Qualit\u00e9 du sommeil<\/h3>\n <div class=\"chart-container\">\n <canvas id=\"qualityChart\"><\/canvas>\n <\/div>\n <\/div>\n\n <div>\n <h3 style=\"font-size: 18px; font-weight: 600; color: #374151; margin-bottom: 16px;\">R\u00e9veils nocturnes<\/h3>\n <div class=\"chart-container\">\n <canvas id=\"wakingsChart\"><\/canvas>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"card\">\n <h3 style=\"font-size: 20px; font-weight: 700; color: #1f2937; margin-bottom: 20px;\">R\u00e9sum\u00e9<\/h3>\n <div class=\"grid grid-2\" style=\"grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\">\n <div class=\"stat-card\" style=\"background: linear-gradient(135deg, #ede9fe 0%, #faf5ff 100%);\">\n <svg viewBox=\"0 0 24 24\" fill=\"#7c3aed\"><path d=\"M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z\"\/><\/svg>\n <div>\n <div class=\"stat-label\">Dur\u00e9e moyenne<\/div>\n <div class=\"stat-value\" style=\"color: #7c3aed;\">${avgSleep.toFixed(1)}h<\/div>\n <\/div>\n <\/div>\n <div class=\"stat-card\" style=\"background: linear-gradient(135deg, #fce7f3 0%, #fdf2f8 100%);\">\n <svg viewBox=\"0 0 24 24\" fill=\"#ec4899\"><polygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2\"\/><\/svg>\n <div>\n <div class=\"stat-label\">Qualit\u00e9 moyenne<\/div>\n <div class=\"stat-value\" style=\"color: #ec4899;\">${avgQuality.toFixed(1)}\/5<\/div>\n <\/div>\n <\/div>\n <div class=\"stat-card\" style=\"background: linear-gradient(135deg, #dbeafe 0%, #eff6ff 100%);\">\n <svg viewBox=\"0 0 24 24\" fill=\"#3b82f6\"><path d=\"M18 10h-1.26A8 8 0 1 0 9 20h9a5 5 0 0 0 0-10z\"\/><\/svg>\n <div>\n <div class=\"stat-label\">R\u00e9veils moyens<\/div>\n <div class=\"stat-value\" style=\"color: #3b82f6;\">${avgWakings.toFixed(1)}<\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n `;\n\n \/\/ Cr\u00e9er les graphiques apr\u00e8s un court d\u00e9lai\n setTimeout(createCharts, 100);\n }\n\n \/\/ Vue Conseils\n function renderAdviceView(container) {\n const avgQuality = sleepEntries.length > 0 ? sleepEntries.reduce((sum, e) => sum + e.quality, 0) \/ sleepEntries.length : 3;\n const avgSleep = sleepEntries.length > 0 ? sleepEntries.reduce((sum, e) => sum + parseFloat(calculateMetrics(e).totalHours), 0) \/ sleepEntries.length : 7;\n \n const advice = [\n {category: 'Dur\u00e9e', title: 'Dur\u00e9e de sommeil recommand\u00e9e', text: 'Visez 7 \u00e0 9 heures de sommeil par nuit. Les adultes qui dorment moins de 7h ont plus de risques de probl\u00e8mes de sant\u00e9.', color: '#ede9fe', icon: '\ud83c\udf19'},\n {category: 'R\u00e9gularit\u00e9', title: 'Horaires r\u00e9guliers', text: 'Couchez-vous et levez-vous aux m\u00eames heures tous les jours, m\u00eame le week-end. Cette r\u00e9gularit\u00e9 synchronise votre horloge biologique.', color: '#fef3c7', icon: '\u2600\ufe0f'},\n {category: 'Activit\u00e9 physique', title: 'Pratiquer une activit\u00e9 physique', text: 'Faites 150-300 minutes d\\'activit\u00e9 mod\u00e9r\u00e9e par semaine. L\\'exercice am\u00e9liore la qualit\u00e9 du sommeil, mais \u00e9vitez les efforts intenses 3-4h avant le coucher.', color: '#d1fae5', icon: '\ud83c\udfc3'},\n {category: 'Environnement', title: 'Limiter l\\'exposition aux \u00e9crans', text: '\u00c9vitez les \u00e9crans 1-2h avant le coucher. La lumi\u00e8re bleue supprime la production de m\u00e9latonine, l\\'hormone du sommeil.', color: '#e0e7ff', icon: '\ud83d\udcf1'},\n {category: 'Alimentation', title: 'Attention \u00e0 l\\'alimentation', text: '\u00c9vitez la caf\u00e9ine apr\u00e8s 14h et l\\'alcool le soir. Privil\u00e9giez un d\u00eener l\u00e9ger 2-3h avant le coucher, riche en glucides lents.', color: '#fed7aa', icon: '\u2615'},\n {category: 'Environnement', title: 'Optimiser la chambre', text: 'Votre chambre doit \u00eatre calme, sombre et fra\u00eeche (18-19\u00b0C). R\u00e9servez le lit uniquement au sommeil.', color: '#cffafe', icon: '\ud83d\udecf\ufe0f'},\n {category: 'Mental', title: 'G\u00e9rer le stress', text: 'Si vous ruminez au lit, levez-vous et faites une activit\u00e9 calme. Notez vos pr\u00e9occupations en d\u00e9but de soir\u00e9e.', color: '#fce7f3', icon: '\ud83e\uddd8'},\n {category: 'Rythme circadien', title: 'S\\'exposer \u00e0 la lumi\u00e8re du jour', text: 'Exposez-vous \u00e0 la lumi\u00e8re naturelle le matin et pendant la journ\u00e9e. Cela aide \u00e0 r\u00e9guler votre horloge interne.', color: '#fef9c3', icon: '\ud83c\udf1e'}\n ];\n\n container.innerHTML = `\n <div class=\"card\">\n <h2 class=\"card-title\">\n <svg width=\"32\" height=\"32\" viewBox=\"0 0 24 24\" fill=\"#eab308\">\n <polygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2\"\/>\n <\/svg>\n Guide d'hygi\u00e8ne du sommeil\n <\/h2>\n <p style=\"color: #6b7280; margin-bottom: 8px;\">\n Recommandations bas\u00e9es sur vos donn\u00e9es et les principes des th\u00e9rapies cognitives et comportementales\n <\/p>\n <p style=\"color: #9ca3af; font-size: 14px; margin-bottom: 32px;\">\n Inspir\u00e9es des directives internationales et des meilleures pratiques en m\u00e9decine du sommeil\n <\/p>\n \n <div class=\"grid grid-2\">\n ${advice.map(item => `\n <div class=\"advice-card\" style=\"background: ${item.color};\">\n <div class=\"advice-icon\">\n <div style=\"font-size: 24px;\">${item.icon}<\/div>\n <\/div>\n <div style=\"flex: 1;\">\n <div class=\"advice-category\">${item.category}<\/div>\n <div class=\"advice-title\">${item.title}<\/div>\n <div class=\"advice-text\">${item.text}<\/div>\n <\/div>\n <\/div>\n `).join('')}\n <\/div>\n <\/div>\n\n <div class=\"info-box\">\n <h3>\u2b50 Principes cl\u00e9s de la TCC-Insomnie<\/h3>\n <div style=\"display: flex; flex-direction: column; gap: 16px;\">\n <div style=\"background: rgba(255,255,255,0.2); backdrop-filter: blur(10px); border-radius: 12px; padding: 16px;\">\n <h4 style=\"font-weight: 600; margin-bottom: 8px;\">\ud83d\udecf\ufe0f Contr\u00f4le du stimulus<\/h4>\n <p style=\"font-size: 14px; opacity: 0.9;\">\n N'utilisez le lit que pour dormir. Si vous ne dormez pas apr\u00e8s 15-20 minutes, levez-vous et faites une activit\u00e9 calme.\n <\/p>\n <\/div>\n <div style=\"background: rgba(255,255,255,0.2); backdrop-filter: blur(10px); border-radius: 12px; padding: 16px;\">\n <h4 style=\"font-weight: 600; margin-bottom: 8px;\">\u23f0 Restriction du temps au lit<\/h4>\n <p style=\"font-size: 14px; opacity: 0.9;\">\n Limitez votre temps au lit \u00e0 votre temps de sommeil r\u00e9el. Cette technique doit \u00eatre supervis\u00e9e par un professionnel.\n <\/p>\n <\/div>\n <div style=\"background: rgba(255,255,255,0.2); backdrop-filter: blur(10px); border-radius: 12px; padding: 16px;\">\n <h4 style=\"font-weight: 600; margin-bottom: 8px;\">\ud83e\udde0 Restructuration cognitive<\/h4>\n <p style=\"font-size: 14px; opacity: 0.9;\">\n Identifiez et modifiez les pens\u00e9es n\u00e9gatives sur le sommeil. \u00c9vitez les croyances catastrophiques.\n <\/p>\n <\/div>\n <\/div>\n <\/div>\n `;\n }\n\n \/\/ D\u00e9finir la notation\n function setRating(rating) {\n document.getElementById('quality').value = rating;\n document.querySelectorAll('.star').forEach(star => {\n const starRating = parseInt(star.getAttribute('data-rating'));\n if (starRating <= rating) {\n star.classList.add('active');\n } else {\n star.classList.remove('active');\n }\n });\n }\n\n \/\/ D\u00e9finir l'humeur\n function setMood(mood) {\n document.getElementById('mood').value = mood;\n document.querySelectorAll('.mood-btn').forEach(btn => {\n btn.classList.remove('active');\n });\n event.target.closest('.mood-btn').classList.add('active');\n }\n\n \/\/ Soumettre l'entr\u00e9e\n function submitEntry(event) {\n event.preventDefault();\n \n const entry = {\n date: document.getElementById('date').value,\n bedTime: document.getElementById('bedTime').value,\n sleepTime: document.getElementById('sleepTime').value,\n wakeTime: document.getElementById('wakeTime').value,\n riseTime: document.getElementById('riseTime').value,\n nightWakings: parseInt(document.getElementById('nightWakings').value),\n quality: parseInt(document.getElementById('quality').value),\n mood: document.getElementById('mood').value,\n notes: document.getElementById('notes').value\n };\n \n sleepEntries.push(entry);\n saveData();\n \n alert('Nuit enregistr\u00e9e avec succ\u00e8s !');\n \n \/\/ Basculer vers les statistiques\n document.querySelector('.nav-tab[onclick*=\"stats\"]').click();\n }\n\n \/\/ Cr\u00e9er les graphiques\n function createCharts() {\n const labels = sleepEntries.map(e => e.date.slice(5));\n const sleepData = sleepEntries.map(e => parseFloat(calculateMetrics(e).totalHours));\n const qualityData = sleepEntries.map(e => e.quality);\n const wakingsData = sleepEntries.map(e => e.nightWakings);\n\n \/\/ D\u00e9truire les anciens graphiques\n if (charts.sleep) charts.sleep.destroy();\n if (charts.quality) charts.quality.destroy();\n if (charts.wakings) charts.wakings.destroy();\n\n \/\/ Graphique dur\u00e9e du sommeil\n charts.sleep = new Chart(document.getElementById('sleepChart'), {\n type: 'line',\n data: {\n labels: labels,\n datasets: [{\n label: 'Heures',\n data: sleepData,\n borderColor: '#a855f7',\n backgroundColor: 'rgba(168, 85, 247, 0.1)',\n borderWidth: 3,\n tension: 0.3,\n fill: true\n }]\n },\n options: {\n responsive: true,\n maintainAspectRatio: false,\n plugins: {\n legend: { display: false }\n },\n scales: {\n y: { beginAtZero: true }\n }\n }\n });\n\n \/\/ Graphique qualit\u00e9\n charts.quality = new Chart(document.getElementById('qualityChart'), {\n type: 'bar',\n data: {\n labels: labels,\n datasets: [{\n label: 'Qualit\u00e9',\n data: qualityData,\n backgroundColor: '#ec4899',\n borderRadius: 8\n }]\n },\n options: {\n responsive: true,\n maintainAspectRatio: false,\n plugins: {\n legend: { display: false }\n },\n scales: {\n y: { beginAtZero: true, max: 5 }\n }\n }\n });\n\n \/\/ Graphique r\u00e9veils\n charts.wakings = new Chart(document.getElementById('wakingsChart'), {\n type: 'bar',\n data: {\n labels: labels,\n datasets: [{\n label: 'R\u00e9veils',\n data: wakingsData,\n backgroundColor: '#3b82f6',\n borderRadius: 8\n }]\n },\n options: {\n responsive: true,\n maintainAspectRatio: false,\n plugins: {\n legend: { display: false }\n },\n scales: {\n y: { beginAtZero: true }\n }\n }\n });\n }\n\n \/\/ Initialisation\n document.addEventListener('DOMContentLoaded', function() {\n loadData();\n renderView('home');\n });\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Mon Agenda du Sommeil Mon Agenda du Sommeil Suivez et am\u00e9liorez votre sommeil Accueil Nouvelle Nuit Statistiques Conseils<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-5101","page","type-page","status-publish","hentry"],"aioseo_notices":[],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/iacca.net\/index.php\/wp-json\/wp\/v2\/pages\/5101","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/iacca.net\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/iacca.net\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/iacca.net\/index.php\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/iacca.net\/index.php\/wp-json\/wp\/v2\/comments?post=5101"}],"version-history":[{"count":0,"href":"https:\/\/iacca.net\/index.php\/wp-json\/wp\/v2\/pages\/5101\/revisions"}],"wp:attachment":[{"href":"https:\/\/iacca.net\/index.php\/wp-json\/wp\/v2\/media?parent=5101"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":5101,"date":"2025-10-10T21:40:03","date_gmt":"2025-10-10T19:40:03","guid":{"rendered":"https:\/\/iacca.net\/?page_id=5101"},"modified":"2025-10-10T23:20:33","modified_gmt":"2025-10-10T21:20:33","slug":"mon-agenda-du-sommeil","status":"publish","type":"page","link":"https:\/\/iacca.net\/index.php\/mon-agenda-du-sommeil\/","title":{"rendered":"Mon agenda du sommeil"},"content":{"rendered":"\n\n\n\n \n \n Mon Agenda du Sommeil<\/title>\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/Chart.js\/3.9.1\/chart.min.js\"><\/script>\n <style>\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n\n .sleep-app {\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;\n background: linear-gradient(135deg, #e0e7ff 0%, #ede9fe 50%, #fce7f3 100%);\n min-height: 100vh;\n padding: 20px;\n }\n\n .container {\n max-width: 1200px;\n margin: 0 auto;\n }\n\n .header {\n background: white;\n border-radius: 24px;\n box-shadow: 0 10px 30px rgba(0,0,0,0.1);\n padding: 24px;\n margin-bottom: 24px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n flex-wrap: wrap;\n gap: 16px;\n }\n\n .header-left {\n display: flex;\n align-items: center;\n gap: 16px;\n }\n\n .icon-box {\n background: linear-gradient(135deg, #a855f7 0%, #ec4899 100%);\n padding: 12px;\n border-radius: 16px;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n .icon-box svg {\n width: 32px;\n height: 32px;\n fill: white;\n }\n\n h1 {\n background: linear-gradient(135deg, #7c3aed 0%, #ec4899 100%);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n background-clip: text;\n font-size: 28px;\n font-weight: 700;\n }\n\n .subtitle {\n color: #6b7280;\n font-size: 14px;\n }\n\n .nav-tabs {\n background: white;\n border-radius: 16px;\n box-shadow: 0 4px 12px rgba(0,0,0,0.08);\n padding: 8px;\n margin-bottom: 24px;\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));\n gap: 8px;\n }\n\n .nav-tab {\n background: transparent;\n border: none;\n padding: 12px 16px;\n border-radius: 12px;\n cursor: pointer;\n font-weight: 500;\n font-size: 14px;\n color: #4b5563;\n transition: all 0.2s;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 8px;\n }\n\n .nav-tab:hover {\n background: #f3f4f6;\n }\n\n .nav-tab.active {\n background: linear-gradient(135deg, #a855f7 0%, #ec4899 100%);\n color: white;\n box-shadow: 0 4px 12px rgba(168, 85, 247, 0.4);\n }\n\n .nav-tab svg {\n width: 20px;\n height: 20px;\n }\n\n .card {\n background: white;\n border-radius: 24px;\n box-shadow: 0 10px 30px rgba(0,0,0,0.1);\n padding: 32px;\n margin-bottom: 24px;\n }\n\n .card-title {\n font-size: 24px;\n font-weight: 700;\n color: #1f2937;\n margin-bottom: 24px;\n display: flex;\n align-items: center;\n gap: 12px;\n }\n\n .grid {\n display: grid;\n gap: 24px;\n }\n\n .grid-2 {\n grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n }\n\n .form-group {\n margin-bottom: 16px;\n }\n\n .form-label {\n display: block;\n font-size: 14px;\n font-weight: 600;\n color: #374151;\n margin-bottom: 8px;\n }\n\n .form-input {\n width: 100%;\n padding: 12px 16px;\n border: 2px solid #e9d5ff;\n border-radius: 12px;\n font-size: 14px;\n transition: border-color 0.2s;\n }\n\n .form-input:focus {\n outline: none;\n border-color: #a855f7;\n }\n\n .star-rating {\n display: flex;\n gap: 8px;\n }\n\n .star {\n width: 40px;\n height: 40px;\n cursor: pointer;\n fill: #d1d5db;\n transition: all 0.2s;\n }\n\n .star:hover, .star.active {\n fill: #fbbf24;\n transform: scale(1.1);\n }\n\n .mood-selector {\n display: grid;\n grid-template-columns: repeat(4, 1fr);\n gap: 8px;\n }\n\n .mood-btn {\n padding: 12px;\n border: 2px solid #e5e7eb;\n border-radius: 12px;\n background: white;\n cursor: pointer;\n transition: all 0.2s;\n font-size: 24px;\n text-align: center;\n }\n\n .mood-btn:hover {\n border-color: #a855f7;\n }\n\n .mood-btn.active {\n border-color: #a855f7;\n background: #faf5ff;\n transform: scale(1.05);\n }\n\n .mood-label {\n font-size: 11px;\n display: block;\n margin-top: 4px;\n text-transform: capitalize;\n }\n\n .btn-primary {\n width: 100%;\n padding: 16px;\n background: linear-gradient(135deg, #a855f7 0%, #ec4899 100%);\n color: white;\n border: none;\n border-radius: 12px;\n font-size: 16px;\n font-weight: 700;\n cursor: pointer;\n transition: all 0.2s;\n margin-top: 24px;\n }\n\n .btn-primary:hover {\n transform: scale(1.02);\n box-shadow: 0 8px 24px rgba(168, 85, 247, 0.4);\n }\n\n .stat-card {\n background: linear-gradient(135deg, #faf5ff 0%, #fce7f3 100%);\n border-radius: 16px;\n padding: 24px;\n display: flex;\n align-items: flex-start;\n gap: 16px;\n }\n\n .stat-card svg {\n width: 40px;\n height: 40px;\n }\n\n .stat-value {\n font-size: 32px;\n font-weight: 700;\n margin-top: 8px;\n }\n\n .stat-label {\n font-size: 14px;\n color: #6b7280;\n font-weight: 500;\n }\n\n .advice-card {\n border-radius: 16px;\n padding: 24px;\n border: 2px solid #e5e7eb;\n display: flex;\n gap: 16px;\n transition: box-shadow 0.2s;\n }\n\n .advice-card:hover {\n box-shadow: 0 8px 24px rgba(0,0,0,0.1);\n }\n\n .advice-icon {\n background: white;\n border-radius: 12px;\n padding: 12px;\n box-shadow: 0 2px 8px rgba(0,0,0,0.08);\n flex-shrink: 0;\n }\n\n .advice-icon svg {\n width: 24px;\n height: 24px;\n }\n\n .advice-category {\n font-size: 11px;\n font-weight: 600;\n text-transform: uppercase;\n color: #6b7280;\n letter-spacing: 0.5px;\n margin-bottom: 8px;\n }\n\n .advice-title {\n font-weight: 700;\n color: #1f2937;\n margin-bottom: 8px;\n }\n\n .advice-text {\n font-size: 14px;\n color: #4b5563;\n line-height: 1.5;\n }\n\n .info-box {\n background: linear-gradient(135deg, #a855f7 0%, #ec4899 100%);\n color: white;\n border-radius: 24px;\n padding: 32px;\n box-shadow: 0 10px 30px rgba(168, 85, 247, 0.3);\n }\n\n .info-box h3 {\n font-size: 20px;\n font-weight: 700;\n margin-bottom: 16px;\n }\n\n .chart-container {\n position: relative;\n height: 300px;\n margin-bottom: 32px;\n }\n\n .hidden {\n display: none;\n }\n\n @media (max-width: 768px) {\n .sleep-app {\n padding: 12px;\n }\n \n .header {\n padding: 16px;\n }\n \n h1 {\n font-size: 22px;\n }\n \n .nav-tabs {\n grid-template-columns: repeat(2, 1fr);\n }\n \n .card {\n padding: 20px;\n }\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"sleep-app\" id=\"app\">\n <div class=\"container\">\n \n <div class=\"header\">\n <div class=\"header-left\">\n <div class=\"icon-box\">\n <svg viewBox=\"0 0 24 24\">\n <path d=\"M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z\"\/>\n <\/svg>\n <\/div>\n <div>\n <h1>Mon Agenda du Sommeil<\/h1>\n <p class=\"subtitle\">Suivez et am\u00e9liorez votre sommeil<\/p>\n <\/div>\n <\/div>\n <svg width=\"48\" height=\"48\" viewBox=\"0 0 24 24\" fill=\"#fbbf24\">\n <circle cx=\"12\" cy=\"12\" r=\"5\"\/>\n <line x1=\"12\" y1=\"1\" x2=\"12\" y2=\"3\" stroke=\"#fbbf24\" stroke-width=\"2\"\/>\n <line x1=\"12\" y1=\"21\" x2=\"12\" y2=\"23\" stroke=\"#fbbf24\" stroke-width=\"2\"\/>\n <line x1=\"4.22\" y1=\"4.22\" x2=\"5.64\" y2=\"5.64\" stroke=\"#fbbf24\" stroke-width=\"2\"\/>\n <line x1=\"18.36\" y1=\"18.36\" x2=\"19.78\" y2=\"19.78\" stroke=\"#fbbf24\" stroke-width=\"2\"\/>\n <line x1=\"1\" y1=\"12\" x2=\"3\" y2=\"12\" stroke=\"#fbbf24\" stroke-width=\"2\"\/>\n <line x1=\"21\" y1=\"12\" x2=\"23\" y2=\"12\" stroke=\"#fbbf24\" stroke-width=\"2\"\/>\n <line x1=\"4.22\" y1=\"19.78\" x2=\"5.64\" y2=\"18.36\" stroke=\"#fbbf24\" stroke-width=\"2\"\/>\n <line x1=\"18.36\" y1=\"5.64\" x2=\"19.78\" y2=\"4.22\" stroke=\"#fbbf24\" stroke-width=\"2\"\/>\n <\/svg>\n <\/div>\n\n \n <div class=\"nav-tabs\">\n <button class=\"nav-tab active\" onclick=\"switchView('home')\">\n <svg viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z\"\/><\/svg>\n <span>Accueil<\/span>\n <\/button>\n <button class=\"nav-tab\" onclick=\"switchView('add')\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><line x1=\"12\" y1=\"5\" x2=\"12\" y2=\"19\"\/><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/><\/svg>\n <span>Nouvelle Nuit<\/span>\n <\/button>\n <button class=\"nav-tab\" onclick=\"switchView('stats')\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><line x1=\"12\" y1=\"20\" x2=\"12\" y2=\"10\"\/><line x1=\"18\" y1=\"20\" x2=\"18\" y2=\"4\"\/><line x1=\"6\" y1=\"20\" x2=\"6\" y2=\"16\"\/><\/svg>\n <span>Statistiques<\/span>\n <\/button>\n <button class=\"nav-tab\" onclick=\"switchView('advice')\">\n <svg viewBox=\"0 0 24 24\" fill=\"currentColor\"><polygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2\"\/><\/svg>\n <span>Conseils<\/span>\n <\/button>\n <\/div>\n\n \n <div id=\"view-home\" class=\"view\">\n \n <\/div>\n\n <div id=\"view-add\" class=\"view hidden\">\n \n <\/div>\n\n <div id=\"view-stats\" class=\"view hidden\">\n \n <\/div>\n\n <div id=\"view-advice\" class=\"view hidden\">\n \n <\/div>\n <\/div>\n <\/div>\n\n <script>\n \/\/ \u00c9tat de l'application\n let currentView = 'home';\n let sleepEntries = [];\n let charts = {};\n\n \/\/ Charger les donn\u00e9es au d\u00e9marrage (pour WordPress avec localStorage)\n function loadData() {\n const saved = localStorage.getItem('sleepDiaryData');\n if (saved) {\n sleepEntries = JSON.parse(saved);\n } else {\n \/\/ Donn\u00e9es d'exemple\n sleepEntries = [{\n date: '2025-10-08',\n bedTime: '23:00',\n sleepTime: '23:30',\n wakeTime: '07:00',\n riseTime: '07:30',\n nightWakings: 2,\n quality: 3,\n mood: 'moyen',\n notes: ''\n }];\n }\n }\n\n \/\/ Sauvegarder les donn\u00e9es (pour WordPress avec localStorage)\n function saveData() {\n localStorage.setItem('sleepDiaryData', JSON.stringify(sleepEntries));\n }\n\n \/\/ Calculer les m\u00e9triques de sommeil\n function calculateMetrics(entry) {\n const sleepStart = new Date(`2000-01-01T${entry.sleepTime}`);\n let sleepEnd = new Date(`2000-01-01T${entry.wakeTime}`);\n \n if (sleepEnd < sleepStart) {\n sleepEnd = new Date(`2000-01-02T${entry.wakeTime}`);\n }\n \n const totalMinutes = (sleepEnd - sleepStart) \/ (1000 * 60);\n const totalHours = (totalMinutes \/ 60).toFixed(1);\n \n const bedStart = new Date(`2000-01-01T${entry.bedTime}`);\n const sleepStartTime = new Date(`2000-01-01T${entry.sleepTime}`);\n const latency = (sleepStartTime - bedStart) \/ (1000 * 60);\n \n return {\n totalHours,\n latency,\n efficiency: ((totalMinutes \/ 480) * 100).toFixed(0)\n };\n }\n\n \/\/ Changer de vue\n function switchView(view) {\n currentView = view;\n \n \/\/ Mettre \u00e0 jour les tabs\n document.querySelectorAll('.nav-tab').forEach(tab => {\n tab.classList.remove('active');\n });\n event.target.closest('.nav-tab').classList.add('active');\n \n \/\/ Cacher toutes les vues\n document.querySelectorAll('.view').forEach(v => {\n v.classList.add('hidden');\n });\n \n \/\/ Afficher la vue s\u00e9lectionn\u00e9e\n document.getElementById(`view-${view}`).classList.remove('hidden');\n \n \/\/ Rafra\u00eechir le contenu\n renderView(view);\n }\n\n \/\/ Obtenir l'emoji humeur\n function getMoodEmoji(mood) {\n const emojis = {\n excellent: '\ud83d\ude0a',\n bon: '\ud83d\ude42',\n moyen: '\ud83d\ude10',\n mauvais: '\ud83d\ude14'\n };\n return emojis[mood] || '\ud83d\ude10';\n }\n\n \/\/ Rendre une vue\n function renderView(view) {\n const container = document.getElementById(`view-${view}`);\n \n if (view === 'home') {\n renderHomeView(container);\n } else if (view === 'add') {\n renderAddView(container);\n } else if (view === 'stats') {\n renderStatsView(container);\n } else if (view === 'advice') {\n renderAdviceView(container);\n }\n }\n\n \/\/ Vue Accueil\n function renderHomeView(container) {\n const lastEntry = sleepEntries.length > 0 ? sleepEntries[sleepEntries.length - 1] : null;\n const metrics = lastEntry ? calculateMetrics(lastEntry) : null;\n \n container.innerHTML = `\n <div class=\"grid grid-2\">\n <div class=\"info-box\">\n <h3>\ud83c\udf19 Bienvenue !<\/h3>\n <p style=\"font-size: 16px; margin-bottom: 20px; opacity: 0.95;\">\n Cette application vous aide \u00e0 suivre votre sommeil selon les principes des th\u00e9rapies cognitives et comportementales.\n <\/p>\n <div style=\"background: rgba(255,255,255,0.2); backdrop-filter: blur(10px); border-radius: 16px; padding: 20px;\">\n <h4 style=\"font-weight: 600; margin-bottom: 12px;\">Objectifs :<\/h4>\n <div style=\"display: flex; flex-direction: column; gap: 12px;\">\n <div style=\"display: flex; gap: 12px;\">\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><polygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2\"\/><\/svg>\n <span>Identifier vos habitudes de sommeil<\/span>\n <\/div>\n <div style=\"display: flex; gap: 12px;\">\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polyline points=\"23 6 13.5 15.5 8.5 10.5 1 18\"\/><\/svg>\n <span>Am\u00e9liorer progressivement la qualit\u00e9<\/span>\n <\/div>\n <div style=\"display: flex; gap: 12px;\">\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><rect x=\"3\" y=\"4\" width=\"18\" height=\"18\" rx=\"2\" ry=\"2\"\/><line x1=\"16\" y1=\"2\" x2=\"16\" y2=\"6\"\/><line x1=\"8\" y1=\"2\" x2=\"8\" y2=\"6\"\/><line x1=\"3\" y1=\"10\" x2=\"21\" y2=\"10\"\/><\/svg>\n <span>R\u00e9gulariser votre rythme circadien<\/span>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"card\">\n <h3 class=\"card-title\">Derni\u00e8re nuit enregistr\u00e9e<\/h3>\n ${lastEntry ? `\n <div style=\"display: flex; flex-direction: column; gap: 16px;\">\n <div style=\"background: #faf5ff; border-radius: 16px; padding: 16px; display: flex; justify-content: space-between;\">\n <span style=\"color: #4b5563; font-weight: 500;\">Date<\/span>\n <span style=\"color: #7c3aed; font-weight: 700;\">${lastEntry.date}<\/span>\n <\/div>\n <div style=\"background: #eff6ff; border-radius: 16px; padding: 16px; display: flex; justify-content: space-between;\">\n <span style=\"color: #4b5563; font-weight: 500;\">Dur\u00e9e du sommeil<\/span>\n <span style=\"color: #2563eb; font-weight: 700;\">${metrics.totalHours}h<\/span>\n <\/div>\n <div style=\"background: #fce7f3; border-radius: 16px; padding: 16px; display: flex; justify-content: space-between;\">\n <span style=\"color: #4b5563; font-weight: 500;\">Qualit\u00e9<\/span>\n <div>\n ${'\u2605'.repeat(lastEntry.quality)}${'\u2606'.repeat(5 - lastEntry.quality)}\n <\/div>\n <\/div>\n <div style=\"background: #ecfdf5; border-radius: 16px; padding: 16px; display: flex; justify-content: space-between;\">\n <span style=\"color: #4b5563; font-weight: 500;\">Humeur au r\u00e9veil<\/span>\n <span style=\"font-size: 24px;\">${getMoodEmoji(lastEntry.mood)}<\/span>\n <\/div>\n <\/div>\n ` : '<p style=\"text-align: center; color: #6b7280; padding: 32px;\">Aucune nuit enregistr\u00e9e<\/p>'}\n <\/div>\n <\/div>\n `;\n }\n\n \/\/ Vue Ajouter\n function renderAddView(container) {\n const today = new Date().toISOString().split('T')[0];\n \n container.innerHTML = `\n <div class=\"card\">\n <h2 class=\"card-title\">\n <svg width=\"32\" height=\"32\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#7c3aed\" stroke-width=\"2\">\n <line x1=\"12\" y1=\"5\" x2=\"12\" y2=\"19\"\/>\n <line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/>\n <\/svg>\n Enregistrer une nouvelle nuit\n <\/h2>\n \n <form id=\"sleepForm\" onsubmit=\"submitEntry(event)\">\n <div class=\"grid grid-2\">\n <div>\n <div class=\"form-group\">\n <label class=\"form-label\">Date<\/label>\n <input type=\"date\" class=\"form-input\" id=\"date\" value=\"${today}\" required>\n <\/div>\n <div class=\"form-group\">\n <label class=\"form-label\">Heure du coucher<\/label>\n <input type=\"time\" class=\"form-input\" id=\"bedTime\" value=\"22:00\" required>\n <\/div>\n <div class=\"form-group\">\n <label class=\"form-label\">Heure d'endormissement<\/label>\n <input type=\"time\" class=\"form-input\" id=\"sleepTime\" value=\"22:30\" required>\n <\/div>\n <div class=\"form-group\">\n <label class=\"form-label\">Heure de r\u00e9veil<\/label>\n <input type=\"time\" class=\"form-input\" id=\"wakeTime\" value=\"07:00\" required>\n <\/div>\n <\/div>\n \n <div>\n <div class=\"form-group\">\n <label class=\"form-label\">Heure de lever du lit<\/label>\n <input type=\"time\" class=\"form-input\" id=\"riseTime\" value=\"07:30\" required>\n <\/div>\n <div class=\"form-group\">\n <label class=\"form-label\">Nombre de r\u00e9veils nocturnes<\/label>\n <input type=\"number\" class=\"form-input\" id=\"nightWakings\" value=\"0\" min=\"0\" required>\n <\/div>\n <div class=\"form-group\">\n <label class=\"form-label\">Qualit\u00e9 du sommeil<\/label>\n <div class=\"star-rating\" id=\"qualityRating\">\n ${[1,2,3,4,5].map(n => `\n <svg class=\"star ${n <= 3 ? 'active' : ''}\" data-rating=\"${n}\" onclick=\"setRating(${n})\" viewBox=\"0 0 24 24\">\n <polygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2\"\/>\n <\/svg>\n `).join('')}\n <\/div>\n <input type=\"hidden\" id=\"quality\" value=\"3\">\n <\/div>\n <div class=\"form-group\">\n <label class=\"form-label\">Humeur au r\u00e9veil<\/label>\n <div class=\"mood-selector\">\n ${['excellent', 'bon', 'moyen', 'mauvais'].map(mood => `\n <button type=\"button\" class=\"mood-btn ${mood === 'bon' ? 'active' : ''}\" onclick=\"setMood('${mood}')\">\n ${getMoodEmoji(mood)}\n <span class=\"mood-label\">${mood}<\/span>\n <\/button>\n `).join('')}\n <\/div>\n <input type=\"hidden\" id=\"mood\" value=\"bon\">\n <\/div>\n <div class=\"form-group\">\n <label class=\"form-label\">Notes (optionnel)<\/label>\n <textarea class=\"form-input\" id=\"notes\" rows=\"3\" placeholder=\"Stress, repas copieux, etc...\"><\/textarea>\n <\/div>\n <\/div>\n <\/div>\n \n <button type=\"submit\" class=\"btn-primary\">Enregistrer cette nuit<\/button>\n <\/form>\n <\/div>\n `;\n }\n\n \/\/ Vue Statistiques\n function renderStatsView(container) {\n if (sleepEntries.length === 0) {\n container.innerHTML = '<div class=\"card\"><p style=\"text-align: center; color: #6b7280; padding: 32px;\">Enregistrez des nuits pour voir vos statistiques<\/p><\/div>';\n return;\n }\n\n const avgSleep = sleepEntries.reduce((sum, e) => sum + parseFloat(calculateMetrics(e).totalHours), 0) \/ sleepEntries.length;\n const avgQuality = sleepEntries.reduce((sum, e) => sum + e.quality, 0) \/ sleepEntries.length;\n const avgWakings = sleepEntries.reduce((sum, e) => sum + e.nightWakings, 0) \/ sleepEntries.length;\n\n container.innerHTML = `\n <div class=\"card\">\n <h2 class=\"card-title\">\n <svg width=\"32\" height=\"32\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#7c3aed\" stroke-width=\"2\">\n <line x1=\"12\" y1=\"20\" x2=\"12\" y2=\"10\"\/>\n <line x1=\"18\" y1=\"20\" x2=\"18\" y2=\"4\"\/>\n <line x1=\"6\" y1=\"20\" x2=\"6\" y2=\"16\"\/>\n <\/svg>\n \u00c9volution de votre sommeil\n <\/h2>\n \n <div>\n <h3 style=\"font-size: 18px; font-weight: 600; color: #374151; margin-bottom: 16px;\">Dur\u00e9e du sommeil (heures)<\/h3>\n <div class=\"chart-container\">\n <canvas id=\"sleepChart\"><\/canvas>\n <\/div>\n <\/div>\n\n <div>\n <h3 style=\"font-size: 18px; font-weight: 600; color: #374151; margin-bottom: 16px;\">Qualit\u00e9 du sommeil<\/h3>\n <div class=\"chart-container\">\n <canvas id=\"qualityChart\"><\/canvas>\n <\/div>\n <\/div>\n\n <div>\n <h3 style=\"font-size: 18px; font-weight: 600; color: #374151; margin-bottom: 16px;\">R\u00e9veils nocturnes<\/h3>\n <div class=\"chart-container\">\n <canvas id=\"wakingsChart\"><\/canvas>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"card\">\n <h3 style=\"font-size: 20px; font-weight: 700; color: #1f2937; margin-bottom: 20px;\">R\u00e9sum\u00e9<\/h3>\n <div class=\"grid grid-2\" style=\"grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\">\n <div class=\"stat-card\" style=\"background: linear-gradient(135deg, #ede9fe 0%, #faf5ff 100%);\">\n <svg viewBox=\"0 0 24 24\" fill=\"#7c3aed\"><path d=\"M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z\"\/><\/svg>\n <div>\n <div class=\"stat-label\">Dur\u00e9e moyenne<\/div>\n <div class=\"stat-value\" style=\"color: #7c3aed;\">${avgSleep.toFixed(1)}h<\/div>\n <\/div>\n <\/div>\n <div class=\"stat-card\" style=\"background: linear-gradient(135deg, #fce7f3 0%, #fdf2f8 100%);\">\n <svg viewBox=\"0 0 24 24\" fill=\"#ec4899\"><polygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2\"\/><\/svg>\n <div>\n <div class=\"stat-label\">Qualit\u00e9 moyenne<\/div>\n <div class=\"stat-value\" style=\"color: #ec4899;\">${avgQuality.toFixed(1)}\/5<\/div>\n <\/div>\n <\/div>\n <div class=\"stat-card\" style=\"background: linear-gradient(135deg, #dbeafe 0%, #eff6ff 100%);\">\n <svg viewBox=\"0 0 24 24\" fill=\"#3b82f6\"><path d=\"M18 10h-1.26A8 8 0 1 0 9 20h9a5 5 0 0 0 0-10z\"\/><\/svg>\n <div>\n <div class=\"stat-label\">R\u00e9veils moyens<\/div>\n <div class=\"stat-value\" style=\"color: #3b82f6;\">${avgWakings.toFixed(1)}<\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n `;\n\n \/\/ Cr\u00e9er les graphiques apr\u00e8s un court d\u00e9lai\n setTimeout(createCharts, 100);\n }\n\n \/\/ Vue Conseils\n function renderAdviceView(container) {\n const avgQuality = sleepEntries.length > 0 ? sleepEntries.reduce((sum, e) => sum + e.quality, 0) \/ sleepEntries.length : 3;\n const avgSleep = sleepEntries.length > 0 ? sleepEntries.reduce((sum, e) => sum + parseFloat(calculateMetrics(e).totalHours), 0) \/ sleepEntries.length : 7;\n \n const advice = [\n {category: 'Dur\u00e9e', title: 'Dur\u00e9e de sommeil recommand\u00e9e', text: 'Visez 7 \u00e0 9 heures de sommeil par nuit. Les adultes qui dorment moins de 7h ont plus de risques de probl\u00e8mes de sant\u00e9.', color: '#ede9fe', icon: '\ud83c\udf19'},\n {category: 'R\u00e9gularit\u00e9', title: 'Horaires r\u00e9guliers', text: 'Couchez-vous et levez-vous aux m\u00eames heures tous les jours, m\u00eame le week-end. Cette r\u00e9gularit\u00e9 synchronise votre horloge biologique.', color: '#fef3c7', icon: '\u2600\ufe0f'},\n {category: 'Activit\u00e9 physique', title: 'Pratiquer une activit\u00e9 physique', text: 'Faites 150-300 minutes d\\'activit\u00e9 mod\u00e9r\u00e9e par semaine. L\\'exercice am\u00e9liore la qualit\u00e9 du sommeil, mais \u00e9vitez les efforts intenses 3-4h avant le coucher.', color: '#d1fae5', icon: '\ud83c\udfc3'},\n {category: 'Environnement', title: 'Limiter l\\'exposition aux \u00e9crans', text: '\u00c9vitez les \u00e9crans 1-2h avant le coucher. La lumi\u00e8re bleue supprime la production de m\u00e9latonine, l\\'hormone du sommeil.', color: '#e0e7ff', icon: '\ud83d\udcf1'},\n {category: 'Alimentation', title: 'Attention \u00e0 l\\'alimentation', text: '\u00c9vitez la caf\u00e9ine apr\u00e8s 14h et l\\'alcool le soir. Privil\u00e9giez un d\u00eener l\u00e9ger 2-3h avant le coucher, riche en glucides lents.', color: '#fed7aa', icon: '\u2615'},\n {category: 'Environnement', title: 'Optimiser la chambre', text: 'Votre chambre doit \u00eatre calme, sombre et fra\u00eeche (18-19\u00b0C). R\u00e9servez le lit uniquement au sommeil.', color: '#cffafe', icon: '\ud83d\udecf\ufe0f'},\n {category: 'Mental', title: 'G\u00e9rer le stress', text: 'Si vous ruminez au lit, levez-vous et faites une activit\u00e9 calme. Notez vos pr\u00e9occupations en d\u00e9but de soir\u00e9e.', color: '#fce7f3', icon: '\ud83e\uddd8'},\n {category: 'Rythme circadien', title: 'S\\'exposer \u00e0 la lumi\u00e8re du jour', text: 'Exposez-vous \u00e0 la lumi\u00e8re naturelle le matin et pendant la journ\u00e9e. Cela aide \u00e0 r\u00e9guler votre horloge interne.', color: '#fef9c3', icon: '\ud83c\udf1e'}\n ];\n\n container.innerHTML = `\n <div class=\"card\">\n <h2 class=\"card-title\">\n <svg width=\"32\" height=\"32\" viewBox=\"0 0 24 24\" fill=\"#eab308\">\n <polygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2\"\/>\n <\/svg>\n Guide d'hygi\u00e8ne du sommeil\n <\/h2>\n <p style=\"color: #6b7280; margin-bottom: 8px;\">\n Recommandations bas\u00e9es sur vos donn\u00e9es et les principes des th\u00e9rapies cognitives et comportementales\n <\/p>\n <p style=\"color: #9ca3af; font-size: 14px; margin-bottom: 32px;\">\n Inspir\u00e9es des directives internationales et des meilleures pratiques en m\u00e9decine du sommeil\n <\/p>\n \n <div class=\"grid grid-2\">\n ${advice.map(item => `\n <div class=\"advice-card\" style=\"background: ${item.color};\">\n <div class=\"advice-icon\">\n <div style=\"font-size: 24px;\">${item.icon}<\/div>\n <\/div>\n <div style=\"flex: 1;\">\n <div class=\"advice-category\">${item.category}<\/div>\n <div class=\"advice-title\">${item.title}<\/div>\n <div class=\"advice-text\">${item.text}<\/div>\n <\/div>\n <\/div>\n `).join('')}\n <\/div>\n <\/div>\n\n <div class=\"info-box\">\n <h3>\u2b50 Principes cl\u00e9s de la TCC-Insomnie<\/h3>\n <div style=\"display: flex; flex-direction: column; gap: 16px;\">\n <div style=\"background: rgba(255,255,255,0.2); backdrop-filter: blur(10px); border-radius: 12px; padding: 16px;\">\n <h4 style=\"font-weight: 600; margin-bottom: 8px;\">\ud83d\udecf\ufe0f Contr\u00f4le du stimulus<\/h4>\n <p style=\"font-size: 14px; opacity: 0.9;\">\n N'utilisez le lit que pour dormir. Si vous ne dormez pas apr\u00e8s 15-20 minutes, levez-vous et faites une activit\u00e9 calme.\n <\/p>\n <\/div>\n <div style=\"background: rgba(255,255,255,0.2); backdrop-filter: blur(10px); border-radius: 12px; padding: 16px;\">\n <h4 style=\"font-weight: 600; margin-bottom: 8px;\">\u23f0 Restriction du temps au lit<\/h4>\n <p style=\"font-size: 14px; opacity: 0.9;\">\n Limitez votre temps au lit \u00e0 votre temps de sommeil r\u00e9el. Cette technique doit \u00eatre supervis\u00e9e par un professionnel.\n <\/p>\n <\/div>\n <div style=\"background: rgba(255,255,255,0.2); backdrop-filter: blur(10px); border-radius: 12px; padding: 16px;\">\n <h4 style=\"font-weight: 600; margin-bottom: 8px;\">\ud83e\udde0 Restructuration cognitive<\/h4>\n <p style=\"font-size: 14px; opacity: 0.9;\">\n Identifiez et modifiez les pens\u00e9es n\u00e9gatives sur le sommeil. \u00c9vitez les croyances catastrophiques.\n <\/p>\n <\/div>\n <\/div>\n <\/div>\n `;\n }\n\n \/\/ D\u00e9finir la notation\n function setRating(rating) {\n document.getElementById('quality').value = rating;\n document.querySelectorAll('.star').forEach(star => {\n const starRating = parseInt(star.getAttribute('data-rating'));\n if (starRating <= rating) {\n star.classList.add('active');\n } else {\n star.classList.remove('active');\n }\n });\n }\n\n \/\/ D\u00e9finir l'humeur\n function setMood(mood) {\n document.getElementById('mood').value = mood;\n document.querySelectorAll('.mood-btn').forEach(btn => {\n btn.classList.remove('active');\n });\n event.target.closest('.mood-btn').classList.add('active');\n }\n\n \/\/ Soumettre l'entr\u00e9e\n function submitEntry(event) {\n event.preventDefault();\n \n const entry = {\n date: document.getElementById('date').value,\n bedTime: document.getElementById('bedTime').value,\n sleepTime: document.getElementById('sleepTime').value,\n wakeTime: document.getElementById('wakeTime').value,\n riseTime: document.getElementById('riseTime').value,\n nightWakings: parseInt(document.getElementById('nightWakings').value),\n quality: parseInt(document.getElementById('quality').value),\n mood: document.getElementById('mood').value,\n notes: document.getElementById('notes').value\n };\n \n sleepEntries.push(entry);\n saveData();\n \n alert('Nuit enregistr\u00e9e avec succ\u00e8s !');\n \n \/\/ Basculer vers les statistiques\n document.querySelector('.nav-tab[onclick*=\"stats\"]').click();\n }\n\n \/\/ Cr\u00e9er les graphiques\n function createCharts() {\n const labels = sleepEntries.map(e => e.date.slice(5));\n const sleepData = sleepEntries.map(e => parseFloat(calculateMetrics(e).totalHours));\n const qualityData = sleepEntries.map(e => e.quality);\n const wakingsData = sleepEntries.map(e => e.nightWakings);\n\n \/\/ D\u00e9truire les anciens graphiques\n if (charts.sleep) charts.sleep.destroy();\n if (charts.quality) charts.quality.destroy();\n if (charts.wakings) charts.wakings.destroy();\n\n \/\/ Graphique dur\u00e9e du sommeil\n charts.sleep = new Chart(document.getElementById('sleepChart'), {\n type: 'line',\n data: {\n labels: labels,\n datasets: [{\n label: 'Heures',\n data: sleepData,\n borderColor: '#a855f7',\n backgroundColor: 'rgba(168, 85, 247, 0.1)',\n borderWidth: 3,\n tension: 0.3,\n fill: true\n }]\n },\n options: {\n responsive: true,\n maintainAspectRatio: false,\n plugins: {\n legend: { display: false }\n },\n scales: {\n y: { beginAtZero: true }\n }\n }\n });\n\n \/\/ Graphique qualit\u00e9\n charts.quality = new Chart(document.getElementById('qualityChart'), {\n type: 'bar',\n data: {\n labels: labels,\n datasets: [{\n label: 'Qualit\u00e9',\n data: qualityData,\n backgroundColor: '#ec4899',\n borderRadius: 8\n }]\n },\n options: {\n responsive: true,\n maintainAspectRatio: false,\n plugins: {\n legend: { display: false }\n },\n scales: {\n y: { beginAtZero: true, max: 5 }\n }\n }\n });\n\n \/\/ Graphique r\u00e9veils\n charts.wakings = new Chart(document.getElementById('wakingsChart'), {\n type: 'bar',\n data: {\n labels: labels,\n datasets: [{\n label: 'R\u00e9veils',\n data: wakingsData,\n backgroundColor: '#3b82f6',\n borderRadius: 8\n }]\n },\n options: {\n responsive: true,\n maintainAspectRatio: false,\n plugins: {\n legend: { display: false }\n },\n scales: {\n y: { beginAtZero: true }\n }\n }\n });\n }\n\n \/\/ Initialisation\n document.addEventListener('DOMContentLoaded', function() {\n loadData();\n renderView('home');\n });\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Mon Agenda du Sommeil Mon Agenda du Sommeil Suivez et am\u00e9liorez votre sommeil Accueil Nouvelle Nuit Statistiques Conseils<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-5101","page","type-page","status-publish","hentry"],"aioseo_notices":[],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/iacca.net\/index.php\/wp-json\/wp\/v2\/pages\/5101","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/iacca.net\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/iacca.net\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/iacca.net\/index.php\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/iacca.net\/index.php\/wp-json\/wp\/v2\/comments?post=5101"}],"version-history":[{"count":0,"href":"https:\/\/iacca.net\/index.php\/wp-json\/wp\/v2\/pages\/5101\/revisions"}],"wp:attachment":[{"href":"https:\/\/iacca.net\/index.php\/wp-json\/wp\/v2\/media?parent=5101"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}