/* COUPLE & FAMILLE (public/ecrans/foyer-vues.js)
 *
 * Une couleur par membre, la même partout : pastille de l'en-tête, barre de parts, légende.
 * Le rang (moi d'abord) choisit la teinte, pas la personne : les deux comptes voient donc
 * chacun leur propre part en vert.
 */
#foyer-contenu { display: flex; flex-direction: column; gap: var(--ecart-blocs); }

.foyer-teinte-0 { background: var(--accent); }
.foyer-teinte-1 { background: var(--pink); }
.foyer-teinte-2 { background: var(--purple); }

/* --- En-tête : qui, quelle situation, et le menu des gestes rares --- */
.foyer-entete-ligne { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 0.9rem; }
.foyer-pastilles { display: flex; flex: 0 0 auto; }
.foyer-pastille {
  width: 2.4rem; height: 2.4rem; border-radius: 50%; display: inline-flex;
  align-items: center; justify-content: center; font-weight: 600; font-size: 0.95rem;
  color: var(--bg); border: 2px solid var(--card);
}
.foyer-pastille + .foyer-pastille { margin-left: -0.6rem; }
.foyer-entete-titre { flex: 1 1 auto; min-width: 0; }
.foyer-entete-titre h2 { margin: 0; font-size: 1.1rem; }
.foyer-entete-titre p { margin: 0.1rem 0 0; color: var(--muted); font-size: 0.85rem; }
.foyer-etiquette {
  flex: 0 0 auto; font-size: 0.75rem; padding: 0.2rem 0.6rem; border-radius: var(--radius-xs);
  background: var(--accent-soft); color: var(--accent-text); white-space: nowrap;
}
.foyer-etiquette.is-neutre { background: var(--bg-inset); color: var(--muted); }
.foyer-etiquette.is-fin { background: var(--gold-soft); color: var(--gold-strong); }

.foyer-attentes { list-style: none; margin: 0.8rem 0 0; padding: 0; font-size: 0.82rem; color: var(--muted); }
.foyer-attentes li { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding-top: 0.4rem; }

.foyer-demande-prenom {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem;
  margin-top: 0.9rem; padding-top: 0.8rem; border-top: 1px solid var(--border); font-size: 0.85rem;
}
.foyer-demande-prenom input { flex: 0 1 12rem; min-width: 0; }

/* --- Chiffres à deux --- */
.foyer-chiffres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; }
.foyer-tuile {
  display: flex; flex-direction: column; gap: 0.2rem; padding: 0.85rem 1rem;
  background: var(--card); border-radius: var(--radius-card); box-shadow: var(--shadow-card-sm);
}
.foyer-tuile-libelle { font-size: 0.78rem; color: var(--muted); }
.foyer-tuile-valeur { font-size: 1.35rem; font-weight: 600; color: var(--text-strong); font-variant-numeric: tabular-nums; }
.foyer-tuile.is-alerte .foyer-tuile-valeur { color: var(--red-text); }
.foyer-note { margin: -0.4rem 0 0; font-size: 0.82rem; color: var(--muted); }
.foyer-note.is-alerte { color: var(--warn); }

/* --- Sections : enfants, ce qui est partagé --- */
.foyer-section { display: flex; flex-direction: column; gap: 0.6rem; }
.foyer-section-tete { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; }
.foyer-section-tete h2 { margin: 0; font-size: 1rem; }
.foyer-vide { margin: 0; font-size: 0.85rem; color: var(--muted); }

.foyer-enfant-tete { display: flex; align-items: center; gap: 0.75rem; }
.foyer-enfant-icone {
  flex: 0 0 auto; width: 2.4rem; height: 2.4rem; border-radius: 50%; display: inline-flex;
  align-items: center; justify-content: center; background: var(--gold-soft); color: var(--gold-strong);
}
.foyer-enfant-nom { flex: 1 1 auto; min-width: 0; }
.foyer-enfant-nom h3 { margin: 0; font-size: 1rem; }
.foyer-enfant-nom p { margin: 0.1rem 0 0; font-size: 0.82rem; color: var(--muted); }
.foyer-enfant-faits {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem;
  margin: 0.9rem 0 0; padding-top: 0.8rem; border-top: 1px solid var(--border); font-size: 0.85rem;
}
.foyer-enfant-faits dt { color: var(--muted); font-size: 0.75rem; margin-bottom: 0.2rem; }
.foyer-enfant-faits dd { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0.15rem 0.5rem; }

.foyer-barre {
  display: inline-flex; flex: 0 0 auto; width: 6.5rem; height: 0.5rem; overflow: hidden;
  border-radius: 999px; background: var(--bg-inset);
}
.foyer-barre-texte { font-size: 0.8rem; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }

.foyer-legende { display: flex; gap: 0.9rem; margin: 0; font-size: 0.78rem; color: var(--muted); }
.foyer-legende i { display: inline-block; width: 0.6rem; height: 0.6rem; border-radius: 2px; margin-right: 0.35rem; vertical-align: -1px; }

.foyer-partages { list-style: none; margin: 0; padding: 0.2rem 1rem; }
.foyer-partage { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.5rem; padding: 0.55rem 0; }
.foyer-partage + .foyer-partage { border-top: 1px solid var(--border); }
.foyer-partage-ouvrir {
  flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 0.6rem;
  background: none; border: 0; padding: 0.2rem 0; color: var(--text); cursor: pointer; text-align: left;
}
.foyer-partage-ouvrir:hover .foyer-partage-nom { color: var(--text-strong); text-decoration: underline; }
.foyer-partage-icone { width: 1.4rem; text-align: center; }
.foyer-partage-nom { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.foyer-partage-attente {
  flex: 1 0 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem;
  padding: 0.5rem 0.7rem; border-radius: var(--radius-input); background: var(--gold-soft); font-size: 0.82rem;
}
.foyer-partage-attente span { margin-right: auto; }
.foyer-partage-manque { flex: 1 0 100%; margin: 0; padding-left: 2rem; font-size: 0.78rem; color: var(--muted); }
.foyer-partage-attente input { width: 4.5rem; }

/* La fiche de l'enfant : la durée ne s'affiche que s'il reste rattaché. */
.enfant-majorite label[hidden] { display: none !important; }

@media (max-width: 640px) {
  .foyer-chiffres, .foyer-enfant-faits { grid-template-columns: minmax(0, 1fr); }
  /* L'étiquette passe sous le titre : pastilles, nom et menu restent sur une ligne. */
  .foyer-entete-ligne { grid-template-columns: auto minmax(0, 1fr) auto; row-gap: 0.4rem; }
  .foyer-etiquette { grid-row: 2; grid-column: 2; justify-self: start; }
}
/* Le mode sous la valeur, jamais dans le libellé de colonne, qui ne passe pas à la ligne. */
.foyer-mode-partage { flex: 0 0 100%; font-size: 0.75rem; color: var(--muted); }
.foyer-enfant .foyer-note { margin: 0.75rem 0 0; }