/* ───────────────────────────────────────────────────────────
   howto-pme — feuille de style MOTEUR (commune)
   Copiée dans chaque client par build.sh (→ _assets/_engine.css).
   Toutes les couleurs passent par des variables CSS : correct en
   clair comme en sombre. Les couleurs de marque du client sont
   définies dans brand.css (surcharge les variables --md-primary-*).
   ─────────────────────────────────────────────────────────── */

/* Cartes de la page d'accueil ("Je suis…" / parcours) */
.md-typeset .grid.cards > ul > li,
.md-typeset .grid > .card {
  border: .05rem solid var(--md-default-fg-color--lightest);
  border-radius: .6rem;
  transition: border-color .2s, box-shadow .2s, transform .2s;
}
.md-typeset .grid.cards > ul > li:hover {
  border-color: var(--md-accent-fg-color);
  box-shadow: 0 .2rem .8rem var(--md-default-fg-color--lightest);
  transform: translateY(-.1rem);
}
.md-typeset .grid.cards > ul > li > hr {
  margin: .6rem 0;
  border-color: var(--md-default-fg-color--lightest);
}

/* En-tête de procédure : bandeau de méta (rôle, durée, niveau) */
.proc-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: .8rem 0 1.4rem;
}
.proc-meta .chip {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .18rem .6rem;
  font-size: .72rem;
  font-weight: 600;
  line-height: 1.4;
  border-radius: 1rem;
  color: var(--md-primary-fg-color);
  background: color-mix(in srgb, var(--md-primary-fg-color) 12%, transparent);
  border: .05rem solid color-mix(in srgb, var(--md-primary-fg-color) 30%, transparent);
}
.proc-meta .chip.niveau-debutant { color: var(--howto-ok); background: color-mix(in srgb, var(--howto-ok) 12%, transparent); border-color: color-mix(in srgb, var(--howto-ok) 30%, transparent); }
.proc-meta .chip.niveau-intermediaire { color: var(--howto-warn); background: color-mix(in srgb, var(--howto-warn) 12%, transparent); border-color: color-mix(in srgb, var(--howto-warn) 30%, transparent); }

/* Progression de parcours */
.parcours-progress {
  margin: 1rem 0 1.5rem;
}
.parcours-progress .bar {
  height: .4rem;
  border-radius: 1rem;
  background: var(--md-default-fg-color--lightest);
  overflow: hidden;
}
.parcours-progress .bar > span {
  display: block;
  height: 100%;
  border-radius: 1rem;
  background: var(--md-accent-fg-color);
}
.parcours-progress .label {
  font-size: .72rem;
  color: var(--md-default-fg-color--light);
  margin-top: .35rem;
}

/* Couleurs sémantiques (indépendantes de la marque) */
:root {
  --howto-ok:   #2e7d32;
  --howto-warn: #b26a00;
}
[data-md-color-scheme="slate"] {
  --howto-ok:   #66bb6a;
  --howto-warn: #ffb74d;
}

/* Page d'accueil : hero */
.howto-hero {
  padding: 1.2rem 0 .4rem;
}
.howto-hero p.lead {
  font-size: .95rem;
  color: var(--md-default-fg-color--light);
  max-width: 46rem;
}

/* Filigrane "brouillon" discret sur les procédures non publiées */
.md-typeset .brouillon-banner {
  border-left: .2rem solid var(--howto-warn);
}