/* Dev TTFL — utilities.css */
@layer utilities {

    /* Texte masqué visuellement */
    .sr-only,
    .visually-hidden {
        position: absolute !important;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
        border: 0;
    }

    /* Grilles & gaps rapides */
    .grid {
        display: grid;
        gap: var(--space-4);
    }

    .grid--2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .grid--3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    /* Spacing rapides */
    .mt-2 {
        margin-top: var(--space-2);
    }

    .mt-3 {
        margin-top: var(--space-3);
    }

    .mt-4 {
        margin-top: var(--space-4);
    }

    .mt-6 {
        margin-top: var(--space-6);
    }

    .mb-2 {
        margin-bottom: var(--space-2);
    }

    .mb-3 {
        margin-bottom: var(--space-3);
    }

    .mb-4 {
        margin-bottom: var(--space-4);
    }

    .mb-6 {
        margin-bottom: var(--space-6);
    }

    /* Boutons & items interactifs : cibles tactiles minimales */
    .touch-target {
        min-height: 44px;
    }

    /* Ombres & rayons */
    .shadow-sm {
        box-shadow: var(--shadow-sm);
    }

    .shadow-md {
        box-shadow: var(--shadow-md);
    }

    .shadow-lg {
        box-shadow: var(--shadow-lg);
    }

    .rounded {
        border-radius: var(--radius);
    }

    .rounded-lg {
        border-radius: var(--radius-lg);
    }
}