/* ============================================================
   THÈME PIXEL — variante claire et variante sombre
   ============================================================
   Thème optionnel activé par body.theme-pixel, et sa déclinaison sombre par body.theme-dark. Vient en dernier : il surcharge tout le reste.

   Chargé par index.html. L'ORDRE DES BALISES <link> COMPTE :
   base → ecrans → stats → responsive → theme-pixel. Le responsive
   et les thèmes surchargent ce qui précède par la cascade.
   ============================================================ */

/* ============================================================
   Thème Pixel — pixelisé mais moderne, dans la palette de l'app :
   violet #667eea / pourpre #764ba2 en structure, jaune #ffd800 en
   accent. Damier discret, angles droits, bordures franches, et pas
   d'ombres. Aucune police n'est chargée : le pixel vient des formes,
   pas d'une fonte (l'app ne fait aucune requête tierce).
   Appliqué quand le body porte .theme-pixel.
   ============================================================ */

body.theme-pixel {
    background: white;
}

/* Damier de fond : une case sur deux teintée, et UN CARACTÈRE par case, de
   la couleur de la case voisine. Visible sur le menu principal et sur celui
   des dossiers, il s'efface en fondu dès qu'on entre dans un dossier.

   Dessiné sur un CANEVAS et non en éléments : à 36 px de case, un écran 4K
   en demanderait plus de six mille, à recréer à chaque redimensionnement.
   Un canevas en fait un seul, et le tracé du texte y est direct. C'est aussi
   pour cela que le dégradé conique a disparu : deux systèmes à tenir en
   accord, l'un pour les cases et l'autre pour les caractères, auraient fini
   par se décaler.

   Les couleurs et la taille restent ICI et non dans le JS, qui les relit à
   chaque tracé : c'est le thème qui décide, et la variante sombre n'a ainsi
   qu'à redéfinir deux variables. */
.damier {
    position: fixed;
    inset: 0;
    z-index: -1;
    display: block;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.4s ease;

    /* Côté d'une TUILE, et non d'un carré : une tuile en porte quatre, donc
       une case fait la MOITIÉ de cette valeur. Nommée pour éviter la méprise,
       qui coûte un facteur deux. 72px, soit des cases de 36. */
    --damier: 72px;
    --damier-fond: #f7f9fe;
    --damier-carre: #eef2fb;

    /* La pile du style « Classique » : c'est elle qui porte les idéogrammes.
       Le canevas ne l'hérite pas du corps de page, il faut la lui donner. */
    font-family: 'Songti SC', 'STSong', 'SimSun', 'Noto Serif SC',
                 'Source Han Serif SC', serif;
}

body.theme-pixel.on-home .damier,
body.theme-pixel.on-folders .damier {
    opacity: 1;
}

/* Le temps de changer de matière : on éteint, on redessine, on rallume.
   Spécificité au-dessus des deux règles ci-dessus, sinon elles l'emportent
   et le remplacement des caractères se verrait d'un coup. */
body.theme-pixel .damier.damier-mue {
    opacity: 0;
}

body.theme-pixel .container,
body.theme-pixel .dict-panel {
    background: white;
    border: 2px solid #2c2e40;
    border-radius: 8px; /* légèrement arrondi */
    box-shadow: none;
}

/* La pointe de la bulle est un élément à part (voir css/stats.css) : elle ne
   peut pas hériter du fond ni de la bordure du panneau, il faut les lui
   redire. Ces deux variables sont le seul endroit à toucher si les couleurs
   du cadre changent. */
body.theme-pixel {
    --bulle-fond: white;
    --bulle-bord: #2c2e40;
}

/* Le panneau rogne sa bande signature dans ses coins arrondis ; le
   conteneur, lui, reste sans overflow pour laisser dépasser le panda.

   NE JAMAIS passer ceci à « auto » pour rendre le panneau défilable : la
   bande est un ::before posé en ABSOLU contre le bord supérieur, elle
   partirait avec le contenu au premier défilement. C'est .dict-entries qui
   défile (css/stats.css), et c'est aussi pour cela que la pointe de la bulle
   est un élément à part : rognée ici, elle serait invisible. */
body.theme-pixel .dict-panel {
    overflow: hidden;
}

/* La bande signature : les couleurs des quatre notes (Encore,
   Difficile, Bien, Facile) puis le violet de l'app */
