/*######################################################################################################## 
Classes utilitaires
#########################################################################################################*/

/* Taille de texte fluide */
.atb-text-xs {
    font-size: clamp(0.75rem, calc(0.653rem + 0.455vw), 0.875rem);
}

.atb-title-h2:where(h1, h2, h3, h4, h5, h6),
.atb-title-h2 :where(h1, h2, h3, h4, h5, h6) {
    font-size: var(--atb-h2-clamp);
}

.atb-title-h3:where(h1, h2, h3, h4, h5, h6),
.atb-title-h3 :where(h1, h2, h3, h4, h5, h6) {
    font-size: var(--atb-h3-clamp);
}

/* Famille du texte */
.atb-font-heading {
    font-family: var(--atb-font-heading);
}

.atb-font-body {
    font-family: var(--atb-font-body);
}

.atb-font-condensed {
    font-family: var(--atb-font-condensed);
}

/* weight du texte */
.atb-font-thin {
    font-weight: 100;
}

.atb-font-extralight {
    font-weight: 200;
}

.atb-font-light {
    font-weight: 300;
}

.atb-font-normal {
    font-weight: 400;
}

.atb-font-medium {
    font-weight: 500;
}

.atb-font-semibold {
    font-weight: 600;
}

.atb-font-bold {
    font-weight: 700;
}

.atb-title-thin:where(h1, h2, h3, h4, h5, h6),
.atb-title-thin :where(h1, h2, h3, h4, h5, h6) {
    font-weight: 100;
}

.atb-title-extralight:where(h1, h2, h3, h4, h5, h6),
.atb-title-extralight :where(h1, h2, h3, h4, h5, h6) {
    font-weight: 200;
}

.atb-title-light:where(h1, h2, h3, h4, h5, h6),
.atb-title-light :where(h1, h2, h3, h4, h5, h6) {
    font-weight: 300;
}

.atb-title-normal:where(h1, h2, h3, h4, h5, h6),
.atb-title-normal :where(h1, h2, h3, h4, h5, h6) {
    font-weight: 400;
}

.atb-title-medium:where(h1, h2, h3, h4, h5, h6),
.atb-title-medium :where(h1, h2, h3, h4, h5, h6) {
    font-weight: 500;
}

.atb-title-semibold:where(h1, h2, h3, h4, h5, h6),
.atb-title-semibold :where(h1, h2, h3, h4, h5, h6) {
    font-weight: 600;
}

.atb-title-bold:where(h1, h2, h3, h4, h5, h6),
.atb-title-bold :where(h1, h2, h3, h4, h5, h6) {
    font-weight: 700;
}


/* Alignement du texte */
.atb-text-center {
    text-align: center;
}

.atb-text-center-xs {
    @media (max-width: 576px) {
        text-align: center;
    }
}

.atb-text-center-sm {
    @media (max-width: 768px) {
        text-align: center;
    }
}

.atb-text-center-md {
    @media (max-width: 992px) {
        text-align: center;
    }
}

.atb-text-center-lg {
    @media (max-width: 1200px) {
        text-align: center;
    }
}

.atb-text-center-xl {
    @media (max-width: 1400px) {
        text-align: center;
    }
}

.atb-text-left {
    text-align: left;
}

.atb-text-left-xs {
    @media (max-width: 576px) {
        text-align: left;
    }
}

.atb-text-left-sm {
    @media (max-width: 768px) {
        text-align: left;
    }
}

.atb-text-left-md {
    @media (max-width: 992px) {
        text-align: left;
    }
}

.atb-text-left-lg {
    @media (max-width: 1200px) {
        text-align: left;
    }
}

.atb-text-left-xl {
    @media (max-width: 1400px) {
        text-align: left;
    }
}

.atb-text-right {
    text-align: right;
}

.atb-text-right-xs {
    @media (max-width: 576px) {
        text-align: right;
    }
}

.atb-text-right-sm {
    @media (max-width: 768px) {
        text-align: right;
    }
}

