Public_Wiki

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

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 14px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ── TOP BAR ── */
header {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 0 24px;
  display: flex;
  align-items: center;
  gap: 20px;
  height: 48px;
  position: sticky;
  top: 0;
  z-index: 10;
}

.logo {
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 600;
  font-size: 15px;
  color: var(--accent);
  letter-spacing: .04em;
  display: flex;
  align-items: center;
  gap: 8px;
}
.logo-dot { width: 8px; height: 8px; background: var(--accent); border-radius: 50%; }

nav { display: flex; gap: 2px; margin-left: 12px; }
nav a {
  color: var(--muted);
  text-decoration: none;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 13px;
  transition: color .15s, background .15s;
}
nav a:hover, nav a.active { color: var(--heading); background: var(--tag-bg); }
nav a.active { color: var(--accent); }

.header-right { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.user-badge {
  background: var(--tag-bg);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 4px 12px;
  font-size: 12px;
  color: var(--muted);
}
.btn-new {
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 6px 14px;
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  transition: opacity .15s;
}
.btn-new:hover { opacity: .85; }

/* ── LAYOUT ── */
.layout {
  display: grid;
  grid-template-columns: 240px 1fr 220px;
  gap: 0;
  flex: 1;
}

/* ── SIDEBAR ── */
aside {
  border-right: 1px solid var(--border);
  padding: 24px 0;
  position: sticky;
  top: 48px;
  height: calc(100vh - 48px);
  overflow-y: auto;
}

.sidebar-section { margin-bottom: 28px; }
.sidebar-label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .12em;
  color: var(--muted);
  text-transform: uppercase;
  padding: 0 20px 8px;
}

.tree { list-style: none; }
.tree li { position: relative; }

.tree-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 20px;
  color: var(--text);
  text-decoration: none;
  font-size: 13px;
  border-left: 2px solid transparent;
  transition: color .12s, background .12s, border-color .12s;
  cursor: pointer;
}
.tree-link:hover {
  color: var(--heading);
  background: var(--tag-bg);
  border-left-color: var(--border);
}
.tree-link.active {
  color: var(--accent);
  background: rgba(79,142,247,.08);
  border-left-color: var(--accent);
}

.tree-icon { font-size: 14px; opacity: .7; flex-shrink: 0; }
.tree-caret {
  margin-left: auto;
  font-size: 10px;
  color: var(--muted);
  transition: transform .2s;
}
.tree-caret.open { transform: rotate(90deg); }

/* depth indent */
.depth-1 > .tree-link { padding-left: 36px; }
.depth-2 > .tree-link { padding-left: 52px; }
.depth-3 > .tree-link { padding-left: 68px; }

/* connector lines */
.depth-1::before {
  content: '';
  position: absolute;
  left: 28px;
  top: 0; bottom: 0;
  border-left: 1px dashed var(--border);
  z-index: 0;
}
.depth-1:last-child::before { bottom: 50%; }

.subtree { display: none; }
.subtree.open { display: block; }

/* ── MAIN ── */
main { padding: 32px 36px; min-width: 0; }

.breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 24px;
}
.breadcrumb a { color: var(--accent); text-decoration: none; }
.breadcrumb span { color: var(--muted); }

.page-title {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 26px;
  font-weight: 600;
  color: var(--heading);
  margin-bottom: 6px;
}
.page-meta {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 32px;
  display: flex;
  gap: 16px;
}
.page-meta span { display: flex; align-items: center; gap: 5px; }

/* cards grid */
.cards-heading {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 14px;
}

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
  margin-bottom: 36px;
}

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 18px;
  cursor: pointer;
  transition: border-color .15s, transform .15s, box-shadow .15s;
  text-decoration: none;
  display: block;
  position: relative;
  overflow: hidden;
}
.card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(79,142,247,.04) 0%, transparent 60%);
  opacity: 0;
  transition: opacity .2s;
}
.card:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.3); }
.card:hover::before { opacity: 1; }

.card-icon { font-size: 20px; margin-bottom: 10px; }
.card-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--heading);
  margin-bottom: 4px;
}
.card-desc { font-size: 12px; color: var(--muted); line-height: 1.5; }

