/* Quatre primitives de composition, sans matrice d’utilitaires. */
.dui-container { width: min(100% - 3rem, var(--dui-container)); margin-inline: auto; padding-block: var(--dui-space-7); }
.dui-stack { display: flex; flex-direction: column; align-items: flex-start; gap: var(--dui-space-4); }
.dui-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--dui-space-3); }
.dui-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: var(--dui-space-5); }
.dui-grid > * { min-width: 0; }

/* Grille explicite de 12 colonnes, mobile en premier. */
.dui-row { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:var(--dui-space-5); }
.dui-col { min-width:0; grid-column:span 12; }
.dui-col[data-span="1"] { grid-column:span 1; }
.dui-col[data-span="2"] { grid-column:span 2; }
.dui-col[data-span="3"] { grid-column:span 3; }
.dui-col[data-span="4"] { grid-column:span 4; }
.dui-col[data-span="5"] { grid-column:span 5; }
.dui-col[data-span="6"] { grid-column:span 6; }
.dui-col[data-span="7"] { grid-column:span 7; }
.dui-col[data-span="8"] { grid-column:span 8; }
.dui-col[data-span="9"] { grid-column:span 9; }
.dui-col[data-span="10"] { grid-column:span 10; }
.dui-col[data-span="11"] { grid-column:span 11; }
.dui-col[data-span="12"] { grid-column:span 12; }
@media (min-width:576px) {
.dui-col[data-sm="1"] { grid-column:span 1; }
.dui-col[data-sm="2"] { grid-column:span 2; }
.dui-col[data-sm="3"] { grid-column:span 3; }
.dui-col[data-sm="4"] { grid-column:span 4; }
.dui-col[data-sm="5"] { grid-column:span 5; }
.dui-col[data-sm="6"] { grid-column:span 6; }
.dui-col[data-sm="7"] { grid-column:span 7; }
.dui-col[data-sm="8"] { grid-column:span 8; }
.dui-col[data-sm="9"] { grid-column:span 9; }
.dui-col[data-sm="10"] { grid-column:span 10; }
.dui-col[data-sm="11"] { grid-column:span 11; }
.dui-col[data-sm="12"] { grid-column:span 12; }
}
@media (min-width:768px) {
.dui-col[data-md="1"] { grid-column:span 1; }
.dui-col[data-md="2"] { grid-column:span 2; }
.dui-col[data-md="3"] { grid-column:span 3; }
.dui-col[data-md="4"] { grid-column:span 4; }
.dui-col[data-md="5"] { grid-column:span 5; }
.dui-col[data-md="6"] { grid-column:span 6; }
.dui-col[data-md="7"] { grid-column:span 7; }
.dui-col[data-md="8"] { grid-column:span 8; }
.dui-col[data-md="9"] { grid-column:span 9; }
.dui-col[data-md="10"] { grid-column:span 10; }
.dui-col[data-md="11"] { grid-column:span 11; }
.dui-col[data-md="12"] { grid-column:span 12; }
}
@media (min-width:1024px) {
.dui-col[data-lg="1"] { grid-column:span 1; }
.dui-col[data-lg="2"] { grid-column:span 2; }
.dui-col[data-lg="3"] { grid-column:span 3; }
.dui-col[data-lg="4"] { grid-column:span 4; }
.dui-col[data-lg="5"] { grid-column:span 5; }
.dui-col[data-lg="6"] { grid-column:span 6; }
.dui-col[data-lg="7"] { grid-column:span 7; }
.dui-col[data-lg="8"] { grid-column:span 8; }
.dui-col[data-lg="9"] { grid-column:span 9; }
.dui-col[data-lg="10"] { grid-column:span 10; }
.dui-col[data-lg="11"] { grid-column:span 11; }
.dui-col[data-lg="12"] { grid-column:span 12; }
}
@media (min-width:1280px) {
.dui-col[data-xl="1"] { grid-column:span 1; }
.dui-col[data-xl="2"] { grid-column:span 2; }
.dui-col[data-xl="3"] { grid-column:span 3; }
.dui-col[data-xl="4"] { grid-column:span 4; }
.dui-col[data-xl="5"] { grid-column:span 5; }
.dui-col[data-xl="6"] { grid-column:span 6; }
.dui-col[data-xl="7"] { grid-column:span 7; }
.dui-col[data-xl="8"] { grid-column:span 8; }
.dui-col[data-xl="9"] { grid-column:span 9; }
.dui-col[data-xl="10"] { grid-column:span 10; }
.dui-col[data-xl="11"] { grid-column:span 11; }
.dui-col[data-xl="12"] { grid-column:span 12; }
}