.atb-text-right-md {
    @media (max-width: 992px) {
        text-align: right;
    }
}

.atb-text-right-lg {
    @media (max-width: 1200px) {
        text-align: right;
    }
}

.atb-text-right-xl {
    @media (max-width: 1400px) {
        text-align: right;
    }
}




/*########################################################################################################
Couleurs — palette complète (aligné sur les variables --atb-*)
#########################################################################################################*/


/* Texte */
.atb-text-primary {
    color: var(--atb-primary);
}

.atb-text-secondary {
    color: var(--atb-secondary);
}

.atb-text-accent {
    color: var(--atb-accent);
}

.atb-text-info {
    color: var(--atb-info);
}

.atb-text-warning {
    color: var(--atb-warning);
}

.atb-text-danger {
    color: var(--atb-danger);
}

.atb-text-neutral {
    color: var(--atb-neutral);
}

.atb-text-light {
    color: var(--atb-light);
}

.atb-text-grey {
    color: var(--atb-grey);
}

/* Fond */
.atb-bg-primary {
    background-color: var(--atb-primary);
}

.atb-bg-secondary {
    background-color: var(--atb-secondary);
}

.atb-bg-accent {
    background-color: var(--atb-accent);
}

.atb-bg-info {
    background-color: var(--atb-info);
}

.atb-bg-warning {
    background-color: var(--atb-warning);
}

.atb-bg-danger {
    background-color: var(--atb-danger);
}

.atb-bg-neutral {
    background-color: var(--atb-neutral);
}

.atb-bg-light {
    background-color: var(--atb-light);
}

.atb-bg-grey {
    background-color: var(--atb-grey);
}

/* Texte atténué (~60%) */
.atb-text-primary-soft {
    color: color-mix(in srgb, var(--atb-primary) 60%, transparent);
}

.atb-text-secondary-soft {
    color: color-mix(in srgb, var(--atb-secondary) 60%, transparent);
}

.atb-text-accent-soft {
    color: color-mix(in srgb, var(--atb-accent) 60%, transparent);
}

.atb-text-info-soft {
    color: color-mix(in srgb, var(--atb-info) 60%, transparent);
}

.atb-text-warning-soft {
    color: color-mix(in srgb, var(--atb-warning) 60%, transparent);
}

.atb-text-danger-soft {
    color: color-mix(in srgb, var(--atb-danger) 60%, transparent);
}

.atb-text-neutral-soft {
    color: color-mix(in srgb, var(--atb-neutral) 60%, transparent);
}

.atb-text-light-soft {
    color: color-mix(in srgb, var(--atb-light) 60%, transparent);
}

.atb-text-grey-soft {
    color: color-mix(in srgb, var(--atb-grey) 60%, transparent);
}

/* Fond léger (~8%) */
.atb-bg-primary-soft {
    background-color: color-mix(in srgb, var(--atb-primary) 8%, transparent);
}

.atb-bg-secondary-soft {
    background-color: color-mix(in srgb, var(--atb-secondary) 8%, transparent);
}

.atb-bg-accent-soft {
    background-color: color-mix(in srgb, var(--atb-accent) 8%, transparent);
}

.atb-bg-info-soft {
    background-color: color-mix(in srgb, var(--atb-info) 8%, transparent);
}

.atb-bg-warning-soft {
    background-color: color-mix(in srgb, var(--atb-warning) 8%, transparent);
}

.atb-bg-danger-soft {
    background-color: color-mix(in srgb, var(--atb-danger) 8%, transparent);
}

.atb-bg-neutral-soft {
    background-color: color-mix(in srgb, var(--atb-neutral) 8%, transparent);
}

.atb-bg-light-soft {
    background-color: color-mix(in srgb, var(--atb-light) 8%, transparent);
}

.atb-bg-grey-soft {
    background-color: color-mix(in srgb, var(--atb-grey) 8%, transparent);
}

/* Alias de compatibilité (ancien nommage) */
.atb-text-blue {
    color: var(--atb-primary);
}

