/* ── Reset ───────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Variables ───────────────────────────────────────────── */
:root {
  --bg:     #E8E3DA;
  --card:   #F7F5F1;
  --border: rgba(150,135,115,.18);
  --shadow: 0 1px 2px rgba(40,30,15,.04), 0 4px 20px rgba(40,30,15,.08);
  --text-1: #1A1714;
  --text-2: #7B7268;
  --text-3: #AFA89F;
  --accent: #C4A87A;
  --tag-bg: rgba(40,30,15,.06);
  --radius: 16px;
  --gap:    12px;
}

/* ── Base ────────────────────────────────────────────────── */
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI',
               'Helvetica Neue', Arial, sans-serif;
  background: var(--bg) url('Images/BG_Citron.png') repeat;
  color: var(--text-1);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  /* Flex column — le spacer gère le centrage initial */
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
}

/* ═══════════════════════════════════════════════════════════
   SPACER — pousse le contenu vers le bas pour le centrer,
   puis s'effondre pour amener la recette en haut de page
═══════════════════════════════════════════════════════════ */
.top-spacer {
  width: 100%;
  height: var(--spacer-h, 0px);        /* calculé par JS au load */
  flex-shrink: 0;
  pointer-events: none;
  transition: height 0.85s cubic-bezier(.4, 0, .2, 1);
}

/* ═══════════════════════════════════════════════════════════
   DESKTOP  ≥ 768 px
═══════════════════════════════════════════════════════════ */
@media (min-width: 768px) {
  body { gap: 16px; padding: 20px 0; }

  .cv-grid {
    width: 33vw;
    display: grid;
    grid-template-columns: min(40%, 165px) 1fr;
    grid-template-rows: auto auto;
    gap: var(--gap);
  }

  .card-photo    { grid-column: 1; grid-row: 1; }
  .card-identity { grid-column: 2; grid-row: 1; }
  .card-skills   { grid-column: 1 / -1; grid-row: 2; }

  .game-section  { width: 80vw; }
}


/* ── Transition cv-grid (masquage à 5 €) ────────────────── */
.cv-grid {
  transition: margin-top 0.9s cubic-bezier(.4, 0, .2, 1),
              opacity     0.7s ease;
}

/* ── Cards ───────────────────────────────────────────────── */
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: clamp(12px, 2vh, 22px) clamp(14px, 1.5vw, 22px);
  overflow: hidden;
}

/* ── Photo ───────────────────────────────────────────────── */
.card-photo {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── Toggle Pro / Perso ──────────────────────────────────── */
.cv-mode-toggle {
  display: flex;
  background: var(--tag-bg);
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 3px;
  gap: 2px;
  margin-top: auto;
  padding-top: 3px;
}

.cv-mode-btn {
  flex: 1;
  background: none;
  border: none;
  border-radius: 6px;
  padding: 5px 0;
  font-size: .5rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-3);
  cursor: pointer;
  transition: background .2s ease, color .2s ease, box-shadow .2s ease;
  text-align: center;
  line-height: 1;
}

.cv-mode-btn:hover { color: var(--text-2); }

.cv-mode-btn.active {
  background: var(--card);
  color: var(--accent);
  box-shadow: 0 1px 4px rgba(40, 30, 15, .10);
}

/* ── Visibilité Pro / Perso ──────────────────────────────── */
body:not(.mode-perso) .perso-only { display: none; }
body.mode-perso       .pro-only   { display: none; }

.photo-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.photo-placeholder svg  { width: 56px; height: 56px; opacity: .45; }
.photo-placeholder span {
  font-size: .6rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-3);
}

.cv-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: calc(var(--radius) - 1px);
  display: block;
}

/* ── Identité ────────────────────────────────────────────── */
.card-identity {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: clamp(6px, 1vh, 11px);
}

.identity-header { display: flex; flex-direction: column; gap: 2px; }

.identity-name {
  font-size: clamp(.95rem, 1.2vw, 1.45rem);
  font-weight: 300;
  color: var(--text-1);
  letter-spacing: -.01em;
  line-height: 1.2;
}

.identity-name strong { font-weight: 700; }

.identity-title {
  font-size: .68rem;
  color: var(--accent);
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 500;
  line-height: 1.55;
}

.identity-subtitle {
  font-size: .56rem;
  font-weight: 500;
  letter-spacing: .09em;
  opacity: .75;
}

