/* Raccords des composants présents sur les pages, sans toucher à leurs données ou images. */
:is(body.vk-theme-cendres,body.vk-theme-nocturne,body.vk-theme-reliquaire,body.vk-theme-extreme) .main-auth-zone :is(
    .badges-page-hero,.badges-current-title,.badge-card,.badge-preferences,
    .mini-jeu-card,.account-accordion,.perso-info-box,.library-bookmark-btn,
    .vip-ann-card,.data-sql-card,.data-sql-toolbar,.track-card,.track-panel,
    .user-card,.dbm-card,.jma-panel,.varkal-mail-panel,.varkal-mail-sendbar,
    .panel-header,.perso-page .panel
) {
    border-color: var(--theme-outline);
    border-radius: var(--theme-radius);
    background: var(--theme-surface);
    color: var(--v3-parchment);
}
:is(body.vk-theme-cendres,body.vk-theme-nocturne,body.vk-theme-reliquaire,body.vk-theme-extreme) .main-auth-zone :is(
    .badge-card.obtenu,.mini-jeu-card.disponible,.vip-ann-card.vip-ann-progress
) {
    border-color: var(--theme-link);
    background: var(--theme-surface);
}
:is(body.vk-theme-cendres,body.vk-theme-nocturne,body.vk-theme-reliquaire,body.vk-theme-extreme) .main-auth-zone :is(
    .badges-save,.vip-ann-btn:not(.gold),.varkal-send-button,.jma-btn,.admin-btn
) {
    border: 1px solid var(--theme-outline);
    border-radius: var(--theme-radius);
    background: var(--theme-button);
    color: #fff9ed;
}
:is(body.vk-theme-cendres,body.vk-theme-nocturne,body.vk-theme-reliquaire,body.vk-theme-extreme) .main-auth-zone :is(
    .badges-page-kicker,.mini-jeux-title,.perso-info-left strong,
    .data-sql-title,.jma-panel h2,.library-bookmark-btn .vk-mark
) { color: var(--theme-link); }
:is(body.vk-theme-cendres,body.vk-theme-nocturne,body.vk-theme-reliquaire,body.vk-theme-extreme) .main-auth-zone :is(
    .badge-progress span,.vk-home-badge-progress span
) { background: var(--theme-button); }
body.vk-theme-extreme .main-auth-zone :is(
    .badges-page h1,.badge-card-name,.badge-preferences h2,
    .account-accordion > summary,.account-accordion > summary:hover,
    .mini-jeu-card h2,.jma-panel h2,.data-sql-copy strong
) { color: var(--extreme-heading); }
body.vk-theme-extreme .main-auth-zone :is(
    .badge-card-description,.badges-page-intro,.badge-preferences p,
    .mini-jeux-intro,.perso-info-left span,.account-accordion p
) { color: var(--extreme-muted); }
/* Les alertes, statuts et catégories gardent leurs couleurs sémantiques. */

