body {
           margin: 0;
           padding-bottom: 80px;
           font-family: Arial, sans-serif;
       }

       #score-bar {
           position: fixed;
           bottom: 20px;
           left: 50%;
           transform: translateX(-50%);
           background: #111;
           color: #fff;
           padding: 12px 24px;
           border-radius: 12px;
           box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
           font-size: 18px;
           font-weight: bold;
           z-index: 1000;
       }

       :root {
           /* 🎨 Couleurs principales */
           --primary: #93339E;
           --primary-light: #C999CE;
           --accent: #FF0099;

           /* 🔵 Gamme bleu */
           --blue-light: #1681F5;
           --blue: #1579E6;
           --blue-medium: #0366D0;
           --blue-dark: #0E3C6E;

           /* 🟡 / 🟢 */
           --warning: #F7B500;
           --success: #00B840;

           /* ⚪ Neutres */
           --bg: #f9fafb;
           --card: #ffffff;
           --border: #e5e7eb;
           --text: #1f2937;
           --text-light: #6b7280;
       }

       /* RESET */
       body {
           margin: 0;
           font-family: "Segoe UI", Roboto, sans-serif;
           background: var(--bg);
           color: var(--text);
           padding: 40px;
           padding-bottom: 100px;
       }

       /* TABLE */
       table {
           width: 100%;
           border-collapse: collapse;
           background: var(--card);
           border-radius: 12px;
           overflow: hidden;
           box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
       }

       /* HEADER */
       thead {
           background: linear-gradient(90deg, var(--primary), var(--accent));
           color: white;
       }

       th {
           padding: 14px;
           text-align: left;
           font-weight: 600;
           font-size: 14px;
       }

       /* ROWS */
       td {
           padding: 14px;
           border-bottom: 1px solid var(--border);
           vertical-align: top;
           font-size: 14px;
       }

       /* SECTION TITLES */
       tr td[colspan] {
           background: var(--primary-light);
           color: #fff;
           font-weight: bold;
           text-transform: uppercase;
           letter-spacing: 0.5px;
       }

       /* HOVER */
       tbody tr:hover {
           background: rgba(21, 121, 230, 0.05);
       }

       /* CHECKBOX */
       input[type="checkbox"] {
           transform: scale(1.2);
           cursor: pointer;
       }

       /* LISTS */
       ul {
           margin: 8px 0 0;
           padding-left: 18px;
       }

       li {
           margin-bottom: 4px;
           color: var(--text-light);
       }

       /* BADGES (optionnel si tu veux styliser les catégories plus tard) */
       .badge {
           padding: 4px 8px;
           border-radius: 6px;
           font-size: 12px;
           font-weight: 500;
       }

       .badge-blue {
           background: var(--blue-light);
           color: white;
       }

       .badge-purple {
           background: var(--primary);
           color: white;
       }

       .badge-green {
           background: var(--success);
           color: white;
       }

       .badge-yellow {
           background: var(--warning);
           color: black;
       }

       /* SCORE BAR (sticky façon ChatGPT) */
       #score-bar {
           position: fixed;
           bottom: 20px;
           left: 50%;
           transform: translateX(-50%);
           background: linear-gradient(135deg, var(--blue-dark), var(--primary));
           color: white;
           padding: 14px 28px;
           border-radius: 14px;
           font-size: 18px;
           font-weight: 600;
           box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
           display: flex;
           align-items: center;
           gap: 20px;
           z-index: 1000;
       }

       /* SCORE dynamique couleur */
       #score {
           font-size: 22px;
           font-weight: bold;
           color: var(--warning);
       }

       /* Bouton dans la score bar */
       #bouton {
           background: white;
           color: var(--primary);
           border: none;
           padding: 8px 16px;
           border-radius: 8px;
           font-weight: 600;
           cursor: pointer;
           transition: all 0.3s ease;
           font-size: 14px;
       }

       #bouton:hover {
           transform: scale(1.05);
           box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
       }

       /* ANIMATION (bonus UX) */
       #score-bar.updated {
           animation: bump 0.3s ease;
       }

       @keyframes bump {
           0% {
               transform: translateX(-50%) scale(1);
           }

           50% {
               transform: translateX(-50%) scale(1.1);
           }

           100% {
               transform: translateX(-50%) scale(1);
           }
       }

       /* FORMULAIRE DE CONTACT - Caché par défaut, centré */
       #formulaire {
           position: fixed;
           top: 0;

           width: 100%;
           height: 100%;
           background: rgba(0, 0, 0, 0.6);
           display: none;
           justify-content: center;
           align-items: center;
           z-index: 2000;
           backdrop-filter: blur(4px);
       }

       .contact-form {
           background: white;
           padding: 30px 40px;
           border-radius: 20px;
           width: 90%;
           max-width: 500px;
           box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
           animation: fadeInUp 0.3s ease;
       }

       @keyframes fadeInUp {
           from {
               opacity: 0;
               transform: translateY(30px);
           }

           to {
               opacity: 1;
               transform: translateY(0);
           }
       }

       .contact-form h3 {
           margin-top: 0;
           color: var(--primary);
           font-size: 24px;
           margin-bottom: 10px;
       }

       .contact-form p {
           color: var(--text-light);
           margin-bottom: 20px;
           font-size: 14px;
       }

       .form-group {
           margin-bottom: 20px;
       }

       .form-group label {
           display: block;
           margin-bottom: 8px;
           font-weight: 600;
           color: var(--text);
       }

       .form-group input,
       .form-group textarea {
           width: 100%;
           padding: 10px 12px;
           border: 1px solid var(--border);
           border-radius: 8px;
           font-size: 14px;
           font-family: inherit;
           transition: border-color 0.2s;
       }

       .form-group input:focus,
       .form-group textarea:focus {
           outline: none;
           border-color: var(--primary);
           box-shadow: 0 0 0 3px rgba(147, 51, 158, 0.1);
       }

       .form-group textarea {
           resize: vertical;
           min-height: 80px;
       }

       .form-actions {
           display: flex;
           gap: 12px;
           justify-content: flex-end;
       }

       .form-actions button {
           padding: 10px 20px;
           border: none;
           border-radius: 8px;
           font-weight: 600;
           cursor: pointer;
           transition: all 0.2s;
       }

       .btn-submit {
           background: var(--primary);
           color: white;
       }

       .btn-submit:hover {
           background: var(--blue-dark);
           transform: translateY(-2px);
       }

       .btn-cancel {
           background: #e5e7eb;
           color: var(--text);
       }

       .btn-cancel:hover {
           background: #d1d5db;
       }

       .success-message {
           background: var(--success);
           color: white;
           padding: 12px;
           border-radius: 8px;
           text-align: center;
           margin-bottom: 20px;
           animation: fadeIn 0.3s;
       }

       @keyframes fadeIn {
           from {
               opacity: 0;
           }

           to {
               opacity: 1;
           }
       }