/* --------------------------------------------------------------------------
   Guides & Actualités — page de liste (guides.html) et article (guide.html).
   Réutilise les variables et composants déjà définis dans app.css (couleurs,
   .catchip pour les puces de catégorie, .card-soft...) plutôt que d'en
   redéfinir, pour rester visuellement cohérent avec le reste de l'app.
-------------------------------------------------------------------------- */

.guides-content{ padding:0 18px 24px; }

/* --- Liste des guides --- */

.guide-card{
  display:block; text-decoration:none; color:inherit;
  background:var(--white); border-radius:var(--radius-md); box-shadow:var(--shadow-soft);
  padding:16px; margin-bottom:14px; transition:transform 0.15s, box-shadow 0.2s;
}
.guide-card:hover{ transform:translateY(-2px); box-shadow:var(--shadow-hover); }

.guide-card-category{
  font-family:var(--mono); font-size:11px; font-weight:700; color:var(--signal);
  text-transform:uppercase; letter-spacing:0.02em; margin-bottom:6px;
}
.guide-card-title{ font-family:var(--display); font-weight:800; font-size:17px; margin-bottom:6px; line-height:1.3; }
.guide-card-excerpt{ font-size:13px; color:var(--concrete); line-height:1.55; margin-bottom:8px; }
.guide-card-meta{ font-family:var(--mono); font-size:11px; color:var(--concrete); }

.guides-empty{
  background:var(--card-soft); border-radius:var(--radius-md); padding:28px 18px;
  text-align:center; color:var(--concrete); font-size:13.5px;
}

/* --- Article individuel --- */

.guide-back{ display:inline-block; margin-bottom:16px; font-size:13px; }

.guide-header-category{
  font-family:var(--mono); font-size:11.5px; font-weight:700; color:var(--signal);
  text-transform:uppercase; letter-spacing:0.02em; margin-bottom:8px;
}
.guide-header-title{ font-family:var(--display); font-weight:800; font-size:24px; line-height:1.25; margin-bottom:10px; }
.guide-header-meta{ font-family:var(--mono); font-size:11.5px; color:var(--concrete); margin-bottom:22px; }

/* Rendu du contenu Markdown -> HTML (voir marked côté serveur) */
.guide-body{ font-size:14.5px; line-height:1.75; color:var(--ink); }
.guide-body h1{ font-family:var(--display); font-weight:800; font-size:21px; margin:26px 0 12px; }
.guide-body h2{ font-family:var(--display); font-weight:800; font-size:18px; margin:24px 0 10px; }
.guide-body h3{ font-family:var(--display); font-weight:700; font-size:15.5px; margin:20px 0 8px; }
.guide-body p{ margin-bottom:14px; }
.guide-body ul, .guide-body ol{ margin:0 0 14px 20px; }
.guide-body li{ margin-bottom:6px; }
.guide-body strong{ font-weight:700; color:var(--ink); }
.guide-body a{ color:var(--signal); font-weight:600; text-decoration:none; }
.guide-body a:hover{ text-decoration:underline; }
.guide-body code{
  background:var(--concrete-light); padding:2px 6px; border-radius:6px; font-size:13px;
}
.guide-body pre{
  background:var(--concrete-light); padding:14px 16px; border-radius:var(--radius-sm);
  overflow-x:auto; margin-bottom:16px;
}
.guide-body pre code{ background:none; padding:0; }
.guide-body table{ width:100%; border-collapse:collapse; margin-bottom:18px; font-size:13px; }
.guide-body th, .guide-body td{ padding:8px 10px; border:1px solid var(--concrete-light); text-align:left; }
.guide-body th{ background:var(--card-soft); font-weight:700; }
.guide-body hr{ border:none; border-top:1px solid var(--concrete-light); margin:22px 0; }
.guide-body blockquote{
  border-left:3px solid var(--signal); padding:2px 16px; margin:0 0 14px; color:var(--concrete);
}

.guide-cta{
  background:var(--card-soft); border-radius:var(--radius-md); padding:18px; margin-top:28px;
  text-align:center;
}
.guide-cta a{
  display:inline-block; margin-top:10px; background:var(--signal); color:white; font-weight:700;
  font-size:13.5px; padding:12px 24px; border-radius:100px; text-decoration:none;
}