/* =============================================================================
   ATTPS Booked — front commun. Variables surchargeables par le thème.
   Mobile-first ; aucune dépendance au thème ; tout est préfixé .atbk-.
   ========================================================================== */
/* -----------------------------------------------------------------------------
   Jetons (tokens) — une seule source pour tous les composants.
   Couche 1 : valeurs du thème « classique » en mode clair (ci-dessous).
   Couche 2 : un thème redéfinit ces jetons sur .atbk[data-atbk-theme="…"].
   Couche 3 : mode sombre sur .atbk[data-atbk-mode="dark"] (résolu par JS pour « auto »).
   Couche 4 : couleurs de l'utilisateur (Réglages › Apparence), injectées en inline.
   Aucune couleur en dur dans les composants : tout passe par var(--atbk-*).
   -------------------------------------------------------------------------- */
/* L'attribut hidden l'emporte toujours dans les widgets : une règle de mise en page (volet en carte, barre en
   flex) ou une feuille du thème le neutraliserait sinon, et des volets vides resteraient à l'écran. */
.atbk [hidden] {
    display: none !important;
}

.atbk {
    /* Marque */
    --atbk-accent: #8a3b7a;
    --atbk-accent-dark: #662c5a;
    --atbk-on-accent: #fff;             /* texte posé sur l'accent */
    --atbk-tint: #f7f0f6;               /* accent très dilué (fonds, survols) */
    --atbk-tint-border: #e3cfe0;
    --atbk-secondary: #662c5a;          /* couleur secondaire (titres, liens) — accent-dark par défaut */
    --atbk-on-secondary: #fff;

    /* Encre */
    --atbk-ink: #1d2327;
    --atbk-ink-soft: #646970;
    --atbk-ink-faint: #8c8f94;

    /* Surfaces (du plus bas au plus haut) */
    --atbk-bg: transparent;             /* fond du widget : par défaut celui de la page */
    --atbk-surface: #fff;               /* cartes, champs */
    --atbk-surface-sunk: #f6f7f7;       /* zones en retrait */
    --atbk-surface-raised: #fff;        /* cartes mises en avant */
    --atbk-surface-overlay: #fff;       /* dialogues, listes flottantes */
    --atbk-border: #dcdcde;
    --atbk-border-strong: #c3c4c7;
    --atbk-border-width: 1px;

    /* Sémantique (états) — restent celles du thème, jamais celles de l'utilisateur */
    --atbk-ok: #0a7c74;
    --atbk-ok-tint: #eaf5f2;
    --atbk-warn: #dba617;
    --atbk-warn-tint: #fff4e5;
    --atbk-warn-ink: #8a6116;
    --atbk-err: #b32d2e;
    --atbk-err-tint: #fcf0f1;
    --atbk-on-status: #fff;

    /* Forme */
    --atbk-radius-sm: 5px;
    --atbk-radius: 8px;
    --atbk-radius-lg: 12px;
    --atbk-radius-pill: 999px;
    --atbk-radius-card: var(--atbk-radius);

    /* Ombres (nulles dans un thème plat, remplacées par des surfaces plus claires en sombre) */
    --atbk-shadow-color: 0 0 0;
    --atbk-shadow-1: 0 1px 2px rgb(var(--atbk-shadow-color) / .06);
    --atbk-shadow-2: 0 8px 20px rgb(var(--atbk-shadow-color) / .12);
    --atbk-shadow-3: 0 16px 40px rgb(var(--atbk-shadow-color) / .28);
    --atbk-backdrop: rgb(20 16 24 / .45);

    /* Boutons */
    --atbk-btn-radius: var(--atbk-radius-sm);
    --atbk-btn-weight: 600;
    --atbk-btn-padding: 10px 18px;
    --atbk-btn-shadow: none;
    --atbk-btn-bg: var(--atbk-tint);            /* bouton secondaire */
    --atbk-btn-color: var(--atbk-accent-dark);
    --atbk-btn-border: var(--atbk-tint-border);
    --atbk-btn-hover-bg: var(--atbk-tint-border);

    /* Champs */
    --atbk-field-bg: var(--atbk-surface);
    --atbk-field-border: var(--atbk-border);
    --atbk-field-radius: var(--atbk-radius-sm);

    /* Typographie et densité */
    --atbk-font: inherit;
    --atbk-font-heading: var(--atbk-font);
    --atbk-font-size: inherit;
    --atbk-density: 1;                  /* multiplie les espacements (0.85 compact, 1.15 aéré) */
    --atbk-gap: calc(16px * var(--atbk-density));

    /* Focus et mouvement */
    --atbk-focus: var(--atbk-accent);
    --atbk-motion: 150ms;               /* 0ms quand l'utilisateur préfère moins d'animations */
    --atbk-easing: ease;

    /* Calendrier (cases de jour) */
    --atbk-day-radius: var(--atbk-radius-sm);
    --atbk-day-hover-bg: var(--atbk-tint);
    --atbk-day-selected-bg: var(--atbk-accent);
    --atbk-day-selected-color: var(--atbk-on-accent);
    --atbk-day-today-color: var(--atbk-accent-dark);
    --atbk-day-disabled-color: var(--atbk-ink-faint);
    --atbk-day-dot: var(--atbk-ok);     /* pastille « places disponibles » */

    /* Images */
    --atbk-img-radius: var(--atbk-radius);
    --atbk-img-ratio-card: 4 / 3;
    --atbk-img-ratio-hero: 21 / 9;
    --atbk-img-frame: none;             /* bordure ou ombre autour des images */
    --atbk-img-overlay: linear-gradient(to top, rgb(0 0 0 / .65), rgb(0 0 0 / 0) 60%);
    --atbk-img-filter: none;
    --atbk-img-placeholder: var(--atbk-tint);

    /* Divers */
    --atbk-scanner-bg: #000;            /* fond de la caméra du scanner QR */
    --atbk-skeleton: var(--atbk-surface-sunk);
    --atbk-skeleton-shine: rgb(255 255 255 / .6);

    background: var(--atbk-bg);
    font-size: var(--atbk-font-size);
    color: var(--atbk-ink);
    font-family: var(--atbk-font);
    line-height: 1.5;
}

