@property --cqi-section {
    syntax: '<length>';
    inherits: true;
    initial-value: 0px;
}

@property --cqi-row {
    syntax: '<length>';
    inherits: true;
    initial-value: 0px;
}

@property --cqi-column {
    syntax: '<length>';
    inherits: true;
    initial-value: 0px;
}

html {
    overflow-x: hidden !important;
}

body {
    overflow-x: hidden !important;
}

:root {
    --atb-base-cqi: 1vw;
    --atb-important-title-clamp: clamp(1.875rem, calc(1.522rem + (1.765 * var(--atb-base-cqi, 1vw))), 3.000rem);
    --atb-h2-clamp: clamp(1.875rem, calc(1.522rem + (1.765 * var(--atb-base-cqi, 1vw))), 3.000rem);
    --atb-h3-clamp: clamp(1.5rem, calc(1.25rem + (1.25 * var(--atb-base-cqi, 1vw))), 2.5rem);
    --atb-section-v-padding: clamp(1.563rem, calc(0.653rem + 4.545vw), 4.063rem);

    /* Rythme vertical — ces variables sont la source de vérité, les champs
       Espacement s'y réfèrent en valeur par défaut (`var(--atb-rows-gap, 3rem)`).
       Un conteneur qui doit rompre le rythme les redéfinit chez lui, et un
       `:last-child` les remet à 0 pour ne pas laisser de marge en fin de série.
       Une valeur saisie dans l'éditeur est littérale : elle ignore tout ça. */
    --atb-rows-gap: var(--atb-space-12);

    /* Rythme des blocs, en deux temps : `-base` est le réglage global, que chaque
       conteneur recopie dans `--atb-blocs-gap`. Ce dédoublement est nécessaire
       parce que le reset de fin de série met `--atb-blocs-gap` à 0 sur le dernier
       enfant : si ce dernier enfant est lui-même un conteneur de blocs (un
       groupe), ses descendants hériteraient de ce 0. Recopier depuis `-base`
       rouvre le rythme à chaque niveau. */
    --atb-blocs-gap-base: 1rem;
    --atb-blocs-gap: var(--atb-blocs-gap-base, 1rem);

    /* Retour à la ligne des colonnes dans une ligne trop étroite. À ne pas
       confondre avec --atb-rows-gap ci-dessus : celui-ci n'agit qu'entre deux
       rangées de colonnes d'une MÊME ligne (anciennement --atb-row-gap, renommé
       parce que les deux noms ne se distinguaient que par un « s »). */
    --atb-columns-wrap-gap: 2rem;

    /* Échelle typographique fluide — réagit à --atb-base-cqi (viewport par défaut,
   commutable via .atb-react-section / -row / -column) */
    --atb-fluid-xs: clamp(0.75rem, calc(0.68rem + 0.4 * var(--atb-base-cqi, 1vw)), 0.875rem);
    --atb-fluid-sm: clamp(0.875rem, calc(0.80rem + 0.5 * var(--atb-base-cqi, 1vw)), 1rem);
    --atb-fluid-base: clamp(1rem, calc(0.90rem + 0.6 * var(--atb-base-cqi, 1vw)), 1.25rem);
    --atb-fluid-lg: clamp(1.125rem, calc(0.98rem + 0.9 * var(--atb-base-cqi, 1vw)), 1.5rem);
    --atb-fluid-xl: clamp(1.25rem, calc(1.05rem + 1.1 * var(--atb-base-cqi, 1vw)), 1.75rem);
    --atb-fluid-h3: var(--atb-h3-clamp);
    --atb-fluid-h2: var(--atb-h2-clamp);
    --atb-fluid-h1: clamp(2.188rem, calc(1.40rem + 4 * var(--atb-base-cqi, 1vw)), 4.5rem);

    --atb-primary: #0099DD;
    --atb-secondary: #363C42;
    --atb-accent: #E92095;
    --atb-info: #00A099;
    --atb-success: #319F43;
    --atb-warning: #FF7B01;
    --atb-danger: #F04957;
    --atb-neutral: #192743;
    --atb-light: #fff;
    --atb-grey: #6C7993;

    --atb-font-heading: 'Montserrat';
    --atb-font-body: 'Open Sans';
    --atb-font-condensed: 'Roboto Condensed';

    /* Échelle d'espacement */
    --atb-space-0: 0;
    --atb-space-1: 0.25rem;
    --atb-space-2: 0.5rem;
    --atb-space-3: 0.75rem;
    --atb-space-4: 1rem;
    --atb-space-5: 1.25rem;
    --atb-space-6: 1.5rem;
    --atb-space-8: 2rem;
    --atb-space-10: 2.5rem;
    --atb-space-12: 3rem;
    --atb-space-16: 4rem;
    --atb-space-20: 5rem;
    --atb-space-24: 6rem;

    /* Rayons */
    --atb-radius-sm: 0.4rem;
    --atb-radius: 0.7rem;
    --atb-radius-lg: 1rem;
    --atb-radius-xl: 1.5rem;
    --atb-radius-pill: 100vw;
    --atb-radius-full: 100%;

    /* Interlignes */
    --atb-leading-none: 1;
    --atb-leading-tight: 1.2;
    --atb-leading-snug: 1.4;
    --atb-leading-normal: 1.5;
    --atb-leading-relaxed: 1.6;

    /* Tailles de texte */
    --atb-text-xs: 0.6rem;
    --atb-text-sm: 0.875rem;
    --atb-text-base: 1rem;
    --atb-text-lg: 1.125rem;
    --atb-text-xl: 1.25rem;
    --atb-text-2xl: 1.5rem;
    --atb-text-3xl: 1.875rem;

    /* Transitions / ombres / bordure */
    --atb-transition: 0.2s ease;
    --atb-transition-slow: 0.3s ease;
    --atb-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
    --atb-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    --atb-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.12);
    --atb-border-color: color-mix(in srgb, var(--atb-neutral) 12%, transparent);

}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: inherit;
}

