/*
Theme Name: Marlene custom
Description: Thème personnalisé style bureau Windows
Author: Ncode
Version: 1.0
*/

@font-face {
    font-family: 'W95FA';
    src: url('fonts/w95fa.woff2') format('woff2'),
         url('fonts/w95fa.woff') format('woff'),
         url('fonts/W95FA.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Windows Regular';
    src: url('fonts/Windows Regular.woff2') format('woff2'),
         url('fonts/Windows Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* Couleur de la barre de titre des fenêtres, assortie au jeu d'icônes actif
   (changeIconSet() dans draggable.js met à jour cette variable). Valeur par
   défaut alignée sur le set d'icônes "icons" (rose) : c'est celui affiché
   tant qu'aucun choix n'a encore été fait (chemins d'images codés en dur
   dans front-page.php), donc la barre de titre correspond dès le début. */
:root {
    --wb-titlebar-color: #f14db8;
}

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

body {
    font-family: 'Windows Regular', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    /*background-image: url('images/Marlenefond.jpg');*/
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat;
    overflow: hidden;
    min-height: 100vh;
}

/*----Logo page accueil----*/
.logo {
    justify-self: center;
    width: 100%;
}


img#logo {
    width: 200px;
    height: 200px;
}


.desktop {
    position: relative;
    width: 100vw;
    /* dvh et non vh : sur téléphone, 100vh compte la barre d'adresse, donc le
       bas du bureau tomberait hors de la zone visible — et comme la page ne
       défile pas (cf. body.home plus bas), les icônes du bas deviendraient
       inaccessibles. Les positions des icônes étant en pourcentage, elles se
       recalent d'elles-mêmes. Sur ordinateur, dvh vaut vh. */
    height: calc(100dvh - 40px);
}

/* Icônes de bureau */
.desktop-icon {
    position: absolute;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 105px;
    padding: 8px;
    text-decoration: none;
    cursor: pointer;
    user-select: none;
    transition: background-color 0.15s;
}

/* Le logo (200px) est placé en dernier dans le HTML, donc au-dessus des
   autres icônes par défaut (ordre du DOM). On le repasse derrière : les
   icônes doivent toujours rester cliquables/visibles par-dessus le logo. */
#logo-icon {
    z-index: 0;
}

/* …sauf pendant qu'on le déplace : il doit alors repasser au-dessus (comme
   n'importe quelle icône en cours de glisser-déposer). Sélecteur ID+classe
   pour battre la spécificité de #logo-icon seul. */
#logo-icon.dragging {
    z-index: 9999;
}

/*.desktop-icon:hover {

}*/


.desktop-icon.selected {
    background-color: rgba(255, 255, 255, 0.25);
}

.desktop-icon.dragging {
    opacity: 0.8;
    z-index: 9999;
    cursor: grabbing;
}

.desktop-icon img {
    width: 64px;
    height: 64px;
    object-fit: contain;
    margin-bottom: 6px;
    pointer-events: none;
}

.desktop-icon span {
    color: white;
    font-size: 12px;
    text-align: center;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
    word-wrap: break-word;
    max-width: 100%;
    line-height: 1.3;
}

.desktop-icon[data-external] span {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.desktop-icon[data-external] span::after {
  content: "↗";
  font-size: 0.8em;
}

/* Contenu des fenêtres */
.window-content {
    background: #fff;
    height: 100%;
    overflow: auto;
}

/* ── Fenêtre Paramètres — onglets façon "Propriétés d'affichage" Windows 95 ──
   Technique standard : la liste d'onglets chevauche le panneau de 2px
   (margin-bottom négatif = largeur de la bordure) et passe par-dessus
   (z-index). Chaque onglet a un relief complet (haut/gauche clairs,
   droite/bas foncés) SAUF l'onglet actif, dont le bord bas est repeint dans
   la couleur du fond : la "couture" avec le panneau en dessous disparaît
   visuellement, exactement l'inverse d'un onglet inactif qui, lui, doit
   rester visuellement détaché du panneau par cette même bordure foncée. */
.win95-tabs-window {
    background: #c0c0c0 !important;
    display: flex;
    flex-direction: column;
    padding: 8px 8px 0;
    box-sizing: border-box;
    /* Cet élément porte AUSSI la classe .window-content, qui a son propre
       overflow:auto — sans ce reset, c'est le conteneur extérieur (toute la
       fenêtre) qui scrollait, pas .fond-ecran/.icon-set-selector. */
    overflow: hidden;
}

.win95-tab-list {
    display: flex;
    position: relative;
    z-index: 1;
    margin-bottom: -2px;
}

.win95-tab {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    forced-color-adjust: none;
    background: #c0c0c0;
    border-style: solid;
    border-width: 2px;
    /* haut / droite / bas / gauche — bas gris par défaut (onglet "détaché" du
       panneau) ; seul .active le repeint en gris panneau pour se fondre. */
    border-color: #ffffff #808080 #ffffff #ffffff;
    border-radius: 0;
    cursor: pointer;
    font-family: 'Windows Regular', 'Arial', sans-serif;
    font-size: 12px;
    color: #000;
    padding: 6px 16px;
    margin-right: 2px;
}

.win95-tab.active {
    /* La couture doit se fondre avec ce qu'il y a EN DESSOUS (le panneau,
       redevenu gris) — pas avec du blanc, qui créait une ligne visible. */
    border-bottom-color: #c0c0c0;
    font-weight: bold;
}

.win95-tab-body {
    /* Fond gris, comme le reste de la fenêtre et du site — le rectangle blanc
       se limite à la zone de sélection des images (.fond-ecran /
       .icon-set-selector, cf. plus bas). */
    flex: 1;
    background: #c0c0c0;
    border-top: 2px solid #ffffff;
    border-left: 2px solid #ffffff;
    border-right: 2px solid #808080;
    border-bottom: 2px solid #808080;
    padding: 14px;
    /* Le scroll se fait DANS .fond-ecran/.icon-set-selector (flex:1 +
       overflow-y ci-dessous), pas sur tout le panneau : "Mode d'affichage"
       doit rester visible même si la liste d'images déborde. */
    overflow: hidden;
}

/* display:flex uniquement sur le panneau visible : ne pas l'appliquer
   inconditionnellement casserait l'attribut "hidden" des autres panneaux
   (même spécificité CSS, mais un style d'auteur l'emporterait sur la feuille
   de style du navigateur qui gère "hidden"). */
.win95-tab-panel {
    flex-direction: column;
    height: 100%;
}
.win95-tab-panel:not([hidden]) {
    display: flex;
}

.win95-tab-body h2 {
    font-size: 13px;
    margin-bottom: 6px;
}

.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
}

.gallery img {
    width: 100%;
    height: 120px;
    object-fit: cover;
    cursor: pointer;
    transition: transform 0.15s ease;
}

.gallery img:hover {
    transform: translateY(-4px);
}

.contact-info {
    font-size: 16px;
    line-height: 2;
}

.contact-info p {
    margin: 10px 0;
}

.winbox{
    background: var(--wb-titlebar-color, #DA98AE) !important;
    border: 4px solid #bfbebf;
    outline: 1px solid;
    box-shadow: none;
    /* WinBox anime width/height/left/top sur .3s par défaut. Pendant cette
       animation (agrandir/restaurer, minimiser…), tout contenu à mise en page
       fluide (galeries en flex-wrap, grilles auto-fill…) se réagence en continu
       à chaque étape intermédiaire — visible comme un clignotement/sautillement
       des icônes. Redimensionnement instantané partout pour l'éviter : c'est
       déjà ce qui se produisait par coïncidence dans les fenêtres à peu
       d'éléments (rien à réagencer, donc rien à voir bouger). !important
       nécessaire : le CSS de WinBox (chargé après le nôtre) répète cette même
       règle avec la même spécificité. */
    transition: none !important;
}

div#window-projets {
    border: 0.5px solid #000000;
}