.atb-bg-blue {
    background-color: var(--atb-primary);
}

.atb-text-dark {
    color: var(--atb-secondary);
}

.atb-bg-dark {
    background-color: var(--atb-secondary);
}


/*########################################################################################################
P2 — Utilitaires (espacement, layout, texte, dimensions, effets)
#########################################################################################################*/

/*========================= Espacement — gap =========================*/
.atb-gap-0 {
    gap: var(--atb-space-0);
}

.atb-gap-1 {
    gap: var(--atb-space-1);
}

.atb-gap-2 {
    gap: var(--atb-space-2);
}

.atb-gap-3 {
    gap: var(--atb-space-3);
}

.atb-gap-4 {
    gap: var(--atb-space-4);
}

.atb-gap-5 {
    gap: var(--atb-space-5);
}

.atb-gap-6 {
    gap: var(--atb-space-6);
}

.atb-gap-8 {
    gap: var(--atb-space-8);
}

.atb-gap-10 {
    gap: var(--atb-space-10);
}

.atb-gap-12 {
    gap: var(--atb-space-12);
}

.atb-gap-16 {
    gap: var(--atb-space-16);
}

/*========================= Espacement — padding =========================*/
.atb-p-0 {
    padding: var(--atb-space-0);
}

.atb-p-1 {
    padding: var(--atb-space-1);
}

.atb-p-2 {
    padding: var(--atb-space-2);
}

.atb-p-3 {
    padding: var(--atb-space-3);
}

.atb-p-4 {
    padding: var(--atb-space-4);
}

.atb-p-5 {
    padding: var(--atb-space-5);
}

.atb-p-6 {
    padding: var(--atb-space-6);
}

.atb-p-8 {
    padding: var(--atb-space-8);
}

.atb-p-10 {
    padding: var(--atb-space-10);
}

.atb-p-12 {
    padding: var(--atb-space-12);
}

.atb-p-16 {
    padding: var(--atb-space-16);
}

.atb-px-0 {
    padding-inline: var(--atb-space-0);
}

.atb-px-1 {
    padding-inline: var(--atb-space-1);
}

.atb-px-2 {
    padding-inline: var(--atb-space-2);
}

.atb-px-3 {
    padding-inline: var(--atb-space-3);
}

.atb-px-4 {
    padding-inline: var(--atb-space-4);
}

.atb-px-5 {
    padding-inline: var(--atb-space-5);
}

.atb-px-6 {
    padding-inline: var(--atb-space-6);
}

.atb-px-8 {
    padding-inline: var(--atb-space-8);
}

.atb-px-10 {
    padding-inline: var(--atb-space-10);
}

.atb-px-12 {
    padding-inline: var(--atb-space-12);
}

.atb-px-16 {
    padding-inline: var(--atb-space-16);
}

.atb-py-0 {
    padding-block: var(--atb-space-0);
}

.atb-py-1 {
    padding-block: var(--atb-space-1);
}

.atb-py-2 {
    padding-block: var(--atb-space-2);
}

.atb-py-3 {
    padding-block: var(--atb-space-3);
}

.atb-py-4 {
    padding-block: var(--atb-space-4);
}

.atb-py-5 {
    padding-block: var(--atb-space-5);
}

.atb-py-6 {
    padding-block: var(--atb-space-6);
}

.atb-py-8 {
    padding-block: var(--atb-space-8);
}

.atb-py-10 {
    padding-block: var(--atb-space-10);
}

.atb-py-12 {
    padding-block: var(--atb-space-12);
}

.atb-py-16 {
    padding-block: var(--atb-space-16);
}

.atb-pt-0 {
    padding-top: var(--atb-space-0);
}

.atb-pt-1 {
    padding-top: var(--atb-space-1);
}

.atb-pt-2 {
    padding-top: var(--atb-space-2);
}

.atb-pt-3 {
    padding-top: var(--atb-space-3);
}

