/* ============================== Thème global Alterium Manager ============================== */ :root { /* Palette light (par défaut) */ --color-bg: #f4f5f7; --color-bg-elevated: #ffffff; --color-border-subtle: #e1e4ea; --color-border-strong: #c5c9d3; --color-primary: #2563eb; --color-primary-soft: #e3edff; --color-primary-dark: #1d4ed8; --color-accent: #10b981; --color-text: #111827; --color-text-muted: #6b7280; --color-text-soft: #9ca3af; --color-nav-bg: #ffffff; --color-nav-border: #e5e7eb; --radius-xs: 0.25rem; --radius-sm: 0.375rem; --radius-md: 0.5rem; --radius-lg: 0.75rem; --radius-pill: 999px; --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.08); --shadow-md: 0 4px 8px rgba(15, 23, 42, 0.08); --transition-fast: 150ms ease-out; --input-bg: #ffffff; --input-border: #d1d5db; --input-border-focus: #2563eb; --table-header-bg: #f9fafb; --table-row-hover: #f3f4f6; --badge-bg: #eef2ff; --badge-text: #4338ca; --danger-bg: #fef2f2; --danger-border: #fecaca; --danger-text: #b91c1c; --info-bg: #eff6ff; --info-border: #bfdbfe; --info-text: #1d4ed8; } /* Variante dark (optionnelle, si tu ajoutes data-theme="dark" sur ou ) */ [data-theme="dark"] { --color-bg: #020617; --color-bg-elevated: #0b1120; --color-border-subtle: #1f2937; --color-border-strong: #374151; --color-text: #e5e7eb; --color-text-muted: #9ca3af; --color-text-soft: #6b7280; --color-nav-bg: #020617; --color-nav-border: #111827; --input-bg: #020617; --input-border: #374151; --input-border-focus: #3b82f6; --table-header-bg: #020617; --table-row-hover: #111827; --badge-bg: #1e293b; --badge-text: #e5e7eb; --danger-bg: rgba(239, 68, 68, 0.1); --danger-border: rgba(248, 113, 113, 0.6); --danger-text: #fecaca; --info-bg: rgba(59, 130, 246, 0.12); --info-border: rgba(96, 165, 250, 0.6); --info-text: #bfdbfe; } /* ============================== Layout global ============================== */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; height: 100%; } body { font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 14px; line-height: 1.5; background-color: var(--color-bg); color: var(--color-text); } /* Racine de l'app : header + contenu + footer */ .app-root { min-height: 100vh; display: flex; flex-direction: column; } /* Header principal */ .app-header { position: sticky; top: 0; z-index: 20; background-color: var(--color-nav-bg); border-bottom: 1px solid var(--color-nav-border); padding: 0.6rem 1.5rem; display: flex; align-items: center; justify-content: space-between; } /* Logo + titre app */ .app-logo { display: flex; align-items: center; gap: 0.5rem; font-weight: 600; letter-spacing: 0.03em; color: var(--color-text); } .app-logo-badge { width: 32px; height: 32px; border-radius: 999px; background: linear-gradient(135deg, var(--color-primary), var(--color-accent)); display: flex; align-items: center; justify-content: center; font-size: 0.8rem; color: #ffffff; box-shadow: var(--shadow-sm); } /* Menus de navigation (liens modules) */ /* Menu horizontal groupé */ /* ======================= Header compact ======================= */ .app-header { padding: 0.3rem 1.2rem; /* hauteur réduite */ } /* conteneur gauche du nav */ .nav-group-left { display: flex; align-items: center; gap: 0.5rem; } /* variante compacte des liens */ .nav-link--compact { font-size: 0.8rem; padding: 0.1rem 0.4rem; } /* ======================= Dropdown "Modules" ======================= */ /* Wrapper du menu Modules : on agrandit la zone de hover */ /* Wrapper bouton + menu */ .nav-dropdown { position: relative; display: inline-block; } /* Bouton très petit : "Modules" */ .nav-trigger { border-radius: 999px; border: 1px solid var(--color-border-subtle); padding: 0.2rem 0.9rem; font-size: 0.8rem; background-color: var(--color-bg-elevated); color: var(--color-text-muted); cursor: pointer; display: inline-flex; align-items: center; gap: 0.25rem; transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast); } .nav-trigger:hover { background-color: var(--color-primary-soft); border-color: var(--color-primary); color: var(--color-primary-dark); box-shadow: var(--shadow-sm); transform: translateY(-1px); } /* Menu déroulant (caché par défaut) */ .nav-dropdown-menu { position: absolute; top: 120%; left: 0; min-width: 260px; padding: 0.5rem 0.4rem; background-color: var(--color-bg-elevated); border-radius: var(--radius-md); border: 1px solid var(--color-border-subtle); box-shadow: var(--shadow-md); display: none; /* important */ z-index: 30; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem 1.25rem; } /* Quand le dropdown est "ouvert" (classe ajoutée en JS) */ .nav-dropdown.is-open .nav-dropdown-menu { display: grid; } /* Menu déroulant : collé au bouton, sans “trou” de hover */ .nav-dropdown-menu { position: absolute; top: 100%; /* directement sous le bouton */ left: 0; margin-top: 2px; /* petit espace visuel mais sans sortir du padding du wrapper */ min-width: 260px; padding: 0.5rem 0.4rem; background-color: var(--color-bg-elevated); border-radius: var(--radius-md); border: 1px solid var(--color-border-subtle); box-shadow: var(--shadow-md); display: none; z-index: 30; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem 1.25rem; } /* Le menu reste ouvert tant que la souris est sur le bouton OU dans le menu */ .nav-dropdown:hover .nav-dropdown-menu, .nav-dropdown:focus-within .nav-dropdown-menu { display: grid; } /* Sections dans le dropdown */ .nav-dropdown-section { display: flex; flex-direction: column; gap: 0.15rem; } .nav-dropdown-title { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-text-soft); margin-bottom: 0.1rem; } /* Liens internes du dropdown */ .nav-dropdown-link { font-size: 0.8rem; padding: 0.15rem 0.3rem; border-radius: var(--radius-sm); color: var(--color-text-muted); text-decoration: none; transition: background-color var(--transition-fast), color var(--transition-fast); } .nav-dropdown-link:hover { background-color: var(--color-primary-soft); color: var(--color-primary-dark); } /* Logo image (light/dark variant) */ .app-logo-img { height: 24px; display: block; } .app-logo-img--light { display: inline-block; } .app-logo-img--dark { display: none; } [data-theme="dark"] .app-logo-img--light { display: none; } [data-theme="dark"] .app-logo-img--dark { display: inline-block; } /* Zone nav principale (liens modules) */ .app-nav { display: flex; align-items: center; gap: 1rem; } /* Conteneur central : on recentre les cartes auth et les contenus */ /* Zone principale : on centre horizontalement, mais plus verticalement */ .app-main { flex: 1; display: flex; justify-content: center; align-items: flex-start; padding: 1.5rem; } /* Conteneur de page unique */ .app-page { width: 100%; max-width: 1200px; margin: 0 auto; } .page-container { width: 100%; } /* Footer */ .app-footer { padding: 0.5rem 1.5rem 1rem; font-size: 0.75rem; color: var(--color-text-soft); text-align: center; border-top: 1px solid var(--color-border-subtle); background-color: var(--color-nav-bg); } /* ============================== Liens / navigation ============================== */ a { color: var(--color-primary); text-decoration: none; transition: color var(--transition-fast); } a:hover { color: var(--color-primary-dark); } /* Lien de navigation (menus, sous-menus) */ .nav-link { color: var(--color-text-muted); text-decoration: none; font-size: 0.9rem; padding: 0.25rem 0.5rem; border-radius: var(--radius-pill); transition: color var(--transition-fast), background-color var(--transition-fast); } .nav-link:hover { color: var(--color-primary); background-color: var(--color-primary-soft); } /* Lien “text only” (retours, actions secondaires) */ .btn-link { border: none; background: none; padding: 0; font-size: 0.85rem; color: var(--color-text-muted); cursor: pointer; text-decoration: none; transition: color var(--transition-fast), opacity var(--transition-fast); } .btn-link:hover { color: var(--color-primary); opacity: 0.9; } /* ============================== Cartes, sections, titres ============================== */ .auth-card, .card { width: 100%; background-color: var(--color-bg-elevated); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: 1.5rem; border: 1px solid var(--color-border-subtle); } /* Pour les écrans de login */ /* Toutes les cartes directement dans une app-page s'étendent bien */ .app-page > .card, .app-page > .auth-card { max-width: 1100px; margin: 0 auto; } .auth-title { font-size: 1.3rem; font-weight: 600; margin-bottom: 0.25rem; } .auth-subtitle { font-size: 0.9rem; color: var(--color-text-muted); margin-bottom: 1.5rem; } /* Titre de page générique */ .page-header { margin-bottom: 1rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; justify-content: space-between; } .page-title { font-size: 1.25rem; font-weight: 600; } .page-subtitle { font-size: 0.85rem; color: var(--color-text-muted); } /* Conteneur d’actions (boutons en haut à droite) */ .page-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; } /* ============================== Formulaires ============================== */ .form-label { font-size: 0.85rem; margin-bottom: 0.25rem; display: block; color: var(--color-text-muted); } .form-control, select.form-control, textarea.form-control { width: 100%; border-radius: var(--radius-sm); border: 1px solid var(--input-border); padding: 0.5rem 0.6rem; font-size: 0.9rem; background-color: var(--input-bg); color: var(--color-text); outline: none; transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast); } .form-control:focus { border-color: var(--input-border-focus); box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.2); } textarea.form-control { resize: vertical; min-height: 60px; } /* groupements horizontaux */ .form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 0.75rem; margin-bottom: 0.75rem; } .mb-3 { margin-bottom: 0.75rem; } /* Checkbox inline */ .form-check-inline { display: flex; align-items: center; gap: 0.35rem; font-size: 0.85rem; color: var(--color-text-muted); } /* ============================== Boutons ============================== */ .btn-primary { border-radius: var(--radius-pill); border: none; padding: 0.55rem 1.3rem; font-size: 0.9rem; font-weight: 500; background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark)); color: #ffffff; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem; box-shadow: var(--shadow-sm); transition: transform var(--transition-fast), box-shadow var(--transition-fast), filter var(--transition-fast); } .btn-primary:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); filter: brightness(1.03); } .btn-secondary { border-radius: var(--radius-pill); border: 1px solid var(--color-border-strong); padding: 0.5rem 1.1rem; font-size: 0.9rem; font-weight: 500; background-color: #ffffff; color: var(--color-text); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem; transition: background-color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast); } .btn-secondary:hover { background-color: #f9fafb; box-shadow: var(--shadow-sm); } /* ============================== Alerts / messages flash ============================== */ .alert { padding: 0.6rem 0.75rem; border-radius: var(--radius-sm); font-size: 0.85rem; margin-bottom: 0.75rem; border: 1px solid transparent; } .alert-danger { background: var(--danger-bg); border-color: var(--danger-border); color: var(--danger-text); } .alert-info { background: var(--info-bg); border-color: var(--info-border); color: var(--info-text); } /* ============================== Tables (listes type Rentman) ============================== */ .table-card { margin-top: 0.75rem; background-color: var(--color-bg-elevated); border-radius: var(--radius-lg); border: 1px solid var(--color-border-subtle); box-shadow: var(--shadow-sm); overflow: hidden; } .table { width: 100%; border-collapse: collapse; font-size: 0.9rem; } .table thead { background-color: var(--table-header-bg); } .table th, .table td { padding: 0.5rem 0.75rem; text-align: left; border-bottom: 1px solid var(--color-border-subtle); } .table th { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-text-soft); } .table tbody tr:hover { background-color: var(--table-row-hover); } /* Petits états/badges (status, types…) */ .badge { display: inline-flex; align-items: center; border-radius: var(--radius-pill); padding: 0.1rem 0.5rem; font-size: 0.7rem; background-color: var(--badge-bg); color: var(--badge-text); } /* ============================== Divers utilitaires ============================== */ .text-right { text-align: right; } .text-muted { color: var(--color-text-muted); } .text-soft { color: var(--color-text-soft); } .flex { display: flex; } .flex-between { display: flex; justify-content: space-between; align-items: center; } .gap-sm { gap: 0.5rem; } .gap-md { gap: 0.75rem; } /* ============================== Spécifique planning (calendrier) ============================== */ /* Wrapper planning : plein large dans la page, plus haut */ .planning-wrapper { background-color: var(--color-bg-elevated); border-radius: var(--radius-lg); border: 1px solid var(--color-border-subtle); box-shadow: var(--shadow-sm); padding: 1rem 1.25rem; width: 100%; max-width: 1100px; /* tu peux monter à 1300 si tu veux */ margin: 0 auto; min-height: 600px; /* évite le petit bloc rikiki */ } /* FullCalendar occupe tout l'espace dispo dans la carte */ #planning-calendar { height: 100%; } /* FullCalendar héritera de ces styles génériques */ .fc .fc-toolbar-title { font-size: 1rem; font-weight: 600; } .fc .fc-button { border-radius: var(--radius-pill); font-size: 0.8rem; } /* Vignettes d'image pour l'inventaire */ .inv-thumb { width: 46px; height: 46px; border-radius: 0.5rem; object-fit: cover; border: 1px solid var(--color-border-subtle); box-shadow: var(--shadow-sm); } /* Placeholder quand pas d'image */ .inv-thumb--placeholder { display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(135deg, rgba(148,163,184,0.2), rgba(148,163,184,0.05)); color: var(--color-text-soft); font-size: 0.7rem; font-weight: 600; text-transform: uppercase; } /* ============================== Responsive ============================== */ @media (max-width: 768px) { .app-header { flex-direction: column; align-items: flex-start; gap: 0.5rem; } .app-main { padding: 1rem; } .auth-card { margin: 1rem auto; } .page-header { flex-direction: column; align-items: flex-start; } .nav-dropdown-menu { grid-template-columns: 1fr; } .app-header { padding: 0.4rem 0.8rem; } }