/* =========================================================
   LYNK — HABILLAGES DE L'INTERFACE
   ---------------------------------------------------------
   Chargé APRÈS tous les autres styles. Chaque habillage est
   activé par <html data-ui="…"> (réglage dans Affichage →
   Habillage, voir js/theme.js) :

       sticker (défaut, décrit dans lynk-theme.css)
       glass   · Liquid Glass
       minimal · épuré, plat
       aurore  · dégradés pastel
       ardoise · graphite mat, filets fins, sobre

   AUCUNE règle de ce fichier ne s'applique quand
   data-ui="sticker" : le style par défaut de Lynk reste intact.

   Principe : chaque habillage ne définit que des VARIABLES
   (couleurs, rayons, ombres, flou…). Les règles communes
   (section 6) les appliquent partout. C'est ce qui garantit
   un texte lisible dans le thème CLAIR comme dans le thème
   SOMBRE : l'encre est choisie en fonction de la surface.
   ========================================================= */

/* =========================================================
   1. ENCRE POSÉE SUR LES SURFACES (lisible dans les 2 thèmes)
   ========================================================= */
html:is([data-ui="glass"], [data-ui="minimal"], [data-ui="aurore"], [data-ui="ardoise"]) {
    --sk-ink: #1B1340;          /* texte principal sur surface claire */
    --sk-ink-soft: #46406B;     /* texte secondaire */
    --sk-muted: #5F5878;        /* texte discret */
}

html[data-theme="dark"]:is([data-ui="glass"], [data-ui="minimal"], [data-ui="aurore"], [data-ui="ardoise"]) {
    --sk-ink: #F4EFFF;          /* texte principal sur surface sombre */
    --sk-ink-soft: #CFC2F0;
    --sk-muted: #A996D6;
}

/* =========================================================
   2. HABILLAGE « LIQUID GLASS »
   ========================================================= */
html[data-ui="glass"] {
    --sk-bg: rgba(255, 255, 255, .55);
    --sk-bg-image: linear-gradient(180deg, rgba(255, 255, 255, .70), rgba(255, 255, 255, .14) 44%, rgba(255, 255, 255, 0) 62%);
    --sk-border: 1px solid rgba(255, 255, 255, .62);
    --sk-radius: 22px;
    --sk-shadow: 0 12px 34px rgba(38, 22, 74, .14), 0 2px 6px rgba(38, 22, 74, .07);
    --sk-shadow-hover: 0 20px 46px rgba(38, 22, 74, .22);
    --sk-blur: blur(22px) saturate(180%);
    --sk-blur-soft: blur(14px) saturate(165%);

    --sk-btn-bg: rgba(255, 255, 255, .80);
    --sk-btn-hover-bg: rgba(255, 255, 255, .95);
    --sk-btn-ink: #1B1340;
    --sk-btn-border: 1px solid rgba(255, 255, 255, .62);
    --sk-btn-shadow: 0 10px 26px rgba(38, 22, 74, .14);
    --sk-btn-shadow-hover: 0 18px 40px rgba(38, 22, 74, .22);
    --sk-btn-radius: 16px;

    --sk-primary-bg: color-mix(in srgb, var(--violet) 90%, transparent);
    --sk-primary-hover-bg: color-mix(in srgb, var(--violet-deep) 94%, transparent);
    --sk-primary-ink: #FFFFFF;
    --sk-primary-border: rgba(255, 255, 255, .45);

    --sk-field-bg: rgba(255, 255, 255, .80);
    --sk-sidebar-bg: rgba(24, 16, 54, .76);
    --sk-side-border: rgba(255, 255, 255, .20);
    --sk-page-bg: #EFE9FF;
    --sk-page-image:
        radial-gradient(58rem 42rem at 10% 4%, rgba(124, 58, 237, .34), transparent 62%),
        radial-gradient(46rem 34rem at 92% 10%, rgba(108, 184, 255, .38), transparent 62%),
        radial-gradient(52rem 40rem at 78% 96%, rgba(255, 92, 147, .26), transparent 64%),
        radial-gradient(44rem 34rem at 22% 92%, rgba(61, 219, 164, .24), transparent 62%);
}

