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

/* Tailles de titres (la gamme de texte est plus bas : « Texte — taille & interligne ») */
.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 =========================
   Échelle Tailwind (text-xs … text-9xl), renommée atb-text-*. Chaque taille pose
   aussi l'interligne Tailwind ; .atb-leading-* (déclarés juste après, donc
   prioritaires à spécificité égale) permettent de le reprendre. */
.atb-text-xs {
    font-size: var(--atb-text-xs);
    line-height: var(--atb-text-xs-lh);
}

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

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

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

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

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

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

.atb-text-4xl {
    font-size: var(--atb-text-4xl);
    line-height: var(--atb-text-4xl-lh);
}

.atb-text-5xl {
    font-size: var(--atb-text-5xl);
    line-height: var(--atb-text-5xl-lh);
}

.atb-text-6xl {
    font-size: var(--atb-text-6xl);
    line-height: var(--atb-text-6xl-lh);
}

.atb-text-7xl {
    font-size: var(--atb-text-7xl);
    line-height: var(--atb-text-7xl-lh);
}

.atb-text-8xl {
    font-size: var(--atb-text-8xl);
    line-height: var(--atb-text-8xl-lh);
}

.atb-text-9xl {
    font-size: var(--atb-text-9xl);
    line-height: var(--atb-text-9xl-lh);
}

.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;
    }
}

/*########################################################################################################
Ajouts Tailwind (lots 1 & 2, 31/08/2026) — échelle Tailwind renommée atb-*, valeurs en variables
  Rappel : atb-col-N est le POIDS /12 d'une colonne ou d'un élément (système du builder),
  les spans de grille CSS s'appellent atb-grid-span-N (famille atb-grid-cols-N).
#########################################################################################################*/

/*========================= Position, empilement, débordement =========================*/
.atb-static {
    position: static;
}
.atb-relative {
    position: relative;
}
.atb-absolute {
    position: absolute;
}
.atb-fixed {
    position: fixed;
}
.atb-sticky {
    position: sticky;
    top: var(--atb-header-offset, 0);
}
.atb-inset-0 {
    inset: 0;
}
.atb-inset-x-0 {
    left: 0;
    right: 0;
}
.atb-inset-y-0 {
    top: 0;
    bottom: 0;
}
.atb-top-0 {
    top: 0;
}
.atb-right-0 {
    right: 0;
}
.atb-bottom-0 {
    bottom: 0;
}
.atb-left-0 {
    left: 0;
}
.atb-z-0 {
    z-index: 0;
}
.atb-z-10 {
    z-index: var(--atb-z-10);
}
.atb-z-20 {
    z-index: var(--atb-z-20);
}
.atb-z-30 {
    z-index: var(--atb-z-30);
}
.atb-z-40 {
    z-index: var(--atb-z-40);
}
.atb-z-50 {
    z-index: var(--atb-z-50);
}
.atb-z-auto {
    z-index: auto;
}
.atb-overflow-hidden {
    overflow: hidden;
}
.atb-overflow-auto {
    overflow: auto;
}
.atb-overflow-visible {
    overflow: visible;
}
.atb-overflow-clip {
    overflow: clip;
}
.atb-overflow-x-auto {
    overflow-x: auto;
}
.atb-overflow-y-auto {
    overflow-y: auto;
}

/* Ancres sous un en-tête fixe : décalage de la cible du scroll (variable partagée avec .atb-sticky) */
.atb-scroll-mt {
    scroll-margin-top: var(--atb-header-offset, 0);
}
.atb-scroll-mt-16 {
    scroll-margin-top: var(--atb-space-16);
}
.atb-scroll-mt-20 {
    scroll-margin-top: var(--atb-space-20);
}
.atb-scroll-mt-24 {
    scroll-margin-top: var(--atb-space-24);
}
.atb-scroll-mt-28 {
    scroll-margin-top: 7rem;
}

/*========================= Images : object-fit / object-position =========================*/
.atb-object-cover {
    object-fit: cover;
}
.atb-object-contain {
    object-fit: contain;
}
.atb-object-fill {
    object-fit: fill;
}
.atb-object-none {
    object-fit: none;
}
.atb-object-center {
    object-position: center;
}
.atb-object-top {
    object-position: top;
}
.atb-object-bottom {
    object-position: bottom;
}
.atb-object-left {
    object-position: left;
}
.atb-object-right {
    object-position: right;
}