.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-title-zone {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;

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

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

.atb-lightbox-link {
    cursor: pointer;
    transition: all 0.3s ease;

    &:hover {
        filter: brightness(0.8);
    }
}

@scope(.atb-lightbox) {
    max-width: 90dvw;
    max-height: 75dvh;
    background: transparent;
    border: none;
    position: relative;
    position: fixed;
    overflow: visible;
    width: fit-content;

    &::backdrop {
        background-color: rgba(0, 0, 0, 0.5);
        backdrop-filter: blur(3px);
    }

    .atb-lightbox-close {
        position: absolute;
        top: 0;
        right: 0;
        color: var(--atb-light);
        background: transparent;
        border: 2px solid;
        font-size: 18px;
        border-radius: var(--atb-radius-full);
        line-height: 1;
        aspect-ratio: 1 / 1;
        cursor: pointer;
        transition: transform 0.3s ease;
        font-family: 'Open Sans';


        &:hover {
            transform: scale(1.1);
        }
    }

    .atb-lightbox-image {
        max-width: 100%;
        max-height: 75dvh;
        object-fit: contain;

    }
}



.attps-builder-divi-layout {
    width: 100%;
}



.atb-row {
    container-type: inline-size;
    container-name: uni-row;

    &>* {
        --cqi-row: 1cqi;

    }

    color: var(--text-color, inherit);
    border-radius: var(--border-radius, 0);

    max-width: var(--row-w, 1150px);
    width: var(--row-mw, 90%);
    margin: 0 auto;
    position: relative;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    --atb-column-min-width: 250px;
    column-gap: var(--atb-column-gap, 0rem);
    row-gap: var(--atb-columns-wrap-gap, 2rem);

    &.row-small {
        max-width: var(--row-s-w, 950px);
    }

    &.row-medium {
        max-width: var(--row-m-w, 1150px);
    }

    &.row-large {
        max-width: var(--row-l-w, 1340px);
    }

    &.row-custom {
        max-width: var(--row-custom-w, 1150px);
    }

    &.row-full {
        width: 100%;
        max-width: 100%;
    }

    .atb-column {
        container-type: inline-size;
        container-name: uni-column;
        display: flex;
        flex-direction: column;
        /* Rythme vertical passé en marge basse des blocs (cf. `.atb-column > *`),
           d'où `row-gap: 0`. Mais `column-gap` est conservé : une colonne repassée
           en ligne par les utilitaires (`atb-flex atb-flex-wrap`, cf. le menu
           méga) verrait sinon ses blocs se coller horizontalement. */
        column-gap: var(--atb-blocs-gap, 1rem);
        row-gap: 0;
        --atb-blocs-gap: var(--atb-blocs-gap-base, 1rem);
        color: var(--text-color, inherit);
        border-radius: var(--border-radius, 0);
        box-sizing: border-box;
        flex: var(--atb-column-weight, 6) 1 calc(clamp(var(--atb-column-min-width, 250px), calc((100% / 12) * var(--atb-column-weight, 6)), 100%) - var(--atb-column-gap, 0rem));
        min-width: min(100%, var(--atb-column-min-width, 250px));
        max-width: 100%;
        border-top-width: 0;
        width: auto;
        /* L'image de fond du champ passe par le calque .atb-column--bg-images ;
           ces deux lignes ne servent plus qu'aux background-image posés en CSS perso. */
        background-size: cover;
        background-position: center;

        &>* {
            --cqi-column: 1cqi;

        }

        &.atb-col-1 {
            --atb-column-weight: 1;
        }

        &.atb-col-2 {
            --atb-column-weight: 2;
        }

        &.atb-col-3 {
            --atb-column-weight: 3;
        }

        &.atb-col-4 {
            --atb-column-weight: 4;
        }

        &.atb-col-5 {
            --atb-column-weight: 5;
        }

        &.atb-col-6 {
            --atb-column-weight: 6;
        }

        &.atb-col-7 {
            --atb-column-weight: 7;
        }

        &.atb-col-8 {
            --atb-column-weight: 8;
        }

        &.atb-col-9 {
            --atb-column-weight: 9;
        }

        &.atb-col-10 {
            --atb-column-weight: 10;
        }

        &.atb-col-11 {
            --atb-column-weight: 11;
        }

        &.atb-col-12 {
            --atb-column-weight: 12;
        }


        &.column-shrink {
            flex: 1 1;
        }
    }
}

.atb-group {
    container-type: inline-size;
    container-name: uni-group;

    &>* {
        --cqi-group: 1cqi;

    }

    color: var(--text-color, inherit);
    border-radius: var(--border-radius, 0);

    max-width: var(--group-w, 1150px);
    width: var(--group-mw, 90%);
    margin: 0 auto;
    position: relative;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    --atb-element-min-width: 250px;
    /* Namespace propre au groupe : sinon un groupe placé dans une .atb-row hérite
       du --atb-column-gap de la ligne. */
    column-gap: var(--atb-group-gap, 0rem);
    row-gap: var(--atb-group-gap, 2rem);

    &.group-small {
        max-width: var(--group-s-w, 950px);
    }

    &.group-medium {
        max-width: var(--group-m-w, 1150px);
    }

    &.group-large {
        max-width: var(--group-l-w, 1340px);
    }

    &.group-custom {
        max-width: var(--group-custom-w, 1150px);
    }

    &.group-full {
        width: 100%;
        max-width: 100%;
    }

    .atb-element {
        container-type: inline-size;
        container-name: uni-element;
        display: flex;
        flex-direction: column;
        /* Idem .atb-column. La redéclaration de --atb-blocs-gap compte doublement
           ici : un groupe qui est le dernier bloc de sa colonne porte
           `--atb-blocs-gap: 0`, et sans cette ligne ses éléments transmettraient
           ce 0 à leurs propres blocs. */
        column-gap: var(--atb-blocs-gap, 1rem);
        row-gap: 0;
        --atb-blocs-gap: var(--atb-blocs-gap-base, 1rem);
        color: var(--text-color, inherit);
        border-radius: var(--border-radius, 0);
        box-sizing: border-box;
        flex: var(--atb-element-weight, 6) 1 calc(clamp(var(--atb-element-min-width, 250px), calc((100% / 12) * var(--atb-element-weight, 6)), 100%) - var(--atb-group-gap, 0rem));
        min-width: min(100%, var(--atb-element-min-width, 250px));
        max-width: 100%;
        padding: 0;
        border-top-width: 0;
        width: auto;
        /* Idem .atb-column : conservé pour les background-image en CSS perso. */
        background-size: cover;
        background-position: center;

        &>* {
            --cqi-element: 1cqi;

        }

        &.atb-col-1 {
            --atb-element-weight: 1;
        }

        &.atb-col-2 {
            --atb-element-weight: 2;
        }

        &.atb-col-3 {
            --atb-element-weight: 3;
        }

        &.atb-col-4 {
            --atb-element-weight: 4;
        }

        &.atb-col-5 {
            --atb-element-weight: 5;
        }

        &.atb-col-6 {
            --atb-element-weight: 6;
        }

        &.atb-col-7 {
            --atb-element-weight: 7;
        }

        &.atb-col-8 {
            --atb-element-weight: 8;
        }

        &.atb-col-9 {
            --atb-element-weight: 9;
        }

        &.atb-col-10 {
            --atb-element-weight: 10;
        }

        &.atb-col-11 {
            --atb-element-weight: 11;
        }

        &.atb-col-12 {
            --atb-element-weight: 12;
        }


        &.element-shrink {
            flex: 1 1;
        }
    }
}

.atb-item {
    color: var(--text-color, inherit);
    border-radius: var(--border-radius, 0);
}

a.atb-item {
    cursor: pointer;
}


.atb-section {
    container-type: inline-size;
    container-name: uni-section;

    &>* {
        --cqi-section: 1cqi;

    }

    /* Le padding vertical n'est plus ici : il est la valeur par défaut du champ
       Espacement (at_spacing) de la section, écrite `var(--atb-section-v-padding,
       4.063rem) 0`. La variable ci-dessus reste donc la source de vérité — un cas
       particulier se règle en la redéfinissant (ex. .atb-hero-bg), sans toucher
       aux contenus. */

    display: flex;
    flex-direction: column;
    /* L'espace entre les lignes n'est plus un `gap` de la section mais la marge
       basse de chaque ligne (valeur par défaut de son champ Espacement) : un gap
       est indivisible, une marge se règle ligne par ligne. */
    gap: 0;
    justify-content: center;
    align-items: center;
    position: relative;

}


/* Fin de série : la dernière ligne ne doit pas pousser le padding bas de son
   conteneur. On annule la VARIABLE, pas la marge — une marge saisie dans
   l'éditeur est une valeur littérale et reste donc intacte, là où un
   `margin-bottom: 0` aurait été écrasé par la classe scopée (0-2-0, émise en
   pied de page). Le `<style>` du CSS perso est imprimé en premier enfant dans
   les templates concernés, sinon il volerait ce `:last-child`. */
.atb-section>:last-child,
.atb-nested-rows>:last-child {
    --atb-rows-gap: 0;
}


/* Rythme entre blocs — même bascule que les lignes, un cran plus bas.
   La déclaration est portée par le CONTENEUR et non par une valeur par défaut de
   champ, pour trois raisons :
   - elle couvre les types de blocs qui n'ont pas de champ Espacement (bouton,
     icône, bloc global, avis Google, cartes catégories) ;
   - elle ne touche qu'à `margin-bottom` : les marges haute et latérales des blocs
     restent libres, là où un défaut de champ écrirait les quatre côtés ;
   - à spécificité égale (0-1-0), utilities.css est chargé APRÈS custom.css, donc
     un `atb-mb-*` posé dans les classes d'un bloc continue de gagner.
   Un bloc qui a une valeur d'espacement saisie sort une classe scopée (0-2-0,
   émise en pied de page) : elle bat cette règle.
   Le second groupe de sélecteurs rattrape les blocs enveloppés par une condition
   d'affichage : .atb-cond-wrap est en display:contents, une marge posée dessus
   n'aurait aucun effet — c'est l'enfant qui est l'item flex. */
.atb-column>*,
.atb-element>*,
.atb-column>.atb-cond-wrap>*,
.atb-element>.atb-cond-wrap>* {
    margin-bottom: var(--atb-blocs-gap, 1rem);
}

.atb-column>:last-child,
.atb-element>:last-child {
    --atb-blocs-gap: 0;
}

/* Colonne gauche du hero : contenu figé (titre, texte, bouton) déjà espacé par
   son propre gap — elle ne participe pas au rythme des blocs. */
.atb-hero-bg .atb-column:first-child {
    --atb-blocs-gap: 0;
}


/* ---------------------------------------------------------------------------
   Image de fond des conteneurs — système unique

   Tous les niveaux (section, ligne, colonne, élément, item, groupe) portent les
   mêmes champs `bg_image` / `bg_image_opacity`, et le PHP injecte partout les
   mêmes variables --bg-image / --bg-opacity + la classe atb-*--bg-images.
   L'image est un calque `::before` posé AU-DESSUS de la couleur de fond
   (`bg` + `bg_opacity` reste donc utilisable comme teinte sous la photo).

   Deux points à ne pas toucher sans y penser :
   - le ::before est en `absolute`, donc hors flux : dans un conteneur flex
     (ligne, colonne, groupe) il ne devient pas un item flex ;
   - les enfants directs sont remontés en `position: relative; z-index: 1`,
     sinon le calque recouvre le contenu (les descendants positionnés se
     peignent après les blocs en flux, quel que soit l'ordre du DOM).
   --------------------------------------------------------------------------- */
.atb-section--bg-images,
.atb-row--bg-images,
.atb-column--bg-images,
.atb-element--bg-images,
.atb-item--bg-images,
.atb-slider--bg-images,
.atb-slide--bg-images,
.atb-group--bg-images {
    position: relative;

    &::before {
        content: '';
        position: absolute;
        inset: 0;
        z-index: 0;
        background-image: var(--bg-image, none);
        background-size: cover;
        background-position: center;
        border-radius: inherit;
        opacity: var(--bg-opacity, 1);
        pointer-events: none;
    }

    &>* {
        position: relative;
        z-index: 1;
    }
}

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

    &.type-dashicons {


        .dashicons {
            font-size: inherit;
            width: unset;
            height: unset;
        }
    }

    &.type-media_library {

        img,
        svg {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }
    }

    img,
    svg {
        &[fill]:not([fill="none"]) {
            fill: currentColor;
        }

        &[stroke]:not([stroke="none"]) {
            stroke: currentColor;
        }


        /* Cible les enfants QUI N'ONT PAS d'attribut fill */
        *[fill] {
            fill: currentColor;
        }

        /* Cible les enfants QUI N'ONT PAS d'attribut stroke */
        *[stroke] {
            stroke: currentColor;
        }
    }
}