.identity-divider { width: 100%; height: 1px; background: var(--border); border: none; opacity: .7; }

.identity-list { list-style: none; display: flex; flex-direction: column; gap: 3px; }
.identity-list li    { display: flex; gap: 10px; align-items: baseline; }
.identity-list .label {
  font-size: .6rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--text-3);
  min-width: 42px;
}
.identity-list .value { font-size: .8rem; color: var(--text-2); }
.identity-list .value a {
  color: var(--text-2);
  text-decoration: none;
  transition: color .15s;
}
.identity-list .value a:hover { color: var(--accent); }

.identity-spacer { visibility: hidden; pointer-events: none; user-select: none; }

/* ── Compétences ─────────────────────────────────────────── */
.card-skills {
  display: flex;
  flex-direction: column;
  gap: clamp(7px, 1.1vh, 13px);
}

.section-label {
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-3);
}

.skills-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

@media (max-width: 767px) { .skills-grid { grid-template-columns: repeat(2, 1fr); } }

.skill-group { display: flex; flex-direction: column; gap: 5px; }

.skill-group h3 {
  font-size: .58rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--text-2);
}

.skill-tags { display: flex; flex-wrap: wrap; gap: 4px; }

.tag {
  background: var(--tag-bg);
  color: var(--text-2);
  border-radius: 6px;
  padding: 2px 7px;
  font-size: .66rem;
  font-weight: 500;
  border: 1px solid var(--border);
  transition: background .15s, color .15s, border-color .15s;
}

.tag:hover { background: rgba(40,30,15,.10); color: var(--text-1); border-color: var(--accent); }

/* ═══════════════════════════════════════════════════════════
   JEU
═══════════════════════════════════════════════════════════ */
.game-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  transition: opacity 0.5s ease;
}

.game-section.game-hidden {
  opacity: 0;
  pointer-events: none;
}

/* ── Recette ─────────────────────────────────────────────── */
.game-money-wrap {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  margin-bottom: 0;
  /* Apparition douce */
  transition:
    max-height  .55s ease,
    opacity     .45s ease,
    margin-bottom .55s ease;
}

.game-money-wrap.visible {
  max-height: 56px;
  opacity: 1;
  margin-bottom: 12px;
}

.game-money {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: -.01em;
  text-align: center;
}

.game-money.pop      { animation: money-pop .26s ease; }
.game-money.negative { color: #C84040; }

@keyframes money-pop {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.22); }
  100% { transform: scale(1); }
}

/* ── Items (citron → limonade) ───────────────────────────── */
.game-items {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  /* Pas de gap ici : la lemonade-side gère son propre espacement */
}

.game-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}

.game-arrow {
  font-size: 1rem;
  color: var(--text-3);
  margin-top: calc((86px - 1.2em) / 2);
}

/* ── Verre + flèche (apparition) ─────────────────────────── */
.lemonade-side {
  display: flex;
  align-items: flex-start;
  gap: clamp(20px, 5vw, 60px);
  /* Caché jusqu'au 1er verre */
  max-width: 0;
  padding-left: 0;
  overflow: hidden;
  opacity: 0;
  transition:
    max-width    0.55s cubic-bezier(.4, 0, .2, 1),
    padding-left 0.55s cubic-bezier(.4, 0, .2, 1),
    opacity      0.45s ease;
}

.lemonade-side.visible {
  max-width: 300px;
  padding-left: clamp(20px, 5vw, 60px); /* gap entre citron et flèche */
  opacity: 1;
}

/* ── Citron ──────────────────────────────────────────────── */
.lemon-wrapper {
  position: relative;
  width: 86px;
  height: 86px;
  cursor: pointer;
  user-select: none;
}

.lemon {
  font-size: 74px;
  line-height: 86px;
  text-align: center;
  display: block;
  transition: transform .1s;
  will-change: transform;
}

.lemon.whole:hover  { transform: scale(1.1) rotate(-4deg); }
.lemon.whole:active { transform: scale(.9); }

/* Citron grisé quand stock = 0 */
.lemon-wrapper.no-stock .lemon.whole {
  filter: grayscale(1) brightness(.72) opacity(.55);
}
.lemon-wrapper.no-stock .lemon.whole:hover {
  transform: scale(1.06);  /* hover discret */
}

