/* Theme sombre chaud du site (palette kalexex), plein ecran 9:16 mobile-first */
:root {
  --bg: #100708; --gold: #d4a574; --bordeaux: #5a1423;
  --papier: #e8dcc0; --encre: #3b2a1a;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body {
  margin: 0; min-height: 100dvh; background: var(--bg); color: var(--gold);
  font: 16px/1.6 Inter, system-ui, sans-serif;
  display: grid; place-items: center; overflow-x: hidden;
}
.ecran { width: min(94vw, 430px); padding: 24px 0; text-align: center; }
#ecran-seance { padding-top: 52px; }
h1 { font-weight: 600; letter-spacing: .04em; }
.ambiance { opacity: .75; font-style: italic; }
textarea {
  width: 100%; padding: 12px; border-radius: 10px; resize: none;
  background: #1d0f10; color: #f0e6d8; border: 1px solid #3a2024; font: inherit;
}
button {
  margin-top: 14px; padding: 12px 26px; border-radius: 999px; cursor: pointer;
  background: var(--bordeaux); color: #f0e6d8; border: 1px solid var(--gold);
  font: inherit; letter-spacing: .03em;
}
button:disabled { opacity: .5; cursor: wait; }

/* La feuille */
#feuille {
  position: relative; width: 100%; aspect-ratio: 3 / 4.35; border-radius: 6px;
  background: radial-gradient(ellipse at 50% 38%, #efe4ca 0%, var(--papier) 55%, #d7c7a2 100%);
  box-shadow: 0 0 60px rgba(0,0,0,.55) inset, 0 8px 40px rgba(0,0,0,.6);
}
#feuille canvas { position: absolute; inset: 0 0 54px 0; width: 100%; height: calc(100% - 54px); }
#calque-gribouillis { touch-action: none; }
#plume {
  position: absolute; left: 0; top: 0; font-size: 30px; pointer-events: none;
  transform: translate(-6px, -26px) rotate(20deg); transition: opacity .6s;
}
#signature {
  position: absolute; right: 8%; bottom: calc(54px + 3%); color: var(--encre);
  font-family: Ecriture, cursive; font-size: 22px;
}

/* Phase 1 : invocation — la feuille respire, la lumiere vacille */
#ecran-seance.invocation #feuille { animation: vaciller 2.8s ease-in-out infinite; }
@keyframes vaciller {
  0%, 100% { filter: brightness(.92); transform: scale(.995); }
  45%      { filter: brightness(1.04); transform: scale(1.002); }
  60%      { filter: brightness(.97); }
}
#texte-invocation {
  position: absolute; top: 50%; left: 10%; right: 10%; transform: translateY(-50%);
  margin: 0; text-align: center; z-index: 2; pointer-events: none;
  font-style: italic; font-size: 15px; color: rgba(59, 42, 26, .6);
  opacity: 0; animation: souffle 3.2s ease-in-out infinite;
}
@keyframes souffle { 0%,100% { opacity: 0; } 50% { opacity: .65; } }
#instruction { opacity: .7; font-style: italic; }
/* ── Bande de boutons en bas de la feuille ──────────────────────────────────── */
#rang-feuille {
  position: absolute; left: 8px; right: 8px; bottom: 8px; height: 38px; z-index: 4;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.rf-gauche { display: flex; gap: 8px; }
