/* =========================================================================
THEME.CSS — Design system ERP SaaS Hôtels & Restaurants
---------------------------------------------------------------------
Objectif : surcharger les variables natives de Bootstrap 5 (--bs-*)
pour obtenir une identité visuelle élégante et cohérente, SANS étape
de build (pas de SCSS à compiler), conformément à l'exigence du
cahier des charges : "sans framework front-end lourd, JS natif ES6+".
Il suffit de charger bootstrap.min.css PUIS ce fichier.
Emplacement prévu dans le projet Django : static/css/theme.css
Thème clair/sombre : piloté par l'attribut data-bs-theme="light|dark"
posé sur (voir templates/base.html et static/js/theme_toggle.js).
Les composants n'utilisent jamais les couleurs "brand-*" directement
pour leurs fonds/textes : ils passent par des jetons sémantiques
(--surface-bg, --text-strong, ...) redéfinis dans le bloc
[data-bs-theme="dark"] en fin de fichier — c'est ce qui permet à un
seul fichier CSS, sans variante ni recompilation, de supporter les
deux thèmes.
Coquille applicative : la structure (sidebar + topbar + contenu) est
construite en Flexbox pur (.app-shell / .app-sidebar / .app-topbar),
PAS avec la grille Bootstrap (.container/.row/.col) — c'est cette
dernière, avec ses marges négatives et ses points de rupture, qui
était la cause du désalignement observé sur les premières versions.
========================================================================= */
/* -------------------------------------------------------------------------
1. POLICES — Google Fonts + Bootstrap Icons (voir dans base.html)
- Titres : "Fraunces" (serif éditorial, chaleureux, évoque l'hôtellerie
haut de gamme sans tomber dans le "corporate froid").
- Corps de texte / UI dense (tableaux, formulaires) : "Inter", conçue
pour rester lisible à petite taille dans des interfaces denses.
------------------------------------------------------------------------- */
@import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600;700&display=swap");
:root {
/* -----------------------------------------------------------------------
2. PALETTE DE MARQUE
Ambiance "hôtellerie contemporaine" : le bleu nuit (ink-950 -> ink-500)
est la couleur PORTEUSE de l'identité (confiance, sérieux, nuit
élégante) — le site public (apps.marketing) l'utilise en fond sur
TOUTES ses sections, avec de légères variations de profondeur
(ink-950/ink-800/ink-700) pour créer du relief sans jamais retomber
sur un fond blanc/ivoire. Le laiton chaud reste l'accent ponctuel
(CTA, mise en avant), jamais un fond de section. Fond ivoire réservé
à l'application connectée (thème clair, cf. section Coquille).
----------------------------------------------------------------------- */
--brand-ink-950: #0a0f1a; /* Bleu nuit le plus profond — fonds pleine page (site public) */
--brand-ink-900: #101826; /* Encre marine — quasi-noir, texte fort */
--brand-ink-800: #141f33; /* Bleu nuit intermédiaire — alterne avec ink-950 sur le site public */
--brand-ink-700: #16243b; /* Marine profond — couleur primaire */
--brand-ink-500: #2c3e5c; /* Marine moyen — hover / variantes */
--brand-glow-500: #4f6fb8; /* Bleu nuit éclairci — liens/accents sur fond sombre, halos */
--brand-glow-300: #8ba0d9; /* Bleu nuit très clair — texte secondaire sur fond sombre */
--brand-brass-600: #b3862c; /* Laiton foncé — accent, texte sur clair */
--brand-brass-400: #c9a24b; /* Laiton — accent principal (CTA doux) */
--brand-brass-200: #e8d9b5; /* Laiton pâle — fonds d'accent légers */
--brand-ivory-100: #f7f5f1; /* Ivoire — fond de page (thème clair) */
--brand-ivory-050: #fbfaf7; /* Ivoire clair — fond de carte alterné */
--brand-sand-200: #e5e1d8; /* Sable — bordures, séparateurs */
--brand-slate-600: #5b6472; /* Ardoise — texte secondaire */
--brand-slate-400: #8a92a0; /* Ardoise clair — texte tertiaire / icônes */
/* -----------------------------------------------------------------------
3. COULEURS SÉMANTIQUES MÉTIER
Utilisées pour les statuts chambres, commandes et cuisine. Choisies
pour rester distinguables (daltonisme) ET cohérentes avec la palette
de marque (tons rabattus, pas de couleurs "criardes" par défaut).
Ces teintes ne changent volontairement PAS entre thème clair et
sombre (une puce "Occupée" reste bleue partout) ; seul le fond des
badges est adapté en mode sombre (cf. section dédiée).
----------------------------------------------------------------------- */
--status-success-600: #2f9e68; /* Disponible propre / Servi / Encaissé */
--status-success-100: #e1f3ea;
--status-info-600: #3b6fd6; /* Occupée / Prêt */
--status-info-100: #e3ebfb;
--status-violet-600: #7c5cbf; /* Réservée */
--status-violet-100: #ece6f7;
--status-warning-600: #d98c1f; /* Départ prévu / En préparation */
--status-warning-100: #faecd3;
--status-orange-600: #e0672b; /* À nettoyer */
--status-orange-100: #fbe4d8;
--status-danger-600: #c94040; /* Maintenance / Annulé */
--status-danger-100: #f8dede;
--status-neutral-600: #7b8290; /* Bloquée / En attente */
--status-neutral-100: #e9eaec;
--status-teal-600: #0e8f8a; /* Disponible à inspecter */
--status-teal-100: #dcf1f0;
/* -----------------------------------------------------------------------
4. RAYONS, OMBRES, ESPACEMENTS
----------------------------------------------------------------------- */
--radius-sm: 0.375rem;
--radius-md: 0.625rem;
--radius-lg: 1rem;
--shadow-soft: 0 1px 2px rgba(16, 24, 38, 0.04), 0 4px 12px rgba(16, 24, 38, 0.06);
--shadow-raised: 0 2px 4px rgba(16, 24, 38, 0.06), 0 12px 24px rgba(16, 24, 38, 0.08);
/* -----------------------------------------------------------------------
5. JETONS SÉMANTIQUES (thème clair par défaut)
Toute la suite du fichier (composants) consomme CES variables plutôt
que les couleurs de marque brutes, afin que le bloc dark mode n'ait
qu'à les redéfinir une seule fois chacune.
----------------------------------------------------------------------- */
--surface-bg: #ffffff; /* Fond des cartes, topbar, tuiles */
--surface-alt-bg: var(--brand-ivory-050); /* Fond alterné (tableaux) */
--surface-border: var(--brand-sand-200); /* Bordures de composants */
--text-strong: var(--brand-ink-900); /* Titres, valeurs importantes */
--text-muted: var(--brand-slate-600); /* Texte secondaire */
/* Sidebar : toujours sombre, dans les deux thèmes (c'est la couleur de
marque, pas une "surface" qui doit s'adapter) — voir section Coquille. */
--sidebar-bg: var(--brand-ink-900);
--sidebar-bg-soft: var(--brand-ink-700);
--sidebar-text: rgba(247, 245, 241, 0.75);
--sidebar-text-strong: #ffffff;
--sidebar-border: rgba(247, 245, 241, 0.08);
--sidebar-icon: rgba(247, 245, 241, 0.55);
/* -----------------------------------------------------------------------
6. SURCHARGE DES VARIABLES BOOTSTRAP 5 (--bs-*)
----------------------------------------------------------------------- */
--bs-body-font-family: "Inter", system-ui, -apple-system, sans-serif;
--bs-body-bg: var(--brand-ivory-100);
--bs-body-color: var(--text-strong);
--bs-border-color: var(--surface-border);
--bs-border-radius: var(--radius-sm);
--bs-border-radius-lg: var(--radius-lg);
--bs-box-shadow: var(--shadow-soft);
--bs-primary: var(--brand-ink-700);
--bs-primary-rgb: 22, 36, 59;
--bs-secondary: var(--brand-slate-600);
--bs-secondary-rgb: 91, 100, 114;
--bs-success: var(--status-success-600);
--bs-success-rgb: 47, 158, 104;
--bs-info: var(--status-info-600);
--bs-info-rgb: 59, 111, 214;
--bs-warning: var(--status-warning-600);
--bs-warning-rgb: 217, 140, 31;
--bs-danger: var(--status-danger-600);
--bs-danger-rgb: 201, 64, 64;
--bs-light: var(--brand-ivory-050);
--bs-dark: var(--brand-ink-900);
--bs-link-color: var(--brand-ink-700);
--bs-link-hover-color: var(--brand-brass-600);
}
/* -------------------------------------------------------------------------
7. TITRAGE
------------------------------------------------------------------------- */
h1, h2, h3, .h1, .h2, .h3, .font-display {
font-family: "Fraunces", Georgia, serif;
font-weight: 600;
letter-spacing: -0.01em;
color: var(--text-strong);
}
/* -------------------------------------------------------------------------
7bis. LIENS — Bootstrap 5 souligne les par défaut (reboot.css) ; on
ne veut ce soulignement nulle part dans l'application (§ demande
explicite : "eviter de souligner les liens"). Les boutons (.btn*) ne
sont pas concernés (Bootstrap ne les souligne déjà pas), et un
utilitaire Bootstrap explicite comme .text-decoration-underline reste
prioritaire (règle !important côté Bootstrap).
------------------------------------------------------------------------- */
a {
text-decoration: none;
}
a:hover,
a:focus {
text-decoration: none;
}
/* -------------------------------------------------------------------------
8. NAVBAR PUBLIQUE (site marketing, écran de connexion) — inchangée,
pleine largeur, marine foncé. Ne pas confondre avec .app-topbar
(section Coquille) qui n'habille QUE la colonne de contenu une fois
connecté.
------------------------------------------------------------------------- */
.app-navbar {
background-color: var(--brand-ink-700);
box-shadow: var(--shadow-soft);
}
.app-navbar .navbar-brand {
font-family: "Fraunces", serif;
font-weight: 600;
color: var(--brand-ivory-100);
letter-spacing: 0.01em;
}
.app-navbar .nav-link {
color: rgba(247, 245, 241, 0.75);
transition: color 0.15s ease;
}
.app-navbar .nav-link:hover,
.app-navbar .nav-link.active {
color: var(--brand-brass-400);
}
/* Bouton "fantôme" (icônes de la topbar/navbar) : mêmes proportions qu'un
bouton Bootstrap sm, sans fond ni bordure par défaut. */
.btn-icon-ghost {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.25rem;
height: 2.25rem;
padding: 0;
border: 1px solid transparent;
border-radius: var(--radius-sm);
background: transparent;
color: var(--text-muted);
flex-shrink: 0;
}
.btn-icon-ghost:hover {
background: var(--surface-alt-bg);
color: var(--text-strong);
}
/* Variante sur fond sombre (navbar publique) */
.app-navbar .btn-icon-ghost { color: rgba(247, 245, 241, 0.85); }
.app-navbar .btn-icon-ghost:hover { background: rgba(247, 245, 241, 0.12); color: var(--brand-brass-400); }
/* Un seul des deux pictogrammes (soleil/lune) est visible, selon le
thème actif sur . */
html[data-bs-theme="light"] [data-theme-icon="dark"] { display: none; }
html[data-bs-theme="dark"] [data-theme-icon="light"] { display: none; }
/* =========================================================================
9. COQUILLE APPLICATIVE (pages connectées)
---------------------------------------------------------------------
Structure Flexbox à deux niveaux :
.app-shell (ligne)
.app-sidebar — largeur fixe, pleine hauteur, toujours sombre
.app-content — colonne (flex-grow) : .app-topbar puis
Aucune classe .container/.row/.col Bootstrap ici : c'est justement le
report de marges négatives de la grille (pensée pour du contenu, pas
pour une coquille d'application) qui produisait le désalignement.
========================================================================= */
.app-shell {
display: flex;
min-height: 100vh;
align-items: stretch;
}
.app-sidebar {
width: 264px;
min-width: 264px;
flex-shrink: 0;
min-height: 100vh;
position: sticky;
top: 0;
align-self: flex-start;
background: var(--sidebar-bg);
border-right: 1px solid var(--sidebar-border);
padding: 1.25rem 1rem;
display: flex;
flex-direction: column;
transition: width .18s ease, min-width .18s ease, padding .18s ease;
}
.app-brand {
display: flex;
align-items: center;
gap: 0.65rem;
padding: 0.25rem 0.5rem 1.5rem;
text-decoration: none;
}
.app-brand-mark {
width: 2.25rem;
height: 2.25rem;
border-radius: var(--radius-md);
flex-shrink: 0;
background: linear-gradient(135deg, var(--brand-brass-400), var(--brand-brass-600));
display: flex;
align-items: center;
justify-content: center;
color: var(--brand-ink-900);
font-family: "Fraunces", serif;
font-weight: 700;
font-size: 1.05rem;
}
.app-brand-text { font-family: "Fraunces", serif; font-weight: 600; font-size: 1.05rem; color: var(--sidebar-text-strong); letter-spacing: .01em; line-height: 1.1; }
.app-brand-logo { width:2.35rem; height:2.35rem; flex:0 0 auto; object-fit:contain; padding:.22rem; border-radius:.7rem; background:#fff; }
.app-brand-sub { font-size: 0.68rem; color: var(--sidebar-icon); margin-top: 1px; }
.app-nav { display: flex; flex-direction: column; gap: 1.1rem; flex-grow: 1; overflow-y: auto; min-height: 0; }
.app-nav-group { display: flex; flex-direction: column; gap: 0.15rem; }
.app-nav-group-title {
padding: 0 0.65rem 0.3rem;
font-size: 0.66rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .08em;
color: var(--sidebar-icon);
}
.app-nav-link {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.55rem 0.65rem;
border-radius: var(--radius-sm);
color: var(--sidebar-text);
font-size: 0.85rem;
font-weight: 500;
transition: background-color .12s ease, color .12s ease;
}
.app-nav-link i { font-size: 1.02rem; width: 1.2rem; text-align: center; color: var(--sidebar-icon); flex-shrink: 0; }
.app-nav-link:hover { background: var(--sidebar-bg-soft); color: #fff; }
.app-nav-link:hover i { color: var(--brand-brass-400); }
.app-nav-link.active { background: #ffffff; color: var(--brand-ink-900); }
.app-nav-link.active i { color: var(--brand-brass-600); }
.app-sidebar-footer {
border-top: 1px solid var(--sidebar-border);
padding-top: 0.75rem;
margin-top: 0.75rem;
font-size: 0.7rem;
color: var(--sidebar-icon);
display: flex;
flex-direction: column;
gap: 0.3rem;
}
.app-sidebar-footer a { color: var(--sidebar-text); text-decoration: none; }
.app-sidebar-footer a:hover { color: var(--brand-brass-400); }
/* Repli de la sidebar (mode "icônes seules") — mémorisé en localStorage,
voir static/js/nav_controls.js. Largeur ramenée à 76px plutôt qu'à 0 :
le menu reste utilisable même écran replié. */
.app-shell.app-sidebar-collapsed .app-sidebar { width: 76px; min-width: 76px; padding-inline: 0.75rem; }
.app-shell.app-sidebar-collapsed .app-brand { justify-content: center; padding-inline: 0; }
.app-shell.app-sidebar-collapsed .app-brand-text,
.app-shell.app-sidebar-collapsed .app-brand-sub,
.app-shell.app-sidebar-collapsed .app-nav-group-title,
.app-shell.app-sidebar-collapsed .app-nav-link span,
.app-shell.app-sidebar-collapsed .app-sidebar-footer { display: none; }
.app-shell.app-sidebar-collapsed .app-nav-link { justify-content: center; padding-inline: 0.5rem; }
.app-content { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.app-topbar {
background: var(--surface-bg);
border-bottom: 1px solid var(--surface-border);
padding: 0.7rem 1.5rem;
display: flex;
align-items: center;
gap: 0.9rem;
position: sticky;
top: 0;
z-index: 1020;
}
.app-main { flex: 1 1 auto; padding: 1.5rem; max-width: 1440px; width: 100%; margin-inline: auto; }
@media (max-width: 767.98px) { .app-main { padding: 1rem; } .app-topbar { padding: 0.6rem 1rem; } }
/* Sélecteur d'établissement (topbar) — bouton pilule + menu déroulant.
Le superadmin y trouve en plus "Vue globale (tous les établissements)". */
.establishment-switcher .btn {
border-radius: 999px;
border: 1px solid var(--surface-border);
background: var(--surface-alt-bg);
font-size: 0.8rem;
font-weight: 600;
color: var(--text-strong);
padding: 0.4rem 0.9rem;
}
.app-avatar {
width: 2.1rem;
height: 2.1rem;
border-radius: 50%;
background: var(--brand-brass-200);
color: var(--brand-brass-600);
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 0.8rem;
flex-shrink: 0;
}
/* Menu mobile (offcanvas Bootstrap) — même contenu que .app-sidebar,
affiché uniquement sous le point de rupture lg. */
.app-mobile-nav { background: var(--sidebar-bg); color: var(--sidebar-text); border: none; --bs-offcanvas-width: min(85vw, 300px); }
.app-mobile-nav .offcanvas-header { border-bottom: 1px solid var(--sidebar-border); }
.app-mobile-nav .app-nav { overflow: visible; }
/* -------------------------------------------------------------------------
10. EN-TÊTES DE PAGE ET LISTES
------------------------------------------------------------------------- */
.page-header { display: flex; justify-content: space-between; align-items: flex-end; gap: 1.25rem; margin-bottom: 1.5rem; flex-wrap: wrap; }
.page-header h1 { font-size: clamp(1.5rem, 2vw, 1.9rem); margin: 0.2rem 0 0.25rem; }
.page-header p { color: var(--text-muted); margin: 0; }
.page-eyebrow { color: var(--brand-brass-600); font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.list-header { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 1.25rem; flex-wrap: wrap; }
.list-header h1 { font-size: clamp(1.4rem, 1.8vw, 1.7rem); margin: 0 0 0.2rem; }
.empty-state { text-align: center; padding: 3.5rem 1.5rem; color: var(--text-muted); }
.empty-state i { font-size: 2.5rem; color: var(--surface-border); margin-bottom: 0.75rem; display: block; }
/* -------------------------------------------------------------------------
11. GRILLE D'INDICATEURS (KPI) — tableau de bord
------------------------------------------------------------------------- */
.kpi-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.9rem; margin-bottom: 1.5rem; }
@media (max-width: 1199.98px) { .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575.98px) { .kpi-grid { grid-template-columns: 1fr; } }
.kpi-card { background: var(--surface-bg); border: 1px solid var(--surface-border); border-radius: var(--radius-lg); padding: 1.1rem; min-width: 0; }
.kpi-head { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; color: var(--text-muted); font-size: 0.82rem; font-weight: 600; }
.kpi-icon { width: 2.1rem; height: 2.1rem; border-radius: var(--radius-sm); display: inline-flex; align-items: center; justify-content: center; font-size: 1rem; flex-shrink: 0; }
.kpi-icon.tone-primary { background: var(--brand-brass-200); color: var(--brand-brass-600); }
.kpi-icon.tone-success { background: var(--status-success-100); color: var(--status-success-600); }
.kpi-icon.tone-info { background: var(--status-info-100); color: var(--status-info-600); }
.kpi-icon.tone-warning { background: var(--status-warning-100); color: var(--status-warning-600); }
.kpi-icon.tone-danger { background: var(--status-danger-100); color: var(--status-danger-600); }
.kpi-value { margin-top: 0.85rem; font-size: clamp(1.3rem, 1.8vw, 1.7rem); font-weight: 800; color: var(--text-strong); letter-spacing: -.02em; }
.kpi-context { margin-top: 0.2rem; color: var(--text-muted); font-size: 0.78rem; }
/* Graphiques dynamiques du tableau de bord (Chart.js — apps.reporting,
voir static/js/reporting_dashboard.js). Hauteur FIXE du conteneur du
canvas : un