/* ── Kit d'interface applicative (admin/membre/back-office) ── */ /* Filet de sécurité anti-débordement horizontal — BUG RÉEL TROUVÉ (2026-07-16, Hôtel Hibiscus, CSS admin fait main hors de ce kit) : "overflow:hidden" posé uniquement sur ne clippe PAS toujours la boîte de défilement réelle du document (gérée par ) — un élément décoratif en position absolue avec un "inset" négatif (fond animé, dégradé pleine page...) peut alors faire défiler TOUTE la page horizontalement sur mobile, invisible en lecture de CSS seule, visible uniquement à l'écran réel. Ce kit pose la règle aux DEUX niveaux dès le départ pour ne jamais avoir à la redécouvrir sur un module qui l'utilise. .app-main a par ailleurs déjà min-width:0 (nécessaire pour qu'un tableau avec overflow-x:auto puisse réellement rétrécir dans un conteneur flex — sans ça, overflow-x:auto ne se déclenche jamais, seule syntaxe CSS ne suffit pas). */ html, body { overflow-x: hidden; } /* ── Thème clair/sombre (2026-07-21) — bascule manuelle via un bouton dans la topbar (data-app-theme-toggle), jamais liée uniquement à prefers-color-scheme pour que l'utilisateur garde la main. Variables posées sur .app-shell (pas :root) pour rester scoping au kit applicatif, jamais sur le site public. BUG-CLASSE À NE PAS REPRODUIRE (cf. mémoire "bascule thème" d'un autre module) : ne JAMAIS coder une couleur en dur (#fff, #e2e8f0...) sur un élément du kit après cette page — passer systématiquement par une de ces variables, sinon cet élément restera figé dans un thème quand l'autre bascule. */ .app-shell { --app-bg-page: #f8fafc; --app-bg-surface: #ffffff; --app-bg-hover: #f8fafc; --app-border: #e2e8f0; --app-border-soft: #f1f5f9; --app-text: var(--color-text, #0f172a); --app-text-muted: var(--color-secondary, #64748b); --app-skeleton-a: #eef1f5; --app-skeleton-b: #e4e8ee; --app-modal-backdrop: rgba(0,0,0,0.5); display: flex; min-height: 100vh; background: var(--app-bg-page); color: var(--app-text); font-family: var(--font-body, system-ui, -apple-system, 'Segoe UI', sans-serif); } [data-theme="dark"] .app-shell { --app-bg-page: #0f172a; --app-bg-surface: #1e293b; --app-bg-hover: #263449; --app-border: #334155; --app-border-soft: #2a3a52; --app-text: #e2e8f0; --app-text-muted: #94a3b8; --app-skeleton-a: #253044; --app-skeleton-b: #2f3c54; --app-modal-backdrop: rgba(0,0,0,0.7); } .app-theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: 0.5rem; border: 1px solid var(--app-border); background: var(--app-bg-surface); color: var(--app-text); cursor: pointer; flex-shrink: 0; } .app-theme-toggle .icon { width: 18px; height: 18px; } .app-theme-toggle .icon-moon { display: none; } [data-theme="dark"] .app-theme-toggle .icon-sun { display: none; } [data-theme="dark"] .app-theme-toggle .icon-moon { display: block; } .app-sidebar { width: 240px; flex-shrink: 0; background: var(--color-primary, #0f172a); color: #fff; padding: 1.5rem 1rem; display: flex; flex-direction: column; gap: 0.25rem; position: fixed; top: 0; bottom: 0; left: 0; overflow-y: auto; z-index: 20; transition: transform .25s ease; } .app-sidebar__header { margin-bottom: 1.5rem; } .app-sidebar__header h2 { font-family: var(--font-heading, 'Inter', sans-serif); margin: 0; font-size: 1.1rem; } .app-sidebar__header p { margin: 0.15rem 0 0; font-size: 0.75rem; opacity: 0.7; } .app-nav { display: flex; flex-direction: column; gap: 0.15rem; } .app-nav a { display: flex; align-items: center; gap: 0.6rem; padding: 0.6rem 0.75rem; border-radius: 0.5rem; color: rgba(255,255,255,0.75); text-decoration: none; font-size: 0.9rem; position: relative; } .app-nav a:hover { background: rgba(255,255,255,0.08); color: #fff; } .app-nav a.active { background: rgba(255,255,255,0.14); color: #fff; font-weight: 600; } .app-nav .icon { width: 18px; height: 18px; flex-shrink: 0; } .app-nav-divider { height: 1px; background: rgba(255,255,255,0.12); margin: 0.75rem 0; } .app-nav-badge { margin-left: auto; background: var(--color-accent, #4f46e5); color: #fff; font-size: 0.7rem; border-radius: 999px; padding: 0.1rem 0.45rem; font-weight: 700; } .app-main { flex: 1; margin-left: 240px; padding: 1.5rem 2rem; min-width: 0; } .app-topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.5rem; flex-wrap: wrap; gap: 0.75rem; } .app-topbar h1 { font-family: var(--font-heading, 'Inter', sans-serif); margin: 0; font-size: 1.4rem; } /* Menu hamburger mobile — même exigence que le site public : jamais "ça se tasse" */ .app-menu-toggle { display: none; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: 0.5rem; border: 1px solid var(--app-border); background: var(--app-bg-surface); color: var(--app-text); cursor: pointer; } @media (max-width: 900px) { .app-sidebar { transform: translateX(-100%); width: 260px; } .app-shell.app-sidebar-open .app-sidebar { transform: translateX(0); box-shadow: 0 0 0 100vmax rgba(0,0,0,0.4); } .app-main { margin-left: 0; padding: 1rem; } .app-menu-toggle { display: inline-flex; } } /* Cartes de statistiques */ .app-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; } .app-stat-card { background: var(--app-bg-surface); border: 1px solid var(--app-border); border-radius: 0.75rem; padding: 1.1rem; } .app-stat-card__label { font-size: 0.75rem; color: var(--app-text-muted); margin: 0 0 0.35rem; } .app-stat-card__value { font-size: 1.6rem; font-weight: 700; font-family: var(--font-heading, 'Inter', sans-serif); margin: 0; } /* Cartes génériques / panneaux */ .app-card { background: var(--app-bg-surface); border: 1px solid var(--app-border); border-radius: 0.75rem; padding: 1.25rem; margin-bottom: 1.5rem; } .app-card h3 { font-family: var(--font-heading, 'Inter', sans-serif); margin: 0 0 1rem; font-size: 1rem; } /* Tableaux — scroll horizontal sur mobile, jamais de débordement de page */ .app-table-wrapper { overflow-x: auto; background: var(--app-bg-surface); border: 1px solid var(--app-border); border-radius: 0.75rem; } .app-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; white-space: nowrap; color: var(--app-text); } .app-table th, .app-table td { padding: 0.75rem 1rem; text-align: left; border-bottom: 1px solid var(--app-border-soft); } .app-table th { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--app-text-muted); font-weight: 600; } .app-table tbody tr:hover { background: var(--app-bg-hover); } .app-empty-state { padding: 3rem 1rem; text-align: center; color: var(--app-text-muted); } /* Formulaires */ .app-form-group { margin-bottom: 1rem; } .app-form-group label { display: block; font-size: 0.8rem; font-weight: 600; margin-bottom: 0.35rem; } .app-form-input, .app-form-group select, .app-form-group textarea { width: 100%; padding: 0.6rem 0.75rem; border: 1px solid var(--app-border); border-radius: 0.5rem; font-family: inherit; font-size: 0.9rem; box-sizing: border-box; background: var(--app-bg-surface); color: var(--app-text); } .app-form-input:focus, .app-form-group select:focus, .app-form-group textarea:focus { outline: none; border-color: var(--color-accent, #4f46e5); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent, #4f46e5) 20%, transparent); } .app-form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; } /* Boutons — mêmes conventions partout, jamais réinventées par vue */ .app-btn { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.6rem 1.1rem; border-radius: 0.5rem; font-size: 0.875rem; font-weight: 600; border: 1px solid transparent; cursor: pointer; text-decoration: none; } .app-btn-primary { background: var(--color-accent, #4f46e5); color: #fff; } .app-btn-secondary { background: var(--app-bg-surface); border-color: var(--app-border); color: var(--app-text); } .app-btn-danger { background: #fef2f2; color: #dc2626; border-color: #fecaca; } [data-theme="dark"] .app-btn-danger { background: rgba(220,38,38,.18); color: #f87171; border-color: rgba(220,38,38,.35); } .app-btn-sm { padding: 0.4rem 0.75rem; font-size: 0.8rem; } .app-btn:disabled { opacity: 0.5; cursor: not-allowed; } /* Badges de statut */ .app-badge { display: inline-flex; align-items: center; padding: 0.2rem 0.6rem; border-radius: 999px; font-size: 0.75rem; font-weight: 600; } .app-badge-success { background: #f0fdf4; color: #16a34a; } .app-badge-warning { background: #fffbeb; color: #d97706; } .app-badge-danger { background: #fef2f2; color: #dc2626; } .app-badge-neutral { background: var(--app-border-soft); color: var(--app-text-muted); } [data-theme="dark"] .app-badge-success { background: rgba(22,163,74,.18); color: #4ade80; } [data-theme="dark"] .app-badge-warning { background: rgba(217,119,6,.2); color: #fbbf24; } [data-theme="dark"] .app-badge-danger { background: rgba(220,38,38,.18); color: #f87171; } /* Modale —