/* Animation "ramasser" (pas de coupe) */
.lemon-wrapper.pick .whole {
  animation: lemon-pick .22s cubic-bezier(.4,0,.2,1);
}

@keyframes lemon-pick {
  0%   { transform: scale(1); }
  40%  { transform: scale(.82) translateY(-6px); }
  100% { transform: scale(1); }
}

.lemon-halves {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: none;
  opacity: 0;
}

.lemon-halves .half { font-size: 50px; display: inline-block; }

.lemon-wrapper.squeeze .whole {
  animation: squeeze-whole .32s cubic-bezier(.4,0,.2,1) forwards;
}
.lemon-wrapper.squeeze .lemon-halves {
  opacity: 1;
  animation: halves-fade .32s ease forwards;
}
.lemon-wrapper.squeeze .lemon-halves .left {
  animation: half-left .32s cubic-bezier(.2,0,.8,1) forwards;
}
.lemon-wrapper.squeeze .lemon-halves .right {
  animation: half-right .32s cubic-bezier(.2,0,.8,1) forwards;
}

@keyframes squeeze-whole {
  0%   { transform: scale(1); opacity: 1; }
  35%  { transform: scale(.65) rotate(-6deg); opacity: .4; }
  100% { transform: scale(0); opacity: 0; }
}
@keyframes halves-fade {
  0%   { opacity: 0; }
  30%  { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes half-left {
  0%   { transform: translateX(0) rotate(0deg) translateY(0); }
  100% { transform: translateX(-30px) rotate(-28deg) translateY(8px); }
}
@keyframes half-right {
  0%   { transform: translateX(0) rotate(0deg) translateY(0); }
  100% { transform: translateX(30px) rotate(28deg) translateY(8px); }
}

/* ── Limonade ────────────────────────────────────────────── */
.lemonade-wrapper {
  width: 86px;
  height: 86px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
  border-radius: 12px;
  transition: background .15s;
}

.lemonade-wrapper:hover                 { background: rgba(40,30,15,.07); }
.lemonade-wrapper:active .lemonade-icon { transform: scale(.88); }

.lemonade-icon {
  font-size: 74px;
  display: block;
  transition: transform .1s, filter .25s;
}

.lemonade-wrapper.empty                 { cursor: default; pointer-events: none; }
.lemonade-wrapper.empty .lemonade-icon  { filter: grayscale(1) brightness(.75) opacity(.45); }

/* ── Compteurs ───────────────────────────────────────────── */
.game-counter {
  font-size: .85rem;
  font-weight: 600;
  color: var(--text-2);
  min-width: 30px;
  text-align: center;
  line-height: 1;
  transition: opacity .2s ease;
}

.game-counter.zero { opacity: 0; }

/* ── Flèches-hint ─────────────────────────────────────────── */
.hint-ring {
  display: flex;
  align-items: center;
  gap: 10px;
}

.hint-arrow {
  font-size: 1.1rem;
  color: var(--text-3);
  opacity: 0;
  pointer-events: none;
  user-select: none;
  transition: opacity .5s ease;
  line-height: 1;
}

/* Activation */
.hint-ring.active .hint-arrow        { opacity: 1; }
.hint-ring.active .hint-arrow.hint-left  { animation: hint-left  2.4s ease-in-out infinite; }
.hint-ring.active .hint-arrow.hint-right { animation: hint-right 2.4s ease-in-out infinite; }

/* Les deux flèches se rapprochent du centre au milieu du cycle */
@keyframes hint-left {
  0%, 100% { transform: translateX(0);   opacity: .45; }
  50%       { transform: translateX(7px); opacity: 1;   }
}

@keyframes hint-right {
  0%, 100% { transform: translateX(0);    opacity: .45; }
  50%       { transform: translateX(-7px); opacity: 1;   }
}

/* ── Workers ─────────────────────────────────────────────── */
.workers-section,
.upgrades-section,
.managers-section {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  justify-items: center;
  width: min(480px, 100%);
  margin-left: auto;
  margin-right: auto;
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  margin-top: 0;
  transition:
    max-height  0.65s ease,
    opacity     0.55s ease,
    margin-top  0.65s ease;
}

.workers-section.visible,
.upgrades-section.visible,
.managers-section.visible {
  max-height: 200px;
  opacity: 1;
  margin-top: 20px;
}

.worker {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  filter: grayscale(1) brightness(.6) opacity(.45);
  cursor: pointer;
  user-select: none;
  transition: filter .3s ease;
}

.worker.active { filter: none; }

.worker.shake { animation: worker-shake .3s ease; }

@keyframes worker-shake {
  0%, 100% { transform: translateX(0); }
  25%       { transform: translateX(-5px); }
  75%       { transform: translateX(5px); }
}

.worker-icon  { font-size: 2.4rem; line-height: 1; }

.worker-label {
  font-size: .58rem;
  text-transform: uppercase;
  letter-spacing: .13em;
  color: var(--text-3);
  font-weight: 600;
  text-align: center;
}

.worker-count {
  font-size: .75rem;
  font-weight: 700;
  color: var(--accent);
  min-height: .9rem;
  line-height: 1;
}

.worker-cost {
  font-size: .55rem;
  color: var(--text-3);
  line-height: 1;
}

.icon-wrap {
  position: relative;
  display: inline-flex;
}

.seller-ring {
  position: absolute;
  top: -5px;
  right: -7px;
  width: 20px;
  height: 20px;
  opacity: 0;
  transition: opacity .3s;
}

.worker.active .seller-ring { opacity: 1; }

.ring-track {
  fill: none;
  stroke: rgba(150, 135, 115, .3);
  stroke-width: 2;
}

.ring-fill {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 47.1;
  stroke-dashoffset: 47.1;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
  transform-box: fill-box;
}

.travel-item {
  position: absolute;
  font-size: .85rem;
  pointer-events: none;
  transform: translate(-50%, -50%);
  z-index: 10;
}

/* ── Bouton retour CV ────────────────────────────────────── */
.btn-back-cv {
  position: fixed;
  top: 14px;
  left: 14px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 12px;
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-2);
  cursor: pointer;
  box-shadow: var(--shadow);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease, background .15s, color .15s;
  z-index: 100;
}

.btn-back-cv:hover { background: rgba(40,30,15,.11); color: var(--text-1); }

.btn-back-cv.visible {
  opacity: 1;
  pointer-events: auto;
}

/* ── Panneaux de jeu (conteneurs) ───────────────────────── */
.game-panels {
  position: fixed;
  display: flex;
  flex-direction: column;
  gap: 6px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
  z-index: 100;
}

.game-panels.visible { opacity: 1; pointer-events: auto; }

.game-panels-left  { top: 54px; left: 14px; align-items: flex-start; }
.game-panels-right { top: 14px; right: 14px; max-height: calc(100vh - 28px); overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--border) transparent; }