.wb-drag {
    border-bottom: 4px solid #bfbebf;
}

/* Scroll dans les WinBox avec iframe */
.wb-body {
    overflow: auto !important;
}

.wb-body > div {
    width: 100%;
    height: 100%;
}

.wb-body iframe {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}

/* Permettre le scroll sur les pages bbPress et membership */
body.bbpress,
body.page-template-default {
    overflow: auto !important;
}

/* ── Accueil (bureau) : aucun défilement de page ──
   Sur téléphone, 100vh compte la barre d'adresse : le body dépasse donc
   toujours un peu de la zone visible et la page se laisse tirer de haut en
   bas, entraînant le fond d'écran avec elle (background-attachment:fixed
   n'étant pas fiable sur mobile). On cale la hauteur sur la zone réellement
   visible (dvh) et on coupe le défilement ainsi que le rebond élastique.
   Le !important est nécessaire pour battre page-template-default ci-dessus,
   que body_class() ajoute aussi à l'accueil. Rien n'est perdu au passage :
   le bureau, la barre des tâches et les fenêtres WinBox sont tous en
   position:fixed, il n'y a aucun contenu dans le flux à faire défiler. */
html:has(body.home) {
    overflow: hidden;
}

body.home {
    height: 100vh; /* repli pour les navigateurs sans dvh */
    height: 100dvh;
    min-height: 0;
    overflow: hidden !important;
    overscroll-behavior: none;
}

/* Icônes des plateformes de streaming */
.streaming-platform {
    padding-top: 14px;
    flex-shrink: 0;
}

.platform-icon {
    display: contents;
    cursor: pointer;
}

.platform-icon:hover {
    transform: translateY(-4px);
}

.platform-icon img {
    width: 32px;
    height: 32px;
    object-fit: contain;
    margin-bottom: 10px;
    background: #c0c0c0;
    border-top: 2px solid #ffffff;
    border-left: 2px solid #ffffff;
    border-right: 2px solid #808080;
    border-bottom: 2px solid #808080;
    padding: 3px;
}

.platform-icon span {
    color: #333;
    font-size: 13px;
    text-align: center;
}

/*---------fond ecran ---------*/
/* flex + wrap, mais avec des icônes à taille FIXE (flex-grow/shrink:0) plutôt
   que la grille "auto-fill, minmax(…,1fr)" d'origine : dans une grille 1fr,
   chaque colonne (donc chaque icône) s'étire ou se rétrécit en continu pour
   occuper toute la largeur disponible — c'est ce qui donnait l'impression que
   les icônes "sautaient" pendant un redimensionnement. Ici, la taille de
   chaque icône ne bouge jamais ; seul le nombre par rangée change, et les
   icônes en trop passent proprement à la ligne suivante au lieu d'être
   cachées derrière un scroll horizontal. */
.fond-ecran {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 20px;
    padding: 20px;
    /* Hauteur plafonnée : scrolle en interne si les images débordent, sans
       jamais pousser "Mode d'affichage" hors de la fenêtre. */
    max-height: 330px;
    overflow-y: scroll;
    /* Rectangle blanc "creux" façon liste Windows 95 (relief inversé : foncé
       en haut/gauche, clair en bas/droite) autour de la sélection d'images. */
    background: #fff;
    border-top: 2px solid #808080;
    border-left: 2px solid #808080;
    border-right: 2px solid #ffffff;
    border-bottom: 2px solid #ffffff;
    margin-bottom: 5px;
}

.fond-ecran-icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-grow: 0;
    flex-shrink: 0;
    text-decoration: none;
    padding: 15px;
    transition: transform 0.15s ease;
    cursor: pointer;
}

.fond-ecran-icon:hover {
    transform: translateY(-4px);
}

.fond-ecran-icon img {
    width: 100px;
    height: 100px;
    object-fit: contain;
}

/* ── Mode d'affichage du fond d'écran ── */
.bg-mode-selector {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 28px;
    padding: 4px 20px 12px;
    font-family: 'Windows Regular', 'Arial', sans-serif;
    font-size: 13px;
    color: #000;
}

.bg-mode-option {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}

.bg-mode-option input {
    cursor: pointer;
}

/* ── Cases à cocher / boutons radio façon Windows 95 ──
   appearance:none + ::after est un pattern standard et fiable partout (Chrome,
   Firefox, Safari) pour checkbox/radio — contrairement aux <input type=range>
   verticaux, ce n'est pas ce genre de piste fragile d'un moteur à l'autre. */
input[type="checkbox"],
input[type="radio"] {
    -webkit-appearance: none;
    appearance: none;
    width: 13px;
    height: 13px;
    margin: 0;
    padding: 0;
    flex-shrink: 0;
    background: #ffffff;
    border-top: 1px solid #404040;
    border-left: 1px solid #404040;
    border-right: 1px solid #ffffff;
    border-bottom: 1px solid #ffffff;
    box-shadow: inset 1px 1px 0 #808080;
    position: relative;
    cursor: pointer;
}

input[type="radio"] {
    border-radius: 50%;
}

input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    left: 3px;
    top: -1px;
    width: 3px;
    height: 7px;
    border: solid #000;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

input[type="radio"]:checked::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #000;
}

/* ── Curseur de taille de mosaïque : même widget custom (div) que le
   volume de la barre des tâches — rendu identique sur tous les navigateurs,
   pas de <input type="range"> natif dont le style diffère trop d'un moteur
   à l'autre. ── */
.bg-tile-size-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 20px 15px;
    font-family: 'Windows Regular', 'Arial', sans-serif;
    font-size: 13px;
    color: #000;
}

.bg-tile-size-row.disabled {
    opacity: 0.5;
    /* Inerte tant que "Mosaïque" n'est pas le mode actif (cf. startDrag()
       dans initOptionsWindow, draggable.js, qui ne fait rien non plus dans
       ce cas) — pas de survol/clic qui laisserait croire que ça marche. */
    pointer-events: none;
}

.bg-tile-size-label {
    white-space: nowrap;
}

.bg-tile-slider-wrap {
    position: relative;
    width: 180px;
    height: 22px;
    flex-shrink: 0;
}

.bg-tile-track {
    position: absolute;
    left: 3px;
    right: 3px;
    top: 50%;
    height: 6px;
    margin-top: -3px;
    box-sizing: border-box;
    background: #808080;
    border-top: 1px solid #404040;
    border-left: 1px solid #404040;
    border-right: 1px solid #ffffff;
    border-bottom: 1px solid #ffffff;
}

.bg-tile-thumb {
    position: absolute;
    top: 50%;
    width: 11px;
    height: 22px;
    margin-top: -11px;
    box-sizing: border-box;
    background: #c0c0c0;
    border-top: 1px solid #ffffff;
    border-left: 1px solid #ffffff;
    border-right: 1px solid #404040;
    border-bottom: 1px solid #404040;
    box-shadow: inset 1px 1px 0 #dfdfdf;
    cursor: pointer;
    touch-action: none;
}

.bg-tile-thumb:focus-visible {
    outline: 1px dotted #000;
    outline-offset: 2px;
}

.icon-set-selector {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 20px;
    padding: 10px 20px 20px;
    /* Même comportement que .fond-ecran : hauteur plafonnée, scroll interne
       si les jeux d'icônes débordent. */
    max-height: 330px;
    overflow-y: scroll;
    /* Même rectangle blanc "creux" que .fond-ecran. */
    background: #fff;
    border-top: 2px solid #808080;
    border-left: 2px solid #808080;
    border-right: 2px solid #ffffff;
    border-bottom: 2px solid #ffffff;
}

