/* ============================================================================ mobile.css — Couche d'adaptation mobile / tactile ---------------------------------------------------------------------------- Chargée EN DERNIER (après index-page.css et new-mode.css) afin de pouvoir corriger les deux thèmes (Old et New) d'un seul endroit. Règle d'or : TOUT est enfermé dans une media query « petit écran » ou « pointeur grossier ». Sur un ordinateur (≥ 992px, souris), ce fichier n'applique STRICTEMENT rien — le rendu bureau reste identique. Sommaire 1. Garde-fous globaux (débordement horizontal, images, tableaux) 2. Bannière : menu « hamburger » et tiroir de navigation 3. Section Programme : mise en page en colonne 4. Tiroir « Dossiers » (barre latérale) + bouton flottant 5. Onglets : barre défilante collante 6. Densité, cartes, formulaires 7. Zones spécifiques (rapport, conversation, normes, agenda, groupes) 8. Modales et panneaux latéraux 9. Téléphone (≤ 575.98px) : compacité maximale 10. Écrans tactiles : suppression des effets de survol 11. Accessibilité / confort (mouvement réduit, orientation paysage) ========================================================================== */ /* ========================================================================== 1. GARDE-FOUS GLOBAUX ========================================================================== */ @media (max-width: 991.98px) { :root { /* Sert de repère au menu Profil latéral (top) : la bannière est plus basse sur mobile. */ --app-navbar-height: 56px; } html, body { /* Aucun élément ne doit pouvoir provoquer un défilement latéral de la page entière : le scroll horizontal se fait DANS les conteneurs prévus pour (tableaux, barres d'onglets). ⚠ `clip` et NON `hidden` : `hidden` ferait de une boîte de défilement, ce qui casserait TOUS les `position: sticky` de la page (bannière, barre d'onglets). `clip` rogne sans créer de scrollport. */ overflow-x: clip; max-width: 100%; } body { /* Le dégradé de fond est fixé : évite le « saut » de couleur pendant le défilement élastique iOS. */ background-attachment: fixed; } img, svg, video, canvas, iframe { max-width: 100%; height: auto; } /* Les mots très longs (emails, chemins de fichiers, identifiants de partage) ne débordent plus de leur carte. */ p, li, td, th, dd, dt, label, .card-body, .alert, .badge { overflow-wrap: anywhere; } /* Un tableau large devient une zone à défilement horizontal autonome (le wrapper .mobile-table-scroll est posé par mobile-ux.js). */ .mobile-table-scroll { width: 100%; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; } .mobile-table-scroll>table { margin-bottom: 0; } /* Conteneurs de tableaux connus */ #excel-table-container, #results-container, .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; } /* Textes en `white-space: nowrap` qui débordaient l'écran. */ .programme-no-patient-overlay p, .tool-wip-message p, .alert p { white-space: normal !important; } /* Les rangées Bootstrap ont des marges négatives (--bs-gutter-x / 2) : une gouttière `g-4`/`g-5` (24 à 48px) dépasse le padding des conteneurs sur mobile → la ligne sort de l'écran. On PLAFONNE ces grandes gouttières (jamais les petites : `g-1`/`g-2` doivent rester serrées, la fiche patient en dépend). */ .content-section .row.g-4, .content-section .row.g-5, .content-section .row.gx-4, .content-section .row.gx-5 { --bs-gutter-x: 1.5rem; } /* Les blocs

 / code / liens générés ne poussent plus la page. */
    pre,
    code,
    .text-monospace,
    [id$="-link-container"],
    #questionnaire-links-copy-container {
        max-width: 100%;
        overflow-x: auto;
        overflow-wrap: anywhere;
        white-space: pre-wrap;
    }

    /* Marges de page resserrées : on récupère ~20px de largeur utile. */
    .container-fluid {
        padding-left: 12px;
        padding-right: 12px;
    }

    #main-sections-container.container-fluid {
        padding-top: 12px;
    }

    /* Une hauteur minimale de 1800px sur mobile = des kilomètres de vide. */
    .content-section {
        min-height: auto !important;
    }
}


