/* ╔══════════════════════════════════════════════════════════════════════════╗
   ║  PULSIFORMS v55 — REFONTE UI 2025 (couche additive)                       ║
   ║  Objectif : niveau Figma · Framer · Linear · Vercel,                      ║
   ║  identité PowerShell / WinForms conservée.                                ║
   ║                                                                           ║
   ║  RÈGLE : 100% additif. Aucune zone déplacée, aucun workflow modifié.      ║
   ║  Chargé EN DERNIER → affine seulement la couche visuelle.                 ║
   ║  Rollback = retirer la balise <link> ; tout le reste reste intact.        ║
   ╚══════════════════════════════════════════════════════════════════════════╝ */

/* ============================================================
   0. SURFACES « CARTE » — verre subtil (Figma/Linear)
   bg rgba(255,255,255,0.03) · border rgba(255,255,255,0.05)
   ============================================================ */
:root {
  --card-surface: rgba(255, 255, 255, 0.03);
  --card-border:  rgba(255, 255, 255, 0.06);
  --hairline:     rgba(255, 255, 255, 0.05);   /* séparateur discret */
  --glow-accent:  0 0 0 3px rgba(var(--accent-rgb), 0.16);
  --ring-soft:    inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

/* ============================================================
   1. SÉPARATEURS — remplacer les bordures lourdes par des
   contrastes subtils (amélioration #1, #2)
   ============================================================ */
.navbar,
.toolbox,
.prop-panel,
.prop-tabs,
.prop-control-badge,
.snippet-bank-header,
.code-statusbar {
  border-color: var(--hairline) !important;
}

/* ============================================================
   1-bis. BARRE D'ACTIONS — groupement + cohérence (roadmap #1)
   Séparateurs subtils, bouton destructif dé-emphasé, pilule PS1→PFP.
   ============================================================ */
.nav-divider {
  width: 1px;
  align-self: stretch;
  margin: 7px 3px;
  background: rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
}
/* Bouton destructif (Réinitialiser) : neutre au repos, rouge au survol */
.btn-icon-danger:hover {
  border-color: var(--danger) !important;
  color: var(--danger) !important;
  background: rgba(var(--danger-rgb), 0.10) !important;
  box-shadow: 0 2px 10px rgba(var(--danger-rgb), 0.14) !important;
}
/* « PS1 → PFP » : vrai bouton-pilule (plus un badge de marque) */
.nav-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(var(--accent-rgb), 0.30);
  background: rgba(var(--accent-rgb), 0.10);
  color: var(--accent);
  cursor: pointer;
  white-space: nowrap;
  transition: var(--transition-fast, all .15s ease);
}
.nav-pill:hover {
  background: rgba(var(--accent-rgb), 0.18);
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.12);
}
.nav-pill:active { transform: scale(0.97); }

/* ============================================================
   2. TOOLBAR SUPÉRIEURE (navbar) — verre dépoli premium
   ============================================================ */
