*, *::before, *::after {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background-color: var(--color-bg);
    color: var(--color-text-primary);
}

.blazor-error-boundary {
    background: var(--color-danger);
    padding: 1rem 1rem 1rem 3.7rem;
    color: var(--color-text-inverse);
}

.blazor-error-boundary::after {
    content: "Une erreur est survenue.";
}

/* HomePage — horloge : traitement typographique ponctuel sans équivalent dans les enums
   TextSize (max Xxl = 2rem)/TextWeight (pas de graisse fine 200/300) du RCL. HomePage.razor
   ne rend aucun élément HTML en propre (tout est imbriqué dans des composants enfants), donc
   un HomePage.razor.css scopé n'aurait rien à quoi s'accrocher — ces classes vivent ici.

   Classe triplée dans le sélecteur — les règles scopées de HaText (.ha-text--md[b-xxx],
   .ha-text--normal[b-xxx], posées par défaut par Size/Weight) ont une spécificité de classe+attribut
   (0,2,0), identique à une classe simplement doublée (0,2,0) : à égalité de spécificité, l'ordre de
   chargement des fichiers tranche, et le bundle HomeAutomation.UI (importé par le .styles.css de la
   WebApp, chargé après app.css) l'emportait. Une classe triplée (0,3,0) gagne sans dépendre de l'ordre. */
.home-clock-time.home-clock-time.home-clock-time {
    font-size:      6rem;
    font-weight:    200;
    line-height:    1;
    letter-spacing: 0.05em;
}

.home-clock-date.home-clock-date.home-clock-date {
    font-weight:     300;
    opacity:         0.6;
    text-transform:  capitalize;
}