/*========================= Ratios =========================*/
.atb-aspect-4-3 {
    aspect-ratio: 4 / 3;
}
.atb-aspect-3-4 {
    aspect-ratio: 3 / 4;
}
.atb-aspect-3-2 {
    aspect-ratio: 3 / 2;
}
.atb-aspect-2-3 {
    aspect-ratio: 2 / 3;
}
.atb-aspect-21-9 {
    aspect-ratio: 21 / 9;
}
.atb-aspect-auto {
    aspect-ratio: auto;
}

/*========================= Texte : interlettrage =========================*/
.atb-tracking-tight {
    letter-spacing: var(--atb-tracking-tight);
}
.atb-tracking-normal {
    letter-spacing: var(--atb-tracking-normal);
}
.atb-tracking-wide {
    letter-spacing: var(--atb-tracking-wide);
}
.atb-tracking-wider {
    letter-spacing: var(--atb-tracking-wider);
}
.atb-tracking-widest {
    letter-spacing: var(--atb-tracking-widest);
}

/*========================= Flou d'arrière-plan (verre dépoli) =========================*/
.atb-backdrop-blur-sm {
    -webkit-backdrop-filter: blur(var(--atb-blur-sm));
    backdrop-filter: blur(var(--atb-blur-sm));
}
.atb-backdrop-blur {
    -webkit-backdrop-filter: blur(var(--atb-blur));
    backdrop-filter: blur(var(--atb-blur));
}
.atb-backdrop-blur-lg {
    -webkit-backdrop-filter: blur(var(--atb-blur-lg));
    backdrop-filter: blur(var(--atb-blur-lg));
}

/*========================= Rayons : tailles et côtés =========================*/
.atb-rounded-none {
    border-radius: 0;
}
.atb-rounded-2xl {
    border-radius: var(--atb-radius-2xl);
}
.atb-rounded-t {
    border-top-left-radius: var(--atb-radius);
    border-top-right-radius: var(--atb-radius);
}
.atb-rounded-t-sm {
    border-top-left-radius: var(--atb-radius-sm);
    border-top-right-radius: var(--atb-radius-sm);
}
.atb-rounded-t-lg {
    border-top-left-radius: var(--atb-radius-lg);
    border-top-right-radius: var(--atb-radius-lg);
}
.atb-rounded-t-xl {
    border-top-left-radius: var(--atb-radius-xl);
    border-top-right-radius: var(--atb-radius-xl);
}
.atb-rounded-b {
    border-bottom-left-radius: var(--atb-radius);
    border-bottom-right-radius: var(--atb-radius);
}
.atb-rounded-b-sm {
    border-bottom-left-radius: var(--atb-radius-sm);
    border-bottom-right-radius: var(--atb-radius-sm);
}
.atb-rounded-b-lg {
    border-bottom-left-radius: var(--atb-radius-lg);
    border-bottom-right-radius: var(--atb-radius-lg);
}
.atb-rounded-b-xl {
    border-bottom-left-radius: var(--atb-radius-xl);
    border-bottom-right-radius: var(--atb-radius-xl);
}
.atb-rounded-l {
    border-top-left-radius: var(--atb-radius);
    border-bottom-left-radius: var(--atb-radius);
}
.atb-rounded-l-sm {
    border-top-left-radius: var(--atb-radius-sm);
    border-bottom-left-radius: var(--atb-radius-sm);
}
.atb-rounded-l-lg {
    border-top-left-radius: var(--atb-radius-lg);
    border-bottom-left-radius: var(--atb-radius-lg);
}
.atb-rounded-l-xl {
    border-top-left-radius: var(--atb-radius-xl);
    border-bottom-left-radius: var(--atb-radius-xl);
}
.atb-rounded-r {
    border-top-right-radius: var(--atb-radius);
    border-bottom-right-radius: var(--atb-radius);
}
.atb-rounded-r-sm {
    border-top-right-radius: var(--atb-radius-sm);
    border-bottom-right-radius: var(--atb-radius-sm);
}
.atb-rounded-r-lg {
    border-top-right-radius: var(--atb-radius-lg);
    border-bottom-right-radius: var(--atb-radius-lg);
}
.atb-rounded-r-xl {
    border-top-right-radius: var(--atb-radius-xl);
    border-bottom-right-radius: var(--atb-radius-xl);
}

/*========================= Ombres =========================*/
.atb-shadow-xl {
    box-shadow: var(--atb-shadow-xl);
}
.atb-shadow-none {
    box-shadow: none;
}