/* ── Panneau générique ───────────────────────────────────── */
.game-panel {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow);
}

.game-panels-left  .game-panel { min-width: 0; }
.game-panels-right .game-panel { min-width: 200px; }

.drawer-top  { display: none; }
.actions-btn { display: none; }

.version-label {
  position: fixed;
  bottom: 8px;
  right: 12px;
  font-size: 0.68rem;
  color: var(--text-3);
  opacity: 0.55;
  display: none;
  pointer-events: none;
  letter-spacing: 0.03em;
  z-index: 10;
}
body:has(.game-panels-right.visible) .version-label { display: block; }

.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 11px;
  cursor: pointer;
  user-select: none;
  border-radius: 10px;
  transition: background .15s;
}

.panel-header:hover { background: rgba(40,30,15,.06); }

.panel-label {
  font-size: .52rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--text-3);
}

.panel-icon { font-size: .88rem; color: var(--text-3); line-height: 1; }

.panel-arrow {
  font-size: .55rem;
  color: var(--text-3);
  line-height: 1;
  transition: transform .25s ease;
}

.game-panel.open .panel-arrow { transform: rotate(180deg); }

.panel-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height .3s cubic-bezier(.4,0,.2,1);
}

.game-panel.open .panel-body { max-height: 500px; }

.panel-sep {
  border: none;
  border-top: 1px solid var(--border);
  margin: 0;
}

.panel-items {
  padding: 7px 11px 10px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

/* ── Boutons danger (reset / cookies) ────────────────────── */
.panel-danger-btn {
  background: transparent;
  border: 1px solid rgba(200,60,60,.28);
  border-radius: 7px;
  padding: 5px 10px;
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .08em;
  color: #C84040;
  cursor: pointer;
  transition: background .15s;
  white-space: nowrap;
}

.panel-danger-btn:hover { background: rgba(200,60,60,.08); }

/* ── Labels de sections dans le tableau comptabilité ────── */
.costs-section-label {
  font-size: .46rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--text-3);
  margin-top: 6px;
}

