/* =============================================================================
   ATTPS Impriclub — front : jetons de l'apparence (skill attps-themes, socle du boilerplate).
   Couche 1 : thème « classique » en clair (ci-dessous). Couche 2 : un thème redéfinit ces jetons sur
   .atic[data-atic-theme="…"] (assets/css/themes/). Couche 3 : mode sombre sur .atic[data-atic-mode="dark"].
   Couche 4 : « suivre le site » (attps-theme-bridge, 0,4,0) et couleurs de l'utilisateur (inline, 0,3,0).
   Aucune couleur en dur dans les composants : tout passe par var(--atic-*). Vocabulaire commun aux plugins
   ATTPS (booked, polls) : un jeton du même nom est relié au builder sans rien écrire.
   ========================================================================== */
.atic {
    /* Marque */
    --atic-accent: #3949ab;
    --atic-accent-dark: #2e3a89;
    --atic-on-accent: #fff;
    --atic-tint: #f1f2f9;
    --atic-tint-border: #d0d3eb;
    --atic-secondary: #2e3a89;
    --atic-on-secondary: #fff;

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

    /* Surfaces (du plus bas au plus haut) */
    --atic-bg: transparent;
    --atic-surface: #fff;
    --atic-surface-sunk: #f6f7f7;
    --atic-surface-raised: #fff;
    --atic-surface-overlay: #fff;
    --atic-border: #dcdcde;
    --atic-border-strong: #c3c4c7;
    --atic-border-width: 1px;

    /* Sémantique (états) */
    --atic-ok: #0a7c74;
    --atic-ok-tint: #eaf5f2;
    --atic-warn: #dba617;
    --atic-warn-tint: #fff4e5;
    --atic-warn-ink: #8a6116;
    --atic-err: #b32d2e;
    --atic-err-tint: #fcf0f1;
    --atic-on-status: #fff;

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

    /* Ombres */
    --atic-shadow-color: 0 0 0;
    --atic-shadow-1: 0 1px 2px rgb(var(--atic-shadow-color) / .06);
    --atic-shadow-2: 0 8px 20px rgb(var(--atic-shadow-color) / .12);
    --atic-shadow-3: 0 16px 40px rgb(var(--atic-shadow-color) / .28);
    --atic-shadow-card: var(--atic-shadow-1);
    --atic-backdrop: rgb(20 16 24 / .45);

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

    /* Champs et choix */
    --atic-field-bg: var(--atic-surface);
    --atic-field-border: var(--atic-border);
    --atic-field-radius: var(--atic-radius-sm);


    /* Typographie et densité */
    --atic-font: inherit;
    --atic-font-heading: var(--atic-font);
    --atic-font-size: inherit;
    --atic-heading-weight: 600;
    --atic-density: 1;
    --atic-gap: calc(16px * var(--atic-density));

    /* Widget */
    --atic-widget-max: none;
    --atic-widget-padding: 0;

    /* Focus et mouvement */
    --atic-focus: var(--atic-accent);
    --atic-motion: 150ms;
    --atic-easing: ease;

    --atic-skeleton: var(--atic-surface-sunk);
    --atic-skeleton-shine: rgb(255 255 255 / .6);

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

.atic-widget {
    position: relative;
    max-width: var(--atic-widget-max);
    margin: 0 auto var(--atic-gap);
    padding: var(--atic-widget-padding);
    border-radius: var(--atic-radius-card);
}

/* --- 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. `.atic.atic` (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) .atic.atic.atic-widget[data-atic-mode="light"] {
    --atic-bg: var(--atic-surface-solid, var(--atic-surface));   /* opaque : un thème à surfaces translucides (Verre) en donne une */
    --atic-widget-padding: clamp(14px, 2.4vw, 24px);
    border-radius: var(--atic-radius-lg);
    box-shadow: var(--atic-shadow-2);
}

/* Dans une page d'attps-builder, l'enveloppe du bloc (.atb-attps-impriclub, produite par le plugin) est un conteneur : une
   mise en page d'un thème peut suivre la place réellement disponible. Étirée sur sa colonne (align-self /
   justify-self), elle ne tombe pas à zéro dans une colonne centrée. Ailleurs, les seuils d'écran restent. */
.atb-attps-impriclub {
    container: atic-host / inline-size;
    align-self: stretch;
    justify-self: stretch;
}

.atic[data-atic-mode="dark"] {
    --atic-accent: #8b9cf5;
    --atic-accent-dark: #b3bff8;
    --atic-on-accent: #17191b;
    --atic-tint: #262c44;
    --atic-tint-border: #3c4470;
    --atic-secondary: #b3bff8;
    --atic-on-secondary: #17191b;
    --atic-ink: #f0f0f1;
    --atic-ink-soft: #b5b8bd;
    --atic-ink-faint: #8c8f94;
    /* Le widget peint son propre fond : lisible même posé sur une page claire (site sans mode sombre). */
    --atic-bg: #171b24;
    --atic-widget-padding: clamp(12px, 2vw, 20px);
    --atic-surface: #1f2430;
    --atic-surface-sunk: #171b24;
    --atic-surface-raised: #262c3a;
    --atic-surface-overlay: #2b3242;
    --atic-border: #3a4152;
    --atic-border-strong: #4a5266;
    --atic-ok: #5ec8bf;
    --atic-ok-tint: #17302e;
    --atic-warn: #e8bd4a;
    --atic-warn-tint: #3a2f12;
    --atic-warn-ink: #f2d27a;
    --atic-err: #f08a8a;
    --atic-err-tint: #3a1d1e;
    --atic-shadow-color: 0 0 0;
    --atic-shadow-card: 0 1px 2px rgb(0 0 0 / .4);
    --atic-skeleton-shine: rgb(255 255 255 / .08);
    color-scheme: dark;
}