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

/* Rayon des conteneurs (ligne, colonne, groupe, élément, item, slide…) : lu par
   `border-radius: var(--border-radius, 0)`. Enregistrée NON héritée (15/09/2026)
   pour que le rayon d'une ligne ne descende pas dans ses colonnes — c'est ce
   que faisait auparavant un `--border-radius: 0rem` écrit inline sur chaque
   conteneur, qui empêchait du même coup toute classe utilitaire (atb-card,
   atb-rounded-*) de poser un rayon. Les templates n'émettent plus la variable
   que si le champ est saisi ; le champ (inline) garde la priorité sur la classe.
   Sans @property (Safari < 16.4) : le rayon d'un parent hériterait — même
   seuil que le nesting CSS déjà employé partout. */
@property --border-radius {
    syntax: '*';
    inherits: false;
}

/* Marge haute par défaut des lignes : le champ Espacement des lignes émet
   `margin-top: var(--atb-row-mt, 0px)` (rows.json, default_margin), ce qui
   laisse une classe utilitaire (atb-card-lift) décaler une ligne sans se
   battre avec la classe scopée. Non héritée : une ligne imbriquée ne suit pas. */
@property --atb-row-mt {
    syntax: '*';
    inherits: false;
}

/* Largeur maxi posée par at_dimensions (`--atgf-max-w`, à côté de max-width) : relue par les
   lignes d'une section en Flex (atb-placement.css), dont la règle d'hôte est plus forte que la
   classe de l'outil. Non héritée : la largeur maxi d'une section ne descend pas dans ses lignes. */
@property --atgf-max-w {
    syntax: '*';
    inherits: false;
}

@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;

    /* Largeurs de contenu des lignes (jetons `width` du Design, at_dimensions M3) : une fois reprises par le
       Design du site, root.css les réécrit en `var(--atgf-width-*, valeur)`. Les anciennes surcharges locales
       (`--row-s-w`, `--row-l-w`, `--row-mw`…) gardent la main sur elles. */
    --atb-width-small: 950px;
    --atb-width-medium: 1150px;
    --atb-width-large: 1340px;
    --atb-width-full: 100%;
    --atb-width-screen: 90%;

    /* É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', system-ui, sans-serif;   /* piles de repli : un site sans la police ne tombe pas en serif par défaut */
    --atb-font-body: 'Open Sans', system-ui, sans-serif;
    --atb-font-condensed: 'Roboto Condensed', system-ui, sans-serif;

    /* É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-tighter: 1.1;   /* titres gras multi-lignes (h1 de hero : 1.05) */
    --atb-leading-tight: 1.2;
    --atb-leading-snug: 1.4;
    --atb-leading-normal: 1.5;
    --atb-leading-relaxed: 1.6;

    /* Tailles de texte — échelle Tailwind (font-size / line-height associé).
       L'interligne de chaque taille est celui de Tailwind ; il reste surchargeable
       par les utilitaires .atb-leading-*. */
    --atb-text-xs: 0.75rem;     --atb-text-xs-lh: 1rem;
    --atb-text-sm: 0.875rem;    --atb-text-sm-lh: 1.25rem;
    --atb-text-base: 1rem;      --atb-text-base-lh: 1.5rem;
    --atb-text-lg: 1.125rem;    --atb-text-lg-lh: 1.75rem;
    --atb-text-xl: 1.25rem;     --atb-text-xl-lh: 1.75rem;
    --atb-text-2xl: 1.5rem;     --atb-text-2xl-lh: 2rem;
    --atb-text-3xl: 1.875rem;   --atb-text-3xl-lh: 2.25rem;
    --atb-text-4xl: 2.25rem;    --atb-text-4xl-lh: 2.5rem;
    --atb-text-5xl: 3rem;       --atb-text-5xl-lh: 1;
    --atb-text-6xl: 3.75rem;    --atb-text-6xl-lh: 1;
    --atb-text-7xl: 4.5rem;     --atb-text-7xl-lh: 1;
    --atb-text-8xl: 6rem;       --atb-text-8xl-lh: 1;
    --atb-text-9xl: 8rem;       --atb-text-9xl-lh: 1;

    /* 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-shadow-xl: 0 24px 56px rgba(0, 0, 0, 0.16);
    --atb-border-color: color-mix(in srgb, var(--atb-neutral) 12%, transparent);
    --atb-border-width: 1px;
    --atb-radius-2xl: 2rem;

    /* Jetons de composants — ce que les thèmes (assets/css/themes/*.css, docs/themes.md)
       redéfinissent pour changer l'allure des blocs sans toucher aux templates. Chaque
       usage garde sa valeur historique en repli : sans thème, rien ne bouge.
       - surfaces : `--atb-surface-soft` = fond gris des cartes de listes et de la FAQ ;
       - `--atb-card-radius` / `--atb-card-border` / `--atb-card-shadow` : cartes de listes,
         FAQ, solutions ;
       - `--atb-icon-tile-*` : la tuile derrière l'icône des points forts ;
       - `--atb-bg-<couleur>` / `--atb-text-<couleur>` : indirection posée par le rendu
         quand un fond ou une couleur de texte saisi correspond à une couleur de la
         palette (Helpers::css_color). Un thème sombre remplace ainsi les fonds blancs
         par de l'anthracite sans toucher aux textes « clairs ». */
    --atb-surface-soft: color-mix(in srgb, var(--atb-neutral) 5%, transparent);
    --atb-card-radius: var(--atb-radius);
    --atb-card-border: 0 solid transparent;
    --atb-card-shadow: none;
    --atb-icon-tile-bg: #D8F1F7;
    --atb-icon-tile-radius: var(--atb-radius);
    --atb-faq-radius: 15px;
    --atb-card-image-radius: var(--atb-radius-lg);
    --atb-list-title-weight: 700;
    --atb-list-text-weight: 300;

    /* Rôles de fond (champ « Rôle du fond » des conteneurs, docs/themes.md) : le thème choisit la couleur
       et le décor ; ici, les valeurs du rendu naturel — celles qu'Univerture saisissait en hex. */
    --atb-role-soft-bg: color-mix(in oklab, var(--atb-grey) 10%, transparent); /* même mélange que l'hex@10 % des templates : migration sans changement */
    --atb-role-brand-bg: var(--atb-primary);
    --atb-role-brand-text: var(--atb-light);
    --atb-role-dark-bg: var(--atb-neutral);
    --atb-role-dark-text: var(--atb-light);

    /* Utilitaires (échelle Tailwind renommée) — à ajuster site par site */
    --atb-header-offset: 100px;          /* hauteur de l'en-tête fixe : ancres (scroll-mt) et éléments collants (sticky) */
    --atb-tracking-tight: -0.025em;
    --atb-tracking-normal: 0;
    --atb-tracking-wide: 0.025em;
    --atb-tracking-wider: 0.05em;
    --atb-tracking-widest: 0.1em;
    --atb-blur-sm: 4px;
    --atb-blur: 8px;
    --atb-blur-lg: 16px;
    --atb-columns-gap: var(--atb-space-8);  /* gouttière des textes multi-colonnes */
    --atb-z-10: 10;
    --atb-z-20: 20;
    --atb-z-30: 30;
    --atb-z-40: 40;
    --atb-z-50: 50;
}

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

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

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


