@font-face {
  font-family: 'Fraunces';
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url('../fonts/Fraunces-Bold.woff2') format('woff2');
}

/* Jetons du design "carte sombre" (2.1bis), partagés par l'écran d'accueil,
   l'écran personnage, l'écran paramètres, le bandeau de jeu, Favoris et le
   tableau de bord — carte/bandeau sombre translucide, liseret vert, boutons
   en verre. Repris de la palette historique du jeu (encre/vert) : seule la
   structure du design "Golden Key" (cartes sombres, verre, Fraunces) a été
   conservée, ses couleurs or ont été remplacées par la palette d'origine. */
#ecran-accueil, #ecran-personnage, #ecran-reglages, #barre-superieure, #modal-favoris, #modal-dashboard {
  --or-bg: #1f2933;
  --or-bg-glass: rgba(255,255,255,0.06);
  --or-border-glass: rgba(255,255,255,0.18);
  --or-accent: #2c7a4b;
  --or-accent-hover: #35915a;
  --or-accent-bg: rgba(44,122,75,0.35);
  --or-accent-glow: rgba(44,122,75,0.22);
  --or-accent-texte: #fff;
  --or-texte: #fff;
  --or-texte-mute: #9aa5b1;
}

* { box-sizing: border-box; }
.hidden { display: none !important; }
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: 'Segoe UI', Arial, sans-serif;
  color: #1f2933;
}

/* Écrans plein page : accueil, réglages, jeu */
.ecran {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1500;
  background: linear-gradient(160deg, #1f2933 0%, #2c7a4b 100%);
  padding: 20px;
}
.ecran.hidden { display: none; }
#ecran-jeu.hidden { display: none; }

#ecran-accueil {
  background: url('../images/Accueil.png') center/cover no-repeat;
}

.accueil-carte, .parametres-carte {
  background: #fff;
  border-radius: 14px;
  padding: 36px 40px;
  width: min(440px, 100%);
  text-align: center;
  box-shadow: 0 12px 32px rgba(0,0,0,0.35);
}
.parametres-carte { text-align: left; width: min(600px, 100%); padding: 40px 44px; max-height: 90vh; overflow-y: auto; }
.parametres-carte h2 { text-align: center; margin-top: 0; margin-bottom: 4px; font-size: 24px; }
.parametres-soustitre { text-align: center; color: #616e7c; font-size: 13px; margin: 0 0 28px; }

/* Carte "Golden Key" de l'écran Paramètres (2.1bis), même habillage que
   l'écran d'accueil — voir 2.1. */
#ecran-reglages .parametres-carte {
  background: var(--or-bg);
  border: 1px solid var(--or-accent-bg);
  box-shadow: 0 22px 48px rgba(0,0,0,0.5);
}
#ecran-reglages .parametres-carte h2 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 700;
  font-size: 26px;
  color: var(--or-texte);
}
#ecran-reglages .parametres-soustitre { color: var(--or-texte-mute); }

