/* digirelik.css */
/* Digirelik — minimal CSS */

:root {
  /* Palette héritée (Digirelik) */
  --dgrk-accent: #00ffff;
  --dgrk-accent-soft: #33ffff;
  --dgrk-accent-glow: #00ffffa8;
  --dgrk-bg-deep: #0d0d0d;
  --dgrk-bg-surface: #1a1a1a;
  --dgrk-border-accent: #00ffff;
  --dgrk-border-accent-soft: #00ffff55;
  --dgrk-danger: #ff4444;
  --dgrk-danger-soft: #ff6666;
  --dgrk-warn: #ffaa00;
  --dgrk-success: #44ff44;
  --dgrk-success-dark: #00ff88;
  --dgrk-text-accent: #00ffff;
  --dgrk-card-radius: 14px;
  --dgrk-transition: .28s cubic-bezier(.4,0,.2,1);
/* Accent basique et générique */
  --primary:var(--dgrk-text-accent);
  --accent:var(--dgrk-accent);
  --bg:var(--dgrk-bg-deep);
  --panel:var(--dgrk-bg-surface);
  --text:#e9ffff;
  --muted: #bfeff0; /* meilleure lisibilité */
  --muted-weak:#89e6e6; /* légèrement plus sombre pour visited/contraste */
  --border:var(--dgrk-border-accent-soft);

  /* Liens : utiliser la palette DGRK pour contraste élevé sur fond sombre */
  --link:var(--dgrk-accent);
  --link-hover:var(--dgrk-accent-soft);
  --links-btn:var(--dgrk-bg-surface);
  --link-visited: rgba(51, 223, 223, 0.7);
}

*{box-sizing:border-box}

html,body{
  margin:0;
  height:100%;
  font-family:Inter,Segoe UI,Helvetica,Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  transition:background var(--dgrk-transition), color var(--dgrk-transition);
}

/* Respecter la préférence de réduction d'animation */
@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important}
}

/* ---------- HEADER ---------- */

.hd{
  padding:1.2rem 0;
  border-bottom:2px solid rgba(255,255,255,.04);
}

.hd,
.mn,
.ct,
.ft{
  max-width:1180px;
  margin:auto;
  padding-left:1rem;
  padding-right:1rem;
}

.logo{
  margin:0;
  font-size:1.75rem;
  font-weight:700;
  color:var(--primary);
  text-shadow:0 0 10px rgba(0,255,255,0.08);
}
.tag{color:var(--muted);font-size:.95rem}

/* ---------- NAV ---------- */

.mn{padding:.5rem 1rem}


a{
  color:var(--link);
  text-decoration:none;
  position:relative;
  transition:color var(--dgrk-transition), opacity .12s;
  text-decoration-skip-ink:auto;
  padding-bottom:2px;
}

a::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  height:2px;
  width:100%;
  background:linear-gradient(90deg, rgba(0,255,255,0.75), rgba(51,255,255,0.55));
  transform:scaleX(0);
  transform-origin:left;
  transition:transform var(--dgrk-transition), background .12s;
  border-radius:2px;
  pointer-events:none;
  opacity:0.95;
}

a:hover, a:focus{
  color:var(--link-hover);
  text-decoration:none;
  text-shadow:none;
}

a:hover::after,
a:focus::after{
  transform:scaleX(1);
}

/* Footer & card links: sobre, légèrement atténués par défaut */
.ft a,
.card a{
  color:var(--muted-weak);
  text-decoration:none;
  transition:color var(--dgrk-transition);
}
.ft a:hover,
.card a:hover{
  color:var(--link);
}

.mn a{
  padding:.35rem .6rem;
  border-bottom:2px solid transparent;
  font-weight:700;
}

.mn a:hover,
.mn a:focus{
  border-bottom-color:var(--link-hover);
  color:var(--link-hover);
  text-shadow:none;
}

/* ---------- HERO ---------- */

.hero{
  padding:2rem 0;
  text-align:center;
}

.hero h2{
  margin:.2rem 0;
  color:var(--primary);
  font-size:1.6rem;
  text-shadow:0 6px 20px rgba(0,255,255,0.04), 0 0 10px rgba(0,255,255,0.06);
}

.lead{
  max-width:72ch;
  margin:auto;
  color:var(--muted);
}

.hero-actions{
  display:flex;
  justify-content:center;
  gap:.6rem;
  margin-top:.8rem;
}

/* ---------- BUTTONS ---------- */


.btn{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:.6rem 1rem; /* zone cliquable augmentée */
  border-radius:8px;
  border:2px solid transparent;
  background:none;
  cursor:pointer;
  text-decoration: none;
  transition: box-shadow var(--dgrk-transition), transform var(--dgrk-transition), background var(--dgrk-transition);
  font-weight: 500;
  font-size: 0.75rem;
  min-height:44px; /* cible tactile recommandée */
}

.btn-primary{
  color:#000; /* texte lisible sur dégradé clair */
  background:linear-gradient(90deg,var(--dgrk-accent),var(--dgrk-accent-soft));
  border-color:transparent;
  font-weight:700;
  box-shadow:0 6px 20px rgba(0,255,255,0.06);
  min-width:160px; /* visuel et cible cohérents */
}

.btn-primary:hover,
.btn-primary:focus{
  transform:translateY(-2px);
  box-shadow:0 10px 30px var(--dgrk-accent-glow);
  color:#000;
  background:linear-gradient(90deg,var(--dgrk-accent-soft),var(--dgrk-accent));
}

.btn-secondary{
  color:var(--text);
  background:var(--links-btn);
  border-color:rgba(255,255,255,.06);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.01);
}

.btn-secondary:hover,
.btn-secondary:focus{
  background:var(--links-btn);
  border-color:var(--border);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.02),0 0 12px var(--dgrk-accent-glow);
  color:var(--text);
}

.btn-ghost{
  border-color:rgba(255,255,255,.06);
}

/* ---------- CARDS ---------- */


.card{
  margin:1rem 0;
  padding:1.1rem;
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--dgrk-card-radius);
  box-shadow:0 8px 28px rgba(0,0,0,0.45);
}

.card h3{
  margin-top:0;
  color:var(--primary);
}

.card a{font-weight:600}

.feature-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1rem;
}

.feature{
  display:flex;
  flex-direction:column;
  gap:.6rem;
}

/* ---------- LISTS ---------- */

ul,ol{
  margin:.5rem 0 0 1.15rem;
  color:var(--muted);
}

/* ---------- FORM ---------- */

.waitlist{
  display:flex;
  flex-wrap:wrap;
  gap:.6rem;
  margin-top:.6rem;
}

.waitlist label{
  width:100%;
  font-size:.85rem;
  color:var(--muted);
}

.waitlist input{
  padding:.6rem;
  min-width:220px;
  border-radius:8px;
  border:1px solid rgba(255,255,255,0.06);
  background:transparent;
  color:var(--text);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.01);
  transition:border-color var(--dgrk-transition), box-shadow var(--dgrk-transition);
}

