/* EXIT — base DA papier noir & blanc + grain. Squelette, à pousser ensuite. */

:root {
  --encre: #141210;
  --papier: #ece7dd;
  --papier-clair: #f5f1e9;
  --papier-fonce: #ddd6c8;
  --rouge: #b23a2e;
  --vert: #3f6b45;
  --or: #9a7b2d;
  --trait: #141210;
}

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

/* respiration : entrée des cartes. Une carte qui apparaît = un tour qui tombe. */
@keyframes entre {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes pop {
  0% { opacity: 0; transform: scale(0.85); }
  60% { transform: scale(1.04); }
  100% { opacity: 1; transform: scale(1); }
}
.entre { animation: entre 0.32s ease both; }
@media (prefers-reduced-motion: reduce) {
  .entre, .delta { animation: none !important; }
}

body {
  font-family: "Georgia", "Times New Roman", serif;
  background: var(--papier);
  color: var(--encre);
  min-height: 100vh;
  line-height: 1.5;
}

/* grain global */
.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 999;
  opacity: 0.06;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

#app { max-width: 720px; margin: 0 auto; padding: 2.5rem 1.25rem 4rem; }
.ecran { display: block; }
.cache { display: none !important; }

.logo {
  font-size: 4rem;
  letter-spacing: 0.15em;
  font-weight: 900;
  text-align: center;
}
.sous-titre { text-align: center; font-style: italic; opacity: 0.7; margin-bottom: 2.5rem; }

.bloc { margin-bottom: 2rem; }
.bloc h2 {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  border-bottom: 2px solid var(--trait);
  padding-bottom: 0.4rem;
  margin-bottom: 1rem;
}

.cartes { display: grid; gap: 0.75rem; }
.carte {
  text-align: left;
  background: var(--papier-fonce);
  border: 2px solid var(--trait);
  padding: 0.9rem 1rem;
  cursor: pointer;
  font-family: inherit;
  color: inherit;
  transition: transform 0.08s ease;
  box-shadow: 3px 3px 0 var(--trait);
}
.carte:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--trait); }
.carte.actif { background: var(--encre); color: var(--papier); }
.carte-nom { display: block; font-weight: 700; font-size: 1.1rem; margin-bottom: 0.25rem; }
.carte-desc { display: block; font-size: 0.9rem; opacity: 0.85; }

.cta {
  display: block;
  width: 100%;
  margin-top: 1.5rem;
  padding: 1rem;
  font-family: inherit;
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--encre);
  color: var(--papier);
  border: none;
  cursor: pointer;
}
.cta:disabled { opacity: 0.35; cursor: not-allowed; }

/* onboarding en deux étapes */
.etape-num {
  font-size: 0.7rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  opacity: 0.5;
  margin-bottom: 0.5rem;
}
.setup-rappel {
  text-align: center;
  font-style: italic;
  opacity: 0.75;
  margin-bottom: 2rem;
  padding-top: 1rem;
}
.setup-nav { display: flex; gap: 0.75rem; align-items: stretch; }
.setup-nav .cta { flex: 1; }
.cta-ghost {
  margin-top: 1.5rem;
  padding: 1rem 1.4rem;
  font-family: inherit;
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: transparent;
  color: var(--encre);
  border: 2px solid var(--trait);
  cursor: pointer;
}
.cta-ghost:hover { background: var(--papier-fonce); }

/* --- jeu --- */
/* HUD = bandeau fin, pas un panneau. La carte doit dominer l'écran. */
.hud { border: none; border-bottom: 1.5px solid var(--trait); padding: 0 0 0.55rem; margin-bottom: 1.9rem; background: none; }
.hud-barre { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; }
.stats-toggle {
  flex-shrink: 0;
  font-family: inherit;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: inherit;
  opacity: 0.55;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: opacity 0.12s ease, color 0.12s ease;
}
.stats-toggle:hover { opacity: 0.9; }
.stats-toggle[aria-expanded="true"] { opacity: 1; color: var(--rouge); }
.jauges { display: grid; gap: 0.5rem; margin-top: 0.9rem; padding-top: 0.9rem; border-top: 1px dashed var(--trait); }
.jauge { display: grid; grid-template-columns: 100px 1fr; align-items: center; gap: 0.5rem; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; }
.barre { height: 10px; border: 1px solid var(--trait); background: var(--papier); }
.barre i { display: block; height: 100%; background: var(--encre); }
/* les 3 chiffres : colonnes fines séparées, pas des pastilles encadrées */
.compteurs { display: flex; align-items: baseline; gap: 0; flex-wrap: wrap; }
.pill { border: none; padding: 0 0.8rem; font-size: 0.82rem; font-weight: 700; letter-spacing: 0.01em; border-left: 1px solid rgba(20, 18, 16, 0.22); }
.pill:first-child { border-left: none; padding-left: 0; }
.pill:not(.chaud) { opacity: 0.72; }
.pill.chaud { color: var(--rouge); animation: pulse-texte 1.6s ease-in-out infinite; }
/* la réputation : un trait gagné, pas une stat. Visible seulement quand la rue parle. */
.pill.rep { font-style: italic; font-weight: 700; }
.pill.rep.neg { color: var(--rouge); opacity: 1; }
.pill.rep.pos { color: var(--vert); opacity: 1; }
@keyframes pulse-texte { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }
@media (prefers-reduced-motion: reduce) { .pill.chaud { animation: none; } }