html[data-theme="dark"][data-ui="glass"] {
    --sk-bg: rgba(40, 34, 64, .58);
    --sk-bg-image: linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .03) 46%, rgba(255, 255, 255, 0) 64%);
    --sk-border: 1px solid rgba(255, 255, 255, .14);
    --sk-shadow: 0 12px 34px rgba(0, 0, 0, .46), 0 2px 6px rgba(0, 0, 0, .30);
    --sk-shadow-hover: 0 20px 46px rgba(0, 0, 0, .58);
    --sk-btn-bg: rgba(58, 48, 92, .80);
    --sk-btn-hover-bg: rgba(74, 62, 116, .94);
    --sk-btn-ink: #F4EFFF;
    --sk-btn-border: 1px solid rgba(255, 255, 255, .14);
    --sk-btn-shadow: 0 10px 26px rgba(0, 0, 0, .44);
    --sk-btn-shadow-hover: 0 18px 40px rgba(0, 0, 0, .56);
    --sk-field-bg: rgba(58, 48, 92, .80);
    --sk-sidebar-bg: rgba(9, 6, 17, .86);
    --sk-page-bg: #100C1E;
    --sk-page-image:
        radial-gradient(58rem 42rem at 8% 2%, rgba(124, 58, 237, .42), transparent 62%),
        radial-gradient(48rem 36rem at 94% 8%, rgba(43, 92, 168, .40), transparent 62%),
        radial-gradient(52rem 40rem at 80% 98%, rgba(178, 40, 96, .28), transparent 64%);
}

/* =========================================================
   3. HABILLAGE « MINIMAL » (plat, bordures fines, sans ombre)
   ========================================================= */
html[data-ui="minimal"] {
    --sk-bg: var(--card);
    --sk-bg-image: none;
    --sk-border: 1px solid color-mix(in srgb, var(--sk-ink) 16%, transparent);
    --sk-radius: 12px;
    --sk-shadow: none;
    --sk-shadow-hover: 0 2px 0 color-mix(in srgb, var(--sk-ink) 14%, transparent);
    --sk-blur: none;
    --sk-blur-soft: none;

    --sk-btn-bg: var(--card);
    --sk-btn-hover-bg: color-mix(in srgb, var(--sk-ink) 8%, var(--card));
    --sk-btn-ink: var(--sk-ink);
    --sk-btn-border: 1px solid color-mix(in srgb, var(--sk-ink) 26%, transparent);
    --sk-btn-shadow: none;
    --sk-btn-shadow-hover: none;
    --sk-btn-radius: 10px;

    --sk-primary-bg: var(--violet);
    --sk-primary-hover-bg: var(--violet-deep);
    --sk-primary-ink: #FFFFFF;
    --sk-primary-border: transparent;

    --sk-field-bg: var(--card);
    --sk-sidebar-bg: #16112E;
    --sk-side-border: rgba(255, 255, 255, .12);
    --sk-page-bg: var(--paper);
    --sk-page-image: none;
}

html[data-theme="dark"][data-ui="minimal"] {
    --sk-sidebar-bg: #0A0716;
    --sk-border: 1px solid rgba(255, 255, 255, .16);
    --sk-btn-border: 1px solid rgba(255, 255, 255, .22);
    --sk-shadow-hover: 0 2px 0 rgba(0, 0, 0, .5);
}

/* =========================================================
   4. HABILLAGE « AURORE » (dégradés pastel doux)
   ========================================================= */