/*========================= Bordures : côtés, styles, couleurs (palette) =========================*/
.atb-border-0 {
    border-width: 0;
}
.atb-border-t {
    border-top: var(--atb-border-width) solid var(--atb-border-color);
}
.atb-border-r {
    border-right: var(--atb-border-width) solid var(--atb-border-color);
}
.atb-border-b {
    border-bottom: var(--atb-border-width) solid var(--atb-border-color);
}
.atb-border-l {
    border-left: var(--atb-border-width) solid var(--atb-border-color);
}
.atb-border-x {
    border-left: var(--atb-border-width) solid var(--atb-border-color);
    border-right: var(--atb-border-width) solid var(--atb-border-color);
}
.atb-border-y {
    border-top: var(--atb-border-width) solid var(--atb-border-color);
    border-bottom: var(--atb-border-width) solid var(--atb-border-color);
}
.atb-border-solid {
    border-style: solid;
}
.atb-border-dashed {
    border-style: dashed;
}
.atb-border-dotted {
    border-style: dotted;
}
/* Couleur de bordure : s'applique à la bordure déjà posée (atb-border, atb-border-t…) */
.atb-border-primary {
    border-color: var(--atb-primary);
}
.atb-border-primary-soft {
    border-color: color-mix(in srgb, var(--atb-primary) 30%, transparent);
}
.atb-border-secondary {
    border-color: var(--atb-secondary);
}
.atb-border-secondary-soft {
    border-color: color-mix(in srgb, var(--atb-secondary) 30%, transparent);
}
.atb-border-accent {
    border-color: var(--atb-accent);
}
.atb-border-accent-soft {
    border-color: color-mix(in srgb, var(--atb-accent) 30%, transparent);
}
.atb-border-info {
    border-color: var(--atb-info);
}
.atb-border-info-soft {
    border-color: color-mix(in srgb, var(--atb-info) 30%, transparent);
}
.atb-border-warning {
    border-color: var(--atb-warning);
}
.atb-border-warning-soft {
    border-color: color-mix(in srgb, var(--atb-warning) 30%, transparent);
}
.atb-border-danger {
    border-color: var(--atb-danger);
}
.atb-border-danger-soft {
    border-color: color-mix(in srgb, var(--atb-danger) 30%, transparent);
}
.atb-border-neutral {
    border-color: var(--atb-neutral);
}
.atb-border-neutral-soft {
    border-color: color-mix(in srgb, var(--atb-neutral) 30%, transparent);
}
.atb-border-light {
    border-color: var(--atb-light);
}
.atb-border-light-soft {
    border-color: color-mix(in srgb, var(--atb-light) 30%, transparent);
}
.atb-border-grey {
    border-color: var(--atb-grey);
}
.atb-border-grey-soft {
    border-color: color-mix(in srgb, var(--atb-grey) 30%, transparent);
}

/*========================= Grille : spans, lignes, gouttières =========================*/
.atb-grid-span-1 {
    grid-column: span 1 / span 1;
}
.atb-grid-span-2 {
    grid-column: span 2 / span 2;
}
.atb-grid-span-3 {
    grid-column: span 3 / span 3;
}
.atb-grid-span-4 {
    grid-column: span 4 / span 4;
}
.atb-grid-span-5 {
    grid-column: span 5 / span 5;
}
.atb-grid-span-6 {
    grid-column: span 6 / span 6;
}
.atb-grid-span-full {
    grid-column: 1 / -1;
}
.atb-grid-row-span-1 {
    grid-row: span 1 / span 1;
}
.atb-grid-row-span-2 {
    grid-row: span 2 / span 2;
}
.atb-grid-row-span-3 {
    grid-row: span 3 / span 3;
}
.atb-grid-rows-1 {
    grid-template-rows: repeat(1, minmax(0, 1fr));
}
.atb-grid-rows-2 {
    grid-template-rows: repeat(2, minmax(0, 1fr));
}
.atb-grid-rows-3 {
    grid-template-rows: repeat(3, minmax(0, 1fr));
}
.atb-gap-x-0 {
    column-gap: var(--atb-space-0);
}
.atb-gap-y-0 {
    row-gap: var(--atb-space-0);
}
.atb-gap-x-1 {
    column-gap: var(--atb-space-1);
}
.atb-gap-y-1 {
    row-gap: var(--atb-space-1);
}
.atb-gap-x-2 {
    column-gap: var(--atb-space-2);
}
.atb-gap-y-2 {
    row-gap: var(--atb-space-2);
}
.atb-gap-x-3 {
    column-gap: var(--atb-space-3);
}
.atb-gap-y-3 {
    row-gap: var(--atb-space-3);
}
.atb-gap-x-4 {
    column-gap: var(--atb-space-4);
}
.atb-gap-y-4 {
    row-gap: var(--atb-space-4);
}
.atb-gap-x-5 {
    column-gap: var(--atb-space-5);
}
.atb-gap-y-5 {
    row-gap: var(--atb-space-5);
}
.atb-gap-x-6 {
    column-gap: var(--atb-space-6);
}
.atb-gap-y-6 {
    row-gap: var(--atb-space-6);
}
.atb-gap-x-8 {
    column-gap: var(--atb-space-8);
}
.atb-gap-y-8 {
    row-gap: var(--atb-space-8);
}
.atb-gap-x-10 {
    column-gap: var(--atb-space-10);
}
.atb-gap-y-10 {
    row-gap: var(--atb-space-10);
}
.atb-gap-x-12 {
    column-gap: var(--atb-space-12);
}
.atb-gap-y-12 {
    row-gap: var(--atb-space-12);
}
.atb-gap-x-16 {
    column-gap: var(--atb-space-16);
}
.atb-gap-y-16 {
    row-gap: var(--atb-space-16);
}