/* la situation = une carte posée sur le bureau. Feuille claire, ombre franche. */
.event-carte {
  background: var(--papier-clair);
  border: 2px solid var(--trait);
  box-shadow: 5px 5px 0 var(--trait);
  padding: 1.3rem 1.4rem 1.4rem;
  margin-bottom: 1.6rem;
  position: relative;
}
.event-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  opacity: 0.55;
  margin-bottom: 0.7rem;
  padding-bottom: 0.55rem;
  border-bottom: 1px dashed var(--trait);
  font-family: "Georgia", serif;
}
.event-label:empty { display: none; }
.event p#event-texte { font-size: 1.35rem; line-height: 1.55; margin-bottom: 0; letter-spacing: 0.005em; }

/* moment décisif : la carte s'inverse, l'écran retient son souffle */
.event-carte.key-moment {
  background: var(--encre);
  color: var(--papier);
  box-shadow: 7px 7px 0 var(--rouge);
}
.event-carte.key-moment .event-label {
  color: var(--rouge);
  opacity: 1;
  font-weight: 900;
  letter-spacing: 0.28em;
  border-bottom-color: var(--rouge);
}
.event-carte.key-moment p#event-texte { font-size: 1.5rem; }

/* deltas à la résolution */
.deltas { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 1.5rem; }
.delta { font-size: 0.85rem; font-weight: 700; padding: 0.25rem 0.6rem; border: 1px solid var(--trait); animation: pop 0.28s ease both; }
.delta:nth-child(2) { animation-delay: 0.06s; }
.delta:nth-child(3) { animation-delay: 0.12s; }
.delta:nth-child(4) { animation-delay: 0.18s; }
.delta:nth-child(5) { animation-delay: 0.24s; }
.delta.pos { background: var(--vert); color: var(--papier); border-color: var(--vert); }
.delta.neg { background: var(--rouge); color: var(--papier); border-color: var(--rouge); }
.deltas:empty { display: none; }
.choix { display: grid; gap: 0.6rem; }
.choix-btn {
  text-align: left;
  padding: 0.9rem 1rem;
  font-family: inherit;
  font-size: 1rem;
  background: var(--papier-fonce);
  border: 2px solid var(--trait);
  cursor: pointer;
  box-shadow: 3px 3px 0 var(--trait);
}
.choix-btn { transition: transform 0.08s ease, box-shadow 0.08s ease; }
.choix-btn:hover:not(:disabled) { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--trait); }
.choix-btn.verrouille { opacity: 0.4; cursor: not-allowed; }
.choix-label { display: block; font-weight: 700; }
.choix-kw {
  font-weight: 800;
  color: var(--rouge);
  letter-spacing: 0.04em;
  font-size: 0.82em;
  margin-right: 0.15em;
}
.choix-hint { display: block; font-size: 0.82rem; font-style: italic; opacity: 0.65; margin-top: 0.2rem; }

/* --- issue d'un choix --- */
/* la conséquence est une carte posée elle aussi : bordure et ombre prennent la
   couleur de l'issue (vert crédit / rouge découvert), le reste de la DA ne bouge pas */
.issue {
  background: var(--papier-clair);
  border: 2px solid var(--trait);
  box-shadow: 5px 5px 0 var(--trait);
  padding: 1.3rem 1.4rem 1.4rem;
}
.issue.pos { border-color: var(--vert); box-shadow: 5px 5px 0 var(--vert); }
.issue.neg { border-color: var(--rouge); box-shadow: 5px 5px 0 var(--rouge); }
/* le jackpot : l'année en or se voit avant de se lire */
.issue.or { border-color: var(--or); box-shadow: 5px 5px 0 var(--or); }
.issue.or .delta.pos { background: var(--or); border-color: var(--or); }
.issue-verdict.or { color: var(--or); }
.issue p { font-size: 1.2rem; margin-bottom: 1.5rem; }
.issue .cta { margin-top: 0; }