html[data-ui="aurore"] {
    --sk-bg: #F8F3FF;
    --sk-bg-image: linear-gradient(160deg, #FFF6FB, #F1E9FF 55%, #E9F4FF);
    --sk-border: 1px solid rgba(124, 58, 237, .20);
    --sk-radius: 26px;
    --sk-shadow: 0 14px 34px rgba(124, 58, 237, .14);
    --sk-shadow-hover: 0 22px 46px rgba(124, 58, 237, .24);
    --sk-blur: none;
    --sk-blur-soft: none;

    --sk-btn-bg: #FFFFFF;
    --sk-btn-hover-bg: #F3ECFF;
    --sk-btn-ink: #2A1A4E;
    --sk-btn-border: 1px solid rgba(124, 58, 237, .24);
    --sk-btn-shadow: 0 8px 20px rgba(124, 58, 237, .16);
    --sk-btn-shadow-hover: 0 14px 30px rgba(124, 58, 237, .26);
    --sk-btn-radius: 18px;

    --sk-primary-bg: linear-gradient(150deg, #8B5CF6, #6D28D9);
    --sk-primary-hover-bg: linear-gradient(150deg, #7C3AED, #5B21D6);
    --sk-primary-ink: #FFFFFF;
    --sk-primary-border: transparent;

    --sk-field-bg: #FFFFFF;
    --sk-sidebar-bg: linear-gradient(180deg, #4B2A8F, #241146);
    --sk-side-border: rgba(255, 255, 255, .18);
    --sk-page-bg: #FBF7FF;
    --sk-page-image:
        radial-gradient(48rem 34rem at 8% 0%, rgba(255, 170, 220, .50), transparent 60%),
        radial-gradient(52rem 38rem at 96% 6%, rgba(150, 200, 255, .50), transparent 62%),
        radial-gradient(46rem 34rem at 70% 100%, rgba(190, 160, 255, .45), transparent 62%);
}

html[data-theme="dark"][data-ui="aurore"] {
    --sk-bg: #221838;
    --sk-bg-image: linear-gradient(160deg, #2A1F49, #2E2154 55%, #1E2A4A);
    --sk-border: 1px solid rgba(180, 150, 255, .22);
    --sk-shadow: 0 14px 34px rgba(0, 0, 0, .42);
    --sk-shadow-hover: 0 22px 46px rgba(0, 0, 0, .55);
    --sk-btn-bg: #33265E;
    --sk-btn-hover-bg: #3D2E6E;
    --sk-btn-ink: #F4EFFF;
    --sk-btn-border: 1px solid rgba(180, 150, 255, .24);
    --sk-btn-shadow: 0 8px 20px rgba(0, 0, 0, .38);
    --sk-btn-shadow-hover: 0 14px 30px rgba(0, 0, 0, .50);
    --sk-field-bg: #2A1F49;
    --sk-sidebar-bg: linear-gradient(180deg, #2A1550, #150B2E);
    --sk-page-bg: #120C24;
    --sk-page-image:
        radial-gradient(48rem 34rem at 8% 0%, rgba(120, 60, 180, .48), transparent 60%),
        radial-gradient(52rem 38rem at 96% 6%, rgba(40, 80, 160, .48), transparent 62%),
        radial-gradient(46rem 34rem at 70% 100%, rgba(120, 80, 190, .42), transparent 62%);
}

/* =========================================================
   5. HABILLAGE « ARDOISE » (filets fins, matières mates)
   ---------------------------------------------------------
   Succède à l'ancien habillage « Néon » : ni lueur, ni dégradé
   coloré, ni flou. Des surfaces mates, des filets d'un pixel,
   des angles discrets et un fond « papier technique » rayé.
   Surfaces d'autant plus sombres que le thème est sombre : en
   thème clair, on obtient un papier d'ardoise ; en thème
   sombre, du graphite. L'encre suit le thème, donc tout reste
   lisible dans les deux cas.
   ========================================================= */

/* ---------- 5a. Variante CLAIRE : papier d'ardoise ---------- */
html[data-ui="ardoise"]:not([data-theme="dark"]) {
    /* Encre graphite, légèrement chaude. */
    --sk-ink: #1F2326;
    --sk-ink-soft: #4A5155;
    --sk-muted: #6E767B;

    --sk-bg: #EDEAE4;                 /* papier d'ardoise */
    --sk-bg-image: none;
    --sk-border: 1px solid #C6C1B7;   /* filet fin, jamais de bord épais */
    --sk-radius: 10px;                /* angles discrets */
    --sk-shadow: 0 1px 0 rgba(20, 23, 26, .10), 0 8px 18px rgba(20, 23, 26, .07);
    --sk-shadow-hover: 0 1px 0 rgba(20, 23, 26, .12), 0 12px 24px rgba(20, 23, 26, .11);
    --sk-blur: none;
    --sk-blur-soft: none;

    --sk-btn-bg: #E2DFD8;
    --sk-btn-hover-bg: #D6D2C9;
    --sk-btn-ink: #1F2326;
    --sk-btn-border: 1px solid #BDB7AC;
    --sk-btn-shadow: 0 1px 0 rgba(20, 23, 26, .14);
    --sk-btn-shadow-hover: 0 2px 0 rgba(20, 23, 26, .16);
    --sk-btn-radius: 8px;

    /* Accent du habillage : vert-de-gris (sobre, institutionnel). */
    --sk-primary-bg: #2F5D55;
    --sk-primary-hover-bg: #3A6E64;
    --sk-primary-ink: #F3FAF7;
    --sk-primary-border: #244A44;

    --sk-field-bg: #F7F5F1;
    --sk-sidebar-bg: #1E2327;         /* la barre latérale reste sombre */
    --sk-side-border: #323A3F;
    --sk-page-bg: #E5E1D9;
    /* Fond « papier technique » : fines rayures, aucun halo coloré. */
    --sk-page-image:
        repeating-linear-gradient(0deg, rgba(31, 35, 38, .055) 0 1px, transparent 1px 30px);
}

/* ---------- 5b. Variante SOMBRE : graphite mat ---------- */
html[data-theme="dark"][data-ui="ardoise"] {
    --sk-ink: #E8E4DB;
    --sk-ink-soft: #B0ABA0;
    --sk-muted: #97928A;

    --sk-bg: #22262A;                 /* graphite mat */
    --sk-bg-image: none;
    --sk-border: 1px solid #3A4247;
    --sk-radius: 10px;
    --sk-shadow: 0 1px 0 rgba(0, 0, 0, .40), 0 8px 20px rgba(0, 0, 0, .28);
    --sk-shadow-hover: 0 1px 0 rgba(0, 0, 0, .40), 0 14px 28px rgba(0, 0, 0, .38);
    --sk-blur: none;
    --sk-blur-soft: none;

    --sk-btn-bg: #2A2F33;
    --sk-btn-hover-bg: #343B40;
    --sk-btn-ink: #E8E4DB;
    --sk-btn-border: 1px solid #454C52;
    --sk-btn-shadow: 0 1px 0 rgba(0, 0, 0, .42);
    --sk-btn-shadow-hover: 0 2px 0 rgba(0, 0, 0, .46);
    --sk-btn-radius: 8px;

    --sk-primary-bg: #3E6B62;
    --sk-primary-hover-bg: #4A7C72;
    --sk-primary-ink: #F1FAF6;
    --sk-primary-border: #56897E;

    --sk-field-bg: #1B1F22;
    --sk-sidebar-bg: #0E1113;
    --sk-side-border: #2C3338;
    --sk-page-bg: #14171A;
    --sk-page-image:
        repeating-linear-gradient(90deg, rgba(255, 255, 255, .032) 0 1px, transparent 1px 30px),
        repeating-linear-gradient(0deg, rgba(255, 255, 255, .032) 0 1px, transparent 1px 30px);
}

/* =========================================================
   6. RÈGLES COMMUNES (consomment les variables ci-dessus)
   « :is(…) » = tous les habillages SAUF « sticker ».
   ========================================================= */

/* ---------- 6a. Fond de page ---------- */
html:is([data-ui="glass"], [data-ui="minimal"], [data-ui="aurore"], [data-ui="ardoise"]) body {
    background-color: var(--sk-page-bg);
    background-image: var(--sk-page-image);
    background-attachment: fixed;
    background-size: auto;
    background-repeat: no-repeat;
    color: var(--sk-ink);
}

/* ---------- 6b. Barre latérale : sombre, texte clair, logo visible ---------- */
html:is([data-ui="glass"], [data-ui="minimal"], [data-ui="aurore"], [data-ui="ardoise"]) .sidebar {
    background: var(--sk-sidebar-bg);
    border-right: 1px solid var(--sk-side-border);
    color: #FFFFFF;
    -webkit-backdrop-filter: var(--sk-blur);
    backdrop-filter: var(--sk-blur);
}

html[data-sidebar-side="right"]:is([data-ui="glass"], [data-ui="minimal"], [data-ui="aurore"], [data-ui="ardoise"]) .sidebar {
    border-right: 0;
    border-left: 1px solid var(--sk-side-border);
}

/* Les formes décoratives « autocollant » n'ont plus leur place ici. */
html:is([data-ui="glass"], [data-ui="minimal"], [data-ui="aurore"], [data-ui="ardoise"]) .sidebar::before,
html:is([data-ui="glass"], [data-ui="minimal"], [data-ui="aurore"], [data-ui="ardoise"]) .sidebar::after {
    display: none;
}

/* Le nom « Lynk » et l'icône : sans cela, ils disparaissent sur une surface
   translucide (texte violet sur fond clair, « L » blanc sur verre blanc). */
html:is([data-ui="glass"], [data-ui="minimal"], [data-ui="aurore"], [data-ui="ardoise"]) .sidebar .brand,
html:is([data-ui="glass"], [data-ui="minimal"], [data-ui="aurore"], [data-ui="ardoise"]) .sidebar .brand span {
    color: #FFFFFF;
}

html:is([data-ui="glass"], [data-ui="minimal"], [data-ui="aurore"], [data-ui="ardoise"]) .sidebar .brand-icon {
    background: var(--violet);
    color: #FFFFFF;
    border: 1px solid rgba(255, 255, 255, .38);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 6px 16px rgba(0, 0, 0, .25);
}

/* ---------- 6c. Panneaux & cartes ----------
   On force aussi --ink / --ink-soft / --muted sur la carte : tout le texte
   posé dessus (titres, dates, petits libellés) devient lisible, dans les
   deux thèmes, sans toucher au reste de la page. */
html:is([data-ui="glass"], [data-ui="minimal"], [data-ui="aurore"], [data-ui="ardoise"])
:is(.profile-card, .empty-card, .login-card, .profile-setup-card, .lynk-modal-card,
    .lynk-notification-card, .lynk-notification-sheet, .lynk-ui-dialog, .lynk-logout-sheet,
    .mission-card, .badge-card, .ranking-card, .rewards-stat-card, .special-badge-card,
    .rewards-info-card, .equipped-preview, .theme-choice, .homework-card,
    .accent-preview-card, .story-composer-card, .settings-card, .conversation-card) {
    background: var(--sk-bg);
    background-image: var(--sk-bg-image);
    border: var(--sk-border);
    border-radius: var(--sk-radius);
    box-shadow: var(--sk-shadow);
    color: var(--sk-ink);
    --ink: var(--sk-ink);
    --ink-soft: var(--sk-ink-soft);
    --muted: var(--sk-muted);
    -webkit-backdrop-filter: var(--sk-blur);
    backdrop-filter: var(--sk-blur);
}

/* Les blocs d'information ne bougent pas au survol. */
html:is([data-ui="glass"], [data-ui="minimal"], [data-ui="aurore"], [data-ui="ardoise"])
:is(.empty-card, .login-card, .profile-setup-card, .mission-card, .ranking-card,
    .rewards-stat-card, .special-badge-card, .rewards-info-card):hover {
    transform: none;
    box-shadow: var(--sk-shadow);
}

/* Les blocs cliquables se soulèvent doucement. */
html:is([data-ui="glass"], [data-ui="minimal"], [data-ui="aurore"], [data-ui="ardoise"])
:is(.profile-card, .lynk-notification-card, .theme-choice):hover,
html:is([data-ui="glass"], [data-ui="minimal"], [data-ui="aurore"], [data-ui="ardoise"])
.badge-card:not(:disabled):hover {
    transform: translateY(-3px);
    box-shadow: var(--sk-shadow-hover);
}

html:is([data-ui="glass"], [data-ui="minimal"], [data-ui="aurore"], [data-ui="ardoise"])
:is(.profile-card, .lynk-notification-card, .theme-choice):active {
    transform: translateY(1px);
    box-shadow: var(--sk-shadow);
}

/* Notification non lue : teintée à la couleur d'accent. */
html:is([data-ui="glass"], [data-ui="minimal"], [data-ui="aurore"], [data-ui="ardoise"]) .lynk-notification-card.is-unread {
    background-color: color-mix(in srgb, var(--violet) 16%, var(--sk-bg));
    border-color: color-mix(in srgb, var(--violet) 40%, transparent);
}

/* Réglage sélectionné (thème, couleur, habillage, position…). */
html:is([data-ui="glass"], [data-ui="minimal"], [data-ui="aurore"], [data-ui="ardoise"]) .theme-choice.is-selected {
    border-color: var(--violet);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--violet) 55%, transparent), var(--sk-shadow);
}

/* ---------- 6d. Le grand bloc d'accroche de l'accueil ----------
   Il reste coloré (violet) : son texte blanc et son logo restent donc
   parfaitement lisibles, quel que soit l'habillage et le thème. */
html:is([data-ui="glass"], [data-ui="minimal"], [data-ui="aurore"], [data-ui="ardoise"]) .welcome-card {
    background: color-mix(in srgb, var(--violet) 92%, transparent);
    color: #FFFFFF;
    border: var(--sk-border);
    border-radius: var(--sk-radius);
    box-shadow: var(--sk-shadow);
    -webkit-backdrop-filter: var(--sk-blur);
    backdrop-filter: var(--sk-blur);
}

/* ---------- 6e. Boutons ---------- */
html:is([data-ui="glass"], [data-ui="minimal"], [data-ui="aurore"], [data-ui="ardoise"])
:is(.login-button, .primary-button, .secondary-button, .danger-button, .discover-match-button,
    .mail-button, .mailbox-trash-button, .lynk-logout-confirm, .lynk-logout-cancel,
    .lynk-logout-actions button) {
    background: var(--sk-btn-bg);
    border: var(--sk-btn-border);
    border-radius: var(--sk-btn-radius);
    box-shadow: var(--sk-btn-shadow);
    color: var(--sk-btn-ink);
    -webkit-backdrop-filter: var(--sk-blur-soft);
    backdrop-filter: var(--sk-blur-soft);
    transition: transform .16s ease, box-shadow .16s ease, background-color .16s ease, border-color .16s ease;
}

/* Boutons principaux : couleur d'accent (texte blanc, toujours lisible). */
html:is([data-ui="glass"], [data-ui="minimal"], [data-ui="aurore"], [data-ui="ardoise"])
:is(.login-button, .primary-button, .discover-match-button, .lynk-logout-confirm) {
    background: var(--sk-primary-bg);
    color: var(--sk-primary-ink);
    border-color: var(--sk-primary-border);
    text-shadow: 0 1px 2px rgba(0, 0, 0, .22);
}

/* Survol : plus de « jaune autocollant », on garde la palette du habillage. */
html:is([data-ui="glass"], [data-ui="minimal"], [data-ui="aurore"], [data-ui="ardoise"])
:is(.secondary-button, .mail-button, .mailbox-trash-button, .lynk-logout-cancel):hover {
    background: var(--sk-btn-hover-bg);
    color: var(--sk-btn-ink);
    border-color: var(--sk-btn-border);
}

html:is([data-ui="glass"], [data-ui="minimal"], [data-ui="aurore"], [data-ui="ardoise"])
:is(.login-button, .primary-button, .discover-match-button, .lynk-logout-confirm):hover {
    background: var(--sk-primary-hover-bg);
    color: var(--sk-primary-ink);
    filter: none;
}

html:is([data-ui="glass"], [data-ui="minimal"], [data-ui="aurore"], [data-ui="ardoise"])
:is(.login-button, .primary-button, .secondary-button, .danger-button, .discover-match-button,
    .mail-button, .mailbox-trash-button, .lynk-logout-confirm, .lynk-logout-cancel,
    .lynk-logout-actions button):hover {
    transform: translateY(-2px);
    box-shadow: var(--sk-btn-shadow-hover);
}

html:is([data-ui="glass"], [data-ui="minimal"], [data-ui="aurore"], [data-ui="ardoise"])
:is(.login-button, .primary-button, .secondary-button, .danger-button, .discover-match-button,
    .mail-button, .mailbox-trash-button, .lynk-logout-actions button):active {
    transform: translateY(1px) scale(.99);
    box-shadow: var(--sk-btn-shadow);
}

html:is([data-ui="glass"], [data-ui="minimal"], [data-ui="aurore"], [data-ui="ardoise"])
:is(.login-button, .discover-match-button, .danger-button):disabled {
    opacity: .55;
    box-shadow: var(--sk-btn-shadow) !important;
}

/* Bouton corbeille actif (mode sélection de la boîte aux lettres). */
html:is([data-ui="glass"], [data-ui="minimal"], [data-ui="aurore"], [data-ui="ardoise"]) .mailbox-trash-button.is-active {
    background: color-mix(in srgb, var(--rose) 82%, transparent);
    color: #FFFFFF;
    border-color: rgba(255, 255, 255, .5);
}

/* ---------- 6f. Champs de formulaire ---------- */
html:is([data-ui="glass"], [data-ui="minimal"], [data-ui="aurore"], [data-ui="ardoise"])
:is(input, select, textarea):not([type="color"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]) {
    background: var(--sk-field-bg);
    border: var(--sk-border);
    border-radius: 12px;
    color: var(--sk-ink);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25);
}

html:is([data-ui="glass"], [data-ui="minimal"], [data-ui="aurore"], [data-ui="ardoise"])
:is(input, select, textarea):not([type="color"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):focus {
    border-color: var(--violet);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--violet) 30%, transparent);
}

/* ---------- 6g. Boîte aux lettres : mode sélection ---------- */
html:is([data-ui="glass"], [data-ui="minimal"], [data-ui="aurore"], [data-ui="ardoise"]) .mailbox-selection-bar {
    background-color: color-mix(in srgb, var(--sun) 30%, var(--sk-bg));
    border: var(--sk-border);
    border-radius: var(--sk-radius);
    box-shadow: var(--sk-shadow);
    color: var(--sk-ink);
    -webkit-backdrop-filter: var(--sk-blur);
    backdrop-filter: var(--sk-blur);
}

html:is([data-ui="glass"], [data-ui="minimal"], [data-ui="aurore"], [data-ui="ardoise"]) .lynk-notification-card.is-selected {
    background-color: color-mix(in srgb, var(--violet) 28%, var(--sk-bg));
    border-color: var(--violet);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--violet) 50%, transparent), var(--sk-shadow);
    transform: none;
}