/*========================= Alignement d'un enfant, ordre =========================*/
.atb-self-start {
    align-self: flex-start;
}
.atb-self-center {
    align-self: center;
}
.atb-self-end {
    align-self: flex-end;
}
.atb-self-stretch {
    align-self: stretch;
}
.atb-self-baseline {
    align-self: baseline;
}
.atb-justify-self-start {
    justify-self: start;
}
.atb-justify-self-center {
    justify-self: center;
}
.atb-justify-self-end {
    justify-self: end;
}
.atb-justify-self-stretch {
    justify-self: stretch;
}
.atb-place-center {
    place-items: center;
}
.atb-order-first {
    order: -9999;
}
.atb-order-last {
    order: 9999;
}
.atb-order-none {
    order: 0;
}
.atb-order-1 {
    order: 1;
}
.atb-order-2 {
    order: 2;
}
.atb-order-3 {
    order: 3;
}
.atb-order-4 {
    order: 4;
}
.atb-order-5 {
    order: 5;
}
.atb-order-6 {
    order: 6;
}

/*========================= Dimensions =========================*/
.atb-w-1-2 {
    width: 50%;
}
.atb-w-1-3 {
    width: 33.333333%;
}
.atb-w-2-3 {
    width: 66.666667%;
}
.atb-w-1-4 {
    width: 25%;
}
.atb-w-3-4 {
    width: 75%;
}
.atb-w-screen {
    width: 100vw;
}
.atb-h-screen {
    height: 100vh;
}
.atb-min-h-0 {
    min-height: 0;
}
.atb-min-h-full {
    min-height: 100%;
}
.atb-min-h-screen {
    min-height: 100vh;
}
.atb-max-h-full {
    max-height: 100%;
}
.atb-max-h-screen {
    max-height: 100vh;
}

/*========================= Texte multi-colonnes, rythme entre enfants =========================*/
.atb-columns-2 {
    columns: 2;
    column-gap: var(--atb-columns-gap);
}
.atb-columns-3 {
    columns: 3;
    column-gap: var(--atb-columns-gap);
}
.atb-break-inside-avoid {
    break-inside: avoid;
}
/* space-y : marge entre enfants successifs (hors builder : le rythme des blocs vient de --atb-blocs-gap) */
.atb-space-y-0 > * + * {
    margin-top: var(--atb-space-0);
}
.atb-space-y-1 > * + * {
    margin-top: var(--atb-space-1);
}
.atb-space-y-2 > * + * {
    margin-top: var(--atb-space-2);
}
.atb-space-y-3 > * + * {
    margin-top: var(--atb-space-3);
}
.atb-space-y-4 > * + * {
    margin-top: var(--atb-space-4);
}
.atb-space-y-5 > * + * {
    margin-top: var(--atb-space-5);
}
.atb-space-y-6 > * + * {
    margin-top: var(--atb-space-6);
}
.atb-space-y-8 > * + * {
    margin-top: var(--atb-space-8);
}
.atb-space-y-10 > * + * {
    margin-top: var(--atb-space-10);
}
.atb-space-y-12 > * + * {
    margin-top: var(--atb-space-12);
}
.atb-space-y-16 > * + * {
    margin-top: var(--atb-space-16);
}

/*========================= Variantes responsive des ajouts =========================
   viewport : -xs|sm|md|lg|xl (max-width écran) — conteneur : @col|row|sec-sm|md
   Familles déclinées : ordre (first/last), span de grille (1/full), largeur (full/1-2). */
@media (max-width: 576px) {
    .atb-order-first-xs {
        order: -9999;
    }

    .atb-order-last-xs {
        order: 9999;
    }

    .atb-grid-span-1-xs {
        grid-column: span 1 / span 1;
    }

    .atb-grid-span-full-xs {
        grid-column: 1 / -1;
    }

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

    .atb-w-1-2-xs {
        width: 50%;
    }
}