.waitlist input:focus{border-color:var(--dgrk-border-accent); box-shadow:0 0 18px var(--dgrk-accent-glow)}

/* ---------- FOOTER ---------- */

.ft{
  padding:1rem 0;
  text-align:center;
  color:rgba(255,255,255,.45);
  border-top:1px solid rgba(255,255,255,.03);
  background:linear-gradient(180deg, transparent, rgba(0,0,0,0.03));
}

/* ---------- FOCUS ---------- */

a:focus,
.btn:focus,
input:focus{
  outline:3px solid var(--dgrk-accent);
  outline-offset:3px;
  box-shadow:0 0 18px var(--dgrk-accent-glow);
}

/* Skip link visible when focus */
.skip-link{
  position:absolute;
  left:1rem;
  top:0.5rem;
  background:var(--panel);
  color:var(--text);
  padding:.45rem .7rem;
  border-radius:6px;
  transform:translateY(-120%);
  transition:transform .18s ease-out;
  z-index:99999;
}
.skip-link:focus{transform:translateY(0)}

/* ---------- ALERTS ---------- */

.toast-container{
  position:fixed;
  top:1rem;
  right:1rem;
  z-index:9999;
  display:flex;
  flex-direction:column;
  gap:.6rem;
  align-items:flex-end;
}

.alert{
  min-width:240px;
  padding:.8rem 1rem;
  border-radius:8px;
  border:2px solid rgba(255,255,255,.06);
  background:#121212;
  animation:alertFade 6s forwards;
}

.alert-success{border-color:var(--dgrk-success-dark);background:linear-gradient(180deg, rgba(0,34,20,0.6), rgba(0,16,10,0.85));color:var(--text)}
.alert-info{border-color:var(--dgrk-accent);background:linear-gradient(180deg, rgba(0,30,34,0.6), rgba(0,12,14,0.85));color:var(--text)}
.alert-warning{border-color:var(--dgrk-warn);background:linear-gradient(180deg, rgba(34,16,0,0.6), rgba(20,8,0,0.85));color:var(--dgrk-warn)}
.alert-error{border-color:var(--dgrk-danger);background:linear-gradient(180deg, rgba(34,8,8,0.6), rgba(20,6,6,0.85));color:var(--dgrk-danger)}

@keyframes alertFade{
  0%,66%{opacity:1}
  100%{opacity:0}
}

/* ---------- RESPONSIVE ---------- */

@media (max-width:960px){
  .feature-grid{grid-template-columns:repeat(2,1fr)}
}

@media (max-width:640px){
  .mn{padding-left:.75rem;padding-right:.75rem}
  .hd,.ct,.ft{padding-left:.75rem;padding-right:.75rem}
  .feature-grid{grid-template-columns:1fr}
  .hero h2{font-size:1.25rem}
  .codex-grid{grid-template-columns:repeat(2,1fr)}
  .codex-detail{grid-template-columns:1fr}
}

/* ── Codex ── */
.codex-collections-nav{display:flex;flex-wrap:wrap;gap:.25rem .5rem;margin-bottom:1rem}
.codex-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1rem;margin-top:1rem}
.codex-card{display:flex;flex-direction:column;border-radius:.5rem;overflow:hidden;background:var(--surface,#1a1a2e);text-decoration:none;color:inherit;transition:transform .15s,box-shadow .15s}
.codex-card:hover{transform:translateY(-3px);box-shadow:0 4px 12px rgba(0,0,0,.3)}
.codex-card img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block}
.codex-card-label{padding:.5rem .6rem .15rem;font-weight:600;font-size:.9rem}
.codex-card-col,.codex-card-num{padding:0 .6rem .5rem;font-size:.75rem;opacity:.7}
.codex-detail{display:grid;grid-template-columns:1fr 1fr;gap:2rem;margin-top:1rem;align-items:start}
.codex-detail-image img{width:100%;border-radius:.5rem;display:block}
.codex-meta{display:grid;grid-template-columns:auto 1fr;gap:.35rem .75rem;margin-top:1rem}
.codex-meta dt{font-weight:600;opacity:.7}
.codex-meta dd{margin:0;word-break:break-all}
}

/* dgrk_theme.css */
/* dgrk_theme.css
 * Thème DigiRelik (fusion legacy dgrk_main.css + couches SimpleSL + opt)
 * Objectif: garder l'identité cyan / néon sobre, simplifier la palette, éviter la surcharge.
 * NE PAS réintroduire de layout (géré par drk_style + simplesl.css) ; ici: couleurs, composants, effets.
 */
:root {
  /* Palette héritée (legacy) harmonisée */
  --dgrk-accent: #00ffff;
  --dgrk-accent-soft: #33ffff;
  --dgrk-accent-glow: #00ffffa8;
  --dgrk-bg-deep: #0d0d0d;
  --dgrk-bg-surface: #1a1a1a;
  --dgrk-border-accent: #00ffff;
  --dgrk-border-accent-soft: #00ffff55;
  --dgrk-danger: #ff4444;
  --dgrk-danger-soft: #ff6666;
  --dgrk-warn: #ffaa00;
  --dgrk-success: #44ff44;
  --dgrk-success-dark: #00ff88;
  --dgrk-text-accent: #00ffff;
  --dgrk-card-radius: 14px;
  --dgrk-transition: .28s cubic-bezier(.4,0,.2,1);
  --dgrk-shadow-inset: inset 0 2px 4px 0 rgba(0, 0, 0, 0.3);
}

/* Accent global minimal */
.accent { color: var(--dgrk-accent); }
.text-accent { color: var(--dgrk-text-accent); }

/* Liens accentués (complète base drk_style) */
a.link-accent { color: var(--dgrk-accent); }
a.link-accent:hover { color: var(--dgrk-accent-soft); }