.atbk *,
.atbk *::before,
.atbk *::after {
    box-sizing: border-box;
}

/* --- Mode sombre (thème classique) -------------------------------------------
   Règles : jamais de noir pur ni de blanc pur ; élévation = surface plus claire,
   ombres quasi nulles ; accent éclairci et désaturé ; bordures en blanc dilué. */
.atbk[data-atbk-mode="dark"] {
    --atbk-accent: #c77db5;
    --atbk-accent-dark: #dda3cf;
    --atbk-on-accent: #23111f;
    --atbk-tint: #2d2230;
    --atbk-tint-border: #4a3549;
    --atbk-secondary: #dda3cf;
    --atbk-on-secondary: #23111f;

    --atbk-ink: #ececec;
    --atbk-ink-soft: #b4b6ba;
    --atbk-ink-faint: #85888d;

    /* Le widget peint son propre fond : lisible même posé sur une page claire (site sans mode sombre). */
    --atbk-bg: #17191b;
    --atbk-widget-padding: clamp(12px, 2vw, 20px);
    --atbk-surface: #1f2124;
    --atbk-surface-sunk: #17191b;
    --atbk-surface-raised: #26282c;
    --atbk-surface-overlay: #2c2f33;
    --atbk-border: rgb(255 255 255 / .12);
    --atbk-border-strong: rgb(255 255 255 / .24);

    --atbk-ok: #5fc4b8;
    --atbk-ok-tint: #143331;
    --atbk-warn: #e6c15a;
    --atbk-warn-tint: #3a2f14;
    --atbk-warn-ink: #f0d68a;
    --atbk-err: #f08a8a;
    --atbk-err-tint: #3f1f21;
    --atbk-on-status: #17191b;

    --atbk-shadow-1: none;
    --atbk-shadow-2: 0 8px 20px rgb(0 0 0 / .35);
    --atbk-shadow-3: 0 16px 40px rgb(0 0 0 / .55);
    --atbk-backdrop: rgb(0 0 0 / .6);

    --atbk-img-filter: brightness(.9) saturate(.92);
    --atbk-skeleton: #2a2d31;
    --atbk-skeleton-shine: rgb(255 255 255 / .08);
    color-scheme: dark;
}

/* Moins d'animations si l'utilisateur le demande ; contraste forcé (Windows) respecté */
@media (prefers-reduced-motion: reduce) {
    .atbk {
        --atbk-motion: 0ms;
    }
}

@media (forced-colors: active) {
    .atbk .atbk-button,
    .atbk .atbk-input,
    .atbk .atbk-select,
    .atbk .atbk-status {
        border: 1px solid ButtonText;
    }
}