.navbar {
  background: linear-gradient(180deg, rgba(17, 24, 39, 0.92), rgba(11, 16, 32, 0.92));
  backdrop-filter: blur(14px) saturate(130%);
  -webkit-backdrop-filter: blur(14px) saturate(130%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.03);
}
.brand-name {
  background: linear-gradient(135deg, var(--accent), var(--accent-secondary));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Uniformisation des boutons de la barre (amélioration #4, #5) */
.nav-actions .btn-icon,
.nav-actions .btn-kbd {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
}
.btn-icon, .btn-kbd, .btn-export, .btn-mini, .tool-btn {
  transition: background .2s ease, border-color .2s ease,
              box-shadow .2s ease, transform .12s ease, color .2s ease;
}

/* ============================================================
   3. PALETTE DES CONTRÔLES (toolbox) — panneau latéral moderne
   ============================================================ */
.toolbox {
  background: linear-gradient(180deg, var(--bg-secondary), var(--bg-primary));
  padding-top: 12px;
  gap: 3px;
}
.tool-section-label {
  color: var(--text-muted);
  opacity: 0.65;
  margin-top: 4px;
}
.tool-btn {
  background: var(--card-surface);
  border: 1px solid transparent;
  box-shadow: var(--ring-soft);
}
.tool-btn:hover {
  background: rgba(var(--accent-rgb), 0.10);
  border-color: rgba(var(--accent-rgb), 0.28);
  box-shadow: -2px 0 0 var(--accent), 0 2px 10px rgba(var(--accent-rgb), 0.12);
}
.tool-icon { opacity: 0.85; }
/* #1 (fin) — iconographie SVG unifiée : la pastille .tool-icon porte désormais
   un <svg> (style Lucide, currentColor → thémé). On la dimensionne explicitement
   car .tool-icon était piloté par font-size (sans effet sur un SVG). */
.tool-icon svg { width: 16px; height: 16px; display: block; }
@media (max-width: 768px) { .tool-icon svg { width: 15px; height: 15px; } }
@media (max-width: 480px) { .tool-icon svg { width: 13px; height: 13px; } }

/* ============================================================
   4. PANNEAU PROPRIÉTÉS — panneau latéral + onglets modernes
   ============================================================ */
.prop-panel {
  background: linear-gradient(180deg, var(--bg-secondary), var(--bg-primary));
}

/* Onglets (amélioration #8) — pilule active douce, soulignement glow */
.prop-tabs {
  background: transparent;
  padding: 8px 8px 0;
  gap: 4px;
}
.prop-tab {
  border-radius: 9px 9px 0 0;
  border-bottom: 2px solid transparent;
  position: relative;
  letter-spacing: 0.04em;
}
.prop-tab:hover:not(.active) {
  background: var(--card-surface);
  color: var(--text);
}
.prop-tab.active {
  background: linear-gradient(180deg, rgba(var(--accent-rgb), 0.10), transparent);
  border-bottom-color: var(--accent);
  box-shadow: 0 1px 0 rgba(var(--accent-rgb), 0.25);
}

/* Groupes de propriétés présentés comme « accordéons modernes » :
   sections Apparence / Comportement / etc. en cartes verre, sans
   changer le DOM ni le workflow (purement visuel). Amélioration #7. */
.prop-content { gap: 10px; padding: 14px; }
.prop-group {
  background: var(--card-surface);
  border: 1px solid var(--card-border);
  border-radius: 12px;
  padding: 12px 12px 4px;
  margin-bottom: 0;
  box-shadow: var(--ring-soft);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.prop-group:hover { border-color: rgba(var(--accent-rgb), 0.20); }
.prop-row {
  background: var(--card-surface);
  border: 1px solid var(--card-border);
  border-radius: 12px;
  padding: 12px;
  box-shadow: var(--ring-soft);
}

/* Badge de contrôle (entête prop-panel) — verre + accent indigo */
.prop-control-badge.has-control {
  background: linear-gradient(90deg, rgba(var(--accent-rgb), 0.08), transparent);
}
.pcb-icon { filter: drop-shadow(0 0 5px rgba(var(--accent-rgb), 0.35)); }

/* ============================================================
   5. CHAMPS — focus indigo + halo doux, radius uniforme
   ============================================================ */
.prop-input,
.ai-input,
.snippet-search {
  border-radius: 10px;
}
.prop-input:focus,
.ai-input:focus {
  box-shadow: var(--glow-accent), inset 0 1px 3px rgba(0, 0, 0, 0.25);
  background: rgba(var(--accent-rgb), 0.04);
}

/* ============================================================
   6. BOUTONS — radius 10px, hover glow léger (amélioration #4, #10)
   ============================================================ */
.btn-export, .btn-icon, .btn-kbd, .btn-del, .btn-dup,
.btn-mini, .tool-btn, .btn-ai-send {
  border-radius: 10px;
}
.btn-export {
  box-shadow: 0 2px 12px rgba(var(--accent-rgb), 0.22);
}
.btn-export:hover {
  box-shadow: 0 4px 18px rgba(var(--accent-rgb), 0.34),
              0 0 0 3px rgba(var(--accent-rgb), 0.14);
  transform: translateY(-1px);
}
.btn-mini:hover, .btn-icon:hover {
  box-shadow: 0 2px 10px rgba(var(--accent-rgb), 0.14);
}

/* ============================================================
   7. ÉDITEUR DE CODE — accent secondaire cyan sur l'onglet code
   ============================================================ */
.code-event-label {
  border-radius: 8px;
  background: rgba(var(--accent-rgb), 0.10);
}
.code-editor-wrap {
  border-radius: 12px 12px 0 0;
  box-shadow: var(--ring-soft);
}
.code-editor-wrap:focus-within {
  border-color: rgba(var(--accent-rgb), 0.40);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.10);
}

/* ============================================================
   8. ASSISTANT IA — bulles plus douces, accent secondaire
   ============================================================ */
.ai-bubble { box-shadow: var(--ring-soft); }
.ai-msg.user .ai-avatar {
  background: linear-gradient(135deg, var(--accent), var(--accent-secondary));
}
.ai-suggestion-chip:hover {
  box-shadow: 0 2px 10px rgba(var(--accent-rgb), 0.12);
}

/* ============================================================
   9. DESIGNER CENTRAL — zone de travail mise en valeur
   (ombres légères · grille discrète · guides) — spec « DESIGNER »
   ============================================================ */
#stage {
  background:
    radial-gradient(ellipse 60% 50% at 50% 32%, rgba(var(--accent-rgb), 0.06), transparent 70%),
    var(--bg);
}
#canvas-forms {
  box-shadow:
    0 18px 50px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(255, 255, 255, 0.06),
    0 0 0 6px rgba(var(--accent-rgb), 0.04);
  border-color: rgba(0, 0, 0, 0.4);
}