/* Le bloc `.atb-btn` a été retiré : tous les boutons du site passent
   désormais par le champ `at_button` de attps-get-field, habillé par
   assets/css/at-button.css et notre pont at-button-bridge.css. */

/*######################################################################################################## 
Sections Réutilisable
#########################################################################################################*/
/* Uni Hero BG */
.atb-hero-bg {
    background-position: center;
    background: var(--bg-url);
    background-size: cover;

    &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        backdrop-filter: saturate(0.7);
    }

    &::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: #192743AA;
        background: linear-gradient(0deg, var(--atb-neutral) 0%, color-mix(in oklab, var(--atb-neutral) 56%, transparent) 50%, color-mix(in oklab, var(--atb-neutral) 00%, transparent) 100%);
    }

    .atb-row {
        --top-offset: clamp(2.500rem, calc(-0.455rem + 14.773vw), 10.625rem);
        margin-top: var(--top-offset, 2.5rem);
        color: var(--atb-light);

        .atb-column {
            &:first-child {
                display: flex;
                flex-direction: column;
                gap: var(--atb-space-8);
                align-items: flex-start;
                --atb-column-min-width: 350px;
            }

            .atb-title-zone {
                .atb-title {
                    font-weight: 700;
                    color: var(--atb-light);
                    padding: 0;

                    &:is(h1) {
                        font-size: clamp(2.188rem, calc(0.240rem + (9.737 * var(--cqi-column, 1vw))), 4.500rem);
                    }

                    &:not(:is(h1)) {
                        --atb-base-cqi: var(--cqi-column, 1vw);
                        font-size: var(--atb-h2-clamp);
                    }
                }
            }

            .atb-hero-bg__text {
                font-size: 1rem;
                font-weight: 300;
                line-height: var(--atb-leading-tight);
            }
        }

    }


}



