/* ═══════════════════════════════════════════════════════════
   EditingManager — Direction artistique des espaces externes

   Pages concernées : portfolio.html, espace-client.html,
   espace-manager.html. Elles n'ont pas la sidebar de l'application,
   mais doivent porter la même identité.

   Ce fichier existe parce que les trois pages avaient dérivé —
   trois fonds différents et un accent bleu là où la marque est ambre.
   Toute couleur ou tout composant commun se définit ICI, jamais en
   local, pour que la cohérence ne dépende plus de la vigilance.
═══════════════════════════════════════════════════════════ */

:root {
  /* ── Fonds ── */
  --bg:      #08080a;
  --panel:   #101013;
  --panel2:  #17171b;
  --border:  #232328;
  --border2: #2e2e35;

  /* ── Texte ── */
  --text:  #f4f4f5;
  --sub:   #8e8e99;
  --muted: #56565f;

  /* ── Accent de marque — ambre, comme l'application ── */
  --accent:  #fbbf24;
  --accent2: rgba(251,191,36,0.12);
  --accent3: rgba(251,191,36,0.25);
  --accent-ink: #1a1200;      /* texte sur fond ambre */

  /* ── Couleurs de sens ── */
  --green:  #22d47a;
  --green2: rgba(34,212,122,0.12);
  --pink:   #e040a0;
  --pink2:  rgba(224,64,160,0.12);
  --teal:   #2dd4bf;
  --teal2:  rgba(45,212,191,0.12);
  --red:    #f87171;
  --red2:   rgba(248,113,113,0.10);
  /* Informatif — neutre par défaut. Aucun bleu dans la charte : il ne
     s'accorde ni avec l'ambre de la marque ni avec les couleurs de sens. */
  --info:   #8e8e99;
  --info2:  rgba(255,255,255,0.04);

  --radius:    14px;
  --radius-sm: 9px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: -apple-system, 'Inter', system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

/* ═══ MARQUE ═══ */
.brand {
  display: flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 700; letter-spacing: -0.2px;
}
.brand-bars { display: flex; align-items: center; gap: 2px; margin: 0 2px; }
.brand-bars span { display: block; width: 2.5px; border-radius: 2px; background: var(--accent); }
.brand-sep { width: 1px; height: 18px; background: var(--border2); margin: 0 4px; }
.brand-sub { font-size: 12px; color: var(--sub); font-weight: 500; }

/* ═══ BARRE SUPÉRIEURE ═══ */
.topbar {
  border-bottom: 1px solid var(--border);
  background: rgba(8,8,10,0.9);
  position: sticky; top: 0; z-index: 40;
  backdrop-filter: blur(14px);
}
.topbar-in {
  max-width: 1080px; margin: 0 auto; padding: 13px 24px;
  display: flex; align-items: center; gap: 12px;
}

/* ═══ BOUTONS ═══ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 10px 17px; border-radius: var(--radius-sm);
  border: 1px solid var(--border2); background: var(--panel2); color: var(--text);
  font-family: inherit; font-size: 13.5px; font-weight: 565;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background 0.15s, border-color 0.15s;
}
.btn:hover { background: #202027; border-color: #3a3a44; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn svg { width: 14px; height: 14px; }

.btn-primary {
  background: var(--accent); border-color: var(--accent);
  color: var(--accent-ink); font-weight: 660;
}
.btn-primary:hover { background: #fcca41; border-color: #fcca41; }

.btn-green { background: var(--green); border-color: var(--green); color: #06210f; font-weight: 660; }
.btn-green:hover { background: #3ade8c; border-color: #3ade8c; }

.btn-danger { color: var(--red); border-color: rgba(248,113,113,0.3); }
.btn-danger:hover { background: var(--red2); color: #fca5a5; }

.btn-ghost { background: transparent; border-color: transparent; color: var(--sub); }
.btn-ghost:hover { background: var(--panel2); color: var(--text); }

.btn-sm    { padding: 7px 13px; font-size: 12.5px; }
.btn-block { width: 100%; }

/* ═══ CARTES ═══ */
.card {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 20px; margin-bottom: 16px;
}
.card-h { display: flex; align-items: center; gap: 9px; margin-bottom: 4px; }
.card-t { font-size: 14px; font-weight: 645; }
.card-d { font-size: 12.5px; color: var(--sub); line-height: 1.55; margin-bottom: 17px; }

.pill {
  margin-left: auto; font-size: 10px; font-weight: 700;
  padding: 2px 9px; border-radius: 99px;
  background: var(--accent2); color: var(--accent);
}
.pill.g   { background: var(--green2); color: var(--green); }
.pill.off { background: var(--panel2); color: var(--muted); border: 1px solid var(--border2); }

/* ═══ FORMULAIRES ═══ */
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 13px; }
.field label {
  font-size: 11px; font-weight: 640; color: var(--sub);
  text-transform: uppercase; letter-spacing: 0.5px;
}
.field input, .field textarea, .field select {
  width: 100%; padding: 11px 13px;
  background: var(--panel2); border: 1px solid var(--border2);
  border-radius: var(--radius-sm); color: var(--text);
  font-family: inherit; font-size: 14px; line-height: 1.5;
}
.field textarea { resize: vertical; min-height: 80px; }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-color: var(--accent); background: #1c1c21;
}
.field input::placeholder, .field textarea::placeholder { color: var(--muted); }
.field .hint { font-size: 11px; color: var(--muted); line-height: 1.45; }