body.theme-pixel .container::before,
body.theme-pixel .dict-panel::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 10px;
    border-radius: 6px 6px 0 0; /* épouse l'arrondi intérieur du cadre */
    background: linear-gradient(90deg,
        #f44336 0 20%, #ff9800 20% 40%, #4caf50 40% 60%,
        #2196f3 60% 80%, #764ba2 80% 100%);
}

/* Pendant une session de cartes, la bande disparaît (instantanément) :
   rien ne doit distraire de la carte */
body.theme-pixel.on-cards .container::before {
    display: none;
}

/* Petit oiseau pixel perché sur le bord supérieur du cadre — visible
   uniquement sur le menu des dossiers en thème Pixel. Palette de
   l'app : corps violet, aile pourpre, ventre blanc, bec jaune.
   Dessin : grille 14×11 (4px/pixel) encodée en SVG ci-dessous
   (frame A ; la frame B ferme l'œil) —
       ....BBBB......
       ...BVVVVB.....
       ..BVVVVVVB....
       ..BVBVVVVBB...
       YYBVVVVVVVVBB.
       ..BVVVVDDDVVBB
       ..BWWVVDDDVVB.
       ..BWWWVVVVVB..
       ...BWWVVVVB...
       ....BBBBBB....
       ....BB..BB....
   (régénérable : voir le script dans l'historique git de ce bloc) */
.pixel-pet {
    display: none;
}

/* Le panda est posé HORS du cadre, 46px au-dessus de son bord (44 de haut,
   décalé de 2). Depuis que la page ne défile plus sur ce menu et que le body
   rogne ce qui en dépasse (css/ecrans.css), un cadre monté jusqu'à son plafond
   le ferait disparaître : on lui réserve sa hauteur.
   Sans effet tant que la liste des dossiers tient à l'écran, le plafond ne
   s'appliquant qu'en cas de débordement : c'est une assurance pour le jour où
   les dossiers seront nombreux. */
body.theme-pixel.on-home,
body.theme-pixel.on-folders {
    --reserve-haut: 48px;
}

body.theme-pixel.on-home .pixel-pet,
body.theme-pixel.on-folders .pixel-pet {
    /* Frame A : yeux ouverts — Frame B : clignement (paupières baissées) */
    --pet-a: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 56 44"><path fill="%232c2e40" d="M16 0h16v4h-16zM12 4h4v4h-4zM32 4h4v4h-4zM8 8h4v4h-4zM36 8h4v4h-4zM8 12h4v4h-4zM16 12h4v4h-4zM36 12h8v4h-8zM8 16h4v4h-4zM44 16h8v4h-8zM8 20h4v4h-4zM48 20h8v4h-8zM8 24h4v4h-4zM48 24h4v4h-4zM8 28h4v4h-4zM44 28h4v4h-4zM12 32h4v4h-4zM40 32h4v4h-4zM16 36h24v4h-24zM16 40h8v4h-8zM32 40h8v4h-8z"/><path fill="%23667eea" d="M16 4h16v4h-16zM12 8h24v4h-24zM12 12h4v4h-4zM20 12h16v4h-16zM12 16h32v4h-32zM12 20h16v4h-16zM40 20h8v4h-8zM20 24h8v4h-8zM40 24h8v4h-8zM24 28h20v4h-20zM24 32h16v4h-16z"/><path fill="%23764ba2" d="M28 20h12v4h-12zM28 24h12v4h-12z"/><path fill="%23ffffff" d="M12 24h8v4h-8zM12 28h12v4h-12zM16 32h8v4h-8z"/><path fill="%23ffd800" d="M0 16h8v4h-8z"/></svg>');
    --pet-b: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 56 44"><path fill="%232c2e40" d="M16 0h16v4h-16zM12 4h4v4h-4zM32 4h4v4h-4zM8 8h4v4h-4zM36 8h4v4h-4zM8 12h4v4h-4zM36 12h8v4h-8zM8 16h4v4h-4zM44 16h8v4h-8zM8 20h4v4h-4zM48 20h8v4h-8zM8 24h4v4h-4zM48 24h4v4h-4zM8 28h4v4h-4zM44 28h4v4h-4zM12 32h4v4h-4zM40 32h4v4h-4zM16 36h24v4h-24zM16 40h8v4h-8zM32 40h8v4h-8z"/><path fill="%23667eea" d="M16 4h16v4h-16zM12 8h24v4h-24zM12 12h24v4h-24zM12 16h32v4h-32zM12 20h16v4h-16zM40 20h8v4h-8zM20 24h8v4h-8zM40 24h8v4h-8zM24 28h20v4h-20zM24 32h16v4h-16z"/><path fill="%23764ba2" d="M28 20h12v4h-12zM28 24h12v4h-12z"/><path fill="%23ffffff" d="M12 24h8v4h-8zM12 28h12v4h-12zM16 32h8v4h-8z"/><path fill="%23ffd800" d="M0 16h8v4h-8z"/></svg>');
    display: block;
    position: absolute;
    top: -2px; /* posé sur le bord extérieur */
    right: 36px;
    width: 56px;
    height: 44px;
    transform: translateY(-100%);
    background: var(--pet-a) no-repeat center / contain;
    animation: pixel-pet-idle 4s infinite;
}