/* wiki tree section */
.wiki-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 32px;
}
.wiki-header {
  background: var(--tag-bg);
  border-bottom: 1px solid var(--border);
  padding: 14px 20px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.wiki-header-title {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13px;
  font-weight: 600;
  color: var(--heading);
}
.wiki-header-badge {
  background: rgba(79,142,247,.15);
  color: var(--accent);
  border-radius: 4px;
  padding: 2px 8px;
  font-size: 11px;
  font-family: 'IBM Plex Mono', monospace;
}

.wiki-tree { padding: 8px 0; }
.wiki-node {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 20px;
  color: var(--text);
  text-decoration: none;
  font-size: 13px;
  transition: background .12s, color .12s;
  cursor: pointer;
}
.wiki-node:hover { background: rgba(255,255,255,.04); color: var(--heading); }
.wiki-node .ico { font-size: 14px; flex-shrink: 0; }
.wiki-node .lbl { flex: 1; }
.wiki-node .arrow { color: var(--muted); font-size: 11px; }

.wiki-node.l0 { padding-left: 20px; font-weight: 600; color: var(--heading); }
.wiki-node.l1 { padding-left: 42px; }
.wiki-node.l2 { padding-left: 64px; }
.wiki-node.l3 { padding-left: 86px; }

.wiki-node .connector {
  display: inline-flex;
  align-items: center;
  color: var(--border);
  font-size: 12px;
  margin-right: 4px;
}

.tag {
  background: var(--tag-bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 7px;
  font-size: 11px;
  color: var(--muted);
  font-family: 'IBM Plex Mono', monospace;
}
.tag.green { border-color: rgba(52,211,153,.3); color: var(--accent2); background: rgba(52,211,153,.08); }
.tag.blue  { border-color: rgba(79,142,247,.3); color: var(--accent); background: rgba(79,142,247,.08); }

/* divider */
.divider { border: none; border-top: 1px solid var(--border); margin: 28px 0; }

/* ── RIGHT PANEL ── */
.panel {
  border-left: 1px solid var(--border);
  padding: 24px 18px;
  position: sticky;
  top: 48px;
  height: calc(100vh - 48px);
  overflow-y: auto;
}
.panel-title {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .12em;
  color: var(--muted);
  text-transform: uppercase;
  margin-bottom: 14px;
}

.activity-item {
  display: flex;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}
.activity-item:last-child { border-bottom: none; }
.act-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); margin-top: 6px; flex-shrink: 0; }
.act-dot.green { background: var(--accent2); }
.act-body { flex: 1; min-width: 0; }
.act-title { font-size: 12px; color: var(--heading); line-height: 1.4; margin-bottom: 2px; }
.act-meta { font-size: 11px; color: var(--muted); }

.stat-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}
.stat-row:last-child { border-bottom: none; }
.stat-label { font-size: 12px; color: var(--muted); }
.stat-val { font-family: 'IBM Plex Mono', monospace; font-size: 13px; color: var(--heading); font-weight: 600; }

/* animations */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
main > * { animation: fadeUp .35s ease both; }
main > *:nth-child(1) { animation-delay: .05s; }
main > *:nth-child(2) { animation-delay: .1s; }
main > *:nth-child(3) { animation-delay: .15s; }
main > *:nth-child(4) { animation-delay: .2s; }
main > *:nth-child(5) { animation-delay: .25s; }

@media (max-width: 900px) {
  .layout { grid-template-columns: 1fr; }
  aside, .panel { display: none; }
}

<!-- Title -->
<div class="page-title">📋 Tableau de bord</div>
<div class="page-meta">
  <span>🕐 Mis à jour aujourd'hui</span>
  <span>📁 Projet principal</span>
</div>

<!-- Quick links -->
<div class="cards-heading">Accès rapide</div>
<div class="cards">
  <a href="#wiki" class="card">
    <div class="card-icon">📘</div>
    <div class="card-title">Wiki</div>
    <div class="card-desc">Documentation, guides d'installation et notes techniques.</div>
  </a>
  <a href="#" class="card">
    <div class="card-icon">🎫</div>
    <div class="card-title">Tickets</div>
    <div class="card-desc">Suivre et gérer les tickets ouverts du projet.</div>
  </a>
  <a href="#" class="card">
    <div class="card-icon">📅</div>
    <div class="card-title">Planning</div>
    <div class="card-desc">Vue Gantt et jalons du projet.</div>
  </a>
  <a href="#" class="card">
    <div class="card-icon">📊</div>
    <div class="card-title">Rapports</div>
    <div class="card-desc">Statistiques et tableaux de bord analytiques.</div>
  </a>