.frow2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 600px) { .frow2 { grid-template-columns: 1fr; } }

/* ═══ ENCARTS ═══ */
.note {
  padding: 13px 14px; border-radius: 10px;
  font-size: 12.5px; line-height: 1.55;
  background: var(--accent2); border: 1px solid var(--accent3); color: #f3d795;
}
.note strong { color: #fbe4ab; }
.note.info  { background: var(--panel2); border-color: var(--border2); color: var(--sub); }
.note.info strong { color: var(--text); }
.note.green { background: var(--green2); border-color: rgba(34,212,122,0.22); color: #a9e8c6; }
.note.green strong { color: #d3f5e3; }
.note.red   { background: var(--red2); border-color: rgba(248,113,113,0.22); color: #f5b5b5; }
.note.red strong { color: #fdd; }

.empty {
  text-align: center; padding: 30px 16px;
  color: var(--muted); font-size: 12.5px; line-height: 1.6;
}

/* ═══ MODALES ═══ */
.ov {
  position: fixed; inset: 0; z-index: 200; background: rgba(0,0,0,0.8);
  display: none; align-items: center; justify-content: center;
  padding: 22px; backdrop-filter: blur(5px);
}
.ov.show { display: flex; }
.modal {
  width: 100%; max-width: 460px; background: var(--panel);
  border: 1px solid var(--border2); border-radius: var(--radius); padding: 22px;
}
.modal-t { font-size: 16px; font-weight: 655; margin-bottom: 5px; }
.modal-d { font-size: 12.5px; color: var(--sub); line-height: 1.55; margin-bottom: 17px; }
.modal-f { display: flex; gap: 8px; margin-top: 17px; }
.modal-f .btn { flex: 1; }

/* ═══ NOTIFICATION ÉPHÉMÈRE ═══ */
.toast {
  position: fixed; bottom: 24px; left: 50%;
  transform: translateX(-50%) translateY(80px);
  background: var(--panel2); border: 1px solid var(--border2);
  padding: 12px 20px; border-radius: 10px;
  font-size: 13.5px; font-weight: 550;
  box-shadow: 0 8px 28px rgba(0,0,0,0.55); z-index: 300;
  opacity: 0; transition: all 0.28s cubic-bezier(0.4,0,0.2,1); pointer-events: none;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast.ok  { border-color: rgba(34,212,122,0.35); color: var(--green); }
.toast.err { border-color: rgba(248,113,113,0.35); color: var(--red); }