.accueil-carte h1 { margin: 0 0 6px; font-size: 30px; }
.accueil-soustitre { color: #616e7c; margin: 0 0 24px; }
.accueil-boutons { display: flex; flex-direction: column; gap: 12px; }
.accueil-boutons .btn-primaire, .accueil-boutons .btn-secondaire-large {
  padding: 16px; font-size: 16px;
}

/* Carte de l'écran d'accueil (2.1) : carte sombre premium avec liseret vert,
   titre en Fraunces, icône clé en monogramme — se substitue au style blanc
   générique partagé avec .parametres-carte. Structure "carte sombre"
   conservée (2.1bis), couleurs alignées sur la palette historique du jeu. */
#ecran-accueil .accueil-carte {
  background: var(--or-bg);
  border: 1px solid var(--or-accent-bg);
  border-radius: 6px;
  box-shadow: 0 22px 48px rgba(0,0,0,0.45);
}
.accueil-icone {
  color: var(--or-accent, #2c7a4b);
  width: 34px;
  height: 34px;
  margin: 0 auto 12px;
  display: block;
}
#ecran-accueil .accueil-carte h1 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 700;
  font-size: 34px;
  color: var(--or-texte);
  margin: 0 0 12px;
}
.accueil-rule {
  width: 40px;
  height: 1.5px;
  background: var(--or-accent, #2c7a4b);
  margin: 0 auto 16px;
}
#ecran-accueil .accueil-soustitre {
  color: var(--or-texte-mute);
  font-size: 14px;
  letter-spacing: 0.01em;
  margin: 0 0 28px;
}
#ecran-accueil .btn-primaire {
  background: var(--or-accent);
  color: var(--or-accent-texte);
}
#ecran-accueil .btn-primaire:hover { background: var(--or-accent-hover); }
#ecran-accueil .btn-secondaire-large {
  background: var(--or-bg-glass);
  border: 1px solid var(--or-border-glass);
  color: var(--or-texte);
}
#ecran-accueil .btn-secondaire-large:hover { background: rgba(255,255,255,0.12); }
.btn-secondaire-large {
  background: #e4e7eb;
  color: #1f2933;
  border: none;
  border-radius: 6px;
  padding: 16px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  width: 100%;
}
.btn-secondaire-large:hover { background: #d3d9e0; }

.champ-parametre { margin-bottom: 18px; }
.champ-parametre label {
  display: block;
  font-weight: 700;
  margin-bottom: 8px;
  font-size: 13px;
  color: #3e4c59;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* Design "C" de l'écran Paramètres : chaque réglage dans sa propre carte,
   habillée en verre translucide sur fond sombre (design "Golden Key", 2.1bis)
   avec icône et description. */
.champ-parametre-carte {
  background: var(--or-bg-glass, #f6f7f5);
  border: 1px solid var(--or-border-glass, transparent);
  border-radius: 12px;
  padding: 20px 22px;
}
.champ-parametre-entete { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.champ-parametre-entete label {
  margin: 0;
  font-size: 15px;
  text-transform: none;
  letter-spacing: normal;
  color: var(--or-texte, #1f2933);
}
.icon-champ {
  width: 18px; height: 18px; flex-shrink: 0;
  stroke: var(--or-accent, #2c7a4b); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.champ-parametre-desc { font-size: 12.5px; color: var(--or-texte-mute, #616e7c); margin: 0 0 14px; }

.choix-boutons { display: flex; gap: 8px; flex-wrap: wrap; }
.choix-boutons button {
  flex: 1;
  min-width: 70px;
  padding: 10px 6px;
  border: 1px solid var(--or-border-glass, #e4e7eb);
  background: var(--or-bg-glass, #fff);
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
  color: var(--or-texte-mute, #3e4c59);
}
.choix-boutons button.actif {
  border-color: var(--or-accent, #2c7a4b);
  background: var(--or-accent, #2c7a4b);
  color: var(--or-accent-texte, #fff);
}

/* Capital de départ (5 choix) : toujours sur une seule ligne, quitte à
   réduire un peu le texte, plutôt que de passer à la ligne. */
.choix-boutons-capital { flex-wrap: nowrap; }
.choix-boutons-capital button {
  min-width: 0;
  padding: 10px 4px;
  font-size: 12.5px;
  white-space: nowrap;
}

.select-region {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--or-border-glass, #e4e7eb);
  border-radius: 8px;
  background: var(--or-bg-glass, #fff);
  color: var(--or-texte, #3e4c59);
  font-weight: 600;
  font-size: 14px;
  font-family: inherit;
  cursor: pointer;
}
.select-region:focus { outline: none; border-color: var(--or-accent, #2c7a4b); }
.select-region option { color: #1f2933; }

.actions-parametres { display: flex; gap: 10px; margin-top: 20px; }
.actions-parametres button { flex: 1; }

/* Personnalisation du personnage — design "vedette centrée" habillé en
   "Golden Key" (2.1bis) : grand aperçu sous les projecteurs en haut, sections
   en verre translucide sur fond sombre. */
.personnage-carte {
  background: var(--or-bg, #fff);
  border: 1px solid var(--or-accent-bg, transparent);
  border-radius: 14px;
  padding: 0;
  width: min(820px, 100%);
  max-height: 90vh;
  overflow-y: auto;
  overflow-x: hidden;
  box-shadow: 0 22px 48px rgba(0,0,0,0.5);
}

.personnage-vedette {
  background: radial-gradient(ellipse at 50% 20%, var(--or-accent-glow, rgba(44,122,75,0.22)) 0%, var(--or-bg, #1f2933) 70%);
  border-radius: 14px 14px 0 0;
  border-bottom: 1px solid var(--or-accent-bg, transparent);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 36px 24px 28px;
}
.personnage-apercu svg { width: 210px; height: 210px; }
.personnage-titre-vedette {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 700;
  color: var(--or-texte, #fff);
  font-size: 20px;
  margin: 16px 0 0;
  text-align: center;
}

.personnage-corps { padding: 28px 32px 32px; }

.personnage-controles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
@media (max-width: 640px) {
  .personnage-controles { grid-template-columns: 1fr; }
}

.personnage-section {
  background: var(--or-bg-glass, #f6f7f5);
  border: 1px solid var(--or-border-glass, transparent);
  border-radius: 12px;
  padding: 18px 20px;
}
.personnage-section-titre {
  font-weight: 700;
  font-size: 13px;
  color: var(--or-accent, #2c7a4b);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 14px;
}
.champ-perso { margin-bottom: 14px; }
.champ-perso:last-child { margin-bottom: 0; }
.champ-perso label {
  font-size: 11.5px;
  text-transform: none;
  letter-spacing: normal;
  color: var(--or-texte-mute, #616e7c);
  font-weight: 600;
  margin-bottom: 6px;
}

.choix-couleurs { display: flex; gap: 8px; flex-wrap: wrap; }
.choix-couleurs button {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid var(--or-border-glass, #e4e7eb);
  cursor: pointer;
  padding: 0;
}
.choix-couleurs button.actif {
  border-color: var(--or-accent, #2c7a4b);
  box-shadow: 0 0 0 2px var(--or-accent, #2c7a4b);
}

/* Mur des trophées (10bis) : badges permanents, écran personnage, thème
   sombre "Golden Key" — design A (médailles) retenu parmi 5 maquettes. */
.section-trophees {
  margin-top: 24px;
  padding-top: 22px;
  border-top: 1px solid var(--or-border-glass);
}
.section-trophees-titre {
  font-weight: 700;
  font-size: 13px;
  color: var(--or-accent, #2c7a4b);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 16px;
}
.grille-trophees {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(78px, 1fr));
  gap: 18px 10px;
}
.trophee-tuile { text-align: center; cursor: default; }
.trophee-icone {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  margin: 0 auto 7px;
  background: radial-gradient(circle at 35% 30%, #f3d879, #c9a227 55%, #8a6c15 100%);
  box-shadow: 0 3px 10px rgba(201, 162, 39, 0.35), inset 0 1px 2px rgba(255, 255, 255, 0.5);
}
.trophee-nom { font-size: 10.5px; font-weight: 600; line-height: 1.3; color: var(--or-texte); }
.trophee-tuile.verrouille .trophee-icone {
  background: var(--or-bg-glass);
  box-shadow: none;
  border: 1px dashed var(--or-border-glass);
  color: rgba(255, 255, 255, 0.25);
}
.trophee-tuile.verrouille .trophee-nom { color: var(--or-texte-mute); }

#ecran-personnage .btn-secondaire,
#ecran-reglages .btn-secondaire {
  background: var(--or-bg-glass);
  border: 1px solid var(--or-border-glass);
  color: var(--or-texte);
}
#ecran-personnage .btn-secondaire:hover,
#ecran-reglages .btn-secondaire:hover { background: rgba(255,255,255,0.12); }
#ecran-personnage .btn-primaire,
#ecran-reglages .btn-primaire {
  background: var(--or-accent);
  color: var(--or-accent-texte);
}
#ecran-personnage .btn-primaire:hover,
#ecran-reglages .btn-primaire:hover { background: var(--or-accent-hover); }

#avatar-joueur {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid var(--or-accent-bg);
  padding: 0;
  cursor: pointer;
  overflow: hidden;
  background: #323f4b;
  flex-shrink: 0;
}
#avatar-joueur svg { width: 100%; height: 100%; transform: scale(1.15); }
#avatar-joueur:hover { border-color: var(--or-accent); }

/* Bandeau de jeu habillé en "Golden Key" (2.1bis) : même fond sombre que les
   cartes accueil/personnage/paramètres, avec un liseret or en pied et les
   accents recolorés en or. */
#barre-superieure {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 64px;
  background: var(--or-bg);
  color: #fff;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 16px;
  z-index: 1000;
  border-bottom: 1px solid var(--or-accent-bg);
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
  overflow-x: auto;
}

.stat {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
  flex-shrink: 0;
}
.stat-label { font-size: 11px; color: #9aa5b1; text-transform: uppercase; letter-spacing: 0.04em; }
.stat-valeur { font-size: 16px; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.stat-valeur.positif { color: #69db7c; }
.stat-valeur.negatif { color: #ff8787; }

.groupe-stats-financieres {
  display: flex;
  align-items: stretch;
  background: #161d24;
  border: 1px solid var(--or-accent-bg);
  border-radius: 10px;
  overflow: hidden;
  flex-shrink: 0;
}
.groupe-stats-financieres .stat {
  padding: 8px 16px;
}
.groupe-stats-financieres .stat:not(:last-child) {
  border-right: 1px solid #2c363f;
}

#controles-vitesse { display: flex; gap: 14px; align-items: center; margin-left: auto; flex-shrink: 0; }
.btn-vitesse {
  background: none;
  border: none;
  color: #6b7885;
  font-size: 13px;
  font-weight: 700;
  padding: 6px 4px;
  cursor: pointer;
  flex-shrink: 0;
}
.btn-vitesse:hover { color: #9aa5b1; }
.btn-vitesse.actif { color: var(--or-accent); }

#boutons-menu { display: flex; gap: 8px; flex-shrink: 0; }
.btn-secondaire {
  background: #323f4b;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 8px 12px;
  cursor: pointer;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
}
.btn-secondaire:hover { background: #3e4c59; }

#boutons-menu .btn-secondaire {
  background: var(--or-bg-glass);
  border: 1px solid var(--or-border-glass);
  color: var(--or-texte);
}
#boutons-menu .btn-secondaire:hover { background: rgba(255,255,255,0.12); }

.btn-danger {
  background: #c0392b;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 10px 16px;
  cursor: pointer;
  font-weight: 600;
}

#carte {
  position: absolute;
  top: 64px; left: 0; right: 0; bottom: 0;
}

.marqueur-ville-pastille {
  width: 14px; height: 14px;
  border-radius: 50%;
  background: #2c7a4b;
  border: 2px solid #fff;
  box-shadow: 0 0 4px rgba(0,0,0,0.5);
}

.marqueur-bien-pastille {
  width: 10px; height: 10px;
  border-radius: 50%;
  border: 1.5px solid #fff;
  box-shadow: 0 0 3px rgba(0,0,0,0.5);
}

/* Agence de location (7bis) : marqueur unique, couleur distincte des villes
   (vert) et des statuts de biens (bleu/orange/vert), pour ne pas se confondre
   une fois repéré sur la carte. */
.marqueur-agence-pastille {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: #0b7285;
  border: 2px solid #fff;
  box-shadow: 0 0 6px rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  cursor: pointer;
}
.marqueur-agence-pastille::before { content: '🏢'; }

/* Prospecteur d'affaires (7ter) : même principe que le marqueur agence
   ci-dessus, couleur distincte (violet) pour ne confondre ni avec l'agence
   ni avec les statuts de biens. */
.marqueur-prospecteur-pastille {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: #7048a8;
  border: 2px solid #fff;
  box-shadow: 0 0 6px rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  cursor: pointer;
}
.marqueur-prospecteur-pastille::before { content: '🔍'; }

/* Modales */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 20, 25, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
}
.modal-overlay.hidden { display: none; }

.modal-panneau {
  background: #fff;
  border-radius: 10px;
  width: min(900px, 92vw);
  max-height: 86vh;
  overflow-y: auto;
  padding: 20px 24px;
}
.modal-panneau.modal-petit { width: min(460px, 92vw); }
.modal-panneau.modal-victoire { text-align: center; }

/* Ouvrir la fiche d'un bien depuis les Favoris l'affiche comme une deuxième
   colonne du même panneau (une seule carte, une seule ombre) plutôt que
   dans une fenêtre à part (voir js/main.js, ouvrirFicheBien). Par défaut
   (petit écran), la colonne fiche passe simplement sous la liste. */
.colonne-fiche {
  border-top: 1px solid #e4e7eb;
  margin-top: 20px;
  padding-top: 20px;
}
.colonne-fiche.hidden { display: none; }

@media (min-width: 1000px) {
  #modal-favoris .modal-panneau.avec-fiche {
    display: flex;
    align-items: stretch;
    width: min(1300px, 94vw);
    max-height: 90vh;
  }
  .modal-panneau.avec-fiche .colonne-favoris {
    flex: 1 1 auto;
    min-width: 0;
  }
  /* Trois biens par ligne plutôt que le nombre variable habituel : la
     colonne est plus large qu'avant, autant en profiter. */
  .modal-panneau.avec-fiche #favoris-liste {
    grid-template-columns: repeat(3, 1fr);
  }
  .modal-panneau.avec-fiche .colonne-fiche {
    flex: 0 0 380px;
    border-top: none;
    border-left: 1px solid #e4e7eb;
    margin: 0 0 0 24px;
    padding: 0 0 0 24px;
  }
}

.modal-entete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.modal-entete h2 { margin: 0; font-size: 20px; }
.entete-actions { display: flex; align-items: center; gap: 10px; }
.btn-tri {
  background: #e4e7eb;
  color: #3e4c59;
  border: none;
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.btn-tri:hover { background: #d3d9e0; }
.btn-tri.actif { background: #323f4b; color: #fff; }
.filtres-type-bien {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}
.filtres-type-bien .btn-tri.actif { background: #2c7a4b; }
.btn-fermer {
  background: none;
  border: none;
  font-size: 18px;
  cursor: pointer;
  color: #616e7c;
}

.grille-biens {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}
.grille-biens .liste-vide {
  grid-column: 1 / -1;
  text-align: center;
  color: #616e7c;
  padding: 24px 0;
}

/* Favoris (2.1bis) : coquille claire à liseret vert (fond, en-tête, boutons
   de tri) — plus claire que les autres zones du design "carte sombre",
   demandé par l'utilisateur car la version sombre était jugée trop foncée
   pour cette fenêtre précise. Seule cette fenêtre déroge ainsi aux jetons
   `--or-*` partagés (accueil, personnage, paramètres, bandeau, dashboard
   restent sur le fond sombre). */
#modal-favoris .modal-panneau {
  background: #fff;
  border: 1px solid var(--or-accent-bg);
  color: #1f2933;
}
#modal-favoris .colonne-favoris .modal-entete h2 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 700;
  color: #1f2933;
}
#modal-favoris .btn-tri {
  background: #e4e7eb;
  color: #3e4c59;
}
#modal-favoris .btn-tri:hover { background: #d3d9e0; }
#modal-favoris .btn-tri.actif { background: var(--or-accent); color: var(--or-accent-texte); }
#modal-favoris .btn-fermer { color: #616e7c; }
#modal-favoris .btn-fermer:hover { color: #1f2933; }

.carte-bien {
  position: relative;
  border: 1px solid #e4e7eb;
  border-radius: 8px;
  padding: 10px;
  cursor: pointer;
  transition: box-shadow 0.15s, transform 0.15s;
  background: #fafbfc;
}
.carte-bien:hover { box-shadow: 0 4px 10px rgba(0,0,0,0.12); transform: translateY(-2px); }
.carte-bien .photo-bien {
  width: 100%;
  height: 90px;
  border-radius: 6px;
  background: #e4e7eb;
  object-fit: cover;
  display: block;
}
.carte-bien .titre-bien { font-weight: 700; margin: 6px 0 2px; font-size: 14px; }
.carte-bien .sous-titre-bien { font-size: 12px; color: #616e7c; margin-bottom: 6px; }
.carte-bien .prix-bien { font-weight: 700; color: #1f2933; }
.carte-bien .badge-statut {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  margin-bottom: 4px;
}
.badge-vacant { background: #fde3cf; color: #99540f; }
.badge-occupe { background: #d3f9d8; color: #2b8a3e; }
.badge-disponible { background: #d0ebff; color: #1864ab; }

/* Badge "pépite" (5.5bis) : liseré doré fin sur la photo + petite gemme
   ronde dans le coin, uniquement sur les biens possédés tirés dans le
   dernier palier ("très bonne affaire") de leur profil de rendement.
   Design "B" choisi parmi 3 maquettes proposées. */
.photo-wrap-bien { position: relative; }
.photo-bien-pepite { outline: 2px solid #c9a227; outline-offset: 2px; }
.gemme-pepite {
  position: absolute;
  top: -8px; right: -6px;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #e8c65a, #c9a227 70%);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.35);
}
.icone-pepite-dashboard { color: #c9a227; font-size: 13px; margin-right: 3px; text-shadow: 0 0 4px rgba(201,162,39,0.6); }

/* Badge "prospecteur" (7ter) : coin opposé à la gemme pépite ci-dessus (les
   deux ne se recouvrent jamais en pratique — la pépite n'apparaît qu'une fois
   le bien possédé, celui-ci uniquement avant). */
.icone-prospecteur-favori {
  position: absolute;
  top: -8px; left: -6px;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: #7048a8;
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.35);
}

/* Résultat d'une recherche du prospecteur (7ter). */
.prospecteur-message { font-size: 13.5px; margin: 14px 0 10px; }
.prospecteur-echec { color: #616e7c; }
.prospecteur-succes { color: #2c7a4b; font-weight: 600; }
#prospecteur-resultat {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 14px;
}
#prospecteur-resultat .prospecteur-message { grid-column: 1 / -1; }

.btn-favori {
  display: block;
  width: 100%;
  background: #fff;
  color: #f08c00;
  border: 2px solid #f08c00;
  border-radius: 6px;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  margin: 10px 0;
}
.btn-favori:hover { background: #fff4e6; }
.btn-favori.actif { background: #f08c00; color: #fff; }

.rendement-favori { font-size: 12px; color: #616e7c; margin-top: 4px; }

.nav-fiche-hint { font-size: 12px; color: #616e7c; text-align: center; margin: -4px 0 8px; }

.ligne-cliquable { cursor: pointer; }
.ligne-cliquable:hover { background: #f4f6f8; }

.tableau-rentabilite {
  width: 100%;
  border-collapse: collapse;
  margin: 12px 0;
  font-size: 14px;
}
.tableau-rentabilite td, .tableau-rentabilite th {
  padding: 6px 8px;
  border-bottom: 1px solid #e4e7eb;
  text-align: left;
}
.tableau-rentabilite td:last-child, .tableau-rentabilite th:last-child { text-align: right; font-weight: 700; }

.positif { color: #2b8a3e; }
.negatif { color: #c0392b; }

.illustration-fiche { position: relative; width: 100%; max-width: 320px; display: block; margin: 0 auto 12px; }
.illustration-fiche img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 8px;
  background: #e4e7eb;
  display: block;
}

.btn-primaire {
  background: #2c7a4b;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 12px 18px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  width: 100%;
}
.btn-primaire:disabled { background: #9aa5b1; cursor: not-allowed; }

.liste-candidats { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.carte-candidat {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid #e4e7eb;
  border-radius: 8px;
  padding: 8px;
}
.carte-candidat svg { width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0; }
.carte-candidat .info-candidat { flex: 1; font-size: 13px; }
.carte-candidat .nom-candidat { font-weight: 700; }
.carte-candidat button {
  background: #2c7a4b;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 8px 12px;
  cursor: pointer;
  font-weight: 600;
  white-space: nowrap;
}

.actions-modal { display: flex; gap: 10px; margin-top: 14px; }
.actions-modal button { flex: 1; }

.cartes-stats-dashboard {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 22px;
}
.carte-stat-dashboard {
  background: var(--or-bg-glass, #f6f7f5);
  border: 1px solid var(--or-border-glass, transparent);
  border-radius: 10px;
  padding: 12px 14px;
}
.carte-stat-dashboard-entete {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--or-accent, #616e7c);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 6px;
}
.carte-stat-dashboard-entete .icon { width: 16px; height: 16px; flex-shrink: 0; }
.carte-stat-dashboard-valeur { font-size: 19px; font-weight: 700; font-variant-numeric: tabular-nums; }
.carte-stat-dashboard-sous-texte { font-size: 11px; color: var(--or-texte-mute, #616e7c); margin-top: 4px; }

.cartes-graphiques-dashboard {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-bottom: 22px;
}
.carte-graphique {
  background: var(--or-bg-glass, #f6f7f5);
  border: 1px solid var(--or-border-glass, transparent);
  border-radius: 10px;
  padding: 14px 16px;
  position: relative;
}
.carte-graphique svg { cursor: crosshair; }
.graphique-tooltip {
  position: absolute;
  transform: translate(-50%, -130%);
  background: #1f2933;
  color: #fff;
  font-size: 11.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  padding: 5px 9px;
  border-radius: 6px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.08s ease;
  z-index: 1;
}
.carte-graphique-entete {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 10px;
}
.carte-graphique-titre {
  font-size: 11px;
  font-weight: 700;
  color: var(--or-accent, #616e7c);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.carte-graphique-valeur { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--or-texte, inherit); }
.graphique-vide { font-size: 12.5px; color: var(--or-texte-mute, #616e7c); text-align: center; padding: 26px 0; margin: 0; }
.barre-progression-objectif {
  height: 5px;
  background: var(--or-bg-glass, #e4e7eb);
  border-radius: 3px;
  overflow: hidden;
  margin-top: 6px;
}
.barre-progression-objectif > div { height: 100%; background: var(--or-accent, #2c7a4b); }

.icon {
  stroke: currentColor;
  fill: none;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

table.tableau-dashboard { width: 100%; border-collapse: collapse; font-size: 13px; }
table.tableau-dashboard th, table.tableau-dashboard td {
  padding: 8px; border-bottom: 1px solid #e4e7eb; text-align: left; font-variant-numeric: tabular-nums;
}
/* Une valeur (montant, badge...) ne doit jamais se couper sur deux lignes
   (le "€" tout seul en dessous du nombre faisait bizarre) ; les en-têtes,
   eux, peuvent revenir à la ligne pour gagner de la place en largeur. */
table.tableau-dashboard td { white-space: nowrap; }
table.tableau-dashboard th { font-size: 11px; text-transform: uppercase; letter-spacing: 0.03em; color: #616e7c; font-weight: 600; white-space: normal; line-height: 1.3; }
table.tableau-dashboard th.th-triable { cursor: pointer; user-select: none; }
table.tableau-dashboard th.th-triable:hover { color: #3e4c59; }
table.tableau-dashboard th.th-triable .fleche-tri { color: #2c7a4b; margin-left: 3px; }
table.tableau-dashboard tfoot td { font-weight: 700; border-top: 2px solid #1f2933; }
table.tableau-dashboard tr.liseret-occupe { box-shadow: inset 3px 0 0 #2c7a4b; }
table.tableau-dashboard tr.liseret-vacant { box-shadow: inset 3px 0 0 #f08c00; }

/* Tableau des biens unifié (8.6/7.5bis) : mêmes colonnes, en-têtes groupés
   Bien / Finance / Actions (design "B" retenu parmi 5 maquettes), sur le
   tableau de bord patrimoine ET la fenêtre Agence de location. */
table.tableau-dashboard.groupes th.groupe { text-align: center; background: #f6f7f5; }
table.tableau-dashboard.groupes th.groupe:nth-of-type(2) { background: #eaf4ee; }
table.tableau-dashboard.groupes th.groupe:nth-of-type(3) { background: #eaf0fb; }
table.tableau-dashboard.groupes thead tr:nth-child(2) th:nth-child(n+6):nth-child(-n+9) { background: #f6fbf8; }
table.tableau-dashboard.groupes thead tr:nth-child(2) th:nth-child(n+10) { background: #f5f8fd; }
table.tableau-dashboard.groupes .separateur { border-left: 2px solid #e4e7eb; }

.btn-vendre-ligne {
  background: #c9720f;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}
.btn-vendre-ligne:hover { background: #a95e0a; }

#modal-dashboard .modal-panneau,
#modal-agence .modal-panneau { width: min(1180px, 96vw); }

/* Tableau de bord (2.1bis) : coquille claire à liseret vert, sur le même
   principe que Favoris (8.5) — jugé trop sombre par l'utilisateur. Seule
   cette fenêtre et Favoris dérogent ainsi aux jetons `--or-*` partagés
   (accueil, personnage, paramètres, bandeau restent sur le fond sombre).
   Les graphiques gardent leurs couleurs vert/bleu d'origine (cashflow /
   patrimoine net), volontairement inchangées pour rester distinctes. */
#modal-dashboard .modal-panneau {
  background: #fff;
  border: 1px solid var(--or-accent-bg);
  color: #1f2933;
}
#modal-dashboard .modal-entete h2 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 700;
  color: #1f2933;
}
#modal-dashboard .btn-fermer { color: #616e7c; }
#modal-dashboard .btn-fermer:hover { color: #1f2933; }
#modal-dashboard .carte-stat-dashboard,
#modal-dashboard .carte-graphique {
  background: #f6f7f5;
  border-color: #e2e5e1;
}
#modal-dashboard .carte-stat-dashboard-sous-texte,
#modal-dashboard .graphique-vide { color: #616e7c; }
#modal-dashboard .carte-graphique-valeur { color: #1f2933; }
#modal-dashboard .barre-progression-objectif { background: #e4e7eb; }
#modal-dashboard .ligne-cliquable:hover { background: #f4f6f8; }

.badge-statut {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
}
.badge-statut::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge-statut.occupe { background: #eaf4ee; color: #2c7a4b; }
.badge-statut.vacant { background: #fef3e2; color: #a8620a; }

.trophee-victoire { font-size: 56px; line-height: 1; }
.modal-victoire { background: linear-gradient(180deg, #fff8e1 0%, #ffffff 60%); }
.modal-victoire h2 { color: #99540f; }

/* Fenêtres d'annonce (agence de location 7.5, prospecteur d'affaires 7ter) :
   panneau élargi avec un cadre léger, pour laisser l'illustration respirer
   (l'ancien format 460px de large la rendait minuscule, voir changelog #82). */
.modal-panneau.modal-petit.modal-annonce {
  width: min(760px, 94vw);
  border: 1px solid #e4d9c5;
}

/* Illustration : affichée en entier (jamais rognée, contrairement à l'ancien
   object-fit: cover en plein bord qui coupait le haut de l'image) et centrée
   avec une marge de chaque côté plutôt qu'en plein bord à bord, pour limiter
   la hauteur totale de la fenêtre — demandé par l'utilisateur après un premier
   essai en pleine largeur jugé trop haut (nécessitait un scroll). */
.illustration-annonce {
  display: block;
  width: 78%;
  max-width: 78%;
  height: auto;
  object-fit: contain;
  margin: 0 auto 18px;
  border-radius: 10px;
}

/* Notifications discrètes (7bis) : un toast par renouvellement automatique
   de l'agence de location, empilés, chacun disparaît seul après quelques
   secondes (voir main.js, afficherToast). */
#toasts-container {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 3000;
  display: flex;
  flex-direction: column-reverse;
  gap: 8px;
  pointer-events: none;
}
.toast {
  background: #1f2933;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  padding: 10px 14px;
  border-radius: 8px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.3);
  max-width: 320px;
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.toast.disparait { opacity: 0; transform: translateY(6px); }

/* Toast de badge débloqué (10bis) : habillage doré distinct des toasts gris
   de l'agence, même famille de couleur que le liseret "pépite" (5.5bis), pour
   que la récompense se remarque et se savoure (durée nettement plus longue,
   voir C.DUREE_TOAST_BADGE_MS). */
.toast-badge {
  background: linear-gradient(135deg, #f3d879, #c9a227);
  color: #3a2c05;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 6px 20px rgba(201, 162, 39, 0.45);
  animation: toast-badge-pop 0.3s ease;
  /* #toasts-container est en pointer-events:none (ne doit rien bloquer sous
     lui) : réactivé ici pour que le survol et le clic (10bis) fonctionnent. */
  pointer-events: auto;
}
.toast-badge .toast-icone { font-size: 22px; line-height: 1; }
.toast-cliquable { cursor: pointer; transition: opacity 0.25s ease, transform 0.25s ease, filter 0.15s ease; }
.toast-cliquable:hover { filter: brightness(1.08); transform: translateY(-2px); }
@keyframes toast-badge-pop {
  0% { transform: scale(0.85); opacity: 0; }
  60% { transform: scale(1.04); opacity: 1; }
  100% { transform: scale(1); }
}

/* Fenêtre "Agence de location" (7bis) : même tableau que le dashboard,
   avec une colonne bouton bascule par bien et une colonne frais. */
.btn-toggle-agence {
  background: #e4e7eb;
  color: #3e4c59;
  border: none;
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}
.btn-toggle-agence:hover { background: #d3d9e0; }
.btn-toggle-agence.actif { background: #0b7285; color: #fff; }
.btn-toggle-agence.actif:hover { background: #095e6e; }
.frais-agence { color: #c0392b; }