.atbk-widget {
    position: relative;
    max-width: var(--atbk-widget-max, 960px);
    margin: 0 auto;
    padding: var(--atbk-widget-padding, 0);
    border-radius: var(--atbk-radius-lg);
}

/* Section sombre d'attps-builder (rôle sombre, ton sombre, texte clair) : un widget en mode clair y devient une
   carte claire posée sur la section, sinon son encre foncée tombe sur un fond transparent sombre (1,07:1).
   `.atbk.atbk` (0,3,0) passe devant le fond propre d'un thème ; les réglages de l'utilisateur, au même niveau
   et imprimés après, gardent la main. */
:where(.atb-bg-role--dark, .atb-bg-tone--dark, .atb-text-light) .atbk.atbk[data-atbk-mode="light"]:is(.atbk-widget, .atbk-switcher) {
    --atbk-bg: var(--atbk-surface-solid, var(--atbk-surface));   /* opaque : un thème à surfaces translucides (Verre) en donne une */
    --atbk-widget-padding: clamp(14px, 2.4vw, 24px);
    border-radius: var(--atbk-radius-lg);
    box-shadow: var(--atbk-shadow-2);
}
:where(.atb-bg-role--dark, .atb-bg-tone--dark, .atb-text-light) .atbk.atbk-switcher[data-atbk-mode="light"] {
    padding: 12px clamp(14px, 2.4vw, 24px);
}

/* Texte réservé aux lecteurs d'écran. */
.atbk-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* --- Texte ---------------------------------------------------------------- */
/* Les thèmes (Divi…) colorent h2/h3/p globalement : on réaffirme l'encre du widget pour rester lisible en sombre. */
.atbk :is(h1, h2, h3, h4, p, li, dt, dd, label, legend) {
    color: inherit;
}

.atbk :is(h1, h2, h3, h4) {
    font-family: var(--atbk-font-heading);
    color: var(--atbk-ink);
}

.atbk-label {
    display: block;
    margin-bottom: 4px;
    font-size: .9em;
    font-weight: 600;
    color: var(--atbk-ink);
}

.atbk-help {
    margin: 4px 0 0;
    font-size: .85em;
    color: var(--atbk-ink-soft);
}

.atbk-error {
    margin: 4px 0 0;
    font-size: .85em;
    color: var(--atbk-err);
}

.atbk-req {
    color: var(--atbk-err);
}

.atbk-empty,
.atbk-pane__title {
    margin: 0 0 12px;
    font-family: var(--atbk-font-heading);
    font-size: 1.1em;
    font-weight: 600;
}

/* --- Champs ---------------------------------------------------------------- */
/* Les thèmes (Divi…) stylent input[type=text] & co. avec plus de poids que .atbk-input : on réaffirme
   fond, encre et bordure avec une spécificité supérieure, sinon les champs restent blancs en mode sombre. */
.atbk input[type="text"].atbk-input,
.atbk input[type="email"].atbk-input,
.atbk input[type="tel"].atbk-input,
.atbk input[type="password"].atbk-input,
.atbk input[type="search"].atbk-input,
.atbk input[type="date"].atbk-input,
.atbk input[type="number"].atbk-input,
.atbk input[type="url"].atbk-input,
.atbk textarea.atbk-input,
.atbk select.atbk-input,
.atbk select.atbk-select,
.atbk .atbk-dialog input,
.atbk .atbk-dialog textarea {
    color: var(--atbk-ink);
    background: var(--atbk-field-bg);
    border: var(--atbk-border-width) solid var(--atbk-field-border);
    border-radius: var(--atbk-field-radius);
    box-shadow: none;
}

.atbk .atbk-input::placeholder,
.atbk .atbk-dialog input::placeholder,
.atbk .atbk-dialog textarea::placeholder {
    color: var(--atbk-ink-faint);
    opacity: 1;
}

.atbk-input {
    width: 100%;
    min-height: 44px;
    padding: 8px 12px;
    font: inherit;
    color: var(--atbk-ink);
    background: var(--atbk-field-bg);
    border: var(--atbk-border-width) solid var(--atbk-field-border);
    border-radius: var(--atbk-field-radius);
}

.atbk-input:focus {
    outline: 2px solid var(--atbk-focus);
    outline-offset: 1px;
    border-color: var(--atbk-focus);
}

.atbk-input--code {
    font-family: ui-monospace, Menlo, Consolas, monospace;
    letter-spacing: .12em;
    text-transform: uppercase;
}

textarea.atbk-input {
    min-height: 80px;
}