/* ==========================================================================
   2. BANNIÈRE : MENU « HAMBURGER » ET TIROIR DE NAVIGATION
   --------------------------------------------------------------------------
   Sans cette section, `navbar-expand-lg` (sans .navbar-collapse) empile les
   6 liens de navigation ET les 6 boutons du bloc « auth » verticalement :
   la bannière occupait la totalité de l'écran d'un téléphone.
   ========================================================================== */

/* Le bouton n'existe qu'en dessous de lg (classe d-lg-none dans le HTML). */
.mobile-nav-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    font-size: 1.15rem;
    line-height: 1;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.18s ease, transform 0.18s ease;
}

.mobile-nav-toggle:active {
    transform: scale(0.94);
}

/* Mode New : bannière claire → hamburger en encre, pas en blanc. */
html.synapp-new .mobile-nav-toggle {
    border-color: var(--nm-line, rgba(20, 26, 44, 0.14));
    background: var(--nm-bg-soft, rgba(20, 26, 44, 0.04));
    color: var(--nm-ink, #141a2c);
}

@media (max-width: 991.98px) {

    .mobile-nav-toggle {
        display: inline-flex;
    }

    /* Croix quand le tiroir est ouvert (FontAwesome : f00d = xmark) */
    html.mobile-nav-open .mobile-nav-toggle .fa-bars::before {
        content: "\f00d";
    }

    /* --- Rangée du haut : marque + hamburger, le reste passe dessous --- */
    #app-main-navbar {
        padding: 0 !important;
    }

    #app-main-navbar>.container-fluid {
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
        padding: 8px 12px !important;
    }

    .navbar-brand {
        margin-left: 0 !important;
        margin-right: auto !important;
        padding-left: 0 !important;
        font-size: 1.15rem !important;
    }

    .navbar-brand i {
        font-size: 1.1rem !important;
    }

    /* --- Le tiroir : les deux blocs .navbar-nav (liens + compte) --- */
    #app-main-navbar .navbar-nav {
        display: none;
        flex-basis: 100%;
        width: 100%;
        margin: 0 !important;
        padding: 6px 0 10px;
        gap: 4px;
    }

    html.mobile-nav-open #app-main-navbar .navbar-nav {
        display: flex;
        flex-direction: column;
        align-items: stretch !important;
        max-height: calc(100dvh - 120px);
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        animation: mobileNavIn 0.22s ease both;
    }

    html.mobile-nav-open #app-main-navbar .navbar-nav+.navbar-nav {
        border-top: 1px solid rgba(255, 255, 255, 0.18);
        padding-top: 10px;
    }

    html.synapp-new.mobile-nav-open #app-main-navbar .navbar-nav+.navbar-nav {
        border-top-color: var(--nm-line, rgba(20, 26, 44, 0.12));
    }

    @keyframes mobileNavIn {
        from {
            opacity: 0;
            transform: translateY(-6px);
        }

        to {
            opacity: 1;
            transform: none;
        }
    }

    /* Liens du tiroir : pleine largeur, cible tactile confortable */
    #app-main-navbar .navbar-nav .nav-link,
    #app-main-navbar .navbar-nav .nav-item {
        width: 100%;
        margin: 0 !important;
    }

    #app-main-navbar .navbar-nav .nav-link {
        display: flex !important;
        align-items: center;
        gap: 4px;
        min-height: 46px;
        padding: 0.6rem 0.85rem !important;
        border-radius: 10px;
        font-size: 1rem !important;
        transform: none !important;
        box-shadow: none !important;
    }

    /* Les menus déroulants de la bannière s'ouvrent DANS le flux : sinon ils
       sont rognés par le défilement du tiroir ou sortent de l'écran. */
    #app-main-navbar .dropdown-menu {
        position: static !important;
        inset: auto !important;
        transform: none !important;
        float: none;
        width: 100%;
        min-width: 0 !important;
        max-width: 100%;
        margin: 4px 0 6px !important;
        border-radius: 12px;
    }

    #app-main-navbar .dropdown-menu .dropdown-item {
        min-height: 44px;
        display: flex;
        align-items: center;
        white-space: normal;
    }

    /* Menu Notifications / Paramètres : hauteur bornée, largeur fluide */
    #group-notifications-menu,
    .settings-menu {
        min-width: 0 !important;
        max-height: 58vh !important;
    }

    /* --- Bloc « compte » : grille de boutons plutôt qu'une colonne --- */
    html.mobile-nav-open #auth-area {
        flex-direction: row !important;
        flex-wrap: wrap;
        align-items: center !important;
        justify-content: flex-start;
        gap: 8px;
    }

    #auth-area>.dropdown,
    #auth-area>.btn,
    #auth-area>a.btn {
        margin: 0 !important;
    }

    #auth-area .btn {
        min-height: 42px;
        padding: 0.45rem 0.9rem;
    }

    #auth-area .site-mode-switch {
        margin-right: 0;
    }

    #auth-area .site-mode-btn {
        min-height: 34px;
        padding: 4px 18px;
    }

    /* Un menu déroulant ouvert dans le tiroir prend toute la largeur. */
    #auth-area .dropdown {
        flex: 1 1 100%;
    }

    #auth-area .dropdown>.btn {
        width: 100%;
    }

    /* Le badge de rôle reste lisible mais ne casse pas la ligne. */
    #role-badge {
        margin: 0 !important;
    }
}