.atb-pt-4 {
    padding-top: var(--atb-space-4);
}

.atb-pt-5 {
    padding-top: var(--atb-space-5);
}

.atb-pt-6 {
    padding-top: var(--atb-space-6);
}

.atb-pt-8 {
    padding-top: var(--atb-space-8);
}

.atb-pt-10 {
    padding-top: var(--atb-space-10);
}

.atb-pt-12 {
    padding-top: var(--atb-space-12);
}

.atb-pt-16 {
    padding-top: var(--atb-space-16);
}

.atb-pr-0 {
    padding-right: var(--atb-space-0);
}

.atb-pr-1 {
    padding-right: var(--atb-space-1);
}

.atb-pr-2 {
    padding-right: var(--atb-space-2);
}

.atb-pr-3 {
    padding-right: var(--atb-space-3);
}

.atb-pr-4 {
    padding-right: var(--atb-space-4);
}

.atb-pr-5 {
    padding-right: var(--atb-space-5);
}

.atb-pr-6 {
    padding-right: var(--atb-space-6);
}

.atb-pr-8 {
    padding-right: var(--atb-space-8);
}

.atb-pr-10 {
    padding-right: var(--atb-space-10);
}

.atb-pr-12 {
    padding-right: var(--atb-space-12);
}

.atb-pr-16 {
    padding-right: var(--atb-space-16);
}

.atb-pb-0 {
    padding-bottom: var(--atb-space-0);
}

.atb-pb-1 {
    padding-bottom: var(--atb-space-1);
}

.atb-pb-2 {
    padding-bottom: var(--atb-space-2);
}

.atb-pb-3 {
    padding-bottom: var(--atb-space-3);
}

.atb-pb-4 {
    padding-bottom: var(--atb-space-4);
}

.atb-pb-5 {
    padding-bottom: var(--atb-space-5);
}

.atb-pb-6 {
    padding-bottom: var(--atb-space-6);
}

.atb-pb-8 {
    padding-bottom: var(--atb-space-8);
}

.atb-pb-10 {
    padding-bottom: var(--atb-space-10);
}

.atb-pb-12 {
    padding-bottom: var(--atb-space-12);
}

.atb-pb-16 {
    padding-bottom: var(--atb-space-16);
}

.atb-pl-0 {
    padding-left: var(--atb-space-0);
}

.atb-pl-1 {
    padding-left: var(--atb-space-1);
}

.atb-pl-2 {
    padding-left: var(--atb-space-2);
}

.atb-pl-3 {
    padding-left: var(--atb-space-3);
}

.atb-pl-4 {
    padding-left: var(--atb-space-4);
}

.atb-pl-5 {
    padding-left: var(--atb-space-5);
}

.atb-pl-6 {
    padding-left: var(--atb-space-6);
}

.atb-pl-8 {
    padding-left: var(--atb-space-8);
}

.atb-pl-10 {
    padding-left: var(--atb-space-10);
}

.atb-pl-12 {
    padding-left: var(--atb-space-12);
}

.atb-pl-16 {
    padding-left: var(--atb-space-16);
}

/*========================= Espacement — margin (+ auto) =========================*/
.atb-m-0 {
    margin: var(--atb-space-0);
}

.atb-m-1 {
    margin: var(--atb-space-1);
}

.atb-m-2 {
    margin: var(--atb-space-2);
}

.atb-m-3 {
    margin: var(--atb-space-3);
}

.atb-m-4 {
    margin: var(--atb-space-4);
}

.atb-m-5 {
    margin: var(--atb-space-5);
}

.atb-m-6 {
    margin: var(--atb-space-6);
}

.atb-m-8 {
    margin: var(--atb-space-8);
}

.atb-m-10 {
    margin: var(--atb-space-10);
}

.atb-m-12 {
    margin: var(--atb-space-12);
}

.atb-m-16 {
    margin: var(--atb-space-16);
}

.atb-m-auto {
    margin: auto;
}

.atb-mx-0 {
    margin-inline: var(--atb-space-0);
}