/*######################################################################################################## 
Blocs Réutilisable
#########################################################################################################*/

.atb-nested-rows {
    display: flex;
    flex-direction: column;
    /* Même bascule que la section, avec un rythme plus serré : les lignes
       imbriquées portent 1rem de marge basse au lieu du gap de 1rem. */
    gap: 0;
    --atb-rows-gap: var(--atb-space-4);
}

.atb-image-wrapper {
    max-width: 100%;

    img {
        max-width: 100%;
        height: auto;
        object-fit: contain;
    }
}


.atb-points-fort {
    /* display: grid;
    gap: var(--atb-space-4);
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); */
    --gap: 1rem;
    display: flex;
    gap: var(--gap);
    flex-wrap: wrap;

    .atb-points-fort__item {
        flex: var(--atb-column-list-weight, 4) 1 calc(clamp(var(--atb-column-list-min-width, 250px), calc((100% / 12) * var(--atb-column-list-weight, 4)), 100%) - var(--gap));

        display: flex;
        gap: var(--atb-space-4);

        .atb-points-fort__icon-wrapper {
            .atb-icon {
                display: flex;
                justify-content: center;
                align-items: center;
                aspect-ratio: 1 / 1;
                padding: 0.6rem;
                background-color: #D8F1F7;
                border-radius: var(--atb-radius);
                box-sizing: content-box;
                width: 1rem;

                &>* {
                    width: 1rem;
                    height: 1rem;
                }


            }
        }
    }

    .atb-points-fort__content {
        .atb-points-fort__title {
            font-size: 0.875rem;
            font-weight: 700;
            color: inherit;
            line-height: var(--atb-leading-tight);
        }

        .atb-points-fort__text {
            font-size: 0.75rem;
            font-weight: 300;
            color: inherit;
            line-height: var(--atb-leading-relaxed);

        }
    }

}