/* ==========================================================================
   3. SECTION PROGRAMME : MISE EN PAGE EN COLONNE
   ========================================================================== */

@media (max-width: 991.98px) {

    .programme-layout {
        display: block;
        min-height: auto;
        padding: 0 !important;
    }

    .programme-content,
    .programme-layout.sidebar-hidden .programme-content {
        max-width: 100% !important;
        margin: 0 !important;
        width: 100%;
    }

    /* Les 3 « wraps » d'outils (neuropsy / neuro / psychothérapeute) */
    #programme-main-tablist-wrap,
    #neurologue-content-wrap,
    #psychotherapeute-content-wrap {
        max-width: 100%;
    }
}


/* ==========================================================================
   4. TIROIR « DOSSIERS » (BARRE LATÉRALE) + BOUTON FLOTTANT
   --------------------------------------------------------------------------
   Sur mobile la barre de 280px est convertie en tiroir superposé : elle ne
   vole plus la moitié de la largeur au contenu. Le HTML et la fonction
   toggleSidebar() sont inchangés — seules les classes .hidden /
   .sidebar-hidden pilotent l'animation.
   ========================================================================== */

@media (max-width: 991.98px) {

    .programme-sidebar {
        position: fixed;
        top: var(--app-navbar-height, 56px);
        left: 0;
        bottom: 0;
        z-index: 1056;
        width: min(88vw, 340px) !important;
        margin: 0 !important;
        padding: 10px;
        opacity: 1 !important;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        background: #eef1f9;
        box-shadow: 6px 0 28px rgba(9, 16, 40, 0.28);
        transform: translateX(0);
        transition: transform 0.26s cubic-bezier(0.22, 0.61, 0.36, 1);
    }

    html.synapp-new .programme-sidebar {
        background: var(--nm-bg, #f5f7fb);
    }

    /* Fermée : on translate hors écran (la largeur 0 d'origine ferait
       « imploser » la carte pendant l'animation). */
    .programme-sidebar.hidden {
        transform: translateX(-102%);
        visibility: hidden;
        overflow: hidden;
    }

    .programme-sidebar .card {
        height: auto;
        box-shadow: none;
    }

    .programme-sidebar .card-body {
        padding: 12px;
    }

    /* L'arborescence occupe la hauteur disponible du tiroir. */
    #cloud-tree {
        max-height: none !important;
    }

    /* Voile de fond (créé par mobile-ux.js) */
    .mobile-drawer-backdrop {
        position: fixed;
        inset: 0;
        z-index: 1055;
        background: rgba(9, 16, 40, 0.42);
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.22s ease, visibility 0.22s ease;
        -webkit-tap-highlight-color: transparent;
    }

    .mobile-drawer-backdrop.is-visible {
        opacity: 1;
        visibility: visible;
    }

    /* Bouton de réouverture : pastille flottante en bas à gauche, avec
       libellé — bien plus trouvable que l'onglet vertical d'origine. */
    .sidebar-reopen-btn {
        top: auto;
        bottom: calc(16px + env(safe-area-inset-bottom, 0px));
        left: 12px;
        transform: none;
        display: inline-flex !important;
        align-items: center;
        gap: 8px;
        min-height: 48px;
        padding: 0 18px 0 16px;
        border-radius: 999px;
        font-size: 0.9rem;
        font-weight: 600;
        box-shadow: 0 10px 24px rgba(9, 16, 40, 0.32);
        z-index: 1040;
    }

    .sidebar-reopen-btn::after {
        content: "Dossiers";
        font-size: 0.86rem;
        letter-spacing: 0.02em;
    }

    .sidebar-reopen-btn:hover {
        padding-right: 18px;
    }

    /* Masqué quand le tiroir est ouvert (en plus du style inline du JS). */
    .programme-layout:not(.sidebar-hidden) .sidebar-reopen-btn {
        display: none !important;
    }

    /* Le bouton de fermeture dans l'en-tête « Dossiers » devient une vraie
       cible tactile. */
    .sidebar-toggle-btn {
        min-width: 40px;
        min-height: 40px;
        padding: 6px 10px !important;
        font-size: 1.05rem;
    }
}


