/**
 * Adaptation écran admin et employé selon la taille de l'appareil.
 * Logo, header, menu du bas et boutons suivent la largeur du conteneur.
 * Conteneur = #app-container (container-type: inline-size).
 * Breakpoints selon largeur : logo quasi pleine largeur, rebords minimaux, tailles selon largeur et hauteur.
 */

/* Petits écrans (Samsung S9/S8/S10, Redmi, Moto G, LG G5/G6/G7, A32, 360×640–800) */
@container app (min-width: 320px) {
  .login-logo { max-width: min(260px, 78vw); max-height: 130px; min-height: 52px; }
  .login-logo-wrap { padding: 16px 14px; min-height: 72px; }
  .login-header { padding: 24px 0 max(22px, 5vmin); }
  .login-title { font-size: clamp(1.65rem, 4.2vmin + 0.55rem, 2.1rem); margin-bottom: clamp(16px, 4vmin, 24px); }
  .dashboard-screen .dashboard-header { min-height: clamp(140px, 28vh, 220px); }
  .dashboard-logo-wrap { padding: 3px 4px; min-height: min(18vh, 50vw, 90px); }
  .dashboard-logo { max-width: min(100%, 96vw); max-height: min(100%, 32vh); }
  .dashboard-greeting { font-size: 0.7rem; }
  .dashboard-mini-icon { width: 34px; height: 34px; }
  .dashboard-mini-icon-inner svg { width: 17px; height: 17px; }
  .dashboard-nav-top { grid-template-columns: minmax(0, 1fr) 72px; gap: 4px 6px; padding: 6px 14px 2px; }
  .dashboard-nav-top .dashboard-utilisateur-top { min-width: 64px; padding: 4px; }
  .dashboard-nav-grid-source,
  .dashboard-nav-grid-pages .dashboard-page { grid-template-columns: repeat(3, 1fr) !important; grid-template-rows: repeat(2, minmax(46px, auto)) !important; grid-auto-rows: 0 !important; }
  .dashboard-nav { grid-auto-rows: minmax(56px, auto); gap: 4px 6px; padding: 6px 0; }
  .dashboard-card { padding: 6px 4px; gap: 4px; }
  .dashboard-nav-item { padding: 6px 8px; font-size: 0.62rem; }
  .dashboard-nav-icon svg { width: 20px; height: 20px; }
  .dashboard-nav-bar-bg { padding: 6px 8px; min-width: 0; width: auto; border-radius: 14px; }
  .btn-primary, .btn-secondary { min-height: 44px; padding: 10px 16px; font-size: 0.9rem; }
  .formulaire-header, .formulaire-header-feuille-temps { min-height: 42px; padding: 6px 10px 8px; }
  #photos-screen .photos-header {
    min-height: max(42px, calc(var(--app-safe-top, env(safe-area-inset-top, 0px)) + 36px));
    padding-top: max(6px, var(--app-safe-top, env(safe-area-inset-top, 0px)));
    padding-bottom: 8px;
    padding-left: max(10px, var(--app-safe-left, env(safe-area-inset-left, 0px)));
    padding-right: max(10px, var(--app-safe-right, env(safe-area-inset-right, 0px)));
    margin: 0;
  }
  #gestion-compte-screen.gestion-compte-has-bottom-bar { --gc-header-height: 50px; }
  .formulaire-back { padding: 4px 2px; font-size: 1.25rem; }
  #photos-screen .photos-back { padding: 4px 2px; font-size: 1.25rem; }
  .formulaire-title { font-size: 0.98rem; }
  #photos-screen .photos-header-title { font-size: 0.98rem; }
  .feuille-temps-bottom-nav { min-height: 48px; padding-top: 8px; padding-bottom: 10px; padding-left: 6px; padding-right: 6px; }
  .feuille-temps-nav-tab { padding: 6px 4px 6px; font-size: 0.65rem; }
  .feuille-temps-nav-icon { font-size: 1.2rem; min-height: 26px; }
  .feuille-temps-nav-icon svg { width: 24px; height: 24px; min-width: 24px; min-height: 24px; }
  .feuille-temps-has-bottom-nav .formulaire-main-feuille-temps { padding-bottom: 56px; }
  #note-screen .note-bottom-bar { min-height: 48px; padding-top: 8px; padding-bottom: 10px; padding-left: 6px; padding-right: 6px; }
  #projet-screen .note-bottom-bar { min-height: 48px; padding-top: 8px; padding-bottom: 10px; padding-left: 6px; padding-right: 6px; }
  #annonces-screen .note-bottom-bar { min-height: 48px; padding-top: 8px; padding-bottom: 10px; padding-left: 6px; padding-right: 6px; }
  #note-screen .note-menu-tab { padding: 6px 4px 6px; font-size: 0.65rem; }
  #projet-screen .note-menu-tab { padding: 6px 4px 6px; font-size: 0.65rem; }
  #annonces-screen .note-menu-tab { padding: 6px 4px 6px; font-size: 0.65rem; }
  #note-screen .note-nav-icon { font-size: 1.2rem; min-height: 26px; }
  #projet-screen .note-nav-icon { font-size: 1.2rem; min-height: 26px; }
  #annonces-screen .note-nav-icon { font-size: 1.2rem; min-height: 26px; }
  #note-screen .note-nav-icon svg { width: 24px; height: 24px; min-width: 24px; min-height: 24px; }
  #projet-screen .note-nav-icon svg { width: 24px; height: 24px; min-width: 24px; min-height: 24px; }
  #annonces-screen .note-nav-icon svg { width: 24px; height: 24px; min-width: 24px; min-height: 24px; }
  #note-screen.note-has-bottom-bar .formulaire-main-feuille-temps { padding-bottom: 56px; }
  /* Même barre bas que #note-screen + bandeau pagination éventuel */
  #projet-screen.projet-has-bottom-bar .projet-main { padding-bottom: calc(100px + max(8px, env(safe-area-inset-bottom, 0px))); }
  #gestion-compte-screen .note-bottom-bar { min-height: 48px; padding-top: 8px; padding-bottom: 10px; }
  #gestion-compte-screen .note-bottom-menu-icons .note-menu-tab { padding: 6px 4px 6px; font-size: 0.65rem; }
  #gestion-compte-screen.gestion-compte-has-bottom-bar .formulaire-main-feuille-temps { padding-bottom: 56px; }
  .dashboard-card-label { font-size: 0.72rem; }
  .dashboard-switch-btn { padding: 4px 8px; font-size: 0.65rem; }
  .dashboard-card-icon { width: 38px; height: 38px; border-radius: 10px; }
  .dashboard-card-icon svg { width: 19px; height: 19px; }
  .dashboard-card-wide .dashboard-card-icon { width: 40px; height: 40px; }
  .dashboard-card-wide .dashboard-card-icon svg { width: 20px; height: 20px; }
  .dashboard-card-wide { padding: 8px 6px; gap: 4px; }
  .formulaire-feuille-temps-list { padding: 8px 0; }
  .formulaire-feuille-temps-item { padding: 10px 12px; min-height: 44px; }
}