/* Animation façon GIF : les frames commutent d'un coup (les images de
   fond ne s'interpolent pas), petit rebond pixel à mi-cycle */
@keyframes pixel-pet-idle {
    0%, 45% { background-image: var(--pet-a); transform: translateY(-100%); }
    47%, 57% { background-image: var(--pet-a); transform: translateY(calc(-100% + 2px)); }
    59%, 83% { background-image: var(--pet-a); transform: translateY(-100%); }
    85%, 94% { background-image: var(--pet-b); transform: translateY(-100%); }
    96%, 100% { background-image: var(--pet-a); transform: translateY(-100%); }
}

/* Accessibilité : pas d'animation si l'utilisateur préfère la réduire */
@media (prefers-reduced-motion: reduce) {
    body.theme-pixel.on-home .pixel-pet,
    body.theme-pixel.on-folders .pixel-pet {
        animation: none;
    }
}

body.theme-pixel .subtitle {
    color: #6b6e8a;
}

body.theme-pixel .setting-label,
body.theme-pixel .info-content h3,
body.theme-pixel .card-table th{
    color: #6b6e8a;
}

/* Boutons ronds des coins → carrés pixel */
body.theme-pixel .btn-back,
body.theme-pixel .btn-settings,
body.theme-pixel .btn-info,
body.theme-pixel .btn-mute,
body.theme-pixel .btn-matiere{
    border-radius: 0;
    border: 2px solid #2c2e40;
    background: white;
    color: #2c2e40;
}

body.theme-pixel .btn-back:hover,
body.theme-pixel .btn-settings:hover,
body.theme-pixel .btn-info:hover,
body.theme-pixel .btn-mute:hover,
body.theme-pixel .btn-matiere:hover{
    background: #f7f7fa;
    box-shadow: inset 0 0 0 0.5px #2c2e40;
}

/* Boutons de decks et dossiers */
body.theme-pixel .deck-btn {
    border: 1px solid #565a7a;
    border-radius: 0;
    background: white;
    color: #2c2e40;
    box-shadow: none;
}

body.theme-pixel .deck-btn:hover {
    background: #f7f7fa;
    border-color: #2c2e40;
    box-shadow: inset 0 0 0 0.5px #2c2e40;
}

body.theme-pixel .deck-btn .count {
    border-radius: 0;
    border: 1px solid #8a8ea6;
    background: white;
    color: #2c2e40;
}

body.theme-pixel .deck-btn .count:hover {
    background: #2c2e40;
    border-color: #2c2e40;
    color: white;
}

body.theme-pixel .folder-btn .count:hover {
    background: white;
    color: #2c2e40;
}

/* Decks à jour */
body.theme-pixel .deck-btn.deck-done {
    border-color: #9aa3c0;
    color: #9aa3c0;
    background: white;
}

body.theme-pixel .deck-btn.deck-done .count {
    border-color: #9aa3c0;
    color: #9aa3c0;
}

/* La note du jour épouse l'arrondi INTÉRIEUR du cadre, par ses deux coins
   du bas, comme la bande signature le fait par ceux du haut : le cadre est
   volontairement sans overflow (il doit laisser dépasser le panda), donc
   personne ne rogne à sa place. */
body.theme-pixel .motd-rail {
    border-radius: 0 0 6px 6px;
}

/* Champ de recherche de l'explorateur : le même cadre franc que les
   boutons de réglage, dont il partage la place et la fonction. */
body.theme-pixel .explorer-champ {
    border: 2px solid #2c2e40;
    border-radius: 0;
    background: white;
    color: #2c2e40;
}