.atb-title-zone {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;

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

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

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

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

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


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

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

    }

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

    /* Largeur de la taille choisie, aussi en variable : le placement des lignes d'une section
       (atb-placement.css) la reprend comme maxi par défaut d'une ligne élément. */
    --atb-row-maxw: var(--row-w, var(--atb-width-medium, 1150px));
    max-width: var(--atb-row-maxw);
    width: var(--row-mw, var(--atb-width-screen, 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 {
        --atb-row-maxw: var(--row-s-w, var(--atb-width-small, 950px));
        max-width: var(--atb-row-maxw);
    }

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

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

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

    &.row-full {
        --atb-row-maxw: var(--atb-width-full, 100%);
        width: 100%;
        max-width: var(--atb-row-maxw);
    }

    .atb-column {
        container-type: inline-size;
        container-name: atb-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;
        /* Le poids EFFECTIF : celui du champ (ou de `atb-col-N`), remplacé sous
           768px par « Poids sous 768px » s'il est renseigné. Une variable
           intermédiaire, pas une auto-référence (qui serait un cycle, donc
           invalide). Sans réglage, rien ne change : même poids, `order: 0`,
           `align-self: auto`. */
        --atb-column-weight-eff: var(--atb-column-weight, 6);
        align-self: var(--atb-column-align, auto);
        flex: var(--atb-column-weight-eff, 6) 1 calc(clamp(var(--atb-column-min-width, 250px), calc((100% / 12) * var(--atb-column-weight-eff, 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;

        @media (max-width: 768px) {
            --atb-column-weight-eff: var(--atb-column-weight-sm, var(--atb-column-weight, 6));
            order: var(--atb-column-order-sm, 0);
        }
        /* 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;
        }
    }
}


/* --- Boîte de disposition (lignes et groupes à deux niveaux) --------------
   Contrat de balisage : `.atb-row` > `.atb-row__layout` > `.atb-column`, idem
   `.atb-group` > `.atb-group__layout` > `.atb-element`. La BOÎTE garde tout ce qui
   la fait exister — taille, fond, espacement, conteneur de requêtes, CSS perso,
   variables — et reste flex : son unique enfant, la disposition, la remplit. La
   DISPOSITION porte la
   mécanique (flex, grille du placement, justify / align / row-gap) et lit les
   variables d'écart par héritage. Jamais conteneur de requêtes, overflow ni
   transform sur la disposition : les points « conteneur » du placement mesurent
   la boîte, et une colonne collante garde la course de la ligne. */
.atb-row__layout,
.atb-group__layout {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    box-sizing: border-box;
}

.atb-row__layout {
    column-gap: var(--atb-column-gap, 0rem);
    row-gap: var(--atb-columns-wrap-gap, 2rem);
}

.atb-group__layout {
    column-gap: var(--atb-group-gap, 0rem);
    row-gap: var(--atb-group-gap, 2rem);
}

.atb-row > .atb-row__layout,
.atb-group > .atb-group__layout {
    flex: 1 1 100%;
    width: 100%;
    min-width: 0;
    max-width: 100%;
}


/* --- « Idéalement » (colonnes, éléments de groupe) ------------------------
   Case des réglages : la colonne ne demande que sa largeur mini pour le calcul
   du passage à la ligne (base 0 %, `min-width` inchangé) et reçoit EN PRIORITÉ la
   place libre (croissance = poids × 1000) : grand écran = son poids ; à l'étroit,
   elle cède jusqu'à son mini avant qu'une colonne ne passe à la ligne ; seule sur
   sa ligne, pleine largeur. Dans une ligne qui en contient une, les autres
   retirent leur part EXACTE des écarts (gap × (12 − poids) / 12, au lieu d'un
   écart entier) : sans quoi l'écart laissé libre irait tout entier à la colonne
   cochée. Lignes sans case : rien ne change. Banc et chiffres : docs/colonnes.md. */

.atb-row .atb-column.atb-column--ideal {
    flex: calc(var(--atb-column-weight-eff, 6) * 1000) 1 0%;
}

.atb-row__layout:has(> .atb-column--ideal, > .atb-cond-wrap > .atb-column--ideal) > .atb-column:not(.atb-column--ideal),
.atb-row__layout:has(> .atb-column--ideal, > .atb-cond-wrap > .atb-column--ideal) > .atb-cond-wrap > .atb-column:not(.atb-column--ideal) {
    flex-basis: clamp(var(--atb-column-min-width, 250px), calc((100% / 12) * var(--atb-column-weight-eff, 6) - var(--atb-column-gap, 0rem) * (12 - var(--atb-column-weight-eff, 6)) / 12), 100%);
}

/* at_placement (grille, pleine ligne, masqué, lignes incomplètes) : atb-placement.css,
   feuille commune au front et à l'aperçu de l'éditeur. */

.atb-group .atb-element.atb-element--ideal {
    flex: calc(var(--atb-element-weight-eff, 6) * 1000) 1 0%;
}

.atb-group__layout:has(> .atb-element--ideal, > .atb-cond-wrap > .atb-element--ideal) > .atb-element:not(.atb-element--ideal),
.atb-group__layout:has(> .atb-element--ideal, > .atb-cond-wrap > .atb-element--ideal) > .atb-cond-wrap > .atb-element:not(.atb-element--ideal) {
    flex-basis: clamp(var(--atb-element-min-width, 250px), calc((100% / 12) * var(--atb-element-weight-eff, 6) - var(--atb-group-gap, 0rem) * (12 - var(--atb-element-weight-eff, 6)) / 12), 100%);
}

.atb-group {
    container-type: inline-size;
    container-name: atb-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(--atgf-max-w, var(--group-s-w, 950px));
    }

    &.group-medium {
        max-width: var(--atgf-max-w, var(--group-m-w, 1150px)); /* Dimensions › largeur maxi (--atgf-max-w) l'emporte (05/10) */
    }

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

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

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

    .atb-element {
        container-type: inline-size;
        container-name: atb-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;
        /* Idem .atb-column : poids effectif, remplacé sous 768px par « Poids
           sous 768px » ; ordre et alignement par variables, inertes sans réglage. */
        --atb-element-weight-eff: var(--atb-element-weight, 6);
        align-self: var(--atb-element-align, auto);
        flex: var(--atb-element-weight-eff, 6) 1 calc(clamp(var(--atb-element-min-width, 250px), calc((100% / 12) * var(--atb-element-weight-eff, 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;

        @media (max-width: 768px) {
            --atb-element-weight-eff: var(--atb-element-weight-sm, var(--atb-element-weight, 6));
            order: var(--atb-element-order-sm, 0);
        }
        /* 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;
}


/* Bloc Marquee — bandeau défilant.

   La mécanique (structure .at-marquee-wrapper > .track > .content, animation,
   copies, pauses) vient d'attps-get-field : le moteur Bandeau du noyau
   (atgf-placement-rt.js) la prend en charge d'après les attributs data-* posés
   par le template. Il ne reste ici que la mise en ligne du contenu, les blocs du
   builder étant empilés verticalement par défaut. */
.atb-marquee {
    /* Le contenu déborde par construction : sans ça, il déborderait aussi de
       l'arrondi et du fond du bloc. */
    overflow: hidden;
    width: 100%;

    .content {
        display: flex;
        align-items: center;
        gap: var(--atb-marquee-gap, 0.5rem);
        /* L'écart de fin appartient à la copie : deux copies qui se suivent
           gardent alors le même écart entre elles qu'entre leurs blocs, et
           toutes les copies font exactement la même largeur — condition du
           raccord invisible à -50 % (mode répétition). */
        padding-right: var(--atb-marquee-gap, 2rem);
    }
}


.atb-section {
    container-type: inline-size;
    container-name: atb-section;
    /* Couleur de texte de la section : la variable se propage aux lignes et
       colonnes, qui gardent la main si elles ont la leur. Sans réglage, un THÈME
       pose la sienne (--atb-section-color, posée sur html) ; basique hérite du site. */
    color: var(--text-color, var(--atb-section-color, inherit));

    &>* {
        --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 depuis l'éditeur, dans le champ Espacement de la
       section, sans toucher aux contenus ni à cette feuille. */

    display: flex;
    flex-direction: column;
    /* Sur une ligne (défaut du flex, dit explicitement : le placement des lignes, hôte Flex, ne
       le remet pas à « à la ligne »). */
    flex-wrap: nowrap;
    /* 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. Écart des colonnes : celui du
       placement des lignes (lignes côte à côte, grille), 0 sans réglage. */
    row-gap: 0;
    column-gap: var(--atb-srows-gap, 0px);
    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-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;
}

/* Une modale (dialog / popover) n'occupe pas le flux, mais elle compte pour
   `:last-child` : un burger suivi de sa modale gardait sa marge de fin de
   série, et la ligne du header prenait 1rem de trop. Le dernier bloc VISIBLE
   est celui qui précède les modales de fin de colonne. */
.atb-column>:has(+ .atb-modal:last-child),
.atb-element>:has(+ .atb-modal:last-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;
    }
}

/* Deux niveaux : la disposition ne fait pas écran (pas de contexte d'empilement), ce sont
   ses enfants — chaque colonne, chaque élément — qui passent au-dessus du calque, avec la
   spécificité de la règle ci-dessus (`:where`) pour qu'un utilitaire garde la main. */
.atb-row--bg-images > .atb-row__layout,
.atb-group--bg-images > .atb-group__layout {
    z-index: auto;
}

.atb-row--bg-images > :where(.atb-row__layout) > *,
.atb-group--bg-images > :where(.atb-group__layout) > * {
    position: relative;
    z-index: 1;
}

/* Fond (at_background) : même contrat pour un conteneur dont le Fond a une image ou une vidéo (`atb-has-bg-image`,
   posée par Helpers::background) — ses enfants passent au-dessus des décors `::before` / `::after` (voiles des slides,
   cartes, CSS perso), comme sous l'ancien système ; le calque `.atgf-bg` n'est pas visé (spécificités identiques à
   l'ancien : 0-1-0). */
.atb-has-bg-image > :where(:not(.atgf-bg)) {
    position: relative;
    z-index: 1;
}

:is(.atb-row, .atb-group).atb-has-bg-image > :where(.atb-row__layout, .atb-group__layout) {
    z-index: auto;
}

.atb-has-bg-image > :where(.atb-row__layout, .atb-group__layout) > * {
    position: relative;
    z-index: 1;
}

/* Enveloppe des icônes, produite par `Icon_Options::wrap()` du champ at_icon.
   Un seul vocabulaire, celui du plugin — même parti pris que pour at_button :
   le site fournit ses VALEURS, il ne remappe pas les classes. `--dashicons` et
   `--media` remplacent les anciens `type-dashicons` / `type-media_library`. */
.atgf-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    &.atgf-icon--dashicons {


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

    &.atgf-icon--media {

        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. */


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


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

    /* Ancien balisage (<img> nu) ; l'image d'at_image règle elle-même son remplissage (variable du cadrage). */
    img:not(.atgf-img__img) {
        max-width: 100%;
        height: auto;
        object-fit: contain;
    }
}

/* at_image dans un bloc Image (lot I5) : la figure et sa boîte épousent l'enveloppe du bloc, pour que les règles
   écrites pour l'ancienne <img> nue (CSS perso `& img { width: 100%; height: 100% }`, « remplit la case », cartes)
   se résolvent sur la même boîte qu'avant. L'image, elle, garde sa taille naturelle tant qu'aucun ratio ni règle ne
   la dimensionne ; l'alignement d'at_image ramène la figure à la largeur de l'image. */
.atb-image-wrapper > .atgf-img {
    width: 100%;
    height: 100%;
}

.atb-image-wrapper > .atgf-img > .atgf-img__box {
    height: 100%;
}

/* Classes « Image : … » d'at_classes posées sur un bloc Image (25/09/2026) :
   elles tombent sur l'enveloppe, c'est son <img> qu'elles doivent régler. */
.atb-image-wrapper[class*="atb-object-"] img {
    object-position: inherit;
}

/* « Image : remplit la case » : le bloc prend toute la hauteur de sa colonne
   (tuile d'un bento, colonne étirée) et la photo s'y recadre. L'image est hors
   flux : elle ne dicte pas la hauteur de la case. Hors d'une boîte à hauteur
   définie, un minimum (--atb-image-fill-min) évite un bloc de 0 px. */
/* Même chose depuis l'outil Image : Cadrage › Ratio « Remplir » (classe atgf-img--fill, audit 02/10 E4), ou depuis Style ›
   Dimensions › Ratio « Remplir » d'un bloc Image (classe atgf-dim-fill, B3-06). */
.atb-image-wrapper.atb-image-fill,
.atb-image-wrapper.atgf-dim-fill,
.atb-image-wrapper:has(> .atgf-img--fill) {
    position: relative;
    flex: 1 1 auto;
    align-self: stretch;
    width: 100%;
    height: 100%;
    min-height: var(--atb-image-fill-min, 10rem);
    overflow: hidden;
}

.atb-image-wrapper.atb-image-fill img,
.atb-image-wrapper.atgf-dim-fill img,
.atb-image-wrapper:has(> .atgf-img--fill) img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
}

.atb-image-wrapper.atb-object-cover img {
    object-fit: cover;
}

.atb-image-wrapper.atb-object-contain img {
    object-fit: contain;
}

.atb-image-wrapper.atb-object-fill img {
    object-fit: fill;
}

.atb-image-wrapper.atb-object-none img {
    object-fit: none;
}


.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 {
            .atgf-icon {
                display: flex;
                justify-content: center;
                align-items: center;
                aspect-ratio: 1 / 1;
                padding: 0.6rem;
                background-color: var(--atb-icon-tile-bg);
                border-radius: var(--atb-icon-tile-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: var(--atb-list-title-weight);
            color: inherit;
            line-height: var(--atb-leading-tight);
        }

        .atb-points-fort__text {
            font-size: 0.75rem;
            font-weight: var(--atb-list-text-weight);
            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: var(--atb-surface-soft);
        border-radius: var(--atb-card-radius);
        border: var(--atb-card-border);
        box-shadow: var(--atb-card-shadow);
        padding: 1.5rem;

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

                &>* {
                    --size: 4.5rem;
                    width: var(--size);
                    height: var(--size);
                    font-size: calc(var(--size) * 0.8);
                }
            }
        }
    }

    .atb-solutions-list__content {
        .atb-solutions-list__title {
            font-size: 0.875rem;
            font-weight: var(--atb-list-title-weight);
            color: var(--atb-text-secondary, var(--atb-secondary));
            line-height: var(--atb-leading-tight);
            margin-bottom: 0.5rem;
        }

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

        }
    }

}


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


                    .atgf-icon {
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        width: 6.25rem;
                        height: auto;
                        aspect-ratio: 1 / 1;
                        padding: 0.6rem;
                        font-size: 2.8rem; /* une dashicon se dimensionne par la taille de police */
                        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 {

                        .atgf-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;
                /* Héritée (et non --atb-light en dur) : le rendu est pensé pour une section sombre à texte clair,
                   mais posé sur une section claire il devenait illisible (banc-limites, 1,13:1). */
                color: inherit;
                line-height: var(--atb-leading-tight);
            }

            .atb-project-steps__text {
                font-size: 0.75rem;
                font-weight: 300;
                color: inherit;
                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 {
    /* `--atb-list-cols` (depuis column_size : 12 → 1, 6 → 2, 4 → 3) et les
       variables d'icône sont posées inline par icons-list.tpl.php ; en dessous
       de 420px de colonne la liste repasse sur une colonne. */
    list-style: none !important;
    padding: 0 !important;
    display: grid;
    grid-template-columns: repeat(var(--atb-list-cols, 1), minmax(0, 1fr));
    gap: var(--atb-space-4) var(--atb-space-6);

    @container atb-column (max-width: 420px) {
        grid-template-columns: 1fr;
    }

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

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

                &>* {
                    width: var(--atb-list-icon-size, 2.188rem);
                    height: var(--atb-list-icon-size, 2.188rem);
                }
            }
        }

        .atb-list-simple__content {

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

            }
        }
    }
}

/* Liste placée (at_placement) : la BOÎTE du bloc est le conteneur mesuré par les points
   « conteneur » — la liste réagit à l'espace qu'elle occupe réellement (tuile de bento,
   carte, réponse de FAQ), pas à sa colonne. Un conteneur de requêtes ne prend jamais la
   largeur de son contenu (« au contenu », il tomberait à 0) : la boîte est donc toujours
   étirée, ce qu'une liste fait de toute façon. Classe doublée : gagne sur un utilitaire
   d'alignement posé sur le bloc. */
.atb-list-box.atb-list-box {
    container-type: inline-size;
    align-self: stretch;
    justify-self: stretch;
}

/* Liste à icônes : taille (icon_size, at_size → --atb-list-icon-size, par point) et couleur (icon_color, at_color)
   réglées sur le bloc, pour TOUS les rendus (liste simple, points forts, étapes, solutions, chiffres, frise) et toutes
   les sources d'icône : la case ET le glyphe — une icône de police (Font Awesome, Dashicons) suit `font-size`, pas la
   largeur de sa boîte (Valère 05/10 : la zone grandissait, pas l'icône). Classes posées seulement quand c'est réglé :
   sans réglage, chaque rendu garde sa taille et l'icône sa couleur propre. Classes répétées (7) : gagnent sur les règles
   imbriquées des rendus (étapes du projet : 6 niveaux). */
.atb-icons-list--icon-size.atb-icons-list--icon-size.atb-icons-list--icon-size.atb-icons-list--icon-size .atgf-icon.atgf-icon.atgf-icon {
    flex: none; /* étapes du projet : le rond la comprimait (45 px pour 48) */
    width: var(--atb-list-icon-size);
    height: var(--atb-list-icon-size);
    font-size: var(--atb-list-icon-size);
    line-height: 1;
}

.atb-icons-list--icon-size.atb-icons-list--icon-size.atb-icons-list--icon-size.atb-icons-list--icon-size .atgf-icon.atgf-icon.atgf-icon > * {
    --size: var(--atb-list-icon-size);
    width: 100%;
    height: 100%;
    font-size: var(--atb-list-icon-size);
    line-height: 1;
}

.atb-icons-list--icon-size.atb-icons-list--icon-size.atb-icons-list--icon-size.atb-icons-list--icon-size .atgf-icon.atgf-icon.atgf-icon > :is(i, .dashicons)::before {
    font-size: inherit;
}

/* Frise : le rond suit l'icône (2 rem pour 1 rem par défaut) ; le rail et la colonne le lisent aussi. */
.atb-icons-list--icon-size .atb-timeline.atb-timeline {
    --atb-timeline-marker: calc(var(--atb-list-icon-size) * 2);
}

.atb-icons-list--icon-color.atb-icons-list--icon-color.atb-icons-list--icon-color.atb-icons-list--icon-color .atgf-icon.atgf-icon.atgf-icon,
.atb-icons-list--icon-color.atb-icons-list--icon-color.atb-icons-list--icon-color.atb-icons-list--icon-color .atgf-icon.atgf-icon.atgf-icon > * {
    color: var(--atb-list-icon-color);
}

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

/* Plusieurs boutons : en ligne, à la suite, avec retour à la ligne. Une liste d'un
   seul bouton garde son rendu en bloc (l'alignement texte du conteneur la centre
   comme avant) : `:has()` évite de toucher aux pages existantes. */
.atb-buttons-list:has(> li + li) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--atb-space-3);
}
.atb-buttons-list.atb-text-center:has(> li + li),
.atb-text-center > .atb-buttons-list:has(> li + li) {
    justify-content: center;
}
.atb-buttons-list.atb-text-right:has(> li + li) {
    justify-content: flex-end;
}


.atb-title-zone {}

/* Rôles de fond : posés par les templates (classe atb-bg-role--<rôle>) quand le champ « Rôle du fond » est
   renseigné ; la couleur saisie n'est alors pas émise. Un thème redéfinit les jetons --atb-role-* et ajoute
   son décor sous html[data-atb-theme="x"] .atb-bg-role--brand, etc. La double classe (0-2-0) fait gagner la
   couleur du rôle sur celle des conteneurs imbriqués (`.atb-row .atb-column { color: var(--text-color…) }`). */
.atb-bg-role.atb-bg-role--soft {
    background: var(--atb-role-soft-bg);   /* raccourci : un thème peut y mettre un dégradé */
    /* Pas de --atb-role-soft-text par défaut : « inherit » dans une variable ferait hériter du thème hôte (Divi #666)
       au lieu de la couleur de section du thème. */
    color: var(--atb-role-soft-text, var(--text-color, var(--atb-section-color, inherit)));
}
.atb-bg-role.atb-bg-role--brand {
    background: var(--atb-role-brand-bg);
    color: var(--atb-role-brand-text);
    --atb-title-color: currentColor;
}
.atb-bg-role.atb-bg-role--dark {
    background: var(--atb-role-dark-bg);
    color: var(--atb-role-dark-text);
    --atb-title-color: currentColor;
}
/* Sur un fond sombre ou de marque, un texte en couleur primaire s'éclaircit, un sous-titre ou un bouton
   de contour prend la couleur du rôle (sinon un thème à primaire foncée devient illisible). */
html[data-atb-theme]:not([data-atb-theme="classic"]) :is(.atb-bg-role--dark, .atb-text-light, .atb-bg-tone--dark, [style*="--text-color: var(--atb-text-light"]) :is(.atb-text-primary, .atb-text-blue):not(.atb-surtitle) {
    color: var(--atb-primary-ink-dark, color-mix(in oklab, var(--atb-primary) 55%, white));
}
html[data-atb-theme]:not([data-atb-theme="classic"]) :is(.atb-bg-role--dark, .atb-bg-role--brand) :is(.atb-subtitle, .atb-surtitle:not(.atb-text-primary)) {
    color: inherit;
    opacity: 0.85;
}
html[data-atb-theme]:not([data-atb-theme="classic"]) .atb-bg-role--dark .at-btn:where(.at-btn-outline, .at-btn-ghost) {
    --at-btn-current: var(--atb-role-dark-text);
    --at-light: var(--atb-role-dark-bg); /* texte du survol : le bouton s'inverse (fond clair, texte sombre) au lieu de disparaître */
}
/* Sur un fond sombre, de marque ou « texte clair », les utilitaires de texte « encre » (neutre, secondaire, gris,
   sombre — et leurs variantes douces) prennent la couleur du contexte : un texte gris doux saisi par l'auteur reste
   un texte doux, mais lisible. On vise les utilitaires eux-mêmes, pas les jetons --atb-text-* : une carte ou une FAQ
   posée sur le bandeau garde ainsi son encre sur sa propre surface. Basique n'est pas concerné (rendu naturel). */
html[data-atb-theme]:not([data-atb-theme="classic"]) .atb-bg-role--dark :is(.atb-text-neutral, .atb-text-secondary, .atb-text-grey, .atb-text-dark, .atb-title-zone.atb-text-dark .atb-title) { color: var(--atb-role-dark-text); }
html[data-atb-theme]:not([data-atb-theme="classic"]) .atb-bg-role--brand :is(.atb-text-neutral, .atb-text-secondary, .atb-text-grey, .atb-text-dark, .atb-title-zone.atb-text-dark .atb-title) { color: var(--atb-role-brand-text); }
html[data-atb-theme]:not([data-atb-theme="classic"]) :is(.atb-text-light, .atb-bg-tone--dark, [style*="--text-color: var(--atb-text-light"]):not(.atb-bg-role) :is(.atb-text-neutral, .atb-text-secondary, .atb-text-grey, .atb-text-dark, .atb-title-zone.atb-text-dark .atb-title) { color: var(--atb-text-light, var(--atb-light)); }
html[data-atb-theme]:not([data-atb-theme="classic"]) .atb-bg-role--dark :is(.atb-text-neutral-soft, .atb-text-secondary-soft, .atb-text-grey-soft) { color: color-mix(in srgb, var(--atb-role-dark-text) var(--atb-soft-mix, 60%), transparent); }
html[data-atb-theme]:not([data-atb-theme="classic"]) .atb-bg-role--brand :is(.atb-text-neutral-soft, .atb-text-secondary-soft, .atb-text-grey-soft) { color: color-mix(in srgb, var(--atb-role-brand-text) var(--atb-soft-mix, 60%), transparent); }
html[data-atb-theme]:not([data-atb-theme="classic"]) :is(.atb-text-light, .atb-bg-tone--dark, [style*="--text-color: var(--atb-text-light"]):not(.atb-bg-role) :is(.atb-text-neutral-soft, .atb-text-secondary-soft, .atb-text-grey-soft) { color: color-mix(in srgb, var(--atb-text-light, var(--atb-light)) var(--atb-soft-mix, 60%), transparent); }
/* …sauf dans un conteneur clair posé sur ce bandeau (fond saisi clair, rôle doux) : l'encre reprend ses droits. */
html[data-atb-theme]:not([data-atb-theme="classic"]) :is(.atb-bg-role--dark, .atb-bg-role--brand, .atb-text-light, .atb-bg-tone--dark, [style*="--text-color: var(--atb-text-light"]) :is(.atb-bg-tone--light, .atb-bg-role--soft) :is(.atb-text-neutral, .atb-text-dark) { color: var(--atb-text-neutral, var(--atb-neutral)); }
html[data-atb-theme]:not([data-atb-theme="classic"]) :is(.atb-bg-role--dark, .atb-bg-role--brand, .atb-text-light, .atb-bg-tone--dark, [style*="--text-color: var(--atb-text-light"]) :is(.atb-bg-tone--light) .atb-text-secondary:not(.atb-surtitle) { color: var(--atb-text-secondary, var(--atb-secondary)); }
html[data-atb-theme]:not([data-atb-theme="classic"]) :is(.atb-bg-role--dark, .atb-bg-role--brand, .atb-text-light, .atb-bg-tone--dark, [style*="--text-color: var(--atb-text-light"]) :is(.atb-bg-tone--light) .atb-text-grey:not(.atb-surtitle) { color: var(--atb-text-grey, var(--atb-grey)); }
html[data-atb-theme]:not([data-atb-theme="classic"]) :is(.atb-bg-role--dark, .atb-bg-role--brand, .atb-text-light, .atb-bg-tone--dark, [style*="--text-color: var(--atb-text-light"]) :is(.atb-bg-tone--light) .atb-text-neutral-soft { color: color-mix(in srgb, var(--atb-text-neutral, var(--atb-neutral)) var(--atb-soft-mix, 60%), transparent); }
html[data-atb-theme]:not([data-atb-theme="classic"]) :is(.atb-bg-role--dark, .atb-bg-role--brand, .atb-text-light, .atb-bg-tone--dark, [style*="--text-color: var(--atb-text-light"]) :is(.atb-bg-tone--light) .atb-text-secondary-soft:not(.atb-surtitle) { color: color-mix(in srgb, var(--atb-text-secondary, var(--atb-secondary)) var(--atb-soft-mix, 60%), transparent); }
html[data-atb-theme]:not([data-atb-theme="classic"]) :is(.atb-bg-role--dark, .atb-bg-role--brand, .atb-text-light, .atb-bg-tone--dark, [style*="--text-color: var(--atb-text-light"]) :is(.atb-bg-tone--light) .atb-text-grey-soft:not(.atb-surtitle) { color: color-mix(in srgb, var(--atb-text-grey, var(--atb-grey)) var(--atb-soft-mix, 60%), transparent); }
/* Un bouton PRIMAIRE posé sur le rôle « marque » (dont le fond est souvent la primaire) s'inverse : plein → fond
   « sur marque », texte « marque » ; contour / fantôme / doux → tracé et texte « sur marque ». Les autres couleurs
   gardent la leur (un accent sur la marque reste un accent). Basique n'est pas concerné (rendu naturel). */
html[data-atb-theme]:not([data-atb-theme="classic"]) .atb-bg-role--brand .at-btn.at-btn-primary:where(:not(.at-btn-outline):not(.at-btn-ghost):not(.at-btn-soft)) {
    --at-primary: var(--atb-role-brand-text);
    --at-on-primary: var(--atb-role-brand-bg);
}
html[data-atb-theme]:not([data-atb-theme="classic"]) .atb-bg-role--brand .at-btn.at-btn-primary:where(.at-btn-outline, .at-btn-ghost, .at-btn-soft) {
    --at-primary: var(--atb-role-brand-text);
    --at-on-primary: var(--atb-role-brand-bg);
    --at-light: var(--atb-role-brand-bg);
}
/* Lot L7 — sous un thème, les utilitaires de couleur lisent les dérivées calculées par le générateur (root.css) :
   `atb-text-<c>` = la couleur employée comme texte, poussée vers l'encre jusqu'à AA (`--atb-<c>-ink`) ; `atb-bg-<c>`
   pose aussi la couleur de texte « sur » ce fond (`--atb-on-<c>`). Repli = comportement d'aujourd'hui. Basique :
   rien (rendu naturel). Les utilitaires `atb-text-neutral` / `-grey` restent aux thèmes (encre, texte sourd). */
html[data-atb-theme]:not([data-atb-theme="classic"]) .atb-text-primary:not(.atb-surtitle) { color: var(--atb-primary-ink, var(--atb-primary)); }
html[data-atb-theme]:not([data-atb-theme="classic"]) .atb-text-primary-soft:not(.atb-surtitle) { color: color-mix(in srgb, var(--atb-primary-ink, var(--atb-primary)) var(--atb-soft-mix-color, 90%), transparent); }
html[data-atb-theme]:not([data-atb-theme="classic"]) .atb-text-secondary:not(.atb-surtitle) { color: var(--atb-secondary-ink, var(--atb-secondary)); }
html[data-atb-theme]:not([data-atb-theme="classic"]) .atb-text-secondary-soft:not(.atb-surtitle) { color: color-mix(in srgb, var(--atb-secondary-ink, var(--atb-secondary)) var(--atb-soft-mix-color, 90%), transparent); }
html[data-atb-theme]:not([data-atb-theme="classic"]) .atb-text-accent:not(.atb-surtitle) { color: var(--atb-accent-ink, var(--atb-accent)); }
html[data-atb-theme]:not([data-atb-theme="classic"]) .atb-text-accent-soft:not(.atb-surtitle) { color: color-mix(in srgb, var(--atb-accent-ink, var(--atb-accent)) var(--atb-soft-mix-color, 90%), transparent); }
html[data-atb-theme]:not([data-atb-theme="classic"]) .atb-text-info:not(.atb-surtitle) { color: var(--atb-info-ink, var(--atb-info)); }
html[data-atb-theme]:not([data-atb-theme="classic"]) .atb-text-info-soft:not(.atb-surtitle) { color: color-mix(in srgb, var(--atb-info-ink, var(--atb-info)) var(--atb-soft-mix-color, 90%), transparent); }
html[data-atb-theme]:not([data-atb-theme="classic"]) .atb-text-success:not(.atb-surtitle) { color: var(--atb-success-ink, var(--atb-success)); }
html[data-atb-theme]:not([data-atb-theme="classic"]) .atb-text-success-soft:not(.atb-surtitle) { color: color-mix(in srgb, var(--atb-success-ink, var(--atb-success)) var(--atb-soft-mix-color, 90%), transparent); }
html[data-atb-theme]:not([data-atb-theme="classic"]) .atb-text-warning:not(.atb-surtitle) { color: var(--atb-warning-ink, var(--atb-warning)); }
html[data-atb-theme]:not([data-atb-theme="classic"]) .atb-text-warning-soft:not(.atb-surtitle) { color: color-mix(in srgb, var(--atb-warning-ink, var(--atb-warning)) var(--atb-soft-mix-color, 90%), transparent); }
html[data-atb-theme]:not([data-atb-theme="classic"]) .atb-text-danger:not(.atb-surtitle) { color: var(--atb-danger-ink, var(--atb-danger)); }
html[data-atb-theme]:not([data-atb-theme="classic"]) .atb-text-danger-soft:not(.atb-surtitle) { color: color-mix(in srgb, var(--atb-danger-ink, var(--atb-danger)) var(--atb-soft-mix-color, 90%), transparent); }
html[data-atb-theme]:not([data-atb-theme="classic"]) .atb-bg-primary { color: var(--atb-on-primary, inherit); }
html[data-atb-theme]:not([data-atb-theme="classic"]) .atb-bg-accent { color: var(--atb-on-accent, inherit); }
html[data-atb-theme]:not([data-atb-theme="classic"]) .atb-bg-info { color: var(--atb-on-info, inherit); }
html[data-atb-theme]:not([data-atb-theme="classic"]) .atb-bg-success { color: var(--atb-on-success, inherit); }
html[data-atb-theme]:not([data-atb-theme="classic"]) .atb-bg-warning { color: var(--atb-on-warning, inherit); }
html[data-atb-theme]:not([data-atb-theme="classic"]) .atb-bg-danger { color: var(--atb-on-danger, inherit); }
/* Lot L7 — contexte inversé : sur un fond sombre en mode clair (rôle sombre, texte clair, fond saisi sombre) les couleurs
   employées comme texte lisent leur variante « encre sombre » (`--atb-<c>-ink-dark`, calculée contre le papier
   sombre du thème) ; sur une surface claire en mode sombre, la variante claire. Boutons (contour / fantôme / doux)
   et utilitaires `atb-text-<c>` suivent le même jeton. */
html[data-atb-theme]:not([data-atb-theme="classic"]) :is(.atb-bg-role--dark, .atb-text-light, .atb-bg-tone--dark, [style*="--text-color: var(--atb-text-light"]) .at-btn {
    --at-ink-primary: var(--atb-primary-ink-dark, var(--atb-primary));
    --at-ink-secondary: var(--atb-secondary-ink-dark, var(--atb-secondary));
    --at-ink-accent: var(--atb-accent-ink-dark, var(--atb-accent));
    --at-ink-info: var(--atb-info-ink-dark, var(--atb-info));
    --at-ink-success: var(--atb-success-ink-dark, var(--atb-success));
    --at-ink-warning: var(--atb-warning-ink-dark, var(--atb-warning));
    --at-ink-danger: var(--atb-danger-ink-dark, var(--atb-danger));
    --at-ink-neutral: var(--atb-neutral-ink-dark, var(--atb-neutral));
}
html[data-atb-theme]:not([data-atb-theme="classic"]) :is(.atb-bg-role--dark, .atb-text-light, .atb-bg-tone--dark, [style*="--text-color: var(--atb-text-light"]) :is(.atb-bg-tone--light) .at-btn,
html[data-atb-theme]:not([data-atb-theme="classic"])[data-atb-mode="dark"] :is(.atb-bg-tone--light) .at-btn {
    --at-ink-primary: var(--atb-primary-ink-light, var(--atb-primary));
    --at-ink-secondary: var(--atb-secondary-ink-light, var(--atb-secondary));
    --at-ink-accent: var(--atb-accent-ink-light, var(--atb-accent));
    --at-ink-info: var(--atb-info-ink-light, var(--atb-info));
    --at-ink-success: var(--atb-success-ink-light, var(--atb-success));
    --at-ink-warning: var(--atb-warning-ink-light, var(--atb-warning));
    --at-ink-danger: var(--atb-danger-ink-light, var(--atb-danger));
    --at-ink-neutral: var(--atb-neutral-ink-light, var(--atb-neutral));
}
html[data-atb-theme]:not([data-atb-theme="classic"]) :is(.atb-bg-role--dark, .atb-text-light, .atb-bg-tone--dark, [style*="--text-color: var(--atb-text-light"]) .atb-text-primary:not(.atb-surtitle) { color: var(--atb-primary-ink-dark, var(--atb-primary)); }
html[data-atb-theme]:not([data-atb-theme="classic"]) :is(.atb-bg-role--dark, .atb-text-light, .atb-bg-tone--dark, [style*="--text-color: var(--atb-text-light"]) .atb-text-primary-soft:not(.atb-surtitle) { color: color-mix(in srgb, var(--atb-primary-ink-dark, var(--atb-primary)) var(--atb-soft-mix-color, 90%), transparent); }
html[data-atb-theme]:not([data-atb-theme="classic"]) :is(.atb-bg-role--dark, .atb-text-light, .atb-bg-tone--dark, [style*="--text-color: var(--atb-text-light"]) :is(.atb-bg-tone--light) .atb-text-primary:not(.atb-surtitle), html[data-atb-theme]:not([data-atb-theme="classic"])[data-atb-mode="dark"] :is(.atb-bg-tone--light) .atb-text-primary:not(.atb-surtitle) { color: var(--atb-primary-ink-light, var(--atb-primary)); }
html[data-atb-theme]:not([data-atb-theme="classic"]) :is(.atb-bg-role--dark, .atb-text-light, .atb-bg-tone--dark, [style*="--text-color: var(--atb-text-light"]) .atb-text-secondary:not(.atb-surtitle) { color: var(--atb-secondary-ink-dark, var(--atb-secondary)); }
html[data-atb-theme]:not([data-atb-theme="classic"]) :is(.atb-bg-role--dark, .atb-text-light, .atb-bg-tone--dark, [style*="--text-color: var(--atb-text-light"]) .atb-text-secondary-soft:not(.atb-surtitle) { color: color-mix(in srgb, var(--atb-secondary-ink-dark, var(--atb-secondary)) var(--atb-soft-mix-color, 90%), transparent); }
html[data-atb-theme]:not([data-atb-theme="classic"]) :is(.atb-bg-role--dark, .atb-text-light, .atb-bg-tone--dark, [style*="--text-color: var(--atb-text-light"]) :is(.atb-bg-tone--light) .atb-text-secondary:not(.atb-surtitle), html[data-atb-theme]:not([data-atb-theme="classic"])[data-atb-mode="dark"] :is(.atb-bg-tone--light) .atb-text-secondary:not(.atb-surtitle) { color: var(--atb-secondary-ink-light, var(--atb-secondary)); }
html[data-atb-theme]:not([data-atb-theme="classic"]) :is(.atb-bg-role--dark, .atb-text-light, .atb-bg-tone--dark, [style*="--text-color: var(--atb-text-light"]) .atb-text-accent:not(.atb-surtitle) { color: var(--atb-accent-ink-dark, var(--atb-accent)); }
html[data-atb-theme]:not([data-atb-theme="classic"]) :is(.atb-bg-role--dark, .atb-text-light, .atb-bg-tone--dark, [style*="--text-color: var(--atb-text-light"]) .atb-text-accent-soft:not(.atb-surtitle) { color: color-mix(in srgb, var(--atb-accent-ink-dark, var(--atb-accent)) var(--atb-soft-mix-color, 90%), transparent); }
html[data-atb-theme]:not([data-atb-theme="classic"]) :is(.atb-bg-role--dark, .atb-text-light, .atb-bg-tone--dark, [style*="--text-color: var(--atb-text-light"]) :is(.atb-bg-tone--light) .atb-text-accent:not(.atb-surtitle), html[data-atb-theme]:not([data-atb-theme="classic"])[data-atb-mode="dark"] :is(.atb-bg-tone--light) .atb-text-accent:not(.atb-surtitle) { color: var(--atb-accent-ink-light, var(--atb-accent)); }
html[data-atb-theme]:not([data-atb-theme="classic"]) :is(.atb-bg-role--dark, .atb-text-light, .atb-bg-tone--dark, [style*="--text-color: var(--atb-text-light"]) .atb-text-info:not(.atb-surtitle) { color: var(--atb-info-ink-dark, var(--atb-info)); }
html[data-atb-theme]:not([data-atb-theme="classic"]) :is(.atb-bg-role--dark, .atb-text-light, .atb-bg-tone--dark, [style*="--text-color: var(--atb-text-light"]) .atb-text-info-soft:not(.atb-surtitle) { color: color-mix(in srgb, var(--atb-info-ink-dark, var(--atb-info)) var(--atb-soft-mix-color, 90%), transparent); }
html[data-atb-theme]:not([data-atb-theme="classic"]) :is(.atb-bg-role--dark, .atb-text-light, .atb-bg-tone--dark, [style*="--text-color: var(--atb-text-light"]) :is(.atb-bg-tone--light) .atb-text-info:not(.atb-surtitle), html[data-atb-theme]:not([data-atb-theme="classic"])[data-atb-mode="dark"] :is(.atb-bg-tone--light) .atb-text-info:not(.atb-surtitle) { color: var(--atb-info-ink-light, var(--atb-info)); }
html[data-atb-theme]:not([data-atb-theme="classic"]) :is(.atb-bg-role--dark, .atb-text-light, .atb-bg-tone--dark, [style*="--text-color: var(--atb-text-light"]) .atb-text-success:not(.atb-surtitle) { color: var(--atb-success-ink-dark, var(--atb-success)); }
html[data-atb-theme]:not([data-atb-theme="classic"]) :is(.atb-bg-role--dark, .atb-text-light, .atb-bg-tone--dark, [style*="--text-color: var(--atb-text-light"]) .atb-text-success-soft:not(.atb-surtitle) { color: color-mix(in srgb, var(--atb-success-ink-dark, var(--atb-success)) var(--atb-soft-mix-color, 90%), transparent); }
html[data-atb-theme]:not([data-atb-theme="classic"]) :is(.atb-bg-role--dark, .atb-text-light, .atb-bg-tone--dark, [style*="--text-color: var(--atb-text-light"]) :is(.atb-bg-tone--light) .atb-text-success:not(.atb-surtitle), html[data-atb-theme]:not([data-atb-theme="classic"])[data-atb-mode="dark"] :is(.atb-bg-tone--light) .atb-text-success:not(.atb-surtitle) { color: var(--atb-success-ink-light, var(--atb-success)); }
html[data-atb-theme]:not([data-atb-theme="classic"]) :is(.atb-bg-role--dark, .atb-text-light, .atb-bg-tone--dark, [style*="--text-color: var(--atb-text-light"]) .atb-text-warning:not(.atb-surtitle) { color: var(--atb-warning-ink-dark, var(--atb-warning)); }
html[data-atb-theme]:not([data-atb-theme="classic"]) :is(.atb-bg-role--dark, .atb-text-light, .atb-bg-tone--dark, [style*="--text-color: var(--atb-text-light"]) .atb-text-warning-soft:not(.atb-surtitle) { color: color-mix(in srgb, var(--atb-warning-ink-dark, var(--atb-warning)) var(--atb-soft-mix-color, 90%), transparent); }
html[data-atb-theme]:not([data-atb-theme="classic"]) :is(.atb-bg-role--dark, .atb-text-light, .atb-bg-tone--dark, [style*="--text-color: var(--atb-text-light"]) :is(.atb-bg-tone--light) .atb-text-warning:not(.atb-surtitle), html[data-atb-theme]:not([data-atb-theme="classic"])[data-atb-mode="dark"] :is(.atb-bg-tone--light) .atb-text-warning:not(.atb-surtitle) { color: var(--atb-warning-ink-light, var(--atb-warning)); }
html[data-atb-theme]:not([data-atb-theme="classic"]) :is(.atb-bg-role--dark, .atb-text-light, .atb-bg-tone--dark, [style*="--text-color: var(--atb-text-light"]) .atb-text-danger:not(.atb-surtitle) { color: var(--atb-danger-ink-dark, var(--atb-danger)); }
html[data-atb-theme]:not([data-atb-theme="classic"]) :is(.atb-bg-role--dark, .atb-text-light, .atb-bg-tone--dark, [style*="--text-color: var(--atb-text-light"]) .atb-text-danger-soft:not(.atb-surtitle) { color: color-mix(in srgb, var(--atb-danger-ink-dark, var(--atb-danger)) var(--atb-soft-mix-color, 90%), transparent); }
html[data-atb-theme]:not([data-atb-theme="classic"]) :is(.atb-bg-role--dark, .atb-text-light, .atb-bg-tone--dark, [style*="--text-color: var(--atb-text-light"]) :is(.atb-bg-tone--light) .atb-text-danger:not(.atb-surtitle), html[data-atb-theme]:not([data-atb-theme="classic"])[data-atb-mode="dark"] :is(.atb-bg-tone--light) .atb-text-danger:not(.atb-surtitle) { color: var(--atb-danger-ink-light, var(--atb-danger)); }
/* Fonds « surface » (secondaire, neutre, gris, clair) : le fond peint est un jeton de surface du thème, pas la couleur
   de palette — le texte prend noir ou blanc selon sa clarté, par couleur relative (repli : hérité). */
@supports (color: oklch(from red l c h)) {
    html[data-atb-theme]:not([data-atb-theme="classic"]) .atb-bg-secondary { color: oklch(from var(--atb-bg-secondary, var(--atb-secondary)) clamp(0, (0.62 - l) * 1e5, 1) 0 0 / 1); }
    html[data-atb-theme]:not([data-atb-theme="classic"]) .atb-bg-neutral { color: oklch(from var(--atb-bg-neutral, var(--atb-neutral)) clamp(0, (0.62 - l) * 1e5, 1) 0 0 / 1); }
    html[data-atb-theme]:not([data-atb-theme="classic"]) .atb-bg-grey { color: oklch(from var(--atb-bg-grey, var(--atb-grey)) clamp(0, (0.62 - l) * 1e5, 1) 0 0 / 1); }
}
/* Sur le rôle « marque », les boutons clairs (contour / fantôme / doux) écrivent avec la couleur « sur marque » : la
   bordure garde la couleur du bouton, le texte reste lisible sur une bande saturée. */
html[data-atb-theme]:not([data-atb-theme="classic"]) .atb-bg-role--brand .at-btn:where(.at-btn-outline, .at-btn-ghost, .at-btn-soft) { --at-btn-ink: var(--atb-role-brand-text); }
html[data-atb-theme]:not([data-atb-theme="classic"]) .atb-text-grey:not(.atb-surtitle) { color: var(--atb-grey-ink, var(--atb-grey)); }
html[data-atb-theme]:not([data-atb-theme="classic"]) .atb-text-grey-soft:not(.atb-surtitle) { color: color-mix(in srgb, var(--atb-grey-ink, var(--atb-grey)) var(--atb-soft-mix-color, 90%), transparent); }
html[data-atb-theme]:not([data-atb-theme="classic"]) :is(.atb-bg-role--dark, .atb-text-light, .atb-bg-tone--dark, [style*="--text-color: var(--atb-text-light"]) .atb-text-grey:not(.atb-surtitle) { color: var(--atb-grey-ink-dark, var(--atb-grey)); }
html[data-atb-theme]:not([data-atb-theme="classic"]) :is(.atb-bg-role--dark, .atb-text-light, .atb-bg-tone--dark, [style*="--text-color: var(--atb-text-light"]) .atb-text-grey-soft:not(.atb-surtitle) { color: color-mix(in srgb, var(--atb-grey-ink-dark, var(--atb-grey)) var(--atb-soft-mix-color, 90%), transparent); }
html[data-atb-theme]:not([data-atb-theme="classic"]) :is(.atb-bg-role--dark, .atb-text-light, .atb-bg-tone--dark, [style*="--text-color: var(--atb-text-light"]) :is(.atb-bg-tone--light) .atb-text-grey:not(.atb-surtitle), html[data-atb-theme]:not([data-atb-theme="classic"])[data-atb-mode="dark"] :is(.atb-bg-tone--light) .atb-text-grey:not(.atb-surtitle) { color: var(--atb-grey-ink-light, var(--atb-grey)); }
html[data-atb-theme]:not([data-atb-theme="classic"]) :is(.atb-bg-role--dark, .atb-text-light, .atb-bg-tone--dark, [style*="--text-color: var(--atb-text-light"]) .at-btn[style*="--at-btn-current"] { --at-btn-ink: var(--at-btn-ink-dark, var(--at-btn-current)); }
/* Dans un contexte sombre, le « clair » d'un bouton doux (son fond = 15 % de couleur sur --at-light) est le fond sombre
   lui-même : la teinte reste une teinte, sombre. Sur la bande de marque, le texte coloré passe en « sur marque ». */
html[data-atb-theme]:not([data-atb-theme="classic"]) :is(.atb-bg-role--dark, .atb-text-light, .atb-bg-tone--dark, [style*="--text-color: var(--atb-text-light"]) .at-btn { --at-light: var(--atb-role-dark-bg); }
html[data-atb-theme]:not([data-atb-theme="classic"]) .atb-bg-role--brand .at-btn.at-btn-soft { --at-light: var(--atb-role-brand-bg); }
html[data-atb-theme]:not([data-atb-theme="classic"]) .atb-bg-role--brand .atb-text-primary:not(.atb-surtitle) { color: var(--atb-role-brand-text); }
html[data-atb-theme]:not([data-atb-theme="classic"]) .atb-bg-role--brand .atb-text-primary-soft:not(.atb-surtitle) { color: color-mix(in srgb, var(--atb-role-brand-text) var(--atb-soft-mix-color, 90%), transparent); }
html[data-atb-theme]:not([data-atb-theme="classic"]) .atb-bg-role--brand .atb-text-secondary:not(.atb-surtitle) { color: var(--atb-role-brand-text); }
html[data-atb-theme]:not([data-atb-theme="classic"]) .atb-bg-role--brand .atb-text-secondary-soft:not(.atb-surtitle) { color: color-mix(in srgb, var(--atb-role-brand-text) var(--atb-soft-mix-color, 90%), transparent); }
html[data-atb-theme]:not([data-atb-theme="classic"]) .atb-bg-role--brand .atb-text-accent:not(.atb-surtitle) { color: var(--atb-role-brand-text); }
html[data-atb-theme]:not([data-atb-theme="classic"]) .atb-bg-role--brand .atb-text-accent-soft:not(.atb-surtitle) { color: color-mix(in srgb, var(--atb-role-brand-text) var(--atb-soft-mix-color, 90%), transparent); }
html[data-atb-theme]:not([data-atb-theme="classic"]) .atb-bg-role--brand .atb-text-info:not(.atb-surtitle) { color: var(--atb-role-brand-text); }
html[data-atb-theme]:not([data-atb-theme="classic"]) .atb-bg-role--brand .atb-text-info-soft:not(.atb-surtitle) { color: color-mix(in srgb, var(--atb-role-brand-text) var(--atb-soft-mix-color, 90%), transparent); }
html[data-atb-theme]:not([data-atb-theme="classic"]) .atb-bg-role--brand .atb-text-success:not(.atb-surtitle) { color: var(--atb-role-brand-text); }
html[data-atb-theme]:not([data-atb-theme="classic"]) .atb-bg-role--brand .atb-text-success-soft:not(.atb-surtitle) { color: color-mix(in srgb, var(--atb-role-brand-text) var(--atb-soft-mix-color, 90%), transparent); }
html[data-atb-theme]:not([data-atb-theme="classic"]) .atb-bg-role--brand .atb-text-warning:not(.atb-surtitle) { color: var(--atb-role-brand-text); }
html[data-atb-theme]:not([data-atb-theme="classic"]) .atb-bg-role--brand .atb-text-warning-soft:not(.atb-surtitle) { color: color-mix(in srgb, var(--atb-role-brand-text) var(--atb-soft-mix-color, 90%), transparent); }
html[data-atb-theme]:not([data-atb-theme="classic"]) .atb-bg-role--brand .atb-text-danger:not(.atb-surtitle) { color: var(--atb-role-brand-text); }
html[data-atb-theme]:not([data-atb-theme="classic"]) .atb-bg-role--brand .atb-text-danger-soft:not(.atb-surtitle) { color: color-mix(in srgb, var(--atb-role-brand-text) var(--atb-soft-mix-color, 90%), transparent); }
html[data-atb-theme]:not([data-atb-theme="classic"]) .atb-bg-role--brand .atb-text-neutral:not(.atb-surtitle) { color: var(--atb-role-brand-text); }
html[data-atb-theme]:not([data-atb-theme="classic"]) .atb-bg-role--brand .atb-text-neutral-soft:not(.atb-surtitle) { color: color-mix(in srgb, var(--atb-role-brand-text) var(--atb-soft-mix-color, 90%), transparent); }
html[data-atb-theme]:not([data-atb-theme="classic"]) .atb-bg-role--brand .atb-text-grey:not(.atb-surtitle) { color: var(--atb-role-brand-text); }
html[data-atb-theme]:not([data-atb-theme="classic"]) .atb-bg-role--brand .atb-text-grey-soft:not(.atb-surtitle) { color: color-mix(in srgb, var(--atb-role-brand-text) var(--atb-soft-mix-color, 90%), transparent); }
/* Sur un fond « marque », un texte en couleur primaire (surtitres, mots-clés) se fondrait dans le fond :
   il prend la couleur « sur marque ». */
.atb-bg-role--brand :is(.atb-text-primary, .atb-text-blue) {
    color: var(--atb-role-brand-text);
}

/* Toile de fond des THÈMES : un thème pose la couleur de page sur <body> (papier, ardoise, nuit),
   mais le thème WordPress peint souvent ses conteneurs en blanc (Divi : #main-content,
   .et_pb_section ; thèmes classiques : #content, .site-content…). Ceux qui contiennent du builder
   deviennent transparents pour que le fond de body porte. Basique n'est pas concerné. Un autre
   thème hôte : ajouter son conteneur dans le CSS libre des réglages. */
html[data-atb-theme]:not([data-atb-theme="classic"]) :is(#page-container, #main-content, #et-main-area, #left-area, #content, #primary, .site-content, .content-area, .site-main, main, article, .et_pb_section, .et_pb_row, .et_pb_column, .et_pb_module, .entry-content):has(.atb-section) {
    background-color: transparent;
}

/* ---------------------------------------------------------------------------
   Rendus du lot L4 — chiffres clés, frise, cartes (image en tête / de fond / témoignage),
   FAQ ouverte, dispositions de la liste de boutons. Rendu naturel ; les thèmes redéfinissent
   les jetons (--atb-card-*, --atb-surface-soft…) et ajoutent leur décor.
   --------------------------------------------------------------------------- */
.atb-stats {
    --gap: 1.5rem;
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap);
}
.atb-stats__item {
    flex: var(--atb-column-list-weight, 4) 1 calc(clamp(var(--atb-column-list-min-width, 160px), calc((100% / 12) * var(--atb-column-list-weight, 4)), 100%) - var(--gap));
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
.atb-stats__icon .atgf-icon { width: 1.75rem; height: 1.75rem; color: var(--atb-primary); }
.atb-stats__icon .atgf-icon > * { width: 100%; height: 100%; }
.atb-stats__figure {
    font-family: var(--atb-font-heading);
    font-size: var(--atb-text-5xl);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--atb-primary);
    font-variant-numeric: tabular-nums;
}
.atb-stats__caption {
    font-size: var(--atb-text-sm);
    color: color-mix(in srgb, currentColor 93%, transparent);
}
.atb-stats__caption > p { margin: 0; padding: 0; color: inherit; } /* le thème hôte (Divi) colore les <p> : on garde la couleur du bloc */

.atb-timeline {
    --atb-timeline-rail: color-mix(in srgb, var(--atb-primary) 35%, transparent);
    --atb-timeline-marker: 2rem;
    list-style: none !important;
    padding: 0 !important;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    counter-reset: atb-timeline;
}
.atb-timeline__item {
    counter-increment: atb-timeline;
    display: grid;
    grid-template-columns: var(--atb-timeline-marker) 1fr;
    column-gap: 1rem;
    position: relative;
    padding-bottom: 1.5rem;
}
.atb-timeline__item::before {
    content: '';
    position: absolute;
    left: calc(var(--atb-timeline-marker) / 2 - 1px);
    top: var(--atb-timeline-marker);
    bottom: 0;
    width: 2px;
    background: var(--atb-timeline-rail);
}
.atb-timeline__item:last-child::before { display: none; }
.atb-timeline__item:last-child { padding-bottom: 0; }
.atb-timeline__marker {
    width: var(--atb-timeline-marker);
    height: var(--atb-timeline-marker);
    display: grid;
    place-items: center;
    border-radius: var(--atb-radius-pill);
    background: var(--atb-icon-tile-bg);
    color: var(--atb-primary);
}
.atb-timeline__marker .atgf-icon, .atb-timeline__marker .atgf-icon > * { width: 1rem; height: 1rem; }
.atb-timeline__dot { width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--atb-primary); }
.atb-timeline__label { font-weight: var(--atb-list-title-weight); line-height: var(--atb-leading-tight); padding-top: 0.35rem; }
.atb-timeline__text { font-size: var(--atb-text-sm); font-weight: var(--atb-list-text-weight); line-height: var(--atb-leading-relaxed); margin-top: 0.25rem; }
.atb-timeline__text > p { margin: 0; padding: 0; color: inherit; }

.atb-cards {
    list-style: none !important;
    padding: 0 !important;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    --atb-column-min-width: 240px;
    --atb-column-gap: 1.5rem;
    gap: var(--atb-column-gap);
}
.atb-cards__item {
    /* Pas de croissance : une carte seule garde sa largeur de colonne au lieu d'occuper toute la ligne. */
    /* Mini : champ de la liste (--atb-column-list-min-width), à défaut celui de la colonne. */
    flex: 0 1 calc(clamp(var(--atb-column-list-min-width, var(--atb-column-min-width)), calc((100% / 12) * var(--atb-column-weight, 4)), 100%) - var(--atb-column-gap));
    display: flex;
    flex-direction: column;
    min-width: 0;
    border-radius: var(--atb-card-radius);
    border: var(--atb-card-border);
    box-shadow: var(--atb-card-shadow);
    background: var(--atb-card-bg, transparent);
    overflow: hidden;
}
.atb-cards__body { display: flex; flex-direction: column; gap: 0.75rem; padding: var(--atb-card-padding, 1.25rem); }
.atb-cards__body > :last-child { margin-bottom: 0; }
.atb-card__text > :last-child { margin-bottom: 0; padding-bottom: 0; }
.atb-cards :is(.atb-card__text, .atb-cards__text) > p { color: inherit; }
.atb-card__buttons { margin-top: auto; }
/* image en tête */
.atb-cards--vertical .atb-cards__item { background: var(--atb-card-bg, var(--atb-surface-soft)); }
.atb-cards--vertical .atb-cards__media img { width: 100%; height: auto; aspect-ratio: var(--atb-card-image-ratio, 3 / 2); object-fit: cover; display: block; border-radius: 0; }
/* image de fond, texte dessus */
.atb-cards--overlay .atb-cards__item { position: relative; min-height: var(--atb-card-overlay-height, 22rem); color: var(--atb-light); background: var(--atb-neutral); }
.atb-cards--overlay .atb-cards__cover { position: relative; flex: 1; display: flex; flex-direction: column; justify-content: flex-end; }
.atb-cards--overlay .atb-cards__cover::before { inset: 0; }
.atb-cards--overlay .atb-cards__cover::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    background: var(--atb-card-overlay-scrim, linear-gradient(0deg, var(--atb-neutral) 0%, color-mix(in oklab, var(--atb-neutral) 70%, transparent) 45%, transparent 85%));
}
.atb-cards--overlay .atb-cards__body { position: relative; z-index: 1; }
/* l'image (at_image, lot I5) : une vraie <img> sous le scrim, recadrée sur son point focal */
.atb-cards--overlay .atb-cards__img { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; max-width: none; object-fit: var(--atgf-img-fit, cover); }
.atb-cards--overlay .atb-title, .atb-cards--overlay .atb-subtitle, .atb-cards--overlay .atb-surtitle { color: inherit; }
.atb-cards--overlay .atb-cards__item--no-image { background: var(--atb-role-brand-bg); }
/* témoignage */
.atb-cards--testimonial .atb-cards__item { background: var(--atb-card-bg, var(--atb-surface-soft)); }
.atb-cards__quote { margin: 0; border: 0; background: none; font-style: inherit; color: inherit; padding: var(--atb-card-padding, 1.5rem); display: flex; flex-direction: column; gap: 0.75rem; height: 100%; }
.atb-cards__rating { color: var(--atb-rating-color, color-mix(in oklab, var(--atb-warning) 72%, black)); font-size: var(--atb-text-lg); letter-spacing: 0.1em; }
.atb-cards__text { font-size: var(--atb-text-base); line-height: var(--atb-leading-relaxed); }
.atb-cards__text > :last-child { margin-bottom: 0; padding-bottom: 0; }
.atb-cards__author { margin-top: auto; display: flex; align-items: center; gap: 0.75rem; }
.atb-cards__avatar img { width: 2.75rem; height: 2.75rem; border-radius: 50%; object-fit: cover; }
.atb-cards__name { font-style: normal; font-weight: 700; font-size: var(--atb-text-sm); }
.atb-cards__role { font-size: var(--atb-text-xs); color: color-mix(in srgb, currentColor 92%, transparent); }

/* FAQ ouverte : la grille et les colonnes vivent dans le bloc .atb-faq (plus bas). */
.atb-faq-question--open { margin: 0 0 0.5rem; padding: 0; font-size: var(--atb-text-lg); font-weight: 700; line-height: var(--atb-leading-tight); }
.atb-faq-item--open .atb-faq-answer > :last-child { margin-bottom: 0; }

/* Liste de boutons : dispositions */
.atb-buttons-list--stack { display: flex; flex-direction: column; gap: var(--atb-space-3); }
.atb-buttons-list--stack .at-btn { width: 100%; justify-content: center; }
.atb-buttons-list--split { display: flex; flex-wrap: wrap; align-items: center; gap: var(--atb-space-3); }
.atb-buttons-list--split > li:first-child { margin-right: auto; }

/* ---------------------------------------------------------------------------
   Mode sombre (html[data-atb-mode="dark"], docs/themes.md § mode) — le « sombre neutre » du
   rendu naturel, et le socle des thèmes qui n'ont pas encore le leur. Tout passe par les rôles
   (--atb-bg-* / --atb-text-*), les surfaces et les ombres : aucun sélecteur de bloc n'est
   réécrit. Un texte « clair » reste clair ; un fond « blanc » devient anthracite.
   --------------------------------------------------------------------------- */
html[data-atb-mode="dark"] {
    --atb-bg-light: #15181f;
    --atb-bg-grey: #1c2028;
    --atb-bg-secondary: #1c2028;
    --atb-bg-neutral: #0b0e14;
    --atb-text-neutral: #e6e8ee;
    --atb-text-secondary: #d5d9e2;
    --atb-text-grey: #9aa3b5;
    --atb-surface-soft: color-mix(in oklab, white 6%, transparent);
    --atb-card-soft-bg: color-mix(in oklab, white 5%, transparent);
    --atb-card-border: 1px solid color-mix(in oklab, white 9%, transparent);
    --atb-border-color: color-mix(in oklab, white 12%, transparent);
    --atb-icon-tile-bg: color-mix(in oklab, var(--atb-primary) 22%, transparent);
    --atb-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
    --atb-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.6);
    --atb-shadow-lg: 0 0 0 1px color-mix(in oklab, white 8%, transparent), 0 24px 60px -30px rgba(0, 0, 0, 0.7);
    --atb-shadow-xl: 0 0 0 1px color-mix(in oklab, white 8%, transparent), 0 40px 90px -40px rgba(0, 0, 0, 0.8);
    --atb-role-soft-bg: color-mix(in oklab, white 6%, transparent);
    --atb-role-dark-bg: #0b0e14;
    --atb-role-brand-bg: color-mix(in oklab, var(--atb-primary) 30%, #15181f);
    --atb-role-brand-text: #e6e8ee;
    color-scheme: dark;
}
html[data-atb-mode="dark"] body {
    background-color: #0f131c;
    color: #e6e8ee;
}
/* En-tête et pied du thème hôte (Divi, thème enfant starter) : minimum viable en attendant l'en-tête du
   builder (lot L12) — fond et texte sombres, liens clairs. Le logo suit le réglage « Logo en mode sombre ». */
html[data-atb-mode="dark"] :is(#main-header, #et-top-navigation, .et-l--header .et_pb_section, .et-l--footer .et_pb_section, #main-footer, #footer-bottom, .et_pb_menu, .et_pb_menu__menu) {
    background-color: #0f131c;
    color: #e6e8ee;
}
html[data-atb-mode="dark"] :is(#main-header, .et-l--header, #main-footer, .et-l--footer) :is(a, .et_pb_menu__menu a, #top-menu a, .mobile_menu_bar:before) {
    color: #e6e8ee;
}
/* Les conteneurs du thème hôte (Divi…) laissent passer le fond sombre, comme sous un thème. */
html[data-atb-mode="dark"] :is(#page-container, #main-content, #et-main-area, #left-area, #content, #primary, .site-content, .content-area, .site-main, main, article, .et_pb_section, .et_pb_row, .et_pb_column, .et_pb_module, .entry-content):has(.atb-section) {
    background-color: transparent;
}
:where(html[data-atb-mode="dark"] .atb-section) {
    color: var(--atb-text-neutral);
}
:where(html[data-atb-mode="dark"]) .atb-title-zone.atb-text-dark .atb-title,
:where(html[data-atb-mode="dark"]) .atb-text-dark {
    color: var(--atb-text-secondary);
}
/* Les variantes « soft » (60 %) sont trop faibles sur fond sombre. */
html[data-atb-mode="dark"] :is(.atb-text-neutral-soft, .atb-text-secondary-soft, .atb-text-grey-soft) {
    color: color-mix(in srgb, var(--atb-text-neutral) 78%, transparent);
}
/* Images assourdies, hero plus profond. */
:where(html[data-atb-mode="dark"]) :is(.atb-image-wrapper img, .atb-card-lateral img, .at-gallery figure img) {
    filter: brightness(0.88);
}
/* Voile du thème (heros `atb-hero` et calques « voile du thème » du Fond) : une variable sur la racine, que le mode
   sombre et chaque thème redéfinissent ; `:where()` partout (0-0-0), l'ordre des feuilles départage comme avant. */
:where(:root) {
    --atb-hero-veil: linear-gradient(0deg, var(--atb-neutral) 0%, color-mix(in oklab, var(--atb-neutral) 56%, transparent) 50%, color-mix(in oklab, var(--atb-neutral) 0%, transparent) 100%);
}
/* Voile « plus profond » du mode sombre : la règle `.atb-hero::after` qui le portait n'a JAMAIS pris effet (la règle
   de base, plus loin dans la feuille et de même spécificité, l'écrasait). Gardé hors service pour que la migration du
   Fond (B5) ne change rien à l'écran ; à activer sur décision :
   :where(html[data-atb-mode="dark"]) { --atb-hero-veil: linear-gradient(0deg, #0b0e14 0%, color-mix(in oklab, #0b0e14 60%, transparent) 55%, color-mix(in oklab, #0b0e14 25%, transparent) 100%); } */
/* Boutons : neutre et secondaire (presque noirs) deviennent une ardoise visible. */
html[data-atb-mode="dark"][data-atb-theme="classic"] .at-btn {
    --at-neutral: #6272a0;   /* blanc dessus 4,7:1 ; en texte de contour sur le fond nuit 4,6:1 */
    --at-secondary: #6b7794;
}
/* Boutons pleins en sombre : les primaires des palettes sombres sont claires, le texte passe en encre.
   Sous un thème, root.css pose `--atb-on-<c>` (lot L7) ; l'encre fixe ne sert qu'à Basique. */
html[data-atb-mode="dark"] .at-btn {
    --at-on-primary: var(--atb-on-primary, #0f131c);
    --at-on-accent: var(--atb-on-accent, #0f131c);
    --at-on-info: var(--atb-on-info, #0f131c);
    --at-on-success: var(--atb-on-success, #0f131c);
    --at-on-warning: var(--atb-on-warning, #0f131c);
    --at-on-danger: var(--atb-on-danger, #0f131c);
}
/* Sous un thème, le numéro d'étape (sur la couleur « avertissement ») lit son on-couleur. */
html[data-atb-theme]:not([data-atb-theme="classic"]) .atb-project-steps__number {
    color: var(--atb-on-warning, #1a1a1a);
}
/* Un fond saisi en hex hors palette reste tel quel en sombre : s'il est clair (classe posée au rendu),
   le texte repasse en encre pour rester lisible. */
html[data-atb-mode="dark"] .atb-bg-tone--light {
    color: var(--atb-neutral);
    --atb-text-neutral: var(--atb-neutral);   /* les utilitaires de texte reprennent les valeurs claires du thème */
    --atb-text-secondary: var(--atb-secondary);
    --atb-text-grey: var(--atb-grey);
}
@media (prefers-reduced-motion: reduce) {
    html { transition: none; }
}

/* ---------------------------------------------------------------------------
   Commutateur clair / sombre (bloc theme-switch)
   --------------------------------------------------------------------------- */
.atb-mode-switch {
    --atb-switch-size: 1em;
    display: inline-flex;
    align-self: flex-start;   /* item d'une colonne flex : ne s'étire pas */
    width: fit-content;
    align-items: center;
    gap: 0.5em;
    padding: 0.45em 0.7em;
    border: 1px solid var(--atb-border-color);
    border-radius: var(--atb-radius-pill);
    background: var(--atb-surface-soft);
    color: inherit;
    font: inherit;
    font-size: var(--atb-switch-size);
    line-height: 1;
    cursor: pointer;
    transition: background-color var(--atb-transition), border-color var(--atb-transition);
}
.atb-mode-switch--sm { --atb-switch-size: 0.875rem; }
.atb-mode-switch--lg { --atb-switch-size: 1.25rem; }
.atb-mode-switch:hover { border-color: var(--atb-primary); }
.atb-mode-switch:focus-visible { outline: 2px solid var(--atb-primary); outline-offset: 2px; }
.atb-mode-switch__icon { display: inline-flex; width: 1.15em; height: 1.15em; }
.atb-mode-switch__icon svg { width: 100%; height: 100%; }
/* Bascule : une icône à la fois */
.atb-mode-switch[aria-pressed="true"] .atb-mode-switch__icon--light,
.atb-mode-switch[aria-pressed="false"] .atb-mode-switch__icon--dark { display: none; }
/* Pilule : un rail avec un curseur */
.atb-mode-switch__track { display: none; }
.atb-mode-switch--pill .atb-mode-switch__track {
    display: inline-block; position: relative; width: 2.2em; height: 1.2em; border-radius: 1em;
    background: color-mix(in oklab, currentColor 20%, transparent); transition: background-color var(--atb-transition);
}
.atb-mode-switch--pill .atb-mode-switch__thumb {
    position: absolute; top: 0.15em; left: 0.15em; width: 0.9em; height: 0.9em; border-radius: 50%;
    background: var(--atb-primary); transition: transform var(--atb-transition-slow);
}
.atb-mode-switch--pill[aria-pressed="true"] .atb-mode-switch__thumb { transform: translateX(1em); }
.atb-mode-switch--pill[aria-pressed="true"] .atb-mode-switch__track { background: color-mix(in oklab, var(--atb-primary) 35%, transparent); }
/* Groupe à trois états */
.atb-mode-switch--group { padding: 0.25em; gap: 0.25em; cursor: default; }
.atb-mode-switch__opt {
    display: inline-flex; align-items: center; gap: 0.4em; padding: 0.35em 0.6em; border: 0; border-radius: var(--atb-radius-pill);
    background: transparent; color: inherit; font: inherit; cursor: pointer;
}
.atb-mode-switch__opt[aria-checked="true"] { background: var(--atb-primary); color: var(--atb-light); }
.atb-mode-switch__opt:focus-visible { outline: 2px solid var(--atb-primary); outline-offset: 2px; }

/* Typographie du builder : SES polices (réglages → root.css : --atb-font-body /
   --atb-font-heading), quel que soit le thème — Basique compris depuis le 22/09/2026.
   Avant, Basique héritait du thème WordPress (Divi règle ses titres par
   --et_global_heading_font) : un site sans customizer Divi configuré sortait ses titres
   en Open Sans. Le périmètre reste le contenu du builder (.atb-section), jamais la page
   hôte. Spécificité 0-1-0 : un utilitaire (atb-font-*) ou une classe du champ Titre
   garde la main. */
.atb-section {
    font-family: var(--atb-font-body);
}

/* La police de titre gouverne TOUS les titres du builder : les h1-h6 de son contenu, quel
   que soit le bloc qui les produit (zone titre, question de FAQ, titre de carte, titre
   d'un texte libre), plus la zone titre quand sa balise n'est pas un titre (p, div).
   C'est exactement le périmètre que Divi couvrait sur univerture (`h1…h6 { font-family:
   var(--et_global_heading_font) }`), rendu au builder : relevé le 22/09/2026, les 127 h*
   du builder d'univerture ne changent pas. */
.atb-section :is(h1, h2, h3, h4, h5, h6),
.atb-title {
    font-family: var(--atb-font-heading);
}

/* Les thèmes étendent la police de titre aux surtitres et aux titres qui ne sont pas des h* (listes). */
:where(html[data-atb-theme]:not([data-atb-theme="classic"])) :is(.atb-surtitle, .atb-subtitle, .atb-points-fort__title, .atb-solutions-list__title, .atb-project-steps__title, .atb-faq-question, .atb-card-lateral__title) {
    font-family: var(--atb-font-heading);
}

/* Couleur par défaut des titres en Basique : bleu nuit (--atb-neutral), le dessin des
   maquettes du service création. Le jeton --atb-title-color ne vaut que lorsqu'aucune
   couleur n'est choisie : un réglage « Couleur du texte » d'un conteneur (--text-color),
   une classe de couleur (atb-text-dark, atb-text-light… → currentColor, dans
   utilities.css) ou un rôle de fond sombre le neutralisent, et une classe posée sur le
   titre lui-même gagne par l'ordre des feuilles. Les thèmes ne posent pas ce jeton :
   leurs titres héritent de --atb-section-color comme avant. */
/* `:where()` : 0-1-0, pour qu'une classe de couleur posée sur la section elle-même
   (atb-text-light du hero) l'emporte — même élément, spécificité égale, feuille plus tardive. */
:where(html[data-atb-theme="classic"]) .atb-section {
    --atb-title-color: var(--atb-neutral);
}
/* La graisse des titres appartient au thème quand il la revendique (--atb-title-weight) : « atb-font-bold » et
   « atb-title-bold » sont le réflexe « c'est un titre » du monde basique, pas un choix d'accentuation — un thème à
   titres fins (Éditorial 300, Doux 400) les remplace. Les autres graisses (atb-font-black, -semibold, -light)
   restent des choix explicites de l'auteur et gagnent. */
html[data-atb-theme]:not([data-atb-theme="classic"]) .atb-title:where(.atb-font-bold, .atb-title-bold),
html[data-atb-theme]:not([data-atb-theme="classic"]) .atb-title-bold:where(h1, h2, h3, h4, h5, h6) {
    font-weight: var(--atb-title-weight, 700);
}

.atb-surtitle {

    color: inherit;
}


.atb-title {
    margin: 0;
    padding: 0;
    color: var(--text-color, var(--atb-title-color, inherit));
}

.atb-subtitle {

    color: inherit;
}

/* FAQ (blocs/faq.tpl.php, docs/faq.md). Une configuration par défaut = cartes, une
   colonne, chevron à droite : ces règles-là sont l'historique, intact. Tout le reste
   arrive par modificateur (atb-faq--cols, --numbered, --lines, --flush, --gap-*,
   --marker-<mode>, --marker-left) ou par variable. */
.atb-faq {
    --atb-faq-gap: var(--atb-space-4);
    /* Gouttière entre colonnes : la même valeur sert à la grille ET à la formule des
       colonnes, sinon N colonnes ne rentrent plus (2 × largeur + gouttière > 100 %). */
    --atb-faq-col-gap: var(--atb-faq-gap);

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

        .atb-faq-item {
            details {
                background-color: var(--atb-surface-soft);
                color: var(--atb-text-secondary, var(--atb-secondary));
                border-radius: var(--atb-faq-radius);
                border: var(--atb-card-border);
                box-shadow: var(--atb-card-shadow);
                padding: 1rem;
                /* Ancre (#slug) : la question s'arrête sous l'en-tête fixe. */
                scroll-margin-top: calc(var(--atb-header-offset, 0px) + var(--atb-space-4));

                .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-marker)) {
                        margin: 0;
                        padding: 0;
                        font-weight: 700;
                        font-size: 1rem;
                        text-wrap: balance;
                        flex: 1 1 auto;
                    }
                }

                .atb-faq-answer {}
            }
        }
    }

    /* ---- Colonnes équilibrées : au plus N colonnes (--atb-faq-cols), une de moins dès
       que chacune passerait sous le mini (--atb-faq-col-min). Pas de media query :
       la formule max(mini, largeur/N) fait le travail. align-items: start pour qu'une
       réponse ouverte n'étire pas sa voisine. ---- */
    &.atb-faq--cols .atb-faq-list {
        display: grid;
        align-items: start;
        gap: var(--atb-faq-gap) var(--atb-faq-col-gap);
        grid-template-columns: repeat(
            auto-fit,
            minmax(
                min(100%, max(var(--atb-faq-col-min, 0px), calc((100% - (var(--atb-faq-cols, 1) - 1) * var(--atb-faq-col-gap)) / var(--atb-faq-cols, 1)))),
                1fr
            )
        );
    }

    /* ---- Espace entre questions : `--atb-faq-gap` posé en style inline par le champ `gap` ---- */

    /* ---- Habillage : filets (un trait entre les questions) et nu ---- */
    &.atb-faq--lines,
    &.atb-faq--flush {
        .atb-faq-list .atb-faq-item details {
            background: none;
            border: 0;
            border-radius: 0;
            box-shadow: none;
            padding-inline: 0;
        }
    }
    &.atb-faq--lines {
        --atb-faq-gap: 0px;
        .atb-faq-list .atb-faq-item details {
            border-bottom: 1px solid var(--atb-faq-line-color, var(--atb-border-color));
        }
        --atb-faq-col-gap: var(--atb-space-8);
    }
    &.atb-faq--flush .atb-faq-list .atb-faq-item details { padding-block: var(--atb-space-2); }

    /* ---- Numéro : les quatre types du bouton (plein, teinté, contour, sans fond)
       autour d'une couleur courante `--atb-faq-number-current` (primary, ou la couleur
       du champ posée en inline par le template). ---- */
    /* Le défaut vit sur le bloc : l'inline `--atb-faq-number-current` du champ couleur
       (posé sur ce même élément) le remplace. */
    --atb-faq-number-current: var(--atb-primary);
    .atb-faq-number {
        --atb-faq-number-bg: color-mix(in srgb, var(--atb-faq-number-current) 12%, transparent);
        --atb-faq-number-color: var(--atb-faq-number-current);
        --atb-faq-number-border: transparent;
        flex: none;
        display: inline-grid;
        place-items: center;
        min-width: var(--atb-faq-number-size, 2em);
        height: var(--atb-faq-number-size, 2em);
        padding-inline: 0.4em;
        border: var(--atb-faq-number-border-width, 1px) solid var(--atb-faq-number-border);
        border-radius: var(--atb-faq-number-radius, var(--atb-radius-sm));
        background: var(--atb-faq-number-bg);
        color: var(--atb-faq-number-color);
        font-weight: 700;
        font-size: var(--atb-faq-number-font, 0.9em);
        font-variant-numeric: tabular-nums;
        line-height: 1;
    }
    &.atb-faq--number-normal .atb-faq-number {
        --atb-faq-number-bg: var(--atb-faq-number-current);
        --atb-faq-number-color: var(--atb-light, #fff);
    }
    &.atb-faq--number-outline .atb-faq-number {
        --atb-faq-number-bg: transparent;
        --atb-faq-number-border: var(--atb-faq-number-current);
    }
    &.atb-faq--number-ghost .atb-faq-number {
        --atb-faq-number-bg: transparent;
    }

    /* ---- Icône de titre ---- */
    .atb-faq-question__icon {
        flex: none;
        display: inline-flex;
        align-items: center;
    }

    /* ---- Marqueur d'ouverture. `atb-marker` = classe générique (utilitaire
       atb-marker-ring). Le dessin des modes chevron et plus est en pseudo-éléments,
       en currentColor : couleur, taille et épaisseur par variables. ---- */
    .atb-faq-marker {
        flex: none;
        position: relative;
        display: inline-grid;
        place-items: center;
        width: var(--atb-faq-marker-size, 1.25rem);
        height: var(--atb-faq-marker-size, 1.25rem);
        color: var(--atb-faq-marker-color, currentColor);
        transition: transform var(--atb-transition-slow, 0.3s ease), background-color var(--atb-transition-slow, 0.3s ease);

        &::before,
        &::after {
            content: none;
            box-sizing: border-box;
            transition: transform var(--atb-transition-slow, 0.3s ease), rotate var(--atb-transition-slow, 0.3s ease);
        }
    }
    /* Chevron : un coin de carré tourné, pointe à droite ; ouvert = pointe en bas
       (même geste que l'ancien dashicon arrow-right-alt2 + rotate-icon). */
    .atb-faq-marker--chevron::before {
        content: "";
        width: 0.5em;
        height: 0.5em;
        border-right: var(--atb-faq-marker-weight, 2px) solid currentColor;
        border-bottom: var(--atb-faq-marker-weight, 2px) solid currentColor;
        transform: translateX(-15%) rotate(-45deg);
    }
    details.active .atb-faq-marker--chevron::before { transform: translateY(-15%) rotate(45deg); }
    /* Plus → moins : deux barres, la verticale pivote de 90° et se confond avec
       l'horizontale (principe du pen FluidOfInsanity/EyQGgw). */
    .atb-faq-marker--plus::before,
    .atb-faq-marker--plus::after {
        content: "";
        position: absolute;
        inset: 50% auto auto 50%;
        width: var(--atb-faq-marker-bar, 0.75em);
        height: var(--atb-faq-marker-weight, 2px);
        border-radius: 1px;
        background: currentColor;
        translate: -50% -50%;
    }
    .atb-faq-marker--plus::after { rotate: 90deg; }
    details.active .atb-faq-marker--plus::after { rotate: 0deg; }
    /* HTML libre à deux états */
    .atb-faq-marker--free .atb-faq-marker__open { display: none; }
    details.active .atb-faq-marker--free .atb-faq-marker__closed { display: none; }
    details.active .atb-faq-marker--free .atb-faq-marker__open { display: contents; }
    /* Marqueur à gauche : il est déjà premier dans le DOM ; rien à réordonner. */

    /* Compat : `rotate-icon` (classe des FAQ d'avant le 22/09/2026) fait pivoter le
       marqueur en modes icône et HTML libre — les modes chevron et plus ont leur propre
       geste, et les 20 FAQ historiques (dashicon + rotate-icon) sont passées au chevron. */
    &.rotate-icon:is(.atb-faq--marker-icon, .atb-faq--marker-free) details.active .atb-faq-marker { transform: rotate(90deg); }

    /* ---- Tout ouvrir / tout fermer ---- */
    .atb-faq-toolbar {
        display: flex;
        justify-content: flex-end;
        margin-bottom: var(--atb-space-3);
    }
    .atb-faq-toggle {
        appearance: none;
        background: none;
        border: 0;
        padding: 0.25em 0;
        cursor: pointer;
        font: inherit;
        font-size: var(--atb-text-sm);
        font-weight: 600;
        color: var(--atb-primary);
        text-decoration: underline;
        text-underline-offset: 0.2em;
    }

    /* ---- Liste ouverte : mêmes items, sans <details> ; la grille vient de --cols ---- */
    &.atb-faq--open {
        --atb-faq-gap: var(--atb-space-6);
        --atb-faq-col-gap: var(--atb-space-8);
    }
    &.atb-faq--open .atb-faq-list {
        .atb-faq-question--open {
            display: flex;
            align-items: center;
            gap: var(--atb-space-3);
            &> :where(h1, h2, h3, h4, h5, h6, p, div) { margin: 0; font: inherit; }
        }
    }

    @media (prefers-reduced-motion: reduce) {
        .atb-faq-marker,
        .atb-faq-marker::before,
        .atb-faq-marker::after { transition: none; }
    }
}

.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-list-min-width, 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-card-image-radius);
            }
        }

        .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;
}
/* ---------------------------------------------------------------------------
   .atb-hero — le traitement « bandeau photo » sur une section ORDINAIRE

   Ce que le layout `sections_hero-bg` portait en dur et qui n'est PAS réglable
   par un champ : la désaturation de la photo, le scrim, et le clamp du h1. Posé
   en classe, il s'applique à une `sections_flexible-rows` — qui apporte en
   retour ce que le hero ne savait pas faire : un nombre libre de colonnes,
   n'importe quel bloc de chaque côté, et les réglages complets de ligne et de
   colonne.

   Ce qui n'est délibérément PAS ici : les espacements. Le décalage du contenu
   sous l'en-tête transparent est la marge haute de la ligne, réglée dans son
   champ Espacement ; le rythme entre le titre, le texte et le bouton est la
   marge basse de chaque bloc, réglée de même. Un auteur les voit et les modifie
   depuis l'éditeur, sans écrire une ligne de CSS.

   Usage : section en `classes: "atb-hero atb-text-light"` + une image de fond.
   Le scrim par défaut vise une photo sombre ; sur une photo claire, le renforcer
   dans le `custom_css` de la section (`&::after { background: … }`).
   --------------------------------------------------------------------------- */
.atb-hero {


    /* La photo est un calque image du Fond (at_background), le voile son calque « voile du thème »
       (`--atb-hero-veil`, redéfini par chaque thème). */
    & > .atgf-bg > .atgf-bg__l--image {
        filter: saturate(0.7);
    }

    /* Le h1 d'un hero est plus grand que celui d'une section courante. La
       graisse et la couleur, elles, restent des classes du champ Titre
       (`atb-title-bold`, et la couleur héritée de `atb-text-light`). */
    .atb-title:is(h1) {
        font-size: clamp(2.188rem, calc(0.240rem + (9.737 * var(--cqi-column, 1vw))), 4.500rem);
    }
}

/* --- Bloc Liste de contenus (blocs_content-list) ---------------------------
   Grille équilibrée sans media query, même formule que la FAQ : au plus N
   colonnes, une de moins dès que chacune passerait sous la largeur mini.
   Grille et Liste à deux niveaux : BOÎTE (`.atb-content-list-box`, id, CSS perso,
   hors de la cible du Pager) > LISTE (`.atb-content-list`, cible, hôte du
   placement). Carrousel et bandeau : la racine seule. */

/* Réglages du bloc (`-set`) → variables publiques, sur l'élément que vise le CSS
   perso (`& { --atb-cl-cols: 4; }`) : la boîte, ou la racine du carrousel / bandeau.
   La liste les hérite. */
.atb-content-list-box,
.atb-content-list--slider,
.atb-content-list--marquee {
    --atb-cl-gap: var(--atb-cl-gap-set, 1.5rem);
}

.atb-content-list-box {
    --atb-cl-cols: var(--atb-cl-cols-set, 3);
    --atb-cl-min: var(--atb-cl-min-set, 0px);
    /* Comme l'ancienne racine (la liste) : pas de marge de rythme en bas du bloc. */
    margin: 0;
}

.atb-content-list {
    display: flex;
    flex-direction: column;
    gap: var(--atb-cl-gap);
    margin: 0;
    padding: 0;
    list-style: none;
}

.atb-content-list--grid {
    display: grid;
    align-items: stretch;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, max(var(--atb-cl-min, 0px), calc((100% - (var(--atb-cl-cols, 3) - 1) * var(--atb-cl-gap)) / var(--atb-cl-cols, 3)))), 1fr));
}