/* Style partagé des boutons de la bande (encre/papier, sans margin-top global) */
#btn-personnalite, #btn-protection-feuille, #btn-traduire, #options-feuille {
  margin: 0; padding: 6px 12px; font-size: 12px; letter-spacing: .02em;
  border-radius: 9px; background: rgba(59, 42, 26, .08);
  border: 1px solid rgba(59, 42, 26, .35); color: #5a4632;
  font-style: normal; white-space: nowrap;
}
#btn-personnalite:active, #btn-protection-feuille:active,
#btn-traduire:active, #options-feuille:active { background: rgba(59, 42, 26, .16); }
/* btn-traduire : enfant flex centré dans l'espace RESTANT (jamais sous Options) */
#btn-traduire { margin: 0 auto; font-style: italic; }
#options-feuille { flex-shrink: 0; }
/* Libellé court sur petit écran (le long chevaucherait Options) */
#btn-traduire .lbl-court { display: none; }
@media (max-width: 459px) {
  #btn-traduire .lbl-long { display: none; }
  #btn-traduire .lbl-court { display: inline; }
}
@media (max-width: 379px) {
  #btn-personnalite { font-size: 0; width: 30px; height: 30px; padding: 0; text-align: center; }
  #btn-personnalite::before { content: '👁'; font-size: 15px; }
  #btn-protection-feuille { font-size: 0; width: 30px; height: 30px; padding: 0; text-align: center; }
  #btn-protection-feuille::before { content: '🛡'; font-size: 15px; }
}
#presence { opacity: .55; font-size: 13px; font-style: italic; margin: 6px 0 2px; }
#dialogue { margin-top: 4px; }

/* ── Modal résultat de protection (sceau central) ───────────────────────────── */
#modal-protection-resultat { position: fixed; inset: 0; z-index: 60; }
.mpr-fond { position: absolute; inset: 0; background: rgba(8, 3, 4, .72); backdrop-filter: blur(3px); }
.mpr-panneau {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(88vw, 340px); padding: 28px 22px 22px; text-align: center;
  background: #1c0d10; border: 1px solid rgba(212, 165, 116, .35); border-radius: 18px;
  box-shadow: 0 18px 60px rgba(0, 0, 0, .7);
  animation: mpr-entre .45s cubic-bezier(.2, 1.2, .4, 1);
}
@keyframes mpr-entre { from { transform: translate(-50%, -50%) scale(.82); opacity: 0; } }
#mpr-sceau {
  font-size: 56px; line-height: 1; margin-bottom: 10px;
  filter: drop-shadow(0 0 18px rgba(212, 165, 116, .55));
  animation: mpr-sceau-pulse 2.6s ease-in-out infinite;
}
@keyframes mpr-sceau-pulse {
  0%, 100% { filter: drop-shadow(0 0 12px rgba(212, 165, 116, .35)); transform: scale(1); }
  50% { filter: drop-shadow(0 0 26px rgba(212, 165, 116, .7)); transform: scale(1.06); }
}
.mpr-panneau.refus #mpr-sceau {
  filter: grayscale(1) brightness(.7) drop-shadow(0 0 8px rgba(120, 140, 170, .3));
  animation: none; opacity: .75;
}
.mpr-panneau.refus { border-color: rgba(140, 150, 170, .3); }
#mpr-titre { margin: 0 0 10px; font-size: 17px; font-weight: 600; color: var(--gold); letter-spacing: .02em; }
.mpr-panneau.refus #mpr-titre { color: #b9c0cd; }
#mpr-stats { margin: 0 0 6px; font-size: 13.5px; color: #ead9c4; line-height: 1.55; }
#mpr-rappel { font-size: 12.5px; margin: 10px 0 0; }
#mpr-fermer {
  margin-top: 16px; padding: 11px 28px; border-radius: 999px;
  background: var(--bordeaux); border: 1px solid var(--gold); color: #f0e6d8;
}
.mpr-panneau.refus #mpr-fermer { background: #232027; border-color: rgba(140, 150, 170, .4); }
@media (prefers-reduced-motion: reduce) {
  .mpr-panneau, #mpr-sceau { animation: none; }
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.shimmer {
  position: absolute; pointer-events: none; border-radius: 50%;
  background: radial-gradient(ellipse, rgba(212,165,116,.55), transparent 70%);
  animation: scintille .9s ease-out forwards;
}
@keyframes scintille {
  0% { opacity: 0; transform: scale(.6); }
  35% { opacity: 1; }
  100% { opacity: 0; transform: scale(1.25); }
}

#signature { white-space: pre; }
#signature span {
  display: inline-block; opacity: 0; filter: blur(3px);
  animation: apparait .5s ease forwards;
}
@keyframes apparait { to { opacity: 1; filter: blur(0); } }

