/* ============================================================================
   OUTIL CEE-STD — Adaptation Mobile & Tablette
   Fichier séparé pour zéro risque de régression desktop.
   Breakpoints : 1024px (tablette), 768px (mobile), 480px (petit mobile)
   ============================================================================ */

/* ============================================================================
   SIDEBAR TOGGLE — Replier/déplier sur desktop & tablette
   ============================================================================ */

:root {
    --touch-target-min: 44px;
}

/* Bouton chevron dans le header sidebar */
.sidebar-toggle {
    background: transparent;
    border: 1px solid rgba(255,255,255,0.15);
    color: rgba(255,255,255,0.5);
    width: 28px;
    height: 28px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    transition: all 0.2s;
    flex-shrink: 0;
}

.sidebar-toggle:hover {
    background: rgba(255,255,255,0.1);
    color: var(--text-white);
}

/* Sidebar collapsée via JS (classe .collapsed) */
.app-sidebar.collapsed {
    width: var(--sidebar-collapsed);
    min-width: var(--sidebar-collapsed);
    transition: width 0.3s ease, min-width 0.3s ease;
}

.app-sidebar:not(.collapsed) {
    transition: width 0.3s ease, min-width 0.3s ease;
}

.app-sidebar.collapsed .sidebar-title,
.app-sidebar.collapsed .sidebar-version,
.app-sidebar.collapsed .sidebar-link span,
.app-sidebar.collapsed .sidebar-link-editor span {
    display: none;
}

.app-sidebar.collapsed .sidebar-header {
    justify-content: center;
    padding: 14px 8px 10px;
}

.app-sidebar.collapsed .sidebar-logo {
    justify-content: center;
}

.app-sidebar.collapsed .sidebar-link {
    justify-content: center;
    padding: 14px 0;
    gap: 0;
    border-left-width: 2px;
}

.app-sidebar.collapsed .sidebar-link i {
    width: auto;
    font-size: 1.15rem;
}

.app-sidebar.collapsed .sidebar-footer .sidebar-link {
    justify-content: center;
    padding: 12px 0;
}

/* Chevron tourné quand collapsed */
.app-sidebar.collapsed .sidebar-toggle i {
    transform: rotate(180deg);
}

/* ============================================================================
   ÉLÉMENTS MOBILES — CACHÉS PAR DÉFAUT (desktop)
   ============================================================================ */

.hamburger-btn {
    display: none;
    position: fixed;
    top: 10px;
    left: 10px;
    z-index: 1100;
    width: 44px;
    height: 44px;
    border-radius: var(--radius-sm);
    border: none;
    background: var(--bg-header);
    color: var(--text-white);
    font-size: 1.2rem;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,0.25);
    transition: background 0.2s;
}

.hamburger-btn:hover {
    background: var(--primary-dark);
}

.sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 999;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.sidebar-overlay.active {
    display: block;
    opacity: 1;
}

.plan-landscape-msg {
    display: none;
}

.desktop-only-hint {
    /* visible par défaut */
}

/* ============================================================================
   TABLETTE (≤ 1024px) — Sidebar collapsée en icônes
   ============================================================================ */