body.theme-pixel .explorer-champ:focus {
    box-shadow: inset 0 0 0 1px #2c2e40;
}

body.theme-pixel .explorer-loupe {
    color: #2c2e40;
}

body.theme-pixel .explorer-compte {
    color: #6b6e8a;
}

/* Toggles de réglages */
body.theme-pixel .mode-btn {
    border: 2px solid #2c2e40;
    border-radius: 0;
    background: white;
    color: #2c2e40;
}

body.theme-pixel .mode-btn:hover {
    border-color: #2c2e40;
    background: #f7f7fa;
    /* épaissit visuellement la bordure d'1px sans décaler la mise en page */
    box-shadow: inset 0 0 0 0.5px #2c2e40;
}

body.theme-pixel .mode-btn.active {
    background: #2c2e40;
    border-color: #2c2e40;
    color: white;
}

/* Aide */
body.theme-pixel .info-content .golden-rule {
    border-radius: 0;
    border-left-width: 4px;
    background: white;
    border-top: 1px solid #e0e7ff;
    border-right: 1px solid #e0e7ff;
    border-bottom: 1px solid #e0e7ff;
}

/* Tableau des cartes */
body.theme-pixel .card-table th {
    border-bottom: 2px solid #2c2e40;
}

/* Saisie du pinyin */

/* Boutons d'action (retourner, notes, fin de session) */
body.theme-pixel button {
    border-radius: 0;
}

/* Les boutons de mode de jeu du menu (Hanzi → Pinyin, Traduction →
   Pinyin, Mix) gardent des coins arrondis */
body.theme-pixel .mode-toggle .mode-btn {
    border-radius: 8px;
}

/* Les boutons d'action colorés se passent de bordure : leur couleur
   pleine suffit, le style pixel est porté par les angles droits */
body.theme-pixel .btn-reveal,
body.theme-pixel .btn-grade,
body.theme-pixel .btn-restart,
body.theme-pixel .btn-menu{
    border: none;
    box-shadow: none;
}

/* Statistiques : angles droits et bordures franches comme le reste du thème */
body.theme-pixel .stat-tile,
body.theme-pixel .stats-notice {
    border-radius: 0;
    border: 2px solid #2c2e40;
}

/* Le bouton est déjà redressé par « body.theme-pixel button » ; le panneau de
   confirmation est un div, il garde sa bordure rouge mais perd son arrondi */
body.theme-pixel .danger-confirm {
    border-radius: 0;
}


/* Panneau dictionnaire */
body.theme-pixel .dict-panel {
    padding-top: 32px; /* sous la bande signature */
}


/* Sync */
body.theme-pixel .btn-google {
    border-radius: 0;
    border: 2px solid #2c2e40;
    box-shadow: none;
}

/* Sa variante sombre : sans elle, il restait un pavé BLANC au milieu d'un
   écran sombre, le seul de l'app.

   Il reprend la surface des autres boutons du thème (#2e2e34 sur #4d4d57)
   plutôt que le #131314 de la charte Google : le bouton s'écarte déjà de
   celle-ci par ses angles droits et sa bordure de 2px, et un fond plus foncé
   que le cadre y ferait un trou. Ce que la charte demande vraiment, le logo
   « G » en quatre couleurs, ne bouge pas d'un pixel : il est en SVG dans
   index.html et n'a aucune règle de thème. */
body.theme-pixel.theme-dark .btn-google {
    background: #2e2e34;
    border-color: #4d4d57;
    color: #e6e6ec;
}

body.theme-pixel.theme-dark .btn-google:hover {
    background: #3a3a42;
    border-color: #8a8a96;
    box-shadow: none;
}

/* ============================================================
   Variante SOMBRE du thème pixel — mêmes structures (damier,
   bande signature, angles droits, bordures franches), couleurs
   inversées. body.theme-dark s'ajoute à theme-pixel ; ce bloc,
   placé après, gagne la cascade.
   ============================================================ */

body.theme-pixel.theme-dark {
    background: #1b1b1d;
    /* Le fond du cadre, et de tout ce qui doit s'y fondre : les pastilles des
       boutons de deck, un deck à jour, la bulle du dictionnaire. Une variable
       parce que ces cinq endroits ne peuvent pas diverger sans que les
       pastilles cessent de paraître découpées dans le cadre.

       Gris et non bleu nuit : le #232430 d'avant tirait nettement sur le bleu
       (13 points d'écart entre le rouge et le bleu) alors que le fond de page
       et son damier sont neutres. Même clarté, sans la teinte. */
    --fond-cadre: #26262a;
    --bulle-fond: var(--fond-cadre);
    --bulle-bord: #4d4d57;
}