@container app (min-width: 400px) {
  .login-logo { max-width: min(300px, 82vw); max-height: 150px; min-height: 60px; }
  .login-logo-wrap { padding: 20px 18px; min-height: 80px; }
  .login-header { padding: 28px 0 max(26px, 5vmin); padding-top: 28px; }
  .login-title { font-size: clamp(1.75rem, 4.4vmin + 0.6rem, 2.2rem); margin-bottom: clamp(16px, 4vmin, 24px); }
  .dashboard-screen .dashboard-header { min-height: clamp(180px, 34vh, 280px); }
  .dashboard-logo-wrap { padding: 4px 6px; min-height: min(22vh, 48vw, 120px); }
  .dashboard-logo { max-width: min(100%, 96vw); max-height: min(100%, 36vh); }
  .dashboard-greeting { font-size: 0.8rem; }
  .dashboard-mini-icon { width: 38px; height: 38px; }
  .dashboard-mini-icon-inner svg { width: 20px; height: 20px; }
  .dashboard-nav-top { grid-template-columns: minmax(0, 1fr) 84px; gap: 6px 8px; padding: 8px 14px 2px; }
  .dashboard-nav-top .dashboard-utilisateur-top { min-width: 68px; padding: 5px; }
  .dashboard-nav-grid-source,
  .dashboard-nav-grid-pages .dashboard-page { grid-template-columns: repeat(3, 1fr) !important; grid-template-rows: repeat(2, minmax(48px, auto)) !important; grid-auto-rows: 0 !important; }
  .dashboard-nav { grid-auto-rows: minmax(68px, auto); gap: 6px 8px; padding: 8px 0; }
  .dashboard-nav-item { font-size: 0.68rem; }
  .dashboard-nav-icon svg { width: 24px; height: 24px; }
  .dashboard-nav-bar-bg { padding: 9px 11px; min-width: 0; width: auto; }
  .formulaire-back { font-size: 1.45rem; }
  #photos-screen .photos-back { font-size: 1.45rem; }
  .formulaire-title { font-size: 1.1rem; }
  #photos-screen .photos-header-title { font-size: 1.1rem; }
  .feuille-temps-bottom-nav { min-height: 52px; }
  .feuille-temps-nav-tab { padding: 10px 6px 6px; font-size: 0.7rem; }
  .feuille-temps-nav-icon { font-size: 1.35rem; }
  .dashboard-card-label { font-size: 0.72rem; }
  .dashboard-card-icon { width: 48px; height: 48px; }
  .dashboard-card-icon svg { width: 24px; height: 24px; }
  .dashboard-card-wide .dashboard-card-icon { width: 50px; height: 50px; }
  .dashboard-card-wide .dashboard-card-icon svg { width: 26px; height: 26px; }
}