@media (max-width: 1024px) {

    /* Sidebar toggle masqué sur tablette (déjà collapsée) */
    .sidebar-toggle {
        display: none;
    }

    /* Sidebar réduite à 60px (icônes seules) */
    .app-sidebar {
        width: var(--sidebar-collapsed);
        min-width: var(--sidebar-collapsed);
        transition: width 0.3s ease;
    }

    .sidebar-title,
    .sidebar-version,
    .sidebar-link span,
    .sidebar-link-editor span {
        display: none;
    }

    .sidebar-header {
        justify-content: center;
        padding: 14px 8px 10px;
    }

    .sidebar-logo {
        justify-content: center;
    }

    .sidebar-link {
        justify-content: center;
        padding: 14px 0;
        gap: 0;
        border-left-width: 2px;
    }

    .sidebar-link i {
        width: auto;
        font-size: 1.15rem;
    }

    .sidebar-footer {
        padding: 6px 0;
    }

    .sidebar-footer .sidebar-link {
        justify-content: center;
        padding: 12px 0;
    }

    /* Dashboard KPIs : 4 → 2 colonnes */
    .dashboard-kpis {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Plan layout : colonnes réduites */
    .plan-layout {
        grid-template-columns: 180px 1fr 220px;
    }
}

/* ============================================================================
   MOBILE (≤ 768px) — Sidebar tiroir + hamburger
   ============================================================================ */

@media (max-width: 768px) {

    /* --- BODY / LAYOUT --- */
    body {
        overflow: auto;
        height: auto;
    }

    .app-layout {
        flex-direction: column;
        height: auto;
        min-height: 100vh;
    }

    .app-content {
        overflow: visible;
        min-height: 100vh;
    }

    .page {
        overflow: visible;
        height: auto;
    }

    /* --- SIDEBAR OFF-CANVAS --- */
    .app-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: var(--sidebar-width);
        min-width: var(--sidebar-width);
        transform: translateX(-100%);
        transition: transform 0.3s ease;
        z-index: 1000;
    }

    .app-sidebar.open {
        transform: translateX(0);
    }

    /* Rétablir textes dans sidebar (collapsé tablette ne s'applique plus) */
    .sidebar-title,
    .sidebar-version,
    .sidebar-link span,
    .sidebar-link-editor span {
        display: inline;
    }

    .sidebar-header {
        justify-content: space-between;
        padding: 18px 16px 12px;
    }

    .sidebar-logo {
        justify-content: flex-start;
    }

    .sidebar-link {
        justify-content: flex-start;
        padding: 14px 18px;
        gap: 12px;
        border-left-width: 3px;
        min-height: var(--touch-target-min);
    }

    .sidebar-footer .sidebar-link {
        justify-content: flex-start;
        padding: 14px 18px;
    }

    /* --- HAMBURGER VISIBLE --- */
    .hamburger-btn {
        display: flex;
    }

    /* --- PAGE HEADERS --- */
    .page-header {
        padding: 14px 16px 12px 60px; /* marge gauche pour le hamburger */
    }

    .page-header h1 {
        font-size: 1.1rem;
    }

    .page-body {
        padding: 16px;
    }

    /* --- EDITOR HEADER : wrap + tabs scrollables --- */
    .editor-header {
        height: auto;
        flex-wrap: wrap;
        padding: 8px 12px 0;
        gap: 6px;
    }

    .editor-header-left {
        padding-left: 40px; /* place pour le hamburger */
        flex: 1;
        min-width: 0;
    }

    .editor-project-name {
        max-width: 120px;
        font-size: 0.85rem;
    }

    .editor-badge {
        display: none; /* badge masqué pour gagner de la place */
    }

    .editor-header-right {
        order: 2;
    }

    .tab-nav {
        order: 3;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 8px;
        flex-shrink: 0;
        gap: 4px;
    }

    .tab-nav::-webkit-scrollbar {
        display: none;
    }

    .tab-btn {
        padding: 8px 14px;
        font-size: 0.8rem;
        flex-shrink: 0;
        min-height: var(--touch-target-min);
    }

    /* --- DASHBOARD --- */
    .dashboard-kpis {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .kpi-value {
        font-size: 1.4rem;
    }

    .dashboard-sections {
        grid-template-columns: 1fr;
    }

    /* --- PROJETS --- */
    .projets-grid {
        grid-template-columns: 1fr;
    }

    .projets-filters {
        gap: 6px;
    }

    .filter-btn {
        padding: 10px 14px;
        min-height: var(--touch-target-min);
    }

    /* --- PLAN TAB : message paysage en portrait --- */
    .plan-landscape-msg {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 16px;
        padding: 40px 24px;
        text-align: center;
        color: var(--text-light);
        background: var(--bg-card);
        margin: 16px;
        border-radius: var(--radius);
        border: 2px dashed var(--border);
    }

    .plan-landscape-msg i {
        font-size: 3rem;
        color: var(--primary-light);
    }

    .plan-landscape-msg p {
        font-size: 1rem;
        max-width: 300px;
        line-height: 1.5;
    }

    /* Portrait mobile : message visible, plan caché */
    .plan-landscape-msg {
        display: flex;
    }

    .plan-layout {
        display: none;
    }

    /* En paysage sur mobile : plan visible (media query) */
    @media (orientation: landscape) {
        .plan-landscape-msg {
            display: none;
        }

        .plan-layout {
            display: grid;
            grid-template-columns: 1fr;
            height: calc(100vh - 120px);
        }

        .plan-layout .tools-panel,
        .plan-layout .properties-panel {
            display: none;
        }

        .canvas-wrapper {
            min-height: 250px;
        }
    }

    /* --- FORMULAIRES --- */
    .form-grid {
        grid-template-columns: 1fr;
    }

    .systems-grid {
        grid-template-columns: 1fr;
    }

    /* --- RÉSULTATS --- */
    .metrics-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* --- SYNTHÈSE --- */
    .synthese-two-col {
        grid-template-columns: 1fr;
    }

    .synthese-metrics {
        grid-template-columns: repeat(2, 1fr);
    }

    .aide-cards {
        grid-template-columns: 1fr;
    }

    .pf-cards {
        grid-template-columns: 1fr;
    }

    /* --- CEE --- */
    .fiche-cards {
        grid-template-columns: 1fr;
    }

    #comparisonMetrics {
        grid-template-columns: 1fr;
    }

    /* --- TABLES : scroll horizontal --- */
    .data-table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    #tableComparaison {
        min-width: 550px;
    }

    /* --- PANELS --- */
    .panel {
        padding: 16px;
        margin: 12px;
    }

    .panel h2 {
        font-size: 1.1rem;
    }

    /* --- MODALS --- */
    .modal {
        width: 95vw;
        max-height: 85vh;
    }

    .modal-body {
        padding: 16px;
    }

    /* --- TOUCH TARGETS (minimum 44px) --- */
    .btn,
    .btn-sm,
    .filter-btn,
    .comp-tab {
        min-height: var(--touch-target-min);
    }

    .comp-tab {
        padding: 8px 14px;
    }

    .composition-tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        flex-wrap: nowrap;
    }

    .composition-tabs::-webkit-scrollbar {
        display: none;
    }

    .comp-tab {
        flex-shrink: 0;
    }

    /* --- SYNTHÈSE ACTIONS --- */
    .synthese-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .synthese-actions .btn-lg {
        width: 100%;
    }

    /* --- 3D : masquer instructions souris --- */
    .desktop-only-hint {
        display: none;
    }

    /* --- FICHES TOOLBAR --- */
    .fiches-toolbar {
        flex-wrap: wrap;
    }
}

