/* Dispositions de Kernevia (_direction/FD3_applications/kernevia/design/structures-de-page.md).
   l-reading : la colonne de lecture de <main>, centrée, à la marge latérale de la page, dont la prose
   se borne à la mesure de lecture ; une figure, un tableau ou une formule occupent la colonne. Sa
   largeur est explicite : centrée par ses marges dans le <body> en colonne flexible, elle prendrait
   sinon celle de son contenu le plus large, une formule, et la page déborderait sur un écran étroit.
   l-workspace : la même colonne, pour ce qu'un compte consulte ou compose. l-form : une colonne étroite,
   pour un formulaire seul. */

@layer utilities {
    .l-reading,
    .l-workspace,
    .l-form {
        flex: 1;
        width: 100%;
        max-width: calc(var(--local-width-content) + 2 * var(--canon-space-edge));
        margin: 0 auto;
        padding: var(--canon-space-10) var(--canon-space-edge);
    }
    .l-form {
        max-width: calc(var(--local-width-form) + 2 * var(--canon-space-edge));
    }
    .l-reading p,
    .l-reading li {
        max-width: var(--canon-width-reading);
    }
    .l-workspace > * + *,
    .l-form > * + * {
        margin-top: var(--canon-space-5);
    }
}