/* =============================================================
   UI KIT MIST — styles du catalogue (page POC)
   Reutilise les styles d'apercu de design-system.html + ajoute
   la barre recherche/filtre et la grille de cartes du catalogue.
   ============================================================= */

/* ----- Styles d'apercu repris de design-system.html ----- */
.swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
.sw{border-radius:var(--r-m);overflow:hidden;border:1px solid var(--line);background:#fff;box-shadow:var(--shadow-soft)}
.sw .c{height:74px}
.sw .m{padding:11px 13px}
.sw .n{font-family:var(--display);font-weight:800;font-size:13px}
.sw .hex{font-size:12px;color:var(--ink-muted);text-transform:uppercase}
.sw .role{font-size:11px;color:var(--ink-muted);margin-top:2px}
.type-row{display:flex;align-items:baseline;gap:20px;padding:15px 0;border-top:1px dashed var(--line);flex-wrap:wrap}
.type-row .t{font-family:var(--body);font-size:11px;color:var(--ink-muted);width:118px;flex-shrink:0}
.row{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.mini{font-family:var(--body);font-size:11px;color:var(--ink-muted);margin-bottom:9px;letter-spacing:.05em;text-transform:uppercase}
.radius-demo{height:88px;background:var(--grad-card);border:1.5px solid var(--blue-pale);display:flex;align-items:center;justify-content:center;font-family:var(--display);font-weight:800;color:var(--blue);font-size:13px}
.shadow-demo{height:88px;background:#fff;border-radius:var(--r-m);display:flex;align-items:center;justify-content:center;font-family:var(--display);font-weight:800;color:var(--ink-soft);font-size:12px}
.logo-tile{border-radius:var(--r-m);padding:30px;display:flex;align-items:center;justify-content:center;border:1px solid var(--line)}
svg.demoicon{width:26px;height:26px;stroke:currentColor;fill:none;stroke-width:1.9}

/* ----- Hero du catalogue ----- */
.uikit-hero{position:relative;overflow:hidden;background:var(--grad-mesh),var(--bg-soft)}

/* ----- Barre recherche + filtres (sticky) ----- */
.uikit-toolbar{position:sticky;top:0;z-index:30;display:flex;flex-wrap:wrap;gap:14px;align-items:center;padding:16px 0;margin-bottom:28px;background:rgba(255,255,255,.85);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);border-bottom:1px solid var(--line)}
.uikit-search{flex:1 1 260px;min-width:220px;font-family:var(--body);font-size:15px;color:var(--ink);background:#fff;border:1.5px solid var(--line);border-radius:var(--r-pill);padding:12px 18px;transition:border-color .2s,box-shadow .2s;-webkit-appearance:none;appearance:none}
.uikit-search::-webkit-search-decoration,.uikit-search::-webkit-search-cancel-button{-webkit-appearance:none}
.uikit-search:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 4px var(--blue-pale)}
.uikit-chips{display:flex;gap:8px;flex-wrap:wrap}
.uikit-chip{font-family:var(--display);font-weight:800;font-size:13px;padding:9px 16px;border-radius:var(--r-pill);background:#fff;color:var(--ink-soft);border:1.5px solid var(--line);cursor:pointer;transition:.18s}
.uikit-chip:hover{border-color:var(--blue-soft);color:var(--blue)}
.uikit-chip.on{background:var(--grad-brand);color:#fff;border-color:transparent;box-shadow:var(--shadow-soft)}

/* ----- Grille de cartes du catalogue ----- */
.uikit-grid{display:flex;flex-direction:column;gap:22px}
/* Elementor donne a ses conteneurs (.e-con) un gap/flex par defaut : on force le notre (specificite superieure). */
.e-con.uikit-grid{gap:22px;flex-direction:column;align-items:stretch}
.uikit-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-l);padding:clamp(20px,3vw,34px);box-shadow:var(--shadow-soft)}
.uikit-card>.eyebrow{margin-bottom:10px}
.uikit-card>h2{margin-bottom:10px}
.uikit-card>.lead{margin-bottom:28px;max-width:64ch}
.uikit-empty{display:none;padding:44px;text-align:center;color:var(--ink-muted);font-size:15px}