.atb-content-list__item {
    min-width: 0;
    margin: 0;
}

.atb-content-list__empty {
    grid-column: 1 / -1;
}

/* Carrousel et bandeau : la racine porte la peau du bloc Slider / du bandeau,
   pas la pile flex de la liste. */
.atb-content-list--slider,
.atb-content-list--marquee {
    display: block;
}

.atb-content-list--marquee .content {
    gap: var(--atb-cl-gap);
}

.atb-content-list--marquee .atb-content-list__item {
    flex: none;
}

/* Fond (at_background) : le voile « du thème » des calques est le voile par défaut d'attps-get-field (`--atgf-veil`),
   que le builder branche sur celui de ses thèmes. `--atb-hero-veil` absent → `--atgf-veil` invalide → repli neutre
   d'attps-get-field. */
.atgf-bg__l--veil-theme {
    --atgf-veil: var(--atb-hero-veil);
}

/* Bloc Icône avec réglages (Typographie, Bordure, Fond, Espacement…) posés SUR l'icône : elle devient une pastille qui
   centre son glyphe. Typographie réglée : l'icône suit sa taille (1em) et sa couleur, quelle que soit la source
   (police Font Awesome / Dashicons, SVG, image). Sans réglage, rien de ceci ne s'applique (05/10/2026). */