/* ============================================================================
   PETIT MOBILE (≤ 480px) — Icônes seules dans les tabs
   ============================================================================ */

@media (max-width: 480px) {

    /* Tabs : icônes seules (font-size: 0 masque le texte) */
    .tab-btn {
        font-size: 0;
        padding: 8px 14px;
    }

    .tab-btn i {
        font-size: 1rem;
        margin-right: 0;
    }

    /* KPIs : 1 colonne */
    .dashboard-kpis {
        grid-template-columns: 1fr;
    }

    .kpi-card {
        padding: 14px;
    }

    .kpi-value {
        font-size: 1.3rem;
    }

    /* Formulaires : anti-zoom iOS */
    .form-group input,
    .form-group select,
    .form-group-sm input,
    .form-group-sm select {
        font-size: 16px;
    }

    /* Résultats */
    .metrics-grid {
        grid-template-columns: 1fr;
    }

    .synthese-metrics {
        grid-template-columns: 1fr;
    }

    .metric-value {
        font-size: 1.4rem;
    }

    /* Headers encore plus compacts */
    .page-header {
        padding: 12px 12px 10px 56px;
    }

    .page-header h1 {
        font-size: 1rem;
    }

    .page-body {
        padding: 12px;
    }

    .panel {
        padding: 12px;
        margin: 8px;
    }

    /* Boutons pleine largeur */
    #btnCalculer,
    #btnSimuler {
        width: 100%;
    }
}