.icon-set-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-grow: 0;
    flex-shrink: 0;
    text-decoration: none;
    padding: 10px 15px;
    cursor: pointer;
    color: #000;
    font-family: 'Windows Regular', 'Arial', sans-serif;
    font-size: 12px;
    transition: none;
    transition: transform 0.15s ease;
}

.icon-set-btn:hover {
     transform: translateY(-4px);
}

.icon-set-btn img {
    width: 70px;
    height: 70px;
    object-fit: contain;
    margin-bottom: 6px;
}

/* ── Windows 95 Player ── */
.w95-player {
    background: #c0c0c0;
    border-top: 2px solid #ffffff;
    border-left: 2px solid #ffffff;
    border-right: 2px solid #808080;
    border-bottom: 2px solid #808080;
    font-family: 'Windows Regular', 'MS Sans Serif', Arial, sans-serif;
    font-size: 11px;
    color: #000;
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    box-sizing: border-box;
}
.w95-media {
    width: 100%;
    max-height: 60%;
    background: #000;
    display: block;
    margin-bottom: 4px;
    object-fit: contain;
}
.w95-display {
    background: #F34DB8;
    color: #ffffff;
    font-family: 'Courier New', monospace;
    font-size: 11px;
    padding: 6px 8px;
    border-top: 2px solid #808080;
    border-left: 2px solid #808080;
    border-right: 2px solid #ffffff;
    border-bottom: 2px solid #ffffff;
}
.w95-track-info {
    display: flex;
    justify-content: space-between;
    margin-bottom: 4px;
}
.w95-track-name { flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.w95-track-time { white-space: nowrap; margin-left: 8px; }
.w95-progress-bar {
    background: #004000;
    height: 8px;
    cursor: pointer;
    border-top: 1px solid #808080;
    border-left: 1px solid #808080;
}
.w95-progress-fill {
    background: #ffffff;
    height: 100%;
    width: 0%;
    transition: width 0.3s linear;
}
.w95-controls {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 4px;
    border-top: 1px solid #808080;
    border-left: 1px solid #808080;
    border-right: 1px solid #ffffff;
    border-bottom: 1px solid #ffffff;
}
.w95-btn-group {
    display: flex;
    gap: 2px;
    padding-right: 6px;
    border-right: 1px solid #808080;
    box-shadow: 1px 0 0 #ffffff;
}
.w95-btn {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    forced-color-adjust: none;
    background: transparent;
    border: none;
    border-radius: 0;
    width: 22px;
    height: 20px;
    padding: 0;
    line-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
}
.w95-ico { display: block; }
.w95-btn:active .w95-ico,
.w95-btn.active .w95-ico {
    transform: translate(1px, 1px);
}
.w95-volume-group {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
}
.w95-vol-icon { display: flex; align-items: center; flex-shrink: 0; }
.w95-volume {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    forced-color-adjust: none;
    width: 70px;
    height: 4px;
    background: #808080;
    border: 1px solid #404040;
    outline: none;
    cursor: pointer;
}
.w95-volume::-webkit-slider-thumb {
    -webkit-appearance: none;
    forced-color-adjust: none;
    width: 10px;
    height: 14px;
    background: #d4d0c8;
    border: 1px solid #404040;
    cursor: pointer;
}
.w95-volume::-moz-range-thumb {
    forced-color-adjust: none;
    width: 10px;
    height: 14px;
    background: #d4d0c8;
    border: 1px solid #404040;
    border-radius: 0;
    cursor: pointer;
}
.w95-playlist {
    background: #ffffff;
    border-top: 2px solid #808080;
    border-left: 2px solid #808080;
    border-right: 2px solid #ffffff;
    border-bottom: 2px solid #ffffff;
    max-height: 100%;
    overflow-y: auto;
}
.w95-playlist-item {
    display: flex;
    align-items: center;
    padding: 2px 4px;
    cursor: default;
    gap: 6px;
    border-bottom: 1px solid #e0e0e0;
}
.w95-playlist-item:hover { background: #F34DB8; color: #fff; }
.w95-playlist-item:hover .w95-dl { color: #fff; }
.w95-playlist-item.active { background: #F34DB8; color: #fff; }
.w95-playlist-item.active .w95-dl { color: #fff; }
.w95-num { color: #808080; width: 16px; text-align: right; flex-shrink: 0; }
.w95-playlist-item.active .w95-num,
.w95-playlist-item:hover .w95-num { color: #c0c0c0; }
.w95-item-title { flex: 1; }
.w95-dl { color: #F34DB8; text-decoration: none; font-size: 14px; font-weight: bold; padding: 0 2px; }
.w95-drag-handle { cursor: grab; color: #aaa; font-size: 14px; padding: 0 4px 0 0; flex-shrink: 0; user-select: none; }
.w95-playlist-item:hover .w95-drag-handle,
.w95-playlist-item.active .w95-drag-handle { color: #fff; }
.w95-dragging { opacity: 0.4; }
/* box-shadow (et non border-top) : un vrai bord ajoute 2px à la hauteur de
   l'élément, ce qui dépasse alors la hauteur fixe calculée à l'ouverture du
   lecteur (cf. initPlayer) et fait apparaître un scrollbar indésirable sur
   toute la fenêtre le temps du survol. inset ne participe pas à la mise en
   page : même indicateur visuel, aucun changement de taille. */
.w95-drag-over { box-shadow: inset 0 2px 0 0 #F34DB8; }

/* ── Lecteur vidéo W98 (remplace les contrôles natifs du <video>) ── */
.w98-video-player {
    background: #c0c0c0;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}
.w98-video-screen {
    flex: 1;
    min-height: 0;
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.w98-video-screen video {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.w98-video-controls {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 6px;
    background: #c0c0c0;
    border-top: 1px solid #808080;
    border-left: 1px solid #808080;
    border-right: 1px solid #ffffff;
    border-bottom: 1px solid #ffffff;
}
.w98-vbtn {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    forced-color-adjust: none;
    background: transparent;
    border: none;
    border-radius: 0;
    width: 22px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
}
.w98-vbtn.active .w95-ico {
    transform: translate(1px, 1px);
}
.w98-video-seek { flex: 1; }
.w98-video-time {
    font-family: 'Windows Regular', 'MS Sans Serif', Arial, sans-serif;
    font-size: 11px;
    color: #000;
    white-space: nowrap;
}
.w98-vol-icon { display: flex; align-items: center; flex-shrink: 0; }
.w98-video-volume { width: 60px; flex: 0 0 60px; }
.w98-video-controls input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    forced-color-adjust: none;
    height: 4px;
    background: #808080;
    border: 1px solid #404040;
    outline: none;
}
.w98-video-controls input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    forced-color-adjust: none;
    width: 10px;
    height: 14px;
    background: #d4d0c8;
    border: 1px solid #404040;
    cursor: pointer;
}
.w98-video-controls input[type="range"]::-moz-range-thumb {
    forced-color-adjust: none;
    width: 10px;
    height: 14px;
    background: #d4d0c8;
    border: 1px solid #404040;
    cursor: pointer;
    border-radius: 0;
}

/* ── Trash gallery ── */
.trash-gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px;
}
.trash-thumb {
    width: 120px;
    height: 90px;
    object-fit: cover;
    cursor: pointer;
    transition: transform 0.15s ease;
}
.no-download {
    -webkit-user-drag: none;
    user-select: none;
    -webkit-user-select: none;
}
.trash-thumb:hover {
    transform: translateY(-4px);
}

/* ── Vidéos : preload="none", donc pas d'aperçu tant qu'aucun "poster" n'a
   été fourni (cf. marlene_render_trash_gallery()) — fond neutre en
   attendant plutôt qu'une boîte blanche invisible sur le fond de la
   fenêtre. ── */
video.trash-thumb {
    background: #202020;
}

/* ── WinBox image sans padding ── */
.wb-image .wb-body {
    padding: 0 !important;
    overflow: hidden;
}

/* ── Barre des tâches ── */

#taskbar {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 40px;
    background: #c0c0c0;
    border-top: 2px solid #ffffff;
    box-shadow: inset 0 1px 0 #ffffff;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0 4px;
    z-index: 10000;
    gap: 4px;
}

#taskbar-start {
    display: flex;
    align-items: center;
    gap: 5px;
    background: #c0c0c0;
    border-top: 2px solid #ffffff;
    border-left: 2px solid #ffffff;
    border-right: 2px solid #808080;
    border-bottom: 2px solid #808080;
    padding: 2px 10px 2px 6px;
    cursor: pointer;
    font-size: 13px;
    font-weight: bold;
    font-family: 'Windows Regular', 'Arial', sans-serif;
    color: #000;
    height: 32px;
    flex-shrink: 0;
}

#taskbar-start:active {
    border-top: 2px solid #808080;
    border-left: 2px solid #808080;
    border-right: 2px solid #ffffff;
    border-bottom: 2px solid #ffffff;
}

#taskbar-start img {
    height: 22px;
    width: 22px;
    object-fit: contain;
    pointer-events: none;
}

/* Zone des boutons de fenêtres : seule partie qui peut rétrécir. Elle ne
   dépasse jamais de l'écran — au-delà, les boutons en trop passent dans
   le menu de la flèche plutôt que de pousser l'horloge/le son hors champ. */
#taskbar-windows {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
    overflow: hidden;
}

/* ── Flèche de débordement de la barre des tâches ── */

#taskbar-overflow {
    position: relative;
    display: none;
    align-items: center;
    flex-shrink: 0;
}

#taskbar-overflow.show {
    display: flex;
}

#taskbar-overflow-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 32px;
    padding: 0;
    background: #c0c0c0;
    border-top: 2px solid #ffffff;
    border-left: 2px solid #ffffff;
    border-right: 2px solid #808080;
    border-bottom: 2px solid #808080;
    cursor: pointer;
    flex-shrink: 0;
}

#taskbar-overflow-btn:active {
    border-top: 2px solid #808080;
    border-left: 2px solid #808080;
    border-right: 2px solid #ffffff;
    border-bottom: 2px solid #ffffff;
}

#taskbar-overflow-menu {
    display: none;
    position: absolute;
    bottom: 35px;
    right: 0;
    min-width: 160px;
    max-width: 240px;
    max-height: 60vh;
    overflow-y: auto;
    flex-direction: column;
    background: #c0c0c0;
    border-top: 2px solid #ffffff;
    border-left: 2px solid #ffffff;
    border-right: 2px solid #808080;
    border-bottom: 2px solid #808080;
    box-shadow: 2px 2px 0 #000;
    padding: 2px 0;
    z-index: 20000;
}

#taskbar-overflow-menu.open {
    display: flex;
}