/* À la taille de son contenu (une colonne l'étirait sur toute sa largeur) ; spécificité nulle : Dimensions décide. */
:where(.atgf-icon.atb-icon-bloc) {
    width: fit-content;
}

.atgf-icon.atb-icon-bloc {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    line-height: 1;
}

.atgf-icon.atb-icon-bloc--font > :is(svg, img) {
    width: 1em;
    height: 1em;
}

.atgf-icon.atb-icon-bloc--font > :is(i, .dashicons) {
    width: 1em;
    height: 1em;
    font-size: inherit;
    line-height: 1;
}

/* Liste de contenus, source « Requête de la page » (mode Thème, lot T4) : pagination par l'adresse
   (paginate_links), même aspect que les numéros du Pager (atgf-pager.css), mêmes variables. */
.atb-content-list__pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .35rem;
    margin-top: var(--atgf-pager-gap, 2rem);
}
.atb-content-list__pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.5em;
    height: 2.5em;
    padding: 0 .6em;
    border-radius: var(--atgf-pager-radius, .5em);
    line-height: 1;
    text-decoration: none;
    color: inherit;
}
.atb-content-list__pagination a.page-numbers {
    border: 1px solid var(--atgf-pager-border, color-mix(in srgb, currentColor 20%, transparent));
}
.atb-content-list__pagination a.page-numbers:hover,
.atb-content-list__pagination a.page-numbers:focus-visible {
    border-color: var(--atgf-pager-accent, var(--atb-primary, currentColor));
}
.atb-content-list__pagination .page-numbers.current {
    color: var(--atgf-pager-current-color, #fff);
    background: var(--atgf-pager-accent, var(--atb-primary, #2f6fed));
    border: 1px solid var(--atgf-pager-accent, var(--atb-primary, #2f6fed));
    font-weight: 600;
}