/* ============================================================
   BASE — variables, reset, mise en page commune
   ============================================================
   Tout ce dont les autres feuilles dépendent : la palette en variables CSS, la remise à zéro, et le squelette partagé par tous les écrans.

   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.
   ============================================================ */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    min-height: 100vh;
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.container {
    position: relative;
    background: white;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.2);
    padding: 40px;
    max-width: 620px;
    width: 100%;
    text-align: center;
}

.btn-back,
.btn-settings,
.btn-info,
.btn-mute,
.btn-matiere{
    position: absolute;
    top: 15px;
    left: 15px;
    width: 40px;
    height: 40px;
    padding: 0;
    font-size: 22px;
    line-height: 1;
    border-radius: 50%;
    background: #f0f4ff;
    color: #667eea;
    display: none;
}

.btn-settings {
    left: auto;
    right: 15px;
}

.btn-info {
    left: auto;
    right: 15px;
    top: 62px;
    font-size: 18px;
    font-style: italic;
    font-family: Georgia, serif;
}

.btn-mute {
    left: auto;
    right: 15px;
}

.btn-mute #muteIconOff {
    display: none;
}

.btn-mute.muted #muteIconOn {
    display: none;
}

.btn-mute.muted #muteIconOff {
    display: block;
}

.btn-back:hover,
.btn-settings:hover,
.btn-info:hover,
.btn-mute:hover,
.btn-matiere:hover{
    background: #e0e7ff;
}

.btn-back.show,
.btn-settings.show,
.btn-info.show,
.btn-mute.show,
.btn-matiere.show{
    display: block;
}

/* --- Ascenseurs, pour toute l'app ---------------------------------------
   Sélecteurs nus, donc valables pour TOUTE zone défilante : la liste des
   decks, les statistiques, et la barre de la page elle-même sur les écrans
   qui ne sont pas plafonnés en hauteur. Même allure d'un bout à l'autre.

   PIÈGE MAJEUR, et la raison de ce découpage : depuis Chrome 121, poser
   scrollbar-width ou scrollbar-color sur un élément fait IGNORER ses
   pseudo-éléments ::-webkit-scrollbar. C'est une résolution du CSS Working
   Group, pas un bug. Écrire les deux jeux de propriétés côte à côte, en
   croyant faire de la compatibilité, revient donc à n'avoir que le rendu
   natif : ni forme, ni retrait, ni largeur ne passent.
   D'où la bascule @supports plus bas. Ne jamais poser ces deux propriétés
   ailleurs qu'à l'intérieur de ce bloc. */

::-webkit-scrollbar {
    width: 20px;    /* la gouttière, pas le pouce */
    height: 20px;   /* idem pour un défilement horizontal */
}

::-webkit-scrollbar-track {
    background: transparent;   /* ni piste ni flèches */
}

/* Le pouce ne fait que 4 px dans ses 20 px de gouttière, et son retrait est
   ASYMÉTRIQUE : 14 px du côté du contenu, 2 px du côté du bord. C'est ce qui
   l'écarte réellement du contenu, alors qu'une bordure égale des deux côtés
   n'aurait fait que l'amincir sans le déplacer. Les bordures sont
   transparentes et background-clip empêche la couleur de les remplir.
   Rectangulaire, comme le reste du thème qui bannit les arrondis.
   Noir franc, blanc en thème sombre (voir css/theme-pixel.css). */
::-webkit-scrollbar-thumb {
    background-color: #000;
    border-radius: 0;
    border-left: 14px solid transparent;
    border-right: 2px solid transparent;
    background-clip: content-box;
}

/* Les propriétés standard sont réservées aux navigateurs DÉPOURVUS des
   pseudo-éléments, c'est-à-dire Firefox : les y appliquer partout
   désactiverait tout ce qui précède sur Chrome.
   Firefox ne permet de régler que l'épaisseur et la couleur ; la forme de
   son pouce, arrondie, n'est pas accessible au CSS. Il aura donc un trait
   fin de la bonne couleur, sans le retrait ni les angles droits. */
@supports not selector(::-webkit-scrollbar) {
    * {
        scrollbar-width: thin;
        scrollbar-color: #000 transparent;
    }
}