body.theme-pixel.theme-dark .damier {
    --damier-fond: #1b1b1d;
    --damier-carre: #222225;
}

body.theme-pixel.theme-dark .container,
body.theme-pixel.theme-dark .dict-panel {
    background: var(--fond-cadre);
    border-color: #4d4d57;
}

/* L'ascenseur est de l'encre foncée en thème clair : sur le gris du cadre
   sombre il serait invisible. On l'inverse, pour toutes les zones
   défilantes comme dans css/base.css.

   background-color et non background : la propriété courte réinitialiserait
   background-clip, et le pouce reprendrait toute la largeur de sa gouttière,
   perdant le retrait qui l'écarte du contenu. */
body.theme-pixel.theme-dark ::-webkit-scrollbar-thumb {
    background-color: #fff;
}

/* Réservé à Firefox, pour la même raison que dans css/base.css : poser
   scrollbar-color hors de cette bascule désactiverait tout le rendu
   ci-dessus sur Chrome. */
@supports not selector(::-webkit-scrollbar) {
    body.theme-pixel.theme-dark * {
        scrollbar-color: #fff transparent;
    }
}


body.theme-pixel.theme-dark h1,
body.theme-pixel.theme-dark .hanzi,
body.theme-pixel.theme-dark .result .hanzi-answer,
body.theme-pixel.theme-dark .result .translation,
body.theme-pixel.theme-dark .dict-hanzi,
body.theme-pixel.theme-dark .card-table td,
body.theme-pixel.theme-dark .explorer-hanzi,
body.theme-pixel.theme-dark .info-content .golden-rule {
    color: #e8e8f0;
}

body.theme-pixel.theme-dark .subtitle,
body.theme-pixel.theme-dark .card-table td.col-translation,
body.theme-pixel.theme-dark .explorer-trad{
    color: #a0a0aa;
}

/* Boutons carrés des coins */
body.theme-pixel.theme-dark .btn-back,
body.theme-pixel.theme-dark .btn-settings,
body.theme-pixel.theme-dark .btn-info,
body.theme-pixel.theme-dark .btn-mute,
body.theme-pixel.theme-dark .btn-matiere{
    background: #2e2e34;
    border-color: #4d4d57;
    color: #d4d4dc;
}

body.theme-pixel.theme-dark .btn-back:hover,
body.theme-pixel.theme-dark .btn-settings:hover,
body.theme-pixel.theme-dark .btn-info:hover,
body.theme-pixel.theme-dark .btn-mute:hover,
body.theme-pixel.theme-dark .btn-matiere:hover{
    background: #3a3a42;
    border-color: #8a8a96;
    box-shadow: inset 0 0 0 0.5px #8a8a96;
}

/* La note du jour change d'écran avec le thème, et pas seulement de fond :
   dalle sombre, encre blanche et halo bleuté la nuit, là où le jour affiche
   une dalle blanc écran à encre noire (css/ecrans.css, qui déclare la même
   liste de variables). Le jaune d'origine ne servait plus les deux : il
   restait lisible sur le fond sombre, jamais sur le clair. */
body.theme-pixel.theme-dark {
    --motd-fond: #2a2b36;
    --motd-bord: #4d4d57;
    --motd-trame: rgba(0, 0, 0, 0.18);
    --motd-encre: #ffffff;
    --motd-halo: 0 0 5px rgba(130, 175, 255, 0.55), 0 0 12px rgba(96, 150, 255, 0.33);
}

body.theme-pixel.theme-dark .explorer-champ {
    background: #2e2e34;
    border-color: #45454f;
    color: #e6e6ec;
}

body.theme-pixel.theme-dark .explorer-champ:focus {
    border-color: #8a8a96;
    box-shadow: inset 0 0 0 1px #8a8a96;
}

body.theme-pixel.theme-dark .explorer-loupe {
    color: #c9c9d2;
}

body.theme-pixel.theme-dark .explorer-compte {
    color: #a0a0aa;
}

