/* Ordinateur de la ville — coque inspirée des bureaux Windows, identité Varelia. */
* {
  box-sizing: border-box;
}
html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
}
body {
  background: #11171f;
  color: var(--texte);
  font-family: "Segoe UI Variable Text", "Segoe UI", Inter, system-ui, sans-serif;
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}
button,
input {
  font: inherit;
  color: inherit;
}
button {
  border: 0;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
a {
  color: inherit;
  text-decoration: none;
}
button:focus-visible,
a:focus-visible,
input:focus-visible,
.fenetre:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.fenetre:focus-visible {
  outline-offset: -2px;
}
[hidden] {
  display: none !important;
}
.sprite {
  position: absolute;
  width: 0;
  height: 0;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.ic {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Jetons : mode clair ou sombre, accent bleu ou orange. */
body[data-mode="clair"] {
  color-scheme: light;
  --verre: rgb(238 241 246 / 0.8);
  --verre-fort: rgb(244 246 250 / 0.92);
  --fenetre: #f9fafc;
  --fenetre-barre: #eef1f6;
  --carte: #ffffff;
  --carte-2: #f1f4f8;
  --texte: #151b26;
  --texte-2: #455066;
  --texte-3: #5b6578;
  --ligne: rgb(21 27 38 / 0.12);
  --survol: rgb(21 27 38 / 0.06);
  --presse: rgb(21 27 38 / 0.1);
  --ombre-fenetre:
    0 0 0 1px rgb(21 27 38 / 0.14), 0 26px 64px -20px rgb(21 27 38 / 0.5);
  --ombre-panneau:
    0 0 0 1px rgb(21 27 38 / 0.1), 0 26px 70px -20px rgb(21 27 38 / 0.45);
}
body[data-mode="sombre"] {
  color-scheme: dark;
  --verre: rgb(28 34 44 / 0.82);
  --verre-fort: rgb(32 39 50 / 0.94);
  --fenetre: #202733;
  --fenetre-barre: #1a2029;
  --carte: #283142;
  --carte-2: #232b3a;
  --texte: #f1f5fb;
  --texte-2: #c3cddb;
  --texte-3: #9eabbe;
  --ligne: rgb(255 255 255 / 0.1);
  --survol: rgb(255 255 255 / 0.07);
  --presse: rgb(255 255 255 / 0.11);
  --ombre-fenetre:
    0 0 0 1px rgb(0 0 0 / 0.55), 0 26px 64px -20px rgb(0 0 0 / 0.75);
  --ombre-panneau:
    0 0 0 1px rgb(0 0 0 / 0.5), 0 26px 70px -20px rgb(0 0 0 / 0.7);
}
body[data-mode="clair"][data-theme="blue"] {
  --accent: #0a5fb4;
  --accent-plein: #0a5fb4;
  --accent-encre: #ffffff;
  --accent-doux: rgb(10 95 180 / 0.12);
}
body[data-mode="clair"][data-theme="orange"] {
  --accent: #a8480a;
  --accent-plein: #b9520d;
  --accent-encre: #ffffff;
  --accent-doux: rgb(185 82 13 / 0.12);
}
body[data-mode="sombre"][data-theme="blue"] {
  --accent: #8cc8ff;
  --accent-plein: #8cc8ff;
  --accent-encre: #0b1b2c;
  --accent-doux: rgb(140 200 255 / 0.14);
}
body[data-mode="sombre"][data-theme="orange"] {
  --accent: #ffa760;
  --accent-plein: #ffa760;
  --accent-encre: #2a1405;
  --accent-doux: rgb(255 167 96 / 0.14);
}
body[data-theme="blue"] {
  --accent-vif: #9fd0ff;
}
body[data-theme="orange"] {
  --accent-vif: #ffb27a;
}

/* Ordinateur : écran (plein cadre par défaut). */
.ordinateur {
  position: absolute;
  inset: 0;
}
.ecran {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #11171f;
  transform: translateZ(0);
}
.session {
  position: absolute;
  inset: 0;
}

/* Fond du bureau. */
.fond-bureau {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: radial-gradient(
    ellipse at 70% 30%,
    #2b4560 0%,
    #1a2a3b 40%,
    #0f151e 80%
  );
}
body[data-theme="orange"] .fond-bureau {
  background: radial-gradient(
    ellipse at 70% 25%,
    #4d3a30,
    #272022 45%,
    #15151b 80%
  );
}
.orb {
  position: absolute;
  border-radius: 50%;
  box-shadow:
    inset 20px 10px 70px #ffffff1c,
    inset -45px -40px 100px #01050da0,
    30px 40px 120px #040b1466;
}
.orb-un {
  top: 12%;
  right: -12%;
  width: 62%;
  aspect-ratio: 1;
  background: linear-gradient(145deg, #5a90b7, #213a55 45%, #101a29 80%);
  transform: rotate(-25deg);
}
.orb-deux {
  right: 14%;
  bottom: -32%;
  width: 40%;
  aspect-ratio: 1;
  background: linear-gradient(135deg, #d49d7c, #785842 35%, #253242 78%);
}
body[data-theme="orange"] .orb-un {
  background: linear-gradient(145deg, #d69a79, #6a5146 45%, #1c202a 80%);
}
.orbite {
  position: absolute;
  top: 8%;
  right: -10%;
  width: 64%;
  aspect-ratio: 1;
  border: 1px solid #b8d5f51c;
  border-radius: 50%;
  transform: rotate(-30deg) scaleX(1.45);
}

/* Bureau et icônes. */
.bureau {
  position: absolute;
  inset: 0 0 48px;
}
.icones-bureau {
  position: absolute;
  inset: 10px auto 10px 8px;
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(auto-fill, 96px);
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.icone-bureau {
  display: grid;
  width: 88px;
  height: 92px;
  justify-items: center;
  align-content: start;
  gap: 6px;
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 8px 4px;
  color: #fff;
  font-size: 12px;
  line-height: 1.25;
  text-align: center;
  text-shadow:
    0 1px 2px #000c,
    0 0 8px #0008;
}
.icone-bureau:hover {
  background: rgb(255 255 255 / 0.12);
}
.icone-bureau.selectionnee,
.icone-bureau:focus-visible {
  border-color: rgb(255 255 255 / 0.35);
  background: rgb(255 255 255 / 0.2);
  outline: none;
}
.fenetres {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.fenetres > * {
  pointer-events: auto;
}

/* Tuiles d'application. */
.tuile {
  display: grid;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  place-items: center;
  border-radius: 10px;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.35),
    0 2px 6px -2px rgb(0 0 0 / 0.45);
}
.glyphe {
  width: 55%;
  height: 55%;
  fill: none;
  stroke: #fff;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 1px 1px rgb(0 0 0 / 0.25));
}
.tuile-bureau {
  width: 46px;
  height: 46px;
  border-radius: 12px;
}
.tuile-tache {
  width: 28px;
  height: 28px;
  border-radius: 7px;
}
.tuile-menu {
  width: 38px;
  height: 38px;
}
.tuile-moyenne {
  width: 42px;
  height: 42px;
}
.tuile-mini {
  width: 20px;
  height: 20px;
  border-radius: 5px;
  box-shadow: none;
}
.teinte-bleu {
  background: linear-gradient(150deg, #4b9cf0, #1f5fbf);
}
.teinte-violet {
  background: linear-gradient(150deg, #9b7cf6, #5a3fc0);
}
.teinte-vert {
  background: linear-gradient(150deg, #3cbd78, #1c7c49);
}
.teinte-orange {
  background: linear-gradient(150deg, #ffa356, #e5641a);
}
.teinte-ambre {
  background: linear-gradient(150deg, #f5bf4f, #c88412);
}
.teinte-sarcelle {
  background: linear-gradient(150deg, #37c2b6, #167a73);
}
.teinte-rose {
  background: linear-gradient(150deg, #f27f9b, #c2405f);
}
.teinte-indigo {
  background: linear-gradient(150deg, #7a86f5, #3a47bf);
}
.teinte-gris {
  background: linear-gradient(150deg, #9aa6b6, #5b6778);
}

/* Fenêtres. */
.fenetre {
  position: absolute;
  display: flex;
  min-width: 380px;
  min-height: 260px;
  flex-direction: column;
  overflow: hidden;
  resize: both;
  border-radius: 8px;
  background: var(--fenetre);
  color: var(--texte);
  box-shadow: var(--ombre-fenetre);
}
.fenetre.agrandie {
  inset: 0 !important;
  width: auto !important;
  height: auto !important;
  border-radius: 0;
  resize: none;
}
.fenetre-barre {
  display: flex;
  height: 36px;
  flex-shrink: 0;
  align-items: center;
  gap: 10px;
  padding-left: 12px;
  background: var(--fenetre-barre);
  user-select: none;
}
.fenetre-barre h2 {
  margin: 0;
  overflow: hidden;
  color: var(--texte-3);
  font-size: 12px;
  font-weight: 400;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fenetre.active .fenetre-barre h2 {
  color: var(--texte);
}
.fenetre-boutons {
  display: flex;
  height: 100%;
  margin-left: auto;
}
.fenetre-boutons button {
  display: grid;
  width: 46px;
  height: 100%;
  place-items: center;
  color: var(--texte-2);
}
.fenetre-boutons .ic {
  width: 14px;
  height: 14px;
  stroke-width: 1.6;
}
.fenetre-boutons button:hover {
  background: var(--survol);
  color: var(--texte);
}
.fenetre-boutons .fermer:hover {
  background: #c42b1c;
  color: #fff;
}
.fenetre-boutons button:focus-visible {
  outline-offset: -3px;
}
.fenetre-corps {
  flex: 1;
  overflow: auto;
  padding: 26px 30px 30px;
}
@keyframes fenetre-arrive {
  from {
    opacity: 0;
    transform: scale(0.97) translateY(6px);
  }
}

/* Contenu des applications. */
.surtitre {
  margin: 0;
  color: var(--accent);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.app-titre {
  margin: 8px 0 0;
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.app-texte {
  max-width: 62ch;
  margin: 10px 0 0;
  color: var(--texte-2);
  line-height: 1.6;
}
.etat {
  display: flex;
  max-width: 70ch;
  gap: 12px;
  margin-top: 20px;
  border: 1px solid var(--ligne);
  border-radius: 8px;
  background: var(--carte-2);
  padding: 12px 14px;
  color: var(--texte-2);
  font-size: 13px;
  line-height: 1.55;
}
.etat .ic {
  margin-top: 2px;
  color: var(--accent);
}
.etat p {
  margin: 0;
}
.grille-apps {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 10px;
  margin-top: 22px;
}
.carte-app {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--ligne);
  border-radius: 8px;
  background: var(--carte);
  padding: 12px;
  text-align: left;
  transition: background 0.15s;
}
.carte-app:hover {
  background: var(--carte-2);
}
.carte-app strong {
  display: block;
  font-weight: 600;
}
.puce {
  display: inline-block;
  margin-top: 4px;
  border-radius: 99px;
  padding: 1px 8px;
  font-size: 11px;
  font-weight: 600;
}
.puce-site {
  background: var(--accent-doux);
  color: var(--accent);
}
.puce-jeu {
  background: var(--survol);
  color: var(--texte-2);
}
.liens {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 22px;
}
.lien-app {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--ligne);
  border-radius: 6px;
  background: var(--carte);
  padding: 9px 14px;
  font-size: 13px;
  font-weight: 500;
  transition: background 0.15s;
}
.lien-app:first-child {
  border-color: transparent;
  background: var(--accent-plein);
  color: var(--accent-encre);
}
.lien-app:hover {
  background: var(--carte-2);
}
.lien-app:first-child:hover {
  background: var(--accent-plein);
  filter: brightness(1.08);
}
.lien-app .ic {
  width: 14px;
  height: 14px;
}
.reglage-titre {
  margin: 24px 0 10px;
  font-size: 13px;
  font-weight: 600;
}
.choix {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.choix-bouton {
  display: grid;
  width: 132px;
  height: 78px;
  align-items: end;
  border: 2px solid var(--ligne);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 12px;
  font-weight: 600;
  text-align: left;
}
.choix-clair {
  background: linear-gradient(160deg, #ffffff, #e3e8ef);
  color: #151b26;
}
.choix-sombre {
  background: linear-gradient(160deg, #2a3446, #161c26);
  color: #f1f5fb;
}
.choix-bleu {
  background: linear-gradient(150deg, #4b9cf0, #1f5fbf);
  color: #fff;
}
.choix-orange {
  background: linear-gradient(150deg, #ffa356, #c4560f);
  color: #fff;
}
.choix-bouton[aria-pressed="true"] {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-doux);
}

/* Portefeuille : onglets et modèle de document (papier, couleurs fixes). */
.onglets {
  display: flex;
  gap: 4px;
  margin: 22px 0 16px;
  border-bottom: 1px solid var(--ligne);
}
.onglets button {
  margin-bottom: -1px;
  border-bottom: 2px solid transparent;
  padding: 8px 14px;
  color: var(--texte-2);
  font-size: 13px;
}
.onglets button[aria-selected="true"] {
  border-bottom-color: var(--accent);
  color: var(--texte);
  font-weight: 600;
}
.document {
  position: relative;
  width: min(490px, 100%);
  aspect-ratio: 808/513;
  overflow: hidden;
  border: 1px solid #b4b0b3;
  border-radius: 19px;
  background: #f3eee8;
  padding: 23px;
  color: #384d67;
  box-shadow: 0 15px 25px #25394e1a;
}
.document::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.22;
  background: repeating-radial-gradient(
    ellipse at 25% 50%,
    transparent 0 9px,
    #7686a3 10px 11px,
    transparent 12px 19px
  );
  pointer-events: none;
}
.document::after {
  content: "VARELIA · ROLEPLAY";
  position: absolute;
  right: -33px;
  bottom: 50px;
  color: #b097b326;
  font-size: 25px;
  font-weight: 700;
  letter-spacing: 5px;
  transform: rotate(-30deg);
  pointer-events: none;
}
.doc-header {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid #6f769a33;
  padding-bottom: 15px;
}
.doc-badge {
  display: grid;
  width: 33px;
  height: 33px;
  place-items: center;
  border-radius: 10px;
  background: #354c70;
}
.doc-header strong {
  display: block;
  font-size: 13px;
}
.doc-header small {
  display: block;
  margin-top: 4px;
  color: #6f6f84;
  font-size: 7px;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.doc-data {
  position: relative;
  display: grid;
  grid-template-columns: 70px 1fr;
  gap: 17px;
  margin-top: 18px;
}
.doc-portrait {
  display: grid;
  height: 90px;
  place-items: center;
  border: 1px dashed #8191a166;
  border-radius: 12px;
  background: #bac3cb44;
  color: #8a99ad;
}
.doc-portrait .ic {
  width: 30px;
  height: 30px;
}
.doc-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 13px;
  font-size: 14px;
}
.doc-fields small {
  display: block;
  margin-bottom: 6px;
  color: #77808b;
  font-size: 7px;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.doc-bottom {
  position: absolute;
  right: 23px;
  bottom: 15px;
  left: 23px;
  display: flex;
  justify-content: space-between;
  color: #6f6e82;
  font-size: 7px;
  letter-spacing: 1px;
}
.doc-legende {
  margin: 12px 0 0;
  color: var(--texte-3);
  font-size: 12px;
}

/* Menu Démarrer. */
.demarrer {
  position: absolute;
  bottom: 58px;
  left: 50%;
  z-index: 6000;
  display: flex;
  width: min(640px, calc(100% - 24px));
  max-height: calc(100% - 76px);
  flex-direction: column;
  overflow: auto;
  border-radius: 12px;
  background: var(--verre-fort);
  padding: 22px 26px 0;
  color: var(--texte);
  box-shadow: var(--ombre-panneau);
  transform: translateX(-50%);
  backdrop-filter: blur(30px) saturate(1.4);
  animation: menu-monte 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes menu-monte {
  from {
    opacity: 0;
    transform: translate(-50%, 14px);
  }
}
.demarrer-recherche {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--ligne);
  border-bottom: 2px solid var(--accent);
  border-radius: 20px;
  background: var(--carte);
  padding: 0 16px;
  color: var(--texte-3);
}
.demarrer-recherche input {
  flex: 1;
  height: 38px;
  border: 0;
  background: none;
  color: var(--texte);
  outline: none;
}
.demarrer-recherche:focus-within {
  box-shadow: 0 0 0 2px var(--accent-doux);
}
.demarrer-section h2 {
  margin: 22px 0 10px;
  font-size: 13px;
  font-weight: 600;
}
.epinglees {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 4px;
}
.app-menu {
  display: grid;
  justify-items: center;
  gap: 8px;
  border-radius: 6px;
  padding: 12px 4px 10px;
  font-size: 12px;
  line-height: 1.25;
  text-align: center;
}
.app-menu:hover,
.recommande:hover {
  background: var(--survol);
}
.aucun-resultat {
  margin: 4px 0 0;
  color: var(--texte-3);
  font-size: 13px;
}
.recommandes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
}
.recommande {
  display: flex;
  align-items: center;
  gap: 12px;
  border-radius: 6px;
  padding: 10px;
  text-align: left;
}
.recommande .ic {
  color: var(--accent);
}
.recommande strong,
.compte strong {
  display: block;
  font-size: 13px;
  font-weight: 600;
}
.recommande small,
.compte small {
  display: block;
  color: var(--texte-3);
  font-size: 12px;
}
.demarrer-pied {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 22px -26px 0;
  border-top: 1px solid var(--ligne);
  background: var(--survol);
  padding: 12px 26px;
}
.compte {
  display: flex;
  align-items: center;
  gap: 12px;
}
.compte-avatar {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 50%;
  background: var(--accent-doux);
  color: var(--accent);
}
.bouton-icone {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 6px;
  color: var(--texte-2);
}
.bouton-icone:hover {
  background: var(--presse);
  color: var(--texte);
}

/* Barre des tâches. */
.barre-taches {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 5000;
  display: flex;
  height: 48px;
  align-items: center;
  justify-content: center;
  border-top: 1px solid var(--ligne);
  background: var(--verre);
  color: var(--texte);
  backdrop-filter: blur(30px) saturate(1.4);
}
.barre-centre {
  display: flex;
  align-items: center;
  gap: 4px;
}
.taches {
  display: flex;
  gap: 4px;
}
.tache {
  position: relative;
  display: grid;
  width: 42px;
  height: 40px;
  place-items: center;
  border-radius: 6px;
}
.tache:hover,
.tache-demarrer[aria-expanded="true"] {
  background: var(--survol);
}
.tache:active .tuile,
.tache-demarrer:active img {
  transform: scale(0.9);
}
.tache::after {
  content: "";
  position: absolute;
  bottom: 2px;
  left: 50%;
  width: 0;
  height: 3px;
  border-radius: 3px;
  background: var(--texte-3);
  transform: translateX(-50%);
  transition: width 0.2s;
}
.tache[data-etat="ouverte"]::after {
  width: 6px;
}
.tache[data-etat="active"] {
  background: var(--survol);
}
.tache[data-etat="active"]::after {
  width: 16px;
  background: var(--accent);
}
.tache-demarrer img {
  filter: drop-shadow(0 1px 1px rgb(0 0 0 / 0.25));
  transition: transform 0.1s;
}
body[data-mode="clair"] .tache-demarrer img {
  filter: brightness(0.35) drop-shadow(0 1px 1px rgb(0 0 0 / 0.1));
}
.recherche-barre {
  display: flex;
  width: 190px;
  height: 34px;
  align-items: center;
  gap: 10px;
  margin: 0 4px;
  border: 1px solid var(--ligne);
  border-radius: 18px;
  background: var(--carte);
  padding: 0 14px;
  color: var(--texte-3);
  font-size: 13px;
}
.recherche-barre:hover {
  background: var(--carte-2);
}
.zone-notif {
  position: absolute;
  top: 0;
  right: 8px;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}
.etat-session {
  display: flex;
  align-items: center;
  gap: 6px;
  border-radius: 6px;
  padding: 6px 10px;
  color: var(--texte-2);
  font-size: 12px;
}
.etat-session .ic {
  width: 14px;
  height: 14px;
}
.heure-barre {
  display: grid;
  justify-items: end;
  padding: 0 8px;
  font-size: 12px;
  line-height: 1.35;
}

/* Notification. */
#toast {
  position: absolute;
  right: 12px;
  bottom: 60px;
  z-index: 7000;
  max-width: 360px;
  border-radius: 8px;
  background: var(--verre-fort);
  padding: 16px 18px;
  color: var(--texte);
  font-size: 13px;
  line-height: 1.55;
  box-shadow: var(--ombre-panneau);
  backdrop-filter: blur(30px);
  animation: menu-monte-droite 0.2s ease-out;
}
@keyframes menu-monte-droite {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
}

/* Écran verrouillé : capture de la ville, heure, accès au bureau. */
.verrouillage {
  position: absolute;
  inset: 0;
  z-index: 8000;
  isolation: isolate;
  display: grid;
  grid-template-rows: auto 1fr auto;
  overflow: hidden;
  color: #fff;
  transition:
    opacity 0.35s ease,
    transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.verrouillage.deverrouillage {
  opacity: 0;
  transform: translateY(-3%);
  pointer-events: none;
}
.verrouillage-fond {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.03);
}
.verrouillage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    180deg,
    rgb(9 13 19 / 0.45),
    rgb(9 13 19 / 0.2) 30%,
    rgb(9 13 19 / 0.55) 65%,
    rgb(9 13 19 / 0.85)
  );
}
.verrouillage-barre {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 22px;
  font-size: 13px;
  font-weight: 600;
  text-shadow: 0 1px 6px #0009;
}
.verrouillage-marque {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.verrouillage-centre {
  display: grid;
  align-content: center;
  justify-items: center;
  padding: 0 20px;
  text-align: center;
}
.verrouillage-date {
  margin: 0;
  font-size: clamp(16px, 1.5vw, 22px);
  font-weight: 600;
  text-shadow: 0 2px 12px #0009;
}
.verrouillage-date::first-letter {
  text-transform: uppercase;
}
.verrouillage-heure {
  margin: 0 0 44px;
  font-size: clamp(72px, 8.5vw, 132px);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.04em;
  line-height: 1;
  text-shadow: 0 6px 34px #0008;
}
.verrouillage-carte {
  width: min(430px, 100%);
  border: 1px solid #ffffff26;
  border-radius: 22px;
  background: rgb(14 20 29 / 0.55);
  padding: 0 26px 22px;
  box-shadow: 0 24px 70px -24px #000c;
  backdrop-filter: blur(18px) saturate(1.2);
}
.verrouillage-icone {
  display: inline-grid;
  width: 60px;
  height: 60px;
  margin-top: -30px;
  place-items: center;
  border-radius: 17px;
  background: linear-gradient(150deg, #34587c, #172230);
  box-shadow:
    inset 0 1px 0 #ffffff2e,
    0 10px 24px -8px #000b;
}
body[data-theme="orange"] .verrouillage-icone {
  background: linear-gradient(150deg, #a65a2b, #2a1d17);
}
.verrouillage-carte h1 {
  margin: 14px 0 8px;
  font-size: 23px;
  letter-spacing: -0.5px;
}
.verrouillage-carte > p {
  margin: 0;
  color: #d9e1ec;
  font-size: 13.5px;
  line-height: 1.55;
}
.verrouillage-bouton {
  width: 100%;
  margin-top: 18px;
  border-radius: 12px;
  background: var(--accent-vif);
  padding: 13px 18px;
  color: #101824;
  font-size: 14px;
  font-weight: 700;
  box-shadow: 0 10px 26px -12px var(--accent-vif);
  transition: filter 0.2s;
}
.verrouillage-bouton:hover {
  filter: brightness(1.06);
}
.verrouillage-bouton:focus-visible {
  outline-color: #fff;
}
.verrouillage-carte .verrouillage-note {
  margin-top: 14px;
  color: #b8c3d2;
  font-size: 11.5px;
  line-height: 1.5;
}
.verrouillage-pied {
  margin: 0;
  padding: 0 20px 16px;
  color: #c3ccd8;
  font-size: 11px;
  text-align: center;
  text-shadow: 0 1px 6px #0009;
}

/* Petits écrans : barre allégée, menu en une colonne. */
@media (max-width: 760px) {
  .recherche-barre span,
  .etat-session {
    display: none;
  }
  .recherche-barre {
    width: 42px;
    justify-content: center;
    padding: 0;
  }
  .epinglees {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .recommandes {
    grid-template-columns: 1fr;
  }
  .fenetre {
    min-width: 0;
  }
}

/* Grand écran : l'interface s'affiche dans un moniteur avec son pied. */
@media (min-width: 1280px) and (min-height: 900px) {
  body {
    background: radial-gradient(
      ellipse at 50% -10%,
      #3b4655 0%,
      #1b222c 55%,
      #0e1218 100%
    );
  }
  .ordinateur {
    inset: auto;
    top: 50%;
    left: 50%;
    width: min(92vw, calc((100vh - 170px) * 1.6 + 36px), 1560px);
    border-radius: 28px;
    background: linear-gradient(180deg, #2c3442, #1a2029);
    padding: 18px;
    box-shadow:
      inset 0 1px 0 #ffffff24,
      inset 0 -1px 0 #0006,
      0 0 0 1px #000a,
      0 50px 100px -40px #000;
    transform: translate(-50%, calc(-50% - 35px));
  }
  .ordinateur::before {
    content: "";
    position: absolute;
    top: 6px;
    left: 50%;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #0b0f14;
    box-shadow: inset 0 0 0 1px #ffffff1a;
    transform: translateX(-50%);
  }
  .ecran {
    position: relative;
    inset: auto;
    aspect-ratio: 16 / 10;
    border-radius: 10px;
    box-shadow: 0 0 0 1px #000;
  }
  .ordinateur-pied {
    position: absolute;
    top: 100%;
    left: 50%;
    width: 26%;
    height: 70px;
    transform: translateX(-50%);
  }
  .ordinateur-pied::before {
    content: "";
    position: absolute;
    top: 0;
    right: 34%;
    left: 34%;
    height: 60px;
    background: linear-gradient(90deg, #171c23, #2d3542 50%, #171c23);
  }
  .ordinateur-pied::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 12px;
    border-radius: 10px 10px 4px 4px;
    background: linear-gradient(180deg, #353d4a, #1d232c);
    box-shadow: 0 16px 34px -10px #000c;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* ── Liquid glass : verre translucide, reflet spéculaire, bord lumineux. ── */
body[data-mode="clair"] {
  --verre-teinte: linear-gradient(
    135deg,
    rgb(255 255 255 / 0.62),
    rgb(255 255 255 / 0.34)
  );
  --verre-bord: rgb(255 255 255 / 0.7);
  --verre-reflet: rgb(255 255 255 / 0.9);
  --verre-ombre: 0 22px 54px -22px rgb(15 25 40 / 0.5);
  --corps-fenetre: rgb(249 250 252 / 0.86);
}
body[data-mode="sombre"] {
  --verre-teinte: linear-gradient(
    135deg,
    rgb(255 255 255 / 0.14),
    rgb(255 255 255 / 0.05)
  );
  --verre-bord: rgb(255 255 255 / 0.18);
  --verre-reflet: rgb(255 255 255 / 0.28);
  --verre-ombre: 0 22px 54px -22px rgb(0 0 0 / 0.8);
  --corps-fenetre: rgb(26 32 42 / 0.88);
}
.verre,
.barre-centre,
.zone-notif,
.demarrer,
#toast,
.fenetre {
  isolation: isolate;
  border: 1px solid var(--verre-bord);
  background: var(--verre-teinte), var(--verre);
  box-shadow:
    inset 0 1px 0 var(--verre-reflet),
    inset 0 -1px 0 rgb(255 255 255 / 0.08),
    var(--verre-ombre);
  backdrop-filter: blur(26px) saturate(1.9) brightness(1.04);
}
/* Reflet spéculaire en haut à gauche, comme une lumière sur du verre. */
.barre-centre::before,
.zone-notif::before,
.demarrer::before,
.fenetre::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background:
    radial-gradient(
      120% 60% at 0% 0%,
      rgb(255 255 255 / 0.35),
      transparent 55%
    ),
    radial-gradient(80% 40% at 100% 100%, rgb(255 255 255 / 0.12), transparent 60%);
  pointer-events: none;
}
body[data-mode="sombre"] .barre-centre::before,
body[data-mode="sombre"] .zone-notif::before,
body[data-mode="sombre"] .demarrer::before,
body[data-mode="sombre"] .fenetre::before {
  opacity: 0.45;
}

/* Barre des tâches flottante : deux îlots de verre. */
.verre,
.barre-centre {
  position: relative;
}
.barre-taches {
  bottom: 8px;
  height: 52px;
  border: 0;
  background: none;
  backdrop-filter: none;
  pointer-events: none;
}
.barre-taches > * {
  pointer-events: auto;
}
.barre-centre {
  height: 52px;
  border-radius: 18px;
  padding: 0 8px;
}
.zone-notif {
  top: 0;
  right: 10px;
  bottom: 0;
  height: 52px;
  border-radius: 18px;
  padding: 0 6px;
}
.bureau {
  bottom: 68px;
}
.demarrer {
  bottom: 70px;
  border-radius: 20px;
}
.demarrer-pied {
  border-radius: 0 0 20px 20px;
}
#toast {
  bottom: 72px;
  border-radius: 14px;
}

/* Fenêtres en verre : barre de titre translucide, contenu lisible. */
.fenetre {
  border-radius: 14px;
}
.fenetre.agrandie {
  border-radius: 0;
  border-color: transparent;
}
.fenetre-barre {
  height: 40px;
  background: transparent;
}
.fenetre-corps {
  margin: 0 6px 6px;
  border: 1px solid var(--ligne);
  border-radius: 10px;
  background: var(--corps-fenetre);
  container-type: inline-size;
}
.fenetre.agrandie .fenetre-corps {
  margin: 0;
  border-radius: 0;
}
.fenetre-boutons button {
  height: 32px;
  margin-top: 4px;
  border-radius: 8px;
}
.fenetre-boutons {
  gap: 2px;
  padding-right: 6px;
}

/* Panneaux de contenu en verre léger. */
.panneau-verre {
  margin-top: 16px;
  border: 1px solid var(--ligne);
  border-radius: 12px;
  background: var(--carte-2);
  padding: 14px 16px;
}
.panneau-verre h4 {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 600;
}
.vide {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  color: var(--texte-3);
  font-size: 13px;
}
.liste-fonctions {
  margin: 0;
  padding-left: 18px;
  color: var(--texte-2);
  line-height: 1.8;
}
.liste-fonctions li::marker {
  color: var(--accent);
}

/* Banque : carte à gauche, comptes et opérations à droite. */
.banque {
  display: grid;
  gap: 28px;
  align-items: start;
}
@container (min-width: 720px) {
  .banque {
    grid-template-columns: minmax(260px, 340px) minmax(0, 1fr);
  }
}

/* Carte Varelia : métal miroir, reflet qui suit le survol. */
.carte-bancaire {
  position: relative;
  isolation: isolate;
  width: 100%;
  max-width: 340px;
  aspect-ratio: 85.6 / 54;
  overflow: hidden;
  border-radius: 16px;
  background:
    linear-gradient(
      115deg,
      #d4d9e0 0%,
      #f8f9fb 16%,
      #a9b0ba 33%,
      #eceff3 50%,
      #959ca7 68%,
      #e2e5ea 84%,
      #b8bec7 100%
    );
  color: #2b313b;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.9),
    inset 0 -1px 0 rgb(0 0 0 / 0.18),
    0 0 0 1px rgb(0 0 0 / 0.08),
    0 22px 40px -18px rgb(15 25 40 / 0.6);
  transform: perspective(900px) rotateX(4deg) rotateY(-6deg);
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.carte-bancaire:hover {
  transform: perspective(900px) rotateX(0) rotateY(0) translateY(-2px);
}
.carte-bancaire::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: repeating-linear-gradient(
    90deg,
    rgb(255 255 255 / 0.05) 0 1px,
    transparent 1px 3px
  );
  mix-blend-mode: overlay;
}
.carte-reflet {
  position: absolute;
  inset: -40%;
  z-index: -1;
  background: linear-gradient(
    105deg,
    transparent 40%,
    rgb(255 255 255 / 0.75) 48%,
    transparent 56%
  );
  transform: translateX(-35%);
  transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.carte-bancaire:hover .carte-reflet {
  transform: translateX(35%);
}
.carte-marque {
  position: absolute;
  top: 9%;
  left: 7%;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.32em;
}
.carte-marque img {
  filter: brightness(0.25);
}
.carte-sans-contact {
  position: absolute;
  top: 9%;
  right: 7%;
  color: #4a515c;
}
.carte-sans-contact .ic {
  width: 22px;
  height: 22px;
  transform: rotate(90deg);
}
.carte-puce {
  position: absolute;
  top: 38%;
  left: 7%;
  width: 15%;
  aspect-ratio: 1.3;
  border-radius: 6px;
  background:
    linear-gradient(90deg, transparent 47%, rgb(90 70 20 / 0.45) 47% 53%, transparent 53%),
    linear-gradient(0deg, transparent 30%, rgb(90 70 20 / 0.4) 30% 34%, transparent 34% 66%, rgb(90 70 20 / 0.4) 66% 70%, transparent 70%),
    linear-gradient(135deg, #f3dc95, #c9a24a 55%, #e9cf82);
  box-shadow: inset 0 0 0 1px rgb(90 70 20 / 0.35);
}
.carte-numero {
  position: absolute;
  bottom: 27%;
  left: 7%;
  font-family: "Cascadia Mono", Consolas, monospace;
  font-size: clamp(13px, 1.4vw, 17px);
  letter-spacing: 0.12em;
  text-shadow: 0 1px 0 rgb(255 255 255 / 0.6);
}
.carte-bas {
  position: absolute;
  right: 7%;
  bottom: 9%;
  left: 7%;
  display: flex;
  justify-content: space-between;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.18em;
}
@media (prefers-reduced-motion: reduce) {
  .carte-bancaire,
  .carte-bancaire:hover {
    transform: none;
  }
}

/* ── Icônes d’application : forme arrondie, reflet et liseré intérieur. ── */
.tuile {
  position: relative;
  overflow: hidden;
  border-radius: 28%;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.45),
    inset 0 0 0 1px rgb(255 255 255 / 0.12),
    inset 0 -6px 12px -6px rgb(0 0 0 / 0.25),
    0 3px 8px -3px rgb(0 0 0 / 0.5);
}
.tuile::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 70% at 30% 0%, rgb(255 255 255 / 0.42), transparent 55%),
    linear-gradient(180deg, transparent 60%, rgb(0 0 0 / 0.12));
  pointer-events: none;
}
.glyphe {
  position: relative;
  z-index: 1;
  width: 54%;
  height: 54%;
  stroke-width: 2.1;
  filter: drop-shadow(0 1px 1.5px rgb(0 0 0 / 0.3));
}
.tuile-mini {
  border-radius: 28%;
}
.teinte-ardoise {
  background: linear-gradient(150deg, #8a9bb3, #4a5a72);
}
.teinte-menthe {
  background: linear-gradient(150deg, #4fd1a5, #1e8f6c);
}
.teinte-cyan {
  background: linear-gradient(150deg, #4cc9f0, #1677b8);
}
.teinte-nuit {
  background: linear-gradient(150deg, #5b6b8c, #1f2a40);
}
.teinte-or {
  background: linear-gradient(150deg, #ffd36e, #d18a12);
}
.teinte-blurple {
  background: linear-gradient(150deg, #7984ff, #4752c4);
}

/* Icônes du bureau : légère élévation au survol. */
.icone-bureau .tuile {
  transition: transform 0.18s cubic-bezier(0.22, 1, 0.36, 1);
}
.icone-bureau:hover .tuile {
  transform: translateY(-2px) scale(1.04);
}
.icone-bureau:active .tuile {
  transform: scale(0.94);
}

/* ── Animations des fenêtres : depuis l’icône d’origine, vers la barre. ── */
.fenetre.anim-ouvre {
  animation: fenetre-ouvre 0.26s cubic-bezier(0.2, 0.9, 0.25, 1) both;
}
.fenetre.anim-reduit {
  animation: fenetre-reduit 0.22s cubic-bezier(0.4, 0, 0.8, 0.6) both;
}
.fenetre.anim-ferme {
  animation: fenetre-ferme 0.16s ease-in both;
}
@keyframes fenetre-ouvre {
  from {
    opacity: 0;
    transform: translate(var(--de-x, 0), var(--de-y, 16px)) scale(0.18);
  }
}
@keyframes fenetre-reduit {
  to {
    opacity: 0;
    transform: translate(var(--de-x, 0), var(--de-y, 16px)) scale(0.12);
  }
}
@keyframes fenetre-ferme {
  to {
    opacity: 0;
    transform: scale(0.94);
  }
}
.fenetre.deplacement {
  cursor: grabbing;
}
.tache.rebond .tuile {
  animation: rebond 0.5s cubic-bezier(0.3, 1.6, 0.5, 1);
}
@keyframes rebond {
  30% {
    transform: translateY(-7px);
  }
  60% {
    transform: translateY(1px);
  }
}

/* Menu Démarrer : tuiles qui apparaissent l’une après l’autre. */
.demarrer .app-menu {
  animation: tuile-arrive 0.32s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.demarrer .app-menu:nth-child(6n + 2) {
  animation-delay: 0.02s;
}
.demarrer .app-menu:nth-child(6n + 3) {
  animation-delay: 0.04s;
}
.demarrer .app-menu:nth-child(6n + 4) {
  animation-delay: 0.06s;
}
.demarrer .app-menu:nth-child(6n + 5) {
  animation-delay: 0.08s;
}
.demarrer .app-menu:nth-child(6n) {
  animation-delay: 0.1s;
}
@keyframes tuile-arrive {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.96);
  }
}
.app-menu .tuile {
  transition: transform 0.18s cubic-bezier(0.22, 1, 0.36, 1);
}
.app-menu:hover .tuile {
  transform: translateY(-2px);
}

/* Arrivée sur le bureau après déverrouillage. */
.session.arrivee .icones-bureau li {
  animation: tuile-arrive 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.session.arrivee .icones-bureau li:nth-child(2) {
  animation-delay: 0.04s;
}
.session.arrivee .icones-bureau li:nth-child(3) {
  animation-delay: 0.08s;
}
.session.arrivee .icones-bureau li:nth-child(4) {
  animation-delay: 0.12s;
}
.session.arrivee .icones-bureau li:nth-child(n + 5) {
  animation-delay: 0.16s;
}
.session.arrivee .barre-taches {
  animation: barre-monte 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes barre-monte {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
}

/* Fond Varelia qui dérive lentement. */
.orb-un {
  animation: derive-un 38s ease-in-out infinite alternate;
}
.orb-deux {
  animation: derive-deux 46s ease-in-out infinite alternate;
}
.orbite {
  animation: orbite 90s linear infinite;
}
@keyframes derive-un {
  to {
    transform: rotate(-18deg) translate(-3%, 2%);
  }
}
@keyframes derive-deux {
  to {
    transform: translate(4%, -3%);
  }
}
@keyframes orbite {
  to {
    transform: rotate(330deg) scaleX(1.45);
  }
}

/* Fonds d’écran photographiques. */
body[data-fond="ville"] .fond-bureau,
body[data-fond="nuit"] .fond-bureau {
  background-position: center;
  background-size: cover;
}
body[data-fond="ville"] .fond-bureau {
  background-image: url("/ville.webp");
}
body[data-fond="nuit"] .fond-bureau {
  background-image: url("/nuit.webp");
}
body[data-fond="ville"] .fond-bureau > *,
body[data-fond="nuit"] .fond-bureau > * {
  display: none;
}
body[data-fond="ville"] .fond-bureau::after,
body[data-fond="nuit"] .fond-bureau::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgb(9 13 19 / 0.45), transparent 35%);
}
.choix-fond-varelia {
  background: radial-gradient(ellipse at 70% 30%, #5a90b7, #1a2a3b 55%, #0f151e);
  color: #fff;
}
.choix-fond-ville,
.choix-fond-nuit {
  background-position: center;
  background-size: cover;
  color: #fff;
  text-shadow: 0 1px 4px #000c;
}
.choix-fond-ville {
  background-image: url("/ville.webp");
}
.choix-fond-nuit {
  background-image: url("/nuit.webp");
}

/* État du serveur dans la barre des tâches. */
.etat-serveur {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.etat-serveur::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #3fbf6f;
  box-shadow: 0 0 0 3px rgb(63 191 111 / 0.22);
}
.heure-barre {
  border-radius: 8px;
}
.heure-barre:hover,
.heure-barre[aria-expanded="true"] {
  background: var(--survol);
}

/* Calendrier. */
.calendrier {
  position: absolute;
  right: 10px;
  bottom: 70px;
  z-index: 6000;
  width: 320px;
  border: 1px solid var(--verre-bord);
  border-radius: 18px;
  background: var(--verre-teinte), var(--verre-fort);
  padding: 18px;
  color: var(--texte);
  box-shadow:
    inset 0 1px 0 var(--verre-reflet),
    var(--verre-ombre);
  backdrop-filter: blur(26px) saturate(1.9);
  animation: menu-monte-droite 0.2s ease-out;
}
.calendrier-jour {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
}
.calendrier-jour::first-letter,
.calendrier-entete h2::first-letter {
  text-transform: uppercase;
}
.calendrier-entete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 12px 0 8px;
  border-top: 1px solid var(--ligne);
  padding-top: 12px;
}
.calendrier-entete h2 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
}
.calendrier-entete > div {
  display: flex;
}
.calendrier-entete .bouton-icone {
  width: 32px;
  height: 32px;
}
.calendrier-grille {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  text-align: center;
}
.calendrier-grille span {
  display: grid;
  height: 36px;
  place-items: center;
  border-radius: 50%;
  font-size: 13px;
}
.calendrier-grille .calendrier-nom {
  height: 28px;
  color: var(--texte-3);
  font-size: 11px;
}
.calendrier-grille .aujourdhui {
  background: var(--accent-plein);
  color: var(--accent-encre);
  font-weight: 700;
}

/* Listes publiques (entreprises, institutions). */
.liste-structures {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 10px;
  margin-top: 18px;
}
.liste-structures .vide {
  grid-column: 1 / -1;
}
.carte-structure {
  display: grid;
  align-content: start;
  gap: 6px;
  border: 1px solid var(--ligne);
  border-radius: 10px;
  background: var(--carte);
  padding: 14px;
  transition:
    background 0.15s,
    transform 0.15s;
}
.carte-structure:hover {
  background: var(--carte-2);
  transform: translateY(-2px);
}
.carte-structure p {
  margin: 0;
  color: var(--texte-2);
  font-size: 13px;
  line-height: 1.5;
}
.structure-details {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  color: var(--texte-3);
  font-size: 12px;
}
.structure-details span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.structure-details .ic {
  width: 12px;
  height: 12px;
}
.puce-direct {
  background: rgb(63 191 111 / 0.15);
  color: #237a45;
}
body[data-mode="sombre"] .puce-direct {
  color: #7fd9a2;
}

/* Liaison : étapes et commande. */
.etapes-liaison {
  display: grid;
  gap: 10px;
  margin: 20px 0 0;
  padding: 0;
  counter-reset: etape;
  list-style: none;
}
.etapes-liaison li {
  position: relative;
  display: grid;
  gap: 4px;
  border: 1px solid var(--ligne);
  border-radius: 10px;
  background: var(--carte);
  padding: 14px 14px 14px 56px;
  counter-increment: etape;
}
.etapes-liaison li::before {
  content: counter(etape);
  position: absolute;
  top: 14px;
  left: 14px;
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 50%;
  background: var(--accent-doux);
  color: var(--accent);
  font-weight: 700;
}
.etapes-liaison span {
  color: var(--texte-2);
  font-size: 13px;
}
.commande {
  justify-self: start;
  margin-top: 4px;
  border: 1px solid var(--ligne);
  border-radius: 6px;
  background: var(--carte-2);
  padding: 6px 10px;
  font-family: "Cascadia Mono", Consolas, monospace;
  font-size: 13px;
}

/* Serveur : nombre de joueurs et jauge. */
.statut-nombre {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0;
}
.statut-nombre strong {
  font-size: 46px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
}
.statut-nombre span {
  color: var(--texte-2);
}
.jauge {
  height: 8px;
  margin: 14px 0 12px;
  overflow: hidden;
  border-radius: 99px;
  background: var(--survol);
}
.jauge-valeur {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #3fbf6f, #7fd9a2);
  transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Boutique : aperçu des coins. */
.grille-coins {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 8px;
  margin-top: 18px;
}
.coin-tuile {
  display: grid;
  gap: 2px;
  border: 1px solid var(--ligne);
  border-radius: 10px;
  background: linear-gradient(160deg, rgb(255 211 110 / 0.18), transparent 70%), var(--carte);
  padding: 12px;
}
.coin-tuile span {
  color: var(--accent);
  font-weight: 700;
}

@media (prefers-reduced-motion: reduce) {
  .orb-un,
  .orb-deux,
  .orbite {
    animation: none !important;
  }
}

/* ── Fenêtres web : applications Varelia réelles dans l’ordinateur. ── */
.fenetre-corps-web {
  display: flex;
  padding: 0;
  overflow: hidden;
}
.web {
  display: flex;
  min-height: 0;
  flex: 1;
  flex-direction: column;
}
.web-barre {
  display: flex;
  align-items: center;
  gap: 4px;
  border-bottom: 1px solid var(--ligne);
  padding: 6px 8px;
}
.web-bouton {
  display: grid;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  place-items: center;
  border-radius: 8px;
  color: var(--texte-2);
}
.web-bouton:hover,
.web-bouton[aria-expanded="true"] {
  background: var(--survol);
  color: var(--texte);
}
.web-bouton .ic {
  width: 16px;
  height: 16px;
}
.web-adresse {
  display: flex;
  min-width: 0;
  height: 32px;
  flex: 1;
  align-items: center;
  gap: 8px;
  margin: 0 4px;
  border: 1px solid var(--ligne);
  border-radius: 99px;
  background: var(--carte-2);
  padding: 0 12px;
  font-size: 12.5px;
  white-space: nowrap;
}
.web-adresse .ic {
  width: 13px;
  height: 13px;
  color: #2f9a5a;
}
.web-site {
  font-weight: 600;
}
.web-chemin {
  overflow: hidden;
  color: var(--texte-3);
  text-overflow: ellipsis;
}
.web-compte {
  position: relative;
}
.web-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 5;
  display: grid;
  min-width: 230px;
  border: 1px solid var(--verre-bord);
  border-radius: 12px;
  background: var(--verre-teinte), var(--verre-fort);
  padding: 6px;
  box-shadow:
    inset 0 1px 0 var(--verre-reflet),
    var(--verre-ombre);
  backdrop-filter: blur(24px) saturate(1.8);
  animation: menu-monte-droite 0.16s ease-out;
}
.web-menu button {
  display: flex;
  align-items: center;
  gap: 10px;
  border-radius: 8px;
  padding: 9px 10px;
  font-size: 13px;
  text-align: left;
}
.web-menu button:hover {
  background: var(--survol);
}
.web-menu .ic {
  width: 16px;
  height: 16px;
  color: var(--accent);
}
.web-cadre {
  position: relative;
  min-height: 0;
  flex: 1;
  background: #fff;
}
.web-cadre iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: var(--fenetre);
}
.fenetres.deplacement iframe {
  pointer-events: none;
}
.web-chargement {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 3px;
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.2s;
  pointer-events: none;
}
.web-chargement span {
  display: block;
  width: 40%;
  height: 100%;
  border-radius: 3px;
  background: var(--accent-plein);
  animation: chargement 1.1s ease-in-out infinite;
}
.fenetre.chargement .web-chargement {
  opacity: 1;
}
@keyframes chargement {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(260%);
  }
}
.web-erreur {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 12px;
  background: var(--fenetre);
  color: var(--texte-2);
  text-align: center;
}
.web-erreur p {
  margin: 0;
}

/* Avertissement de sortie de l’ordinateur. */
.dialogue-sortie {
  position: absolute;
  inset: 0;
  z-index: 7500;
  display: grid;
  place-items: center;
  background: rgb(6 9 14 / 0.5);
  backdrop-filter: blur(4px);
  animation: menu-monte-droite 0.18s ease-out;
}
.dialogue-boite {
  width: min(440px, calc(100% - 32px));
  border: 1px solid var(--verre-bord);
  border-radius: 16px;
  background: var(--verre-teinte), var(--verre-fort);
  padding: 22px;
  color: var(--texte);
  box-shadow:
    inset 0 1px 0 var(--verre-reflet),
    var(--verre-ombre);
  backdrop-filter: blur(26px) saturate(1.8);
}
.dialogue-boite h2 {
  margin: 8px 0 0;
  font-size: 18px;
  font-weight: 600;
  overflow-wrap: anywhere;
}
.dialogue-boite p:not(.surtitre) {
  margin: 10px 0 0;
  color: var(--texte-2);
  font-size: 13.5px;
  line-height: 1.55;
}
.dialogue-boutons {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 18px;
}
.lien-app.lien-plein {
  border-color: transparent;
  background: var(--accent-plein);
  color: var(--accent-encre);
}
@media (prefers-reduced-motion: reduce) {
  .web-chargement span {
    animation: none;
  }
}