/* ==========================================================================
   5. ONGLETS : BARRE DÉFILANTE COLLANTE
   --------------------------------------------------------------------------
   6 onglets ne tiennent pas sur 375px : ils passaient sur 3 lignes. On les
   met sur une seule ligne défilante, collée sous la bannière pour rester
   accessible sans remonter en haut de page.
   ========================================================================== */

@media (max-width: 991.98px) {

    /* Collée SOUS la bannière (elle-même sticky, top: 0) : la hauteur réelle
       est mesurée puis publiée dans --app-navbar-height par mobile-ux.js. */
    #programme-main-tablist-wrap,
    #neurologue-content-wrap>.nav-tabs,
    #psychotherapeute-content-wrap>.nav-tabs {
        position: sticky;
        top: var(--app-navbar-height, 58px);
        z-index: 6;
        background: var(--nm-bg-raise, #ffffff);
        border-radius: 12px 12px 0 0;
        box-shadow: 0 6px 14px -12px rgba(9, 16, 40, 0.5);
    }

    #programmeTabs,
    #neurologueTabs,
    #psychotherapeuteTabs,
    .tab-pane .nav-tabs,
    .programme-content .nav-tabs {
        flex-wrap: nowrap !important;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
        padding-bottom: 2px;
    }

    #programmeTabs::-webkit-scrollbar,
    #neurologueTabs::-webkit-scrollbar,
    #psychotherapeuteTabs::-webkit-scrollbar,
    .programme-content .nav-tabs::-webkit-scrollbar,
    .tab-pane .nav-tabs::-webkit-scrollbar {
        height: 0;
        display: none;
    }

    .programme-content .nav-tabs .nav-item,
    .tab-pane .nav-tabs .nav-item {
        flex: 0 0 auto;
        scroll-snap-align: start;
    }

    .nav-tabs .nav-link {
        white-space: nowrap;
        margin-right: 4px !important;
        padding: 10px 14px !important;
        font-size: 0.82rem !important;
        min-height: 44px;
    }

    /* Les icônes des onglets prennent de la place pour rien sur un petit
       écran : on garde le libellé, plus explicite. */
    .programme-content>div>.nav-tabs .nav-link>i {
        display: none;
    }

    /* Le contenu d'onglet respire moins : chaque pixel compte. */
    .tab-content {
        border-radius: 0 0 12px 12px;
    }

    .tab-pane {
        padding: 14px 12px !important;
    }
}