/* Decks et dossiers */
body.theme-pixel.theme-dark .deck-btn {
    background: #2e2e34;
    border-color: #45454f;
    color: #e6e6ec;
}

body.theme-pixel.theme-dark .deck-btn:hover {
    background: #3a3a42;
    border-color: #8a8a96;
    box-shadow: inset 0 0 0 0.5px #8a8a96;
}

body.theme-pixel.theme-dark .deck-btn .count {
    background: var(--fond-cadre);
    border-color: #45454f;
    color: #c9c9d2;
}

body.theme-pixel.theme-dark .deck-btn .count:hover {
    background: #4d4d57;
    border-color: #4d4d57;
    color: white;
}

body.theme-pixel.theme-dark .folder-btn .count:hover {
    background: var(--fond-cadre);
    color: #c9c9d2;
}

body.theme-pixel.theme-dark .deck-btn.deck-done {
    background: var(--fond-cadre);
    border-color: #3a3a44;
    color: #74747f;
}

body.theme-pixel.theme-dark .deck-btn.deck-done .count {
    border-color: #3a3a44;
    color: #74747f;
}

/* Icônes pixel : le contour sombre passe en clair */
body.theme-pixel.theme-dark .deck-icon rect[fill="#2c2e40"] {
    fill: #e6e6ec;
}


/* Toggles */
body.theme-pixel.theme-dark .mode-btn {
    background: #2e2e34;
    border-color: #4d4d57;
    color: #d4d4dc;
}

body.theme-pixel.theme-dark .mode-btn:hover {
    border-color: #8a8a96;
    background: #3a3a42;
    box-shadow: inset 0 0 0 0.5px #8a8a96;
}

/* Sélection : le gris clair de la palette sombre, l'exact inverse de
   l'aplat d'encre du thème clair (fond d'encre, texte de la couleur du
   cadre). Plus de pourpre : le thème n'a plus d'aplat coloré. */
body.theme-pixel.theme-dark .mode-btn.active {
    background: #d4d4dc;
    border-color: #d4d4dc;
    color: #26262a;
}

body.theme-pixel.theme-dark .mode-btn.active:hover {
    background: #e6e6ec;
    border-color: #e6e6ec;
    box-shadow: none;
}

body.theme-pixel.theme-dark .setting-label,
body.theme-pixel.theme-dark .info-content h3,
body.theme-pixel.theme-dark .card-table th{
    color: #85858f;
}

/* Aide */
body.theme-pixel.theme-dark .info-content {
    color: #c9c9d2;
}

body.theme-pixel.theme-dark .info-content .golden-rule {
    background: #2e2e34;
    border-top-color: #3a3a44;
    border-right-color: #3a3a44;
    border-bottom-color: #3a3a44;
}

/* Tableau des cartes */
body.theme-pixel.theme-dark .card-table th {
    border-bottom-color: #4d4d57;
}

body.theme-pixel.theme-dark .card-table td,
body.theme-pixel.theme-dark .explorer-entree {
    border-bottom-color: #34343c;
}

/* Saisie */

/* Progression */

/* Graphique */

/* Panneau dictionnaire */
body.theme-pixel.theme-dark .dict-defs {
    color: #c9c9d2;
}

body.theme-pixel.theme-dark .dict-reading + .dict-reading {
    border-top-color: #34343c;
}

body.theme-pixel.theme-dark .dict-missing {
    color: #85858f;
}

body.theme-pixel.theme-dark .dict-source {
    color: #5a5a64;
}

body.theme-pixel.theme-dark .explorer-hanzi-actif,
body.theme-pixel.theme-dark .hz:hover,
body.theme-pixel.theme-dark .hz.hz-actif {
    color: #a97fd6;
}

/* Sync */
body.theme-pixel.theme-dark .sync-status {
    color: #66bb6a;
}

body.theme-pixel.theme-dark .sync-status.error {
    color: #ef5350;
}

/* Les PATTES seules prennent l'encre du bord du cadre, le reste du contour
   restant noir. Sans cela l'oiseau paraît passer DEVANT le cadre : en thème
   clair, le bord vaut #2c2e40, exactement l'encre de l'oiseau, et les pattes
   s'y fondent en une ligne continue ; en sombre le bord est gris #4d4d57 et
   des pattes noires y découpent une encoche. Les deux ne se chevauchent en
   réalité jamais, l'oiseau s'arrêtant pile sur le bord : tout tient à ce que
   les deux couleurs coïncident, et cette règle rétablit la coïncidence.
   Les deux segments déplacés sont la dernière rangée du dessin. */