.atb-solutions-list {
    --gap: 1rem;
    display: flex;
    gap: var(--gap);
    flex-wrap: wrap;

    .atb-solutions-list__item {
        flex: var(--atb-column-list-weight, 4) 1 calc(clamp(var(--atb-column-list-min-width, 250px), calc((100% / 12) * var(--atb-column-list-weight, 4)), 100%) - var(--gap));
        display: flex;
        align-items: center;
        gap: var(--atb-space-4);
        background-color: color-mix(in srgb, var(--atb-neutral) 5%, transparent);
        border-radius: var(--atb-radius);
        padding: 1.5rem;

        .atb-solutions-list__icon-wrapper {
            .atb-icon {
                display: flex;
                justify-content: center;
                align-items: center;
                box-sizing: content-box;
                width: 4.5rem;
                height: auto;
                aspect-ratio: 1 / 1;

                &>* {
                    width: 4.5rem;
                    height: 4.5rem;
                }
            }
        }
    }

    .atb-solutions-list__content {
        .atb-solutions-list__title {
            font-size: 0.875rem;
            font-weight: 700;
            color: color-mix(in srgb, var(--atb-secondary) 100%, transparent);
            line-height: var(--atb-leading-tight);
            margin-bottom: 0.5rem;
        }

        .atb-solutions-list__text {
            font-size: 0.75rem;
            font-weight: 300;
            color: color-mix(in srgb, var(--atb-secondary) 85%, transparent);
            line-height: var(--atb-leading-relaxed);

        }
    }

}


