/* ============================================================================
LA MIE DORÉE — Système de design · lamie-ds.css
Feuille de style commune aux 6 applications + le hall.
Direction « journal de luxe » : papier crème, encre espresso, or, filets fins.
Mobile-first · breakpoint principal à 768px.
Préfixe de classe : .lm-*
============================================================================ */
/* ---------------------------------------------------------------------------
1. POLICES
À coller dans le de chaque app :
--------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------
2. TOKENS
--------------------------------------------------------------------------- */
:root {
/* — Papier & surfaces — */
--lm-paper: #F4EFE3; /* fond général de l'app */
--lm-paper-2: #ECE4D4; /* fond alterné / survol doux */
--lm-surface: #FBF8F0; /* fond des cartes / tuiles */
--lm-surface-2: #F5EFE2; /* en-tête de tableau, zones */
/* — Encre (texte) — */
--lm-ink: #3A2E1F; /* texte courant */
--lm-ink-strong: #211A11; /* titres, chiffres forts */
--lm-ink-soft: #6B5C46; /* texte secondaire, labels */
--lm-ink-faint: #9A8B72; /* texte tertiaire, placeholders */
/* — Or (signature) — */
--lm-gold-deep: #7A5A14; /* or profond / ombré */
--lm-gold: #A77F22; /* or moyen (texte sur clair OK) */
--lm-gold-bright: #C9A227; /* or signature, accents */
--lm-gold-light: #DFC067; /* or clair */
--lm-gold-pale: #EBD79A; /* reflet */
--lm-gold-foil: linear-gradient(135deg,#E8CF86 0%,#C9A227 38%,#9C7A1E 70%,#D9BE69 100%);
/* — Sidebar (sombre) — */
--lm-side: #1E1811; /* fond sidebar */
--lm-side-2: #141009; /* fond plus sombre / blocs code */
--lm-side-ink: #C9BBA4; /* texte de menu */
--lm-side-ink-soft:#8C7C63; /* libellés de groupe */
--lm-side-strong: #F2E9D6; /* texte fort / actif */
--lm-side-active: rgba(201,162,39,.14); /* fond item actif */
--lm-side-rule: rgba(255,255,255,.10);/* filet interne */
/* — Lignes & filets — */
--lm-line: rgba(33,26,17,.12); /* bordures discrètes */
--lm-line-strong: rgba(33,26,17,.20); /* bordures marquées */
--lm-rule: #211A11; /* filet éditorial fort*/
/* — Sémantique — */
--lm-positive: #5E6B33; --lm-positive-bg: rgba(94,107,51,.12); --lm-positive-line: rgba(94,107,51,.38);
--lm-negative: #8C2F26; --lm-negative-bg: rgba(140,47,38,.10); --lm-negative-line: rgba(140,47,38,.38);
--lm-info: #284A6B; --lm-info-bg: rgba(40,74,107,.10); --lm-info-line: rgba(40,74,107,.36);
/* — Typographie — */
--lm-font-display: "DM Serif Display", Georgia, "Times New Roman", serif;
--lm-font-serif: "Cormorant Garamond", Georgia, serif;
--lm-font-ui: "Hanken Grotesk", system-ui, -apple-system, sans-serif;
--lm-font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;
/* — Rayons (éditorial = peu arrondi) — */
--lm-radius-sm: 3px;
--lm-radius: 4px;
--lm-radius-lg: 6px;
/* — Ombres — */
--lm-shadow-sm: 0 1px 2px rgba(33,26,17,.06);
--lm-shadow: 0 1px 2px rgba(33,26,17,.05), 0 10px 28px -18px rgba(33,26,17,.32);
--lm-shadow-lg: 0 24px 60px -28px rgba(33,26,17,.45);
/* — Espacement (échelle 4px) — */
--lm-s1:4px; --lm-s2:8px; --lm-s3:12px; --lm-s4:16px;
--lm-s5:24px; --lm-s6:32px; --lm-s7:48px; --lm-s8:64px;
/* — Gabarit — */
--lm-sidebar-w: 256px;
--lm-tap: 44px; /* zone de tap minimale (mobile) */
--lm-bp: 768px; /* breakpoint mobile */
}
/* ---------------------------------------------------------------------------
3. SOCLE
--------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
.lm-root, .lm-app {
margin: 0;
background: var(--lm-paper);
color: var(--lm-ink);
font-family: var(--lm-font-ui);
font-size: 15px;
line-height: 1.5;
letter-spacing: .1px;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
.lm-app img { max-width: 100%; }
/* Titres */
.lm-display { font-family: var(--lm-font-display); font-weight: 400; color: var(--lm-ink-strong); line-height: 1.02; letter-spacing: .2px; margin: 0; font-size: clamp(30px, 4.4vw, 46px); }
.lm-h1 { font-family: var(--lm-font-display); font-weight: 400; color: var(--lm-ink-strong); line-height: 1.05; margin: 0; font-size: clamp(26px, 3.4vw, 36px); }
.lm-h2 { font-family: var(--lm-font-serif); font-weight: 600; color: var(--lm-ink-strong); line-height: 1.1; margin: 0; font-size: clamp(21px, 2.4vw, 26px); }
.lm-h3 { font-family: var(--lm-font-serif); font-weight: 600; color: var(--lm-ink-strong); line-height: 1.15; margin: 0; font-size: 19px; }
.lm-lead { font-size: clamp(16px, 1.6vw, 18px); color: var(--lm-ink-soft); line-height: 1.6; }
.lm-body { font-size: 15px; color: var(--lm-ink); }
.lm-small { font-size: 13px; color: var(--lm-ink-soft); }
/* Étiquette / sur-titre (mono, petites capitales) */
.lm-eyebrow, .lm-label {
font-family: var(--lm-font-mono);
font-size: 11px; font-weight: 500;
letter-spacing: .26em; text-transform: uppercase;
color: var(--lm-gold);
}
.lm-label { color: var(--lm-ink-soft); }
/* Chiffres — éditorial (héro) vs tableau (tabulaire) */
.lm-figure { font-family: var(--lm-font-display); font-weight: 400; color: var(--lm-ink-strong); line-height: 1; font-variant-numeric: tabular-nums; font-size: clamp(28px, 3.6vw, 36px); }
.lm-figure .lm-cur { font-size: .58em; color: var(--lm-ink-faint); margin-left: .12em; }
.lm-num { font-family: var(--lm-font-ui); font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: 0; }
/* Filet de section : ÉTIQUETTE ───────── */
.lm-rule-label {
display: flex; align-items: center; gap: var(--lm-s4);
font-family: var(--lm-font-mono); font-size: 11px; font-weight: 500;
letter-spacing: .26em; text-transform: uppercase; color: var(--lm-ink-soft);
margin: var(--lm-s6) 0 var(--lm-s4);
}
.lm-rule-label::after { content:""; flex:1; height:1px; background: var(--lm-line); }
.lm-rule-label .lm-dot { width:5px; height:5px; border-radius:50%; background: var(--lm-gold-bright); flex:0 0 5px; }
/* Texte doré (foil) — pour 1 mot signature, à utiliser avec parcimonie */
.lm-foil {
background: var(--lm-gold-foil);
-webkit-background-clip: text; background-clip: text;
color: transparent;
}
/* ---------------------------------------------------------------------------
4. GABARIT APPLICATION (sidebar + contenu, responsive)
Markup :
…
--------------------------------------------------------------------------- */
.lm-shell {
display: grid;
grid-template-columns: var(--lm-sidebar-w) 1fr;
min-height: 100vh;
background: var(--lm-paper);
}
/* Barre supérieure mobile (cachée sur desktop) */
.lm-topbar {
display: none;
align-items: center; gap: var(--lm-s3);
height: 60px; padding: 0 var(--lm-s4);
background: var(--lm-side); color: var(--lm-side-strong);
position: sticky; top: 0; z-index: 30;
border-bottom: 1px solid var(--lm-side-rule);
}
.lm-topbar .lm-burger {
width: var(--lm-tap); height: var(--lm-tap);
display: grid; place-items: center;
background: transparent; border: 1px solid var(--lm-side-rule);
border-radius: var(--lm-radius); color: var(--lm-side-strong);
cursor: pointer; flex: 0 0 auto;
}
.lm-topbar .lm-burger svg { width: 20px; height: 20px; }
.lm-topbar img { height: 32px; width: auto; }
.lm-topbar .lm-topbar-title { font-family: var(--lm-font-serif); font-size: 19px; color: var(--lm-side-strong); }
/* Sidebar */
.lm-sidebar {
background: var(--lm-side); color: var(--lm-side-ink);
display: flex; flex-direction: column; gap: var(--lm-s5);
padding: var(--lm-s6) var(--lm-s4) var(--lm-s5);
min-height: 100vh;
}
/* Bandeau de marque (logo détouré sur sombre) */
.lm-brand { display: flex; flex-direction: column; align-items: center; gap: var(--lm-s2);
text-align: center; padding-bottom: var(--lm-s4); border-bottom: 1px solid var(--lm-side-rule); }
.lm-brand img { width: 92px; height: 92px; object-fit: contain; filter: drop-shadow(0 2px 8px rgba(0,0,0,.35)); }
.lm-brand-name { font-family: var(--lm-font-serif); font-weight: 600; font-size: 22px; color: var(--lm-side-strong); line-height: 1.05; white-space: nowrap; }
.lm-brand-sub { font-family: var(--lm-font-mono); font-size: 10px; letter-spacing: .30em; text-transform: uppercase; color: var(--lm-gold-bright); }
/* Navigation */
.lm-nav { display: flex; flex-direction: column; gap: 2px; }
.lm-nav-group {
font-family: var(--lm-font-mono); font-size: 10px; letter-spacing: .26em;
text-transform: uppercase; color: var(--lm-side-ink-soft);
margin: var(--lm-s4) var(--lm-s2) var(--lm-s1);
}
.lm-nav-item {
display: flex; align-items: center; gap: var(--lm-s3);
min-height: var(--lm-tap); padding: 10px var(--lm-s3);
border-radius: var(--lm-radius); color: var(--lm-side-ink);
font-size: 14.5px; text-decoration: none; cursor: pointer;
border: none; background: transparent; width: 100%; text-align: left;
transition: background .12s ease, color .12s ease;
}
.lm-nav-item svg { width: 17px; height: 17px; opacity: .7; flex: 0 0 17px; }
.lm-nav-item:hover { background: rgba(255,255,255,.05); color: var(--lm-side-strong); }
.lm-nav-item.is-active { background: var(--lm-side-active); color: var(--lm-side-strong); box-shadow: inset 2px 0 0 var(--lm-gold-bright); }
.lm-nav-item.is-active svg { opacity: 1; color: var(--lm-gold-light); }
/* Rubrique déroulante (CSS pur, ) */
.lm-collapse { border: none; }
.lm-collapse > summary {
list-style: none; cursor: pointer;
display: flex; align-items: center; gap: var(--lm-s3);
min-height: var(--lm-tap); padding: 10px var(--lm-s3);
border-radius: var(--lm-radius); color: var(--lm-side-ink);
font-size: 14.5px; user-select: none;
}
.lm-collapse > summary::-webkit-details-marker { display: none; }
.lm-collapse > summary:hover { background: rgba(255,255,255,.05); color: var(--lm-side-strong); }
.lm-collapse > summary svg.lm-lead-ico { width: 17px; height: 17px; opacity: .7; flex: 0 0 17px; }
.lm-collapse > summary .lm-chev { margin-left: auto; width: 15px; height: 15px; opacity: .6; transition: transform .18s ease; }
.lm-collapse[open] > summary .lm-chev { transform: rotate(90deg); }
.lm-collapse[open] > summary { color: var(--lm-side-strong); }
.lm-collapse .lm-sub { display: flex; flex-direction: column; gap: 1px; margin: 2px 0 var(--lm-s2); padding-left: 30px; }
.lm-collapse .lm-sub a {
min-height: 40px; display: flex; align-items: center;
padding: 6px var(--lm-s3); border-radius: var(--lm-radius-sm);
color: var(--lm-side-ink-soft); font-size: 14px; text-decoration: none;
border-left: 1px solid var(--lm-side-rule);
}
.lm-collapse .lm-sub a:hover { color: var(--lm-side-strong); border-left-color: var(--lm-gold); }
.lm-collapse .lm-sub a.is-active { color: var(--lm-side-strong); border-left-color: var(--lm-gold-bright); }
/* Pied de sidebar (compte) */
.lm-side-foot { margin-top: auto; padding-top: var(--lm-s4); border-top: 1px solid var(--lm-side-rule);
display: flex; flex-direction: column; gap: 2px; }
.lm-side-foot .lm-u-name { font-family: var(--lm-font-serif); font-weight: 600; font-size: 16px; color: var(--lm-side-strong); }
.lm-side-foot .lm-u-link { font-family: var(--lm-font-mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--lm-side-ink-soft); cursor: pointer; }
/* Voile (scrim) derrière le tiroir mobile */
.lm-scrim { display: none; }
.lm-nav-toggle { position: absolute; opacity: 0; pointer-events: none; }
/* Contenu principal */
.lm-main { min-width: 0; padding: var(--lm-s7) var(--lm-s7) var(--lm-s6); }
.lm-page-head {
display: flex; align-items: flex-end; justify-content: space-between; gap: var(--lm-s5);
padding-bottom: var(--lm-s4); border-bottom: 2px solid var(--lm-rule); margin-bottom: var(--lm-s5);
flex-wrap: wrap;
}
.lm-page-head .lm-date { font-family: var(--lm-font-mono); font-size: 12px; letter-spacing: .14em;
text-transform: uppercase; color: var(--lm-ink-faint); white-space: nowrap; }
/* ---------------------------------------------------------------------------
5. GRILLES
--------------------------------------------------------------------------- */
.lm-grid { display: grid; gap: var(--lm-s4); }
.lm-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.lm-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.lm-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.lm-grid.auto { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
/* ---------------------------------------------------------------------------
6. CARTES / TUILES
--------------------------------------------------------------------------- */
.lm-card {
background: var(--lm-surface); border: 1px solid var(--lm-line-strong);
border-radius: var(--lm-radius); padding: var(--lm-s5);
box-shadow: var(--lm-shadow-sm); position: relative; overflow: hidden;
}
.lm-card.is-flat { box-shadow: none; }
/* Tuile KPI */
.lm-kpi .lm-kpi-top { display: flex; align-items: center; gap: var(--lm-s2); margin-bottom: var(--lm-s4); }
.lm-kpi .lm-kpi-top svg { width: 16px; height: 16px; color: var(--lm-ink-faint); flex: 0 0 16px; }
.lm-kpi .lm-kpi-label { font-family: var(--lm-font-mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--lm-ink-soft); }
.lm-kpi .lm-kpi-sub { font-size: 12.5px; color: var(--lm-ink-faint); margin-top: var(--lm-s3); }
/* Variantes */
.lm-card.accent::before { content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background: var(--lm-gold-foil); }
.lm-card.is-hero { background: linear-gradient(160deg, #FBF6EA, #F4E9CC); border-color: rgba(201,162,39,.4); }
.lm-card.is-dark { background: var(--lm-ink-strong); border-color: var(--lm-ink-strong); }
.lm-card.is-dark .lm-kpi-label { color: rgba(242,233,214,.7); }
.lm-card.is-dark .lm-figure { color: var(--lm-gold-pale); }
.lm-card.is-dark .lm-kpi-sub { color: rgba(242,233,214,.5); }
.lm-card.is-dark .lm-kpi-top svg { color: var(--lm-gold-light); }
.lm-value-pos .lm-figure { color: var(--lm-positive); }
.lm-value-neg .lm-figure { color: var(--lm-negative); }
/* ---------------------------------------------------------------------------
7. BOUTONS (hauteur ≥ 44px = tap mobile)
--------------------------------------------------------------------------- */
.lm-btn {
display: inline-flex; align-items: center; justify-content: center; gap: var(--lm-s2);
min-height: var(--lm-tap); padding: 0 var(--lm-s5);
font-family: var(--lm-font-ui); font-size: 14px; font-weight: 600; letter-spacing: .02em;
border-radius: var(--lm-radius); border: 1px solid transparent; cursor: pointer;
text-decoration: none; white-space: nowrap; transition: filter .12s ease, background .12s ease, border-color .12s ease;
}
.lm-btn svg { width: 17px; height: 17px; }
.lm-btn-primary {
background: var(--lm-gold-foil); color: #2A2008;
box-shadow: inset 0 1px 0 rgba(255,255,255,.45), var(--lm-shadow-sm);
}
.lm-btn-primary:hover { filter: brightness(1.04); }
.lm-btn-secondary { background: transparent; border-color: var(--lm-line-strong); color: var(--lm-ink); }
.lm-btn-secondary:hover { border-color: var(--lm-ink-strong); background: var(--lm-paper-2); }
.lm-btn-dark { background: var(--lm-ink-strong); color: var(--lm-side-strong); }
.lm-btn-dark:hover { filter: brightness(1.15); }
.lm-btn-ghost { background: transparent; color: var(--lm-gold-deep); padding: 0 var(--lm-s2); }
.lm-btn-ghost:hover { color: var(--lm-ink-strong); }
.lm-btn[disabled] { opacity: .45; cursor: not-allowed; }
.lm-btn-sm { min-height: 34px; padding: 0 var(--lm-s3); font-size: 13px; }
/* ---------------------------------------------------------------------------
8. BADGES / PASTILLES D'ÉTAT
--------------------------------------------------------------------------- */
.lm-badge {
display: inline-flex; align-items: center; gap: 6px;
font-family: var(--lm-font-mono); font-size: 10.5px; font-weight: 500;
letter-spacing: .1em; text-transform: uppercase;
padding: 4px 9px; border-radius: var(--lm-radius-sm); border: 1px solid transparent;
}
.lm-badge .lm-pip { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.lm-badge-positive { background: var(--lm-positive-bg); color: var(--lm-positive); border-color: var(--lm-positive-line); }
.lm-badge-negative { background: var(--lm-negative-bg); color: var(--lm-negative); border-color: var(--lm-negative-line); }
.lm-badge-info { background: var(--lm-info-bg); color: var(--lm-info); border-color: var(--lm-info-line); }
.lm-badge-neutral { background: var(--lm-paper-2); color: var(--lm-ink-soft); border-color: var(--lm-line-strong); }
/* Pastilles de pôle (pleines) */
.lm-badge-solid { border: none; color: #fff; }
.lm-badge-vente { background: var(--lm-ink-strong); color: var(--lm-gold-pale); }
.lm-badge-boul { background: #EFE3CB; color: #6B4E2E; }
.lm-badge-snack { background: var(--lm-negative); color: #FBEEE6; }
.lm-badge-trans { background: var(--lm-info); color: #DCE7F2; }
/* ---------------------------------------------------------------------------
9. ALERTE / FILET
--------------------------------------------------------------------------- */
.lm-alert {
display: flex; align-items: center; gap: var(--lm-s3);
background: var(--lm-surface); border: 1px solid var(--lm-line-strong);
border-left: 3px solid var(--lm-negative); border-radius: var(--lm-radius);
padding: var(--lm-s4) var(--lm-s5);
}
.lm-alert.is-info { border-left-color: var(--lm-info); }
.lm-alert.is-ok { border-left-color: var(--lm-positive); }
.lm-alert svg { width: 20px; height: 20px; color: var(--lm-negative); flex: 0 0 20px; }
.lm-alert.is-info svg { color: var(--lm-info); }
.lm-alert.is-ok svg { color: var(--lm-positive); }
.lm-alert .lm-alert-title { font-family: var(--lm-font-serif); font-weight: 600; font-size: 17px; color: var(--lm-ink-strong); }
.lm-alert .lm-alert-sub { font-size: 13px; color: var(--lm-ink-soft); }
/* ---------------------------------------------------------------------------
10. TABLEAU
--------------------------------------------------------------------------- */
.lm-table-wrap { width: 100%; overflow-x: auto; border: 1px solid var(--lm-line-strong); border-radius: var(--lm-radius); }
.lm-table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 520px; }
.lm-table thead th {
text-align: left; background: var(--lm-surface-2);
font-family: var(--lm-font-mono); font-size: 10.5px; font-weight: 500;
letter-spacing: .14em; text-transform: uppercase; color: var(--lm-ink-soft);
padding: var(--lm-s3) var(--lm-s4); border-bottom: 1px solid var(--lm-line-strong);
}
.lm-table tbody td { padding: var(--lm-s3) var(--lm-s4); border-bottom: 1px solid var(--lm-line); color: var(--lm-ink); }
.lm-table tbody tr:last-child td { border-bottom: none; }
.lm-table tbody tr:hover { background: var(--lm-paper-2); }
.lm-table .lm-num { text-align: right; }
/* ===========================================================================
11. RESPONSIVE — breakpoint mobile à 768px
• sidebar → tiroir hamburger par-dessus le contenu
• grilles → une colonne
• pas de débordement horizontal
=========================================================================== */
@media (max-width: 768px) {
.lm-shell { grid-template-columns: 1fr; }
.lm-topbar { display: flex; }
/* La sidebar devient un tiroir glissant hors écran */
.lm-sidebar {
position: fixed; top: 0; left: 0; bottom: 0;
width: min(86vw, 320px); z-index: 40;
transform: translateX(-100%);
transition: transform .26s cubic-bezier(.4,0,.2,1);
box-shadow: var(--lm-shadow-lg);
overflow-y: auto;
}
.lm-nav-toggle:checked ~ .lm-sidebar { transform: translateX(0); }
/* Voile cliquable pour refermer */
.lm-nav-toggle:checked ~ .lm-scrim {
display: block; position: fixed; inset: 0; z-index: 35;
background: rgba(20,16,9,.5); -webkit-backdrop-filter: blur(1px); backdrop-filter: blur(1px);
}
.lm-main { padding: var(--lm-s5) var(--lm-s4) var(--lm-s6); }
.lm-page-head { border-bottom-width: 1px; }
/* Toutes les grilles passent en une colonne */
.lm-grid.cols-2,
.lm-grid.cols-3,
.lm-grid.cols-4,
.lm-grid.auto { grid-template-columns: 1fr; }
}
/* Petits smartphones : on resserre encore */
@media (max-width: 400px) {
.lm-main { padding: var(--lm-s4) var(--lm-s3) var(--lm-s5); }
.lm-card { padding: var(--lm-s4); }
}
/* Confort tablette : 4 colonnes → 2 */
@media (min-width: 769px) and (max-width: 1100px) {
.lm-grid.cols-4 { grid-template-columns: repeat(2, 1fr); }
.lm-grid.cols-3 { grid-template-columns: repeat(2, 1fr); }
}
/* Accessibilité : respect du réglage « animations réduites » */
@media (prefers-reduced-motion: reduce) {
.lm-sidebar, .lm-collapse > summary .lm-chev { transition: none; }
}