.atbk-fields {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 3%;
}

.atbk-field {
    flex: 0 0 100%;
}

.atbk-field.has-error .atbk-input {
    border-color: var(--atbk-err);
}

@media (min-width: 640px) {
    .atbk-field.is-half {
        flex-basis: 48.5%;
    }
}

.atbk-options,
.atbk-option {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    align-items: center;
}

.atbk-option {
    gap: 6px;
    min-height: 32px;
    cursor: pointer;
}

.atbk-html {
    padding: 10px 14px;
    background: var(--atbk-surface-sunk);
    border-radius: var(--atbk-radius-sm);
}

/* --- Boutons --------------------------------------------------------------- */
.atbk-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: var(--atbk-btn-padding);
    font: inherit;
    font-weight: var(--atbk-btn-weight);
    color: var(--atbk-btn-color);
    background: var(--atbk-btn-bg);
    border: var(--atbk-border-width) solid var(--atbk-btn-border);
    border-radius: var(--atbk-btn-radius);
    cursor: pointer;
    text-decoration: none;
    transition: background var(--atbk-motion) var(--atbk-easing), color var(--atbk-motion) var(--atbk-easing), box-shadow var(--atbk-motion) var(--atbk-easing);
}

.atbk-button:hover {
    background: var(--atbk-btn-hover-bg);
    text-decoration: none;
}

.atbk-button--primary {
    color: var(--atbk-on-accent);
    background: var(--atbk-accent);
    border-color: var(--atbk-accent);
    box-shadow: var(--atbk-btn-shadow);
}

.atbk-button--primary:hover {
    background: var(--atbk-accent-dark);
    color: var(--atbk-on-accent);
}

.atbk-button--ghost {
    background: transparent;
}

.atbk-button--danger {
    color: var(--atbk-err);
    background: transparent;
    border-color: var(--atbk-err);
}

.atbk-button:disabled {
    opacity: .6;
    cursor: wait;
}

.atbk-link {
    padding: 6px 0;
    font: inherit;
    color: var(--atbk-secondary);
    background: none;
    border: 0;
    text-decoration: underline;
    cursor: pointer;
}

/* En sombre, la couleur secondaire (claire) manque de contraste sur les surfaces vitrées : l'encre souligne à l'accent. */
.atbk[data-atbk-mode="dark"] .atbk-link {
    color: var(--atbk-ink);
    text-decoration-color: var(--atbk-accent);
}

.atbk[data-atbk-mode="dark"] .atbk-hold {
    color: var(--atbk-ink);
}

.atbk[data-atbk-mode="dark"] .atbk-hold.is-urgent {
    color: var(--atbk-err);
}

/* --- Messages -------------------------------------------------------------- */
.atbk-message {
    margin: 12px 0 0;
    padding: 10px 14px;
    border-radius: var(--atbk-radius-sm);
    border: var(--atbk-border-width) solid var(--atbk-border);
    background: var(--atbk-surface-sunk);
}

.atbk-message--error {
    color: var(--atbk-err);
    background: var(--atbk-err-tint);
    border-color: var(--atbk-err);
}

.atbk-message--success {
    color: var(--atbk-ok);
    background: var(--atbk-ok-tint);
    border-color: var(--atbk-ok);
}

.atbk-status {
    display: inline-block;
    padding: 2px 10px;
    font-size: .85em;
    font-weight: 600;
    border-radius: 999px;
    background: var(--atbk-surface-sunk);
    color: var(--atbk-ink-soft);
}

.atbk-status--confirmed {
    background: var(--atbk-ok-tint);
    color: var(--atbk-ok);
}

.atbk-status--pending,
.atbk-status--awaiting_payment {
    background: var(--atbk-warn-tint);
    color: var(--atbk-warn-ink);
}

.atbk-status--cancelled,
.atbk-status--no_show {
    background: var(--atbk-err-tint);
    color: var(--atbk-err);
}

/* --- Récapitulatif --------------------------------------------------------- */
.atbk-done__recap {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 6px 16px;
    margin: 12px 0;
}

.atbk-done__recap dt {
    color: var(--atbk-ink-soft);
}

.atbk-done__recap dd {
    margin: 0;
    font-weight: 600;
}

.atbk-done__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.atbk-code {
    font-family: ui-monospace, Menlo, Consolas, monospace;
    font-size: 1.3em;
    letter-spacing: .12em;
}

