/* SynApp - styles page principale (extraits de index.html) */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: linear-gradient(135deg, #fdfdfd -100%, #4b71a2 100%);
            min-height: 100vh;
            color: #333;
        }

        .navbar {
            background: linear-gradient(135deg, #6378da 0%, #3b59df 100%);
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            border: none;
        }

        .navbar-brand {
            font-weight: 700;
            font-size: 1.5rem;
            margin-left: 24px;
            margin-right: 30px;
            padding-left: 8px;
            padding-right: 8px;
            padding-top: 4px;
            padding-bottom: 4px;
        }

        /* Navbar en pleine largeur : logo SynApp colle a gauche */
        #app-main-navbar>.container-fluid {
            max-width: none;
            margin: 0;
            padding-left: 10px;
            padding-right: 10px;
        }

        .container-fluid {
            max-width: 1600px;
            margin: 0 auto;
            padding: 20px;
        }

        .card {
            background: white;
            border: none;
            border-radius: 15px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            margin-bottom: 25px;
            overflow: hidden;
            transition: all 0.3s ease;
        }

        /* Permettre au menu déroulant batterie de dépasser la card (évite que le bas soit coupé) */
        .card.battery-selection-card {
            overflow: visible;
            position: relative;
            z-index: 2;
        }

        /* Menu déroulant batterie au-dessus de la section "Vider le cache" */
        .battery-selection-card .dropdown-menu {
            z-index: 1050;
        }

        /* Section "Vider le cache" en arrière-plan par rapport au menu batterie */
        .card.cache-actions-card {
            position: relative;
            z-index: 1;
        }

        .card:hover {
            transform: translateY(-2px);
            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
        }

        .card-header {
            background: linear-gradient(135deg, #6378da 0%, #3b59df 100%);
            color: white;
            border: none;
            font-weight: 600;
            padding: 20px 25px;
            border-radius: 15px 15px 0 0 !important;
        }

        /* Plus spécifique que .card-header seul : écrase le bleu global pour le panneau Rendez-vous */
        .card-header.agenda-appointments-card-header {
            background: linear-gradient(135deg, #eef0f3 0%, #e2e5ea 100%);
            color: #2d3339;
            border-bottom: 1px solid #d8dde3;
        }

        .card-header.agenda-appointments-card-header .mb-0 {
            color: #2d3339;
        }

        /* Modale Créer un groupe : même dégradé bleu SynApp que la navbar et les card-header */
        #createGroupModal .modal-content {
            border: none;
            border-radius: 15px;
            overflow: hidden;
        }

        #createGroupModal .modal-header {
            background: linear-gradient(135deg, #6378da 0%, #3b59df 100%);
            color: white;
            border-bottom: none;
        }

        /* Modale Ajouter un créneau : même bleu que la bannière */
        #addSlotModal .modal-header {
            background: linear-gradient(135deg, #6378da 0%, #3b59df 100%);
            color: white;
            border-bottom: none;
        }

        #addSlotModal .slot-task-options {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }

        #addSlotModal .slot-task-check {
            position: absolute;
            opacity: 0;
            pointer-events: none;
        }

        #addSlotModal .slot-task-pill {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            border: 1px solid #d0d7f6;
            border-radius: 999px;
            background: #f8faff;
            color: #334155;
            padding: 6px 12px;
            font-size: 0.82rem;
            font-weight: 600;
            text-transform: none;
            letter-spacing: 0;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        #addSlotModal .slot-task-check:checked+.slot-task-pill {
            background: linear-gradient(135deg, #6378da 0%, #3b59df 100%);
            color: #fff;
            border-color: #3b59df;
            box-shadow: 0 3px 10px rgba(59, 89, 223, 0.3);
        }

        .card-body {
            padding: 25px;
        }

        .btn {
            padding: 12px 24px;
            border: none;
            border-radius: 8px;
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .btn-primary {
            background: linear-gradient(135deg, #6378da 0%, #3b59df 100%);
            color: white;
        }

        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(99, 120, 218, 0.4);
            background: linear-gradient(135deg, #6378da 0%, #3b59df 100%);
            color: white;
        }

        .btn-outline-primary {
            border: 2px solid #6378da;
            color: #6378da;
            background: transparent;
            transition: all 0.3s ease;
        }

        .btn-outline-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(99, 120, 218, 0.3);
            background: linear-gradient(135deg, #6378da 0%, #3b59df 100%);
            color: white;
            border-color: #6378da;
        }

        .btn-check:checked+.btn-outline-primary {
            background: linear-gradient(135deg, #6378da 0%, #3b59df 100%);
            color: white;
            border-color: #6378da;
            box-shadow: 0 5px 15px rgba(99, 120, 218, 0.4);
        }

        /* Styles personnalisés pour les boutons de set */
        #btn-view-set:hover {
            background-color: #16a34a !important;
            border-color: #16a34a !important;
            color: white !important;
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(22, 163, 74, 0.3);
        }

        #btn-edit-set:hover {
            background-color: #fbbf24 !important;
            border-color: #fbbf24 !important;
            color: white !important;
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(251, 191, 36, 0.3);
        }

        #btn-delete-set:hover {
            background-color: #dc2626 !important;
            border-color: #dc2626 !important;
            color: white !important;
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(220, 38, 38, 0.3);
        }

        .btn-success {
            background: linear-gradient(135deg, #48bb78 0%, #38a169 100%);
            color: white;
        }

        .btn-success:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(72, 187, 120, 0.4);
            background: linear-gradient(135deg, #48bb78 0%, #38a169 100%);
            color: white;
        }

        .btn-warning {
            background: linear-gradient(135deg, #ed8936 0%, #dd6b20 100%);
            color: white;
        }

        .btn-warning:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(237, 137, 54, 0.4);
            background: linear-gradient(135deg, #ed8936 0%, #dd6b20 100%);
            color: white;
        }

        .form-control,
        .form-select {
            padding: 12px;
            border: 2px solid #e2e8f0;
            border-radius: 8px;
            font-size: 14px;
            transition: border-color 0.3s ease;
            background: white;
        }

        .form-control:focus,
        .form-select:focus {
            border-color: #6378da;
            box-shadow: 0 0 0 0.2rem rgba(99, 120, 218, 0.25);
            outline: none;
        }

        .form-label {
            font-weight: 500;
            color: #4a5568;
            margin-bottom: 8px;
        }

        .alert {
            border: none;
            border-radius: 8px;
            padding: 15px;
            margin: 10px 0;
        }

        .alert-success {
            background: #c6f6d5;
            color: #2f855a;
            border: 1px solid #9ae6b4;
        }

        .alert-danger {
            background: #fed7d7;
            color: #c53030;
            border: 1px solid #feb2b2;
        }

        .alert-warning {
            background: #fff3cd;
            color: #856404;
            border: 1px solid #ffeaa7;
        }

        .alert-info {
            background: #bee3f8;
            color: #2c5282;
            border: 1px solid #90cdf4;
        }

        .table {
            font-size: 0.9rem;
            border-radius: 8px;
            overflow: hidden;
        }

        .table th {
            background: #e3f2fd;
            color: #333;
            border: none;
            font-weight: 600;
            padding: 15px 12px;
            position: sticky;
            top: 0;
            z-index: 10;
        }

        .table td {
            padding: 12px;
            border-color: #e2e8f0;
            vertical-align: middle;
        }

        .table tbody tr:hover {
            background-color: #f8f9fa;
        }

        /* Réduction de la taille de police pour les tableaux de normes */
        #excel-table-container .table {
            font-size: 0.75rem;
            /* Réduit de 0.9rem à 0.75rem */
        }

        #excel-table-container .table th {
            font-size: 0.75rem;
            /* Réduit les en-têtes */
            padding: 8px 10px;
            /* Réduit le padding */
        }

        #excel-table-container .table td {
            font-size: 0.75rem;
            /* Réduit les cellules */
            padding: 6px 8px;
            /* Réduit le padding */
        }

        /* Réduction de la taille de police pour le tableau Données du Patient */
        #patient-data-container .table {
            font-size: 0.75rem;
            /* Réduit la taille générale du tableau */
        }

        #patient-data-container .table th {
            font-size: 0.75rem;
            /* Réduit les en-têtes */
            padding: 8px 10px;
            /* Réduit le padding */
        }

        #patient-data-container .table td {
            font-size: 0.75rem;
            /* Réduit les cellules */
            padding: 6px 8px;
            /* Réduit le padding */
        }

        #patient-data-container p,
        #patient-data-container span {
            font-size: 0.8rem;
            /* Réduit le texte général */
        }

        /* Réduction de la taille de police pour le tableau Résultats (Recherche de Normes) */

        /* Désactiver la sélection de texte dans le tableau Excel (batteries) */
        #excel-table-container,
        #excel-table-container *,
        #excel-table-container table,
        #excel-table-container table * {
            user-select: none !important;
            -webkit-user-select: none !important;
            -moz-user-select: none !important;
            -ms-user-select: none !important;
        }

        #results-container .table {
            font-size: 0.75rem;
            /* Réduit la taille générale du tableau */
        }

        #results-container .table th {
            font-size: 0.75rem;
            /* Réduit les en-têtes */
            padding: 8px 10px;
            /* Réduit le padding */
        }

        #results-container .table td {
            font-size: 0.75rem;
            /* Réduit les cellules */
            padding: 6px 8px;
            /* Réduit le padding */
        }

        /* Cellules TIN/IN/LIN/N/LSN/SN/TSN : interactives au survol */
        #results-container .norm-cell {
            cursor: pointer;
            transition: background-color 0.15s ease, box-shadow 0.15s ease;
        }

        #results-container .norm-cell:hover {
            background-color: rgba(0, 0, 0, 0.04) !important;
            box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
        }

        #results-container p,
        #results-container span,
        #results-container div {
            font-size: 0.8rem;
            /* Réduit le texte général */
        }

        /* Styles pour le surlignage des tableaux */
        .table-highlight-header {
            background: linear-gradient(135deg, #6378da 0%, #3b59df 100%) !important;
            color: white !important;
            font-weight: bold;
        }

        .table-highlight-first-row {
            background: linear-gradient(135deg, #6378da 0%, #3b59df 100%) !important;
            color: white !important;
            font-weight: 500;
        }

        .table-highlight-first-col {
            background: linear-gradient(135deg, #6378da 0%, #3b59df 100%) !important;
            color: white !important;
            font-weight: 500;
        }

        .table-highlight-second-col {
            background: linear-gradient(135deg, #6378da 0%, #3b59df 100%) !important;
            color: white !important;
            font-weight: 500;
        }

        .table-highlight-third-col {
            background: linear-gradient(135deg, #6378da 0%, #3b59df 100%) !important;
            color: white !important;
            font-weight: 500;
        }

        .loading-spinner {
            display: none;
            text-align: center;
            padding: 20px;
        }

        .spinner-border {
            color: #6378da;
            border-width: 3px;
        }

        .section-divider {
            height: 2px;
            background: linear-gradient(135deg, #6378da 0%, #3b59df 100%);
            margin: 20px 0;
            border-radius: 1px;
        }

        .test-score-input {
            margin-bottom: 15px;
            padding: 15px;
            background: #f8f9fa;
            border-radius: 8px;
            border: 1px solid #e2e8f0;
        }

        /* Champs de scores : masquer les flèches et désactiver le scroll */
        input[id^="score-"]::-webkit-outer-spin-button,
        input[id^="score-"]::-webkit-inner-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }

        input[id^="score-"] {
            -moz-appearance: textfield;
        }

        .test-label {
            font-weight: 500;
            color: #4a5568;
            margin-bottom: 8px;
            display: block;
        }

        .results-container {
            max-height: 500px;
            overflow-y: auto;
        }

        .result-item {
            border-left: 4px solid #6378da;
            background: linear-gradient(90deg, rgba(99, 120, 218, 0.1), transparent);
            padding: 15px;
            margin-bottom: 10px;
            border-radius: 0 8px 8px 0;
        }

        .table-container {
            max-height: 400px;
            overflow: auto;
            border: 1px solid #e2e8f0;
            border-radius: 8px;
        }

        .dropdown-menu {
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            border: none;
            border-radius: 8px;
        }

        .dropdown-item:hover {
            background-color: #6378da;
            color: white;
        }

        .dropdown-toggle::after {
            border-top-color: #4a5568;
        }

        /* Catégories psychométriques avec nouvelles couleurs */
        .category-tres-superieur {
            background-color: #c6f6d5;
            color: #2f855a;
            font-weight: bold;
            padding: 8px 12px;
            border-radius: 6px;
        }

        .category-superieur {
            background-color: #bee3f8;
            color: #2c5282;
            font-weight: bold;
            padding: 8px 12px;
            border-radius: 6px;
        }

        .category-moyen-fort {
            background-color: #e2e8f0;
            color: #2d3748;
            font-weight: bold;
            padding: 8px 12px;
            border-radius: 6px;
        }

        .category-moyen {
            background-color: #f8f9fa;
            color: #4a5568;
            font-weight: bold;
            padding: 8px 12px;
            border-radius: 6px;
        }

        .category-moyen-faible {
            background-color: #fff3cd;
            color: #ed8936;
            font-weight: bold;
            padding: 8px 12px;
            border-radius: 6px;
        }

        .category-limite {
            background-color: #fed7d7;
            color: #e53e3e;
            font-weight: bold;
            padding: 8px 12px;
            border-radius: 6px;
        }

        .category-deficitaire {
            background-color: #fed7d7;
            color: #c53030;
            font-weight: bold;
            padding: 8px 12px;
            border-radius: 6px;
        }

        .results-table {
            margin-top: 20px;
            border-radius: 8px;
            overflow: hidden;
        }

        /* Animation pour les alertes */
        .alert-auto {
            animation: slideInDown 0.3s ease-out;
        }

        @keyframes slideInDown {
            from {
                transform: translateY(-100%);
                opacity: 0;
            }

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

        /* Animation pour les résultats */
        .fade-in {
            animation: fadeIn 0.5s ease-in;
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(20px);
            }

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

        /* Améliorations des inputs */
        .input-group-text {
            background: #f8f9fa;
            border-color: #e2e8f0;
            color: #4a5568;
        }

        /* Badge style amélioré */
        .badge {
            border-radius: 6px;
            font-weight: 500;
            padding: 8px 12px;
        }

        .badge-primary {
            background: #6378da;
        }

        .badge-success {
            background: #48bb78;
        }

        /* Responsive */
        @media (max-width: 768px) {
            .container-fluid {
                padding: 10px;
            }

            .card {
                margin-bottom: 15px;
            }

            .card-body {
                padding: 20px;
            }
        }

        /* Petites améliorations visuelles */
        .text-muted {
            color: #718096 !important;
        }

        small.text-muted {
            color: #a0aec0 !important;
        }

        .navbar-text {
            color: rgba(255, 255, 255, 0.9) !important;
        }

        /* Styles pour les onglets */
        .nav-tabs {
            border-bottom: 2px solid #e2e8f0;
            margin-bottom: 0;
        }

        .nav-tabs .nav-link {
            border: none;
            border-radius: 8px 8px 0 0;
            margin-right: 5px;
            padding: 12px 20px;
            font-weight: 600;
            font-size: 14px;
            /* Réduit de 16px à 14px */
            letter-spacing: 0.5px;
            /* Même espacement que Dossiers */
            color: rgba(255, 255, 255, 0.4);
            background: linear-gradient(135deg, rgba(99, 120, 218, 0.4) 0%, rgba(59, 89, 223, 0.4) 100%);
            transition: all 0.3s ease;
        }

        .nav-tabs .nav-link:hover {
            background: linear-gradient(135deg, rgba(99, 120, 218, 0.6) 0%, rgba(59, 89, 223, 0.6) 100%);
            color: rgba(255, 255, 255, 0.6);
            border-color: transparent;
        }

        .nav-tabs .nav-link.active {
            background: linear-gradient(135deg, #6378da 0%, #3b59df 100%);
            color: white;
            border-color: transparent;
        }

        .tab-content {
            background: white;
            border-radius: 0 8px 8px 8px;
            padding: 0;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
        }

        .tab-pane {
            padding: 20px;
        }

        /* Bannière dossier patient (affichée quand un dossier patient est sélectionné) */
        /* Bannière en overlay sur le premier tiers ; hauteur fixe pour que le contenu des onglets soit décalé en dessous */
        .patient-folder-banner {
            position: absolute;
            top: 0;
            left: 0;
            width: 33.333%;
            max-width: 33.333%;
            min-height: 48px;
            z-index: 5;
            background: linear-gradient(to right, #dee2e6, #fff);
            color: #495057;
            padding: 10px 20px;
            font-weight: 600;
            font-size: 1rem;
            border-radius: 0;
            margin: 0;
            display: flex;
            align-items: center;
        }

        .patient-folder-banner i {
            opacity: 0.9;
        }

        /* Overlay quand aucun dossier patient sélectionné (grise le contenu des onglets) */
        .programme-tab-content-wrapper {
            position: relative;
            min-height: 200px;
        }

        /* Réserver l'espace en haut pour la bannière patient : tout le contenu des onglets commence en dessous */
        .programme-tab-content-wrapper>.tab-content {
            padding-top: 40px;
        }

        .programme-no-patient-overlay {
            position: absolute;
            inset: 0;
            background: rgba(248, 249, 250, 0.92);
            display: flex;
            align-items: flex-start;
            justify-content: center;
            padding-top: 80px;
            z-index: 20;
            pointer-events: all;
            border-radius: 0 0 8px 8px;
        }

        #programme-no-patient-overlay p,
        .programme-no-patient-overlay p {
            font-size: 1.5rem !important;
            color: #495057;
            text-align: center;
            padding: 20px;
            max-width: 680px;
            margin: 0;
            white-space: nowrap;
        }

        .programme-no-patient-overlay.d-none {
            pointer-events: none;
        }

        /* En-têtes de tableau sous l'overlay (évite que sticky th dépasse le grisage) */
        .programme-tab-content-wrapper .table th {
            z-index: 1 !important;
        }

        /* Quand l'overlay "sélectionnez un dossier" est visible, cacher les en-têtes de tableau (sticky) pour qu'ils ne dépassent pas */
        .programme-tab-content-wrapper:has(#programme-no-patient-overlay:not(.d-none)) .table th {
            visibility: hidden;
        }

        /* Styles pour les contrôles d'enregistrement vocal */
        .recording-controls .btn {
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }

        .recording-controls .btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
        }

        .recording-controls .btn:active {
            transform: translateY(0);
        }

        .recording-controls .btn i {
            transition: all 0.3s ease;
        }

        .recording-controls .btn:hover i {
            transform: scale(1.1);
        }

        /* Animation pour l'icône d'enregistrement */
        .recording-active .fa-microphone {
            animation: pulse 1s infinite;
            color: #dc3545 !important;
        }

        /* Animation pour l'icône de lecture */
        .playing-active .fa-play {
            animation: bounce 0.6s infinite;
        }

        /* Indicateur d'enregistrement */
        .recording-indicator {
            animation: fadeInOut 2s infinite;
        }

        @keyframes pulse {
            0% {
                transform: scale(1);
            }

            50% {
                transform: scale(1.1);
            }

            100% {
                transform: scale(1);
            }
        }

        @keyframes bounce {

            0%,
            20%,
            50%,
            80%,
            100% {
                transform: translateY(0);
            }

            40% {
                transform: translateY(-3px);
            }

            60% {
                transform: translateY(-2px);
            }
        }

        @keyframes fadeInOut {

            0%,
            100% {
                opacity: 1;
            }

            50% {
                opacity: 0.5;
            }
        }

        /* Styles pour les boutons d'état */
        .btn-recording {
            background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
            border: none;
            color: white;
        }

        .btn-recording:hover {
            background: linear-gradient(135deg, #c82333 0%, #bd2130 100%);
            color: white;
        }

        .btn-playing {
            background: linear-gradient(135deg, #17a2b8 0%, #138496 100%);
            border: none;
            color: white;
        }

        .btn-playing:hover {
            background: linear-gradient(135deg, #138496 0%, #117a8b 100%);
            color: white;
        }

        /* Styles pour les boutons radio de style de rapport */
        .btn-group-vertical .btn-check:checked+.btn {
            background-color: var(--bs-primary);
            border-color: var(--bs-primary);
            color: white;
        }

        .btn-group-vertical .btn {
            margin-bottom: 0;
            text-align: left;
            font-size: 0.9rem;
            padding: 8px 12px;
            border-radius: 0;
            border-top: none;
        }

        .btn-group-vertical .btn:first-of-type {
            border-top: 2px solid #6378da;
            border-top-left-radius: 8px;
            border-top-right-radius: 8px;
        }

        .btn-group-vertical .btn:last-child {
            margin-bottom: 0;
            border-bottom-left-radius: 8px;
            border-bottom-right-radius: 8px;
        }

        .btn-group-vertical .btn-check:not(:first-of-type)+.btn {
            border-top: 1px solid rgba(99, 120, 218, 0.3);
        }

        /* Styles pour le spinner de chargement du rapport */
        .spinner-border {
            border-width: 4px;
        }

        .progress-bar-animated {
            animation: progress-bar-stripes 1s linear infinite;
        }

        @keyframes progress-bar-stripes {
            0% {
                background-position: 1rem 0;
            }

            100% {
                background-position: 0 0;
            }
        }

        /* Animation pour le bouton de génération */
        .btn:disabled {
            opacity: 0.7;
            cursor: not-allowed;
        }

        .fa-spin {
            animation: fa-spin 1s infinite linear;
        }

        @keyframes fa-spin {
            0% {
                transform: rotate(0deg);
            }

            100% {
                transform: rotate(360deg);
            }
        }

        /* Styles pour la navigation des rapports */
        #report-navigation .btn {
            min-width: 35px;
        }

        #report-counter {
            min-width: 60px;
            font-weight: 600;
        }

        .btn-group .btn:disabled {
            opacity: 0.5;
        }

        /* Styles pour la navigation principale */
        .navbar-nav .nav-link {
            color: rgba(255, 255, 255, 0.8) !important;
            font-weight: 600;
            font-size: 1.05rem;
            /* Augmenté de 0.95rem à 1.05rem */
            padding: 0.5rem 1rem;
            /* Réduit le padding pour diminuer la hauteur */
            margin: 0 0.5rem;
            /* Réduit l'espacement horizontal */
            transition: all 0.3s ease;
            border-radius: 8px;
        }

        .navbar-nav .nav-link:hover {
            color: white !important;
            background-color: rgba(255, 255, 255, 0.15);
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
        }

        .navbar-nav .nav-link.active {
            color: white !important;
            background-color: rgba(255, 255, 255, 0.25);
            transform: translateY(-1px);
            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
        }

        /* Espacement supplémentaire pour la navbar */
        .navbar {
            padding: 0.15rem 0;
            /* Réduit l'espace vertical */
        }

        .navbar-brand {
            font-size: 1.5rem;
            /* Augmenté de 1.4rem à 1.5rem */
            font-weight: 700;
            margin-left: 24px;
            margin-right: 30px;
            padding-left: 8px;
            padding-right: 8px;
        }

        .navbar-brand i {
            font-size: 1.3rem;
            /* Augmenté de 1.2rem à 1.3rem */
        }

        .navbar-nav .nav-link i {
            font-size: 0.9rem;
            /* Augmenté de 0.85rem à 0.9rem */
        }

        /* Espacement entre les onglets */
        .navbar-nav {
            gap: 0.5rem;
        }

        /* Styles pour les sections de contenu */
        .content-section {
            min-height: 1800px;
            margin-top: 0 !important;
            padding-top: 0 !important;
        }

        .content-section .card {
            border: none;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }

        /* Réduction de la taille de police pour les sections d'accueil */
        .content-section h2 {
            font-size: 1.5rem;
            /* Réduit de la taille par défaut */
        }

        .content-section h4 {
            font-size: 1.1rem;
            /* Réduit de la taille par défaut */
        }

        .content-section h5 {
            font-size: 1rem;
            /* Réduit de la taille par défaut */
        }

        .content-section .lead {
            font-size: 1rem;
            /* Réduit de la taille par défaut (1.25rem) */
        }

        .content-section p {
            font-size: 0.9rem;
            /* Réduit le texte général */
        }

        .content-section .card-body h5 {
            font-size: 0.95rem;
            /* Réduit les titres dans les cartes */
        }

        .content-section .card-body p {
            font-size: 0.85rem;
            /* Réduit le texte dans les cartes */
        }

        .content-section .list-unstyled li {
            font-size: 0.85rem;
            /* Réduit le texte des listes */
        }

        .content-section h3 {
            font-size: 1.2rem;
            /* Réduit les prix */
        }

        .content-section small {
            font-size: 0.7rem;
            /* Réduit le texte "/mois" */
        }

        /* ── Accueil – style marketing avec animations au scroll ── */
        #accueil-section {
            padding: 0;
        }

        /* Scroll animations */
        .ha-anim {
            opacity: 0;
            transition: opacity 0.7s cubic-bezier(.22, .61, .36, 1), transform 0.7s cubic-bezier(.22, .61, .36, 1);
        }

        .ha-anim-up {
            transform: translateY(40px);
        }

        .ha-anim-left {
            transform: translateX(-48px);
        }

        .ha-anim-right {
            transform: translateX(48px);
        }

        .ha-anim.ha-visible {
            opacity: 1;
            transform: translate(0, 0);
        }

        .ha-stagger>*:nth-child(1) {
            transition-delay: 0s;
        }

        .ha-stagger>*:nth-child(2) {
            transition-delay: 0.13s;
        }

        .ha-stagger>*:nth-child(3) {
            transition-delay: 0.26s;
        }

        .ha-stagger>*:nth-child(4) {
            transition-delay: 0.39s;
        }

        /* Bloc commun hero + Programme : degrade continu (voir .ha-home-blue-stack) */
        #accueil-section .ha-home-blue-stack {
            position: relative;
            overflow: hidden;
            background: linear-gradient(180deg,
                    #6378da 0%,
                    #556bd7 32%,
                    #4a62d8 58%,
                    rgba(59, 89, 223, 0.28) 88%,
                    rgba(59, 89, 223, 0) 100%);
        }

        #accueil-section .ha-home-blue-stack::before {
            content: '';
            position: absolute;
            inset: 0;
            background: radial-gradient(ellipse 72% 65% at 82% 22%, rgba(255, 255, 255, 0.1) 0%, transparent 68%);
            pointer-events: none;
        }

        /* Hero */
        #accueil-section .ha-hero {
            background: transparent;
            padding: 56px 0 0;
            overflow: hidden;
            position: relative;
            z-index: 1;
        }

        #accueil-section .ha-hero-label {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            border: 1px solid rgba(255, 255, 255, 0.32);
            background: rgba(255, 255, 255, 0.12);
            color: #fff;
            border-radius: 999px;
            font-size: 0.72rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            padding: 5px 14px;
            margin-bottom: 18px;
        }

        #accueil-section .ha-hero-title {
            font-size: 2.5rem;
            font-weight: 800;
            color: #fff;
            line-height: 1.12;
            margin: 0 0 16px;
            max-width: 500px;
        }

        #accueil-section .ha-hero-title em {
            font-style: normal;
            background: linear-gradient(90deg, #c4d6ff, #edf2ff);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        #accueil-section .ha-hero-sub {
            color: rgba(255, 255, 255, 0.88);
            font-size: 1rem;
            max-width: 420px;
            margin: 0 0 28px;
            line-height: 1.65;
        }

        #accueil-section .ha-hero-chips {
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
        }

        #accueil-section .ha-chip {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            background: rgba(255, 255, 255, 0.13);
            border: 1px solid rgba(255, 255, 255, 0.28);
            color: #fff;
            border-radius: 8px;
            padding: 6px 12px;
            font-size: 0.78rem;
            font-weight: 600;
        }

        #accueil-section .ha-hero-img-wrap {
            display: flex;
            align-items: flex-end;
            justify-content: center;
            padding-bottom: 0;
        }

        #accueil-section .ha-hero-mockup {
            width: 100%;
            max-width: 600px;
            display: block;
            filter: drop-shadow(0 24px 48px rgba(0, 0, 0, 0.28));
            transform: perspective(1000px) rotateX(5deg);
            transform-origin: center bottom;
        }

        /* Feature sections */
        #accueil-section .ha-section {
            padding: 72px 0;
        }

        #accueil-section .ha-section-alt {
            background: #f3f6ff;
        }

        /* 2e bloc : fond du degrade porte par .ha-home-blue-stack (continu avec le hero) */
        #accueil-section .ha-section-blue {
            background: transparent;
            padding: 72px 0;
            position: relative;
            z-index: 1;
        }

        #accueil-section .ha-section-blue>.container-lg {
            position: relative;
            z-index: 1;
        }

        #accueil-section .ha-section-blue .ha-mockup-wrap {
            box-shadow: 0 22px 56px rgba(0, 0, 0, 0.28);
        }

        #accueil-section .ha-section-tag {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            color: #6378da;
            font-size: 0.73rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.6px;
            margin-bottom: 10px;
        }

        #accueil-section .ha-section-title {
            font-size: 1.75rem;
            font-weight: 800;
            color: #18264a;
            margin: 0 0 12px;
            line-height: 1.2;
        }

        #accueil-section .ha-section-lead {
            color: #5a6680;
            font-size: 0.93rem;
            margin-bottom: 24px;
            line-height: 1.68;
            max-width: 440px;
        }

        #accueil-section .ha-items {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        #accueil-section .ha-item {
            display: flex;
            align-items: flex-start;
            gap: 13px;
            padding: 13px 14px;
            border-radius: 12px;
            background: #fff;
            border: 1px solid #e4eaf5;
            transition: border-color 0.22s, box-shadow 0.22s, transform 0.22s;
        }

        #accueil-section .ha-item:hover {
            border-color: #c5d2f6;
            box-shadow: 0 6px 20px rgba(99, 120, 218, 0.11);
            transform: translateX(3px);
        }

        #accueil-section .ha-section-alt .ha-item:hover {
            transform: translateX(-3px);
        }

        #accueil-section .ha-item-icon {
            width: 36px;
            height: 36px;
            border-radius: 10px;
            background: linear-gradient(135deg, #6378da 0%, #3b59df 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            font-size: 0.82rem;
            flex-shrink: 0;
        }

        #accueil-section .ha-item h6 {
            margin: 0 0 3px;
            font-size: 0.88rem;
            font-weight: 700;
            color: #1e2d4a;
        }

        #accueil-section .ha-item p {
            margin: 0;
            font-size: 0.81rem;
            color: #5b6882;
            line-height: 1.42;
        }

        #accueil-section .ha-text-card {
            background: #fff;
            border: 1px solid #dce4f5;
            border-radius: 18px;
            padding: 28px 28px 24px;
            box-shadow: 0 6px 24px rgba(15, 23, 42, 0.07);
        }

        #accueil-section .ha-mockup-wrap {
            border-radius: 18px;
            overflow: hidden;
            box-shadow: 0 22px 60px rgba(15, 23, 42, 0.15);
        }

        #accueil-section .ha-mockup-wrap img {
            width: 100%;
            height: auto;
            display: block;
        }

        /* Workflow */
        #accueil-section .ha-flow {
            padding: 60px 0;
            background: linear-gradient(135deg, #18234f 0%, #2d3fa0 100%);
        }

        #accueil-section .ha-flow-title {
            font-size: 1.5rem;
            font-weight: 800;
            color: #fff;
            text-align: center;
            margin-bottom: 6px;
        }

        #accueil-section .ha-flow-sub {
            text-align: center;
            color: rgba(255, 255, 255, 0.68);
            font-size: 0.9rem;
            margin-bottom: 36px;
        }

        #accueil-section .ha-flow-steps {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 20px;
            position: relative;
        }

        #accueil-section .ha-flow-steps::before {
            content: '';
            position: absolute;
            top: 22px;
            left: calc(16.66% + 10px);
            right: calc(16.66% + 10px);
            height: 2px;
            background: linear-gradient(90deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0.12));
        }

        #accueil-section .ha-step {
            position: relative;
            text-align: center;
            padding: 0 10px;
        }

        #accueil-section .ha-step-num {
            width: 44px;
            height: 44px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.1);
            border: 2px solid rgba(255, 255, 255, 0.34);
            color: #fff;
            font-size: 1rem;
            font-weight: 800;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 14px;
        }

        #accueil-section .ha-step h6 {
            color: #fff;
            font-size: 0.92rem;
            font-weight: 700;
            margin: 0 0 6px;
        }

        #accueil-section .ha-step p {
            color: rgba(255, 255, 255, 0.68);
            font-size: 0.8rem;
            margin: 0;
            line-height: 1.48;
        }

        @media (max-width: 991.98px) {
            #accueil-section .ha-hero {
                padding: 40px 0 0;
            }

            #accueil-section .ha-hero-title {
                font-size: 1.8rem;
            }

            #accueil-section .ha-section {
                padding: 48px 0;
            }

            #accueil-section .ha-flow-steps {
                grid-template-columns: 1fr;
                gap: 24px;
            }

            #accueil-section .ha-flow-steps::before {
                display: none;
            }

            #accueil-section .ha-flow {
                padding: 44px 0;
            }
        }

        /* Présentation - programme/admin */
        #demo-section {
            min-height: auto;
        }

        /* Placeholder vidéo dans la section Présentation */
        .demo-video-placeholder {
            border: 2px dashed #c8d3f2;
            border-radius: 14px;
            background: #f6f8ff;
            min-height: 260px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .demo-video-inner {
            text-align: center;
            color: #8a9ac7;
        }

        .demo-video-icon {
            font-size: 2.8rem;
            display: block;
            margin-bottom: 10px;
            color: #a8b8e8;
        }

        .demo-video-label {
            margin: 0;
            font-size: 0.88rem;
            font-weight: 600;
            color: #8a9ac7;
            letter-spacing: 0.2px;
        }

        #demo-section .home-hero-card {
            border-radius: 18px;
            overflow: hidden;
        }

        #demo-section .home-hero-header {
            background: linear-gradient(135deg, #6378da 0%, #3b59df 100%);
            color: #fff;
            border-bottom: none;
            padding: 30px 28px;
        }

        #demo-section .home-hero-title {
            margin: 0;
            font-size: 1.8rem;
            font-weight: 700;
            line-height: 1.2;
        }

        #demo-section .home-hero-subtitle {
            margin-top: 10px;
            margin-bottom: 0;
            color: rgba(255, 255, 255, 0.95);
            font-size: 1rem;
            max-width: 860px;
        }

        #demo-section .home-section-card {
            height: 100%;
            border-radius: 14px;
            box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08);
        }

        #demo-section .home-section-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            margin-bottom: 16px;
        }

        #demo-section .home-section-title {
            margin: 0;
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 1.1rem;
            font-weight: 700;
            color: #1f2a44;
        }

        #demo-section .home-badge {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            font-size: 0.72rem;
            border: 1px solid #d0d8f8;
            border-radius: 999px;
            padding: 4px 10px;
            color: #3b59df;
            background: #f6f8ff;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.3px;
        }

        #demo-section .home-tools-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 10px;
        }

        #demo-section .home-tool-item {
            border: 1px solid #e5e8f1;
            border-radius: 12px;
            padding: 12px;
            background: #fbfcff;
            height: 100%;
        }

        #demo-section .home-tool-item h6 {
            margin-bottom: 6px;
            display: flex;
            align-items: center;
            gap: 8px;
            color: #2f3a56;
            font-weight: 700;
            font-size: 0.9rem;
        }

        #demo-section .home-tool-item p {
            margin: 0;
            color: #5e677b;
            font-size: 0.82rem;
            line-height: 1.45;
        }

        #demo-section .home-process-list {
            list-style: none;
            padding-left: 0;
            margin-bottom: 0;
        }

        #demo-section .home-process-list li {
            border: 1px dashed #d8def0;
            border-radius: 10px;
            padding: 9px 11px;
            margin-bottom: 9px;
            color: #2f3a56;
            background: #f9fbff;
            font-size: 0.84rem;
        }

        #demo-section .home-process-list li:last-child {
            margin-bottom: 0;
        }

        #demo-section .home-actions {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-top: 20px;
        }

        #demo-section .home-quick-note {
            margin-top: 16px;
            border-left: 4px solid #6378da;
            padding: 10px 12px;
            background: #f6f8ff;
            border-radius: 8px;
            color: #43506f;
            font-size: 0.84rem;
        }

        @media (max-width: 991.98px) {
            #demo-section .home-tools-grid {
                grid-template-columns: 1fr;
            }

            #demo-section .home-hero-title {
                font-size: 1.45rem;
            }
        }

        /* Adaptation de la taille des éléments dans les onglets */
        .tab-pane .card-header h6,
        .tab-pane .card-header h5 {
            font-size: 1rem;
            /* Augmenté de 0.9rem à 1rem pour les titres de card-header */
            font-weight: 600;
        }

        .tab-pane h6 {
            font-size: 0.95rem;
            /* Augmenté de 0.85rem à 0.95rem pour les titres de sections */
            font-weight: 600;
        }

        .tab-pane h5 {
            font-size: 1.05rem;
            /* Augmenté de 0.95rem à 1.05rem */
        }

        .tab-pane .form-label {
            font-size: 0.9rem;
            /* Augmenté de 0.85rem à 0.9rem pour les labels */
            margin-bottom: 0.3rem;
        }

        .tab-pane .form-control,
        .tab-pane .form-select {
            font-size: 0.9rem;
            /* Augmenté de 0.85rem à 0.9rem pour les champs de formulaire */
            padding: 0.4rem 0.75rem;
        }

        .tab-pane .btn {
            font-size: 0.9rem;
            /* Augmenté de 0.85rem à 0.9rem pour les boutons */
            padding: 0.4rem 0.85rem;
        }

        .tab-pane .btn-sm {
            font-size: 0.85rem;
            /* Augmenté de 0.8rem à 0.85rem */
            padding: 0.3rem 0.65rem;
        }

        .tab-pane .card-title {
            font-size: 1.05rem;
            /* Augmenté de 1rem à 1.05rem pour les titres de cartes */
        }

        .tab-pane p,
        .tab-pane span,
        .tab-pane label {
            font-size: 0.9rem;
            /* Augmenté de 0.85rem à 0.9rem pour le texte général */
        }

        .tab-pane .card {
            margin-bottom: 0.75rem;
            /* Réduit l'espace entre les cartes */
        }

        .tab-pane .card-body {
            padding: 0.75rem;
            /* Réduit le padding interne des cartes */
        }

        .tab-pane .card-header {
            padding: 0.5rem 0.75rem;
            /* Réduit le padding des en-têtes de cartes */
        }

        .tab-pane .mb-3 {
            margin-bottom: 0.75rem !important;
            /* Réduit les marges */
        }

        .tab-pane .mb-4 {
            margin-bottom: 1rem !important;
        }

        /* Styles pour les onglets audio */
        .nav-pills .nav-link {
            border-radius: 8px;
            font-weight: 600;
            transition: all 0.3s ease;
            border: 2px solid transparent;
        }

        .nav-pills .nav-link:hover {
            background-color: rgba(99, 120, 218, 0.1);
            border-color: rgba(99, 120, 218, 0.3);
        }

        .nav-pills .nav-link.active {
            background: linear-gradient(135deg, #6378da 0%, #3b59df 100%);
            border-color: #6378da;
            color: white;
        }

        /* Styles pour les boutons d'enregistrement améliorés */
        .recording-controls .btn {
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }

        .recording-controls .btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
        }

        .recording-controls .btn:active {
            transform: translateY(0);
        }

        .recording-controls .btn i {
            transition: all 0.3s ease;
        }

        .recording-controls .btn:hover i {
            transform: scale(1.1);
        }

        /* Animation pour l'icône d'enregistrement */
        .recording-active .fa-microphone {
            animation: pulse 1s infinite;
            color: #dc3545 !important;
        }

        /* Animation pour l'icône de lecture */
        .playing-active .fa-play {
            animation: bounce 0.6s infinite;
        }

        /* Indicateur d'enregistrement */
        .recording-indicator {
            animation: fadeInOut 2s infinite;
        }

        @keyframes pulse {
            0% {
                transform: scale(1);
            }

            50% {
                transform: scale(1.1);
            }

            100% {
                transform: scale(1);
            }
        }

        @keyframes bounce {

            0%,
            20%,
            50%,
            80%,
            100% {
                transform: translateY(0);
            }

            40% {
                transform: translateY(-3px);
            }

            60% {
                transform: translateY(-2px);
            }
        }

        @keyframes fadeInOut {

            0%,
            100% {
                opacity: 1;
            }

            50% {
                opacity: 0.5;
            }
        }

        /* Styles pour les boutons d'état */
        .btn-recording {
            background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
            border: none;
            color: white;
        }

        .btn-recording:hover {
            background: linear-gradient(135deg, #c82333 0%, #bd2130 100%);
            color: white;
        }

        .btn-playing {
            background: linear-gradient(135deg, #17a2b8 0%, #138496 100%);
            border: none;
            color: white;
        }

        .btn-playing:hover {
            background: linear-gradient(135deg, #138496 0%, #117a8b 100%);
            color: white;
        }

        /* Styles pour interface compacte */
        .compact-card {
            margin-bottom: 15px;
        }

        .compact-card .card-header {
            padding: 10px 12px;
            /* Réduit de 12px 15px à 10px 12px */
            font-size: 0.8rem;
            /* Réduit de 0.9rem à 0.8rem */
        }

        .compact-card .card-header h6 {
            font-size: 0.8rem;
            /* Réduit la taille des titres */
        }

        .compact-card .card-body {
            padding: 15px;
        }

        .compact-form-label {
            font-size: 0.9rem;
            /* Augmenté de 0.85rem à 0.9rem */
            margin-bottom: 5px;
        }

        .compact-form-select {
            font-size: 0.9rem;
            /* Augmenté de 0.85rem à 0.9rem */
            padding: 6px 8px;
        }

        .compact-btn {
            font-size: 0.85rem;
            /* Augmenté de 0.8rem à 0.85rem */
            padding: 6px 12px;
        }

        .compact-text {
            font-size: 0.8rem;
            /* Augmenté de 0.75rem à 0.8rem */
        }

        .compact-textarea {
            font-size: 0.9rem;
            /* Augmenté de 0.85rem à 0.9rem */
            padding: 8px;
        }

        #audioModeTabs .nav-link i {
            font-size: 0.75rem;
            /* Réduit la taille des icônes */
        }

        .compact-card h6 {
            font-size: 0.8rem;
            /* Réduit de 0.85rem à 0.8rem pour les titres comme "Enregistrement Vocal" */
        }

        /* Réduction des onglets internes dans la section Résultats */
        #conversation-pane .nav-tabs .nav-link {
            font-size: 0.75rem;
            /* Réduit la taille des onglets Transcription et Résumé */
            padding: 6px 10px;
        }

        #conversation-pane .nav-tabs .nav-link i {
            font-size: 0.7rem;
            /* Réduit la taille des icônes */
        }

        .recording-controls .btn-sm {
            font-size: 0.75rem;
            /* Réduit la taille des boutons d'enregistrement */
            padding: 0.25rem 0.5rem;
        }

        .recording-controls .btn-sm i {
            font-size: 0.7rem;
            /* Réduit la taille des icônes des boutons */
        }

        #recording-timer {
            font-size: 0.8rem;
            /* Réduit la taille du timer */
        }

        .compact-card .form-label {
            font-size: 0.8rem;
            /* Réduit la taille des labels dans les cartes compactes */
        }

        .compact-card .form-control,
        .compact-card .form-select {
            font-size: 0.8rem;
            /* Réduit la taille des champs de formulaire */
            padding: 0.3rem 0.6rem;
        }

        /* Réduction de la taille des timestamps dans les logs */
        #logs-container .text-muted {
            font-size: 0.65rem;
            /* Réduit la taille des timestamps [10:47:41 PM] */
        }

        #logs-container {
            font-size: 0.7rem !important;
            /* Réduit davantage la taille générale du texte des logs */
        }

        #logs-container div {
            font-size: 0.7rem;
            /* Assure que tout le texte des logs est à la même taille */
            line-height: 1.3;
            /* Réduit l'espacement entre les lignes */
        }

        /* Réduction de la taille du bouton Speech-to-Text */
        #btn-speech-to-text {
            font-size: 0.75rem;
            /* Réduit la taille de la police du bouton */
            padding: 0.4rem 0.75rem;
        }

        #btn-speech-to-text i {
            font-size: 0.7rem;
            /* Réduit la taille de l'icône */
        }

        /* Application des styles compacts aux autres onglets (basé sur Analyse de Conversation) */
        #norms-pane .card-header,
        #analysis-pane .card-header,
        #report-pane .card-header {
            padding: 10px 12px;
            font-size: 0.8rem;
        }

        #norms-pane .card-header h5,
        #norms-pane .card-header h6,
        #analysis-pane .card-header h5,
        #analysis-pane .card-header h6,
        #report-pane .card-header h5,
        #report-pane .card-header h6 {
            font-size: 0.8rem;
            /* Même taille que dans Analyse de Conversation */
        }

        #norms-pane h6,
        #analysis-pane h6,
        #report-pane h6 {
            font-size: 0.8rem;
        }

        #norms-pane .form-label,
        #analysis-pane .form-label,
        #report-pane .form-label {
            font-size: 0.8rem;
        }

        #norms-pane .form-control,
        #norms-pane .form-select,
        #analysis-pane .form-control,
        #analysis-pane .form-select,
        #report-pane .form-control,
        #report-pane .form-select {
            font-size: 0.8rem;
            padding: 0.3rem 0.6rem;
        }

        #norms-pane .btn,
        #analysis-pane .btn,
        #report-pane .btn {
            font-size: 0.75rem;
            padding: 0.4rem 0.75rem;
        }

        #norms-pane .btn-sm,
        #analysis-pane .btn-sm,
        #report-pane .btn-sm {
            font-size: 0.7rem;
            padding: 0.3rem 0.6rem;
        }

        #norms-pane p,
        #norms-pane span,
        #norms-pane label,
        #analysis-pane p,
        #analysis-pane span,
        #analysis-pane label,
        #report-pane p,
        #report-pane span,
        #report-pane label {
            font-size: 0.8rem;
        }

        /* Réduction de la taille de police pour l'alerte "Mesure inversée" */
        #norms-pane .alert-warning {
            font-size: 0.75rem;
            padding: 0.5rem 0.75rem;
        }

        /* Réduction des onglets internes dans les autres sections */
        #norms-pane .nav-tabs .nav-link,
        #analysis-pane .nav-tabs .nav-link,
        #report-pane .nav-tabs .nav-link {
            font-size: 0.75rem;
            padding: 6px 10px;
        }

        #norms-pane .nav-tabs .nav-link i,
        #analysis-pane .nav-tabs .nav-link i,
        #report-pane .nav-tabs .nav-link i {
            font-size: 0.7rem;
        }

        /* Styles pour l'onglet Questionnaires - même taille que Recherche de normes */
        #questionnaires-pane .card-header,
        #questionnaires-pane .card-body {
            font-size: 0.8rem;
        }

        #questionnaires-pane .card-header {
            padding: 10px 12px;
        }

        #questionnaires-pane .card-header h5,
        #questionnaires-pane .card-header h6 {
            font-size: 0.8rem;
        }

        #questionnaires-pane h6 {
            font-size: 0.8rem;
        }

        /* Fiche d'informations : griser le contenu quand aucun patient sélectionné */
        #patient-info-pane .fiche-no-patient {
            opacity: 0.5;
            pointer-events: none;
            user-select: none;
        }

        /* Informations Patient : mêmes tailles de police que les autres onglets (Questionnaires, Recherche de normes, etc.) */
        #patient-info-pane .card-header,
        #patient-info-pane .card-body {
            font-size: 0.8rem;
        }

        #patient-info-pane .card-header {
            padding: 10px 12px;
        }

        #patient-info-pane .card-header h5,
        #patient-info-pane .card-header h6 {
            font-size: 0.8rem;
        }

        #patient-info-pane h6 {
            font-size: 0.8rem;
        }

        #patient-info-pane .form-label {
            font-size: 0.8rem;
        }

        #patient-info-pane .form-control,
        #patient-info-pane .form-select {
            font-size: 0.8rem;
            padding: 0.3rem 0.6rem;
        }

        #patient-info-pane .btn {
            font-size: 0.75rem;
            padding: 0.4rem 0.75rem;
        }

        #patient-info-pane .btn-sm {
            font-size: 0.7rem;
            padding: 0.3rem 0.6rem;
        }

        #patient-info-pane p,
        #patient-info-pane span,
        #patient-info-pane label,
        #patient-info-pane small {
            font-size: 0.8rem;
        }

        #report-pane .report-no-patient {
            opacity: 0.5;
            pointer-events: none;
            user-select: none;
            transition: opacity 0.2s ease;
        }

        #questionnaires-pane .form-label {
            font-size: 0.8rem;
        }

        #questionnaires-pane .form-control,
        #questionnaires-pane .form-select {
            font-size: 0.8rem;
            padding: 0.3rem 0.6rem;
        }

        #questionnaires-pane .btn {
            font-size: 0.75rem;
            padding: 0.4rem 0.75rem;
        }

        #questionnaires-pane .btn-sm {
            font-size: 0.7rem;
            padding: 0.3rem 0.6rem;
        }

        #questionnaires-pane p,
        #questionnaires-pane span,
        #questionnaires-pane label,
        #questionnaires-pane small {
            font-size: 0.8rem;
        }

        /* Styles pour le bouton d'enregistrement en cours */
        .recording-btn.recording {
            background-color: #f8f9fa !important;
            border-color: #dee2e6 !important;
            color: #6c757d !important;
        }

        /* Styles personnalisés pour les boutons d'enregistrement */
        .recording-controls .btn-light {
            background-color: #f8f9fa;
            border-color: #dee2e6;
            color: #495057;
            font-weight: 500;
        }

        .recording-controls .btn-light:hover:not(:disabled) {
            background-color: #e9ecef;
            border-color: #adb5bd;
            color: #212529;
        }

        .recording-controls .btn-light:focus {
            box-shadow: 0 0 0 0.2rem rgba(108, 117, 125, 0.25);
        }

        .recording-controls .btn-light:disabled {
            background-color: #f8f9fa;
            border-color: #dee2e6;
            color: #6c757d;
            opacity: 0.6;
        }

        /* Style pour l'icône fa-circle du bouton Rec (rouge par défaut, non clignotante) */
        #btn-start-recording .fa-circle {
            color: #dc3545;
        }

        /* Hauteur réelle de la barre SynApp (mesurée en JS) — menu profil et ombrage commencent en dessous */
        :root {
            --app-navbar-height: 72px;
        }

        /* Styles pour le menu profil latéral */
        .profile-sidebar {
            position: fixed;
            top: var(--app-navbar-height);
            right: -350px;
            bottom: 0;
            width: 350px;
            height: auto;
            background: white;
            box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
            /* Au-dessus de l'overlay (1065), sous les modales Bootstrap (1070+) */
            z-index: 1066;
            transition: right 0.3s ease;
            border-left: 1px solid #dee2e6;
        }

        .profile-sidebar.active {
            right: 0;
        }

        .profile-sidebar-header {
            padding: 20px;
            border-bottom: 1px solid #dee2e6;
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: #f8f9fa;
        }

        .profile-sidebar-header h5 {
            margin: 0;
            color: #495057;
        }

        .profile-sidebar-content {
            padding: 20px;
        }

        .profile-menu-btn {
            width: 100%;
            padding: 15px 20px;
            margin-bottom: 10px;
            border: 1px solid #dee2e6;
            background: white;
            color: #495057;
            border-radius: 8px;
            text-align: left;
            transition: all 0.2s ease;
            font-size: 16px;
            display: flex;
            align-items: center;
        }

        .profile-menu-btn:hover {
            background: #e8e8e8;
            border-color: #000;
            color: #000;
            transform: translateX(5px);
        }

        .profile-menu-btn:last-child {
            margin-bottom: 0;
        }

        .profile-overlay {
            position: fixed;
            top: var(--app-navbar-height);
            left: 0;
            right: 0;
            bottom: 0;
            width: auto;
            height: auto;
            background: rgba(0, 0, 0, 0.5);
            z-index: 1065;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.3s ease, visibility 0.3s ease;
            /* évite un décalage d’un pixel sur certains navigateurs */
            box-sizing: border-box;
        }

        .profile-overlay.active {
            opacity: 1;
            visibility: visible;
        }

        /* Au-dessus du menu profil (1066), sans assombrir la barre latérale (pas de backdrop Bootstrap) */
        #accountInfoModal.modal {
            z-index: 1070;
        }

        .account-info-modal-dialog.modal-xl {
            max-width: min(1140px, 96vw);
        }

        #accountInfoModal .modal-body {
            min-height: 260px;
            font-size: 1.0625rem;
        }

        .btn-close {
            background: none;
            border: none;
            font-size: 1.5rem;
            color: #6c757d;
            cursor: pointer;
            padding: 0;
            width: 30px;
            height: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .btn-close:hover {
            color: #dc3545;
        }

        /* Layout Administratif : une seule carte (comme Présentation) — onglets intégrés en tête */
        .administratif-layout {
            display: flex;
            flex-direction: column;
            align-items: stretch;
            gap: 0;
        }

        .administratif-shell-card {
            margin-bottom: 0;
            overflow: hidden;
            border-radius: 15px;
        }

        .administratif-shell-card:hover {
            transform: none;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
        }

        .administratif-tabs-bar {
            flex-shrink: 0;
            background: linear-gradient(135deg, rgba(99, 120, 218, 0.12) 0%, rgba(59, 89, 223, 0.08) 100%);
            border-radius: 15px 15px 0 0;
            padding: 8px 12px;
            border: 1px solid #d8e0fb;
            border-bottom: 1px solid #cfd9fb;
            box-shadow: none;
        }

        .administratif-tabs-row {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            align-items: center;
        }

        .administratif-shell-card>.card-body {
            border-radius: 0 0 15px 15px;
        }

        /* Même conteneur que Présentation : pas de second container-fluid ; léger rappel vers la navbar */
        #administratif-section {
            margin-top: -0.85rem;
        }

        /* Elargir uniquement la page Administratif */
        #main-sections-container:has(#administratif-section[style*="display: block"]) {
            max-width: 1600px;
        }

        .administratif-rail-title {
            color: #495057;
            font-weight: 600;
            font-size: 0.95rem;
            margin-bottom: 10px;
            padding: 6px 10px;
            border-bottom: 1px solid #dee2e6;
        }

        .administratif-rail-btn {
            width: auto;
            border: 1px solid #ccd6fb;
            background: rgba(255, 255, 255, 0.92);
            color: #42537f;
            border-radius: 999px;
            padding: 8px 14px;
            margin-bottom: 0;
            text-align: left;
            font-weight: 600;
            transition: all 0.2s ease;
            display: inline-flex;
            align-items: center;
            gap: 2px;
        }

        .administratif-rail-btn:hover {
            background: #ffffff;
            border-color: #9eb2ff;
            color: #3b59df;
            box-shadow: 0 2px 7px rgba(59, 89, 223, 0.16);
        }

        .administratif-rail-btn.active {
            background: linear-gradient(135deg, #6378da 0%, #3b59df 100%);
            color: #ffffff;
            border-color: #3b59df;
            box-shadow: 0 3px 10px rgba(59, 89, 223, 0.32);
        }

        /* Contact -> interface chat style Telegram */
        .contact-chat-shell {
            display: grid;
            grid-template-columns: 300px 1fr;
            border: 1px solid #e4e8f2;
            border-radius: 12px;
            overflow: hidden;
            min-height: 66vh;
            background: #fff;
        }

        .contact-chat-sidebar {
            border-right: 1px solid #e4e8f2;
            background: #f7f8fc;
            display: flex;
            flex-direction: column;
        }

        .contact-chat-sidebar-header {
            padding: 12px 14px;
            border-bottom: 1px solid #e4e8f2;
            font-weight: 700;
            color: #2f3b67;
        }

        .contact-chat-contacts {
            overflow-y: auto;
            max-height: calc(66vh - 48px);
        }

        .contact-chat-contact {
            width: 100%;
            border: none;
            border-bottom: 1px solid #edf0f7;
            background: transparent;
            text-align: left;
            padding: 12px 14px;
            cursor: pointer;
            transition: background-color 0.15s ease;
        }

        .contact-chat-contact:hover {
            background: #eef2ff;
        }

        .contact-chat-contact.active {
            background: #dfe7ff;
        }

        .contact-chat-contact-name {
            font-weight: 600;
            color: #1f2a4f;
            margin-bottom: 2px;
        }

        .contact-chat-contact-preview {
            font-size: 0.84rem;
            color: #6f7897;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .contact-chat-main {
            display: grid;
            grid-template-rows: auto 1fr auto;
            background: #eef3ff;
        }

        .contact-chat-header {
            padding: 12px 16px;
            background: linear-gradient(135deg, #6378da 0%, #3b59df 100%);
            color: #fff;
            font-weight: 600;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
        }

        .contact-chat-messages {
            padding: 14px;
            overflow-y: auto;
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .contact-chat-empty {
            margin: auto;
            color: #7a849f;
            text-align: center;
        }

        .chat-bubble {
            width: fit-content;
            max-width: min(100%, 520px);
            padding: 5px 9px;
            border-radius: 7px;
            font-size: 0.92rem;
            line-height: 1.28;
            box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
            white-space: pre-wrap;
            word-break: break-word;
        }

        .chat-message-row {
            display: flex;
            flex-direction: column;
            width: fit-content;
            max-width: min(62%, 520px);
        }

        .chat-message-row.in {
            align-self: flex-start;
        }

        .chat-message-row.out {
            align-self: flex-end;
        }

        .chat-bubble.in {
            border-top-left-radius: 4px;
            background: #ffffff;
            color: #222;
        }

        .chat-bubble.out {
            border-top-right-radius: 4px;
            background: linear-gradient(135deg, #6378da 0%, #3b59df 100%);
            color: #fff;
        }

        .chat-bubble-meta {
            display: block;
            margin-top: 2px;
            font-size: 0.7rem;
            padding: 0 2px;
            width: fit-content;
            opacity: 0.85;
        }

        .contact-chat-composer {
            display: flex;
            gap: 8px;
            padding: 10px;
            border-top: 1px solid #d7dff7;
            background: #f8faff;
        }

        .contact-chat-composer input {
            flex: 1;
        }

        /* Barre de chat flottante (style Facebook) */
        .floating-chat-dock {
            position: fixed;
            right: 16px;
            bottom: 12px;
            z-index: 1090;
        }

        .floating-chat-launcher {
            border: none;
            border-radius: 999px;
            padding: 10px 16px;
            background: linear-gradient(135deg, #6378da 0%, #3b59df 100%);
            color: #fff;
            font-weight: 600;
            box-shadow: 0 6px 18px rgba(33, 49, 130, 0.35);
        }

        .floating-chat-panel {
            position: absolute;
            right: 0;
            bottom: 56px;
            width: min(550px, 92vw);
            height: min(520px, 74vh);
            background: #fff;
            border: 1px solid #dce3f8;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 14px 30px rgba(0, 0, 0, 0.2);
            transform: translateY(12px);
            opacity: 0;
            pointer-events: none;
            transition: all 0.18s ease;
            display: grid;
            grid-template-rows: auto 1fr;
        }

        .floating-chat-resize-handle {
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            width: 8px;
            cursor: ew-resize;
            z-index: 2;
        }

        .floating-chat-dock.open .floating-chat-panel {
            transform: translateY(0);
            opacity: 1;
            pointer-events: auto;
        }

        .floating-chat-panel-header {
            padding: 10px 12px;
            background: linear-gradient(135deg, #6378da 0%, #3b59df 100%);
            color: #fff;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-weight: 600;
        }

        .floating-chat-panel-main {
            display: grid;
            grid-template-columns: 138px 1fr;
            min-height: 0;
        }

        .floating-chat-list {
            border-right: 1px solid #e4e8f2;
            background: #f7f8fc;
            overflow-y: auto;
        }

        .floating-chat-item {
            border: none;
            border-bottom: 1px solid #edf0f7;
            width: 100%;
            text-align: left;
            background: transparent;
            padding: 8px 9px;
            font-size: 0.84rem;
            cursor: pointer;
        }

        .floating-chat-item.active {
            background: #dfe7ff;
        }

        .floating-chat-section-label,
        .contact-chat-sidebar-section-label {
            font-size: 0.72rem;
            text-transform: uppercase;
            letter-spacing: 0.04em;
            color: #6c757d;
            padding: 6px 9px 4px;
            font-weight: 600;
        }

        .floating-chat-item-group .fa-users {
            opacity: 0.85;
        }

        .contact-chat-contact-group .contact-chat-contact-name {
            display: flex;
            align-items: center;
            gap: 4px;
        }

        .floating-chat-thread {
            display: grid;
            grid-template-rows: 1fr auto;
            min-width: 0;
            background: #eef3ff;
        }

        .floating-chat-messages {
            padding: 10px;
            overflow-y: auto;
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .floating-chat-composer {
            display: flex;
            gap: 6px;
            padding: 8px;
            border-top: 1px solid #d7dff7;
            background: #f8faff;
        }

        .floating-chat-composer input {
            flex: 1;
            font-size: 0.88rem;
        }

        @media (max-width: 992px) {
            .contact-chat-shell {
                grid-template-columns: 1fr;
                min-height: 72vh;
            }

            .contact-chat-sidebar {
                border-right: none;
                border-bottom: 1px solid #e4e8f2;
            }

            .contact-chat-contacts {
                max-height: 220px;
            }
        }

        .group-header-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 10px;
            margin-bottom: 16px;
        }

        .group-bell-btn {
            position: relative;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 4px;
            border: none;
            background: transparent;
            color: #fff;
            border-radius: 0.375rem;
            padding: 0.25rem 0.6rem;
            line-height: 1.3;
            transition: all 0.2s ease;
        }

        .group-bell-btn:hover {
            background: rgba(255, 255, 255, 0.15);
            border: none;
            color: #fff;
        }

        .group-bell-count {
            position: absolute;
            top: -8px;
            right: -8px;
            background: #dc3545;
            color: #fff;
            border-radius: 999px;
            min-width: 20px;
            height: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 11px;
            font-weight: 700;
            padding: 0 5px;
        }

        .group-list-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
            gap: 12px;
        }

        #administratif-pane-groupe {
            min-height: 72vh;
        }

        .group-card {
            border: 1px solid #e3e7ef;
            border-radius: 12px;
            background: #fff;
            padding: 14px;
            box-shadow: 0 2px 8px rgba(27, 39, 94, 0.06);
        }

        .group-members-list {
            margin: 10px 0 0;
            padding-left: 18px;
            color: #6c757d;
            font-size: 0.92rem;
        }

        .group-chat-messages {
            background: #f3f6ff;
            border: 1px solid #e0e7ff;
            border-radius: 10px;
            padding: 8px;
            min-height: 360px;
            max-height: 56vh;
            overflow-y: auto;
            display: flex;
            flex-direction: column;
            gap: 5px;
        }

        .group-chat-bubble {
            width: fit-content;
            max-width: min(100%, 340px);
            border-radius: 6px;
            padding: 1px 1px;
            font-size: 0.78rem;
            line-height: 1.00;
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
            white-space: pre-wrap;
            word-break: break-word;
        }

        .group-chat-bubble.in {
            align-self: flex-start;
            background: #fff;
            border-top-left-radius: 4px;
            color: #1f1f1f;
        }

        .group-chat-bubble.out {
            align-self: flex-end;
            background: linear-gradient(135deg, #6378da 0%, #3b59df 100%);
            border-top-right-radius: 4px;
            color: #fff;
        }

        .group-chat-meta {
            display: block;
            margin-top: 0;
            font-size: 0.58rem;
            line-height: 1;
            opacity: 0.88;
        }

        .group-chat-pane {
            border: 1px solid #e3e7ef;
            border-radius: 12px;
            background: #fafbfc;
            display: grid;
            grid-template-rows: auto 1fr auto;
            min-height: 180px;
            max-height: min(70vh, 560px);
            overflow: hidden;
        }

        .group-chat-pane-header {
            padding: 10px 12px;
            border-bottom: 1px solid #e9ecef;
            background: #fff;
            font-weight: 700;
            color: #495057;
        }

        .group-chat-pane-composer {
            padding: 10px;
            border-top: 1px solid #e9ecef;
            background: #fff;
        }

        /* Mes groupes : sélecteur + colonne membres à gauche */
        .group-selector-row {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            align-items: center;
        }

        .group-selector-chip {
            border: 1px solid #dee2e6;
            background: #fff;
            border-radius: 999px;
            padding: 8px 18px;
            cursor: pointer;
            font-weight: 600;
            font-size: 0.95rem;
            color: #495057;
            transition: all 0.2s ease;
            display: inline-flex;
            align-items: center;
            gap: 6px;
        }

        .group-selector-chip:hover {
            border-color: #9fb0f5;
            color: #3b59df;
            background: #f8faff;
        }

        .group-selector-chip.active {
            border-color: #3b59df;
            background: linear-gradient(135deg, #eef2ff 0%, #e8ecff 100%);
            color: #3b59df;
            box-shadow: 0 2px 8px rgba(59, 89, 223, 0.2);
        }

        .group-workspace-layout {
            margin-top: 4px;
            display: grid;
            grid-template-columns: minmax(260px, 420px);
            gap: 12px;
            align-items: stretch;
        }

        .group-annuaire-rail {
            max-width: min(380px, 100%);
            border: 1px solid #dce3ed;
            border-radius: 12px;
            padding: 14px 16px;
            background: linear-gradient(180deg, #f0f3f8 0%, #e8ecf3 100%);
            min-height: 180px;
            max-height: min(70vh, 560px);
            overflow: hidden;
            display: flex;
            flex-direction: column;
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
        }

        .group-annuaire-rail .group-annuaire-list-scroll {
            flex: 1;
            min-height: 80px;
            overflow-y: auto;
            margin: 0 -4px;
            padding: 0 4px;
        }

        .group-annuaire-rail #contact-directory-list .list-group-item {
            border-radius: 8px;
            margin-bottom: 6px;
            border: 1px solid #e4eaf5;
            background: #fff;
        }

        .group-members-rail {
            max-width: min(420px, 100%);
            border: 1px solid #dce3ed;
            border-radius: 12px;
            padding: 14px 16px;
            background: linear-gradient(180deg, #f0f3f8 0%, #e8ecf3 100%);
            min-height: 180px;
            max-height: min(70vh, 560px);
            overflow-y: auto;
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
        }

        .group-rail-toolbar {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 10px;
        }

        .group-rail-icon-btn {
            border: 1px solid #dee2e6;
            background: #fff;
            color: #495057;
            border-radius: 10px;
            padding: 8px 12px;
            line-height: 1;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .group-rail-icon-btn:hover {
            border-color: #9fb0f5;
            color: #3b59df;
            background: #f8faff;
        }

        .group-rail-icon-btn i {
            font-size: 1rem;
        }

        .group-rail-access-btn {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            line-height: 1.1;
            font-weight: 600;
            font-size: 0.82rem;
            white-space: nowrap;
        }

        .group-members-rail-title {
            font-size: 0.72rem;
            text-transform: uppercase;
            letter-spacing: 0.06em;
            color: #6c757d;
            font-weight: 700;
            margin-bottom: 12px;
        }

        .group-member-row {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 8px;
            padding: 10px 0;
            border-bottom: 1px solid rgba(0, 0, 0, 0.06);
        }

        .group-member-row-main {
            min-width: 0;
            flex: 1;
        }

        .group-member-add-contact-btn {
            white-space: nowrap;
            align-self: center;
        }

        .group-member-row:last-child {
            border-bottom: none;
            padding-bottom: 0;
        }

        .group-access-summary {
            margin-top: 12px;
            width: min(100%, 860px);
            margin-right: auto;
            padding: 10px 12px;
            border: 1px solid #e3e7ef;
            border-radius: 12px;
            background: #ffffff;
            box-shadow: 0 2px 8px rgba(27, 39, 94, 0.05);
        }

        .group-access-summary-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(220px, 1fr));
            gap: 8px;
        }

        .group-access-card {
            border: 1px solid #e7ebf3;
            border-radius: 10px;
            background: #f9fbff;
            padding: 8px 10px;
        }

        .group-access-card h6 {
            font-size: 0.75rem;
            margin: 0 0 6px;
            color: #3f4b60;
            font-weight: 700;
        }

        .group-access-list {
            margin: 0;
            padding: 0;
            list-style: none;
            display: flex;
            flex-direction: column;
            gap: 4px;
        }

        .group-access-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 6px;
            font-size: 0.77rem;
            color: #495057;
        }

        .group-access-item-name {
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .group-access-badge {
            border-radius: 999px;
            border: 1px solid #cfd6e6;
            padding: 0 6px;
            font-size: 0.62rem;
            font-weight: 700;
            white-space: nowrap;
            background: #eef2ff;
            color: #3b59df;
        }

        @media (max-width: 768px) {
            .group-workspace-layout {
                grid-template-columns: 1fr;
            }

            .group-annuaire-rail {
                max-width: none;
                max-height: 320px;
            }

            .group-members-rail {
                max-width: none;
                max-height: none;
            }

            .group-chat-pane {
                max-height: none;
            }

            .group-access-summary {
                width: 100%;
                max-width: none;
            }

            .group-access-summary-grid {
                grid-template-columns: 1fr;
            }
        }

        .group-settings-table td,
        .group-settings-table th {
            vertical-align: middle;
        }

        #administratif-pane-acces .group-settings-table input[type="checkbox"] {
            width: 1.2rem;
            height: 1.2rem;
            cursor: pointer;
        }

        .agenda-owner-bubbles {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }

        .agenda-owner-chip {
            border: 1px solid #d9dfec;
            background: #ffffff;
            color: #5f6b7a;
            border-radius: 8px;
            padding: 6px 12px;
            font-size: 0.85rem;
            font-weight: 600;
            line-height: 1.2;
            transition: all 0.2s ease;
        }

        .agenda-owner-chip:hover {
            border-color: #9fb0f5;
            color: #3b59df;
            background: #f8faff;
        }

        .agenda-owner-chip.active {
            border-color: #3b59df;
            color: #3b59df;
            background: #eef2ff;
            box-shadow: 0 1px 4px rgba(59, 89, 223, 0.15);
        }

        /* Styles pour la barre latérale gauche - Dossiers */
        .programme-sidebar {
            width: 280px;
            flex-shrink: 0;
            transition: all 0.3s ease;
            position: relative;
        }

        /* Sidebar masquée */
        .programme-sidebar.hidden {
            width: 0;
            margin-right: 0;
            overflow: hidden;
            opacity: 0;
        }

        /* Bouton de toggle dans le header */
        .sidebar-toggle-btn {
            background: rgba(255, 255, 255, 0.2) !important;
            border: none !important;
            color: white !important;
            padding: 4px 8px !important;
            font-size: 0.9rem;
            transition: all 0.2s ease;
        }

        .sidebar-toggle-btn:hover {
            background: rgba(255, 255, 255, 0.3) !important;
            transform: scale(1.1);
        }

        .sidebar-toggle-btn i {
            transition: transform 0.3s ease;
        }

        /* Rotation de l'icône quand la sidebar est masquée */
        .programme-sidebar.hidden .sidebar-toggle-btn i {
            transform: rotate(180deg);
        }

        /* Bouton pour rouvrir la sidebar */
        .sidebar-reopen-btn {
            position: fixed;
            left: 10px;
            top: 50%;
            transform: translateY(-50%);
            z-index: 1000;
            background: linear-gradient(135deg, #6378da 0%, #3b59df 100%);
            color: white;
            border: none;
            border-radius: 0 8px 8px 0;
            padding: 15px 8px;
            font-size: 1.2rem;
            cursor: pointer;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
            transition: all 0.3s ease;
        }

        .sidebar-reopen-btn:hover {
            background: linear-gradient(135deg, #5568ca 0%, #2a49cf 100%);
            padding-right: 12px;
            box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
        }

        /* Contenu principal recentré quand la sidebar est masquée */
        .programme-content {
            flex: 1;
            transition: all 0.3s ease;
        }

        .programme-layout.sidebar-hidden .programme-content {
            margin-left: auto;
            margin-right: auto;
            max-width: 75%;
        }

        .programme-sidebar .card {
            height: auto;
            /* S'adapte au contenu au lieu de prendre toute la hauteur */
            margin-bottom: 0;
            border-radius: 12px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
        }

        .programme-sidebar .card-header {
            background: linear-gradient(135deg, #6378da 0%, #3b59df 100%);
            color: white;
            border: none;
            font-weight: 600;
            padding: 10px 15px;
            border-radius: 12px 12px 0 0 !important;
        }

        .programme-sidebar .card-header h5 {
            font-size: 16px;
            /* Augmenté de 15px à 16px */
            margin: 0;
            letter-spacing: 0.5px;
        }

        .programme-sidebar .card-body {
            padding: 15px;
            height: auto;
            /* S'adapte au contenu - pas de limite de hauteur */
            overflow-y: visible;
            background: #f8f9fa;
        }

        .programme-sidebar-nav {
            padding: 12px 15px;
            background: white;
            border-bottom: 2px solid #e9ecef;
        }

        .programme-sidebar-nav .nav-link {
            padding: 8px 12px;
            font-size: 14px;
            /* Augmenté de 13px à 14px */
            color: #495057;
            border: none;
            background: #f8f9fa;
            width: 100%;
            text-align: left;
            border-radius: 6px;
            display: flex;
            align-items: center;
            transition: all 0.2s ease;
            margin-bottom: 6px;
            font-weight: 500;
        }

        .programme-sidebar-nav .nav-link:hover {
            background: #e9ecef;
            color: #007bff;
            transform: translateX(2px);
        }

        .programme-sidebar-nav .nav-link.active {
            background: linear-gradient(135deg, #6378da 0%, #3b59df 100%);
            color: white;
            box-shadow: 0 2px 8px rgba(0, 123, 255, 0.3);
        }

        .programme-sidebar-nav .nav-link i {
            margin-right: 8px;
            width: 18px;
            font-size: 14px;
        }

        .programme-sidebar-panel {
            display: none;
            padding: 15px;
            background: white;
        }

        .programme-sidebar-panel.active {
            display: block;
        }

        .programme-sidebar-panel h6 {
            color: #495057;
            font-size: 14px;
            /* Augmenté de 13px à 14px */
            font-weight: 600;
            margin-bottom: 12px;
            padding-bottom: 8px;
            border-bottom: 2px solid #e9ecef;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .programme-sidebar-btn {
            width: 100%;
            padding: 10px 12px;
            margin-bottom: 12px;
            border: none;
            background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
            color: white;
            border-radius: 6px;
            text-align: left;
            transition: all 0.2s ease;
            font-size: 14px;
            /* Augmenté de 13px à 14px */
            display: flex;
            align-items: center;
            font-weight: 500;
            box-shadow: 0 2px 6px rgba(40, 167, 69, 0.2);
        }

        .programme-sidebar-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(40, 167, 69, 0.4);
        }

        .programme-sidebar-btn i {
            margin-right: 8px;
            font-size: 14px;
        }

        .programme-sidebar-list {
            /* Pas de limite de hauteur - affiche tous les patients */
            overflow-y: visible;
            padding-right: 5px;
        }

        /* Styles pour le contenu Documents dans la sidebar */
        .documents-sidebar-content {
            font-size: 0.9rem;
        }

        .documents-sidebar-content .table {
            font-size: 0.85rem;
        }

        .documents-sidebar-content .table th,
        .documents-sidebar-content .table td {
            padding: 8px 6px;
        }

        .documents-sidebar-content .btn-sm {
            padding: 4px 8px;
            font-size: 0.8rem;
        }

        /* Styles pour l'arborescence */
        .cloud-tree {
            font-size: 0.85rem;
        }

        /* Barre de défilement pour l'arborescence */
        #cloud-tree {
            scrollbar-width: thin;
            scrollbar-color: #cbd5e0 #f1f5f9;
        }

        #cloud-tree::-webkit-scrollbar {
            width: 8px;
        }

        #cloud-tree::-webkit-scrollbar-track {
            background: #f1f5f9;
            border-radius: 4px;
        }

        #cloud-tree::-webkit-scrollbar-thumb {
            background: #cbd5e0;
            border-radius: 4px;
        }

        #cloud-tree::-webkit-scrollbar-thumb:hover {
            background: #a0aec0;
        }

        .tree-item {
            padding: 2px 0;
            cursor: pointer;
            user-select: none;
        }

        .tree-item:hover {
            background-color: #f0f0f0;
            border-radius: 4px;
        }

        .tree-folder {
            display: flex;
            align-items: center;
            padding: 2px 4px;
            min-width: 0;
        }

        .tree-folder>div {
            flex: 1;
            min-width: 0;
            overflow: hidden;
        }

        .tree-folder-icon {
            width: 16px;
            margin-right: 4px;
            text-align: center;
        }

        .tree-folder-name {
            flex: 1;
            font-weight: 500;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            min-width: 0;
        }

        .tree-children {
            margin-left: 20px;
            display: none;
        }

        .tree-children.expanded {
            display: block;
        }

        .tree-file {
            display: flex;
            align-items: center;
            padding: 2px 4px;
            margin-left: 10px;
            color: #6c757d;
            min-width: 0;
        }

        .tree-file>div {
            flex: 1;
            min-width: 0;
            overflow: hidden;
        }

        .tree-file span:not(.tree-file-icon):not(.ms-2) {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            display: inline-block;
            max-width: 100%;
        }

        .tree-file-icon {
            width: 16px;
            margin-right: 4px;
            text-align: center;
        }

        .tree-selected {
            background-color: #e3f2fd;
            border-radius: 4px;
        }

        /* Styles pour les boutons de suppression et renommage dans l'arborescence */
        .tree-delete-folder-btn,
        .tree-delete-file-btn,
        .tree-rename-folder-btn,
        .tree-rename-file-btn,
        .tree-download-folder-btn,
        .tree-download-file-btn {
            transition: all 0.2s ease;
            border: 1px solid #ced4da;
            background-color: transparent;
            color: #6c757d;
            opacity: 0.3;
        }

        .tree-delete-folder-btn:hover,
        .tree-delete-file-btn:hover {
            background-color: #dc3545;
            color: white;
            border-color: #dc3545;
            opacity: 1 !important;
            transform: scale(1.1);
        }

        .tree-rename-folder-btn:hover,
        .tree-rename-file-btn:hover {
            background-color: #ffc107;
            color: #000;
            border-color: #ffc107;
            opacity: 1 !important;
            transform: scale(1.1);
        }

        .tree-download-folder-btn:hover,
        .tree-download-file-btn:hover {
            background-color: #28a745;
            color: white;
            border-color: #28a745;
            opacity: 1 !important;
            transform: scale(1.1);
        }

        /* Boutons du tableau de résultats avec contour bleu */
        .tree-load-file-btn,
        .tree-save-file-btn,
        .tree-add-line-btn,
        .tree-docx-btn {
            transition: all 0.2s ease;
            border: 2px solid #6378da !important;
            background-color: transparent !important;
            color: #6378da;
            opacity: 1 !important;
        }

        .tree-load-file-btn:hover {
            background-color: #ffc107 !important;
            color: #000;
            border-color: #ffc107 !important;
            transform: scale(1.05);
        }

        .tree-save-file-btn:hover {
            background-color: #28a745 !important;
            color: white;
            border-color: #28a745 !important;
            transform: scale(1.05);
        }

        .tree-add-line-btn:hover {
            background-color: #28a745 !important;
            color: white;
            border-color: #28a745 !important;
            transform: scale(1.05);
        }

        .tree-docx-btn:hover {
            background-color: #6378da !important;
            color: white;
            border-color: #6378da !important;
            transform: scale(1.05);
        }

        .tree-folder:hover .tree-delete-folder-btn,
        .tree-file:hover .tree-delete-file-btn,
        .tree-folder:hover .tree-rename-folder-btn,
        .tree-file:hover .tree-rename-file-btn,
        .tree-folder:hover .tree-download-folder-btn,
        .tree-file:hover .tree-download-file-btn {
            opacity: 0.6;
        }

        .programme-sidebar-item {
            padding: 10px 12px;
            margin-bottom: 8px;
            border: 1px solid #e9ecef;
            border-radius: 6px;
            background: white;
            cursor: pointer;
            transition: all 0.2s ease;
            display: flex;
            align-items: center;
            justify-content: space-between;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
        }

        .programme-sidebar-item:hover {
            background: #f8f9fa;
            border-color: #007bff;
            transform: translateX(3px);
            box-shadow: 0 3px 8px rgba(0, 123, 255, 0.15);
        }

        .programme-sidebar-item-info {
            flex: 1;
        }

        .programme-sidebar-item-name {
            font-weight: 600;
            color: #495057;
            margin: 0;
            font-size: 14px;
            /* Augmenté de 13px à 14px */
        }

        .programme-sidebar-item-details {
            font-size: 11px;
            color: #6c757d;
            margin: 2px 0 0 0;
        }

        .programme-sidebar-item-actions {
            display: flex;
            gap: 4px;
        }

        .programme-sidebar-item-btn {
            padding: 5px 8px;
            border: none;
            background: transparent;
            color: #6c757d;
            border-radius: 4px;
            cursor: pointer;
            transition: all 0.2s ease;
            font-size: 13px;
            /* Augmenté de 12px à 13px */
        }

        .programme-sidebar-item-btn:hover {
            background: #e9ecef;
            color: #007bff;
        }

        .programme-sidebar-empty {
            text-align: center;
            padding: 30px 15px;
            color: #6c757d;
        }

        .programme-sidebar-empty i {
            color: #cbd5e0;
        }

        /* Layout pour la section Programme */
        #programme-section {
            margin-top: 0;
        }

        .programme-layout {
            display: flex;
            min-height: calc(100vh - 80px);
            margin: 0 !important;
            padding: 20px 20px 0 20px;
            /* Padding gauche et droit pour voir le background */
        }

        .programme-content {
            flex: 1;
            max-width: calc(100% - 20px);
            /* Limite la largeur pour laisser de l'espace */
            display: flex;
            flex-direction: column;
            margin-right: 20px;
            /* Espace à droite pour voir le background */
        }

        /* Ajuster la hauteur de la barre latérale pour qu'elle commence au niveau des onglets */
        .programme-sidebar {
            margin-top: 0;
            margin-right: 15px;
            /* Espace entre Dossiers et les onglets */
        }

        .navbar {
            position: sticky;
            top: 0;
            z-index: 1060;
        }

        /* Styles pour l'éditeur Quill */
        #report-editor-container .ql-toolbar {
            background: #f8f9fa;
            border: 1px solid #ddd;
            border-radius: 5px 5px 0 0;
        }

        #report-editor-container .ql-container {
            border: 1px solid #ddd;
            border-top: none;
            border-radius: 0 0 5px 5px;
            font-size: 14px;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        #report-editor {
            min-height: 600px;
            background: white;
        }

        #report-editor h2 {
            color: #2c5aa0;
        }


        /* Styles pour les tableaux dans l'éditeur de rapport */
        .ql-editor table {
            border-collapse: collapse;
            margin: 10px 0;
            width: 100%;
            font-size: 0.9rem;
        }

        .ql-editor table th,
        .ql-editor table td {
            border: 1px solid #dee2e6;
            padding: 8px 12px;
            text-align: left;
        }

        .ql-editor table th {
            background-color: #343a40;
            color: white;
            font-weight: bold;
            text-align: center;
        }

        .ql-editor table tbody tr:nth-child(even) {
            background-color: #f8f9fa;
        }

        .ql-editor table tbody tr:hover {
            background-color: #e9ecef;
        }

        .ql-editor .badge {
            font-size: 0.75rem;
            padding: 4px 8px;
        }

        /* Styles pour les tableaux dans la section de rapport */
        .report-table-section {
            margin: 20px 0;
            padding: 15px;
            background-color: #f8f9fa;
            border: 1px solid #dee2e6;
            border-radius: 8px;
        }

        .report-table-section table {
            width: 100%;
            border-collapse: collapse;
            margin: 0;
            font-size: 0.9rem;
        }

        .report-table-section table th,
        .report-table-section table td {
            border: 1px solid #dee2e6;
            padding: 8px 12px;
            text-align: left;
        }

        .report-table-section table th {
            background-color: #343a40;
            color: white;
            font-weight: bold;
            text-align: center;
        }

        .report-table-section table tbody tr:nth-child(even) {
            background-color: #f8f9fa;
        }

        .report-table-section table tbody tr:hover {
            background-color: #e9ecef;
        }

        .report-table-section .badge {
            font-size: 0.75rem;
            padding: 4px 8px;
        }

        /* Styles pour l'affichage des formules */
        .formula-display {
            background: #f8f9fa;
            border: 1px solid #dee2e6;
            border-radius: 8px;
            padding: 15px;
            margin: 10px 0;
        }

        .formula-conversions {
            background: #f8f9fa;
            border: 1px solid #dee2e6;
            border-radius: 5px;
            padding: 12px;
            margin-bottom: 15px;
            font-size: 0.9rem;
        }

        .formula-conversions-title {
            font-weight: bold;
            margin-bottom: 10px;
            color: #495057;
            font-size: 0.95rem;
            border-bottom: 1px solid #dee2e6;
            padding-bottom: 5px;
        }

        .formula-conversion-group {
            margin-bottom: 8px;
        }

        .formula-conversion-group:last-child {
            margin-bottom: 0;
        }

        .formula-conversion-label {
            font-weight: 600;
            color: #495057;
            margin-bottom: 4px;
            font-size: 0.9rem;
        }

        .formula-conversion-values {
            color: #212529;
            font-family: 'Courier New', monospace;
            font-size: 0.85rem;
            line-height: 1.6;
        }

        .formula-conversion-item {
            display: inline-block;
            margin-right: 8px;
        }

        .formula-variables {
            display: flex;
            flex-direction: column;
            gap: 5px;
            margin-bottom: 15px;
        }

        .formula-variable-item {
            display: flex;
            align-items: center;
            font-family: 'Courier New', monospace;
            font-size: 0.95rem;
            color: #000;
        }

        .formula-variable-item strong {
            min-width: 30px;
            color: #000;
        }

        .formula-line {
            margin: 10px 0;
            padding: 10px;
            background: white;
            border-radius: 5px;
            font-family: 'Courier New', monospace;
        }

        .formula-result {
            font-weight: bold;
            color: #198754;
            font-size: 1.1rem;
            margin-top: 10px;
        }

        /* Correction du backdrop des modales pour qu'il couvre toute la page même avec zoom */
        .modal-backdrop {
            position: fixed !important;
            top: 0 !important;
            left: 0 !important;
            right: 0 !important;
            bottom: 0 !important;
            width: 100% !important;
            height: 100% !important;
            min-width: 100vw !important;
            min-height: 100vh !important;
            max-width: none !important;
            max-height: none !important;
            z-index: 1070 !important;
            background-color: rgba(0, 0, 0, 0.5) !important;
            margin: 0 !important;
            padding: 0 !important;
        }

        .modal-backdrop.show {
            opacity: 0.5 !important;
        }

        body.modal-open {
            overflow: hidden !important;
            padding-right: 0 !important;
        }

        html.modal-open {
            overflow: hidden !important;
        }

        .modal {
            z-index: 1080 !important;
        }

        #groupSettingsModal .modal-dialog {
            margin-top: 4.5rem;
        }