/* Disposition de Careevia — gabarits de largeur, familles de page, en-tête de page, pied d'actions
   d'un formulaire, barre de filtres ; le voile qui floute la page sous un menu ouvert de l'en-tête. */

@layer base {
    /* Le flou porte sur toute la page sous l'en-tête, pas seulement sur le rectangle translucide du
       menu ; le voile reste inerte. */

    body::before {
        position: fixed;
        inset: 0;
        z-index: 10;
    }

    body::before {
        opacity: 0;
        background: var(--local-color-decor-scrim);
    }
    body[data-header-overlay="true"]::before {
        opacity: 1;
        -webkit-backdrop-filter: blur(var(--local-blur-overlay));
        backdrop-filter: blur(var(--local-blur-overlay));
    }

    body::before {
        content: "";
    }

    body::before {
        pointer-events: none;
        transition: opacity var(--canon-duration-reveal) ease;
    }
}

@layer utilities {
    /* Gabarit d'une page : sa largeur utile, ses marges, ses régions en colonne. */

    .l-column,
    .l-standard,
    .l-wide {
        margin: 0 auto;
        padding: var(--canon-space-8) var(--canon-space-4) var(--canon-space-16);
        display: flex;
        flex-direction: column;
        gap: var(--canon-space-6);
    }
    .l-column {
        max-width: var(--local-width-column);
    }
    .l-standard {
        max-width: var(--local-width-standard);
    }
    .l-wide {
        max-width: var(--local-width-wide);
    }
    .l-section {
        display: flex;
        flex-direction: column;
        gap: var(--canon-space-4);
    }
    .l-workflow {
        display: flex;
        flex-direction: column;
        gap: var(--canon-space-6);
    }
    .l-workflow > .workflow-back {
        margin-bottom: calc(var(--canon-space-4) * -1);
    }
    .l-detail > nav {
        margin-bottom: calc(var(--canon-space-4) * -1);
    }
}

@layer components {
    /* En-tête de page : l'action globale suit le titre et l'état ; sur espace étroit elle passe
       dessous sans changer de variante. */

    .page-header {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: var(--canon-space-4);
        flex-wrap: wrap;
    }
    .page-header-actions {
        display: flex;
        gap: var(--canon-space-2);
    }
    .form-actions {
        display: flex;
        flex-direction: row-reverse;
        justify-content: flex-start;
        gap: var(--canon-space-3);
    }
    .form-actions--block {
        flex-direction: column-reverse;
    }
    .form-actions--block > * {
        width: 100%;
    }
    .filter-bar {
        display: flex;
        gap: var(--canon-space-3);
        flex-wrap: wrap;
        align-items: flex-end;
    }
    .filter-bar > .field {
        flex: 1 1 12rem;
    }
}

@layer components {
    /* Le fil d'Ariane, dépouillé, tient dans le rail de l'en-tête : son chemin s'aligne sur la marque. */

    .trail {
        max-width: var(--local-width-wide);
        margin-inline: auto;
    }
}