/* ════════════════════════════════════════════════════════════════════════════
   Module DÉMOS — la vitrine prospect. Rendu visé G1 `Demos.dc.html`.
   Grille de cartes : miniature d'écran, titre Bodoni, argument, qualification,
   deux actions. Le pied porte le compte des accès actifs.
   ════════════════════════════════════════════════════════════════════════════ */

.demos-entete {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--space-6); flex-wrap: wrap;
}
.demos-titre {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(32px, 4.4vw, 52px); line-height: 1; margin: 0;
}
.demos-sous {
  font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--faint); margin: 6px 0 0;
}
.demos-compte { font-size: 12px; color: var(--muted); white-space: nowrap }

/* Le fleuve en filet de section — axe, jamais ornement. */
.demos-fleuve { display: block; width: 100%; height: 14px; margin: 20px 0 24px }
.demos-fleuve path { stroke: var(--ocre); stroke-width: 1.5; fill: none }

.vitrines {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}
.vitrine {
  background: var(--bg-card); border: 1px solid var(--hair);
  border-radius: var(--radius-card); padding: 20px;
  display: flex; flex-direction: column; gap: 14px;
}
.vitrine-image {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--hair); border-radius: var(--radius-card);
  background: var(--bg);
}
.vitrine-titre { font-family: var(--font-display); font-weight: 700; font-size: 24px; line-height: 1.15 }
.vitrine-argument { font-size: 13px; color: var(--muted); margin: -9px 0 0; line-height: 1.45 }

/* La qualification — persona, produit, maquette, partenariat. Pastille ET mot :
   la règle des trois étages (MARQUE / TENANT / DÉMO) se lit, elle ne se devine
   pas à une nuance de couleur. */
.vitrine-genre { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted) }
.vitrine-genre .pastille {
  width: 8px; height: 8px; border-radius: var(--radius-card); flex: 0 0 8px; background: var(--text);
}
.genre-sauge { color: var(--muted) } .genre-sauge .pastille { background: var(--sauge) }
.genre-warn { color: var(--ocre-ink) } .genre-warn .pastille { background: var(--warn) }
.genre-encre .pastille { background: var(--text) }

.vitrine-actions { display: flex; gap: 10px; margin-top: auto; align-items: stretch }
.vitrine-voir, .vitrine-agir {
  flex: 1; min-height: 48px; display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-button); font-family: var(--font-body);
  font-size: 14px; font-weight: 600; cursor: pointer; text-decoration: none;
}
.vitrine-voir { background: transparent; color: var(--text); border: 1px solid var(--hair-strong) }
.vitrine-voir:hover { background: var(--bg) }
.vitrine-agir { background: var(--text); color: var(--text-inverse); border: none }
.vitrine-agir:hover:not(:disabled) { background: var(--ink-hover) }
.vitrine-agir:disabled { opacity: .55; cursor: default }
.vitrine-voir:focus-visible, .vitrine-agir:focus-visible {
  outline: 2px solid var(--ocre); outline-offset: 2px;
}
/* Pas de bouton mort : quand l'accès n'est pas générable, on écrit pourquoi. */
.vitrine-sans {
  flex: 1; display: flex; align-items: center; font-size: 12px;
  color: var(--faint); line-height: 1.4;
}

.demos-pied {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--space-5); flex-wrap: wrap;
  border-top: 1px solid var(--hair); padding-top: 16px; margin-top: 24px;
  font-size: 13px; color: var(--muted);
}
.demos-bilan { display: flex; align-items: baseline; gap: 10px }
.demos-bilan b {
  font-family: var(--font-display); font-weight: 800; font-size: 26px;
  line-height: 1; font-variant-numeric: tabular-nums; color: var(--text);
}
.demos-quand { color: var(--faint) }

/* ── Les accès émis — même grammaire de ligne que les feux et le registre ──── */
.bloc-acces {
  background: var(--bg-card); border: 1px solid var(--hair); border-radius: var(--radius-card);
}
.acces {
  display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap;
  min-height: 56px; padding: 10px 14px; border-top: 1px solid var(--hair);
}
.acces:first-child { border-top: none }
.acces .pastille { width: 12px; height: 12px; border-radius: var(--radius-card); flex: 0 0 12px }
.acces-vert .pastille { background: var(--sauge) }
.acces-ambre .pastille { background: var(--warn) }
.acces-rouge .pastille { background: var(--terre) }
.acces-nom { flex: 1; min-width: 140px; font-size: 15px; font-weight: 600 }
.acces-projet {
  display: block; font-size: 11px; font-weight: 400; letter-spacing: .12em;
  text-transform: uppercase; color: var(--faint); margin-top: 2px;
}
.acces-etat { font-family: var(--font-display); font-weight: 700; font-size: 13px; width: 80px }
.acces-vert .acces-etat { color: var(--sauge) }
.acces-ambre .acces-etat { color: var(--warn) }
.acces-rouge .acces-etat { color: var(--terre) }
.acces-date { font-size: 12px; color: var(--faint); font-variant-numeric: tabular-nums; white-space: nowrap }
.acces-actions { display: flex; gap: 7px; flex-wrap: wrap }

.acces-cree {
  background: var(--bg-card); border: 1px solid var(--ocre);
  border-radius: var(--radius-card); padding: 16px; margin-top: 14px;
}
.acces-cree-chapeau { font-size: 12px; color: var(--faint) }
.acces-cree-lien {
  font-variant-numeric: tabular-nums; word-break: break-all;
  font-size: 13px; margin: 6px 0 10px; color: var(--text);
}
.acces-cree-note { font-size: 12px; color: var(--faint); margin-left: 8px }

.journal-ligne {
  padding: 9px 14px; border-top: 1px solid var(--hair);
  font-size: 13px; color: var(--muted);
}
.journal-ligne:first-child { border-top: none }
.journal-ligne b { color: var(--text); font-weight: 600 }
.journal-quand { color: var(--faint); font-variant-numeric: tabular-nums }