/* === Navigation grille 1..N === */
      .question-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 8px; margin: 10px 0 16px 0; }
      .qnum { border-radius: 10px; border: 2px solid #cfd8dc; padding: 6px 0; font-weight: 600; }
      .qnum.current { background-color: #d0e7ff; border-color: #1e88e5; }
      .qnum.answered { background-color: #d8f5d0; border-color: #2ecc71; }
      .qnum.flagged { background-color: #ffe4bc; border-color: #f39c12; }
      .qnum:hover { filter: brightness(0.95); }

      body { background-color: #eef6fb; font-size: 18px; font-family: 'Inter', sans-serif; }
      .correct { color: red; font-weight: bold; } /* Style pour les réponses fausses */
      /* Styles pour les boutons de choix - non directement utilisés avec checkboxGroupInput */
      /* .btn-choice { display: block; background-color: #ffffff; padding: 10px; margin: 5px 0;
                     border-radius: 10px; border: 2px solid #007acc; cursor: pointer; }
      .btn-choice:hover { background-color: #cceeff; } */
      .shiny-input-container { margin-bottom: 15px; } /* Espacement pour les inputs */
      .title-panel { text-align: center; color: #0056b3; }
      .sidebar-panel { background-color: #ffffff; padding: 20px; border-radius: 10px; box-shadow: 0 4px 8px rgba(0,0,0,0.1); }
      .main-panel { background-color: #ffffff; padding: 20px; border-radius: 10px; box-shadow: 0 4px 8px rgba(0,0,0,0.1); }
      .btn-primary { background-color: #007bff; border-color: #007bff; color: white; border-radius: 8px; padding: 10px 20px;}
      .btn-primary:hover { background-color: #0056b3; border-color: #0056b3; }
      .btn-success { background-color: #28a745; border-color: #28a745; color: white; border-radius: 8px; padding: 10px 20px;}
      .btn-success:hover { background-color: #218838; border-color: #1e7e34; }
      .btn-info { background-color: #17a2b8; border-color: #17a2b8; color: white; border-radius: 8px; padding: 10px 20px;}
      .btn-info:hover { background-color: #138496; border-color: #117a8b; }
      /* Styles pour l'affichage du minuteur */
      .timer-display {
        font-size: 2.5em;
        font-weight: bold;
        text-align: center;
        margin: 20px 0;
        padding: 15px;
        border-radius: 10px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
        box-shadow: 0 4px 15px rgba(0,0,0,0.2);
      }
      .timer-warning {
        background: linear-gradient(135deg, #ff6b6b 0%, #ee5a24 100%) !important;
        animation: pulse 1s infinite; /* Animation de pulsation pour l'alerte */
      }
      @keyframes pulse {
        0% { transform: scale(1); }
        50% { transform: scale(1.05); }
        100% { transform: scale(1); }
      }
      /* Styles pour les cartes de question */
      .question-card {
        background: white;
        border-radius: 15px;
        padding: 25px;
        margin: 20px 0;
        box-shadow: 0 4px 20px rgba(0,0,0,0.1);
        border-left: 5px solid #007bff; /* Bordure colorée à gauche */
      }
      .question-card h3 {
        color: #2c3e50;
        margin-bottom: 20px;
      }
      .question-card div.shiny-input-checkboxgroup { /* Style pour le conteneur des choix */
        font-size: 1.1em;
        line-height: 1.5;
      }
      .question-card .shiny-input-checkboxgroup .checkbox { /* Style pour chaque choix individuel */
        background: #f8f9fa;
        padding: 12px;
        margin-bottom: 8px;
        border-radius: 8px;
        border: 1px solid #e9ecef;
        transition: background-color 0.2s ease;
      }
      .question-card .shiny-input-checkboxgroup .checkbox:hover {
        background-color: #e3f2fd;
      }
      /* Styles pour le podium */
      .podium-container {
        display: flex;
        justify-content: center;
        align-items: flex-end;
        margin-top: 30px;
        font-family: 'Arial', sans-serif;
      }
      .podium-place {
        text-align: center;
        margin: 0 15px; /* Augmenté l'espacement */
        padding: 20px;
        border-radius: 12px; /* Plus arrondi */
        box-shadow: 0 6px 20px rgba(0,0,0,0.15); /* Ombre plus prononcée */
        position: relative;
        transition: all 0.3s ease-in-out;
      }
      .podium-place h4 {
        font-size: 1.8em; /* Plus grand */
        margin-bottom: 10px;
        color: #2c3e50;
      }
      .podium-place p {
        font-size: 1.1em;
        color: #555;
      }
      .podium-rank-icon {
        font-size: 3em; /* Icône plus grande */
        margin-bottom: 10px;
        display: block; /* S'assure que l'icône est sur sa propre ligne */
      }
      /* Hauteurs et couleurs spécifiques pour chaque place */
      .podium-first {
        background-color: #FFD700; /* Or */
        border-bottom: 5px solid #DAA520;
        height: 220px; /* Plus grand */
        padding-top: 50px;
      }
      .podium-second {
        background-color: #C0C0C0; /* Argent */
        border-bottom: 5px solid #A9A9A9;
        height: 180px; /* Taille moyenne */
        padding-top: 40px;
      }
      .podium-third {
        background-color: #CD7F32; /* Bronze */
        border-bottom: 5px solid #8B4513;
        height: 140px; /* Plus petit */
        padding-top: 30px;
      }
      /* Nouveaux styles pour l'espacement */
      .ranking-table-container {
        margin-top: 30px; /* Espacement au-dessus du tableau de classement */
      }
      .error-report-container {
        margin-top: 40px; /* Espacement au-dessus du rapport d'erreurs */
      }

      /* Styles for Chat Tab */
      .chat-container {
        display: flex;
        flex-direction: column;
        height: 600px; /* Fixed height for chat window */
        border: 1px solid #ccc;
        border-radius: 10px;
        overflow: hidden;
        background-color: #f9f9f9;
        box-shadow: 0 2px 10px rgba(0,0,0,0.05);
      }
      .chat-messages {
        flex-grow: 1;
        overflow-y: auto;
        padding: 15px;
        background-color: #eef6fb; /* Lighter background for messages */
      }
      .chat-message {
        margin-bottom: 10px;
        padding: 8px 12px;
        border-radius: 15px;
        max-width: 80%;
        word-wrap: break-word;
      }
      .chat-message.self {
        align-self: flex-end;
        background-color: #007bff;
        color: white;
        margin-left: auto;
        border-bottom-right-radius: 2px;
      }
      .chat-message.other {
        align-self: flex-start;
        background-color: #ffffff;
        color: #333;
        border: 1px solid #ddd;
        border-bottom-left-radius: 2px;
      }
      .message-sender {
        font-weight: bold;
        margin-bottom: 2px;
        font-size: 0.9em;
      }
      .message-timestamp {
        font-size: 0.7em;
        color: #888;
        margin-top: 5px;
        text-align: right;
      }
      .chat-input {
        display: flex;
        padding: 10px;
        border-top: 1px solid #ccc;
        background-color: #ffffff;
      }
      .chat-input textarea {
        flex-grow = 1;
        border: 1px solid #ddd;
        border-radius: 20px;
        padding: 8px 15px;
        resize: none;
        margin-right: 10px;
        font-size: 1em;
      }
      .chat-input button {
        border-radius: 20px;
        padding: 8px 20px;
        font-size: 1em;
      }