.taskbar-overflow-item {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    background: transparent;
    border: none;
    padding: 5px 10px;
    font-size: 12px;
    font-family: 'Windows Regular', 'Arial', sans-serif;
    color: #000;
    text-align: left;
    cursor: pointer;
}

.taskbar-overflow-item img {
    width: 18px;
    height: 18px;
    object-fit: contain;
    flex-shrink: 0;
}

.taskbar-overflow-item-label {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.taskbar-overflow-item:hover {
    background: var(--wb-titlebar-color, #DA98AE);
    color: #ffffff;
}

#taskbar-tray {
    display: flex;
    align-items: center;
    background: #c0c0c0;
    border-top: 2px solid #808080;
    border-left: 2px solid #808080;
    border-right: 2px solid #ffffff;
    border-bottom: 2px solid #ffffff;
    padding: 2px 10px;
    height: 32px;
    flex-shrink: 0;
}

#taskbar-time {
    font-family: 'Windows Regular', 'Arial', sans-serif;
    font-size: 12px;
    color: #000;
    white-space: nowrap;
    min-width: 38px;
    text-align: center;
}

/* ── Icône Volume (barre des tâches) ── */

#taskbar-volume {
    position: relative;
    display: flex;
    align-items: center;
    height: 100%;
}

#taskbar-volume-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    margin-right: 6px;
    background: transparent;
    border: none;
    cursor: pointer;
}

#taskbar-volume-btn:active,
#taskbar-volume-btn.active {
    background: #a0a0a0;
    box-shadow: inset 1px 1px 0 #808080, inset -1px -1px 0 #ffffff;
}

#taskbar-volume-btn img {
    width: 16px;
    height: 16px;
    object-fit: contain;
    image-rendering: pixelated;
    pointer-events: none;
}

#taskbar-volume-popup {
    display: none;
    position: absolute;
    bottom: 35px;
    right: -18px;
    width: 76px;
    background: #c0c0c0;
    border-top: 2px solid #ffffff;
    border-left: 2px solid #ffffff;
    border-right: 2px solid #808080;
    border-bottom: 2px solid #808080;
    box-shadow: 2px 2px 0 #000;
    padding: 6px 6px 8px;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    z-index: 20000;
}

#taskbar-volume-popup.open {
    display: flex;
}

#taskbar-volume-label {
    align-self: flex-start;
    font-family: 'Windows Regular', 'Arial', sans-serif;
    font-size: 11px;
    color: #000;
    margin-bottom: 2px;
}

/* ── Rainure + graduations façon Windows 95 ── */
#taskbar-volume-slider-wrap {
    position: relative;
    width: 46px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#taskbar-volume-slider-wrap::before,
#taskbar-volume-slider-wrap::after {
    content: "";
    position: absolute;
    top: 3px;
    bottom: 3px;
    width: 8px;
    background-image: repeating-linear-gradient(
        to bottom,
        #808080 0,
        #808080 1px,
        transparent 1px,
        transparent 8px
    );
}

#taskbar-volume-slider-wrap::before { left: 4px; }
#taskbar-volume-slider-wrap::after  { right: 4px; }

/* Rainure (piste) sunken grise — simple <div>, même rendu sur tous les navigateurs */
#taskbar-volume-track {
    position: absolute;
    left: 50%;
    top: 3px;
    bottom: 3px;
    width: 6px;
    margin-left: -3px;
    box-sizing: border-box;
    background: #808080;
    border-top: 1px solid #404040;
    border-left: 1px solid #404040;
    border-right: 1px solid #ffffff;
    border-bottom: 1px solid #ffffff;
}

/* Curseur : petit bouton rectangulaire à relief 3D, comme Windows 95.
   Div positionnée en JS (voir draggable.js) au lieu du thumb natif d'un
   <input type="range">, dont le rendu diffère trop d'un navigateur à l'autre. */
#taskbar-volume-thumb {
    position: absolute;
    left: 50%;
    top: 3px;
    width: 22px;
    height: 11px;
    margin-left: -11px;
    box-sizing: border-box;
    background: #c0c0c0;
    border-top: 1px solid #ffffff;
    border-left: 1px solid #ffffff;
    border-right: 1px solid #404040;
    border-bottom: 1px solid #404040;
    box-shadow: inset 1px 1px 0 #dfdfdf;
    cursor: pointer;
    touch-action: none;
    z-index: 1;
}

#taskbar-volume-thumb:focus-visible {
    outline: 1px dotted #000;
    outline-offset: 2px;
}

#taskbar-volume-level {
    font-family: 'Windows Regular', 'Arial', sans-serif;
    font-size: 11px;
    color: #000;
}