/* ── Séparateur interne tableau coûts ────────────────────── */
.costs-sep { border: none; border-top: 1px solid var(--border); margin: 0; }
.costs-sep-bottom { margin-top: 4px; }

.costs-table {
  padding: 7px 11px 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.costs-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: baseline;
  gap: 6px;
}

.costs-row span:first-child {
  font-size: .6rem;
  color: var(--text-2);
  font-weight: 500;
}

.costs-row span:nth-child(2) {
  font-size: .62rem;
  font-weight: 700;
  color: var(--text-2);
  white-space: nowrap;
  text-align: right;
}

.costs-row span:last-child {
  font-size: .62rem;
  font-weight: 700;
  color: var(--text-3);
  white-space: nowrap;
  text-align: right;
  min-width: 52px;
}

.costs-row.header span {
  font-size: .46rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--text-3);
}

.costs-row.deduct span:nth-child(2) { color: #C84040; }

.costs-row.earn span:nth-child(2) { color: var(--accent); }

.costs-row.net { margin-top: 4px; }
.costs-row.net span:first-child { color: var(--text-3); font-size: .58rem; }
.costs-row.net span:nth-child(2) { color: var(--accent); font-size: .68rem; }

.costs-row.gains { margin-top: 2px; }
.costs-row.gains span:first-child { color: var(--text-1); font-weight: 600; font-size: .6rem; }

.costs-row.bonus span:nth-child(2) { color: var(--accent); }

/* ── Boutons admin ───────────────────────────────────────── */
.cheat-btn {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 5px 10px;
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--accent);
  cursor: pointer;
  box-shadow: var(--shadow);
  transition: background .15s, color .15s;
  white-space: nowrap;
}

.cheat-btn:hover { background: rgba(40,30,15,.11); color: var(--text-1); }

/* ── Panneau Banque (séparé visuellement) ────────────────── */
#bank-panel {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  border-color: transparent;
  box-shadow: none;
  transition: max-height .5s ease, opacity .4s ease;
}

#bank-panel.visible {
  max-height: 500px;
  opacity: 1;
  pointer-events: auto;
  border-color: var(--border);
  box-shadow: var(--shadow);
}

.loan-input-row {
  display: flex;
  gap: 4px;
}

.loan-input {
  flex: 1;
  min-width: 0;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 5px 8px;
  font-size: .62rem;
  font-weight: 600;
  color: var(--text-1);
}

.loan-input:focus { outline: none; border-color: var(--accent); }
.loan-input::-webkit-inner-spin-button,
.loan-input::-webkit-outer-spin-button { -webkit-appearance: none; }
.loan-input { -moz-appearance: textfield; }

.loan-unit-select {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 4px 5px;
  font-size: .6rem;
  font-weight: 700;
  color: var(--text-2);
  cursor: pointer;
  min-width: 36px;
}

.loan-unit-select:focus { outline: none; border-color: var(--accent); }

.loan-preview {
  font-size: .56rem;
  font-weight: 600;
  color: var(--text-3);
  text-align: center;
  line-height: 1.4;
}

.loan-duration-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
}

.loan-dur-btn {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 4px 4px;
  font-size: .54rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--text-2);
  cursor: pointer;
  transition: background .15s, color .15s;
  text-align: center;
  white-space: nowrap;
}