/* iPhone 16 Pro Max, 15 Pro Max, etc. (viewport ~430–440px) – aligné écran réel */
@container app (min-width: 430px) {
  .login-logo { max-width: min(280px, 64vw); max-height: 140px; min-height: 58px; }
  .login-logo-wrap { padding: 20px 18px; min-height: 80px; }
  .login-header { padding: 28px 0 max(26px, 5vmin); padding-top: 28px; }
  .login-title { font-size: clamp(1.75rem, 4.4vmin + 0.6rem, 2.2rem); margin-bottom: clamp(16px, 4vmin, 24px); }
  .dashboard-screen .dashboard-header { min-height: clamp(180px, 34vh, 280px); }
  .dashboard-logo-wrap { padding: 4px 6px; min-height: min(22vh, 48vw, 120px); }
  .dashboard-logo { max-width: min(100%, 96vw); max-height: min(100%, 36vh); }
  .dashboard-greeting { font-size: 0.84rem; }
  .dashboard-mini-icon { width: 40px; height: 40px; }
  .dashboard-mini-icon-inner svg { width: 21px; height: 21px; }
  .dashboard-nav-top { grid-template-columns: minmax(0, 1fr) 88px; gap: 6px 8px; padding: 9px 14px 2px; }
  .dashboard-nav-top .dashboard-utilisateur-top { padding: 5px; }
  .dashboard-nav-grid-source,
  .dashboard-nav-grid-pages .dashboard-page { grid-template-columns: repeat(3, 1fr) !important; grid-template-rows: repeat(2, minmax(48px, auto)) !important; grid-auto-rows: 0 !important; }
  .dashboard-nav { grid-auto-rows: minmax(72px, auto); gap: 6px 8px; padding: 9px 0; }
  .dashboard-nav-item { padding: 9px 11px; font-size: 0.7rem; }
  .dashboard-nav-icon svg { width: 25px; height: 25px; }
  .dashboard-nav-bar-bg { padding: 10px 12px; min-width: 0; width: auto; }
  .formulaire-back { font-size: 1.5rem; }
  #photos-screen .photos-back { font-size: 1.5rem; }
  .formulaire-title { font-size: 1.12rem; }
  #photos-screen .photos-header-title { font-size: 1.12rem; }
  .feuille-temps-bottom-nav { min-height: 54px; }
  .feuille-temps-nav-tab { padding: 11px 7px 7px; font-size: 0.72rem; }
  .feuille-temps-nav-icon { font-size: 1.42rem; }
  #note-screen .note-bottom-bar { min-height: 54px; }
  #annonces-screen .note-bottom-bar { min-height: 54px; }
  #note-screen .note-menu-tab { padding: 11px 7px 7px; font-size: 0.72rem; }
  #annonces-screen .note-menu-tab { padding: 11px 7px 7px; font-size: 0.72rem; }
  #gestion-compte-screen .note-bottom-bar { min-height: 54px; }
  #gestion-compte-screen .note-bottom-menu-icons .note-menu-tab { padding: 11px 7px 7px; font-size: 0.72rem; }
  .dashboard-card-label { font-size: 0.74rem; }
  .dashboard-card-icon { width: 50px; height: 50px; }
  .dashboard-card-icon svg { width: 25px; height: 25px; }
  .dashboard-card-wide .dashboard-card-icon { width: 52px; height: 52px; }
  .dashboard-card-wide .dashboard-card-icon svg { width: 27px; height: 27px; }
}