/* ==========================================================================
   6. DENSITÉ, CARTES, FORMULAIRES
   ========================================================================== */

@media (max-width: 991.98px) {

    .card {
        margin-bottom: 12px;
    }

    .card-body {
        padding: 14px;
    }

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

    .card-header h5,
    .card-header h6 {
        font-size: 0.95rem;
    }

    /* En-têtes de carte : titre + boutons empilés proprement plutôt que
       comprimés sur une ligne. */
    .card-header.d-flex,
    .fiche-section-header,
    .qn-section-header {
        flex-wrap: wrap;
        gap: 8px;
    }

    /* Groupes de boutons d'action : ils passent à la ligne au lieu de
       déborder horizontalement. */
    .btn-toolbar,
    .btn-group:not(.btn-group-vertical) {
        flex-wrap: wrap;
    }

    /* Cibles tactiles : 44px est le minimum recommandé (iOS HIG / WCAG). */
    .btn,
    .form-select,
    .form-control,
    .nav-link,
    .dropdown-item,
    .page-link {
        touch-action: manipulation;
    }

    .btn:not(.btn-close):not(.btn-sm):not(.sidebar-toggle-btn):not(.site-mode-btn) {
        min-height: 44px;
    }

    .btn-sm {
        min-height: 38px;
        padding: 0.35rem 0.7rem;
    }

    .btn-close {
        min-width: 40px;
        min-height: 40px;
        background-size: 0.85em;
    }

    /* Les champs de largeur figée (styles inline compris) redeviennent
       fluides. */
    .form-control,
    .form-select,
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="number"],
    input[type="search"],
    input[type="date"],
    input[type="time"],
    textarea,
    select {
        max-width: 100% !important;
    }

    #document-search,
    #programme-doc-owner-select {
        width: 100% !important;
        height: auto !important;
    }

    /* Fiche patient : la grille de cellules de 150px devient élastique. */
    #patient-info-pane .fiche-informations-compact {
        --fiche-field-width: 46%;
    }

    #patient-info-pane .fiche-informations-compact .row.g-2>[class*="col-"]:not(.col-12),
    #patient-info-pane .fiche-informations-compact .fiche-champs-requis>[class*="col-"] {
        flex: 1 1 var(--fiche-field-width);
        width: auto;
        max-width: 100%;
        min-width: 130px;
    }

    #patient-info-pane .fiche-informations-compact .row.g-2>[class*="col-"]:has(#patient-adresse-rue) {
        flex-basis: 100%;
        width: auto;
        max-width: 100%;
    }

    /* Les libellés tronqués sur une ligne redeviennent lisibles. */
    #patient-info-pane .fiche-informations-compact .row.g-2 .form-label,
    #patient-info-pane .fiche-informations-compact .fiche-champs-requis .form-label {
        white-space: normal;
        overflow: visible;
    }

    /* Barres d'outils « filtres + actions » de la sidebar Dossiers */
    .documents-sidebar-content .d-flex.justify-content-between {
        gap: 8px;
    }

    .documents-sidebar-content .btn-sm {
        flex: 1 1 auto;
    }
}


/* ==========================================================================
   7. ZONES SPÉCIFIQUES
   ========================================================================== */

