/* JelyaHome — Utils Bundle Desktop CSS — Auto-generated: 2026-03-14 23:45:25 */

.jh-accordion { display:flex; flex-direction:column; gap:var(--space-sm); }
.jh-accordion-item { background:var(--card-bg); border:var(--card-border); border-radius:var(--radius-sm); overflow:hidden; }
.jh-accordion-header { display:flex; align-items:center; justify-content:space-between; padding:var(--space-xl); cursor:pointer;  transition:background var(--duration-fast); }
.jh-accordion-header:hover { background:var(--accent-chip); }
.jh-accordion-header-text { font-size:var(--fs-sm); font-weight:var(--fw-semibold); color:var(--text-primary); }
.jh-accordion-chevron { font-size:var(--fs-md); color:var(--text-secondary); transition:transform var(--duration-base) var(--ease-default); }
.jh-accordion-item.open .jh-accordion-chevron { transform:rotate(180deg); }
.jh-accordion-body { padding:0 var(--space-xl) var(--space-xl); display:none; font-size:var(--fs-sm); color:var(--text-secondary); line-height:1.6; }
.jh-accordion-item.open .jh-accordion-body { display:block; animation:jhAccordionOpen 0.3s var(--ease-default); }
@keyframes jhAccordionOpen { from{opacity:0;transform:translateY(-4px);} to{opacity:1;transform:translateY(0);} }

.jh-autocomplete { position:relative; }
.jh-autocomplete-list { position:absolute; top:calc(100% + 4px); left:0; right:0; max-height:240px; overflow-y:auto; z-index:var(--z-dropdown); border-radius:var(--radius-sm); animation:jhAutoIn 0.15s var(--ease-default); background:var(--sheet-bg); border:var(--card-border); box-shadow:0 8px 32px rgba(0,0,0,0.12); display:none; }
.jh-autocomplete-list.open { display:block; }
@keyframes jhAutoIn { from{opacity:0;transform:translateY(-4px);} to{opacity:1;} }

.jh-autocomplete-item { padding:var(--space-md) var(--space-xl); font-size:var(--fs-sm); color:var(--text-primary); cursor:pointer; transition:background var(--duration-fast); }
.jh-autocomplete-item:hover,.jh-autocomplete-item.highlighted { background:var(--accent-chip); }

.jh-autocomplete-item mark { background:transparent; color:var(--accent); font-weight:var(--fw-bold); }

.jh-avatar { display:inline-flex; align-items:center; justify-content:center; border-radius:50%; overflow:hidden; font-weight:var(--fw-bold); text-transform:uppercase; flex-shrink:0; background:var(--accent-chip); color:var(--accent); }
.jh-avatar-xs { width:24px; height:24px; font-size:10px; }
.jh-avatar-sm { width:32px; height:32px; font-size:12px; }
.jh-avatar-md { width:40px; height:40px; font-size:var(--fs-sm); }
.jh-avatar-lg { width:56px; height:56px; font-size:var(--fs-md); }
.jh-avatar-xl { width:80px; height:80px; font-size:var(--fs-xl); }
.jh-avatar img { width:100%; height:100%; object-fit:cover; }
.jh-avatar-group { display:flex; }
.jh-avatar-group .jh-avatar { margin-left:-8px; border:2px solid var(--bg-primary); }
.jh-avatar-group .jh-avatar:first-child { margin-left:0; }

.jh-badge { position:relative; display:inline-flex; }
.jh-badge-count { position:absolute; top:-4px; right:-4px; min-width:18px; height:18px; padding:0 5px; border-radius:999px; background:#dc3545; color:white; font-size:10px; font-weight:var(--fw-bold); display:flex; align-items:center; justify-content:center; line-height:1; animation:jhBadgeIn 0.2s var(--ease-bounce); }
@keyframes jhBadgeIn { from{transform:scale(0);} to{transform:scale(1);} }
.jh-badge-dot { position:absolute; top:0; right:0; width:8px; height:8px; border-radius:50%; background:#dc3545; }

.jh-breadcrumb { display:flex; align-items:center; gap:var(--space-sm); font-size:var(--fs-sm); margin-bottom:var(--space-xl); }
.jh-breadcrumb-item { color:var(--text-secondary); transition:color var(--duration-fast); }
.jh-breadcrumb-item a { color:var(--text-secondary); text-decoration:none; }
.jh-breadcrumb-item a:hover { color:var(--accent); }
.jh-breadcrumb-item.active { color:var(--text-primary); font-weight:var(--fw-semibold); }
.jh-breadcrumb-sep { color:var(--text-secondary); opacity:0.4; font-size:var(--fs-xs); }

.jh-btn-group { display:inline-flex; border-radius:var(--radius-sm); overflow:hidden; border:2px solid var(--input-border); }
.jh-btn-group .jh-btn { border-radius:0; border:none; border-right:1px solid var(--input-border); margin:0; }
.jh-btn-group .jh-btn:last-child { border-right:none; }
.jh-btn-group .jh-btn.active { background:var(--accent); color:var(--btn-text); }


.jh-calendar { background:var(--card-bg); border:var(--card-border); border-radius:var(--radius); padding:var(--space-xl); }
.jh-calendar-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:var(--space-lg); }
.jh-calendar-nav { font-size:var(--fs-md); color:var(--text-secondary); padding:var(--space-sm); cursor:pointer; transition:color var(--duration-fast); }
.jh-calendar-nav:hover { color:var(--accent); }
.jh-calendar-title { font-size:var(--fs-md); font-weight:var(--fw-bold); color:var(--text-primary); font-family:var(--font-title); }
.jh-calendar-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:var(--space-xs); }
.jh-calendar-day-name { font-size:var(--fs-xs); font-weight:var(--fw-semibold); color:var(--text-secondary); text-align:center; padding:var(--space-sm); }
.jh-calendar-cell { aspect-ratio:1.4; display:flex; flex-direction:column; align-items:flex-start; padding:var(--space-sm); border-radius:var(--radius-sm); font-size:var(--fs-xs); color:var(--text-primary); cursor:pointer; transition:background var(--duration-fast); position:relative; }
.jh-calendar-cell:hover { background:var(--accent-chip); }
.jh-calendar-cell.other { opacity:0.3; }
.jh-calendar-cell.today { font-weight:var(--fw-bold); color:var(--accent); }
.jh-calendar-cell.selected { background:var(--accent); color:var(--btn-text); }
.jh-calendar-cell .jh-calendar-dots { display:flex; gap:2px; justify-content:center; margin-top:2px; }
.jh-calendar-cell .dot { width:4px; height:4px; border-radius:50%; background:var(--accent); }

.jh-carousel { position:relative; overflow:hidden; border-radius:var(--radius-sm); }
.jh-carousel-track { display:flex; transition:transform 0.4s var(--ease-default); }
.jh-carousel-slide { flex:0 0 100%; min-width:0; }
.jh-carousel-arrow { position:absolute; top:50%; transform:translateY(-50%); width:36px; height:36px; border-radius:50%; background:var(--sheet-bg); box-shadow:0 4px 16px rgba(0,0,0,0.1); display:flex; align-items:center; justify-content:center; font-size:var(--fs-md); color:var(--text-primary); cursor:pointer; z-index:var(--z-base); transition:all var(--duration-fast); }
.jh-carousel-arrow:hover { box-shadow:0 4px 20px rgba(0,0,0,0.15); }
.jh-carousel-prev { left:var(--space-md); }
.jh-carousel-next { right:var(--space-md); }
.jh-carousel-dots { display:flex; justify-content:center; gap:var(--space-sm); padding:var(--space-lg) 0; }
.jh-carousel-dot { width:8px; height:8px; border-radius:50%; background:var(--toggle-bg); cursor:pointer; transition:all var(--duration-base); }
.jh-carousel-dot.active { background:var(--accent); width:24px; border-radius:4px; }