.loan-dur-btn:hover    { background: rgba(40,30,15,.11); color: var(--text-1); }
.loan-dur-btn.selected { background: var(--accent); color: #fff; border-color: var(--accent); }

.loan-confirm-btn {
  background: var(--accent);
  border: none;
  border-radius: 7px;
  padding: 6px 10px;
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .08em;
  color: #fff;
  cursor: pointer;
  transition: background .15s;
  text-align: center;
}

.loan-confirm-btn:hover    { background: #b89660; }
.loan-confirm-btn:disabled { background: var(--text-3); cursor: not-allowed; }

.loan-limit-row span:last-child { color: var(--accent); }

.loan-status {
  border-top: 1px solid var(--border);
  padding-top: 7px;
  margin-top: 2px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.loan-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}

.loan-row span:first-child { font-size: .6rem; color: var(--text-2); font-weight: 500; }
.loan-row span:last-child  { font-size: .62rem; font-weight: 700; color: #C84040; white-space: nowrap; }

/* ── Toggle Acheter / Congédier ──────────────────────────── */
.mode-toggle {
  display: flex;
  gap: 4px;
}

.mode-btn {
  flex: 1;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 4px 6px;
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--text-2);
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
  text-align: center;
  white-space: nowrap;
}

.mode-btn:hover          { background: rgba(40,30,15,.11); color: var(--text-1); }
.mode-btn.selected       { background: var(--accent); color: #fff; border-color: var(--accent); }
#mode-fire.selected      { background: #C84040; border-color: #C84040; }

/* ── Boutons lot (Stratégie d'achats) ────────────────────── */
.bulk-btn {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 4px 10px;
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--text-2);
  cursor: pointer;
  box-shadow: var(--shadow);
  transition: background .15s, color .15s;
  white-space: nowrap;
  text-align: right;
}

.bulk-btn:hover   { background: rgba(40,30,15,.11); color: var(--text-1); }
.bulk-btn.selected {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

/* ── Section consentement cookies ───────────────────────── */
.consent-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  margin-top: 0;
  transition:
    max-height  0.6s ease,
    opacity     0.5s ease,
    margin-top  0.6s ease;
}

.consent-section.visible {
  max-height: 100px;
  opacity: 1;
  margin-top: 16px;
}

.consent-text {
  font-size: .68rem;
  color: var(--text-2);
  text-align: center;
  max-width: 280px;
  line-height: 1.45;
}

.consent-actions { display: flex; gap: 8px; }

.consent-btn {
  padding: 5px 14px;
  border-radius: 8px;
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
  border: 1px solid var(--border);
  transition: background .15s, color .15s;
}

.consent-btn.refuse { background: transparent; color: var(--text-3); }
.consent-btn.refuse:hover { background: rgba(40,30,15,.07); color: var(--text-2); }
.consent-btn.accept { background: var(--accent); color: #fff; border-color: var(--accent); }
.consent-btn.accept:hover { background: #b89660; }

/* ── Managers ────────────────────────────────────────────── */

.manager-worker {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  filter: grayscale(1) brightness(.6) opacity(.45);
  cursor: pointer;
  user-select: none;
  transition: filter .3s ease, opacity .3s ease;
}

.manager-worker.active { filter: none; }

.manager-worker.owned {
  filter: none;
  opacity: .55;
  cursor: default;
}

.manager-worker.owned .worker-cost { color: var(--accent); }

.manager-worker.shake { animation: worker-shake .3s ease; }

/* ── Sections produits dérivés ───────────────────────────── */
.product-section {
  max-height: 0;
  opacity: 0;
  margin-top: 0;
  overflow: hidden;
  transition: max-height .65s ease, opacity .55s ease, margin-top .65s ease;
}

.product-section.visible {
  max-height: 220px;
  opacity: 1;
  margin-top: 20px;
}

.product-section-title {
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-2);
  text-align: center;
  margin-bottom: 8px;
}

.product-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  justify-items: center;
  width: min(480px, 100%);
  margin: 0 auto;
}

.product-display {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  cursor: pointer;
  user-select: none;
  padding: 8px 12px;
  border-radius: 12px;
  border: 1.5px dashed var(--border);
  transition: border-color .2s, border-style .2s, opacity .25s, transform .1s;
}

.product-display:hover  { transform: scale(1.06); }
.product-display:active { transform: scale(.94); }
.product-display.shake  { animation: worker-shake .3s ease; }

.product-display.empty    { opacity: .45; }
.product-display.can-sell { border-color: var(--accent); border-style: solid; }

.product-display .worker-icon { font-size: 2.4rem; line-height: 1; }

.product-stock {
  font-size: .75rem;
  font-weight: 700;
  color: var(--text-1);
  min-height: .9rem;
  line-height: 1;
}

.product-stock.zero { color: var(--text-3); }

.product-price-tag {
  font-size: .55rem;
  color: var(--accent);
  font-weight: 600;
}

/* ── Upgrades section ────────────────────────────────────── */

/* ── Popup gains hors-ligne ──────────────────────────────── */
.offline-popup {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(26, 23, 20, 0);
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s ease, background .35s ease;
  z-index: 200;
}

.offline-popup.visible {
  opacity: 1;
  pointer-events: auto;
  background: rgba(26, 23, 20, .45);
}

.offline-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 8px 40px rgba(40,30,15,.18);
  padding: 28px 36px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  min-width: 220px;
  transform: translateY(10px);
  transition: transform .35s cubic-bezier(.2,.8,.3,1);
}

.offline-popup.visible .offline-card { transform: translateY(0); }

.offline-title {
  font-size: .58rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .15em;
  color: var(--text-3);
}

.offline-duration {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: -.02em;
  line-height: 1;
}

.offline-stats { display: flex; flex-direction: column; gap: 7px; width: 100%; }

.offline-stat {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .82rem;
  color: var(--text-2);
}

.offline-stat strong { color: var(--text-1); font-weight: 700; }

.offline-stat-icon { font-size: 1rem; }

.offline-close-btn {
  margin-top: 4px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 7px 22px;
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .15s;
}

.offline-close-btn:hover { background: #b89660; }

/* ── +1 € qui monte ──────────────────────────────────────── */
.float-money {
  position: absolute;
  pointer-events: none;
  font-size: .88rem;
  font-weight: 700;
  color: var(--accent);
  white-space: nowrap;
  transform: translateX(-50%);
  animation: float-up .95s cubic-bezier(.2,.8,.3,1) forwards;
  z-index: 999;
}

@keyframes float-up {
  0%   { transform: translateX(-50%) translateY(0);     opacity: 1; }
  65%  { opacity: .9; }
  100% { transform: translateX(-50%) translateY(-72px); opacity: 0; }
}

/* ── Sparks déco (desktop uniquement) ───────────────────── */
.spark {
  position: fixed;
  top: 20px;
  pointer-events: none;
  user-select: none;
  z-index: 1;
  max-height: 28vh;
  width: auto;
}

.spark-left  { right: calc(50% + 16.5vw + 24px); }
.spark-right { left:  calc(50% + 16.5vw + 24px); }

@media (max-width: 767px) { .spark { display: none; } }
body.game-open        .spark { display: none; }
body:not(.mode-perso) .spark { display: none; }

/* ── Zone de jeux (index.html) ──────────────────────────── */
.games-zone {
  display: flex;
  gap: 20px;
  align-items: center;
  justify-content: center;
  padding: 8px 0 4px;
}

.game-launcher {
  font-size: 34px;
  line-height: 1;
  background: none;
  border: none;
  cursor: pointer;
  user-select: none;
  padding: 0;
  transition: transform .2s cubic-bezier(.4, 0, .2, 1);
  filter: drop-shadow(0 2px 8px rgba(40,30,15,.10));
}

.game-launcher:hover  { transform: scale(1.13) rotate(-5deg); }
.game-launcher:active { transform: scale(.9); }

/* ── Conteneur + iframe ──────────────────────────────────── */
.game-container {
  width: 100%;
  align-self: stretch;
}

.game-iframe {
  width: 100%;
  height: 100vh;
  border: none;
  display: block;
}

body.game-open {
  padding: 0;
  gap: 0;
}

/* ── -X € qui monte (coûts workers) ─────────────────────── */
.float-cost {
  position: absolute;
  pointer-events: none;
  font-size: .72rem;
  font-weight: 700;
  color: #C84040;
  white-space: nowrap;
  transform: translateX(-50%);
  animation: float-up .85s cubic-bezier(.2,.8,.3,1) forwards;
  z-index: 999;
}

/* ═══════════════════════════════════════════════════════════
   MOBILE  < 768 px   —  ordre : identité → jeu → photo → skills
═══════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  body { gap: var(--gap); padding: 16px 0; }

  .top-spacer { display: none; }

  .cv-grid {
    width: 80vw;
    display: flex;
    flex-direction: column;
    gap: var(--gap);
  }

  .card-identity { order: 1; }
  .card-photo    { order: 3; }
  .card-skills   { order: 4; }

  .game-section { order: 2; width: 80vw; }

  /* ── Panneaux : texte masqué, emoji visible ─────────────── */
  .panel-lbl-text { display: none; }

  /* Fermé : max 10vw (juste l'icône) ; ouvert : s'étend */
  .game-panel:not(.open) { max-width: 10vw; overflow: hidden; }
  .game-panel.open       { min-width: min(200px, 60vw); overflow: visible; }
  .game-panels-right .game-panel { min-width: 20px; }
}