.atb-gallery-certifications {
    container-type: inline-size;
    container-name: gallery-certifications;
    display: flex;
    gap: var(--atb-space-2);
    flex-wrap: wrap;

    &>* {
        display: flex;
        justify-content: center;
        align-items: center;

        img {
            max-height: clamp(2.813rem, calc(1.522rem + 6.452cqi), 4.063rem);
            width: auto;
            max-width: 100%;
            object-fit: contain;
        }
    }
}

.atb-gallery-simple {
    container-type: inline-size;
    container-name: gallery-simple;
    display: flex;
    gap: var(--atb-space-2);
    flex-wrap: wrap;

    &>* {

        display: flex;
        justify-content: center;
        align-items: center;

        img {
            max-height: var(--max-height, 250px);
            width: auto;
            max-width: 100%;
            object-fit: contain;
        }
    }
}

.atb-project-steps-wrapper {
    position: relative;
    width: 100%;
    container-type: inline-size;
    container-name: project-steps;

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

        @container project-steps (max-width: 500px) {
            grid-template-columns: auto 1fr;
        }


        .atb-project-steps__item {
            display: grid;
            grid-template-rows: subgrid;
            grid-row: span 3;
            gap: var(--atb-space-4);
            text-align: center;

            @container project-steps (max-width: 500px) {
                display: grid;
                grid-template-columns: subgrid;
                grid-row: unset;
                gap: var(--atb-space-4);
                text-align: center;
                grid-column: span 2;
            }

            .atb-project-steps__icon-wrapper {
                display: flex;
                justify-content: center;
                align-items: center;
                position: relative;
                --icon-radius: 3rem;

                &:after {
                    content: '';
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                    width: 100%;
                    height: 2px;
                    background-color: var(--atb-primary);
                    z-index: -1;
                }

                .atb-project-steps__icon-container {
                    position: relative;
                    width: fit-content;
                    height: auto;
                    aspect-ratio: 1/1;

                    .atb-project-steps__number {
                        position: absolute;
                        top: 0;
                        right: 15%;
                        font-size: 0.875rem;
                        font-weight: 700;
                        color: var(--atb-light);
                        background-color: var(--atb-warning);
                        border-radius: var(--atb-radius-pill);
                        line-height: 1;
                        padding: 0.25rem;
                        width: fit-content;
                        height: auto;
                        aspect-ratio: 1 / 1;
                        transform: translate(calc(-50% + (var(--icon-radius) * 0.707)),
                                calc(-70% + (var(--icon-radius) * 0.707)));
                    }



                    .atb-icon {
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        width: 6.25rem;
                        height: auto;
                        aspect-ratio: 1 / 1;
                        padding: 0.6rem;
                        background-color: var(--atb-light);
                        border: 2px solid var(--atb-primary);
                        border-radius: var(--atb-radius-pill);
                        box-sizing: content-box;

                        &>* {
                            width: 2.8rem;
                            height: 2.8rem;
                        }
                    }
                }


                @container project-steps (max-width: 500px) {
                    --icon-radius: 1.5rem;
                    align-items: flex-start;

                    &:after {
                        content: '';
                        position: absolute;
                        top: 25%;
                        left: 50%;
                        transform: translate(-50%, -50%);
                        width: 2px;
                        height: 100%;
                        background-color: var(--atb-primary);
                        z-index: -1;
                    }

                    .atb-project-steps__icon-container {

                        .atb-icon {
                            width: 3.5rem;
                        }
                    }
                }
            }
        }


        .atb-project-steps__content {
            display: grid;
            grid-template-rows: subgrid;
            grid-row: span 2;
            gap: var(--atb-space-4);
            text-align: center;
            padding: 0 1rem;

            @container project-steps (max-width: 500px) {
                padding: 1rem;
                grid-template-rows: unset;
            }

            .atb-project-steps__title {
                font-size: 1.275rem;
                font-weight: 700;
                color: var(--atb-light);
                line-height: var(--atb-leading-tight);
            }

            .atb-project-steps__text {
                font-size: 0.75rem;
                font-weight: 300;
                color: var(--atb-light);
                line-height: var(--atb-leading-relaxed);

            }

            @container project-steps (max-width: 500px) {
                padding: 1rem;
                grid-template-rows: unset;
                text-align: left;
                gap: var(--atb-space-2);
            }
        }

    }
}