/* verdict des moments décisifs : deux mots tamponnés en géant, façon manchette */
.issue-verdict {
  font-size: 2.6rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1;
  margin-bottom: 1rem;
  transform: rotate(-2deg);
  transform-origin: left bottom;
  animation: tamponne 0.4s ease-out both;
}
.issue-verdict.pos { color: var(--vert); }
.issue-verdict.neg { color: var(--rouge); }
.issue-verdict:empty { display: none; }
@media (prefers-reduced-motion: reduce) { .issue-verdict { animation: none; } }
@media (max-width: 480px) { .issue-verdict { font-size: 2rem; } }

/* flèche tréso : apparaît à l'impact, tient, puis s'efface */
#cash-fleche { margin-left: 0.25em; font-size: 0.75em; }
#cash-fleche.up, #cash-fleche.down { animation: fleche-vie 1.8s ease both; }
#cash-fleche.up { color: var(--vert); }
#cash-fleche.down { color: var(--rouge); }
@keyframes fleche-vie {
  0% { opacity: 0; }
  10% { opacity: 1; }
  70% { opacity: 1; }
  100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { #cash-fleche.up, #cash-fleche.down { animation: none; } }
#pill-cash b, .pill b { font-weight: 700; font-variant-numeric: tabular-nums; }

/* --- la négociation de rachat : le match, en plein contraste --- */
.nego {
  background: var(--encre);
  color: var(--papier);
  border: 2px solid var(--trait);
  box-shadow: 7px 7px 0 var(--or);
  padding: 1.4rem 1.5rem 1.6rem;
}
.nego-kicker {
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.3em;
  color: var(--or);
  border-bottom: 1px dashed var(--or);
  padding-bottom: 0.55rem;
  margin-bottom: 1rem;
}
.nego-montant-label {
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  opacity: 0.6;
  margin-bottom: 0.15rem;
}
.nego-montant {
  font-size: 2.8rem;
  font-weight: 900;
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
  color: var(--or);
  line-height: 1.1;
  margin-bottom: 1.2rem;
}
.nego-montant.monte { animation: pop 0.35s ease both; }
.nego-montant.descend { animation: pop 0.35s ease both; color: var(--rouge); }
@media (prefers-reduced-motion: reduce) { .nego-montant.monte, .nego-montant.descend { animation: none; } }
.nego-texte { font-size: 1.25rem; line-height: 1.5; margin-bottom: 1.3rem; }
.nego .choix-btn { box-shadow: 3px 3px 0 rgba(236, 231, 221, 0.25); }
.nego-feedback { font-size: 1.1rem; font-style: italic; margin-bottom: 1.2rem; }
.nego-feedback.pos { color: #9dbd9f; }
.nego-feedback.neg { color: #d98a80; }
.nego .cta { background: var(--papier); color: var(--encre); }
.nego-signe .choix-label { font-size: 1.15rem; }
@media (max-width: 480px) { .nego-montant { font-size: 2.1rem; } }

/* --- manchette de presse au passage de palier --- */
.manchette {
  background: var(--papier-clair);
  border: 3px double var(--trait);
  padding: 1.3rem 1.4rem 1.5rem;
  box-shadow: 5px 5px 0 var(--trait);
}
.manchette-journal {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-bottom: 1.5px solid var(--trait);
  padding-bottom: 0.4rem;
  margin-bottom: 1.1rem;
}
.manchette-presse {
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.92rem;
}
.manchette-rubrique {
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  opacity: 0.6;
}
.manchette-titre {
  font-size: 2rem;
  font-weight: 900;
  line-height: 1.08;
  margin-bottom: 0.8rem;
}
.manchette-chapo { font-style: italic; font-size: 1.12rem; opacity: 0.9; margin-bottom: 1.2rem; }
.manchette-palier {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--rouge);
  border-top: 1px dashed var(--trait);
  padding-top: 0.9rem;
  margin-bottom: 1.4rem;
}
.manchette .cta { margin-top: 0; }
@media (max-width: 480px) { .manchette-titre { font-size: 1.55rem; } }

/* --- intro : révélation du profil --- */
#ecran-intro { text-align: center; padding-top: 3rem; }
.intro-amorce { font-size: 1.15rem; margin-bottom: 3rem; opacity: 0.85; }
.intro-label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.25em; opacity: 0.6; margin-bottom: 0.75rem; }
.intro-profil {
  font-size: 2.8rem;
  font-weight: 900;
  letter-spacing: 0.05em;
  border-top: 3px solid var(--trait);
  border-bottom: 3px solid var(--trait);
  padding: 1rem 0;
  margin-bottom: 1.25rem;
}
.intro-desc { font-style: italic; font-size: 1.1rem; max-width: 480px; margin: 0 auto 1.5rem; opacity: 0.9; }
/* le plafond tiré au sort, montré sans être expliqué : la promesse d'un destin */
.intro-potentiel { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.22em; opacity: 0.7; margin-bottom: 2.5rem; }
.intro-potentiel .etoiles { letter-spacing: 0.3em; margin-left: 0.4em; font-size: 1.05rem; vertical-align: -1px; }
.intro-potentiel .etoiles i { font-style: normal; opacity: 0.25; }

/* --- carte de fin --- */
#ecran-fin { text-align: center; padding-top: 1rem; }
/* tampon encre estampillé : le verdict administratif de la sortie */
@keyframes tamponne {
  0% { opacity: 0; transform: rotate(-7deg) scale(1.8); }
  70% { opacity: 0.9; transform: rotate(-7deg) scale(0.94); }
  100% { opacity: 0.82; transform: rotate(-7deg) scale(1); }
}
.fin-tampon {
  display: inline-block;
  font-weight: 900;
  font-size: 1.5rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 0.35rem 1.1rem 0.3rem;
  border: 3px double currentColor;
  border-radius: 3px;
  color: var(--encre);
  opacity: 0.82;
  margin-bottom: 1.25rem;
  animation: tamponne 0.4s ease-out both;
}
.fin-tampon.pos { color: var(--vert); }
.fin-tampon.neg { color: var(--rouge); }
.fin-tampon:empty { display: none; }
@media (prefers-reduced-motion: reduce) { .fin-tampon { animation: none; } }
.fin-cause { font-style: italic; opacity: 0.7; margin-bottom: 0.5rem; }
.fin-titre {
  font-size: 2.6rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.1;
  margin-bottom: 1.5rem;
  border-top: 3px solid var(--trait);
  border-bottom: 3px solid var(--trait);
  padding: 1rem 0;
}
/* le surnom : nom de gloire, juste sous le titre. La ligne qu'on partage. */
.fin-surnom { font-size: 1.45rem; font-weight: 700; font-style: italic; letter-spacing: 0.01em; margin: -0.5rem auto 1.4rem; max-width: 500px; }
.fin-surnom:empty { display: none; }
.fin-verdict { font-size: 1.15rem; line-height: 1.55; max-width: 500px; margin: 0 auto 1.75rem; }
.fin-axes { display: grid; gap: 0.6rem; max-width: 380px; margin: 0 auto 1.25rem; }
.axe { display: grid; grid-template-columns: 90px 1fr; align-items: center; gap: 0.6rem; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; }
.axe .barre { height: 12px; border: 1px solid var(--trait); background: var(--papier); }
.axe .barre i { display: block; height: 100%; background: var(--encre); }
.fin-euros { font-size: 1.1rem; font-weight: 700; margin-bottom: 1.5rem; }
.fin-faits { list-style: none; max-width: 380px; margin: 0 auto 1.5rem; }
.fin-faits li { display: flex; justify-content: space-between; border-bottom: 1px dashed var(--trait); padding: 0.4rem 0; font-size: 0.95rem; }
.fin-epilogue { font-style: italic; font-size: 1.05rem; opacity: 0.85; max-width: 480px; margin: 0 auto 2rem; }
/* le fil rouge Marchand : son sort face au vôtre, la ligne qui donne un rival à toute la partie */
.fin-rival { max-width: 480px; margin: 0 auto 2rem; padding-top: 1.5rem; border-top: 1px dashed var(--trait); font-size: 1rem; opacity: 0.82; }
.fin-rival:empty { display: none; }
.rival-kicker { display: block; font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.22em; color: var(--rouge); opacity: 0.85; margin-bottom: 0.5rem; }
/* l'autopsie : la décision qui a tué la boîte, en clair. La ligne qu'on tweete. */
.fin-fatale { max-width: 480px; margin: 0 auto 2rem; padding-top: 1.5rem; border-top: 1px dashed var(--trait); font-size: 1rem; opacity: 0.85; }
.fin-fatale:empty { display: none; }
.fatale-kicker { display: block; font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.22em; color: var(--rouge); opacity: 0.85; margin-bottom: 0.5rem; }
/* la route non prise : le regret tiré d'un vrai choix de la partie. La ligne qui fait rejouer. */
.fin-route { max-width: 480px; margin: 0 auto 2rem; padding-top: 1.5rem; border-top: 1px dashed var(--trait); font-size: 1rem; opacity: 0.78; }
.fin-route:empty { display: none; }
.route-kicker { display: block; font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.22em; opacity: 0.6; margin-bottom: 0.5rem; }
/* partager d'abord, rejouer ensuite : la carte de fin est faite pour circuler */
.fin-actions { display: flex; gap: 0.75rem; align-items: stretch; }
.fin-actions .cta, .fin-actions .cta-ghost { flex: 1; margin-top: 1.5rem; }