/* --- Sélecteur de calendrier --------------------------------------------- */
.atbk-switcher {
    max-width: 960px;
    margin: 0 auto 16px;
}

.atbk-select {
    min-height: 44px;
    padding: 8px 12px;
    font: inherit;
    color: var(--atbk-ink);
    background: var(--atbk-field-bg);
    border: var(--atbk-border-width) solid var(--atbk-field-border);
    border-radius: var(--atbk-field-radius);
}

/* --- Corrections d'audit (16/09/2026) --------------------------------------- */
/* Bouton compact (cartes, listes) */
.atbk-button--small {
    min-height: 36px;
    padding: 6px 12px;
    font-size: .92em;
}

/* Focus clavier toujours visible, même quand le thème l'efface */
.atbk :is(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 3px solid var(--atbk-focus);
    outline-offset: 2px;
}

/* Pas de zoom iOS sur les champs : 16 px minimum */
@media (max-width: 600px) {
    .atbk .atbk-input,
    .atbk select,
    .atbk textarea {
        font-size: 16px;
    }
}

/* Zones tactiles */
.atbk-pax__btn,
.atbk-days__nav {
    min-width: 44px;
    min-height: 44px;
}

/* Les listes déroulantes maison passent devant le pied de page du thème */
.atbk-widget {
    position: relative;
    z-index: 2;
}

.atbk-suggest {
    z-index: 1000;
}

/* Paiement sur la confirmation et les cartes */
.atbk-done__pay {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    margin: 8px 0 12px;
}

.atbk-bcard__pay {
    margin-left: 6px;
}

.atbk-status--pay-paid { color: var(--atbk-ok); background: var(--atbk-ok-tint); }
.atbk-status--pay-deposit { color: var(--atbk-warn-ink); background: var(--atbk-warn-tint); }
.atbk-status--pay-unpaid { color: var(--atbk-err); background: var(--atbk-err-tint); }

.atbk-cart__options {
    font-size: .9em;
    color: var(--atbk-ink-soft);
}

/* --- Boîte de dialogue (confirm / prompt) ---------------------------------- */
.atbk-dialog {
    position: fixed;
    inset: 0;
    width: min(440px, calc(100vw - 32px));
    max-height: calc(100vh - 32px);
    margin: auto; /* les thèmes remettent souvent margin:0 sur dialog */
    padding: 0;
    overflow: auto;
    color: var(--atbk-ink);
    background: var(--atbk-surface-overlay);
    border: var(--atbk-border-width) solid var(--atbk-border);
    border-radius: var(--atbk-radius);
    box-shadow: var(--atbk-shadow-3);
}

.atbk-dialog::backdrop {
    background: var(--atbk-backdrop);
}

.atbk-dialog__form {
    padding: 20px;
}

.atbk-dialog__title {
    margin: 0 0 8px;
    font-size: 1.1rem;
    font-weight: 600;
    line-height: 1.3;
}

.atbk-dialog.is-danger .atbk-dialog__title {
    color: var(--atbk-err);
}

.atbk-dialog__text {
    margin: 0;
    color: var(--atbk-ink-soft);
    line-height: 1.5;
}

.atbk-dialog__field {
    margin-top: 14px;
}

.atbk-dialog__field label {
    display: block;
    margin-bottom: 4px;
    font-size: .9em;
    font-weight: 600;
}

.atbk-dialog__field input,
.atbk-dialog__field textarea {
    width: 100%;
    min-height: 44px;
    padding: 8px 12px;
    font: inherit;
}

.atbk-dialog__foot {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 18px;
}

.atbk-dialog .atbk-button--danger {
    color: var(--atbk-on-status);
    background: var(--atbk-err);
    border-color: var(--atbk-err);
}

@media (max-width: 480px) {
    .atbk-dialog__foot .atbk-button {
        flex: 1 1 auto;
    }
}

/* --- Icônes SVG (sprite) --------------------------------------------------- */
/* Le trait est défini ici (hérité par <use>) pour rester réglable par thème : --atbk-icon-stroke. */
.atbk-icon {
    display: inline-block; /* les thèmes (Divi) mettent parfois svg { display: block } */
    width: 1.15em;
    height: 1.15em;
    flex: 0 0 auto;
    vertical-align: -.2em;
    fill: none;
    stroke: currentColor;
    stroke-width: var(--atbk-icon-stroke, 2);
    stroke-linecap: round;
    stroke-linejoin: round;
}

.atbk-button .atbk-icon {
    margin-inline: -2px;
}