#taskbar-volume-mute-row {
    display: flex;
    align-items: center;
    gap: 4px;
    font-family: 'Windows Regular', 'Arial', sans-serif;
    font-size: 11px;
    color: #000;
    cursor: pointer;
    white-space: nowrap;
}

#taskbar-volume-mute-row input {
    margin: 0;
    cursor: pointer;
}

/* ── Logo Ncode (barre des tâches, à gauche de l'heure) ──
   Même mécanique que l'icône Volume juste au-dessus : un bouton plat dans la
   zone de notification, et un encadré "À propos" ancré au-dessus de lui. La
   seule différence est l'orientation : celui-ci est en paysage (large et bas)
   au lieu du portrait du curseur de volume. */

#taskbar-ncode {
    position: relative;
    display: flex;
    align-items: center;
    height: 100%;
}

#taskbar-ncode-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    /* Le logo est en paysage, contrairement au haut-parleur qui est carré :
       le bouton s'elargit selon l'image (min-width = même gabarit que
       #taskbar-volume-btn) au lieu d'imposer un carré de 22px. */
    min-width: 22px;
    height: 22px;
    padding: 0 2px;
    margin-right: 6px;
    flex: 0 0 auto;
    background: transparent;
    border: none;
    cursor: pointer;
}

#taskbar-ncode-btn:active,
#taskbar-ncode-btn.active {
    background: #a0a0a0;
    box-shadow: inset 1px 1px 0 #808080, inset -1px -1px 0 #ffffff;
}

#taskbar-ncode-btn img {
    /* Hauteur imposée, largeur libre : le ratio du logo est préservé et la
       barre des tâches (32px de haut) ne peut pas être poussée. Le max-width
       borne un éventuel logo très allongé. */
    height: 18px;
    width: auto;
    max-width: 36px;
    object-fit: contain;
    display: block;
    pointer-events: none;
}

#taskbar-ncode-popup {
    display: none;
    position: absolute;
    bottom: 35px;
    right: -6px;
    width: 150px;
    /* Sur les petits écrans, l'encadré ne doit jamais déborder du viewport :
       la marge de 16px laisse la bordure visible des deux côtés. */
    max-width: calc(100vw - 16px);
    box-sizing: border-box;
    background: #c0c0c0;
    border-top: 2px solid #ffffff;
    border-left: 2px solid #ffffff;
    border-right: 2px solid #808080;
    border-bottom: 2px solid #808080;
    box-shadow: 2px 2px 0 #000;
    padding: 8px 10px;
    flex-direction: column;
    gap: 6px;
    z-index: 20000;
}

#taskbar-ncode-popup.open {
    display: flex;
}

.taskbar-ncode-line {
    font-family: 'Windows Regular', 'Arial', sans-serif;
    font-size: 12px;
    line-height: 1.4;
    color: #000;
}

.taskbar-ncode-line a {
    color: #000;
    text-decoration: underline;
    /* L'adresse e-mail est le seul mot insécable de l'encadré : on l'autorise
       à se couper plutôt que d'élargir la boîte sur téléphone. */
    word-break: break-all;
}

.taskbar-ncode-line a:hover {
    color: var(--wb-titlebar-color, #DA98AE);
}


.taskbar-window-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #c0c0c0;
    border-top: 2px solid #ffffff;
    border-left: 2px solid #ffffff;
    border-right: 2px solid #808080;
    border-bottom: 2px solid #808080;
    padding: 2px 8px;
    height: 32px;
    min-width: 80px;
    max-width: 160px;
    font-size: 11px;
        font-weight: 700;
    font-family: 'Windows Regular', 'Arial', sans-serif;
    color: #000;
    cursor: pointer;
    flex-shrink: 0;
}

.taskbar-window-btn img {
    width: 23px;
    height: 23px;
    object-fit: contain;
    flex-shrink: 0;
}

/* Le span (et non le bouton) porte l'ellipse : en flexbox, text-overflow ne
   tronque de façon fiable que l'élément dédié au texte, pas un nœud de
   texte partagé avec l'image dans le même conteneur flex. */
.taskbar-window-btn-label {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.taskbar-window-btn:active {
    border-top: 2px solid #808080;
    border-left: 2px solid #808080;
    border-right: 2px solid #ffffff;
    border-bottom: 2px solid #ffffff;
}

/* ── Menu Démarrer ── */

#start-menu {
    position: fixed;
    bottom: 42px;
    left: 0;
    width: 220px;
    background: #c0c0c0;
    border-top: 2px solid #ffffff;
    border-left: 2px solid #ffffff;
    border-right: 2px solid #808080;
    border-bottom: 2px solid #808080;
    box-shadow: 2px 2px 0 #000;
    display: none;
    flex-direction: row;
    z-index: 20000;
}

#start-menu.open {
    display: flex;
}

#taskbar-start.menu-open {
    border-top: 2px solid #808080;
    border-left: 2px solid #808080;
    border-right: 2px solid #ffffff;
    border-bottom: 2px solid #ffffff;
}

#start-menu-sidebar {
    width: 28px;
    /* Même variable que les barres de titre des fenêtres (--wb-titlebar-color)
       — reste cohérent avec le jeu d'icônes actif au lieu d'un rose fixe. */
    background: var(--wb-titlebar-color, #DA98AE);
    box-shadow: inset 2px 0 0 rgba(255, 255, 255, 0.35);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    padding-bottom: 8px;
    flex-shrink: 0;
    gap: 4px;
}

.start-sidebar-name {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-family: 'Windows Regular', 'Arial', sans-serif;
    font-size: 13px;
    font-weight: bold;
    color: #ffffff;
    letter-spacing: 1px;
    user-select: none;
}

.start-sidebar-ver {
    font-family: 'Windows Regular', 'Arial', sans-serif;
    font-size: 10px;
    color: rgba(255, 255, 255, 0.5);
    user-select: none;
}

#start-menu-list {
    list-style: none;
    margin: 0;
    padding: 2px 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.start-menu-sep {
    height: 0;
    margin: 4px 6px;
    border-top: 1px solid #808080;
    border-bottom: 1px solid #ffffff;
}

.start-menu-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 12px 5px 8px;
    cursor: pointer;
    font-family: 'Windows Regular', 'Arial', sans-serif;
    font-size: 12px;
    color: #000;
    user-select: none;
}

.start-menu-item-icon {
    font-size: 18px;
    width: 24px;
    height: 24px;
    text-align: center;
    flex-shrink: 0;
    object-fit: contain;
}

.start-menu-item:hover {
    background: var(--wb-titlebar-color, #DA98AE);
    color: #ffffff;
}

/* ── Sous-menu Jeux (cascadant Windows 95) ── */

.start-menu-item.has-submenu {
    position: relative;
}

.start-menu-item.has-submenu > span {
    flex: 1;
}

.start-menu-item.has-submenu::after {
    content: '▶';
    font-size: 8px;
    margin-left: 4px;
    flex-shrink: 0;
}

.start-submenu {
    display: none;
    position: absolute;
    left: 100%;
    top: -2px;
    min-width: 180px;
    list-style: none;
    margin: 0;
    padding: 2px 0;
    background: #c0c0c0;
    border-top: 2px solid #ffffff;
    border-left: 2px solid #ffffff;
    border-right: 2px solid #808080;
    border-bottom: 2px solid #808080;
    box-shadow: 2px 2px 0 #000;
    z-index: 25000;
}

.start-menu-item.has-submenu:hover > .start-submenu,
.start-menu-item.has-submenu.submenu-open > .start-submenu {
    display: block;
}

.start-submenu .start-menu-item {
    color: #000;
}

.start-submenu .start-menu-item:hover {
    background: var(--wb-titlebar-color, #DA98AE);
    color: #ffffff;
}

/* ── Écran éteint (CRT) ── */

#shutdown-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: #000;
    display: none;
    align-items: center;
    justify-content: center;
}

#shutdown-overlay.shutting-down,
#shutdown-overlay.turning-on {
    display: flex;
}