@media (max-width: 991.98px) {

    /* --- Rédaction du rapport (éditeur Collabora en iframe) ---
       Le panneau porte un style INLINE `height:84vh; min-height:900px` :
       sur un téléphone, ces 900px dépassent la hauteur d'écran et rendent
       l'onglet inutilisable. On repasse sur une hauteur relative. */
    #report-collabora-panel>.card-body,
    #psy-report-collabora-panel>.card-body {
        height: 72dvh !important;
        min-height: 380px !important;
        max-height: 80dvh !important;
    }

    /* Éditeur Quill (rapports secondaires) */
    #report-editor {
        min-height: 55vh;
    }

    #report-editor-container .ql-toolbar {
        position: sticky;
        top: 0;
        z-index: 4;
        display: flex;
        flex-wrap: wrap;
        row-gap: 2px;
        padding: 6px 4px;
    }

    #report-editor-container .ql-toolbar .ql-formats {
        margin-right: 8px !important;
    }

    #report-container,
    #summary-content,
    #transcription-content,
    #logs-container {
        max-height: 55vh;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* --- Analyse de conversation --- */
    [id$="chatbot-messages"],
    #conversation-pane .chat-messages {
        max-height: 52vh;
    }

    [id$="chatbot-messages"] .chat-bubble,
    [id$="chatbot-messages"] .badge {
        max-width: 92% !important;
    }

    /* Lecteur audio natif : pleine largeur */
    audio {
        width: 100%;
    }

    /* --- Recherche de normes --- */
    #excel-table {
        font-size: 0.72rem;
    }

    #excel-table th,
    #excel-table td {
        padding: 4px 6px !important;
        white-space: nowrap;
    }

    #norms-patient-info-bubble {
        max-width: 100% !important;
    }

    /* --- Administration : agenda, organisation, groupes --- */
    .agenda-week-grid,
    .agenda-month-grid {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .agenda-cal-controls {
        flex-wrap: wrap;
        gap: 8px;
    }

    .group-workspace-layout,
    .contact-chat-shell,
    .floating-chat-panel-main,
    .group-list-grid,
    .group-access-summary-grid,
    #demo-section .home-tools-grid {
        grid-template-columns: 1fr !important;
    }

    .floating-chat-panel {
        width: min(94vw, 420px) !important;
        max-width: 94vw;
        right: 3vw !important;
    }

    /* --- Accueil / présentation --- */
    #accueil-section .container-lg,
    #demo-section .container-lg {
        padding-left: 12px;
        padding-right: 12px;
    }

    .accueil-switch,
    .site-mode-switch {
        flex-shrink: 0;
    }
}


/* ==========================================================================
   8. MODALES ET PANNEAUX LATÉRAUX
   ========================================================================== */

@media (max-width: 991.98px) {

    .modal-dialog,
    .modal-dialog.modal-xl,
    .modal-dialog.modal-lg,
    .modal-dialog.modal-sm {
        max-width: 100% !important;
        margin: 8px;
    }

    .modal-content {
        border-radius: 14px;
        max-height: calc(100dvh - 16px);
    }

    .modal-body {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        padding: 14px;
    }

    .modal-header,
    .modal-footer {
        padding: 12px 14px;
        flex-wrap: wrap;
        gap: 8px;
    }

    .modal-footer>.btn {
        flex: 1 1 auto;
        margin: 0 !important;
    }

    .modal-footer>.me-auto {
        flex-basis: 100%;
    }

    /* Popover d'avertissement de l'import de batterie (min-width: 36rem) */
    #batteryImportModal .battery-import-warn-popover {
        min-width: 0 !important;
        max-width: 100% !important;
        width: 100%;
        left: 0;
    }

    /* Menu Profil latéral : ne dépasse plus de l'écran. */
    .profile-sidebar {
        width: min(86vw, 350px);
        right: calc(-1 * min(86vw, 350px));
    }

    .profile-menu-btn {
        min-height: 48px;
    }
}


/* ==========================================================================
   9. TÉLÉPHONE (≤ 575.98px)
   ========================================================================== */