@container app (min-width: 600px) {
  .login-logo { max-width: min(320px, 85vw); max-height: 160px; min-height: 64px; }
  .login-logo-wrap { padding: 24px 20px; min-height: 88px; }
  .login-header { padding: 32px 0 max(28px, 5vmin); }
  .login-title { font-size: clamp(1.9rem, 4.6vmin + 0.65rem, 2.45rem); margin-bottom: clamp(18px, 4vmin, 28px); }
  .dashboard-screen .dashboard-header { min-height: clamp(200px, 36vh, 320px); }
  .dashboard-logo-wrap { padding: 6px 8px; min-height: min(24vh, 42vw, 160px); }
  .dashboard-logo { max-width: min(100%, 96vw); max-height: min(100%, 38vh); }
  .dashboard-greeting { font-size: 0.88rem; }
  .dashboard-mini-icon { width: 42px; height: 42px; }
  .dashboard-mini-icon-inner svg { width: 22px; height: 22px; }
  .dashboard-nav-top { grid-template-columns: minmax(0, 1fr) 95px; gap: 10px 12px; padding: 12px 14px 4px; }
  .dashboard-nav-top .dashboard-utilisateur-top { padding: 6px; }
  .dashboard-nav-grid-source,
  .dashboard-nav-grid-pages .dashboard-page { grid-template-columns: repeat(3, 1fr) !important; grid-template-rows: repeat(2, minmax(88px, auto)) !important; grid-auto-rows: 0 !important; }
  .dashboard-nav { grid-auto-rows: minmax(88px, auto); gap: 10px 12px; padding: 12px 0; }
  .dashboard-nav-item { padding: 10px 12px; font-size: 0.72rem; }
  .dashboard-nav-icon svg { width: 26px; height: 26px; }
  .dashboard-nav-bar-bg { padding: 10px 12px; min-width: 0; width: auto; border-radius: 20px; }
  .btn-primary, .btn-secondary { min-height: 48px; padding: 16px 24px; font-size: 1rem; }
  .formulaire-header, .formulaire-header-feuille-temps { min-height: 52px; padding: 10px 16px 12px; }
  #photos-screen .photos-header {
    min-height: max(52px, calc(var(--app-safe-top, env(safe-area-inset-top, 0px)) + 42px));
    padding-top: max(10px, var(--app-safe-top, env(safe-area-inset-top, 0px)));
    padding-bottom: 12px;
    padding-left: max(16px, var(--app-safe-left, env(safe-area-inset-left, 0px)));
    padding-right: max(16px, var(--app-safe-right, env(safe-area-inset-right, 0px)));
  }
  #gestion-compte-screen.gestion-compte-has-bottom-bar { --gc-header-height: 74px; }
  .formulaire-back { padding: 8px 4px; font-size: 1.5rem; }
  #photos-screen .photos-back { padding: 8px 4px; font-size: 1.5rem; }
  .formulaire-title { font-size: 1.15rem; }
  #photos-screen .photos-header-title { font-size: 1.15rem; }
  .feuille-temps-bottom-nav { min-height: 56px; padding-top: 10px; }
  .feuille-temps-nav-tab { padding: 12px 8px 8px; font-size: 0.75rem; }
  .feuille-temps-nav-icon { font-size: 1.5rem; }
  #note-screen .note-bottom-bar { min-height: 56px; padding-top: 10px; }
  #annonces-screen .note-bottom-bar { min-height: 56px; padding-top: 10px; }
  #note-screen .note-menu-tab { padding: 12px 8px 8px; font-size: 0.75rem; }
  #annonces-screen .note-menu-tab { padding: 12px 8px 8px; font-size: 0.75rem; }
  #note-screen .note-nav-icon { font-size: 1.5rem; min-height: 26px; }
  #annonces-screen .note-nav-icon { font-size: 1.5rem; min-height: 26px; }
  #note-screen .note-nav-icon svg { width: 1.5rem; height: 1.5rem; min-width: 26px; min-height: 26px; }
  #annonces-screen .note-nav-icon svg { width: 1.5rem; height: 1.5rem; min-width: 26px; min-height: 26px; }
  #gestion-compte-screen .note-bottom-bar { min-height: 56px; padding-top: 10px; }
  #gestion-compte-screen .note-bottom-menu-icons .note-menu-tab { padding: 12px 8px 8px; font-size: 0.75rem; }
  .dashboard-card-label { font-size: 0.75rem; }
  .dashboard-switch-btn { padding: 6px 12px; font-size: 0.75rem; }
  .dashboard-card-icon { width: 52px; height: 52px; }
  .dashboard-card-icon svg { width: 26px; height: 26px; }
  .dashboard-card-wide .dashboard-card-icon { width: 54px; height: 54px; }
  .dashboard-card-wide .dashboard-card-icon svg { width: 28px; height: 28px; }
}