/* Effet inverse (allumage) : fond noir tant que le flash blanc de
   #shutdown-crt n'a pas grandi jusqu'au plein écran (sinon on voit le
   bureau à travers, autour du point/de la ligne encore petits). La classe
   "reveal" (ajoutée en JS une fois le flash à sa taille maximale, juste
   avant qu'il ne commence à s'effacer) rend l'overlay transparent : le
   bureau apparaît alors progressivement pendant le fondu du flash. */
#shutdown-overlay.turning-on.reveal {
    background: transparent;
}

#shutdown-crt {
    position: absolute;
    inset: 0;
    background: #fff;
    transform-origin: center center;
}

#shutdown-overlay.shutting-down #shutdown-crt {
    animation: crt-off 0.45s cubic-bezier(0.6, 0, 1, 1) forwards;
}

#shutdown-overlay.turning-on #shutdown-crt {
    animation: crt-on 0.6s cubic-bezier(0, 0.4, 0.4, 1) forwards;
}

@keyframes crt-off {
    0%   { transform: scaleY(1)      scaleX(1);    filter: brightness(1.8); opacity: 1; }
    18%  { transform: scaleY(0.004)  scaleX(1);    filter: brightness(6);   opacity: 1; }
    55%  { transform: scaleY(0.004)  scaleX(0.25); filter: brightness(8);   opacity: 1; }
    80%  { transform: scaleY(0.004)  scaleX(0.04); filter: brightness(10);  opacity: 1; }
    100% { transform: scaleY(0)      scaleX(0);    filter: brightness(0);   opacity: 0; }
}

/* ── Boîte de confirmation Arrêter ── */

#shutdown-confirm-overlay {
    position: fixed;
    inset: 0;
    z-index: 30000;
    background: rgba(0, 0, 0, 0.3);
    display: none;
    align-items: center;
    justify-content: center;
}

#shutdown-confirm-overlay.open {
    display: flex;
}

#shutdown-confirm-box {
    background: #c0c0c0;
    border-top: 2px solid #ffffff;
    border-left: 2px solid #ffffff;
    border-right: 2px solid #808080;
    border-bottom: 2px solid #808080;
    box-shadow: 2px 2px 0 #000;
    width: 300px;
    font-family: 'Windows Regular', 'Arial', sans-serif;
}

#shutdown-confirm-titlebar {
    background: var(--wb-titlebar-color, #DA98AE);
    color: #ffffff;
    font-size: 12px;
    font-weight: bold;
    padding: 3px 6px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    user-select: none;
}

#shutdown-confirm-close {
    background: #c0c0c0;
    border-top: 1px solid #ffffff;
    border-left: 1px solid #ffffff;
    border-right: 1px solid #808080;
    border-bottom: 1px solid #808080;
    font-size: 10px;
    width: 16px;
    height: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #000;
    padding: 0;
    line-height: 1;
}

#shutdown-confirm-body {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 18px 12px;
    font-size: 12px;
    color: #000;
}

#shutdown-confirm-body p {
    margin: 0;
}

#shutdown-confirm-icon {
    width: 32px;
    height: 32px;
    object-fit: contain;
    flex-shrink: 0;
}

#shutdown-confirm-btns {
    display: flex;
    justify-content: center;
    gap: 10px;
    padding: 6px 18px 14px;
}

#shutdown-confirm-btns button {
    background: #c0c0c0;
    border-top: 2px solid #ffffff;
    border-left: 2px solid #ffffff;
    border-right: 2px solid #808080;
    border-bottom: 2px solid #808080;
    font-family: 'Windows Regular', 'Arial', sans-serif;
    font-size: 12px;
    padding: 4px 20px;
    min-width: 70px;
    cursor: pointer;
    color: #000;
}

#shutdown-confirm-btns button:active {
    border-top: 2px solid #808080;
    border-left: 2px solid #808080;
    border-right: 2px solid #ffffff;
    border-bottom: 2px solid #ffffff;
}

#wakeup-btn {
    display: none;
    position: relative;
    width: 150px;
    height: 150px;
    object-fit: contain;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.2s;
    animation: wakeup-fadein 0.8s ease forwards;
}

#shutdown-overlay.show-wakeup #wakeup-btn {
    display: block;
}

#wakeup-btn:hover {
    opacity: 1;
}

@keyframes wakeup-fadein {
    from { opacity: 0; transform: scale(0.95); }
    to   { opacity: 1; transform: scale(1); }
}

/* ── Écran de boot ── */

#boot-screen {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 24px;
    animation: wakeup-fadein 0.4s ease forwards;
}

#boot-logo {
    width: 420px;
    height: auto;
    image-rendering: pixelated;
}

#boot-loading-label {
    font-family: 'Courier New', monospace;
    font-size: 14px;
    letter-spacing: 6px;
    color: #c0c0c0;
    margin-bottom: -16px;
}

#boot-bar {
    width: 320px;
    height: 20px;
    border: 3px solid #c0c0c0;
    box-shadow: 3px 3px 0 #000;
    background: #000;
    image-rendering: pixelated;
}

#boot-bar-fill {
    height: 100%;
    width: 0%;
    background: repeating-linear-gradient(
        to right,
        #c0c0c0 0px, #c0c0c0 12px,
        #808080 12px, #808080 16px
    );
    image-rendering: pixelated;
}

@keyframes boot-bar-anim {
    from { width: 0%; }
    to   { width: 100%; }
}

@keyframes crt-on {
    0%   { transform: scaleY(0)      scaleX(0);    filter: brightness(15);  opacity: 1; }
    10%  { transform: scaleY(0.004)  scaleX(0.05); filter: brightness(10);  opacity: 1; }
    65%  { transform: scaleY(0.004)  scaleX(1);    filter: brightness(6);   opacity: 1; }
    78%  { transform: scaleY(1)      scaleX(1);    filter: brightness(2);   opacity: 1; }
    85%  { transform: scaleY(1)      scaleX(1);    filter: brightness(1);   opacity: 0.3; }
    100% { transform: scaleY(1)      scaleX(1);    filter: brightness(1);   opacity: 0; }
}

/* ── Paint App ── */

#paint-app {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #c0c0c0;
    font-family: 'Windows Regular', 'Arial', sans-serif;
    font-size: 11px;
    color: #000;
    user-select: none;
}

/* Barre de menu Paint */
#paint-menubar {
    display: flex;
    align-items: center;
    gap: 2px;
    background: #c0c0c0;
    border-bottom: 1px solid #808080;
    padding: 2px 4px;
    flex-shrink: 0;
}

/* Barre d'outils Paint */
#paint-toolbar {
    display: flex;
    align-items: center;
    gap: 4px;
    background: #c0c0c0;
    border-bottom: 2px solid #808080;
    padding: 3px 6px;
    flex-shrink: 0;
    flex-wrap: wrap;
}

.paint-tool-group {
    display: flex;
    align-items: center;
    gap: 2px;
    border-right: 1px solid #808080;
    padding-right: 6px;
    margin-right: 2px;
}

.paint-tool-group:last-child {
    border-right: none;
}

.paint-tool-btn {
    background: #c0c0c0;
    border-top: 2px solid #ffffff;
    border-left: 2px solid #ffffff;
    border-right: 2px solid #808080;
    border-bottom: 2px solid #808080;
    width: 28px;
    height: 26px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    padding: 0;
    flex-shrink: 0;
}

.paint-tool-btn img {
    pointer-events: none;
    display: block;
}

