/* * BEJOY — Console front /espace * Portée de docs/mockup/style.css — couleurs tokenisées (var(--bj-*)), * classes préfixées `.bj-`, sélecteurs table scopés à .bj-tablewrap. * NE PAS modifier admin.css — ce fichier est indépendant. */ /* ── Reset minimal ─────────────────────────────────────── */ /* Plein écran réel : on annule le margin/padding par défaut du (≈8px du navigateur) — le thème le faisait avant, mais son CSS est neutralisé sur la console. Sans ça, un liseré blanc apparaît sur les 4 côtés. */ html, body.bejoy-espace-body { margin: 0; padding: 0 } body.bejoy-espace-body { background: var(--bj-bg) } .bj-shell *, .bj-shell *::before, .bj-shell *::after { box-sizing: border-box } /* ── Shell plein écran ─────────────────────────────────── */ .bj-shell { display: flex; min-height: 100vh; font-family: var(--bj-font); color: var(--bj-text); background: var(--bj-bg); font-size: 14px; -webkit-font-smoothing: antialiased } /* ── Sidebar ───────────────────────────────────────────── */ .bj-side { width: 248px; background: var(--bj-side-bg); border-right: 1px solid var(--bj-cr); display: flex; flex-direction: column; flex-shrink: 0; position: sticky; top: 0; height: 100vh } .bj-side__brand { display: flex; align-items: center; gap: 9px; font-weight: 500; font-size: 16px; padding: 16px 16px 6px } .bj-side__brand .logo { width: 24px; height: 24px; border-radius: 7px; background: var(--bj-clay); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 13px } .bj-side__nav { flex: 1; overflow-y: auto; padding: 8px 8px 16px } .bj-grp { font-size: 11px; letter-spacing: .09em; text-transform: uppercase; color: var(--bj-text-3); margin: 14px 10px 5px } .bj-nav { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; font-size: 13.5px; color: var(--bj-text-2); text-decoration: none; margin-bottom: 1px; transition: background var(--bj-dur-base) var(--bj-ease-out), color var(--bj-dur-base) var(--bj-ease-out) } .bj-nav i { font-size: 18px } .bj-nav:hover { background: rgba(51,41,36,.045); color: var(--bj-text) } /* Badge nav « Demandes » : nombre + clochette. Même définition visuelle que le chip « X demandes à traiter » de la barre de filtres Réservations. */ .bj-nav-badge { margin-left: auto; display: inline-flex; align-items: center; justify-content: center; gap: 3px; min-width: 18px; height: 18px; padding: 0 6px; border-radius: 999px; background: var(--bj-text); color: var(--bj-btn-fg); font-size: 11px; font-weight: 500 } .bj-nav-badge i { font-size: 12px } .bj-nav-badge__n { font-variant-numeric: tabular-nums; line-height: 1 } .bj-nav--on { background: rgba(51,41,36,.07); color: var(--bj-text); font-weight: 500 } .bj-side__foot { border-top: 1px solid var(--bj-cr); padding: 10px } .bj-side__foot a, .bj-side__foot button { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; font-size: 13.5px; color: var(--bj-text-2); text-decoration: none; width: 100%; text-align: left; background: none; border: 0; cursor: pointer; font-family: inherit } .bj-side__foot a:hover, .bj-side__foot button:hover { background: rgba(51,41,36,.045); color: var(--bj-text) } .bj-side__foot i { font-size: 18px } /* ── Zone de contenu ───────────────────────────────────── */ .bj-content { flex: 1; min-width: 0; background: var(--bj-content-bg); display: flex; flex-direction: column } .bj-pagebar { display: flex; align-items: center; gap: 14px; padding: 18px 28px 14px; flex-wrap: wrap } .bj-pagebar h1 { font-size: 22px; font-weight: 600; margin: 0; letter-spacing: -.01em } .bj-pagebar .spacer { flex: 1 } .bj-pagebar__actions { display: flex; align-items: center; gap: 8px } .bj-burger { display: none; background: none; border: 0; font-size: 22px; color: var(--bj-text); cursor: pointer; padding: 0 4px 0 0 } /* Cloche de notifications (pagebar équipe) : bouton + compteur + panneau déroulant. */ .bj-notif { position: relative; flex-shrink: 0 } .bj-notif__btn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border: 1px solid var(--bj-cr); border-radius: 10px; background: var(--bj-content-bg); color: var(--bj-text); cursor: pointer; transition: background var(--bj-dur-base) var(--bj-ease-out) } .bj-notif__btn:hover { background: var(--bj-hover) } .bj-notif__btn i { font-size: 19px } .bj-notif__count { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--bj-err); color: #fff; font-size: 11px; font-weight: 500; display: inline-flex; align-items: center; justify-content: center; border: 2px solid var(--bj-content-bg) } .bj-notif__panel { position: absolute; top: calc(100% + 8px); right: 0; width: 344px; max-width: calc(100vw - 32px); background: var(--bj-content-bg); border: 1px solid var(--bj-cr); border-radius: 14px; box-shadow: 0 12px 34px rgba(51,41,36,.14); z-index: 70; overflow: hidden } .bj-notif__panel[hidden] { display: none } .bj-notif__head { display: flex; justify-content: space-between; align-items: center; padding: 13px 15px; border-bottom: 1px solid var(--bj-cr) } .bj-notif__title { font-size: 14px; font-weight: 500; color: var(--bj-text) } .bj-notif__mark { background: none; border: 0; font-family: inherit; font-size: 12px; color: var(--bj-text-3); cursor: pointer } .bj-notif__mark:hover { color: var(--bj-text-2) } .bj-notif__list { max-height: 380px; overflow-y: auto } .bj-notif__it { display: flex; gap: 11px; padding: 12px 15px; border-bottom: 1px solid var(--bj-hover); text-decoration: none; color: inherit } .bj-notif__it:last-child { border-bottom: 0 } .bj-notif__it:hover { background: var(--bj-hover) } .bj-notif__it--unread { background: var(--bj-bg) } .bj-notif__ic { flex-shrink: 0; width: 32px; height: 32px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center } .bj-notif__ic i { font-size: 16px } .bj-notif__ic--demande { background: #EDEAFB; color: #5B48C2 } .bj-notif__ic--pack { background: #DFF3F0; color: #237A70 } .bj-notif__ic--paid { background: #E7F7DA; color: #357A2B } .bj-notif__ic--cancel { background: #FCEAEA; color: #BE3A2B } .bj-notif__b { min-width: 0; flex: 1 } .bj-notif__t { display: block; font-size: 13px; color: var(--bj-text) } .bj-notif__s { display: block; font-size: 12px; color: var(--bj-text-3); margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap } .bj-notif__dot { flex-shrink: 0; width: 7px; height: 7px; border-radius: 50%; background: var(--bj-err); margin-top: 6px } .bj-notif__empty { padding: 22px 15px; text-align: center; font-size: 13px; color: var(--bj-text-3); margin: 0 } /* Barre de filtres façon Stripe : DEUX rangées — onglets (chips) puis recherche pleine largeur. */ .bj-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 0 28px 16px } /* __tabs et __bar en pleine largeur → forcent leurs DEUX rangées (filtersBar) ; les filtres du calendrier (chips enfants directs, sans wrapper) restent en ligne. */ /* `min-width: 0` : sans lui, l'auto-min-size de ce conteneur flex vaut la largeur de son contenu → il refuse de rétrécir sous la largeur du segbar, et le `__scroll` déborde le viewport au lieu de défiler (bug PWA mobile). */ .bj-filters__tabs { flex: 1 1 100%; min-width: 0; display: flex; align-items: center; gap: 6px; flex-wrap: wrap } .bj-filters__bar { flex: 1 1 100%; display: flex; align-items: center; gap: 10px } .bj-filters__bar .bj-search { flex: 1 1 auto; max-width: none } /* Onglets/chips façon Stripe : inactif = texte simple ; actif = carte blanche bordurée + ombre légère (jamais d'aplat espresso). Partagé filtres/périodes/modes. */ .bj-chip { font-size: 13px; padding: 7px 13px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--bj-text-2); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; transition: background var(--bj-dur-base) var(--bj-ease-out), color var(--bj-dur-base) var(--bj-ease-out), box-shadow var(--bj-dur-base) var(--bj-ease-out) } .bj-chip:hover { background: var(--bj-hover); color: var(--bj-text) } .bj-chip i { font-size: 14px } .bj-chip--on { background: var(--bj-surface); color: var(--bj-text); border-color: var(--bj-cr); box-shadow: 0 1px 2px rgba(51,41,36,.05); font-weight: 500 } .bj-chip--on:hover { background: var(--bj-surface); color: var(--bj-text) } /* ── Contrôle segmenté des filtres d'état (façon Stripe Test/Production) ── Conteneur pilule GRIS CLAIR (--bj-hover) padding 3px ; segment actif = carte blanche bordée --bj-cr + ombre très discrète, texte 500 (JAMAIS 700) ; inactifs = texte secondaire, fond transparent. Hauteur totale 36px = boutons du DS (.bj-btn). Le wrapper `__scroll` porte le défilement horizontal mobile (PAS de wrap) sans casser l'arrondi ; scrollbar masquée. NB : `.bj-seg` (Réglages) est un AUTRE composant — noms distincts, zéro collision. */ .bj-segbar__scroll { max-width: 100%; min-width: 0; flex: 0 1 auto; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; border-radius: 12px } .bj-segbar__scroll::-webkit-scrollbar { display: none } .bj-segbar { display: inline-flex; align-items: center; gap: 2px; padding: 3px; min-height: 36px; background: var(--bj-hover); border-radius: 12px; white-space: nowrap } .bj-segbar__opt { display: inline-flex; align-items: center; gap: 6px; padding: 5px 13px; min-height: 30px; border: 1px solid transparent; border-radius: 9px; background: transparent; font-size: 13px; color: var(--bj-text-2); text-decoration: none; white-space: nowrap; cursor: pointer; -webkit-appearance: none; appearance: none; font-family: inherit; line-height: 1.2; margin: 0; transition: background var(--bj-dur-base) var(--bj-ease-out), color var(--bj-dur-base) var(--bj-ease-out), box-shadow var(--bj-dur-base) var(--bj-ease-out) } .bj-segbar__opt i { font-size: 14px } .bj-segbar__opt:hover { color: var(--bj-text); background: rgba(51,41,36,.05) } .bj-segbar__opt--on, .bj-segbar__opt--on:hover { background: var(--bj-surface); border-color: var(--bj-cr); color: var(--bj-text); font-weight: 500; box-shadow: 0 1px 2px rgba(51,41,36,.06) } .bj-search { flex: 0 1 320px; display: flex; align-items: center; gap: 8px; background: var(--bj-content-bg); border: 1px solid var(--bj-cr); border-radius: 8px; padding: 8px 14px; font-size: 13.5px; color: var(--bj-text); min-width: 200px } /* Barre unifiée : compteur « N résultats » poussé à droite (non capitalisé). */ .bj-filters .bj-count { margin-left: auto; text-transform: none; letter-spacing: 0; font-size: 12px; color: var(--bj-text-3) } .bj-search i { font-size: 16px; color: var(--bj-text-3) } .bj-search input { border: 0; outline: 0; background: transparent; font: inherit; color: var(--bj-text); width: 100% } .bj-search input::placeholder { color: var(--bj-text-3) } .bj-search:focus-within { border-color: var(--bj-text); box-shadow: 0 0 0 3px rgba(51,41,36,.10) } /* ── Select recherchable (combobox) façon Stripe — habille `select.bj-select`. ── */ .bj-cbx { position: relative; display: inline-block; min-width: 220px; vertical-align: top } .bj-cbx__btn { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; border: 1px solid var(--bj-cr); border-radius: 8px; background: var(--bj-content-bg); color: var(--bj-text); font: 400 13.5px var(--bj-font); cursor: pointer; text-align: left; transition: border-color .15s ease, box-shadow .15s ease } .bj-cbx__btn:hover { border-color: #d6cfc4 } /* Focus clavier : anneau DS (jamais l'outline bleu natif du navigateur). */ .bj-cbx__btn:focus-visible { outline: 0; border-color: var(--bj-text); box-shadow: 0 0 0 3px rgba(51,41,36,.10) } .bj-cbx.is-open .bj-cbx__btn { border-color: var(--bj-text); box-shadow: 0 0 0 3px rgba(51,41,36,.10) } .bj-cbx.is-invalid .bj-cbx__btn { border-color: var(--bj-err); box-shadow: 0 0 0 3px rgba(190,58,43,.12) } .bj-cbx__btn > .ti { color: var(--bj-text-3); font-size: 16px; flex: 0 0 auto } .bj-cbx__val { overflow: hidden; text-overflow: ellipsis; white-space: nowrap } .bj-cbx__val--ph { color: var(--bj-text-3) } /* `outline: 0` : le panneau reçoit un focus PROGRAMMATIQUE (tabindex -1, nav clavier ↑↓) — sans ça, liseré bleu natif du navigateur hors DS (bug signalé, filtre espace du calendrier). Le retour visuel reste porté par le bouton (état is-open) + l'option .is-active. `max-width` : jamais plus large que le viewport ; les classes --right/--up sont posées par espace-menufit.js. */ .bj-cbx__panel { position: absolute; z-index: 60; top: calc(100% + 6px); left: 0; right: 0; min-width: 220px; max-width: calc(100vw - 32px); outline: 0; background: var(--bj-content-bg); border: 1px solid var(--bj-cr); border-radius: 10px; box-shadow: 0 8px 28px rgba(51,41,36,.14); overflow: hidden } .bj-cbx__panel--right { left: auto; right: 0 } .bj-cbx__panel--up { top: auto; bottom: calc(100% + 6px) } .bj-cbx__search { padding: 8px; border-bottom: 1px solid var(--bj-cr) } .bj-cbx__search input { width: 100%; border: 0; outline: 0; background: transparent; font: 400 13.5px var(--bj-font); color: var(--bj-text); padding: 4px 6px } .bj-cbx__search input::placeholder { color: var(--bj-text-3) } .bj-cbx__list { list-style: none; margin: 0; padding: 4px; max-height: 260px; overflow-y: auto } .bj-cbx__opt { padding: 8px 10px; border-radius: 6px; font-size: 13.5px; color: var(--bj-text); cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis } .bj-cbx__opt:hover, .bj-cbx__opt.is-active { background: var(--bj-hover) } .bj-cbx__opt.is-sel { background: var(--bj-muted-bg); font-weight: 500 } /* Résultats de recherche client (popups « Nouvelle réservation » + pose de pack équipe) : liste-carte NETTE sous le champ — sans ces styles, les options s'affichaient en boutons nus quasi invisibles (bug signalé, pose de pack). */ .bj-client-results { margin-top: 6px; background: var(--bj-surface); border: 1px solid var(--bj-cr); border-radius: 10px; overflow: hidden; box-shadow: 0 6px 18px rgba(51,41,36,.10) } .bj-client-opt { display: block; width: 100%; text-align: left; padding: 11px 13px; background: none; border: 0; border-bottom: 1px solid var(--bj-cr); font: 500 13.5px var(--bj-font); color: var(--bj-text); cursor: pointer; transition: background var(--bj-dur-base) var(--bj-ease-out) } .bj-client-opt:last-child { border-bottom: 0 } .bj-client-opt:hover { background: var(--bj-hover) } .bj-client-empty { padding: 11px 13px; font-size: 13px; color: var(--bj-text-3) } .bj-cbx__opt.is-dis { color: var(--bj-text-3); cursor: default } .bj-cbx__empty { padding: 12px 10px; font-size: 13px; color: var(--bj-text-3); text-align: center } /* ── Toast de téléchargement (PDF facture) façon Stripe — bas-centre, spinner. ── */ .bj-dl-toast { position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 14px); z-index: 9999; display: flex; align-items: center; gap: 12px; max-width: min(92vw, 460px); padding: 13px 20px; border-radius: 12px; background: #3a3a44; color: #fff; font: 400 14px var(--bj-font); box-shadow: 0 14px 40px rgba(0,0,0,.30); opacity: 0; pointer-events: none; transition: opacity .2s var(--bj-ease-out), transform .2s var(--bj-ease-out) } .bj-dl-toast.is-on { opacity: 1; transform: translate(-50%, 0) } .bj-dl-toast__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap } .bj-dl-toast__spin { width: 16px; height: 16px; flex: 0 0 auto; border-radius: 50%; border: 2px solid rgba(255,255,255,.35); border-top-color: #fff; animation: bj-dl-spin .7s linear infinite } @keyframes bj-dl-spin { to { transform: rotate(360deg) } } @media (prefers-reduced-motion: reduce) { .bj-dl-toast__spin { animation-duration: 1.8s } .bj-dl-toast { transition: opacity .2s linear } } @media (max-width: 720px) { .bj-dl-toast { bottom: calc(72px + env(safe-area-inset-bottom, 0px)) } } /* Toast de RETOUR D'ACTION (avoir émis, payée, remboursée, erreur…) : même pilule que le toast de téléchargement, avec une icône colorée (vert succès / rouge erreur). */ .bj-toast { font-weight: 500 } .bj-toast i { font-size: 18px; flex: 0 0 auto } .bj-toast--ok i { color: #6ee7a8 } .bj-toast--err i { color: #ff9b8f } /* ── Boutons ───────────────────────────────────────────── */ /* Bouton façon Stripe : rectangle arrondi net, padding généreux (~42px de haut → tactile sans surcharge mobile), forme IDENTIQUE desktop/mobile. */ .bj-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; background: var(--bj-text); color: var(--bj-btn-fg); border: 0; border-radius: 9px; padding: 8px 16px; font: 500 13.5px var(--bj-font); cursor: pointer; text-decoration: none; white-space: nowrap; transition: background var(--bj-dur-base) var(--bj-ease-out), transform .08s var(--bj-ease-out) } .bj-btn i { font-size: 17px } .bj-btn:hover { background: #241c18 } .bj-btn:active { transform: scale(.97) } .bj-btn--ghost { background: transparent; color: var(--bj-text); border: 1px solid var(--bj-cr) } .bj-btn--ghost:hover { background: rgba(51,41,36,.04) } /* ── Contenu principal ─────────────────────────────────── */ /* `background` explicite : garantit le blanc même si une feuille héritée (admin.css sur les pages de config) tente d'y appliquer un fond crème. */ .bj-main { padding: 4px 28px 40px; background: var(--bj-content-bg) } /* ── KPIs ──────────────────────────────────────────────── */ .bj-kpis { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; margin-bottom: 22px } .bj-kpi { background: var(--bj-content-bg); border: 1px solid var(--bj-cr); border-radius: 12px; padding: 15px 18px } .bj-kpi__l { font-size: 12px; color: var(--bj-text-2); margin-bottom: 8px } .bj-kpi__v { font-size: 26px; font-weight: 600; font-variant-numeric: tabular-nums } .bj-kpi__s { font-size: 12px; color: var(--bj-text-2); margin-top: 5px; display: flex; align-items: center; gap: 5px } .bj-kpi__d { display: inline-flex; align-items: center; gap: 3px; font-weight: 500; font-variant-numeric: tabular-nums } .bj-kpi__d i { font-size: 14px } .bj-kpi__d.up { color: var(--bj-ok) } .bj-kpi__d.down { color: var(--bj-err) } /* ── Tableau — COMPOSANT CANONIQUE UNIQUE (par classe .bj-table, sûr pour * FullCalendar). `.bj-tablewrap` = conteneur bordé unique. ── */ /* Liste façon Stripe : pas de boîte autour, juste des lignes à filets fins. */ .bj-tablewrap { overflow-x: auto; border: 0; border-radius: 0; background: transparent } .bj-table { width: 100%; border-collapse: collapse; font-size: 13.5px } .bj-table th { text-align: left; font: 500 12px var(--bj-font); letter-spacing: 0; text-transform: none; color: var(--bj-text-3); padding: 12px 16px } .bj-table td { padding: 13px 16px; border-top: 1px solid var(--bj-cr); color: var(--bj-text); vertical-align: middle } .bj-table thead th { border-top: 0 } .bj-table tbody tr:hover { background: var(--bj-hover) } /* Ligne/carte cliquable (détail = page) : curseur + ouverture via JS (ConsoleShell). */ .bj-rowlink { cursor: pointer } .bj-table .num, .bj-table td.num, .bj-table .bj-num, .bj-table td.bj-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap } .bj-table th.num, .bj-table th.bj-num { text-align: right } .bj-table .mono { font-variant-numeric: tabular-nums; letter-spacing: .01em } /* ── Cellules client ───────────────────────────────────── */ .bj-cli { display: flex; align-items: center; gap: 10px } .bj-avatar { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; flex-shrink: 0 } .bj-avatar--img { background-size: cover; background-position: center } .bj-avatar--ph { background: var(--bj-muted-bg); color: var(--bj-text-3) } .bj-avatar--ph .ti { font-size: 15px } .bj-rcap { display: inline-flex; align-items: center; gap: 5px; color: var(--bj-text-2) } .bj-rcap .ti { font-size: 14px; color: var(--bj-text-3) } .bj-sub { color: var(--bj-text-2); font-size: 12.5px } /* Récap de l'invitation équipe (étape 2 de la modale). */ .bj-invite-recap { display: flex; align-items: center; gap: 8px; padding: 10px 12px; margin: 0 0 14px; border: 1px solid var(--bj-cr); border-radius: 9px; background: var(--bj-hover); font-size: 13px; font-weight: 500 } .bj-invite-recap .ti { font-size: 16px; color: var(--bj-text-3); flex: none } .bj-invite-recap .bj-sub { font-weight: 400 } /* Marqueur « journée de pack » dans une liste de réservations (prépayée). */ .bj-tag-pack { display: inline-flex; align-items: center; gap: 3px; margin-left: 6px; padding: 1px 7px; border-radius: 6px; background: var(--bj-muted-bg); color: var(--bj-text-2); font-size: 11px; font-weight: 500; vertical-align: 1px; white-space: nowrap } .bj-tag-pack .ti { font-size: 12px } /* Badges façon Stripe : rectangle arrondi + bordure colorée + fond teinté clair. */ .bj-badge { display: inline-flex; align-items: center; gap: 5px; font: 500 12px var(--bj-font); padding: 3px 9px; border-radius: 7px; border: 1px solid transparent; white-space: nowrap } .bj-badge .ti { font-size: 13px } /* icône optionnelle (badges abonnement/connecteurs) */ .bj-badge--ok { background: #E7F7DA; color: #357A2B; border-color: #C7E9A9 } /* Payée */ .bj-badge--warn { background: #FBF0D6; color: #97670F; border-color: #EFD9A4 } /* À régler */ .bj-badge--err { background: #FCEAEA; color: #BE3A2B; border-color: #F3C9C9 } /* En retard */ .bj-badge--muted { background: #EBEEF2; color: #4A5666; border-color: #D8DFE8 } /* Brouillon / Invité */ /* Destinataires d'e-mails (Réglages › E-mails) : une couleur par audience. */ .bj-badge--client { background: #E8F0FB; color: #2E5AAC; border-color: #CBDDF4 } /* Client */ .bj-badge--equipe { background: #EFEBFB; color: #5B48C2; border-color: #DAD1F3 } /* Équipe */ .bj-badge--owner { background: #DFF3F0; color: #237A70; border-color: #B7E4DD } /* Propriétaire */ .bj-badge--member { background: #E8F7DC; color: #3B7A2E; border-color: #C9E9AC } /* Membre */ /* Colonne « Total » façon Stripe : montant gras + badge de statut collé. */ .bj-total { display: inline-flex; align-items: center; gap: 9px } .bj-total .bj-amt { font-weight: 500; font-variant-numeric: tabular-nums } .bj-when { color: var(--bj-text-2) } /* Sous-titre carte facture (n° · échéance) : rendu UNIQUEMENT en carte mobile (voir bloc ≤720 px). Masqué sur desktop pour ne pas dédoubler le tableau. */ .bj-c-meta { display: none } /* Actions de ligne TOUJOURS visibles (réflexe utilisateur : on ne cache pas une action derrière le survol). Le survol ne fait que renforcer le contraste. */ .bj-rowact, .bj-row-actions { opacity: 1; transition: color .12s var(--bj-ease-out); background: none; border: 0; color: var(--bj-text-3); cursor: pointer; font-size: 18px } .bj-table tbody tr:hover .bj-rowact, .bj-table tbody tr:hover .bj-row-actions, .bj-rowact:hover, .bj-row-actions:hover { color: var(--bj-text) } /* Menu d'actions par ligne (factures…) + bouton danger (confirmations). */ .bj-rowwrap { position: relative; display: inline-block } .bj-rowwrap:focus-within .bj-rowact { opacity: 1 } .bj-rowmenu { position: absolute; top: calc(100% + 4px); right: 0; min-width: 210px; max-width: calc(100vw - 32px); background: var(--bj-content-bg); border: 1px solid var(--bj-cr); border-radius: 10px; box-shadow: 0 12px 34px rgba(51,41,36,.16); padding: 5px; z-index: 40; display: none; text-align: left } .bj-rowmenu.open { display: block } /* Ouverture vers le haut (dernières lignes : évite le rognage par .bj-tablewrap). */ .bj-rowmenu.up { top: auto; bottom: calc(100% + 4px) } .bj-rowmenu a, .bj-rowmenu button { display: flex; align-items: center; gap: 9px; width: 100%; background: none; border: 0; cursor: pointer; padding: 8px 10px; border-radius: 7px; font: 400 13px var(--bj-font); color: var(--bj-text); text-align: left; text-decoration: none } .bj-rowmenu a i, .bj-rowmenu button i { font-size: 17px; color: var(--bj-text-3); width: 18px; text-align: center } .bj-rowmenu a:hover, .bj-rowmenu button:hover { background: var(--bj-hover) } .bj-rowmenu__sep { height: 1px; background: var(--bj-cr); margin: 5px 2px } .bj-rowmenu button.danger, .bj-rowmenu button.danger i { color: var(--bj-err) } .bj-rowmenu button.danger:hover { background: var(--bj-err-bg) } /* Bouton danger : défini plus bas (.bj-btn--danger, outline rouge canonique du DS). */ .bj-confirm-body { font-size: 13.5px; color: var(--bj-text-2); line-height: 1.55; margin: 0 } .bj-confirm-body strong { color: var(--bj-text); font-weight: 500 } /* Emphase dans un texte muté (hints d'aide) : jamais 700 par défaut du navigateur. */ .bj-faint strong { font-weight: 500 } /* Note = callout sobre (surface tintée) plutôt que texte gris flottant. */ .bj-confirm-note { font-size: 12.5px; color: var(--bj-text-2); line-height: 1.5; margin: 12px 0 0; padding: 10px 12px; border-radius: 9px; background: rgba(51,41,36,.045); background: color-mix(in srgb, var(--bj-text) 4.5%, transparent) } /* Ancre visuelle du popup de confirmation : pastille icône (danger rouge / ok vert). */ .bj-confirm-ic { width: 40px; height: 40px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; font-size: 21px; flex-shrink: 0 } .bj-confirm-ic--danger { background: var(--bj-err-bg); color: var(--bj-err) } .bj-confirm-ic--ok { background: var(--bj-ok-bg); color: var(--bj-ok) } #bj-inv-confirm .bj-modal__name { font-size: 16px; font-weight: 600; line-height: 1.3 } /* Ligne d'information du popup d'annulation (phrase serveur facture/crédit) : légèrement plus présente que la note générique — c'est elle qui rassure. */ .bj-cancel-note { font-size: 13px; color: var(--bj-text-2) } /* Note (message du client) dans le détail d'une demande. */ .bj-dem-note-row { align-items: flex-start } .bj-dem-note-row .v { flex: 1 } .bj-dem-note { display: block; background: var(--bj-hover); border: 1px solid var(--bj-cr); border-radius: 9px; padding: 11px 13px; font-size: 13px; line-height: 1.55; color: var(--bj-text); margin-top: 2px; font-weight: 400 } .bj-dem-note--empty { color: var(--bj-text-3); font-style: italic } /* ── Miniliste ─────────────────────────────────────────── */ .bj-minilist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column } .bj-minilist li { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--bj-cr); font-size: 13px } .bj-minilist li:first-child { border-top: 0 } .bj-minilist .grow { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap } .bj-minilist .meta { color: var(--bj-text-2); font-variant-numeric: tabular-nums; white-space: nowrap } .bj-minilist .when { color: var(--bj-text-3); font-size: 12px; white-space: nowrap } /* ── Calendrier ────────────────────────────────────────── */ .bj-calbar { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap } /* Intégrée à la barre d'outils du calendrier (slot filtres) : pas de marge propre. */ .bj-filters .bj-calbar { margin: 0 } .bj-calbar__nav { display: inline-flex; border: 1px solid var(--bj-cr); border-radius: 8px; overflow: hidden } .bj-calbar__nav button { background: var(--bj-content-bg); border: 0; border-left: 1px solid var(--bj-cr); width: 34px; height: 34px; color: var(--bj-text); cursor: pointer; font-size: 18px; display: inline-flex; align-items: center; justify-content: center } .bj-calbar__nav button:first-child { border-left: 0 } .bj-calbar__nav button:hover { background: var(--bj-hover) } .bj-calbar__today { height: 34px; padding: 0 12px; border: 1px solid var(--bj-cr); border-radius: 8px; background: var(--bj-content-bg); color: var(--bj-text); font: 500 13px var(--bj-font); cursor: pointer } .bj-calbar__today:hover { background: var(--bj-hover) } .bj-calbar__label { font-size: 15px; font-weight: 500; color: var(--bj-text) } /* (Les anciennes règles de grille semaine faites main — .bj-cal__head/__body/ __gutter/__h/__col/__dh et le `.bj-cal` carte — ont été retirées : markup non utilisé, et `.bj-cal` entrait en conflit avec le date-picker du modal Nouvelle réservation, seul usage légitime de `.bj-cal` aujourd'hui.) */ /* Le calendrier est rendu par FullCalendar (#bj-espace-cal, instance .fc) — voir le bloc « FullCalendar » plus bas. Les anciennes règles de grille faites main (.bj-evt absolu, .bj-month*, .bj-mevt) ont été retirées : markup non utilisé et sélecteur nu `.bj-evt` qui fuyait sur les events FullCalendar. */ /* ── Formulaires (modaux) ───────────────────────────────── */ .bj-modal__title { font-size: 16px; font-weight: 600; margin: 0 } .bj-field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px } .bj-field > label { font-size: 12.5px; color: var(--bj-text-2) } /* Liste de mise en route (onglet Application) : une ligne = un réglage de CET appareil, avec son état à droite. L'ordre porte la dépendance (sur iPhone les notifications n'existent qu'une fois la PWA installée). */ .bj-applist { padding: 0; overflow: hidden } .bj-approw { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 15px 16px } .bj-approw + .bj-approw { border-top: 1px solid var(--bj-cr) } .bj-approw.is-off { opacity: .55 } .bj-approw__d { display: flex; flex-direction: column; min-width: 0 } .bj-approw__l { font-size: 14.5px; color: var(--bj-text) } .bj-approw__s { font-size: 12px; color: var(--bj-text-2); margin-top: 2px } .bj-approw__a { display: flex; align-items: center; gap: 10px; flex-shrink: 0 } .bj-approw__ok { font-size: 13px; color: #4E7A3E; display: flex; align-items: center; gap: 5px; white-space: nowrap } .bj-approw__mut { font-size: 12.5px; color: var(--bj-text-3); white-space: nowrap } @media (max-width: 480px) { .bj-approw { align-items: flex-start; flex-direction: column; gap: 10px } .bj-approw__a { width: 100% } } .bj-notify-opt { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 13px; color: var(--bj-text-2); cursor: pointer } .bj-notify-opt input { width: 15px; height: 15px; accent-color: var(--bj-text); cursor: pointer } .bj-field input, .bj-field select, .bj-field textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--bj-cr); border-radius: 8px; font: 400 13.5px var(--bj-font); background: var(--bj-content-bg); color: var(--bj-text); transition: border-color .15s ease, box-shadow .15s ease } .bj-field input:hover, .bj-field select:hover, .bj-field textarea:hover { border-color: #d6cfc4 } /* Focus façon Stripe : bordure accent + halo discret. */ .bj-field input:focus, .bj-field select:focus, .bj-field textarea:focus { outline: 0; border-color: var(--bj-text); box-shadow: 0 0 0 3px rgba(51,41,36,.10) } .bj-field textarea { min-height: 74px; resize: vertical } .bj-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px } /* `.bj-field` est en flex : sans cette règle, un champ masqué via [hidden] resterait affiché (piège connu : [hidden] vs display:flex). */ .bj-field[hidden] { display: none } .bj-field__legend { font-size: 12.5px; color: var(--bj-text-2) } /* Choix de portée du blocage : deux options radio empilées, cibles cliquables confortables, sélection soulignée discrètement (monochrome). */ .bj-radio-group { display: flex; flex-direction: column; gap: 6px } .bj-radio { display: flex; align-items: flex-start; gap: 9px; padding: 9px 11px; border: 1px solid var(--bj-cr); border-radius: 8px; cursor: pointer; font-size: 13.5px; color: var(--bj-text); transition: border-color .12s, background .12s } .bj-radio:hover { background: var(--bj-hover) } .bj-radio input { width: auto; margin: 2px 0 0; accent-color: var(--bj-clay) } .bj-radio em { font-style: normal; color: var(--bj-text-2) } .bj-radio:has(input:checked) { border-color: var(--bj-clay); background: var(--bj-muted-bg) } /* Modal « Nouvelle réservation » — flux guidé (offre → créneaux dispo) */ /* L'attribut [hidden] doit l'emporter sur les `display:flex/inline-flex` des classes ci-dessous (sinon les champs masqués restent visibles). */ .bj-field[hidden], .bj-mode-tag[hidden], .bj-recap[hidden], .bj-modal-err[hidden], .bj-client-new[hidden], .bj-client-results[hidden], .bj-daybox[hidden], .bj-btn[hidden], #bj-nb-step1[hidden], #bj-nb-step2[hidden], #bj-nb-billing-pay[hidden] { display: none } .bj-mode-tag { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--bj-text-2); background: var(--bj-hover); border-radius: 6px; padding: 2px 8px; margin-top: 5px; width: fit-content } .bj-slot-note { font-size: 11.5px; color: var(--bj-text-3); display: flex; align-items: center; gap: 5px; margin-top: 3px } .bj-slot-note i { font-size: 13px } .bj-daybox { background: var(--bj-hover); border: 1px solid var(--bj-cr); border-radius: 9px; padding: 10px 12px; font-size: 13px; color: var(--bj-text); display: flex; align-items: center; gap: 8px } .bj-daybox i { color: var(--bj-text-2); font-size: 17px } .bj-linkbtn { background: none; border: 0; color: var(--bj-clay); font: 500 12.5px var(--bj-font); cursor: pointer; padding: 4px 0; margin-top: 2px; text-align: left } .bj-client-pick { position: relative } /* `position:absolute` = REPLI (JS off). À l'affichage, le JS (pack-staff / calendrier) passe la liste en `position:fixed` via bjMenuFit.fixed : les modals ont un corps scrollable (.bj-nb-body / .bj-cmodal) qui rognerait la liste absolue (bug signalé : résultats coupés dans « Poser une journée »). Le scroll reste INTERNE à la liste (max-height), jamais au modal. */ .bj-client-results { position: absolute; left: 0; right: 0; top: calc(100% + 3px); background: var(--bj-content-bg); border: 1px solid var(--bj-cr); border-radius: 9px; box-shadow: 0 12px 30px rgba(51,41,36,.14); z-index: 5; max-height: 200px; overflow: auto; padding: 4px } /* min-height 44px : cible tactile confortable (une option = un doigt). */ .bj-client-opt { display: flex; align-items: center; box-sizing: border-box; min-height: 44px; width: 100%; text-align: left; background: none; border: 0; padding: 8px 10px; border-radius: 7px; font-size: 13px; color: var(--bj-text); cursor: pointer } .bj-client-opt:hover { background: var(--bj-hover) } .bj-client-empty { padding: 8px 10px; font-size: 12.5px; color: var(--bj-text-3) } .bj-client-new { display: flex; flex-direction: column; gap: 8px; margin-top: 8px } .bj-client-new input { width: 100%; padding: 9px 11px; border: 1px solid var(--bj-cr); border-radius: 8px; font: 400 13.5px var(--bj-font); background: var(--bj-content-bg); color: var(--bj-text); box-sizing: border-box } .bj-recap { background: #FBF7F1; border: 1px solid var(--bj-cr); border-radius: 10px; padding: 11px 13px; margin: 4px 0 2px; font-size: 13px; color: var(--bj-text) } .bj-recap__when { color: var(--bj-text-2); font-size: 12.5px; margin-bottom: 3px } .bj-recap__main { font-weight: 500 } .bj-recap__strike { color: var(--bj-text-3); text-decoration: line-through; margin-right: 6px } .bj-recap__discount { display: block; color: var(--bj-text-2); font-size: 12px; margin-top: 2px } /* Code promo (modal Nouvelle réservation) : champ + bouton Appliquer + message */ .bj-promo-row { display: flex; gap: 8px; align-items: stretch } .bj-promo-row input { flex: 1 } .bj-promo-row .bj-btn { white-space: nowrap; flex: none } .bj-promo-msg { font-size: 12px; margin-top: 5px } .bj-promo-msg[hidden] { display: none } .bj-promo-msg.is-ok { color: var(--bj-es, #2f6f4f) } .bj-promo-msg.is-err { color: var(--bj-err) } .bj-modal-err { background: var(--bj-err-bg); border: 1px solid rgba(166,64,47,.25); color: var(--bj-err); border-radius: 9px; padding: 9px 12px; font-size: 12.5px; margin-top: 10px } /* Étape 2 « Facturation » : options en cartes radio */ .bj-billing { display: flex; flex-direction: column; gap: 10px } .bj-radio { display: flex; align-items: flex-start; gap: 12px; padding: 13px 15px; border: 1px solid var(--bj-cr); border-radius: 11px; cursor: pointer; transition: border-color .12s var(--bj-ease-out) } .bj-radio:hover { border-color: var(--bj-text-3) } .bj-radio input { margin-top: 2px; flex-shrink: 0; width: auto; accent-color: var(--bj-text) } .bj-radio:has(input:checked) { border-color: var(--bj-text) } .bj-radio > span { display: flex; flex-direction: column; font-size: 13.5px; color: var(--bj-text); line-height: 1.3 } .bj-radio:has(input:checked) > span { font-weight: 500 } .bj-radio small { font-size: 11.5px; color: var(--bj-text-3); margin-top: 3px; font-weight: 400 } /* Calendrier de dates (jours fermés/complets/passés grisés) */ .bj-cal { border: 1px solid var(--bj-cr); border-radius: 10px; padding: 8px 10px 9px; background: var(--bj-content-bg) } .bj-cal__bar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px } .bj-cal__month { font-size: 12.5px; font-weight: 500; text-transform: capitalize } .bj-cal__nav { width: 24px; height: 24px; border: 1px solid var(--bj-cr); border-radius: 6px; background: var(--bj-content-bg); color: var(--bj-text); cursor: pointer; display: inline-flex; align-items: center; justify-content: center } .bj-cal__nav i { font-size: 15px } .bj-cal__nav:hover:not(:disabled) { background: var(--bj-hover) } .bj-cal__nav:disabled { opacity: .4; cursor: default } .bj-cal__dow { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; margin-bottom: 2px } .bj-cal__dow span { text-align: center; font-size: 10px; color: var(--bj-text-3); font-weight: 600 } .bj-cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; min-height: 180px } .bj-cal__day { height: 30px; display: flex; align-items: center; justify-content: center; font-size: 12.5px; border-radius: 6px; border: 0; background: none; padding: 0 } .bj-cal__day--empty { visibility: hidden } .bj-cal__day--off { color: var(--bj-text-3); opacity: .45; text-decoration: line-through } .bj-cal__day--ok { color: var(--bj-text); cursor: pointer } .bj-cal__day--ok:hover { background: var(--bj-hover) } .bj-cal__day.is-today { font-weight: 600; box-shadow: inset 0 0 0 1px var(--bj-cr) } .bj-cal__day.is-sel, .bj-cal__day.is-sel:hover { background: var(--bj-clay); color: #fff } /* ── Popup détail ───────────────────────────────────────── */ .bj-modal-scrim { position: fixed; inset: 0; background: rgba(38,28,23,.44); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); display: none; align-items: center; justify-content: center; z-index: 60; padding: 20px } .bj-modal-scrim.open { display: flex; animation: bjScrimIn .16s var(--bj-ease-out) both } .bj-cmodal { background: var(--bj-content-bg); border: 1px solid var(--bj-cr); border-radius: 16px; max-width: 380px; width: 100%; padding: 22px; box-shadow: 0 1px 2px rgba(38,28,23,.08), 0 12px 28px rgba(38,28,23,.14), 0 28px 64px rgba(38,28,23,.12); max-height: calc(100vh - 40px); max-height: calc(100dvh - 40px); overflow-y: auto } .bj-modal-scrim.open .bj-cmodal { animation: bjModalIn .22s var(--bj-ease-out) both } @keyframes bjScrimIn { from { opacity: 0 } to { opacity: 1 } } @keyframes bjModalIn { from { opacity: 0; transform: translateY(10px) scale(.975) } to { opacity: 1; transform: none } } @media (prefers-reduced-motion: reduce) { .bj-modal-scrim.open, .bj-modal-scrim.open .bj-cmodal { animation: none } } /* Modal « Nouvelle réservation » : en-tête + actions FIXES, corps scrollable — le CTA reste toujours visible quelle que soit la hauteur d'écran (responsive). */ #bj-modal-new .bj-cmodal { display: flex; flex-direction: column; overflow: hidden } #bj-modal-new .bj-modal__head { flex-shrink: 0 } /* Modal réservation : étapes courtes → on peut respirer (aéré). */ #bj-modal-new .bj-field { margin-bottom: 15px } .bj-nb-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; margin: 0 -20px; padding: 0 20px } #bj-modal-new .bj-modal__acts { flex-shrink: 0; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--bj-cr) } .bj-modal__head { display: flex; align-items: center; gap: 11px; margin-bottom: 16px } .bj-modal__head .bj-avatar { width: 40px; height: 40px; font-size: 14px } .bj-modal__name { font-size: 15px; font-weight: 500; margin: 0 } .bj-modal__sub { font-size: 12.5px; color: var(--bj-text-2); margin: 1px 0 0 } .bj-modal__close { margin-left: auto; background: none; border: 0; color: var(--bj-text-3); cursor: pointer; font-size: 20px; align-self: flex-start; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border-radius: 9px; transition: background .12s var(--bj-ease-out), color .12s var(--bj-ease-out) } .bj-modal__close:hover { background: color-mix(in srgb, var(--bj-text) 6%, transparent); color: var(--bj-text) } .bj-modal__rows { border-top: 1px solid var(--bj-cr); padding-top: 12px; display: flex; flex-direction: column; gap: 10px } .bj-modal__row { display: flex; align-items: center; gap: 10px; font-size: 13px } .bj-modal__row i { font-size: 17px; color: var(--bj-text-3); width: 18px; text-align: center } .bj-modal__row .k { color: var(--bj-text-2); min-width: 78px } .bj-modal__row .v { color: var(--bj-text); font-weight: 500 } .bj-modal__acts { display: flex; gap: 8px; margin-top: 18px } .bj-modal__acts .bj-btn { flex: 1; justify-content: center } /* Variante empilée : lien texte (action douce) au-dessus d'une rangée de boutons. */ .bj-modal__acts--stacked { flex-direction: column; align-items: stretch; gap: 12px } .bj-modal__actrow { display: flex; gap: 8px } .bj-modal__actrow .bj-btn { flex: 1; justify-content: center } .bj-modal__foot { display: flex; align-items: center; gap: 12px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--bj-cr) } .bj-modal__foot-acts { margin-left: auto; display: flex; gap: 8px } .bj-offer-del-confirm { align-items: center; gap: 8px; font-size: 13px; color: var(--bj-text-2) } .bj-btn--danger-ghost { color: var(--bj-err) } .bj-btn--danger-ghost:hover { background: #FCEAEA; border-color: #F3C9C9; color: var(--bj-err) } .bj-modal__textlink { align-self: center; background: none; border: 0; padding: 2px 4px; margin: 0; cursor: pointer; font: 500 13px var(--bj-font); color: var(--bj-text-2); display: inline-flex; align-items: center; gap: 6px; text-decoration: none } .bj-modal__textlink:hover { color: var(--bj-text); text-decoration: underline } .bj-modal__textlink i { font-size: 16px } /* ── Pagination ─────────────────────────────────────────── */ .bj-pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 4px 0; font-size: 13px; color: var(--bj-text-2); flex-wrap: wrap } .bj-pager__nav { display: flex; align-items: center; gap: 4px } .bj-pager__btn { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; height: 32px; padding: 0 9px; border: 1px solid var(--bj-cr); border-radius: 8px; background: var(--bj-content-bg); color: var(--bj-text); font: 500 13px var(--bj-font); cursor: pointer; text-decoration: none; transition: background var(--bj-dur-base) var(--bj-ease-out) } .bj-pager__btn:hover { background: var(--bj-hover) } .bj-pager__btn--on { background: var(--bj-text); color: var(--bj-btn-fg); border-color: var(--bj-text) } .bj-pager__btn[disabled] { opacity: .4; cursor: default; pointer-events: none } .bj-pager__dots { padding: 0 2px; color: var(--bj-text-3) } /* ── Scrim menu mobile ──────────────────────────────────── */ .bj-scrim { display: none; position: fixed; inset: 0; background: rgba(51,41,36,.35); z-index: 40; opacity: 0; transition: opacity var(--bj-dur-base) var(--bj-ease-out) } /* ── Responsive ─────────────────────────────────────────── */ @media (max-width: 960px) { /* Sidebar off-canvas */ .bj-side { position: fixed; left: 0; top: 0; z-index: 50; transform: translateX(-100%); transition: transform var(--bj-dur-base) var(--bj-ease-out); height: 100dvh } body.nav-open .bj-side { transform: translateX(0) } body.nav-open .bj-scrim { display: block; opacity: 1 } .bj-burger { display: inline-block } /* KPIs, grilles, panels */ .bj-kpis { grid-template-columns: repeat(2,1fr) } .bj-dash__kpis { grid-template-columns: repeat(2,1fr) } .bj-dash__grid { grid-template-columns: 1fr } /* Pagebar + filtres : espacement mobile + actions visibles */ .bj-pagebar, .bj-filters, .bj-main { padding-left: 18px; padding-right: 18px } .bj-pagebar { flex-wrap: wrap; gap: 10px } .bj-pagebar__actions { flex-wrap: wrap } .bj-filters { flex-wrap: wrap; gap: 8px } /* Recherche pleine largeur */ .bj-search { min-width: 0; flex: 1 1 100% } /* Tableau : colonnes secondaires masquées, scroll horizontal */ .bj-tablewrap .bj-table td.hide-sm, .bj-tablewrap .bj-table th.hide-sm { display: none } .bj-tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch } /* FullCalendar scrollable : c'est .bj-cal-fc qui scrolle en X et la VRAIE instance #bj-espace-cal (pas .bj-cal, qui est le date-picker du modal) qui garde une largeur min en vue SEMAINE (7 colonnes, illisible sinon). La vue JOUR (une seule colonne) ne force AUCUNE largeur → pas de scroll horizontal parasite sur 375px. Le Mois reste lisible en pastilles compactes sans largeur forcée. FullCalendar émet `fc-timeGridWeek-view` / `fc-timeGridDay-view` sur le conteneur de la vue courante ; on cible donc la seule Semaine. */ .bj-cal-fc { overflow-x: auto; -webkit-overflow-scrolling: touch } #bj-espace-cal:has(.fc-timeGridWeek-view) { min-width: 560px } /* Formulaires : champs côte-à-côte → colonne */ .bj-field-row { grid-template-columns: 1fr } /* Modal : lisible sur mobile */ .bj-cmodal { max-width: 100%; margin: 0 16px; padding: 16px } /* Barre calendrier mobile */ .bj-calbar { gap: 8px } /* Cibles tactiles ≥44px pour boutons de pagination */ .bj-pager__btn { min-height: 44px; min-width: 44px } /* Le bouton garde sa forme (déjà ~42px, tactile). Pas de surcharge mobile. */ .bj-calbar__nav button { width: 44px; height: 44px } .bj-calbar__today { height: 44px } } /* ===== App-like mobile : barre d'onglets du bas + ••• Plus + safe-area ===== */ .bj-tabbar, .bj-more { display: none } @media (max-width: 720px) { /* Encoche : décale le contenu sous la status bar en PWA (0 ailleurs). */ .bj-content { padding-top: env(safe-area-inset-top, 0px) } /* Barre d'onglets fixe en bas (téléphone). */ body.has-tabbar .bj-tabbar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 55; background: var(--bj-surface); border-top: 1px solid var(--bj-cr); justify-content: space-around; align-items: flex-start; padding: 13px 4px calc(18px + env(safe-area-inset-bottom, 0px)) } body.has-tabbar .bj-tabbar .bj-tab { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 2px; text-decoration: none; color: var(--bj-text-3); border-bottom: 0 } /* L'onglet « Plus » est un