html:is([data-ui="glass"], [data-ui="minimal"], [data-ui="aurore"], [data-ui="ardoise"]) .lynk-notification-card-check {
    background: var(--sk-btn-bg);
    border: var(--sk-border);
}

html:is([data-ui="glass"], [data-ui="minimal"], [data-ui="aurore"], [data-ui="ardoise"]) .lynk-notification-card.is-selected .lynk-notification-card-check {
    background: var(--violet);
    border-color: rgba(255, 255, 255, .6);
    color: #FFFFFF;
}

/* ---------- 6h. Voiles, fenêtres, toasts, écran de lancement ---------- */
html:is([data-ui="glass"], [data-ui="minimal"], [data-ui="aurore"], [data-ui="ardoise"]) .lynk-notification-backdrop,
html:is([data-ui="glass"], [data-ui="minimal"], [data-ui="aurore"], [data-ui="ardoise"]) .lynk-ui-backdrop {
    background: rgba(20, 14, 44, .42);
    -webkit-backdrop-filter: blur(9px);
    backdrop-filter: blur(9px);
}

/* Les toasts restent sombres (texte clair) : lisibles dans tous les cas. */
html:is([data-ui="glass"], [data-ui="minimal"], [data-ui="aurore"], [data-ui="ardoise"]) .lynk-toast,
html:is([data-ui="glass"], [data-ui="minimal"], [data-ui="aurore"], [data-ui="ardoise"]) .lynk-ui-toast {
    border: 1px solid rgba(255, 255, 255, .22);
    box-shadow: var(--sk-shadow-hover);
    -webkit-backdrop-filter: var(--sk-blur);
    backdrop-filter: var(--sk-blur);
}