.paint-tool-btn:active,
.paint-tool-btn.active {
    border-top: 2px solid #808080;
    border-left: 2px solid #808080;
    border-right: 2px solid #ffffff;
    border-bottom: 2px solid #ffffff;
    background: #c0c0c0;
}

/* Taille pinceau */
.paint-size-group {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
}

.paint-size-group input[type=range] {
    width: 60px;
    accent-color: #F34DB8;
    height: 14px;
}

/* Aperçu pinceau */
#paint-brush-preview {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #000;
    border: 1px solid #808080;
    transition: width 0.1s, height 0.1s;
    flex-shrink: 0;
    align-self: center;
}

/* Sélecteur couleur actuelle */
.paint-color-pick-group {
    display: flex;
    align-items: center;
    gap: 4px;
}

#paint-current-color {
    width: 20px;
    height: 20px;
    border-top: 2px solid #808080;
    border-left: 2px solid #808080;
    border-right: 2px solid #ffffff;
    border-bottom: 2px solid #ffffff;
    background: #000;
    flex-shrink: 0;
}

#paint-color-input {
    width: 26px;
    height: 22px;
    border: none;
    padding: 0;
    cursor: pointer;
    background: none;
}

/* Zone de dessin */
#paint-canvas-area {
    flex: 1;
    background: #808080;
    overflow: auto;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 4px;
    position: relative;
}

#paint-canvas {
    display: block;
    cursor: crosshair;
    background: #ffffff;
    border-top: 2px solid #808080;
    border-left: 2px solid #808080;
    border-right: 2px solid #ffffff;
    border-bottom: 2px solid #ffffff;
}

/* Palette de couleurs (bas) */
#paint-palette {
    display: flex;
    align-items: center;
    gap: 1px;
    background: #c0c0c0;
    border-top: 2px solid #ffffff;
    padding: 3px 6px;
    flex-shrink: 0;
    flex-wrap: wrap;
}

.paint-color-swatch {
    width: 16px;
    height: 16px;
    cursor: pointer;
    border-top: 2px solid #808080;
    border-left: 2px solid #808080;
    border-right: 2px solid #ffffff;
    border-bottom: 2px solid #ffffff;
    flex-shrink: 0;
}

.paint-color-swatch:hover {
    outline: 1px solid #000080;
}

.paint-color-swatch.active {
    border-top: 2px solid #ffffff;
    border-left: 2px solid #ffffff;
    border-right: 2px solid #808080;
    border-bottom: 2px solid #808080;
}

/* ── Dialog de sauvegarde Paint ── */

#paint-save-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 500;
}

#paint-save-overlay.open {
    display: flex;
}

#paint-save-dialog {
    background: #c0c0c0;
    border-top: 2px solid #ffffff;
    border-left: 2px solid #ffffff;
    border-right: 2px solid #808080;
    border-bottom: 2px solid #808080;
    box-shadow: 2px 2px 0 #000;
    width: 280px;
    font-family: 'Windows Regular', 'Arial', sans-serif;
    font-size: 12px;
}

#paint-save-titlebar {
    background: #000080;
    color: #ffffff;
    font-size: 12px;
    font-weight: bold;
    padding: 3px 6px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    user-select: none;
}

#paint-save-close {
    background: #c0c0c0;
    border-top: 1px solid #ffffff;
    border-left: 1px solid #ffffff;
    border-right: 1px solid #808080;
    border-bottom: 1px solid #808080;
    font-size: 10px;
    width: 16px;
    height: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #000;
    padding: 0;
    line-height: 1;
}

#paint-save-body {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    color: #000;
}

#paint-save-body p {
    margin: 0 0 4px;
}

#paint-save-btns {
    display: flex;
    gap: 8px;
    justify-content: center;
    flex-wrap: wrap;
}

#paint-save-btns button,
#paint-save-cancel {
    background: #c0c0c0;
    border-top: 2px solid #ffffff;
    border-left: 2px solid #ffffff;
    border-right: 2px solid #808080;
    border-bottom: 2px solid #808080;
    font-family: 'Windows Regular', 'Arial', sans-serif;
    font-size: 12px;
    padding: 4px 14px;
    min-width: 90px;
    cursor: pointer;
    color: #000;
}

#paint-save-btns button:active,
#paint-save-cancel:active {
    border-top: 2px solid #808080;
    border-left: 2px solid #808080;
    border-right: 2px solid #ffffff;
    border-bottom: 2px solid #ffffff;
}

#paint-save-btns button:disabled {
    color: #808080;
    cursor: default;
}

#paint-email-status {
    font-size: 11px;
    min-height: 14px;
    text-align: center;
}

/* ── Responsive mobile ── */
@media (max-width: 768px) {
    /* L'accueil est exclu : le bureau ne doit jamais défiler (cf. body.home
       plus haut), sinon on peut déplacer le fond d'écran au doigt. Les autres
       pages (forum, espace membres, articles) ont besoin du scroll. */
    body:not(.home) {
        overflow: auto;
    }

    /* Pas de bouton "Démarrer" sur téléphone : ses raccourcis principaux
       (Player, Vidéos, Shop, Forum, Newsletter…) restent accessibles via
       les icônes du bureau. */
    #taskbar-start {
        display: none;
    }

    /* Rangée d'icônes collée en bas de l'écran, au-dessus de la barre des
       tâches, pour ne pas recouvrir le visage du fond d'écran. */
    .desktop {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 40px; /* hauteur de #taskbar */
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 16px;
        padding: 16px;
        width: 100%;
        height: auto;
        /* Toutes les icônes doivent tenir sans avoir à scroller, quitte à
           empiéter sur le visage du fond d'écran sur les petits téléphones :
           pas de max-height/overflow ici, le bloc grandit vers le haut
           (ancré par "bottom") pour accueillir toutes les icônes. */
    }

    .desktop-icon {
        position: static;
        width: 72px;
    }

    /* Logo : sorti de la rangée d'icônes, fixé en haut à gauche et rendu
       inerte (pointer-events: none). "!important" sur position/top/left :
       nécessaire pour battre le style inline left/top posé par le
       glisser-déposer desktop (mémorisé en localStorage), qu'une simple
       règle externe ne pourrait pas surclasser. pointer-events:none règle
       aussi le "non déplaçable" sans dépendre d'un JS qui, lui, ne se
       réévaluerait pas si la fenêtre est redimensionnée après le
       chargement de la page. */
    #logo-icon {
        position: fixed !important;
        top: 12px !important;
        left: 12px !important;
        width: auto;
        pointer-events: none;
    }

    #logo-icon img#logo {
        width: 150px;
        height: 150px;
    }

    /* Galerie de la Corbeille (et autres dossiers-images) : sur téléphone,
       grille de 2 vignettes par ligne, chacune prenant toute la largeur de
       sa colonne plutôt que de rester à 120px. */
    .trash-gallery {
        gap: 4px;
    }

    .trash-thumb {
        width: calc(50% - 2px);
        height: auto;
        aspect-ratio: 1 / 1;
    }
}

/* ── Snake et Démineur : injouables sans clavier (déplacement) ni clic
   droit précis (poser un drapeau) — masqués sur tout appareil dont le
   pointeur principal est tactile (tablette, téléphone), quelle que soit
   sa largeur d'écran. Solitaire reste accessible : jouable au tactile. ── */
@media (hover: none) and (pointer: coarse) {
    #start-snake,
    #start-minesweeper {
        display: none;
    }
}


/*-----------ACCES LARSENIST-------*/

.swpm-wrapper {
    background: #E94F92 !important;
    padding: 40px;
    text-align: center;
    border-radius:0px !important;
    height: stretch;
    width: 100% !important;
    font-family: 'Windows Regular', Arial, sans-serif;
}

