/* ═══════════════════════════════════════════════════════════════════ MASKO — Tokens de design Vocabulaire visuel unique de toutes les apps Masko (Salle, Plan, Réserve, Écoute, Radar, Calcul, Studio). Style : Apple-sharp avec touches Masko (sage → mauve utilisés parcimonieusement sur fond blanc cassé). Deux modes : Jour (par défaut) + Soir (auto via prefers-color-scheme ou forcé via [data-theme="dark"] sur ). Source unique de vérité — extraite de : Bureau/4-Modeles-Esthetiques-Masko/15-Design-System-Masko.png (design validé par PQ 2026-07-27). Usage : puis dans ton CSS : .mon-bouton { background: var(--m-mauve); color: var(--m-card); } ═══════════════════════════════════════════════════════════════════ */ :root { /* ─── COULEURS · MODE JOUR ──────────────────────────────────── */ --m-fond: #fafafa; /* Fond principal de la page */ --m-card: #ffffff; /* Fond des cartes */ --m-subcard: #f5f5f7; /* Cartes imbriquées ou zones subtiles */ --m-ink: #1d1d1f; /* Texte principal */ --m-muted: #86868b; /* Texte secondaire */ --m-line: #d2d2d7; /* Séparateurs, bordures fines */ /* Accents identitaires Masko — à utiliser parcimonieusement */ --m-sage: #7FA877; /* Accent 1 · associations positives, vie, calme */ --m-mauve: #5F4585; /* Accent 2 · autorité, valeur, signature */ /* Gradient signature — hero, boutons primaires accentués */ --m-gradient: linear-gradient(135deg, #7FA877 0%, #5F4585 100%); /* Statuts métier — sémantique constante à travers les apps */ --m-statut-table: #34c759; /* Vert Apple · À table (client présent) */ --m-statut-reserve: #ff9500; /* Orange Apple · Réservée à venir */ --m-statut-libre: #86868b; /* Gris muted · Table libre */ --m-danger: #d70015; /* Rouge Apple · Annulation, suppression, alerte */ --m-info: #007aff; /* Bleu Apple · Info neutre, nouveau, lien */ --m-warn: #ff9500; /* Orange Apple · Avertissement (identique à réservé) */ /* ─── TYPOGRAPHIE ──────────────────────────────────────────── */ --m-font: "Segoe UI", -apple-system, "SF Pro Text", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif; /* Échelle typographique (px, à utiliser en font-size direct) */ --m-size-grand-titre: 34px; /* Grand titre — home, splash, dashboard hero */ --m-size-section: 26px; /* Titre de section */ --m-size-carte: 22px; /* Titre de carte */ --m-size-corps: 17px; /* Corps de texte (paragraphes) */ --m-size-standard: 14px; /* Texte standard (UI) */ --m-size-label: 10px; /* Label / catégorie (UPPERCASE + letter-spacing 0.08em) */ /* Graisses (associées aux tailles ci-dessus) */ --m-weight-grand: 900; /* Segoe UI Black */ --m-weight-titre: 700; /* Segoe UI Bold */ --m-weight-corps: 300; /* Segoe UI Semilight */ --m-weight-standard: 400; /* Segoe UI Regular */ --m-weight-label: 700; /* Bold + uppercase */ --m-lh-titre: 1.15; --m-lh-corps: 1.55; /* ─── ESPACEMENTS · SYSTÈME 8 ──────────────────────────────── */ /* Tous les paddings, gaps, marges = multiples de 4 ou 8. Aucune valeur arbitraire. */ --m-space-1: 4px; --m-space-2: 8px; --m-space-3: 16px; --m-space-4: 24px; --m-space-5: 32px; --m-space-6: 48px; --m-space-7: 64px; --m-space-8: 96px; /* ─── RAYONS DE COIN ───────────────────────────────────────── */ --m-radius-pill: 999px; /* Chips, badges */ --m-radius-btn: 12px; /* Boutons primaires et secondaires */ --m-radius-input: 10px; /* Champs de saisie */ --m-radius-card: 16px; /* Cartes petites, modales */ --m-radius-card-lg: 20px; /* Cartes grandes, hero */ /* ─── OMBRES ───────────────────────────────────────────────── */ --m-shadow-card: 0 1px 3px rgba(0, 0, 0, 0.04), 0 4px 12px -4px rgba(95, 69, 133, 0.06); --m-shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.06), 0 12px 32px -8px rgba(95, 69, 133, 0.10); --m-shadow-modal: 0 20px 60px -20px rgba(95, 69, 133, 0.25), 0 8px 24px -8px rgba(0, 0, 0, 0.08); /* ─── TRANSITIONS ──────────────────────────────────────────── */ --m-t-fast: all 0.15s ease; --m-t-med: all 0.25s ease; --m-t-slow: all 0.35s ease; /* ─── STATUTS · TEINTES DE FOND (chips) ────────────────────── */ --m-chip-table-bg: #dcfce7; --m-chip-table-fg: #15803d; --m-chip-reserve-bg: #ede9fe; --m-chip-reserve-fg: #5F4585; --m-chip-libre-bg: #f5f5f7; --m-chip-libre-fg: #86868b; --m-chip-horssrv-bg: #fef3c7; --m-chip-horssrv-fg: #92400e; --m-chip-annule-bg: #fee2e2; --m-chip-annule-fg: #b91c1c; --m-chip-nouveau-bg: #dbeafe; --m-chip-nouveau-fg: #1e40af; } /* ═══════════════════════════════════════════════════════════════════ MODE SOIR — auto si l'OS/navigateur préfère le sombre OU forcé par [data-theme="dark"] sur ═══════════════════════════════════════════════════════════════════ */ @media (prefers-color-scheme: dark) { :root { --m-fond: #1c1a17; --m-card: #252220; --m-subcard: #2c2825; --m-ink: #f2ede4; --m-muted: #a5998a; --m-line: #3a352f; --m-sage: #9ec994; /* Sage lumineux — plus clair pour le contraste */ --m-mauve: #c8b5e0; /* Mauve lumineux — idem */ --m-gradient: linear-gradient(135deg, #9ec994 0%, #c8b5e0 100%); --m-statut-table: #4ade80; --m-statut-reserve: #fbbf24; --m-statut-libre: #a5998a; --m-danger: #ff6b6b; --m-info: #60a5fa; --m-shadow-card: 0 1px 3px rgba(0, 0, 0, 0.4), 0 4px 12px -4px rgba(0, 0, 0, 0.3); --m-shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.5), 0 12px 32px -8px rgba(0, 0, 0, 0.4); --m-shadow-modal: 0 20px 60px -20px rgba(0, 0, 0, 0.6), 0 8px 24px -8px rgba(0, 0, 0, 0.4); --m-chip-table-bg: rgba(74, 222, 128, 0.15); --m-chip-table-fg: #4ade80; --m-chip-reserve-bg: rgba(200, 181, 224, 0.15); --m-chip-reserve-fg: #c8b5e0; --m-chip-libre-bg: rgba(165, 153, 138, 0.15); --m-chip-libre-fg: #a5998a; --m-chip-horssrv-bg: rgba(251, 191, 36, 0.15); --m-chip-horssrv-fg: #fbbf24; --m-chip-annule-bg: rgba(255, 107, 107, 0.15); --m-chip-annule-fg: #ff6b6b; --m-chip-nouveau-bg: rgba(96, 165, 250, 0.15); --m-chip-nouveau-fg: #60a5fa; } } :root[data-theme="dark"] { --m-fond: #1c1a17; --m-card: #252220; --m-subcard: #2c2825; --m-ink: #f2ede4; --m-muted: #a5998a; --m-line: #3a352f; --m-sage: #9ec994; --m-mauve: #c8b5e0; --m-gradient: linear-gradient(135deg, #9ec994 0%, #c8b5e0 100%); --m-statut-table: #4ade80; --m-statut-reserve: #fbbf24; --m-statut-libre: #a5998a; --m-danger: #ff6b6b; --m-info: #60a5fa; } :root[data-theme="light"] { --m-fond: #fafafa; --m-card: #ffffff; --m-subcard: #f5f5f7; --m-ink: #1d1d1f; --m-muted: #86868b; --m-line: #d2d2d7; --m-sage: #7FA877; --m-mauve: #5F4585; --m-gradient: linear-gradient(135deg, #7FA877 0%, #5F4585 100%); } /* ═══════════════════════════════════════════════════════════════════ PRIMITIVES RÉUTILISABLES Utilisables via classes .m-* dans les templates HTML. ═══════════════════════════════════════════════════════════════════ */ /* ─── Boutons ───────────────────────────────────────────────── */ .m-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 20px; border-radius: var(--m-radius-btn); font-family: var(--m-font); font-size: var(--m-size-standard); font-weight: 500; border: none; cursor: pointer; text-decoration: none; transition: var(--m-t-fast); min-height: 40px; } .m-btn-primary { background: var(--m-ink); color: var(--m-card); } .m-btn-primary:hover:not(:disabled) { opacity: 0.85; transform: translateY(-1px); } .m-btn-secondary { background: var(--m-subcard); color: var(--m-ink); border: 1px solid var(--m-line); } .m-btn-secondary:hover:not(:disabled) { background: var(--m-line); } .m-btn-danger { background: rgba(215, 0, 21, 0.1); color: var(--m-danger); } .m-btn-danger:hover:not(:disabled) { background: rgba(215, 0, 21, 0.18); } .m-btn-gradient { background: var(--m-gradient); color: white; box-shadow: 0 2px 8px rgba(95, 69, 133, 0.25); } .m-btn-gradient:hover:not(:disabled) { transform: translateY(-1px); } .m-btn-icon { width: 44px; height: 44px; padding: 0; border-radius: var(--m-radius-btn); background: transparent; color: var(--m-ink); } .m-btn-icon:hover:not(:disabled) { background: var(--m-subcard); } .m-btn:disabled { opacity: 0.4; cursor: not-allowed; } /* ─── Cartes ────────────────────────────────────────────────── */ .m-card { background: var(--m-card); border-radius: var(--m-radius-card); padding: var(--m-space-4); box-shadow: var(--m-shadow-card); border: 1px solid transparent; } .m-card-lg { border-radius: var(--m-radius-card-lg); padding: var(--m-space-5); } .m-card-selected { background: rgba(95, 69, 133, 0.05); border-color: var(--m-mauve); box-shadow: 0 0 0 3px rgba(95, 69, 133, 0.15); } .m-card-sub { background: var(--m-subcard); box-shadow: none; } /* ─── Chips / Badges de statut ──────────────────────────────── */ .m-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: var(--m-radius-pill); font-family: var(--m-font); font-size: 12px; font-weight: 500; line-height: 1; } .m-chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .m-chip-table { background: var(--m-chip-table-bg); color: var(--m-chip-table-fg); } .m-chip-reserve { background: var(--m-chip-reserve-bg); color: var(--m-chip-reserve-fg); } .m-chip-libre { background: var(--m-chip-libre-bg); color: var(--m-chip-libre-fg); } .m-chip-horssrv { background: var(--m-chip-horssrv-bg); color: var(--m-chip-horssrv-fg); } .m-chip-annule { background: var(--m-chip-annule-bg); color: var(--m-chip-annule-fg); } .m-chip-nouveau { background: var(--m-chip-nouveau-bg); color: var(--m-chip-nouveau-fg); } /* ─── Inputs ────────────────────────────────────────────────── */ .m-input, .m-select, .m-textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--m-line); border-radius: var(--m-radius-input); font-family: var(--m-font); font-size: var(--m-size-standard); background: var(--m-card); color: var(--m-ink); transition: var(--m-t-fast); } .m-input:focus, .m-select:focus, .m-textarea:focus { outline: none; border-color: var(--m-mauve); box-shadow: 0 0 0 3px rgba(95, 69, 133, 0.12); } /* ─── Typographie utilitaire ────────────────────────────────── */ .m-h1 { font-size: var(--m-size-grand-titre); font-weight: var(--m-weight-grand); line-height: var(--m-lh-titre); letter-spacing: -0.02em; margin: 0; } .m-h2 { font-size: var(--m-size-section); font-weight: var(--m-weight-titre); line-height: var(--m-lh-titre); letter-spacing: -0.01em; margin: 0; } .m-h3 { font-size: var(--m-size-carte); font-weight: var(--m-weight-titre); line-height: var(--m-lh-titre); margin: 0; } .m-body { font-size: var(--m-size-corps); font-weight: var(--m-weight-corps); line-height: var(--m-lh-corps); } .m-text { font-size: var(--m-size-standard); font-weight: var(--m-weight-standard); line-height: var(--m-lh-corps); } .m-label { font-size: var(--m-size-label); font-weight: var(--m-weight-label); text-transform: uppercase; letter-spacing: 0.08em; color: var(--m-muted); } .m-muted { color: var(--m-muted); } /* ─── Bande signature (identité Masko) ──────────────────────── */ .m-band { height: 3px; background: var(--m-gradient); width: 100%; } .m-band-thick { height: 6px; } /* ─── Toggles ────────────────────────────────────────────────── */ .m-toggle { display: inline-flex; padding: 4px; border-radius: var(--m-radius-pill); background: var(--m-subcard); gap: 2px; } .m-toggle button { padding: 6px 14px; border-radius: var(--m-radius-pill); background: transparent; border: none; cursor: pointer; font-family: var(--m-font); font-size: var(--m-size-standard); color: var(--m-muted); transition: var(--m-t-fast); } .m-toggle button[aria-selected="true"] { background: var(--m-card); color: var(--m-ink); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); } /* ─── Utils flex/grid ─────────────────────────────────────────── */ .m-row { display: flex; align-items: center; gap: var(--m-space-3); } .m-col { display: flex; flex-direction: column; gap: var(--m-space-3); } .m-center { display: flex; align-items: center; justify-content: center; } .m-spread { display: flex; align-items: center; justify-content: space-between; }