/* Portail famille : pensé d'abord pour un téléphone. S'appuie sur commun.css. */
body { font-size: 17px; }
.famille { max-width: 640px; margin: 0 auto; padding: 14px 16px 60px; }
.barre-haut { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 4px 0 14px; }
.barre-haut .titre { font-size: 20px; font-weight: 700; }
.barre-haut nav { display: flex; gap: 8px; align-items: center; }
.barre-haut a { text-decoration: none; }

.etat { border-left: 10px solid var(--vert); }
.etat.calme { border-left-color: var(--trait-fort); }
.etat.pause { border-left-color: var(--ambre); }
.etat.indisponible, .etat.pas_d_info { border-left-color: var(--rouge); }
.etat .grand { font-size: 23px; font-weight: 700; line-height: 1.25; margin-bottom: 4px; }

.alerte { border: 2px solid var(--rouge); background: var(--rouge-doux); }
.alerte.prise { border-color: var(--bleu); background: var(--bleu-doux); }
.alerte .grand { font-size: 19px; font-weight: 700; }
.alerte form .ligne button { flex: 1 1 140px; min-height: 48px; }
.appel { border: 2px dashed var(--bleu); background: var(--bleu-doux); }

.journee { list-style: none; margin: 0; padding: 0; }
.journee li { display: flex; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--trait); }
.journee li:last-child { border-bottom: none; }
.journee .h { font-weight: 700; min-width: 64px; font-variant-numeric: tabular-nums; }

.transparence { font-size: 14px; color: var(--doux); text-align: center; margin-top: 24px; }
.code { font-family: var(--mono); font-size: 20px; background: var(--gris-doux); padding: 10px 14px; border-radius: 8px; display: inline-block; }