@media (max-width: 575.98px) {

    /* iOS zoome automatiquement sur un champ dont la police fait moins de
       16px : on neutralise ce zoom (et le dézoom manuel qui s'ensuit). */
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
    select,
    textarea,
    .form-control,
    .form-select {
        font-size: 16px !important;
    }

    .form-control-sm,
    .form-select-sm {
        padding: 0.4rem 0.6rem;
    }

    .container-fluid {
        padding-left: 8px;
        padding-right: 8px;
    }

    /* Le padding horizontal ne descend PAS sous 12px : c'est la demi-gouttière
       des `.row` Bootstrap, sous laquelle les colonnes débordent de l'écran. */
    .tab-pane {
        padding: 12px !important;
    }

    .card-body {
        padding: 12px;
    }

    /* Une carte par ligne : les colonnes Bootstrap « md » restent parfois
       côte à côte à cause de largeurs mini. */
    .row>[class*="col-"] {
        min-width: 0;
    }

    h1 {
        font-size: 1.5rem;
    }

    h2 {
        font-size: 1.3rem;
    }

    h3 {
        font-size: 1.15rem;
    }

    h4 {
        font-size: 1.05rem;
    }

    h5 {
        font-size: 1rem;
    }

    h6 {
        font-size: 0.92rem;
    }

    .navbar-brand {
        font-size: 1.05rem !important;
    }

    /* Barre d'actions de la sidebar : 2 boutons par ligne */
    .documents-sidebar-content .btn-sm {
        flex: 1 1 calc(50% - 8px);
    }

    /* Le switch Old/New et le badge de rôle prennent moins de place */
    .site-mode-btn {
        padding: 4px 14px;
        font-size: 0.68rem;
    }

    /* Tableaux : police resserrée pour limiter le défilement latéral */
    .mobile-table-scroll table,
    .table-responsive table {
        font-size: 0.8rem;
    }

    /* Zone de sécurité en bas (barre de gestes iOS / Android) */
    body {
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }
}


/* ==========================================================================
   10. ÉCRANS TACTILES : SUPPRESSION DES EFFETS DE SURVOL
   --------------------------------------------------------------------------
   Sur tactile, un :hover reste « collé » après le tap : l'élément garde son
   décalage/ombre jusqu'au tap suivant. On neutralise les transformations
   (le retour visuel passe par :active, instantané).
   ========================================================================== */

@media (hover: none) and (pointer: coarse) {

    .navbar-nav .nav-link:hover,
    .nav-tabs .nav-link:hover,
    .card:hover,
    .btn:hover,
    .sidebar-toggle-btn:hover,
    .programme-sidebar-btn:hover,
    .programme-sidebar-item:hover,
    .group-selector-chip:hover,
    .settings-preset:hover,
    .accueil-switch-btn:hover,
    .site-mode-btn:hover {
        transform: none !important;
    }

    .card:hover {
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    }

    /* Retour tactile immédiat et discret */
    .btn:active,
    .nav-link:active,
    .dropdown-item:active,
    .programme-sidebar-item:active {
        opacity: 0.82;
    }

    /* Le halo bleu du tap Android/iOS est remplacé par le :active ci-dessus */
    a,
    button,
    .btn,
    .nav-link,
    .dropdown-item,
    label {
        -webkit-tap-highlight-color: rgba(59, 89, 223, 0.12);
    }

    /* Les transitions « all » sur des éléments nombreux coûtent cher au
       défilement : on les cible. */
    .nav-tabs .nav-link,
    .programme-sidebar,
    .programme-content {
        transition-property: transform, background-color, color, box-shadow;
    }
}


/* ==========================================================================
   11. ACCESSIBILITÉ / CONFORT
   ========================================================================== */

/* Défilement fluide lors des sauts d'ancre (mobile uniquement). */
@media (max-width: 991.98px) and (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}

@media (prefers-reduced-motion: reduce) {

    .programme-sidebar,
    .mobile-drawer-backdrop,
    #app-main-navbar .navbar-nav {
        transition: none !important;
        animation: none !important;
    }
}