</div>

<hr class="divider"/>

<!-- Wiki tree -->
<div class="cards-heading" id="wiki">Structure du Wiki</div>
<div class="wiki-section">
  <div class="wiki-header">
    <span>📘</span>
    <span class="wiki-header-title">Wiki</span>
    <span class="wiki-header-badge">1 page</span>
  </div>
  <div class="wiki-tree">

    <!-- L0: Wiki root -->
    <a href="#wiki" class="wiki-node l0">
      <span class="ico">📘</span>
      <span class="lbl">Wiki</span>
      <span class="tag blue">racine</span>
    </a>

    <!-- L1: Installations -->
    <a href="#installations" class="wiki-node l1">
      <span class="connector">└─</span>
      <span class="ico">📂</span>
      <span class="lbl">Installations</span>
      <span class="tag">catégorie</span>
      <span class="arrow">›</span>
    </a>

    <!-- L2: LocalWP -->
    <a href="#localwp" class="wiki-node l2" id="localwp">
      <span class="connector">└─</span>
      <span class="ico">⚙️</span>
      <span class="lbl">LocalWP Install</span>
      <span class="tag green">page</span>
      <span class="arrow">›</span>
    </a>

  </div>
</div>

<!-- LocalWP preview card -->
<div class="cards-heading" id="installations">Page en avant — LocalWP Install</div>
<div class="wiki-section" id="localwp-detail">
  <div class="wiki-header">
    <span>⚙️</span>
    <span class="wiki-header-title">LocalWP Install</span>
    <span class="wiki-header-badge">Wiki › Installations</span>
  </div>
  <div style="padding: 20px 24px; color: var(--muted); font-size: 13px; line-height: 1.8;">
    <p style="color:var(--heading); font-weight:600; margin-bottom:10px;">📄 Contenu de la page</p>
    <p>Cette page documente la procédure d'installation de <strong style="color:var(--accent)">LocalWP</strong> (anciennement Local by Flywheel), un outil de développement WordPress local.</p>
    <br/>
    <p style="color:var(--muted)">Sections prévues :</p>
    <ul style="list-style:none; margin-top:8px;">
      <li style="padding:4px 0; display:flex; gap:8px;"><span style="color:var(--accent2)">✓</span> Prérequis système</li>
      <li style="padding:4px 0; display:flex; gap:8px;"><span style="color:var(--accent2)">✓</span> Téléchargement et installation</li>
      <li style="padding:4px 0; display:flex; gap:8px;"><span style="color:var(--accent2)">✓</span> Configuration initiale</li>
      <li style="padding:4px 0; display:flex; gap:8px;"><span style="color:var(--muted)">○</span> Création d'un premier site</li>
      <li style="padding:4px 0; display:flex; gap:8px;"><span style="color:var(--muted)">○</span> Dépannage courant</li>
    </ul>
    <br/>
    <div style="display:flex; gap:10px; flex-wrap:wrap;">
      <a href="#" style="background:var(--accent);color:#fff;text-decoration:none;border-radius:6px;padding:7px 16px;font-size:12px;">✏️ Éditer la page</a>
      <a href="#" style="background:var(--tag-bg);color:var(--text);text-decoration:none;border-radius:6px;padding:7px 16px;font-size:12px;border:1px solid var(--border);">📜 Historique</a>
    </div>
  </div>
</div>

<hr class="divider"/>

<div class="panel-title">Statistiques</div>
<div class="stat-row">
  <span class="stat-label">Pages Wiki</span>
  <span class="stat-val">1</span>
</div>
<div class="stat-row">
  <span class="stat-label">Tickets ouverts</span>
  <span class="stat-val">0</span>
</div>
<div class="stat-row">
  <span class="stat-label">Membres</span>
  <span class="stat-val">1</span>
</div>
<div class="stat-row">
  <span class="stat-label">Dernière activité</span>
  <span class="stat-val">auj.</span>
</div>