/* ============================================= BUVETTE.CSS — Layout application buvette (post-connexion) Mobile/tablette : navbar bas Desktop (≥1024px) : sidebar droite + topbar ============================================= */ /* === Layout racine === */ /* * Sur iOS PWA, la zone du home indicator (sous le viewport CSS) affiche * le fond de l'élément . On le cale sur --clr-surface pour qu'il * soit invisible sous la nav-bottom (même couleur). */ html { background: var(--clr-surface); } .app-layout { height: 100dvh; display: flex; flex-direction: column; overflow: hidden; } /* En mode PWA standalone, 100dvh démarre à la "small viewport" (sans home indicator). 100lvh = large viewport = plein écran dès le premier rendu, sans attendre le scroll. body overflow:hidden en fait le containing block pour les position:fixed, ancré à la hauteur physique complète de l'écran. */ @media (display-mode: standalone) { body { height: 100lvh; overflow: hidden; } .app-layout { height: 100lvh; } } .app-content { flex: 1; min-height: 0; overflow-y: auto; padding: var(--sp-2); padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom) + var(--sp-6)); max-width: var(--page-max); width: 100%; margin-inline: auto; view-transition-name: app-content; } /* ── View Transitions — navigation Turbo ── */ ::view-transition-old(root), ::view-transition-new(root) { animation: none; } @keyframes vt-slide-out { 0% { transform: translateX(0); opacity: 1; } 100% { transform: translateX(-120px); opacity: 0; } } @keyframes vt-slide-in { from { transform: translateX(100px); opacity: 0; } to { transform: translateX(0); opacity: 1; } } ::view-transition-old(app-content) { animation: vt-slide-out 220ms ease-in-out both; } ::view-transition-new(app-content) { animation: vt-slide-in 200ms ease-out 100ms both; } @media (prefers-reduced-motion: reduce) { ::view-transition-old(app-content), ::view-transition-new(app-content) { animation: none; } } /* === Topbar — visible sur tous les breakpoints === */ .topbar { view-transition-name: topbar; display: flex; align-items: center; position: fixed; top: 0; left: 0; right: 0; height: calc(var(--topbar-h) + env(safe-area-inset-top)); padding: env(safe-area-inset-top) var(--sp-6) 0; background: var(--clr-surface); border-bottom: 1px solid var(--clr-border); gap: var(--sp-4); z-index: 90; } .topbar-title { font-weight: 600; font-size: var(--text-lg); flex: 1; display: flex; align-items: center; gap: var(--sp-2); } .topbar-logo { width: 32px; height: 32px; object-fit: contain; border-radius: 4px; flex-shrink: 0; } .topbar-actions { display: flex; align-items: center; gap: var(--sp-3); } /* === Nav basse (mobile / tablette) === */ /* Wrapper Alpine du profil — aligne le bouton avec les autres items */ .nav-bottom > div { flex: 1; display: flex; } .nav-bottom { view-transition-name: nav-bottom; position: fixed; bottom: 0; left: 0; right: 0; height: calc(var(--nav-h) + env(safe-area-inset-bottom)); background: var(--clr-surface); border-top: 1px solid var(--clr-border); display: flex; align-items: flex-start; z-index: 100; padding-bottom: env(safe-area-inset-bottom); } .nav-bottom .nav-item { flex: 1; height: var(--nav-h); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: var(--sp-2) 0; color: var(--clr-text-muted); font-size: var(--text-xs); transition: color .15s; cursor: pointer; touch-action: manipulation; } .nav-bottom .nav-item:hover, .nav-bottom .nav-item.active { color: var(--clr-accent); } .nav-icon { width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .app-layout { padding-top: calc(var(--topbar-h) + env(safe-area-inset-top)); } .demo-banner { flex-shrink: 0; background: #d97706; color: #fff; text-align: center; padding: var(--sp-2) var(--sp-4); font-size: var(--text-sm); font-weight: 600; letter-spacing: .01em; } /* === Sidebar — masquée sur mobile === */ .nav-sidebar { display: none; } /* ============================================= DESKTOP ≥ 1024px ============================================= */ @media (min-width: 1024px) { .app-layout { padding-right: var(--sidebar-w); } /* Topbar */ .topbar { right: var(--sidebar-w); } /* Sidebar droite */ .nav-sidebar { display: flex; flex-direction: column; position: fixed; top: 0; right: 0; bottom: 0; width: var(--sidebar-w); background: var(--clr-surface); border-left: 1px solid var(--clr-border); z-index: 100; padding: var(--sp-3) 0; } .sidebar-logo { padding: 0 var(--sp-6) var(--sp-3); margin-bottom: var(--sp-4); font-weight: 700; font-size: var(--text-xl); letter-spacing: .06em; display: flex; align-items: center; gap: var(--sp-2); } .sidebar-logo__img { width: 44px; height: 44px; object-fit: contain; border-radius: var(--radius-sm); } .sidebar-links { flex: 1; display: flex; flex-direction: column; padding: 0 var(--sp-3); gap: 2px; overflow-y: auto; } .nav-sidebar .nav-item { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3); border-radius: var(--radius-sm); color: var(--clr-text-muted); font-size: var(--text-sm); font-weight: 500; transition: background .15s, color .15s; } .nav-sidebar .nav-item:hover { background: var(--clr-surface-2); color: var(--clr-text); } .nav-sidebar .nav-item.active { background: var(--clr-surface-2); color: var(--clr-accent); } .nav-sidebar .nav-icon { width: 18px; height: 18px; } /* Section toggles (bouton collapsible) */ button.nav-item { width: 100%; background: none; border: none; cursor: pointer; text-align: left; } .nav-chevron { margin-left: auto; flex-shrink: 0; transition: transform .2s; } .nav-chevron.open { transform: rotate(180deg); } /* Sous-items indentés */ .nav-sub { display: flex; flex-direction: column; padding-left: calc(var(--sp-3) + 18px + var(--sp-3)); gap: 2px; margin-top: 2px; margin-bottom: var(--sp-1); } .nav-sub .nav-item { font-size: var(--text-xs); padding: var(--sp-2) var(--sp-3); } /* Sous-items de second niveau (ex: sections stats dans Administration) */ .nav-sub--nested { padding-left: var(--sp-3); border-left: 1px solid var(--clr-border); margin-left: var(--sp-2); margin-top: 2px; margin-bottom: var(--sp-1); } .sidebar-footer { padding: var(--sp-4) var(--sp-3) 0; border-top: 1px solid var(--clr-border); margin-top: auto; } /* Masquer la nav basse */ .nav-bottom { display: none; } .app-content { padding-bottom: var(--sp-6); } /* Utilisateur en pied de sidebar */ .sidebar-user { display: flex; align-items: center; gap: var(--sp-3); padding: 0 var(--sp-3) var(--sp-3); } .sidebar-user-avatar { width: 34px; height: 34px; border-radius: var(--radius-sm); background: var(--clr-accent); color: #fff; font-size: var(--text-xs); font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; letter-spacing: .04em; } .sidebar-user-info { display: flex; flex-direction: column; overflow: hidden; } .sidebar-user-name { font-size: var(--text-sm); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sidebar-user-role { font-size: var(--text-xs); color: var(--clr-text-muted); } } /* ============================================= Avatar nav mobile ============================================= */ .nav-avatar { width: 26px; height: 26px; border-radius: var(--radius-sm); background: var(--clr-accent); color: #fff; font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center; letter-spacing: .04em; } /* ============================================= Profile sheet — mobile (Alpine overlay) ============================================= */ [x-cloak] { display: none !important; } .profile-sheet-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, .5); z-index: 200; display: flex; align-items: flex-end; padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom)); } .profile-sheet { background: var(--clr-surface); border: 1px solid var(--clr-border); border-radius: var(--radius-lg) var(--radius-lg) 0 0; width: 100%; padding: var(--sp-6); box-shadow: var(--shadow-lg); max-height: calc(100dvh - var(--nav-h) - env(safe-area-inset-bottom) - var(--sp-4)); overflow-y: auto; } .profile-sheet-user { display: flex; align-items: center; gap: var(--sp-4); } .profile-sheet-avatar { width: 44px; height: 44px; border-radius: var(--radius-md); background: var(--clr-accent); color: #fff; font-size: var(--text-sm); font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; letter-spacing: .04em; } .profile-sheet-action, .profile-sheet-logout { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3); border-radius: var(--radius-sm); font-size: var(--text-sm); font-weight: 500; transition: background .15s; } .profile-sheet-action { color: var(--clr-text-muted); } .profile-sheet-action:hover { background: var(--clr-surface-2); color: var(--clr-text); } .profile-sheet-action.active { color: var(--clr-accent); } .profile-sheet-logout { color: var(--clr-danger); } .profile-sheet-logout:hover { background: rgba(211, 47, 47, .08); } .sheet-section-label { font-size: var(--text-xs); font-weight: 600; color: var(--clr-text-muted); text-transform: uppercase; letter-spacing: .06em; padding: var(--sp-3) var(--sp-3) var(--sp-1); } /* ============================================= Page d'accueil — Welcome card ============================================= */ .welcome-card { display: flex; align-items: center; gap: var(--sp-5); background: var(--clr-surface); border: 1px solid var(--clr-border); border-radius: var(--radius-md); padding: var(--sp-6); } .welcome-avatar { width: 56px; height: 56px; border-radius: var(--radius-md); background: var(--clr-accent); color: #fff; font-size: var(--text-xl); font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; letter-spacing: .04em; } .welcome-name { font-size: var(--text-2xl); font-weight: 700; } /* ============================================= Page d'accueil — Home ============================================= */ .home-page { display: flex; flex-direction: column; gap: var(--sp-8); } .home-vente-cta { display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-4) var(--sp-5); background: var(--clr-surface); border: 1px solid var(--clr-border); border-radius: var(--radius-lg); text-decoration: none; color: var(--clr-text); transition: border-color .15s, box-shadow .15s; } .home-vente-cta:hover { border-color: var(--clr-accent); box-shadow: 0 4px 16px rgba(0,0,0,.08); } .home-vente-cta__icon { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; background: var(--clr-accent); color: #fff; border-radius: var(--radius-md); font-size: 1.3rem; flex-shrink: 0; } .home-vente-cta__text { display: flex; flex-direction: column; gap: 2px; flex: 1; } .home-vente-cta__label { font-size: var(--text-base); font-weight: 700; line-height: 1; } .home-vente-cta__sub { font-size: var(--text-xs); color: var(--clr-text-muted); } .home-vente-cta__arrow { font-size: .85rem; color: var(--clr-text-muted); flex-shrink: 0; } .home-welcome { display: grid; grid-template-columns: 1fr auto; gap: var(--sp-4); align-items: stretch; } .home-balance { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-1); background: var(--clr-accent); color: #fff; border-radius: var(--radius-md); padding: var(--sp-5) var(--sp-6); text-decoration: none; min-width: 150px; transition: opacity .15s; } .home-balance:hover { opacity: .9; } .home-balance__label { font-size: var(--text-xs); opacity: .85; text-transform: uppercase; letter-spacing: .07em; } .home-balance__amount { font-size: var(--text-3xl); font-weight: 700; line-height: 1; } .home-balance__cta { font-size: var(--text-xs); opacity: .75; } .home-section__title { font-size: var(--text-lg); font-weight: 700; margin-bottom: var(--sp-1); } .home-section__sub { font-size: var(--text-sm); color: var(--clr-text-muted); margin-bottom: var(--sp-4); } /* Section allergènes */ .home-allergens__intro { font-size: var(--text-sm); color: var(--clr-text-muted); margin-bottom: var(--sp-3); } .home-allergens__chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-3); } .home-allergen-chip { display: inline-flex; align-items: center; padding: 4px 10px; background: var(--clr-allergen-bg); color: var(--clr-allergen); border: 1px solid var(--clr-allergen-border); border-radius: 999px; font-size: var(--text-xs); font-weight: 600; } .home-allergens__legal { font-size: var(--text-xs); color: var(--clr-text-muted); border-top: 1px solid var(--clr-border); padding-top: var(--sp-3); margin-top: var(--sp-1); } .home-credit { text-align: center; font-size: var(--text-xs); color: var(--clr-text-muted); padding: var(--sp-4) var(--sp-4) var(--sp-2); opacity: .5; } .home-credit a { color: inherit; text-decoration: none; } .home-credit a:hover { opacity: .8; } /* Grille produits */ .home-products { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); } @media (min-width: 480px) { .home-products { grid-template-columns: repeat(4, 1fr); } } @media (min-width: 768px) { .home-products { grid-template-columns: repeat(8, 1fr); } } .home-product-card { display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: var(--sp-2); background: var(--clr-surface); border: 1px solid var(--clr-border); border-radius: var(--radius-md); padding: var(--sp-3) var(--sp-2); text-align: center; text-decoration: none; color: inherit; cursor: pointer; transition: border-color .15s, box-shadow .15s; } .home-product-card:hover { border-color: var(--clr-accent); box-shadow: 0 4px 12px rgba(0,0,0,.08); } .home-product-card__img { width: 48px; height: 48px; object-fit: scale-down; border-radius: var(--radius-sm); } .home-product-card__emoji { font-size: 1.75rem; line-height: 1; } .home-product-card__name { font-size: var(--text-xs); font-weight: 600; line-height: 1.3; } .home-product-card__price { font-size: var(--text-xs); font-weight: 800; color: var(--clr-accent); } /* ── Modal produit (détail depuis la home) ── */ body.modal-open { overflow: hidden; } body.modal-open .app-content { overflow: hidden; } .modal-overlay--product { align-items: center; } .modal.modal--product { max-width: min(480px, calc(100vw - 128px)); height: min(75dvh, calc(100dvh - 32px)); position: relative; overflow: hidden; display: flex; flex-direction: column; } @media (max-width: 1023px) { .modal.modal--product { max-width: min(480px, calc(100vw - 128px)); height: calc( 100dvh - var(--topbar-h) - env(safe-area-inset-top, 0px) - var(--nav-h) - env(safe-area-inset-bottom, 0px) - 96px ); } .modal-product-visual { height: 25%; } .modal--product .modal-body { padding: var(--sp-4); } .modal-product-price { font-size: 1.5rem; } } .modal-product-visual { width: 100%; height: 30%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: #fff; border-radius: var(--radius-lg) var(--radius-lg) 0 0; overflow: hidden; } .modal-product-img { width: 100%; height: 100%; object-fit: contain; display: block; } .modal-product-emoji { font-size: 5rem; line-height: 1; } .modal--product .modal-body { flex: 1; min-height: 0; padding: var(--sp-5); overflow-y: auto; overscroll-behavior: contain; } .modal-product-category { font-size: 11px; font-weight: 600; color: var(--clr-text-muted); text-transform: uppercase; letter-spacing: .08em; margin: 0 0 var(--sp-1); } .modal-product-name { font-size: var(--text-xl); font-weight: 700; line-height: 1.2; margin: 0 0 var(--sp-2); } .modal-product-price { font-size: 2rem; font-weight: 800; color: var(--clr-accent); margin-bottom: var(--sp-3); } .modal-product-desc { font-size: var(--text-sm); color: var(--clr-text-muted); line-height: 1.55; margin: 0 0 var(--sp-3); } .modal-product-allergens { margin-bottom: var(--sp-3); } .modal-product-allergens-label { display: block; font-size: 11px; font-weight: 700; color: var(--clr-allergen); text-transform: uppercase; letter-spacing: .08em; margin-bottom: var(--sp-2); } .modal-product-allergens-chips { display: flex; flex-wrap: wrap; gap: var(--sp-1); } .modal-product-footer { flex-shrink: 0; border-top: 1px solid var(--clr-border); padding: var(--sp-2) var(--sp-3); display: flex; align-items: center; justify-content: space-between; } .modal-product-counter { font-size: var(--text-xs); font-weight: 500; color: var(--clr-text-muted); } .modal-nav-btn { width: 32px; height: 32px; flex-shrink: 0; border: none; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--clr-text-muted); transition: background .15s, color .15s; } .modal-nav-btn:hover { background: var(--clr-surface-3, var(--clr-surface-2)); color: var(--clr-text); } .modal-close { position: absolute; top: var(--sp-3); right: var(--sp-3); width: 28px; height: 28px; border: none; background: rgba(0,0,0,.25); border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; color: #fff; transition: background .15s; z-index: 1; } .modal-close:hover { background: rgba(0,0,0,.45); } /* Liste staff */ .home-staff { display: flex; flex-direction: column; gap: var(--sp-4); } .home-staff-group { display: flex; flex-direction: row; flex-wrap: wrap; gap: var(--sp-2); } .home-staff-group__role-badge { width: 100%; } .home-staff-group__desc { width: 100%; font-size: var(--text-xs); color: var(--clr-text-muted); margin: 0; line-height: 1.5; } .home-staff-card { display: flex; align-items: center; gap: var(--sp-4); background: var(--clr-surface); border: 1px solid var(--clr-border); border-radius: var(--radius-md); padding: var(--sp-3) var(--sp-4); } .home-staff-card__avatar { width: 40px; height: 40px; border-radius: var(--radius-sm); background: var(--clr-surface-2); color: var(--clr-text-muted); font-size: var(--text-sm); font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; letter-spacing: .04em; } .home-staff-card__info { display: flex; flex-direction: column; gap: 2px; } .home-staff-card__name { font-size: var(--text-sm); font-weight: 600; } .home-staff-card__role { font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; } .home-staff-card--admin .home-staff-card__avatar { background: var(--clr-role-admin-bg); color: var(--clr-role-admin-text); } .home-staff-card--moderator .home-staff-card__avatar { background: var(--clr-role-moderator-bg); color: var(--clr-role-moderator-text); } .home-staff-card--moderateur_barman .home-staff-card__avatar { background: var(--clr-role-moderateur_barman-bg); color: var(--clr-role-moderateur_barman-text); } .home-staff-card--barman .home-staff-card__avatar { background: var(--clr-role-barman-bg); color: var(--clr-role-barman-text); } .home-staff-card--admin .home-staff-card__role { color: var(--clr-role-admin-text); } .home-staff-card--moderator .home-staff-card__role { color: var(--clr-role-moderator-text); } .home-staff-card--moderateur_barman .home-staff-card__role { color: var(--clr-role-moderateur_barman-text); } .home-staff-card--barman .home-staff-card__role { color: var(--clr-role-barman-text); } .home-staff-card--has-phone { border-color: var(--clr-danger); cursor: pointer; text-align: left; transition: background .15s; } .home-staff-card--has-phone:hover { background: var(--clr-surface-2); } .home-staff-card__wa-icon { margin-left: auto; flex-shrink: 0; color: #25d366; opacity: .75; } .home-staff-card--has-phone:hover .home-staff-card__wa-icon { opacity: 1; } @media (max-width: 600px) { .home-welcome { grid-template-columns: 1fr; } .home-balance { flex-direction: row; align-items: center; justify-content: space-between; min-width: unset; flex-wrap: wrap; row-gap: var(--sp-1); } .home-balance__cta { width: 100%; text-align: left; } } /* ============================================= EN-TÊTE DE PAGE ============================================= */ .page-header { margin-bottom: var(--sp-5); } .page-title { font-size: var(--text-2xl); font-weight: 700; line-height: 1.1; margin: 0 0 var(--sp-1); } /* ============================================= ADMINISTRATION — SPLIT LAYOUT ============================================= */ .admin-split { display: grid; grid-template-columns: 320px 1fr; gap: var(--sp-2) var(--sp-4); align-items: start; } .admin-panel { /* background: var(--clr-surface); */ border: 1px solid var(--clr-border); border-radius: var(--radius-md) var(--radius-md) 0 0; overflow: hidden; } /* ── Mode fill : les colonnes scrollent, pas la page ── */ .content--fill { overflow: hidden; display: flex; flex-direction: column; padding-bottom: 0; } .split-body { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow: hidden; } .content--fill .admin-split { flex: 1; min-height: 0; grid-template-rows: 1fr; align-items: stretch; } .content--fill .admin-split__list { position: static; margin-top: 0; max-height: none; overflow-y: auto; scrollbar-width: none; } .content--fill .admin-split__list::-webkit-scrollbar { display: none; } .content--fill .admin-split__detail { min-height: 0; overflow-y: auto; scrollbar-width: none; } .content--fill .admin-split__detail::-webkit-scrollbar { display: none; } /* ── admin-split avec bouton toggle au-dessus de la liste ── */ .admin-split--with-toggle .admin-split__toggle { grid-column: 1; grid-row: 1; } .admin-split--with-toggle .admin-split__list { grid-column: 1; grid-row: 2; } .admin-split--with-toggle .admin-split__detail { grid-column: 2; grid-row: 1 / span 2; } .content--fill .admin-split--with-toggle { grid-template-rows: auto 1fr; } /* ── Toolbar recherche + action ── */ .search-count { font-size: var(--text-xs); font-weight: 600; color: var(--clr-text-muted); background: var(--clr-surface-2); border-radius: var(--radius-sm); padding: 2px var(--sp-2); flex-shrink: 0; } .admin-search { padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--clr-border); position: sticky; top: 0; background: var(--clr-surface); z-index: 1; display: flex; align-items: center; gap: var(--sp-2); } .search-wrapper { flex: 1; position: relative; display: flex; align-items: center; } .search-icon { position: absolute; left: 0; color: var(--clr-text-muted); pointer-events: none; flex-shrink: 0; } .search-input { width: 100%; background: transparent; border: none; outline: none; color: var(--clr-text); font-size: 16px; font-family: inherit; padding: var(--sp-1) 0 var(--sp-1) calc(15px + var(--sp-3)); } @media (min-width: 1024px) { .search-input { font-size: var(--text-sm); } } .search-input::placeholder { color: var(--clr-text-muted); } /* ── Sections par rôle ── */ .role-section { border-bottom: 1px solid var(--clr-border); } .role-section:last-child { border-bottom: none; } .role-section__header { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) var(--sp-4); background: var(--clr-surface-2); width: 100%; border: none; text-align: left; cursor: pointer; color: inherit; transition: background .15s; } .role-section__header:hover { background: var(--clr-border); } .role-section__count { font-size: var(--text-xs); color: var(--clr-text-muted); font-weight: 600; margin-left: auto; } .cat-list-icon { font-size: 1rem; line-height: 1; flex-shrink: 0; width: 20px; text-align: center; } .cat-list-thumb { width: 20px; height: 20px; border-radius: 3px; object-fit: cover; display: block; } .role-chevron { flex-shrink: 0; color: var(--clr-text-muted); transition: transform .2s; } .role-chevron.open { transform: rotate(180deg); } /* ── Item membre ── */ .member-item { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); text-decoration: none; color: var(--clr-text); background-color: var(--clr-surface); border-bottom: 1px solid var(--clr-border); transition: background .15s; } .member-item:last-child { border-bottom: none; } .member-item:hover { background: var(--clr-surface-2); } .member-item__info { min-width: 0; } .member-item__name { font-size: var(--text-sm); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .member-item__email { font-size: var(--text-xs); color: var(--clr-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ── Avatar ── */ .member-avatar { width: 36px; height: 36px; border-radius: var(--radius-full); background: var(--clr-accent); color: #fff; font-size: var(--text-xs); font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; letter-spacing: .04em; text-transform: uppercase; } .member-avatar--lg { width: 56px; height: 56px; font-size: var(--text-lg); } /* ── Badges de rôle ── */ .role-badge { display: inline-flex; align-items: center; padding: var(--sp-1) var(--sp-3); border-radius: var(--radius-full); font-size: var(--text-xs); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; } .role-badge--super_admin { background: var(--clr-role-super_admin-bg); color: var(--clr-role-super_admin-text); } .role-badge--admin { background: var(--clr-role-admin-bg); color: var(--clr-role-admin-text); } .role-badge--moderator { background: var(--clr-role-moderator-bg); color: var(--clr-role-moderator-text); } .role-badge--moderateur_barman { background: var(--clr-role-moderateur_barman-bg); color: var(--clr-role-moderateur_barman-text); } .role-badge--barman { background: var(--clr-role-barman-bg); color: var(--clr-role-barman-text); } .role-badge--client { background: var(--clr-role-client-bg); color: var(--clr-role-client-text); } /* ── Modal ── */ .modal-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, .5); z-index: 300; display: flex; align-items: center; justify-content: center; padding: var(--sp-4); } .modal { background: var(--clr-surface); border: 1px solid var(--clr-border); border-radius: var(--radius-md); width: 100%; max-width: 480px; max-height: 90dvh; overflow-y: auto; box-shadow: var(--shadow-lg); } .modal-header { display: flex; align-items: center; justify-content: space-between; padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--clr-border); position: sticky; top: 0; background: var(--clr-surface); z-index: 1; } .modal-title { font-size: var(--text-base); font-weight: 700; margin: 0; } .modal-body { padding: var(--sp-5); } /* ── Empty state (panneau droit vide) ── */ .content--fill #membre-detail { display: flex; flex-direction: column; min-height: 100%; } .detail-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--sp-12); color: var(--clr-text-muted); text-align: center; } /* ── Détail membre ── */ .membre-detail { padding: var(--sp-6); } .membre-detail__toolbar { display: flex; justify-content: flex-end; margin-bottom: var(--sp-2); } .membre-detail__header { display: flex; gap: var(--sp-4); align-items: center; margin-bottom: var(--sp-6); padding-bottom: var(--sp-6); border-bottom: 1px solid var(--clr-border); } .membre-detail__name { font-size: var(--text-xl); font-weight: 700; margin: 0 0 var(--sp-1); } .membre-detail__balance { background: var(--clr-surface-2); border-radius: var(--radius-md); padding: var(--sp-4) var(--sp-6); margin-bottom: var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-3); } .balance-info { display: flex; align-items: center; justify-content: space-between; } .balance-label { font-size: var(--text-sm); color: var(--clr-text-muted); font-weight: 500; } .balance-amount { font-size: var(--text-2xl); font-weight: 700; color: var(--clr-accent); } .credit-form { border-top: 1px solid var(--clr-border); padding-top: var(--sp-3); } .membre-detail__section { margin-bottom: var(--sp-6); } .membre-detail__section-title { font-size: var(--text-sm); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--clr-text-muted); margin: 0 0 var(--sp-3); } .role-form { display: flex; gap: var(--sp-3); align-items: center; } .role-form .form-input { flex: 1; } /* ── Formulaire nouveau membre ── */ .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); } .form-row--3 { grid-template-columns: 2fr 1fr 80px; } .form-error { font-size: var(--text-xs); color: var(--clr-danger); margin-top: var(--sp-1); } .form-input--error { border-color: var(--clr-danger); } /* ============================================= PRODUITS — liste gauche ============================================= */ /* turbo-frame produit-detail : flex pour que detail-empty puisse centrer */ .content--fill #produit-detail { display: flex; flex-direction: column; min-height: 100%; } .produit-item { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--clr-border); background: var(--clr-surface); transition: background .15s; cursor: default; } .produit-item:last-child { border-bottom: none; } .produit-item:hover { background: var(--clr-surface-2); } .produit-item--empty { justify-content: flex-start; cursor: default; } .produit-item--empty:hover { background: var(--clr-surface); } .produit-item--archived { opacity: .55; } .produit-item--archived:hover { opacity: .8; } .produit-archived-toggle { display: flex; align-items: center; gap: var(--sp-2); width: 100%; padding: var(--sp-2) var(--sp-4); background: none; border: none; border-top: 1px dashed var(--clr-border); color: var(--clr-text-muted); font-size: var(--text-xs); font-weight: 500; cursor: pointer; transition: color .15s; } .produit-archived-toggle:hover { color: var(--clr-text); } .produit-item__info { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; } .produit-item__name { font-size: var(--text-sm); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .produit-item__price { font-size: var(--text-sm); font-weight: 600; color: var(--clr-accent); flex-shrink: 0; } .produit-item__icon { font-size: 1.2rem; line-height: 1; flex-shrink: 0; width: 32px; text-align: center; } .produit-item__thumb { width: 32px; height: 32px; border-radius: var(--radius-sm); object-fit: scale-down; flex-shrink: 0; } .produit-badge { display: inline-flex; align-items: center; padding: 1px var(--sp-2); border-radius: var(--radius-full); font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; flex-shrink: 0; } .produit-badge--archived { background: var(--clr-surface-2); color: var(--clr-text-muted); } /* ============================================= PRODUIT — panneau droit (détail / formulaire) ============================================= */ .product-detail { padding-bottom: 50px; /* pour éviter que le contenu soit caché sous la nav fixe sur mobile */ display: flex; flex-direction: column; height: 100%; } .product-detail__header { display: flex; align-items: flex-start; gap: var(--sp-3); padding: var(--sp-5); border-bottom: 1px solid var(--clr-border); flex-shrink: 0; } .product-detail__header-left { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--sp-2); } .product-detail__title { font-size: var(--text-lg); font-weight: 700; margin: 0; display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2); } .product-detail__body { max-width: 550px; flex: 1; overflow-y: auto; padding: var(--sp-5); scrollbar-width: none; } .product-detail__body::-webkit-scrollbar { display: none; } .produit-badge--active { background: #f0fdf4; color: #15803d; } [data-theme="dark"] .produit-badge--active { background: #052e16; color: #86efac; } /* ============================================= CATÉGORIES — panneau droit ============================================= */ .cat-panel { display: flex; flex-direction: column; height: 100%; min-height: 0; } .cat-panel-header { display: flex; align-items: center; justify-content: space-between; padding: var(--sp-5); border-bottom: 1px solid var(--clr-border); flex-shrink: 0; } .cat-panel-title { font-size: var(--text-lg); font-weight: 700; margin: 0; } .cat-list { list-style: none; padding: 0; margin: 0; flex: 1; overflow-y: auto; scrollbar-width: none; } .cat-list::-webkit-scrollbar { display: none; } .cat-item { border-bottom: 1px solid var(--clr-border); } .cat-item:last-child { border-bottom: none; } .cat-item-display { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-5); } .cat-item-name { flex: 1; font-size: var(--text-sm); font-weight: 500; min-width: 0; } .cat-item-count { font-size: var(--text-xs); font-weight: 600; color: var(--clr-text-muted); background: var(--clr-surface-2); border-radius: var(--radius-sm); padding: 2px var(--sp-2); flex-shrink: 0; } .cat-item-actions { display: flex; align-items: center; gap: var(--sp-1); flex-shrink: 0; } .cat-item-icon { width: 22px; text-align: center; font-size: 1rem; flex-shrink: 0; line-height: 1; } .cat-item-thumb { width: 22px; height: 22px; border-radius: var(--radius-sm); object-fit: cover; } .cat-item-edit { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-5); } .cat-item-edit--full { flex-direction: column; align-items: stretch; padding: var(--sp-3) var(--sp-5); gap: var(--sp-3); } .cat-edit-row { display: flex; gap: var(--sp-2); } .cat-edit-row .form-input--sm { flex: 1; } .cat-icon-input { width: 54px !important; flex: none !important; text-align: center; font-size: 1.1rem; } /* ── Emoji picker ── */ .emoji-picker { position: relative; flex-shrink: 0; } .emoji-current { width: 38px; height: auto; min-height: 38px; border-radius: var(--radius-sm); border: 1px solid var(--clr-border); background: var(--clr-surface-2); font-size: 1.2rem; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .15s; } .emoji-current:hover { background: var(--clr-surface-3, var(--clr-surface-2)); } .emoji-grid { z-index: 9999; background: var(--clr-surface); border: 1px solid var(--clr-border); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); padding: var(--sp-2); display: grid; grid-template-columns: repeat(6, 32px); gap: 2px; width: max-content; } .emoji-btn, .emoji-clear { width: 32px; height: 32px; border-radius: var(--radius-sm); border: none; background: none; cursor: pointer; font-size: 1.1rem; display: flex; align-items: center; justify-content: center; transition: background .1s; } .emoji-btn:hover { background: var(--clr-surface-2); } .emoji-btn--selected { background: color-mix(in srgb, var(--clr-accent) 15%, transparent); outline: 2px solid var(--clr-accent); } .emoji-clear { font-size: var(--text-xs); color: var(--clr-text-muted); } .cat-img-section { display: flex; flex-direction: column; gap: var(--sp-2); } .cat-edit-actions { display: flex; gap: var(--sp-2); } .cat-create-form { display: flex; gap: var(--sp-2); padding: var(--sp-4) var(--sp-5); border-top: 1px solid var(--clr-border); flex-shrink: 0; flex-wrap: wrap; } .cat-create-form .form-input:not(.cat-icon-input) { flex: 1; min-width: 0; } /* ── Allergène chips (formulaire produit) ── */ .allergen-selected { display: flex; flex-wrap: wrap; gap: var(--sp-1); margin-bottom: var(--sp-1); } .allergen-chip { display: inline-flex; align-items: center; gap: var(--sp-1); padding: 3px 8px 3px 10px; background: var(--clr-allergen); color: #fff; border: none; border-radius: 999px; font-size: var(--text-xs); font-weight: 600; } .allergen-chip__name { line-height: 1; } .allergen-chip__remove { display: flex; align-items: center; justify-content: center; width: 16px; height: 16px; border: none; background: none; padding: 0; cursor: pointer; color: inherit; opacity: .6; border-radius: 50%; transition: opacity .15s, background .15s; } .allergen-chip__remove:hover { opacity: 1; background: rgba(255,255,255,.2); } /* ── Image picker ── */ .img-current { margin-bottom: var(--sp-2); } .img-picker--side { display: grid; grid-template-columns: 84px 1fr; gap: var(--sp-2) var(--sp-3); align-items: start; } .img-picker--side .img-current { margin-bottom: 0; grid-column: 1; grid-row: 1; } .img-picker--side .img-source-tabs { grid-column: 2; grid-row: 1; display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-1); align-content: start; } .img-picker--side .img-picker-panels { grid-column: 1 / -1; grid-row: 2; } .img-thumb { width: 80px; height: 80px; object-fit: contain; border-radius: var(--radius-md); border: 1px solid var(--clr-border); display: block; } .img-source-tabs { display: flex; gap: var(--sp-1); flex-wrap: wrap; } .img-tab { font-size: var(--text-xs); font-weight: 500; padding: 4px var(--sp-3); border-radius: var(--radius-sm); border: 1px solid var(--clr-border); background: var(--clr-surface-2); color: var(--clr-text-muted); cursor: pointer; transition: background .15s, color .15s, border-color .15s; } .img-tab:hover { background: var(--clr-surface-3, var(--clr-surface-2)); color: var(--clr-text); } .img-tab--active { background: var(--clr-accent); color: #fff; border-color: var(--clr-accent); } .img-tab--danger { color: var(--clr-danger); border-color: transparent; } .img-tab--danger.img-tab--active { background: var(--clr-danger); color: #fff; border-color: var(--clr-danger); } .img-tab--sm { font-size: 11px; padding: 3px var(--sp-2); } .img-defaults-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: var(--sp-2); } .img-defaults-grid--sm { grid-template-columns: repeat(auto-fill, minmax(48px, 1fr)); } .img-default-item { display: flex; flex-direction: column; align-items: center; gap: var(--sp-1); border: 2px solid transparent; border-radius: var(--radius-md); padding: var(--sp-1); background: var(--clr-surface-2); cursor: pointer; transition: border-color .15s; overflow: hidden; } .img-default-item img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius-sm); } .img-default-item span { font-size: 10px; color: var(--clr-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } .img-default-item--selected { border-color: var(--clr-accent); background: color-mix(in srgb, var(--clr-accent) 10%, var(--clr-surface-2)); } .img-defaults-grid--sm .img-default-item span { display: none; } .btn-icon-sm { width: 26px; height: 26px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; background: none; border: none; cursor: pointer; color: var(--clr-text-muted); transition: background .15s, color .15s; } .btn-icon-sm:hover { background: var(--clr-surface-2); color: var(--clr-text); } .btn-icon-danger { color: var(--clr-danger); } .btn-icon-danger:hover { background: rgba(211, 47, 47, .08); color: var(--clr-danger); } /* ── Responsive mobile ── */ @media (max-width: 1023px) { .admin-split { grid-template-columns: 1fr; } /* Revert fill mode : scroll de page normal sur mobile */ .content--fill { overflow-y: auto; padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom) + var(--sp-6)); } .split-body { flex: none; overflow: visible; } .content--fill .admin-split { flex: none; min-height: auto; grid-template-rows: auto; align-items: start; } .content--fill .admin-split__list, .content--fill .admin-split__detail { overflow-y: visible; min-height: auto; } .admin-split__detail { order: -1; } /* Reset explicit grid placement — order property handles mobile visual order */ .admin-split--with-toggle .admin-split__toggle, .admin-split--with-toggle .admin-split__list, .admin-split--with-toggle .admin-split__detail { grid-column: auto; grid-row: auto; } /* Stock layout : empilé sur mobile */ .content--fill .stock-page-wrap { flex: none; min-height: auto; } /* Produits : masquer le panneau detail quand vide (état initial) */ .admin-split__detail:has(.detail-empty) { display: none; } /* Allergènes / catégories : le panel n'a plus de parent de hauteur fixe */ .cat-panel { height: auto; } } @media (max-width: 600px) { .form-row { grid-template-columns: 1fr; } .form-row--3 { grid-template-columns: 1fr 1fr; } .form-row--3 .form-group:last-child { grid-column: 1 / -1; } .role-form { flex-direction: column; align-items: stretch; } .membre-detail__balance { flex-direction: column; gap: var(--sp-1); } } /* ============================================= VENTE — Page caisse barman ============================================= */ /* ── POS layout ── */ .pos-layout { display: grid; grid-template-columns: 1fr 370px; gap: var(--sp-4); height: 100%; min-height: 0; } .pos-catalog { overflow-y: auto; height: 100%; display: flex; flex-direction: column; gap: var(--sp-5); scrollbar-width: none; padding: var(--sp-1) var(--sp-1) var(--sp-8); } .pos-catalog::-webkit-scrollbar { display: none; } /* Recherche catalogue */ .pos-search { position: relative; display: flex; align-items: center; } .pos-search__icon { position: absolute; left: var(--sp-3); color: var(--clr-text-muted); pointer-events: none; flex-shrink: 0; } .pos-search__input { width: 100%; padding: var(--sp-2) var(--sp-8) var(--sp-2) calc(var(--sp-3) + 15px + var(--sp-2)); border: 1px solid var(--clr-border); border-radius: var(--radius-md); background: var(--clr-surface); font-size: 1rem; color: var(--clr-text); box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,.06)); } .pos-search__input:focus { outline: none; border-color: var(--clr-accent); box-shadow: 0 0 0 3px rgba(204,20,20,.1); } .pos-search__clear { position: absolute; right: var(--sp-2); background: var(--clr-surface-2); border: none; border-radius: var(--radius-sm); cursor: pointer; color: var(--clr-text-muted); display: flex; padding: 4px; transition: background .1s, color .1s; } .pos-search__clear:hover { background: var(--clr-border); color: var(--clr-text); } /* Catégorie */ .pos-cat-title { font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--clr-text-muted); margin-bottom: var(--sp-2); padding-left: var(--sp-1); border-left: 3px solid var(--clr-accent); padding-left: var(--sp-2); } .pos-cat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-2); } /* Tablette : catalogue pleine largeur (~600 px) — 3 colonnes */ @media (min-width: 768px) and (max-width: 1023px) { .pos-cat-grid { grid-template-columns: repeat(3, 1fr); } } /* Desktop : catalogue côte-à-côte avec le panneau — 4 colonnes */ @media (min-width: 1024px) { .pos-cat-grid { grid-template-columns: repeat(4, 1fr); } } /* Carte produit — bande horizontale compacte */ .pos-product-card { display: flex; align-items: stretch; padding: 0; min-width: 0; /* permet à text-overflow:ellipsis de fonctionner dans les grilles CSS */ background: var(--clr-surface); border: 1px solid var(--clr-border); border-radius: var(--radius-md); text-align: left; cursor: pointer; position: relative; transition: border-color .12s, background .12s; } .pos-product-card:hover { border-color: var(--clr-accent); } .pos-product-card--in-cart { border-color: var(--clr-accent); background: rgba(204,20,20,.04); } [data-theme="dark"] .pos-product-card--in-cart { background: rgba(204,20,20,.1); } .pos-product-card__media { width: 52px; height: 52px; flex-shrink: 0; border-radius: calc(var(--radius-md) - 1px) 0 0 calc(var(--radius-md) - 1px); background: var(--clr-surface-2); display: flex; align-items: center; justify-content: center; overflow: hidden; position: relative; } .pos-product-card__img { width: 100%; height: 100%; object-fit: scale-down; } .pos-product-card__emoji { font-size: 1rem; line-height: 1; } .pos-product-card__info { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 1px; padding: 3px 5px 3px 4px; } .pos-product-card__name { font-size: 10px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.2; } .pos-product-card__price-row { display: flex; align-items: center; justify-content: space-between; gap: 2px; } .pos-product-card__price { font-size: 10px; font-weight: 700; color: var(--clr-accent); flex-shrink: 0; } .pos-product-card__stock { font-size: 9px; color: var(--clr-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pos-product-card__stock--low { color: var(--clr-warning); font-weight: 600; } .pos-product-card__stock--empty { color: var(--clr-danger); font-weight: 600; } .pos-product-card__qty-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.48); color: #FFF; font-size: 1.1rem; font-weight: 800; pointer-events: none; } .pos-product-card__remove { position: absolute; top: -7px; right: -7px; width: 18px; height: 18px; padding: 0; background: var(--clr-danger); color: #fff; border: 2px solid var(--clr-bg); border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; } .pos-product-card__remove:hover { filter: brightness(1.2); } .pos-product-card:focus-visible { outline: 2px solid var(--clr-accent); outline-offset: 1px; } /* Panneau droite */ .pos-panel { display: flex; flex-direction: column; gap: var(--sp-3); height: 100%; overflow-y: auto; scrollbar-width: none; } .pos-panel::-webkit-scrollbar { display: none; } .pos-section { background: var(--clr-surface); border: 1px solid var(--clr-border); border-radius: var(--radius-lg); padding: var(--sp-4); } .pos-section__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-3); } .pos-section__title { font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--clr-text-muted); } .pos-member-balance { margin-top: var(--sp-2); font-size: var(--text-xs); font-weight: 600; } .pos-balance-ok { color: #15803d; } .pos-balance-ko { color: var(--clr-danger); } [data-theme="dark"] .pos-balance-ok { color: #86efac; } .pos-member-balance i { margin-right: var(--sp-1); } /* Aide vente (dropdown discret) */ .pos-help { border: 1px solid var(--clr-border); border-radius: var(--radius-md); overflow: hidden; } .pos-help__toggle { display: flex; align-items: center; gap: var(--sp-2); width: 100%; padding: var(--sp-2) var(--sp-3); background: var(--clr-surface-2); border: none; cursor: pointer; color: var(--clr-text-muted); font-size: var(--text-xs); font-weight: 600; font-family: inherit; text-align: left; transition: background .15s, color .15s; } .pos-help__toggle:hover { background: var(--clr-border); color: var(--clr-text); } .pos-help__chevron { margin-left: auto; flex-shrink: 0; transition: transform .2s; font-size: 10px; } .pos-help__chevron.open { transform: rotate(180deg); } .pos-help__body { padding: var(--sp-3); border-top: 1px solid var(--clr-border); display: flex; flex-direction: column; gap: var(--sp-3); max-height: 240px; overflow-y: auto; scrollbar-width: thin; } .pos-help__item { font-size: var(--text-xs); line-height: 1.6; color: var(--clr-text-muted); } .pos-help__item p { margin: 0; } .pos-help__item-title { font-weight: 700; color: var(--clr-text); margin-bottom: 2px; } /* Panier — overlay succès */ .pos-cart { position: relative; overflow: hidden; } .pos-cart-success { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-3); background: color-mix(in srgb, var(--clr-surface) 90%, transparent); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); z-index: 10; cursor: pointer; animation: pcs-overlay-in 220ms ease-out both; } .pos-cart-success__ring svg { width: 68px; height: 68px; } .pcs-circle { fill: none; stroke: #16a34a; stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 157; stroke-dashoffset: 157; transform-box: fill-box; transform-origin: center; transform: rotate(-90deg); animation: pcs-draw 460ms ease-out forwards; } .pcs-check { fill: none; stroke: #16a34a; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 38; stroke-dashoffset: 38; animation: pcs-draw 280ms ease-out 420ms forwards; } [data-theme="dark"] .pcs-circle, [data-theme="dark"] .pcs-check { stroke: #86efac; } .pos-cart-success__inner { display: contents; } .pos-cart-success__msg { font-size: var(--text-sm); font-weight: 700; color: #16a34a; text-align: center; padding: 0 var(--sp-4); line-height: 1.5; max-width: 220px; } [data-theme="dark"] .pos-cart-success__msg { color: #86efac; } .pos-cart-success__hint { font-size: var(--text-xs); color: var(--clr-text-muted); margin-top: calc(-1 * var(--sp-1)); } /* État erreur */ .pos-cart-success--error .pcs-circle { stroke: var(--clr-danger); } .pos-cart-success--error .pos-cart-success__msg { color: var(--clr-danger); } [data-theme="dark"] .pos-cart-success--error .pcs-circle { stroke: #fca5a5; } [data-theme="dark"] .pos-cart-success--error .pos-cart-success__msg { color: #fca5a5; } .pcs-xmark1, .pcs-xmark2 { stroke: var(--clr-danger); stroke-width: 3; stroke-dasharray: 29; stroke-dashoffset: 29; animation: pcs-draw 200ms ease-out 400ms forwards; } [data-theme="dark"] .pcs-xmark1, [data-theme="dark"] .pcs-xmark2 { stroke: #fca5a5; } @keyframes pcs-overlay-in { from { transform: scale(.96); } to { transform: scale(1); } } @keyframes pcs-draw { to { stroke-dashoffset: 0; } } /* Page vente — interactions désactivées tant qu'une erreur n'est pas acquittée */ .pos-layout--blocked .pos-catalog, .pos-layout--blocked .pos-section:not(.pos-cart), .pos-layout--blocked .pos-cart > :not(.pos-cart-success), .pos-layout--blocked #pos-recent-sales { pointer-events: none; } /* Panier */ .pos-cart-empty { display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); padding: var(--sp-5) 0; color: var(--clr-text-muted); font-size: var(--text-sm); } .pos-cart-empty i { font-size: 1.5rem; opacity: .4; } .pos-cart-item { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) 0; border-bottom: 1px solid var(--clr-border); } .pos-cart-item:last-of-type { border-bottom: none; } .pos-cart-item__remove { display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; border: none; border-radius: var(--radius-sm); background: transparent; color: var(--clr-text-muted); cursor: pointer; flex-shrink: 0; transition: background .1s, color .1s; } .pos-cart-item__remove:hover { background: rgba(204,20,20,.1); color: var(--clr-danger); } .pos-cart-item__name { flex: 1; font-size: var(--text-sm); font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pos-cart-item__price { font-size: var(--text-sm); font-weight: 700; color: var(--clr-accent); flex-shrink: 0; } .pos-cart-item__qty { display: flex; align-items: center; gap: var(--sp-1); flex-shrink: 0; } .pos-qty-btn { width: 24px; height: 24px; border: 1px solid var(--clr-border); border-radius: var(--radius-sm); background: var(--clr-surface-2); font-size: var(--text-base); cursor: pointer; display: flex; align-items: center; justify-content: center; line-height: 1; color: var(--clr-text); transition: background .1s; } .pos-qty-btn:hover:not(:disabled) { background: var(--clr-accent); color: #fff; border-color: var(--clr-accent); } .pos-qty-btn:disabled { opacity: .35; cursor: not-allowed; } .pos-qty-val { font-size: var(--text-sm); font-weight: 700; min-width: 18px; text-align: center; } .pos-cart-total { display: flex; align-items: center; justify-content: space-between; margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 2px solid var(--clr-border); font-weight: 700; font-size: var(--text-sm); } .pos-cart-total__amount { font-size: var(--text-lg); color: var(--clr-accent); } /* Bouton encaisser */ .pos-submit-btn { width: 100%; padding: var(--sp-4); background: var(--clr-accent); color: #fff; border: none; border-radius: var(--radius-lg); font-size: var(--text-base); font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: var(--sp-2); transition: opacity .15s; flex-shrink: 0; } .pos-submit-btn:hover:not(:disabled) { opacity: .9; } .pos-submit-btn:disabled { opacity: .4; cursor: not-allowed; } /* Ventes récentes */ .pos-recent-wrap { flex: 1; min-height: 0; display: flex; flex-direction: column; } .pos-recent-toggle { display: none; } .pos-recent { background: var(--clr-surface); border: 1px solid var(--clr-border); border-radius: var(--radius-lg); padding: var(--sp-4); flex: 1; min-height: 0; overflow-y: auto; } /* Flash vente */ .vente-flash { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); border-radius: var(--radius-md); font-size: var(--text-sm); font-weight: 500; } .vente-flash--success { background: #f0fdf4; color: #15803d; border: 1px solid #bbf7d0; } .vente-flash--error { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; } [data-theme="dark"] .vente-flash--success { background: #052e16; color: #86efac; border-color: #166534; } [data-theme="dark"] .vente-flash--error { background: #450a0a; color: #fca5a5; border-color: #991b1b; } /* Mobile */ /* Tablette + landscape phone : empêche pos-recent de s'effondrer à 0 */ @media (max-width: 1023px) { .pos-recent { flex: none; min-height: 0; max-height: 320px; } } /* Portrait mobile : panel (panier/membre) en premier, catalogue en dessous */ @media (max-width: 767px) { .pos-layout { display: flex; flex-direction: column; gap: 0; height: auto; overflow: visible; } .pos-panel { order: -1; height: auto; overflow: visible; } .pos-catalog { height: auto; overflow: visible; padding-left: 0; padding-right: 0; padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom) + var(--sp-8)); } /* Ventes récentes : dropdown mobile */ .pos-recent-title { display: none; } .pos-recent-toggle { display: flex; align-items: center; gap: var(--sp-1); width: 100%; padding: var(--sp-2) var(--sp-4); background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius-md); cursor: pointer; font-size: var(--text-sm); font-weight: 600; color: var(--text-primary); margin-top: 0; } .pos-recent-toggle__label { flex: 1; text-align: left; } .pos-recent-toggle__badge { background: var(--clr-primary); color: #fff; font-size: var(--text-xs); border-radius: 999px; padding: 1px 7px; font-weight: 700; min-width: 20px; text-align: center; } .pos-recent-toggle__chevron { transition: transform 0.2s; flex-shrink: 0; } .pos-recent-toggle__chevron--open { transform: rotate(180deg); } .pos-recent { display: none; max-height: none; overflow-y: visible; margin-top: 0; } .pos-recent--open { display: block; } .vente-tx[data-cancellable="false"] { display: none; } } /* ── Combobox ── */ .combobox { position: relative; } .combobox__input { width: 100%; padding-right: var(--sp-9); } .combobox__clear { position: absolute; right: var(--sp-3); top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; color: var(--clr-text-muted); display: flex; align-items: center; padding: var(--sp-1); border-radius: var(--radius-sm); } .combobox__clear:hover { color: var(--clr-text); background: var(--clr-surface-3); } .combobox__dropdown { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 200; background: var(--clr-surface-2); border: 1px solid var(--clr-border); border-radius: var(--radius-md); box-shadow: var(--shadow-md); max-height: 240px; overflow-y: auto; scrollbar-width: none; } .combobox__dropdown::-webkit-scrollbar { display: none; } .combobox__option { display: block; width: 100%; text-align: left; padding: var(--sp-3) var(--sp-4); background: none; border: none; color: var(--clr-text); font-size: var(--text-sm); cursor: pointer; border-radius: 0; } .combobox__option:hover, .combobox__option--active { background: var(--clr-accent); color: #fff; } /* Option produit — layout nom + prix + stock en ligne */ .combobox__option--product { display: flex; align-items: center; gap: var(--sp-2); } .combobox__option--product:hover, .combobox__option--product.combobox__option--active { background: var(--clr-accent); color: #fff; } .combobox__option--product:hover .combobox__option-stock, .combobox__option--product.combobox__option--active .combobox__option-stock { color: rgba(255,255,255,.75); } .combobox__option-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .combobox__option-price { flex-shrink: 0; font-weight: 700; font-size: var(--text-xs); } .combobox__option-stock { flex-shrink: 0; font-size: var(--text-xs); } .combobox__option-badge { flex-shrink: 0; background: #fff; color: var(--clr-accent); border-radius: var(--radius-full); font-size: 10px; font-weight: 700; min-width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; padding: 0 4px; } .combobox__dropdown--products { max-height: 260px; } .combobox__empty { padding: var(--sp-3) var(--sp-4); color: var(--clr-text-muted); font-size: var(--text-sm); } /* Spin animation pour le bouton sync */ @keyframes spin { to { transform: rotate(360deg); } } .spinning svg { animation: spin .7s linear infinite; } /* ============================================= COMPTE MEMBRE — solde + historique personnel ============================================= */ .compte-page { max-width: 1200px; margin: 0 auto; } .compte-balance { background: var(--clr-surface-2); border-radius: var(--radius-lg); padding: var(--sp-6) var(--sp-8); margin-bottom: var(--sp-8); display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); } .btn--recharge { flex-shrink: 0; background: var(--clr-accent); color: #fff; border-radius: var(--radius-md); padding: var(--sp-3) var(--sp-6); font-size: var(--text-sm); font-weight: 700; text-decoration: none; transition: background .15s; } .btn--recharge:hover { background: var(--clr-accent-hover); } .compte-balance__label { font-size: var(--text-sm); color: var(--clr-text-muted); font-weight: 500; margin-bottom: var(--sp-2); } .compte-balance__amount { font-size: var(--text-4xl, 2.5rem); font-weight: 800; color: var(--clr-accent); letter-spacing: -.02em; } .compte-no-refund { font-size: var(--text-xs); color: var(--clr-text-muted); margin: calc(-1 * var(--sp-2)) 0 0; line-height: 1.6; } .compte-section, .compte-section__title { font-size: var(--text-sm); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--clr-text-muted); margin: 0 0 var(--sp-4); } /* ============================================= MENU — catalogue produits lecture seule ============================================= */ .menu-page { max-width: 960px; margin: 0 auto; } /* Navigation ancres catégories */ .menu-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-2); padding: var(--sp-3) 0 var(--sp-3); margin-bottom: var(--sp-4); position: sticky; top: -25px; z-index: 10; background: var(--clr-bg); margin-top: calc(-1 * var(--sp-3)); border-bottom: 1px solid var(--clr-border); box-shadow: 0 4px 12px rgba(0,0,0,.06); } .menu-nav__item { display: inline-flex; align-items: center; gap: var(--sp-1); white-space: nowrap; padding: var(--sp-1) var(--sp-3); border-radius: var(--radius-full); font-size: var(--text-sm); font-weight: 600; color: var(--clr-text-muted); background: var(--clr-surface-2); border: 1px solid var(--clr-border); text-decoration: none; transition: background .15s, color .15s, border-color .15s; } .menu-nav__item:hover { background: var(--clr-accent); color: #fff; border-color: var(--clr-accent); } .menu-nav__item-img { width: 18px; height: 18px; object-fit: scale-down; flex-shrink: 0; } .menu-category { margin-bottom: var(--sp-10); scroll-margin-top: 56px; } .menu-category__title { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--text-base); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--clr-text-muted); margin: 0 0 var(--sp-4); padding-left: var(--sp-3); border-left: 3px solid var(--clr-accent); } .menu-category__thumb { width: 24px; height: 24px; border-radius: var(--radius-sm); object-fit: cover; flex-shrink: 0; } .menu-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); } @media (min-width: 480px) { .menu-grid { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 768px) { .menu-grid { grid-template-columns: repeat(5, 1fr); } } .menu-card { background: var(--clr-surface); border: 1px solid var(--clr-border); border-radius: var(--radius-lg); overflow: hidden; display: flex; flex-direction: column; transition: box-shadow .15s, border-color .15s; } .menu-card:hover { border-color: var(--clr-accent); box-shadow: 0 4px 16px rgba(0,0,0,.08); } .menu-card__media { aspect-ratio: 1; background: var(--clr-surface-2); display: flex; align-items: center; justify-content: center; overflow: hidden; } .menu-card__img { width: 100%; height: 100%; object-fit: scale-down; } .menu-card__emoji { font-size: 2.5rem; line-height: 1; } .menu-card__body { padding: var(--sp-3) var(--sp-3) var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-1); flex: 1; } .menu-card__name { font-size: var(--text-sm); font-weight: 600; line-height: 1.3; } .menu-card__price { font-size: var(--text-base); font-weight: 800; color: var(--clr-accent); margin-top: auto; padding-top: var(--sp-1); } /* ============================================= VENTES RÉCENTES — liste sous le formulaire POS ============================================= */ .vente-tx-list { display: flex; flex-direction: column; } .vente-tx { display: flex; align-items: flex-start; gap: var(--sp-3); padding: var(--sp-3) 0; border-bottom: 1px solid var(--clr-border); } .vente-tx:last-child { border-bottom: none; } .vente-tx__info { flex: 1; min-width: 0; } .vente-tx__member { display: flex; align-items: baseline; gap: var(--sp-2); font-weight: 600; font-size: var(--text-sm); margin-bottom: var(--sp-1); } .vente-tx__time { font-size: var(--text-xs); color: var(--clr-text-muted); font-weight: 400; } .vente-tx__items-list { display: flex; flex-direction: column; gap: 2px; } .vente-tx__item { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--text-xs); color: var(--clr-text-muted); } .vente-tx__item--cancelled { opacity: .45; text-decoration: line-through; } .vente-tx__item--cancel-line { opacity: .6; color: var(--clr-text-muted); font-size: var(--text-xs); padding-left: var(--sp-1); } .vente-tx__item-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .vente-tx__item-amount { flex-shrink: 0; } .vente-tx__cancel-form { display: flex; align-items: center; } .vente-tx__amount { font-weight: 700; color: var(--clr-danger); font-size: var(--text-sm); flex-shrink: 0; padding-top: var(--sp-1); } .cancel-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-3); margin-top: var(--sp-3); } .cancel-chip { min-width: 52px; height: 48px; padding: 0 var(--sp-4); border-radius: var(--radius-md); border: 2px solid var(--clr-border); background: var(--clr-surface-1); color: var(--clr-text); font-size: var(--text-base); font-weight: 600; cursor: pointer; transition: background .12s, border-color .12s, color .12s; } .cancel-chip:hover, .cancel-chip:focus-visible { border-color: var(--clr-danger); color: var(--clr-danger); background: var(--clr-surface-1); outline: none; } .cancel-chip--active { background: var(--clr-danger); border-color: var(--clr-danger); color: #fff; } .cancel-chip--active:hover, .cancel-chip--active:focus-visible { color: #fff; } .vente-tx--cancelled { opacity: .4; } .vente-tx--expired { opacity: .55; } .vente-tx--expired .btn-icon-danger, .vente-tx[data-cancellable="false"] .btn-icon-danger { visibility: hidden; } .vente-tx__expired-label { font-size: var(--text-xs); color: var(--clr-text-muted); font-style: italic; } .vente-tx__timer { font-variant-numeric: tabular-nums; font-size: var(--text-xs); color: var(--clr-text-muted); margin-left: var(--sp-2); } .vente-tx__timer--warn { color: var(--clr-warning); font-weight: 600; } .vente-tx__timer--critical { color: var(--clr-danger); font-weight: 700; } .vente-tx--basket .vente-tx__member::after { content: 'Panier'; font-size: 9px; font-weight: 500; padding: 1px 5px; border-radius: var(--radius-full); background: var(--clr-surface-2); color: var(--clr-text-muted); } .badge-annule { display: inline-block; font-size: 9px; padding: 1px 5px; border-radius: var(--radius-full); background: var(--clr-surface-2); color: var(--clr-text-muted); flex-shrink: 0; } /* ============================================= HISTORIQUE TRANSACTIONS — panneau détail membre ============================================= */ .tx-list { display: flex; flex-direction: column; } .tx-row { display: flex; align-items: flex-start; gap: var(--sp-3); padding: var(--sp-3) 0; border-bottom: 1px solid var(--clr-border); } .tx-row:last-child { border-bottom: none; } .tx-pagination { display: flex; align-items: center; justify-content: center; gap: var(--sp-3); margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 1px solid var(--clr-border); } .tx-badge { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: var(--radius-full); white-space: nowrap; flex-shrink: 0; margin-top: 2px; } .tx-badge--credit { background: #f0fdf4; color: #15803d; } .tx-badge--debit { background: #fef2f2; color: #b91c1c; } [data-theme="dark"] .tx-badge--credit { background: #052e16; color: #86efac; } [data-theme="dark"] .tx-badge--debit { background: #450a0a; color: #fca5a5; } .tx-info { flex: 1; min-width: 0; } .tx-product { font-size: var(--text-sm); } .tx-actor { font-size: var(--text-xs); color: var(--clr-text-muted); } .tx-right { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex-shrink: 0; } .tx-amount { font-size: var(--text-sm); font-weight: 700; } .tx-amount--pos { color: var(--clr-success); } .tx-amount--neg { color: var(--clr-danger); } .tx-date { font-size: var(--text-xs); color: var(--clr-text-muted); } /* ───────────────────────────────────────────── Historique (audit log) ───────────────────────────────────────────── */ .historique-layout { display: flex; flex: 1; min-height: 0; overflow: hidden; } .historique-main { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow: hidden; } .historique-feed-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: var(--sp-5) var(--sp-5) var(--sp-4); scrollbar-width: none; } .historique-feed-scroll::-webkit-scrollbar { display: none; } .historique-sidebar { width: 230px; flex-shrink: 0; overflow-y: auto; padding: var(--sp-5) var(--sp-4) var(--sp-10); display: flex; flex-direction: column; gap: var(--sp-3); scrollbar-width: none; } .historique-sidebar::-webkit-scrollbar { display: none; } /* ── Sidebar panels ── */ .histo-panel { background: var(--clr-surface); border: 1px solid var(--clr-border); border-radius: var(--radius-lg); padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-2); } .histo-panel--muted { background: transparent; border: none; padding: var(--sp-1) 0; } .histo-panel__title { font-size: var(--text-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--clr-text-muted); margin-bottom: var(--sp-1); } /* Raccourcis période */ .histo-shortcuts { display: flex; flex-wrap: wrap; gap: var(--sp-1); } .histo-shortcut { padding: 3px var(--sp-2); font-size: var(--text-xs); border: 1px solid var(--clr-border); border-radius: var(--radius-sm); background: var(--clr-surface-2); color: var(--clr-text); cursor: pointer; transition: background .1s, border-color .1s; } .histo-shortcut:hover { background: var(--clr-surface-3, var(--clr-border)); border-color: var(--clr-accent); } .histo-shortcut--active { background: var(--clr-accent); color: #fff; border-color: var(--clr-accent); font-weight: 600; } .histo-shortcut--active:hover { background: var(--clr-accent); } .histo-clear { font-size: var(--text-xs); color: var(--clr-text-muted); text-decoration: none; margin-top: var(--sp-1); } .histo-clear:hover { color: var(--clr-accent); } /* Liste types d'action */ .histo-action-list { display: flex; flex-direction: column; gap: 2px; } .histo-action-item { display: flex; align-items: center; padding: var(--sp-1) var(--sp-2); border-radius: var(--radius-sm); cursor: pointer; font-size: var(--text-sm); color: var(--clr-text-muted); transition: background .1s; } .histo-action-item:hover { background: var(--clr-surface-2); color: var(--clr-text); } .histo-action-item.active { background: var(--clr-surface-2); color: var(--clr-text); font-weight: 500; } /* Direction toggle */ .histo-dir-toggle { display: flex; flex-direction: column; gap: 2px; } .histo-dir-btn { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-2); border-radius: var(--radius-sm); font-size: var(--text-sm); color: var(--clr-text-muted); cursor: pointer; transition: background .1s; } .histo-dir-btn:hover { background: var(--clr-surface-2); color: var(--clr-text); } .histo-dir-btn.active { background: var(--clr-surface-2); color: var(--clr-text); font-weight: 500; } .histo-dir-btn i { width: 14px; text-align: center; } /* sr-only pour les radio cachés */ .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; } .audit-badge { display: inline-block; padding: var(--sp-1) var(--sp-2); border-radius: var(--radius-sm); font-size: var(--text-xs); font-weight: 500; white-space: nowrap; } .audit-badge--product { background: var(--clr-audit-product-bg); color: var(--clr-audit-product); } .audit-badge--category { background: var(--clr-audit-category-bg); color: var(--clr-audit-category); } .audit-badge--member { background: var(--clr-audit-member-bg); color: var(--clr-audit-member); } .audit-badge--sale { background: var(--clr-audit-sale-bg); color: var(--clr-audit-sale); } .audit-badge--account { background: var(--clr-audit-account-bg); color: var(--clr-audit-account); } .audit-badge--stock { background: var(--clr-audit-stock-bg); color: var(--clr-audit-stock); } .audit-badge--location { background: var(--clr-audit-location-bg); color: var(--clr-audit-location); } .audit-badge--allergen { background: var(--clr-allergen-bg); color: var(--clr-allergen); } .audit-badge--settings { background: var(--clr-audit-settings-bg); color: var(--clr-audit-settings); } .audit-detail-main { font-size: var(--text-sm); font-weight: 500; } .audit-details { color: var(--clr-text-muted); font-size: var(--text-xs); margin-top: 2px; } .historique-feed { overflow: hidden; } .historique-entry { display: grid; grid-template-columns: 42px 1fr; gap: var(--sp-3) var(--sp-4); padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--clr-border); border-left: 3px solid var(--entry-accent, var(--clr-border)); background: var(--clr-surface); transition: background .12s; } .historique-entry:last-child { border-bottom: none; } .historique-entry:hover { background: var(--clr-surface-2); } /* Couleurs de bordure par type d'action */ .historique-entry--sale { --entry-accent: var(--clr-audit-sale); } .historique-entry--account { --entry-accent: var(--clr-audit-account); } .historique-entry--product { --entry-accent: var(--clr-audit-product); } .historique-entry--category { --entry-accent: var(--clr-audit-category); } .historique-entry--member { --entry-accent: var(--clr-audit-member); } .historique-entry--stock { --entry-accent: var(--clr-audit-stock); } .historique-entry--location { --entry-accent: var(--clr-audit-location); } .historique-entry--allergen { --entry-accent: var(--clr-allergen); } .historique-entry--settings { --entry-accent: var(--clr-audit-settings); } .historique-entry__time { font-size: var(--text-xs); font-variant-numeric: tabular-nums; color: var(--clr-text-muted); white-space: nowrap; padding-top: 3px; text-align: right; } .historique-entry__body { display: flex; flex-direction: column; gap: 2px; } .historique-entry__header { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; } .historique-entry__actor { font-size: var(--text-xs); font-weight: 500; color: var(--clr-text); } @media (max-width: 700px) { .historique-sidebar { display: none; } /* Revert flex layout — scroll géré par content--fill parent */ .historique-layout { display: block; overflow: visible; height: auto; } .historique-main { display: block; overflow: visible; } .historique-feed-scroll { overflow-y: visible; padding: var(--sp-4); } .historique-pagination { position: sticky; bottom: 0; } .historique-mobile-filters { display: flex; } .historique-entry { grid-template-columns: 36px 1fr; gap: var(--sp-2) var(--sp-3); padding: var(--sp-3); } } /* ── content--fill-h : préserve le fill layout sur mobile (page historique) ── */ @media (max-width: 1023px) { .content--fill.content--fill-h { overflow: hidden; overflow: clip; padding-bottom: 0; } .content--fill-h .historique-feed-scroll { padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom) + var(--sp-5)); } } @media (max-width: 700px) { .content--fill-h .historique-layout { display: flex; flex-direction: column; height: auto; overflow: hidden; overflow: clip; } .content--fill-h .historique-main { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow: hidden; overflow: clip; padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom)); } .content--fill-h .historique-feed-scroll { overflow-y: auto; padding: unset; padding-bottom: var(--sp-4); } .content--fill-h .historique-pagination { flex-shrink: 0; position: static; } } /* Barre filtres compacte — mobile uniquement */ .historique-mobile-filters { display: none; gap: var(--sp-2); align-items: center; flex-wrap: wrap; padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--clr-border); background: var(--clr-surface); } .historique-day-sep { padding: var(--sp-5) var(--sp-1) var(--sp-2); font-size: var(--text-lg); font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--clr-text); } .historique-pagination { flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; padding: var(--sp-3) var(--sp-5); gap: var(--sp-3); } .historique-pagination .btn.disabled { opacity: .4; pointer-events: none; } /* ───────────────────────────────────────────── Stock ───────────────────────────────────────────── */ .stock-page { padding: var(--sp-6); max-width: 1200px; margin: 0 auto; } .stock-back { margin-bottom: var(--sp-4); } .stock-section { margin-bottom: var(--sp-8); } .stock-section__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-4); } .stock-section__title { font-size: var(--text-lg); font-weight: 600; margin-bottom: var(--sp-4); } /* Tableau stock — même base que historique-table */ .stock-scroll { overflow-x: auto; border: 1px solid var(--clr-border); border-radius: var(--radius-lg); } .stock-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); } .stock-table th { padding: var(--sp-2) var(--sp-4); text-align: left; font-weight: 600; color: var(--clr-text-muted); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .05em; border-bottom: 2px solid var(--clr-border); white-space: nowrap; background: var(--clr-surface-2); } .stock-table th.text-center, .stock-table td.text-center { text-align: center; } .stock-table th.text-right, .stock-table td.text-right { text-align: right; } .stock-table td { padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--clr-border); vertical-align: middle; } .stock-table tr:last-child td { border-bottom: none; } .stock-table tbody tr:hover td { background: var(--clr-surface-2); } .stock-product-link { color: var(--clr-text); text-decoration: none; font-weight: 500; } .stock-product-link:hover { color: var(--clr-accent); } /* Quantité avec couleurs d'alerte */ .stock-qty { display: inline-block; font-weight: 600; font-size: var(--text-sm); } .stock-qty--low { color: var(--clr-warning); } .stock-qty--empty { color: var(--clr-danger); } /* Badge "Buvette" */ .badge--prod { display: inline-block; padding: 1px var(--sp-2); background: rgba(46,125,50,.1); color: var(--clr-success); border-radius: var(--radius-full); font-size: var(--text-xs); font-weight: 500; margin-left: var(--sp-1); } [data-theme="dark"] .badge--prod { background: rgba(46,125,50,.2); } .badge--reserve { display: inline-block; padding: 1px var(--sp-2); background: rgba(21,101,192,.1); color: #1565c0; border-radius: var(--radius-full); font-size: var(--text-xs); font-weight: 500; margin-left: var(--sp-1); } [data-theme="dark"] .badge--reserve { background: rgba(21,101,192,.2); color: #90caf9; } /* Labels actions lot */ .stock-lot-action--danger { color: var(--clr-danger); border-color: transparent; } .stock-lot-action--danger:hover { background: rgba(211,47,47,.08); border-color: transparent; } .lot-action-label { font-size: 11px; } /* Badges mouvements */ .audit-badge--purchase { background: rgba(21,101,192,.1); color: #1565c0; } .audit-badge--sale { background: rgba(46,125,50,.1); color: var(--clr-success); } .audit-badge--sale_cancel{ background: rgba(46,125,50,.1); color: var(--clr-success); } .audit-badge--transfer { background: rgba(100,100,180,.1); color: #5c6bc0; } .audit-badge--adjustment { background: rgba(230,81,0,.1); color: var(--clr-warning); } .audit-badge--loss { background: rgba(198,40,40,.1); color: var(--clr-danger); } .audit-badge--sale_override { background: rgba(230,81,0,.1); color: var(--clr-warning); } [data-theme="dark"] .audit-badge--purchase { background: rgba(21,101,192,.2); color: #90caf9; } [data-theme="dark"] .audit-badge--sale { background: rgba(46,125,50,.2); color: #a5d6a7; } [data-theme="dark"] .audit-badge--sale_cancel { background: rgba(46,125,50,.2); color: #a5d6a7; } [data-theme="dark"] .audit-badge--sale_override { background: rgba(230,81,0,.2); color: #ffb74d; } [data-theme="dark"] .audit-badge--transfer { background: rgba(100,100,180,.2); color: #9fa8da; } [data-theme="dark"] .audit-badge--adjustment { background: rgba(230,81,0,.2); color: #ffb74d; } [data-theme="dark"] .audit-badge--loss { background: rgba(198,40,40,.2); color: #ef9a9a; } /* Emplacements */ .location-list { display: flex; flex-direction: column; gap: var(--sp-2); } .location-item { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); background: var(--clr-surface); border-bottom: 1px solid var(--clr-border); } .location-item:last-child { border-bottom: none; } .location-name { font-weight: 500; font-size: var(--text-sm); } /* Formulaire inline (créer emplacement) */ .stock-form-inline { margin-bottom: var(--sp-4); padding: var(--sp-4); background: var(--clr-surface-2); border-radius: var(--radius-md); } .form-row { display: flex; gap: var(--sp-3); align-items: center; flex-wrap: wrap; } .form-check { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--text-sm); white-space: nowrap; } /* Boutons d'action stock */ .stock-action-buttons { display: flex; gap: var(--sp-3); flex-wrap: wrap; margin-bottom: var(--sp-4); } /* Panneau formulaire */ .stock-form-panel { padding: var(--sp-5); background: var(--clr-surface); border: 1px solid var(--clr-border); border-radius: var(--radius-lg); margin-bottom: var(--sp-4); } .stock-form-panel--danger { border-color: var(--clr-danger); } .stock-form-panel__title { font-size: var(--text-base); font-weight: 600; margin-bottom: var(--sp-4); } /* Grille 2 colonnes pour les formulaires */ .form-grid-2 { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--sp-4); } .form-group--full { grid-column: 1 / -1; } /* Grille 2 colonnes pour les sections par emplacement */ .stock-locations-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-3); margin-top: var(--sp-2); align-items: start; } /* Bouton danger outline */ .btn-danger-outline { background: transparent; border: 1px solid var(--clr-danger); color: var(--clr-danger); padding: var(--sp-2) var(--sp-4); border-radius: var(--radius-md); font-size: var(--text-sm); font-weight: 500; cursor: pointer; transition: background .15s, color .15s; } .btn-danger-outline:hover { background: var(--clr-danger); color: #fff; } .btn-danger { background: var(--clr-danger); color: #fff; border: none; padding: var(--sp-2) var(--sp-4); border-radius: var(--radius-md); font-size: var(--text-sm); font-weight: 500; cursor: pointer; } /* ============================================= STOCK — Layout deux colonnes ============================================= */ .btn-xs { padding: 2px var(--sp-2); font-size: var(--text-xs); border-radius: var(--radius-sm); } /* Layout principal : main scrollable + sidebar fixe */ /* ── Layout principal ── */ .stock-page-wrap { display: flex; flex-direction: column; flex: 1; min-height: 0; } /* ── Barre d'onglets ── */ .stock-tabs-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); border-bottom: 1px solid var(--clr-border); border-radius: var(--radius-sm) var(--radius-sm) 0 0; padding: 0 var(--sp-4); flex-shrink: 0; background: var(--clr-surface); } .stock-tabs-nav { display: flex; overflow-x: auto; scrollbar-width: none; } .stock-tabs-nav::-webkit-scrollbar { display: none; } .stock-tab-btn { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); background: none; border: none; border-bottom: 2px solid transparent; cursor: pointer; font-size: var(--text-sm); font-weight: 500; font-family: inherit; color: var(--clr-text-muted); white-space: nowrap; transition: color .15s, border-color .15s; margin-bottom: -1px; } .stock-tab-btn:hover { color: var(--clr-text); } .stock-tab-btn--active { color: var(--clr-accent); border-bottom-color: var(--clr-accent); } .stock-tabs-action { flex-shrink: 0; margin: var(--sp-2) 0; } /* ── Contenu d'onglet ── */ .stock-tab-content { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: none; padding-top: var(--sp-4); padding-bottom: var(--sp-10); } .stock-tab-content::-webkit-scrollbar { display: none; } /* ── Drawer Réceptionner ── */ .stock-drawer-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.35); opacity: 0; pointer-events: none; transition: opacity .25s; z-index: 200; } .stock-drawer-overlay--visible { opacity: 1; pointer-events: auto; } .stock-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: 400px; max-width: 100%; background: var(--clr-surface); border-left: 1px solid var(--clr-border); box-shadow: var(--shadow-lg); z-index: 201; display: flex; flex-direction: column; overflow-y: auto; scrollbar-width: none; transform: translateX(100%); transition: transform .25s cubic-bezier(.4,0,.2,1); } .stock-drawer::-webkit-scrollbar { display: none; } .stock-drawer--open { transform: translateX(0); } .stock-drawer__header { display: flex; align-items: center; justify-content: space-between; padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--clr-border); flex-shrink: 0; } .stock-drawer__title { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--text-base); font-weight: 700; } .stock-drawer__form { padding: var(--sp-5); flex: 1; } /* ── Menu ··· par lot ── */ .stock-lot-menu { position: relative; flex-shrink: 0; } .stock-lot-menu__trigger { color: var(--clr-text-muted); } .stock-lot-menu__trigger--active, .stock-lot-menu__trigger:hover { color: var(--clr-text); background: var(--clr-surface-2); } .stock-lot-menu__dropdown { position: absolute; right: 0; top: calc(100% + 4px); background: var(--clr-surface); border: 1px solid var(--clr-border); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); z-index: 50; min-width: 160px; padding: var(--sp-1) 0; } .stock-lot-menu__item { display: flex; align-items: center; gap: var(--sp-2); width: 100%; padding: var(--sp-2) var(--sp-3); background: none; border: none; cursor: pointer; font-size: var(--text-sm); font-family: inherit; color: var(--clr-text); text-align: left; transition: background .1s; } .stock-lot-menu__item:hover { background: var(--clr-surface-2); } .stock-lot-menu__item--danger { color: var(--clr-danger); } .stock-lot-menu__item--danger:hover { background: rgba(211,47,47,.06); } .stock-lot-menu__separator { height: 1px; background: var(--clr-border); margin: var(--sp-1) 0; } /* ── Label de formulaire inline ── */ .stock-lot-form__label { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--text-xs); font-weight: 600; color: var(--clr-text-muted); margin-bottom: var(--sp-2); } .stock-lot-form__label--danger { color: var(--clr-danger); } /* ── Tab Emplacements ── */ .stock-locations-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-4); margin-bottom: var(--sp-4); } .stock-locations-title { font-size: var(--text-base); font-weight: 700; margin: 0 0 var(--sp-1); } .stock-location-new-form { background: var(--clr-surface-2); border: 1px solid var(--clr-border); border-radius: var(--radius-md); padding: var(--sp-4); margin-bottom: var(--sp-4); } .stock-locations-list { border: 1px solid var(--clr-border); border-radius: var(--radius-md); overflow: hidden; } .location-badges { display: flex; gap: var(--sp-2); } /* Section d'aide dépliante */ .stock-help { margin-top: var(--sp-4); border: 1px solid var(--clr-border); border-radius: var(--radius-md); overflow: hidden; } .stock-help__toggle { display: flex; align-items: center; gap: var(--sp-2); width: 100%; padding: var(--sp-3) var(--sp-4); background: var(--clr-surface-2); border: none; cursor: pointer; color: var(--clr-text-muted); font-size: var(--text-xs); font-weight: 600; font-family: inherit; text-align: left; transition: background .15s, color .15s; } .stock-help__toggle:hover { background: var(--clr-border); color: var(--clr-text); } .stock-help__toggle svg:first-child { flex-shrink: 0; } .stock-help__toggle .stock-location-chevron { margin-left: auto; } .stock-help__body { padding: var(--sp-4); border-top: 1px solid var(--clr-border); } .stock-help__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--sp-3); } .stock-help__card { background: var(--clr-surface-2); border-radius: var(--radius-md); padding: var(--sp-3) var(--sp-4); font-size: var(--text-xs); line-height: 1.6; color: var(--clr-text-muted); } .stock-help__card--full { grid-column: 1 / -1; } .stock-help__card-title { font-size: var(--text-xs); font-weight: 700; color: var(--clr-text); margin-bottom: var(--sp-2); } .stock-help__card p { margin: 0; } .stock-help__dots-legend { list-style: none; margin: 0 0 var(--sp-2); padding: 0; display: flex; flex-direction: column; gap: var(--sp-1); } .stock-help__dots-legend li { display: flex; align-items: center; gap: var(--sp-2); } .stock-help__card code { background: var(--clr-surface); border: 1px solid var(--clr-border); border-radius: 3px; padding: 1px 4px; font-size: 11px; font-family: monospace; } /* Hint sous les champs de formulaire */ .form-hint { font-size: var(--text-xs); color: var(--clr-text-muted); margin: var(--sp-1) 0 0; line-height: 1.4; } /* Barre de recherche */ .stock-search { margin-bottom: var(--sp-4); } .stock-search__inner { display: flex; align-items: center; gap: var(--sp-2); background: var(--clr-surface); border: 1px solid var(--clr-border); border-radius: var(--radius-md); padding: var(--sp-2) var(--sp-3); transition: border-color .15s; } .stock-search__inner:focus-within { border-color: var(--clr-accent); } .stock-search__icon { color: var(--clr-text-muted); flex-shrink: 0; } .stock-search__input { flex: 1; background: none; border: none; outline: none; color: var(--clr-text); font-size: 16px; font-family: inherit; } @media (min-width: 1024px) { .stock-search__input { font-size: var(--text-sm); } } .stock-search__input::placeholder { color: var(--clr-text-muted); } .stock-search__clear { background: none; border: none; cursor: pointer; color: var(--clr-text-muted); display: flex; align-items: center; padding: 2px; border-radius: var(--radius-sm); flex-shrink: 0; } .stock-search__clear:hover { color: var(--clr-text); background: var(--clr-surface-2); } /* Toolbar toggle tout réduire / tout développer */ .stock-locations-toolbar { display: flex; justify-content: flex-end; } .stock-locations-toolbar .btn { gap: var(--sp-1); font-size: var(--text-xs); color: var(--clr-text-muted); } .stock-locations-toolbar .stock-location-chevron { transition: transform .2s; } /* Section par emplacement */ .stock-location-section { border: 1px solid var(--clr-border); border-top: 2px solid var(--clr-accent); border-radius: var(--radius-md); overflow: hidden; } .stock-location-header { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: var(--sp-3) var(--sp-4); background: var(--clr-border); border: none; border-bottom: 1px solid var(--clr-border); cursor: pointer; color: inherit; font-family: inherit; text-align: left; transition: background .15s; } .stock-location-header:hover { background: color-mix(in srgb, var(--clr-text) 8%, var(--clr-border)); } .stock-location-title { font-size: var(--text-sm); font-weight: 700; margin: 0; display: flex; align-items: center; gap: var(--sp-2); color: var(--clr-text); } .stock-location-meta { display: flex; align-items: center; gap: var(--sp-2); flex-shrink: 0; } .stock-location-total { font-size: var(--text-xs); color: var(--clr-text-muted); font-weight: 600; } .stock-location-chevron { color: var(--clr-text-muted); transition: transform .2s; flex-shrink: 0; } .stock-location-chevron.open { transform: rotate(180deg); } .stock-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .stock-dot--expired { background: var(--clr-danger); } .stock-dot--soon { background: var(--clr-warning); } .stock-dot--low { background: #f59e0b; } .stock-location-body { padding: 0; display: flex; flex-direction: column; } /* Groupe produit — plat, séparé par border-top (style produit/membre) */ .stock-product-group { border-top: 1px solid var(--clr-border); } .stock-product-group:first-child { border-top: none; } /* Zebra striping — groupes pairs sur fond --clr-surface (vs surface-2 des impairs) */ .stock-product-group:nth-child(even):not(.stock-product-group--empty) .stock-product-head { background: var(--clr-surface); } .stock-product-group:nth-child(even):not(.stock-product-group--empty) .stock-product-head:hover { background: color-mix(in srgb, var(--clr-border) 70%, var(--clr-surface)); } .stock-product-group:nth-child(odd):not(.stock-product-group--empty) .stock-product-body { background: var(--clr-surface-2); } .stock-product-group:nth-child(even):not(.stock-product-group--empty) .stock-product-body { background: var(--clr-surface); } .stock-product-group--empty { opacity: .6; } .stock-product-group--empty .stock-product-head { background-color: color-mix(in srgb, var(--clr-accent) 8%, transparent); } .stock-product-head { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) var(--sp-4); background: var(--clr-surface-2); cursor: pointer; transition: background .15s; } .stock-product-head:hover { background: var(--clr-border); } .stock-product-restock { flex-shrink: 0; opacity: 0; transition: opacity .15s; } .stock-product-head:hover .stock-product-restock { opacity: 1; } .stock-product-body { border-top: 1px solid var(--clr-border); } .stock-product-name { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--text-sm); font-weight: 600; flex: 1; } .stock-total-badge { font-size: var(--text-xs); font-weight: 700; padding: 2px var(--sp-2); border-radius: var(--radius-full); background: var(--clr-surface); color: var(--clr-text-muted); border: 1px solid var(--clr-border); white-space: nowrap; flex-shrink: 0; } .stock-total-badge--low { background: rgba(230,81,0,.1); color: var(--clr-warning); border-color: rgba(230,81,0,.2); } .stock-total-badge--zero { background: rgba(198,40,40,.1); color: var(--clr-danger); border-color: rgba(198,40,40,.2); } /* Lots */ .stock-lots { display: flex; flex-direction: column; } .stock-lot-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); padding: var(--sp-2) var(--sp-4); border-bottom: 1px solid var(--clr-border); } .stock-lot-row:last-child { border-bottom: none; } .stock-lot-info { display: flex; align-items: center; gap: var(--sp-3); flex: 1; min-width: 0; } .stock-lot-qty { font-size: var(--text-lg); font-weight: 700; flex-shrink: 0; min-width: 32px; text-align: right; } .stock-lot-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); min-width: 0; } .stock-expiry { font-size: var(--text-xs); color: var(--clr-text-muted); white-space: nowrap; } .stock-expiry--expired { color: var(--clr-danger); font-weight: 600; } .stock-expiry--soon { color: var(--clr-warning); font-weight: 600; } .stock-expiry--none { font-style: italic; } .stock-lot-batch, .stock-lot-cost { font-size: var(--text-xs); color: var(--clr-text-muted); background: var(--clr-surface-2); border-radius: var(--radius-sm); padding: 1px var(--sp-2); white-space: nowrap; } .stock-lot-menu { display: flex; flex-direction: row-reverse; align-items: center; gap: var(--sp-1); flex-shrink: 0; } .stock-lot-actions { display: flex; align-items: center; gap: var(--sp-1); flex-shrink: 0; } /* Formulaire inline par lot */ .stock-lot-form { width: 100%; flex-basis: 100%; padding: var(--sp-2) var(--sp-4); border-top: 1px solid var(--clr-border); background: var(--clr-surface-2); } .stock-lot-form form { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); } .stock-lot-form--danger { background: rgba(211,47,47,.04); } .stock-lot-form--danger .form-input { border-color: var(--clr-danger); } /* Aucun stock */ .stock-no-lot { padding: var(--sp-3) var(--sp-4); font-size: var(--text-xs); color: var(--clr-text-muted); background-color: color-mix(in srgb, var(--clr-accent) 8%, transparent); font-style: italic; margin: 0; } /* Bannière d'alerte péremption */ .stock-alert-banners { display: flex; flex-direction: column; gap: var(--sp-2); margin-bottom: var(--sp-4); } .stock-alert-banner { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); background: rgba(230,81,0,.08); border: 1px solid rgba(230,81,0,.25); border-radius: var(--radius-md); font-size: var(--text-sm); color: var(--clr-warning); text-align: left; width: 100%; font-family: inherit; } .stock-alert-banner > svg:first-child { flex-shrink: 0; } .stock-alert-banner > span { flex: 1; } .stock-alert-banner__toggle { flex-shrink: 0; transition: transform .2s; opacity: .7; } [data-theme="dark"] .stock-alert-banner { background: rgba(230,81,0,.15); border-color: rgba(230,81,0,.3); } .stock-alert-banner--danger { background: rgba(211,47,47,.08); border-color: rgba(211,47,47,.3); color: var(--clr-danger); } [data-theme="dark"] .stock-alert-banner--danger { background: rgba(224,82,82,.12); border-color: rgba(224,82,82,.35); } .stock-alert-banner--clickable { cursor: pointer; transition: filter .15s; } .stock-alert-banner--clickable:hover { filter: brightness(.94); } [data-theme="dark"] .stock-alert-banner--clickable:hover { filter: brightness(1.12); } .stock-alert-banner--active { outline: 2px solid currentColor; outline-offset: -2px; } /* Mouvements compact (sidebar) */ .stock-movements-list { display: flex; flex-direction: column; gap: var(--sp-2); } .stock-movement-item { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-2); padding: var(--sp-2) 0; border-bottom: 1px solid var(--clr-border); font-size: var(--text-xs); } .stock-movement-item:last-child { border-bottom: none; } .stock-movement-item__left { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; } .stock-movement-item__product { display: flex; align-items: center; gap: var(--sp-2); font-weight: 600; color: var(--clr-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .stock-movement-item__loc { color: var(--clr-text-muted); } .stock-movement-item__right { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex-shrink: 0; } .stock-movement-item__date { color: var(--clr-text-muted); white-space: nowrap; } /* ── Responsive mobile stock ── */ @media (max-width: 1023px) { .stock-tabs-bar { padding: 0 var(--sp-3); gap: var(--sp-2); } .stock-tab-btn { padding: var(--sp-3) var(--sp-2); font-size: var(--text-xs); } .stock-tab-content { padding-top: var(--sp-3); padding-bottom: var(--sp-10); } .stock-drawer { width: 100%; border-left: none; border-top: 1px solid var(--clr-border); border-radius: var(--radius-lg) var(--radius-lg) 0 0; top: auto; transform: translateY(100%); } .stock-drawer--open { transform: translateY(0); } .stock-lot-menu__dropdown { right: auto; left: 0; } .lot-action-label { display: none; } } @media (max-width: 640px) { .stock-locations-grid { grid-template-columns: 1fr; } } @media (max-width: 480px) { .stock-tabs-action-label { display: none; } } /* ═══════════════════════════════════════════════════════════════ STATISTIQUES ═══════════════════════════════════════════════════════════════ */ .text-warning { color: var(--clr-warning); } .content--stats { overflow-y: auto; } .stats-page { max-width: 1100px; margin: 0 auto; padding: var(--sp-4) var(--sp-4) var(--sp-8); display: flex; flex-direction: column; gap: var(--sp-6); } /* ── Filtre de période ── */ .stats-period-bar { display: flex; flex-direction: column; gap: var(--sp-3); } .stats-period-tabs { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; } .stats-period-tab { display: inline-flex; align-items: center; padding: 6px 14px; border-radius: var(--radius-full); font-size: var(--text-sm); font-weight: 500; color: var(--clr-text-muted); background: var(--clr-surface-2); border: 1px solid var(--clr-border); text-decoration: none; transition: background .15s, color .15s, border-color .15s; cursor: pointer; } .stats-period-tab:hover { background: var(--clr-border); color: var(--clr-text); } .stats-period-tab.active { background: var(--clr-accent); color: #fff; border-color: var(--clr-accent); } .stats-period-label { font-size: var(--text-sm); color: var(--clr-text-muted); } .stats-month-nav { display: flex; align-items: center; gap: var(--sp-2); } .stats-month-nav__label { font-size: var(--text-sm); font-weight: 500; min-width: 8em; text-align: center; } .stats-custom-form { padding: var(--sp-3); background: var(--clr-surface-2); border: 1px solid var(--clr-border); border-radius: var(--radius-md); } .stats-custom-inputs { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; } .stats-custom-label { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--text-sm); color: var(--clr-text-muted); } /* ── Alertes opérationnelles ── */ .stats-alerts { display: flex; flex-direction: column; gap: var(--sp-2); } .stats-alert { display: flex; align-items: flex-start; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-radius: var(--radius-md); border: 1px solid; font-size: var(--text-sm); line-height: 1.5; } .stats-alert i { flex-shrink: 0; margin-top: 2px; } .stats-alert--danger { background: rgba(211,47,47,.08); border-color: var(--clr-danger); color: var(--clr-danger); } .stats-alert--warning { background: rgba(230,81,0,.08); border-color: var(--clr-warning); color: var(--clr-warning); } [data-theme="dark"] .stats-alert--danger { background: rgba(224,82,82,.1); } [data-theme="dark"] .stats-alert--warning { background: rgba(245,158,11,.1); } .stats-alert span { color: var(--clr-text); } .stats-alert--danger span strong, .stats-alert--warning span strong { color: inherit; } .stats-alert--link { cursor: pointer; text-decoration: none; transition: filter .15s, box-shadow .15s; display: flex; } .stats-alert--link:hover { filter: brightness(.95); box-shadow: 0 0 0 2px currentColor; } [data-theme="dark"] .stats-alert--link:hover { filter: brightness(1.1); } /* ── Section commune ── */ /* Séparateur interne dans une section (ex: all-time vs période) */ .stats-sub-section { display: flex; flex-direction: column; gap: var(--sp-2); border-top: 1px solid var(--clr-border); padding-top: var(--sp-4); } .stats-sub-section__title { font-size: 13px; font-weight: 700; color: var(--clr-text); margin: 0; display: flex; align-items: center; gap: var(--sp-2); } .stats-loss-total { font-size: 11px; font-weight: 600; padding: 1px 8px; border-radius: 999px; background: rgba(198,40,40,.1); color: var(--clr-danger); margin-left: var(--sp-2); } .stats-cost-warn { color: var(--clr-warning); font-size: 11px; vertical-align: middle; cursor: help; } .stats-treasury-block--margin { background: var(--clr-surface-2); border: 1px solid var(--clr-border); } .stats-section { background: var(--clr-surface); border: 1px solid var(--clr-border); border-radius: var(--radius-lg); padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-5); } .stats-section__header { display: flex; align-items: center; gap: var(--sp-2); position: relative; } .stats-section__title { font-size: 15px; font-weight: 700; color: var(--clr-text); margin: 0; display: flex; align-items: center; gap: var(--sp-2); flex: 1; } /* ── KPI Cards ── */ .stats-kpi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); } .stats-kpi-grid-treasury { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-3); } .kpi-card { background: var(--clr-surface-2); border: 1px solid var(--clr-border); border-radius: var(--radius-md); padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-1); position: relative; } .kpi-card__header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-2); } .kpi-card__label { font-size: 11px; font-weight: 600; color: var(--clr-text-muted); text-transform: uppercase; letter-spacing: .05em; line-height: 1.3; display: flex; align-items: center; gap: var(--sp-1); flex-wrap: wrap; } .kpi-card__value { font-size: 22px; font-weight: 700; color: var(--clr-text); line-height: 1.15; margin-top: var(--sp-1); } .kpi-card__sub { font-size: 12px; color: var(--clr-text-muted); margin-top: var(--sp-1); } .kpi-trend { font-size: 12px; font-weight: 600; display: flex; align-items: center; gap: 3px; margin-top: 2px; } .kpi-trend--up { color: var(--clr-success); } .kpi-trend--down { color: var(--clr-danger); } .kpi-trend__label { font-weight: 500; color: var(--clr-text-muted); font-size: 11px; } .kpi-trend__range { display: block; font-size: 10px; font-weight: 400; color: var(--clr-text-muted); } .kpi-badge-realtime { display: inline-block; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; background: rgba(198,40,40,.1); color: var(--clr-accent); border-radius: var(--radius-sm); padding: 1px 5px; } [data-theme="dark"] .kpi-badge-realtime { background: rgba(239,83,80,.15); color: var(--clr-accent); } .kpi-info-btn { background: none; border: none; padding: 2px; cursor: pointer; color: var(--clr-text-muted); font-size: 13px; line-height: 1; flex-shrink: 0; transition: color .15s; } .kpi-info-btn:hover { color: var(--clr-accent); } .kpi-info-panel { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 50; background: var(--clr-surface); border: 1px solid var(--clr-border); border-radius: var(--radius-md); padding: var(--sp-3); font-size: 12px; color: var(--clr-text-muted); display: flex; flex-direction: column; gap: var(--sp-2); box-shadow: var(--shadow-md); max-height: 60vh; overflow-y: auto; } .kpi-info-panel strong { color: var(--clr-text); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: .03em; } .kpi-info-panel p { margin: 0; line-height: 1.5; } .section-info-panel { position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 50; background: var(--clr-surface); border: 1px solid var(--clr-border); border-radius: var(--radius-md); padding: var(--sp-4); font-size: var(--text-sm); color: var(--clr-text-muted); display: flex; flex-direction: column; gap: var(--sp-3); box-shadow: var(--shadow-md); max-height: 60vh; overflow-y: auto; } .section-info-panel strong { color: var(--clr-text); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .03em; } .section-info-panel p { margin: 0; line-height: 1.5; } /* ── Graphiques ── */ .stats-charts-row { display: flex; gap: var(--sp-5); align-items: flex-start; } /* * Chart.js + maintainAspectRatio:false : le canvas remplit son conteneur CSS. * Règle d'or : donner une hauteur CSS EXPLICITE sur le conteneur wrapper, * jamais via l'attribut HTML height="" du canvas. */ .stats-chart-wrap { position: relative; width: 100%; height: 260px; } .stats-chart-wrap canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; } /* Graphique principal (barres + ligne) */ .stats-chart-wrap--lg { flex: 2; min-width: 0; height: 260px; } /* Trésorerie */ .stats-chart-wrap--treasury { flex: 1; min-width: 0; height: 240px; } /* Barmans — hauteur fournie en inline style sur le wrapper depuis le template */ .stats-chart-wrap--barmans { flex: 1; min-width: 0; } /* * Donut : wrapper indépendant (pas de stats-chart-wrap) pour ne pas hériter * de "canvas { position:absolute; inset:0 }". Le canvas est positionné en * flow normal, maintainAspectRatio:true + aspectRatio:1 → carré automatique. */ .stats-donut-wrap { flex: 0 0 210px; display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); } .stats-donut-body { display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); width: 100%; } .stats-donut-body canvas { width: 100% !important; display: block; } .stats-donut-label { font-size: 12px; font-weight: 600; color: var(--clr-text-muted); text-align: center; display: flex; align-items: center; justify-content: center; gap: var(--sp-2); width: 100%; } .stats-donut-rate { font-size: 18px; font-weight: 700; color: var(--clr-accent); } .stats-donut-sub { font-size: 11px; color: var(--clr-text-muted); text-align: center; line-height: 1.5; width: 100%; margin: 0; } /* ── Sous-sections stock ── */ .stats-subsection { display: flex; flex-direction: column; gap: var(--sp-2); } .stats-subsection__title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--clr-text-muted); margin: 0; display: flex; align-items: center; gap: var(--sp-2); } /* ── Tableaux ── */ .stats-table-wrap { border-radius: var(--radius-md); border: 1px solid var(--clr-border); overflow: hidden; } .stats-table-wrap--barmans { flex: 1; min-width: 0; } .stats-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); } .stats-table thead th { padding: 10px 14px; text-align: left; font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--clr-text-muted); background: var(--clr-surface-2); border-bottom: 1px solid var(--clr-border); white-space: nowrap; } .stats-table thead th.text-right { text-align: right; } .stats-table tbody td { padding: 11px 14px; border-bottom: 1px solid var(--clr-border); color: var(--clr-text); vertical-align: middle; } .stats-table tbody tr:last-child td { border-bottom: none; } .stats-table tbody tr:hover td { background: var(--clr-surface-2); } .stats-table td.text-right { text-align: right; } /* ── Trésorerie ── */ .stats-treasury-layout { display: flex; gap: var(--sp-5); align-items: flex-start; } .stats-treasury-panel { flex: 0 0 300px; display: flex; flex-direction: column; gap: var(--sp-3); } .stats-treasury-block { border-radius: var(--radius-md); padding: var(--sp-3) var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-2); } .stats-treasury-block--in { background: rgba(21,101,192,.06); border: 1px solid rgba(21,101,192,.18); } .stats-treasury-block--out { background: rgba(198,40,40,.05); border: 1px solid rgba(198,40,40,.15); } [data-theme="dark"] .stats-treasury-block--in { background: rgba(66,165,245,.07); border-color: rgba(66,165,245,.18); } [data-theme="dark"] .stats-treasury-block--out { background: rgba(239,83,80,.06); border-color: rgba(239,83,80,.15); } .stats-treasury-block__title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--clr-text-muted); display: flex; align-items: center; gap: var(--sp-1); } .stats-treasury-row { display: flex; justify-content: space-between; align-items: center; font-size: var(--text-sm); color: var(--clr-text); gap: var(--sp-4); } .stats-treasury-row span { color: var(--clr-text-muted); } .stats-treasury-row--positive strong { color: var(--clr-success); } .stats-treasury-total { display: flex; justify-content: space-between; align-items: center; font-size: 14px; font-weight: 700; padding-top: var(--sp-2); margin-top: var(--sp-1); border-top: 1px solid var(--clr-border); color: var(--clr-text); } .stats-treasury-solde { display: flex; justify-content: space-between; align-items: center; font-size: 15px; font-weight: 700; padding: var(--sp-3) var(--sp-4); border-radius: var(--radius-md); border: 2px solid; } .stats-treasury-solde--pos { background: rgba(46,125,50,.07); border-color: rgba(46,125,50,.3); color: var(--clr-success); } .stats-treasury-solde--neg { background: rgba(198,40,40,.07); border-color: rgba(198,40,40,.3); color: var(--clr-danger); } /* ── Stock jauges ── */ .stock-gauge-wrap { display: flex; flex-direction: column; gap: 4px; } .stock-gauge { height: 8px; background: var(--clr-border); border-radius: var(--radius-full); overflow: hidden; min-width: 110px; } /* Tinting de ligne selon le niveau de stock */ .stats-table .stock-row--empty td { background: rgba(211,47,47,.06); } .stats-table .stock-row--low td { background: rgba(211,47,47,.03); } .stats-table .stock-row--mid td { background: rgba(230,81,0,.03); } [data-theme="dark"] .stats-table .stock-row--empty td { background: rgba(224,82,82,.09); } [data-theme="dark"] .stats-table .stock-row--low td { background: rgba(224,82,82,.05); } [data-theme="dark"] .stats-table .stock-row--mid td { background: rgba(245,158,11,.05); } .stats-table .stock-row--empty:hover td, .stats-table .stock-row--low:hover td, .stats-table .stock-row--mid:hover td { filter: brightness(.95); } .stock-gauge__fill { height: 100%; background: var(--clr-success); border-radius: var(--radius-full); transition: width .4s; } .stock-gauge__fill--mid { background: var(--clr-warning); } .stock-gauge__fill--low { background: var(--clr-danger); } .stock-gauge__label { font-size: 11px; color: var(--clr-text-muted); white-space: nowrap; } .stats-empty { font-size: var(--text-sm); color: var(--clr-text-muted); text-align: center; padding: var(--sp-8) 0; } /* ══════════════════════════════════════════════════════════════ STOCK — Onglet Régularisations ══════════════════════════════════════════════════════════════ */ /* Badge rouge inline dans le label de l'onglet */ .stock-tab-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; padding: 0 4px; background: var(--clr-danger); color: #fff; font-size: 10px; font-weight: 700; border-radius: var(--radius-full); margin-left: 4px; line-height: 1; } /* État vide */ .reconcile-empty { display: flex; flex-direction: column; align-items: center; gap: var(--sp-3); padding: var(--sp-12) var(--sp-4); color: var(--clr-text-muted); text-align: center; } .reconcile-empty svg { opacity: .4; } .reconcile-empty p { font-size: var(--text-sm); margin: 0; } /* Liste de cartes */ .reconcile-list { display: flex; flex-direction: column; width: fit-content; gap: var(--sp-3); } /* Carte individuelle — layout 2 lignes */ .reconcile-card { background: var(--clr-surface); border: 1px solid var(--clr-border); border-radius: var(--radius-lg); padding: var(--sp-3) var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-2); } /* Ligne 1 : nom + unité + transaction + réceptionner */ .reconcile-card__top { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; } .reconcile-card__product { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--text-sm); flex: 1; min-width: 0; } .reconcile-card__qty { flex-shrink: 0; font-size: 11px; font-weight: 600; background: rgba(211, 47, 47, .1); color: var(--clr-danger); padding: 1px 6px; border-radius: var(--radius-full); } [data-theme="dark"] .reconcile-card__qty { background: rgba(224, 82, 82, .15); } .reconcile-card__meta { display: flex; align-items: center; gap: var(--sp-1); font-size: var(--text-xs); color: var(--clr-text-muted); flex-shrink: 0; } /* Bouton Réceptionner (compact, inline) */ .reconcile-card__receive-btn { display: flex; align-items: center; gap: var(--sp-1); flex-shrink: 0; padding: 3px var(--sp-2); background: none; border: 1px dashed var(--clr-border); border-radius: var(--radius-md); color: var(--clr-text-muted); font-size: var(--text-xs); font-family: inherit; cursor: pointer; transition: color .15s, border-color .15s; white-space: nowrap; } .reconcile-card__receive-btn:hover { color: var(--clr-accent); border-color: var(--clr-accent); } /* Ligne 2 : select lot + bouton Lier */ .reconcile-card__bottom { display: flex; align-items: center; justify-content: flex-end; gap: var(--sp-2); } .reconcile-card__select { flex: 1; min-width: 0; max-width: 450px; } /* Avertissement aucun lot éligible */ .reconcile-card__no-lots { display: flex; align-items: center; gap: var(--sp-1); font-size: var(--text-xs); color: var(--clr-warning); } /* Mobile : meta passe sous le nom, receive-btn reste en bout de ligne 1 */ @media (max-width: 640px) { .reconcile-card__top { flex-wrap: wrap; } .reconcile-card__receive-btn { margin-left: auto; } .reconcile-card__meta { order: 10; width: 100%; } .reconcile-card__select { max-width: none; } } /* ══════════════════════════════════════════════════════════════ RESPONSIVE STATISTIQUES ══════════════════════════════════════════════════════════════ */ @media (max-width: 900px) { .stats-kpi-grid { grid-template-columns: repeat(2, 1fr); } .stats-treasury-panel { flex: none; width: 100%; } .stats-treasury-layout { flex-direction: column; } .stats-chart-wrap--treasury { width: 100%; height: 220px; } /* Donut : réduire un peu sur tablette */ .stats-donut-wrap { flex: 0 0 185px; } } @media (max-width: 640px) { /* Alignement avec les autres pages : app-content fournit déjà 8px de padding, stats-page ne rajoute plus de padding horizontal pour éviter le double espacement */ .stats-page { padding: 0 0 var(--sp-6); gap: var(--sp-4); } .stats-section { padding: var(--sp-4) var(--sp-3); gap: var(--sp-4); } .stats-kpi-grid, .stats-kpi-grid-treasury { grid-template-columns: 1fr 1fr; gap: var(--sp-2); } .kpi-card { padding: var(--sp-3); } .kpi-card__value { font-size: 18px; } /* Grille 2 colonnes : panel élargi à min 280px. Colonne gauche (impair) : s'ouvre vers la droite. Colonne droite (pair) : s'ouvre vers la gauche pour ne pas déborder. */ .kpi-info-panel { left: 0; right: auto; width: min(280px, 82vw); } .stats-kpi-grid .kpi-card:nth-child(even) .kpi-info-panel, .stats-kpi-grid-treasury .kpi-card:nth-child(even) .kpi-info-panel { left: auto; right: 0; } /* Graphiques empilés verticalement */ .stats-charts-row { flex-direction: column; } .stats-chart-wrap--lg { height: 220px; } /* Donut : pleine largeur centré, hauteur auto (carré grâce à aspectRatio:1) */ .stats-donut-wrap { flex: none; width: 100%; max-width: 240px; margin: 0 auto; align-self: center; } /* Barmans : chart empilé au-dessus de la table */ .stats-chart-wrap--barmans { width: 100%; } .stats-table-wrap--barmans { width: 100%; } /* Tableaux : scroll horizontal — conserve la densité d'info sans carte spacieuse */ .stats-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; } .stats-table { min-width: 480px; } } /* ════════════════════════════════════════════════════════════════════ PAGE RECHARGER ════════════════════════════════════════════════════════════════════ */ .recharger-page { display: flex; justify-content: center; align-items: flex-start; padding: var(--sp-6) var(--sp-4); min-height: 100%; } .recharger-card { background: var(--clr-surface); border: 1px solid var(--clr-border); border-radius: var(--radius-lg); padding: var(--sp-8); width: 100%; max-width: 480px; display: flex; flex-direction: column; gap: var(--sp-6); } .recharger-header { display: flex; align-items: center; gap: var(--sp-4); color: var(--clr-accent); } .recharger-title { font-size: var(--text-lg); font-weight: 700; margin: 0; } .recharger-subtitle { font-size: var(--text-sm); color: var(--clr-text-muted); margin: 0; } .recharger-label { font-size: var(--text-sm); font-weight: 600; color: var(--clr-text-muted); margin: 0 0 var(--sp-3); } .recharger-amounts { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-2); } .recharger-amount-btn { cursor: pointer; display: flex; align-items: center; justify-content: center; } .recharger-amount-btn input[type="radio"] { display: none; } .recharger-amount-btn span { display: block; width: 100%; text-align: center; padding: var(--sp-3) var(--sp-2); border: 2px solid var(--clr-border); border-radius: var(--radius-md); font-size: var(--text-sm); font-weight: 600; background: var(--clr-surface-2); transition: border-color .15s, background .15s, color .15s; } .recharger-amount-btn input[type="radio"]:checked + span { border-color: var(--clr-accent); background: color-mix(in srgb, var(--clr-accent) 10%, var(--clr-surface)); color: var(--clr-accent); } .recharger-amount-btn--custom span { font-size: var(--text-xs); } .recharger-custom { display: flex; flex-direction: column; gap: var(--sp-2); } .recharger-hint { font-size: var(--text-xs); color: var(--clr-text-muted); margin: 0; } .recharger-submit { width: 100%; justify-content: center; margin-top: var(--sp-2); gap: var(--sp-2); } .recharger-notice { font-size: var(--text-xs); color: var(--clr-text-muted); text-align: center; margin: 0; line-height: 1.6; } .recharger-no-refund { display: flex; align-items: flex-start; gap: var(--sp-2); font-size: var(--text-xs); color: var(--clr-text-muted); background: var(--clr-surface-2); border: 1px solid var(--clr-border); border-radius: var(--radius-sm); padding: var(--sp-3); line-height: 1.6; margin: 0; } .recharger-no-refund svg { flex-shrink: 0; margin-top: 1px; } /* Résultats (confirmation / annulation) */ .recharger-result { display: flex; flex-direction: column; align-items: center; gap: var(--sp-3); text-align: center; padding: var(--sp-4) 0; } .recharger-result h2 { margin: 0; font-size: var(--text-lg); } .recharger-result--success { color: #2e7d32; } .recharger-result--pending { color: var(--clr-text-muted); } .recharger-result--cancel { color: var(--clr-danger); } .recharger-amount-display { font-size: 2rem; font-weight: 800; color: #2e7d32; margin: 0; } @media (max-width: 480px) { .recharger-card { padding: var(--sp-5) var(--sp-4); } .recharger-amounts { grid-template-columns: repeat(2, 1fr); } } /* ── Page Paramètres ─────────────────────────────────────────────────────── */ .settings-page { display: flex; flex-direction: column; gap: var(--sp-5); } .settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); } .settings-grid--3 { grid-template-columns: 1fr 1fr 1fr; } .settings-grid--full { grid-column: 1 / -1; } .settings-upload-preview { width: 100%; aspect-ratio: 1; max-height: 80px; object-fit: contain; border-radius: var(--radius-sm); border: 1px solid var(--clr-border); background: var(--clr-surface-2); padding: var(--sp-1); } .settings-upload-area { display: flex; flex-direction: column; gap: var(--sp-2); } .settings-upload-area .form-hint { margin: 0; } /* Badges */ .settings-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 100px; font-size: .72rem; font-weight: 600; vertical-align: middle; } .settings-badge--ok { background: #e8f5e9; color: #2e7d32; } .settings-badge--warn { background: #fff8e1; color: #f57c00; } .settings-badge--error { background: #fce4ec; color: #c62828; } [data-theme="dark"] .settings-badge--ok { background: rgba(46,125,50,.25); color: #81c784; } [data-theme="dark"] .settings-badge--warn { background: rgba(245,124,0,.2); color: #ffb74d; } [data-theme="dark"] .settings-badge--error { background: rgba(198,40,40,.25); color: #ef9a9a; } .settings-badge--lg { padding: var(--sp-2) var(--sp-3); font-size: .82rem; } /* Note d'info sous un formulaire */ .settings-note { padding: var(--sp-3) var(--sp-4); background: var(--clr-surface); border-radius: var(--radius-sm); border-left: 3px solid var(--clr-accent); font-size: .82rem; color: var(--clr-text-muted); } .settings-note a.link { color: var(--clr-accent); text-decoration: underline; } /* Tutoriels (étapes) */ .settings-tuto { padding: var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-5); font-size: .875rem; color: var(--clr-text-muted); } .settings-tuto__step { display: flex; gap: var(--sp-4); align-items: flex-start; } .settings-tuto__num { flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; background: var(--clr-accent); color: #fff; display: flex; align-items: center; justify-content: center; font-size: .75rem; font-weight: 700; margin-top: 1px; } .settings-tuto__code, .settings-tuto__pre { display: block; margin-top: var(--sp-2); background: var(--clr-surface); border: 1px solid var(--clr-border); border-radius: var(--radius-sm); padding: var(--sp-2) var(--sp-3); font-family: monospace; font-size: .8rem; color: var(--clr-text); white-space: pre; overflow-x: auto; } .settings-dl { display: grid; grid-template-columns: max-content 1fr; gap: 0; } .settings-dl dt, .settings-dl dd { padding: var(--sp-3) var(--sp-4); border-top: 1px solid var(--clr-border); margin: 0; font-size: .875rem; } .settings-dl dt { font-weight: 600; color: var(--clr-text-muted); font-size: .8rem; } /* Table BDD */ .settings-db-table-wrap { overflow-x: auto; margin-top: var(--sp-4); } .settings-db-table { width: 100%; border-collapse: collapse; font-size: .85rem; } .settings-db-table th, .settings-db-table td { padding: var(--sp-3) var(--sp-4); text-align: left; border-bottom: 1px solid var(--clr-border); } .settings-db-table th { font-weight: 600; font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; color: var(--clr-text-muted); background: var(--clr-surface); } /* Toggle */ .settings-toggle { display: flex; align-items: flex-start; gap: var(--sp-3); cursor: pointer; } .settings-toggle__input { display: none; } .settings-toggle__track { flex-shrink: 0; width: 40px; height: 22px; background: var(--clr-border); border-radius: 100px; position: relative; transition: background .2s; margin-top: 1px; } .settings-toggle__track::after { content: ''; position: absolute; left: 3px; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .2s; } .settings-toggle__input:checked ~ .settings-toggle__track { background: var(--clr-accent); } .settings-toggle__input:checked ~ .settings-toggle__track::after { transform: translateX(18px); } .settings-toggle__label { font-size: .875rem; } /* ── Responsive ── */ @media (max-width: 1023px) { .settings-grid { grid-template-columns: 1fr; } .settings-grid--3 { grid-template-columns: 1fr 1fr; } .settings-tuto__pre { font-size: .75rem; } } @media (max-width: 480px) { .settings-grid--3 { grid-template-columns: 1fr 1fr; } }