@font-face {
  font-family: Ecriture;
  src: url('/fonts/caveat-latin-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}

/* ── Boutons zoom texte (A−/A+) ─────────────────────────────────────────────── */
#ctrl-zoom-texte {
  position: absolute; top: 34px; left: 10px; z-index: 4;
  display: flex; gap: 6px; align-items: center;
}
#btn-zoom-moins, #btn-zoom-plus {
  margin: 0; width: 30px; height: 30px; padding: 0;
  border-radius: 50%; display: grid; place-items: center;
  font-size: 12px; font-weight: 600; font-style: normal; letter-spacing: 0;
  line-height: 1; white-space: nowrap;
  background: rgba(59, 42, 26, .08); border: 1px solid rgba(59, 42, 26, .35);
  color: #5a4632; cursor: pointer;
}
#btn-zoom-moins:active, #btn-zoom-plus:active { background: rgba(59, 42, 26, .18); }
#btn-zoom-moins:disabled, #btn-zoom-plus:disabled { opacity: .35; cursor: default; }

/* Grain du papier (feTurbulence inline, aucun asset) */
#feuille::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  pointer-events: none; opacity: .30; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
}

@media (prefers-reduced-motion: reduce) {
  #ecran-seance.invocation #feuille, #texte-invocation, #signature span { animation: none; }
  #texte-invocation { opacity: .6; }
  #signature span { opacity: 1; filter: none; }
}