@container app (min-width: 768px) {
  .dashboard-screen .dashboard-header { min-height: clamp(220px, 38vh, 360px); }
  .dashboard-logo-wrap { padding: 8px 10px; min-height: min(26vh, 200px); }
  .dashboard-logo { max-width: 100%; max-height: 100%; }
  .dashboard-greeting { font-size: 0.95rem; }
  .dashboard-mini-icon { width: 44px; height: 44px; }
  .dashboard-mini-icon-inner svg { width: 24px; height: 24px; }
  .dashboard-nav { grid-auto-rows: minmax(96px, auto); gap: 12px 14px; padding: 14px 0; }
  .dashboard-nav-item { padding: 10px 12px; font-size: 0.78rem; }
  .dashboard-nav-icon svg { width: 28px; height: 28px; }
  .dashboard-nav-bar-bg { padding: 12px 14px; min-width: 0; width: auto; }
  .dashboard-card-label { font-size: 0.78rem; }
  .feuille-temps-bottom-nav { min-height: 60px; }
  .feuille-temps-nav-tab { font-size: 0.8rem; }
  .feuille-temps-nav-icon { font-size: 1.6rem; }
  .formulaire-title { font-size: 1.2rem; }
  #photos-screen .photos-header-title { font-size: 1.2rem; }
  .dashboard-card-icon { width: 56px; height: 56px; }
  .dashboard-card-icon svg { width: 28px; height: 28px; }
  .dashboard-card-wide .dashboard-card-icon { width: 58px; height: 58px; }
  .dashboard-card-wide .dashboard-card-icon svg { width: 30px; height: 30px; }
}

@container app (min-width: 1024px) {
  .dashboard-screen .dashboard-header { min-height: clamp(240px, 40vh, 400px); }
  .dashboard-logo-wrap { padding: 10px 12px; min-height: min(28vh, 36vw, 240px); }
  .dashboard-logo { max-width: min(100%, 96vw); max-height: min(100%, 42vh); }
  .dashboard-greeting { font-size: 1rem; }
  .dashboard-mini-icon { width: 46px; height: 46px; }
  .dashboard-mini-icon-inner svg { width: 26px; height: 26px; }
  .dashboard-nav-top { grid-template-columns: minmax(0, 1fr) 102px; gap: 12px 16px; padding: 16px 14px 6px; }
  .dashboard-nav-top .dashboard-utilisateur-top { padding: 6px; }
  .dashboard-nav-grid-source,
  .dashboard-nav-grid-pages .dashboard-page { grid-template-columns: repeat(3, 1fr) !important; grid-template-rows: repeat(2, minmax(100px, auto)) !important; grid-auto-rows: 0 !important; }
  .dashboard-nav { grid-auto-rows: minmax(100px, auto); gap: 12px 16px; padding: 16px 0; }
  .dashboard-nav-item { padding: 12px 14px; font-size: 0.82rem; }
  .dashboard-nav-icon svg { width: 30px; height: 30px; }
  .dashboard-nav-bar-bg { padding: 12px 16px; min-width: 0; width: auto; }
  .dashboard-card-label { font-size: 0.8rem; }
  .feuille-temps-bottom-nav { min-height: 64px; }
  #note-screen .note-bottom-bar { min-height: 64px; }
  #annonces-screen .note-bottom-bar { min-height: 64px; }
  #gestion-compte-screen .note-bottom-bar { min-height: 64px; }
  .formulaire-header, .formulaire-header-feuille-temps { min-height: 60px; }
  #photos-screen .photos-header {
    min-height: calc(var(--app-safe-top, env(safe-area-inset-top, 0px)) + 60px);
  }
  #gestion-compte-screen.gestion-compte-has-bottom-bar { --gc-header-height: 82px; }
  .formulaire-title { font-size: 1.25rem; }
  #photos-screen .photos-header-title { font-size: 1.25rem; }
}