/* --- Images des calendriers (rôles hero / card / thumb) --------------------- */
.atbk-img {
    display: block;
    overflow: hidden;
    border-radius: var(--atbk-img-radius);
    background: var(--atbk-img-placeholder);
    box-shadow: var(--atbk-img-frame);
}

.atbk-img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: var(--atbk-img-filter);
}

.atbk-img--hero {
    position: relative;
    /* `width: 100%` explicite : avec une largeur auto, `aspect-ratio` reporte la contrainte `max-height` sur la
       largeur et le bandeau s'arrête avant le bord du widget (793 px sur 936). Largeur fixée, seule la hauteur se
       borne et l'image remplit en `object-fit: cover`. */
    width: 100%;
    aspect-ratio: var(--atbk-img-ratio-hero);
    max-height: 340px;
    margin: 0 0 var(--atbk-gap);
}

@media (max-width: 640px) {
    .atbk-img--hero {
        aspect-ratio: 16 / 9;
    }
}

.atbk-img--hero.has-caption::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--atbk-img-overlay);
    pointer-events: none;
}

.atbk-img__caption {
    position: absolute;
    z-index: 1;
    inset: auto 0 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 20px;
    color: #fff; /* toujours sur le dégradé sombre du hero, quel que soit le mode */
    text-shadow: 0 1px 2px rgb(0 0 0 / .4);
}

.atbk-img__title {
    font-family: var(--atbk-font-heading);
    font-size: clamp(1.25rem, 2.6vw, 1.75rem);
    font-weight: 700;
    line-height: 1.15;
}

.atbk-img__text {
    max-width: 60ch;
    font-size: .95em;
    opacity: .92;
}

.atbk-img--card {
    aspect-ratio: var(--atbk-img-ratio-card);
}

.atbk-img--thumb {
    width: 64px;
    height: 64px;
    flex: 0 0 64px;
    border-radius: var(--atbk-radius-sm);
}

.atbk-img.is-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--atbk-accent);
}

.atbk-img.is-placeholder .atbk-icon {
    width: 40%;
    height: 40%;
}

.atbk-img--thumb.is-placeholder .atbk-icon {
    width: 28px;
    height: 28px;
}

/* Images désactivées (réglage ou attribut images="0") */
.atbk[data-atbk-images="0"] .atbk-img {
    display: none;
}

/* --- Squelettes de chargement ---------------------------------------------- */
.atbk-skeleton {
    display: grid;
    gap: 10px;
}

.atbk-skeleton__line,
.atbk-skeleton__box {
    position: relative;
    overflow: hidden;
    height: 14px;
    border-radius: var(--atbk-radius-sm);
    background: var(--atbk-skeleton);
}

.atbk-skeleton__box {
    height: 72px;
}

.atbk-skeleton__line.is-short { width: 40%; }
.atbk-skeleton__line.is-mid { width: 70%; }

.atbk-skeleton__line::after,
.atbk-skeleton__box::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, var(--atbk-skeleton-shine), transparent);
    animation: atbk-shine 1.4s infinite;
}

.atbk-skeleton--grid {
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
}

.atbk-skeleton--grid .atbk-skeleton__box {
    height: 40px;
}

.atbk-skeleton--cards .atbk-skeleton__box {
    height: 84px;
}

@keyframes atbk-shine {
    to { transform: translateX(100%); }
}

@media (prefers-reduced-motion: reduce) {
    .atbk-skeleton__line::after,
    .atbk-skeleton__box::after {
        animation: none;
    }
}

/* --- États vides / erreur dessinés ----------------------------------------- */
.atbk-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 28px 16px;
    text-align: center;
    color: var(--atbk-ink-soft);
    background: var(--atbk-surface-sunk);
    border: var(--atbk-border-width) dashed var(--atbk-border);
    border-radius: var(--atbk-radius);
}

.atbk-state .atbk-icon {
    width: 36px;
    height: 36px;
    color: var(--atbk-ink-faint);
}

.atbk-state--error {
    color: var(--atbk-err);
    background: var(--atbk-err-tint);
    border-color: var(--atbk-err);
    border-style: solid;
}

.atbk-state--error .atbk-icon {
    color: var(--atbk-err);
}

.atbk-state__title {
    font-weight: 600;
    color: var(--atbk-ink);
}

.atbk-state--error .atbk-state__title {
    color: inherit;
}

.atbk-state .atbk-button,
.atbk-state .atbk-link {
    margin-top: 6px;
}