#btn-retour-site, #btn-menu {
  position: fixed; top: 10px; z-index: 6; width: 38px; height: 38px; margin: 0; padding: 0;
  border-radius: 50%; display: grid; place-items: center;
  background: rgba(16, 7, 8, .65); border: 1px solid #3a2024; color: var(--gold);
  text-decoration: none;
}
#btn-retour-site { left: 14px; }
#btn-menu { right: 14px; }
#modal-menu { position: fixed; inset: 0; z-index: 50; }
#modal-fond { position: absolute; inset: 0; background: rgba(8, 3, 4, .55); backdrop-filter: blur(2px); }
#modal-panneau {
  position: absolute; left: 0; right: 0; bottom: 0; max-width: 430px; margin: 0 auto;
  background: #1c0d10; border: 1px solid rgba(212, 165, 116, .18); border-bottom: none;
  border-radius: 18px 18px 0 0;
  padding: 16px 16px calc(18px + env(safe-area-inset-bottom));
  animation: monte .25s ease;
}
@keyframes monte { from { transform: translateY(26px); opacity: 0; } }
#modal-fermer {
  position: absolute; top: 10px; right: 12px; width: 34px; height: 34px; margin: 0; padding: 0;
  border-radius: 50%; background: rgba(212, 165, 116, .08);
  border: 1px solid rgba(212, 165, 116, .25); color: #d8c5b2; font-size: 14px;
}
.menu-items { display: flex; flex-direction: column; gap: 8px; margin-top: 34px; }
.menu-item {
  display: flex; align-items: center; gap: 10px; width: 100%; margin: 0;
  padding: 14px; border-radius: 12px; text-align: left; text-decoration: none;
  background: rgba(212, 165, 116, .05); border: 1px solid rgba(212, 165, 116, .14);
  color: #ead9c4; font-size: 14.5px;
}
.menu-item:active { background: rgba(212, 165, 116, .12); }
.menu-item .prix { margin-left: auto; opacity: .75; font-size: 13px; }
.menu-item.danger { color: #e08b80; border-color: rgba(190, 80, 70, .3); }
@media (prefers-reduced-motion: reduce) { #modal-panneau { animation: none; } }
#solde {
  position: fixed; top: 10px; right: 60px; z-index: 5;
  font-size: 14px; opacity: .85; background: rgba(16,7,8,.6);
  padding: 4px 10px; border-radius: 999px; border: 1px solid #3a2024;
}
/* Jauge de connexion : segments lumineux (signal moderne) */
.seg {
  width: 16px; height: 4px; border-radius: 2px;
  background: rgba(59, 42, 26, .16);
  transition: background .6s, box-shadow .6s;
}
.seg.allume { /* couleur par niveau, posee sur le bandeau (niveau-N) */
  background: linear-gradient(90deg, #27b35f, #4ade80);
  box-shadow: 0 0 7px rgba(74, 222, 128, .7);
}
#bandeau-connexion.niveau-2 .seg.allume {
  background: linear-gradient(90deg, #d98a1f, #f5a623);
  box-shadow: 0 0 7px rgba(245, 166, 35, .7);
}
#bandeau-connexion.niveau-1 .seg.allume {
  background: linear-gradient(90deg, #c0392f, #e5484d);
  box-shadow: 0 0 8px rgba(229, 72, 77, .75);
  animation: pulse-perdition 1.6s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  #bandeau-connexion.niveau-1 .seg.allume { animation: none; }
}
/* Bandeau de connexion en haut de la feuille */
#bandeau-connexion {
  position: absolute; top: 0; left: 0; right: 0; z-index: 3; min-height: 26px;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  padding: 4px 12px; gap: 2px 8px; border-radius: 6px 6px 0 0;
  background: rgba(59, 42, 26, .08); border-bottom: 1px solid rgba(59, 42, 26, .15);
}
#connexion-libelle {
  font-size: 10px; letter-spacing: .1em; font-variant: small-caps;
  color: #5a4632; font-family: Inter, sans-serif; line-height: 1.5;
}
#connexion-valeur { font-size: 11px; letter-spacing: .16em; color: #3f2f1e; }
#connexion-flammes { display: flex; gap: 5px; align-items: center; }
#bandeau-connexion.perdition #connexion-valeur { color: #7a1d1d; animation: pulse-perdition 1.6s ease-in-out infinite; }
#bandeau-connexion.rompue #connexion-valeur { color: #7a1d1d; opacity: .85; }
@keyframes pulse-perdition { 0%, 100% { opacity: 1; } 50% { opacity: .5; } }
@media (prefers-reduced-motion: reduce) { #bandeau-connexion.perdition #connexion-valeur { animation: none; } }
#fil { text-align: left; margin-top: 6px; }
#fil .q-consultant { font-size: 13px; opacity: .65; font-style: italic; margin: 14px 0 4px; }
#fil .r-esprit, #texte-protection.r-esprit {
  font-family: Ecriture, cursive; font-size: 21px; line-height: 1.45;
  color: #e8dcc0; margin: 2px 0 8px;
}
#fil .r-esprit span, #texte-protection span {
  display: inline-block; opacity: 0; filter: blur(3px);
  animation: apparait .4s ease forwards; white-space: pre-wrap;
}
#form-echange { display: flex; gap: 10px; align-items: center; margin: 0; padding: 0; }
#champ-echange {
  flex: 1; rows: 1; resize: none;
  border-radius: 999px; padding: 12px 18px;
  border: 1px solid rgba(212, 165, 116, .45);
  background: #1d0f10; color: #f0e6d8; font: inherit;
  line-height: 1.4; overflow: hidden;
}
/* Bouton d'envoi : copie exacte du .send-btn de l'oracle (oracle.css) */
#btn-echange {
  margin-top: 0; padding: 0; width: 44px; height: 44px; flex: 0 0 44px;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #7a3a14, #d4a574);
  border: none; color: #fff; font-size: 18px; font-weight: 700;
  transition: all .2s;
  box-shadow: 0 0 12px rgba(212,165,116,.4), 0 0 24px rgba(212,165,116,.2);
}
#btn-echange:hover { transform: scale(1.1); box-shadow: 0 0 18px rgba(212,165,116,.6), 0 0 30px rgba(212,165,116,.3); }
#btn-echange:disabled { opacity: .4; transform: none; }
/* Bouton « ? » : aide de la conversation, discret */
#btn-aide-conv {
  margin-top: 0; padding: 0; width: 32px; height: 32px; flex: 0 0 32px;
  border-radius: 50%; display: grid; place-items: center; font-size: 15px;
  background: rgba(212, 165, 116, .07); border: 1px solid rgba(212, 165, 116, .3);
  color: var(--gold);
}
#bulle-aide-conv {
  margin: 0 0 8px; padding: 10px 14px; text-align: left;
  background: #1c0d10; border: 1px solid rgba(212, 165, 116, .25); border-radius: 10px;
  font-size: 12.5px; line-height: 1.55; color: #d8c5b2; font-style: italic;
  animation: bulle-entre .2s ease;
}
@keyframes bulle-entre { from { opacity: 0; transform: translateY(4px); } }
@media (prefers-reduced-motion: reduce) { #bulle-aide-conv { animation: none; } }
#texte-rupture { font-style: italic; opacity: .8; }
#btn-protection { display: block; margin: 10px auto; }
@media (prefers-reduced-motion: reduce) {
  #fil .r-esprit span, #texte-protection span { animation: none; opacity: 1; filter: none; }
}
.discret { background: transparent; border: none; opacity: .55; font-size: 14px; text-decoration: underline; }
.seance-passee {
  position: relative; text-align: left; border: 1px solid #3a2024; border-radius: 10px;
  padding: 12px 14px 12px 14px; margin: 12px 0; background: #1a0c0e;
}
.seance-passee h3 { margin: 0 0 2px; font-weight: 600; padding-right: 28px; }
.seance-passee .meta { font-size: 12px; opacity: .55; margin: 0 0 6px; }
.seance-passee .extrait { font-style: italic; font-size: 14px; opacity: .8; }
.seance-passee button { font-size: 13px; padding: 8px 14px; }
.btn-suppr-seance {
  position: absolute; top: 8px; right: 8px;
  margin: 0; padding: 0; width: 24px; height: 24px; border-radius: 50%;
  background: transparent; border: none;
  color: var(--gold); font-size: 13px; line-height: 1;
  opacity: .28; cursor: pointer; display: grid; place-items: center;
  transition: opacity .2s;
}
.btn-suppr-seance:hover { opacity: .8; background: rgba(212, 165, 116, .1); }
.feuille-fondu canvas { opacity: .25; transition: opacity .4s; }
#feuille canvas { transition: opacity .4s; }
#encart-traduction { font-size: 13px; opacity: .8; }
#options-seance { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 14px; }
#options-seance button {
  margin-top: 0; font-size: 12.5px; letter-spacing: .02em; padding: 10px 16px;
  border-radius: 10px; background: rgba(212, 165, 116, .06);
  border: 1px solid rgba(212, 165, 116, .22); color: #d8c5b2;
}
#options-seance button:active { transform: scale(.97); }
#btn-couper { border-color: rgba(190, 80, 70, .4); color: #d9a8a0; background: rgba(122, 29, 29, .08); }