@container app (min-width: 1280px) {
  .dashboard-screen .dashboard-header { min-height: clamp(260px, 42vh, 440px); }
  .dashboard-logo-wrap { padding: 12px 14px; min-height: min(30vh, 34vw, 260px); }
  .dashboard-logo { max-width: min(100%, 96vw); max-height: min(100%, 44vh); }
  .dashboard-greeting { font-size: 1.05rem; }
  .dashboard-mini-icon { width: 48px; height: 48px; }
  .dashboard-mini-icon-inner svg { width: 28px; height: 28px; }
  .dashboard-nav-grid-source,
  .dashboard-nav-grid-pages .dashboard-page { grid-template-columns: repeat(3, 1fr) !important; grid-template-rows: repeat(2, minmax(108px, auto)) !important; grid-auto-rows: 0 !important; }
  .dashboard-nav { grid-auto-rows: minmax(108px, auto); }
  .dashboard-nav-icon svg { width: 32px; height: 32px; }
  .dashboard-nav-bar-bg { min-width: 0; width: auto; }
  .dashboard-card-label { font-size: 0.85rem; }
  .dashboard-card-icon { width: 60px; height: 60px; }
  .dashboard-card-icon svg { width: 32px; height: 32px; }
  .dashboard-card-wide .dashboard-card-icon { width: 64px; height: 64px; }
  .dashboard-card-wide .dashboard-card-icon svg { width: 34px; height: 34px; }
}

@container app (min-width: 1440px) {
  .dashboard-screen .dashboard-header { min-height: clamp(280px, 44vh, 480px); }
  .dashboard-logo-wrap { padding: 14px 16px; min-height: min(32vh, 32vw, 280px); }
  .dashboard-logo { max-width: min(100%, 96vw); max-height: min(100%, 46vh); }
  .dashboard-greeting { font-size: 1.1rem; }
  .dashboard-mini-icon { width: 50px; height: 50px; }
  .dashboard-mini-icon-inner svg { width: 30px; height: 30px; }
  .dashboard-nav-top { gap: 14px 18px; padding: 16px 14px 6px; }
  .dashboard-nav-grid-source,
  .dashboard-nav-grid-pages .dashboard-page { grid-template-columns: repeat(3, 1fr) !important; grid-template-rows: repeat(2, minmax(116px, auto)) !important; grid-auto-rows: 0 !important; }
  .dashboard-nav { grid-auto-rows: minmax(116px, auto); gap: 14px 18px; }
  .dashboard-nav-icon svg { width: 34px; height: 34px; }
  .dashboard-nav-bar-bg { min-width: 0; width: auto; padding: 14px 18px; }
  .dashboard-card-label { font-size: 0.88rem; }
  .dashboard-card-icon { width: 64px; height: 64px; }
  .dashboard-card-icon svg { width: 34px; height: 34px; }
  .dashboard-card-wide .dashboard-card-icon { width: 68px; height: 68px; }
  .dashboard-card-wide .dashboard-card-icon svg { width: 36px; height: 36px; }
}

/* Admin et Employé : espacement identique — grille icônes + rangée supérieure (Feuille/Clavarder) */
#dashboard-screen .dashboard-nav-grid-pages .dashboard-page,
#dashboard-screen .dashboard-nav-grid-source,
#dashboard-screen .dashboard-nav--admin .dashboard-nav-grid-pages .dashboard-page,
#dashboard-screen .dashboard-nav:not(.dashboard-nav--admin) .dashboard-nav-grid-pages .dashboard-page {
  gap: 10px 12px !important;
  padding: 0 0 8px !important;
}
#dashboard-screen .dashboard-nav--admin .dashboard-nav-top,
#dashboard-screen .dashboard-nav:not(.dashboard-nav--admin) .dashboard-nav-top {
  gap: 10px 12px !important;
  padding: 8px 14px 4px !important;
}

/* Fallback pour iPhone / Safari : media query au lieu de @container — header Projet (titre + search) géré dans dashboard.css pour tous les appareils */

/* iOS : chaîne flex pour que la liste prenne toute la hauteur et touche la barre Précédent/Suivant */
.app-ios #projet-screen.projet-has-bottom-bar .projet-main {
  overflow: hidden !important;
  min-height: 0;
  -webkit-min-height: 0;
  display: flex;
  flex-direction: column;
}
.app-ios #projet-screen .projet-panel.active {
  flex: 1 1 0%;
  min-height: 0;
  -webkit-min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.app-ios #projet-screen .projet-section-list > .conformite-list {
  flex: 1 1 0%;
  min-height: 0;
  -webkit-min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* iPhone : recherche + en-têtes colonnes fixes ; fond noir, texte blanc (sous le header) */
