https://yannick.services/diagnostics/Recent content in Diagnostics on yannick.servicesHugo -- gohugo.iofrcontact@yannick.services (Yannick)contact@yannick.services (Yannick)https://yannick.services/diagnostics/diagnostic-maturite-numerique/Mon, 01 Jan 0001 00:00:00 +0000contact@yannick.services (Yannick)https://yannick.services/diagnostics/diagnostic-maturite-numerique/<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.7/dist/chart.umd.min.js"></script> <style> .diag-v2 { max-width: 680px; margin: 0 auto; } .diag-v2-btn { display: block; width: 100%; min-height: 44px; padding: 0.75rem 1rem; border: 1px solid #d1d5db; border-radius: 0.5rem; background: #fff; text-align: left; font-size: 0.9375rem; line-height: 1.5; color: #1f2937; cursor: pointer; transition: border-color 0.15s, background 0.15s, transform 0.1s, box-shadow 0.15s; } .diag-v2-btn:hover { border-color: #007acc; background: #f0f9ff; transform: translateY(-1px); box-shadow: 0 2px 8px rgba(0,122,204,0.08); } .diag-v2-btn-selected { border-color: #007acc; background: #e6f4fc; color: #005fa3; font-weight: 500; } .diag-v2-btn-primary { background: #007acc; border-color: #007acc; color: #fff; text-align: center; font-weight: 600; font-size: 1rem; padding: 0.875rem 1.5rem; } .diag-v2-btn-primary:hover { background: #005fa3; border-color: #005fa3; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,122,204,0.25); } .diag-v2-btn-secondary { background: #f9fafb; border-color: #d1d5db; text-align: center; font-weight: 500; } .diag-v2-btn-secondary:hover { border-color: #007acc; color: #007acc; } .diag-v2-btn-link { border: none; background: transparent; color: #6b7280; padding: 0.5rem 0; font-size: 0.875rem; text-align: left; } .diag-v2-btn-link:hover { color: #007acc; transform: none; box-shadow: none; } .diag-v2-progress { width: 100%; height: 6px; background: #e5e7eb; border-radius: 3px; overflow: hidden; margin-bottom: 1.5rem; } .diag-v2-progress-fill { height: 100%; background: #007acc; border-radius: 3px; transition: width 0.3s ease; } .diag-v2-badge { display: inline-block; padding: 0.25rem 0.75rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.02em; } .diag-v2-badge-brand { background: #e6f4fc; color: #005fa3; } .diag-v2-badge-success { background: #d1fae5; color: #065f46; } .diag-v2-badge-warning { background: #fef3c7; color: #92400e; } .diag-v2-badge-danger { background: #fee2e2; color: #991b1b; } .diag-v2-badge-neutral { background: #f3f4f6; color: #374151; } .diag-v2-card { border: 1px solid #e5e7eb; border-radius: 0.75rem; background: #fff; overflow: hidden; } .diag-v2-alert { padding: 0.75rem 1rem; border-radius: 0.5rem; font-size: 0.875rem; } .diag-v2-alert-danger { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; } .diag-v2-input { width: 100%; padding: 0.625rem 0.875rem; border: 1px solid #d1d5db; border-radius: 0.5rem; font-size: 0.9375rem; color: #1f2937; transition: border-color 0.15s, box-shadow 0.15s; } .diag-v2-input:focus { border-color: #007acc; outline: none; box-shadow: 0 0 0 3px rgba(0,122,204,0.12); } .diag-v2-score-bar { height: 6px; border-radius: 3px; background: #e5e7eb; overflow: hidden; } .diag-v2-score-bar-fill { height: 100%; border-radius: 3px; background: #007acc; transition: width 0.4s ease; } .diag-v2-bar-danger { background: #ef4444; } .diag-v2-bar-warning { background: #f59e0b; } .diag-v2-bar-success { background: #10b981; } .diag-v2-bar-brand { background: #0ea5e9; } .diag-v2-radar { width: 100%; max-width: 260px; } .diag-v2-btn:focus-visible { outline: 2px solid #007acc; outline-offset: 2px; box-shadow: 0 0 0 4px rgba(0,122,204,0.15); } .diag-v2-btn-primary:focus-visible { outline-color: #005fa3; box-shadow: 0 0 0 4px rgba(0,95,163,0.25); } .diag-v2-input:focus-visible { outline: 2px solid #007acc; outline-offset: 1px; } .diag-v2-btn-selecting { border-color: #007acc; background: #e6f4fc; color: #005fa3; font-weight: 500; transform: scale(0.98); box-shadow: 0 0 0 2px rgba(0,122,204,0.2); } .diag-v2-dimension-badge { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.25rem 0.625rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 500; background: #f3f4f6; color: #374151; margin-bottom: 0.5rem; } .diag-v2-fade { animation: diagV2FadeIn 0.25s ease-out; } .diag-v2-transition-enter { transition: opacity 0.2s ease-out, transform 0.2s ease-out; } .diag-v2-transition-enter-start { opacity: 0; transform: translateY(8px); } .diag-v2-transition-enter-end { opacity: 1; transform: translateY(0); } @keyframes diagV2FadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .diag-v2-spinner { width: 2rem; height: 2rem; border: 3px solid #e5e7eb; border-top-color: #007acc; border-radius: 50%; animation: diagV2Spin 0.7s linear infinite; } @keyframes diagV2Spin { to { transform: rotate(360deg); } } .dark .diag-v2-btn { background: #1f2937; border-color: #374151; color: #f3f4f6; } .dark .diag-v2-btn:hover { background: #1e3a5f; border-color: #4db8e8; } .dark .diag-v2-btn-selected { background: #1e3a5f; border-color: #4db8e8; color: #93c5fd; } .dark .diag-v2-btn-primary { background: #0284c7; border-color: #0284c7; } .dark .diag-v2-btn-primary:hover { background: #0369a1; } .dark .diag-v2-card { background: #1f2937; border-color: #374151; } .dark .diag-v2-input { background: #1f2937; border-color: #374151; color: #f3f4f6; } .dark .diag-v2-input:focus { border-color: #4db8e8; box-shadow: 0 0 0 3px rgba(77,184,232,0.15); } .dark .diag-v2-progress { background: #374151; } .dark .diag-v2-score-bar { background: #374151; } .dark .diag-v2-alert-danger { background: #451a1a; border-color: #7f1d1d; color: #fca5a5; } .dark .diag-v2-badge-brand { background: #1e3a5f; color: #93c5fd; } .dark .diag-v2-badge-success { background: #064e3b; color: #6ee7b7; } .dark .diag-v2-badge-warning { background: #78350f; color: #fcd34d; } .dark .diag-v2-badge-danger { background: #7f1d1d; color: #fca5a5; } .dark .diag-v2-badge-neutral { background: #374151; color: #d1d5db; } .dark .diag-v2-btn:focus-visible { outline-color: #4db8e8; box-shadow: 0 0 0 4px rgba(77,184,232,0.2); } .dark .diag-v2-btn-primary:focus-visible { outline-color: #0284c7; box-shadow: 0 0 0 4px rgba(2,132,199,0.3); } .dark .diag-v2-input:focus-visible { outline-color: #4db8e8; } .dark .diag-v2-btn-selecting { background: #1e3a5f; border-color: #4db8e8; color: #93c5fd; box-shadow: 0 0 0 2px rgba(77,184,232,0.25); } .dark .diag-v2-dimension-badge { background: #374151; color: #d1d5db; } .diag-v2-results { display: flex; flex-direction: column; gap: 1rem; } .diag-v2-results-section { display: flex; flex-direction: column; gap: 0.5rem; } .diag-v2-result-card { border: 1px solid #e5e7eb; border-radius: 0.75rem; background: #fff; padding: 1rem 1.25rem; display: flex; flex-direction: column; gap: 0.5rem; box-shadow: 0 1px 3px rgba(0,0,0,0.04); } .diag-v2-result-card-label { font-size: 0.6875rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; color: #9ca3af; margin-bottom: 0.25rem; } .diag-v2-dim-row { display: flex; align-items: center; justify-content: space-between; padding: 0.5rem 0.75rem; border: 1px solid #e5e7eb; border-radius: 0.5rem; background: #fff; } .diag-v2-share-row { display: flex; align-items: center; gap: 0.5rem; } .diag-v2-share-input { flex: 1; min-width: 0; padding: 0.375rem 0.5rem; border: 1px solid #e5e7eb; border-radius: 0.375rem; font-size: 0.75rem; color: #6b7280; background: #f9fafb; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .diag-v2-share-btn { flex-shrink: 0; padding: 0.375rem 0.75rem; border: 1px solid #d1d5db; border-radius: 0.375rem; font-size: 0.75rem; font-weight: 500; color: #374151; background: #fff; cursor: pointer; white-space: nowrap; } .diag-v2-share-btn:hover { border-color: #007acc; color: #007acc; } .diag-v2-benefice-list { display: flex; flex-direction: column; gap: 0.375rem; margin-top: 0.25rem; } .diag-v2-benefice-item { display: flex; align-items: flex-start; gap: 0.5rem; font-size: 0.875rem; line-height: 1.25rem; color: #374151; } .diag-v2-benefice-check { flex-shrink: 0; color: #16a34a; } .diag-v2-email-sent { display: flex; align-items: center; justify-content: center; gap: 0.5rem; font-size: 0.875rem; color: #16a34a; } .diag-v2-cta-section { display: flex; flex-direction: column; gap: 1rem; margin-top: 1.5rem; } .dark .diag-v2-result-card { background: #1f2937; border-color: #374151; } .dark .diag-v2-result-card-label { color: #6b7280; } .dark .diag-v2-dim-row { background: #1f2937; border-color: #374151; } .dark .diag-v2-share-input { background: #111827; border-color: #374151; color: #9ca3af; } .dark .diag-v2-share-btn { background: #1f2937; border-color: #374151; color: #d1d5db; } .dark .diag-v2-benefice-item { color: #d1d5db; } .dark .diag-v2-benefice-check { color: #6ee7b7; } .dark .diag-v2-email-sent { color: #6ee7b7; } </style> <div x-data="diagnosticMaturiteV2()" class="diag-v2"> <template x-if="state === 'intro'"> <div class="flex flex-col gap-6 text-center diag-v2-fade"> <div> <h2 class="text-2xl/tight font-bold text-neutral-900 dark:text-neutral-100 mb-2">Évaluez la maturité numérique de votre PME</h2> <p class="text-base/6 text-neutral-600 dark:text-neutral-400">14 questions pour obtenir un score personnalisé, des recommandations concrètes et une estimation de votre gain potentiel.</p>