/* Accueil : demo d'ecriture en boucle + CTA + chips + aide */
#demo-ecriture { width: 100%; height: 92px; display: block; margin: 0 0 6px; opacity: 1; transition: opacity .7s; }
.btn-principal {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, #4a0f1d, #7a1d2e 55%, #5a1423);
  border: 1px solid rgba(212, 165, 116, .7); border-radius: 12px;
  padding: 15px 38px; font-weight: 600; letter-spacing: .08em; font-size: 16px;
  box-shadow: 0 6px 22px rgba(90, 20, 35, .45);
  transition: transform .25s ease, filter .25s ease;
  animation: ea-aura 3.4s ease-in-out infinite;
}
/* Reflet qui balaye le bouton, comme une flamme qui passe */
.btn-principal::before {
  content: ''; position: absolute; top: -4px; bottom: -4px; left: -80%; width: 55%;
  background: linear-gradient(100deg, transparent, rgba(255, 233, 200, .22), transparent);
  transform: skewX(-18deg); pointer-events: none;
  animation: ea-reflet 4.8s ease-in-out infinite;
}
.btn-principal:hover { transform: translateY(-1px); filter: brightness(1.14); }
.btn-principal:active { transform: scale(.97); animation-play-state: paused; }
@keyframes ea-aura {
  0%, 100% { box-shadow: 0 6px 22px rgba(90, 20, 35, .45), 0 0 16px rgba(212, 165, 116, .10); }
  50% { box-shadow: 0 8px 28px rgba(122, 29, 46, .6), 0 0 0 3px rgba(212, 165, 116, .07), 0 0 34px rgba(212, 165, 116, .3); }
}
@keyframes ea-reflet {
  0%, 58% { left: -80%; }
  82%, 100% { left: 135%; }
}
/* Acces direct a l'historique depuis l'accueil (meme flux que le menu) */
.lien-historique {
  display: block; margin: 22px auto 0; padding: 8px 16px;
  background: none; border: none; border-bottom: 1px solid rgba(212, 165, 116, .3);
  color: #c9a07a; font-size: 13.5px; letter-spacing: .03em; border-radius: 0;
  transition: color .2s ease, border-color .2s ease;
}
.lien-historique:hover { color: var(--gold); border-color: rgba(212, 165, 116, .6); }
/* Bouton reprendre : bordure dorée pleine pour le distinguer des liens historique */
.btn-reprendre {
  border: 1px solid rgba(212, 165, 116, .7) !important;
  border-radius: 6px !important; padding: 9px 18px !important;
  color: var(--gold) !important; font-weight: 500;
  background: rgba(212, 165, 116, .05) !important;
}
.btn-reprendre:hover { background: rgba(212, 165, 116, .12) !important; }
/* Modal séance active */
#modal-seance-active { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; }
#modal-seance-active[hidden] { display: none; }
.msa-fond { position: absolute; inset: 0; background: rgba(8, 3, 4, .72); backdrop-filter: blur(3px); }
.msa-panneau {
  position: relative; z-index: 1; background: #1a0e10; border: 1px solid rgba(212, 165, 116, .28);
  border-radius: 14px; padding: 28px 24px 22px; max-width: 340px; width: 90%; text-align: center;
}
.msa-titre { font-size: 16px; color: var(--gold); margin: 0 0 12px; font-weight: 600; }
.msa-texte { font-size: 14px; color: #c9a07a; margin: 0 0 22px; line-height: 1.55; }
.msa-texte strong { color: var(--gold); }
.msa-boutons { display: flex; flex-direction: column; gap: 10px; }
.msa-btn-sobre {
  background: none; border: 1px solid rgba(212, 165, 116, .28); border-radius: 8px;
  color: #c9a07a; font-size: 14px; padding: 10px 16px;
}
.msa-btn-sobre:hover { border-color: rgba(212, 165, 116, .5); color: var(--gold); }
/* Fil reconstruit : messages de l'esprit repris */
.esprit-message { color: #d8c5b2; font-style: italic; border-left: 2px solid rgba(212, 165, 116, .35); padding-left: 12px; margin-left: 4px; }
.chip {
  display: inline-block; margin-top: 18px; font-size: 13px; padding: 10px 18px;
  border-radius: 10px; background: rgba(212, 165, 116, .07);
  border: 1px solid rgba(212, 165, 116, .25); color: #d8c5b2;
}
#btn-aide { display: block; margin: 8px auto 0; }
.aide-texte { text-align: left; font-size: 14.5px; }
.aide-texte p { margin: 12px 0; }
.aide-texte strong { color: var(--gold); font-weight: 600; }
@media (prefers-reduced-motion: reduce) {
  #demo-ecriture { display: none; }
  .btn-principal, .btn-principal::before { animation: none; }
}

/* Protection : etats du bouton + stats */
.menu-item.refus { color: #e5484d; border-color: rgba(229, 72, 77, .45); background: rgba(229, 72, 77, .07); }
.menu-item.accorde { color: #8fe3b0; border-color: rgba(74, 222, 128, .35); background: rgba(46, 204, 113, .07); }
#protection-stats { font-size: 12px; opacity: .7; margin: -2px 2px 0; text-align: left; }
/* Raccourcis menu */
.rang-cta { display: flex; gap: 10px; justify-content: center; align-items: center; }
.btn-menu-raccourci {
  width: 46px; height: 46px; border-radius: 50%; padding: 0;
  display: grid; place-items: center; font-size: 19px; line-height: 1;
  background: rgba(212, 165, 116, .07); border: 1px solid rgba(212, 165, 116, .3); color: var(--gold);
}
.menu-sep { height: 1px; background: rgba(212, 165, 116, .14); margin: 4px 6px; }

/* ── Modal « Mes protections en cours » ─────────────────────────────────────── */
#modal-protections { position: fixed; inset: 0; z-index: 50; }
#protections-fond { position: absolute; inset: 0; background: rgba(8, 3, 4, .55); backdrop-filter: blur(2px); }
#protections-panneau {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(92vw, 400px); max-height: 82dvh; overflow-y: auto;
  background: #1c0d10; border: 1px solid rgba(212, 165, 116, .18);
  border-radius: 14px; padding: 22px 18px 20px; color: var(--gold);
  animation: monte .25s ease;
}
@media (prefers-reduced-motion: reduce) { #protections-panneau { animation: none; } }
#protections-fermer {
  position: absolute; top: 10px; right: 12px; width: 32px; height: 32px; margin: 0; padding: 0;
  border-radius: 50%; background: rgba(212, 165, 116, .08);
  border: 1px solid rgba(212, 165, 116, .25); color: #d8c5b2; font-size: 13px;
}
.protections-titre { font-size: 16px; font-weight: 600; margin: 0 0 16px; letter-spacing: .04em; }
.carte-protection {
  border: 1px solid rgba(212, 165, 116, .2); border-radius: 10px;
  padding: 12px 14px; margin-bottom: 12px; background: rgba(212, 165, 116, .04);
}
.carte-protection h3 { margin: 0 0 5px; font-size: 15px; font-weight: 600; color: var(--gold); }
.prot-meta { margin: 0 0 3px; font-size: 13px; opacity: .85; }
.prot-duree { margin: 0 0 6px; font-size: 12px; }
.prot-effet { margin: 0; font-size: 13px; color: #8fe3b0; font-style: italic; line-height: 1.5; }

/* ── Modal fiche de l'esprit ──────────────────────────────────────────────────── */
#modal-fiche { position: fixed; inset: 0; z-index: 50; }
#fiche-fond { position: absolute; inset: 0; background: rgba(8, 3, 4, .55); backdrop-filter: blur(2px); }
#fiche-panneau {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(88vw, 360px); max-height: 80dvh; overflow-y: auto;
  background: #e8dcc0; border-radius: 10px;
  box-shadow: 0 8px 40px rgba(0,0,0,.6), 0 0 0 1px rgba(59,42,26,.25);
  padding: 22px 20px 20px; color: var(--encre);
  animation: monte .25s ease;
}
@media (prefers-reduced-motion: reduce) { #fiche-panneau { animation: none; } }
#fiche-fermer {
  position: absolute; top: 10px; right: 12px; width: 30px; height: 30px; margin: 0; padding: 0;
  border-radius: 50%; background: rgba(59,42,26,.1); border: 1px solid rgba(59,42,26,.3);
  color: #5a4030; font-size: 13px; cursor: pointer;
}
#fiche-panneau .fiche-titre {
  font-family: Ecriture, cursive; font-size: 22px; color: var(--encre);
  margin: 0 0 2px; font-weight: 600; padding-right: 28px;
}
#fiche-panneau .fiche-epoque {
  font-size: 12px; opacity: .65; margin: 0 0 14px; font-style: italic;
}
.fiche-section { margin-bottom: 12px; }
.fiche-label {
  display: block; font-size: 10px; letter-spacing: .12em; font-variant: small-caps;
  color: #7a5c3a; margin-bottom: 3px;
}
.fiche-impression { font-style: italic; font-size: 13.5px; margin: 0; opacity: .85; }
.fiche-ressenti { margin: 0; font-size: 15px; }
.etoile-pleine { color: var(--gold); }
.etoile-vide { color: rgba(59,42,26,.3); }
.ressenti-label { font-size: 13px; margin-left: 6px; font-style: italic; color: #7a5c3a; }
.ressenti-indechiffrable { font-style: italic; color: #7a5c3a; }
.fiche-lien { font-size: 13px; margin: 0; opacity: .8; }
.fiche-protection {
  font-size: 13px; margin: 6px 0 0; color: #3b6b3b; font-weight: 600;
  border-top: 1px solid rgba(59,42,26,.15); padding-top: 8px;
}
.fiche-signature {
  font-family: Ecriture, cursive; font-size: 18px; color: var(--encre);
  margin: 10px 0 0; opacity: .75; text-align: right;
}
.fiche-rarete { margin: 0; font-size: 14px; }
.fiche-chip-rarete {
  display: inline-block; padding: 2px 10px; border-radius: 999px;
  font-size: 13px; font-weight: 600; letter-spacing: .03em;
  border: 1px solid rgba(0,0,0,.08);
}
.fiche-btn-garder {
  display: block; width: 100%; margin-top: 14px; padding: 10px 16px;
  border-radius: 10px; font-size: 13.5px; letter-spacing: .02em;
  background: rgba(59,42,26,.08); border: 1px solid rgba(59,42,26,.28);
  color: #5a4030; cursor: pointer; text-align: center;
}
.fiche-btn-garder:hover { background: rgba(59,42,26,.15); }
.fiche-btn-garder:disabled { opacity: .5; cursor: wait; }

/* ── Transcript inline dans l'historique ─────────────────────────────────────── */
.btn-relire-seance {
  display: inline-block; margin: 8px 0 0; padding: 4px 10px;
  background: none; border: none; border-bottom: 1px solid rgba(212,165,116,.3);
  color: #c9a07a; font-size: 12.5px; opacity: .8; border-radius: 0;
  cursor: pointer; letter-spacing: .02em;
}
.btn-relire-seance:hover { opacity: 1; }
.transcript-seance {
  margin-top: 10px; border-top: 1px solid rgba(212,165,116,.12);
  padding-top: 8px; text-align: left;
}
.tr-premier-message {
  font-style: italic; font-size: 13.5px; opacity: .85; margin: 0 0 8px;
  padding-left: 8px; border-left: 2px solid rgba(212,165,116,.3);
}
.tr-question {
  font-size: 12.5px; opacity: .6; font-style: italic; margin: 10px 0 2px;
  text-align: right; padding-right: 4px;
}
.tr-reponse { font-size: 13.5px; opacity: .85; margin: 0 0 6px; }
.tr-protection { font-size: 12.5px; color: #8fe3b0; margin: 8px 0 2px; font-style: italic; }
.tr-rupture { font-size: 12px; opacity: .5; font-style: italic; margin: 6px 0 0; }