body.theme-pixel.theme-dark.on-home .pixel-pet,
body.theme-pixel.theme-dark.on-folders .pixel-pet {
    --pet-a: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 56 44"><path fill="%232c2e40" d="M16 0h16v4h-16zM12 4h4v4h-4zM32 4h4v4h-4zM8 8h4v4h-4zM36 8h4v4h-4zM8 12h4v4h-4zM16 12h4v4h-4zM36 12h8v4h-8zM8 16h4v4h-4zM44 16h8v4h-8zM8 20h4v4h-4zM48 20h8v4h-8zM8 24h4v4h-4zM48 24h4v4h-4zM8 28h4v4h-4zM44 28h4v4h-4zM12 32h4v4h-4zM40 32h4v4h-4zM16 36h24v4h-24z"/><path fill="%23667eea" d="M16 4h16v4h-16zM12 8h24v4h-24zM12 12h4v4h-4zM20 12h16v4h-16zM12 16h32v4h-32zM12 20h16v4h-16zM40 20h8v4h-8zM20 24h8v4h-8zM40 24h8v4h-8zM24 28h20v4h-20zM24 32h16v4h-16z"/><path fill="%23764ba2" d="M28 20h12v4h-12zM28 24h12v4h-12z"/><path fill="%23ffffff" d="M12 24h8v4h-8zM12 28h12v4h-12zM16 32h8v4h-8z"/><path fill="%23ffd800" d="M0 16h8v4h-8z"/><path fill="%234d4d57" d="M16 40h8v4h-8zM32 40h8v4h-8z"/></svg>');
    --pet-b: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 56 44"><path fill="%232c2e40" d="M16 0h16v4h-16zM12 4h4v4h-4zM32 4h4v4h-4zM8 8h4v4h-4zM36 8h4v4h-4zM8 12h4v4h-4zM36 12h8v4h-8zM8 16h4v4h-4zM44 16h8v4h-8zM8 20h4v4h-4zM48 20h8v4h-8zM8 24h4v4h-4zM48 24h4v4h-4zM8 28h4v4h-4zM44 28h4v4h-4zM12 32h4v4h-4zM40 32h4v4h-4zM16 36h24v4h-24z"/><path fill="%23667eea" d="M16 4h16v4h-16zM12 8h24v4h-24zM12 12h24v4h-24zM12 16h32v4h-32zM12 20h16v4h-16zM40 20h8v4h-8zM20 24h8v4h-8zM40 24h8v4h-8zM24 28h20v4h-20zM24 32h16v4h-16z"/><path fill="%23764ba2" d="M28 20h12v4h-12zM28 24h12v4h-12z"/><path fill="%23ffffff" d="M12 24h8v4h-8zM12 28h12v4h-12zM16 32h8v4h-8z"/><path fill="%23ffd800" d="M0 16h8v4h-8z"/><path fill="%234d4d57" d="M16 40h8v4h-8zM32 40h8v4h-8z"/></svg>');
}

/* Statistiques en sombre : rampe de heatmap inversée (le vide devient le fond
   des boutons sombres, l'intensité monte vers le violet actif du thème) */
body.theme-pixel.theme-dark .stat-tile,
body.theme-pixel.theme-dark .stats-notice {
    background-color: #2e2e34;
    border-color: #45454f;
    color: #c9c9d2;
}

body.theme-pixel.theme-dark .stat-tile b {
    color: #a99bd8;
}

body.theme-pixel.theme-dark .stat-tile span,
body.theme-pixel.theme-dark .stats-empty,
body.theme-pixel.theme-dark .day-detail-title,
body.theme-pixel.theme-dark .day-deck-side,
body.theme-pixel.theme-dark .hm-legend,
body.theme-pixel.theme-dark .pc-axis {
    color: #85858f;
}

body.theme-pixel.theme-dark .hm-label {
    fill: #85858f;
}

body.theme-pixel.theme-dark .day-deck {
    color: #e6e6ec;
    border-bottom-color: #3a3a42;
}

/* En sombre la rampe s'éclaircit au lieu de s'assombrir : c'est l'écart au
   fond qui porte l'intensité */
