/* ============================================================================
   LogiFlotte — classes utilitaires (alignement, texte, visibilité).
   Usage ponctuel : pour tout le reste, composants dédiés.
   ============================================================================ */

/* -- Texte -- */
.text-center   { text-align: center; }
.text-right    { text-align: right; }
.text-left     { text-align: left; }

.text--danger  { color: var(--color-danger) !important; }
.text--success { color: var(--color-success) !important; }
.text--warning { color: var(--color-warning) !important; }
.text--info    { color: var(--color-info) !important; }

.muted {
    color: var(--color-text-muted);
    font-size: 0.9em;
}

/* -- Affichage conditionnel -- */
.hidden        { display: none !important; }
.d-block       { display: block; }

@media (max-width: 768px) {
    .hidden-mobile { display: none !important; }
}
@media (min-width: 769px) {
    .hidden-desktop { display: none !important; }
}

/* -- Marges génériques (échelle tokenisée) -- */
.mt-0 { margin-top: 0 !important; }
.mt-2 { margin-top: var(--space-2); }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mb-0 { margin-bottom: 0 !important; }
.mb-2 { margin-bottom: var(--space-2); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }

/* -- Description list en grille 2 colonnes, utilisée dans les détails -- */
.dl-grid {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: var(--space-2) var(--space-4);
    font-size: var(--font-size-base);
}
.dl-grid dt {
    color: var(--color-text-muted);
    font-weight: 500;
}
.dl-grid dd {
    color: var(--color-text);
    margin: 0;
}

/* -- Grilles d'attributs responsives --
   Correction Phase 6 : 2 colonnes sur desktop (1fr 1fr) avec auto-flow dense
   pour combler les trous quand un élément prend toute la largeur. */
.details-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-flow: dense;
    gap: var(--space-4);
}
.details-grid .span-2 { grid-column: 1 / -1; }

@media (max-width: 768px) {
    .details-grid { grid-template-columns: 1fr; }
}

/* -- Petite barre d'outils au-dessus d'un tableau -- */
.toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}
.toolbar-info {
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}