.swpm-registration-widget-form {
    width: 50%;
    justify-self: center;
}

/* ── Formulaires SWPM (connexion / inscription / mot de passe oublié) ──
   Look "Windows 95" cohérent avec le reste du thème (boutons/champs en relief). */
.swpm-login-widget-form,
.swpm-registration-widget-form,
.swpm-pw-reset-widget-form,
.swpm-pw-reset-using-link-widget-form {
    color: #fff;
    text-align: left;
    max-width: 320px;
    margin: 0 auto;
}

.swpm-login-widget-form label,
.swpm-registration-widget-form label,
.swpm-pw-reset-widget-form label,
.swpm-pw-reset-using-link-widget-form label {
    display: block;
    margin: 12px 0 4px;
    font-family: 'Windows Regular', Arial, sans-serif;
    font-size: 13px;
}

.swpm-login-widget-form input[type="text"],
.swpm-login-widget-form input[type="password"],
.swpm-registration-widget-form input[type="text"],
.swpm-registration-widget-form input[type="password"],
.swpm-registration-widget-form input[type="email"],
.swpm-pw-reset-widget-form input[type="text"],
.swpm-pw-reset-using-link-widget-form input[type="text"],
.swpm-pw-reset-using-link-widget-form input[type="password"] {
    width: 100%;
    box-sizing: border-box;
    padding: 5px 6px;
    font-family: 'Windows Regular', Arial, sans-serif;
    font-size: 13px;
    color: #000;
    background: #fff;
    border-top: 2px solid #808080;
    border-left: 2px solid #808080;
    border-right: 2px solid #ffffff;
    border-bottom: 2px solid #ffffff;
}

.swpm-login-widget-form input[type="submit"],
.swpm-registration-widget-form input[type="submit"],
.swpm-pw-reset-widget-form input[type="submit"],
.swpm-pw-reset-using-link-widget-form input[type="submit"] {
    background: #c0c0c0;
    border-top: 2px solid #ffffff;
    border-left: 2px solid #ffffff;
    border-right: 2px solid #808080;
    border-bottom: 2px solid #808080;
    font-family: 'Windows Regular', Arial, sans-serif;
    font-size: 13px;
    padding: 6px 22px;
    min-width: 120px;
    cursor: pointer;
    color: #000;
    margin-top: 10px;
}

.swpm-login-widget-form input[type="submit"]:active,
.swpm-registration-widget-form input[type="submit"]:active,
.swpm-pw-reset-widget-form input[type="submit"]:active,
.swpm-pw-reset-using-link-widget-form input[type="submit"]:active {
    border-top: 2px solid #808080;
    border-left: 2px solid #808080;
    border-right: 2px solid #ffffff;
    border-bottom: 2px solid #ffffff;
}

.swpm-login-form-pw-reset-link,
.swpm-login-form-register-link {
    color: #fff;
    font-family: 'Windows Regular', Arial, sans-serif;
    font-size: 13px;
}

.swpm-pw-reset-submit-button {
    text-align: center;
}

.swpm_pass_reset_processing_msg_section,
.swpm-pw-reset-back-link,
.swpm-login-action-msg {
    color: #fff;
    font-family: 'Windows Regular', Arial, sans-serif;
    font-size: 13px;
    text-align: center;
    margin-top: 10px;
}


.swpm-password-input-visibility {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: baseline;
    gap: 10px;
}

.swpm-login-form-inner {
    text-align: center;
}

.swpm-remember-me {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: baseline;
    gap: 10px;
}

/* ── Page 404 : écran bleu façon Windows 95 (404.php) ──
   Fond plein écran (le body garde overflow:hidden hérité de la règle
   globale plus haut, ce qui évite tout scroll parasite sur ce faux crash).
   Même police que l'afficheur du lecteur mp3 (.w95-display) pour rester
   cohérent avec le reste du thème. */
.bsod-screen {
    position: fixed;
    inset: 0;
    background: #0000AA;
    color: #ffffff;
    font-family: 'Courier New', monospace;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 28px;
    padding: 24px;
    cursor: pointer;
    outline: none;
}

.bsod-box {
    max-width: 720px;
    width: 100%;
    line-height: 1.6;
    font-size: 16px;
    white-space: pre-wrap;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-content: space-between;
    align-items: center;
    text-align: center;
}

.bsod-title {
    display: block;
    background: #ffffff;
    color: #0000AA;
    font-weight: bold;
    padding: 0 10px;
    margin-bottom: 22px;
}

.bsod-cursor {
    display: inline-block;
    width: 9px;
    height: 15px;
    margin-left: 2px;
    background: #ffffff;
    vertical-align: text-bottom;
    animation: bsod-blink 1s steps(1) infinite;
}

@keyframes bsod-blink {
    50% { opacity: 0; }
}

.bsod-hint {
    font-family: 'Windows Regular', 'Arial', sans-serif;
    font-size: 12px;
    color: #c0c0c0;
    text-align: center;
}

@media (max-width: 768px) {
    .bsod-box {
        font-size: 13px;
    }
}


.swpm-registration-success-msg {
    font-family: 'Windows Regular', Arial, sans-serif;
    font-size: 16px;
}

/* Cases à cocher / boutons radio : conserver les 13px du style Windows 95
   (cf. bloc appearance:none plus haut) partout, y compris dans les
   formulaires wpForo qui étirent les champs. Le !important suffit : wpForo
   ne définit aucun min-width sur ces champs. */
input[type="checkbox"],
input[type="radio"] {
    display: inline-block;
    min-width: 13px !important;
}


/* Toutes les pages du forum, pour tous les visiteurs. wpForo ajoute la classe
   "wpforo" au <body> dès que is_wpforo_page() est vrai ; les autres classes
   qu'il ajoute varient selon le contexte et ne doivent pas servir de cible :
   wpf-guest devient wpf-auth une fois connecté, wpft-forum devient wpft-topic
   sur un sujet, et wpfu-group-4 change avec le groupe de l'utilisateur. */
body.wpforo {
    padding: 5px;
}

#wpforo #wpforo-wrap .wpf-breadcrumb div.active {
    color: #ff25d0 !important;
}

#wpforo #wpforo-wrap #wpforo-poweredby {
    display: none;
}

.my-stripe-button {
    box-sizing: border-box;
    width: 300px;
    height: 32px;
    padding: 0 10px;
    text-align: center;  
    font-weight: 600;       
    border: none;
    border-radius: 6px;
    background-color: #2c2e2f;
    color: white;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-flex;
    align-items: center;       /* centre logo et texte en hauteur */
    justify-content: center; 
    cursor: pointer;
}

/* Le logo devient un élément placé juste avant le texte */
.my-stripe-button::before {
    content: "";
    display: inline-block;
    width: 52px;                 /* 22px × (360/151), proportions de l'image */
    height: 22px;
    margin-right: 10px;          /* espace entre le logo et le texte */
    vertical-align: middle;
    background: url('images/icons_fix/Stripe wordmark - White.webp') no-repeat center / contain;
}
/* ── Texte réservé à Google et aux lecteurs d'écran (le <h1> de l'accueil) ──
   Technique standard de WordPress : l'élément reste dans la page mais occupe
   un pixel rogné, invisible à l'écran. Ne pas utiliser display:none, que les
   lecteurs d'écran ignorent. */
.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute !important;
    width: 1px;
    word-wrap: normal !important;
}

#wpforo #wpforo-wrap .wpforo-right-sidebar {
    width: 0%;
    float: right;
    padding: 0 0 0 0;
    box-sizing: border-box;
    display: none;
}

#wpforo #wpforo-wrap .wpforo-content {
    width: 100% !important;
    float: left;
    padding: 0;
    box-sizing: border-box;
}