body.theme-pixel.theme-dark .hm-l0 { fill: #2e2e34; background-color: #2e2e34; }
body.theme-pixel.theme-dark .hm-l1 { fill: #4d2220; background-color: #4d2220; }
body.theme-pixel.theme-dark .hm-l2 { fill: #7f2b28; background-color: #7f2b28; }
body.theme-pixel.theme-dark .hm-l3 { fill: #c1352f; background-color: #c1352f; }
body.theme-pixel.theme-dark .hm-l4 { fill: #ff6b5e; background-color: #ff6b5e; }

body.theme-pixel.theme-dark .hm-cell:hover {
    stroke: rgba(230, 230, 236, 0.45);
}

body.theme-pixel.theme-dark .hm-selected,
body.theme-pixel.theme-dark .hm-selected:hover {
    stroke: #e6e6ec;
}

body.theme-pixel.theme-dark .hm-tip,
body.theme-pixel.theme-dark .pc-tip {
    background: #45454f;
    color: #e6e6ec;
}

/* En sombre le repère s'éclaircit, comme les contours de la heatmap */
body.theme-pixel.theme-dark .pc-guide {
    background: rgba(230, 230, 236, 0.35);
}

body.theme-pixel.theme-dark .progress-chart {
    border-bottom-color: #45454f;
}

body.theme-pixel.theme-dark .pc-decouvertes { stroke: #ff6b5e; color: #ff6b5e; }
body.theme-pixel.theme-dark .pc-key.pc-decouvertes::before { background-color: #ff6b5e; }
body.theme-pixel.theme-dark .pc-mures { stroke: #66bb6a; color: #66bb6a; }
body.theme-pixel.theme-dark .pc-key.pc-mures::before { background-color: #66bb6a; }
body.theme-pixel.theme-dark .pc-area { fill: rgba(102, 187, 106, 0.14); }

/* Données du compte en sombre : le rouge s'éclaircit pour rester lisible sur
   fond foncé, et le panneau de confirmation troque son rose pour un rouge
   très assombri */
body.theme-pixel.theme-dark .danger-text,
body.theme-pixel.theme-dark .setting-note {
    color: #a0a0aa;
}

body.theme-pixel.theme-dark .btn-danger {
    background: #2e2e34;
    color: #ff6b5e;
    border-color: #ff6b5e;
}

body.theme-pixel.theme-dark .btn-danger:hover {
    background: #ff6b5e;
    color: #1b1b1d;
}

body.theme-pixel.theme-dark .btn-danger:disabled {
    background: #2e2e34;
    color: #5c5c66;
    border-color: #45454f;
}

body.theme-pixel.theme-dark .danger-confirm {
    background: #35211f;
    border-color: #ff6b5e;
    color: #ffb3ac;
}


/* ============================================================
   Tuiles du menu principal
   ============================================================
   Rouge, vert, bleu : trois teintes déjà dans l'app (les boutons de note, la
   bande signature du cadre), pas une palette de plus.
   La couleur dit QUELLE entrée c'est, jamais dans quel état elle est : la
   tuile Decks reste rouge une fois toutes les cartes à jour.

   Les aplats ne changent pas avec le thème (une tuile est sa propre source
   de lumière), seul le liseré se fonce la nuit.

   Deux classes dans les sélecteurs (.deck-btn.home-btn) et non une : la
   variante sombre peint plus haut body.theme-pixel.theme-dark .deck-btn, et
   la spécificité l'emporte sur l'ordre. Sans ce doublement, les trois
   tuiles redeviendraient grises dès le thème sombre.
   ============================================================ */

#decksBtn {
    --home-teinte: #f44336;
    --home-teinte-active: #e53935;
}

#statsBtn {
    --home-teinte: #4caf50;
    --home-teinte-active: #43a047;
}

#explorerBtn {
    --home-teinte: #2196f3;
    --home-teinte-active: #1e88e5;
}

body.theme-pixel .deck-btn.home-btn {
    background: var(--home-teinte);
    border: 2px solid #2c2e40;
    color: white;
}

body.theme-pixel .deck-btn.home-btn:hover {
    background: var(--home-teinte-active);
    border-color: #2c2e40;
    box-shadow: inset 0 0 0 0.5px #2c2e40;
}

body.theme-pixel.theme-dark .deck-btn.home-btn {
    border-color: #15161c;
}

body.theme-pixel.theme-dark .deck-btn.home-btn:hover {
    border-color: #15161c;
    box-shadow: inset 0 0 0 0.5px #15161c;
}