/*
Theme Name: Wizme Queen
Theme URI: https://wizme.ch
Description: Le retour du Wizz. Site de rencontre nostalgie MSN Messenger pour trentenaires. Gratuit pour les femmes, crédits pour les hommes.
Author: Wizme
Version: 0.1.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: wizme
*/

:root {
  --msn-blue-lt:   #4596e8;
  --msn-blue:      #1c5fa8;
  --msn-blue-2:    #5aa0e0;
  --msn-blue-dk:   #0e3f78;
  --msn-blue-pale: #dfeaf6;
  --msn-green:     #5fb000;
  --msn-green-dk:  #3f8a00;
  --msn-amber:     #f0a800;
  --msn-red:       #d33;
  --ink:           #15324f;
  --line:          #9fc0e6;
  --silver:        #eef3f9;
  --silver-2:      #cfe0f2;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: Tahoma, "Segoe UI", Verdana, sans-serif;
  font-size: 13px;
  color: var(--ink);
  background: #bcd6ef url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Ccircle cx='20' cy='20' r='1' fill='%23a9c6e4'/%3E%3C/svg%3E");
}

a { color: var(--msn-blue); }

/* ---- Barre titre du "client MSN" (glossy XP/Luna) ---- */
.wm-bar {
  background: linear-gradient(180deg, #8cc0f2 0%, #4a8fd4 46%, #2f76c0 54%, #1c5fa8 100%);
  color: #fff;
  padding: 6px 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  border-bottom: 2px solid var(--msn-blue-dk);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 2px 5px rgba(0,0,0,.3);
}
.wm-logo {
  font-weight: bold;
  font-size: 19px;
  letter-spacing: -.5px;
  color: #fff;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 6px;
  text-shadow: 0 1px 1px rgba(0,0,0,.35);
}
.wm-logo .wm-buddy { font-size: 20px; }
.wm-bar nav { margin-left: auto; display: flex; gap: 3px; align-items: center; }
.wm-bar nav a { color: #fff; text-decoration: none; font-size: 12px; padding: 5px 10px; border-radius: 3px; }
.wm-bar nav a:hover { background: rgba(255,255,255,.2); }
.wm-nav-wizz { font-weight: bold; }
.wm-badge-count {
  display: inline-block; background: #ffd23f; color: #6a4b00;
  border-radius: 9px; padding: 0 6px; font-size: 11px; font-weight: bold; margin-left: 3px;
}
.wm-badge-count[hidden] { display: none; }

/* ---- Status pill ---- */
.wm-status { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; }
.wm-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.wm-dot.online  { background: var(--msn-green); box-shadow: 0 0 0 2px rgba(122,184,0,.3); }
.wm-dot.away    { background: var(--msn-amber); }
.wm-dot.busy    { background: var(--msn-red); }
.wm-dot.offline { background: #999; }
.wm-dot.invisible { background: #fff; border: 2px dashed #999; box-sizing: border-box; }

/* ---- Layout ---- */
.wm-wrap { max-width: 960px; margin: 24px auto; padding: 0 16px; }
.wm-panel {
  background: #fff;
  border: 1px solid var(--msn-blue);
  border-radius: 4px;
  box-shadow: inset 0 0 0 1px #fff, 0 4px 14px rgba(14,63,120,.18);
  padding: 18px;
}

/* ---- Boutons biseautés (Luna / MSN) ---- */
.wm-btn {
  display: inline-block;
  background: linear-gradient(180deg, #fdfefe 0%, #eaf1f9 48%, #dbe8f6 52%, #cfe0f2 100%);
  border: 1px solid #7aa6d6;
  border-radius: 4px;
  padding: 6px 14px;
  color: var(--msn-blue);
  font: bold 12px Tahoma, "Segoe UI", sans-serif;
  cursor: pointer;
  text-decoration: none;
  box-shadow: inset 0 1px 0 #fff;
}
.wm-btn:hover { background: linear-gradient(180deg, #fff, #d3e6fb); border-color: var(--msn-blue); }
.wm-btn:active { box-shadow: inset 0 2px 3px rgba(0,0,0,.18); }
.wm-btn-primary {
  background: linear-gradient(180deg, var(--msn-blue-2) 0%, var(--msn-blue) 52%, var(--msn-blue-dk) 100%);
  color: #fff; border-color: var(--msn-blue-dk); text-shadow: 0 1px 1px rgba(0,0,0,.3);
}
.wm-btn-primary:hover { filter: brightness(1.08); }
.wm-btn-talk {
  background: linear-gradient(180deg, #a6e364 0%, #6fbe1f 50%, #5fb000 52%, #4f9600 100%);
  color: #fff; border-color: var(--msn-green-dk); text-shadow: 0 1px 1px rgba(0,0,0,.3);
}
.wm-btn-talk:hover { filter: brightness(1.08); }
.wm-locked {
  display: inline-block; font-style: italic; color: #6b8099; font-size: 12px;
  background: #eef2f6; border: 1px dashed #b8c8da; border-radius: 4px; padding: 5px 10px;
}

/* ---- Hero / landing ---- */
.wm-hero { text-align: center; padding: 40px 20px; }
.wm-hero h1 { font-size: 34px; margin: 0 0 8px; color: var(--msn-blue); }
.wm-hero p.lead { font-size: 17px; color: #45607c; margin: 0 0 22px; }
.wm-free { color: var(--msn-green); font-weight: bold; }

/* ---- The Wizz shake ---- */
@keyframes wm-shake {
  0%,100% { transform: translate(0,0); }
  20% { transform: translate(-6px, 4px) rotate(-1deg); }
  40% { transform: translate(6px, -4px) rotate(1deg); }
  60% { transform: translate(-5px, 3px); }
  80% { transform: translate(5px, -3px); }
}
/* Double classe : doit gagner face à .msn7-page (même spécificité, déclarée plus bas dans ce
   fichier pour son propre "animation: msn7-appear" au premier affichage — sans ce renfort de
   spécificité, la règle la plus basse du fichier l'emporte et le tremblement ne se voit jamais,
   même si la classe est bien posée/retirée en JS. */
.msn7.wm-wizzed, .wm-wizzed { animation: wm-shake .5s ease-in-out 2; }

footer.wm-foot { text-align: center; color: #6b8099; font-size: 12px; padding: 30px 16px; }

/* ============ ACCUEIL — bureau Windows XP + MSN Messenger 7 (pixel-perfect) ============ */
:root {
  --xp-face:   #ece9d8;
  --xp-shadow: #aca899;
  --xp-sunk:   #7f9db9;
}

/* --- Le bureau : papier peint « Bliss » (ciel + collines) recréé en SVG/CSS ---
   Actif sur l'accueil ET sur tout écran BuddyPress connecté (.wm-desktop-mode) : même immersion
   partout. ponytail: ce n'est PAS la photo de Charles O'Rear (droits Microsoft) — impossible/pas
   souhaitable de l'embarquer telle quelle sur un site commercial — mais une recréation en deux
   collines superposées (crête éclairée + colline plus sombre en arrière-plan) qui vise la même
   composition (ciel dégradé, crête qui ondule, nuages) plutôt que l'aplat radial d'avant. */
body.home, body.wm-desktop-mode {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Cpath d='M2 1 L2 16 L6 12.5 L8.5 18 L11 17 L8.5 11.5 L14 11.5 Z' fill='white' stroke='black' stroke-width='1.2' stroke-linejoin='round'/%3E%3C/svg%3E") 2 1, default;
  /* Aplat qui prolonge la colline en dessous du premier écran : sans lui, le dégradé se dilue sur
     toute la hauteur de la page (vide flagrant au scroll) au lieu de rester un vrai "bureau" fixe. */
  background-color: #4a8a1e;
  background-image:
    /* nuages, quelques taches douces plutôt qu'un ciel plat */
    radial-gradient(9% 5% at 16% 20%, rgba(255,255,255,.9), rgba(255,255,255,0) 72%),
    radial-gradient(13% 6% at 32% 13%, rgba(255,255,255,.75), rgba(255,255,255,0) 72%),
    radial-gradient(10% 5% at 78% 10%, rgba(255,255,255,.8), rgba(255,255,255,0) 72%),
    radial-gradient(7% 4% at 62% 24%, rgba(255,255,255,.55), rgba(255,255,255,0) 72%),
    /* brume d'horizon */
    linear-gradient(180deg, rgba(255,255,255,0) 58%, rgba(245,250,240,.55) 67%, rgba(255,255,255,0) 75%),
    /* collines : crête éclairée (SVG, ondulée) devant une colline plus sombre et plus lointaine */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 500' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='hf' x1='0' y1='0' x2='.15' y2='1'%3E%3Cstop offset='0' stop-color='%2374ad3f'/%3E%3Cstop offset='1' stop-color='%234f8a26'/%3E%3C/linearGradient%3E%3ClinearGradient id='hn' x1='0' y1='0' x2='.3' y2='1'%3E%3Cstop offset='0' stop-color='%23d9f39e'/%3E%3Cstop offset='.35' stop-color='%2391c94c'/%3E%3Cstop offset='1' stop-color='%234a8a1e'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0,220 C200,140 420,100 650,150 C900,205 1150,120 1600,170 L1600,500 L0,500 Z' fill='url(%23hf)'/%3E%3Cpath d='M0,320 C260,180 520,150 780,230 C1040,300 1300,190 1600,250 L1600,500 L0,500 Z' fill='url(%23hn)'/%3E%3Cpath d='M0,320 C260,180 520,150 780,230 C1040,300 1300,190 1600,250' fill='none' stroke='%23f0ffd0' stroke-width='5' opacity='.5'/%3E%3C/svg%3E"),
    /* ciel */
    linear-gradient(180deg, #124686 0%, #1c59ac 16%, #3f86d6 32%, #79b4e6 52%, #b4daf0 66%, #dcecdf 74%, #c8e296 100%);
  background-repeat: no-repeat;
  background-position: top center, top center, top center, top center, top center, bottom center, top center;
  background-size: 100% 100vh, 100% 100vh, 100% 100vh, 100% 100vh, 100% 100vh, 100% 48vh, 100% 100vh;
  background-attachment: fixed;
}
/* Barre de défilement assortie au chrome XP (Firefox + WebKit/Chromium) — sinon la barre du
   navigateur (grise/bleue selon l'OS du visiteur) est le seul élément qui trahit "vrai navigateur". */
body.home, body.wm-desktop-mode { scrollbar-color: var(--msn-blue-2) var(--xp-face); scrollbar-width: auto; }
body.home::-webkit-scrollbar, body.wm-desktop-mode::-webkit-scrollbar { width: 17px; }
body.home::-webkit-scrollbar-track, body.wm-desktop-mode::-webkit-scrollbar-track { background: var(--xp-face); border-left: 1px solid var(--xp-shadow); }
body.home::-webkit-scrollbar-thumb, body.wm-desktop-mode::-webkit-scrollbar-thumb {
  background: linear-gradient(90deg, var(--msn-blue-2), var(--msn-blue));
  border: 1px solid var(--msn-blue-dk); box-shadow: inset 1px 1px 0 rgba(255,255,255,.4);
}
body.home::-webkit-scrollbar-button, body.wm-desktop-mode::-webkit-scrollbar-button {
  height: 16px; background: linear-gradient(180deg, var(--msn-blue-2), var(--msn-blue)); border: 1px solid var(--msn-blue-dk);
}
/* Curseur « main » assorti au style de la flèche (contour noir, remplissage blanc), sur les
   éléments cliquables — le curseur navigateur par défaut détonnait avec la flèche personnalisée. */
body.home a, body.home button,
body.wm-desktop-mode a, body.wm-desktop-mode button {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Cpath d='M7 2c-.6 0-1 .4-1 1v5.3l-1.2-1.1c-.5-.5-1.3-.4-1.7.1-.4.5-.3 1.2.1 1.6l3.6 3.6c.6.6 1.4.9 2.3.9h2c1.4 0 2.6-1 2.9-2.4l.8-3.8c.2-.9-.5-1.7-1.4-1.7-.3 0-.6.1-.8.3V6c0-.6-.4-1-1-1s-1 .1-1 .7V4c0-.6-.4-1-1-1s-1 .4-1 1v1.3C8 4.7 7.6 4 7 4V3c0-.6-.4-1-1-1z' fill='white' stroke='black' stroke-width='.9' stroke-linejoin='round'/%3E%3C/svg%3E") 6 2, pointer;
}
/* Curseur « sablier » sur les zones en cours de chargement (cf. .wm-loading, desktop-app.js). */
.wm-loading, [aria-busy="true"] {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Cpath d='M5 2h10v3l-4 4 4 4v3H5v-3l4-4-4-4z' fill='white' stroke='black' stroke-width='1.1' stroke-linejoin='round'/%3E%3C/svg%3E") 10 10, wait;
}
/* Variantes (inc/personalize.php WIZME_WALLPAPERS) — posées via data-wallpaper sur <body> côté
   client (assets/msn-home.js: wizme.applyTheme). "bliss" est le dégradé ci-dessus, par défaut. */
body.wm-desktop-mode[data-wallpaper="msn"] {
  background:
    radial-gradient(60% 45% at 30% 30%, rgba(255,255,255,.18) 0%, rgba(255,255,255,0) 60%),
    linear-gradient(135deg, #1c5fa8 0%, #2f76c0 35%, #5aa0e0 70%, #8cc0f2 100%);
}
body.wm-desktop-mode[data-wallpaper="nuit"] {
  background:
    radial-gradient(1px 1px at 20% 30%, #fff 100%, transparent), radial-gradient(1px 1px at 60% 70%, #fff 100%, transparent),
    radial-gradient(1px 1px at 80% 20%, #fff 100%, transparent), radial-gradient(1px 1px at 40% 85%, #fff 100%, transparent),
    radial-gradient(1px 1px at 90% 55%, #fff 100%, transparent), radial-gradient(1px 1px at 10% 65%, #fff 100%, transparent),
    linear-gradient(180deg, #050a1e 0%, #0e1c40 45%, #182f60 75%, #223f7a 100%);
  background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%;
}
body.wm-desktop-mode[data-wallpaper="or"] {
  background:
    radial-gradient(120% 60% at 50% 100%, rgba(255,255,255,.25) 0%, rgba(255,255,255,0) 60%),
    linear-gradient(160deg, #7a5200 0%, #b9861a 30%, #e8b93f 55%, #f4d374 78%, #fce8ab 100%);
}
/* Variantes de thème (inc/personalize.php WIZME_SKINS) — remplacent la palette bleue "Luna"
   partout où les CSS vars sont utilisées (barre, boutons, taskbar…), "bleu" = défaut ci-dessus. */
body.wm-desktop-mode[data-skin="olive"] {
  --msn-blue-lt: #8fbf52; --msn-blue: #4a6b1c; --msn-blue-2: #7fa244; --msn-blue-dk: #33480f; --msn-blue-pale: #e9f0dc;
}
body.wm-desktop-mode[data-skin="argent"] {
  --msn-blue-lt: #a7aeb8; --msn-blue: #5a6472; --msn-blue-2: #8f97a3; --msn-blue-dk: #3a4149; --msn-blue-pale: #eceef1;
  --xp-face: #e4e4e4; --xp-shadow: #a0a0a0;
}
body.home, body.wm-desktop-mode { padding-bottom: 34px; } /* place pour la barre des tâches fixe */
body.home .wm-wrap, body.wm-desktop-mode .wm-wrap { max-width: none; margin: 0; padding: 0; }
/* Immersion : sur le bureau, on masque la barre web — la taskbar parle. Le bandeau « moi »
   reste affiché quand il vit DANS une fenêtre (Contacts), seul l'ancien bandeau hors fenêtre,
   en tête de page, est masqué ici. */
body.home > .wm-bar,
body.wm-desktop-mode > .wm-bar { display: none; }
body.home > .wm-me,
body.wm-desktop-mode > .wm-me { display: none; }

/* --- Fenêtre BuddyPress générique (profil, contacts, messages…) : même chrome que l'accueil, en plus large --- */
.wm-desktop-inline { justify-content: flex-start; padding-top: 34px; min-height: auto; }
/* .msn7.msn7-page (pas juste .msn7-page) : la règle de base .msn7 plus bas dans ce fichier fixe
   aussi width/height (320px, fenêtre de connexion) avec la même spécificité (une classe) — sans
   le doublon de classe ici, l'ordre de déclaration la ferait gagner et toutes les fenêtres du
   bureau s'ouvriraient à 320px (plancher min-width 380px) au lieu de la taille voulue ci-dessous
   (bug constaté : c'était le cas jusqu'ici, .msn7-page seul ne l'emportait jamais). */
.msn7.msn7-page {
  width: 780px; max-width: 94vw; height: 580px; max-height: 84vh; min-width: 380px; min-height: 320px;
  display: flex; flex-direction: column; position: relative;
}
/* Discussion : plus de contenu à montrer (liste + fil + panneau photo) qu'une fenêtre générique —
   taille par défaut plus grande, déjà correcte à l'ouverture quel que soit l'écran (vw/vh). Ne
   change rien au redimensionnement manuel ni à la taille mémorisée (assets/msn-home.js). */
.msn7.msn7-page-thread { width: min(94vw, 900px); height: min(84vh, 640px); }
.msn7.msn7-page-solitaire { width: min(94vw, 600px); height: min(84vh, 560px); }
.msn7-body-wide { text-align: left; padding: 16px 20px 18px; flex: 1 1 auto; overflow-y: auto; min-height: 0; }
.msn7-body-wide .wm-status, .msn7-body-wide h1, .msn7-body-wide h2 { color: var(--msn-blue-dk); }

/* Mobile : une vraie appli plein écran, pas un bureau miniature. Une seule fenêtre visible à
   la fois (pile façon navigation d'appli), jamais de bureau/icônes derrière à toucher par
   erreur — sans ça, les fenêtres s'empilaient en cascade vers la droite (pensée pour un grand
   écran) et sortaient de l'écran sur un mobile étroit. */
@media (max-width: 760px) {
  #wm-desktop-root .msn7.msn7-page {
    position: fixed !important; left: 0 !important; right: 0 !important; bottom: auto !important;
    /* --wm-vvh/--wm-vvt (assets/desktop-app.js) = hauteur ET décalage RÉELS du viewport visible
       (window.visualViewport), pas le viewport de layout — sur mobile, celui-ci ne rétrécit pas
       quand le clavier tactile s'ouvre, donc un simple "top:0/bottom:calc(...)" laisse le clavier
       recouvrir le bas de la fenêtre (le champ de saisie) au lieu de la faire rétrécir. iOS
       Safari en particulier DÉCALE aussi la zone visible vers le bas (offsetTop) pour garder le
       champ actif au-dessus du clavier — sans suivre --wm-vvt, la fenêtre resterait calée en
       haut du layout pendant que la zone visible glisse en dessous. Replis (0px/100vh) si
       l'API/JS est indisponible : comportement d'avant, pas de régression. Laisse la taskbar
       (30px + marge) visible et cliquable en dessous, plus la zone de sécurité iPhone à encoche. */
    top: var(--wm-vvt, 0px) !important;
    height: calc(var(--wm-vvh, 100vh) - 34px - env(safe-area-inset-bottom, 0px)) !important;
    width: 100% !important; max-width: none; max-height: none; min-width: 0;
    margin: 0; border-radius: 0; z-index: 900 !important;
  }
  #wm-desktop-root .msn7.msn7-page .msn7-resize { display: none; }
  /* Agrandir/Réduire n'ont plus de sens plein écran : Fermer redevient le seul geste, il sert de "retour".
     Cible tactile agrandie (21×18 → 34×30 ; la croix ⨯, dessinée en ::before/::after, est
     recentrée en conséquence) — c'est le SEUL moyen de sortir d'une fenêtre plein écran au doigt. */
  #wm-desktop-root .msn7.msn7-page .msn7-ctrls i.min,
  #wm-desktop-root .msn7.msn7-page .msn7-ctrls i.max { display: none; }
  #wm-desktop-root .msn7.msn7-page .msn7-ctrls i.cls { width: 34px; height: 30px; }
  #wm-desktop-root .msn7.msn7-page .msn7-ctrls i.cls::before,
  #wm-desktop-root .msn7.msn7-page .msn7-ctrls i.cls::after { top: 14px; left: 8px; width: 18px; }
  .wm-mobile-hidden { display: none !important; }
  /* .xp-taskbar est déjà position:fixed avec z-index:1000 (au-dessus des fenêtres plein écran) */
  .xp-tasks { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; }
}

/* Poignée de redimensionnement (coin bas-droit, façon fenêtre XP) */
.msn7-resize {
  position: absolute; right: 0; bottom: 0; width: 16px; height: 16px; cursor: nwse-resize;
  background:
    linear-gradient(135deg, transparent 0 40%, var(--xp-shadow) 40% 46%, transparent 46% 60%, var(--xp-shadow) 60% 66%, transparent 66% 80%, var(--xp-shadow) 80% 86%, transparent 86%);
}

.wm-desktop {
  /* Un plein écran de "bureau" avant que le contenu ne commence — pas un entre-deux qui grandit
     avec la hauteur de l'écran du visiteur et laisse un vide de ciel/colline sans rien dessus. */
  min-height: calc(100vh - 34px);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; padding: 30px 16px 56px;
}

/* --- La fenêtre MSN Messenger --- */
.msn7 {
  width: 320px; max-width: 100%;
  background: var(--xp-face);
  border: 1px solid #003c9d;
  border-radius: 8px 8px 2px 2px;
  box-shadow: 0 14px 40px rgba(8,32,96,.5), inset 0 0 0 1px #fbfbf7;
  overflow: hidden;
  font-family: Tahoma, "Segoe UI", sans-serif;
  /* position + z-index explicites : sans ça cette fenêtre (accueil, pas encore .msn7-page — celle-là
     gère déjà son propre z-index ≥100 en JS, cf. assets/desktop-app.js) reste au niveau d'empilement
     par défaut (0), sous .xp-icons (position:fixed, z-index:5) qui couvre le même écran — les icônes
     du bureau passaient alors PAR-DESSUS la fenêtre au lieu de rester derrière (bug réel constaté). */
  position: relative; z-index: 10;
}
.msn-bug { width: 16px; height: 16px; vertical-align: middle; flex: 0 0 auto; }

/* Barre de titre Luna bleue */
.msn7-title {
  display: flex; align-items: center; justify-content: space-between;
  background: linear-gradient(180deg, var(--msn-blue-lt) 0%, var(--msn-blue-2) 20%, var(--msn-blue) 55%, var(--msn-blue-2) 100%);
  color: #fff; font-weight: bold; font-size: 13px; padding: 3px 4px 3px 7px;
  text-shadow: 0 1px 1px rgba(0,0,0,.5);
  border-bottom: 1px solid #003c9d;
}
.msn7-title-l { display: inline-flex; align-items: center; gap: 6px; }
.msn7-ctrls { display: inline-flex; gap: 2px; }
.msn7-ctrls i {
  font-style: normal; display: inline-flex; align-items: center; justify-content: center;
  width: 21px; height: 18px; font-size: 10px; font-weight: bold; color: var(--msn-blue-dk);
  background: linear-gradient(180deg, var(--msn-blue-pale) 0%, var(--msn-blue-2) 100%);
  border: 1px solid #fff; border-radius: 3px; box-shadow: 0 0 0 1px var(--msn-blue-dk);
}
.msn7-ctrls i.cls { color: #fff; background: linear-gradient(180deg, #f6a596 0%, #df5b48 51%, #efa193 100%); box-shadow: 0 0 0 1px #b23a2a; }
/* glyphes dessinés en CSS (Marlett non dispo) : on masque la lettre repère */
.msn7-ctrls i { font-size: 0; position: relative; }
.msn7-ctrls i.min::before { content: ""; position: absolute; bottom: 4px; left: 5px; right: 5px; height: 2px; background: currentColor; }
.msn7-ctrls i.max::before { content: ""; position: absolute; inset: 4px 5px; border: 1.5px solid currentColor; border-top-width: 2.5px; }
.msn7-ctrls i.cls::before, .msn7-ctrls i.cls::after { content: ""; position: absolute; top: 8px; left: 4px; width: 12px; height: 2px; background: currentColor; }
.msn7-ctrls i.cls::before { transform: rotate(45deg); }
.msn7-ctrls i.cls::after  { transform: rotate(-45deg); }

/* Barre de menus */
.msn7-menu { display: flex; gap: 13px; padding: 3px 9px; font-size: 11px; color: #2b2b22; background: var(--xp-face); border-bottom: 1px solid var(--xp-shadow); }
.msn7-menu u { text-decoration: underline; }

/* Sélecteur de langue (préférence mémorisée — inc/i18n.php, pas de routing par URL) */
.msn7-langs { display: flex; gap: 4px; justify-content: flex-end; padding: 3px 6px 0; }
.msn7-lang {
  font-size: 10px; font-weight: bold; color: var(--msn-blue-dk); text-decoration: none;
  padding: 1px 6px; border: 1px solid var(--xp-sunk); border-radius: 3px; background: #fff;
}
.msn7-lang.active { color: #fff; background: var(--msn-blue); border-color: var(--msn-blue-dk); }

/* Bandeau « scène » bleu avec papillon + wordmark */
.msn7-scene {
  height: 62px; display: flex; align-items: center; justify-content: space-between; padding: 0 14px;
  background:
    radial-gradient(120% 160% at 88% -40%, rgba(255,255,255,.55), rgba(255,255,255,0) 60%),
    linear-gradient(180deg, #2f86dd 0%, #1f63c0 60%, #17539f 100%);
  border-bottom: 1px solid #0a3d8f;
}
.msn7-wordmark { display: inline-flex; align-items: baseline; gap: 7px; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.35); }
.msn7-scene .msn-bug { width: 34px; height: 30px; align-self: center; filter: drop-shadow(0 1px 1px rgba(0,0,0,.3)); }
.msn7-wordmark b { font-size: 21px; letter-spacing: -.5px; }
.msn7-svc { font-size: 12px; color: #bfe0fb; font-style: italic; }
.msn7-scene-count { font-size: 11px; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.35); white-space: nowrap; }
.msn7-scene-count .wm-dot { box-shadow: 0 0 0 2px rgba(255,255,255,.35); }

/* Bandeau promo de lancement (période gratuite, cf. inc/credits.php: WIZME_LAUNCH_FREE_UNTIL) */
.msn7-launch-banner {
  font: bold 12px Tahoma, sans-serif; text-align: center; color: #1d3b12; padding: 6px 10px;
  background: linear-gradient(180deg, #f4ffe0, #d3f291); border-bottom: 1px solid #9ad646;
}

.msn7-trust { font-size: 11px; color: #5a7691; margin: 0 0 12px; }

/* Corps : panneau blanc encastré */
.msn7-body { background: #fff; margin: 9px; border: 1px solid var(--xp-sunk); border-top-color: #5d7a98; padding: 16px 16px 14px; text-align: center; }

/* Photo « buddy » par défaut, dans son cadre */
.msn7-dp {
  width: 66px; height: 66px; margin: 0 auto 12px; padding: 3px; background: #fff;
  border: 1px solid var(--xp-sunk); box-shadow: inset 0 0 0 1px #e6eef7;
}
.msn7-dp-buddy {
  display: block; width: 100%; height: 100%; font-size: 0;
  background: radial-gradient(circle at 40% 32%, #eaffc2, #82cb2c 55%, #4f9600);
}
.msn7-dp-buddy::after {
  content: ""; display: block; width: 100%; height: 100%; background: #fff;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-5 3.6-7.5 8-7.5s8 2.5 8 7.5z'/%3E%3C/svg%3E") center/74% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-5 3.6-7.5 8-7.5s8 2.5 8 7.5z'/%3E%3C/svg%3E") center/74% no-repeat;
  opacity: .92;
}

.msn7-hello { font-size: 15px; font-weight: bold; color: var(--msn-blue-dk); margin: 0 0 12px; }
.msn7-form { text-align: left; margin: 0; }
.msn7-lab { display: block; font-size: 12px; color: #2c4257; margin: 8px 1px 3px; }

/* Champs « combobox » MSN : encastrés, flèche déroulante */
.msn7-combo {
  display: flex; align-items: center; background: #fff;
  border: 1px solid var(--xp-sunk); border-top-color: #51708f; box-shadow: inset 1px 1px 1px rgba(0,0,0,.07);
}
.msn7-combo input { flex: 1 1 auto; min-width: 0; border: 0; outline: 0; background: transparent; padding: 5px 7px; font: 13px Tahoma, sans-serif; color: var(--ink); }
.msn7-combo::after { content: "▾"; width: 18px; text-align: center; color: #2c4257; font-size: 11px; border-left: 1px solid var(--xp-sunk); align-self: stretch; display: flex; align-items: center; justify-content: center; background: linear-gradient(180deg,#f3f1ea,#dcd8cc); }
.msn7-combo:focus-within { box-shadow: inset 0 0 0 1px rgba(28,95,168,.5); }
.msn7-pwd::after { content: ""; width: 0; border: 0; }
.msn7-pwd input { letter-spacing: 2px; color: #9aa7b3; }
.msn7-pwd-tip { font-size: 10px; color: #8aa0b4; font-style: italic; padding: 0 8px; white-space: nowrap; }

/* Sélecteur d'état */
.msn7-select { display: flex; align-items: center; gap: 6px; background: #fff; border: 1px solid var(--xp-sunk); border-top-color: #51708f; padding: 2px 6px; }
.msn7-select select { flex: 1 1 auto; border: 0; outline: 0; background: transparent; font: 13px Tahoma, sans-serif; color: var(--ink); padding: 3px 0; }

.msn7-check { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #2c4257; margin: 9px 1px 2px; cursor: pointer; }
.msn7-check input { margin: 0; }

.msn7-radios { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 2px 0; }
.msn7-radios label { display: inline-flex; align-items: center; gap: 4px; margin: 0; font-size: 12px; color: var(--ink); cursor: pointer; }

/* Bouton « Connexion » vert glossy */
.msn7-signin {
  display: block; width: 100%; box-sizing: border-box; margin: 14px 0 4px; cursor: pointer;
  text-decoration: none; text-align: center; font: bold 13px Tahoma, sans-serif; color: #1d3b12;
  padding: 8px 12px; border-radius: 4px; border: 1px solid #4f9600;
  background: linear-gradient(180deg, #d3f291 0%, #9ad646 47%, #7cc329 52%, #5fa810 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 1px 2px rgba(0,0,0,.18);
}
.msn7-signin:hover { filter: brightness(1.05); }
.msn7-signin:active { box-shadow: inset 0 2px 3px rgba(0,0,0,.22); }

.msn7-links { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; }
.msn7-link { font-size: 12px; color: var(--msn-blue); text-decoration: underline; }
.msn7-link-strong { font-weight: bold; color: var(--msn-green-dk); }
.msn7-note { font-size: 11px; color: #5a7691; margin: 9px 0 2px; line-height: 1.5; }
.msn7-err { font-size: 12px; color: #b00020; background: #fde8ea; border: 1px solid #f3b6bd; padding: 6px 9px; margin: 0 0 8px; text-align: left; }

/* Barre d'état de la fenêtre */
.msn7-status {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin: 0 9px 9px; padding: 3px 8px; font-size: 11px; color: #36506a;
  background: var(--xp-face); border: 1px solid #fff; border-top-color: var(--xp-shadow);
  box-shadow: inset 1px 1px 0 var(--xp-shadow);
}
.msn7-status-r { color: #6b7d62; }

/* --- Fenêtre vivante : déplaçable, réduire / agrandir / fermer, menus --- */
.msn7 { transition: transform .26s ease, opacity .26s ease, width .14s ease, height .14s ease; }
/* Pendant un redimensionnement à la main (assets/msn-home.js: attachWindowChrome), la transition
   width/height ci-dessus ferait "rattraper" le curseur sur 140ms au lieu de suivre instantanément
   — désactivée le temps du geste seulement, sans toucher aux animations d'ouverture/minimisation/
   maximisation (qui restent de vrais changements de classe, jamais de .msn7-resizing actif). */
.msn7-resizing { transition: none; }
.msn7-title { cursor: move; user-select: none; }
.msn7-min { transform: translateY(58vh) scale(.14); opacity: 0; pointer-events: none; }
.msn7-max { width: 440px; }
/* La fenêtre BuddyPress "agrandie" prend une taille utile, pas la petite taille de la fenêtre de connexion. */
.msn7-page.msn7-max { width: min(96vw, 960px); height: min(90vh, 720px); }

/* Fondu d'entrée à chaque chargement de fenêtre BuddyPress — atténue la sensation de rechargement de page. */
@keyframes msn7-appear { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.msn7-page { animation: msn7-appear .18s ease-out; }
@keyframes msn7-shake {
  0%,100% { transform: translateX(0); }
  20% { transform: translateX(-6px); } 40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); } 80% { transform: translateX(4px); }
}
.msn7-shake { animation: msn7-shake .4s; }

.msn7-menu > span { position: relative; padding: 1px 5px; border-radius: 2px; cursor: pointer; }
.msn7-menu > span:hover, .msn7-menu > span.open,
.msn7-menu > span:active { background: var(--msn-blue); color: #fff; }
.msn7-menu > span:hover u, .msn7-menu > span.open u, .msn7-menu > span:active u { color: #fff; }
.msn7-dd {
  position: absolute; top: 100%; left: 0; min-width: 172px; z-index: 50;
  background: #fff; border: 1px solid #8a8a7c; box-shadow: 2px 3px 6px rgba(0,0,0,.32); padding: 2px; text-align: left;
  opacity: 0; transform: scale(.94); transform-origin: top left;
  transition: opacity .12s ease, transform .12s ease;
}
.msn7-dd.open { opacity: 1; transform: scale(1); }
.msn7-dd a { display: block; padding: 4px 18px 4px 22px; font-size: 12px; color: #1a1a14; text-decoration: none; white-space: nowrap; }
.msn7-dd a:hover, .msn7-dd a:active { background: var(--msn-blue); color: #fff; }

.xp-task { cursor: pointer; }

.msn7-toast {
  position: fixed; left: 50%; bottom: 46px; transform: translateX(-50%); z-index: 1100;
  background: var(--msn-blue); color: #fff; padding: 9px 16px; border-radius: 6px;
  font: 13px Tahoma, sans-serif; box-shadow: 0 4px 14px rgba(0,0,0,.35); transition: opacity .4s;
}
.msn7-toast.out { opacity: 0; }

/* --- Notifications = bulles (façon balloon tip XP), pas un tableau brut --- */
.wm-notif-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.wm-notif-item {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  background: linear-gradient(180deg, #fffdf0, #fff6d6); border: 1px solid #e8d38a; border-radius: 6px;
  box-shadow: 0 2px 5px rgba(120,90,10,.08);
}
.wm-notif-check { flex: 0 0 auto; }
.wm-notif-ico { flex: 0 0 auto; font-size: 17px; }
.wm-notif-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.wm-notif-text { font-size: 12px; color: #4a3c10; }
.wm-notif-time { font-size: 11px; color: #a08a3f; }
.wm-notif-actions { flex: 0 0 auto; font-size: 11px; }

/* Surbrillance quand un menu pointe vers un champ (focus e-mail / état) */
@keyframes wm-flash { 0%,100% { box-shadow: inset 0 0 0 1px var(--xp-sunk); } 50% { box-shadow: 0 0 0 2px #ffd23f, inset 0 0 0 1px #ffb300; } }
.wm-flash { animation: wm-flash .9s ease; }

/* Boîte de dialogue « À propos » façon XP */
.msn7-about { position: fixed; inset: 0; z-index: 1200; background: rgba(10,30,70,.28); display: flex; align-items: center; justify-content: center; }
.msn7-about-win {
  width: 300px; max-width: 92%; background: var(--xp-face); border: 1px solid #003c9d;
  border-radius: 7px 7px 2px 2px; box-shadow: 0 18px 50px rgba(8,32,96,.5); overflow: hidden; font-family: Tahoma, sans-serif;
}
/* Plus de 2 boutons (motifs de signalement, etc.) : fenêtre plus large + liste verticale pleine
   largeur au lieu d'une rangée qui déborde (cf. .wm-msgbox-btns--list ci-dessous). */
.wm-msgbox-win--list { width: 360px; }
.msn7-about-title {
  display: flex; align-items: center; justify-content: space-between;
  background: linear-gradient(180deg, var(--msn-blue-lt), var(--msn-blue) 55%, var(--msn-blue-2)); color: #fff;
  font-weight: bold; font-size: 13px; padding: 4px 8px; text-shadow: 0 1px 1px rgba(0,0,0,.5);
}
.msn7-about-x { cursor: pointer; width: 19px; height: 16px; line-height: 15px; text-align: center; font-size: 11px;
  background: linear-gradient(180deg, #f6a596, #df5b48); border: 1px solid #fff; border-radius: 3px; }
.msn7-about-body { background: #fff; margin: 8px; border: 1px solid var(--xp-sunk); padding: 14px 16px; text-align: center; font-size: 12px; color: #2c4257; line-height: 1.5; }
.msn7-about-body p { margin: 0 0 8px; }
.msn7-about-copy { color: #8aa0b4; font-size: 11px; }
.msn7-about-ok { margin: 6px 0 8px; }
.msn7-about-close { cursor: pointer; font: 12px Tahoma, sans-serif; padding: 4px 16px; background: linear-gradient(180deg,#f3f1ea,#dcd8cc); border: 1px solid var(--xp-shadow); border-radius: 3px; }

.wm-desktop-tag { text-align: center; font-size: 15px; color: #fff; text-shadow: 0 1px 3px rgba(0,40,90,.6); max-width: 460px; margin: 4px 0 0; }

/* --- Barre des tâches Windows XP (fixe en bas) --- */
.xp-taskbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000; height: 30px;
  display: flex; align-items: stretch;
  background: linear-gradient(180deg, var(--msn-blue-2) 0%, var(--msn-blue) 55%, var(--msn-blue-dk) 100%);
  box-shadow: inset 0 1px 0 var(--msn-blue-lt), 0 -1px 4px rgba(0,0,0,.3);
  font-family: Tahoma, sans-serif;
  /* iPhone à encoche : la taskbar grandit vers le bas plutôt que de se faire recouvrir par le
     home indicator (viewport-fit=cover posé dans header.php). 0px sur tout le reste. */
  padding-bottom: env(safe-area-inset-bottom, 0px);
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
  box-sizing: content-box;
}
.xp-start {
  display: inline-flex; align-items: center; gap: 7px; padding: 0 22px 3px 12px;
  color: #fff; font: italic 900 15px Tahoma, sans-serif; text-decoration: none; text-shadow: 1px 1px 1px rgba(0,0,0,.45);
  background: linear-gradient(180deg, #7ec86a 0%, #51ad3f 8%, #3f9a30 50%, #338726 51%, #4aa436 92%, #62b94d 100%);
  border-radius: 0 13px 13px 0; box-shadow: inset 0 1px 0 rgba(255,255,255,.5);
}
.xp-start:hover { filter: brightness(1.06); }
.xp-start:active { box-shadow: inset 0 2px 4px rgba(0,0,0,.4); filter: brightness(.95); }
.xp-flag {
  width: 16px; height: 14px; border-radius: 2px; transform: perspective(20px) rotateY(-12deg);
  background:
    linear-gradient(#f25022 0 50%, #ffb900 50% 100%) left / 50% 100% no-repeat,
    linear-gradient(#7fba00 0 50%, #00a4ef 50% 100%) right / 50% 100% no-repeat;
  box-shadow: 0 0 0 1px rgba(0,0,0,.15);
}
.xp-tasks { flex: 1 1 auto; display: flex; align-items: center; padding: 0 6px; gap: 6px; }
.xp-task {
  display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 10px; max-width: 160px;
  color: #fff; font-size: 12px; border-radius: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  background: linear-gradient(180deg, var(--msn-blue-2), var(--msn-blue)); box-shadow: inset 0 1px 0 rgba(255,255,255,.3), inset 0 0 0 1px rgba(0,0,0,.08);
}
.xp-task.active { background: linear-gradient(180deg, var(--msn-blue), var(--msn-blue-dk)); box-shadow: inset 0 2px 3px rgba(0,0,0,.35); }
.xp-task:active { box-shadow: inset 0 2px 4px rgba(0,0,0,.4); }
.xp-tray {
  display: inline-flex; align-items: center; gap: 7px; padding: 0 12px; color: #fff; font-size: 12px;
  background: linear-gradient(180deg, var(--msn-blue-2) 0%, var(--msn-blue) 90%, var(--msn-blue-dk) 100%);
  box-shadow: inset 1px 0 0 var(--msn-blue-lt);
  /* Sans ça, deux taps rapprochés sur mobile déclenchent le double-tap-to-zoom natif du
     navigateur au lieu du easter egg — ça déformait visuellement toute la fenêtre (bug réel
     constaté). Coupe aussi le délai ~300ms avant le premier `click`, utile pour la détection de
     double-tap maison ci-dessous (template-parts/desktop-shell.php). */
  touch-action: manipulation;
}
.xp-clock { letter-spacing: .3px; }

/* Easter egg horloge (template-parts/desktop-shell.php) : faux écran bleu vintage, façon XP. */
.wm-bsod {
  position: fixed; inset: 0; z-index: 99999;
  background: #0000aa; color: #fff;
  font-family: 'Lucida Console', Consolas, 'Courier New', monospace;
  display: flex; align-items: center; justify-content: center;
  padding: 40px; cursor: pointer;
}
.wm-bsod-inner { max-width: 720px; font-size: 15px; line-height: 1.7; }
.wm-bsod-hint { margin-top: 24px; }

/* --- Icônes de bureau (sélection au clic, action au double-clic, comme sous XP) --- */
.xp-icons {
  position: fixed; inset: 0 0 34px 0; z-index: 5; pointer-events: none;
}
.xp-icon {
  position: absolute; width: 78px; background: none; border: none; padding: 4px; cursor: default;
  display: flex; flex-direction: column; align-items: center; gap: 4px; font-family: Tahoma, sans-serif;
  pointer-events: auto; user-select: none;
}
.xp-icon-glyph { display: block; width: 34px; height: 34px; filter: drop-shadow(0 1px 2px rgba(0,0,0,.5)); }
.xp-icon-glyph svg { width: 100%; height: 100%; display: block; }
.xp-icon-lab {
  font-size: 11px; color: #fff; text-shadow: 1px 1px 2px rgba(0,0,0,.8); line-height: 1.25; text-align: center;
}
.xp-icon.sel .xp-icon-glyph { background: var(--msn-blue-2); border-radius: 3px; box-shadow: 0 0 0 1px rgba(255,255,255,.5) inset; }
.xp-icon.sel .xp-icon-lab { background: var(--msn-blue); box-shadow: 0 0 0 1px #fff inset; }
/* En dessous de 760px : plus de glisser-déposer (pas d'équivalent tactile), donc colonne statique
   sur le bord gauche (comme le positionnement libre par défaut à x:16, assets/msn-home.js) au lieu
   d'une grille qui s'étale sur toute la largeur — .xp-icon repasse en position:static, le
   style.left/top posé en JS est alors ignoré. z-index inchangé (5) : reste sous les fenêtres
   plein écran mobiles (z-index 900+, cf. @media plus haut) et sous la taskbar (1000) — les icônes
   ne redeviennent visibles que quand aucune fenêtre n'est ouverte, comme un vrai bureau. Le
   double-clic devient un simple tap (assets/msn-home.js: activateIcon()). */
@media (max-width: 760px) {
  .xp-icons { display: flex; flex-direction: column; flex-wrap: nowrap; gap: 4px; padding: 8px; }
  .xp-icon { position: static; width: 72px; }
}

/* --- Menu Démarrer (classique XP : bandeau utilisateur + colonne d'apps + pied orange) --- */
.xp-startmenu {
  position: fixed; left: 0; bottom: 30px; z-index: 1001; width: 330px; max-width: 92vw;
  background: #fff; border: 1px solid var(--msn-blue-dk); border-radius: 8px 8px 0 0; overflow: hidden;
  box-shadow: 0 10px 34px rgba(8,32,96,.45); font-family: Tahoma, sans-serif;
  opacity: 0; transform: scale(.94); transform-origin: bottom left;
  transition: opacity .15s ease, transform .15s ease;
}
.xp-startmenu[hidden] { display: none; }
.xp-startmenu.open { opacity: 1; transform: scale(1); }

@media (max-width: 760px) {
  .xp-startmenu.wm-menu-sheet {
    transform-origin: initial; transform: translateY(100%); opacity: 1;
    transition: transform .2s ease;
  }
  .xp-startmenu.wm-menu-sheet.open { transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .msn7-dd, .xp-startmenu { transition-duration: .01ms !important; }
}
.xp-sm-user {
  display: flex; align-items: center; gap: 10px; padding: 8px 12px;
  background: linear-gradient(180deg, var(--msn-blue-2) 0%, var(--msn-blue) 100%); color: #fff;
}
.xp-sm-user[data-go] { cursor: pointer; }
.xp-sm-user[data-go]:hover, .xp-sm-user[data-go]:focus-visible { filter: brightness(1.1); }
.xp-sm-avatar {
  width: 34px; height: 34px; border-radius: 4px; background: var(--msn-green);
  display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 15px;
  border: 1px solid rgba(255,255,255,.6); overflow: hidden;
}
.xp-sm-avatar img { width: 100%; height: 100%; object-fit: cover; }
.xp-sm-uname { font-weight: bold; font-size: 13px; text-shadow: 0 1px 1px rgba(0,0,0,.3); }
.xp-sm-body { display: flex; }
.xp-sm-col { flex: 1 1 50%; padding: 8px 0; }
.xp-sm-col + .xp-sm-col { background: #eef3fb; border-left: 1px solid #d7e2f0; }
.xp-sm-item {
  display: flex; align-items: center; gap: 8px; padding: 6px 12px; font-size: 12px; color: #1a2c40;
  text-decoration: none; cursor: pointer; white-space: nowrap;
}
.xp-sm-item:hover, .xp-sm-item:active { background: var(--msn-blue); color: #fff; }
.xp-sm-ico { font-size: 15px; width: 18px; text-align: center; flex: 0 0 auto; }
.xp-sm-label { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; gap: 1px; }
.xp-sm-preview {
  font-size: 10px; font-weight: normal; color: rgba(26,44,64,.65);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.xp-sm-item:hover .xp-sm-preview, .xp-sm-item:active .xp-sm-preview { color: rgba(255,255,255,.85); }
.xp-sm-item .wm-badge-count { margin-left: auto; flex: 0 0 auto; }
.xp-sm-foot {
  display: flex; justify-content: flex-end; gap: 8px; padding: 6px 10px;
  background: linear-gradient(180deg, #ffd18a 0%, #f0a83d 100%); border-top: 1px solid #d98a1f;
}
.xp-sm-foot button {
  display: flex; align-items: center; gap: 6px; padding: 4px 10px; font-size: 11px; font-weight: bold;
  color: #5a3600; background: linear-gradient(180deg, #fff3de, #ffdca0); border: 1px solid #d98a1f;
  border-radius: 3px; cursor: pointer;
}
.xp-sm-foot button:hover, .xp-sm-foot button:active { filter: brightness(1.06); }

/* --- Sous le pli : d'autres fenêtres posées sur la pelouse, pas des cartes web --- */
.xp-belowfold { max-width: 720px; margin: 0 auto; padding: 10px 16px 48px; display: flex; flex-direction: column; gap: 26px; }
.xp-win {
  background: var(--xp-face); border: 1px solid #003c9d; border-radius: 6px 6px 2px 2px;
  box-shadow: 0 10px 30px rgba(8,32,96,.35), inset 0 0 0 1px #fbfbf7; overflow: hidden;
  font-family: Tahoma, "Segoe UI", sans-serif;
}
.xp-win-title {
  display: flex; align-items: center; gap: 7px; padding: 5px 10px;
  background: linear-gradient(180deg, var(--msn-blue-lt) 0%, var(--msn-blue-2) 20%, var(--msn-blue) 55%, var(--msn-blue-2) 100%);
  color: #fff; font-weight: bold; font-size: 13px; text-shadow: 0 1px 1px rgba(0,0,0,.5);
  border-bottom: 1px solid #003c9d;
}
.xp-win-title svg { width: 16px; height: 16px; flex: 0 0 auto; filter: drop-shadow(0 1px 1px rgba(0,0,0,.4)); }
.xp-win-body { background: #fff; margin: 9px; border: 1px solid var(--xp-sunk); border-top-color: #5d7a98; padding: 16px; }

/* --- Fiche « Propriétés » du profil (remplace le tableau BuddyPress brut) --- */
.xp-proplist-group { margin: 0 0 16px; }
.xp-proplist { margin: 0; }
.xp-proplist-row {
  display: grid; grid-template-columns: 160px 1fr; gap: 4px 14px; padding: 6px 0;
  border-bottom: 1px dotted var(--xp-shadow); font-size: 12px;
}
.xp-proplist-row:last-child { border-bottom: none; }
.xp-proplist-row dt { font-weight: bold; color: #2c4257; margin: 0; }
.xp-proplist-row dd { margin: 0; color: #3a4a5a; }
@media (max-width: 540px) { .xp-proplist-row { grid-template-columns: 1fr; } }

/* --- Fenêtre Réglages : matrice des notifications (événement x canal) --- */
.wm-notif-perm { font-size: 12px; color: #5a7691; margin: 0 0 12px; }
.wm-notif-table { width: 100%; border-collapse: collapse; font-size: 12px; margin: 0 0 14px; }
.wm-notif-table th, .wm-notif-table td { padding: 6px 8px; text-align: center; border-bottom: 1px dotted var(--xp-shadow); }
.wm-notif-table th { color: var(--msn-blue-dk); font-weight: bold; }
.wm-notif-table td:first-child, .wm-notif-table th:first-child { text-align: left; }
.wm-notif-table tr:last-child td { border-bottom: none; }
.wm-notif-hint { font-size: 12px; color: #5a7691; margin: 0 0 14px; }
.wm-hide-toggle { display: block; font-size: 13px; margin: 0 0 4px; }

/* --- Fenêtre "Propriétés d'affichage" : radios groupés par fieldset --- */
.wm-theme-opt { display: block; font-size: 12px; padding: 4px 0; cursor: pointer; }
.wm-theme-opt input { margin-right: 6px; }
.wm-theme-opt.wm-theme-locked { color: #7a8ea3; }
.wm-theme-custom { display: flex; align-items: center; gap: 8px; margin: 8px 0 0; padding-top: 8px; border-top: 1px dashed var(--line); }
.wm-theme-custom .msn-label { margin: 0; font-size: 12px; }
.wm-theme-custom input[type="file"] { flex: 1; min-width: 0; font-size: 11px; }
.msn7 fieldset { border: 1px solid var(--line); border-radius: 4px; margin: 0 0 12px; padding: 8px 12px; }
.msn7 fieldset legend { padding: 0 6px; font-weight: bold; color: var(--msn-blue-dk); font-size: 12px; }
.xp-steps { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
.xp-step { background: #fff; border: 1px solid var(--xp-sunk); padding: 12px 10px; font-size: 12px; color: #3a4a5a; line-height: 1.5; text-align: center; }
.xp-step-ico { display: flex; justify-content: center; width: 28px; height: 28px; margin: 0 auto 4px; }
.xp-step-ico svg { width: 100%; height: 100%; filter: drop-shadow(0 1px 1px rgba(0,0,0,.3)); }
.xp-prices { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.xp-price { background: #fff; border: 1px solid var(--xp-sunk); padding: 14px 12px; font-size: 12px; color: #3a4a5a; line-height: 1.5; }
.xp-price-big { display: block; font-size: 19px; font-weight: bold; margin: 6px 0; }
.xp-green { color: var(--msn-green-dk); }
.xp-blue { color: var(--msn-blue); }
.xp-cta { width: auto; display: inline-block; margin: 16px auto 0; padding: 9px 26px; }
.xp-cta-mid { align-self: center; margin: -12px 0 0; }

@media (max-width: 540px) {
  .xp-steps, .xp-prices { grid-template-columns: 1fr; }
  .xp-start { font-size: 13px; padding-right: 16px; }
}

/* --- Bandeau « moi » : Wizz offerts du jour --- */
.wm-free-wizz { font-size: 12px; font-weight: bold; color: var(--msn-green-dk); white-space: nowrap; margin-left: 10px; }

/* --- Messages : vraie fenêtre de discussion MSN, construite par le bureau JS (assets/desktop-app.js)
   à partir de l'API REST — plus de balisage/JS BuddyPress ici (Backbone déchargé sur ces écrans). --- */
.wm-thread-body { display: flex; gap: 8px; align-items: stretch; }
.wm-thread-body.wm-thread-pos-left { flex-direction: row; }
.wm-thread-body.wm-thread-pos-right { flex-direction: row-reverse; }
.wm-thread-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: row; gap: 8px; }
.wm-thread-chat { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
/* Panneau photo façon fenêtre MSN d'origine (photo/nom/message perso du correspondant), rempli
   par setSide() dans assets/desktop-app.js — masqué sur mobile, voir @media plus bas. */
.wm-thread-side { flex: 0 0 140px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: 8px 6px; border: 1px solid var(--xp-sunk); background: #fff; }
.wm-thread-side-link { display: flex; flex-direction: column; align-items: center; gap: 4px; text-decoration: none; color: inherit; cursor: pointer; }
.wm-thread-side-av { position: relative; display: inline-block; }
.wm-thread-side img { width: 120px; height: 120px; object-fit: cover; border-radius: 4px; border: 1px solid var(--line); }
/* Statut MSN live du correspondant, sans passer par sa fiche (cf. .wm-me-av .wm-dot pour le même
   badge sur sa propre photo) : tenu à jour par window.wizme.onPresence (assets/desktop-app.js). */
.wm-thread-side-av .wm-dot { position: absolute; right: -2px; bottom: -2px; width: 13px; height: 13px; border: 2px solid #fff; }
.wm-thread-side-name { font-weight: bold; color: var(--msn-blue-dk); font-size: 12px; }
.wm-thread-side-link:hover .wm-thread-side-name { text-decoration: underline; }
.wm-thread-side-pm { font-style: italic; color: #5a7691; font-size: 11px; }
.wm-thread-list { flex: 0 0 150px; overflow-y: auto; max-height: 100%; border: 1px solid var(--xp-sunk); background: #fff; }
.wm-thread-list .msn-buddies { list-style: none; margin: 0; padding: 0; }
.wm-thread-list .msn-buddy { padding: 5px 6px; gap: 6px; }
.wm-thread-list .msn-buddy-name { font-size: 11px; }
.wm-thread-active { background: var(--msn-blue-pale, #dceafd); }
.wm-thread-list-toggle { display: none; } /* bouton dédié : la colonne fixe cède la place à un tiroir sur mobile (peu de largeur) */
@media (max-width: 640px) {
  .wm-thread-list-toggle { display: inline; }
  .wm-thread-body { position: relative; }
  .wm-thread-list {
    display: none; position: absolute; top: 0; bottom: 0; width: 75%; max-width: 260px; z-index: 6;
    box-shadow: 2px 0 10px rgba(0,0,0,.35);
  }
  .wm-thread-pos-left .wm-thread-list { left: 0; }
  .wm-thread-pos-right .wm-thread-list { right: 0; }
  .wm-thread-body.wm-thread-list-open .wm-thread-list { display: block; }
  .wm-thread-side { display: none; } /* pas la place à côté du fil sur mobile */
}
/* flex (pas max-height fixe) : le fil remplit la hauteur disponible dans .wm-thread-chat — une
   fenêtre plus grande (ou agrandie à la main) donne plus de messages visibles, pas juste du vide. */
/* Dégradé très doux (rose/lavande à peine perceptible) au lieu du blanc plat — ambiance plus
   chaleureuse pour un site de rencontre, sans toucher à la lisibilité du texte ni au look Luna
   du reste du bureau (dock, boutons... restent inchangés). */
.wm-chat-log { list-style: none; margin: 0; padding: 8px 10px; background: linear-gradient(175deg, #fff, #fdf6fa 60%, #fbf3f8); border: 1px solid var(--xp-sunk); flex: 1 1 auto; min-height: 120px; overflow-y: auto; }
.wm-thread-tools { text-align: right; margin: 0 0 4px; padding: 0 2px; }
.wm-link-btn { background: none; border: none; color: var(--msn-blue); text-decoration: underline; font: 11px Tahoma, sans-serif; cursor: pointer; padding: 0; }
.wm-chat-line { display: flex; align-items: flex-start; gap: 8px; padding: 5px 0; }
.wm-chat-bubble { flex: 1 1 auto; min-width: 0; }
.wm-chat-bubble .message-metadata { display: flex; align-items: baseline; gap: 6px; }
.wm-chat-name { font-weight: bold; color: var(--msn-blue-dk); text-decoration: none; font-size: 12px; }
.wm-chat-name[data-open-profile] { cursor: pointer; }
.wm-chat-name[data-open-profile]:hover { text-decoration: underline; }
/* Chacun garde SA couleur de pseudo tout du long, comme le nom personnalisé de MSN — pas de bulles L/R. */
.wm-chat-mine .wm-chat-name { color: var(--msn-green-dk); }
.wm-chat-time { color: #8aa0b4; font-size: 10px; margin-left: auto; }
/* Supprimer son propre message (inc/message-delete.php) — discret, jamais sur le message de
   l'autre (le bouton n'est simplement pas généré côté serveur/JS dans ce cas). */
.wm-chat-del-btn {
  background: none; border: none; padding: 0 0 0 4px; margin: 0; cursor: pointer;
  font-size: 11px; line-height: 1; opacity: .45; flex: 0 0 auto;
}
.wm-chat-del-btn:hover { opacity: 1; }
.wm-chat-bubble .message-content { color: #2c4257; line-height: 1.45; margin-top: 1px; word-break: break-word; cursor: pointer; }
.wm-chat-bubble .actions { flex: 0 0 auto; }
/* Affichage optimiste (assets/desktop-app.js: sendText) — estompé le temps de la confirmation serveur */
.wm-chat-pending { opacity: .55; }
.wm-chat-pending .message-content { cursor: default; }
/* Réaction cœur (inc/reactions.php) — clic sur le message, badge visible aux deux */
.wm-chat-heart { display: inline-block; font-size: 11px; margin-top: 2px; opacity: .55; transition: transform .15s; }
.wm-chat-heart-mine { opacity: 1; }
.wm-chat-heart-mine.wm-chat-heart-new { animation: wm-heart-pop .4s ease; }
@keyframes wm-heart-pop { 0% { transform: scale(1); } 40% { transform: scale(1.6); } 100% { transform: scale(1); } }

.wm-typing { min-height: 14px; padding: 2px 10px; font: italic 11px Tahoma, sans-serif; color: #6b7d62; display: flex; align-items: center; gap: 3px; }
.wm-typing-dots { display: inline-flex; gap: 2px; }
.wm-typing-dots span { width: 3px; height: 3px; border-radius: 50%; background: #6b7d62; animation: wm-typing-blink 1.2s infinite; }
.wm-typing-dots span:nth-child(2) { animation-delay: .2s; }
.wm-typing-dots span:nth-child(3) { animation-delay: .4s; }
@keyframes wm-typing-blink { 0%, 80%, 100% { opacity: .2; } 40% { opacity: 1; } }

/* Accusé de lecture (Premium) + teaser — ligne discrète sous le fil */
.wm-read-receipt { min-height: 0; text-align: right; padding: 1px 4px; }
.wm-receipt-seen { font: 10px Tahoma, sans-serif; color: #8aa0b4; }
.wm-receipt-teaser { font: 10px Tahoma, sans-serif; color: #a58a2a; text-decoration: none; }
.wm-receipt-teaser:hover { text-decoration: underline; }

/* Mini-jeux (inc/game.php : morpion + puissance 4) — plateau entre le fil et le dock */
.wm-game { flex: 0 0 auto; }
.wm-game-head { display: flex; align-items: center; justify-content: space-between; font: bold 11px Tahoma, sans-serif; color: var(--msn-blue-dk); padding: 4px 2px; }
.wm-game-head-btns { display: flex; gap: 8px; }
.wm-game-board { display: grid; grid-template-columns: repeat(3, 44px); gap: 3px; justify-content: center; padding: 2px 0 6px; }
.wm-game-cell {
  width: 44px; height: 44px; font-size: 20px; line-height: 1; cursor: pointer;
  background: #fff; border: 1px solid var(--xp-sunk); border-radius: 3px;
}
.wm-game-cell:not([disabled]):hover { background: var(--msn-blue-pale); border-color: var(--msn-blue); }
.wm-game-cell[disabled] { cursor: default; }
/* Puissance 4 : grille 7×6, cases plus petites (ne pas déborder de la fenêtre) et jetons ronds */
.wm-game-board-c4 { grid-template-columns: repeat(7, 30px); }
.wm-game-cell-c4 { width: 30px; height: 30px; font-size: 16px; border-radius: 50%; }
/* Survoler une case surligne toute sa colonne (le jeton tombe en bas, pas là où on clique). */
.wm-game-cell-c4.wm-game-col-hover { background: var(--msn-blue-pale); }

/* Solitaire (inc/game.php type=solitaire, duo ET assets/desktop-app.js RENDERERS.solitaire,
   solo) — cartes en boutons texte stylés (rang + symbole), pas d'image ni de police de cartes. */
.wm-sol-board {
  background: linear-gradient(180deg, var(--silver-2), var(--line));
  border-radius: 6px; padding: 10px;
}
.wm-card {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 42px; border-radius: 4px; font: bold 12px Tahoma, sans-serif;
  background: #fff; border: 2px solid #fff; cursor: pointer; padding: 0; margin: 0;
  box-shadow: 0 2px 3px rgba(0,0,0,.35); position: relative;
}
.wm-card-red { color: #c0392b; }
.wm-card-black { color: #222; }
.wm-card-back {
  background-image: linear-gradient(135deg, var(--msn-blue) 25%, var(--msn-blue-dk) 25%, var(--msn-blue-dk) 50%, var(--msn-blue) 50%, var(--msn-blue) 75%, var(--msn-blue-dk) 75%);
  background-size: 8px 8px;
}
/* Indice de rang+couleur en coin (au lieu de centré) : reste lisible même quand une carte
   suivante recouvre la majeure partie de celle-ci dans une pile — position:absolute échappe
   au centrage flex de .wm-card ci-dessus, donc aucun autre changement de mise en page requis. */
.wm-card-idx { position: absolute; top: 2px; left: 3px; font-size: 10px; line-height: 1; }
.wm-card-empty { background: transparent; border: 1px dashed var(--xp-sunk); cursor: default; color: var(--xp-sunk); font-size: 14px; box-shadow: none; }
.wm-card-sel { outline: 2px solid var(--msn-amber); outline-offset: 1px; }
.wm-card[disabled] { cursor: default; opacity: .6; }
/* Glisser en cours : légère "levée" (ombre + curseur), AUCUN indice sur les destinations valides
   ("sans aide", cf. spec). .wm-sol-card-wrap (colonnes du tableau) porte le transform pendant le
   glisser ; .wm-card seul (défausse) le porte directement — les deux cas sont couverts ici. */
.wm-sol-card-wrap.wm-sol-dragging { z-index: 50; }
.wm-sol-card-wrap.wm-sol-dragging .wm-card,
.wm-card.wm-sol-dragging {
  box-shadow: 0 6px 10px rgba(0,0,0,.45); cursor: grabbing; z-index: 50;
}
.wm-sol-row { display: flex; align-items: center; gap: 8px; padding: 4px 2px 8px; }
.wm-sol-foundations { display: flex; gap: 4px; margin-left: auto; }
.wm-sol-tableau { display: flex; gap: 6px; }
.wm-sol-col { position: relative; width: 30px; flex: 0 0 auto; }
.wm-sol-card-wrap { position: absolute; left: 0; }

/* Barre de saisie ancrée en bas, façon fenêtre MSN — simple <textarea>, plus de TinyMCE (le
   bureau construit son propre balisage, plus besoin d'alléger un éditeur d'article WordPress).
   Habillage Luna (dégradé bleu clair, même famille que .msn7-title/.wm-btn) : look seulement,
   mêmes boutons/gestionnaires JS qu'avant, pas de nouvelle mise en forme de texte. */
.wm-chat-dock {
  display: flex; align-items: flex-end; gap: 8px; flex: 0 0 auto; margin-top: 8px; position: relative;
  border: 1px solid var(--xp-sunk); border-top-color: var(--msn-blue-2);
  background: linear-gradient(180deg, #eef5fd, #dfeaf6); padding: 6px 8px; border-radius: 0 0 4px 4px;
}
.wm-chat-emoji-btn, .wm-chat-gif-btn, .wm-chat-snap-btn, .wm-chat-game-btn { flex: 0 0 auto; padding: 4px 7px; font-size: 15px; line-height: 1; }
.wm-chat-popover {
  position: absolute; bottom: 100%; left: 0; margin-bottom: 4px; z-index: 5; max-width: 260px;
  background: #fff; border: 1px solid var(--xp-sunk); box-shadow: 2px 2px 6px rgba(0,0,0,.25);
  padding: 6px; display: flex; flex-wrap: wrap; gap: 3px;
}
.wm-emoji-item { border: none; background: none; font-size: 18px; padding: 3px; cursor: pointer; line-height: 1; }
.wm-emoji-item:hover { background: #eef2f6; border-radius: 3px; }
.wm-gif-item { border: 1px solid transparent; background: none; padding: 2px; cursor: pointer; border-radius: 3px; }
.wm-gif-item:hover { border-color: var(--msn-blue); }
.wm-gif-item img { width: 60px; height: 45px; object-fit: cover; display: block; }
.wm-chat-gif { max-width: 160px; max-height: 160px; border-radius: 4px; display: block; }

/* Émoticônes animées (inc/wizz.php: wizme_emoticon_svg) — dessin maison, pas les personnages MSN
   (protégés). Un <span> par occurrence, animation en CSS pure. */
.wm-emoticon { display: inline-block; width: 20px; height: 20px; vertical-align: -4px; }
.wm-emoticon svg { display: block; width: 100%; height: 100%; }
.wm-emo-eyes { animation: wm-emo-blink 3.4s infinite; transform-origin: 10px 8.5px; }
@keyframes wm-emo-blink { 0%, 92%, 100% { transform: scaleY(1); } 96% { transform: scaleY(.1); } }
.wm-emo-winkeye { animation: wm-emo-wink 2.2s infinite; transform-origin: 12.7px 8.5px; }
@keyframes wm-emo-wink { 0%, 55%, 100% { opacity: 1; } 65%, 90% { opacity: 0; } }
.wm-emo-mouth { animation: wm-emo-laugh 1s infinite; transform-origin: 10px 12.7px; }
@keyframes wm-emo-laugh { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(.8); } }
.wm-emo-tear { animation: wm-emo-drip 2.4s infinite; }
@keyframes wm-emo-drip { 0% { transform: translateY(0); opacity: 1; } 80% { transform: translateY(4px); opacity: 0; } 100% { transform: translateY(0); opacity: 0; } }
.wm-emo-tongue { animation: wm-emo-flick 1.6s infinite; transform-origin: 10px 12.4px; }
@keyframes wm-emo-flick { 0%, 60%, 100% { transform: scaleY(1); } 80% { transform: scaleY(1.3) translateY(1px); } }
.wm-emo-shine { animation: wm-emo-shine 2.6s infinite; }
@keyframes wm-emo-shine { 0% { transform: translateX(0) skewX(-20deg); } 50% { transform: translateX(9px) skewX(-20deg); } 100% { transform: translateX(0) skewX(-20deg); } }
.wm-emo-heart { animation: wm-emo-beat 1.1s infinite; transform-origin: 10px 10px; }
@keyframes wm-emo-beat { 0%, 100% { transform: scale(1); } 25% { transform: scale(1.15); } 40% { transform: scale(1); } 55% { transform: scale(1.1); } }
.wm-emo-kissheart { animation: wm-emo-float 1.8s infinite; }
@keyframes wm-emo-float { 0% { transform: translateY(0) scale(.6); opacity: 0; } 25% { opacity: 1; } 70% { transform: translateY(-6px) scale(1); opacity: 1; } 100% { transform: translateY(-9px) scale(1); opacity: 0; } }

/* Photo instantanée (inc/snap.php) : bulle "spéciale" façon Snapchat, distincte d'un message texte
   normal (dégradé sombre, pas de fond blanc — signale "ce n'est pas du texte à lire"). */
.wm-snap {
  display: inline-flex; align-items: center; gap: 6px; font-weight: bold; color: #fff;
  background: linear-gradient(135deg, #2d5f9e, #1c3f6e); padding: 6px 12px; border-radius: 16px;
  border: none; font: bold 12px Tahoma, sans-serif;
}
.wm-snap-view { cursor: pointer; }
.wm-snap-view:hover { filter: brightness(1.15); }
.wm-snap-view:disabled, .wm-snap-sent { cursor: default; opacity: .85; }

/* Visionneuse plein écran : au-dessus de tout (fenêtres, popovers), fond opaque — la photo n'a
   déjà plus d'existence côté serveur à ce stade (cf. openSnapViewer, assets/desktop-app.js), donc
   rien n'empêche de zoomer/apprécier une dernière fois avant de fermer. */
.wm-snap-viewer {
  position: fixed; inset: 0; z-index: 999; background: rgba(10,14,20,.94);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 20px;
}
.wm-snap-viewer img {
  max-width: min(92vw, 640px); max-height: 78vh; border-radius: 6px; box-shadow: 0 8px 30px rgba(0,0,0,.5);
  /* Freine la sauvegarde en un geste (pas une vraie protection anti-capture, cf. assets/desktop-app.js:
     openSnapViewer) : -webkit-touch-callout coupe le menu "Enregistrer l'image" à l'appui long sur
     iOS Safari (oncontextmenu seul ne suffit pas là-dessus) ; user-select évite la sélection/le menu
     de copie ; user-drag bloque le glisser-déposer vers le bureau/une autre app. */
  -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; -webkit-user-drag: none; user-drag: none;
  pointer-events: auto;
}
.wm-chat-input {
  flex: 1 1 auto; min-width: 0; min-height: 34px; max-height: 90px; resize: none;
  border: 1px solid var(--xp-sunk); border-top-color: #51708f; font: 13px Tahoma, sans-serif; padding: 5px 7px; color: var(--ink);
}
.wm-chat-send { flex: 0 0 auto; }

/* --- En-tête de profil : nom + statut + message perso (override member-header) --- */
.wm-profile-name { margin: 0 0 4px; font-size: 19px; color: var(--msn-blue-dk); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.wm-profile-status { font-size: 12px; font-weight: normal; color: #6b8099; }
.wm-profile-pm { margin: 0 0 10px; font-style: italic; color: #5a7691; }
.wm-profile-qotd { margin: 0 0 8px; font-size: 12px; color: var(--msn-green-dk); font-style: italic; }

/* Points communs (inc/shell.php: wizme_common_points) — encadré en tête de fiche */
.wm-common { background: #fff8e6; border: 1px solid #ecd9a0; border-radius: 6px; padding: 8px 10px; margin: 0 0 10px; }
.wm-common-title { display: block; font-weight: bold; color: #8a6d1a; font-size: 12px; margin-bottom: 4px; }
.wm-common-item { display: block; font-size: 12px; color: #6b5a20; }

/* label réutilisé par la galerie */
.msn-label { display: block; font-size: 12px; color: #33475c; margin: 4px 1px; }

.wm-empty { text-align: center; color: #5a7691; padding: 26px 16px; line-height: 1.6; }
.wm-loading { text-align: center; color: #7a8ea3; padding: 26px 16px; font-style: italic; }
.wm-visitors-paywall { text-align: center; padding: 30px 16px; }
.wm-visitors-count { font-size: 20px; font-weight: bold; color: var(--msn-blue-dk); margin: 0 0 8px; }
.wm-visitors-paywall a.wm-btn { display: inline-block; margin-top: 12px; text-decoration: none; }

/* Parrainage (inc/referral.php) — même famille visuelle que .wm-chat-dock (dégradé Luna). */
.wm-referral { padding: 16px; text-align: center; }
.wm-referral-box { display: flex; gap: 8px; margin: 14px 0; }
.wm-referral-link {
  flex: 1 1 auto; min-width: 0; border: 1px solid var(--xp-sunk); border-top-color: #51708f;
  font: 13px Tahoma, sans-serif; padding: 6px 8px; color: var(--ink); background: #fff;
}
.wm-referral-count { font-weight: bold; color: var(--msn-blue-dk); margin-top: 10px; }

/* Boutons d'action sur l'en-tête de profil (fenêtre "Fiche contact" construite par le bureau JS) */
.member-header-actions .wm-btn { margin: 3px 6px 3px 0; vertical-align: middle; }
.member-header-actions .wm-locked { margin: 3px 0; }

/* ============ ANNUAIRE = FENÊTRE « LISTE DE CONTACTS » MSN ============ */
/* La fenêtre du client : le bandeau "moi" (.wm-me) en est l'entête, voici le volet contacts. */
.msn-clist {
  background: #fff;
  border: 1px solid #9fc0e6;
  border-radius: 0 0 4px 4px;
  box-shadow: inset 0 0 0 1px #fff, 0 6px 18px rgba(14,63,120,.14);
  overflow: hidden;
}

/* En-tête de groupe pliable : « ▼ Disponibles aujourd'hui (N) » */
.msn-clist-bar {
  background: linear-gradient(180deg, #f3f8fd 0%, #dcebfa 100%);
  border-bottom: 1px solid #c3d8ee;
  padding: 3px 8px;
  font: bold 12px Tahoma, "Segoe UI", sans-serif;
  color: var(--ink);
}
.msn-grp-toggle {
  display: flex; align-items: center; gap: 5px;
  background: none; border: none; cursor: pointer;
  font: bold 12px Tahoma, "Segoe UI", sans-serif; color: var(--ink); padding: 2px 0;
}
.msn-grp-tri { color: var(--msn-blue); font-size: 9px; display: inline-block; transition: transform .15s; }
.msn-clist.collapsed .msn-grp-tri { transform: rotate(-90deg); }
.msn-clist.collapsed .msn-buddies { display: none; }

/* La liste des buddies (annuaire, amis, ET Wizz reçus — même composant visuel) */
.msn-buddies { list-style: none; margin: 0; padding: 3px 0 6px; border: none; }
.wm-buddy-row { border: none; margin: 0; position: relative; }
.wm-buddy-row:has(.wm-inbox-del) .msn-buddy { padding-right: 32px; }
.wm-inbox-del {
  position: absolute; top: 50%; right: 8px; transform: translateY(-50%); margin: 0;
  width: 20px; height: 20px; line-height: 18px; padding: 0; cursor: pointer;
  background: rgba(0,0,0,.4); color: #fff; border: none; border-radius: 50%; font-size: 12px;
}
.wm-inbox-del:hover, .wm-inbox-del:active { background: var(--msn-red); }

/* Swipe-to-wizz (tactile, "Disponibles aujourd'hui" uniquement — desktop-app.js bindSwipe) : le
   bandeau reste caché derrière la carte, révélé progressivement pendant le glissement. */
.wm-swipe-zone .wm-buddy-row { position: relative; overflow: hidden; background: var(--msn-green); }
.wm-swipe-hint {
  position: absolute; inset: 0; display: flex; align-items: center; padding: 0 16px;
  color: #fff; font-weight: bold; font-size: 14px; opacity: 0; pointer-events: none;
}
.wm-swipe-zone .wm-buddy-row > .msn-buddy,
.wm-swipe-zone .wm-buddy-row > .msn-buddy-action { position: relative; background: var(--xp-face); }

.msn-buddy {
  display: flex; align-items: center; gap: 10px;
  padding: 5px 10px;
  text-decoration: none; color: var(--ink);
  font-size: 12px; line-height: 22px;
}
.msn-buddy-action {
  flex: 0 0 auto; margin-left: auto; padding: 2px 10px; font-size: 11px; font-weight: bold;
  color: #fff; text-decoration: none; border-radius: 3px;
  background: linear-gradient(180deg, #a6e364 0%, #6fbe1f 50%, #5fb000 52%, #4f9600 100%);
  border: 1px solid var(--msn-green-dk);
}
.msn-buddy:hover, .msn-buddy:active { background: linear-gradient(180deg, #eaf3ff, #cfe4fb); }
.msn-buddy:active { background: linear-gradient(180deg, #cfe4fb, #b6d6f6); }
/* Déjà wizzé (carte "Disponibles aujourd'hui") : grisé + ✔️ au lieu de l'éclair cliquable. */
.wm-already-wizzed .msn-buddy { opacity: .6; }
.wm-already-wizzed .msn-buddy-name { color: #7d90a3; }
.wm-buddy-action-done { flex: 0 0 auto; margin-left: auto; padding: 2px 10px; font-size: 13px; color: var(--msn-green-dk); }

/* Site de rencontre : la photo mène la carte — grande, la pastille de statut MSN devient un
   badge qui la borde plutôt qu'une icône séparée en tête de ligne. */
.msn-buddy-avatar { flex: 0 0 auto; line-height: 0; position: relative; }
.msn-buddy-avatar img.avatar {
  width: 52px !important; height: 52px !important;
  border-radius: 6px; border: 1px solid #b9d2ec; display: block; object-fit: cover;
  cursor: zoom-in;
}
.msn-buddy-ico {
  position: absolute; right: -3px; bottom: -3px; width: 14px; height: 14px; background: var(--msn-green);
  border: 2px solid #fff; border-radius: 50%; box-shadow: 0 0 0 1px rgba(0,0,0,.15);
}
.wm-st-away .msn-buddy-ico { background: var(--msn-amber); }
.wm-st-busy .msn-buddy-ico { background: var(--msn-red); }
.wm-st-offline .msn-buddy-ico { background: #999; }

.msn-buddy-text { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msn-buddy-name { font-weight: bold; color: var(--ink); }
.msn-buddy:hover .msn-buddy-name, .msn-buddy:active .msn-buddy-name { color: var(--msn-blue-dk); }
.msn-buddy-pm { color: #8298ad; font-style: italic; }
/* Conversation non lue (assets/desktop-app.js, RENDERERS.inbox/thread) : aperçu du dernier
   message en gras/non-italique (au lieu de gris italique) + pastille sur l'avatar — se remet à
   l'état normal dès que le fil est ouvert (unread_count redescend à 0 côté serveur, inc/wizz.php). */
.wm-thread-unread .msn-buddy-pm { color: var(--ink); font-style: normal; font-weight: bold; }
.wm-thread-unread .msn-buddy-avatar::after {
  content: ''; position: absolute; top: 0; right: 0; width: 10px; height: 10px;
  border-radius: 50%; background: var(--msn-blue); border: 2px solid #fff;
}
.msn-buddy-qotd { display: block; color: var(--msn-green-dk); font-size: 11px; font-style: italic; }

/* Question du jour (inc/qotd.php) — bandeau de la fenêtre Contacts, réponse au blur/Entrée */
.wm-qotd { background: #f4f9ee; border: 1px solid #cde3b4; border-radius: 6px; padding: 8px 10px; margin: 0 0 10px; }
.wm-qotd-q { display: block; font-weight: bold; color: var(--msn-green-dk); font-size: 12px; margin-bottom: 4px; }
.wm-qotd-input { width: 100%; box-sizing: border-box; border: 1px solid var(--xp-sunk); border-top-color: #51708f; font: 12px Tahoma, sans-serif; padding: 4px 7px; color: var(--ink); }

/* Photo en tête de la fiche contact — cliquable pour l'agrandir. */
.wm-profile-photo { text-align: center; margin: 0 0 10px; }
.wm-profile-photo img.avatar {
  width: 140px; height: 140px; object-fit: cover; border-radius: 8px;
  border: 2px solid #fff; box-shadow: 0 0 0 1px #9fc0e6, 0 4px 14px rgba(20,60,120,.25);
  cursor: zoom-in;
}

/* Bannière de consentement cookies — boîte de dialogue XP, pas une carte web moderne
   (même chrome que .msn7-about : c'est la première chose vue par un nouveau visiteur). */
.wm-cookie-banner {
  position: fixed; left: 12px; right: 12px; bottom: 46px; z-index: 2000;
  max-width: 480px; margin: 0 auto; background: var(--xp-face); color: var(--ink);
  border: 1px solid #003c9d; border-radius: 6px 6px 2px 2px;
  box-shadow: 0 10px 30px rgba(8,32,96,.4); font: 13px/1.5 Tahoma, sans-serif; overflow: hidden;
}
.wm-cookie-title {
  display: flex; align-items: center; gap: 7px; padding: 5px 10px;
  background: linear-gradient(180deg, var(--msn-blue-lt) 0%, var(--msn-blue-2) 20%, var(--msn-blue) 55%, var(--msn-blue-2) 100%);
  color: #fff; font-weight: bold; font-size: 13px; text-shadow: 0 1px 1px rgba(0,0,0,.5);
  border-bottom: 1px solid #003c9d;
}
.wm-cookie-body { background: #fff; margin: 9px; border: 1px solid var(--xp-sunk); border-top-color: #5d7a98; padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.wm-cookie-body p { margin: 0; }
.wm-cookie-body a { color: var(--msn-blue); }
.wm-cookie-actions { display: flex; gap: 8px; justify-content: flex-end; }
.wm-cookie-btn {
  cursor: pointer; font: bold 12px Tahoma, sans-serif; padding: 5px 16px; color: #2c4257;
  background: linear-gradient(180deg,#f3f1ea,#dcd8cc); border: 1px solid var(--xp-shadow); border-radius: 3px;
}
.wm-cookie-btn:hover { filter: brightness(1.04); }
.wm-cookie-btn-primary {
  color: #1d3b12; border: 1px solid #4f9600;
  background: linear-gradient(180deg, #d3f291 0%, #9ad646 47%, #7cc329 52%, #5fa810 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
}

/* Visionneuse plein écran (contacts, fiche, galerie) */
.wm-lightbox {
  position: fixed; inset: 0; z-index: 1500; background: rgba(10,20,40,.82);
  display: flex; align-items: center; justify-content: center; cursor: zoom-out;
  animation: msn7-appear .15s ease-out;
}
.wm-lightbox img { max-width: 90vw; max-height: 88vh; border: 3px solid #fff; border-radius: 4px; box-shadow: 0 10px 40px rgba(0,0,0,.6); }

/* ============ BANDEAU "MOI" façon client MSN (statut + message perso) ============ */
.wm-me {
  display: flex; align-items: center; gap: 12px;
  max-width: 960px; margin: 0 auto; padding: 8px 16px;
  background: linear-gradient(180deg, #f4faff, #dcebfa);
  border-bottom: 1px solid #b9d2ec;
  box-shadow: inset 0 1px 0 #fff;
}
.wm-me-av {
  position: relative; display: block; width: 40px; height: 40px; flex: 0 0 auto;
  background-size: cover; background-position: center;
  border: 2px solid #fff; border-radius: 5px; box-shadow: 0 0 0 1px #9fc0e6;
  cursor: pointer;
}
.wm-me-av:hover, .wm-me-av:active { box-shadow: 0 0 0 2px var(--msn-blue); }
.wm-me-av .wm-dot { position: absolute; right: -4px; bottom: -4px; width: 13px; height: 13px; border: 2px solid #fff; }
.wm-me-main { flex: 1 1 auto; min-width: 0; }
.wm-me-top { display: flex; align-items: center; gap: 10px; }
.wm-me-name { color: var(--msn-blue); font-size: 14px; text-decoration: none; cursor: pointer; }
.wm-me-name:hover, .wm-me-name:active { text-decoration: underline; }
.wm-me-states { display: inline-flex; gap: 2px; }
.wm-st { background: none; border: 1px solid transparent; border-radius: 4px; padding: 3px; cursor: pointer; line-height: 0; }
.wm-st:hover, .wm-st:active { border-color: #9fc0e6; background: #fff; }
.wm-st.active { border-color: var(--msn-blue); background: #fff; box-shadow: inset 0 1px 2px rgba(0,0,0,.12); }
.wm-me-pm {
  width: 100%; max-width: 520px; border: 1px solid transparent; background: transparent;
  font: italic 13px Tahoma, "Segoe UI", sans-serif; color: #5a7691;
  padding: 3px 6px; border-radius: 4px; margin-top: 2px;
  /* Un message perso plus long que le champ n'est ni tronqué ni visible : coupé net par le bord de
     la fenêtre sans "…" (constaté en mobile, fiche contact). L'ellipse ne gêne pas la saisie au
     focus (le champ défile normalement vers le curseur). */
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wm-me-pm:hover { border-color: #c5d8ec; background: rgba(255,255,255,.6); }
.wm-me-pm:focus { outline: none; border-color: var(--msn-blue); background: #fff; color: var(--ink); font-style: normal; }
.wm-me-pm.saved { border-color: var(--msn-green); }

/* Statut/message perso directement dans sa propre fiche (pas seulement le bandeau "moi") */
.wm-profile-status-editor { background: #eef4fb; border: 1px solid #d3e2f2; border-radius: 6px; padding: 8px 10px; margin: 4px 0 10px; }

/* Jauge de complétude de profil — cartes façon "brise-glace", une question à la fois plutôt qu'un
   simple formulaire : chaque case se referme et glisse hors de vue une fois remplie, la barre
   avance, le champ suivant reçoit le focus tout seul (assets/desktop-app.js) — plus proche d'un
   petit quiz que d'une liste de champs à cocher. */
.wm-completeness { margin: 4px 0 12px; transition: opacity .3s, transform .3s; }
.wm-completeness-done-all { opacity: 0; transform: scale(.97); }
.wm-completeness-bar { height: 8px; background: #dbe6f2; border-radius: 4px; overflow: hidden; }
.wm-completeness-fill { height: 100%; background: linear-gradient(90deg, var(--msn-green), var(--msn-blue)); border-radius: 4px; transition: width .4s ease; }
.wm-completeness-label { font-size: 12px; color: var(--ink-dim, #5a7691); margin: 4px 0 0; }
.wm-completeness-chips { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.wm-completeness-chip { align-self: flex-start; padding: 6px 12px; font-size: 12px; }
.wm-completeness-inline {
  display: flex; align-items: center; gap: 8px; padding: 8px 10px;
  background: linear-gradient(135deg, #eef5fd, #dfeaf6); border: 1px solid var(--msn-blue-2);
  border-radius: 8px; transition: opacity .25s ease, transform .25s ease;
}
.wm-completeness-inline-label { font-size: 12px; font-weight: bold; color: var(--msn-blue-dk); white-space: nowrap; }
.wm-completeness-inline input {
  flex: 1 1 auto; min-width: 0; font-size: 13px; padding: 5px 8px; border-radius: 4px;
  border: 1px solid var(--xp-sunk); border-top-color: #51708f; color: var(--ink);
}
.wm-completeness-done { opacity: 0; transform: translateX(14px) scale(.96); }

/* Vérification de photo (badge de confiance) */
.wm-verified-badge { font-size: 12px; font-weight: bold; color: var(--msn-green-dk); vertical-align: middle; }
.wm-verify-note { font-size: 13px; color: var(--ink); margin: 4px 0 10px; }
.wm-verify-note.wm-verify-ok { color: var(--msn-green-dk); }
.wm-verify-note.wm-verify-ko { color: var(--msn-red); }
.wm-verify-upload { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; margin: 4px 0 12px; padding: 8px 10px; background: #f7f9fc; border: 1px dashed #c5d8ec; border-radius: 6px; }
.wm-verify-upload .msn-label { margin: 0; font-size: 12px; }
/* message perso d'un membre dans l'annuaire */
.wm-pm { font-style: italic; color: #7a8ea3; }

/* Alertes live : interrupteur dans le bandeau "moi" */
.wm-live-toggle { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: #5a7691; cursor: pointer; white-space: nowrap; margin-left: 10px; }
.wm-live-toggle input { margin: 0; }

/* Bouton "Installer l'app" (PWA) dans la barre du haut */
.wm-install {
  margin-left: 6px; cursor: pointer;
  background: rgba(255,255,255,.18); color: #fff;
  border: 1px solid rgba(255,255,255,.5); border-radius: 3px;
  font: bold 12px Tahoma, "Segoe UI", sans-serif; padding: 4px 10px;
}
.wm-install:hover, .wm-install:active { background: rgba(255,255,255,.32); }

/* ============ GALERIE PHOTOS (5 par profil) ============ */
.wm-gallery { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin: 6px 0 14px; }
.wm-gallery-item { position: relative; }
.wm-gallery-photo, .wm-gallery-item img {
  width: 100%; aspect-ratio: 1; object-fit: cover; display: block; cursor: zoom-in;
  border: 1px solid #b9d2ec; border-radius: 5px; background: var(--silver);
}
.wm-gallery-del, .wm-gallery-avatar {
  position: absolute; top: 3px; margin: 0;
  width: 20px; height: 20px; line-height: 18px; padding: 0; cursor: pointer;
  background: rgba(0,0,0,.55); color: #fff; border: none; border-radius: 50%; font-size: 12px;
}
.wm-gallery-del { right: 3px; }
.wm-gallery-avatar { left: 3px; }
.wm-gallery-del:hover, .wm-gallery-del:active { background: var(--msn-red); }
.wm-gallery-avatar:hover, .wm-gallery-avatar:active { background: var(--msn-blue); }
.wm-gallery-avatar:disabled { opacity: .5; cursor: default; }
.wm-gallery-upload { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 8px 0; }
.wm-gallery-upload input[type="file"] { font-size: 12px; }

@media (max-width: 600px) {
  .wm-gallery { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 760px) {
  .wm-me-pm { max-width: 100%; }
  .wm-bar nav a { padding: 5px 7px; }
  /* Cibles tactiles ~40px+ pour les rangées/contrôles cliquables (guideline usuelle) — desktop
     inchangé, ces contrôles gardent leur taille XP d'origine à la souris. */
  .xp-sm-item { padding: 11px 12px; }
  .xp-task { height: 30px; }
  .wm-st { padding: 7px; }
  .wm-notif-table td { padding: 10px 8px; }
  .wm-notif-table input[type="checkbox"], .wm-theme-opt input,
  .msn7-check input, .msn7-radios input { transform: scale(1.35); margin-right: 10px; }
  /* Menu Fichier/Contacts/Actions/Outils/? de la fenêtre de connexion — jamais agrandi comme
     le menu Démarrer (.xp-sm-item ci-dessus) alors que c'est le premier écran vu sur mobile. */
  .msn7-dd { padding: 10px 18px 10px 22px; font-size: 14px; }
  /* Popovers emoji/GIF + tiroir de conversations : cibles ~24px oubliées du premier passage tactile. */
  .wm-chat-emoji-btn, .wm-chat-gif-btn, .wm-chat-snap-btn, .wm-chat-game-btn, .wm-thread-list-toggle { min-width: 40px; min-height: 40px; }
  /* Dock de saisie : sur desktop, boutons + champ + envoyer tiennent sur une seule ligne (assez de
     largeur). Sur mobile, les 4 boutons icône (😊🎬🎮📸) plus l'envoi laissaient au champ de texte
     une largeur ridicule, presque inutilisable — on les fait passer sous le champ, qui garde alors
     toute la largeur disponible. Pas de changement JS/HTML : "order" flex suffit, l'ordre naturel du
     DOM (boutons, champ, envoyer) donne déjà les boutons en fin de ligne 1 sinon.
     wm-chat-input garde flex:1 1 auto (déjà défini plus haut) : avec envoyer à sa suite, les deux
     remplissent déjà toute la largeur de la ligne 1 — les boutons, à eux 4, n'ont donc plus la place
     et retombent automatiquement à la ligne 2 grâce à flex-wrap. */
  .wm-chat-dock { flex-wrap: wrap; }
  .wm-chat-input { order: 1; }
  .wm-chat-send { order: 2; }
  .wm-chat-emoji-btn, .wm-chat-gif-btn, .wm-chat-game-btn, .wm-chat-snap-btn { order: 3; }
  .wm-link-btn { padding: 10px 4px; } /* lien texte (pas d'icône) : agrandir la zone cliquable sans en faire un pavé */
  .wm-emoji-item { min-width: 40px; min-height: 40px; font-size: 20px; }
  .wm-theme-opt { padding: 9px 0; }
  .msn7-about-x { width: 28px; height: 26px; line-height: 24px; font-size: 13px; }
  /* Fenêtre de connexion/inscription (accueil) : même traitement que le bureau connecté (masquer
     Réduire/Agrandir, agrandir Fermer) — cette fenêtre est un .msn7 simple dans .wm-desktop, pas
     .msn7-page dans #wm-desktop-root, donc pas couverte par la règle desktop plus haut (L225-244).
     Premier écran vu par un mobile. */
  .wm-desktop .msn7 .msn7-ctrls i.min,
  .wm-desktop .msn7 .msn7-ctrls i.max { display: none; }
  .wm-desktop .msn7 .msn7-ctrls i.cls { width: 34px; height: 30px; }
  .wm-desktop .msn7 .msn7-ctrls i.cls::before,
  .wm-desktop .msn7 .msn7-ctrls i.cls::after { top: 14px; left: 8px; width: 18px; }
  /* Champs de saisie ≥16px : sous ce seuil, Safari iOS zoome de force la page au focus —
     touche 100% des visiteurs iOS dès le premier tap sur le formulaire d'inscription. Desktop
     garde son 13px XP d'origine (règle hors media query). */
  .msn7-combo input, .msn7-select select, .wm-chat-input, .wm-me-pm, .wm-field-edit { font-size: 16px; }
  /* Boutons secondaires oubliés du premier passage tactile. */
  .msn-buddy-action { padding: 6px 12px; font-size: 13px; }
  .wm-gallery-del, .wm-gallery-avatar { width: 30px; height: 30px; line-height: 28px; font-size: 15px; }
}

/* ============ Immersion transverse : détails XP présents partout dans le bureau ============ */

/* Scrollbars et sélection façon Windows XP / Luna, dans toutes les fenêtres. */
.msn7 ::-webkit-scrollbar { width: 16px; height: 16px; }
.msn7 ::-webkit-scrollbar-track { background: var(--xp-face); border-left: 1px solid var(--xp-shadow); }
.msn7 ::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--msn-blue-pale) 0%, var(--msn-blue-2) 50%, var(--msn-blue-pale) 100%);
  border: 1px solid var(--msn-blue); border-radius: 1px;
}
.msn7 ::-webkit-scrollbar-thumb:hover { filter: brightness(1.08); }
.msn7 ::-webkit-scrollbar-button { display: block; height: 16px; background: linear-gradient(180deg, #f3f8fd, var(--msn-blue-pale)); border: 1px solid var(--msn-blue); }
.msn7 { scrollbar-color: var(--msn-blue-2) var(--xp-face); scrollbar-width: thin; }
.msn7 ::selection { background: var(--msn-blue); color: #fff; }

/* Boîte de dialogue XP (wizme.messageBox) — remplace confirm()/alert() natifs du navigateur. */
.wm-msgbox-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 10px; }
.wm-msgbox-btns--list { flex-direction: column; }
.wm-msgbox-btns--list .wm-btn { width: 100%; box-sizing: border-box; }

/* Bulle d'infobulle système (wizme.balloon), ancrée près de la zone de notification de la taskbar. */
.wm-balloon {
  position: fixed; z-index: 1300; max-width: 240px; padding: 10px 12px;
  background: linear-gradient(180deg, #fffdc7, #fff29a); border: 1px solid #d2b45a; border-radius: 4px;
  box-shadow: 0 6px 18px rgba(0,0,0,.3); font: 12px Tahoma, sans-serif; color: #4a3c00;
  transition: opacity .4s, transform .4s;
}
.wm-balloon.out { opacity: 0; transform: translateY(6px); }
.wm-balloon-click { cursor: pointer; }
.wm-balloon-click:hover, .wm-balloon-click:active { box-shadow: 0 6px 18px rgba(0,0,0,.3), 0 0 0 2px var(--msn-blue); }
.wm-balloon::after {
  content: ""; position: absolute; right: 14px; bottom: -7px; width: 0; height: 0;
  border: 7px solid transparent; border-top-color: #fff29a; border-bottom: 0;
}

/* Menu contextuel (clic droit) sur les icônes de bureau — même famille que .msn7-dd. */
.msn7-dd.wm-ctx { display: block; }

/* Écran de transition à la déconnexion, façon "fermeture de session" XP. */
.wm-logout-screen {
  position: fixed; inset: 0; z-index: 1400; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(120% 100% at 50% 50%, var(--msn-blue) 0%, var(--msn-blue-dk) 100%);
  animation: msn7-appear .25s ease-out;
}
.wm-logout-msg { color: #fff; font: 20px Tahoma, sans-serif; text-shadow: 0 2px 6px rgba(0,0,0,.4); }