html:is([data-ui="glass"], [data-ui="minimal"], [data-ui="aurore"], [data-ui="ardoise"]) #lynkSplash {
    background-color: var(--sk-page-bg);
    background-image: var(--sk-page-image);
}

/* =========================================================
   7. LISIBILITÉ DU THÈME SOMBRE (toutes les pages, tous les habillages)
   ---------------------------------------------------------
   Dans lynk-theme.css, l'encre du thème sombre est un violet
   foncé : sur un fond sombre, les titres et le texte courant
   devenaient presque invisibles. On éclaircit donc le texte,
   en gardant un texte FONCÉ sur les éléments volontairement
   clairs (pastille jaune « Lycée … », grands bandeaux colorés…).
   ========================================================= */
html[data-theme="dark"] body {
    color: #F4EFFF;
}

/* Ces blocs sont clairs, même en thème sombre : leur texte reste foncé. */
html[data-theme="dark"] :is(.rewards-hero, .badges-intro-card, .rewards-kicker) {
    color: #1B1340;
}

html[data-theme="dark"] :is(.welcome-card, .profile-card, .empty-card, .lynk-notification-card,
    .lynk-notification-sheet, .lynk-ui-dialog, .mission-card, .badge-card, .ranking-card,
    .rewards-stat-card, .special-badge-card, .rewards-info-card, .equipped-preview,
    .theme-choice, .homework-card, .login-card, .settings-card, .story-composer-card) :is(h1, h2, h3, strong) {
    color: #F4EFFF;
}

