/* ==========================================================================
   produit-cleanspace.css : page CleanSpace (macOS)
   Accent turquoise, maquette d'application à onglets et liste de fichiers
   ========================================================================== */

:root {
  --accent: #2dd4bf;
  --accent-2: #60a5fa;
  --accent-ink: #04231f;
}

/* Fenêtre macOS : onglets + liste */
.cs-app .pp-window-body { padding: 0; background: #1f2224; }
.cs-tabs { display: flex; gap: 4px; padding: 10px 12px 0; border-bottom: 1px solid var(--border); }
.cs-tabs span { font-size: 12px; padding: 7px 16px; border-radius: 8px 8px 0 0; color: var(--muted); }
.cs-tabs span.on { background: #2b2f32; color: var(--accent); font-weight: 600; box-shadow: inset 0 -2px 0 var(--accent); }
.cs-list { padding: 8px 12px 14px; }
.cs-row { display: flex; align-items: center; gap: 12px; padding: 10px 8px; border-radius: 8px; font-size: 13px; color: #ddd; }
.cs-row + .cs-row { border-top: 1px solid rgba(255, 255, 255, .05); }
.cs-row .app { width: 28px; height: 28px; border-radius: 8px; background: linear-gradient(135deg, var(--accent), var(--accent-2)); flex: none; }
.cs-row small { display: block; color: var(--muted); font-size: 11px; }
.cs-row .size { margin-left: auto; color: var(--muted); font-size: 12px; }
.cs-row.sel { background: color-mix(in srgb, var(--accent) 14%, transparent); }
.cs-bar { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-top: 1px solid var(--border); font-size: 12px; color: var(--muted); }
.cs-bar b { margin-left: auto; background: var(--accent); color: var(--accent-ink); border-radius: 8px; padding: 5px 14px; font-weight: 600; }

/* Options en ligne de commande */
.cs-flags { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; }
.cs-flags div { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 16px; }
.cs-flags code { color: var(--accent); font-size: 15px; background: none; padding: 0; }
.cs-flags p { margin: 6px 0 0; font-size: 13.5px; color: var(--muted); }

/* Frise de sécurité */
.cs-safe { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.cs-safe div { border-left: 3px solid var(--accent); background: var(--card); border-radius: 0 12px 12px 0; padding: 16px 18px; }
.cs-safe b { display: block; color: var(--title); margin-bottom: 4px; }
.cs-safe span { font-size: 13.5px; color: var(--muted); }
@media (max-width: 820px) { .cs-safe { grid-template-columns: 1fr; } }