/*!
* prettyBootstrap v1.0 — CSS Enhancement Layer for Bootstrap
* Compatible Bootstrap 4.x / 5.x | Prefix: .pb- | CSS vars: --pb-
* Usage: then
* Dark mode: data-theme="dark" on | data-theme="light" to force light
* Color override: add data-color="indigo" | data-color="rose" | etc.
* Icons: .pbi (compatible with Bootstrap Icons bi bi-*)
*
* New in prettyBootstrap:
* §26 Glass morphism cards & panels
* §27 Gradient utilities
* §28 Floating labels (inputs)
* §29 Command palette style search bar
* §30 Notification dot & counter badge
* §31 Responsive visibility helpers
* §32 Focus ring override
* §33 Text gradient utility
*/
/* ════════════════════════════════════════════════════════════════════
§0 DESIGN TOKENS — Palette Blue (default)
════════════════════════════════════════════════════════════════════ */
:root,
[data-color="blue"] {
--pb-h: 220;
--pb-s: 68%;
--pb-50: hsl(var(--pb-h),90%,97%);
--pb-100: hsl(var(--pb-h),85%,93%);
--pb-200: hsl(var(--pb-h),78%,84%);
--pb-300: hsl(var(--pb-h),70%,72%);
--pb-400: hsl(var(--pb-h),65%,58%);
--pb-500: hsl(var(--pb-h),var(--pb-s),46%);
--pb-600: hsl(var(--pb-h),72%,38%);
--pb-700: hsl(var(--pb-h),75%,30%);
--pb-800: hsl(var(--pb-h),78%,22%);
--pb-900: hsl(var(--pb-h),82%,14%);
}
/* ── Palettes alternatives ── */
[data-color="indigo"] { --pb-h:246; --pb-s:70%; }
[data-color="violet"] { --pb-h:265; --pb-s:74%; }
[data-color="purple"] { --pb-h:280; --pb-s:68%; }
[data-color="pink"] { --pb-h:330; --pb-s:72%; }
[data-color="rose"] { --pb-h:350; --pb-s:76%; }
[data-color="red"] { --pb-h:4; --pb-s:80%; }
[data-color="orange"] { --pb-h:25; --pb-s:90%; }
[data-color="amber"] { --pb-h:38; --pb-s:92%; }
[data-color="yellow"] { --pb-h:48; --pb-s:95%; }
[data-color="lime"] { --pb-h:82; --pb-s:78%; }
[data-color="green"] { --pb-h:142; --pb-s:72%; }
[data-color="teal"] { --pb-h:168; --pb-s:74%; }
[data-color="cyan"] { --pb-h:192; --pb-s:78%; }
[data-color="sky"] { --pb-h:202; --pb-s:80%; }
[data-color="slate"] { --pb-h:215; --pb-s:28%; }
/* ── Tokens de base light ── */
:root {
/* Surfaces */
--pb-bg: #ffffff;
--pb-bg-subtle: #f8f9fb;
--pb-bg-muted: #f1f3f7;
--pb-surface: #ffffff;
--pb-surface-2: #f8f9fb;
--pb-overlay: rgba(255,255,255,.96);
/* Textes */
--pb-text: #0f172a;
--pb-text-2: #475569;
--pb-text-3: #94a3b8;
--pb-text-inv: #ffffff;
/* Bordures */
--pb-border: #e2e8f0;
--pb-border-2: #cbd5e1;
--pb-ring: hsla(var(--pb-h),var(--pb-s),46%,.35);
/* Feedback */
--pb-success: #16a34a;
--pb-success-bg: #f0fdf4;
--pb-success-bd: #86efac;
--pb-warning: #d97706;
--pb-warning-bg: #fffbeb;
--pb-warning-bd: #fcd34d;
--pb-danger: #dc2626;
--pb-danger-bg: #fef2f2;
--pb-danger-bd: #fca5a5;
--pb-info: #0891b2;
--pb-info-bg: #ecfeff;
--pb-info-bd: #67e8f9;
/* Typo */
--pb-font: 'Sora','DM Sans',ui-sans-serif,system-ui,sans-serif;
--pb-font-mono: 'Fira Code','Cascadia Code',ui-monospace,monospace;
/* Radii */
--pb-r-xs: 3px;
--pb-r-sm: 6px;
--pb-r: 10px;
--pb-r-lg: 14px;
--pb-r-xl: 18px;
--pb-r-2xl: 24px;
--pb-r-pill:9999px;
/* Ombres */
--pb-sh-xs: 0 1px 2px rgba(0,0,0,.06);
--pb-sh-sm: 0 1px 3px rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.08);
--pb-sh: 0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.08);
--pb-sh-lg: 0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.07);
--pb-sh-xl: 0 20px 25px -5px rgba(0,0,0,.12),0 8px 10px -6px rgba(0,0,0,.07);
--pb-sh-2xl:0 25px 50px -12px rgba(0,0,0,.25);
/* Transitions */
--pb-ease: cubic-bezier(.4,0,.2,1);
--pb-spring: cubic-bezier(.34,1.56,.64,1);
--pb-t-fast: 120ms;
--pb-t: 200ms;
--pb-t-slow: 350ms;
/* Misc */
--pb-nav-h: 64px;
--pb-sidebar-w: 260px;
}
/* ════════════════════════════════════════════════════════════════════
§1 DARK MODE
════════════════════════════════════════════════════════════════════ */
/* ════════════════════════════════════════════════════════════════════
§1 DARK MODE (CORRIGÉ)
════════════════════════════════════════════════════════════════════ */
/* Définition des variables dark mode uniquement quand la classe/data-theme est active */
[data-theme="dark"] {
--pb-bg: #0b0f1a;
--pb-bg-subtle: #111827;
--pb-bg-muted: #1c2537;
--pb-surface: #141b2d;
--pb-surface-2: #1a2236;
--pb-overlay: rgba(11,15,26,.97);
--pb-text: #f1f5fb;
--pb-text-2: #94a3b8;
--pb-text-3: #4b5c73;
--pb-border: #1e2d45;
--pb-border-2: #2d3f5a;
--pb-success-bg: #052e16;
--pb-warning-bg: #1a0f00;
--pb-danger-bg: #1f0000;
--pb-info-bg: #001d24;
--pb-sh-xs: 0 1px 2px rgba(0,0,0,.4);
--pb-sh-sm: 0 1px 3px rgba(0,0,0,.5),0 1px 2px -1px rgba(0,0,0,.4);
--pb-sh: 0 4px 6px -1px rgba(0,0,0,.6),0 2px 4px -2px rgba(0,0,0,.4);
--pb-sh-lg: 0 10px 15px -3px rgba(0,0,0,.7),0 4px 6px -4px rgba(0,0,0,.4);
--pb-sh-xl: 0 20px 25px -5px rgba(0,0,0,.75),0 8px 10px -6px rgba(0,0,0,.4);
}
/* Mode sombre automatique selon la préférence système */
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--pb-bg: #0b0f1a;
--pb-bg-subtle: #111827;
--pb-bg-muted: #1c2537;
--pb-surface: #141b2d;
--pb-surface-2: #1a2236;
--pb-overlay: rgba(11,15,26,.97);
--pb-text: #f1f5fb;
--pb-text-2: #94a3b8;
--pb-text-3: #4b5c73;
--pb-border: #1e2d45;
--pb-border-2: #2d3f5a;
--pb-success-bg: #052e16;
--pb-warning-bg: #1a0f00;
--pb-danger-bg: #1f0000;
--pb-info-bg: #001d24;
--pb-sh-xs: 0 1px 2px rgba(0,0,0,.4);
--pb-sh-sm: 0 1px 3px rgba(0,0,0,.5),0 1px 2px -1px rgba(0,0,0,.4);
--pb-sh: 0 4px 6px -1px rgba(0,0,0,.6),0 2px 4px -2px rgba(0,0,0,.4);
--pb-sh-lg: 0 10px 15px -3px rgba(0,0,0,.7),0 4px 6px -4px rgba(0,0,0,.4);
--pb-sh-xl: 0 20px 25px -5px rgba(0,0,0,.75),0 8px 10px -6px rgba(0,0,0,.4);
}
}
/* Pour les éléments qui doivent toujours être en mode sombre (ex: preview) */
.pb-dark {
--pb-bg: #0b0f1a;
--pb-bg-subtle: #111827;
--pb-bg-muted: #1c2537;
--pb-surface: #141b2d;
--pb-surface-2: #1a2236;
--pb-overlay: rgba(11,15,26,.97);
--pb-text: #f1f5fb;
--pb-text-2: #94a3b8;
--pb-text-3: #4b5c73;
--pb-border: #1e2d45;
--pb-border-2: #2d3f5a;
--pb-success-bg: #052e16;
--pb-warning-bg: #1a0f00;
--pb-danger-bg: #1f0000;
--pb-info-bg: #001d24;
--pb-sh-xs: 0 1px 2px rgba(0,0,0,.4);
--pb-sh-sm: 0 1px 3px rgba(0,0,0,.5),0 1px 2px -1px rgba(0,0,0,.4);
--pb-sh: 0 4px 6px -1px rgba(0,0,0,.6),0 2px 4px -2px rgba(0,0,0,.4);
--pb-sh-lg: 0 10px 15px -3px rgba(0,0,0,.7),0 4px 6px -4px rgba(0,0,0,.4);
--pb-sh-xl: 0 20px 25px -5px rgba(0,0,0,.75),0 8px 10px -6px rgba(0,0,0,.4);
}
/* ════════════════════════════════════════════════════════════════════
§2 RESET CIBLÉ & BASE
════════════════════════════════════════════════════════════════════ */
.pb-base {
font-family: var(--pb-font);
color: var(--pb-text);
background: var(--pb-bg);
-webkit-font-smoothing: antialiased;
}
/* Applique la police sur body si .pb-apply est présent */
body.pb-apply,
html.pb-apply body {
font-family: var(--pb-font) !important;
background-color: var(--pb-bg) !important;
color: var(--pb-text) !important;
-webkit-font-smoothing: antialiased;
}
/* Scrollbar */
.pb-apply ::-webkit-scrollbar { width:8px; height:8px; }
.pb-apply ::-webkit-scrollbar-track { background:transparent; }
.pb-apply ::-webkit-scrollbar-thumb { background:var(--pb-border-2); border-radius:var(--pb-r-pill); }
.pb-apply ::-webkit-scrollbar-thumb:hover { background:var(--pb-text-3); }
/* Focus global */
.pb-apply :focus-visible { outline:2px solid hsl(var(--pb-h),var(--pb-s),46%); outline-offset:2px; }
/* Sélection */
.pb-apply ::selection { background:var(--pb-200); color:var(--pb-900); }
/* ════════════════════════════════════════════════════════════════════
§3 OVERRIDE BOOTSTRAP — rend Bootstrap "plus beau"
Les classes Bootstrap sont améliorées sans !important abusif
════════════════════════════════════════════════════════════════════ */
.pb-apply .btn,
.pb-apply .card,
.pb-apply .form-control,
.pb-apply .form-select,
.pb-apply .input-group-text,
.pb-apply .nav-link,
.pb-apply .navbar,
.pb-apply .badge,
.pb-apply .alert,
.pb-apply .modal-content,
.pb-apply .dropdown-menu,
.pb-apply .list-group-item,
.pb-apply .table {
font-family: var(--pb-font);
transition: all var(--pb-t) var(--pb-ease);
}
/* — Boutons Bootstrap améliorés — */
.pb-apply .btn {
border-radius: var(--pb-r-sm) !important;
font-weight: 600;
letter-spacing: .01em;
}
.pb-apply .btn-primary {
background-color: hsl(var(--pb-h),var(--pb-s),46%) !important;
border-color: hsl(var(--pb-h),var(--pb-s),46%) !important;
box-shadow: var(--pb-sh-xs);
}
.pb-apply .btn-primary:hover {
background-color: hsl(var(--pb-h),72%,38%) !important;
border-color: hsl(var(--pb-h),72%,38%) !important;
box-shadow: var(--pb-sh-sm);
transform: translateY(-1px);
}
.pb-apply .btn-secondary {
background-color: var(--pb-surface) !important;
border-color: var(--pb-border-2) !important;
color: var(--pb-text) !important;
}
.pb-apply .btn-secondary:hover {
background-color: var(--pb-bg-muted) !important;
transform: translateY(-1px);
}
.pb-apply .btn:active { transform: scale(.975) !important; }
.pb-apply .btn:focus-visible { box-shadow:0 0 0 3px var(--pb-ring) !important; }
/* — Cards Bootstrap améliorées — */
.pb-apply .card {
background: var(--pb-surface) !important;
border-color: var(--pb-border) !important;
border-radius: var(--pb-r-xl) !important;
box-shadow: var(--pb-sh-sm);
}
.pb-apply .card-header { background:var(--pb-bg-subtle) !important; border-color:var(--pb-border) !important; }
.pb-apply .card-footer { background:var(--pb-bg-subtle) !important; border-color:var(--pb-border) !important; }
/* — Form controls Bootstrap améliorés — */
.pb-apply .form-control,
.pb-apply .form-select {
background-color: var(--pb-surface) !important;
border-color: var(--pb-border-2) !important;
border-radius: var(--pb-r-sm) !important;
color: var(--pb-text) !important;
}
.pb-apply .form-control:focus,
.pb-apply .form-select:focus {
background-color: var(--pb-surface) !important;
border-color: hsl(var(--pb-h),var(--pb-s),46%) !important;
box-shadow: 0 0 0 3px var(--pb-ring) !important;
color: var(--pb-text) !important;
}
.pb-apply .form-control::placeholder { color:var(--pb-text-3) !important; }
/* — Navbar Bootstrap améliorée — */
.pb-apply .navbar {
backdrop-filter: blur(12px) saturate(180%);
-webkit-backdrop-filter: blur(12px) saturate(180%);
border-bottom: 1px solid var(--pb-border);
background: var(--pb-overlay) !important;
}
.pb-apply .navbar-brand { font-weight:800; font-family:var(--pb-font); }
/* — Dropdown Bootstrap amélioré — */
.pb-apply .dropdown-menu {
background: var(--pb-surface) !important;
border-color: var(--pb-border) !important;
border-radius: var(--pb-r-xl) !important;
box-shadow: var(--pb-sh-xl) !important;
padding: .4rem !important;
}
.pb-apply .dropdown-item {
border-radius: var(--pb-r-sm) !important;
color: var(--pb-text-2) !important;
font-size:.875rem !important;
font-weight:500;
}
.pb-apply .dropdown-item:hover,
.pb-apply .dropdown-item:focus {
background: var(--pb-bg-muted) !important;
color: var(--pb-text) !important;
}
/* — Modal Bootstrap améliorée — */
.pb-apply .modal-content {
background: var(--pb-surface) !important;
border:1px solid var(--pb-border) !important;
border-radius: var(--pb-r-2xl) !important;
box-shadow: var(--pb-sh-2xl) !important;
}
.pb-apply .modal-header { border-color:var(--pb-border) !important; }
.pb-apply .modal-footer { border-color:var(--pb-border) !important; background:var(--pb-bg-subtle) !important; border-radius:0 0 var(--pb-r-2xl) var(--pb-r-2xl) !important; }
/* — Tables Bootstrap améliorées — */
.pb-apply .table {
color:var(--pb-text) !important;
}
.pb-apply .table > :not(caption) > * > * {
background-color: transparent !important;
border-color: var(--pb-border) !important;
color: var(--pb-text) !important;
}
.pb-apply .table thead th {
font-size:.75rem !important;
font-weight:700 !important;
letter-spacing:.08em !important;
text-transform:uppercase !important;
color:var(--pb-text-3) !important;
background:var(--pb-bg-subtle) !important;
}
.pb-apply .table-hover > tbody > tr:hover > * { background-color:var(--pb-bg-muted) !important; }
/* — Badges Bootstrap améliorés — */
.pb-apply .badge {
border-radius: var(--pb-r-pill) !important;
font-weight:600 !important;
letter-spacing:.01em !important;
}
/* — Alerts Bootstrap améliorées — */
.pb-apply .alert { border-radius:var(--pb-r-lg) !important; font-size:.875rem !important; }
.pb-apply .alert-primary { background:var(--pb-50) !important; border-color:var(--pb-200) !important; color:var(--pb-700) !important; }
.pb-apply .alert-success { background:var(--pb-success-bg) !important; border-color:var(--pb-success-bd) !important; color:var(--pb-success) !important; }
.pb-apply .alert-warning { background:var(--pb-warning-bg) !important; border-color:var(--pb-warning-bd) !important; color:var(--pb-warning) !important; }
.pb-apply .alert-danger { background:var(--pb-danger-bg) !important; border-color:var(--pb-danger-bd) !important; color:var(--pb-danger) !important; }
/* — List groups Bootstrap — */
.pb-apply .list-group-item {
background:var(--pb-surface) !important;
border-color:var(--pb-border) !important;
color:var(--pb-text) !important;
}
.pb-apply .list-group-item:hover { background:var(--pb-bg-muted) !important; }
.pb-apply .list-group-item.active {
background:var(--pb-500) !important;
border-color:var(--pb-500) !important;
}
/* — Input group — */
.pb-apply .input-group-text {
background:var(--pb-bg-muted) !important;
border-color:var(--pb-border-2) !important;
color:var(--pb-text-2) !important;
border-radius: var(--pb-r-sm) !important;
}
/* — Tabs Bootstrap — */
.pb-apply .nav-tabs { border-color:var(--pb-border) !important; }
.pb-apply .nav-tabs .nav-link { color:var(--pb-text-2) !important; border-radius:var(--pb-r-sm) var(--pb-r-sm) 0 0 !important; border-color:transparent !important; }
.pb-apply .nav-tabs .nav-link.active { color:var(--pb-500) !important; border-bottom-color:var(--pb-500) !important; background:transparent !important; }
.pb-apply .nav-tabs .nav-link:hover { color:var(--pb-text) !important; }
/* — Pills Bootstrap — */
.pb-apply .nav-pills .nav-link { border-radius:var(--pb-r-sm) !important; color:var(--pb-text-2) !important; }
.pb-apply .nav-pills .nav-link.active { background:var(--pb-500) !important; }
/* — Progress Bootstrap — */
.pb-apply .progress { background:var(--pb-bg-muted) !important; border-radius:var(--pb-r-pill) !important; }
.pb-apply .progress-bar { background:var(--pb-500) !important; border-radius:var(--pb-r-pill) !important; }
/* — Accordion Bootstrap — */
.pb-apply .accordion-item { background:var(--pb-surface) !important; border-color:var(--pb-border) !important; }
.pb-apply .accordion-button { background:var(--pb-surface) !important; color:var(--pb-text) !important; font-weight:600; box-shadow:none !important; }
.pb-apply .accordion-button:not(.collapsed) { color:var(--pb-500) !important; background:var(--pb-50) !important; }
.pb-apply .accordion-button::after { filter:none; }
.pb-apply .accordion-button:focus { box-shadow:0 0 0 3px var(--pb-ring) !important; }
/* — Offcanvas Bootstrap — */
.pb-apply .offcanvas { background:var(--pb-surface) !important; border-color:var(--pb-border) !important; }
/* — Tooltips Bootstrap — */
.pb-apply .tooltip-inner { background:var(--pb-text) !important; border-radius:var(--pb-r-sm) !important; font-size:.75rem; }
/* ════════════════════════════════════════════════════════════════════
§4 TYPOGRAPHIE .pb-*
════════════════════════════════════════════════════════════════════ */
.pb-display { font-family:var(--pb-font); font-size:clamp(2.5rem,5vw,4rem); font-weight:900; letter-spacing:-.04em; line-height:1.1; color:var(--pb-text); }
.pb-h1 { font-family:var(--pb-font); font-size:clamp(1.75rem,3.5vw,3rem); font-weight:800; letter-spacing:-.03em; line-height:1.15; color:var(--pb-text); margin-bottom:1rem; }
.pb-h2 { font-family:var(--pb-font); font-size:clamp(1.5rem,3vw,2.25rem); font-weight:700; letter-spacing:-.025em; line-height:1.2; color:var(--pb-text); margin-bottom:.875rem; }
.pb-h3 { font-family:var(--pb-font); font-size:clamp(1.25rem,2.5vw,1.875rem); font-weight:700; letter-spacing:-.02em; line-height:1.25; color:var(--pb-text); margin-bottom:.75rem; }
.pb-h4 { font-family:var(--pb-font); font-size:1.25rem; font-weight:700; color:var(--pb-text); margin-bottom:.625rem; }
.pb-h5 { font-family:var(--pb-font); font-size:1.125rem; font-weight:600; color:var(--pb-text); margin-bottom:.5rem; }
.pb-h6 { font-family:var(--pb-font); font-size:1rem; font-weight:600; color:var(--pb-text); margin-bottom:.5rem; }
.pb-lead { font-size:clamp(1rem,2vw,1.25rem); color:var(--pb-text-2); line-height:1.75; }
.pb-muted { color:var(--pb-text-3) !important; }
.pb-caption { font-size:.75rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--pb-text-3); }
.pb-eyebrow { font-size:.7rem; font-weight:800; letter-spacing:.18em; text-transform:uppercase; color:var(--pb-500); }
.pb-code { font-family:var(--pb-font-mono); font-size:.875em; background:var(--pb-bg-muted); border:1px solid var(--pb-border); border-radius:var(--pb-r-xs); padding:.1em .4em; color:var(--pb-text); }
.pb-pre { font-family:var(--pb-font-mono); font-size:.85rem; background:var(--pb-surface); border:1px solid var(--pb-border); border-radius:var(--pb-r-lg); padding:1.5rem; overflow-x:auto; line-height:1.65; color:var(--pb-text); }
.pb-blockquote { margin:0; padding:1rem 1.5rem; border-left:3px solid var(--pb-400); background:var(--pb-bg-subtle); border-radius:0 var(--pb-r) var(--pb-r) 0; font-size:1.05rem; color:var(--pb-text-2); font-style:italic; }
/* Couleurs texte utilitaires */
.pb-text-primary { color:var(--pb-500) !important; }
.pb-text-success { color:var(--pb-success) !important; }
.pb-text-warning { color:var(--pb-warning) !important; }
.pb-text-danger { color:var(--pb-danger) !important; }
.pb-text-info { color:var(--pb-info) !important; }
.pb-text-body { color:var(--pb-text) !important; }
.pb-text-muted { color:var(--pb-text-3) !important; }
.pb-text-inverse { color:var(--pb-text-inv)!important; }
.pb-truncate { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pb-clamp-2 { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.pb-clamp-3 { display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
/* ════════════════════════════════════════════════════════════════════
§5 ICÔNES
Compatibles avec Bootstrap Icons (bi bi-*)
════════════════════════════════════════════════════════════════════ */
.pbi {
display:inline-flex; align-items:center; justify-content:center;
width:1em; height:1em; font-style:normal; font-size:inherit;
line-height:1; flex-shrink:0; vertical-align:middle;
}
/* Tailles utilitaires */
.pbi-xs { font-size:.75rem; }
.pbi-sm { font-size:1rem; }
.pbi-md { font-size:1.25rem;}
.pbi-lg { font-size:1.5rem; }
.pbi-xl { font-size:2rem; }
.pbi-2xl { font-size:2.5rem; }
/* Couleurs */
.pbi-primary { color:var(--pb-500); }
.pbi-success { color:var(--pb-success); }
.pbi-warning { color:var(--pb-warning); }
.pbi-danger { color:var(--pb-danger); }
.pbi-info { color:var(--pb-info); }
.pbi-muted { color:var(--pb-text-3); }
/* Wrapper carré */
.pbi-box {
display:inline-flex; align-items:center; justify-content:center;
width:2.5rem; height:2.5rem; border-radius:var(--pb-r);
background:var(--pb-bg-muted);
}
.pbi-box-primary { background:var(--pb-100); color:var(--pb-600); }
.pbi-box-success { background:var(--pb-success-bg); color:var(--pb-success); }
.pbi-box-warning { background:var(--pb-warning-bg); color:var(--pb-warning); }
.pbi-box-danger { background:var(--pb-danger-bg); color:var(--pb-danger); }
.pbi-box-info { background:var(--pb-info-bg); color:var(--pb-info); }
.pbi-box-sm { width:2rem; height:2rem; border-radius:var(--pb-r-sm); }
.pbi-box-lg { width:3rem; height:3rem; border-radius:var(--pb-r-lg); }
.pbi-box-xl { width:3.75rem;height:3.75rem;border-radius:var(--pb-r-xl); }
.pbi-box-circle { border-radius:50%; }
/* Spin / pulse */
.pbi-spin { animation:pb-spin .75s linear infinite; }
.pbi-pulse { animation:pb-pulse 2s ease infinite; }
/* ════════════════════════════════════════════════════════════════════
§6 BOUTONS .pb-btn-*
════════════════════════════════════════════════════════════════════ */
.pb-btn {
display:inline-flex; align-items:center; justify-content:center;
gap:.5rem;
font-family:var(--pb-font); font-size:.875rem; font-weight:600; line-height:1;
padding:.6rem 1.25rem; height:40px;
border:1.5px solid transparent; border-radius:var(--pb-r-sm);
cursor:pointer; user-select:none; white-space:nowrap; text-decoration:none;
transition:all var(--pb-t) var(--pb-ease);
position:relative; overflow:hidden;
}
.pb-btn:focus-visible { outline:none; box-shadow:0 0 0 3px var(--pb-ring); }
.pb-btn:disabled, .pb-btn.disabled { opacity:.5; pointer-events:none; }
.pb-btn:active:not(:disabled) { transform:scale(.975); }
/* Tailles */
.pb-btn-xs { height:28px; padding:.3rem .75rem; font-size:.75rem; border-radius:var(--pb-r-xs); }
.pb-btn-sm { height:32px; padding:.4rem 1rem; font-size:.8rem; border-radius:var(--pb-r-xs); }
.pb-btn-lg { height:48px; padding:.75rem 1.75rem; font-size:1rem; border-radius:var(--pb-r); }
.pb-btn-xl { height:56px; padding:1rem 2rem; font-size:1.05rem; border-radius:var(--pb-r-lg); }
.pb-btn-full{ width:100%; }
.pb-btn-icon{ width:40px; padding:0; }
.pb-btn-icon.pb-btn-sm { width:32px; }
.pb-btn-icon.pb-btn-lg { width:48px; }
.pb-btn-icon.pb-btn-xl { width:56px; }
.pb-btn-rounded { border-radius:var(--pb-r-pill) !important; }
/* Variantes */
.pb-btn-primary { background:var(--pb-500); color:#fff; border-color:var(--pb-500); box-shadow:var(--pb-sh-xs); }
.pb-btn-primary:hover { background:var(--pb-600); border-color:var(--pb-600); color:#fff; text-decoration:none; box-shadow:var(--pb-sh-sm); transform:translateY(-1px); }
.pb-btn-secondary { background:var(--pb-surface); color:var(--pb-text); border-color:var(--pb-border-2); }
.pb-btn-secondary:hover { background:var(--pb-bg-muted); color:var(--pb-text); text-decoration:none; }
.pb-btn-outline { background:transparent; color:var(--pb-500); border-color:var(--pb-400); }
.pb-btn-outline:hover { background:var(--pb-50); color:var(--pb-600); text-decoration:none; }
.pb-btn-soft { background:var(--pb-100); color:var(--pb-700); border-color:transparent; }
.pb-btn-soft:hover{ background:var(--pb-200); text-decoration:none; }
.pb-btn-ghost { background:transparent; color:var(--pb-text-2); border-color:transparent; }
.pb-btn-ghost:hover{ background:var(--pb-bg-muted); color:var(--pb-text); text-decoration:none; }
.pb-btn-danger { background:var(--pb-danger); color:#fff; border-color:var(--pb-danger); }
.pb-btn-danger:hover { background:#b91c1c; border-color:#b91c1c; color:#fff; text-decoration:none; }
.pb-btn-success { background:var(--pb-success); color:#fff; border-color:var(--pb-success); }
.pb-btn-success:hover{ background:#15803d; border-color:#15803d; color:#fff; text-decoration:none; }
.pb-btn-warning { background:var(--pb-warning); color:#fff; border-color:var(--pb-warning); }
.pb-btn-warning:hover{ background:#b45309; border-color:#b45309; color:#fff; text-decoration:none; }
.pb-btn-dark { background:var(--pb-text); color:var(--pb-bg); border-color:var(--pb-text); }
.pb-btn-dark:hover{ background:var(--pb-900); color:#fff; text-decoration:none; }
.pb-btn-white { background:#fff; color:var(--pb-700); border-color:var(--pb-200); box-shadow:var(--pb-sh-sm); }
.pb-btn-white:hover{ background:var(--pb-50); color:var(--pb-600); text-decoration:none; }
/* Loading */
.pb-btn-loading { pointer-events:none; }
.pb-btn-loading::after {
content:''; width:14px; height:14px; border-radius:50%;
border:2px solid rgba(255,255,255,.4); border-top-color:#fff;
animation:pb-spin .7s linear infinite; margin-left:2px;
}
.pb-btn-loading > *:not(.pb-spinner) { opacity:0; position:absolute; }
/* Groupe de boutons */
.pb-btn-group {
display:inline-flex;
}
.pb-btn-group .pb-btn { border-radius:0; }
.pb-btn-group .pb-btn:first-child { border-radius:var(--pb-r-sm) 0 0 var(--pb-r-sm); }
.pb-btn-group .pb-btn:last-child { border-radius:0 var(--pb-r-sm) var(--pb-r-sm) 0; }
.pb-btn-group .pb-btn + .pb-btn { margin-left:-1.5px; }
/* ════════════════════════════════════════════════════════════════════
§7 BADGES & TAGS .pb-badge-* / .pb-tag
════════════════════════════════════════════════════════════════════ */
.pb-badge {
display:inline-flex; align-items:center; gap:.25rem;
padding:.2rem .6rem; border-radius:var(--pb-r-pill);
font-size:.7rem; font-weight:700; letter-spacing:.02em; line-height:1.4; white-space:nowrap;
}
.pb-badge-primary { background:var(--pb-100); color:var(--pb-700); }
.pb-badge-success { background:var(--pb-success-bg); color:var(--pb-success); }
.pb-badge-warning { background:var(--pb-warning-bg); color:var(--pb-warning); }
.pb-badge-danger { background:var(--pb-danger-bg); color:var(--pb-danger); }
.pb-badge-info { background:var(--pb-info-bg); color:var(--pb-info); }
.pb-badge-neutral { background:var(--pb-bg-muted); color:var(--pb-text-2); }
.pb-badge-dark { background:var(--pb-text); color:var(--pb-bg); }
.pb-badge-outline { background:transparent; border:1.5px solid currentColor; }
/* Dot */
.pb-badge::before { display:none; }
.pb-badge-dot::before {
display:block; content:''; width:6px; height:6px;
border-radius:50%; background:currentColor; flex-shrink:0;
}
/* Solid */
.pb-badge-solid-primary { background:var(--pb-500); color:#fff; }
.pb-badge-solid-success { background:var(--pb-success); color:#fff; }
.pb-badge-solid-danger { background:var(--pb-danger); color:#fff; }
.pb-badge-solid-warning { background:var(--pb-warning); color:#fff; }
/* Size */
.pb-badge-lg { font-size:.8rem; padding:.3rem .8rem; }
/* Tag removable */
.pb-tag {
display:inline-flex; align-items:center; gap:.4rem;
padding:.2rem .7rem; border:1px solid var(--pb-border);
border-radius:var(--pb-r-pill); background:var(--pb-bg-muted);
font-size:.75rem; font-weight:500; color:var(--pb-text-2);
}
.pb-tag-close {
display:inline-flex; align-items:center; justify-content:center;
width:14px; height:14px; border-radius:50%; background:var(--pb-border-2);
border:none; cursor:pointer; font-size:10px; color:var(--pb-text-3);
transition:all var(--pb-t-fast) var(--pb-ease);
}
.pb-tag-close:hover { background:var(--pb-danger); color:#fff; }
/* ════════════════════════════════════════════════════════════════════
§8 CARTES .pb-card
════════════════════════════════════════════════════════════════════ */
.pb-card {
background:var(--pb-surface); border:1px solid var(--pb-border);
border-radius:var(--pb-r-xl); overflow:hidden;
transition:box-shadow var(--pb-t) var(--pb-ease), transform var(--pb-t) var(--pb-ease);
}
.pb-card-hover:hover { box-shadow:var(--pb-sh-xl); transform:translateY(-3px); cursor:pointer; }
.pb-card-raised { box-shadow:var(--pb-sh); }
.pb-card-flat { background:var(--pb-bg-subtle); border-color:transparent; }
.pb-card-glass {
background:rgba(255,255,255,.55);
backdrop-filter:blur(16px) saturate(180%);
-webkit-backdrop-filter:blur(16px) saturate(180%);
border-color:rgba(255,255,255,.4);
}
[data-theme="dark"] .pb-card-glass { background:rgba(20,27,45,.65); border-color:rgba(255,255,255,.08); }
.pb-card-border-primary { border-left:4px solid var(--pb-500) !important; }
.pb-card-border-success { border-left:4px solid var(--pb-success) !important; }
.pb-card-border-warning { border-left:4px solid var(--pb-warning) !important; }
.pb-card-border-danger { border-left:4px solid var(--pb-danger) !important; }
.pb-card-header {
display:flex; align-items:center; justify-content:space-between;
padding:1.25rem 1.5rem; border-bottom:1px solid var(--pb-border);
background:var(--pb-bg-subtle);
}
.pb-card-body { padding:1.5rem; }
.pb-card-body-sm { padding:1rem; }
.pb-card-body-lg { padding:2rem; }
.pb-card-footer {
padding:1rem 1.5rem; border-top:1px solid var(--pb-border);
background:var(--pb-bg-subtle);
display:flex; align-items:center; gap:.75rem;
}
.pb-card-media { width:100%; aspect-ratio:16/9; object-fit:cover; display:block; }
.pb-card-media-square { aspect-ratio:1; }
.pb-card-media-portrait { aspect-ratio:3/4; }
.pb-card-title { font-size:1.05rem; font-weight:700; color:var(--pb-text); margin:0 0 .375rem; }
.pb-card-subtitle { font-size:.8rem; color:var(--pb-text-3); margin:0; }
/* ════════════════════════════════════════════════════════════════════
§9 STAT / KPI CARDS .pb-stat
════════════════════════════════════════════════════════════════════ */
.pb-stat {
background:var(--pb-surface); border:1px solid var(--pb-border);
border-radius:var(--pb-r-xl); padding:1.5rem;
display:flex; flex-direction:column; gap:.5rem;
position:relative; overflow:hidden;
}
.pb-stat-icon {
position:absolute; top:1rem; right:1rem;
width:42px; height:42px; border-radius:var(--pb-r);
background:var(--pb-100); color:var(--pb-600);
display:flex; align-items:center; justify-content:center; font-size:1.2rem;
}
.pb-stat-icon-success { background:var(--pb-success-bg); color:var(--pb-success); }
.pb-stat-icon-warning { background:var(--pb-warning-bg); color:var(--pb-warning); }
.pb-stat-icon-danger { background:var(--pb-danger-bg); color:var(--pb-danger); }
.pb-stat-icon-info { background:var(--pb-info-bg); color:var(--pb-info); }
.pb-stat-label { font-size:.8rem; font-weight:600; color:var(--pb-text-3); letter-spacing:.03em; text-transform:uppercase; }
.pb-stat-value { font-size:2rem; font-weight:900; letter-spacing:-.04em; line-height:1; color:var(--pb-text); font-family:var(--pb-font); }
.pb-stat-value-lg { font-size:2.5rem; }
.pb-stat-value-sm { font-size:1.5rem; }
.pb-stat-change {
display:inline-flex; align-items:center; gap:.25rem;
font-size:.8rem; font-weight:700;
}
.pb-stat-up { color:var(--pb-success); }
.pb-stat-down { color:var(--pb-danger); }
.pb-stat-neutral { color:var(--pb-text-3); }
.pb-stat-footer {
margin-top:.5rem; padding-top:.75rem; border-top:1px solid var(--pb-border);
font-size:.78rem; color:var(--pb-text-3);
}
/* Variante colorée */
.pb-stat-primary { background:var(--pb-500); color:#fff; border-color:var(--pb-600); }
.pb-stat-primary .pb-stat-label, .pb-stat-primary .pb-stat-value,
.pb-stat-primary .pb-stat-change, .pb-stat-primary .pb-stat-footer { color:rgba(255,255,255,.9); }
.pb-stat-primary .pb-stat-icon { background:rgba(255,255,255,.2); color:#fff; }
/* ════════════════════════════════════════════════════════════════════
§10 FORMULAIRES .pb-input / .pb-select / .pb-textarea
════════════════════════════════════════════════════════════════════ */
.pb-form-group { margin-bottom:1.25rem; }
.pb-form-group:last-child { margin-bottom:0; }
.pb-label {
display:block; font-size:.825rem; font-weight:600;
color:var(--pb-text); margin-bottom:.4rem;
}
.pb-label-req::after { content:' *'; color:var(--pb-danger); }
.pb-input,
.pb-select,
.pb-textarea {
display:block; width:100%;
padding:.55rem .875rem;
font-family:var(--pb-font); font-size:.875rem;
color:var(--pb-text); background:var(--pb-surface);
border:1.5px solid var(--pb-border-2); border-radius:var(--pb-r-sm);
outline:none; -webkit-appearance:none; appearance:none;
transition:border-color var(--pb-t) var(--pb-ease), box-shadow var(--pb-t) var(--pb-ease);
}
.pb-input::placeholder, .pb-textarea::placeholder { color:var(--pb-text-3); }
.pb-input:hover, .pb-select:hover, .pb-textarea:hover { border-color:var(--pb-400); }
.pb-input:focus, .pb-select:focus, .pb-textarea:focus {
border-color:var(--pb-500); box-shadow:0 0 0 3px var(--pb-ring);
}
.pb-input-sm { padding:.35rem .7rem; font-size:.8rem; }
.pb-input-lg { padding:.75rem 1.1rem; font-size:1rem; }
.pb-input-error { border-color:var(--pb-danger) !important; }
.pb-input-error:focus { box-shadow:0 0 0 3px rgba(220,38,38,.25) !important; }
.pb-input-success { border-color:var(--pb-success) !important; }
.pb-textarea { min-height:100px; resize:vertical; padding:.7rem .875rem; }
.pb-select {
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
background-repeat:no-repeat; background-position:right .875rem center;
padding-right:2.5rem;
}
.pb-form-hint { font-size:.75rem; color:var(--pb-text-3); margin-top:.35rem; }
.pb-form-error { font-size:.75rem; color:var(--pb-danger); margin-top:.35rem; }
.pb-form-success { font-size:.75rem; color:var(--pb-success); margin-top:.35rem; }
/* Input avec icône */
.pb-input-wrap { position:relative; }
.pb-input-wrap .pb-input { padding-left:2.4rem; }
.pb-input-wrap .pb-input.has-right { padding-left:.875rem; padding-right:2.4rem; }
.pb-input-wrap .pb-input-icon {
position:absolute; top:50%; left:.75rem; transform:translateY(-50%);
color:var(--pb-text-3); pointer-events:none; font-size:1rem;
}
.pb-input-wrap .pb-input-icon.right { left:auto; right:.75rem; }
/* Input group custom */
.pb-input-group { display:flex; align-items:stretch; }
.pb-input-group .pb-input { border-radius:0; flex:1; min-width:0; z-index:1; }
.pb-input-group .pb-input:first-child { border-radius:var(--pb-r-sm) 0 0 var(--pb-r-sm); }
.pb-input-group .pb-input:last-child { border-radius:0 var(--pb-r-sm) var(--pb-r-sm) 0; }
.pb-input-group .pb-btn { border-radius:0 var(--pb-r-sm) var(--pb-r-sm) 0; }
.pb-input-group .pb-btn:first-child { border-radius:var(--pb-r-sm) 0 0 var(--pb-r-sm); }
.pb-input-group-text {
display:flex; align-items:center; padding:0 .875rem;
background:var(--pb-bg-muted); border:1.5px solid var(--pb-border-2);
font-size:.875rem; color:var(--pb-text-2); white-space:nowrap;
}
.pb-input-group-text:first-child { border-radius:var(--pb-r-sm) 0 0 var(--pb-r-sm); border-right:none; }
.pb-input-group-text:last-child { border-radius:0 var(--pb-r-sm) var(--pb-r-sm) 0; border-left:none; }
/* Checkbox & Radio */
.pb-check, .pb-radio {
display:flex; align-items:flex-start; gap:.625rem; cursor:pointer; user-select:none;
}
.pb-check-input, .pb-radio-input {
width:18px; height:18px; flex-shrink:0; margin-top:1px;
border:2px solid var(--pb-border-2); background:var(--pb-surface);
cursor:pointer; appearance:none; -webkit-appearance:none;
transition:all var(--pb-t) var(--pb-ease);
}
.pb-check-input { border-radius:4px; }
.pb-radio-input { border-radius:50%; }
.pb-check-input:checked {
background:var(--pb-500); border-color:var(--pb-500);
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' d='M3 8l3.5 3.5L13 5'/%3E%3C/svg%3E");
background-size:11px; background-repeat:no-repeat; background-position:center;
}
.pb-radio-input:checked { border-color:var(--pb-500); background:radial-gradient(circle, var(--pb-500) 42%, transparent 42%); }
.pb-check-label, .pb-radio-label { font-size:.875rem; color:var(--pb-text); line-height:1.5; }
/* Toggle */
.pb-toggle { display:flex; align-items:center; gap:.625rem; cursor:pointer; user-select:none; }
.pb-toggle-input { display:none; }
.pb-toggle-track {
width:44px; height:24px; border-radius:var(--pb-r-pill);
background:var(--pb-border-2); position:relative; flex-shrink:0;
transition:background var(--pb-t) var(--pb-ease);
}
.pb-toggle-thumb {
position:absolute; top:3px; left:3px;
width:18px; height:18px; border-radius:50%; background:#fff;
box-shadow:var(--pb-sh-sm);
transition:transform var(--pb-t) var(--pb-spring);
}
.pb-toggle-input:checked ~ .pb-toggle-track { background:var(--pb-500); }
.pb-toggle-input:checked ~ .pb-toggle-track .pb-toggle-thumb { transform:translateX(20px); }
.pb-toggle-label { font-size:.875rem; font-weight:500; color:var(--pb-text); }
/* Range */
.pb-range {
width:100%; height:6px; border-radius:var(--pb-r-pill);
background:var(--pb-bg-muted); outline:none; appearance:none; -webkit-appearance:none; cursor:pointer;
}
.pb-range::-webkit-slider-thumb {
-webkit-appearance:none; width:20px; height:20px; border-radius:50%;
background:var(--pb-500); border:2.5px solid #fff; box-shadow:var(--pb-sh);
cursor:pointer; transition:transform var(--pb-t) var(--pb-spring);
}
.pb-range::-webkit-slider-thumb:hover { transform:scale(1.2); }
.pb-range::-moz-range-thumb {
width:20px; height:20px; border-radius:50%;
background:var(--pb-500); border:2.5px solid #fff; box-shadow:var(--pb-sh);
}
/* ════════════════════════════════════════════════════════════════════
§11 NAVIGATION .pb-nav / .pb-navbar / .pb-sidebar
════════════════════════════════════════════════════════════════════ */
.pb-navbar {
height:var(--pb-nav-h); position:sticky; top:0; z-index:1030;
background:var(--pb-overlay);
backdrop-filter:blur(14px) saturate(200%); -webkit-backdrop-filter:blur(14px) saturate(200%);
border-bottom:1px solid var(--pb-border);
display:flex; align-items:center;
}
.pb-navbar-inner {
display:flex; align-items:center; justify-content:space-between; gap:2rem; width:100%;
}
.pb-navbar-brand {
font-family:var(--pb-font); font-size:1.2rem; font-weight:900;
color:var(--pb-text); text-decoration:none; white-space:nowrap;
letter-spacing:-.02em;
}
.pb-navbar-brand:hover { color:var(--pb-500); text-decoration:none; }
.pb-navbar-nav { display:flex; align-items:center; gap:.25rem; list-style:none; margin:0; padding:0; }
.pb-nav-link {
display:flex; align-items:center; gap:.375rem;
padding:.45rem .75rem; border-radius:var(--pb-r-sm);
font-size:.875rem; font-weight:500; color:var(--pb-text-2);
text-decoration:none; transition:all var(--pb-t) var(--pb-ease);
white-space:nowrap;
}
.pb-nav-link:hover { background:var(--pb-bg-muted); color:var(--pb-text); text-decoration:none; }
.pb-nav-link.active { color:var(--pb-500); background:var(--pb-50); }
.pb-nav-link-pill.active { background:var(--pb-500); color:#fff; }
.pb-navbar-actions { display:flex; align-items:center; gap:.75rem; flex-shrink:0; }
/* Sidebar */
.pb-sidebar {
width:var(--pb-sidebar-w); height:100vh; position:sticky; top:0;
overflow-y:auto; background:var(--pb-surface); border-right:1px solid var(--pb-border);
display:flex; flex-direction:column; flex-shrink:0;
transition:width var(--pb-t) var(--pb-ease);
}
.pb-sidebar-collapsed { width:66px; }
.pb-sidebar-collapsed .pb-sidebar-label,
.pb-sidebar-collapsed .pb-sidebar-title,
.pb-sidebar-collapsed .pb-sidebar-section-title { opacity:0; width:0; overflow:hidden; }
.pb-sidebar-section { padding:.75rem .625rem; }
.pb-sidebar-title {
font-size:.65rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
color:var(--pb-text-3); padding:.25rem .625rem; margin-bottom:.25rem;
}
.pb-sidebar-item {
display:flex; align-items:center; gap:.75rem;
padding:.5rem .75rem; border-radius:var(--pb-r-sm);
font-size:.875rem; font-weight:500; color:var(--pb-text-2);
text-decoration:none; cursor:pointer; border:none; background:none; width:100%; text-align:left;
transition:all var(--pb-t) var(--pb-ease);
}
.pb-sidebar-item:hover { background:var(--pb-bg-muted); color:var(--pb-text); text-decoration:none; }
.pb-sidebar-item.active { background:var(--pb-50); color:var(--pb-600); font-weight:600; }
[data-theme="dark"] .pb-sidebar-item.active { background:rgba(99,149,255,.12); color:var(--pb-300); }
.pb-sidebar-item-badge { margin-left:auto; }
.pb-sidebar-divider { height:1px; background:var(--pb-border); margin:.5rem .625rem; }
/* Tabs */
.pb-tabs { display:flex; border-bottom:1px solid var(--pb-border); overflow-x:auto; scrollbar-width:none; }
.pb-tabs::-webkit-scrollbar { display:none; }
.pb-tab {
padding:.7rem 1rem; font-size:.875rem; font-weight:500; color:var(--pb-text-2);
background:none; border:none; border-bottom:2px solid transparent; cursor:pointer;
white-space:nowrap; margin-bottom:-1px;
transition:all var(--pb-t) var(--pb-ease);
}
.pb-tab:hover { color:var(--pb-text); }
.pb-tab.active { color:var(--pb-500); border-bottom-color:var(--pb-500); }
/* Pill tabs */
.pb-tabs-pills { border-bottom:none; background:var(--pb-bg-muted); padding:.25rem; border-radius:var(--pb-r-lg); width:fit-content; gap:.25rem; }
.pb-tabs-pills .pb-tab { border-radius:var(--pb-r-sm); border-bottom:none; margin-bottom:0; padding:.4rem 1rem; }
.pb-tabs-pills .pb-tab.active { background:var(--pb-surface); color:var(--pb-text); box-shadow:var(--pb-sh-sm); }
/* Tabs verticales */
.pb-tabs-vertical { flex-direction:column; border-bottom:none; border-right:1px solid var(--pb-border); overflow:visible; }
.pb-tabs-vertical .pb-tab { border-bottom:none; border-right:2px solid transparent; margin-bottom:0; margin-right:-1px; text-align:left; }
.pb-tabs-vertical .pb-tab.active { border-right-color:var(--pb-500); background:var(--pb-50); }
/* Breadcrumb */
.pb-breadcrumb { display:flex; align-items:center; flex-wrap:wrap; gap:.375rem; list-style:none; margin:0; padding:0; font-size:.825rem; }
.pb-breadcrumb-item { display:flex; align-items:center; gap:.375rem; color:var(--pb-text-3); }
.pb-breadcrumb-item a { color:var(--pb-text-2); text-decoration:none; }
.pb-breadcrumb-item a:hover { color:var(--pb-text); }
.pb-breadcrumb-item.active { color:var(--pb-text); font-weight:500; }
.pb-breadcrumb-sep { color:var(--pb-text-3); }
/* ════════════════════════════════════════════════════════════════════
§12 ALERTES & FEEDBACK .pb-alert / .pb-toast
════════════════════════════════════════════════════════════════════ */
.pb-alert {
display:flex; gap:1rem; padding:1rem 1.25rem;
border-radius:var(--pb-r-lg); border:1px solid transparent; font-size:.875rem;
}
.pb-alert-icon { flex-shrink:0; font-size:1.1rem; margin-top:.1rem; }
.pb-alert-body { flex:1; }
.pb-alert-title { font-weight:700; margin-bottom:.2rem; font-size:.9rem; }
.pb-alert-close { flex-shrink:0; background:none; border:none; cursor:pointer; opacity:.5; padding:0; font-size:1rem; color:currentColor; }
.pb-alert-close:hover { opacity:1; }
.pb-alert-primary { background:var(--pb-50); color:var(--pb-700); border-color:var(--pb-200); }
.pb-alert-success { background:var(--pb-success-bg); color:var(--pb-success); border-color:var(--pb-success-bd); }
.pb-alert-warning { background:var(--pb-warning-bg); color:var(--pb-warning); border-color:var(--pb-warning-bd); }
.pb-alert-danger { background:var(--pb-danger-bg); color:var(--pb-danger); border-color:var(--pb-danger-bd); }
.pb-alert-info { background:var(--pb-info-bg); color:var(--pb-info); border-color:var(--pb-info-bd); }
.pb-alert-neutral { background:var(--pb-bg-subtle); color:var(--pb-text-2); border-color:var(--pb-border); }
/* Filled */
.pb-alert-filled-success { background:var(--pb-success); color:#fff; border-color:var(--pb-success); }
.pb-alert-filled-danger { background:var(--pb-danger); color:#fff; border-color:var(--pb-danger); }
.pb-alert-filled-warning { background:var(--pb-warning); color:#fff; border-color:var(--pb-warning); }
.pb-alert-filled-info { background:var(--pb-info); color:#fff; border-color:var(--pb-info); }
/* Toast Container - gardez votre code existant */
.pb-toast-wrap {
position: fixed;
z-index: 1090;
display: flex;
flex-direction: column;
gap: .75rem;
pointer-events: none;
max-width: 420px;
width: calc(100% - 3rem);
}
.pb-toast-wrap.top-right { top: 1.5rem; right: 1.5rem; }
.pb-toast-wrap.top-left { top: 1.5rem; left: 1.5rem; }
.pb-toast-wrap.bottom-right { bottom: 1.5rem; right: 1.5rem; }
.pb-toast-wrap.bottom-left { bottom: 1.5rem; left: 1.5rem; }
.pb-toast-wrap.top-center { top: 1.5rem; left: 50%; transform: translateX(-50%); }
/* Toast Item - Version avec animations */
.pb-toast {
pointer-events: all;
display: flex;
align-items: flex-start;
gap: .75rem;
padding: 1rem 1.25rem;
background: var(--pb-surface-2);
border: 1px solid var(--pb-border);
border-radius: var(--pb-r-lg);
box-shadow: var(--pb-sh-xl);
font-size: .875rem;
min-width: 280px;
position: relative;
overflow: hidden;
/* États d'animation */
opacity: 0;
transform: translateX(100%);
transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Animation selon position */
.pb-toast-wrap.top-left .pb-toast,
.pb-toast-wrap.bottom-left .pb-toast {
transform: translateX(-100%);
}
.pb-toast-wrap.top-center .pb-toast,
.pb-toast-wrap.bottom-center .pb-toast {
transform: translateY(-30px);
opacity: 0;
}
/* État visible */
.pb-toast.show {
opacity: 1;
transform: translateX(0) translateY(0);
}
/* Variantes existantes */
.pb-toast-success { border-left: 4px solid var(--pb-success); }
.pb-toast-error { border-left: 4px solid var(--pb-danger); }
.pb-toast-warning { border-left: 4px solid var(--pb-warning); }
.pb-toast-info { border-left: 4px solid var(--pb-info); }
/* Barre de progression */
.pb-toast-progress {
position: absolute;
bottom: 0;
left: 0;
width: 100%; /* ← manquait */
height: 3px;
background: rgba(0,0,0,0.1);
border-radius: 0 0 0 var(--pb-r-lg);
overflow: hidden;
}
/* .pb-toast-progress {
position: absolute;
bottom: 0;
left: 0;
height: 3px;
background: rgba(0,0,0,0.1);
border-radius: 0 0 0 var(--pb-r-lg);
overflow: hidden;
} */
.pb-toast-progress-bar {
height: 100%;
width: 100%;
background: currentColor;
transition: width linear;
}
.pb-toast-success .pb-toast-progress-bar { background: var(--pb-success); }
.pb-toast-error .pb-toast-progress-bar { background: var(--pb-danger); }
.pb-toast-warning .pb-toast-progress-bar { background: var(--pb-warning); }
.pb-toast-info .pb-toast-progress-bar { background: var(--pb-info); }
.pb-toast-title { font-weight: 700; color: var(--pb-text); font-size: .85rem; }
.pb-toast-body { font-size: .8rem; color: var(--pb-text-2); margin-top: .15rem; }
/* Responsive */
@media (max-width: 480px) {
.pb-toast-wrap {
width: calc(100% - 2rem);
max-width: none;
}
.pb-toast {
min-width: auto;
}
}
/* ════════════════════════════════════════════════════════════════════
§13 MODAL & DRAWER
════════════════════════════════════════════════════════════════════ */
.pb-overlay-bg {
position:fixed; inset:0; background:rgba(0,0,0,.55);
backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
z-index:1040; animation:pb-fade-in var(--pb-t) var(--pb-ease);
}
.pb-modal {
position:fixed; top:50%; left:50%; transform:translate(-50%,-50%);
width:100%; max-width:560px; max-height:90vh;
background:var(--pb-surface); border:1px solid var(--pb-border);
border-radius:var(--pb-r-2xl); box-shadow:var(--pb-sh-2xl);
z-index:1050; display:flex; flex-direction:column; overflow:hidden;
animation:pb-modal-in var(--pb-t-slow) var(--pb-spring);
}
.pb-modal-sm { max-width:400px; }
.pb-modal-lg { max-width:760px; }
.pb-modal-xl { max-width:1020px; }
.pb-modal-header {
display:flex; align-items:center; justify-content:space-between;
padding:1.5rem; border-bottom:1px solid var(--pb-border); flex-shrink:0;
}
.pb-modal-title { font-size:1.15rem; font-weight:700; color:var(--pb-text); margin:0; }
.pb-modal-body { padding:1.5rem; overflow-y:auto; flex:1; }
.pb-modal-footer {
padding:1rem 1.5rem; border-top:1px solid var(--pb-border);
display:flex; align-items:center; justify-content:flex-end;
gap:.75rem; flex-shrink:0; background:var(--pb-bg-subtle);
}
.pb-modal-close {
display:flex; align-items:center; justify-content:center;
width:32px; height:32px; border-radius:50%; background:var(--pb-bg-muted);
border:none; cursor:pointer; color:var(--pb-text-2); font-size:1rem;
transition:all var(--pb-t) var(--pb-ease);
}
.pb-modal-close:hover { background:var(--pb-border-2); color:var(--pb-text); }
/* Drawer */
.pb-drawer {
position:fixed; top:0; bottom:0; width:400px; max-width:92vw;
background:var(--pb-surface); border:1px solid var(--pb-border);
box-shadow:var(--pb-sh-2xl); z-index:1050;
display:flex; flex-direction:column;
}
.pb-drawer-right { right:0; animation:pb-slide-right var(--pb-t-slow) var(--pb-ease); }
.pb-drawer-left { left:0; animation:pb-slide-left var(--pb-t-slow) var(--pb-ease); }
.pb-drawer-sm { width:280px; }
.pb-drawer-lg { width:580px; }
.pb-drawer-header { display:flex; align-items:center; justify-content:space-between; padding:1.25rem 1.5rem; border-bottom:1px solid var(--pb-border); }
.pb-drawer-title { font-size:1.05rem; font-weight:700; color:var(--pb-text); margin:0; }
.pb-drawer-body { padding:1.5rem; overflow-y:auto; flex:1; }
.pb-drawer-footer { padding:1rem 1.5rem; border-top:1px solid var(--pb-border); display:flex; gap:.75rem; background:var(--pb-bg-subtle); }
/* ════════════════════════════════════════════════════════════════════
§14 DROPDOWN & MENU
════════════════════════════════════════════════════════════════════ */
.pb-dropdown { position:relative; display:inline-flex; }
.pb-dropdown-menu {
position:absolute; top:calc(100% + .5rem); left:0; min-width:220px;
background:var(--pb-surface); border:1px solid var(--pb-border);
border-radius:var(--pb-r-xl); box-shadow:var(--pb-sh-xl);
z-index:1060; padding:.35rem; list-style:none; margin:0;
animation:pb-fade-down var(--pb-t) var(--pb-ease);
}
.pb-dropdown-menu.right { left:auto; right:0; }
.pb-dropdown-menu.top { top:auto; bottom:calc(100% + .5rem); }
.pb-dropdown-item {
display:flex; align-items:center; gap:.7rem;
padding:.45rem .75rem; border-radius:var(--pb-r-sm);
font-size:.85rem; font-weight:500; color:var(--pb-text-2);
cursor:pointer; background:none; border:none; width:100%;
text-align:left; text-decoration:none;
transition:all var(--pb-t-fast) var(--pb-ease);
}
.pb-dropdown-item:hover { background:var(--pb-bg-muted); color:var(--pb-text); text-decoration:none; }
.pb-dropdown-item.active { color:var(--pb-500); background:var(--pb-50); }
.pb-dropdown-item.danger:hover { background:var(--pb-danger-bg); color:var(--pb-danger); }
.pb-dropdown-divider { height:1px; background:var(--pb-border); margin:.35rem 0; }
.pb-dropdown-header { padding:.2rem .75rem; font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:var(--pb-text-3); }
/* ════════════════════════════════════════════════════════════════════
§15 TOOLTIP & POPOVER
════════════════════════════════════════════════════════════════════ */
[data-pb-tooltip] { position:relative; }
[data-pb-tooltip]::after {
content:attr(data-pb-tooltip);
position:absolute; bottom:calc(100% + 8px); left:50%; transform:translateX(-50%);
white-space:nowrap; background:var(--pb-text); color:var(--pb-bg);
font-size:.72rem; font-weight:600; padding:.2rem .65rem; border-radius:var(--pb-r-sm);
pointer-events:none; opacity:0; z-index:1070; font-family:var(--pb-font);
transition:opacity var(--pb-t-fast) var(--pb-ease);
}
[data-pb-tooltip]::before {
content:''; position:absolute; bottom:calc(100% + 3px); left:50%; transform:translateX(-50%);
border:5px solid transparent; border-top-color:var(--pb-text);
pointer-events:none; opacity:0; z-index:1070;
transition:opacity var(--pb-t-fast) var(--pb-ease);
}
[data-pb-tooltip]:hover::after,
[data-pb-tooltip]:hover::before { opacity:1; }
[data-pb-tooltip-right]::after { left:auto; right:auto; bottom:auto; top:50%; left:calc(100% + 8px); transform:translateY(-50%); }
[data-pb-tooltip-right]::before { top:50%; left:calc(100% + 3px); bottom:auto; transform:translateY(-50%); border-color:transparent var(--pb-text) transparent transparent; border-top-color:transparent; }
.pb-popover {
background:var(--pb-surface); border:1px solid var(--pb-border);
border-radius:var(--pb-r-xl); box-shadow:var(--pb-sh-xl);
padding:1rem; max-width:300px; font-size:.85rem; z-index:1065;
}
.pb-popover-title { font-weight:700; color:var(--pb-text); margin-bottom:.4rem; font-size:.9rem; }
.pb-popover-body { color:var(--pb-text-2); line-height:1.6; }
/* ════════════════════════════════════════════════════════════════════
§16 TABLEAUX DASHBOARD .pb-table
════════════════════════════════════════════════════════════════════ */
.pb-table-wrap { width:100%; overflow-x:auto; border:1px solid var(--pb-border); border-radius:var(--pb-r-xl); }
.pb-table { width:100%; border-collapse:collapse; font-size:.875rem; }
.pb-table th {
padding:.75rem 1rem; background:var(--pb-bg-subtle);
border-bottom:1px solid var(--pb-border);
font-size:.7rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
color:var(--pb-text-3); text-align:left; white-space:nowrap; user-select:none;
}
.pb-table th.sortable { cursor:pointer; }
.pb-table th.sortable:hover { color:var(--pb-text); background:var(--pb-bg-muted); }
.pb-table td {
padding:.875rem 1rem; border-bottom:1px solid var(--pb-border);
color:var(--pb-text); vertical-align:middle;
}
.pb-table tr:last-child td { border-bottom:none; }
.pb-table-striped tbody tr:nth-child(even) td { background:var(--pb-bg-subtle); }
.pb-table-hover tbody tr:hover td { background:var(--pb-bg-muted); }
.pb-table-compact th, .pb-table-compact td { padding:.5rem .875rem; }
.pb-table-bordered td, .pb-table-bordered th { border:1px solid var(--pb-border); }
/* Checkbox column */
.pb-table-check { width:40px; }
/* ════════════════════════════════════════════════════════════════════
§17 PROGRESS & LOADING
════════════════════════════════════════════════════════════════════ */
.pb-progress { width:100%; height:8px; background:var(--pb-bg-muted); border-radius:var(--pb-r-pill); overflow:hidden; }
.pb-progress-sm { height:4px; }
.pb-progress-lg { height:12px; }
.pb-progress-xl { height:20px; border-radius:var(--pb-r-sm); }
.pb-progress-bar {
height:100%; background:var(--pb-500); border-radius:var(--pb-r-pill);
transition:width var(--pb-t-slow) var(--pb-ease);
display:flex; align-items:center; justify-content:flex-end; padding-right:.4rem;
font-size:.65rem; font-weight:700; color:#fff;
}
.pb-progress-bar-success { background:var(--pb-success); }
.pb-progress-bar-warning { background:var(--pb-warning); }
.pb-progress-bar-danger { background:var(--pb-danger); }
.pb-progress-bar-info { background:var(--pb-info); }
.pb-progress-bar-stripped {
background-image:linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%);
background-size:1rem 1rem; animation:pb-stripes 1s linear infinite;
}
/* Circular progress */
.pb-progress-ring { position:relative; display:inline-flex; align-items:center; justify-content:center; }
.pb-progress-ring svg { transform:rotate(-90deg); }
.pb-progress-ring-track { fill:none; stroke:var(--pb-bg-muted); }
.pb-progress-ring-fill { fill:none; stroke:var(--pb-500); stroke-linecap:round; transition:stroke-dashoffset .5s var(--pb-ease); }
.pb-progress-ring-label { position:absolute; font-size:.85rem; font-weight:800; color:var(--pb-text); font-family:var(--pb-font); }
/* Spinner */
.pb-spinner {
display:inline-block; width:24px; height:24px; border-radius:50%;
border:3px solid var(--pb-border); border-top-color:var(--pb-500);
animation:pb-spin .75s linear infinite;
}
.pb-spinner-xs { width:14px; height:14px; border-width:2px; }
.pb-spinner-sm { width:18px; height:18px; border-width:2px; }
.pb-spinner-lg { width:36px; height:36px; border-width:4px; }
.pb-spinner-xl { width:52px; height:52px; border-width:5px; }
.pb-spinner-primary { border-top-color:var(--pb-500); }
.pb-spinner-white { border-color:rgba(255,255,255,.3); border-top-color:#fff; }
/* Skeleton */
.pb-skeleton {
background:linear-gradient(90deg,var(--pb-bg-muted) 25%,var(--pb-border) 50%,var(--pb-bg-muted) 75%);
background-size:200% 100%; border-radius:var(--pb-r-sm);
animation:pb-shimmer 1.5s infinite;
}
.pb-skeleton-text { height:1em; margin-bottom:.5em; }
.pb-skeleton-title { height:1.5em; width:55%; }
.pb-skeleton-circle { border-radius:50%; }
.pb-skeleton-round { border-radius:var(--pb-r-pill); }
/* Dot loader */
.pb-dots { display:inline-flex; align-items:center; gap:.3rem; }
.pb-dots span {
width:8px; height:8px; border-radius:50%;
background:var(--pb-500); animation:pb-bounce .7s infinite alternate;
}
.pb-dots span:nth-child(2) { animation-delay:.15s; }
.pb-dots span:nth-child(3) { animation-delay:.3s; }
/* ════════════════════════════════════════════════════════════════════
§18 AVATAR .pb-avatar
════════════════════════════════════════════════════════════════════ */
.pb-avatar {
display:inline-flex; align-items:center; justify-content:center;
border-radius:50%; font-weight:700; background:var(--pb-100); color:var(--pb-700);
overflow:hidden; flex-shrink:0; user-select:none; font-family:var(--pb-font);
}
.pb-avatar img { width:100%; height:100%; object-fit:cover; }
.pb-avatar-2xs { width:20px; height:20px; font-size:.55rem; }
.pb-avatar-xs { width:26px; height:26px; font-size:.65rem; }
.pb-avatar-sm { width:32px; height:32px; font-size:.75rem; }
.pb-avatar-md { width:40px; height:40px; font-size:.875rem; }
.pb-avatar-lg { width:52px; height:52px; font-size:1.1rem; }
.pb-avatar-xl { width:72px; height:72px; font-size:1.5rem; }
.pb-avatar-2xl { width:100px; height:100px; font-size:2rem; }
.pb-avatar-square { border-radius:var(--pb-r); }
.pb-avatar-rounded{ border-radius:var(--pb-r-lg); }
.pb-avatar-status { position:relative; }
.pb-avatar-status::after {
content:''; position:absolute; bottom:0; right:0;
width:25%; height:25%; border-radius:50%; border:2px solid var(--pb-bg);
background:var(--pb-success);
}
.pb-avatar-status-away::after { background:var(--pb-warning); }
.pb-avatar-status-busy::after { background:var(--pb-danger); }
.pb-avatar-status-offline::after { background:var(--pb-border-2); }
/* Groupe */
.pb-avatar-group { display:flex; }
.pb-avatar-group .pb-avatar { border:2.5px solid var(--pb-bg); margin-left:-10px; transition:transform var(--pb-t) var(--pb-ease); }
.pb-avatar-group .pb-avatar:first-child { margin-left:0; }
.pb-avatar-group .pb-avatar:hover { transform:translateY(-2px); z-index:1; }
/* ════════════════════════════════════════════════════════════════════
§19 DASHBOARD — Graphiques, Métriques, Widgets
════════════════════════════════════════════════════════════════════ */
/* Wrapper layout */
.pb-dash-layout {
display:grid;
grid-template-columns:var(--pb-sidebar-w) 1fr;
min-height:100vh;
}
.pb-dash-layout.sidebar-collapsed {
grid-template-columns:66px 1fr;
}
@media(max-width:992px) { .pb-dash-layout { grid-template-columns:1fr; } }
.pb-dash-main {
display:flex; flex-direction:column; background:var(--pb-bg);
min-width:0;
}
.pb-dash-content {
padding:2rem; flex:1;
}
@media(max-width:768px) { .pb-dash-content { padding:1rem; } }
/* Page header */
.pb-page-header {
display:flex; align-items:center; justify-content:space-between;
flex-wrap:wrap; gap:1rem; margin-bottom:2rem;
}
.pb-page-title { font-size:1.5rem; font-weight:800; color:var(--pb-text); margin:0; letter-spacing:-.025em; font-family:var(--pb-font); }
.pb-page-subtitle{ font-size:.875rem; color:var(--pb-text-3); margin:.25rem 0 0; }
.pb-page-actions { display:flex; align-items:center; gap:.75rem; flex-wrap:wrap; }
/* KPI Grid */
.pb-kpi-grid {
display:grid;
grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));
gap:1.25rem;
}
@media(max-width:640px) { .pb-kpi-grid { grid-template-columns:1fr 1fr; } }
@media(max-width:480px) { .pb-kpi-grid { grid-template-columns:1fr; } }
/* Widget générique */
.pb-widget {
background:var(--pb-surface); border:1px solid var(--pb-border);
border-radius:var(--pb-r-xl);
}
.pb-widget-header {
display:flex; align-items:center; justify-content:space-between;
padding:1.25rem 1.5rem; border-bottom:1px solid var(--pb-border);
}
.pb-widget-title { font-size:.95rem; font-weight:700; color:var(--pb-text); margin:0; }
.pb-widget-subtitle { font-size:.75rem; color:var(--pb-text-3); margin:.15rem 0 0; }
.pb-widget-body { padding:1.5rem; }
.pb-widget-footer{ padding:1rem 1.5rem; border-top:1px solid var(--pb-border); background:var(--pb-bg-subtle); border-radius:0 0 var(--pb-r-xl) var(--pb-r-xl); }
.pb-widget-actions { display:flex; align-items:center; gap:.5rem; }
/* Chart placeholder */
.pb-chart-area {
background:var(--pb-bg-subtle); border-radius:var(--pb-r);
display:flex; align-items:flex-end; justify-content:space-around;
padding:1rem 1rem .5rem; gap:.4rem; height:160px;
}
.pb-chart-bar {
flex:1; border-radius:var(--pb-r-xs) var(--pb-r-xs) 0 0;
background:var(--pb-300); min-width:0;
transition:background var(--pb-t) var(--pb-ease), transform var(--pb-t) var(--pb-ease);
position:relative; cursor:pointer;
}
.pb-chart-bar:hover { background:var(--pb-500); transform:scaleY(1.04); transform-origin:bottom; }
.pb-chart-bar.active { background:var(--pb-500); }
.pb-chart-bar.success{ background:var(--pb-success); }
.pb-chart-bar.warning{ background:var(--pb-warning); }
.pb-chart-bar.danger { background:var(--pb-danger); }
/* Sparkline */
.pb-sparkline { display:flex; align-items:flex-end; gap:2px; height:32px; }
.pb-sparkline span {
flex:1; border-radius:2px 2px 0 0;
background:var(--pb-300); min-width:3px;
transition:background var(--pb-t) var(--pb-ease);
}
.pb-sparkline span:last-child { background:var(--pb-500); }
.pb-sparkline-success span:last-child { background:var(--pb-success); }
.pb-sparkline-danger span:last-child { background:var(--pb-danger); }
/* Activity feed */
.pb-activity { display:flex; flex-direction:column; gap:0; }
.pb-activity-item {
display:flex; align-items:flex-start; gap:.875rem;
padding:.875rem 0; border-bottom:1px solid var(--pb-border);
position:relative;
}
.pb-activity-item:last-child { border-bottom:none; }
.pb-activity-dot {
width:10px; height:10px; border-radius:50%;
background:var(--pb-300); flex-shrink:0; margin-top:.35rem;
border:2px solid var(--pb-surface);
box-shadow:0 0 0 2px var(--pb-300);
}
.pb-activity-dot-primary { background:var(--pb-500); box-shadow:0 0 0 2px var(--pb-500); }
.pb-activity-dot-success { background:var(--pb-success); box-shadow:0 0 0 2px var(--pb-success); }
.pb-activity-dot-warning { background:var(--pb-warning); box-shadow:0 0 0 2px var(--pb-warning); }
.pb-activity-dot-danger { background:var(--pb-danger); box-shadow:0 0 0 2px var(--pb-danger); }
.pb-activity-content { flex:1; min-width:0; }
.pb-activity-text { font-size:.85rem; color:var(--pb-text); line-height:1.5; }
.pb-activity-time { font-size:.75rem; color:var(--pb-text-3); margin-top:.2rem; }
/* Timeline */
.pb-timeline { padding-left:1.75rem; position:relative; }
.pb-timeline::before {
content:''; position:absolute; left:7px; top:8px; bottom:8px;
width:2px; background:var(--pb-border); border-radius:var(--pb-r-pill);
}
.pb-timeline-item { position:relative; padding-bottom:1.75rem; }
.pb-timeline-item:last-child { padding-bottom:0; }
.pb-timeline-dot {
position:absolute; left:calc(-1.75rem + 1px); top:4px;
width:14px; height:14px; border-radius:50%;
background:var(--pb-500); border:3px solid var(--pb-bg);
box-shadow:0 0 0 2px var(--pb-500);
}
.pb-timeline-dot-success { background:var(--pb-success); box-shadow:0 0 0 2px var(--pb-success); }
.pb-timeline-dot-warning { background:var(--pb-warning); box-shadow:0 0 0 2px var(--pb-warning); }
.pb-timeline-dot-danger { background:var(--pb-danger); box-shadow:0 0 0 2px var(--pb-danger); }
.pb-timeline-dot-hollow { background:var(--pb-bg); }
.pb-timeline-date { font-size:.72rem; color:var(--pb-text-3); margin-bottom:.2rem; font-weight:600; letter-spacing:.03em; }
.pb-timeline-title { font-size:.9rem; font-weight:700; color:var(--pb-text); margin-bottom:.3rem; }
.pb-timeline-body { font-size:.85rem; color:var(--pb-text-2); line-height:1.55; }
/* Steps */
.pb-steps { display:flex; align-items:center; }
.pb-step-item { display:flex; align-items:center; flex:1; }
.pb-step-item:last-child { flex:0; }
.pb-step-dot {
width:34px; height:34px; border-radius:50%; flex-shrink:0;
border:2px solid var(--pb-border); background:var(--pb-surface);
display:flex; align-items:center; justify-content:center;
font-size:.8rem; font-weight:700; color:var(--pb-text-3); z-index:1;
transition:all var(--pb-t) var(--pb-ease);
}
.pb-step-line { flex:1; height:2px; background:var(--pb-border); transition:background var(--pb-t) var(--pb-ease); }
.pb-step-item.done .pb-step-dot { background:var(--pb-500); border-color:var(--pb-500); color:#fff; }
.pb-step-item.done .pb-step-line { background:var(--pb-500); }
.pb-step-item.active .pb-step-dot { border-color:var(--pb-500); color:var(--pb-500); box-shadow:0 0 0 4px var(--pb-100); }
.pb-step-labels { display:flex; justify-content:space-between; margin-top:.625rem; }
.pb-step-label { font-size:.72rem; font-weight:500; color:var(--pb-text-3); max-width:80px; text-align:center; }
.pb-step-item.active .pb-step-label { color:var(--pb-500); font-weight:700; }
/* Accordion */
.pb-accordion { border:1px solid var(--pb-border); border-radius:var(--pb-r-xl); overflow:hidden; }
.pb-accordion-item + .pb-accordion-item { border-top:1px solid var(--pb-border); }
.pb-accordion-btn {
display:flex; align-items:center; justify-content:space-between; gap:1rem;
width:100%; padding:1.1rem 1.5rem; background:none; border:none;
font-family:var(--pb-font); font-size:.9rem; font-weight:600; color:var(--pb-text);
cursor:pointer; text-align:left; transition:background var(--pb-t) var(--pb-ease);
}
.pb-accordion-btn:hover { background:var(--pb-bg-subtle); }
.pb-accordion-btn[aria-expanded="true"] { background:var(--pb-bg-subtle); color:var(--pb-500); }
.pb-accordion-chevron {
width:16px; height:16px; flex-shrink:0; color:var(--pb-text-3);
transition:transform var(--pb-t) var(--pb-ease);
}
.pb-accordion-btn[aria-expanded="true"] .pb-accordion-chevron { transform:rotate(180deg); }
.pb-accordion-body { padding:0 1.5rem 1.25rem; font-size:.875rem; color:var(--pb-text-2); line-height:1.7; }
/* ════════════════════════════════════════════════════════════════════
§20 HERO / LANDING SECTIONS
════════════════════════════════════════════════════════════════════ */
.pb-section { padding-block:5rem; }
.pb-section-sm { padding-block:3rem; }
.pb-section-lg { padding-block:8rem; }
.pb-section-xl { padding-block:10rem; }
@media(max-width:768px) {
.pb-section { padding-block:3rem; }
.pb-section-lg { padding-block:5rem; }
}
.pb-hero { display:flex; flex-direction:column; align-items:center; text-align:center; gap:1.75rem; }
.pb-hero-left { align-items:flex-start; text-align:left; }
.pb-hero-title {
font-family:var(--pb-font); font-size:clamp(2.2rem,5vw,4rem); font-weight:900;
letter-spacing:-.04em; line-height:1.1; color:var(--pb-text);
margin:0;
}
.pb-hero-subtitle { font-size:clamp(1rem,2vw,1.2rem); color:var(--pb-text-2); max-width:58ch; line-height:1.75; margin:0; }
.pb-hero-actions { display:flex; flex-wrap:wrap; gap:1rem; align-items:center; justify-content:center; }
.pb-hero-left .pb-hero-actions { justify-content:flex-start; }
.pb-hero-highlight { color:var(--pb-500); }
/* Pricing */
.pb-pricing-card {
background:var(--pb-surface); border:1px solid var(--pb-border); border-radius:var(--pb-r-2xl);
padding:2rem; display:flex; flex-direction:column; gap:1.5rem; position:relative;
}
.pb-pricing-card-featured { border-color:var(--pb-400); border-width:2px; box-shadow:var(--pb-sh-xl); }
.pb-pricing-popular {
position:absolute; top:-1px; right:1.5rem;
background:var(--pb-500); color:#fff;
font-size:.65rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
padding:.2rem .75rem; border-radius:0 0 var(--pb-r-sm) var(--pb-r-sm);
}
.pb-pricing-plan { font-size:.7rem; font-weight:800; text-transform:uppercase; letter-spacing:.14em; color:var(--pb-500); }
.pb-pricing-price { font-size:3rem; font-weight:900; letter-spacing:-.05em; line-height:1; color:var(--pb-text); font-family:var(--pb-font); }
.pb-pricing-period { font-size:.8rem; color:var(--pb-text-3); margin-top:.25rem; }
.pb-pricing-features { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:.75rem; }
.pb-pricing-features li {
display:flex; align-items:center; gap:.75rem;
font-size:.875rem; color:var(--pb-text-2);
}
.pb-pricing-features li::before {
content:''; width:18px; height:18px; border-radius:50%; flex-shrink:0;
background:var(--pb-success-bg);
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%2316a34a' stroke='%2316a34a' stroke-width='.5' d='M3 8l3.5 3.5L13 5'/%3E%3C/svg%3E");
background-size:10px; background-repeat:no-repeat; background-position:center;
}
/* Feature item */
.pb-feature { display:flex; flex-direction:column; gap:1rem; }
.pb-feature-h { flex-direction:row; align-items:flex-start; gap:1.25rem; }
.pb-feature-icon {
width:48px; height:48px; border-radius:var(--pb-r-lg); flex-shrink:0;
background:var(--pb-100); color:var(--pb-600);
display:flex; align-items:center; justify-content:center; font-size:1.3rem;
}
.pb-feature-title { font-size:1rem; font-weight:700; color:var(--pb-text); margin:0 0 .4rem; }
.pb-feature-desc { font-size:.875rem; color:var(--pb-text-2); line-height:1.65; margin:0; }
/* Testimonial */
.pb-testimonial {
background:var(--pb-surface); border:1px solid var(--pb-border);
border-radius:var(--pb-r-xl); padding:2rem;
}
.pb-testimonial-quote { font-size:1rem; line-height:1.75; color:var(--pb-text); font-style:italic; margin:0 0 1.5rem; }
.pb-testimonial-stars { color:#f59e0b; font-size:.875rem; margin-bottom:1rem; letter-spacing:.1em; }
.pb-testimonial-author { display:flex; align-items:center; gap:.875rem; }
.pb-testimonial-name { font-weight:700; font-size:.875rem; color:var(--pb-text); }
.pb-testimonial-role { font-size:.75rem; color:var(--pb-text-3); }
/* ════════════════════════════════════════════════════════════════════
§21 FOOTER .pb-footer
════════════════════════════════════════════════════════════════════ */
.pb-footer {
background:var(--pb-surface); border-top:1px solid var(--pb-border);
padding-block:4rem;
}
.pb-footer-grid {
display:grid; grid-template-columns:2fr repeat(3,1fr); gap:3rem;
}
@media(max-width:768px) { .pb-footer-grid { grid-template-columns:1fr 1fr; gap:2rem; } }
@media(max-width:480px) { .pb-footer-grid { grid-template-columns:1fr; } }
.pb-footer-brand { font-size:1.2rem; font-weight:900; color:var(--pb-text); font-family:var(--pb-font); }
.pb-footer-tagline{ font-size:.875rem; color:var(--pb-text-3); margin-top:.5rem; }
.pb-footer-title { font-size:.65rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--pb-text); margin-bottom:1rem; }
.pb-footer-links { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:.75rem; }
.pb-footer-link { font-size:.875rem; color:var(--pb-text-3); text-decoration:none; transition:color var(--pb-t) var(--pb-ease); }
.pb-footer-link:hover { color:var(--pb-text); text-decoration:none; }
.pb-footer-bottom {
margin-top:3rem; padding-top:2rem; border-top:1px solid var(--pb-border);
display:flex; align-items:center; justify-content:space-between;
flex-wrap:wrap; gap:1rem; font-size:.8rem; color:var(--pb-text-3);
}
.pb-social { display:flex; gap:.625rem; }
.pb-social-link {
width:34px; height:34px; border-radius:50%;
background:var(--pb-bg-muted); border:1px solid var(--pb-border);
display:flex; align-items:center; justify-content:center;
color:var(--pb-text-2); text-decoration:none; font-size:.85rem;
transition:all var(--pb-t) var(--pb-ease);
}
.pb-social-link:hover { background:var(--pb-500); border-color:var(--pb-500); color:#fff; text-decoration:none; }
/* ════════════════════════════════════════════════════════════════════
§22 UTILITAIRES LAYOUT
════════════════════════════════════════════════════════════════════ */
.pb-container { width:100%; max-width:1280px; margin-inline:auto; padding-inline:1.5rem; }
.pb-container-sm { max-width:640px; }
.pb-container-md { max-width:768px; }
.pb-container-lg { max-width:1024px; }
.pb-container-xl { max-width:1280px; }
.pb-container-2xl { max-width:1536px; }
.pb-container-full{ max-width:100%; }
@media(max-width:640px) { .pb-container { padding-inline:1rem; } }
.pb-grid { display:grid; gap:1.5rem; }
.pb-grid-1 { grid-template-columns:repeat(1,minmax(0,1fr)); }
.pb-grid-2 { grid-template-columns:repeat(2,minmax(0,1fr)); }
.pb-grid-3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
.pb-grid-4 { grid-template-columns:repeat(4,minmax(0,1fr)); }
.pb-grid-5 { grid-template-columns:repeat(5,minmax(0,1fr)); }
.pb-grid-6 { grid-template-columns:repeat(6,minmax(0,1fr)); }
.pb-grid-auto { grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); }
.pb-grid-auto-sm{ grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); }
@media(max-width:1024px) {
.pb-grid-4,.pb-grid-5,.pb-grid-6 { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media(max-width:768px) {
.pb-grid-3,.pb-grid-4,.pb-grid-5,.pb-grid-6 { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:540px) {
.pb-grid-2,.pb-grid-3,.pb-grid-4,.pb-grid-5,.pb-grid-6 { grid-template-columns:1fr; }
}
.pb-flex { display:flex; }
.pb-flex-col { display:flex; flex-direction:column; }
.pb-flex-wrap { flex-wrap:wrap; }
.pb-items-start { align-items:flex-start; }
.pb-items-center{ align-items:center; }
.pb-items-end { align-items:flex-end; }
.pb-justify-start { justify-content:flex-start; }
.pb-justify-center { justify-content:center; }
.pb-justify-end { justify-content:flex-end; }
.pb-justify-between{ justify-content:space-between; }
.pb-gap-1 { gap:.25rem; } .pb-gap-2 { gap:.5rem; } .pb-gap-3 { gap:.75rem; }
.pb-gap-4 { gap:1rem; } .pb-gap-5 { gap:1.25rem; } .pb-gap-6 { gap:1.5rem; }
.pb-gap-8 { gap:2rem; } .pb-gap-10{ gap:2.5rem; } .pb-gap-12{ gap:3rem; }
/* Spacing utilitaires */
.pb-p-0 { padding:0 !important; }
.pb-p-1 { padding:.25rem !important; } .pb-p-2 { padding:.5rem !important; }
.pb-p-3 { padding:.75rem !important; } .pb-p-4 { padding:1rem !important; }
.pb-p-5 { padding:1.25rem !important; }.pb-p-6 { padding:1.5rem !important; }
.pb-p-8 { padding:2rem !important; } .pb-p-10 { padding:2.5rem !important; }
.pb-p-12 { padding:3rem !important; }
.pb-px-4 { padding-inline:1rem !important; } .pb-py-4 { padding-block:1rem !important; }
.pb-px-6 { padding-inline:1.5rem !important; } .pb-py-6 { padding-block:1.5rem !important; }
.pb-m-0 { margin:0 !important; }
.pb-mt-0 { margin-top:0 !important; } .pb-mb-0 { margin-bottom:0 !important; }
.pb-mt-1 { margin-top:.25rem !important; } .pb-mb-1 { margin-bottom:.25rem !important; }
.pb-mt-2 { margin-top:.5rem !important; } .pb-mb-2 { margin-bottom:.5rem !important; }
.pb-mt-3 { margin-top:.75rem !important; } .pb-mb-3 { margin-bottom:.75rem !important; }
.pb-mt-4 { margin-top:1rem !important; } .pb-mb-4 { margin-bottom:1rem !important; }
.pb-mt-6 { margin-top:1.5rem !important; } .pb-mb-6 { margin-bottom:1.5rem !important; }
.pb-mt-8 { margin-top:2rem !important; } .pb-mb-8 { margin-bottom:2rem !important; }
.pb-mx-auto { margin-inline:auto !important; }
/* Visual utils */
.pb-divider { display:flex; align-items:center; gap:1rem; font-size:.8rem; color:var(--pb-text-3); }
.pb-divider::before,.pb-divider::after { content:''; flex:1; height:1px; background:var(--pb-border); }
.pb-chip { display:inline-flex; align-items:center; gap:.375rem; padding:.2rem .75rem; background:var(--pb-bg-muted); border:1px solid var(--pb-border); border-radius:var(--pb-r-pill); font-size:.8rem; font-weight:500; color:var(--pb-text-2); }
.pb-chip-active { background:var(--pb-100); border-color:var(--pb-300); color:var(--pb-700); }
.pb-chip-clickable { cursor:pointer; transition:all var(--pb-t) var(--pb-ease); }
.pb-chip-clickable:hover { background:var(--pb-50); border-color:var(--pb-300); color:var(--pb-600); }
/* Backgrounds */
.pb-bg-surface { background:var(--pb-surface) !important; }
.pb-bg-subtle { background:var(--pb-bg-subtle) !important; }
.pb-bg-muted { background:var(--pb-bg-muted) !important; }
.pb-bg-primary { background:var(--pb-500) !important; color:#fff !important; }
.pb-bg-primary-soft{ background:var(--pb-50) !important; }
.pb-bg-success { background:var(--pb-success) !important; color:#fff !important; }
.pb-bg-danger { background:var(--pb-danger) !important; color:#fff !important; }
.pb-bg-warning { background:var(--pb-warning) !important; color:#fff !important; }
.pb-bg-info { background:var(--pb-info) !important; color:#fff !important; }
/* Borders */
.pb-border { border:1px solid var(--pb-border) !important; }
.pb-border-2 { border:1px solid var(--pb-border-2) !important; }
.pb-border-t { border-top:1px solid var(--pb-border) !important; }
.pb-border-b { border-bottom:1px solid var(--pb-border) !important; }
.pb-border-none { border:none !important; }
.pb-border-primary { border-color:var(--pb-500) !important; }
/* Radius */
.pb-r-sm { border-radius:var(--pb-r-sm) !important; }
.pb-r { border-radius:var(--pb-r) !important; }
.pb-r-lg { border-radius:var(--pb-r-lg) !important; }
.pb-r-xl { border-radius:var(--pb-r-xl) !important; }
.pb-r-2xl { border-radius:var(--pb-r-2xl) !important; }
.pb-r-pill{ border-radius:var(--pb-r-pill) !important; }
.pb-r-0 { border-radius:0 !important; }
/* Shadows */
.pb-sh-xs { box-shadow:var(--pb-sh-xs) !important; }
.pb-sh-sm { box-shadow:var(--pb-sh-sm) !important; }
.pb-sh { box-shadow:var(--pb-sh) !important; }
.pb-sh-lg { box-shadow:var(--pb-sh-lg) !important; }
.pb-sh-xl { box-shadow:var(--pb-sh-xl) !important; }
.pb-sh-none{ box-shadow:none !important; }
.pb-sh-focus { box-shadow:0 0 0 3px var(--pb-ring) !important; }
/* Misc */
.pb-w-full { width:100% !important; }
.pb-h-full { height:100% !important; }
.pb-min-vh { min-height:100vh; }
.pb-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; }
.pb-overflow-hidden { overflow:hidden !important; }
.pb-overflow-auto { overflow:auto !important; }
.pb-pointer { cursor:pointer; }
.pb-no-select { user-select:none; }
.pb-transition { transition:all var(--pb-t) var(--pb-ease); }
/* ════════════════════════════════════════════════════════════════════
§23 DARK MODE TOGGLE BUTTON
════════════════════════════════════════════════════════════════════ */
.pb-theme-btn {
display:inline-flex; align-items:center; justify-content:center;
width:38px; height:38px; border-radius:var(--pb-r-sm);
background:var(--pb-bg-muted); border:1px solid var(--pb-border);
color:var(--pb-text-2); cursor:pointer;
transition:all var(--pb-t) var(--pb-ease);
}
.pb-theme-btn:hover { background:var(--pb-border); color:var(--pb-text); }
/* ════════════════════════════════════════════════════════════════════
§24 KEYFRAMES
════════════════════════════════════════════════════════════════════ */
@keyframes pb-spin { to { transform:rotate(360deg); } }
@keyframes pb-bounce { to { transform:translateY(-7px); opacity:.5; } }
@keyframes pb-pulse { 0%,100% { opacity:1; } 50% { opacity:.4; } }
@keyframes pb-fade-in { from { opacity:0; } to { opacity:1; } }
@keyframes pb-fade-down { from { opacity:0; transform:translateY(-10px); } to { opacity:1; transform:translateY(0); } }
@keyframes pb-slide-in { from { opacity:0; transform:translateX(20px); } to { opacity:1; transform:translateX(0); } }
@keyframes pb-slide-right{ from { transform:translateX(100%); } to { transform:translateX(0); } }
@keyframes pb-slide-left { from { transform:translateX(-100%); } to { transform:translateX(0); } }
@keyframes pb-modal-in { from { opacity:0; transform:translate(-50%,calc(-50% + 18px)) scale(.96); } to { opacity:1; transform:translate(-50%,-50%) scale(1); } }
@keyframes pb-shimmer { from { background-position:200% 0; } to { background-position:-200% 0; } }
@keyframes pb-stripes { from { background-position:1rem 0; } to { background-position:0 0; } }
/* Animation utilitaires */
.pb-fade-in { animation:pb-fade-in var(--pb-t-slow) var(--pb-ease); }
.pb-slide-up { animation:pb-fade-down var(--pb-t-slow) var(--pb-spring); }
.pb-anim-pulse { animation:pb-pulse 2s ease infinite; }
.pb-anim-spin { animation:pb-spin 1s linear infinite; }
/* ════════════════════════════════════════════════════════════════════
§25 PRINT
════════════════════════════════════════════════════════════════════ */
@media print {
.pb-navbar,.pb-sidebar,.pb-toast-wrap,.pb-btn-primary,.pb-theme-btn { display:none !important; }
body { background:#fff !important; color:#000 !important; }
}
/* ════════════════════════════════════════════════════════════════════
§26 GLASS MORPHISM — .pb-glass-*
════════════════════════════════════════════════════════════════════ */
.pb-glass {
background: rgba(255,255,255,.12);
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(20px) saturate(180%);
border: 1px solid rgba(255,255,255,.22);
border-radius: var(--pb-r-xl);
}
.pb-glass-dark {
background: rgba(10,14,30,.45);
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(20px) saturate(180%);
border: 1px solid rgba(255,255,255,.08);
border-radius: var(--pb-r-xl);
}
.pb-glass-primary {
background: hsla(var(--pb-h),var(--pb-s),46%,.15);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border: 1px solid hsla(var(--pb-h),var(--pb-s),60%,.3);
border-radius: var(--pb-r-xl);
}
.pb-glass-panel {
background: rgba(255,255,255,.08);
backdrop-filter: blur(24px) saturate(200%);
-webkit-backdrop-filter: blur(24px) saturate(200%);
border: 1px solid rgba(255,255,255,.14);
border-radius: var(--pb-r-2xl);
box-shadow: var(--pb-sh-xl), inset 0 1px 0 rgba(255,255,255,.15);
}
[data-theme="dark"] .pb-glass { background: rgba(20,27,50,.45); border-color: rgba(255,255,255,.09); }
[data-theme="dark"] .pb-glass-panel { background: rgba(14,20,42,.55); border-color: rgba(255,255,255,.07); }
/* ════════════════════════════════════════════════════════════════════
§27 GRADIENTS — .pb-gradient-*
════════════════════════════════════════════════════════════════════ */
.pb-gradient-primary {
background: linear-gradient(135deg, hsl(var(--pb-h),var(--pb-s),52%), hsl(var(--pb-h),72%,38%));
}
.pb-gradient-primary-soft {
background: linear-gradient(135deg, var(--pb-50), var(--pb-100));
}
.pb-gradient-warm {
background: linear-gradient(135deg, hsl(25,90%,60%), hsl(350,76%,55%));
}
.pb-gradient-cool {
background: linear-gradient(135deg, hsl(192,78%,50%), hsl(246,70%,55%));
}
.pb-gradient-sunset {
background: linear-gradient(135deg, hsl(38,92%,55%), hsl(10,85%,55%), hsl(330,72%,55%));
}
.pb-gradient-ocean {
background: linear-gradient(135deg, hsl(202,80%,45%), hsl(168,74%,40%));
}
.pb-gradient-surface {
background: linear-gradient(180deg, var(--pb-bg-subtle), var(--pb-bg));
}
.pb-gradient-to-b {
background: linear-gradient(to bottom, transparent, var(--pb-bg));
}
/* Gradient border trick */
.pb-gradient-border {
position: relative;
border-radius: var(--pb-r-xl);
background: var(--pb-surface);
}
.pb-gradient-border::before {
content: '';
position: absolute;
inset: -1.5px;
border-radius: inherit;
background: linear-gradient(135deg, hsl(var(--pb-h),var(--pb-s),60%), hsl(var(--pb-h),72%,38%));
z-index: -1;
}
/* ════════════════════════════════════════════════════════════════════
§28 FLOATING LABELS — .pb-field
Usage:
════════════════════════════════════════════════════════════════════ */
.pb-field {
position: relative;
display: flex;
flex-direction: column;
}
.pb-field-input {
display: block; width: 100%;
padding: 1.35rem .875rem .45rem;
font-family: var(--pb-font); font-size: .875rem;
color: var(--pb-text); background: var(--pb-surface);
border: 1.5px solid var(--pb-border-2); border-radius: var(--pb-r-sm);
outline: none; appearance: none; -webkit-appearance: none;
transition: border-color var(--pb-t) var(--pb-ease), box-shadow var(--pb-t) var(--pb-ease);
}
.pb-field-label {
position: absolute; left: .875rem; top: 50%;
transform: translateY(-50%);
font-size: .875rem; color: var(--pb-text-3); pointer-events: none;
transition: all var(--pb-t) var(--pb-ease);
transform-origin: left top;
}
.pb-field-input:focus + .pb-field-label,
.pb-field-input:not(:placeholder-shown) + .pb-field-label {
top: .55rem;
transform: translateY(0) scale(.78);
color: var(--pb-500);
font-weight: 600;
}
.pb-field-input:focus { border-color: var(--pb-500); box-shadow: 0 0 0 3px var(--pb-ring); }
.pb-field-input.error { border-color: var(--pb-danger); }
.pb-field-input.error:focus { box-shadow: 0 0 0 3px rgba(220,38,38,.2); }
.pb-field-input.success { border-color: var(--pb-success); }
/* ════════════════════════════════════════════════════════════════════
§29 COMMAND PALETTE SEARCH .pb-cmdsearch
════════════════════════════════════════════════════════════════════ */
.pb-cmdsearch {
position: relative; display: flex; align-items: center;
}
.pb-cmdsearch-input {
width: 100%; padding: .65rem 1rem .65rem 2.75rem;
font-family: var(--pb-font); font-size: .9rem;
color: var(--pb-text); background: var(--pb-surface);
border: 1.5px solid var(--pb-border-2); border-radius: var(--pb-r-lg);
outline: none; appearance: none;
transition: all var(--pb-t) var(--pb-ease);
box-shadow: var(--pb-sh-sm);
}
.pb-cmdsearch-input:focus {
border-color: var(--pb-500);
box-shadow: 0 0 0 3px var(--pb-ring), var(--pb-sh-lg);
}
.pb-cmdsearch-input::placeholder { color: var(--pb-text-3); }
.pb-cmdsearch-icon {
position: absolute; left: .85rem; color: var(--pb-text-3);
font-size: 1rem; pointer-events: none;
}
.pb-cmdsearch-kbd {
position: absolute; right: .75rem;
display: inline-flex; align-items: center; gap: .2rem;
padding: .15rem .4rem; background: var(--pb-bg-muted);
border: 1px solid var(--pb-border); border-radius: var(--pb-r-xs);
font-size: .65rem; font-weight: 700; color: var(--pb-text-3);
letter-spacing: .02em; pointer-events: none;
}
.pb-cmdsearch-results {
position: absolute; top: calc(100% + .5rem); left: 0; right: 0;
background: var(--pb-surface); border: 1px solid var(--pb-border);
border-radius: var(--pb-r-xl); box-shadow: var(--pb-sh-xl);
z-index: 1065; padding: .4rem; list-style: none; margin: 0;
animation: pb-fade-down var(--pb-t) var(--pb-ease);
max-height: 360px; overflow-y: auto;
}
.pb-cmdsearch-result {
display: flex; align-items: center; gap: .75rem;
padding: .55rem .875rem; border-radius: var(--pb-r-sm);
font-size: .875rem; color: var(--pb-text-2); cursor: pointer;
transition: all var(--pb-t-fast) var(--pb-ease);
}
.pb-cmdsearch-result:hover,
.pb-cmdsearch-result.active { background: var(--pb-bg-muted); color: var(--pb-text); }
.pb-cmdsearch-result-icon { color: var(--pb-text-3); flex-shrink: 0; }
.pb-cmdsearch-result-meta { margin-left: auto; font-size: .75rem; color: var(--pb-text-3); }
.pb-cmdsearch-group-label {
padding: .3rem .875rem .2rem;
font-size: .65rem; font-weight: 800; letter-spacing: .12em;
text-transform: uppercase; color: var(--pb-text-3);
}
.pb-cmdsearch-divider { height: 1px; background: var(--pb-border); margin: .3rem 0; }
/* ════════════════════════════════════════════════════════════════════
§30 NOTIFICATION DOT & COUNTER .pb-notif
════════════════════════════════════════════════════════════════════ */
.pb-notif-wrap { position: relative; display: inline-flex; }
.pb-notif-dot {
position: absolute; top: -3px; right: -3px;
width: 10px; height: 10px; border-radius: 50%;
background: var(--pb-danger); border: 2px solid var(--pb-bg);
}
.pb-notif-dot-success { background: var(--pb-success); }
.pb-notif-dot-warning { background: var(--pb-warning); }
.pb-notif-dot-primary { background: var(--pb-500); }
.pb-notif-dot-pulse::after {
content: '';
position: absolute; inset: -3px; border-radius: 50%;
background: inherit; opacity: .4;
animation: pb-pulse 1.6s ease infinite;
}
.pb-notif-count {
position: absolute; top: -6px; right: -8px;
min-width: 18px; height: 18px; padding: 0 .35rem;
background: var(--pb-danger); border: 2px solid var(--pb-bg);
border-radius: var(--pb-r-pill);
font-size: .62rem; font-weight: 800; color: #fff;
display: flex; align-items: center; justify-content: center;
line-height: 1;
}
.pb-notif-count-primary { background: var(--pb-500); }
/* ════════════════════════════════════════════════════════════════════
§31 RESPONSIVE VISIBILITY .pb-show-* / .pb-hide-*
════════════════════════════════════════════════════════════════════ */
@media (max-width:575px) { .pb-hide-xs { display:none !important; } }
@media (min-width:576px) and (max-width:767px) { .pb-hide-sm { display:none !important; } }
@media (min-width:768px) and (max-width:991px) { .pb-hide-md { display:none !important; } }
@media (min-width:992px) and (max-width:1199px){ .pb-hide-lg { display:none !important; } }
@media (min-width:1200px) { .pb-hide-xl { display:none !important; } }
@media (min-width:576px) { .pb-show-xs-only { display:none !important; } }
@media (max-width:575px) { .pb-show-sm-up { display:none !important; } }
@media (max-width:767px) { .pb-show-md-up { display:none !important; } }
@media (max-width:991px) { .pb-show-lg-up { display:none !important; } }
@media (max-width:1199px) { .pb-show-xl-up { display:none !important; } }
/* ════════════════════════════════════════════════════════════════════
§32 FOCUS RING OVERRIDE .pb-focus-*
════════════════════════════════════════════════════════════════════ */
.pb-focus-primary:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--pb-ring) !important; }
.pb-focus-danger:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(220,38,38,.3) !important; }
.pb-focus-success:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(22,163,74,.3) !important; }
.pb-focus-none:focus-visible { outline: none; box-shadow: none !important; }
/* Keyboard-only focus indicator reset for mouse users */
.pb-apply :focus:not(:focus-visible) { outline: none; box-shadow: none; }
/* ════════════════════════════════════════════════════════════════════
§33 TEXT GRADIENT .pb-text-gradient-*
════════════════════════════════════════════════════════════════════ */
.pb-text-gradient {
background: linear-gradient(135deg, hsl(var(--pb-h),var(--pb-s),52%), hsl(var(--pb-h),72%,38%));
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.pb-text-gradient-warm {
background: linear-gradient(135deg, hsl(38,92%,55%), hsl(10,85%,55%));
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.pb-text-gradient-cool {
background: linear-gradient(135deg, hsl(192,78%,50%), hsl(246,70%,55%));
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.pb-text-gradient-rainbow {
background: linear-gradient(90deg, hsl(0,80%,58%), hsl(38,92%,55%), hsl(82,78%,45%), hsl(202,80%,50%), hsl(265,74%,60%));
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
/*!
* prettyBootstrap — Extension Pack v1.1
* Ajout pur : §34 à §44 | Coller à la fin de prettybootstrap.css
* Aucune règle existante modifiée.
*/
/* ════════════════════════════════════════════════════════════════════
§34 KANBAN / BOARD .pb-board / .pb-column / .pb-card-task
════════════════════════════════════════════════════════════════════ */
.pb-board {
display: flex;
gap: 1rem;
overflow-x: auto;
align-items: flex-start;
padding-bottom: .5rem;
scrollbar-width: thin;
}
.pb-board::-webkit-scrollbar { height: 6px; }
.pb-board::-webkit-scrollbar-thumb { background: var(--pb-border-2); border-radius: var(--pb-r-pill); }
.pb-column {
flex-shrink: 0;
width: 280px;
background: var(--pb-bg-subtle);
border: 1px solid var(--pb-border);
border-radius: var(--pb-r-xl);
display: flex;
flex-direction: column;
gap: .5rem;
padding: .875rem;
min-height: 120px;
}
.pb-column-header {
display: flex;
align-items: center;
justify-content: space-between;
padding-bottom: .625rem;
border-bottom: 1px solid var(--pb-border);
margin-bottom: .25rem;
}
.pb-column-title {
font-size: .8rem;
font-weight: 800;
letter-spacing: .07em;
text-transform: uppercase;
color: var(--pb-text-3);
}
.pb-column-count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 20px;
height: 20px;
padding: 0 .35rem;
background: var(--pb-bg-muted);
border-radius: var(--pb-r-pill);
font-size: .65rem;
font-weight: 800;
color: var(--pb-text-3);
}
/* Indicateurs couleur de colonne */
.pb-column-todo .pb-column-title { color: var(--pb-text-2); }
.pb-column-doing .pb-column-title { color: var(--pb-warning); }
.pb-column-review .pb-column-title { color: var(--pb-info); }
.pb-column-done .pb-column-title { color: var(--pb-success); }
.pb-card-task {
background: var(--pb-surface);
border: 1px solid var(--pb-border);
border-radius: var(--pb-r-lg);
padding: .75rem 1rem;
cursor: grab;
transition: box-shadow var(--pb-t) var(--pb-ease), transform var(--pb-t) var(--pb-ease);
display: flex;
flex-direction: column;
gap: .4rem;
}
.pb-card-task:hover { box-shadow: var(--pb-sh); transform: translateY(-1px); }
.pb-card-task:active { cursor: grabbing; box-shadow: var(--pb-sh-lg); transform: rotate(1.5deg) scale(1.01); }
.pb-card-task.dragging { opacity: .5; box-shadow: none; }
.pb-task-title { font-size: .85rem; font-weight: 600; color: var(--pb-text); line-height: 1.45; }
.pb-task-desc { font-size: .78rem; color: var(--pb-text-3); line-height: 1.5; }
.pb-task-footer {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: .25rem;
padding-top: .5rem;
border-top: 1px solid var(--pb-border);
}
.pb-task-meta { display: flex; align-items: center; gap: .4rem; font-size: .72rem; color: var(--pb-text-3); }
.pb-task-priority-high { border-left: 3px solid var(--pb-danger) !important; padding-left: .75rem; }
.pb-task-priority-medium { border-left: 3px solid var(--pb-warning) !important; padding-left: .75rem; }
.pb-task-priority-low { border-left: 3px solid var(--pb-success) !important; padding-left: .75rem; }
/* Bouton ajout de carte */
.pb-column-add {
display: flex;
align-items: center;
gap: .5rem;
width: 100%;
padding: .55rem .75rem;
border: 1.5px dashed var(--pb-border-2);
border-radius: var(--pb-r-sm);
background: transparent;
color: var(--pb-text-3);
font-size: .8rem;
font-weight: 500;
cursor: pointer;
transition: all var(--pb-t) var(--pb-ease);
font-family: var(--pb-font);
}
.pb-column-add:hover { border-color: var(--pb-500); color: var(--pb-500); background: var(--pb-50); }
/* ════════════════════════════════════════════════════════════════════
§35 RIBBON / CORNER TAG .pb-ribbon-*
Usage : position:relative sur le parent
════════════════════════════════════════════════════════════════════ */
.pb-ribbon {
position: absolute;
top: 14px;
right: -8px;
padding: .2rem .9rem .2rem .75rem;
background: var(--pb-500);
color: #fff;
font-size: .68rem;
font-weight: 800;
letter-spacing: .06em;
text-transform: uppercase;
line-height: 1.4;
clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 0 100%, 8px 50%);
white-space: nowrap;
z-index: 10;
pointer-events: none;
}
/* Couleurs */
.pb-ribbon-success { background: var(--pb-success); }
.pb-ribbon-warning { background: var(--pb-warning); }
.pb-ribbon-danger { background: var(--pb-danger); }
.pb-ribbon-dark { background: var(--pb-text); }
/* Coins enroulés (corner ribbon) */
.pb-ribbon-corner {
position: absolute;
top: 0;
right: 0;
width: 0;
height: 0;
border-style: solid;
border-width: 0 54px 54px 0;
border-color: transparent var(--pb-500) transparent transparent;
z-index: 10;
}
.pb-ribbon-corner span {
position: absolute;
top: 7px;
right: -46px;
width: 54px;
transform: rotate(45deg);
font-size: .58rem;
font-weight: 900;
letter-spacing: .06em;
text-transform: uppercase;
color: #fff;
text-align: center;
pointer-events: none;
}
.pb-ribbon-corner-success { border-right-color: var(--pb-success); }
.pb-ribbon-corner-danger { border-right-color: var(--pb-danger); }
.pb-ribbon-corner-warning { border-right-color: var(--pb-warning); }
.pb-ribbon-corner-dark { border-right-color: var(--pb-text); }
/* Ruban horizontal centré (comme "NOUVEAU" en haut de hero card) */
.pb-ribbon-top {
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
padding: .15rem 1rem;
background: var(--pb-500);
color: #fff;
font-size: .65rem;
font-weight: 800;
letter-spacing: .1em;
text-transform: uppercase;
border-radius: 0 0 var(--pb-r-sm) var(--pb-r-sm);
z-index: 10;
white-space: nowrap;
pointer-events: none;
}
.pb-ribbon-top-success { background: var(--pb-success); }
.pb-ribbon-top-danger { background: var(--pb-danger); }
/* ════════════════════════════════════════════════════════════════════
§36 CHAT / BUBBLES .pb-chat / .pb-bubble
════════════════════════════════════════════════════════════════════ */
.pb-chat {
display: flex;
flex-direction: column;
gap: 1rem;
padding: 1rem 0;
}
.pb-chat-message {
display: flex;
align-items: flex-end;
gap: .625rem;
max-width: 80%;
}
/* Message entrant (gauche) */
.pb-chat-message { margin-right: auto; }
/* Message sortant (droite) */
.pb-chat-message.pb-chat-out {
flex-direction: row-reverse;
margin-left: auto;
margin-right: 0;
}
.pb-bubble {
padding: .6rem .95rem;
border-radius: var(--pb-r-xl);
font-size: .875rem;
line-height: 1.55;
color: var(--pb-text);
background: var(--pb-bg-muted);
border: 1px solid var(--pb-border);
word-break: break-word;
max-width: 100%;
}
.pb-chat-message.pb-chat-out .pb-bubble {
background: var(--pb-500);
color: #fff;
border-color: var(--pb-600);
}
/* Queue triangulaire */
.pb-bubble-tail { border-radius: var(--pb-r-xl) var(--pb-r-xl) var(--pb-r-xl) var(--pb-r-xs); }
.pb-chat-message.pb-chat-out .pb-bubble.pb-bubble-tail { border-radius: var(--pb-r-xl) var(--pb-r-xl) var(--pb-r-xs) var(--pb-r-xl); }
.pb-chat-meta {
display: flex;
align-items: center;
gap: .35rem;
font-size: .7rem;
color: var(--pb-text-3);
padding: 0 .2rem;
white-space: nowrap;
}
.pb-chat-date-sep {
display: flex;
align-items: center;
gap: .75rem;
font-size: .68rem;
color: var(--pb-text-3);
font-weight: 600;
margin: .5rem 0;
}
.pb-chat-date-sep::before,
.pb-chat-date-sep::after { content: ''; flex: 1; height: 1px; background: var(--pb-border); }
/* Indicateur "en train d'écrire…" */
.pb-typing {
display: flex;
align-items: center;
gap: .3rem;
padding: .55rem .875rem;
background: var(--pb-bg-muted);
border-radius: var(--pb-r-xl) var(--pb-r-xl) var(--pb-r-xl) var(--pb-r-xs);
border: 1px solid var(--pb-border);
width: fit-content;
}
.pb-typing span {
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--pb-text-3);
animation: pb-bounce .6s infinite alternate;
}
.pb-typing span:nth-child(2) { animation-delay: .15s; }
.pb-typing span:nth-child(3) { animation-delay: .3s; }
/* Zone de saisie chat */
.pb-chat-input-wrap {
display: flex;
align-items: flex-end;
gap: .625rem;
padding: .75rem 1rem;
background: var(--pb-surface);
border-top: 1px solid var(--pb-border);
}
.pb-chat-input {
flex: 1;
resize: none;
min-height: 40px;
max-height: 160px;
overflow-y: auto;
padding: .55rem .875rem;
font-family: var(--pb-font);
font-size: .875rem;
color: var(--pb-text);
background: var(--pb-bg-muted);
border: 1.5px solid var(--pb-border-2);
border-radius: var(--pb-r-xl);
outline: none;
line-height: 1.5;
transition: border-color var(--pb-t) var(--pb-ease);
}
.pb-chat-input:focus { border-color: var(--pb-500); }
.pb-chat-input::placeholder { color: var(--pb-text-3); }
/* ════════════════════════════════════════════════════════════════════
§37 RATING STARS .pb-rating
════════════════════════════════════════════════════════════════════ */
.pb-rating {
display: inline-flex;
align-items: center;
gap: .1rem;
}
/* Version statique (affichage) */
.pb-rating-star {
display: inline-block;
font-size: 1.1rem;
color: var(--pb-border-2);
line-height: 1;
transition: color var(--pb-t-fast) var(--pb-ease);
}
.pb-rating-star.filled { color: #F59E0B; }
.pb-rating-star.half {
position: relative;
color: var(--pb-border-2);
}
.pb-rating-star.half::before {
content: '★';
position: absolute;
left: 0;
top: 0;
color: #F59E0B;
clip-path: inset(0 50% 0 0);
}
/* Version interactive (input) */
.pb-rating-input { display: inline-flex; flex-direction: row-reverse; gap: .1rem; }
.pb-rating-input input { display: none; }
.pb-rating-input label {
font-size: 1.3rem;
color: var(--pb-border-2);
cursor: pointer;
line-height: 1;
transition: color var(--pb-t-fast) var(--pb-ease), transform var(--pb-t-fast) var(--pb-spring);
}
.pb-rating-input label:hover,
.pb-rating-input label:hover ~ label,
.pb-rating-input input:checked ~ label { color: #F59E0B; }
.pb-rating-input label:hover { transform: scale(1.25); }
/* Affichage compact avec texte */
.pb-rating-inline {
display: inline-flex;
align-items: center;
gap: .35rem;
}
.pb-rating-value { font-size: .85rem; font-weight: 800; color: var(--pb-text); }
.pb-rating-count { font-size: .78rem; color: var(--pb-text-3); }
/* Barre de distribution de notes */
.pb-rating-bar-row {
display: flex;
align-items: center;
gap: .75rem;
font-size: .78rem;
}
.pb-rating-bar-label { width: 40px; text-align: right; color: var(--pb-text-2); font-weight: 600; }
.pb-rating-bar-track { flex: 1; height: 6px; background: var(--pb-bg-muted); border-radius: var(--pb-r-pill); overflow: hidden; }
.pb-rating-bar-fill { height: 100%; background: #F59E0B; border-radius: var(--pb-r-pill); transition: width var(--pb-t-slow) var(--pb-ease); }
.pb-rating-bar-count { width: 32px; color: var(--pb-text-3); }
/* ════════════════════════════════════════════════════════════════════
§38 SKELETON AVANCÉ .pb-skel-card / .pb-skel-profile / .pb-skel-table
════════════════════════════════════════════════════════════════════ */
/* Réutilise .pb-skeleton existant — ajoute des layouts prêts à l'emploi */
.pb-skel-card {
background: var(--pb-surface);
border: 1px solid var(--pb-border);
border-radius: var(--pb-r-xl);
padding: 1.25rem;
display: flex;
flex-direction: column;
gap: .75rem;
}
.pb-skel-card .pb-skeleton-media {
width: 100%;
aspect-ratio: 16/9;
border-radius: var(--pb-r-lg);
}
.pb-skel-card .pb-skeleton-title { height: 1rem; width: 65%; }
.pb-skel-card .pb-skeleton-line { height: .8rem; }
.pb-skel-card .pb-skeleton-line-sm { height: .8rem; width: 80%; }
.pb-skel-card .pb-skeleton-line-xs { height: .8rem; width: 55%; }
.pb-skel-card .pb-skel-footer {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: .25rem;
}
.pb-skel-card .pb-skeleton-btn { height: 32px; width: 100px; border-radius: var(--pb-r-sm); }
/* Profil */
.pb-skel-profile {
display: flex;
align-items: center;
gap: 1rem;
}
.pb-skel-profile .pb-skeleton-avatar { width: 48px; height: 48px; border-radius: 50%; flex-shrink: 0; }
.pb-skel-profile .pb-skel-info { flex: 1; display: flex; flex-direction: column; gap: .5rem; }
.pb-skel-profile .pb-skeleton-name { height: .9rem; width: 45%; }
.pb-skel-profile .pb-skeleton-detail { height: .75rem; width: 70%; }
/* Liste table squelette */
.pb-skel-table-row {
display: flex;
align-items: center;
gap: 1rem;
padding: .875rem 1rem;
border-bottom: 1px solid var(--pb-border);
}
.pb-skel-table-row:last-child { border-bottom: none; }
.pb-skel-table-row .pb-skeleton-check { width: 18px; height: 18px; border-radius: 4px; flex-shrink: 0; }
.pb-skel-table-row .pb-skeleton-avatar { width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0; }
.pb-skel-table-row .pb-skeleton-cell { flex: 1; height: .85rem; }
.pb-skel-table-row .pb-skeleton-cell-sm{ width: 80px; height: .85rem; }
.pb-skel-table-row .pb-skeleton-badge { width: 60px; height: 20px; border-radius: var(--pb-r-pill); }
/* ════════════════════════════════════════════════════════════════════
§39 FILE UPLOAD / DROPZONE .pb-dropzone
════════════════════════════════════════════════════════════════════ */
.pb-dropzone {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: .75rem;
padding: 2.5rem 1.5rem;
border: 2px dashed var(--pb-border-2);
border-radius: var(--pb-r-xl);
background: var(--pb-bg-subtle);
cursor: pointer;
text-align: center;
transition: all var(--pb-t) var(--pb-ease);
position: relative;
overflow: hidden;
}
.pb-dropzone:hover,
.pb-dropzone.pb-dropzone-active {
border-color: var(--pb-500);
background: var(--pb-50);
}
.pb-dropzone.pb-dropzone-active { box-shadow: 0 0 0 3px var(--pb-ring); }
.pb-dropzone input[type="file"] {
position: absolute;
inset: 0;
opacity: 0;
cursor: pointer;
width: 100%;
height: 100%;
}
.pb-dropzone-icon {
width: 52px;
height: 52px;
border-radius: var(--pb-r-xl);
background: var(--pb-100);
color: var(--pb-600);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
transition: transform var(--pb-t) var(--pb-spring);
}
.pb-dropzone:hover .pb-dropzone-icon { transform: translateY(-3px); }
.pb-dropzone-title { font-size: .9rem; font-weight: 700; color: var(--pb-text); }
.pb-dropzone-hint { font-size: .78rem; color: var(--pb-text-3); }
.pb-dropzone-accept { font-size: .72rem; color: var(--pb-text-3); font-style: italic; }
/* Variante compacte */
.pb-dropzone-sm {
padding: 1.25rem 1rem;
flex-direction: row;
gap: 1rem;
text-align: left;
}
.pb-dropzone-sm .pb-dropzone-icon { width: 40px; height: 40px; font-size: 1.1rem; flex-shrink: 0; }
/* File list (après upload) */
.pb-file-list { display: flex; flex-direction: column; gap: .5rem; }
.pb-file-item {
display: flex;
align-items: center;
gap: .75rem;
padding: .625rem .875rem;
background: var(--pb-surface);
border: 1px solid var(--pb-border);
border-radius: var(--pb-r-lg);
}
.pb-file-icon { font-size: 1.1rem; color: var(--pb-text-3); flex-shrink: 0; }
.pb-file-info { flex: 1; min-width: 0; }
.pb-file-name { font-size: .85rem; font-weight: 600; color: var(--pb-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pb-file-size { font-size: .72rem; color: var(--pb-text-3); }
.pb-file-remove {
display: flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
border-radius: 50%;
background: none;
border: none;
cursor: pointer;
color: var(--pb-text-3);
transition: all var(--pb-t-fast) var(--pb-ease);
}
.pb-file-remove:hover { background: var(--pb-danger-bg); color: var(--pb-danger); }
/* Barre de progression d'upload */
.pb-file-progress {
width: 100%;
height: 3px;
background: var(--pb-bg-muted);
border-radius: var(--pb-r-pill);
margin-top: .35rem;
overflow: hidden;
}
.pb-file-progress-bar {
height: 100%;
background: var(--pb-500);
border-radius: var(--pb-r-pill);
transition: width .4s var(--pb-ease);
}
.pb-file-progress-bar.complete { background: var(--pb-success); }
.pb-file-progress-bar.error { background: var(--pb-danger); }
/* ════════════════════════════════════════════════════════════════════
§40 SUBNAV / SIDEBAR 2E NIVEAU .pb-subnav / .pb-sidebar-group
════════════════════════════════════════════════════════════════════ */
/* Groupe d'éléments sidebar avec sous-menu collapse */
.pb-sidebar-group {}
.pb-sidebar-group-btn {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: .5rem .75rem;
border-radius: var(--pb-r-sm);
font-size: .875rem;
font-weight: 600;
color: var(--pb-text-2);
background: none;
border: none;
cursor: pointer;
font-family: var(--pb-font);
transition: all var(--pb-t) var(--pb-ease);
}
.pb-sidebar-group-btn:hover { background: var(--pb-bg-muted); color: var(--pb-text); }
.pb-sidebar-group-btn.active { color: var(--pb-500); background: var(--pb-50); }
.pb-sidebar-group-chevron {
width: 14px;
height: 14px;
color: var(--pb-text-3);
transition: transform var(--pb-t) var(--pb-ease);
flex-shrink: 0;
}
.pb-sidebar-group-btn[aria-expanded="true"] .pb-sidebar-group-chevron { transform: rotate(90deg); }
.pb-sidebar-sub {
padding-left: 1.25rem;
margin-top: .125rem;
display: flex;
flex-direction: column;
gap: .125rem;
}
.pb-sidebar-sub .pb-sidebar-item {
font-size: .825rem;
font-weight: 400;
padding: .375rem .75rem;
}
.pb-sidebar-sub .pb-sidebar-item::before {
content: '';
display: inline-block;
width: 4px;
height: 4px;
border-radius: 50%;
background: var(--pb-border-2);
margin-right: .5rem;
flex-shrink: 0;
transition: background var(--pb-t) var(--pb-ease);
}
.pb-sidebar-sub .pb-sidebar-item:hover::before { background: var(--pb-500); }
.pb-sidebar-sub .pb-sidebar-item.active::before { background: var(--pb-500); }
/* Subnav horizontal (barre secondaire sous navbar) */
.pb-subnav {
height: 44px;
display: flex;
align-items: center;
border-bottom: 1px solid var(--pb-border);
background: var(--pb-bg-subtle);
padding: 0 1.5rem;
gap: .125rem;
overflow-x: auto;
scrollbar-width: none;
}
.pb-subnav::-webkit-scrollbar { display: none; }
.pb-subnav-item {
display: flex;
align-items: center;
gap: .375rem;
padding: .35rem .75rem;
border-radius: var(--pb-r-sm);
font-size: .825rem;
font-weight: 500;
color: var(--pb-text-2);
text-decoration: none;
background: none;
border: none;
cursor: pointer;
white-space: nowrap;
font-family: var(--pb-font);
transition: all var(--pb-t) var(--pb-ease);
}
.pb-subnav-item:hover { background: var(--pb-bg-muted); color: var(--pb-text); text-decoration: none; }
.pb-subnav-item.active { color: var(--pb-500); background: var(--pb-50); font-weight: 600; }
/* ════════════════════════════════════════════════════════════════════
§41 EMPTY STATE .pb-empty-state
════════════════════════════════════════════════════════════════════ */
.pb-empty-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
gap: 1rem;
padding: 4rem 2rem;
min-height: 280px;
}
.pb-empty-state-sm { padding: 2rem 1.5rem; min-height: 160px; }
.pb-empty-state-lg { padding: 6rem 2rem; }
.pb-empty-icon {
width: 72px;
height: 72px;
border-radius: var(--pb-r-2xl);
background: var(--pb-bg-muted);
display: flex;
align-items: center;
justify-content: center;
font-size: 2rem;
color: var(--pb-text-3);
margin-bottom: .5rem;
}
.pb-empty-state-sm .pb-empty-icon { width: 52px; height: 52px; font-size: 1.4rem; border-radius: var(--pb-r-xl); margin-bottom: 0; }
.pb-empty-title { font-size: 1.05rem; font-weight: 700; color: var(--pb-text); margin: 0; }
.pb-empty-subtitle { font-size: .875rem; color: var(--pb-text-3); max-width: 38ch; line-height: 1.65; margin: 0; }
.pb-empty-actions { display: flex; gap: .75rem; flex-wrap: wrap; justify-content: center; margin-top: .5rem; }
/* Variante illustrée (fond subtil) */
.pb-empty-state-bg {
background: var(--pb-bg-subtle);
border: 1px dashed var(--pb-border-2);
border-radius: var(--pb-r-2xl);
}
/* ════════════════════════════════════════════════════════════════════
§42 KEYBOARD SHORTCUTS .pb-kbd / .pb-shortcut
════════════════════════════════════════════════════════════════════ */
.pb-kbd {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 24px;
height: 22px;
padding: 0 .45rem;
background: var(--pb-bg-muted);
border: 1px solid var(--pb-border-2);
border-bottom: 2px solid var(--pb-border-2);
border-radius: var(--pb-r-xs);
font-size: .7rem;
font-weight: 700;
font-family: var(--pb-font-mono);
color: var(--pb-text-2);
line-height: 1;
white-space: nowrap;
user-select: none;
letter-spacing: .02em;
}
[data-theme="dark"] .pb-kbd {
background: var(--pb-bg-muted);
border-color: var(--pb-border-2);
border-bottom-color: var(--pb-border-2);
}
/* Combinaison de touches */
.pb-shortcut {
display: inline-flex;
align-items: center;
gap: .2rem;
}
.pb-shortcut-sep {
font-size: .65rem;
color: var(--pb-text-3);
font-weight: 700;
}
/* Ligne de shortcut dans une liste */
.pb-shortcut-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: .5rem 0;
border-bottom: 1px solid var(--pb-border);
font-size: .85rem;
}
.pb-shortcut-row:last-child { border-bottom: none; }
.pb-shortcut-desc { color: var(--pb-text-2); }
/* Panneau de raccourcis (modal/popover) */
.pb-shortcuts-panel {}
.pb-shortcuts-section { margin-bottom: 1.25rem; }
.pb-shortcuts-section-title {
font-size: .65rem;
font-weight: 800;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--pb-text-3);
margin-bottom: .5rem;
padding-bottom: .375rem;
border-bottom: 1px solid var(--pb-border);
}
/* ════════════════════════════════════════════════════════════════════
§43 CODE BLOCK .pb-code-block
════════════════════════════════════════════════════════════════════ */
.pb-code-block {
position: relative;
background: var(--pb-surface);
border: 1px solid var(--pb-border);
border-radius: var(--pb-r-xl);
overflow: hidden;
}
.pb-code-block-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: .6rem 1rem;
background: var(--pb-bg-subtle);
border-bottom: 1px solid var(--pb-border);
}
.pb-code-lang {
font-size: .7rem;
font-weight: 700;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--pb-text-3);
font-family: var(--pb-font-mono);
}
.pb-code-copy {
display: inline-flex;
align-items: center;
gap: .35rem;
padding: .25rem .65rem;
background: none;
border: 1px solid var(--pb-border);
border-radius: var(--pb-r-sm);
font-size: .72rem;
font-weight: 600;
color: var(--pb-text-3);
cursor: pointer;
font-family: var(--pb-font);
transition: all var(--pb-t-fast) var(--pb-ease);
}
.pb-code-copy:hover { background: var(--pb-bg-muted); color: var(--pb-text); border-color: var(--pb-border-2); }
.pb-code-copy.copied { color: var(--pb-success); border-color: var(--pb-success-bd); background: var(--pb-success-bg); }
.pb-code-block pre {
margin: 0;
padding: 1.25rem 1.25rem;
font-family: var(--pb-font-mono);
font-size: .825rem;
line-height: 1.7;
color: var(--pb-text);
overflow-x: auto;
background: transparent;
border: none;
border-radius: 0;
}
/* Numérotation de lignes */
.pb-code-block.pb-code-numbered pre {
padding-left: 0;
counter-reset: line;
}
.pb-code-block.pb-code-numbered .pb-code-line {
display: flex;
counter-increment: line;
}
.pb-code-block.pb-code-numbered .pb-code-line::before {
content: counter(line);
display: inline-block;
min-width: 2.5rem;
padding: 0 1rem 0 1.25rem;
color: var(--pb-text-3);
text-align: right;
flex-shrink: 0;
user-select: none;
border-right: 1px solid var(--pb-border);
margin-right: 1rem;
opacity: .5;
font-size: .75rem;
}
/* Ligne surlignée */
.pb-code-line-hl { background: hsla(var(--pb-h),var(--pb-s),46%,.08); border-left: 2px solid var(--pb-500); margin-left: -2px; }
/* Mini inline avec langue colorée */
.pb-code-inline-wrap {
display: inline-flex;
align-items: center;
gap: 0;
border: 1px solid var(--pb-border);
border-radius: var(--pb-r-sm);
overflow: hidden;
font-size: .8rem;
vertical-align: middle;
}
.pb-code-inline-badge {
padding: .1rem .45rem;
background: var(--pb-100);
color: var(--pb-700);
font-size: .65rem;
font-weight: 800;
letter-spacing: .07em;
text-transform: uppercase;
border-right: 1px solid var(--pb-border);
font-family: var(--pb-font);
}
.pb-code-inline-wrap code {
padding: .1rem .5rem;
font-family: var(--pb-font-mono);
color: var(--pb-text);
background: var(--pb-bg-muted);
}
/* ════════════════════════════════════════════════════════════════════
§44 SCROLL SNAP ROW .pb-snap-row
Carousel CSS-only, zéro JS requis
════════════════════════════════════════════════════════════════════ */
.pb-snap-row {
display: flex;
gap: 1rem;
overflow-x: auto;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
scroll-behavior: smooth;
scrollbar-width: none;
padding-bottom: .25rem;
}
.pb-snap-row::-webkit-scrollbar { display: none; }
.pb-snap-item {
scroll-snap-align: start;
flex-shrink: 0;
}
/* Tailles prédéfinies */
.pb-snap-item-xs { width: 180px; }
.pb-snap-item-sm { width: 240px; }
.pb-snap-item-md { width: 300px; }
.pb-snap-item-lg { width: 360px; }
.pb-snap-item-xl { width: 440px; }
.pb-snap-item-full{ width: calc(100% - 1rem); } /* quasi-plein écran */
/* Centré (center snap) */
.pb-snap-row-center { scroll-snap-type: x mandatory; }
.pb-snap-row-center .pb-snap-item { scroll-snap-align: center; }
/* Indicateurs de pagination (dots) — positionnels, CSS only */
.pb-snap-dots {
display: flex;
justify-content: center;
gap: .4rem;
margin-top: .75rem;
}
.pb-snap-dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--pb-border-2);
transition: all var(--pb-t) var(--pb-ease);
border: none;
padding: 0;
cursor: pointer;
}
.pb-snap-dot.active,
.pb-snap-dot:hover { background: var(--pb-500); transform: scale(1.2); }
/* Variante pill actif */
.pb-snap-dot-pill.active { width: 20px; border-radius: var(--pb-r-pill); }
/* Fade edges (gradient overlay) */
.pb-snap-wrap {
position: relative;
}
.pb-snap-wrap::before,
.pb-snap-wrap::after {
content: '';
position: absolute;
top: 0;
bottom: 0;
width: 48px;
z-index: 2;
pointer-events: none;
transition: opacity var(--pb-t) var(--pb-ease);
}
.pb-snap-wrap::before {
left: 0;
background: linear-gradient(to right, var(--pb-bg), transparent);
}
.pb-snap-wrap::after {
right: 0;
background: linear-gradient(to left, var(--pb-bg), transparent);
}
/* Boutons navigation (optionnels, JS-driven) */
.pb-snap-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 50%;
background: var(--pb-surface);
border: 1.5px solid var(--pb-border-2);
box-shadow: var(--pb-sh-sm);
cursor: pointer;
color: var(--pb-text-2);
font-size: 1rem;
transition: all var(--pb-t) var(--pb-ease);
}
.pb-snap-btn:hover { background: var(--pb-bg-muted); color: var(--pb-text); box-shadow: var(--pb-sh); }
.pb-snap-btn:disabled { opacity: .35; pointer-events: none; }
.pb-snap-nav {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: .625rem;
}