/* Raccords de couleur communs : aucune mesure, forme, image ou typographie. */
body.vk-appearance:not(.vk-theme-v2) {
    --mood-text: var(--v3-parchment);
    --mood-muted: var(--v3-muted);
    --mood-metal: var(--v3-gold);
    --mood-blood: var(--v3-crimson);
    --mood-line: var(--v3-border);
    --mood-surface: var(--v3-coal);
    --mood-raised: var(--v3-panel);
}
body.vk-theme-extreme {
    --mood-text: var(--extreme-ink);
    --mood-muted: var(--extreme-muted);
    --mood-metal: var(--extreme-link);
    --mood-blood: var(--extreme-accent);
    --mood-line: var(--extreme-border);
    --mood-surface: var(--extreme-panel-soft);
    --mood-raised: var(--extreme-panel);
}
body.vk-theme-extreme.vk-mode-dark .vk-home :is(
    .vk-home-kicker,.vk-home-section-header > p:first-child,
    .vk-home-enquetes-eyebrow,.vk-home-enquetes-copy > a
),
body.vk-theme-extreme.vk-mode-dark #menu .vk-menu-enquetes {
    color: var(--extreme-link);
}
body.vk-mode-light:not(.vk-theme-v2) .vk-home {
    --vk-text: var(--v3-parchment);
    --vk-dark: var(--v3-night);
}
body.vk-mode-light:not(.vk-theme-v2) .vk-home-btn-secondary {
    color: var(--v3-parchment) !important;
}
body.vk-mode-light.vk-theme-extreme .vk-home {
    --vk-text: var(--extreme-ink);
    --vk-muted: var(--extreme-muted);
    --vk-dark: var(--extreme-input);
}
/* Les petites cartes qui n'ont pas de feuille propre reprennent le papier du thème. */
body.vk-mode-light:not(.vk-theme-v2) .vk-home :is(.vk-home-pill,.vk-home-faq details,.vk-home-cover-missing) {
    border-color: var(--theme-outline,var(--v3-border));
    background: var(--theme-surface,var(--v3-panel));
    color: var(--v3-parchment);
}
body.vk-mode-light:not(.vk-theme-v2) .main-auth-zone :is(.admin-table,.vip-table,.data-sql-table) {
    color: var(--v3-parchment);
}
body.vk-mode-light:not(.vk-theme-v2) .main-auth-zone :is(.admin-table th,.vip-table th,.data-sql-table th) {
    border-color: var(--theme-outline,var(--v3-border));
    background: var(--theme-surface,var(--v3-panel));
    color: var(--v3-parchment);
}

