/* CATALOGUE — catalogue d evenements et d enveloppes
 *
 * Tranche 07 de public/styles.css, decoupe le 2026-08-24. Les fichiers sont
 * NUMEROTES parce que l'ordre de chargement compte : une regle plus bas l'emporte sur une
 * regle de meme portee plus haut. Ne pas reordonner les <link> de index.html.
 */
@media (max-width: 640px) {
  .timeline-card {
    grid-template-columns: 1fr auto;
    grid-template-areas: "head actions" "titlerow actions" "detail detail";
  }
  .timeline-card-head { border-right: none; padding-right: 0; flex-direction: row; align-items: baseline; gap: 0.4rem; }
}

.financial-cases-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.5rem;
}

/* —— Catalogue événements (inspiré Finary Predict) —— */
.btn-add-event { font-weight: 600; }
.btn-add-event-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.25rem; height: 1.25rem; border-radius: 50%;
  background: color-mix(in srgb, var(--text-strong) 13%, transparent); font-size: 1rem; line-height: 1;
}
.catalog-overlay { align-items: flex-start; padding-top: 2vh; }
.modal-catalog {
  max-width: 820px; width: 100%; max-height: 92vh;
  padding: 0; overflow: hidden; display: flex; flex-direction: column;
}
.catalog-header {
  padding: 1.1rem 1.25rem 0.85rem;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, var(--card) 0%, var(--bg-inset) 100%);
  flex-shrink: 0;
}
.catalog-header-top {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem;
  margin-bottom: 0.75rem;
}
.catalog-header h2 { font-size: 1.15rem; margin: 0; color: var(--text-strong); }
.catalog-subtitle { font-size: 0.78rem; color: var(--muted); margin: 0.25rem 0 0; max-width: 36rem; }
/* Croix de fermeture : carree, comme tout bouton reduit a un seul signe. */
.catalog-close { padding-inline: 0; min-width: 1.7rem; }
.catalog-search {
  width: 100%; background: var(--bg-inset); border: 1px solid var(--border);
  color: var(--text-strong); border-radius: var(--radius-input); padding: 0.55rem 0.75rem;
  font-size: 0.88rem; margin-bottom: 0.65rem;
}
.catalog-search:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 2px color-mix(in srgb, var(--gold) 20%, transparent); }
.catalog-pills {
  display: flex; flex-wrap: wrap; gap: 0.35rem;
}
.catalog-pill {
  display: inline-flex; align-items: center; gap: 0.3rem;
  background: var(--bg-hover); border: 1px solid var(--border); color: var(--muted);
  border-radius: 999px; padding: 0.28rem 0.65rem; font-size: 0.72rem;
  cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.catalog-pill:hover { color: var(--text-strong); border-color: var(--border-strong); }
/* Rangée de segments (Patrimoine / Événements) au-dessus des pastilles de catégorie :
   même forme, un cran plus affirmé, avec une séparation pour marquer les deux niveaux. */
.catalog-segments { margin-bottom: 0.45rem; padding-bottom: 0.45rem; border-bottom: 1px solid var(--border); }
.catalog-segments .catalog-pill { font-size: 0.78rem; padding: 0.32rem 0.8rem; }
.catalog-pill.is-active {
  background: color-mix(in srgb, var(--cat-vie) 13%, transparent); border-color: color-mix(in srgb, var(--cat-vie) 53%, transparent); color: var(--cat-vie-text);
}
#catalog-view-picker {
  overflow-y: auto; flex: 1; padding: 0 1.25rem 1.25rem;
}
.catalog-section { margin-top: 1rem; }
.catalog-section-title {
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--muted); margin: 0 0 0.55rem; font-weight: 600;
}
.catalog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.55rem;
}
.catalog-grid-featured { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.catalog-card {
  text-align: left; background: var(--bg-inset); border: 1px solid var(--border);
  border-radius: var(--radius-card); padding: 0.85rem 0.9rem; cursor: pointer;
  transition: border-color 0.15s, transform 0.12s, box-shadow 0.15s;
  display: flex; flex-direction: column; gap: 0.35rem; min-height: 7.5rem;
}
/* Enveloppe déjà configurée : la carte reste visible (la retirer laisserait croire qu'elle
   n'existe pas au catalogue) mais n'est plus cliquable. */
.catalog-card.is-disabled { opacity: 0.45; cursor: default; }
.catalog-card.is-disabled:hover { border-color: var(--border); transform: none; box-shadow: none; }
.catalog-card:hover {
  border-color: var(--gold); transform: translateY(-1px);
  box-shadow: 0 4px 16px color-mix(in srgb, black 53%, transparent);
}
.catalog-card.is-featured {
  border-color: color-mix(in srgb, var(--gold) 30%, transparent);
  background: linear-gradient(145deg, var(--bg-inset) 0%, color-mix(in srgb, var(--card) 53%, transparent) 100%);
}
.catalog-card-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.5rem; height: 2.5rem; border-radius: 50%;
  font-size: 1.25rem; line-height: 1;
  background: color-mix(in srgb, currentColor 15%, var(--bg-inset));
}
.catalog-card-label { font-size: 0.88rem; font-weight: 600; color: var(--text); line-height: 1.25; }
.catalog-card-desc { font-size: 0.72rem; color: var(--muted); line-height: 1.35; flex: 1; }
.catalog-card-tag {
  font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.04em;
  align-self: flex-start; padding: 0.1rem 0.4rem; border-radius: var(--radius-xs); font-weight: 600;
}
.catalog-empty { text-align: center; color: var(--muted); font-size: 0.82rem; padding: 1.5rem 0; }
#catalog-view-wizard {
  padding: 1.25rem; overflow-y: auto; flex: 1;
}
.catalog-back {
  background: none; border: none; color: var(--gold); cursor: pointer;
  font-size: 0.78rem; padding: 0; margin-bottom: 0.85rem;
}
.catalog-back:hover { text-decoration: underline; }
.catalog-wizard-head {
  display: flex; align-items: flex-start; gap: 0.75rem; margin-bottom: 1rem;
}
.catalog-wizard-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 3.4rem; height: 3.4rem; border-radius: 50%; flex: 0 0 auto;
  font-size: 1.7rem; line-height: 1;
  background: color-mix(in srgb, currentColor 15%, var(--bg-inset));
}
.catalog-wizard-head h2 { margin: 0; font-size: 1.05rem; }
.catalog-wizard-fields {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.65rem;
  margin-bottom: 1rem;
}
@media (max-width: 520px) { .catalog-wizard-fields { grid-template-columns: 1fr; } }
.catalog-wizard-fields label {
  display: flex; flex-direction: column; gap: 0.2rem;
  font-size: 0.75rem; color: var(--muted);
}
.catalog-wizard-fields label.span-2 { grid-column: span 2; }
/* Même piège que .modal-grid ci-dessus : la règle display:flex ci-dessus l'emporte sur
   [hidden]{display:none} de la feuille UA, laissant #cw-subtype-wrap visible avant même
   le choix de la famille dans le picker « Acheter un bien ». */
.catalog-wizard-fields label[hidden] { display: none !important; }
.catalog-wizard-fields input, .catalog-wizard-fields select { padding: 0.45rem 0.55rem; font-size: 0.88rem; }
.catalog-wizard-actions { display: flex; flex-direction: column; gap: 0.45rem; }

.invest-revenu-list { margin-bottom: 0.5rem; }