/* Buttons variant accent (s'appuie sur .btn-basic de drk_style) */
.btn-accent { background: var(--dgrk-accent); color:#0d0d0d; box-shadow:0 0 0 1px #008b8b inset,0 0 0 0 rgba(0,255,255,0); transition: var(--dgrk-transition); }
.btn-accent:hover { background: var(--dgrk-accent-soft); box-shadow:0 0 0 1px #00a7a7 inset,0 0 12px -2px var(--dgrk-accent-glow); }
.btn-danger { background: var(--dgrk-danger); color:#fff; }
.btn-danger:hover { background: var(--dgrk-danger-soft); }
.btn-muted { background:#2a2f33; color:#b1bcc7; }
.btn-muted:hover { background:#353c42; }

/* Cartes artefacts (fusion simplifiée) */
.artifact-grid, .artefact-list { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:1.3rem; margin:1.8rem 0; padding:0; list-style:none; }
.artifact-card, .artefact-card { background: var(--dgrk-bg-surface); border:1px solid var(--dgrk-border-accent-soft); border-radius: var(--dgrk-card-radius); padding:1rem; position:relative; overflow:hidden; color: var(--dgrk-text-accent); transition: var(--dgrk-transition); }
.artifact-card:hover, .artefact-card:hover { border-color: var(--dgrk-border-accent); box-shadow:0 0 0 1px var(--dgrk-border-accent),0 0 18px -4px var(--dgrk-accent-glow); transform:translateY(-3px); }
.artifact-card h3, .artefact-card h3 { margin:.6rem 0 .3rem; font-size:1.05rem; letter-spacing:.5px; }
.artifact-card p, .artefact-card p { margin:.25rem 0; font-size:.7rem; color:#b4c4c7; }

/* Badges / états */
.dgrk-badge { display:inline-flex; align-items:center; padding:3px 8px; font-size:.55rem; text-transform:uppercase; letter-spacing:.5px; border:1px solid var(--dgrk-border-accent-soft); border-radius:12px; background:#101c1c; color: var(--dgrk-accent); gap:.3rem; }
.dgrk-badge.success { background:#052e12; color:var(--dgrk-success-dark); border-color:#00ff8844; }
.dgrk-badge.warn { background:#2e1f05; color:var(--dgrk-warn); border-color:#ffaa0044; }
.dgrk-badge.danger { background:#2e0606; color:var(--dgrk-danger-soft); border-color:#ff444455; }

/* Stat cards (allégées) */
.stats-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:1rem; margin:1.5rem 0 2rem; }
.stat-card { background:#121618; border:1px solid #1d2a30; border-left:4px solid var(--dgrk-accent); padding:1rem; border-radius:10px; transition: var(--dgrk-transition); }
.stat-card:hover { border-color: var(--dgrk-border-accent); box-shadow:0 0 0 1px var(--dgrk-border-accent); }
.stat-card h3 { margin:0 0 .4rem; font-size:.8rem; letter-spacing:1px; text-transform:uppercase; color:var(--dgrk-accent); }
.stat-card .number { font-size:1.9rem; font-weight:600; margin:0 0 .25rem; color: var(--dgrk-accent); line-height:1; }

/* Tables (thème light neon) */
.sl-table.dgrk, .table.dgrk { background:#121619; }
.sl-table.dgrk th, .table.dgrk th { background:#0d1416; color:var(--dgrk-accent); letter-spacing:.6px; }
.sl-table.dgrk tbody tr:hover, .table.dgrk tbody tr:hover { background:#182226; }

/* Formulaires (minimal merge) */
.dgrk-field, .form-group input, .form-group select, .form-group textarea { background:#14191d; border:1px solid #1f2b31; color:var(--dgrk-text-accent); border-radius:6px; padding:10px 12px; font-size:.75rem; font-family:inherit; transition: var(--dgrk-transition); }
.dgrk-field:focus, .form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline:none; border-color:var(--dgrk-border-accent); box-shadow:0 0 0 2px #00ffff33; }

/* Modales (générique) */
.dgrk-modal { position:fixed; inset:0; background:rgba(0,0,0,.82); display:flex; align-items:center; justify-content:center; padding:2rem; z-index:9000; backdrop-filter:blur(4px); }
.dgrk-modal[hidden] { display:none; }
.dgrk-modal .modal-dialog { background:#12191d; border:1px solid #22333a; border-radius:14px; width:min(520px,92%); padding:1.4rem 1.25rem 1.6rem; position:relative; }
.dgrk-modal .close-btn { position:absolute; top:10px; right:12px; background:none; border:0; color:var(--dgrk-accent); font-size:1.1rem; cursor:pointer; }
.dgrk-modal .close-btn:hover { color:var(--dgrk-accent-soft); }

/* Effet glow utilitaire */
.glow-cyan { box-shadow:0 0 0 1px var(--dgrk-accent),0 0 14px -2px var(--dgrk-accent-glow); }

/* Animation accent optionnelle */
@keyframes dgrk-pulse { 0% { box-shadow:0 0 0 0 rgba(0,255,255,.45);} 70% { box-shadow:0 0 0 14px rgba(0,255,255,0);} 100% { box-shadow:0 0 0 0 rgba(0,255,255,0);} }
.badge-live { animation:dgrk-pulse 2.4s infinite; }

/* Responsive légères */
@media (max-width:760px){
  .artifact-grid, .artefact-list { grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); }
  .stat-card .number { font-size:1.6rem; }
}

/* Fin dgrk_theme.css */
/* --- Migrations depuis app.css (pruning overlaps) --- */
/* Feature card (contenu marketing générique) */
.feature-card { background:#14181f; border:1px solid #1f2731; border-radius:8px; padding:.85rem; font-size:.65rem; line-height:1.25; color:#c7d1dc; }

/* Bouton ghost (variante sobre) */
.btn.ghost { background:#0f172a; box-shadow:0 0 0 1px #334155 inset; color:#9fb7dd; }
.btn.ghost:hover { background:#1e293b; color:#d2e6ff; }
/* --- Fin migrations --- */

/* Active navigation link */
nav.mn .nav-list a.is-active { background:rgba(0,255,255,0.12); color:var(--dgrk-accent); box-shadow:0 0 0 1px var(--dgrk-border-accent-soft), 0 0 0 3px rgba(0,255,255,0.15); }
nav.mn .nav-list a.is-active:hover { background:rgba(0,255,255,0.18); }

/* Nested inset shadow cards — pattern UI structurelle
 * L'espace (padding) EST la bordure ; pas de border CSS.
 * Voir DOCS/01_ARCHITECTURE/digirelik_CSS.md — section "Nested Inset Shadow Cards"
 */
.card-grid-inset {
    background: var(--dgrk-bg-surface);
    padding: 8px;
    border-radius: 12px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    border: 1px solid rgba(0,255,255,.06);
}
.card-inset-wrapper {
    background: var(--dgrk-bg-surface);
    padding: 6px;
    border-radius: 8px;
    box-shadow: var(--dgrk-shadow-inset);
    position: relative;
    transition: transform var(--dgrk-transition);
}
.card-inset-wrapper:hover { transform: translateY(-1px); }
@media (max-width: 640px) {
    .card-grid-inset { grid-template-columns: 1fr; }
}


/* site-layout.css */
.site-shell {
    --site-max-width: 1420px;
    --site-gap: 1rem;
    --site-padding-inline: 1rem;
    --site-padding-top: 1rem;
    --site-padding-bottom: 2rem;
    --ct-main-width: 860px;
    --ct-side-width: 260px;
    --page-stack-gap: 1rem;
    --page-section-gap: 0.9rem;
    --page-section-padding: 1.1rem;
    --aside-stack-gap: 1rem;
}

.site-shell .ct {
    display: grid;
    grid-template-columns: minmax(0, min(100%, var(--ct-main-width)));
    justify-content: center;
    gap: var(--site-gap);
    align-items: start;
    width: 100%;
    max-width: var(--site-max-width);
    margin: 0 auto;
    padding-top: var(--site-padding-top);
    padding-bottom: var(--site-padding-bottom);
    padding-left: var(--site-padding-inline);
    padding-right: var(--site-padding-inline);
}

.site-shell .ct:has(> .mnl):not(:has(> .mnr)) {
    grid-template-columns: minmax(0, var(--ct-side-width)) minmax(0, min(100%, var(--ct-main-width)));
}

.site-shell .ct:has(> .mnr):not(:has(> .mnl)) {
    grid-template-columns: minmax(0, min(100%, var(--ct-main-width))) minmax(0, var(--ct-side-width));
}

.site-shell .ct:has(> .mnl):has(> .mnr) {
    grid-template-columns: minmax(0, var(--ct-side-width)) minmax(0, min(100%, var(--ct-main-width))) minmax(0, var(--ct-side-width));
}

.site-shell .ct > section,
.site-shell .ct > .mnl,
.site-shell .ct > .mnr,
.admin-shell .ct > section {
    min-width: 0;
}

.site-shell .ct > section {
    display: grid;
    gap: var(--page-stack-gap);
    align-content: start;
    grid-column: 1;
}

.site-shell .ct > .mnl {
    grid-column: 1;
}

.site-shell .ct > .mnr {
    grid-column: 2;
}

.site-shell .ct:has(> .mnl):not(:has(> .mnr)) > section {
    grid-column: 2;
}

.site-shell .ct:has(> .mnl):has(> .mnr) > section {
    grid-column: 2;
}

.site-shell .ct:has(> .mnl):has(> .mnr) > .mnr {
    grid-column: 3;
}

.site-shell .hd,
.site-shell .mn,
.site-shell .ct,
.site-shell .ft {
    max-width: var(--site-max-width);
    margin: 0 auto;
    padding-left: var(--site-padding-inline);
    padding-right: var(--site-padding-inline);
}

.site-shell .hd {
    display: grid;
    gap: 0.35rem;
    padding-top: 1rem;
    padding-bottom: 0.8rem;
}

.site-shell .mn {
    padding-top: 0.4rem;
    padding-bottom: 0.8rem;
}

.site-shell .ft {
    display: grid;
    gap: 0.2rem;
    padding-top: 0.8rem;
    padding-bottom: 1.4rem;
}

.site-shell .ft p,
.site-shell .hd p,
.site-shell .hd h1 {
    margin: 0;
}

.site-shell .mnl,
.site-shell .mnr {
    display: grid;
    gap: var(--aside-stack-gap);
    align-content: start;
}

.site-shell .panel-card,
.admin-shell .panel-card {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--dgrk-card-radius);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
    padding: 1rem;
}

.site-shell .panel-card h2,
.site-shell .panel-card h3,
.admin-shell .panel-card h2,
.admin-shell .panel-card h3 {
    margin: 0 0 0.75rem;
    color: var(--primary);
}

.site-shell .eyebrow,
.admin-shell .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    border: 1px solid var(--border);
    color: var(--primary);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.site-shell .muted,
.admin-shell .muted {
    color: var(--muted);
}

.site-shell .info-list,
.admin-shell .info-list {
    display: grid;
    gap: 0.75rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.site-shell .info-row,
.admin-shell .info-row {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.8rem;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.02);
}

.site-shell .notice-box,
.admin-shell .notice-box {
    padding: 0.85rem 1rem;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: rgba(0, 255, 255, 0.08);
}

.site-shell .error-box {
    border-color: rgba(255, 68, 68, 0.45);
    background: rgba(255, 68, 68, 0.08);
    color: #ffd0d0;
}

.site-shell .page-title {
    margin: 0.5rem 0 0.8rem;
    color: var(--primary);
    font-size: clamp(1.8rem, 4vw, 3.4rem);
    line-height: 1;
}

.site-shell .inline-actions,
.admin-shell .inline-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    align-items: center;
}

.site-shell .mn a.is-active {
    color: var(--primary);
    border-bottom: 2px solid var(--primary);
}

.site-shell .nav-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
}

.site-shell .nav-list > li {
    display: flex;
}

.site-shell .nav-list > li:has(> ol) {
    flex-direction: column;
    gap: 0.25rem;
}

.site-shell .nav-list > li > ol {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.site-shell .nav-list > li > ol a {
    font-size: 0.8em;
    opacity: 0.65;
}

.site-shell .nav-list > li > ol a:hover,
.site-shell .nav-list > li > ol a:focus {
    opacity: 1;
}

.site-shell .ct > section,
.site-shell .ct > .mnl > section,
.site-shell .ct > .mnr > section,
.site-shell .ct > .mnl > .element-node,
.site-shell .ct > .mnr > .element-node,
.site-shell .element-node,
.site-shell .section-item {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--dgrk-card-radius);
    padding: var(--page-section-padding);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.28);
}

.site-shell .rich-copy {
    display: grid;
    gap: 1rem;
    line-height: 1.7;
}

.site-shell .rich-copy p {
    margin: 0;
}

.site-shell .ct > section,
.site-shell .ct > .mnl > section,
.site-shell .ct > .mnr > section,
.site-shell .ct > .mnl > .element-node,
.site-shell .ct > .mnr > .element-node {
    scroll-margin-top: 7rem;
    display: grid;
    gap: var(--page-section-gap);
}

.site-shell .aside-empty {
    background: var(--panel);
    border: 1px dashed var(--border);
    border-radius: var(--dgrk-card-radius);
    padding: 1rem;
}

.site-shell .compact-copy {
    gap: 0.55rem;
    line-height: 1.55;
}

.site-shell .ct > .mnl > section,
.site-shell .ct > .mnr > section,
.site-shell .ct > .mnl > .element-node,
.site-shell .ct > .mnr > .element-node {
    gap: 0.75rem;
}

.site-shell .ct:has(> section#home) {
    --page-section-gap: 1rem;
    --ct-side-width: 18rem;
}

.site-shell .ct:has(> section#articles) {
    --page-section-gap: 1rem;
    --ct-side-width: 18rem;
}

.site-shell .ct:has(> section[id^='article-']) {
    --ct-side-width: 17rem;
}

.site-shell .page-content-block {
    display: grid;
    gap: 0.8rem;
    margin: 0;
}

.site-shell .element-stack {
    display: grid;
    gap: 0.8rem;
    margin: 0;
}

.site-shell .element-node {
    margin: 0;
}

.site-shell .meta-line {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    color: var(--muted);
    font-size: 0.85rem;
    margin: 0;
}

.site-shell .section-list {
    display: grid;
    gap: 0.55rem;
    list-style: none;
    padding: 0;
    margin: 0;
}

.site-shell .section-list a {
    color: var(--primary);
}

.site-shell .section-copy,
.site-shell .section-link-row {
    margin: 0;
}

.site-shell .notice-box {
    margin: 0;
}

.site-shell .form-group {
    margin: 0;
}

.site-shell .section-item {
    display: grid;
    gap: 0.7rem;
    margin-top: 1rem;
}

.site-shell .pagination-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.8rem;
    margin-top: 1rem;
}

.site-shell form.inline,
.admin-shell form.inline {
    display: inline-flex;
}

.site-shell .route-badge,
.admin-shell .route-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.55rem;
    border-radius: 999px;
    background: rgba(0, 255, 255, 0.08);
    border: 1px solid var(--border);
    color: var(--primary);
    font-size: 0.72rem;
    font-weight: 700;
}

.admin-shell .admin-content {
    min-height: 100vh;
}

.admin-shell .hd {
    position: sticky;
    top: 0;
    z-index: 950;
}

.admin-shell .ct {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 1rem;
    align-items: start;
}

.admin-shell .mnl {
    display: none;
}

.admin-shell .mnr {
    display: grid;
    gap: 1rem;
    align-content: start;
}

.admin-shell .dashboard-section {
    scroll-margin-top: 90px;
    margin-bottom: 1rem;
}

@media (max-width: 900px) {
    .site-shell .ct,
    .admin-shell .ct {
        grid-template-columns: minmax(0, 1fr);
    }
}

.admin-shell .section-shell {
    background: rgba(26, 26, 26, 0.95);
    border-radius: 5px;
    overflow: hidden;
    border: 1px solid rgba(0, 255, 255, 0.2);
}

.admin-shell .section-empty {
    padding: 0.8rem;
    color: #a5dede;
    font-size: 0.8rem;
}

.admin-shell .meta-copy {
    font-size: 0.75rem;
    color: #9adede;
}

.admin-shell .table-grid thead th {
    color: #84ffff;
    font-weight: 700;
    background: rgba(0, 255, 255, 0.06);
}

.admin-shell .table-grid caption {
    background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
    color: #000;
    padding: 0.6rem 0.8rem;
    font-weight: 600;
    font-size: 0.8rem;
    text-align: left;
    caption-side: top;
}

.admin-shell .table-actions-cell p {
    margin: 0 0 0.35rem;
}

.admin-shell .stack-list {
    display: grid;
    gap: 0.6rem;
}

.admin-shell .stack-card {
    padding: 0.8rem;
    border-radius: 6px;
    border: 1px solid rgba(0, 255, 255, 0.2);
    background: rgba(0, 255, 255, 0.04);
}

.admin-shell .stack-card strong {
    color: var(--primary-color);
}

.admin-shell .ft {
    padding: 0.8rem 1rem 1.4rem;
    color: #8fd8d8;
    font-size: 0.75rem;
}

@media (max-width: 1100px) {
    .site-shell .ct,
    .admin-shell .ct {
        grid-template-columns: 1fr;
    }

    .site-shell .mnl,
    .site-shell .mnr,
    .admin-shell .mnr {
        order: 2;
    }
}

/* atoms.css */
/*
 * atoms.css — DigiRelik
 * Couche utilitaire SimpleSL (préfixe a-)
 * Ne pas modifier : généré depuis la documentation DOCS/01_ARCHITECTURE/digirelik_CSS.md
 * Ne jamais surcharger les classes composant existantes ici.
 * Exception acceptée : style= inline pour valeurs dynamiques PHP.
 */

/* === DISPLAY === */
.a-hidden  { display: none; }
.a-block   { display: block; }
.a-flex    { display: flex; }
.a-grid    { display: grid; }

/* === FLEX / GRID UTILS === */
.a-j-center { justify-content: center; }
.a-ml-auto  { margin-left: auto; }
.a-gap-05   { gap: 0.5rem; }

/* === SIZING === */
.a-w-full    { width: 100%; }
.a-min-w-200 { min-width: 200px; }
.a-max-w-320 { max-width: 320px; }

/* === SPACING — margin-top === */
.a-mt-tiny { margin-top: 0.1rem; }
.a-mt-05   { margin-top: 0.5rem; }
.a-mt-06   { margin-top: 0.6rem; }
.a-mt-08   { margin-top: 0.8rem; }
.a-mt-1    { margin-top: 1rem; }

/* === SPACING — margin-bottom === */
.a-mb-06 { margin-bottom: 0.6rem; }
.a-mb-08 { margin-bottom: 0.8rem; }
.a-mb-1  { margin-bottom: 1rem; }

/* === SPACING — margin shorthand === */
.a-m-row { margin: 0.3rem 0 0.8rem; } /* titres de step wizard */

/* === SPACING — padding === */
.a-p-08 { padding: 0.8rem; }

/* === TYPOGRAPHY === */
.a-text-xs     { font-size: 0.6rem; }
.a-text-sm     { font-size: 0.65rem; }
.a-text-tiny   { font-size: 0.7rem; }
.a-text-md     { font-size: 0.75rem; }
.a-mono        { font-family: monospace; }
.a-uppercase   { text-transform: uppercase; }
.a-text-center { text-align: center; }
.a-ls          { letter-spacing: 0.5px; }
.a-pre-wrap    { white-space: pre-wrap; }
.a-word-break  { word-break: break-all; }

/* === COLORS — text === */
.a-text-accent      { color: var(--dgrk-accent); }
.a-text-danger      { color: var(--dgrk-danger); }
.a-text-danger-soft { color: var(--dgrk-danger-soft); }
.a-text-muted-weak  { color: var(--muted-weak); }
.a-text-main        { color: var(--text); }
.a-text-success     { color: var(--dgrk-success-dark); }

/* === BACKGROUNDS === */
.a-bg-glow { background: rgba(0, 255, 255, 0.03); }
.a-bg-dim  { background: rgba(0, 0, 0, 0.15); }

/* === BORDERS === */
.a-border-danger { border-color: rgba(255, 68, 68, 0.3); }
.a-border-glow   { border-color: rgba(0, 255, 255, 0.15); }
.a-br-soft       { border: 1px solid rgba(0, 255, 255, 0.08); }
.a-br-bottom     { border-bottom: 1px solid rgba(0, 255, 255, 0.06); }
.a-rounded       { border-radius: 6px; }

/* === OVERFLOW === */
.a-overflow-auto { overflow: auto; }
.a-max-h-400     { max-height: 400px; }

/* === LIST RESET === */
.a-list-plain { list-style: none; padding: 0; }

/* === COMPOUND ATOMS === */

/* label de section : minuscule, espacé, muted */
.a-label-xs {
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--muted-weak);
    margin: 0 0 0.3rem;
}

/* bloc code / manifest JSON avec scroll */
.a-code-block {
    font-size: 0.65rem;
    max-height: 400px;
    overflow: auto;
    background: rgba(0, 0, 0, 0.15);
    padding: 0.8rem;
    border-radius: 6px;
    color: var(--text);
    white-space: pre-wrap;
    word-break: break-all;
}

/* fieldset de section dans le wizard forge */
.a-fieldset {
    border: 1px solid rgba(0, 255, 255, 0.08);
    padding: 0.8rem;
}

/* legend dans fieldset wizard */
.a-legend {
    color: var(--dgrk-accent);
    font-size: 0.7rem;
    padding: 0 0.3rem;
}

/* item de liste dans les sidebars MNL/MNR */
.a-sidebar-item {
    padding: 0.4rem 0;
    border-bottom: 1px solid rgba(0, 255, 255, 0.06);
}


/* admin.css */
/* DIGIRELIK ADMIN DASHBOARD - CSS CORRIGÉ */
/* Version compacte et fonctionnelle */

:root {
    --primary-color: #00ffff;
    --secondary-color: #0080ff;
    --background-color: #0d0d0d;
    --text-color: #00ffff;
    --card-bg: rgba(0,255,255,0.05);
    --border-color: rgba(0,255,255,0.3);
    --sidebar-width: 220px;
}

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

body {
    font-family: system-ui, -apple-system, sans-serif;
    background: var(--background-color);
    color: var(--text-color);
    font-size: 13px;
    line-height: 1.4;
}

.admin-layout {
    display: flex;
    min-height: 100vh;
}

.admin-shell .mn {
    width: var(--sidebar-width);
    background: #1a1a1a;
    border-right: 1px solid rgba(0,255,255,0.2);
    position: fixed;
    height: 100vh;
    overflow-y: auto;
    z-index: 1000;
}

.sidebar-title {
    padding: 0.8rem;
    border-bottom: 1px solid rgba(0,255,255,0.14);
    text-align: center;
    font-size: 1.1rem;
    font-weight: bold;
    color: var(--primary-color);
    margin: 0 0 0.3rem;
}

.nav-group {
    display: grid;
    gap: 0.15rem;
    padding: 0.55rem 0 0.7rem;
}

.nav-group + .nav-group {
    border-top: 1px solid rgba(0,255,255,0.14);
}

.nav-group-title {
    padding: 0 0.8rem 0.35rem;
    color: rgba(0,255,255,0.72);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.nav-link {
    display: flex;
    align-items: center;
    padding: 0.5rem 0.8rem;
    color: #ccc;
    text-decoration: none;
    transition: all 0.3s ease;
    border-left: 3px solid transparent;
    font-size: 0.85rem;
}

.nav-link:hover, .nav-link.active {
    background: rgba(0,255,255,0.1);
    color: var(--primary-color);
    border-left-color: var(--primary-color);
}

.nav-link i {
    margin-right: 0.5rem;
    width: 14px;
    text-align: center;
}

.admin-content {
    flex: 1;
    margin-left: var(--sidebar-width);
    background: var(--background-color);
}

.admin-shell .hd {
    background: rgba(26,26,26,0.95);
    border-bottom: 1px solid rgba(0,255,255,0.3);
    padding: 0.6rem 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.admin-shell .hd h1 {
    color: var(--primary-color);
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0;
}

.admin-shell .ct {
    padding: 1rem;
}

.admin-shell .admin-view {
    display: grid;
    gap: 1rem;
    align-content: start;
    min-width: 0;
}

.mt-xs {
    margin-top: 0.6rem;
}

.mt-sm {
    margin-top: 0.8rem;
}

.mt-md {
    margin-top: 1rem;
}

.stack-sm {
    display: grid;
    gap: 0.75rem;
}

.stack-md {
    display: grid;
    gap: 1rem;
}

.justify-end {
    justify-content: flex-end;
}

.info-row-value {
    max-width: 70%;
    text-align: right;
    overflow-wrap: anywhere;
}

.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.8rem;
    margin-bottom: 1.2rem;
    list-style: none;
    padding: 0;
}

.stat-card {
    background: var(--card-bg);
    border: 1px solid rgba(0,255,255,0.15);
    border-radius: 6px;
    padding: 0.8rem;
    box-shadow: var(--dgrk-shadow-inset);
    transition: border-color var(--dgrk-transition);
}

.stat-card:hover {
    border-color: rgba(0,255,255,0.35);
}

.stat-header {
    display: flex;
    align-items: center;
    margin-bottom: 0.6rem;
}

.stat-copy {
    display: grid;
}

.stat-icon {
    width: 35px;
    height: 35px;
    border-radius: 6px;
    background: rgba(0,255,255,0.08);
    border: 1px solid rgba(0,255,255,0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-color);
    font-size: 0.9rem;
    margin-right: 0.6rem;
    box-shadow: var(--dgrk-shadow-inset);
}

.stat-title {
    color: var(--primary-color);
    font-size: 0.75rem;
    opacity: 0.8;
    margin-bottom: 0.2rem;
}

.stat-value {
    font-size: 1.4rem;
    font-weight: bold;
    color: var(--primary-color);
    margin: 0.2rem 0;
}

.stat-change {
    color: #00ff88;
    font-size: 0.7rem;
}

.panel-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.admin-link-row,
.admin-actions-block {
    margin: 0;
    padding-top: 0.8rem;
}

.card-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
    margin: 1rem 0 0;
    padding: 0;
}

.form-grid > li {
    list-style: none;
}

.data-table {
    background: rgba(26,26,26,0.95);
    border-radius: 5px;
    overflow: hidden;
    border: 1px solid rgba(0,255,255,0.2);
}

.table-grid caption {
    background: rgba(0,255,255,0.06);
    color: var(--primary-color);
    padding: 0.6rem 0.8rem;
    font-weight: 600;
    font-size: 0.8rem;
    text-align: left;
    caption-side: top;
    border-bottom: 1px solid rgba(0,255,255,0.14);
}

.table-content {
    max-height: 320px;
    overflow-y: auto;
}

.table-grid {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
}

.table-grid th,
.table-grid td {
    padding: 0.6rem 0.8rem;
    border-bottom: 1px solid rgba(0,255,255,0.1);
    text-align: left;
    vertical-align: top;
}

.table-grid thead th {
    color: #84ffff;
    font-weight: 700;
    background: rgba(0,255,255,0.06);
}

.table-grid tbody tr:hover {
    background: rgba(0,255,255,0.1);
}

.table-actions-cell p {
    margin: 0 0 0.35rem;
}

/* .btn definitions consolidated into resources/css/digirelik.css */

.btn-primary {
    background: rgba(0,255,255,0.12);
    color: var(--primary-color);
    border: 1px solid rgba(0,255,255,0.3);
}
.btn-primary:hover { background: rgba(0,255,255,0.2); }

.btn-success {
    background: rgba(0,255,136,0.12);
    color: #00ff88;
    border: 1px solid rgba(0,255,136,0.3);
}
.btn-success:hover { background: rgba(0,255,136,0.2); }

.btn-warning {
    background: rgba(255,170,0,0.12);
    color: #ffaa00;
    border: 1px solid rgba(255,170,0,0.3);
}
.btn-warning:hover { background: rgba(255,170,0,0.2); }

.btn-danger {
    background: rgba(255,68,68,0.12);
    color: #ff6666;
    border: 1px solid rgba(255,68,68,0.3);
}
.btn-danger:hover { background: rgba(255,68,68,0.2); }

.btn-sm {
    padding: 0.2rem 0.4rem;
    font-size: 0.7rem;
}

.alert {
    padding: 0.6rem 0.8rem;
    border-radius: 4px;
    margin-bottom: 0.8rem;
    font-size: 0.85rem;
}

.alert-success {
    background: rgba(0,255,136,0.1);
    border: 1px solid #00ff88;
    color: #00ff88;
}

.alert-danger {
    background: rgba(255,68,68,0.1);
    border: 1px solid #ff4444;
    color: #ff4444;
}

/* Responsive Design */
@media (max-width: 768px) {
    .admin-shell .mn {
        transform: translateX(-100%);
        transition: transform 0.3s ease;
    }

    .admin-content {
        margin-left: 0;
    }

    .dashboard-grid {
        grid-template-columns: 1fr;
    }

    .table-grid,
    .table-grid thead,
    .table-grid tbody,
    .table-grid tr,
    .table-grid th,
    .table-grid td {
        display: block;
        width: 100%;
    }

    .table-grid thead {
        display: none;
    }

    .table-grid tr {
        gap: 0.3rem;
        padding: 0.4rem 0;
    }

    .table-grid td {
        border-bottom: 0;
    }
}

/* Animations supprimées — fadeIn staggeré retiré (trop intrusif) */

/* Styles pour les badges */
.badge {
    padding: 0.15rem 0.3rem;
    border-radius: 2px;
    font-size: 0.7rem;
    font-weight: bold;
}
.badge-up { color: #2ecc71; }
.badge-down { color: #e74c3c; }
.badge-warning { color: #f39c12; }
.badge-syncing { color: #3498db; }
.text-up { color: #2ecc71; }
.text-down { color: #e74c3c; }
.text-warning { color: #f39c12; }
.text-syncing { color: #3498db; }

/* Uptime grid & cards */
.uptime-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 0.8rem;
}
.uptime-card {
    background: rgba(26,26,26,0.6);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 0.8rem;
    border-left: 3px solid var(--border-color);
}
.uptime-card--up { border-left-color: #2ecc71; }
.uptime-card--syncing { border-left-color: #3498db; }
.uptime-card--warning { border-left-color: #f39c12; }
.uptime-card--down { border-left-color: #e74c3c; }
.uptime-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}
.uptime-card-uptime {
    margin-bottom: 0.4rem;
}
.uptime-value {
    font-size: 1.1rem;
    font-weight: bold;
    color: var(--primary-color);
    margin-left: 0.4rem;
}
.uptime-card-details {
    list-style: none;
    padding: 0;
    margin: 0.4rem 0 0;
}
.uptime-card-details li {
    padding: 0.1rem 0;
    border-top: 1px solid rgba(255,255,255,0.05);
}
.uptime-card-details li:first-child {
    border-top: none;
}

/* Styles pour les formulaires */
.form-group {
    margin-bottom: 0.8rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.3rem;
    color: var(--primary-color);
    font-weight: 500;
    font-size: 0.8rem;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 0.4rem;
    border: 1px solid var(--border-color);
    border-radius: 3px;
    background: rgba(26,26,26,0.9);
    color: var(--text-color);
    font-size: 0.8rem;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 5px rgba(0,255,255,0.3);
}

/* Styles pour les barres de progression */
.progress-bar {
    width: 100%;
    height: 6px;
    background: rgba(0,255,255,0.1);
    border-radius: 3px;
    overflow: hidden;
    margin: 0.3rem 0;
}

.progress-fill {
    height: 100%;
    background: rgba(0,255,255,0.7);
    border-radius: 3px;
    transition: width 0.3s ease;
}

/* Action groups (sidebar admin) */
.action-group {
    padding: 0.6rem 0;
    border-bottom: 1px solid rgba(0,255,255,0.1);
}

.action-group:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.action-group:first-child {
    padding-top: 0;
}

.action-group-label {
    display: block;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(0,255,255,0.5);
    margin-bottom: 0.4rem;
}

.action-group-buttons {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.action-group-buttons form {
    display: contents;
}

.btn-block {
    display: block;
    width: 100%;
    text-align: center;
}

.btn-outline-primary {
    background: transparent;
    color: var(--primary-color);
    border: 1px solid var(--primary-color);
}

.btn-outline-primary:hover {
    background: rgba(0,255,255,0.15);
}

.btn-outline-secondary {
    background: transparent;
    color: #aaa;
    border: 1px solid rgba(255,255,255,0.2);
}

.btn-outline-secondary:hover {
    background: rgba(255,255,255,0.08);
    color: #fff;
}

/* Status dots (node monitoring) */
.status-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.status-dot--ok {
    background: #00e676;
    box-shadow: 0 0 6px rgba(0,230,118,0.6);
}

.status-dot--error {
    background: #ff5252;
    box-shadow: 0 0 6px rgba(255,82,82,0.6);
}

.status-ok {
    color: #00e676;
}

.status-error {
    color: #ff5252;
}

/* ----------------------------------------------------------------
   Log viewer — composant _tail_viewer
   ---------------------------------------------------------------- */

.log-content {
    max-height: 500px;
    overflow-y: auto;
    background: #0a0a0a;
    color: #ccc;
    padding: 1rem;
    font-size: .75rem;
    white-space: pre-wrap;
    word-break: break-all;
}

/* Compteurs KPI rapides affichés au-dessus du viewer */
.log-kpi {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.6rem;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.03em;
}

.log-kpi-error { background: rgba(255,68,68,0.15);  color: var(--dgrk-danger-soft, #ff8888); border: 1px solid rgba(255,68,68,0.3);  }
.log-kpi-warn  { background: rgba(255,170,0,0.12);  color: var(--dgrk-warn, #ffaa00);        border: 1px solid rgba(255,170,0,0.3);  }
.log-kpi-info  { background: rgba(0,255,255,0.06);  color: var(--dgrk-accent, #00ffff);      border: 1px solid rgba(0,255,255,0.15); }
.log-kpi-ok    { background: rgba(0,255,136,0.08);  color: var(--dgrk-success-dark, #00ff88); border: 1px solid rgba(0,255,136,0.2); }


/* forge.css */
/* forge.css — Gamified Forge pipeline UI */

/* ========== STEPPER (wizard + tracking) ========== */

.forge-stepper {
    display: flex;
    align-items: flex-start;
    gap: 0;
    margin: 1.5rem 0;
    padding: 0;
    list-style: none;
    counter-reset: step;
}

.forge-step {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    text-align: center;
}

.forge-step::before {
    content: "";
    position: absolute;
    top: 18px;
    left: calc(-50% + 18px);
    right: calc(50% + 18px);
    height: 3px;
    background: #1f2b31;
    transition: background 0.4s ease;
}

.forge-step:first-child::before { display: none; }

.forge-step.done::before { background: linear-gradient(90deg, var(--dgrk-success-dark), var(--dgrk-accent)); }
.forge-step.active::before { background: linear-gradient(90deg, var(--dgrk-accent), var(--dgrk-accent-glow)); }

.step-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.5px;
    border: 2px solid #1f2b31;
    background: #0d1416;
    color: #5a7a80;
    transition: all 0.4s ease;
    position: relative;
    z-index: 1;
}

.forge-step.done .step-icon {
    background: linear-gradient(135deg, #052e12, #0a3a18);
    border-color: var(--dgrk-success-dark);
    color: var(--dgrk-success);
    box-shadow: 0 0 12px rgba(0, 255, 136, 0.25);
}

.forge-step.active .step-icon {
    background: linear-gradient(135deg, #0a2030, #102a3a);
    border-color: var(--dgrk-accent);
    color: var(--dgrk-accent);
    box-shadow: 0 0 16px var(--dgrk-accent-glow);
    animation: forge-pulse 2s infinite;
}

.forge-step.failed .step-icon {
    background: linear-gradient(135deg, #2e0606, #3a0a0a);
    border-color: var(--dgrk-danger);
    color: var(--dgrk-danger);
    box-shadow: 0 0 12px rgba(255, 68, 68, 0.3);
}

.step-label {
    margin-top: 0.5rem;
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #5a7a80;
    transition: color 0.3s;
}

.forge-step.done .step-label { color: var(--dgrk-success-dark); }
.forge-step.active .step-label { color: var(--dgrk-accent); }
.forge-step.failed .step-label { color: var(--dgrk-danger); }

@keyframes forge-pulse {
    0% { box-shadow: 0 0 0 0 rgba(0, 255, 255, 0.5); }
    70% { box-shadow: 0 0 0 10px rgba(0, 255, 255, 0); }
    100% { box-shadow: 0 0 0 0 rgba(0, 255, 255, 0); }
}

/* ========== WIZARD STEPS ========== */

.wizard-steps { position: relative; }

.wizard-panel {
    display: none;
    animation: wizardFadeIn 0.35s ease;
}

.wizard-panel.is-active { display: block; }

@keyframes wizardFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

.wizard-nav {
    display: flex;
    gap: 0.6rem;
    margin-top: 1.2rem;
    justify-content: flex-end;
}

/* ========== PROGRESS BAR ========== */

.forge-progress {
    width: 100%;
    height: 6px;
    background: #1f2b31;
    border-radius: 3px;
    overflow: hidden;
    margin: 0.8rem 0;
}

.forge-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--dgrk-accent), var(--dgrk-success-dark));
    border-radius: 3px;
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.forge-progress-bar::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
    animation: forge-shimmer 2s infinite;
}

@keyframes forge-shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(200%); }
}

/* ========== STATUS BADGES ========== */

.forge-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 3px 10px;
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: 12px;
    border: 1px solid;
}

.forge-badge.queued { background: #0a1a2e; color: var(--dgrk-accent); border-color: rgba(0, 255, 255, 0.3); }
.forge-badge.processing { background: #0a2030; color: var(--dgrk-accent); border-color: rgba(0, 255, 255, 0.4); animation: forge-pulse 2s infinite; }
.forge-badge.completed { background: #052e12; color: var(--dgrk-success-dark); border-color: rgba(0, 255, 136, 0.3); }
.forge-badge.failed { background: #2e0606; color: var(--dgrk-danger-soft); border-color: rgba(255, 68, 68, 0.3); }
.forge-badge.partial { background: #2e1f05; color: var(--dgrk-warn); border-color: rgba(255, 170, 0, 0.3); }

/* ========== FORGE RUN CARDS ========== */

.forge-run-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
    margin: 1rem 0;
    padding: 0;
    list-style: none;
}

.forge-run-card {
    display: block;
    background: var(--dgrk-bg-surface);
    border: 1px solid var(--dgrk-border-accent-soft);
    border-radius: var(--dgrk-card-radius);
    padding: 1rem;
    text-decoration: none;
    color: var(--text);
    transition: var(--dgrk-transition);
    position: relative;
    overflow: hidden;
}

.forge-run-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--dgrk-border-accent-soft), transparent);
    transition: background 0.3s;
}

.forge-run-card:hover {
    border-color: var(--dgrk-border-accent);
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0, 255, 255, 0.08);
}

.forge-run-card:hover::before {
    background: linear-gradient(90deg, transparent, var(--dgrk-accent), transparent);
}

.forge-run-card.is-active::before {
    background: linear-gradient(90deg, transparent, var(--dgrk-accent), transparent);
    animation: forge-card-glow 2s infinite alternate;
}

@keyframes forge-card-glow {
    from { opacity: 0.5; }
    to { opacity: 1; }
}

.run-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.5rem;
    margin-bottom: 0.6rem;
}

.run-card-title {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--dgrk-accent);
    margin: 0;
}

.run-card-meta {
    display: grid;
    gap: 0.25rem;
    font-size: 0.7rem;
    color: var(--muted);
}

.run-card-meta span {
    display: flex;
    gap: 0.4rem;
    align-items: center;
}

.run-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.8rem;
    padding-top: 0.6rem;
    border-top: 1px solid rgba(0, 255, 255, 0.08);
    font-size: 0.6rem;
    color: var(--muted-weak);
}

/* ========== TRACKING DETAIL ========== */

.forge-detail-grid {
    display: grid;
    gap: 1rem;
}

.forge-data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.75rem;
}

.forge-data-table th {
    text-align: left;
    padding: 0.5rem 0.8rem;
    color: var(--dgrk-accent);
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid rgba(0, 255, 255, 0.15);
    white-space: nowrap;
}

.forge-data-table td {
    padding: 0.5rem 0.8rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    color: var(--text);
    word-break: break-all;
}

.forge-data-table tr:hover td {
    background: rgba(0, 255, 255, 0.03);
}

/* ========== HERO STATS ========== */

.forge-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0.8rem;
    margin: 1rem 0;
}

.forge-stat {
    background: #121618;
    border: 1px solid #1d2a30;
    border-left: 3px solid var(--dgrk-accent);
    border-radius: 10px;
    padding: 0.8rem 1rem;
    transition: var(--dgrk-transition);
}

.forge-stat:hover {
    border-color: var(--dgrk-border-accent);
    box-shadow: 0 0 0 1px var(--dgrk-border-accent);
}

.forge-stat-label {
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--muted-weak);
    margin: 0 0 0.2rem;
}

.forge-stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--dgrk-accent);
    line-height: 1;
    margin: 0;
}

.forge-stat.success { border-left-color: var(--dgrk-success-dark); }
.forge-stat.success .forge-stat-value { color: var(--dgrk-success-dark); }
.forge-stat.danger { border-left-color: var(--dgrk-danger); }
.forge-stat.danger .forge-stat-value { color: var(--dgrk-danger); }

/* ========== CID DISPLAY ========== */

.cid-display {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    background: #0a1216;
    border: 1px solid #1a2a30;
    border-radius: 6px;
    padding: 0.4rem 0.6rem;
    font-family: 'Courier New', monospace;
    font-size: 0.65rem;
    color: var(--dgrk-accent);
    word-break: break-all;
}

.cid-display .cid-prefix {
    color: var(--muted-weak);
    font-weight: 700;
    white-space: nowrap;
}

/* ========== RESPONSIVE ========== */

@media (max-width: 640px) {
    .forge-stepper {
        gap: 0.2rem;
    }
    .step-icon {
        width: 28px;
        height: 28px;
        font-size: 0.5rem;
    }
    .step-label {
        font-size: 0.5rem;
    }
    .forge-run-grid {
        grid-template-columns: 1fr;
    }
    .forge-stats {
        grid-template-columns: repeat(2, 1fr);
    }
}