/* Formes propres à chaque ambiance : mêmes gestes en clair et en sombre. */
body.vk-appearance:not(.vk-theme-v2) {
    --vk-action-fill: var(--theme-button, var(--extreme-button, linear-gradient(135deg,#702a21,#6b2820)));
    --vk-action-text: #f7efe7;
    --vk-action-radius: 6px;
    --vk-action-border: solid;
    --vk-action-width: 1px;
    --vk-action-shadow: none;
    --vk-action-cut: none;
    --vk-action-spacing: .03em;
    --vk-action-case: none;
    --vk-action-font: inherit;
    --vk-nav-radius: 4px;
}


/* Cette liste inclut les actions des pages d'accueil, galeries, jeux et admin. */
body.vk-appearance:not(.vk-theme-v2) :is(
    .btn,.button,.bt,.admin-save,.admin-btn,.vk-home-btn,.vk-otherworks-btn,
    .badges-save,.vip-ann-btn,.jma-btn,.varkal-send-button,.vk-theme-submit,
    .view-btn,.hs-btn,.quiz-btn,.quiz-difficulty-btn,.quiz-answer,.ms-btn,
    .retour-btn,.dbm-save-btn,.dbm-delete-btn,.account-settings-save,
    .var-kal-submit,.btn-save,.mp-paper-save,.return-btn
) {
    border-radius: var(--vk-action-radius) !important;
    border-style: var(--vk-action-border) !important;
    border-width: var(--vk-action-width) !important;
    border-color: var(--theme-outline,var(--extreme-border,var(--v3-crimson))) !important;
    background: var(--vk-action-fill) !important;
    color: var(--vk-action-text) !important;
    box-shadow: var(--vk-action-shadow) !important;
    clip-path: var(--vk-action-cut);
    letter-spacing: var(--vk-action-spacing);
    text-transform: var(--vk-action-case);
    font-family: var(--vk-action-font);
    text-decoration: none;
    transition: transform .18s ease,filter .18s ease,box-shadow .18s ease;
}

body.vk-appearance:not(.vk-theme-v2) :is(
    .btn,.button,.bt,.admin-save,.admin-btn,.vk-home-btn,.vk-otherworks-btn,
    .badges-save,.vip-ann-btn,.jma-btn,.varkal-send-button,.vk-theme-submit,
    .view-btn,.hs-btn,.quiz-btn,.quiz-difficulty-btn,.quiz-answer,.ms-btn,
    .retour-btn,.dbm-save-btn,.dbm-delete-btn,.account-settings-save,
    .var-kal-submit,.btn-save,.mp-paper-save,.return-btn
):hover {
    filter: brightness(1.14);
}

body.vk-appearance:not(.vk-theme-v2) :is(
    .btn,.button,.bt,.admin-save,.admin-btn,.vk-home-btn,.vk-otherworks-btn,
    .badges-save,.vip-ann-btn,.jma-btn,.varkal-send-button,.vk-theme-submit,
    .view-btn,.hs-btn,.quiz-btn,.quiz-difficulty-btn,.quiz-answer,.ms-btn,
    .retour-btn,.dbm-save-btn,.dbm-delete-btn,.account-settings-save,
    .var-kal-submit,.btn-save,.mp-paper-save,.return-btn
):focus-visible { outline: 3px solid var(--v3-gold); outline-offset: 3px; }

body.vk-appearance:not(.vk-theme-v2) #menu a { border-radius: var(--vk-nav-radius) !important; }


/* Braise : plaque forgée, tête martelée et menu anguleux. */
body.vk-theme-braise {
    --vk-action-fill: linear-gradient(145deg,#713b29,#542920);
    --vk-action-radius: 1px 9px 1px 9px;
    --vk-action-width: 2px;
    --vk-action-shadow: inset 0 2px rgba(255,255,255,.12),0 5px 0 rgba(13,10,9,.55);
    --vk-action-case: uppercase;
    --vk-action-spacing: .095em;
    --vk-nav-radius: 1px 8px 1px 8px;
}

body.vk-theme-braise .vk-home-hero { border-bottom: 6px solid var(--v3-crimson); }


/* Cendres : inscription taillée dans la pierre. */
body.vk-theme-cendres {
    --vk-action-fill: linear-gradient(160deg,#4e5352,#373b3b);
    --vk-action-radius: 0;
    --vk-action-width: 0 0 3px 0;
    --vk-action-shadow: 4px 5px 0 var(--v3-border);
    --vk-action-case: uppercase;
    --vk-action-spacing: .14em;
    --vk-nav-radius: 0;
}

body.vk-theme-cendres :is(.btn,.button,.bt,.admin-save,.admin-btn,.vk-home-btn) { font-weight: 800; }


/* Nocturne : étroit, poli et arrondi comme un instrument en acier. */
body.vk-theme-nocturne {
    --vk-action-fill: linear-gradient(100deg,#28353b,#35464b);
    --vk-action-radius: 999px;
    --vk-action-width: 1px;
    --vk-action-shadow: inset 0 1px 0 rgba(255,255,255,.19),0 8px 18px rgba(0,0,0,.21);
    --vk-action-spacing: .11em;
    --vk-nav-radius: 999px;
}

body.vk-theme-nocturne :is(.btn,.button,.bt,.admin-save,.admin-btn,.vk-home-btn) { padding-inline: 1.55em; }


/* Reliquaire : sceau et double filet de reliure. */
body.vk-theme-reliquaire {
    --vk-action-fill: linear-gradient(150deg,#644435,#51342d);
    --vk-action-radius: 2px 15px 2px 15px;
    --vk-action-border: double;
    --vk-action-width: 4px;
    --vk-action-shadow: inset 0 0 0 2px rgba(255,255,255,.13),0 5px 13px rgba(0,0,0,.23);
    --vk-action-font: Georgia,serif;
    --vk-action-spacing: .06em;
    --vk-nav-radius: 2px 10px 2px 10px;
}

body.vk-theme-reliquaire #menu { border-block: 3px double var(--v3-crimson); }


/* Carnage : gros blocs sertis d'une tranche de sang noirci. */
body.vk-theme-carnage {
    --vk-action-fill: linear-gradient(125deg,#692821,#411c1b);
    --vk-action-radius: 0;
    --vk-action-width: 2px;
    --vk-action-shadow: 0 7px 0 var(--extreme-accent),0 11px 19px rgba(0,0,0,.33);
    --vk-action-case: uppercase;
    --vk-action-spacing: .06em;
    --vk-action-font: Impact,"Arial Black",sans-serif;
    --vk-nav-radius: 0;
}

body.vk-theme-carnage :is(.btn,.button,.bt,.admin-save,.admin-btn,.vk-home-btn):hover { transform: translateY(3px); }


/* Nécrose : bords irréguliers, coutures apparentes. */
body.vk-theme-necrose {
    --vk-action-fill: linear-gradient(145deg,#424536,#31342d);
    --vk-action-radius: 18px 2px 16px 3px;
    --vk-action-border: dashed;
    --vk-action-width: 2px;
    --vk-action-shadow: inset 0 0 0 4px rgba(0,0,0,.17),0 9px 20px rgba(0,0,0,.23);
    --vk-action-spacing: .04em;
    --vk-nav-radius: 13px 2px 11px 2px;
}

body.vk-theme-necrose #menu a { border-bottom: 1px dashed var(--extreme-accent); }


/* Morsure : chaque action porte la même entaille diagonale. */
body.vk-theme-morsure {
    --vk-action-fill: linear-gradient(125deg,#732a23,#4c1f1c);
    --vk-action-radius: 0;
    --vk-action-width: 2px;
    --vk-action-cut: polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px);
    --vk-action-case: uppercase;
    --vk-action-spacing: .075em;
    --vk-nav-radius: 0;
}

body.vk-theme-morsure #menu a { border-left: 3px solid var(--extreme-accent); }


/* Ivoire : cartouche gravé, dessin très fin. */
body.vk-theme-ivoire {
    --vk-action-fill: linear-gradient(160deg,#e4d9c6,#c6b9a6);
    --vk-action-text: #402d2a;
    --vk-action-radius: 2px;
    --vk-action-border: double;
    --vk-action-width: 4px;
    --vk-action-shadow: inset 0 0 0 3px rgba(255,255,255,.15),0 3px 0 var(--extreme-shadow);
    --vk-action-font: Georgia,serif;
    --vk-action-case: uppercase;
    --vk-action-spacing: .17em;
    --vk-nav-radius: 1px;
}

body.vk-theme-ivoire #menu a { border-bottom: 3px double var(--extreme-accent); }


/* Ossuaire : lourde stèle dont les quatre coins sont abattus. */
body.vk-theme-ossuaire {
    --vk-action-fill: linear-gradient(145deg,#494b4b,#353738);
    --vk-action-radius: 0;
    --vk-action-width: 2px;
    --vk-action-cut: polygon(9px 0,calc(100% - 9px) 0,100% 9px,100% calc(100% - 9px),calc(100% - 9px) 100%,9px 100%,0 calc(100% - 9px),0 9px);
    --vk-action-case: uppercase;
    --vk-action-spacing: .12em;
    --vk-action-font: ui-monospace,monospace;
    --vk-nav-radius: 0;
}

body.vk-theme-ossuaire #menu a { border-inline: 1px solid var(--extreme-border); }


/* Aube rouge : biseau net et coupe de titre diagonale. */
body.vk-theme-aube-rouge {
    --vk-action-fill: linear-gradient(115deg,#783a2b,#4f2822);
    --vk-action-radius: 1px 19px 1px 19px;
    --vk-action-width: 2px;
    --vk-action-shadow: 5px 5px 0 var(--extreme-shadow);
    --vk-action-case: uppercase;
    --vk-action-spacing: .095em;
    --vk-nav-radius: 0 13px 0 13px;
}

body.vk-theme-aube-rouge .vk-home-hero { border-block-width: 8px; }


/* Même silhouette pour la version claire, palette adaptée au papier. */
body.vk-theme-braise.vk-mode-light { --vk-action-fill: linear-gradient(140deg,#814432,#68372b); }

body.vk-theme-cendres.vk-mode-light { --vk-action-fill: linear-gradient(145deg,#4f5150,#636563); }

body.vk-theme-nocturne.vk-mode-light { --vk-action-fill: linear-gradient(110deg,#34454a,#45565a); }

body.vk-theme-reliquaire.vk-mode-light { --vk-action-fill: linear-gradient(145deg,#6d4937,#59382e); }

body.vk-theme-carnage.vk-mode-light { --vk-action-fill: linear-gradient(140deg,#712c24,#55231e); }

body.vk-theme-necrose.vk-mode-light { --vk-action-fill: linear-gradient(140deg,#4a4d3c,#373b32); }

body.vk-theme-morsure.vk-mode-light { --vk-action-fill: linear-gradient(115deg,#7b3129,#5d2521); }

body.vk-theme-ivoire.vk-mode-light { --vk-action-fill: linear-gradient(145deg,#ded3bf,#cbbba6); }

body.vk-theme-ossuaire.vk-mode-light { --vk-action-fill: linear-gradient(145deg,#505453,#424544); }

body.vk-theme-aube-rouge.vk-mode-light { --vk-action-fill: linear-gradient(120deg,#88432f,#693227); }

/* Les outils, jeux et comptes reprennent les matières du thème sélectionné. */
body.vk-appearance:not(.vk-theme-v2) .main-auth-zone :is(.quiz-card,.score-stat-card,.scores-table-wrapper,.jeu-indispo-card,.account-accordion,.mini-jeu-card,.dbm-card,.vip-ann-card) {
    border-color: var(--theme-outline,var(--extreme-border,var(--v3-border)));
    background: var(--theme-surface,var(--extreme-panel,var(--v3-panel)));
    color: var(--extreme-ink,var(--v3-parchment));
}
body.vk-appearance:not(.vk-theme-v2) .main-auth-zone :is(.quiz-varkal-title,.mini-jeux-title,.scores-title,.jeu-indispo-title) {
    color: var(--theme-link,var(--extreme-link,var(--v3-gold)));
}
body.vk-appearance:not(.vk-theme-v2) :is(.vk-home-btn-secondary,.vip-ann-btn.secondary,.admin-btn.secondary) {
    background: var(--theme-surface,var(--extreme-panel,var(--v3-panel))) !important;
    color: var(--extreme-ink,var(--v3-parchment)) !important;
}
body.vk-appearance:not(.vk-theme-v2) :is(.btn,.button,.bt,.admin-save,.admin-btn,.vk-home-btn,.vip-ann-btn):disabled {
    opacity: .55;
    cursor: not-allowed;
    filter: none;
}


/* ============================================================
   COMPOSANTS UI GÉNÉRIQUES
   Réutilisables par les pages qui doivent suivre tous les thèmes
   sans feuille CSS dédiée.
============================================================ */
.main-auth-zone .vk-ui-stack {
    display: grid;
    gap: 16px;
}

.main-auth-zone .vk-ui-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(min(240px,100%),1fr));
    gap: 14px;
}

.main-auth-zone .vk-ui-wide {
    grid-column: 1 / -1;
}

.main-auth-zone .vk-ui-between,
.main-auth-zone .vk-ui-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.main-auth-zone .vk-ui-between {
    justify-content: space-between;
}

.main-auth-zone .vk-ui-actions {
    margin: 16px 0;
}

.main-auth-zone .vk-ui-card,
.main-auth-zone .vk-ui-details,
.main-auth-zone .vk-ui-alert,
.main-auth-zone .vk-ui-feedback {
    border: 1px solid var(--mood-line,var(--theme-outline,#5c2723));
    border-radius: var(--theme-radius,8px);
    background: var(--mood-raised,var(--theme-surface,rgba(20,20,20,.72)));
    color: var(--mood-text,#ddd);
    box-shadow: 0 10px 28px rgba(0,0,0,.12);
}

.main-auth-zone .vk-ui-card,
.main-auth-zone .vk-ui-alert,
.main-auth-zone .vk-ui-feedback {
    padding: 14px;
}

.main-auth-zone .vk-ui-card-link {
    display: block;
    text-decoration: none;
}

.main-auth-zone .vk-ui-card-link:hover,
.main-auth-zone .vk-ui-current {
    border-color: var(--mood-metal,var(--theme-link,#8d6b45)) !important;
    filter: brightness(1.08);
}

.main-auth-zone .vk-ui-muted {
    color: var(--mood-muted,#999);
}

.main-auth-zone .vk-ui-field {
    display: grid;
    gap: 7px;
    min-width: 0;
}

.main-auth-zone .vk-ui-field > span,
.main-auth-zone .vk-ui-field > strong {
    font-weight: 700;
}

.main-auth-zone .vk-ui-field :is(input:not([type="checkbox"]):not([type="radio"]),select,textarea),
.main-auth-zone .vk-ui-fieldset > :is(input:not([type="checkbox"]):not([type="radio"]),select,textarea),
.main-auth-zone .vk-ui-compact {
    width: 100%;
    max-width: 100%;
    padding: 10px 11px;
    border: 1px solid var(--mood-line,var(--theme-outline,#5c2723));
    border-radius: var(--theme-radius,6px);
    background: var(--mood-surface,var(--theme-surface,#111));
    color: var(--mood-text,#eee);
    font: inherit;
}

.main-auth-zone .vk-ui-field textarea,
.main-auth-zone .vk-ui-fieldset textarea {
    resize: vertical;
}

.main-auth-zone .vk-ui-field :is(input,select,textarea):focus,
.main-auth-zone .vk-ui-fieldset > :is(input,select,textarea):focus,
.main-auth-zone .vk-ui-compact:focus {
    outline: 2px solid var(--mood-metal,var(--theme-link,#8d6b45));
    outline-offset: 2px;
}

.main-auth-zone .vk-ui-choice {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 11px;
    border: 1px solid var(--mood-line,var(--theme-outline,#5c2723));
    border-radius: var(--theme-radius,6px);
    background: var(--mood-surface,var(--theme-surface,rgba(20,20,20,.5)));
    color: var(--mood-text,#ddd);
}

.main-auth-zone .vk-ui-choices {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}

.main-auth-zone .vk-ui-fieldset {
    min-width: 0;
    margin: 0;
}

.main-auth-zone .vk-ui-fieldset legend {
    padding: 0 7px;
    font-weight: 700;
    color: var(--mood-metal,var(--theme-link,#c9a45c));
}

.main-auth-zone .vk-ui-details {
    overflow: hidden;
}

.main-auth-zone .vk-ui-details > summary {
    cursor: pointer;
    padding: 13px 14px;
    font-weight: 700;
}

.main-auth-zone .vk-ui-details[open] > summary {
    border-bottom: 1px solid var(--mood-line,var(--theme-outline,#5c2723));
}

.main-auth-zone .vk-ui-details > .vk-ui-stack {
    padding: 14px;
}

.main-auth-zone .vk-ui-badge {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 3px 9px;
    border: 1px solid var(--mood-line,var(--theme-outline,#5c2723));
    border-radius: 999px;
    background: var(--mood-surface,var(--theme-surface,rgba(20,20,20,.5)));
    color: var(--mood-text,#ddd);
    font-size: .78rem;
    font-weight: 700;
}

.main-auth-zone .vk-ui-badge.is-success,
.main-auth-zone .vk-ui-badge.is-ouvert,
.main-auth-zone .vk-ui-alert.is-success,
.main-auth-zone .vk-ui-feedback.is-success {
    border-color: #387a4c;
}

.main-auth-zone .vk-ui-badge.is-warning,
.main-auth-zone .vk-ui-badge.is-brouillon,
.main-auth-zone .vk-ui-alert.is-warning {
    border-color: #9a762f;
}

.main-auth-zone .vk-ui-badge.is-danger,
.main-auth-zone .vk-ui-badge.is-ferme,
.main-auth-zone .vk-ui-feedback.is-error {
    border-color: #8f3838;
}

.main-auth-zone .vk-ui-feedback[hidden],
.main-auth-zone .vk-ui-alert[hidden] {
    display: none;
}

.main-auth-zone .vk-ui-compact {
    width: auto;
    min-width: 130px;
}

@media (max-width: 768px) {
    .main-auth-zone .vk-ui-between {
        align-items: stretch;
    }

    .main-auth-zone .vk-ui-between > * {
        max-width: 100%;
    }

    .main-auth-zone .vk-ui-actions > :is(.btn,.button,.bt,button,a,select) {
        flex: 1 1 180px;
    }

    .main-auth-zone .vk-ui-compact {
        width: 100%;
    }
}