.atb-mx-1 {
    margin-inline: var(--atb-space-1);
}

.atb-mx-2 {
    margin-inline: var(--atb-space-2);
}

.atb-mx-3 {
    margin-inline: var(--atb-space-3);
}

.atb-mx-4 {
    margin-inline: var(--atb-space-4);
}

.atb-mx-5 {
    margin-inline: var(--atb-space-5);
}

.atb-mx-6 {
    margin-inline: var(--atb-space-6);
}

.atb-mx-8 {
    margin-inline: var(--atb-space-8);
}

.atb-mx-10 {
    margin-inline: var(--atb-space-10);
}

.atb-mx-12 {
    margin-inline: var(--atb-space-12);
}

.atb-mx-16 {
    margin-inline: var(--atb-space-16);
}

.atb-mx-auto {
    margin-inline: auto;
}

.atb-my-0 {
    margin-block: var(--atb-space-0);
}

.atb-my-1 {
    margin-block: var(--atb-space-1);
}

.atb-my-2 {
    margin-block: var(--atb-space-2);
}

.atb-my-3 {
    margin-block: var(--atb-space-3);
}

.atb-my-4 {
    margin-block: var(--atb-space-4);
}

.atb-my-5 {
    margin-block: var(--atb-space-5);
}

.atb-my-6 {
    margin-block: var(--atb-space-6);
}

.atb-my-8 {
    margin-block: var(--atb-space-8);
}

.atb-my-10 {
    margin-block: var(--atb-space-10);
}

.atb-my-12 {
    margin-block: var(--atb-space-12);
}

.atb-my-16 {
    margin-block: var(--atb-space-16);
}

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

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

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

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

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

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

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

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

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

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

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

.atb-mr-0 {
    margin-right: var(--atb-space-0);
}

.atb-mr-1 {
    margin-right: var(--atb-space-1);
}

.atb-mr-2 {
    margin-right: var(--atb-space-2);
}

.atb-mr-3 {
    margin-right: var(--atb-space-3);
}

.atb-mr-4 {
    margin-right: var(--atb-space-4);
}

.atb-mr-5 {
    margin-right: var(--atb-space-5);
}

.atb-mr-6 {
    margin-right: var(--atb-space-6);
}

.atb-mr-8 {
    margin-right: var(--atb-space-8);
}

.atb-mr-10 {
    margin-right: var(--atb-space-10);
}

.atb-mr-12 {
    margin-right: var(--atb-space-12);
}

.atb-mr-16 {
    margin-right: var(--atb-space-16);
}

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

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

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

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

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

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

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

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

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

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

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

.atb-ml-0 {
    margin-left: var(--atb-space-0);
}

.atb-ml-1 {
    margin-left: var(--atb-space-1);
}

.atb-ml-2 {
    margin-left: var(--atb-space-2);
}

.atb-ml-3 {
    margin-left: var(--atb-space-3);
}

.atb-ml-4 {
    margin-left: var(--atb-space-4);
}

.atb-ml-5 {
    margin-left: var(--atb-space-5);
}

.atb-ml-6 {
    margin-left: var(--atb-space-6);
}

.atb-ml-8 {
    margin-left: var(--atb-space-8);
}

.atb-ml-10 {
    margin-left: var(--atb-space-10);
}

.atb-ml-12 {
    margin-left: var(--atb-space-12);
}

.atb-ml-16 {
    margin-left: var(--atb-space-16);
}

/*========================= Affichage & Flex/Grid =========================*/
.atb-flex {
    display: flex;
}

.atb-inline-flex {
    display: inline-flex;
}

.atb-grid {
    display: grid;
}

.atb-block {
    display: block;
}

.atb-inline-block {
    display: inline-block;
}

.atb-hidden {
    display: none;
}

.atb-flex-row {
    flex-direction: row;
}

.atb-flex-col {
    flex-direction: column;
}

.atb-flex-wrap {
    flex-wrap: wrap;
}