.jh-checkbox { display:inline-flex; align-items:center; gap:var(--space-md); cursor:pointer; }
.jh-checkbox input { display:none; }
.jh-checkbox-box { width:20px; height:20px; border:2px solid var(--input-border); border-radius:6px; display:flex; align-items:center; justify-content:center; transition:all var(--duration-base) var(--ease-default); flex-shrink:0; }
.jh-checkbox input:checked + .jh-checkbox-box { background:var(--accent); border-color:var(--accent); }
.jh-checkbox-box i { font-size:14px; color:var(--btn-text); opacity:0; transform:scale(0.5); transition:all var(--duration-fast); }
.jh-checkbox input:checked + .jh-checkbox-box i { opacity:1; transform:scale(1); }
.jh-checkbox-label { font-size:var(--fs-sm); color:var(--text-primary); }
.jh-radio { display:inline-flex; align-items:center; gap:var(--space-md); cursor:pointer; }
.jh-radio input { display:none; }
.jh-radio-dot { width:20px; height:20px; border:2px solid var(--input-border); border-radius:50%; display:flex; align-items:center; justify-content:center; transition:all var(--duration-base); flex-shrink:0; }
.jh-radio input:checked + .jh-radio-dot { border-color:var(--accent); }
.jh-radio-dot::after { content:''; width:calc(20px - 10px); height:calc(20px - 10px); border-radius:50%; background:var(--accent); transform:scale(0); transition:transform var(--duration-fast) var(--ease-bounce); }
.jh-radio input:checked + .jh-radio-dot::after { transform:scale(1); }
.jh-radio-label { font-size:var(--fs-sm); color:var(--text-primary); }

.jh-chip-group { display:flex; flex-wrap:wrap; gap:var(--space-sm); }
.jh-chip { display:inline-flex; align-items:center; gap:var(--space-sm); padding:var(--space-sm) var(--space-lg); font-size:var(--fs-xs); font-weight:var(--fw-semibold); color:var(--text-secondary); background:var(--toggle-bg); border-radius:999px; border:2px solid transparent; cursor:pointer; transition:all var(--duration-base) var(--ease-default); }
.jh-chip:hover { background:var(--accent-chip); color:var(--accent); }
.jh-chip.active { background:var(--accent-chip); color:var(--accent); border-color:var(--accent-border); }
.jh-chip i { font-size:var(--fs-sm); }

.jh-collapsible { border:var(--card-border); border-radius:var(--radius-sm); overflow:hidden; background:var(--card-bg); }
.jh-collapsible-header { display:flex; align-items:center; justify-content:space-between; padding:var(--space-lg) var(--space-xl); cursor:pointer;  }
.jh-collapsible-header:hover { background:var(--accent-chip); }
.jh-collapsible-title { font-size:var(--fs-sm); font-weight:var(--fw-semibold); color:var(--text-primary); display:flex; align-items:center; gap:var(--space-md); }
.jh-collapsible-chevron { font-size:var(--fs-md); color:var(--text-secondary); transition:transform var(--duration-base) var(--ease-default); }
.jh-collapsible.open .jh-collapsible-chevron { transform:rotate(180deg); }
.jh-collapsible-body { display:none; padding:0 var(--space-xl) var(--space-xl); }
.jh-collapsible.open .jh-collapsible-body { display:block; animation:jhCollOpen 0.25s var(--ease-default); }
@keyframes jhCollOpen { from{opacity:0;} to{opacity:1;} }

/* ColorPicker 4x4 dropdown */
.jh-colorpicker { position:absolute; top:calc(100% + 4px); left:0; z-index:var(--z-dropdown); border-radius:var(--radius-sm); width:auto; background:var(--sheet-bg); box-shadow:0 8px 32px rgba(0,0,0,0.12); padding:var(--space-lg); animation:jhDropIn 0.2s var(--ease-default); }
.jh-colorpicker-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--space-sm); }
.jh-color-swatch { width:36px; height:36px; border-radius:var(--radius-sm); cursor:pointer; border:3px solid transparent; transition:all var(--duration-fast); }
.jh-color-swatch:hover { transform:scale(1.1); }
.jh-color-swatch.selected { border-color:var(--text-primary); box-shadow:0 0 0 3px var(--accent-glow); }

/* Picker field — champ d'entrée avec label (IconPicker / ColorPicker) */
/* Hauteur 44px = même que .jh-input (padding 12px * 2 + line-height ~20px) */
.jh-picker-field { display:flex; align-items:center; border:1px solid var(--input-border); border-radius:var(--radius-sm); background:var(--input-bg); overflow:hidden; cursor:pointer; transition:border-color var(--duration-base) var(--ease-default); height:44px; }
.jh-picker-field:focus-within { border-color:var(--accent); }
.jh-picker-field-label { flex:1; padding:0 var(--space-lg); font-size:var(--fs-sm); color:var(--text-primary); font-weight:var(--fw-medium); user-select:none; }
.jh-picker-btn { width:44px; height:44px; flex-shrink:0; border:1px solid var(--input-border); border-radius:var(--radius-sm); cursor:pointer; background:var(--input-bg); display:flex; align-items:center; justify-content:center; font-size:var(--fs-lg); color:var(--text-secondary); padding:0; transition:border-color var(--duration-fast); }
.jh-picker-btn:hover { border-color:var(--accent); }
.jh-picker-btn.color { border:1px solid var(--input-border); border-radius:var(--radius-sm); width:44px; height:44px; flex-shrink:0; }
.jh-picker-btn.color:hover { border-color:var(--accent); }
.jh-picker-field .jh-picker-btn { border:none; border-radius:0; border-left:1px solid var(--input-border); width:44px; height:100%; align-self:stretch; flex-shrink:0; }
.jh-picker-field .jh-picker-btn.color { border:none; border-left:1px solid var(--input-border); width:44px; height:100%; align-self:stretch; flex-shrink:0; }

.jh-contextmenu { position:fixed; min-width:180px; background:var(--sheet-bg); border:var(--card-border); border-radius:var(--radius-sm); box-shadow:0 8px 32px rgba(0,0,0,0.15); padding:var(--space-sm) 0; z-index:var(--z-dropdown); animation:jhContextIn 0.15s var(--ease-default); }
@keyframes jhContextIn { from{opacity:0;transform:scale(0.96);} to{opacity:1;transform:scale(1);} }
.jh-contextmenu-item { display:flex; align-items:center; gap:var(--space-md); padding:var(--space-md) var(--space-xl); font-size:var(--fs-sm); color:var(--text-primary); cursor:pointer; transition:background var(--duration-fast); }
.jh-contextmenu-item:hover { background:var(--accent-chip); }
.jh-contextmenu-item i { font-size:var(--fs-md); color:var(--text-secondary); }
.jh-contextmenu-item.danger { color:#dc3545; }
.jh-contextmenu-divider { height:1px; background:var(--toggle-bg); margin:var(--space-xs) 0; }

.jh-countdown { display:flex; gap:var(--space-md); justify-content:center; }
.jh-countdown-unit { display:flex; flex-direction:column; align-items:center; }
.jh-countdown-value { font-size:var(--fs-2xl); font-weight:var(--fw-bold); color:var(--text-primary); font-family:var(--font-title); min-width:48px; text-align:center; background:var(--card-bg); border:var(--card-border); border-radius:var(--radius-sm); padding:var(--space-sm) var(--space-md); }
.jh-countdown-label { font-size:var(--fs-xs); color:var(--text-secondary); margin-top:var(--space-xs); text-transform:uppercase; }
.jh-countdown-sep { font-size:var(--fs-xl); font-weight:var(--fw-bold); color:var(--text-secondary); align-self:center; margin-bottom:var(--space-xl); }

.jh-datepicker { position:absolute; top:calc(100% + 4px); left:0; z-index:var(--z-dropdown); background:var(--sheet-bg); box-shadow:0 8px 32px rgba(0,0,0,0.12); border-radius:var(--radius-sm); padding:var(--space-xl); animation:jhDropIn 0.25s var(--ease-default);  }

@keyframes jhDropIn { from{opacity:0;transform:translateY(-4px);} to{opacity:1;transform:translateY(0);} }

.jh-datepicker-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:var(--space-lg); }
.jh-datepicker-nav { font-size:var(--fs-md); color:var(--text-secondary); cursor:pointer; padding:var(--space-sm); transition:color var(--duration-fast); }
.jh-datepicker-nav:hover { color:var(--accent); }
.jh-datepicker-title { font-size:var(--fs-sm); font-weight:var(--fw-semibold); color:var(--text-primary); }
.jh-datepicker-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:2px; text-align:center; }
.jh-datepicker-day-label { font-size:var(--fs-xs); color:var(--text-secondary); font-weight:var(--fw-semibold); padding:var(--space-sm); }
.jh-datepicker-day { padding:var(--space-sm); font-size:var(--fs-sm); border-radius:var(--radius-sm); cursor:pointer; color:var(--text-primary); transition:all var(--duration-fast); aspect-ratio:1; display:flex; align-items:center; justify-content:center; }
.jh-datepicker-day:hover { background:var(--accent-chip); }
.jh-datepicker-day.other { color:var(--text-secondary); opacity:0.4; }
.jh-datepicker-day.today { font-weight:var(--fw-bold); color:var(--accent); }
.jh-datepicker-day.selected { background:var(--accent); color:var(--btn-text); font-weight:var(--fw-bold); }