@media (max-width: 768px) {
    .atb-order-first-sm {
        order: -9999;
    }

    .atb-order-last-sm {
        order: 9999;
    }

    .atb-grid-span-1-sm {
        grid-column: span 1 / span 1;
    }

    .atb-grid-span-full-sm {
        grid-column: 1 / -1;
    }

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

    .atb-w-1-2-sm {
        width: 50%;
    }
}

@media (max-width: 992px) {
    .atb-order-first-md {
        order: -9999;
    }

    .atb-order-last-md {
        order: 9999;
    }

    .atb-grid-span-1-md {
        grid-column: span 1 / span 1;
    }

    .atb-grid-span-full-md {
        grid-column: 1 / -1;
    }

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

    .atb-w-1-2-md {
        width: 50%;
    }
}

@media (max-width: 1200px) {
    .atb-order-first-lg {
        order: -9999;
    }

    .atb-order-last-lg {
        order: 9999;
    }

    .atb-grid-span-1-lg {
        grid-column: span 1 / span 1;
    }

    .atb-grid-span-full-lg {
        grid-column: 1 / -1;
    }

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

    .atb-w-1-2-lg {
        width: 50%;
    }
}

@media (max-width: 1400px) {
    .atb-order-first-xl {
        order: -9999;
    }

    .atb-order-last-xl {
        order: 9999;
    }

    .atb-grid-span-1-xl {
        grid-column: span 1 / span 1;
    }

    .atb-grid-span-full-xl {
        grid-column: 1 / -1;
    }

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

    .atb-w-1-2-xl {
        width: 50%;
    }
}

@container uni-column (max-width: 480px) {
    .atb-order-first\@col-sm {
        order: -9999;
    }

    .atb-order-last\@col-sm {
        order: 9999;
    }

    .atb-grid-span-1\@col-sm {
        grid-column: span 1 / span 1;
    }

    .atb-grid-span-full\@col-sm {
        grid-column: 1 / -1;
    }

    .atb-w-full\@col-sm {
        width: 100%;
    }

    .atb-w-1-2\@col-sm {
        width: 50%;
    }
}

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

    .atb-order-last\@col-md {
        order: 9999;
    }

    .atb-grid-span-1\@col-md {
        grid-column: span 1 / span 1;
    }

    .atb-grid-span-full\@col-md {
        grid-column: 1 / -1;
    }

    .atb-w-full\@col-md {
        width: 100%;
    }

    .atb-w-1-2\@col-md {
        width: 50%;
    }
}

@container uni-row (max-width: 480px) {
    .atb-order-first\@row-sm {
        order: -9999;
    }

    .atb-order-last\@row-sm {
        order: 9999;
    }

    .atb-grid-span-1\@row-sm {
        grid-column: span 1 / span 1;
    }

    .atb-grid-span-full\@row-sm {
        grid-column: 1 / -1;
    }

    .atb-w-full\@row-sm {
        width: 100%;
    }

    .atb-w-1-2\@row-sm {
        width: 50%;
    }
}

@container uni-row (max-width: 768px) {
    .atb-order-first\@row-md {
        order: -9999;
    }

    .atb-order-last\@row-md {
        order: 9999;
    }

    .atb-grid-span-1\@row-md {
        grid-column: span 1 / span 1;
    }

    .atb-grid-span-full\@row-md {
        grid-column: 1 / -1;
    }

    .atb-w-full\@row-md {
        width: 100%;
    }

    .atb-w-1-2\@row-md {
        width: 50%;
    }
}

@container uni-section (max-width: 480px) {
    .atb-order-first\@sec-sm {
        order: -9999;
    }

    .atb-order-last\@sec-sm {
        order: 9999;
    }

    .atb-grid-span-1\@sec-sm {
        grid-column: span 1 / span 1;
    }

    .atb-grid-span-full\@sec-sm {
        grid-column: 1 / -1;
    }

    .atb-w-full\@sec-sm {
        width: 100%;
    }

    .atb-w-1-2\@sec-sm {
        width: 50%;
    }
}

@container uni-section (max-width: 768px) {
    .atb-order-first\@sec-md {
        order: -9999;
    }

    .atb-order-last\@sec-md {
        order: 9999;
    }

    .atb-grid-span-1\@sec-md {
        grid-column: span 1 / span 1;
    }

    .atb-grid-span-full\@sec-md {
        grid-column: 1 / -1;
    }

    .atb-w-full\@sec-md {
        width: 100%;
    }

    .atb-w-1-2\@sec-md {
        width: 50%;
    }
}