html[data-theme="dark"] .section-header h2 {
    color: #F4EFFF;
}

/* =========================================================
   8. APERÇUS DU RÉGLAGE « HABILLAGE » (page Affichage)
   TOUJOURS affichés, quel que soit l'habillage actif.
   ========================================================= */
.ui-skin-preview {
    position: relative;
    flex: 0 0 58px;
    width: 58px;
    height: 58px;
    border-radius: 14px;
    overflow: hidden;
}

.ui-skin-preview::before,
.ui-skin-preview::after {
    content: "";
    position: absolute;
    left: 12px;
    width: 34px;
    border-radius: 5px;
}

.ui-skin-preview::before { top: 13px; height: 12px; }
.ui-skin-preview::after { top: 32px; height: 7px; }

/* — Autocollant — */
.ui-skin-preview--sticker {
    background: #FFFFFF;
    border: 2px solid #1B1340;
    box-shadow: 0 4px 0 #1B1340;
}

.ui-skin-preview--sticker::before { background: #7C3AED; border: 2px solid #1B1340; }
.ui-skin-preview--sticker::after { background: #4A4270; opacity: .35; }

/* — Liquid Glass — */
.ui-skin-preview--glass {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .78), rgba(255, 255, 255, .12) 55%),
        linear-gradient(120deg, #7C3AED, #6CB8FF 52%, #FF5C93);
    border: 1px solid rgba(255, 255, 255, .7);
    box-shadow: 0 10px 22px rgba(38, 22, 74, .22);
}

.ui-skin-preview--glass::before {
    background: rgba(255, 255, 255, .55);
    border: 1px solid rgba(255, 255, 255, .8);
}

.ui-skin-preview--glass::after { background: rgba(255, 255, 255, .7); }

/* — Minimal — */
.ui-skin-preview--minimal {
    background: #FFFFFF;
    border: 1px solid #D8D2E6;
}

.ui-skin-preview--minimal::before { background: #EFEBF7; border: 1px solid #D8D2E6; }
.ui-skin-preview--minimal::after { background: #C9C3D8; }

/* — Aurore — */
.ui-skin-preview--aurore {
    background: linear-gradient(160deg, #FFF6FB, #F1E9FF 55%, #E9F4FF);
    border: 1px solid rgba(124, 58, 237, .28);
    box-shadow: 0 10px 22px rgba(124, 58, 237, .18);
}

.ui-skin-preview--aurore::before { background: linear-gradient(150deg, #8B5CF6, #6D28D9); }
.ui-skin-preview--aurore::after { background: #C9B8F0; }

/* — Ardoise — */
.ui-skin-preview--ardoise {
    background:
        repeating-linear-gradient(90deg, rgba(255, 255, 255, .07) 0 1px, transparent 1px 9px),
        #1D2124;
    border: 1px solid #3A4247;
}

.ui-skin-preview--ardoise::before { background: #3E6B62; border: 1px solid #56897E; }
.ui-skin-preview--ardoise::after { background: #8A867D; }

/* =========================================================
   9. REPLIS
   ========================================================= */
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
    html[data-ui="glass"] {
        --sk-bg: rgba(255, 255, 255, .92);
        --sk-btn-bg: rgba(255, 255, 255, .95);
        --sk-field-bg: rgba(255, 255, 255, .95);
        --sk-border: 1px solid rgba(27, 19, 64, .12);
        --sk-sidebar-bg: rgba(24, 16, 54, .96);
    }

    html[data-theme="dark"][data-ui="glass"] {
        --sk-bg: rgba(40, 34, 64, .94);
        --sk-btn-bg: rgba(58, 48, 92, .96);
        --sk-field-bg: rgba(58, 48, 92, .96);
        --sk-border: 1px solid rgba(255, 255, 255, .16);
        --sk-sidebar-bg: rgba(9, 6, 17, .97);
    }
}

/* =========================================================
   10. HABILLAGE « ARDOISE » — AJUSTEMENTS DE COHÉRENCE
   ---------------------------------------------------------
   Placés APRÈS la section 6 à dessein : à spécificité égale,
   c'est la dernière règle qui s'applique. On y retire les
   reflets internes hérités des habillages translucides et on
   ramène les états mis en avant à la palette sobre du style
   (vert-de-gris) au lieu du violet vif.
   ========================================================= */

html[data-ui="ardoise"]
:is(input, select, textarea):not([type="color"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]) {
    box-shadow: none;
}

html[data-ui="ardoise"] .sidebar .brand-icon {
    background: var(--sk-primary-bg);
    border: 1px solid var(--sk-primary-border);
    box-shadow: none;
}

html[data-ui="ardoise"] .welcome-card {
    background: color-mix(in srgb, var(--sk-primary-bg) 34%, #1D2226);
    color: #FFFFFF;
    /* Le bandeau reste sombre dans les deux thèmes : on y force l'encre claire,
       avec le même mécanisme que la section 6c sur les cartes. */
    --ink: #FFFFFF;
    --ink-soft: rgba(255, 255, 255, .84);
    --muted: rgba(255, 255, 255, .72);
    border: var(--sk-border);
    box-shadow: var(--sk-shadow);
}

html[data-ui="ardoise"] .theme-choice.is-selected {
    border-color: var(--sk-primary-border);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--sk-primary-bg) 45%, transparent), var(--sk-shadow);
}

html[data-ui="ardoise"] .lynk-notification-card.is-unread {
    background-color: color-mix(in srgb, var(--sk-primary-bg) 18%, var(--sk-bg));
    border-color: color-mix(in srgb, var(--sk-primary-bg) 46%, transparent);
}

html[data-ui="ardoise"] .lynk-notification-card.is-selected {
    background-color: color-mix(in srgb, var(--sk-primary-bg) 30%, var(--sk-bg));
    border-color: var(--sk-primary-border);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--sk-primary-bg) 50%, transparent), var(--sk-shadow);
}

@media (prefers-reduced-transparency: reduce) {
    html[data-ui="glass"] {
        --sk-bg: rgba(255, 255, 255, .95);
        --sk-btn-bg: rgba(255, 255, 255, .97);
        --sk-field-bg: rgba(255, 255, 255, .97);
        --sk-sidebar-bg: rgba(24, 16, 54, .97);
    }

    html[data-theme="dark"][data-ui="glass"] {
        --sk-bg: rgba(40, 34, 64, .96);
        --sk-btn-bg: rgba(58, 48, 92, .97);
        --sk-field-bg: rgba(58, 48, 92, .97);
        --sk-sidebar-bg: rgba(9, 6, 17, .98);
    }
}