.atb-flex-nowrap {
    flex-wrap: nowrap;
}

.atb-grow {
    flex-grow: 1;
}

.atb-grow-0 {
    flex-grow: 0;
}

.atb-shrink-0 {
    flex-shrink: 0;
}

.atb-items-start {
    align-items: flex-start;
}

.atb-items-center {
    align-items: center;
}

.atb-items-end {
    align-items: flex-end;
}

.atb-items-stretch {
    align-items: stretch;
}

.atb-items-baseline {
    align-items: baseline;
}

.atb-justify-start {
    justify-content: flex-start;
}

.atb-justify-center {
    justify-content: center;
}

.atb-justify-end {
    justify-content: flex-end;
}

.atb-justify-between {
    justify-content: space-between;
}

.atb-justify-around {
    justify-content: space-around;
}

.atb-justify-evenly {
    justify-content: space-evenly;
}

.atb-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.atb-flex-item {
    flex: 1 1 0%;
}

.atb-flex-col {
    flex: var(--atb-flex-col-weight, 6) 1 calc(clamp(var(--atb-flex-col-min-width, 250px), calc((100% / 12) * var(--atb-flex-col-weight, 6)), 100%) - var(--atb-flex-col-gap, 0rem));
    min-width: min(100%, var(--atb-flex-col-min-width, 250px));
    max-width: 100%;
    box-sizing: border-box;
}

.atb-grid-cols-1 {
    grid-template-columns: repeat(1, 1fr);
}

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

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

.atb-grid-cols-4 {
    grid-template-columns: repeat(4, 1fr);
}

.atb-grid-cols-5 {
    grid-template-columns: repeat(5, 1fr);
}

.atb-grid-cols-6 {
    grid-template-columns: repeat(6, 1fr);
}

