/* * Layout global — shell de l'app. * * Structure : * * *

* */ #app { min-height: 100vh; min-height: 100dvh; /* iOS / Android handle correctement */ display: flex; flex-direction: column; } /* ============================================================ Splash de chargement (avant que le JS hydrate) ============================================================ */ .app-splash { flex: 1; display: flex; align-items: center; justify-content: center; padding: var(--space-8); } .app-splash__logo { width: 80px; height: 80px; border-radius: var(--radius-md); background: var(--accent); display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow); } .app-splash__logo img { width: 64px; height: 64px; display: block; } /* ============================================================ Layout mobile (par défaut, mobile-first) ============================================================ */ .shell { flex: 1; display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; } .main { flex: 1; padding: var(--space-5) var(--space-4) calc(var(--space-12) + 64px); /* place pour la bottom-nav */ } .view { max-width: 720px; margin: 0 auto; } /* Bottom navigation (mobile uniquement, masquée en desktop) */ .bottom-nav { position: fixed; bottom: 0; left: 0; right: 0; height: 64px; background: var(--surface); border-top: 1px solid var(--border); display: flex; align-items: stretch; z-index: var(--z-bottom-nav); } .bottom-nav__item { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: var(--text-faint); text-decoration: none; position: relative; transition: color var(--transition-fast); } .bottom-nav__item:hover { color: var(--text-muted); } .bottom-nav__item--active { color: var(--accent); } .bottom-nav__icon { width: 22px; height: 22px; } .bottom-nav__label { font-size: 10px; font-weight: 700; letter-spacing: 0.02em; } .bottom-nav__badge { position: absolute; top: 8px; right: 50%; transform: translateX(14px); min-width: 16px; height: 16px; padding: 0 5px; background: var(--accent); color: white; border-radius: var(--radius-pill); font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center; line-height: 1; } /* Sidebar (masquée en mobile) */ .sidebar { display: none; } /* ============================================================ Layout desktop (≥ 768px) ============================================================ */ @media (min-width: 768px) { .shell { flex-direction: row; } /* Sidebar fixée à gauche */ .sidebar { display: flex; flex-direction: column; width: 240px; flex-shrink: 0; padding: var(--space-6) var(--space-4); gap: var(--space-2); background: var(--surface); border-right: 1px solid var(--border); position: sticky; top: 0; height: 100vh; height: 100dvh; } .sidebar__brand { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3); margin-bottom: var(--space-4); } .sidebar__logo { width: 32px; height: 32px; border-radius: var(--radius-md); background: var(--accent); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .sidebar__logo img { width: 24px; height: 24px; display: block; } .sidebar__name { font-size: 16px; font-weight: 800; letter-spacing: -0.01em; color: var(--text); } .sidebar__item { display: flex; align-items: center; gap: var(--space-3); padding: 10px 12px; border-radius: var(--radius-md); color: var(--text-muted); text-decoration: none; font-size: 14px; font-weight: 600; transition: background var(--transition-fast), color var(--transition-fast); position: relative; } .sidebar__item:hover { background: var(--surface-alt); color: var(--text); } .sidebar__item--active { background: var(--accent-soft); color: var(--accent-text); } .sidebar__item-icon { width: 18px; height: 18px; flex-shrink: 0; } .sidebar__item-label { flex: 1; } .sidebar__item-badge { min-width: 20px; height: 20px; padding: 0 6px; background: var(--accent); color: white; border-radius: var(--radius-pill); font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; line-height: 1; } /* Bottom-nav masquée en desktop */ .bottom-nav { display: none; } /* Main devient une zone centrale avec scroll indépendant si besoin */ .main { flex: 1; padding: var(--space-8); overflow-y: auto; min-width: 0; } .view { max-width: 1000px; } } /* ============================================================ Utilitaires de layout (stack vertical, row horizontale) ============================================================ */ .stack { display: flex; flex-direction: column; gap: var(--space-4); } .stack--tight { gap: var(--space-2); } .stack--loose { gap: var(--space-6); } .row { display: flex; align-items: center; gap: var(--space-3); } .row--between { justify-content: space-between; } .row--wrap { flex-wrap: wrap; } .grid { display: grid; gap: var(--space-3); } .grid--2 { grid-template-columns: repeat(2, 1fr); } @media (min-width: 768px) { .grid--2\@desktop { grid-template-columns: repeat(2, 1fr); } .grid--3\@desktop { grid-template-columns: repeat(3, 1fr); } } /* Sections d'écran */ .section { margin-bottom: var(--space-8); } .section__header { margin-bottom: var(--space-4); } @media (min-width: 768px) { .section { margin-bottom: var(--space-10); } } /* ============================================================ Update toast : signale qu'une nouvelle version est disponible (apparait quand le service worker installe une nouvelle version alors qu'un SW était déjà actif — cf. app.js). ============================================================ */ .update-toast { position: fixed; bottom: calc(72px + env(safe-area-inset-bottom, 0px)); left: 50%; transform: translateX(-50%) translateY(20px); background: var(--surface); color: var(--text); border: 1px solid var(--border); border-left: 4px solid var(--accent); box-shadow: var(--shadow-pop); padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4); border-radius: var(--radius-md); font-size: 0.85rem; font-weight: 600; z-index: var(--z-toast); opacity: 0; pointer-events: none; transition: opacity var(--transition-base), transform var(--transition-base); display: flex; align-items: center; gap: var(--space-3); } .update-toast--visible { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); } @media (min-width: 768px) { .update-toast { bottom: var(--space-6); } }