.atb-list-simple {
    list-style: none !important;
    padding: 0 !important;
    display: flex;
    flex-direction: column;
    gap: var(--atb-space-4);

    .atb-list-simple__item {
        display: flex;
        align-items: flex-start;
        gap: var(--atb-space-4);

        .atb-list-simple__icon-wrapper {
            .atb-icon {
                display: flex;
                justify-content: center;
                align-items: center;
                box-sizing: content-box;
                width: 2.188rem;
                height: auto;
                aspect-ratio: 1 / 1;

                &>* {
                    width: 2.188rem;
                    height: 2.188rem;
                }
            }
        }

        .atb-list-simple__content {

            .atb-list-simple__text {
                font-weight: 300;
                line-height: var(--atb-leading-relaxed);

            }
        }
    }
}

.atb-truncated-text {

    .atb-truncated-text__content {
        transition: max-height 0.4s ease-in-out;
        display: block;
        overflow: hidden;

        &.truncated {
            display: -webkit-box;
            -webkit-line-clamp: var(--line-clamp, 4);
            line-clamp: var(--line-clamp, 4);
            -webkit-box-orient: vertical;
            text-overflow: ellipsis;


            &>* {
                padding-top: 0;
                padding-bottom: 0;
                margin-top: 0;
                margin-bottom: 0;
            }
        }
    }

    .atb-truncated-text__toggle {
        margin-top: 0.5rem;
        cursor: pointer;

        &:hover {
            text-decoration: underline;
        }
    }
}