.app-ios #projet-screen .projet-panel-sticky-header {
  position: fixed;
  left: 0;
  right: 0;
  top: var(--projet-header-total-height, calc(env(safe-area-inset-top, 0px) + 72px));
  z-index: 15;
  /* Même empilement qu’Employé (#gestion-compte) : pas d’écart avant la ligne note-search-bg ni avant Détail/Vue */
  padding: 0;
  background: #000;
  color: #fff;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 0;
}
/* iPhone : liste commence sous le bandeau recherche + Détail/Vue (pleine largeur) */
.app-ios #projet-screen .projet-section-list {
  position: fixed;
  left: 0;
  right: 0;
  top: calc(var(--projet-header-total-height, calc(env(safe-area-inset-top, 0px) + 72px)) + var(--projet-sticky-controls-h, 9rem));
  bottom: 130px;
  z-index: 10;
  flex: 1 1 0%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  margin-top: 0;
}
.app-ios #projet-screen .projet-section-list > .conformite-empty {
  margin-top: 0.5rem;
}
/* Garder la hauteur du panel pour le layout (la liste est en overlay fixe) */
.app-ios #projet-screen .projet-panel.active::before {
  content: '';
  display: block;
  height: calc(100vh - var(--projet-header-total-height, calc(env(safe-area-inset-top, 0px) + 72px)) - 130px - var(--projet-sticky-controls-h, 9rem));
  flex-shrink: 0;
}
/* Tableau données : bord à bord comme l’en-tête fixe (sticky sans marge latérale sur app) */
.app-ios #projet-screen .projet-section-list .projet-sheet-table-wrap {
  margin-left: 0;
  margin-right: 0;
}
/* Afficher le tableau d’en-têtes fixe sur iOS (même structure que le tableau des données) */
.app-ios #projet-screen .projet-fixed-col-header {
  display: table;
}

/* Android : mêmes règles que iOS pour la page Projet (en-têtes fixes sous le header dashboard avec logo) */
.app-android #projet-screen.projet-has-bottom-bar .projet-main {
  overflow: hidden !important;
  min-height: 0;
  -webkit-min-height: 0;
  display: flex;
  flex-direction: column;
}
.app-android #projet-screen .projet-panel.active {
  flex: 1 1 0%;
  min-height: 0;
  -webkit-min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.app-android #projet-screen .projet-section-list > .conformite-list {
  flex: 1 1 0%;
  min-height: 0;
  -webkit-min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.app-android #projet-screen .projet-panel-sticky-header {
  position: fixed;
  left: 0;
  right: 0;
  top: var(--projet-header-total-height, calc(env(safe-area-inset-top, 0px) + 72px));
  z-index: 15;
  padding: 0;
  background: #000;
  color: #fff;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.app-android #projet-screen .projet-section-list {
  position: fixed;
  left: 0;
  right: 0;
  top: calc(var(--projet-header-total-height, calc(env(safe-area-inset-top, 0px) + 72px)) + var(--projet-sticky-controls-h, 9rem));
  bottom: 130px;
  z-index: 10;
  flex: 1 1 0%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  margin-top: 0;
}
.app-android #projet-screen .projet-section-list > .conformite-empty {
  margin-top: 0.5rem;
}
.app-android #projet-screen .projet-panel.active::before {
  content: '';
  display: block;
  height: calc(100vh - var(--projet-header-total-height, calc(env(safe-area-inset-top, 0px) + 72px)) - 130px - var(--projet-sticky-controls-h, 9rem));
  flex-shrink: 0;
}
.app-android #projet-screen .projet-section-list .projet-sheet-table-wrap {
  margin-left: 0;
  margin-right: 0;
}
.app-android #projet-screen .projet-fixed-col-header {
  display: table;
}

/* Android : mêmes tailles que Apple — gap/padding unifiés via #dashboard-screen ci-dessus */
.app-android .dashboard-nav-grid-source,
.app-android .dashboard-nav-grid-pages .dashboard-page {
  grid-template-columns: repeat(3, 1fr) !important;
  grid-template-rows: repeat(2, minmax(88px, auto)) !important;
  grid-auto-rows: 0 !important;
}
.app-android .dashboard-nav {
  grid-auto-rows: minmax(88px, auto);
  gap: 10px 12px;
  padding: 0px 0;
}
.app-android .dashboard-card-dashboard,
.app-android .dashboard-card-publication,
.app-android .dashboard-card-photos,
.app-android .dashboard-card-contact {
  padding: 16px 14px;
}
.app-android .dashboard-card-wide {
  padding: 14px 18px;
  gap: 12px;
}
/* Android : icônes (Feuille de temps carte réduite pour que le texte entre) */
.app-android .dashboard-nav-icon svg { width: 26px; height: 26px; }
.app-android .dashboard-mini-icon { width: 42px; height: 42px; }
.app-android .dashboard-mini-icon-inner svg { width: 22px; height: 22px; }
.app-android .dashboard-card-icon { width: 52px; height: 52px; }
.app-android .dashboard-card-icon svg { width: 26px; height: 26px; }
.app-android .dashboard-nav-bar-bg .dashboard-nav-icon svg { width: 26px; height: 26px; }
.app-android .dashboard-nav-bar-bg .dashboard-nav-label { display: block; font-size: 0.62rem; }