.jh-dropdown { position:relative; display:inline-block; }
.jh-dropdown-menu { position:absolute; top:calc(100% + 4px); right:0; min-width:180px; background:var(--sheet-bg); border:var(--card-border); border-radius:var(--radius-sm); box-shadow:0 8px 32px rgba(0,0,0,0.12); padding:var(--space-sm) 0; z-index:var(--z-dropdown); animation:jhDropIn 0.2s var(--ease-default) both; display:none; }
.jh-dropdown-menu.open { display:block; }
.jh-dropdown-menu--out { animation:jhDropOut 0.15s var(--ease-default) both; }
@keyframes jhDropIn { from{opacity:0;transform:translateY(-4px) scale(0.98);} to{opacity:1;transform:translateY(0) scale(1);} }
@keyframes jhDropOut { from{opacity:1;} to{opacity:0;transform:translateY(-4px);} }
.jh-dropdown-item { display:flex; align-items:center; gap:var(--space-md); padding:var(--space-md) var(--space-xl); font-size:var(--fs-sm); color:var(--text-primary); cursor:pointer; transition:background var(--duration-fast); white-space:nowrap; }
.jh-dropdown-item:hover { background:var(--accent-chip); }
.jh-dropdown-item i { font-size:var(--fs-md); color:var(--text-secondary); }
.jh-dropdown-item.danger { color:#dc3545; }
.jh-dropdown-item.danger i { color:#dc3545; }
.jh-dropdown-divider { height:1px; background:var(--toggle-bg); margin:var(--space-xs) 0; }

/* Menu contextuel compact */
.jh-ctx-menu { position:fixed; z-index:9999; min-width:150px; background:var(--bg-primary); border:var(--card-border); border-radius:var(--radius); box-shadow:var(--card-shadow); padding:4px 0; }
.jh-ctx-item { display:flex; align-items:center; gap:8px; padding:7px 12px; font-size:13px; color:var(--text-primary); cursor:pointer; white-space:nowrap; }
.jh-ctx-item:hover { background:var(--accent-chip); }
.jh-ctx-item i { font-size:14px; width:16px; color:var(--text-secondary); }
.jh-ctx-item.danger { color:#ef4444; }
.jh-ctx-item.danger i { color:#ef4444; }
.jh-ctx-divider { height:1px; background:var(--toggle-bg); margin:4px 0; }

.jh-editor { border:2px solid var(--input-border); border-radius:var(--radius-sm); overflow:hidden; background:var(--input-bg); }
.jh-editor:focus-within { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-glow); }
.jh-editor-toolbar { display:flex;  gap:var(--space-xs); padding:var(--space-sm) var(--space-md); border-bottom:1px solid var(--input-border); background:var(--card-bg); }

.jh-editor-btn { width:32px; height:32px; display:flex; align-items:center; justify-content:center; border-radius:var(--radius-sm); font-size:var(--fs-sm); color:var(--text-secondary); background:transparent; border:none; cursor:pointer; transition:all var(--duration-fast); flex-shrink:0; }
.jh-editor-btn:hover { background:var(--accent-chip); color:var(--accent); }
.jh-editor-btn.active { background:var(--accent-chip); color:var(--accent); }
.jh-editor-content { min-height:150px; padding:var(--space-lg); font-size:var(--fs-sm); color:var(--text-primary); outline:none; line-height:1.7; }
.jh-editor-content:empty::before { content:attr(data-placeholder); color:var(--text-secondary); }

.jh-fab { position:fixed; bottom:var(--space-2xl); right:var(--space-xl); width:56px; height:56px; border-radius:50%; background:var(--accent); color:var(--btn-text); display:flex; align-items:center; justify-content:center; font-size:24px; box-shadow:var(--accent-shadow); z-index:var(--z-sticky); cursor:pointer; border:none;  transition:all var(--duration-base) var(--ease-default); animation:jhFabIn 0.3s var(--ease-bounce); }
@keyframes jhFabIn { from{transform:scale(0);} to{transform:scale(1);} }
.jh-fab:hover { transform:scale(1.08); box-shadow:0 8px 28px var(--accent-glow); }
.jh-fab:active { transform:scale(0.95); }
.jh-fab-mini { width:44px; height:44px; font-size:18px; }

.jh-filters { display:flex; align-items:center; gap:var(--space-md); flex-wrap:wrap; padding:var(--space-lg) 0; }
.jh-filter-btn { padding:var(--space-sm) var(--space-lg); font-size:var(--fs-xs); font-weight:var(--fw-semibold); color:var(--text-secondary); background:var(--toggle-bg); border:none; border-radius:999px; cursor:pointer; transition:all var(--duration-fast); }
.jh-filter-btn:hover { background:var(--accent-chip); color:var(--accent); }
.jh-filter-btn.active { background:var(--accent); color:var(--btn-text); }
.jh-filter-clear { font-size:var(--fs-xs); color:var(--text-secondary); cursor:pointer; margin-left:var(--space-sm); }
.jh-filter-clear:hover { color:var(--accent); }

.jh-field-error .jh-input { border-color:#dc3545 !important; }
.jh-field-error .jh-select-trigger { border-color:#dc3545 !important; }
.jh-field-msg { font-size:var(--fs-xs); margin-top:var(--space-xs); display:none; }
.jh-field-msg.error { display:block; color:#dc3545; }
.jh-field-msg.success { display:block; color:#28a745; }

.jh-iconpicker { position:absolute; top:calc(100% + 4px); left:0; z-index:var(--z-dropdown); border-radius:var(--radius-sm); width:auto; background:var(--sheet-bg); box-shadow:0 8px 32px rgba(0,0,0,0.12); padding:var(--space-lg); animation:jhDropIn 0.2s var(--ease-default); }
.jh-iconpicker-grid { display:grid; grid-template-columns:repeat(6,40px); gap:var(--space-sm); max-height:calc(6 * 40px + 5 * 8px); overflow-y:auto; }
.jh-iconpicker-grid::-webkit-scrollbar { width:4px; }
.jh-iconpicker-grid::-webkit-scrollbar-track { background:transparent; }
.jh-iconpicker-grid::-webkit-scrollbar-thumb { background:var(--toggle-bg); border-radius:2px; }
.jh-icon-cell { width:40px; height:40px; display:flex; align-items:center; justify-content:center; border-radius:var(--radius-sm); cursor:pointer; font-size:var(--fs-lg); color:var(--text-secondary); transition:all var(--duration-fast); border:2px solid transparent; }
.jh-icon-cell:hover { background:var(--accent-chip); color:var(--accent); }
.jh-icon-cell.selected { border-color:var(--accent); color:var(--accent); background:var(--accent-chip); }

.jh-loader-overlay { position:fixed; inset:0; z-index:var(--z-loader); background:rgba(0,0,0,0.15); display:flex; align-items:center; justify-content:center; backdrop-filter:blur(2px); animation:jhLoaderFadeIn 0.2s var(--ease-default) both; }
.jh-loader-overlay--out { animation:jhLoaderFadeOut 0.2s var(--ease-default) both; }
@keyframes jhLoaderFadeIn { from{opacity:0;} to{opacity:1;} }
@keyframes jhLoaderFadeOut { from{opacity:1;} to{opacity:0;} }
.jh-loader-spinner { width:40px; height:40px; border:3px solid var(--toggle-bg); border-top-color:var(--accent); border-radius:50%; animation:jhLoaderSpin 0.7s linear infinite; }
@keyframes jhLoaderSpin { to{transform:rotate(360deg);} }
.jh-loader-text { margin-top:var(--space-lg); font-size:var(--fs-sm); color:var(--text-secondary); text-align:center; }
.jh-loader-box { display:flex; flex-direction:column; align-items:center; padding:var(--space-2xl); background:var(--sheet-bg); border-radius:var(--radius); box-shadow:var(--card-shadow); }
/* Loader local */
.jh-loader-local { display:inline-flex; align-items:center; justify-content:center; }
.jh-loader-local .jh-loader-spinner { width:20px; height:20px; border-width:2px; }

.jh-longpress { position:relative; overflow:hidden; }
.jh-longpress-fill { position:absolute; inset:0; background:var(--accent); opacity:0.15; transform:scaleX(0); transform-origin:left; transition:transform 1s linear; pointer-events:none; }
.jh-longpress.pressing .jh-longpress-fill { transform:scaleX(1); }
.jh-longpress.done { animation:jhLPDone 0.2s; }
@keyframes jhLPDone { 0%{transform:scale(1);} 50%{transform:scale(0.95);} 100%{transform:scale(1);} }

.jh-mention-wrap { position:relative; }
.jh-mention-list { position:absolute; bottom:calc(100% + 4px); left:0; min-width:200px; max-height:200px; overflow-y:auto; z-index:var(--z-dropdown); border-radius:var(--radius-sm); background:var(--sheet-bg); border:var(--card-border); box-shadow:0 8px 24px rgba(0,0,0,0.1); display:none; }
.jh-mention-list.open { display:block; }
.jh-mention-item { display:flex; align-items:center; gap:var(--space-md); padding:var(--space-md) var(--space-xl); font-size:var(--fs-sm); color:var(--text-primary); cursor:pointer; transition:background var(--duration-fast); }
.jh-mention-item:hover { background:var(--accent-chip); }
.jh-mention-avatar { width:24px; height:24px; border-radius:50%; background:var(--accent-chip); display:flex; align-items:center; justify-content:center; font-size:var(--fs-xs); font-weight:var(--fw-bold); color:var(--accent); }

/**
 * JelyaHome — Modal Desktop (multi-niveaux empilable)
 */
.jh-modal-overlay { position:fixed; inset:0; z-index:var(--z-modal-overlay); background:var(--modal-overlay-bg, rgba(0,0,0,0.45)); backdrop-filter:blur(3px); display:flex; align-items:center; justify-content:center; animation:jhModalOverlayIn 0.2s var(--ease-default) both; }
.jh-modal-overlay--out { animation:jhModalOverlayOut 0.2s var(--ease-default) both; }
@keyframes jhModalOverlayIn { from{opacity:0;} to{opacity:1;} }
@keyframes jhModalOverlayOut { from{opacity:1;} to{opacity:0;} }

.jh-modal { background:var(--sheet-bg); border-radius:var(--radius); box-shadow:0 24px 80px rgba(0,0,0,0.35), 0 0 0 1px rgba(255,255,255,0.06); width:90%; max-height:85vh; display:flex; flex-direction:column; animation:jhModalIn 0.3s var(--ease-default) both; position:relative; z-index:var(--z-modal); }
.jh-modal--sm { max-width:400px; }
.jh-modal--md { max-width:560px; }
.jh-modal--lg { max-width:720px; }
.jh-modal--xl { max-width:900px; }
.jh-modal--out { animation:jhModalOut 0.2s var(--ease-default) both; }
@keyframes jhModalIn { from{opacity:0;transform:scale(0.95) translateY(10px);} to{opacity:1;transform:scale(1) translateY(0);} }
@keyframes jhModalOut { from{opacity:1;transform:scale(1);} to{opacity:0;transform:scale(0.95);} }

.jh-modal-header { display:flex; align-items:center; justify-content:space-between; padding:var(--space-xl) var(--space-2xl) var(--space-lg); border-bottom:var(--card-border); flex-shrink:0; }
.jh-modal-title { font-size:var(--fs-md); font-weight:var(--fw-bold); color:var(--text-primary); font-family:var(--font-title); }
.jh-modal-close { font-size:var(--fs-lg); color:var(--text-secondary); padding:var(--space-sm); cursor:pointer; border-radius:var(--radius-sm); transition:all var(--duration-fast); }
.jh-modal-close:hover { background:var(--toggle-bg); color:var(--text-primary); }

.jh-modal-body { padding:var(--space-xl) var(--space-2xl); overflow-y:auto; flex:1; }

.jh-modal-footer { display:flex; justify-content:flex-end; gap:var(--space-md); padding:var(--space-lg) var(--space-2xl) var(--space-xl); border-top:var(--card-border); flex-shrink:0; }

.jh-network-bar { position:fixed; top:0; left:0; right:0; z-index:var(--z-toast); padding:var(--space-sm) var(--space-lg); text-align:center; font-size:var(--fs-xs); font-weight:var(--fw-semibold); transform:translateY(-100%); transition:transform 0.3s var(--ease-default); }
.jh-network-bar.visible { transform:translateY(0); }
.jh-network-bar.offline { background:#dc3545; color:white; }
.jh-network-bar.online { background:#28a745; color:white; }

.jh-stepper-num { display:inline-flex; align-items:center; gap:0; border:2px solid var(--input-border); border-radius:var(--radius-sm); overflow:hidden; background:var(--input-bg); }
.jh-stepper-btn { width:36px; height:36px; display:flex; align-items:center; justify-content:center; background:transparent; border:none; font-size:var(--fs-md); color:var(--text-secondary); cursor:pointer; transition:all var(--duration-fast); }
.jh-stepper-btn:hover { background:var(--accent-chip); color:var(--accent); }
.jh-stepper-btn:active { background:var(--accent-chip); }
.jh-stepper-btn:disabled { opacity:0.3; pointer-events:none; }
.jh-stepper-value { min-width:48px; text-align:center; font-size:var(--fs-sm); font-weight:var(--fw-semibold); color:var(--text-primary); border-left:1px solid var(--input-border); border-right:1px solid var(--input-border); padding:var(--space-sm); background:transparent; border-top:none; border-bottom:none; outline:none; font-family:inherit;  }

.jh-pagination { display:flex; align-items:center; gap:var(--space-xs); justify-content:center; padding:var(--space-xl) 0; }
.jh-page-btn { width:36px; height:36px; display:flex; align-items:center; justify-content:center; border-radius:var(--radius-sm); font-size:var(--fs-sm); font-weight:var(--fw-medium); color:var(--text-secondary); background:transparent; border:none; cursor:pointer; transition:all var(--duration-fast); }
.jh-page-btn:hover { background:var(--accent-chip); color:var(--accent); }
.jh-page-btn.active { background:var(--accent); color:var(--btn-text); font-weight:var(--fw-bold); }
.jh-page-btn:disabled { opacity:0.3; pointer-events:none; }
.jh-page-ellipsis { font-size:var(--fs-sm); color:var(--text-secondary); padding:0 var(--space-xs); }

.jh-pincode { display:flex; gap:var(--space-md); justify-content:center; }
.jh-pincode-digit { width:48px; height:48px; text-align:center; font-size:var(--fs-xl); font-weight:var(--fw-bold); color:var(--text-primary); background:var(--input-bg); border:2px solid var(--input-border); border-radius:var(--radius-sm); outline:none; caret-color:var(--accent); transition:all var(--duration-base);  }
.jh-pincode-digit:focus { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-glow); }
.jh-pincode-digit.filled { border-color:var(--accent); }
.jh-pincode-digit.error { border-color:#dc3545; animation:jhPinShake 0.3s; }
@keyframes jhPinShake { 0%,100%{transform:translateX(0);} 25%{transform:translateX(-4px);} 75%{transform:translateX(4px);} }

.jh-progress { width:100%; height:6px; background:var(--toggle-bg); border-radius:3px; overflow:hidden; position:relative; }
.jh-progress-bar { height:100%; background:var(--accent); border-radius:3px; transition:width 0.3s var(--ease-default); }
.jh-progress-bar.instant { transition:none; }
.jh-progress-bar.animated { animation:jhProgressPulse 1.5s ease-in-out infinite; }
@keyframes jhProgressPulse { 0%,100%{opacity:1;} 50%{opacity:0.6;} }
.jh-progress-bar.indeterminate { width:30% !important; animation:jhProgressIndeterminate 1.5s var(--ease-default) infinite; }
@keyframes jhProgressIndeterminate { 0%{transform:translateX(-100%);} 100%{transform:translateX(400%);} }
.jh-progress-label { display:flex; justify-content:space-between; font-size:var(--fs-xs); color:var(--text-secondary); margin-bottom:var(--space-xs); }

/* Desktop: pas de pull to refresh */

.jh-rating { display:inline-flex; gap:var(--space-xs); }
.jh-rating-star { font-size:20px; color:var(--toggle-bg); cursor:pointer; transition:all var(--duration-fast); }
.jh-rating-star:hover { transform:scale(1.15); }
.jh-rating-star.filled { color:#ffa000; }
.jh-rating-star.half { color:#ffa000; opacity:0.5; }

.jh-scrolltop { position:fixed; bottom:var(--space-2xl); right:var(--space-xl); width:44px; height:44px; border-radius:50%; background:var(--accent); color:var(--btn-text); display:flex; align-items:center; justify-content:center; font-size:var(--fs-lg); box-shadow:var(--accent-shadow); z-index:var(--z-sticky); opacity:0; pointer-events:none; transform:translateY(10px); transition:all var(--duration-base) var(--ease-default);  }
.jh-scrolltop.visible { opacity:1; pointer-events:auto; transform:translateY(0); }
.jh-scrolltop:hover { transform:translateY(-2px); box-shadow:0 6px 20px var(--accent-glow); }

.jh-searchbar { position:relative; }
.jh-searchbar-input { width:100%; padding:var(--space-md) var(--space-xl) var(--space-md) 42px; font-size:var(--fs-sm); background:var(--input-bg); border:2px solid var(--input-border); border-radius:var(--radius-sm); color:var(--text-primary); outline:none; transition:all var(--duration-base); }
.jh-searchbar-input:focus { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-glow); }
.jh-searchbar-icon { position:absolute; left:var(--space-lg); top:50%; transform:translateY(-50%); font-size:var(--fs-md); color:var(--text-secondary); pointer-events:none; }
.jh-searchbar-clear { position:absolute; right:var(--space-md); top:50%; transform:translateY(-50%); font-size:var(--fs-md); color:var(--text-secondary); cursor:pointer; display:none; padding:var(--space-xs); transition:color var(--duration-fast); }
.jh-searchbar-clear.visible { display:block; }
.jh-searchbar-clear:hover { color:var(--text-primary); }
.jh-searchbar-results { position:absolute; top:calc(100% + 4px); left:0; right:0; background:var(--sheet-bg); border:var(--card-border); border-radius:var(--radius-sm); box-shadow:0 8px 32px rgba(0,0,0,0.12); max-height:300px; overflow-y:auto; z-index:var(--z-dropdown); display:none; }
.jh-searchbar-results.open { display:block; animation:jhSearchResultsIn 0.2s var(--ease-default); }
@keyframes jhSearchResultsIn { from{opacity:0;transform:translateY(-4px);} to{opacity:1;transform:translateY(0);} }
.jh-searchbar-result { padding:var(--space-md) var(--space-xl); font-size:var(--fs-sm); color:var(--text-primary); cursor:pointer; transition:background var(--duration-fast); }
.jh-searchbar-result:hover { background:var(--accent-chip); }
.jh-searchbar-empty { padding:var(--space-xl); text-align:center; font-size:var(--fs-sm); color:var(--text-secondary); }

.jh-select { position:relative; }
.jh-select-trigger { display:flex; align-items:center; justify-content:space-between; gap:var(--space-md); padding:var(--space-md) var(--space-lg); background:var(--input-bg); border:2px solid var(--input-border); border-radius:var(--radius-sm); font-size:var(--fs-sm); color:var(--text-primary); cursor:pointer; transition:all var(--duration-base); }
.jh-select-trigger:focus,.jh-select-trigger.open { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-glow); }
.jh-select-chevron { font-size:var(--fs-sm); color:var(--text-secondary); transition:transform var(--duration-base); }
.jh-select-trigger.open .jh-select-chevron { transform:rotate(180deg); }
.jh-select-placeholder { color:var(--text-secondary); }
.jh-select-list { position:absolute; top:calc(100% + 4px); left:0; right:0; background:var(--sheet-bg); border:var(--card-border); border-radius:var(--radius-sm); box-shadow:0 8px 32px rgba(0,0,0,0.12); max-height:240px; overflow-y:auto; z-index:var(--z-dropdown); display:none; animation:jhSelIn 0.2s var(--ease-default); } .jh-select-list.open { display:block; } @keyframes jhSelIn { from{opacity:0;transform:translateY(-4px);} to{opacity:1;transform:translateY(0);} }

.jh-select-option { padding:var(--space-md) var(--space-xl); font-size:var(--fs-sm); color:var(--text-primary); cursor:pointer; transition:background var(--duration-fast); }
.jh-select-option:hover { background:var(--accent-chip); }
.jh-select-option.selected { color:var(--accent); font-weight:var(--fw-semibold); background:var(--accent-chip); }

.jh-skeleton { background: var(--toggle-bg); border-radius: var(--radius-sm); animation: jhSkeletonPulse 1.5s ease-in-out infinite; }
@keyframes jhSkeletonPulse { 0%,100%{opacity:1;} 50%{opacity:0.4;} }
.jh-skeleton-text { height: 14px; margin-bottom: var(--space-sm); border-radius: 4px; }
.jh-skeleton-text:last-child { width: 60%; }
.jh-skeleton-title { height: 20px; width: 40%; margin-bottom: var(--space-md); border-radius: 4px; }
.jh-skeleton-avatar { width: 48px; height: 48px; border-radius: 50%; }
.jh-skeleton-card { height: 80px; border-radius: var(--radius-sm); }
.jh-skeleton-btn { height: 40px; width: 120px; border-radius: var(--radius-sm); }
.jh-skeleton-img { width: 100%; aspect-ratio: 16/9; border-radius: var(--radius-sm); }

.jh-slider-wrap { display:flex; align-items:center; gap:var(--space-md); }
.jh-slider { -webkit-appearance:none; appearance:none; width:100%; height:6px; background:var(--slider-track); border-radius:3px; outline:none; }
.jh-slider::-webkit-slider-thumb { -webkit-appearance:none; width:18px; height:18px; border-radius:50%; background:var(--accent); cursor:pointer; box-shadow:0 2px 6px rgba(0,0,0,0.15); transition:transform var(--duration-fast); }
.jh-slider::-webkit-slider-thumb:hover { transform:scale(1.15); }
.jh-slider::-moz-range-thumb { width:18px; height:18px; border-radius:50%; background:var(--accent); border:none; cursor:pointer; }
.jh-slider-value { min-width:36px; text-align:center; font-size:var(--fs-sm); font-weight:var(--fw-semibold); color:var(--text-primary); }
.jh-slider-labels { display:flex; justify-content:space-between; font-size:var(--fs-xs); color:var(--text-secondary); margin-top:var(--space-xs); }
/* Range slider */
.jh-range-slider { position:relative; height:6px; background:var(--slider-track); border-radius:3px; margin:12px 0; }
.jh-range-fill { position:absolute; height:100%; background:var(--accent); border-radius:3px; }
.jh-range-thumb { position:absolute; top:50%; width:18px; height:18px; border-radius:50%; background:var(--accent); box-shadow:0 2px 6px rgba(0,0,0,0.15); transform:translate(-50%,-50%); cursor:pointer; z-index:2; }

.jh-snackbar-container { position: fixed; bottom: var(--space-2xl); left: 50%; transform: translateX(-50%); z-index: var(--z-toast); display: flex; flex-direction: column; gap: var(--space-sm); pointer-events: none; max-width: 500px; width: 90%; }
.jh-snackbar { display: flex; align-items: center; gap: var(--space-lg); padding: var(--space-lg) var(--space-xl); background: var(--text-primary); border-radius: var(--radius-sm); box-shadow: 0 8px 32px rgba(0,0,0,0.2); pointer-events: auto; animation: jhSnackIn 0.3s var(--ease-default) both; color: var(--bg-primary); }
.jh-snackbar--out { animation: jhSnackOut 0.25s var(--ease-default) both; }
@keyframes jhSnackIn { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:translateY(0); } }
@keyframes jhSnackOut { from { opacity:1; transform:translateY(0); } to { opacity:0; transform:translateY(16px); } }
.jh-snackbar-text { flex:1; font-size:var(--fs-sm); font-weight:var(--fw-medium); }
.jh-snackbar-action { font-size:var(--fs-sm); font-weight:var(--fw-bold); color:var(--accent); cursor:pointer; white-space:nowrap; text-transform:uppercase; letter-spacing:0.5px; transition:opacity var(--duration-fast); }
.jh-snackbar-action:hover { opacity:0.7; }

.jh-sortable-item { cursor:grab; position:relative; transition:transform 0.2s var(--ease-default), box-shadow 0.2s; }
.jh-sortable-item.dragging { opacity:0.5; z-index:var(--z-overlay); cursor:grabbing; box-shadow:0 8px 32px rgba(0,0,0,0.15); }
.jh-sortable-handle { cursor:grab; display:flex; align-items:center; padding:var(--space-sm); color:var(--text-secondary); }
.jh-sortable-ghost { opacity:0.3; }
.jh-sortable-placeholder { border:2px dashed var(--accent-border); border-radius:var(--radius-sm); background:var(--accent-chip); }

.jh-split-btn { display:inline-flex; border-radius:var(--radius-sm); overflow:hidden; }
.jh-split-main { padding:var(--space-md) var(--space-xl); font-size:var(--fs-sm); font-weight:var(--fw-semibold); background:var(--accent); color:var(--btn-text); border:none; cursor:pointer; font-family:inherit; transition:filter var(--duration-fast); }
.jh-split-main:hover { filter:brightness(1.08); }
.jh-split-arrow { padding:var(--space-md) var(--space-md); background:var(--accent); color:var(--btn-text); border:none; border-left:1px solid rgba(255,255,255,0.2); cursor:pointer; font-size:var(--fs-sm); transition:filter var(--duration-fast); }
.jh-split-arrow:hover { filter:brightness(1.08); }

.jh-stat { background:var(--card-bg); border:var(--card-border); border-radius:var(--radius-sm); padding:var(--space-xl); backdrop-filter:var(--backdrop); box-shadow:var(--card-shadow); }
.jh-stat-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:var(--space-md); }
.jh-stat-icon { width:36px; height:36px; border-radius:var(--radius-sm); background:var(--accent-chip); display:flex; align-items:center; justify-content:center; color:var(--accent); font-size:var(--fs-md); }
.jh-stat-trend { font-size:var(--fs-xs); font-weight:var(--fw-semibold); padding:2px var(--space-sm); border-radius:999px; }
.jh-stat-trend.up { color:#28a745; background:rgba(40,167,69,0.1); }
.jh-stat-trend.down { color:#dc3545; background:rgba(220,53,69,0.1); }
.jh-stat-value { font-size:var(--fs-2xl); font-weight:var(--fw-bold); color:var(--text-primary); font-family:var(--font-title); }
.jh-stat-label { font-size:var(--fs-xs); color:var(--text-secondary); margin-top:var(--space-xs); }

.jh-status { display:inline-flex; align-items:center; gap:var(--space-sm); }
.jh-status-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.jh-status-dot.online { background:#28a745; }
.jh-status-dot.offline { background:#6c757d; }
.jh-status-dot.busy { background:#ffa000; }
.jh-status-dot.error { background:#dc3545; }
.jh-status-dot.pulse { animation:jhStatusPulse 2s ease-in-out infinite; }
@keyframes jhStatusPulse { 0%,100%{opacity:1;} 50%{opacity:0.4;} }
.jh-status-text { font-size:var(--fs-xs); color:var(--text-secondary); }

.jh-stepper { display:flex; align-items:center; gap:var(--space-sm); margin-bottom:var(--space-2xl);  }

.jh-step { display:flex; align-items:center; gap:var(--space-sm); flex-shrink:0; }
.jh-step-dot { width:28px; height:28px; border-radius:50%; background:var(--toggle-bg); display:flex; align-items:center; justify-content:center; font-size:var(--fs-xs); font-weight:var(--fw-bold); color:var(--text-secondary); transition:all var(--duration-base) var(--ease-default); }
.jh-step.active .jh-step-dot { background:var(--accent); color:var(--btn-text); }
.jh-step.done .jh-step-dot { background:var(--accent); color:var(--btn-text); }
.jh-step-label { font-size:var(--fs-xs); color:var(--text-secondary); font-weight:var(--fw-medium);  }
.jh-step.active .jh-step-label { color:var(--text-primary); font-weight:var(--fw-semibold);  }
.jh-step-line { flex:0 0 40px; height:2px; background:var(--toggle-bg); }
.jh-step.done + .jh-step-line { background:var(--accent); }

/* Desktop: pas de swipe, placeholder vide */

.jh-table-wrap { overflow-x:auto; border:var(--card-border); border-radius:var(--radius-sm); background:var(--card-bg); }
.jh-table { width:100%; border-collapse:collapse; }
.jh-table th { padding:var(--space-md) var(--space-xl); font-size:var(--fs-xs); font-weight:var(--fw-semibold); color:var(--text-secondary); text-transform:uppercase; letter-spacing:0.5px; text-align:left; border-bottom:2px solid var(--toggle-bg); background:var(--toggle-bg); }
.jh-table th.sortable { cursor:pointer; user-select:none; transition:color var(--duration-fast); }
.jh-table th.sortable:hover { color:var(--accent); }
.jh-table th .sort-icon { font-size:var(--fs-xs); margin-left:var(--space-xs); opacity:0.4; }
.jh-table th.asc .sort-icon, .jh-table th.desc .sort-icon { opacity:1; color:var(--accent); }
.jh-table td { padding:var(--space-md) var(--space-xl); font-size:var(--fs-sm); color:var(--text-primary); border-bottom:1px solid var(--toggle-bg); }
.jh-table tr:last-child td { border-bottom:none; }
.jh-table tr:hover td { background:var(--accent-chip); }

.jh-tabs { display:flex; gap:var(--space-xs); border-bottom:2px solid var(--toggle-bg); margin-bottom:var(--space-xl); }
.jh-tab { padding:var(--space-md) var(--space-xl); font-size:var(--fs-sm); font-weight:var(--fw-semibold); color:var(--text-secondary); cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-2px; transition:all var(--duration-base) var(--ease-default); white-space:nowrap; }
.jh-tab:hover { color:var(--text-primary); }
.jh-tab.active { color:var(--accent); border-bottom-color:var(--accent); }
.jh-tab-panel { display:none; animation:jhTabFade 0.25s var(--ease-default); }
.jh-tab-panel.active { display:block; }
@keyframes jhTabFade { from{opacity:0;} to{opacity:1;} }

.jh-taginput { display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-sm); padding:var(--space-sm) var(--space-md); background:var(--input-bg); border:2px solid var(--input-border); border-radius:var(--radius-sm); transition:border-color var(--duration-base); min-height:42px; }
.jh-taginput:focus-within { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-glow); }
.jh-tag { display:inline-flex; align-items:center; gap:var(--space-xs); padding:var(--space-xs) var(--space-md); background:var(--accent-chip); color:var(--accent); border-radius:999px; font-size:var(--fs-xs); font-weight:var(--fw-semibold); animation:jhTagIn 0.15s var(--ease-default); }
@keyframes jhTagIn { from{transform:scale(0.8);opacity:0;} to{transform:scale(1);opacity:1;} }
.jh-tag-remove { font-size:var(--fs-sm); cursor:pointer; opacity:0.6; transition:opacity var(--duration-fast); }
.jh-tag-remove:hover { opacity:1; }
.jh-taginput-field { border:none; outline:none; background:transparent; font-size:var(--fs-sm); color:var(--text-primary); flex:1; min-width:80px; padding:var(--space-xs) 0; font-family:inherit;  }
.jh-taginput-field::placeholder { color:var(--text-secondary); }

.jh-textarea { width:100%; padding:var(--space-md) var(--space-lg); font-size:var(--fs-sm); font-family:var(--font-ui), var(--font-body), sans-serif; background:var(--input-bg); border:2px solid var(--input-border); border-radius:var(--radius-sm); color:var(--text-primary); outline:none; resize:none; overflow:hidden; min-height:80px; max-height:300px; transition:border-color var(--duration-base); line-height:1.6; }
.jh-textarea:focus { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-glow); }
.jh-textarea.resizable { resize:vertical; overflow:auto; }

.jh-timeline { position:relative; padding-left:28px; }
.jh-timeline::before { content:''; position:absolute; left:8px; top:0; bottom:0; width:2px; background:var(--toggle-bg); }
.jh-timeline-item { position:relative; padding-bottom:var(--space-2xl); }
.jh-timeline-item:last-child { padding-bottom:0; }
.jh-timeline-dot { position:absolute; left:-24px; top:4px; width:14px; height:14px; border-radius:50%; background:var(--accent); border:3px solid var(--bg-primary); z-index:1; }
.jh-timeline-dot.muted { background:var(--toggle-bg); }
.jh-timeline-time { font-size:var(--fs-xs); color:var(--text-secondary); margin-bottom:var(--space-xs); }
.jh-timeline-title { font-size:var(--fs-sm); font-weight:var(--fw-semibold); color:var(--text-primary); margin-bottom:var(--space-xs); }
.jh-timeline-desc { font-size:var(--fs-xs); color:var(--text-secondary); line-height:1.5; }

.jh-timepicker { position:absolute; top:calc(100% + 4px); left:0; z-index:var(--z-dropdown); border-radius:var(--radius-sm); width:200px; background:var(--sheet-bg); box-shadow:0 8px 32px rgba(0,0,0,0.12); padding:var(--space-xl); animation:jhDropIn 0.2s var(--ease-default); }
@keyframes jhDropIn { from{opacity:0;transform:translateY(-4px);} to{opacity:1;} }

.jh-timepicker-wheels { display:flex; align-items:center; justify-content:center; gap:var(--space-lg); }
.jh-timepicker-wheel { display:flex; flex-direction:column; align-items:center; gap:var(--space-xs); }
.jh-timepicker-wheel-btn { font-size:var(--fs-lg); color:var(--text-secondary); cursor:pointer; padding:var(--space-sm); transition:color var(--duration-fast); }
.jh-timepicker-wheel-btn:hover { color:var(--accent); }
.jh-timepicker-value { font-size:var(--fs-xl); font-weight:var(--fw-bold); color:var(--text-primary); min-width:48px; text-align:center; }
.jh-timepicker-sep { font-size:var(--fs-xl); font-weight:var(--fw-bold); color:var(--text-secondary); }
.jh-timepicker-confirm { margin-top:var(--space-lg); }
.jh-timepicker-footer { display:flex; gap:var(--space-md); margin-top:var(--space-lg); }
.jh-timepicker-footer .jh-btn { flex:1; }

/**
 * JelyaHome — Toast Desktop (pill, centré en haut, thème-aware)
 */
/* Pill commune desktop + mobile — utilise les variables du thème actif */
.jh-toast-pill {
    position: fixed;
    bottom: var(--space-xl, 20px);
    right: var(--space-xl, 20px);
    left: auto;
    transform: translateY(8px);
    z-index: var(--z-toast);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 18px;
    border-radius: 999px;
    background: var(--text-primary);
    color: var(--bg-primary);
    font-size: .8rem;
    font-weight: 500;
    box-shadow: 0 4px 20px rgba(0,0,0,.18);
    pointer-events: auto;
    cursor: pointer;
    white-space: nowrap;
    max-width: calc(100vw - 48px);
    opacity: 0;
    transition: opacity .25s ease, transform .25s ease;
}
.jh-toast-pill--in {
    opacity: 1;
    transform: translateY(0);
}
.jh-toast-pill--out {
    opacity: 0;
    transform: translateY(8px);
}
.jh-toast-pill-text {
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 480px;
}
.jh-toast-pill-icon { font-size: .9rem; flex-shrink: 0; }
@keyframes jhToastProgress { from { width: 100%; } to { width: 0; } }

.jh-toggle { display:inline-flex; align-items:center; gap:var(--space-md);  }
.jh-toggle-label { font-size:var(--fs-sm); color:var(--text-primary); }
.jh-toggle-switch { position:relative; width:48px; height:26px; background:var(--toggle-bg); border-radius:999px; cursor:pointer; transition:background var(--duration-base) var(--ease-default); flex-shrink:0; }
.jh-toggle-switch.on { background:var(--accent); }
.jh-toggle-slider { position:absolute; top:3px; left:3px; width:20px; height:20px; background:white; border-radius:50%; box-shadow:0 2px 6px rgba(0,0,0,0.12); transition:transform var(--duration-base) var(--ease-default); }
.jh-toggle-switch.on .jh-toggle-slider { transform:translateX(22px); }
.jh-toggle input[type="checkbox"] { display:none; }

/* === Aliases .jh-switch (compatibilité templates existants) === */
.jh-switch { position:relative; display:inline-block; width:48px; height:26px; flex-shrink:0; }
.jh-switch input { opacity:0; width:0; height:0; position:absolute; }
.jh-switch-slider { position:absolute; inset:0; background:var(--toggle-bg); border-radius:26px; cursor:pointer; transition:all var(--duration-base) var(--ease-default); }
.jh-switch-slider::before { content:''; position:absolute; width:20px; height:20px; border-radius:50%; background:white; left:3px; top:3px; box-shadow:0 2px 4px rgba(0,0,0,0.1); transition:transform var(--duration-base) var(--ease-default); }
.jh-switch input:checked + .jh-switch-slider { background:var(--accent); }
.jh-switch input:checked + .jh-switch-slider::before { transform:translateX(22px); }
/* Toggle row layout */
.jh-toggle-row { display:flex; align-items:center; justify-content:space-between; gap:var(--space-lg); padding:var(--space-md) 0; }
.jh-toggle-row + .jh-toggle-row { border-top:var(--card-border); }
.jh-toggle-info { display:flex; flex-direction:column; gap:2px; }
.jh-toggle-label { font-size:var(--fs-base); font-weight:var(--fw-medium); color:var(--text-primary); }
.jh-toggle-desc { font-size:var(--fs-xs); color:var(--text-secondary); }

.jh-toggle-group { display:flex;  gap:0; border:2px solid var(--input-border); border-radius:var(--radius-sm); overflow:hidden; background:var(--input-bg); }

.jh-toggle-group-btn { padding:var(--space-sm) var(--space-xl); font-size:var(--fs-sm); font-weight:var(--fw-medium); color:var(--text-secondary); background:transparent; border:none; border-right:1px solid var(--input-border); cursor:pointer; transition:all var(--duration-fast); white-space:nowrap; flex-shrink:0; font-family:inherit; }
.jh-toggle-group-btn:last-child { border-right:none; }
.jh-toggle-group-btn:hover { background:var(--accent-chip); }
.jh-toggle-group-btn.active { background:var(--accent); color:var(--btn-text); font-weight:var(--fw-semibold); }

.jh-toggle-icon { display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:var(--radius-sm); font-size:var(--fs-md); color:var(--text-secondary); background:transparent; border:none; cursor:pointer; transition:all var(--duration-base) var(--ease-default); }
.jh-toggle-icon:hover { background:var(--accent-chip); }
.jh-toggle-icon.active { color:var(--accent); background:var(--accent-chip); }

.jh-tooltip { position:absolute; padding:var(--space-sm) var(--space-md); font-size:var(--fs-xs); font-weight:var(--fw-medium); color:var(--bg-primary); background:var(--text-primary); border-radius:6px; white-space:nowrap; pointer-events:none; z-index:var(--z-toast); animation:jhTooltipIn 0.15s var(--ease-default); }
@keyframes jhTooltipIn { from{opacity:0;transform:translateY(2px);} to{opacity:1;transform:translateY(0);} }
.jh-tooltip::after { content:''; position:absolute; left:50%; transform:translateX(-50%); border:5px solid transparent; }
.jh-tooltip.top::after { top:100%; border-top-color:var(--text-primary); }
.jh-tooltip.bottom::after { bottom:100%; border-bottom-color:var(--text-primary); }


/* ── MultiSelect ─────────────────────────────────────────────────────────────── */
.jh-msel { position:relative; }
.jh-msel-trigger { display:flex; align-items:center; justify-content:space-between; gap:var(--space-sm); padding:var(--space-md) var(--space-lg); background:var(--input-bg); border:2px solid var(--input-border); border-radius:var(--radius-sm); font-size:var(--fs-sm); color:var(--text-primary); cursor:pointer; transition:all var(--duration-base); height:44px; overflow:hidden; }
.jh-msel-trigger:focus, .jh-msel-trigger.open { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-glow); outline:none; }
.jh-msel-trigger.open .jh-select-chevron { transform:rotate(180deg); }
.jh-msel-summary { display:flex; align-items:center; gap:var(--space-sm); flex:1; min-width:0; overflow:hidden; }
.jh-msel-single-tag { display:inline-flex; align-items:center; gap:4px; padding:2px 8px; background:var(--accent-chip); color:var(--accent); border-radius:999px; font-size:var(--fs-xs); font-weight:var(--fw-semibold); white-space:nowrap; max-width:100%; overflow:hidden; text-overflow:ellipsis; }
.jh-msel-single-tag i { font-size:11px; flex-shrink:0; }
.jh-msel-count { display:inline-flex; align-items:center; gap:4px; padding:2px 10px; background:var(--accent-chip); color:var(--accent); border-radius:999px; font-size:var(--fs-xs); font-weight:var(--fw-bold); white-space:nowrap; }
.jh-msel-list { position:absolute; background:var(--sheet-bg); border:var(--card-border); border-radius:var(--radius-sm); box-shadow:0 8px 32px rgba(0,0,0,.12); max-height:280px; overflow-y:auto; overflow-x:hidden; display:none; animation:jhSelIn .2s var(--ease-default); scrollbar-width:thin; scrollbar-color:var(--accent-border) transparent; }
.jh-msel-list::-webkit-scrollbar { width:4px; }
.jh-msel-list::-webkit-scrollbar-track { background:transparent; }
.jh-msel-list::-webkit-scrollbar-thumb { background:var(--accent-border); border-radius:2px; }
.jh-msel-list.open { display:block; }
.jh-msel-option { display:flex; align-items:center; justify-content:space-between; padding:var(--space-md) var(--space-lg); font-size:var(--fs-sm); cursor:pointer; transition:background var(--duration-fast); gap:var(--space-md); white-space:nowrap; }
.jh-msel-option:hover { background:var(--accent-chip); }
.jh-msel-option.selected { background:var(--accent-chip); }
.jh-msel-option-label { display:flex; align-items:center; gap:var(--space-sm); color:var(--text-primary); flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; }
.jh-msel-option.selected .jh-msel-option-label { color:var(--accent); font-weight:var(--fw-semibold); }
.jh-msel-pin { display:flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:50%; color:var(--text-secondary); transition:all var(--duration-fast); font-size:14px; flex-shrink:0; }
.jh-msel-pin.active { color:var(--accent); background:var(--accent-chip); }
.jh-msel-option:hover .jh-msel-pin:not(.active) { color:var(--text-primary); background:var(--toggle-bg); }

/* ── JHUtils.Picker ── */
.jhpk-wrap { display:flex; flex-direction:column; gap:10px; padding:4px 0; }
.jhpk-search { display:flex; align-items:center; gap:8px; background:var(--input-bg,#f8f8f8); border:1px solid var(--input-border); border-radius:var(--radius); padding:6px 10px; }
.jhpk-search i { color:var(--text-secondary); font-size:.9rem; flex-shrink:0; }
.jhpk-search-input { border:none; background:transparent; outline:none; font-size:.88rem; color:var(--text-primary); width:100%; }
.jhpk-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(80px, 1fr)); gap:10px; max-height:340px; overflow-y:auto; padding:2px; }
.jhpk-card { position:relative; display:flex; flex-direction:column; align-items:center; gap:7px; padding:14px 8px 10px; border:2px solid var(--input-border); border-radius:var(--radius); background:var(--card-bg); cursor:pointer; transition:border-color .15s, box-shadow .15s; text-align:center; }
.jhpk-card:hover { border-color:var(--pk-color,var(--accent)); box-shadow:0 2px 8px rgba(0,0,0,.07); }
.jhpk-card--sel { border-color:var(--pk-color,var(--accent)); box-shadow:0 0 0 3px color-mix(in srgb, var(--pk-color,var(--accent)) 18%, transparent); }
.jhpk-card-icon { width:46px; height:46px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.2rem; flex-shrink:0; }
.jhpk-card-label { font-size:.75rem; font-weight:600; color:var(--text-primary); line-height:1.2; word-break:break-word; }
.jhpk-card-meta { font-size:.7rem; color:var(--text-secondary); }
.jhpk-card-check { position:absolute; top:5px; right:5px; width:18px; height:18px; border-radius:50%; background:var(--pk-color,var(--accent)); color:#fff; display:flex; align-items:center; justify-content:center; font-size:.6rem; }
.jhpk-empty { font-size:.85rem; color:var(--text-secondary); padding:8px 0; }

/* ── JHUtils.PickerField ── */
.jhpf-field {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 6px 10px 6px 12px;
    border: 1px solid var(--input-border);
    border-radius: var(--radius);
    background: var(--input-bg, var(--card-bg));
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s;
    outline: none;
}
.jhpf-field:hover, .jhpf-field:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-glow, rgba(99,102,241,.12));
}
.jhpf-inner {
    display: flex; flex-wrap: wrap; gap: 5px;
    flex: 1; align-items: center; min-width: 0;
}
.jhpf-ph { font-size: .85rem; color: var(--text-secondary); }
.jhpf-badge {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 8px; border-radius: 999px;
    font-size: .78rem; font-weight: 500; white-space: nowrap;
}
.jhpf-badge i { font-size: .7rem; }
.jhpf-ico {
    color: var(--text-secondary); font-size: .9rem;
    flex-shrink: 0; transition: color .15s;
}
.jhpf-field:hover .jhpf-ico, .jhpf-field:focus .jhpf-ico { color: var(--accent); }

.jhpf-field { min-height:44px; padding:12px 16px; width:100%; box-sizing:border-box; }

/* ── JHUtils.PillSelect ── */
.jhps-pill {
    display: inline-flex;
    align-items: center;
    gap: 0;
    padding: 4px 10px 4px 6px;
    background: var(--card-bg);
    border: 1.5px solid var(--input-border);
    border-radius: 20px;
    cursor: pointer;
    font-size: .82rem;
    font-weight: 600;
    color: var(--text-primary);
    transition: border-color .15s;
    white-space: nowrap;
    outline: none;
    user-select: none;
    min-width: 0;
}
.jhps-pill .jhps-ic,
.jhps-pill .jhps-av { flex-shrink:0; margin-right: 6px; }
.jhps-pill .jhps-lbl { flex:1; text-align:left; padding: 0 6px; }
.jhps-pill .jhps-ph  { flex:1; text-align:left; padding: 0 6px; color:var(--text-secondary); font-weight:400; }
.jhps-pill .jhps-chv { flex-shrink:0; margin-left: 4px; }
.jhps-pill:hover { border-color: var(--accent); }
.jhps-pill.jhps-open { border-color: var(--accent); }

.jhps-ic {
    width: 22px; height: 22px;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: .8rem;
    flex-shrink: 0;
    background: transparent;
}
.jhps-av {
    width: 22px; height: 22px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.jhps-lbl { overflow: hidden; text-overflow: ellipsis; max-width: 130px; }
.jhps-ph { color: var(--text-secondary); font-weight: 400; }
.jhps-chv {
    font-size: .62rem;
    color: var(--text-secondary);
    margin-left: 1px;
    flex-shrink: 0;
    transition: transform .18s;
}
.jhps-pill.jhps-open .jhps-chv { transform: rotate(180deg); }

.jhps-drop {
    display: none;
    position: absolute;
    top: calc(100% + 5px);
    left: 0;
    min-width: 100%;
    background: var(--sheet-bg);
    border: var(--card-border);
    border-radius: var(--radius-sm);
    box-shadow: 0 8px 32px rgba(0,0,0,.12);
    z-index: var(--z-dropdown, 9999);
    padding: 4px;
    overflow-y: auto;
}
.jhps-drop.jhps-drop-open { display: block; }

.jhps-item {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 8px 10px;
    border: none;
    border-radius: 7px;
    background: transparent;
    cursor: pointer;
    font-size: .86rem;
    color: var(--text-primary);
    text-align: left;
    transition: background .1s;
}
.jhps-item:hover { background: var(--accent-chip, rgba(var(--accent-rgb,99,102,241),.08)); }
.jhps-item-active { color: var(--accent); }
.jhps-item-active:hover { background: var(--accent-chip); }
.jhps-item-lbl { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jhps-ck { color: var(--accent); font-size: .85rem; flex-shrink: 0; }

/* ── JHUtils.ColorPicker ── */
.jh-cp { width:100%; }
.jh-cp-sq canvas { display:block; width:100%; height:100%; }
.jh-cp-hue { user-select:none; }
.jh-cp-thumb, .jh-cp-hue-thumb { pointer-events:none; }