.atb-buttons-list {
    list-style: none !important;
    padding: 0 !important;
}

.atb-links-list {
    display: flex;
    flex-direction: column;
    gap: var(--atb-space-6);

    .atb-links-list__title {
        margin: 0;
        padding: 0;
        color: inherit;
        font-weight: 700;
        font-size: inherit;
    }

    .atb-links-list__list {
        list-style: none !important;
        margin: 0;
        padding: 0 !important;
        display: flex;
        flex-direction: column;
        gap: var(--atb-space-3);
    }

    .atb-links-list__item {
        margin: 0;
    }

    .atb-links-list__link {
        display: inline-flex;
        align-items: center;
        color: inherit;
        text-decoration: none;
        font-weight: 300;
        line-height: var(--atb-leading-tight);
        transition: opacity var(--atb-transition), color var(--atb-transition);

        &:hover,
        &:focus-visible {
            opacity: 0.7;
        }
    }
}

.atb-title-zone {}

.atb-surtitle {

    color: inherit;
}


.atb-title {
    margin: 0;
    padding: 0;
    color: inherit;

}

.atb-subtitle {

    color: inherit;
}

.atb-faq {
    .atb-faq-list {
        container-type: inline-size;
        container-name: faq-list;
        list-style: none !important;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: var(--atb-space-4);

        .atb-faq-item {
            details {
                background-color: color-mix(in srgb, var(--atb-neutral) 5%, transparent);
                color: var(--atb-secondary);
                border-radius: 15px;
                padding: 1rem;


                .atb-faq-question {

                    list-style: none;
                    cursor: pointer;
                    margin-bottom: 5px;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    font-weight: 700;
                    font-size: 1rem;
                    min-height: calc(6rem - 2rem);
                    gap: var(--atb-space-4);

                    &::marker,
                    &::-webkit-details-marker {
                        display: none;
                    }

                    &> :where(h1, h2, h3, h4, h5, h6, p, div:not(.atb-faq-icon)) {
                        margin: 0;
                        padding: 0;
                        font-weight: 700;
                        font-size: 1rem;
                        text-wrap: balance;
                    }

                    .atb-faq-icon {
                        transition: transform 0.3s ease;
                    }
                }


                .atb-faq-answer {}
            }
        }
    }

    &.rotate-icon {
        .atb-faq-list {
            .atb-faq-item {
                details.active {
                    .atb-faq-question {
                        .atb-faq-icon {
                            transform: rotate(90deg);
                        }
                    }
                }
            }
        }
    }
}

.atb-card-lateral {
    display: flex;
    flex-wrap: wrap;
    list-style: none !important;
    padding: 0 !important;
    --atb-column-min-width: 250px;
    --atb-column-gap: 1rem;
    gap: var(--atb-column-gap, 0rem);

    .atb-card-lateral__item {
        flex: var(--atb-column-weight, 6) 1 calc(clamp(var(--atb-column-min-width, 250px), calc((100% / 12) * var(--atb-column-weight, 6)), 100%) - var(--atb-column-gap, 0rem));

        display: flex;
        gap: var(--atb-space-4);
        align-items: flex-start;

        .atb-image-wrapper {
            width: 9rem;
            min-width: 9rem;
            max-width: 100%;
            height: auto;
            aspect-ratio: 1 / 1;

            img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                border-radius: var(--atb-radius-lg);
            }
        }

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

    }
}

/* Enveloppe de conditions au niveau bloc (étage client).
   display:contents = transparente pour la mise en page une fois révélée. */
.atb-cond-wrap {
    display: contents;
}

.atb-cond-wrap[hidden] {
    display: none;
}