/* ===================================================================== danslaminute ui tokens · v1 · 30/07/2026 Light par défaut ; dark via . ===================================================================== */ :root { /* ---- Fonds (neutre chaud) ---- */ --color-bg: #FAF9F7; /* fond de page */ --color-surface: #FFFFFF; /* cartes, tables, drawer */ --color-surface-subtle: #F3F1ED;/* zones secondaires, hover de ligne */ --color-surface-raised: #FFFFFF;/* éléments flottants (menus, toasts) */ /* ---- Bordures ---- */ --color-border: #E7E4DE; --color-border-strong: #D5D1C8; /* inputs, séparateurs appuyés */ /* ---- Texte ---- */ --color-text: #232A33; /* corps : ~13:1 sur --color-bg */ --color-text-secondary: #5B6472;/* ~6.4:1 */ --color-text-muted: #6E7681; /* captions : ~4.6:1, AA */ --color-text-invert: #FFFFFF; /* ---- Primaire (bleu nuit ardoise) ---- */ --color-primary: #31435C; /* boutons pleins, liens : ~9:1 sur blanc */ --color-primary-hover: #24344A; --color-primary-soft: #EAEEF3; /* fond d'élément actif (nav, ligne sélectionnée) */ --color-on-primary: #FFFFFF; --color-link: #31435C; /* ---- Accent (ambre danslaminute, discret) ---- */ --color-accent: #B58A2A; /* décor : filet actif, pastille de marque */ --color-accent-text: #7A5A10; /* ambre utilisable en texte : ~5.5:1 */ --color-accent-soft: #F6EEDA; --color-accent-border: #E2D3A6; /* ---- Sémantiques ---- */ --color-success: #1E7B46; /* ~4.9:1 */ --color-success-soft: #E3F2E9; --color-success-border: #BBDCC8; --color-warning: #A14D00; /* ~5.5:1 */ --color-warning-soft: #FCEEDF; --color-warning-border: #F0D2B4; --color-danger: #B3362B; /* ~5.4:1 */ --color-danger-soft: #FAE9E7; --color-danger-border: #EFC5C0; --color-info: #2F6DAE; /* ~4.9:1 */ --color-info-soft: #E8F0F8; --color-info-border: #C3D8EC; --color-neutral: #5B6472; /* badge "expirée", états inertes */ --color-neutral-soft: #EFEDE9; --color-neutral-border: #D5D1C8; /* ---- Focus ---- */ --color-focus: #31435C; --focus-ring: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-focus); /* ---- Typographie ---- */ --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, "Liberation Mono", monospace; /* ids, numéros, coûts */ --text-h1: 1.5rem; /* 24px */ --lh-h1: 1.3; --weight-h1: 650; --text-h2: 1.25rem; /* 20px */ --lh-h2: 1.35; --weight-h2: 600; --text-h3: 1.0625rem; /* 17px */ --lh-h3: 1.4; --weight-h3: 600; --text-body: 0.9375rem; /* 15px */ --lh-body: 1.55; --text-small: 0.8125rem; /* 13px */ --lh-small: 1.5; --text-caption: 0.75rem; /* 12px */ --lh-caption: 1.4; /* + letter-spacing .02em, souvent uppercase */ --text-stat: 1.75rem; /* 28px */ --lh-stat: 1.2; /* cartes KPI, font-variant-numeric: tabular-nums */ /* ---- Espacements (échelle 4px) ---- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; /* ---- Radius ---- */ --radius-sm: 6px; /* badges, inputs, boutons */ --radius-md: 10px; /* cartes, drawer */ --radius-lg: 14px; /* modales, empty states */ --radius-full: 999px;/* pastilles, avatars */ /* ---- Ombres ---- */ --shadow-sm: 0 1px 2px rgba(35, 42, 51, 0.06); --shadow-md: 0 2px 6px rgba(35, 42, 51, 0.07), 0 8px 24px rgba(35, 42, 51, 0.06); --shadow-lg: 0 12px 40px rgba(20, 25, 31, 0.18); /* drawer, modales */ /* ---- Transitions ---- */ --transition-fast: 120ms ease; /* hover, focus */ --transition-base: 180ms cubic-bezier(.2, .8, .4, 1);/* drawer, sidebar, toasts */ --transition-slow: 260ms cubic-bezier(.2, .8, .4, 1);/* uniquement entrées de page */ /* ---- Dimensions de composants ---- */ --sidebar-width: 232px; --sidebar-width-collapsed: 64px; --topbar-height: 56px; --content-max-width: 1200px; --control-height: 36px; /* inputs, boutons, selects */ --row-height: 44px; /* lignes de table */ --hit-target-min: 40px; /* cible cliquable minimale */ --drawer-width: 480px; --bandeau-height: 40px; /* bandeau « vous consultez l'espace client de » */ /* ---- Identité d'espace ---- L'espace client (/app) est l'espace par défaut : accent bleu (primaire). L'espace admin (/admin, /simulator) est décliné plus bas en ambre via . Consommé par le liseré actif de la sidebar et les boutons primaires. */ --color-espace: var(--color-primary); --color-espace-hover: var(--color-primary-hover); --color-on-espace: var(--color-on-primary); --color-espace-soft: var(--color-primary-soft); } /* --------------------------------------------------------------------- Thème sombre (neutre chaud sombre, pas un noir bleuté) --------------------------------------------------------------------- */ :root[data-theme="dark"] { --color-bg: #171614; --color-surface: #1E1D1A; --color-surface-subtle: #26241F; --color-surface-raised: #2A2823; --color-border: #35322C; --color-border-strong: #45413A; --color-text: #ECEAE3; --color-text-secondary: #B8B3A9; --color-text-muted: #8E897E; --color-text-invert: #171614; --color-primary: #A9C0DC; /* boutons pleins clairs, texte sombre dessus */ --color-primary-hover: #BFD2E8; --color-primary-soft: rgba(169, 192, 220, 0.12); --color-on-primary: #14212F; --color-link: #9FB9D8; --color-accent: #D9B45C; --color-accent-text: #E3C77E; --color-accent-soft: rgba(217, 180, 92, 0.12); --color-accent-border: rgba(217, 180, 92, 0.32); --color-success: #58B97E; --color-success-soft: rgba(88, 185, 126, 0.14); --color-success-border: rgba(88, 185, 126, 0.35); --color-warning: #E0A63F; --color-warning-soft: rgba(224, 166, 63, 0.14); --color-warning-border: rgba(224, 166, 63, 0.35); --color-danger: #E07B6E; --color-danger-soft: rgba(224, 123, 110, 0.14); --color-danger-border: rgba(224, 123, 110, 0.35); --color-info: #6FA5DC; --color-info-soft: rgba(111, 165, 220, 0.14); --color-info-border: rgba(111, 165, 220, 0.35); --color-neutral: #B8B3A9; --color-neutral-soft: rgba(184, 179, 169, 0.12); --color-neutral-border: rgba(184, 179, 169, 0.30); --color-focus: #A9C0DC; --focus-ring: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-focus); /* En sombre, la profondeur vient des bordures plus que des ombres */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35); --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.40); --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.55); } /* --------------------------------------------------------------------- Espace d'administration : accent ambre (les deux thèmes) L'espace client garde le bleu par défaut. La différence est systémique : liseré actif de la sidebar, boutons primaires, liseré haut de la topbar. --------------------------------------------------------------------- */ :root[data-espace="admin"] { --color-espace: #7A5A10; /* ambre profond : ~6.4:1 avec du blanc */ --color-espace-hover: #64490B; --color-on-espace: #FFFFFF; --color-espace-soft: var(--color-accent-soft); } :root[data-theme="dark"][data-espace="admin"] { --color-espace: #D9B45C; /* ambre clair, texte sombre dessus : ~9:1 */ --color-espace-hover: #E3C77E; --color-on-espace: #171614; --color-espace-soft: var(--color-accent-soft); } /* --------------------------------------------------------------------- Bases --------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { background: var(--color-bg); color: var(--color-text); } body { font-family: var(--font-sans); font-size: var(--text-body); line-height: var(--lh-body); } :focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } } h1, h2, h3 { line-height: var(--lh-h3); } a { color: var(--color-link); } img, svg { max-width: 100%; } ul { padding: 0; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .skip-link { position: absolute; left: var(--space-3); top: -48px; z-index: 200; background: var(--color-surface-raised); color: var(--color-text); padding: var(--space-2) var(--space-4); border-radius: var(--radius-sm); box-shadow: var(--shadow-md); transition: top var(--transition-fast); } .skip-link:focus { top: var(--space-3); } .muted { color: var(--color-text-muted); } .mono { font-family: var(--font-mono); font-size: 0.92em; } .tnum { font-variant-numeric: tabular-nums; } .nowrap { white-space: nowrap; } .num { text-align: right; } /* --------------------------------------------------------------------- Coquille : sidebar + topbar + contenu --------------------------------------------------------------------- */ .shell { display: flex; min-height: 100vh; } .sidebar { position: fixed; inset: 0 auto 0 0; z-index: 50; width: var(--sidebar-width); background: var(--color-surface); border-right: 1px solid var(--color-border); padding: var(--space-4) var(--space-2); display: flex; flex-direction: column; gap: var(--space-4); transition: width var(--transition-base); } .sidebar__logo { display: flex; align-items: flex-start; gap: var(--space-2); padding: 0 var(--space-3); min-height: var(--hit-target-min); } .sidebar__logo .logo-dot { margin-top: 5px; } /* aligné sur la première ligne */ .sidebar__brand { font-weight: 650; letter-spacing: .01em; } .logo-dot { width: 10px; height: 10px; flex: none; border-radius: var(--radius-full); background: var(--color-accent); } /* Côté client, la pastille prend la couleur de l'espace (bleu), pas la marque. */ :root[data-espace="client"] .sidebar .logo-dot { background: var(--color-espace); } /* En-tête de sidebar : identité de l'espace. Client : le nom du professionnel en titre, « Propulsé par Dans la minute » en signature. Admin : la marque Dans la minute et le badge « Console d'administration ». */ .sidebar__identite { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .sidebar__pro-nom { font-weight: 650; letter-spacing: .01em; line-height: 1.3; overflow-wrap: anywhere; } .sidebar__produit { font-size: var(--text-caption); line-height: var(--lh-caption); color: var(--color-text-muted); letter-spacing: .01em; } .sidebar__espace-badge { width: max-content; margin-top: 2px; padding: 1px 8px; border: 1px solid var(--color-accent-border); border-radius: var(--radius-full); background: var(--color-accent-soft); color: var(--color-accent-text); font-size: var(--text-caption); font-weight: 600; line-height: var(--lh-caption); } .nav { list-style: none; display: flex; flex-direction: column; gap: 2px; } .nav__sep { height: 1px; margin: var(--space-3) var(--space-2); background: var(--color-border); } .nav-item { display: flex; align-items: center; gap: var(--space-3); min-height: var(--hit-target-min); padding: 0 var(--space-3); border-left: 2px solid transparent; border-radius: var(--radius-sm); color: var(--color-text-secondary); font-size: var(--text-small); text-decoration: none; transition: background var(--transition-fast), color var(--transition-fast); } .nav-item:hover { background: var(--color-surface-subtle); color: var(--color-text); } .nav-item.active { background: var(--color-espace-soft); color: var(--color-text); border-left-color: var(--color-espace); font-weight: 600; } .nav-icon { flex: none; } .nav-badge { margin-left: auto; min-width: 20px; padding: 1px 6px; border-radius: var(--radius-full); background: var(--color-warning-soft); border: 1px solid var(--color-warning-border); color: var(--color-warning); font-size: var(--text-caption); font-weight: 650; text-align: center; font-variant-numeric: tabular-nums; } .shell__main { flex: 1; margin-left: var(--sidebar-width); display: flex; flex-direction: column; min-height: 100vh; transition: margin-left var(--transition-base); } .topbar { position: sticky; top: 0; z-index: 40; height: var(--topbar-height); display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: 0 var(--space-6); background: var(--color-bg); border-bottom: 1px solid var(--color-border); } /* Fin liseré ambre en haut de la topbar admin : l'espace se lit d'un coup d'œil. */ :root[data-espace="admin"] .topbar { box-shadow: inset 0 2px 0 var(--color-accent); } /* Bandeau « en tant que » : un admin consulte l'espace d'un client. Ambre (le signal admin) même dans l'espace client, opaque car sticky. */ .bandeau-consultation { position: sticky; top: 0; z-index: 45; height: var(--bandeau-height); display: flex; align-items: center; justify-content: center; gap: var(--space-3); padding: 0 var(--space-4); background: linear-gradient(var(--color-accent-soft), var(--color-accent-soft)) var(--color-bg); border-bottom: 1px solid var(--color-accent-border); color: var(--color-accent-text); font-size: var(--text-small); font-weight: 600; } .bandeau-consultation__nom { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bandeau-consultation__lien { color: inherit; text-decoration: underline; white-space: nowrap; } .bandeau-consultation + .topbar { top: var(--bandeau-height); } .topbar__title h1 { font-size: var(--text-h2); font-weight: var(--weight-h2); } .topbar__actions { display: flex; align-items: center; gap: var(--space-3); } .topbar__user { color: var(--color-text-secondary); font-size: var(--text-small); } /* Le nom de l'administrateur mène à « Mon compte » : discret au repos, souligné au survol, pour qu'il se signale comme cliquable sans peser dans la topbar. */ .topbar__user--lien { text-decoration: none; border-bottom: 1px solid transparent; } .topbar__user--lien:hover, .topbar__user--lien:focus-visible { color: var(--color-text); border-bottom-color: currentColor; } .topbar__select .input { max-width: 220px; } .topbar__logout { display: flex; } .icon-btn { display: inline-flex; align-items: center; justify-content: center; width: var(--hit-target-min); height: var(--hit-target-min); border: 1px solid transparent; border-radius: var(--radius-sm); background: transparent; color: var(--color-text-secondary); cursor: pointer; transition: background var(--transition-fast); } .icon-btn:hover { background: var(--color-surface-subtle); color: var(--color-text); } :root[data-theme="light"] .theme-sun { display: none; } :root[data-theme="dark"] .theme-moon { display: none; } .content { width: 100%; max-width: var(--content-max-width); margin: 0 auto; padding: var(--space-6); flex: 1; } /* --------------------------------------------------------------------- Titres de section, sous-titres, liens de retour --------------------------------------------------------------------- */ .page-subtitle { color: var(--color-text-secondary); font-size: var(--text-small); margin-bottom: var(--space-4); } .section { margin-top: var(--space-8); } .section--first { margin-top: 0; } .section[id] { scroll-margin-top: calc(var(--topbar-height) + var(--space-3)); } /* ancres sous la topbar sticky */ .section-title { font-size: var(--text-h3); font-weight: var(--weight-h3); margin-bottom: var(--space-3); } .section-link { margin-top: var(--space-2); font-size: var(--text-small); } .back-link { display: inline-block; margin-bottom: var(--space-3); color: var(--color-text-secondary); font-size: var(--text-small); text-decoration: none; } .back-link:hover { color: var(--color-text); } .page-head { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); } .page-head__title { font-size: var(--text-h1); font-weight: var(--weight-h1); } /* --------------------------------------------------------------------- Cards de stats --------------------------------------------------------------------- */ .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); margin-bottom: var(--space-4); } .stat-card { display: flex; flex-direction: column; gap: var(--space-1); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-4); box-shadow: var(--shadow-sm); color: inherit; text-decoration: none; transition: border-color var(--transition-fast), box-shadow var(--transition-fast); } a.stat-card:hover { border-color: var(--color-border-strong); box-shadow: var(--shadow-md); } .stat-card__label { font-size: var(--text-caption); letter-spacing: .02em; text-transform: uppercase; color: var(--color-text-muted); font-weight: 600; } .stat-card__value { font-size: var(--text-stat); line-height: var(--lh-stat); font-weight: 650; font-variant-numeric: tabular-nums; } .stat-card__note { font-size: var(--text-caption); color: var(--color-text-secondary); } /* --------------------------------------------------------------------- Panels et listes de cards --------------------------------------------------------------------- */ .panel { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-4); box-shadow: var(--shadow-sm); } .panel--flush { padding: 0; overflow: hidden; } .panel__title { font-size: var(--text-small); font-weight: 650; margin-bottom: var(--space-3); } .cards { display: flex; flex-direction: column; gap: var(--space-3); } .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); } .liste-simple { list-style: none; display: flex; flex-direction: column; gap: var(--space-1); font-size: var(--text-small); } /* --------------------------------------------------------------------- Tables denses --------------------------------------------------------------------- */ .table { width: 100%; border-collapse: collapse; font-size: var(--text-small); } .table th { text-align: left; font-size: var(--text-caption); letter-spacing: .02em; text-transform: uppercase; color: var(--color-text-muted); font-weight: 600; padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--color-border); background: var(--color-surface-subtle); } .table th.num { text-align: right; } .table td { height: var(--row-height); padding: var(--space-1) var(--space-3); border-bottom: 1px solid var(--color-border); vertical-align: middle; } .table tbody tr:last-child td { border-bottom: none; } .table tfoot td { border-top: 1px solid var(--color-border-strong); border-bottom: none; background: var(--color-surface-subtle); } tr[data-href] { cursor: pointer; } tr[data-href]:hover td { background: var(--color-surface-subtle); transition: background var(--transition-fast); } .row-link { color: inherit; text-decoration: none; font-weight: 600; } .row-link:hover { text-decoration: underline; } /* --------------------------------------------------------------------- Badges d'état (pastille + libellé, jamais la couleur seule) --------------------------------------------------------------------- */ .badge { display: inline-flex; align-items: center; gap: 6px; padding: 2px var(--space-2); border-radius: var(--radius-full); border: 1px solid; font-size: var(--text-caption); font-weight: 600; line-height: var(--lh-caption); white-space: nowrap; } .badge__dot { width: 6px; height: 6px; flex: none; border-radius: 50%; background: currentColor; } .badge--warning { color: var(--color-warning); background: var(--color-warning-soft); border-color: var(--color-warning-border); } .badge--info { color: var(--color-info); background: var(--color-info-soft); border-color: var(--color-info-border); } .badge--success { color: var(--color-success); background: var(--color-success-soft); border-color: var(--color-success-border); } .badge--danger { color: var(--color-danger); background: var(--color-danger-soft); border-color: var(--color-danger-border); } .badge--neutral { color: var(--color-neutral); background: var(--color-neutral-soft); border-color: var(--color-neutral-border); } .badge--accent { color: var(--color-accent-text); background: var(--color-accent-soft); border-color: var(--color-accent-border); } .badge--outline { background: var(--color-surface); border-color: currentColor; } /* --------------------------------------------------------------------- Boutons --------------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); height: var(--control-height); padding: 0 var(--space-4); border: 1px solid transparent; border-radius: var(--radius-sm); font-family: inherit; font-size: var(--text-small); font-weight: 600; text-decoration: none; cursor: pointer; white-space: nowrap; transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast); } .btn--primary { background: var(--color-espace); color: var(--color-on-espace); } .btn--primary:hover { background: var(--color-espace-hover); } .btn--secondary { background: var(--color-surface); border-color: var(--color-border-strong); color: var(--color-text); } .btn--secondary:hover { background: var(--color-surface-subtle); } .btn--ghost { background: transparent; color: var(--color-text-secondary); } .btn--ghost:hover { background: var(--color-surface-subtle); color: var(--color-text); } .btn--danger { background: var(--color-surface); border-color: var(--color-danger-border); color: var(--color-danger); } .btn--danger:hover { background: var(--color-danger-soft); } .btn--block { width: 100%; } .btn:disabled { opacity: .55; cursor: not-allowed; } .link-btn { background: none; border: none; padding: 0; font: inherit; font-size: var(--text-caption); color: var(--color-link); text-decoration: underline; cursor: pointer; } /* --------------------------------------------------------------------- Formulaires --------------------------------------------------------------------- */ .input, select.input, textarea.input { width: 100%; height: var(--control-height); padding: 0 var(--space-3); border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-text); font-family: inherit; font-size: var(--text-small); transition: border-color var(--transition-fast); } textarea.input { height: auto; padding: var(--space-2) var(--space-3); resize: vertical; line-height: var(--lh-small); } .input:focus-visible { border-color: var(--color-focus); } .input--mono { font-family: var(--font-mono); font-size: var(--text-caption); } select.input { width: auto; min-width: 160px; } .field { display: flex; flex-direction: column; gap: var(--space-1); } .field__label { font-size: var(--text-small); font-weight: 600; color: var(--color-text-secondary); } .field__label--row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); } .field .input { width: 100%; } .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); } .form-grid__full { grid-column: 1 / -1; } .form-stack { display: flex; flex-direction: column; gap: var(--space-4); } .form-actions { display: flex; gap: var(--space-3); } .form-fieldset { border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: var(--space-4); } .form-fieldset legend { padding: 0 var(--space-2); font-size: var(--text-caption); font-weight: 600; letter-spacing: .02em; text-transform: uppercase; color: var(--color-text-muted); } .form-error { padding: var(--space-2) var(--space-3); border: 1px solid var(--color-danger-border); border-radius: var(--radius-sm); background: var(--color-danger-soft); color: var(--color-danger); font-size: var(--text-small); } .filters { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-4); } .details-panel summary { list-style: none; width: max-content; } .details-panel summary::-webkit-details-marker { display: none; } .details-panel summary::marker { content: ""; } .details-panel { margin-bottom: var(--space-4); } .details-panel > .panel { margin-top: var(--space-3); } .details-panel--inline { margin-bottom: 0; position: relative; } .details-panel--inline > .panel { position: absolute; z-index: 60; min-width: 420px; box-shadow: var(--shadow-lg); } /* --------------------------------------------------------------------- États vides --------------------------------------------------------------------- */ .empty-state { display: flex; flex-direction: column; align-items: center; gap: var(--space-4); padding: var(--space-10) var(--space-6); border: 1px dashed var(--color-border-strong); border-radius: var(--radius-lg); color: var(--color-text-secondary); font-size: var(--text-small); text-align: center; } /* --------------------------------------------------------------------- Fil de messages type WhatsApp --------------------------------------------------------------------- */ .thread { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); overflow-y: auto; } .thread-empty { margin: auto; padding: var(--space-6); color: var(--color-text-muted); font-size: var(--text-small); text-align: center; } .msg { max-width: 78%; display: flex; flex-direction: column; gap: 2px; } .msg--out { align-self: flex-start; align-items: flex-start; } /* l'assistant */ .msg--in { align-self: flex-end; align-items: flex-end; } /* le contact */ .msg__bubble { padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); font-size: var(--text-small); line-height: var(--lh-small); white-space: pre-line; overflow-wrap: anywhere; } .msg--out .msg__bubble { background: var(--color-surface-subtle); border: 1px solid var(--color-border); border-bottom-left-radius: 4px; /* la queue */ } .msg--in .msg__bubble { background: var(--color-primary-soft); border: 1px solid var(--color-border); border-bottom-right-radius: 4px; } .msg__meta { font-size: var(--text-caption); color: var(--color-text-muted); padding: 0 2px; } /* Détail de conversation : fil + panneau de contexte */ .conv-header { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-3); margin-bottom: var(--space-2); } .conv-header__identite { display: flex; align-items: baseline; gap: var(--space-3); } .conv-header__identite h2 { font-size: var(--text-h2); font-weight: var(--weight-h2); } .conv-header__badges { display: flex; flex-wrap: wrap; gap: var(--space-2); } .conv-client { font-size: var(--text-small); margin-bottom: var(--space-4); } .conv-grid { display: grid; grid-template-columns: 1fr 340px; gap: var(--space-4); align-items: start; } .conv-thread { display: flex; flex-direction: column; } .conv-thread .thread { max-height: 62vh; } .conv-footnote { padding: var(--space-2) var(--space-4); border-top: 1px solid var(--color-border); color: var(--color-text-muted); font-size: var(--text-caption); } .conv-context { display: flex; flex-direction: column; gap: var(--space-3); } .kv { display: grid; grid-template-columns: auto 1fr; gap: var(--space-1) var(--space-4); font-size: var(--text-small); } .kv dt { color: var(--color-text-muted); } .kv dd { overflow-wrap: anywhere; } .action-list { list-style: none; display: flex; flex-direction: column; gap: var(--space-2); font-size: var(--text-small); } .action-list li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); } /* --------------------------------------------------------------------- Cartes de validation (le « oui » explicite) --------------------------------------------------------------------- */ .validation-card { display: flex; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; } .validation-card__main { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); font-size: var(--text-small); } .validation-card__spec { display: flex; flex-wrap: wrap; gap: var(--space-3); width: 100%; font-size: var(--text-caption); } .validation-card__meta { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; font-size: var(--text-caption); } .validation-card__boutons { display: flex; gap: var(--space-2); } .validation-card__boutons form { display: inline-flex; } /* Variante espace client : le geste central du produit, aéré, spec en évidence, boutons OUI/NON confortables (cibles tactiles >= 44 px). */ .validation-card--large { padding: var(--space-5) var(--space-6); gap: var(--space-4); } .validation-card--large .validation-card__main { font-size: var(--text-body); row-gap: var(--space-2); } .validation-card--large .validation-card__spec { font-size: var(--text-body); color: var(--color-text); margin-top: var(--space-1); padding-left: var(--space-3); border-left: 2px solid var(--color-espace); } .validation-card--large .validation-card__meta { font-size: var(--text-small); gap: var(--space-4); } .validation-card--large .validation-card__boutons { gap: var(--space-3); } .btn--validation { height: 48px; min-width: 104px; padding: 0 var(--space-6); font-size: var(--text-body); font-weight: 650; } .rappel-card { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); font-size: var(--text-small); } .recap-card { display: flex; flex-direction: column; gap: var(--space-2); } .recap-card__contenu { white-space: pre-line; font-size: var(--text-small); } /* --------------------------------------------------------------------- Mise en route (fiche client) et invitation à la démo (tableau de bord) --------------------------------------------------------------------- */ .checklist { list-style: none; display: flex; flex-direction: column; gap: var(--space-3); } .checklist__item { display: flex; align-items: flex-start; gap: var(--space-3); } .checklist__item .badge { flex: none; margin-top: 1px; } .checklist__texte { display: flex; flex-direction: column; gap: 2px; font-size: var(--text-small); } .demo-card { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-4); border-left: 2px solid var(--color-accent); /* filet ambre : la marque, pas un état */ } .demo-card__texte { display: flex; flex-direction: column; gap: var(--space-1); max-width: 60ch; } .demo-card__texte .section-title { margin-bottom: 0; } .demo-card__texte p { color: var(--color-text-secondary); font-size: var(--text-small); } /* --------------------------------------------------------------------- Simulateur double-fil --------------------------------------------------------------------- */ .sim-toolbar { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--space-3); margin-bottom: var(--space-4); } .sim-toolbar__select .input { min-width: 200px; } .sim-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); } .sim-panel { display: flex; flex-direction: column; min-height: 440px; max-height: 64vh; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); overflow: hidden; } .sim-panel__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-border); background: var(--color-surface-subtle); } .sim-panel__title { font-size: var(--text-small); font-weight: 650; } .sim-panel .thread { flex: 1; } .sim-panel__input { display: flex; gap: var(--space-2); padding: var(--space-3); border-top: 1px solid var(--color-border); } .sim-panel__input .input { flex: 1; } .sim-note { margin-top: var(--space-4); font-size: var(--text-caption); } .sim-lead-form { min-width: 420px; } /* --------------------------------------------------------------------- Toasts --------------------------------------------------------------------- */ .toasts { position: fixed; right: var(--space-4); bottom: var(--space-4); z-index: 150; display: flex; flex-direction: column; gap: var(--space-2); max-width: 380px; } .toast { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); background: var(--color-surface-raised); border: 1px solid var(--color-border); border-left-width: 3px; border-radius: var(--radius-sm); box-shadow: var(--shadow-md); font-size: var(--text-small); animation: toast-in var(--transition-base); } .toast--success { border-left-color: var(--color-success); } .toast--error { border-left-color: var(--color-danger); } .toast--hide { opacity: 0; transition: opacity var(--transition-base); } .toast__close { margin-left: auto; background: none; border: none; cursor: pointer; color: var(--color-text-muted); font-size: 1rem; line-height: 1; padding: var(--space-1); } @keyframes toast-in { from { transform: translateY(8px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } /* --------------------------------------------------------------------- Pagination --------------------------------------------------------------------- */ .pagination { display: flex; align-items: center; justify-content: center; gap: var(--space-4); margin-top: var(--space-4); font-size: var(--text-small); } /* --------------------------------------------------------------------- Connexion --------------------------------------------------------------------- */ .login-page { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-6); padding: var(--space-4); } .login-brand { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-h2); font-weight: 650; } .login-card { width: 100%; max-width: 380px; display: flex; flex-direction: column; gap: var(--space-4); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-8); box-shadow: var(--shadow-md); } .login-card__title { font-size: var(--text-h2); font-weight: var(--weight-h2); } .login-card__subtitle { color: var(--color-text-secondary); font-size: var(--text-small); margin-top: var(--space-1); } .login-baseline { color: var(--color-text-muted); font-size: var(--text-caption); text-align: center; } /* --------------------------------------------------------------------- Configuration de l'assistant : sections repliables et aide contextuelle --------------------------------------------------------------------- */ .config-form { display: flex; flex-direction: column; gap: var(--space-3); } .config-section { border-radius: var(--radius-lg); } .config-section__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2) var(--space-3); padding: var(--space-3) var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); cursor: pointer; list-style: none; } .config-section__head::-webkit-details-marker { display: none; } .config-section__head::marker { content: ""; } .config-section__head:hover { background: var(--color-surface-subtle); } .config-section__head::before { content: "\203A"; /* chevron : fermé à droite, ouvert en bas */ display: inline-block; color: var(--color-text-muted); transition: transform var(--transition-base); } .config-section[open] > .config-section__head::before { transform: rotate(90deg); } .config-section[open] > .config-section__head { border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .config-section__titre { font-size: var(--text-small); font-weight: 650; } .config-section__aide { color: var(--color-text-secondary); font-size: var(--text-caption); } .config-section > .panel { border-top-left-radius: 0; border-top-right-radius: 0; border-top: none; } .field__aide { color: var(--color-text-muted); font-size: var(--text-caption); } .field--court { max-width: 320px; } .check { display: flex; align-items: flex-start; gap: var(--space-2); font-size: var(--text-small); } .check input { margin-top: 3px; flex: none; } .check__texte { display: flex; flex-direction: column; gap: 2px; } .cases { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); } .curseur { display: flex; align-items: center; gap: var(--space-3); } .curseur__input { flex: 1; max-width: 320px; } .curseur__valeur { min-width: 3ch; font-size: var(--text-small); } .faq-liste { display: flex; flex-direction: column; gap: var(--space-3); } .faq-ligne { display: grid; grid-template-columns: 1fr 1fr auto; gap: var(--space-2); align-items: start; } .faq-ligne__retirer { align-self: start; } .categories { display: flex; flex-direction: column; gap: var(--space-2); } .categories__ligne { display: grid; grid-template-columns: 1fr 320px; gap: var(--space-3); align-items: center; font-size: var(--text-small); } .categories__nom { color: var(--color-text-secondary); } .question-ligne { display: grid; grid-template-columns: 200px 1fr; gap: var(--space-3); align-items: center; } /* La règle du « oui » explicite s'affiche, elle ne se règle pas. */ .regle-figee { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-4); border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); background: var(--color-surface-subtle); color: var(--color-text-secondary); font-size: var(--text-small); } .regle-figee__badge { flex: none; padding: 2px var(--space-2); border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); font-size: var(--text-caption); text-transform: uppercase; letter-spacing: .04em; } .regle-figee strong { color: var(--color-text); } .panel--alerte { border-color: var(--color-warning-border); background: var(--color-warning-soft); } .panel--apercu { border-color: var(--color-info-border); } .panel--apercu .thread { padding: var(--space-3) 0 0; } .config-actions { position: sticky; bottom: 0; z-index: 20; display: flex; flex-wrap: wrap; gap: var(--space-3); padding: var(--space-3) var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); box-shadow: var(--shadow-md); } /* --------------------------------------------------------------------- Responsive : sidebar repliée sous 900 px --------------------------------------------------------------------- */ @media (max-width: 900px) { .sidebar { width: var(--sidebar-width-collapsed); padding: var(--space-4) var(--space-1); } .sidebar__label { display: none; } .sidebar__logo { justify-content: center; align-items: center; padding: 0; } .sidebar__logo .logo-dot { margin-top: 0; } .sidebar__identite { display: none; } .nav-item { justify-content: center; padding: 0; gap: 0; } .nav-badge { position: absolute; transform: translate(12px, -10px); margin-left: 0; } .nav-item { position: relative; } .shell__main { margin-left: var(--sidebar-width-collapsed); } .topbar { padding: 0 var(--space-4); } .topbar__user { display: none; } .content { padding: var(--space-4); } .stats { grid-template-columns: 1fr 1fr; } .grid-2 { grid-template-columns: 1fr; } .conv-grid { grid-template-columns: 1fr; } .sim-grid { grid-template-columns: 1fr; } .form-grid { grid-template-columns: 1fr; } .sim-lead-form { min-width: 0; width: calc(100vw - 120px); } .details-panel--inline > .panel { position: static; box-shadow: var(--shadow-sm); } .table .muted { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } } /* ------------------------------------------------------------------ */ /* Téléphone (≤ 700 px) : la sidebar devient une barre de navigation */ /* en bas d'écran (pattern app mobile), le contenu reprend toute la */ /* largeur. Corrige le débordement horizontal constaté en QA mobile. */ /* ------------------------------------------------------------------ */ @media (max-width: 700px) { .sidebar { inset: auto 0 0 0; width: 100%; height: 60px; flex-direction: row; align-items: center; gap: 0; padding: 0 var(--space-2); border-right: none; border-top: 1px solid var(--color-border); } .sidebar__logo { display: none; } .sidebar .nav { display: flex; flex-direction: row; flex: 1; justify-content: space-around; align-items: center; gap: 0; margin: 0; } .sidebar .nav li { list-style: none; } .nav-item { justify-content: center; padding: var(--space-2); min-height: var(--hit-target-min); } .nav-badge { position: absolute; transform: translate(10px, -12px); } .shell__main { margin-left: 0; padding-bottom: 72px; } .topbar { flex-wrap: wrap; row-gap: 0; padding: 0 var(--space-3); } .conv-header__badges { flex-wrap: wrap; } .msg { max-width: 92%; } .msg__bubble { overflow-wrap: anywhere; } .content { padding: var(--space-3); } /* Le OUI/NON reste confortable au pouce : boutons pleine largeur. */ .validation-card--large .validation-card__meta, .validation-card--large .validation-card__boutons { width: 100%; } .validation-card--large .validation-card__boutons form { flex: 1; } .validation-card--large .btn--validation { width: 100%; } /* Configuration : les grilles à deux ou trois colonnes s'empilent. */ .faq-ligne, .categories__ligne, .question-ligne { grid-template-columns: 1fr; } .config-actions { position: static; box-shadow: none; } }