/* Apple : mêmes titres sous les icônes que Android (footer dashboard, barres de navigation) */
.app-ios .dashboard-nav-bar-bg .dashboard-nav-label { display: block; font-size: 0.65rem; }
.app-ios #note-screen .note-nav-label,
.app-ios #formulaire-screen .note-nav-label,
.app-ios #conformite-screen .note-nav-label,
.app-ios #annonces-screen .note-nav-label,
.app-ios #projet-screen .note-nav-label { display: block; }
.app-ios #gestion-compte-screen .note-menu-tab-label { display: block; }
.app-ios .feuille-temps-nav-label { display: block; }

/* iOS : pas de bounce sur le shell ; grille icônes = swipe horizontal seulement */
.app-ios #app-container:has(#dashboard-screen.active) {
  overflow: hidden !important;
  overscroll-behavior: none !important;
  touch-action: manipulation;
}
.app-ios #dashboard-screen.screen.active {
  overflow: hidden !important;
  overscroll-behavior: none !important;
  touch-action: manipulation;
  -webkit-overflow-scrolling: auto;
}
.app-ios #dashboard-screen .dashboard-content {
  overflow: hidden !important;
  overscroll-behavior: none !important;
}
.app-ios #dashboard-screen .dashboard-main {
  overflow: hidden !important;
}
.app-ios #dashboard-screen .dashboard-nav {
  overflow: hidden !important;
}
.app-ios #dashboard-screen .dashboard-nav-grid-scroll {
  overflow-x: auto;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  touch-action: pan-x pinch-zoom;
}

.app-android .dashboard-card-wide .dashboard-card-icon { width: 48px; height: 48px; }
.app-android .dashboard-card-wide .dashboard-card-icon svg { width: 26px; height: 26px; }
/* Android : Feuille de temps – bandeau + icône (même style que Déneigement) */
.app-android #feuille-temps-card .dashboard-feuille-temps-label { font-size: 0.78rem; padding: 0.35em 6px 0.4em; }
.app-android #feuille-temps-card .dashboard-feuille-temps-icon img { max-height: 48px; min-height: 0; }
.app-android .dashboard-employe-slot-icon svg { width: 28px; height: 28px; }
.app-android .feuille-temps-nav-icon { font-size: 1.6rem; min-height: 30px; }
.app-android .feuille-temps-nav-icon svg { width: 30px; height: 30px; min-width: 30px; min-height: 30px; }
.app-android .feuille-temps-livre-icon svg { width: 24px; height: 24px; min-width: 24px; min-height: 24px; }
.app-android .feuille-temps-entree-btn-icon { font-size: 1.2rem; }
.app-android #note-screen .note-nav-icon,
.app-android #projet-screen .note-nav-icon,
.app-android #formulaire-screen .note-nav-icon,
.app-android #conformite-screen .note-nav-icon,
.app-android #annonces-screen .note-nav-icon { font-size: 1.4rem; min-height: 28px; }
.app-android #note-screen .note-nav-icon svg,
.app-android #projet-screen .note-nav-icon svg,
.app-android #formulaire-screen .note-nav-icon svg,
.app-android #conformite-screen .note-nav-icon svg,
.app-android #annonces-screen .note-nav-icon svg { width: 28px; height: 28px; min-width: 28px; min-height: 28px; }
/* Header Formulaires : boutons Interne/Externe (icônes seules), taille fixe */
.app-android #formulaire-screen .formulaire-header-scope-tabs .note-nav-icon {
  font-size: 1rem;
  min-height: unset;
}
.app-android #formulaire-screen .formulaire-header-scope-tabs .note-nav-icon svg {
  width: 22px;
  height: 22px;
  min-width: 22px;
  min-height: 22px;
}
.app-android #photos-screen .photos-nav-icon { font-size: 1.4rem; }
.app-android #photos-screen .photos-nav-icon svg { width: 28px; height: 28px; }
.app-android #photos-screen .photos-header .photos-nav-icon svg { width: 26px; height: 26px; }

/*
 * Accueil : les @container ci-dessus donnaient au bandeau .dashboard-header des min-height énormes
 * (ancien layout logo dans le header). Le logo est dans .dashboard-content — sans override, la zone
 * fixe / min-height pouvait faire disparaître ou bloquer l’accueil.
 */
#dashboard-screen .dashboard-header {
  min-height: 0 !important;
  height: auto;
}