/* Grille plus discrète à l'intérieur du formulaire (canvas) */
.grid-overlay {
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 0, 0, 0.028) 1px, transparent 1px);
}

/* Sélection des contrôles — anneau indigo + halo (guides visuels) */
.net-el.selected {
  outline: 2px solid var(--accent) !important;
  outline-offset: 2px;
  box-shadow:
    0 0 0 4px rgba(var(--accent-rgb), 0.18),
    0 6px 18px rgba(var(--accent-rgb), 0.22) !important;
}
.net-el:hover:not(.selected) {
  box-shadow: 0 0 0 2px rgba(var(--accent-rgb), 0.25) !important;
}
.resizer {
  border-radius: 4px;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.85);
}

/* Barre d'outils du canvas */
#canvas-info {
  background: var(--card-surface);
  border: 1px solid var(--card-border);
  padding: 3px 10px;
  border-radius: 999px;
}

/* ============================================================
   10. MODALES — entête plus douce, radius cohérent
   ============================================================ */
.modal-box, .kbd-modal-box {
  border-color: var(--card-border);
  box-shadow: var(--shadow-modal);
}
.context-menu { box-shadow: var(--shadow-modal); border-color: var(--card-border); }

/* ============================================================
   11. SCROLLBARS — fines & discrètes (uniformisation)
   ============================================================ */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover { background: rgba(var(--accent-rgb), 0.45); }

/* ============================================================
   12. MICRO-INTERACTIONS DISCRÈTES (amélioration #10)
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  .tool-btn:active,
  .btn-mini:active,
  .btn-icon:active { transform: scale(0.96); }
  .snippet-item { transition: background .12s ease, padding-left .12s ease; }
  .snippet-item:hover { padding-left: 16px; }
}

/* Respect de l'accessibilité */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* ============================================================
   13. MODE CLAIR — neutralise le verre sombre si activé
   ============================================================ */
[data-theme="light"] {
  --card-surface: rgba(13, 16, 32, 0.03);
  --card-border:  rgba(13, 16, 32, 0.08);
  --hairline:     rgba(13, 16, 32, 0.06);
}
[data-theme="light"] .navbar {
  background: rgba(255, 255, 255, 0.85);
}
[data-theme="light"] .toolbox,
[data-theme="light"] .prop-panel {
  background: var(--panel);
}