/* ============================================================================
   CLASSES JS — Détection automatique (complète les media queries)
   Classes ajoutées par detectDevice() : is-mobile, is-tablet, is-desktop,
   is-touch, is-landscape, is-portrait
   ============================================================================ */

/* Plan tab : basculer via classes JS (filet de sécurité orientation) */
body.is-mobile.is-landscape .plan-landscape-msg {
    display: none !important;
}

body.is-mobile.is-landscape .plan-layout {
    display: grid !important;
    grid-template-columns: 1fr;
    height: calc(100vh - 120px);
}

body.is-mobile.is-landscape .plan-layout .tools-panel,
body.is-mobile.is-landscape .plan-layout .properties-panel {
    display: none;
}

body.is-mobile.is-portrait .plan-landscape-msg {
    display: flex !important;
}

body.is-mobile.is-portrait .plan-layout {
    display: none !important;
}

/* Touch : agrandir les cibles tactiles */
body.is-touch .tool-btn {
    min-width: 44px;
    min-height: 44px;
}

body.is-touch .btn-sm {
    min-height: 40px;
    padding: 8px 12px;
}

/* Données chantier (CEE) : grille inline → colonne sur mobile */
body.is-mobile #tab-cee details > div[style*="grid-template-columns"] {
    display: flex !important;
    flex-direction: column;
}

/* ============================================================================
   MOBILE — Améliorations UX complémentaires
   ============================================================================ */

/* Module tiles : 1 colonne sur mobile */
@media (max-width: 768px) {
    .module-tiles-grid {
        grid-template-columns: 1fr !important;
        gap: 12px;
    }

    .module-tile {
        padding: 16px;
    }

    .module-tile-icon {
        font-size: 1.8rem;
    }

    /* Sous-onglets modules : scroll horizontal */
    .module-sub-nav {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        flex-wrap: nowrap;
    }

    .module-sub-nav::-webkit-scrollbar {
        display: none;
    }

    .module-sub-tab {
        flex-shrink: 0;
        min-height: var(--touch-target-min);
        font-size: 0.8rem;
    }

    /* Tooltips : ne pas déborder sur mobile */
    .info-tip .tip-text {
        width: 200px;
        font-size: 0.75rem;
    }

    /* Tooltips : position ajustée pour ne pas sortir de l'écran */
    .info-tip .tip-text {
        left: 0;
        transform: none;
    }

    .info-tip .tip-text::after {
        left: 12px;
        transform: none;
    }

    /* Popup prérequis : pleine largeur mobile */
    .prereq-popup {
        width: 95%;
        max-height: 85vh;
        border-radius: 12px;
    }
    .prereq-header { font-size: 0.95rem; padding: 14px 16px 10px; }
    .prereq-subtitle { font-size: 0.8rem; padding: 8px 16px 4px; }
    .prereq-groups { padding: 6px 16px 10px; }
    .prereq-group { padding: 10px 12px; }

    /* Accordéons : padding réduit */
    .accordion-header {
        padding: 12px 14px;
    }

    .accordion-body {
        padding: 12px 14px;
    }

    /* Démonstration banner compact */
    .demo-project-banner {
        padding: 16px;
    }

    .demo-project-banner h3 {
        font-size: 0.95rem;
    }

    .demo-project-banner p {
        font-size: 0.82rem;
    }

    /* Profil autofill bar : empilé */
    .profile-autofill-bar {
        flex-wrap: wrap;
    }

    .profile-autofill-bar .btn-sm {
        margin-left: 0;
        margin-top: 6px;
        width: 100%;
    }

    /* Systems grid : 1 colonne */
    .systems-grid {
        grid-template-columns: 1fr;
    }

    .system-card {
        padding: 14px;
    }

    /* Editor header : compact */
    .editor-module-title {
        font-size: 0.9rem;
    }
}

/* Touch devices : tooltips affichés au tap (pas hover) */
@media (hover: none) {
    .info-tip .tip-text {
        display: none !important;
    }

    .info-tip.active .tip-text {
        display: block !important;
    }
}