.atb-grid-auto {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

/*========================= Dimensions =========================*/
.atb-w-full {
    width: 100%;
}

.atb-w-auto {
    width: auto;
}

.atb-w-fit {
    width: fit-content;
}

.atb-h-full {
    height: 100%;
}

.atb-h-auto {
    height: auto;
}

.atb-h-fit {
    height: fit-content;
}

.atb-max-w-full {
    max-width: 100%;
}

.atb-min-w-0 {
    min-width: 0;
}

.atb-aspect-square {
    aspect-ratio: 1 / 1;
}

.atb-aspect-video {
    aspect-ratio: 16 / 9;
}

/*========================= Texte — taille & interligne =========================*/
.atb-text-xs {
    font-size: var(--atb-text-xs);
}

.atb-text-sm {
    font-size: var(--atb-text-sm);
}

.atb-text-base {
    font-size: var(--atb-text-base);
}

.atb-text-lg {
    font-size: var(--atb-text-lg);
}

.atb-text-xl {
    font-size: var(--atb-text-xl);
}

.atb-text-2xl {
    font-size: var(--atb-text-2xl);
}

.atb-text-3xl {
    font-size: var(--atb-text-3xl);
}

.atb-leading-none {
    line-height: var(--atb-leading-none);
}

.atb-leading-tight {
    line-height: var(--atb-leading-tight);
}

.atb-leading-snug {
    line-height: var(--atb-leading-snug);
}

.atb-leading-normal {
    line-height: var(--atb-leading-normal);
}

.atb-leading-relaxed {
    line-height: var(--atb-leading-relaxed);
}

/*========================= Texte — style =========================*/
.atb-uppercase {
    text-transform: uppercase;
}

.atb-lowercase {
    text-transform: lowercase;
}

.atb-capitalize {
    text-transform: capitalize;
}

.atb-normal-case {
    text-transform: none;
}

.atb-italic {
    font-style: italic;
}

.atb-underline {
    text-decoration: underline;
}

.atb-no-underline {
    text-decoration: none;
}

.atb-text-balance {
    text-wrap: balance;
}

.atb-text-pretty {
    text-wrap: pretty;
}

.atb-text-nowrap {
    white-space: nowrap;
}

.atb-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.atb-line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.atb-line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.atb-line-clamp-4 {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/*========================= Rayons / bordure / ombres / opacité =========================*/
.atb-rounded-sm {
    border-radius: var(--atb-radius-sm);
}

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

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

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

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

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

.atb-border {
    border: 1px solid var(--atb-border-color);
}

.atb-border-2 {
    border: 2px solid var(--atb-border-color);
}

.atb-shadow-sm {
    box-shadow: var(--atb-shadow-sm);
}

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

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

.atb-opacity-0 {
    opacity: 0;
}

.atb-opacity-25 {
    opacity: 0.25;
}

.atb-opacity-50 {
    opacity: 0.5;
}

.atb-opacity-75 {
    opacity: 0.75;
}

.atb-opacity-100 {
    opacity: 1;
}

/*========================= Visibilité responsive (≤ breakpoint) =========================*/
.atb-hidden-xs {
    @media (max-width: 576px) {
        display: none;
    }
}

.atb-hidden-sm {
    @media (max-width: 768px) {
        display: none;
    }
}

.atb-hidden-md {
    @media (max-width: 992px) {
        display: none;
    }
}

.atb-hidden-lg {
    @media (max-width: 1200px) {
        display: none;
    }
}

.atb-hidden-xl {
    @media (max-width: 1400px) {
        display: none;
    }
}

/*========================= Réinitialisation de liste =========================*/
.atb-reset-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0;
}

/*========================= Unité réactive (fluidité) =========================*/
/* Choisit à quoi la typo fluide réagit ; hérite vers les descendants */
.atb-react-viewport {
    --atb-base-cqi: 1vw;
}

.atb-react-section {
    --atb-base-cqi: var(--cqi-section, 1vw);
}

.atb-react-row {
    --atb-base-cqi: var(--cqi-row, 1vw);
}

.atb-react-column {
    --atb-base-cqi: var(--cqi-column, 1vw);
}

/*========================= Texte fluide =========================*/
.atb-text-fluid-xs {
    font-size: var(--atb-fluid-xs);
}

.atb-text-fluid-sm {
    font-size: var(--atb-fluid-sm);
}

.atb-text-fluid-base {
    font-size: var(--atb-fluid-base);
}

.atb-text-fluid-lg {
    font-size: var(--atb-fluid-lg);
}

.atb-text-fluid-xl {
    font-size: var(--atb-fluid-xl);
}

.atb-text-fluid-h3 {
    font-size: var(--atb-fluid-h3);
}

.atb-text-fluid-h2 {
    font-size: var(--atb-fluid-h2);
}

.atb-text-fluid-h1 {
    font-size: var(--atb-fluid-h1);
}


/*########################################################################################################
Responsive curaté — variantes par écran (viewport) et par conteneur (@container nommé)
  viewport : .atb-<util>-<bp>          (max-width écran)
  conteneur: .atb-<util>@<col|row|sec>-<bp>  (max-width du conteneur uni-column/row/section)
#########################################################################################################*/

/* ---- Viewport (max-width écran) ---- */
@media (max-width: 576px) {
    .atb-flex-col-xs {
        flex-direction: column;
    }

    .atb-flex-row-xs {
        flex-direction: row;
    }

    .atb-grid-cols-1-xs {
        grid-template-columns: repeat(1, 1fr);
    }

    .atb-grid-cols-2-xs {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .atb-flex-col-sm {
        flex-direction: column;
    }

    .atb-flex-row-sm {
        flex-direction: row;
    }

    .atb-grid-cols-1-sm {
        grid-template-columns: repeat(1, 1fr);
    }

    .atb-grid-cols-2-sm {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 992px) {
    .atb-flex-col-md {
        flex-direction: column;
    }

    .atb-flex-row-md {
        flex-direction: row;
    }

    .atb-grid-cols-1-md {
        grid-template-columns: repeat(1, 1fr);
    }

    .atb-grid-cols-2-md {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 1200px) {
    .atb-flex-col-lg {
        flex-direction: column;
    }

    .atb-flex-row-lg {
        flex-direction: row;
    }

    .atb-grid-cols-1-lg {
        grid-template-columns: repeat(1, 1fr);
    }

    .atb-grid-cols-2-lg {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 1400px) {
    .atb-flex-col-xl {
        flex-direction: column;
    }

    .atb-flex-row-xl {
        flex-direction: row;
    }

    .atb-grid-cols-1-xl {
        grid-template-columns: repeat(1, 1fr);
    }

    .atb-grid-cols-2-xl {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ---- Conteneur (max-width du conteneur nommé) ---- */
@container uni-column (max-width: 480px) {
    .atb-flex-col\@col-sm {
        flex-direction: column;
    }

    .atb-flex-row\@col-sm {
        flex-direction: row;
    }

    .atb-grid-cols-1\@col-sm {
        grid-template-columns: repeat(1, 1fr);
    }

    .atb-grid-cols-2\@col-sm {
        grid-template-columns: repeat(2, 1fr);
    }

    .atb-hidden\@col-sm {
        display: none;
    }

    .atb-text-center\@col-sm {
        text-align: center;
    }
}

@container uni-column (max-width: 768px) {
    .atb-flex-col\@col-md {
        flex-direction: column;
    }

    .atb-flex-row\@col-md {
        flex-direction: row;
    }

    .atb-grid-cols-1\@col-md {
        grid-template-columns: repeat(1, 1fr);
    }

    .atb-grid-cols-2\@col-md {
        grid-template-columns: repeat(2, 1fr);
    }

    .atb-hidden\@col-md {
        display: none;
    }

    .atb-text-center\@col-md {
        text-align: center;
    }
}

@container uni-row (max-width: 480px) {
    .atb-flex-col\@row-sm {
        flex-direction: column;
    }

    .atb-flex-row\@row-sm {
        flex-direction: row;
    }

    .atb-grid-cols-1\@row-sm {
        grid-template-columns: repeat(1, 1fr);
    }

    .atb-grid-cols-2\@row-sm {
        grid-template-columns: repeat(2, 1fr);
    }

    .atb-hidden\@row-sm {
        display: none;
    }

    .atb-text-center\@row-sm {
        text-align: center;
    }
}

@container uni-row (max-width: 768px) {
    .atb-flex-col\@row-md {
        flex-direction: column;
    }

    .atb-flex-row\@row-md {
        flex-direction: row;
    }

    .atb-grid-cols-1\@row-md {
        grid-template-columns: repeat(1, 1fr);
    }

    .atb-grid-cols-2\@row-md {
        grid-template-columns: repeat(2, 1fr);
    }

    .atb-hidden\@row-md {
        display: none;
    }

    .atb-text-center\@row-md {
        text-align: center;
    }
}

@container uni-section (max-width: 480px) {
    .atb-flex-col\@sec-sm {
        flex-direction: column;
    }

    .atb-flex-row\@sec-sm {
        flex-direction: row;
    }

    .atb-grid-cols-1\@sec-sm {
        grid-template-columns: repeat(1, 1fr);
    }

    .atb-grid-cols-2\@sec-sm {
        grid-template-columns: repeat(2, 1fr);
    }

    .atb-hidden\@sec-sm {
        display: none;
    }

    .atb-text-center\@sec-sm {
        text-align: center;
    }
}

@container uni-section (max-width: 768px) {
    .atb-flex-col\@sec-md {
        flex-direction: column;
    }

    .atb-flex-row\@sec-md {
        flex-direction: row;
    }

    .atb-grid-cols-1\@sec-md {
        grid-template-columns: repeat(1, 1fr);
    }

    .atb-grid-cols-2\@sec-md {
        grid-template-columns: repeat(2, 1fr);
    }

    .atb-hidden\@sec-md {
        display: none;
    }

    .atb-text-center\@sec-md {
        text-align: center;
    }
}