/* ============================================================================ * theme.css — Design system Sentinelle (format shadcn/ui + tweakcn, en vanilla) * ---------------------------------------------------------------------------- * Tokens au format shadcn (--background, --primary, --border, --radius…) avec * NOTRE palette : porcelaine chaude + magenta. Composants stylés façon shadcn. * Zéro dépendance : et c'est prêt. * Compatible mode sombre : ajoute data-theme="dark" sur . * ========================================================================== */ :root{ /* Palette (format tweakcn) — thème clair */ --background:#F7F4EE; --foreground:#12131A; --card:#FFFFFC; --card-foreground:#12131A; --popover:#FFFFFC; --popover-foreground:#12131A; --primary:#EC0E8F; --primary-foreground:#FFFFFF; --secondary:#F1ECE5; --secondary-foreground:#12131A; --muted:#F1ECE5; --muted-foreground:#5A5E67; --accent:#FBE4F2; --accent-foreground:#C50A78; --destructive:#B91C1C; --destructive-foreground:#FFFFFF; --success:#16A34A; --warning:#B45309; --info:#3B82F6; --border:#E7DEE5; --input:#E7DEE5; --ring:#EC0E8F; --chart-1:#EC0E8F; --chart-2:#3B82F6; --chart-3:#16A34A; --chart-4:#F59E0B; --chart-5:#8B5CF6; --sidebar:#FFFFFC; --sidebar-foreground:#12131A; --sidebar-primary:#EC0E8F; --sidebar-accent:#FBE4F2; --sidebar-border:#E7DEE5; --radius:0.75rem; --radius-lg:1rem; --shadow-sm:0 1px 2px rgba(18,19,26,.05); --shadow:0 4px 14px rgba(18,19,26,.06); --shadow-lg:0 18px 48px rgba(18,19,26,.10); --font-sans:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif; /* Glassmorphism clair (client-pro) */ --glass-bg:rgba(255,255,255,.62); --glass-bg-2:rgba(255,255,255,.46); --glass-border:rgba(255,255,255,.72); --glass-hi:rgba(255,255,255,.92); --glass-blur:16px; --ease-glass:cubic-bezier(.16,1,.3,1); --glow:rgba(236,14,143,.32); --bloom-1:#FBD6EC; --bloom-2:#FDE8D6; --bloom-3:#E6E0FA; } :root[data-theme="dark"]{ --background:#0F0D10; --foreground:#F5EEF2; --card:#171216; --card-foreground:#F5EEF2; --popover:#171216; --popover-foreground:#F5EEF2; --primary:#EC0E8F; --primary-foreground:#FFFFFF; --secondary:#221A20; --secondary-foreground:#F5EEF2; --muted:#221A20; --muted-foreground:#B8A9B2; --accent:#2A1522; --accent-foreground:#F9B9DE; --destructive:#EF4444; --destructive-foreground:#FFFFFF; --border:#2C222A; --input:#2C222A; --ring:#EC0E8F; --sidebar:#171216; --sidebar-foreground:#F5EEF2; --sidebar-border:#2C222A; --glass-bg:rgba(28,22,27,.55); --glass-bg-2:rgba(255,255,255,.05); --glass-border:rgba(255,255,255,.10); --glass-hi:rgba(255,255,255,.08); --bloom-1:#3a1230; --bloom-2:#2a2015; --bloom-3:#1e1a35; } /* ── Base ── */ *{box-sizing:border-box} .ui{font-family:var(--font-sans);color:var(--foreground);background:var(--background);-webkit-font-smoothing:antialiased} .ui-muted{color:var(--muted-foreground)} /* ── Button (variants shadcn) ── */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;height:2.25rem;padding:0 1rem;border-radius:calc(var(--radius) - 2px);font-size:.875rem;font-weight:500;line-height:1;border:1px solid transparent;cursor:pointer;transition:background-color .15s,color .15s,border-color .15s,box-shadow .15s,transform .05s;white-space:nowrap;font-family:inherit;user-select:none} .btn:active{transform:translateY(.5px)} .btn:focus-visible{outline:none;box-shadow:0 0 0 2px var(--background),0 0 0 4px var(--ring)} .btn:disabled{opacity:.5;pointer-events:none} .btn-primary{background:var(--primary);color:var(--primary-foreground);box-shadow:var(--shadow-sm)} .btn-primary:hover{background:color-mix(in srgb,var(--primary) 90%,#000)} .btn-secondary{background:var(--secondary);color:var(--secondary-foreground)} .btn-secondary:hover{background:color-mix(in srgb,var(--secondary) 80%,var(--foreground) 6%)} .btn-outline{background:var(--card);color:var(--foreground);border-color:var(--border)} .btn-outline:hover{background:var(--secondary)} .btn-ghost{background:transparent;color:var(--foreground)} .btn-ghost:hover{background:var(--secondary)} .btn-destructive{background:var(--destructive);color:var(--destructive-foreground)} .btn-sm{height:2rem;padding:0 .75rem;font-size:.8125rem} .btn-lg{height:2.75rem;padding:0 1.5rem;font-size:.9375rem} .btn-icon{width:2.25rem;padding:0} /* ── Card ── */ .card{background:var(--card);color:var(--card-foreground);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-sm)} .card-header{padding:1.25rem 1.5rem .75rem} .card-title{font-size:1rem;font-weight:700;letter-spacing:-.01em;margin:0} .card-description{font-size:.8125rem;color:var(--muted-foreground);margin:.25rem 0 0} .card-content{padding:.5rem 1.5rem 1.25rem} .card-footer{padding:.75rem 1.5rem 1.25rem;display:flex;gap:.5rem} /* ── Input / Label / Textarea ── */ .label{font-size:.8125rem;font-weight:600;color:var(--foreground);display:block;margin-bottom:.375rem} .input,.textarea{width:100%;height:2.25rem;padding:0 .75rem;border:1px solid var(--input);border-radius:calc(var(--radius) - 2px);background:var(--card);color:var(--foreground);font:inherit;font-size:.875rem;outline:none;transition:border-color .15s,box-shadow .15s} .textarea{height:auto;min-height:5rem;padding:.625rem .75rem;line-height:1.5;resize:vertical} .input::placeholder,.textarea::placeholder{color:var(--muted-foreground)} .input:focus,.textarea:focus{border-color:var(--ring);box-shadow:0 0 0 3px color-mix(in srgb,var(--ring) 18%,transparent)} /* ── Badge ── */ .badge{display:inline-flex;align-items:center;gap:.25rem;border-radius:999px;padding:.15rem .625rem;font-size:.75rem;font-weight:600;border:1px solid transparent;line-height:1.35} .badge-default{background:var(--primary);color:var(--primary-foreground)} .badge-secondary{background:var(--secondary);color:var(--secondary-foreground)} .badge-outline{background:transparent;color:var(--foreground);border-color:var(--border)} .badge-success{background:color-mix(in srgb,var(--success) 14%,var(--card));color:var(--success)} .badge-warning{background:color-mix(in srgb,var(--warning) 14%,var(--card));color:var(--warning)} .badge-destructive{background:color-mix(in srgb,var(--destructive) 12%,var(--card));color:var(--destructive)} /* ── Tabs ── */ .tabs-list{display:inline-flex;gap:.25rem;padding:.25rem;background:var(--secondary);border-radius:calc(var(--radius) - 2px)} .tab{padding:.4rem .85rem;border:0;border-radius:calc(var(--radius) - 4px);background:transparent;color:var(--muted-foreground);font:inherit;font-size:.8125rem;font-weight:600;cursor:pointer;transition:.15s} .tab[aria-selected="true"]{background:var(--card);color:var(--foreground);box-shadow:var(--shadow-sm)} /* ── Switch ── */ .switch{position:relative;width:2.5rem;height:1.4rem;border-radius:999px;background:var(--secondary);border:1px solid var(--border);cursor:pointer;transition:background .2s;flex:0 0 auto} .switch::after{content:"";position:absolute;top:2px;left:2px;width:1rem;height:1rem;border-radius:999px;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .2s} .switch[aria-checked="true"]{background:var(--primary);border-color:var(--primary)} .switch[aria-checked="true"]::after{transform:translateX(1.1rem)} /* ── Divers ── */ .separator{height:1px;background:var(--border);border:0;margin:1rem 0} .skeleton{background:linear-gradient(90deg,var(--secondary),color-mix(in srgb,var(--secondary) 60%,var(--card)),var(--secondary));background-size:200% 100%;animation:skl 1.4s ease-in-out infinite;border-radius:calc(var(--radius) - 2px)} @keyframes skl{to{background-position:-200% 0}} .ring-focus:focus-visible{outline:none;box-shadow:0 0 0 2px var(--background),0 0 0 4px var(--ring)} /* ── Glassmorphism clair (verre dépoli, fond à blooms) ── */ .glass{background:var(--glass-bg);backdrop-filter:blur(var(--glass-blur)) saturate(1.35);-webkit-backdrop-filter:blur(var(--glass-blur)) saturate(1.35);border:1px solid var(--glass-border);border-radius:var(--radius-lg);box-shadow:0 24px 60px -14px rgba(18,19,26,.22),0 8px 22px -10px rgba(18,19,26,.12),inset 0 1px 0 var(--glass-hi)} .glass-soft{background:var(--glass-bg-2);backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);border:1px solid var(--glass-border);border-radius:calc(var(--radius-lg) - 4px);box-shadow:inset 0 1px 0 var(--glass-hi)} .glass-soft:hover{border-color:var(--primary);box-shadow:0 8px 22px -8px var(--glow),inset 0 1px 0 var(--glass-hi)} .mesh{position:fixed;inset:0;z-index:-1;overflow:hidden;background:var(--background)} .mesh::before,.mesh::after,.mesh>i{content:"";position:absolute;border-radius:50%;filter:blur(64px);opacity:.55;will-change:transform} .mesh::before{width:46vmax;height:46vmax;top:-14vmax;left:-8vmax;background:radial-gradient(circle at 30% 30%,var(--bloom-1),transparent 70%);animation:bloom 20s var(--ease-glass) infinite alternate} .mesh::after{width:42vmax;height:42vmax;bottom:-16vmax;right:-10vmax;background:radial-gradient(circle at 60% 40%,var(--bloom-2),transparent 70%);animation:bloom 24s var(--ease-glass) infinite alternate -8s} .mesh>i{display:block;width:32vmax;height:32vmax;top:38%;left:46%;opacity:.4;background:radial-gradient(circle,var(--bloom-3),transparent 70%);animation:bloom 28s var(--ease-glass) infinite alternate -14s} @keyframes bloom{to{transform:translate(6vmax,4vmax) scale(1.12)}} @media (prefers-reduced-motion:reduce){.mesh::before,.mesh::after,.mesh>i{animation:none}}