/* Styles spécifiques à la page infogérance Astro */

/* ── Grille 2 colonnes section spécificités ─────────────────── */
.grid-2-4   { display:grid; grid-template-columns:1fr 1fr; gap:4rem; margin-top:3rem; align-items:start; }

/* ── Liste d'étapes numérotées ──────────────────────────────── */
.steps-list  { list-style:none; display:flex; flex-direction:column; gap:1rem; }
.step-item   { display:flex; gap:.875rem; align-items:flex-start; }
.step-num    { font-family:var(--mono); font-size:.65rem; color:var(--teal); font-weight:600; flex-shrink:0; margin-top:.25rem; }
.step-text   { font-size:.92rem; color:var(--text); line-height:1.7; }

/* ── Boîtes avant / après ───────────────────────────────────── */
.flex-col-gap-sm { display:flex; flex-direction:column; gap:.75rem; }
.box-danger  { background:var(--bg2); border:1px solid rgba(248,113,113,.2); border-radius:12px; padding:1.25rem; }
.box-success { background:var(--bg2); border:1px solid rgba(45,212,191,.2);  border-radius:12px; padding:1.25rem; }
.box-label   { font-size:.72rem; font-weight:600; text-transform:uppercase; letter-spacing:.07em; margin-bottom:.5rem; }
.box-label-danger  { color:var(--red); }
.box-label-success { color:var(--teal); }

/* ── Listes légères ─────────────────────────────────────────── */
.list-clean  { list-style:none; display:flex; flex-direction:column; gap:.4rem; }
.list-item   { font-size:.85rem; display:flex; gap:.5rem; }
.list-item-muted { color:var(--muted); }
.list-item-text  { color:var(--text); }

/* ── Utilitaires couleur ─────────────────────────────────────── */
.text-red  { color:var(--red); }
.text-teal { color:var(--teal); }

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 768px) {
  .grid-2-4 { grid-template-columns:1fr; gap:2rem; }
}