/* Paysage sur téléphone : la bannière collante mange la moitié de la
   hauteur utile → on la libère. */
@media (max-width: 991.98px) and (max-height: 480px) and (orientation: landscape) {

    .navbar {
        position: static;
    }

    #programme-main-tablist-wrap,
    #neurologue-content-wrap>.nav-tabs,
    #psychotherapeute-content-wrap>.nav-tabs {
        position: static;
    }

    html.mobile-nav-open #app-main-navbar .navbar-nav {
        max-height: 70dvh;
    }
}


/* ==========================================================================
   12. MODE NEW — coquille outil sous 992px (après toutes les règles mobile)
   --------------------------------------------------------------------------
   mobile.css est chargé EN DERNIER : sans ce bloc, display:block / sticky
   onglets empêchent le panneau d'onglet d'aller jusqu'au pied de page.
   ========================================================================== */

@media (max-width: 991.98px) {

    /* Flux page : pas de coquille fixed / pas de scroll interne onglet. */
    html.synapp-new #programme-section.content-section {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        width: 100% !important;
        height: auto !important;
        max-height: none !important;
        min-height: 0 !important;
        padding: 0 0 var(--nm-footer-h, 22px) !important;
        margin: 0 !important;
        overflow: visible !important;
        box-sizing: border-box !important;
    }

    html.synapp-new #programme-section .programme-layout {
        display: flex !important;
        flex-direction: column !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 8px 10px !important;
        gap: 8px !important;
        align-items: stretch !important;
        box-sizing: border-box !important;
    }

    html.synapp-new #programme-section .programme-content,
    html.synapp-new #programme-section .programme-layout.sidebar-hidden .programme-content {
        display: block !important;
        flex: 1 1 auto !important;
        height: auto !important;
        min-height: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
        margin: 0 !important;
    }

    /* Tiroir Dossiers : hauteur = contenu (plafond viewport). */
    html.synapp-new #programme-section .programme-sidebar {
        top: var(--app-navbar-height, 56px) !important;
        bottom: auto !important;
        height: auto !important;
        max-height: calc(100dvh - var(--app-navbar-height, 56px) - var(--nm-footer-h, 22px)) !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
    }

    html.synapp-new #programme-section .programme-sidebar > .card {
        flex: 0 1 auto !important;
        min-height: 0 !important;
        height: auto !important;
        max-height: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        margin: 0 !important;
        overflow: hidden !important;
    }

    html.synapp-new #programme-section .programme-sidebar .card-body,
    html.synapp-new #programme-section .documents-sidebar-content {
        flex: 0 1 auto !important;
        min-height: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
    }

    html.synapp-new #programme-section #cloud-tree {
        flex: 0 1 auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow-y: auto !important;
        margin-bottom: 0 !important;
    }

    html.synapp-new #programme-section #storage-info {
        flex: 0 0 auto !important;
        margin-top: 8px !important;
        margin-bottom: 0 !important;
    }

    html.synapp-new #programme-section #programme-main-tablist-wrap,
    html.synapp-new #programme-section #neurologue-content-wrap,
    html.synapp-new #programme-section #psychotherapeute-content-wrap {
        position: sticky !important;
        top: var(--app-navbar-height, 56px) !important;
        flex: 0 0 auto !important;
        z-index: 6;
    }

    html.synapp-new #programme-section #programme-tab-content-wrapper,
    html.synapp-new #programme-section .programme-tab-content-wrapper {
        display: block !important;
        height: auto !important;
        min-height: 0 !important;
    }

    html.synapp-new #programme-section .programme-tab-content-wrapper > .tab-content {
        display: block !important;
        height: auto !important;
        overflow: visible !important;
    }

    html.synapp-new #programme-section .programme-tab-content-wrapper > .tab-content > .tab-pane.active {
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }
}