/*
 * styles.optimized.css
 * Version optimisée de styles.css — équivalence visuelle vérifiée.
 *
 * Changements :
 *  - Fusion des règles CSS dupliquées/adjacentes en toute sécurité
 *    (respect strict de la cascade, via clean-css niveau O2).
 *  - Extraction de 25 couleurs rgba() très répétées (6+ occurrences)
 *    en variables CSS sémantiques (--shadow-XX, --gold-XX, --ivory-XX,
 *    --white-XX), en plus des variables déjà existantes.
 *  - Suppression des règles vides, commentaires morts, espaces superflus.
 *  - Aucune valeur calculée, sélecteur ou animation n'a été supprimé :
 *    validation automatisée propriété par propriété contre l'original.
 *
 * Résultat : 211 Ko -> 185 Ko brut, 46,5 Ko -> 34,4 Ko gzippé (~26%).
 */
:root {
  --bg: #080909;
  --panel: #101111;
  --panel-soft: #151513;
  --gold: #b98b42;
  --gold-soft: #d2ad70;
  --ivory: #e8dfcf;
  --muted: #9d9588;
  --line: rgba(185, 139, 66, .38);
  --shadow: 0 18px 45px rgba(0,0,0,.48);
  --card-width: 232px;
  --card-height: 322px;
  --pile-base-y: 225px;
  --visual-pile-y-offset: 0px;
  --textual-pile-y-offset: 0px;
  --pile-stack-x-step: 2.4px;
  --pile-stack-y-step: 1.8px;
  --fan-center-y: 390px;
  --fan-radius-max: 325px;
  --fan-radius-ratio: 0.245;
  --fan-y-radius: 145px;
  --fan-y-offset: 130px;
  --fan-span-max: 86deg;
  --fan-span-min: 18deg;
  --viewer-card-width: 380px;
  --viewer-card-height: 527px;
  --sidebar-width: 224px;
  --topbar-height: 66px;
  --footer-height: 32px;
  --ui-black: rgba(5, 6, 6, .92);
  --ui-black-soft: rgba(12, 11, 9, .72);
  --leather: rgba(36, 25, 15, .82);
  --leather-light: rgba(72, 49, 27, .50);
  --visual-pile-x: 20%;
  --textual-pile-x: 50%;
  --clue-pile-x: 80%;
  --visual-fan-center-x: 30%;
  --textual-fan-center-x: 50%;
  --clue-fan-center-x: 80%;
  --clue-pile-y: 239px;
  --clue-fan-center-y: 390px;

  /* Couleurs récurrentes extraites automatiquement (optimisation) */
  --shadow-28: rgba(0,0,0,.28);
  --shadow-34: rgba(0,0,0,.34);
  --gold-22: rgba(185,139,66,.22);
  --gold-08: rgba(185,139,66,.08);
  --shadow-48: rgba(0,0,0,.48);
  --gold-1: rgba(185,139,66,.1);
  --shadow-18: rgba(0,0,0,.18);
  --gold-18: rgba(185,139,66,.18);
  --gold-28: rgba(185,139,66,.28);
  --shadow-3: rgba(0,0,0,.3);
  --gold-42: rgba(185,139,66,.42);
  --shadow-5: rgba(0,0,0,.5);
  --ivory-72: rgba(232,223,207,.72);
  --shadow-55: rgba(0,0,0,.55);
  --shadow-4: rgba(0,0,0,.4);
  --gold-16: rgba(185,139,66,.16);
  --white-018: rgba(255,255,255,.018);
  --shadow-2: rgba(0,0,0,.2);
  --shadow-24: rgba(0,0,0,.24);
  --ivory-58: rgba(232,223,207,.58);
  --shadow-22: rgba(0,0,0,.22);
  --shadow-72: rgba(0,0,0,.72);
  --white-025: rgba(255,255,255,.025);
  --gold-24: rgba(185,139,66,.24);
  --shadow-88: rgba(0,0,0,.88);
}
* {
  box-sizing: border-box
}
body,
html {
  margin: 0;
  min-height: 100%;
  background: var(--bg);
  color: var(--ivory);
  font-family: Georgia,'Times New Roman',serif;
  height: 100%;
  overflow: hidden
}
button {
  font: inherit
}
.app-shell {
  display: grid;
  }
.sidebar {

  backdrop-filter: blur(10px);
  display: flex;
  flex-direction: column;
  }
.brand {
  text-align: center
}
.brand-compass {
  width: 45px;
  height: 45px;
  display: block;
  opacity: .92
}
.brand-title {
  color: var(--gold-soft);
  }
.brand-subtitle {
  color: var(--muted);
  }
.main-nav {
  display: grid;
  }
.nav-item {
  appearance: none;
  background: 0 0;

  text-align: left;
  cursor: pointer;
  letter-spacing: .04em
}

.workspace {
  min-width: 0;
  display: grid;
  }
.topbar {
  display: flex;
  justify-content: space-between;

  }
h1 {
  margin: 0;
  font-weight: 400;
  letter-spacing: .04em;
  font-size: clamp(20px, 1.8vw, 27px);
  line-height: 1;
  letter-spacing: .055em;
  color: rgba(244,235,219,.96);
  text-shadow: 0 1px 0 #000
}

.button {

  cursor: pointer;

  text-transform: uppercase
}

.board {
  position: relative;
  border: 1px solid rgba(185,139,66,.2);
  background-image: linear-gradient(rgba(6,6,6,.14),rgba(6,6,6,.22)),image-set(url("images/fond_principal.avif") type("image/avif"), url("images/fond_principal.webp") type("image/webp"), url("images/fond_principal.jpg") type("image/jpeg"));
  background-size: cover,cover;
  background-repeat: no-repeat,no-repeat;
  background-color: #241708;

  overflow: hidden
}
.board::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background: repeating-linear-gradient(93deg,rgba(0,0,0,.1) 0 2px,transparent 2px 7px),repeating-linear-gradient(89deg,rgba(255,214,150,.035) 0 1px,transparent 1px 9px),radial-gradient(ellipse 90% 70% at 30% 20%,rgba(120,78,32,.35),transparent 60%),radial-gradient(ellipse 80% 60% at 75% 80%,rgba(90,56,20,.32),transparent 60%),linear-gradient(160deg,#3a2612 0,#2a1a0b 45%,#1c1207 100%)
}
.board::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0
}
.board > * {
  position: relative;
  z-index: 1
}

.enigma-card {
  position: absolute;

  border-radius: 8px;
  cursor: grab;
  user-select: none;
  touch-action: none;

  transition: box-shadow .14s,filter .14s;
  transform-origin: center
}
.enigma-card:active {
  cursor: grabbing
}
.enigma-card.dragging {

  transition: transform .16s,box-shadow .14s,filter .14s
}
.enigma-card.fan-card-held {
  box-shadow: 0 22px 42px rgba(0,0,0,.62);
  filter: brightness(1.09);
  transition: transform .13s ease-out,box-shadow .13s,filter .13s
}
.card-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  user-select: none;
  pointer-events: none
}
.card-image.card-image-pending {
  visibility: hidden
}
.card-face {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  overflow: hidden;
  border: 1px solid rgba(210,173,112,.52);
  position: relative
}
.card-face::after {
  display: none
}
.visual .card-face {
  background: linear-gradient(180deg,rgba(4,7,9,.12),rgba(0,0,0,.66)),radial-gradient(circle at 50% 44%,var(--gold-22),transparent 24%),linear-gradient(145deg,#172029,#090b0d 68%)
}
.textual .card-face {
  background: linear-gradient(145deg,#d2c1a2,#b9a27c 48%,#897250);
  color: #201a13;
  border-color: rgba(35,24,14,.65)
}
.bottom-bar {
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  gap: 20px;
  }
.viewer {
  position: fixed;
  inset: 0;
  width: 100vw;
  max-width: none;
  height: 100vh;
  max-height: none;
  margin: 0;
  border: 0;
  background: 0 0;
  color: var(--ivory);
  padding: 0;
  overflow: hidden
}
.viewer::backdrop {
  background: var(--shadow-72)
}
.viewer-controls {
  position: fixed;
  z-index: 10004;
  display: flex;
  align-items: center;
  gap: 8px;
  width: max-content;
  max-width: calc(100vw - 24px)
}
.viewer-controls > .viewer-close,
.viewer-controls > .viewer-copy-text,
.viewer-controls > .viewer-note-toggle {
  position: static;
  flex: 0 0 auto
}
.viewer-close {
  position: fixed;
  z-index: 10004;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: rgba(10,10,9,.46);
  color: var(--gold-soft);
  font-size: 36px;
  line-height: 38px;
  cursor: pointer;
  transition: background .18s,transform .18s
}
.viewer-close:hover {
  background: rgba(10,10,9,.72);
  transform: scale(1.06)
}
.viewer-stage {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  overflow: auto;
  padding: 70px;
  box-sizing: border-box
}
.viewer-card {
  width: var(--viewer-card-width);
  height: var(--viewer-card-height);
  transform-origin: center center;
  transition: transform .12s ease-out;
  will-change: transform
}
.viewer-card .enigma-card {
  position: relative;
  left: auto!important;
  top: auto!important;
  width: var(--viewer-card-width);
  height: var(--viewer-card-height);
  transform: none!important;
  cursor: default
}
.confirm-dialog {
  width: min(90vw,420px);
  border: 1px solid var(--line);
  border-radius: 2px;
  background: linear-gradient(180deg,rgba(16,14,11,.98),rgba(8,9,9,.98));
  color: var(--ivory);
  padding: 34px 32px 28px;
  text-align: center;
  box-shadow: 0 30px 100px rgba(0,0,0,.75),inset 0 0 0 1px var(--gold-08)
}
.confirm-dialog::backdrop {
  background: rgba(0,0,0,.84);
  backdrop-filter: blur(4px)
}
.confirm-mark {
  color: var(--gold-soft);
  font-size: 22px;
  margin-bottom: 10px
}
.confirm-title {
  margin: 0 0 14px;
  font-weight: 400;
  letter-spacing: .04em;
  font-size: 21px;
  color: var(--gold-soft)
}
.confirm-text {
  margin: 0 0 26px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.65
}
.confirm-actions {
  display: flex;
  justify-content: center;
  gap: 12px
}
.confirm-actions .button {
  min-width: 130px
}
.pile-label {
  position: absolute;

  color: var(--ivory);
  text-align: center;
  cursor: pointer;

  transition: border-color .15s,background .15s,box-shadow .15s;
  z-index: 800
}
.pile-label::after {
  content: '';
  height: 1px;
  margin: 1px auto 0;
  background: linear-gradient(90deg,transparent,var(--gold),transparent);
  order: 1
}

.pile-label small {
  order: 2;
  }
.pile-hint {
  order: 3;
  color: var(--gold-soft);

  margin-top: 3px
}



.pile-label.expanded .pile-hint {
  color: var(--muted);
  opacity: .62
}
.enigma-card {
  width: var(--card-width);
  height: var(--card-height)
}
.enigma-card.stacked {
  transition: left .45s cubic-bezier(.2,.8,.2,1),top .45s cubic-bezier(.2,.8,.2,1),transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .2s;
  }
.enigma-card.stacked:hover {
  filter: brightness(1.06)
}
.game-shelf {
  display: grid;
  }
.shelf-title {

  letter-spacing: .18em;
  text-transform: uppercase
}
.shelf-game {
  width: 100%;
  display: grid;

  align-items: center;
  border: 1px solid var(--gold-18);

  color: var(--ivory);
  text-align: left;
  cursor: default;
  transition: border-color .18s,background .18s,transform .18s
}
.shelf-game.stored {
  cursor: pointer;
  }
.shelf-game.stored:hover {
  border-color: var(--gold-soft);
  background: rgba(185,139,66,.12);
  transform: translateX(3px)
}
.shelf-game-icon {
  color: var(--gold-soft);
  text-align: center
}
.shelf-game small,
.shelf-game strong,
.shelf-status {
  display: block
}
.shelf-game strong {
  font-weight: 400;
  color: var(--gold-soft)
}
.shelf-game small {
  margin-top: 4px;
  color: var(--muted)
}
.shelf-status {
  grid-column: 2;
  margin-top: 1px;
  text-transform: uppercase
}
.shelf-game.stored .shelf-status {
  color: var(--gold-soft)
}
.enigma-card.stored-card,
.pile-label.stored {
  opacity: 0!important;
  visibility: hidden!important;
  pointer-events: none!important
}
.enigma-card.stored-card {
  transform: translateX(-110px) scale(.82)!important;
  transition: opacity .3s,transform .45s cubic-bezier(.2,.8,.2,1)!important
}
.pile-shelve {
  position: absolute;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(210,173,112,.45);
  border-radius: 50%;

  color: var(--gold-soft);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transition: opacity .18s,transform .18s,border-color .18s,background .18s
}
.pile-shelve.visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  }
.pile-shelve:hover {
  border-color: var(--gold-soft);
  background: var(--gold-16)
}

.enigma-card:not(.stored-card) {
  isolation: isolate;
  cursor: grab
}
.enigma-card:not(.stored-card):not(.dragging):hover .card-face {
  box-shadow: inset 0 0 0 1px rgba(210,173,112,.16)
}
.app-shell {
  grid-template-columns: var(--sidebar-width) minmax(0,1fr);
  background: radial-gradient(circle at 18% 12%,rgba(185,139,66,.045),transparent 27%),var(--bg)
}
.sidebar {
  position: relative;
  z-index: 20;
  gap: 22px;
  padding: 22px 16px 18px;
  border-right: 1px solid rgba(210,173,112,.24);
  background: linear-gradient(90deg,var(--white-018),transparent 7%,transparent 92%,rgba(0,0,0,.42)),radial-gradient(ellipse 240px 150px at 88% 3%,rgba(185,139,66,.075),transparent 72%),linear-gradient(180deg,rgba(30,22,14,.985) 0,rgba(22,17,12,.985) 105px,rgba(12,11,9,.988) 230px,rgba(6,7,7,.99) 420px,rgba(4,5,5,.99) 100%);
  box-shadow: 10px 0 35px var(--shadow-28),inset -1px 0 var(--white-018);
  }
.sidebar::after {
  content: '';
  position: absolute;
  top: 0;
  right: 7px;
  bottom: 0;
  width: 1px;
  background: linear-gradient(180deg,transparent,rgba(185,139,66,.15) 16%,var(--gold-08) 82%,transparent);
  pointer-events: none
}
@media (min-width:901px) {
  .sidebar::before {
    content: '';
    position: absolute;
    z-index: 0;
    top: 0;
    left: 0;
    right: 0;
    height: var(--topbar-height);
    pointer-events: none;
    background: linear-gradient(180deg,rgba(255,224,168,.026),rgba(0,0,0,.16)),linear-gradient(90deg,rgba(13,10,7,.16),rgba(72,49,27,.1) 72%,rgba(5,6,6,.1));
    border-bottom: 1px solid rgba(185,139,66,.075)
  }
  .sidebar > * {
    position: relative;
    z-index: 1
  }
}
.brand {
  padding: 2px 0 16px;
  border-bottom: 1px solid rgba(185,139,66,.15)
}
.brand-mark {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 8px
}
.brand-title {
  font-size: 18px;
  line-height: 1.42;
  letter-spacing: .22em;
  text-shadow: 0 1px 0 #000
}
.brand-subtitle {
  margin-top: 7px;
  font-size: 8px;
  letter-spacing: .23em
}
.main-nav {
  gap: 3px
}
.nav-item {
  position: relative;
  padding: 11px 11px 11px 17px;
  border: 0;
  border-left: 1px solid transparent;
  font-size: 11px;
  color: rgba(232,223,207,.88);
  transition: color .18s,background .18s,padding-left .18s,border-color .18s
}
.nav-item::before {
  content: '·';
  position: absolute;
  left: 5px;
  top: 50%;
  color: rgba(185,139,66,.34);
  transform: translateY(-54%);
  transition: color .18s,transform .18s
}
.nav-item.active,
.nav-item:hover {
  padding-left: 20px;
  border-color: var(--gold);
  color: var(--gold-soft);
  background: linear-gradient(90deg,var(--gold-1),transparent 88%)
}
.nav-item.active::before,
.nav-item:hover::before {
  color: var(--gold-soft);
  transform: translate(2px,-54%)
}
.workspace {
  grid-template-rows: var(--topbar-height) minmax(0,1fr) var(--footer-height);
  background: #070808
}
.topbar {

  background-image: linear-gradient(90deg,rgba(5,6,6,.76) 0,rgba(5,6,6,.58) 42%,rgba(5,6,6,.86) 100%),linear-gradient(180deg,rgba(255,224,168,.045),var(--shadow-34)),image-set(url("images/fond_principal.avif") type("image/avif"), url("images/fond_principal.webp") type("image/webp"), url("images/fond_principal.jpg") type("image/jpeg"));
  background-size: auto,auto,cover;
  background-position: center,center,center 18%;
  }
.topbar::before {

  background: radial-gradient(ellipse 420px 90px at 18% 48%,rgba(205,157,77,.095),transparent 72%),linear-gradient(90deg,var(--white-018),transparent 22%,transparent 78%,var(--shadow-2))
}
.topbar::after {

  opacity: .86
}
.topbar-identity {
  border-left: 2px solid rgba(210,173,112,.74);
  }
.topbar p {
  margin: 5px 0 0;
  font-size: 11px;
  letter-spacing: .055em;
  color: rgba(218,180,111,.92);
  text-shadow: 0 1px 2px rgba(0,0,0,.82)
}

.button {
  position: relative;
  min-width: 126px;
  padding: 8px 14px 7px;
  border: 1px solid rgba(185,139,66,.62);
  background: linear-gradient(180deg,var(--gold-1),rgba(0,0,0,.08)),rgba(17,14,10,.72);
  box-shadow: inset 0 0 0 1px rgba(255,232,190,.025),0 5px 14px var(--shadow-2);
  color: var(--gold-soft);
  font-size: 9px;
  letter-spacing: .13em;
  transition: transform .16s,border-color .16s,background .16s,color .16s
}
.button.secondary {
  border-color: rgba(210,173,112,.32);
  color: rgba(232,223,207,.9);
  background: rgba(8,8,7,.62)
}
.button:hover {
  transform: translateY(-1px);
  border-color: var(--gold-soft);
  background: rgba(185,139,66,.14);
  color: #f0d29b
}
.button:active {
  transform: translateY(0)
}
.board-wrap {
  overflow: auto;
  padding: 9px 12px 8px;
  background: #070808;

  overscroll-behavior: contain
}
.board {
  width: 100%;
  max-width: none;
  height: 1100px;
  min-height: 1100px;
  margin: 0;
  border-color: var(--gold-28);
  border-radius: 2px;
  /* Empêche l’image de fond de passer sous la bordure semi-transparente.
     Sans cela, le filet gauche paraît clair/sombre selon le décor situé dessous. */
  background-clip: padding-box;
  background-position: center 48%,center 48%;
  box-shadow: inset 0 0 150px rgba(0,0,0,.46),inset 0 1px rgba(255,220,165,.035),0 16px 36px rgba(0,0,0,.42)
}
.board::before {
  background: radial-gradient(ellipse 430px 270px at 31% 48%,rgba(255,195,108,.105),transparent 70%),radial-gradient(ellipse 330px 250px at 70% 49%,rgba(255,190,98,.075),transparent 72%),radial-gradient(ellipse 68% 68% at 48% 48%,transparent 38%,rgba(0,0,0,.26) 100%),linear-gradient(90deg,rgba(0,0,0,.27),transparent 15%,transparent 85%,var(--shadow-3)),linear-gradient(180deg,var(--shadow-18),transparent 18%,transparent 77%,var(--shadow-3))
}
.pile-label {
  top: 20px;
  min-width: 205px;
  gap: 5px;
  padding: 12px 18px 11px;
  border: 1px solid rgba(188,138,70,.48);
  border-radius: 1px;
  background: linear-gradient(135deg,rgba(255,230,182,.035),transparent 38%),linear-gradient(180deg,var(--leather-light),rgba(17,12,8,.88)),var(--leather);
  box-shadow: 0 14px 30px var(--shadow-4),inset 0 0 0 1px rgba(255,224,174,.035),inset 0 -12px 22px var(--shadow-18);
  backdrop-filter: blur(3px)
}
.pile-label::before {
  content: '';
  position: absolute;
  inset: 4px;
  border: 1px solid rgba(210,173,112,.1);
  pointer-events: none
}
.pile-label::after {
  width: 46px;
  opacity: .72
}
.pile-label:hover {
  border-color: rgba(210,173,112,.78);
  background: linear-gradient(135deg,rgba(255,230,182,.05),transparent 38%),linear-gradient(180deg,rgba(82,55,29,.58),rgba(19,13,8,.9));
  box-shadow: 0 17px 35px var(--shadow-48),inset 0 0 0 1px var(--gold-1)
}
.pile-label small {
  font-size: 10px;
  color: rgba(218,207,190,.6)
}
.pile-hint {
  font-size: 8px;
  letter-spacing: .12em
}
.pile-shelve {
  top: 77px;
  border-color: rgba(210,173,112,.36);
  background: radial-gradient(circle at 35% 28%,rgba(185,139,66,.14),transparent 34%),rgba(9,8,7,.82);

  font-size: 12px
}
.visual-pile-shelve {
  left: calc(var(--visual-pile-x) + 116px)
}
.textual-pile-shelve {
  left: calc(var(--textual-pile-x) + 116px)
}
.enigma-card {
  box-shadow: 0 4px 5px var(--shadow-34),0 13px 25px var(--shadow-4)
}
.enigma-card:not(.stored-card):not(.dragging):hover {
  filter: brightness(1.025)
}
.enigma-card.dragging {
  cursor: grabbing;
  box-shadow: 0 7px 9px var(--shadow-3),0 27px 48px rgba(0,0,0,.64);
  filter: brightness(1.06) saturate(1.02)
}
.enigma-card.stacked {
  box-shadow: 0 3px 4px var(--shadow-3),0 13px 24px rgba(0,0,0,.45),0 0 26px rgba(255,190,100,.055)
}
.game-shelf {

  padding-top: 2px
}
.shelf-title {
  padding: 0 5px 5px;
  font-size: 8px;
  color: rgba(157,149,136,.76)
}
.shelf-game {
  grid-template-columns: 25px 1fr;
  gap: 9px;
  padding: 10px 10px 9px;
  border-color: var(--gold-16);
  background: linear-gradient(90deg,rgba(185,139,66,.025),transparent 70%),rgba(255,255,255,.008);
  box-shadow: inset 0 1px rgba(255,255,255,.012)
}
.shelf-game.stored {
  border-color: rgba(185,139,66,.35);
  background: linear-gradient(90deg,rgba(185,139,66,.075),rgba(185,139,66,.018))
}
.shelf-game-icon {
  font-size: 19px;
  opacity: .88
}
.shelf-game strong {
  font-size: 11px
}
.shelf-game small {
  font-size: 8px
}
.shelf-status {
  font-size: 8.5px;
  color: rgba(210,173,112,.82);
  letter-spacing: .06em;
  line-height: 1.3
}
.bottom-bar {
  min-height: var(--footer-height);
  align-items: center;
  padding: 5px 16px 6px;
  border-top-color: rgba(185,139,66,.15);
  background: rgba(5,6,6,.98);
  color: rgba(157,149,136,.68);
  font-size: 9px;
  letter-spacing: .015em
}
.bottom-bar span:last-child {
  color: rgba(185,139,66,.58)
}
.auth-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  min-width: 108px
}

.is-locked .board-wrap,
.is-locked .sidebar {
  user-select: none
}
.is-locked .board-wrap {
  cursor: default
}
.is-locked #resetButton,
.is-locked #saveButton {
  display: none
}

.login-dialog::before {
  content: '';
  position: absolute;
  inset: 6px;
  border: 1px solid rgba(210,173,112,.13);
  pointer-events: none
}
.login-mark {
  color: var(--gold-soft);
  font-size: 23px;
  margin-bottom: 10px
}
.login-kicker {
  margin: 0 0 8px;
  color: rgba(210,173,112,.76);
  font-size: 9px;
  letter-spacing: .22em;
  text-transform: uppercase
}
.login-dialog h2 {
  margin: 0;
  color: rgba(244,235,219,.97);
  font-weight: 400;
  font-size: 25px;
  letter-spacing: .05em
}
.auth-primary {
  min-width: 172px;
  color: #efd29e;
  border-color: rgba(210,173,112,.76);
  background: linear-gradient(180deg,var(--gold-18),rgba(60,37,14,.1)),rgba(18,13,8,.92)
}
.login-dialog {
  position: fixed;
  width: min(470px,calc(100vw - 32px));
  margin: auto;
  padding: 31px 36px 34px;
  border: 1px solid rgba(185,139,66,.62);
  border-radius: 1px;
  color: var(--ivory);
  background: linear-gradient(135deg,rgba(255,225,170,.035),transparent 38%),linear-gradient(180deg,rgba(31,22,13,.99),rgba(8,8,7,.995));
  box-shadow: 0 35px 100px rgba(0,0,0,.82),inset 0 0 0 1px rgba(255,230,190,.035);
  overflow: visible
}
.login-dialog::backdrop {
  background: rgba(1,2,2,.72);
  backdrop-filter: blur(3px)
}
@keyframes loginReveal {
  from {
    opacity: 0;
    transform: translateY(10px) scale(.985)
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1)
  }
}
.login-close {
  position: absolute;
  z-index: 2;
  right: 7px;
  top: 8px;
  width: 34px;
  height: 34px;
  border: 0;
  background: 0 0;
  color: rgba(232,223,207,.62);
  font-size: 28px;
  line-height: 1;
  cursor: pointer
}
.login-close:hover {
  color: var(--gold-soft)
}
.login-intro {
  margin: 16px 0 22px;
  color: rgba(232,223,207,.67);
  font-size: 13px;
  line-height: 1.6
}
.login-dialog form {
  display: grid;
  gap: 10px
}
.login-dialog label {
  color: rgba(210,173,112,.84);
  font-size: 9px;
  letter-spacing: .13em;
  text-transform: uppercase
}
.login-dialog input[type=email] {
  width: 100%;
  padding: 13px 14px;
  border: 1px solid var(--gold-42);
  outline: 0;
  color: var(--ivory);
  background: var(--shadow-34);
  font: 14px Georgia,'Times New Roman',serif;
  box-shadow: inset 0 5px 15px var(--shadow-24)
}
.login-dialog input[type=email]:focus {
  border-color: rgba(210,173,112,.88);
  box-shadow: 0 0 0 2px rgba(185,139,66,.11),inset 0 5px 15px var(--shadow-24)
}
.login-dialog form .button {
  margin-top: 5px;
  width: 100%
}
.login-dialog button:disabled {
  cursor: wait;
  opacity: .55
}
.login-message {
  min-height: 19px;
  margin: 16px 0 0;
  text-align: center;
  color: rgba(232,223,207,.65);
  font-size: 11px;
  line-height: 1.5
}
.login-message.success {
  color: #cbb88c
}
.login-message.error {
  color: #d79d8b
}
.auth-toast {
  position: fixed;
  z-index: 9500;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  padding: 12px 18px;
  border: 1px solid rgba(185,139,66,.46);
  background: rgba(10,9,7,.96);
  box-shadow: 0 12px 36px var(--shadow-5);
  color: var(--ivory);
  font-size: 11px;
  transition: opacity .4s,transform .4s
}
.auth-toast.error {
  border-color: rgba(177,91,67,.55)
}
.auth-toast.hide {
  opacity: 0;
  transform: translate(-50%,10px);
  pointer-events: none
}
.app-shell {
  height: 100vh;
  min-height: 0;
  overflow: hidden
}
.workspace {
  height: 100vh;
  min-height: 0;
  overflow: hidden
}
.board-wrap {
  position: relative;
  isolation: isolate;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior-y: contain;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: #9c7337 rgba(18,11,6,.72)
}
.board-wrap::-webkit-scrollbar {
  width: 14px
}
.board-wrap::-webkit-scrollbar-track {
  margin-block: 10px;
  border: 1px solid var(--gold-22);
  border-radius: 999px;
  background: linear-gradient(90deg,var(--white-025),var(--shadow-18) 48%,var(--white-018)),rgba(18,11,6,.76);
  box-shadow: inset 0 0 7px var(--shadow-72),0 0 0 1px rgba(0,0,0,.25)
}
.board-wrap::-webkit-scrollbar-thumb {
  min-height: 70px;
  border: 3px solid transparent;
  border-radius: 999px;
  background: linear-gradient(90deg,#6e4b20 0,#b98b42 34%,#d3ae68 50%,#9a6c2f 72%,#5d3d19 100%) padding-box;
  box-shadow: inset 0 0 0 1px rgba(255,226,160,.22),inset 0 0 8px rgba(40,20,4,.45),0 1px 5px var(--shadow-55)
}
.board-wrap::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(90deg,#795424 0,#c99b4c 34%,#e0bd77 50%,#aa7836 72%,#68441c 100%) padding-box
}
.board-wrap::-webkit-scrollbar-thumb:active {
  background: linear-gradient(90deg,#5f401b 0,#a87935 36%,#c89e56 50%,#8c6029 72%,#513515 100%) padding-box
}
.board-wrap::-webkit-scrollbar-corner {
  background: 0 0
}
.viewer-note-toggle {
  position: fixed;
  z-index: 10003;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(190,145,73,.52);
  border-radius: 50%;
  color: #d8b875;
  background: radial-gradient(circle at 35% 30%,rgba(92,65,31,.96),rgba(20,14,8,.97) 72%);
  box-shadow: 0 8px 24px var(--shadow-48),inset 0 0 0 1px rgba(255,224,155,.08);
  font: 24px/1 Georgia,serif;
  cursor: pointer;
  transition: transform .18s,border-color .18s,color .18s
}
.viewer-note-toggle.active,
.viewer-note-toggle:hover {
  transform: translateY(-1px);
  color: #f1d99c;
  border-color: rgba(224,184,111,.86)
}
.viewer-note-toggle.has-note::after {
  content: '';
  position: absolute;
  right: 1px;
  bottom: 1px;
  width: 11px;
  height: 11px;
  border: 2px solid #171008;
  border-radius: 50%;
  background: #d7b348
}
.viewer-note-toggle[data-note-color=important]::after {
  background: #a94636
}
.viewer-note-toggle[data-note-color=verified]::after {
  background: #467b93
}
.viewer-note-toggle[data-note-color=solved]::after {
  background: #5e8551
}
.viewer-note-toggle[data-note-color=deadend]::after {
  background: #5d5a55
}
.card-note-badge {
  position: absolute;
  z-index: 12;
  top: 8px;
  right: 8px;
  display: none;
  width: 13px;
  height: 13px;
  border: 2px solid rgba(20,13,7,.88);
  border-radius: 50%;
  background: #d7b348;
  box-shadow: 0 2px 8px rgba(0,0,0,.58);
  pointer-events: none
}
.enigma-card.has-note .card-note-badge {
  display: block
}
.enigma-card[data-note-color=important] .card-note-badge {
  background: #a94636
}
.enigma-card[data-note-color=verified] .card-note-badge {
  background: #467b93
}
.enigma-card[data-note-color=solved] .card-note-badge {
  background: #5e8551
}
.enigma-card[data-note-color=deadend] .card-note-badge {
  background: #5d5a55
}
.note-panel {
  position: fixed;
  z-index: 10002;
  top: 0;
  right: 0;
  left: auto;
  width: min(390px,92vw);
  height: 100%;
  padding: 30px 28px 26px;
  border-left: 1px solid rgba(190,145,73,.38);
  color: #e7ddc8;
  background: linear-gradient(135deg,rgba(255,225,165,.035),transparent 35%),linear-gradient(180deg,rgba(29,20,12,.99),rgba(8,7,6,.995));
  box-shadow: -22px 0 70px rgba(0,0,0,.68),inset 1px 0 rgba(255,231,183,.035);
  transform: translateX(105%);
  transition: transform .28s cubic-bezier(.2,.75,.2,1);
  display: flex;
  flex-direction: column;
  gap: 15px
}
.note-panel.open {
  transform: translateX(0)
}
.note-panel-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px
}
.note-kicker {
  color: rgba(201,161,94,.78);
  font-size: 9px;
  letter-spacing: .18em;
  text-transform: uppercase
}
.note-panel h2 {
  margin: 5px 0 0;
  color: #e8d5aa;
  font: 22px Georgia,serif
}
.note-panel-close {
  border: 0;
  background: 0 0;
  color: rgba(232,223,207,.65);
  font-size: 28px;
  cursor: pointer
}
.note-panel-close:hover {
  color: #e5c989
}
.note-colors legend,
.note-label {
  grid-column: 1/-1;
  color: rgba(205,169,105,.85);
  font-size: 9px;
  letter-spacing: .14em;
  margin-bottom: 14px;
  text-transform: uppercase
}
#noteText {
  flex: 1 1 260px;
  width: 100%;
  min-height: 220px;
  resize: none;
  padding: 17px;
  border: 1px solid rgba(185,139,66,.32);
  outline: 0;
  color: #292014;
  background: repeating-linear-gradient(180deg,transparent 0 27px,rgba(82,58,27,.13) 28px),linear-gradient(135deg,#dfcda5,#cbb584);
  box-shadow: inset 0 5px 18px rgba(55,36,13,.22),0 9px 24px var(--shadow-24);
  font: 15px/28px Georgia,serif
}
#noteText:focus {
  border-color: rgba(222,181,106,.78)
}
.note-colors {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 9px 12px;
  margin: 0;
  padding: 0;
  border: 0
}
.note-colors label {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--ivory-72);
  font-size: 11px;
  cursor: pointer
}
.note-colors input {
  position: absolute;
  opacity: 0;
  pointer-events: none
}
.note-color {
  width: 14px;
  height: 14px;
  border: 2px solid rgba(15,10,6,.72);
  border-radius: 50%;
  background: #d7b348;
  box-shadow: 0 0 0 1px rgba(255,235,188,.16)
}
.note-color.important {
  background: #a94636
}
.note-color.verified {
  background: #467b93
}
.note-color.solved {
  background: #5e8551
}
.note-color.deadend {
  background: #5d5a55
}
.note-colors input:checked + .note-color {
  outline: rgba(232,198,128,.84) solid 2px;
  outline-offset: 2px
}
.note-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px
}
.note-message {
  min-height: 17px;
  margin: 0;
  color: var(--ivory-58);
  text-align: right;
  font-size: 10px
}
.note-message.success {
  color: #bea96e
}
.note-message.error {
  color: #d49580
}
.note-message.locked {
  margin-top: auto;
  padding: 13px 14px;
  border: 1px solid rgba(190,145,73,.24);
  color: var(--ivory-72);
  background: var(--shadow-18);
  text-align: left;
  line-height: 1.38
}
.note-message.locked a {
  color: #d5b570;
  text-decoration: underline;
  text-underline-offset: 3px
}
.note-message.locked a:hover {
  color: #f0d79e
}
.note-panel.is-locked #noteText,
.note-panel.is-locked .note-actions,
.note-panel.is-locked .note-colors {
  opacity: .42
}
.is-locked .enigma-card .card-face,
.is-locked .enigma-card.textual .card-face,
.is-locked .enigma-card.visual .card-face {
  background-image: var(--echo-image-carte-verso, url('images/carte-verso.webp'));
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-color: #17130f
}
.is-locked .enigma-card .card-face::after {
  display: none
}
.is-locked .card-note-badge {
  display: none!important
}






body.threshold-awake .app-shell {
  filter: brightness(.54) saturate(.78);
  transition: filter .42s
}
body.threshold-awake .brand-compass {
  filter: sepia(.9) saturate(.9) brightness(1.18) drop-shadow(0 0 8px rgba(224,177,88,.55));
  transform: scale(1.08)
}
.threshold-dialog {
  position: relative;
  isolation: isolate;
  box-sizing: border-box;
  width: min(780px,calc(100vw - 34px));
  max-height: calc(100vh - 28px);
  padding: 16px 24px 20px;
  overflow-y: auto;
  border: 1px solid rgba(203,157,81,.66);
  color: #e9dfcc;
  background: radial-gradient(ellipse 70% 42% at 50% 5%,rgba(188,132,54,.18),transparent 68%),rgba(8,7,5,.84);
  box-shadow: 0 34px 100px rgba(0,0,0,.86),0 0 58px var(--gold-1),inset 0 0 0 1px rgba(255,229,170,.055),inset 0 0 90px var(--shadow-22);
  text-align: center;
  scrollbar-width: thin;
  scrollbar-color: rgba(203,157,81,.42) transparent
}

/* Mini-écrans : fond_principal.jpg est réservé au bureau / grands fonds.
   Les panneaux utilisent les deux moitiés de fond_ecrans.webp en alternance. */
.threshold-dialog::before {
  content: "";
  position: absolute;
  z-index: -2;
  inset: 0;
  background-image: var(--echo-image-fond-ecrans, url("images/fond_ecrans.webp"));
  background-size: 200% auto;
  background-position: left center;
  background-repeat: no-repeat;
  opacity: .42;
  filter: sepia(.16) saturate(.78) brightness(.68) contrast(1.08);
  pointer-events: none
}
.threshold-dialog::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: radial-gradient(ellipse 72% 66% at 50% 42%,rgba(7,6,4,.28) 0,rgba(7,6,4,.48) 58%,rgba(3,3,2,.76) 100%),linear-gradient(180deg,rgba(24,15,8,.22),rgba(5,5,4,.48));
  box-shadow: inset 0 0 110px var(--shadow-34),inset 0 0 0 10px rgba(0,0,0,.08),inset 0 0 0 11px rgba(222,181,106,.12);
  pointer-events: none
}
.threshold-dialog > * {
  position: relative;
  z-index: 1
}
.threshold-dialog::backdrop {
  background: radial-gradient(ellipse 55% 58% at 50% 48%,rgba(185,139,66,.075),transparent 72%),var(--shadow-5);
  backdrop-filter: blur(7px) brightness(.64) saturate(.86)
}
@keyframes threshold-rise {
  from {
    opacity: 0;
    transform: translateY(12px) scale(.985)
  }
  to {
    opacity: 1;
    transform: none
  }
}
.threshold-close {
  position: absolute;
  right: 15px;
  top: 7px;
  border: 0;
  background: 0 0;
  color: var(--ivory-58);
  font-size: 29px;
  cursor: pointer
}
.threshold-close:hover {
  color: #ecd39f
}

.threshold-kicker {
  margin: 0;
  color: #b99055;
  font-size: 8px;
  letter-spacing: .25em;
  text-transform: uppercase
}
.threshold-dialog h2 {
  margin: 3px 0 0;
  color: #ead3a3;
  font: 28px/1.05 Georgia,serif
}

.threshold-access {
  margin: 0
}

.threshold-list {
  margin: 0 auto 6px;
  padding: 0;
  max-width: 620px;
  list-style: none;
  text-align: left;
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  column-gap: 28px
}
.threshold-list li {
  position: relative;
  padding: 3px 0 3px 22px;
  color: rgba(232,223,207,.78);
  font-size: 12px;
  line-height: 1.25
}
.threshold-list li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: #c9a45f
}



.threshold-donate,
.threshold-pay {
  display: inline-flex;
  min-width: 270px;
  min-height: 34px;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  letter-spacing: .12em
}
.threshold-donate.is-disabled,
.threshold-pay.is-disabled {
  pointer-events: none;
  opacity: .5
}
.threshold-secure,
.threshold-test-mode {
  margin: 4px 0 0;
  color: rgba(232,223,207,.45);
  font-size: 9px
}
.threshold-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 5px auto 4px;
  max-width: 570px;
  color: rgba(210,173,112,.65);
  font: italic 12px Georgia,serif;
  text-transform: lowercase
}
.threshold-divider::after,
.threshold-divider::before {
  content: '';
  height: 1px;
  flex: 1;
  background: linear-gradient(90deg,transparent,rgba(203,157,81,.38))
}
.threshold-divider::after {
  background: linear-gradient(90deg,rgba(203,157,81,.38),transparent)
}
.threshold-support h3 {
  margin: 0 0 2px;
  color: #d9bc82;
  font: 20px Georgia,serif
}

.threshold-support > p:first-of-type {
  margin: 0 auto 5px;
  max-width: 640px;
  color: var(--ivory-72);
  font-size: 11px;
  line-height: 1.25
}
.threshold-donate {
  border-color: rgba(181,154,65,.78);
  color: #f3dfad;
  background: linear-gradient(180deg,rgba(61,126,62,.95),rgba(15,62,31,.96));
  box-shadow: inset 0 1px 0 rgba(255,244,191,.16),0 5px 18px var(--shadow-22)
}
.threshold-donate:focus-visible,
.threshold-donate:hover {
  border-color: #dec477;
  color: #fff2c8;
  background: linear-gradient(180deg,rgba(73,145,72,.98),rgba(18,76,37,.98));
  box-shadow: inset 0 1px 0 rgba(255,244,191,.22),0 7px 22px var(--shadow-3),0 0 14px rgba(74,135,70,.18);
  outline: 0
}
.threshold-free-amount {
  margin: 3px 0 0;
  color: rgba(232,223,207,.5);
  font-size: 9px;
  letter-spacing: .03em
}
.threshold-support-note {
  margin: 4px auto 0;
  max-width: 620px;
  color: rgba(232,223,207,.42);
  font-size: 9px;
  line-height: 1.25
}
.topbar h1 {

  background: linear-gradient(180deg,#f3e2b6 0,#dfbd78 38%,#b78338 72%,#8b622b 100%);
  -webkit-background-clip: text;
  background-clip: text;
  filter: saturate(1.02)
}
.topbar h1 .restricted-access {

  margin-left: .18em;
  border-radius: 2px;
  -webkit-text-fill-color: #a89d88;
  font-weight: 400;

  vertical-align: .18em;
  text-shadow: 0 1px 2px rgba(0,0,0,.85);
  }
.topbar h1 .restricted-access::before {
  content: '';
  display: inline-block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #8f7b51;
  box-shadow: 0 0 5px var(--gold-28);
  vertical-align: .16em;
  margin-right: 7px
}
.cartographer-help-trigger {
  position: fixed;
  right: 35px;
  bottom: 44px;
  z-index: 850;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(222,181,105,.68);
  border-radius: 50%;
  color: #f0d49b;
  background: radial-gradient(circle at 35% 28%,rgba(255,231,174,.25),transparent 23%),linear-gradient(145deg,#6f5125,#2b1b0d 68%,#120c07);
  box-shadow: 0 8px 22px rgba(0,0,0,.52),inset 0 1px 0 rgba(255,240,196,.22),inset 0 -2px 5px var(--shadow-48);
  font: 600 19px/1 Georgia,serif;
  cursor: pointer;
  transition: transform .18s,border-color .18s,box-shadow .18s,color .18s
}
.cartographer-help-trigger:focus-visible,
.cartographer-help-trigger:hover {
  transform: translateY(-2px);
  border-color: #efd39e;
  color: #fff1ce;
  box-shadow: 0 10px 26px rgba(0,0,0,.62),0 0 18px var(--gold-18),inset 0 1px 0 rgba(255,240,196,.28);
  outline: 0
}
.cartographer-help-dialog {
  width: min(720px,calc(100vw - 30px));
  max-height: min(780px,calc(100vh - 30px));
  padding: 34px 38px 30px;
  overflow: auto;
  border: 1px solid rgba(203,157,81,.56);
  color: #e9dfcc;
  background: radial-gradient(circle at 50% 0,rgba(124,82,28,.2),transparent 34%),linear-gradient(145deg,#1d160f,#090807 72%);
  box-shadow: 0 34px 100px rgba(0,0,0,.84),inset 0 0 0 1px rgba(255,229,170,.045);
  text-align: center;
  scrollbar-width: thin;
  scrollbar-color: #9c7337 rgba(18,11,6,.72)
}
.cartographer-help-dialog::backdrop {
  background: var(--shadow-72);
  backdrop-filter: blur(2px)
}
@keyframes cartographer-help-rise {
  from {
    opacity: 0;
    transform: translateY(10px) scale(.985)
  }
  to {
    opacity: 1;
    transform: none
  }
}
.cartographer-help-close {
  position: absolute;
  right: 15px;
  top: 10px;
  padding: 0;
  border: 0;
  color: var(--ivory-58);
  background: 0 0;
  font-size: 29px;
  line-height: 1;
  cursor: pointer
}
.cartographer-help-close:focus-visible,
.cartographer-help-close:hover {
  color: #ecd39f;
  outline: 0
}
.cartographer-help-mark {
  width: 46px;
  height: 46px;
  margin: 0 auto 10px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(210,173,112,.35);
  border-radius: 50%;
  color: #d8b36e;
  background: radial-gradient(circle,rgba(185,139,66,.2),rgba(20,13,7,.72));
  box-shadow: 0 0 28px var(--gold-16)
}

.cartographer-help-dialog h2 {
  margin: 7px 0;
  color: #ead3a3;
  font: 29px Georgia,serif
}
.cartographer-help-intro {
  margin: 0 auto 24px;
  max-width: 560px;
  color: rgba(232,223,207,.68);
  font: italic 14px/1.55 Georgia,serif
}
.cartographer-help-grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 12px;
  text-align: left
}
.cartographer-help-section {
  padding: 17px 18px 14px;
  border: 1px solid rgba(185,139,66,.2);

  }
.cartographer-help-section h3 {
  margin: 0 0 11px;
  color: #d2ad68;
  font: 17px Georgia,serif
}
.cartographer-help-section dd,
.cartographer-help-section dl {
  margin: 0
}
.cartographer-help-section dl > div {
  display: grid;
  grid-template-columns: 108px minmax(0,1fr);
  gap: 10px;
  padding: 8px 0;
  border-top: 1px solid rgba(232,223,207,.075)
}
.cartographer-help-section dl > div:first-child {
  border-top: 0;
  padding-top: 0
}
.cartographer-help-section dt {
  color: #e6ca91;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .035em
}
.cartographer-help-section dd {
  color: var(--ivory-72);
  font-size: 11px;
  line-height: 1.45
}


.viewer-copy-text {
  position: fixed;
  z-index: 10003;
  min-width: 92px;
  height: 42px;
  padding: 0 14px 0 12px;
  border: 1px solid rgba(190,145,73,.52);
  border-radius: 22px;
  color: #d8b875;
  background: radial-gradient(circle at 35% 25%,rgba(92,65,31,.96),rgba(20,14,8,.97) 72%);
  box-shadow: 0 8px 24px var(--shadow-48),inset 0 0 0 1px rgba(255,224,155,.08);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font: 600 12px/1.1 Georgia,serif;
  letter-spacing: .025em;
  cursor: pointer;
  transition: transform .18s,border-color .18s,color .18s,opacity .18s
}
.viewer-copy-text:hover:not(:disabled) {
  transform: translateY(-1px);
  color: #f1d99c;
  border-color: rgba(224,184,111,.86)
}
.viewer-copy-text:disabled {
  opacity: .42;
  cursor: not-allowed;
  filter: saturate(.55)
}
.viewer-copy-text.copied {
  color: #e7d49c;
  border-color: rgba(199,180,113,.92);
  box-shadow: 0 8px 24px var(--shadow-48),inset 0 0 18px rgba(195,166,91,.18)
}
.viewer-copy-text.copy-error {
  color: #d6a69c;
  border-color: rgba(169,70,54,.8)
}
.copy-text-icon {
  font: 18px/1 Georgia,serif;
  transform: translateY(-1px)
}
.copy-text-label {
  white-space: nowrap
}
.admin-button {
  border-color: rgba(211,166,83,.62);
  background: linear-gradient(180deg,rgba(106,74,29,.88),rgba(48,31,13,.94));
  color: #f3d79d;
  text-decoration: none;
  box-shadow: inset 0 1px 0 rgba(255,224,158,.12),0 5px 16px var(--shadow-28)
}
.admin-button:hover {
  border-color: rgba(234,194,115,.88);
  color: #ffe8b8
}
.admin-page {
  min-height: 100vh;
  margin: 0;
  padding: 32px;
  color: #e8dfcf;
  background: radial-gradient(circle at 50% 15%,rgba(128,83,26,.18),transparent 32%),#070706;
  font-family: Arial,sans-serif
}
.admin-shell {
  width: min(980px,100%);
  margin: 0 auto
}
.admin-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--gold-28)
}
.admin-header h1 {
  margin: 5px 0;
  color: #efd39c;
  font: 36px Georgia,serif
}
.admin-kicker {
  margin: 0;
  color: #c99d53;
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase
}
.admin-panel {
  margin-top: 28px;
  padding: 34px;
  border: 1px solid rgba(185,139,66,.38);
  background: linear-gradient(145deg,rgba(32,23,14,.94),rgba(8,7,6,.97));
  box-shadow: 0 24px 70px var(--shadow-5)
}

.admin-panel h2 {
  color: #e8cd98;
  font: 28px Georgia,serif
}
.admin-panel p {
  max-width: 720px;
  color: var(--ivory-72);
  line-height: 1.7
}




.main-nav a.nav-item {
  display: block;
  box-sizing: border-box;
  text-decoration: none
}
.echoes-page {
  min-height: 100vh;
  margin: 0;
  padding: 32px;
  color: #e8dfcf;
  background: radial-gradient(circle at 50% 8%,rgba(122,78,24,.18),transparent 34%),linear-gradient(rgba(5,5,4,.91),rgba(5,5,4,.96)),image-set(url("images/fond_principal.avif") type("image/avif"), url("images/fond_principal.webp") type("image/webp"), url("images/fond_principal.jpg") type("image/jpeg")) center/cover fixed;
  font-family: Arial,sans-serif
}
.echoes-shell {
  width: min(980px,100%);
  margin: 0 auto
}
.echoes-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 28px;
  padding-bottom: 28px;
  border-bottom: 1px solid rgba(185,139,66,.3)
}
.echoes-header h1 {
  margin: 5px 0 12px;
  color: #efd39c;
  font-size: clamp(31px,5vw,48px);
  line-height: 1.1;
  font-family: Georgia,serif
}
.echoes-kicker {
  margin: 0;
  color: #c99d53;
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase
}

.admin-notice,
.echoes-notice {
  margin: 22px 0 0;
  padding: 14px 17px;
  border: 1px solid
}
.echoes-notice p {
  margin: 0
}
.echoes-notice p + p {
  margin-top: 5px
}
.admin-notice.success,
.echoes-notice.success {
  border-color: rgba(108,166,112,.42);
  background: rgba(48,104,54,.15);
  color: #a9cfaa
}
.admin-notice.error,
.echoes-notice.error {
  border-color: rgba(177,82,66,.46);
  background: rgba(107,42,32,.16);
  color: #dfafa5
}
.echo-compose {
  margin: 30px 0;
  padding: 28px;
  border: 1px solid rgba(185,139,66,.38);
  background: linear-gradient(145deg,rgba(34,24,14,.95),rgba(9,8,7,.97));
  box-shadow: 0 22px 60px var(--shadow-4)
}
.admin-section-title,
.echo-compose-heading,
.echo-list-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px
}
.admin-section-title h2,
.echo-compose h2,
.echo-list-heading h2 {
  margin: 5px 0;
  color: #e8cd98;
  font: 27px Georgia,serif
}
.echo-rule {
  padding: 7px 10px;
  border: 1px solid var(--gold-28);
  color: #b7955d;
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase
}
.echo-warning {
  padding: 12px 14px;
  border-left: 2px solid #9f7131;
  background: rgba(151,104,39,.08);
  color: rgba(232,223,207,.66);
  font-size: 12px;
  line-height: 1.55
}
.echo-form label {
  display: block;
  margin: 18px 0 8px;
  color: #d8bd87;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase
}
.echo-form textarea,
.moderation-form textarea {
  box-sizing: border-box;
  width: 100%;
  resize: vertical;
  border: 1px solid var(--gold-28);
  outline: 0;
  padding: 15px;
  color: #ede2cc;
  background: rgba(0,0,0,.33);
  font: 14px/1.65 Georgia,serif;
  transition: border-color .2s,box-shadow .2s
}
.echo-form textarea:focus,
.moderation-form textarea:focus {
  border-color: rgba(220,177,98,.72);
  box-shadow: 0 0 0 3px rgba(183,132,53,.08)
}
.echo-form-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 15px
}
.echo-form .echo-anonymous {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  color: rgba(232,223,207,.66);
  font-size: 12px;
  letter-spacing: 0;
  text-transform: none
}
.echo-anonymous input {
  accent-color: #b88438
}
.echo-list {
  padding: 10px 0 50px
}
.echo-list-heading {
  padding: 0 0 14px;
  border-bottom: 1px solid rgba(185,139,66,.25)
}
.echo-list-heading span {
  color: #9e7b48;
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase
}
.echo-card {
  position: relative;
  margin-top: 16px;
  padding: 23px 25px;
  border: 1px solid var(--gold-22);
  background: linear-gradient(135deg,rgba(30,22,14,.78),rgba(8,7,6,.8))
}
.echo-card:before {
  content: '“';
  position: absolute;
  right: 20px;
  top: 5px;
  color: rgba(185,139,66,.12);
  font: 70px Georgia,serif
}
.echo-card header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px
}
.echo-card strong {
  color: #d9bc83;
  font: 16px Georgia,serif
}
.echo-card time {
  color: #806a49;
  font-size: 10px;
  letter-spacing: .08em
}
.echo-card p {
  position: relative;
  margin: 17px 0 0;
  color: rgba(239,230,213,.81);
  font: 15px/1.72 Georgia,serif;
  white-space: normal
}
.admin-empty,
.echo-empty {
  padding: 28px;
  border: 1px dashed var(--gold-24);
  color: rgba(232,223,207,.48);
  font: italic 14px Georgia,serif;
  text-align: center
}
.admin-lead {
  margin: 6px 0 0;
  color: rgba(232,223,207,.62)
}

.admin-moderation-section {
  margin-top: 28px
}
.admin-section-title {
  padding-bottom: 13px;
  border-bottom: 1px solid rgba(185,139,66,.26)
}
.admin-count {
  display: inline-grid;
  place-items: center;
  min-width: 38px;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(205,157,78,.55);
  border-radius: 50%;
  color: #efd39c;
  background: rgba(116,75,25,.25);
  font: 16px Georgia,serif
}
.admin-count.muted {
  opacity: .55
}
.moderation-list {
  display: grid;
  gap: 16px;
  margin-top: 16px
}
.moderation-card {
  padding: 22px;
  border: 1px solid rgba(185,139,66,.32);
  background: linear-gradient(145deg,rgba(32,23,14,.94),rgba(8,7,6,.97));
  box-shadow: 0 18px 50px var(--shadow-28)
}
.moderation-card.published {
  border-color: rgba(185,139,66,.19);
  opacity: .91
}
.moderation-card header {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 14px
}
.moderation-card header strong {
  display: block;
  color: #e4c68d;
  font: 17px Georgia,serif
}
.moderation-card header small {
  display: block;
  margin-top: 5px;
  color: #866e4a;
  font-size: 10px
}
.moderation-card time {
  color: #8e744e;
  font-size: 11px
}
.moderation-actions {
  display: flex;
  justify-content: flex-end;
  gap: 9px;
  flex-wrap: wrap;
  margin-top: 12px
}
.approve-button {
  border-color: rgba(101,163,106,.56);
  background: linear-gradient(180deg,rgba(53,104,58,.7),rgba(25,55,29,.82));
  color: #baddbb
}
.delete-button,
.reject-button {
  border-color: rgba(172,78,62,.5);
  background: linear-gradient(180deg,rgba(105,45,35,.66),rgba(57,25,20,.82));
  color: #ddb0a7
}
.published-section {
  padding-bottom: 50px
}
.notebook-page {
  min-height: 100vh;
  margin: 0;
  padding: 32px;
  color: #e8dfcf;
  font-family: Arial,sans-serif
}
.notebook-shell {
  width: min(1100px,100%);
  margin: 0 auto
}
.notebook-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 28px
}
.notebook-header h1 {
  line-height: 1.05;
  font-family: Georgia,serif
}
.notebook-kicker {
  margin: 0;
  font-size: 10px;

  text-transform: uppercase
}
.notebook-intro,
.notebook-section-intro {
  max-width: 720px;
  margin: 0;
  color: rgba(232,223,207,.7);
  font: italic 15px/1.7 Georgia,serif
}
.notebook-book {
  position: relative;
  margin: 30px 0;
  box-shadow: 0 28px 80px var(--shadow-55),inset 0 0 50px rgba(176,119,43,.06)
}
.notebook-book:after {
  content: '';
  position: absolute;
  left: 50%;
  top: 18px;
  bottom: 18px;
  width: 1px;
  background: linear-gradient(transparent,rgba(211,166,83,.25),transparent);
  box-shadow: 0 0 16px rgba(0,0,0,.8)
}
.notebook-book-heading,
.notebook-section-heading {
  display: flex;

  justify-content: space-between;
  gap: 20px
}
.notebook-book h2,
.notebook-section h2 {
  margin: 5px 0;
  color: #e8cd98;
  font: 29px Georgia,serif
}
.notebook-save-state {
  position: relative;
  z-index: 1;
  padding: 7px 10px;
  border: 1px solid rgba(117,169,117,.36);
  background: rgba(44,91,48,.12);

  }
.notebook-save-state.is-dirty,
.notebook-save-state.is-saving {
  border-color: rgba(185,139,66,.38);
  color: #caaa72;
  background: rgba(126,86,31,.12)
}
.notebook-save-state.is-error {
  border-color: rgba(177,82,66,.5);
  background: rgba(107,42,32,.16)
}
#notebookContent:focus {
  border-color: rgba(220,177,98,.72);
  box-shadow: inset 0 0 38px rgba(85,56,23,.19),0 0 0 3px rgba(183,132,53,.08)
}

.notebook-section {
  margin: 30px 0;
  padding: 28px;
  border: 1px solid rgba(185,139,66,.32);
  background: linear-gradient(145deg,rgba(31,23,15,.94),rgba(8,7,6,.97));
  box-shadow: 0 22px 60px rgba(0,0,0,.38)
}
.notebook-count {
  display: grid;
  place-items: center;
  min-width: 38px;
  height: 38px;
  border: 1px solid rgba(205,157,78,.5);
  border-radius: 50%;
  font: 16px Georgia,serif
}
.notebook-section-intro {
  margin-top: 16px;
  font-size: 14px
}














.favorite-card {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 11px 13px;
  border: 1px solid var(--gold-18);
  color: var(--ivory-58);
  background: var(--shadow-2);
  cursor: pointer;
  text-align: left;
  transition: .18s
}
.favorite-card span {
  color: rgba(197,151,78,.25);
  font-size: 18px
}
.favorite-card strong {
  font: 13px Georgia,serif
}
.favorite-card:hover {
  border-color: rgba(211,166,83,.48);
  transform: translateY(-1px)
}
.favorite-card.is-favorite {
  border-color: rgba(213,170,89,.66);
  color: #ecd5a8;
  background: linear-gradient(145deg,rgba(103,70,26,.34),rgba(28,20,12,.7));
  box-shadow: inset 0 0 20px rgba(190,132,44,.06)
}
.favorite-card.is-favorite span {
  color: #e0b865;
  text-shadow: 0 0 12px rgba(224,184,101,.28)
}
.favorite-card:disabled {
  cursor: wait;
  opacity: .65
}
body.notebook-page {
  overflow-y: auto!important;
  overflow-x: hidden!important;
  height: auto!important;
  min-height: 100vh
}
.notebook-page .notebook-shell {
  width: min(1500px,100%)
}
.notebook-workspace {
  display: grid;

  align-items: start;
  padding-bottom: 50px
}
.notebook-free-panel {
  position: relative;
  top: auto;
  margin: 0;
  min-height: calc(100vh - 150px)
}
.notebook-free-panel #notebookContent {
  min-height: calc(100vh - 330px);
  max-height: none
}
.notebook-cards-panel {
  margin: 0;
  min-width: 0
}

.notebook-card-entry {
  position: relative;
  border: 1px solid var(--gold-24);
  box-shadow: inset 0 0 24px rgba(175,119,43,.025)
}
.notebook-card-entry:before {
  content: '';
  position: absolute;
  left: -1px;
  top: -1px;
  bottom: -1px;
  width: 3px;
  background: #ae823e
}
.notebook-card-entry[data-status=important]:before {
  background: #c47745
}
.notebook-card-entry[data-status=verified]:before {
  background: #769477
}
.notebook-card-entry[data-status=solved]:before {
  background: #d2ae5c
}
.notebook-card-entry[data-status=deadend]:before {
  background: #8d6058
}
.notebook-card-entry[data-status=empty]:before {
  background: rgba(174,130,62,.2)
}
.notebook-card-entry header {
  display: flex;

  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid rgba(185,139,66,.14)
}
.notebook-card-entry header strong {
  font: 400 18px Georgia,serif;
  letter-spacing: .02em;
  color: #e8c68b
}
.notebook-card-entry p {
  font: 14px/1.55 Georgia,serif;
  white-space: normal;
  overflow-wrap: anywhere
}
.notebook-card-entry time {
  display: block;
  color: #755f40;
  font-size: 9px
}
.notebook-card-status {
  color: #9a7a4d;
  font-size: 9px;
  letter-spacing: .1em;
  text-transform: uppercase
}
.notebook-card-placeholder {
  font-style: italic
}
.notebook-card-entry.is-empty {
  background: rgba(0,0,0,.14)
}
.notebook-card-entry .favorite-card {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 31px;
  height: 31px;
  min-height: 0;
  padding: 0;
  border: 1px solid var(--gold-18);
  cursor: pointer
}
.notebook-card-entry .favorite-card span:first-child {
  font-size: 17px;
  color: rgba(197,151,78,.28)
}
.notebook-card-entry .favorite-card.is-favorite {
  border-color: rgba(213,170,89,.66);
  background: rgba(103,70,26,.34)
}
.notebook-card-entry .favorite-card.is-favorite span:first-child {
  color: #e0b865;
  text-shadow: 0 0 12px rgba(224,184,101,.28)
}
html.notebook-document {
  height: auto!important;
  min-height: 100%!important;
  overflow-x: hidden!important;
  overflow-y: scroll!important;
  scrollbar-gutter: stable
}
html.notebook-document body.notebook-page {
  height: auto!important;
  min-height: 100vh!important;
  overflow: visible!important
}
html.notebook-document .notebook-shell {
  min-height: 100vh
}
.notebook-card-filter {

  margin: 20px 0 0;
  padding: 0;
  border: 0
}
.notebook-card-filter label {
  cursor: pointer
}
.notebook-card-filter input {
  position: absolute;
  opacity: 0;
  pointer-events: none
}
.notebook-card-filter span {
  display: block;
  border: 1px solid rgba(185,139,66,.26);
  font: 12px Georgia,serif;

  transition: .18s
}

.notebook-card-filter label:hover span {
  border-color: rgba(211,166,83,.5)
}
.notebook-card-list {
  display: grid!important;
  grid-template-columns: 1fr!important;
  }
.notebook-card-entry {
  display: grid;

  align-items: stretch
}
.notebook-card-entry[hidden] {
  display: none!important
}
.notebook-card-thumbnail {
  display: block;
  object-fit: cover;
  border: 1px solid rgba(211,166,83,.28);
  background: #090806;
  }
.notebook-card-entry header {
  align-items: flex-start!important
}
.notebook-card-entry header > div {
  display: flex;
  flex-direction: column;
  gap: 4px
}
.notebook-card-kind {

  text-transform: uppercase
}
.notebook-card-thumbnail-link {
  position: relative;
  display: block;
  align-self: start;
  text-decoration: none;
  outline: 0
}
.notebook-card-thumbnail-link:focus-visible {
  box-shadow: 0 0 0 2px #d6ad62,0 0 0 5px rgba(214,173,98,.2)
}
.notebook-card-thumbnail-link .notebook-card-thumbnail {
  transition: transform .18s,filter .18s,border-color .18s
}
.notebook-card-thumbnail-link:focus-visible .notebook-card-thumbnail,
.notebook-card-thumbnail-link:hover .notebook-card-thumbnail {
  transform: translateY(-2px) scale(1.025);
  filter: brightness(1.08);
  border-color: rgba(224,184,101,.72)
}
.notebook-card-zoom-hint {
  position: absolute;
  left: 7px;
  right: 7px;
  bottom: 7px;
  padding: 4px 5px;
  border: 1px solid rgba(224,184,101,.32);
  background: rgba(5,4,3,.82);
  color: #e0c38d;
  font: 9px/1.1 Arial,sans-serif;
  letter-spacing: .08em;
  text-align: center;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .18s,transform .18s;
  pointer-events: none
}
.notebook-card-thumbnail-link:focus-visible .notebook-card-zoom-hint,
.notebook-card-thumbnail-link:hover .notebook-card-zoom-hint {
  opacity: 1;
  transform: translateY(0)
}

.notebook-shell {
  padding-bottom: 34px
}
.notebook-header {
  border-bottom: 1px solid rgba(201,157,83,.25)
}
.notebook-header h1 {
  margin: .18em 0 .28em;

  text-shadow: 0 3px 22px var(--shadow-55)
}
.notebook-intro {
  font: italic 16px/1.72 Georgia,serif!important
}

.notebook-book {
  background: linear-gradient(105deg,rgba(90,55,23,.13),transparent 9%,transparent 91%,rgba(67,39,17,.13)),linear-gradient(rgba(248,235,201,.97),rgba(225,205,158,.97))
}
.notebook-book:before {
  opacity: .28;
  display: none
}
.notebook-book-heading h2,
.notebook-section-heading h2 {
  letter-spacing: .012em
}
#notebookContent {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  width: 100%;
  resize: vertical;
  outline: 0;

  border-radius: 1px;
  background: radial-gradient(circle at 18% 12%,rgba(255,255,255,.18),transparent 30%),repeating-linear-gradient(0deg,rgba(100,72,34,.018) 0,rgba(100,72,34,.018) 1px,transparent 1px,transparent 5px),linear-gradient(rgba(250,240,214,.92),rgba(232,215,174,.94));
  }


.notebook-consign-button {
  flex: 0 0 auto;
  font-family: Georgia,serif!important;
  }
.notebook-consign-button span {
  margin-right: 5px;
  font-size: 15px
}
.notebook-section-intro {
  max-width: 600px;
  line-height: 1.65
}
.notebook-card-filter {
  display: grid;

  }
.notebook-card-filter span {
  text-align: center;
  letter-spacing: .1em
}

.notebook-card-entry {

  transition: transform .16s,border-color .16s,box-shadow .16s,background .16s
}
.notebook-card-thumbnail {
  border-color: rgba(219,174,92,.32);
  box-shadow: 0 10px 24px rgba(0,0,0,.45)
}
.notebook-card-content {
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden
}
.notebook-card-kind {
  letter-spacing: .19em
}
.notebook-card-status {
  margin-top: 12px
}
.notebook-card-entry time {
  margin-top: auto;
  padding-top: 3px
}
.notebook-card-placeholder {
  display: block!important;
  margin: auto 0!important
}
.notebook-card-entry.is-return-target {
  animation: 2.4s both notebook-return-glow
}
@keyframes notebook-return-glow {
  0% {
    border-color: rgba(235,194,112,.95);
    box-shadow: 0 0 0 1px rgba(235,194,112,.58),0 0 34px rgba(210,154,65,.42)
  }
  35% {
    border-color: rgba(235,194,112,.75);
    box-shadow: 0 0 0 1px rgba(235,194,112,.32),0 0 25px rgba(210,154,65,.25)
  }
  100% {
    border-color: rgba(190,144,70,.22);
    box-shadow: none
  }
}
.notebook-footer-quote {
  max-width: 900px;
  margin: 20px auto 0;
  padding: 30px 20px 12px;
  font: italic 15px/1.7 Georgia,serif;
  text-align: center;
  letter-spacing: .015em
}
.notebook-page {
  --notebook-paper-image: var(--echo-image-fond-observations, url('images/fond-observations.webp'));
  background: radial-gradient(circle at 20% 5%,rgba(157,103,35,.1),transparent 28%),linear-gradient(rgba(3,5,6,.82),rgba(3,5,6,.95)),image-set(url("images/fond_principal.avif") type("image/avif"), url("images/fond_principal.webp") type("image/webp"), url("images/fond_principal.jpg") type("image/jpeg")) center/cover fixed
}
.notebook-shell {
  max-width: 1500px
}
.notebook-header {
  padding: 24px 4px 26px
}
.notebook-header h1 {
  color: #ecd19a;
  font-size: clamp(42px,5vw,66px);
  font-weight: 400;
  letter-spacing: .015em
}
.notebook-intro {
  max-width: 900px!important;
  color: #d7c09a!important;
  font-size: 17px!important
}
.notebook-workspace {
  grid-template-columns: minmax(0,1.05fr) minmax(450px,.95fr);
  gap: 14px;
  margin-top: 16px
}
.notebook-book,
.notebook-cards-panel {
  border: 1px solid rgba(192,139,55,.52);
  background: linear-gradient(145deg,rgba(27,20,13,.97),rgba(7,7,6,.99));
  box-shadow: 0 22px 58px var(--shadow-48),inset 0 1px rgba(255,231,181,.04)
}
.notebook-book {
  padding: 28px 32px 24px
}
.notebook-book-heading,
.notebook-section-heading {
  align-items: center;
  padding-bottom: 15px;
  border-bottom: 1px solid rgba(191,139,57,.3)
}
.notebook-book-heading h2,
.notebook-section-heading h2 {
  color: #efd09a;
  font-size: clamp(27px,2.4vw,36px);
  font-weight: 400
}
.notebook-kicker {
  color: #c88c36!important;
  letter-spacing: .16em
}
.notebook-consign-control {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 44px
}
.notebook-consign-button {
  min-width: 178px;
  padding: 13px 22px!important;
  border-color: rgba(210,157,72,.62)!important;
  background: linear-gradient(180deg,rgba(74,49,20,.5),rgba(13,11,8,.88))!important;
  color: #efcc87!important;
  box-shadow: inset 0 1px rgba(255,227,169,.09),0 9px 20px rgba(0,0,0,.25)!important;
  text-transform: uppercase;
  letter-spacing: .13em!important
}
.notebook-consign-button:hover {
  border-color: #d6a653!important;
  background: linear-gradient(180deg,rgba(106,70,26,.58),rgba(20,15,9,.92))!important
}
.notebook-save-state {
  max-width: 180px;
  color: #c7a56a;
  font-size: 10px;
  letter-spacing: .08em;
  text-align: right;
  text-transform: uppercase
}
.notebook-save-state.is-saving {
  color: #c7a56a
}
.notebook-save-state.is-saved {
  color: #d6b878
}
.notebook-save-state.is-error {
  color: #ce8d76
}
#notebookContent {
  min-height: 540px;
  margin-top: 18px;
  padding: 34px 36px;
  border: 1px solid rgba(126,83,34,.52);
  background-image: var(--notebook-paper-image),radial-gradient(circle at 18% 12%,rgba(255,255,255,.2),transparent 30%),repeating-linear-gradient(0deg,rgba(105,74,34,.035) 0,rgba(105,74,34,.035) 1px,transparent 1px,transparent 28px),linear-gradient(rgba(241,220,178,.97),rgba(220,191,138,.97));
  background-position: center,center,center,center;
  background-size: cover,auto,auto,auto;
  color: #392819;
  font: 17px/1.8 Georgia,serif;
  box-shadow: inset 0 0 52px rgba(78,45,16,.23),0 9px 24px var(--shadow-28)
}
#notebookContent::placeholder {
  color: rgba(64,43,24,.58);
  font-style: italic
}
.notebook-cards-panel {
  padding: 28px 28px 24px
}
.notebook-section-intro {
  color: #c7ae83;
  font-style: italic
}
.notebook-count {
  border-color: rgba(200,145,52,.65);
  color: #e7bd70;
  background: rgba(70,45,14,.22)
}
.notebook-card-filter {
  gap: 0;
  margin-top: 18px
}
.notebook-card-filter span {
  padding: 14px 16px;
  border-color: rgba(185,139,66,.35);
  background: rgba(7,7,6,.52);
  color: rgba(235,220,192,.68);
  font-family: Arial,sans-serif;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase
}
.notebook-card-filter input:checked + span {
  box-shadow: inset 0 1px rgba(255,233,185,.11),0 8px 18px var(--shadow-18);
  border-color: rgba(224,174,84,.82);
  background: linear-gradient(180deg,rgba(111,72,25,.7),rgba(58,37,17,.76));
  color: #f1cf8b
}
.notebook-card-list {
  gap: 8px!important;
  margin-top: 16px
}
.notebook-card-entry {
  grid-template-columns: 86px minmax(0,1fr);
  gap: 16px;
  min-height: 126px!important;
  padding: 10px!important;
  border-color: rgba(183,131,49,.3);
  background: linear-gradient(135deg,rgba(25,20,14,.95),rgba(7,7,6,.98))
}
.notebook-card-entry.is-empty {
  min-height: 126px!important
}
.notebook-card-entry:hover {
  transform: translateY(-2px);
  box-shadow: 0 15px 30px var(--shadow-28);
  border-color: rgba(211,165,88,.5);
  background: linear-gradient(135deg,rgba(34,25,15,.96),rgba(9,8,7,.99))
}
.notebook-card-thumbnail,
.notebook-card-thumbnail-link {
  width: 86px;
  height: 110px
}
.notebook-card-content {
  padding: 3px 5px 2px 0
}
.notebook-card-entry header {
  padding-bottom: 8px
}
.notebook-card-kind {
  color: #b6823e;
  font-size: 8px
}
.notebook-card-entry p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  max-height: 4.8em;
  margin: 10px 0 6px;
  color: rgba(224,214,196,.58);
  font-size: 14px;
  line-height: 1.45
}
.notebook-card-placeholder {
  color: rgba(220,211,194,.35)!important
}
.notebook-card-entry .favorite-card {
  border-color: rgba(192,139,53,.28);
  background: rgba(8,7,5,.3)
}
.notebook-footer-quote {
  margin-top: 6px;
  padding-top: 18px;
  color: #b9955d;
  font-size: 16px
}
.cartographer-help-dialog::-webkit-scrollbar {
  width: 14px
}
.cartographer-help-dialog::-webkit-scrollbar-track {
  margin-block: 10px;
  border: 1px solid var(--gold-22);
  border-radius: 999px;
  background: linear-gradient(90deg,var(--white-025),var(--shadow-18) 48%,var(--white-018)),rgba(18,11,6,.76);
  box-shadow: inset 0 0 7px var(--shadow-72),0 0 0 1px rgba(0,0,0,.25)
}
.cartographer-help-dialog::-webkit-scrollbar-thumb {
  min-height: 70px;
  border: 3px solid transparent;
  border-radius: 999px;
  background: linear-gradient(90deg,#6e4b20 0,#b98b42 34%,#d3ae68 50%,#9a6c2f 72%,#5d3d19 100%) padding-box;
  box-shadow: inset 0 0 0 1px rgba(255,226,160,.22),inset 0 0 8px rgba(40,20,4,.45),0 1px 5px var(--shadow-55)
}
.cartographer-help-dialog::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(90deg,#795424 0,#c99b4c 34%,#e0bd77 50%,#aa7836 72%,#68441c 100%) padding-box
}
.cartographer-help-dialog::-webkit-scrollbar-corner {
  background: 0 0
}
html.content-page {
  height: auto;
  min-height: 100%;
  overflow-y: auto;
  overflow-x: hidden
}
html.admin-document {
  height: auto;
  min-height: 100%;
  overflow-y: auto;
  overflow-x: hidden
}
body.admin-page,
body.echoes-page {
  height: auto;
  min-height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: #9c7337 rgba(18,11,6,.72)
}
body.admin-page::-webkit-scrollbar,
body.echoes-page::-webkit-scrollbar {
  width: 14px
}
body.admin-page::-webkit-scrollbar-track,
body.echoes-page::-webkit-scrollbar-track {
  margin-block: 10px;
  border: 1px solid var(--gold-22);
  border-radius: 999px;
  background: linear-gradient(90deg,var(--white-025),var(--shadow-18) 48%,var(--white-018)),rgba(18,11,6,.76);
  box-shadow: inset 0 0 7px var(--shadow-72),0 0 0 1px rgba(0,0,0,.25)
}
body.admin-page::-webkit-scrollbar-thumb,
body.echoes-page::-webkit-scrollbar-thumb {
  min-height: 70px;
  border: 3px solid transparent;
  border-radius: 999px;
  background: linear-gradient(90deg,#6e4b20 0,#b98b42 34%,#d3ae68 50%,#9a6c2f 72%,#5d3d19 100%) padding-box;
  box-shadow: inset 0 0 0 1px rgba(255,226,160,.22),inset 0 0 8px rgba(40,20,4,.45),0 1px 5px var(--shadow-55)
}
.echo-options {
  display: grid;
  gap: 10px
}
.echo-organizer-only {
  color: #d2ad70!important
}
.private-message-badge {
  display: inline-block;
  margin-top: 8px;
  padding: 5px 8px;
  border: 1px solid rgba(210,173,112,.42);
  color: #d9bc82;
  background: var(--gold-08);
  font-size: 9px;
  letter-spacing: .1em;
  text-transform: uppercase
}
.private-message-card {
  border-color: rgba(210,173,112,.42)
}
.echo-private-note {
  margin: 6px 0 0 28px;
  color: rgba(232,223,207,.62);
  font-size: 12px;
  font-style: italic;
  line-height: 1.45;
  max-width: 520px
}


.echo-compose-launch {
  display: flex;
  justify-content: center;
  margin: 28px 0 8px
}
.echo-compose-toggle {
  min-width: 300px;
  justify-content: center;
  gap: 11px;
  border-color: rgba(205,158,79,.58);
  background: linear-gradient(180deg,rgba(77,51,20,.68),rgba(24,17,10,.92));
  box-shadow: inset 0 1px rgba(255,228,172,.09),0 12px 26px var(--shadow-28)
}
.echo-compose-toggle:hover {
  border-color: rgba(225,181,104,.82);
  background: linear-gradient(180deg,rgba(103,67,24,.78),rgba(31,21,11,.96))
}
.echo-compose-toggle-icon {
  font-size: 17px;
  line-height: 1
}
.echo-compose-toggle-chevron {
  display: inline-block;
  margin-left: 2px;
  font-size: 19px;
  line-height: .8;
  transition: transform .28s
}
.echo-compose-toggle[aria-expanded=true] .echo-compose-toggle-chevron {
  transform: rotate(180deg)
}
.echo-compose-panel {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  visibility: hidden;
  transition: grid-template-rows .32s,opacity .24s,visibility 0s linear .32s
}
.echo-compose-panel.is-open {
  grid-template-rows: 1fr;
  opacity: 1;
  visibility: visible;
  transition: grid-template-rows .32s,opacity .28s,visibility linear
}
.echo-compose-panel-inner {
  min-height: 0;
  overflow: hidden
}
.echo-compose-panel .echo-compose {
  margin: 22px 0 30px
}
.private-thread-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 16px;
  padding: 12px 16px;
  border: 1px solid rgba(196,160,90,.35);
  border-left: 4px solid #c4a05a;
  border-radius: 8px;
  background: rgba(196,160,90,.08)
}
.private-thread-banner .title {
  margin-bottom: 3px;
  color: #d8bf7b;
  font-weight: 600
}
.private-thread-banner .subtitle {
  color: rgba(232,223,207,.75);
  font-size: .9rem;
  font-style: italic
}

.clue-pile-shelve {
  left: calc(var(--clue-pile-x) + 116px);
  top: 99px
}
.clue .card-face {
  background: linear-gradient(180deg,rgba(4,7,9,.08),rgba(0,0,0,.38)),radial-gradient(circle at 50% 44%,var(--gold-18),transparent 30%),linear-gradient(145deg,#1b1812,#0b0b0a 68%)
}
.notebook-card-filter {
  grid-template-columns: repeat(3,minmax(0,1fr))
}
.enigma-card,
.pile-label {
  transition-property: left,top,transform,filter,opacity,border-color,background,box-shadow;
  transition-duration: .42s,.42s,.42s,.24s,.24s,.24s,.24s,.24s;
  transition-timing-function: cubic-bezier(.2,.8,.2,1)
}
.pile-label.deck-active {
  border-color: rgba(210,173,112,.88);
  background: rgba(68,43,20,.78);
  box-shadow: 0 20px 48px rgba(0,0,0,.56),0 0 24px rgba(185,139,66,.14),inset 0 0 0 1px rgba(210,173,112,.22)
}
.pile-label.deck-inactive {
  filter: brightness(.9) saturate(.88);
  opacity: .88;
  transform: translateX(-50%) translateY(3px)
}
.enigma-card.deck-inactive:not(.dragging) {
  filter: brightness(.91) saturate(.9);
  opacity: .94
}
.enigma-card.deck-active:not(.dragging) {
  filter: brightness(1.025)
}
.pile-label {
  display: none!important
}
.pile-shelve {
  width: 34px;
  height: 34px;
  transform: scale(.94);
  box-shadow: 0 8px 22px rgba(0,0,0,.46),inset 0 0 0 1px rgba(210,173,112,.08)
}
.pile-shelve.visible {
  transform: scale(1)
}
.enigma-card.dragging-deck {
  cursor: grabbing!important;
  transition: none!important;
  filter: brightness(1.035)
}
.enigma-card:not(.stored-card):not(.dragging):not(.dragging-deck) {
  cursor: grab
}
.notebook-seal-gate {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 430px;
  margin-top: 24px;
  padding: 34px;
  border: 1px solid rgba(194,148,75,.3);
  background: radial-gradient(circle at 50% 20%,rgba(151,98,31,.13),transparent 42%),rgba(10,8,6,.42);
  overflow: hidden
}
.notebook-seal-gate[hidden] {
  display: none!important
}
.notebook-seal-panel {
  position: relative;
  z-index: 2;
  width: min(460px,100%);
  text-align: center
}
.notebook-seal-panel[hidden] {
  display: none!important
}
.notebook-seal-panel h3 {
  margin: 7px 0 12px;
  color: #ecd09a;
  font: 400 30px/1.1 Georgia,serif
}
.notebook-seal-panel > p:not(.notebook-kicker) {
  margin: 0 auto 23px;
  max-width: 430px;
  color: rgba(230,217,193,.68);
  font: italic 14px/1.65 Georgia,serif
}
.notebook-seal-emblem {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 2;
  width: 85px;
  pointer-events: none;
  transform: rotate(6deg);
  transform-origin: center;
  transition: transform .52s cubic-bezier(.2,.8,.2,1),filter .52s
}
.notebook-seal-emblem img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 8px 12px var(--shadow-48))
}
.notebook-seal-gate.is-sealed .notebook-seal-emblem {
  transform: translate(-185px,158px) rotate(0) scale(1.12);
  filter: drop-shadow(0 0 18px rgba(118,31,28,.24))
}
.notebook-field {
  display: block;
  margin: 13px 0;
  text-align: left
}
.notebook-field > span {
  display: block;
  margin-bottom: 7px;
  color: #b8955c;
  font-size: 9px;
  letter-spacing: .14em;
  text-transform: uppercase
}
.notebook-field input {
  box-sizing: border-box;
  width: 100%;
  padding: 12px 13px;
  border: 1px solid rgba(192,146,72,.34);
  border-radius: 0;
  outline: 0;
  color: #f0e3cb;
  background: var(--shadow-34);
  font: 15px Georgia,serif;
  transition: border-color .18s,box-shadow .18s
}
.notebook-field input:focus {
  border-color: rgba(224,181,101,.72);
  box-shadow: 0 0 0 3px rgba(196,143,59,.09)
}
.notebook-field-hint {
  display: block;
  margin-top: 7px;
  color: rgba(230,217,193,.52);
  font: italic 11px/1.5 Georgia,serif;
  letter-spacing: 0;
  text-transform: none
}
.notebook-recovery-choice {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  margin: 19px 0 22px;
  padding: 14px;
  border: 1px solid rgba(187,141,69,.2);
  color: rgba(233,220,196,.74);
  background: rgba(0,0,0,.16);
  text-align: left;
  cursor: pointer
}
.notebook-recovery-choice input {
  margin-top: 3px;
  accent-color: #9c6b2c
}
.notebook-recovery-choice span {
  display: flex;
  flex-direction: column;
  gap: 4px
}
.notebook-recovery-choice strong {
  color: #d9bd88;
  font: 400 14px Georgia,serif
}
.notebook-recovery-choice small {
  color: rgba(225,211,186,.48);
  font: 12px/1.45 Georgia,serif
}
.notebook-seal-button {
  min-width: 190px;
  margin-top: 4px;
  font-family: Georgia,serif!important
}
.notebook-seal-button.is-busy {
  opacity: .62;
  cursor: wait
}
.notebook-seal-message {
  position: relative;
  z-index: 3;
  min-height: 20px;
  margin: 16px 0 0;
  color: #b9c99d;
  font: 12px Georgia,serif;
  text-align: center
}
.notebook-seal-message.is-error {
  color: #e1aaa0
}
#notebookContent[hidden] {
  display: none!important
}
.notebook-page.notebook-is-locked .notebook-book::after {
  display: none
}
.notebook-card-sealed {
  color: rgba(214,185,137,.62)!important;
  font-style: italic
}
#notebookContent,
.notebook-editor textarea {
  scrollbar-width: thin;
  scrollbar-color: #9c7337 rgba(18,11,6,.72)
}
#notebookContent::-webkit-scrollbar,
.notebook-editor textarea::-webkit-scrollbar {
  width: 14px
}
#notebookContent::-webkit-scrollbar-track,
.notebook-editor textarea::-webkit-scrollbar-track {
  background: rgba(18,11,6,.76);
  border-left: 1px solid var(--gold-22)
}
#notebookContent::-webkit-scrollbar-thumb,
.notebook-editor textarea::-webkit-scrollbar-thumb {
  border-radius: 999px;
  border: 3px solid transparent;
  background: linear-gradient(180deg,#6e4b20,#b98b42,#d3ae68,#9a6c2f,#5d3d19) padding-box
}
#notebookContent::-webkit-scrollbar-corner,
.notebook-editor textarea::-webkit-scrollbar-corner {
  background: 0 0
}
.researcher-signature {
  position: absolute;
  top: 12px;
  right: 72px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #e8c77a;
  font-family: Georgia,'Times New Roman',serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
  text-shadow:
    0 1px 2px rgba(0,0,0,.95),
    0 0 5px rgba(0,0,0,.75),
    0 0 8px rgba(196,148,58,.22);
  pointer-events: none
}
.researcher-signature .star {
  color: rgba(196,145,65,.9);
  font-size: 10px;
  line-height: 1;
  transform: translateY(-1px)
}
.researcher-name {
  letter-spacing: .025em
}
.sound-toggle {
  width: 29px;
  height: 29px;
  margin-left: 3px;
  padding: 0;
  display: inline-grid;
  place-items: center;
  border: 1px solid rgba(196,145,65,.28);
  border-radius: 50%;
  color: rgba(224,197,143,.88);
  background: rgba(20,14,9,.42);
  box-shadow: inset 0 0 10px rgba(0,0,0,.22),0 1px 4px rgba(0,0,0,.24);
  cursor: pointer;
  pointer-events: auto;
  transition: border-color .18s ease,background .18s ease,opacity .18s ease,transform .18s ease
}
.sound-toggle:hover,
.sound-toggle:focus-visible {
  border-color: rgba(211,174,104,.72);
  background: rgba(48,31,16,.62);
  transform: translateY(-1px);
  outline: none
}
.sound-toggle.is-muted {
  opacity: .58
}
.sound-toggle-icon {
  width: 15px;
  height: 15px;
  display: block;
  position: relative;
  font-size: 0;
  line-height: 0;
  color: #d3ae68;
}
.sound-toggle-icon::before {
  content: "";
  position: absolute;
  inset: 0;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M3 9v6h4l5 4V5L7 9H3zm11.5 3a3.5 3.5 0 0 0-2-3.16v6.32a3.5 3.5 0 0 0 2-3.16zm0-7.05v2.06A6 6 0 0 1 18 12a6 6 0 0 1-3.5 4.99v2.06A8 8 0 0 0 20 12a8 8 0 0 0-5.5-7.05z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M3 9v6h4l5 4V5L7 9H3zm11.5 3a3.5 3.5 0 0 0-2-3.16v6.32a3.5 3.5 0 0 0 2-3.16zm0-7.05v2.06A6 6 0 0 1 18 12a6 6 0 0 1-3.5 4.99v2.06A8 8 0 0 0 20 12a8 8 0 0 0-5.5-7.05z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.sound-toggle.is-muted .sound-toggle-icon::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M3 9v6h4l5 4V5L7 9H3zm12.59 3L18 14.41 19.41 13 17 10.59 19.41 8 18 6.59 15.59 9 13.18 6.59 11.77 8l2.41 2.59L11.77 13l1.41 1.41L15.59 12z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M3 9v6h4l5 4V5L7 9H3zm12.59 3L18 14.41 19.41 13 17 10.59 19.41 8 18 6.59 15.59 9 13.18 6.59 11.77 8l2.41 2.59L11.77 13l1.41 1.41L15.59 12z'/%3E%3C/svg%3E");
}
.enigma-card {
  z-index: 100
}
.pile-shelve {
  z-index: 860
}
.hypothesis-page {
  --page-desk-image: var(--echo-image-fond-ecrans, url('images/fond_ecrans.webp'));
  --page-desk-position: right center;
  --page-desk-overlay: linear-gradient(rgba(12, 8, 5, .72), rgba(5, 5, 4, .88));
  min-height: 100vh;
  margin: 0;
  color: #eadfc5;
  background-image: radial-gradient(circle at 50% 0,rgba(190,137,58,.16),transparent 38rem),var(--page-desk-overlay),var(--page-desk-image);
  background-size: auto,auto,200% auto;
  background-position: center,center,var(--page-desk-position);
  background-repeat: no-repeat;
  background-attachment: fixed
}
.hypothesis-shell {
  width: min(1120px,calc(100% - 36px));
  margin: 0 auto;
  padding: 48px 0 80px
}
.hypothesis-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 28px;
  margin-bottom: 28px
}
.hypothesis-header h1,
.hypothesis-section-heading h2 {
  margin: 0;
  color: #f2ddb0;
  font-family: Georgia,'Times New Roman',serif;
  font-weight: 400
}
.hypothesis-header h1 {
  font-size: clamp(38px, 6vw, 66px)
}
.hypothesis-lead {
  max-width: 760px;
  color: #bfb39a;
  line-height: 1.7
}
.hypothesis-kicker {
  margin: 0 0 8px;
  color: #ba9657;
  font-size: .75rem;
  letter-spacing: .2em;
  text-transform: uppercase
}
.hypothesis-history,
.hypothesis-submit-card {
  padding: clamp(22px,4vw,38px);
  border: 1px solid rgba(205,166,95,.38);
  background: linear-gradient(145deg,rgba(31,22,14,.82),rgba(8,7,6,.9));
  box-shadow: 0 24px 70px rgba(0,0,0,.42),inset 0 0 0 1px rgba(255,255,255,.03);
  backdrop-filter: blur(5px)
}
.hypothesis-history {
  margin-top: 28px
}
.hypothesis-section-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  margin-bottom: 24px
}
.hypothesis-availability,
.hypothesis-count,
.hypothesis-status {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 13px;
  border-radius: 999px;
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase
}
.hypothesis-availability.available,
.hypothesis-status.confirmed {
  color: #b9d7b4;
  background: rgba(66,117,67,.2);
  border: 1px solid rgba(109,166,108,.45)
}
.hypothesis-availability.locked,
.hypothesis-status.pending {
  color: #e6c98d;
  background: rgba(145,104,35,.2);
  border: 1px solid rgba(190,144,65,.45)
}
.hypothesis-status.rejected {
  color: #dcb0a8;
  background: rgba(125,48,41,.23);
  border: 1px solid rgba(176,82,70,.45)
}
.hypothesis-count {
  color: #d6bb84;
  border: 1px solid rgba(205,166,95,.35)
}
.hypothesis-guidance {
  color: #bfb39a;
  line-height: 1.7
}
.hypothesis-form {
  display: grid;
  gap: 22px
}
.hypothesis-form label,
.hypothesis-review-form label {
  display: grid;
  gap: 9px;
  color: #d7c7a5;
  font-weight: 700
}
.hypothesis-form input,
.hypothesis-form textarea,
.hypothesis-review-form textarea {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid rgba(196,156,84,.35);
  border-radius: 3px;
  padding: 14px 15px;
  color: #eee2c8;
  background: rgba(10,7,4,.68);
  font: inherit;
  outline: 0;
  resize: vertical
}
.hypothesis-form input:focus,
.hypothesis-form textarea:focus,
.hypothesis-review-form textarea:focus {
  border-color: rgba(222,185,112,.8);
  box-shadow: 0 0 0 3px rgba(183,135,58,.12)
}
.hypothesis-countdown-panel small,
.hypothesis-form small {
  color: #887e6c;
  font-weight: 400
}
.hypothesis-submit-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px
}
.hypothesis-submit-row p {
  margin: 0;
  color: #8f8573;
  font-size: .9rem
}
.hypothesis-notice {
  margin-bottom: 22px;
  padding: 15px 18px;
  border: 1px solid;
  background: rgba(24,16,9,.92)
}
.hypothesis-notice.success {
  color: #c8dfc3;
  border-color: rgba(92,151,89,.5)
}
.hypothesis-notice.error {
  color: #e2b0aa;
  border-color: rgba(177,75,65,.5)
}
.hypothesis-countdown-panel {
  text-align: center;
  padding: 24px;
  border: 1px dashed rgba(203,164,93,.32);
  background: rgba(0,0,0,.12)
}



.hypothesis-empty {
  padding: 30px;
  text-align: center;
  color: #908673;
  border: 1px dashed rgba(205,166,95,.25)
}
.hypothesis-timeline {
  display: grid;
  gap: 20px
}
.hypothesis-entry {
  position: relative;
  padding: 24px;
  border: 1px solid rgba(194,155,84,.26);
  background: linear-gradient(145deg,rgba(27,19,12,.68),rgba(8,7,6,.78))
}
.hypothesis-entry::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: #9c7b42
}


.hypothesis-admin-card > header,
.hypothesis-entry > header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px
}
.hypothesis-admin-card h3,
.hypothesis-entry h3 {
  margin: 0 0 7px;
  color: #ead4a5;
  font: 400 1.4rem/1.25 Georgia,serif
}
.hypothesis-admin-card small,
.hypothesis-entry small {
  color: #847a68
}
.hypothesis-entry-section {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid rgba(194,155,84,.16)
}
.hypothesis-admin-reasoning h4,
.hypothesis-entry-section h4 {
  margin: 0 0 10px;
  color: #b99659;
  font-size: .75rem;
  letter-spacing: .16em;
  text-transform: uppercase
}
.hypothesis-admin-reasoning p,
.hypothesis-entry-section p {
  margin: 0;
  color: #c7bba2;
  line-height: 1.75;
  overflow-wrap: anywhere
}
.hypothesis-entry-section.echo-reply {
  padding: 18px;
  background: rgba(139,99,34,.09);
  border: 1px solid rgba(194,155,84,.2)
}
.hypothesis-pending-note {
  margin: 20px 0 0;
  color: #9b8f79;
  font-style: italic
}
.hypothesis-admin-list {
  display: grid;
  }
.hypothesis-admin-card {
  border: 1px solid rgba(197,158,88,.28);
  background: linear-gradient(145deg,rgba(31,22,14,.9),rgba(8,7,6,.95))
}

.hypothesis-admin-reasoning {
  padding: 20px;
  border: 1px solid rgba(194,155,84,.16);
  background: rgba(0,0,0,.14)
}
.hypothesis-review-form {
  display: grid;
  gap: 16px
}
.hypothesis-review-actions {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px
}
.hypothesis-admin-toolbar {
  display: grid;
  gap: 16px;
  margin: 0 0 22px;
  padding: 16px;
  border: 1px solid rgba(197,158,88,.24);
  background: linear-gradient(145deg,rgba(29,20,12,.72),rgba(8,7,6,.82))
}
.hypothesis-status-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px
}
.hypothesis-filter {
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid rgba(197,158,88,.25);
  background: rgba(8,6,4,.52);
  color: #b9aa8d;
  font: 700 .7rem/1 Arial,sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color .2s,color .2s,background .2s
}
.hypothesis-filter span {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  margin-left: 7px;
  padding: 0 5px;
  border-radius: 999px;
  background: rgba(197,158,88,.1);
  color: #d6b66f
}
.hypothesis-filter.is-active,
.hypothesis-filter:hover {
  border-color: rgba(222,180,92,.65);
  background: rgba(117,79,27,.17);
  color: #efd28f
}
.hypothesis-admin-controls {
  display: grid;
  grid-template-columns: minmax(240px,1fr) minmax(190px,auto) minmax(205px,auto);
  gap: 10px
}
.hypothesis-admin-controls input,
.hypothesis-admin-controls select {
  width: 100%;
  min-height: 42px;
  box-sizing: border-box;
  border: 1px solid rgba(197,158,88,.3);
  border-radius: 0;
  padding: 0 13px;
  color: #e5d7b9;
  background: rgba(7,5,3,.72);
  font: inherit;
  outline: 0
}
.hypothesis-admin-controls input:focus,
.hypothesis-admin-controls select:focus {
  border-color: rgba(222,185,112,.78);
  box-shadow: 0 0 0 3px rgba(183,135,58,.1)
}
.hypothesis-admin-controls select option {
  color: #e5d7b9;
  background: #15100b
}
.sr-only {
  position: absolute!important;
  width: 1px!important;
  height: 1px!important;
  padding: 0!important;
  margin: -1px!important;
  overflow: hidden!important;
  clip: rect(0,0,0,0)!important;
  white-space: nowrap!important;
  border: 0!important
}
.hypothesis-admin-list {
  gap: 8px
}
.hypothesis-admin-card {
  padding: 0;
  overflow: hidden;
  transition: border-color .2s,box-shadow .2s,background .2s
}
.hypothesis-admin-card[hidden] {
  display: none!important
}
.hypothesis-card-summary {
  display: flex;
  width: 100%;
  min-height: 116px;
  box-sizing: border-box;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 18px 28px;
  border: 0;
  background: 0 0;
  color: inherit;
  text-align: left;
  cursor: pointer
}
.hypothesis-card-summary:hover {
  background: rgba(181,132,51,.045)
}
.hypothesis-card-identity {
  display: grid;
  min-width: 0
}
.hypothesis-card-identity .admin-kicker {
  margin-bottom: 3px
}
.hypothesis-card-identity strong {
  overflow: hidden;
  margin: 0 0 5px;
  color: #ead4a5;
  font: 400 1.3rem/1.2 Georgia,serif;
  text-overflow: ellipsis;
  white-space: nowrap
}
.hypothesis-card-identity small {
  color: #8d816d
}
.hypothesis-card-summary-end {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 18px
}
.hypothesis-card-chevron {
  width: 10px;
  height: 10px;
  border-right: 1px solid #c99a45;
  border-bottom: 1px solid #c99a45;
  transform: rotate(45deg);
  transition: transform .22s
}
.hypothesis-admin-card.is-open .hypothesis-card-chevron {
  transform: rotate(225deg)
}
.hypothesis-card-panel {
  padding: 0 28px 28px;
  border-top: 1px solid rgba(194,155,84,.13)
}
.hypothesis-card-panel[hidden] {
  display: none
}
.hypothesis-admin-card.is-open {
  border-color: rgba(205,159,77,.48);
  box-shadow: 0 18px 55px var(--shadow-22),inset 3px 0 0 rgba(205,159,77,.62)
}
.hypothesis-admin-reasoning {
  margin: 22px 0 16px
}
.hypothesis-review-actions:has(.button.secondary:only-child) {
  justify-content: flex-end
}
.hypothesis-no-results {
  margin-top: 16px
}
.account-page {
  --page-desk-image: var(--echo-image-fond-ecrans, url('images/fond_ecrans.webp'));
  --page-desk-position: left center;
  --page-desk-overlay: linear-gradient(rgba(12, 8, 5, .70), rgba(5, 5, 4, .88));
  min-height: 100vh;
  margin: 0;
  color: #e6dcc9;
  background-image: radial-gradient(circle at 50% 0,rgba(190,137,58,.17),transparent 36rem),var(--page-desk-overlay),var(--page-desk-image);
  background-size: auto,auto,200% auto;
  background-position: center,center,var(--page-desk-position);
  background-repeat: no-repeat;
  background-attachment: fixed
}
.account-shell {
  width: min(980px,calc(100% - 36px));
  margin: 0 auto;
  padding: 52px 0 80px
}
.account-card-heading,
.account-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px
}
.account-header {
  margin-bottom: 32px;
  padding-bottom: 26px;
  border-bottom: 1px solid rgba(190,148,75,.28)
}
.account-card h2,
.account-header h1 {
  margin: 5px 0 10px;
  color: #ead2a0;
  font-family: Georgia,serif;
  font-weight: 400
}
.account-header h1 {
  font-size: clamp(2.1rem, 5vw, 3.5rem)
}
.account-card h2 {
  font-size: clamp(1.35rem, 3vw, 1.9rem)
}
.account-card > p,
.account-form-note,
.account-lead {
  color: rgba(230,220,201,.66);
  line-height: 1.65
}
.account-kicker {
  margin: 0;
  color: #b88b48;
  font-size: .69rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase
}
.account-card {
  margin-top: 22px;
  padding: 28px;
  border: 1px solid rgba(190,148,75,.28);
  background: linear-gradient(145deg,rgba(38,27,16,.76),rgba(13,10,7,.88));
  box-shadow: 0 18px 55px var(--shadow-34),inset 0 0 0 1px var(--white-025);
  backdrop-filter: blur(5px)
}
.account-lock {
  flex: 0 0 auto;
  padding: 6px 10px;
  border: 1px solid rgba(190,148,75,.36);
  color: #c7a36a;
  font-size: .66rem;
  letter-spacing: .1em;
  text-transform: uppercase
}
.account-form {
  display: grid;
  gap: 13px;
  margin-top: 22px
}
.account-form label {
  color: #c9a568;
  font-size: .78rem
}
.account-form input[type=email],
.account-form input[type=text] {
  width: 100%;
  box-sizing: border-box;
  padding: 14px 15px;
  border: 1px solid rgba(190,148,75,.36);
  outline: 0;
  background: rgba(7,6,4,.8);
  color: #f0e4cf
}
.account-form input:focus {
  border-color: rgba(214,169,89,.8);
  box-shadow: 0 0 0 3px rgba(177,126,45,.1)
}
.account-form .button {
  justify-self: start
}
.account-form-note {
  margin: 0;
  font-size: .78rem
}
.account-notice {
  margin: 0 0 22px;
  padding: 14px 16px;
  border: 1px solid
}
.account-notice.success {
  border-color: rgba(118,153,103,.48);
  background: rgba(45,82,38,.16);
  color: #c8d9bd
}
.account-notice.error {
  border-color: rgba(180,95,74,.48);
  background: rgba(100,31,20,.16);
  color: #e0a693
}
.account-danger-zone {
  border-color: rgba(160,78,58,.36)
}
.account-delete-details {
  margin-top: 20px
}
.account-delete-details summary {
  width: fit-content;
  color: #d19a83;
  cursor: pointer;
  font-size: .82rem;
  letter-spacing: .04em
}
.account-delete-form {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid rgba(175,85,65,.25)
}
.account-confirm-check {
  display: flex;
  align-items: center;
  gap: 9px;
  color: rgba(230,220,201,.72)!important
}
.button.danger {
  border-color: rgba(181,89,67,.65);
  color: #e6b09f;
  background: rgba(105,31,19,.2)
}
.button.danger:hover {
  background: rgba(130,40,25,.32)
}
.account-pending-email {
  margin-top: 20px;
  padding: 14px 16px;
  border: 1px solid rgba(190,148,75,.28);
  background: rgba(91,60,25,.14)
}
.account-pending-email p {
  margin: 0
}
.account-pending-email .account-form-note {
  margin-top: 6px
}
.sidebar::-webkit-scrollbar {
  display: none
}
.main-nav .nav-item {
  font-size: 13px
}
.sidebar-legal {
  flex: 0 0 auto;
  margin: 18px 6px 4px;
  padding-top: 12px;
  border-top: 1px solid var(--gold-18)
}
.sidebar-legal-title {
  margin: 0 0 7px;
  color: rgba(157,149,136,.72);
  font-size: 8px;
  letter-spacing: .2em;
  text-transform: uppercase
}
.sidebar-legal a {
  display: block;
  padding: 3px 0;
  color: rgba(157,149,136,.86);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.35;
  text-decoration: none;
  transition: color .18s,transform .18s
}
.sidebar-legal a:hover {
  color: var(--gold-soft);
  transform: translateX(2px)
}
.topbar {
  min-height: 80px;
  padding: 10px 24px 9px 28px;
  gap: 22px;
  align-items: center;
  border-bottom: 0;
  background: radial-gradient(ellipse 34% 145% at 10% -20%,rgba(181,122,48,.1),transparent 67%),radial-gradient(ellipse 40% 145% at 90% 120%,var(--shadow-34),transparent 72%),linear-gradient(90deg,rgba(255,224,160,.018),transparent 24%,transparent 78%,var(--shadow-18)),repeating-linear-gradient(92deg,rgba(255,214,142,.010) 0 1px,rgba(0,0,0,.020) 1px 4px,transparent 4px 12px),repeating-linear-gradient(1deg,rgba(255,255,255,.006) 0 1px,transparent 1px 9px),linear-gradient(155deg,#21160d 0,#151009 46%,#0b0907 100%);
  box-shadow: inset 0 1px rgba(255,231,181,.045),inset 0 -16px 26px var(--shadow-24),0 6px 18px var(--shadow-24)
}
.topbar::before {
  content: '';
  position: absolute;
  inset: 5px 6px 6px;
  border: 1px solid rgba(196,147,67,.13);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.26);
  pointer-events: none
}
.topbar::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: linear-gradient(90deg,rgba(107,70,23,.68) 0,#c69749 8%,rgba(185,139,66,.72) 48%,#c69749 92%,rgba(107,70,23,.68) 100%);
  box-shadow: 0 1px 0 rgba(0,0,0,.82),0 -1px 6px var(--gold-08);
  pointer-events: none
}
.topbar > * {
  position: relative;
  z-index: 1
}
.topbar-identity {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0;
  border: 0;
  background: 0 0;
  box-shadow: none
}
.topbar h1 {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  color: #dfbf7b;
  font-size: clamp(27px, 2.05vw, 36px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: .014em;
  text-transform: none;
  text-shadow: 0 1px 0 rgba(255,242,204,.16),0 2px 0 rgba(83,47,12,.54),0 4px 10px rgba(0,0,0,.62)
}
.topbar h1 .restricted-access {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 7px 17px 6px;
  border: 1px solid rgba(205,157,77,.64);
  color: #d6ba83;
  background: linear-gradient(180deg,rgba(203,157,81,.1),var(--shadow-2)),rgba(13,10,7,.84);
  box-shadow: inset 0 0 0 2px var(--shadow-4),inset 0 0 0 3px rgba(210,166,88,.1),0 5px 12px var(--shadow-28);
  font-size: .42em;
  line-height: 1;
  letter-spacing: .11em;
  text-transform: uppercase;
  white-space: nowrap
}
.topbar h1 .restricted-access::after,
.topbar h1 .restricted-access::before {
  content: '◆';
  color: rgba(215,174,97,.72);
  font-size: 6px
}
.topbar h1 .restricted-access::after {
  margin-left: 7px
}
.topbar-motto {
  display: grid;
  grid-template-columns: 110px max-content 110px;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: min(560px,100%);
  margin-top: 7px
}
.topbar-motto p {
  margin: 0;
  color: rgba(221,193,139,.9);
  font-size: 13px;
  font-style: italic;
  letter-spacing: .02em;
  white-space: nowrap;
  text-align: center;
  text-shadow: 0 1px 3px rgba(0,0,0,.86)
}
.topbar-motto-line {
  position: relative;
  width: 110px;
  height: 1px;
  background: linear-gradient(90deg,transparent,rgba(194,148,68,.62))
}
.topbar-motto-line:last-child {
  background: linear-gradient(90deg,rgba(194,148,68,.62),transparent)
}
.topbar-motto-line::after {
  content: '◆';
  position: absolute;
  top: 50%;
  right: -3px;
  color: rgba(205,160,79,.72);
  font-size: 5px;
  transform: translateY(-53%)
}
.topbar-motto-line:last-child::after {
  right: auto;
  left: -3px
}
.top-actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px
}
.top-actions .button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 142px;
  min-height: 40px;
  padding: 9px 15px 8px;
  border: 1px solid rgba(198,149,67,.68);
  color: #ddc18b;
  background: linear-gradient(180deg,rgba(226,181,96,.12) 0,rgba(94,57,17,.08) 50%,var(--shadow-22) 100%),rgba(15,12,8,.9);
  box-shadow: inset 0 1px rgba(255,236,190,.12),inset 0 -8px 13px var(--shadow-2),0 5px 13px var(--shadow-28);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .115em;
  text-decoration: none;
  transition: transform .16s,border-color .16s,color .16s,background .16s,box-shadow .16s
}
.top-actions .button.secondary {
  border-color: rgba(190,143,64,.62);
  color: #d9bc85;
  background: linear-gradient(180deg,rgba(213,169,87,.09),var(--shadow-2)),rgba(10,9,7,.9)
}
.top-actions .button::after {
  content: '';
  position: absolute;
  inset: 3px;
  border: 1px solid rgba(255,225,165,.045);
  pointer-events: none
}
.top-actions .button:hover {
  transform: translateY(-1px);
  border-color: rgba(224,181,102,.9);
  color: #efd29d;
  background: linear-gradient(180deg,rgba(228,183,100,.2),rgba(88,52,14,.11) 52%,rgba(0,0,0,.16)),rgba(22,16,9,.94);
  box-shadow: inset 0 1px rgba(255,241,202,.17),inset 0 -8px 13px var(--shadow-18),0 8px 18px var(--shadow-34),0 0 11px rgba(185,139,66,.07)
}
.button-icon {
  display: inline-grid;
  place-items: center;
  min-width: 14px;
  color: #cba154;
  font-size: 13px;
  line-height: 1;
  text-shadow: 0 1px 2px rgba(0,0,0,.76)
}
.button-icon-reset {
  font-size: 16px
}
.sidebar {
  overscroll-behavior: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
  min-height: 0;
  height: 100vh;
  max-height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: auto;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  pointer-events: auto
}
.sidebar > * {
  flex-shrink: 0
}
.is-locked .sidebar,
.is-locked .sidebar-legal,
.is-locked .sidebar-legal a {
  pointer-events: auto;
  touch-action: pan-y
}
.is-locked .enigma-card.visitor-generic-front .card-image {
  visibility: visible
}
.is-locked .enigma-card.visitor-generic-front .card-face,
.is-locked .enigma-card.visitor-generic-front.clue .card-face,
.is-locked .enigma-card.visitor-generic-front.textual .card-face,
.is-locked .enigma-card.visitor-generic-front.visual .card-face {
  background-image: none;
  background-color: #100d09
}
.is-locked .enigma-card.visitor-generic-front .card-face::after {
  display: none
}
.viewer-gateway-button {
  position: relative;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 16px;
  border: 1px solid rgba(211,171,99,.58);
  border-radius: 999px;
  color: #e5c786;
  background: linear-gradient(180deg,var(--gold-16),rgba(46,29,12,.08)),rgba(10,8,6,.78);
  box-shadow: 0 8px 24px rgba(0,0,0,.42),inset 0 0 0 1px rgba(255,228,174,.035);
  font: 10px/1 Georgia,"Times New Roman",serif;
  letter-spacing: .13em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  backdrop-filter: blur(5px);
  transition: transform .18s,border-color .18s,color .18s,background .18s,box-shadow .18s
}
.viewer-gateway-button::before {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1px solid rgba(218,181,111,.1);
  border-radius: inherit;
  pointer-events: none
}
.viewer-gateway-button:hover {
  transform: translateY(-1px);
  border-color: rgba(231,197,130,.86);
  color: #f3d99f;
  background: linear-gradient(180deg,var(--gold-24),rgba(57,34,12,.12)),rgba(13,10,7,.9);
  box-shadow: 0 11px 30px var(--shadow-5),0 0 24px rgba(185,139,66,.09),inset 0 0 0 1px rgba(255,228,174,.05)
}
.viewer-gateway-button:active {
  transform: translateY(0)
}
.viewer-gateway-mark {
  color: #d7ae61;
  font-size: 13px;
  line-height: 1
}
.is-locked .enigma-card .card-image {
  visibility: hidden;
  will-change: opacity,transform;
  transform-origin: center
}
.cartographer-help-dialog,
.confirm-dialog,
.login-dialog,
.desktop-spread {
  border-color: rgba(203,157,81,.64);
  background-image: radial-gradient(ellipse 72% 48% at 50% 4%,rgba(211,157,73,.21),transparent 66%),radial-gradient(ellipse 78% 72% at 50% 46%,rgba(8,6,4,.34),rgba(4,4,3,.76) 82%),linear-gradient(180deg,rgba(25,16,9,.42),rgba(5,5,4,.7)),var(--echo-image-fond-ecrans, url("images/fond_ecrans.webp"));
  background-size: auto,auto,auto,200% auto;
  background-position: center,center,center,left center;
  background-repeat: no-repeat;
  box-shadow: 0 34px 100px rgba(0,0,0,.86),0 0 48px var(--gold-08),inset 0 0 0 1px rgba(255,229,170,.055),inset 0 0 90px var(--shadow-3)
}
.login-dialog {
  background-position: center,center,center,left center;
}
.confirm-dialog {
  background-position: center,center,center,right center;
}

.cartographer-help-dialog,
.desktop-spread {
  background-image: radial-gradient(ellipse 70% 46% at 50% 3%,rgba(216,165,80,.2),transparent 68%),radial-gradient(ellipse 82% 78% at 50% 46%,rgba(7,6,4,.25),rgba(3,3,2,.68) 88%),linear-gradient(180deg,rgba(23,15,8,.26),rgba(5,5,4,.58)),var(--echo-image-fond-ecrans, url("images/fond_ecrans.webp"));
  background-size: auto,auto,auto,200% auto;
  background-position: center,center,center,right center
}
.cartographer-help-section {
  background: linear-gradient(145deg,rgba(31,22,13,.76),rgba(8,8,7,.84));
  border-color: rgba(203,157,81,.3);
  box-shadow: inset 0 1px rgba(255,229,170,.025),0 12px 28px var(--shadow-18);
  backdrop-filter: blur(2px)
}
.cartographer-help-dialog::backdrop,
.confirm-dialog::backdrop,
.login-dialog::backdrop {
  background: radial-gradient(ellipse 56% 58% at 50% 48%,rgba(185,139,66,.07),transparent 72%),rgba(0,0,0,.53);
  backdrop-filter: blur(7px) brightness(.63) saturate(.85)
}
.cartographer-help-dialog[open],
.confirm-dialog[open],
.login-dialog[open] {
  outline: rgba(222,181,106,.08) solid 1px;
  outline-offset: -10px
}
@keyframes echo-dialog-emerge {
  0% {
    opacity: 0;
    transform: translateY(14px) scale(.92);
    filter: blur(3px) brightness(.86)
  }
  62% {
    opacity: 1;
    transform: translateY(-1px) scale(1.006);
    filter: blur(0) brightness(1.015)
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: none
  }
}
@keyframes echo-dialog-backdrop-awake {
  from {
    opacity: 0;
    backdrop-filter: blur(0) brightness(1) saturate(1)
  }
  to {
    opacity: 1
  }
}
@keyframes echo-dialog-content-settle {
  from {
    opacity: 0;
    transform: translateY(7px)
  }
  to {
    opacity: 1;
    transform: translateY(0)
  }
}
.cartographer-help-dialog[open],
.confirm-dialog[open],
.login-dialog[open],
.threshold-dialog[open] {
  transform-origin: 50% 58%;
  animation: .3s cubic-bezier(.18,.78,.24,1) both echo-dialog-emerge!important
}
.cartographer-help-dialog[open]::backdrop,
.confirm-dialog[open]::backdrop,
.login-dialog[open]::backdrop,
.threshold-dialog[open]::backdrop {
  animation: 240ms ease-out both echo-dialog-backdrop-awake
}
.cartographer-help-dialog[open] > :not(.cartographer-help-close),
.confirm-dialog[open] > *,
.login-dialog[open] > :not(.login-close),
.threshold-dialog[open] > :not(.threshold-close) {
  animation: 250ms ease-out 55ms both echo-dialog-content-settle
}
.cartographer-help-dialog[open] h2,
.confirm-dialog[open] .confirm-title,
.login-dialog[open] h2,
.threshold-dialog[open] h2 {
  animation-delay: 78ms
}
.cartographer-help-dialog[open] .cartographer-help-acknowledge,
.cartographer-help-dialog[open] .cartographer-help-grid,
.confirm-dialog[open] .confirm-actions,
.login-dialog[open] form,
.threshold-dialog[open] .threshold-access,
.threshold-dialog[open] .threshold-support {
  animation-delay: 105ms
}
.cartographer-help-dialog[open] .cartographer-help-close,
.login-dialog[open] .login-close,
.threshold-dialog[open] .threshold-close {
  animation: 170ms ease-out 70ms both echo-dialog-content-settle
}
.cartographer-letter-wrap {
  position: absolute;
  z-index: 880;
  left: auto;
  right: 105px;
  top: 55px;
  bottom: auto;
  width: clamp(103px,9.5vw,140px)
}
.cartographer-letter-wrap[hidden] {
  display: none!important
}
.teaser-challenge-trigger.cartographer-letter {
  position: relative;
  z-index: 1;
  width: 100%;
  display: block;
  padding: 0;
  border: 0;
  color: #ead7ae;
  background: 0 0;
  text-align: center;
  cursor: pointer;
  filter: drop-shadow(0 16px 17px rgba(0,0,0,.58));
  transform: rotate(-1deg);
  transform-origin: 50% 75%;
  transition: transform .22s,filter .22s
}
.teaser-challenge-trigger.cartographer-letter:hover {
  transform: translateY(-5px) rotate(-.3deg) scale(1.018);
  filter: drop-shadow(0 22px 21px rgba(0,0,0,.66)) drop-shadow(0 0 17px rgba(185,139,66,.12))
}
.teaser-challenge-trigger.cartographer-letter:focus-visible {
  outline: rgba(232,196,126,.9) solid 1px;
  outline-offset: 7px
}
.cartographer-letter-dismiss {
  position: absolute;
  z-index: 5;
  top: 25px;
  right: 25px;
  width: 25px;
  height: 25px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(210,173,112,.55);
  border-radius: 50%;
  color: rgba(235,215,177,.88);
  background: rgba(8,7,5,.94);
  box-shadow: 0 6px 16px var(--shadow-48),inset 0 0 0 1px rgba(255,231,184,.035);
  font: 18px/1 Arial,sans-serif;
  cursor: pointer;
  transition: color .18s,border-color .18s,background .18s,transform .18s
}
.cartographer-letter-dismiss:focus-visible,
.cartographer-letter-dismiss:hover {
  color: #f0d39a;
  border-color: rgba(230,195,128,.9);
  background: rgba(29,20,12,.98);
  transform: scale(1.06);
  outline: 0
}
.teaser-nav-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px
}

.cartographer-letter-image {
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
  pointer-events: none;
  transform: rotate(-1deg);
  transform-origin: center;
  will-change: opacity,transform
}
.cartographer-letter-caption {
  position: absolute;
  z-index: 3;
  right: -24px;
  top: calc(100% - 9px);
  bottom: auto;
  left: auto;
  width: 152px;
  max-width: none;
  padding: 6px 9px 5px;
  border: 1px solid rgba(210,173,112,.46);
  color: #ebcf96;
  background: rgba(8,7,5,.97);
  box-shadow: 0 7px 15px var(--shadow-48),inset 0 0 0 1px rgba(255,230,180,.035);
  transform: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  pointer-events: none
}
.cartographer-letter-caption small,
.cartographer-letter-caption strong {
  display: block;
  overflow: visible;
  text-overflow: clip
}
.cartographer-letter-caption strong {
  font: 11px/1.2 Georgia,"Times New Roman",serif;
  letter-spacing: .005em;
  white-space: nowrap
}
.cartographer-letter-caption small {
  margin-top: 2px;
  color: rgba(232,223,207,.66);
  font: 5.8px/1.2 Arial,sans-serif;
  letter-spacing: .055em;
  text-transform: uppercase;
  white-space: nowrap
}
.cartographer-letter.is-unread::after {
  content: "";
  position: absolute;
  z-index: 2;
  right: 7%;
  top: 7%;
  width: 6px;
  height: 6px;
  border: 1px solid rgba(255,231,179,.7);
  border-radius: 50%;
  background: #c99a49;
  box-shadow: 0 0 0 4px rgba(185,139,66,.11),0 0 18px rgba(225,180,92,.62);
  animation: 2.4s ease-in-out infinite cartographer-letter-pulse
}
.cartographer-letter.is-read .cartographer-letter-caption strong {
  color: rgba(228,201,143,.78)
}
.cartographer-letter.is-read .cartographer-letter-caption small {
  color: rgba(232,223,207,.42)
}
@keyframes cartographer-letter-pulse {
  0%,
  100% {
    transform: scale(.82);
    opacity: .64
  }
  50% {
    transform: scale(1.08);
    opacity: 1
  }
}
.teaser-challenge-dialog {
  position: relative;
  isolation: isolate;
  width: min(1040px,calc(100vw - 32px));
  max-height: calc(100vh - 28px);
  padding: 30px;
  overflow-y: auto;
  overflow-x: hidden;
  border: 1px solid rgba(203,157,81,.66);
  color: #e9dfcc;
  background: radial-gradient(ellipse 70% 42% at 50% 5%,rgba(188,132,54,.16),transparent 68%),rgba(8,7,5,.86);
  box-shadow: 0 34px 110px var(--shadow-88),0 0 58px var(--gold-1),inset 0 0 0 1px rgba(255,229,170,.055),inset 0 0 90px var(--shadow-22);
  scrollbar-width: none;
  -ms-overflow-style: none;
  overscroll-behavior: contain
}
.teaser-challenge-dialog::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0
}
.teaser-challenge-dialog::before {
  content: "";
  position: absolute;
  z-index: -2;
  inset: 0;
  background: var(--echo-image-fond-ecrans, url("images/fond_ecrans.webp")) right center/200% auto no-repeat;
  opacity: .42;
  filter: sepia(.16) saturate(.78) brightness(.66) contrast(1.08);
  pointer-events: none
}
.teaser-challenge-dialog::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: radial-gradient(ellipse 72% 66% at 50% 42%,rgba(7,6,4,.28) 0,rgba(7,6,4,.48) 58%,rgba(3,3,2,.76) 100%),linear-gradient(180deg,rgba(24,15,8,.22),rgba(5,5,4,.48));
  box-shadow: inset 0 0 110px var(--shadow-34),inset 0 0 0 10px rgba(0,0,0,.08),inset 0 0 0 11px rgba(222,181,106,.12);
  pointer-events: none
}
.teaser-challenge-dialog::backdrop {
  background: rgba(0,0,0,.54);
  backdrop-filter: blur(8px) brightness(.60)
}
.teaser-challenge-dialog[open] {
  animation: .34s cubic-bezier(.2,.75,.2,1) dialog-premium-rise
}
.teaser-challenge-close {
  position: absolute;
  right: 13px;
  top: 10px;
  z-index: 5;
  border: 0;
  background: 0 0;
  color: #aaa;
  font-size: 31px;
  cursor: pointer
}
.teaser-challenge-heading {
  text-align: center;
  margin: 0 auto 8px
}
.teaser-challenge-kicker {
  color: #c69b52;
  font-size: 9px;
  letter-spacing: .24em;
  text-transform: uppercase
}
.teaser-challenge-heading h2 {
  margin: 7px 0 3px;
  color: #ead3a3;
  font: 32px Georgia,serif
}
.teaser-challenge-heading p {
  margin: 0;
  color: rgba(232,223,207,.68);
  font-size: 13px;
  font-style: italic
}
.teaser-challenge-layout {
  display: grid;
  grid-template-columns: minmax(280px,420px) minmax(0,1fr);
  gap: 28px;
  align-items: start
}
.teaser-challenge-visual {
  min-width: 0
}
.teaser-challenge-image-button {
  display: block;
  width: 100%;
  padding: 0;
  border: 1px solid rgba(210,173,112,.4);
  background: rgba(0,0,0,.32);
  color: #d9b46a;
  cursor: zoom-in;
  box-shadow: 0 18px 45px var(--shadow-5)
}
.teaser-challenge-image-button img {
  display: block;
  width: 100%
}
.teaser-challenge-image-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 35px;
  border: 1px solid rgba(210,173,112,.4);
  border-top: 0;
  background: rgba(0,0,0,.32);
  color: rgba(217,180,106,.58)
}
.teaser-challenge-image-actions button {
  padding: 9px 2px;
  border: 0;
  background: none;
  color: #d9b46a;
  font: inherit;
  font-size: 9px;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer
}
.teaser-challenge-image-actions button:hover,
.teaser-challenge-image-actions button:focus-visible {
  color: #f2d49a;
  text-decoration: underline;
  text-underline-offset: 3px
}
.teaser-challenge-copy-status {
  min-height: 16px;
  margin: 4px 0 -20px;
  color: rgba(217,180,106,.82);
  font-size: 10px;
  text-align: center
}
.teaser-challenge-panel {
  display: grid;
  gap: 18px
}
.teaser-challenge-prize {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 12px;
  align-items: center;
  padding: 14px 16px;
  border: 1px solid rgba(210,173,112,.3);
  background: rgba(32,21,11,.58)
}
.teaser-challenge-prize small,
.teaser-challenge-prize strong {
  display: block
}
.teaser-challenge-prize strong {
  color: #e7cc94;
  font-size: 15px;
  font-weight: 400
}
.teaser-challenge-prize small {
  font-size: 13px;
  color: #aaa
}
.teaser-challenge-rules {
  padding: 10px 9px;
  border: 1px solid rgba(210,173,112,.2);
  background: rgba(7,6,5,.56)
}
.teaser-challenge-rules h3 {
  margin: 0 0 8px;
  color: #d9b46a;
  font: 18px Georgia,serif
}
.teaser-challenge-rules p,
.teaser-challenge-rules ul {
  font-size: 11px;
  line-height: 1.55;
  color: #c8bdac
}
.teaser-challenge-form {
  display: grid;
  gap: 9px
}
.teaser-challenge-form > label:not(.teaser-challenge-consent) {
  color: #d4ad66;
  font-size: 9px;
  letter-spacing: .14em;
  text-transform: uppercase
}
.teaser-challenge-form input[type=email],
.teaser-challenge-form input[type=text] {
  width: 100%;
  padding: 12px 13px;
  border: 1px solid rgba(185,139,66,.38);
  outline: 0;
  color: #eee2cf;
  background: rgba(0,0,0,.38);
  font: 14px Georgia,serif
}
.teaser-challenge-consent {
  display: flex;
  gap: 9px;
  color: #aaa;
  font-size: 9.5px;
  line-height: 1.45
}
.teaser-challenge-submit {
  width: 100%
}
.teaser-challenge-message {
  min-height: 18px;
  margin: 0;
  text-align: center;
  font-size: 10px
}
.teaser-challenge-message.success {
  color: #c9b276
}
.teaser-challenge-message.error {
  color: #d79580
}
.teaser-challenge-zoom {
  width: 100vw;
  max-width: none;
  height: 100vh;
  max-height: none;
  margin: 0;
  padding: 30px;
  border: 0;
  background: 0 0;
  overflow: auto
}
.teaser-challenge-zoom::backdrop {
  background: var(--shadow-88);
  backdrop-filter: blur(5px)
}
.teaser-challenge-zoom img {
  display: block;
  max-width: min(92vw,900px);
  margin: auto;
  box-shadow: 0 28px 90px rgba(0,0,0,.75)
}
.teaser-challenge-zoom button {
  position: fixed;
  right: 22px;
  top: 15px;
  border: 0;
  background: rgba(5,5,4,.62);
  color: #e5c989;
  font-size: 38px;
  cursor: pointer
}
.payment-screen {
  min-height: 100vh;
  margin: 0;
  box-sizing: border-box;
  display: grid;
  place-items: center;
  padding: 28px;
  overflow-x: hidden;
  color: #e8dfcf;
  font-family: Arial,sans-serif;
  background: radial-gradient(ellipse 58% 48% at 50% 42%,rgba(191,139,62,.11),transparent 72%),linear-gradient(rgba(2,3,3,.63),rgba(2,3,3,.82)),image-set(url("images/fond_principal.avif") type("image/avif"), url("images/fond_principal.webp") type("image/webp"), url("images/fond_principal.jpg") type("image/jpeg")) center 48%/cover no-repeat fixed
}
.payment-screen::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 72% 62% at 50% 44%,transparent 22%,rgba(0,0,0,.35) 72%,rgba(0,0,0,.67) 100%)
}
.payment-panel {
  position: relative;
  isolation: isolate;
  box-sizing: border-box;
  width: min(690px,100%);
  padding: 42px 46px 38px;
  overflow: hidden;
  border: 1px solid rgba(204,158,82,.62);
  color: #e8dfcf;
  text-align: center;
  background: rgba(8,7,5,.88);
  box-shadow: 0 32px 95px rgba(0,0,0,.76),0 0 55px var(--gold-08),inset 0 0 0 1px rgba(255,229,170,.05);
  animation: .36s cubic-bezier(.2,.75,.2,1) both payment-panel-rise
}
.payment-panel::before {
  content: "";
  position: absolute;
  z-index: -2;
  inset: 0;
  background: var(--echo-image-fond-ecrans, url("images/fond_ecrans.webp")) left center/200% auto no-repeat;
  opacity: .38;
  filter: sepia(.18) saturate(.78) brightness(.62) contrast(1.08)
}
.payment-panel::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: radial-gradient(ellipse 74% 64% at 50% 38%,rgba(8,7,5,.25),rgba(7,6,4,.57) 62%,rgba(2,2,2,.84) 100%),linear-gradient(180deg,rgba(38,24,10,.14),rgba(5,5,4,.42));
  box-shadow: inset 0 0 100px rgba(0,0,0,.32),inset 0 0 0 10px rgba(0,0,0,.06),inset 0 0 0 11px rgba(222,181,106,.12)
}
.payment-emblem {
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  margin: 0 auto 18px;
  border: 1px solid rgba(205,158,82,.48);
  border-radius: 50%;
  color: #e4bd73;
  background: radial-gradient(circle,rgba(170,111,35,.17),rgba(5,5,4,.72) 70%);
  box-shadow: 0 0 32px rgba(197,145,62,.12),inset 0 0 18px rgba(213,167,88,.06);
  font: 28px/1 Georgia,serif
}
.payment-kicker {
  margin: 0 0 7px;
  color: #bd914b;
  font: 700 10px/1.2 Arial,sans-serif;
  letter-spacing: .2em;
  text-transform: uppercase
}
.payment-panel h1 {
  margin: 0;
  color: #efd39c;
  font-weight: 400;
  font-size: clamp(31px, 5vw, 42px);
  line-height: 1.08;
  font-family: Georgia,serif;
  text-shadow: 0 2px 18px rgba(0,0,0,.56)
}
.payment-lead {
  max-width: 640px;
  margin: 8px auto 0;
  color: rgba(237,226,205,.88);
  font: 17px/1.65 Georgia,serif
}
.payment-details {
  display: grid;
  gap: 0;
  margin: 28px 0 0;
  border: 1px solid rgba(190,144,69,.3);
  background: rgba(5,5,4,.43);
  text-align: left
}
.payment-detail {
  position: relative;
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 15px;
  align-items: start;
  padding: 17px 19px
}
.payment-detail + .payment-detail {
  border-top: 1px solid rgba(190,144,69,.22)
}
.payment-detail-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(203,157,81,.38);
  border-radius: 50%;
  color: #d6aa5f;
  background: rgba(12,9,6,.66);
  font: 17px/1 Georgia,serif
}
.payment-detail strong {
  display: block;
  margin: 1px 0 5px;
  color: #d9b36c;
  font: 700 11px/1.35 Arial,sans-serif;
  letter-spacing: .055em;
  text-transform: uppercase
}
.payment-detail p {
  margin: 0;
  color: var(--ivory-72);
  font-size: 13px;
  line-height: 1.38
}
.payment-thanks {
  margin: 24px 0 0;
  padding: 17px 20px;
  border: 1px solid rgba(190,144,69,.27);
  color: var(--ivory-72);
  background: rgba(5,5,4,.37);
  font: italic 14px/1.55 Georgia,serif
}
.payment-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 24px
}
.payment-actions .button,
.payment-submit {
  min-width: 220px
}












.payment-panel-cancel .payment-emblem {
  color: #c9a66c;
  font-size: 24px
}
@keyframes payment-panel-rise {
  0% {
    opacity: 0;
    transform: translateY(13px) scale(.93);
    filter: blur(3px)
  }
  72% {
    opacity: 1;
    transform: translateY(-1px) scale(1.008);
    filter: blur(0)
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0)
  }
}
.visitor-intro[hidden] {
  display: none
}
.visitor-intro {
  position: absolute;
  z-index: 10000;
  top: clamp(74px,calc(6vh + 20px),92px);
  left: 50%;
  width: min(690px,calc(100% - 40px));
  margin: 0;
  padding: 14px 32px 13px;
  border: 1px solid rgba(196,151,78,.56);
  border-radius: 3px;
  background: radial-gradient(ellipse 62% 115% at 50% 0,rgba(184,132,58,.08),transparent 70%),linear-gradient(rgba(12,10,8,.84),rgba(12,10,8,.9)),var(--echo-image-fond-ecrans, url("images/fond_ecrans.webp")) left center/200% auto no-repeat;
  box-shadow: inset 0 0 0 1px rgba(255,226,175,.05),inset 0 -30px 60px var(--shadow-3),0 18px 42px var(--shadow-5);
  color: rgba(231,221,202,.88);
  text-align: center;
  opacity: 0;
  transform: translate(-50%,-8px);
  transition: opacity .25s,transform .25s
}
.visitor-intro::after,
.visitor-intro::before {
  content: '';
  position: absolute;
  top: 12px;
  bottom: 12px;
  width: 1px;
  background: linear-gradient(180deg,transparent,rgba(201,158,87,.44) 22%,rgba(201,158,87,.18) 78%,transparent)
}
.visitor-intro::before {
  left: 13px
}
.visitor-intro::after {
  right: 13px
}
.visitor-intro.is-visible {
  opacity: 1;
  transform: translate(-50%,0)
}
.visitor-intro.is-closing {
  opacity: 0;
  transform: translate(-50%,-7px);
  pointer-events: none
}
.visitor-intro-ornament {
  margin-bottom: 4px;
  color: rgba(213,170,97,.78);
  font-size: 17px;
  text-shadow: 0 0 12px rgba(201,151,75,.34)
}
.visitor-intro-content {
  max-width: 640px;
  margin: 0 auto;
  text-align: left
}
.visitor-intro-heading {
  margin: 0 auto 18px;
  text-align: center
}
.visitor-intro h2 {
  position: relative;
  max-width: 700px;
  margin: 0 auto;
  color: rgba(239,211,158,.98);
  font-family: Georgia,"Times New Roman",serif;
  font-size: clamp(17px, 1.25vw, 20px);
  line-height: 1.18;
  letter-spacing: .01em;
  font-weight: 500;
  text-shadow: 0 2px 4px rgba(0,0,0,.74),0 0 18px rgba(194,145,69,.09)
}
.visitor-intro h2::after {
  content: "";
  display: block;
  width: 130px;
  height: 1px;
  margin: 8px auto 0;
  background: linear-gradient(90deg,transparent,rgba(214,170,96,.88),transparent)
}
.visitor-intro-echo {
  margin: 8px auto 0!important;
  padding: 0!important;
  border: 0!important;
  text-indent: 0!important;
  color: rgba(221,185,121,.9)!important;
  font-family: Georgia,"Times New Roman",serif;
  font-size: clamp(13px, 1.05vw, 16px)!important;
  font-style: italic;
  line-height: 1.35!important;
  letter-spacing: .035em;
  text-align: center
}
.visitor-intro p {
  margin: 8px 0;
  text-indent: 0;
  max-width: none;
  color: rgba(226,216,198,.83);
  font-family: Georgia,"Times New Roman",serif;
  font-size: clamp(16px, .92vw, 18px);
  line-height: 2
}
.visitor-intro-content > p + p {
  border-top: 0;
  padding-top: 0
}
.visitor-intro strong {
  color: rgba(239,209,154,.96);
  font-weight: 600
}
.visitor-intro .visitor-intro-signature {
  margin: 12px 0 4px;
  text-align: center;
  color: rgba(205,166,99,.8);
  font-size: 11px;
  font-style: italic;
  letter-spacing: .065em
}
.visitor-intro-close {
  position: absolute;
  z-index: 2;
  top: 8px;
  right: 10px;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  background: 0 0;
  color: rgba(218,184,124,.68);
  font-family: Georgia,"Times New Roman",serif;
  font-size: 27px;
  line-height: 1;
  cursor: pointer;
  transition: color .18s,transform .18s
}
.visitor-intro-close:focus-visible,
.visitor-intro-close:hover {
  color: #f0cd8b;
  transform: scale(1.08);
  outline: 0
}
.visitor-intro-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin: 20px auto 15px;
  padding: 8px 18px 7px;
  border: 1px solid rgba(195,149,73,.72);
  border-radius: 2px;
  background: linear-gradient(180deg,var(--gold-16),rgba(0,0,0,.12)),rgba(18,14,9,.92);
  box-shadow: inset 0 0 0 1px rgba(255,230,187,.035),0 7px 18px var(--shadow-28);
  color: rgba(239,210,156,.96);
  font-family: inherit;
  font-size: 10px;
  letter-spacing: .13em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform .17s,border-color .17s,background .17s,color .17s
}
.visitor-intro-action:focus-visible,
.visitor-intro-action:hover {
  transform: translateY(-1px);
  border-color: rgba(236,199,132,.94);
  background: linear-gradient(180deg,var(--gold-24),rgba(0,0,0,.08)),rgba(25,18,11,.96);
  color: #f3d59d;
  outline: 0
}
.visitor-intro-action:active {
  transform: translateY(0)
}
.visitor-intro-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 20px;
  margin-bottom: 15px
}
.visitor-intro-actions .visitor-intro-action {
  margin: 0
}
.visitor-intro-action-secondary {
  background: rgba(10,8,6,.72);
  border-color: rgba(166,129,70,.48);
  color: rgba(214,190,146,.88);
  text-decoration: none
}
.visitor-intro-action-secondary:focus-visible,
.visitor-intro-action-secondary:hover {
  border-color: rgba(218,177,105,.78);
  background: rgba(20,15,10,.88);
  color: rgba(239,210,156,.96)
}
.mobile-nav-backdrop,
.mobile-nav-close,
.mobile-nav-toggle {
  display: none
}
.visitor-restricted-link {
  position: relative
}
.visitor-restricted-link::after {
  content: "◇";
  position: absolute;
  top: 50%;
  right: 11px;
  color: rgba(207,169,99,.42);
  font-size: 10px;
  transform: translateY(-50%);
  transition: color .2s,transform .2s,text-shadow .2s
}
.visitor-restricted-link:focus-visible::after,
.visitor-restricted-link:hover::after {
  color: rgba(235,202,138,.82);
  transform: translateY(-50%) rotate(45deg);
  text-shadow: 0 0 10px rgba(215,170,88,.34)
}
.visitor-restricted-link.is-refusing {
  animation: .5s visitor-restricted-link-awake
}
@keyframes visitor-restricted-link-awake {
  0%,
  100% {
    border-color: transparent;
    background: 0 0;
    box-shadow: none
  }
  32% {
    color: #efd8a8;
    border-color: rgba(211,166,88,.72);
    background: rgba(185,139,66,.13);
    box-shadow: inset 0 0 22px var(--gold-08),0 0 14px rgba(185,139,66,.13)
  }
}
body.visitor-restricted-awake .app-shell {
  filter: brightness(.54) saturate(.76);
  transition: filter .28s
}
.visitor-restricted-dialog {
  position: relative;
  isolation: isolate;
  width: min(590px,calc(100vw - 34px));
  margin: auto;
  padding: 42px 48px 38px;
  overflow: hidden;
  border: 1px solid rgba(203,157,81,.68);
  border-radius: 3px;
  color: #e9dfcc;
  text-align: center;
  background: radial-gradient(ellipse 74% 72% at 50% 8%,rgba(192,138,59,.16),transparent 70%),linear-gradient(145deg,rgba(31,22,13,.985),rgba(7,7,6,.995));
  box-shadow: 0 32px 100px var(--shadow-88),0 0 52px var(--gold-1),inset 0 0 0 1px rgba(255,226,175,.045),inset 0 -50px 90px rgba(0,0,0,.31)
}
.visitor-restricted-dialog::before {
  content: "";
  position: absolute;
  z-index: -2;
  inset: 0;
  background: linear-gradient(rgba(10,8,6,.78),rgba(8,7,6,.9)),var(--echo-image-fond-ecrans, url("images/fond_ecrans.webp")) right center/200% auto no-repeat;
  opacity: .72;
  pointer-events: none
}
.visitor-restricted-dialog::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 8px;
  border: 1px solid rgba(219,180,110,.14);
  box-shadow: inset 0 0 58px var(--shadow-28),inset 0 0 0 1px rgba(0,0,0,.36);
  pointer-events: none
}
.visitor-restricted-dialog::backdrop {
  background: rgba(0,0,0,.62);
  backdrop-filter: blur(7px) brightness(.66)
}
.visitor-restricted-dialog[open] {
  animation: .3s cubic-bezier(.18,.78,.24,1) visitor-restricted-dialog-in
}
.visitor-restricted-dialog.is-closing {
  animation: .19s forwards visitor-restricted-dialog-out
}
@keyframes visitor-restricted-dialog-in {
  from {
    opacity: 0;
    transform: translateY(11px) scale(.982)
  }
  to {
    opacity: 1;
    transform: none
  }
}
@keyframes visitor-restricted-dialog-out {
  to {
    opacity: 0;
    transform: translateY(7px) scale(.99)
  }
}
.visitor-restricted-close {
  position: absolute;
  z-index: 3;
  top: 8px;
  right: 12px;
  border: 0;
  padding: 2px 7px;
  color: var(--ivory-58);
  background: 0 0;
  font: 29px/1 Georgia,serif;
  cursor: pointer
}
.visitor-restricted-close:focus-visible,
.visitor-restricted-close:hover {
  color: #ecd39f
}
.visitor-restricted-mark {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  margin: 0 auto 11px;
  border: 1px solid rgba(210,173,112,.4);
  border-radius: 50%;
  color: #dcbd7f;
  background: radial-gradient(circle,rgba(185,139,66,.23),rgba(20,13,7,.74));
  box-shadow: 0 0 28px rgba(185,139,66,.17),inset 0 0 12px rgba(255,220,154,.035)
}
.visitor-restricted-mark span {
  font-size: 19px;
  text-shadow: 0 0 13px rgba(221,181,105,.35)
}
.visitor-restricted-kicker {
  margin: 0 0 7px;
  color: #b99055;
  font-size: 9px;
  letter-spacing: .22em;
  text-transform: uppercase
}
.visitor-restricted-dialog h2 {
  max-width: 470px;
  margin: 0 auto 15px;
  color: #ead3a3;
  font-weight: 400;
  font-size: clamp(24px, 3vw, 31px);
  line-height: 1.16;
  font-family: Georgia,serif;
  text-wrap: balance
}
.visitor-restricted-intro,
.visitor-restricted-note {
  max-width: 470px;
  margin-inline: auto
}
.visitor-restricted-intro {
  margin-top: 0;
  margin-bottom: 10px;
  color: rgba(239,225,199,.88);
  font: italic 15px/1.65 Georgia,serif
}
.visitor-restricted-note {
  margin-top: 0;
  margin-bottom: 18px;
  color: rgba(229,218,198,.68);
  font-size: 13px;
  line-height: 1.65
}
.visitor-restricted-actions {
  display: flex;
  justify-content: center;
  gap: 12px
}
.visitor-restricted-actions .button {
  min-width: 185px;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px
}
.visitor-restricted-actions .button span:first-child {
  font-size: 13px
}
body.cartographer-tip-preamble .brand-compass {
  animation: .62s both cartographer-tip-compass-awake
}
body.cartographer-tip-preamble .board::after {
  opacity: .18
}
@keyframes cartographer-tip-compass-awake {
  0% {
    filter: brightness(1);
    transform: scale(1)
  }
  46% {
    filter: brightness(1.5) drop-shadow(0 0 18px rgba(211,164,82,.55));
    transform: scale(1.035)
  }
  100% {
    filter: brightness(1.15) drop-shadow(0 0 8px rgba(211,164,82,.22));
    transform: scale(1)
  }
}
.cartographer-device-tip-dialog {
  position: relative;
  isolation: isolate;
  width: min(610px,calc(100vw - 30px));
  margin: auto;
  padding: 42px 48px 36px;
  overflow: hidden;
  border: 1px solid rgba(203,157,81,.7);
  border-radius: 3px;
  color: #e9dfcc;
  text-align: center;
  background: radial-gradient(ellipse 72% 70% at 50% 8%,rgba(192,138,59,.17),transparent 70%),linear-gradient(145deg,rgba(31,22,13,.985),rgba(7,7,6,.995));
  box-shadow: 0 32px 100px var(--shadow-88),0 0 58px rgba(185,139,66,.11),inset 0 0 0 1px rgba(255,226,175,.045),inset 0 -50px 90px rgba(0,0,0,.31)
}
.cartographer-device-tip-dialog::before {
  content: "";
  position: absolute;
  z-index: -2;
  inset: 0;
  background: linear-gradient(rgba(10,8,6,.77),rgba(8,7,6,.91)),var(--echo-image-fond-ecrans, url("images/fond_ecrans.webp")) left center/200% auto no-repeat;
  opacity: .74
}
.cartographer-device-tip-dialog::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 8px;
  border: 1px solid rgba(219,180,110,.14);
  box-shadow: inset 0 0 58px var(--shadow-28),inset 0 0 0 1px rgba(0,0,0,.36);
  pointer-events: none
}
.cartographer-device-tip-dialog::backdrop {
  background: rgba(0,0,0,.64);
  backdrop-filter: blur(7px) brightness(.66)
}
.cartographer-device-tip-dialog[open] {
  animation: .32s cubic-bezier(.18,.78,.24,1) cartographer-device-tip-in
}
.cartographer-device-tip-dialog.is-closing {
  animation: .19s forwards cartographer-device-tip-out
}
@keyframes cartographer-device-tip-in {
  from {
    opacity: 0;
    transform: translateY(12px) scale(.982)
  }
  to {
    opacity: 1;
    transform: none
  }
}
@keyframes cartographer-device-tip-out {
  to {
    opacity: 0;
    transform: translateY(7px) scale(.99)
  }
}
.cartographer-device-tip-close {
  position: absolute;
  z-index: 3;
  top: 8px;
  right: 12px;
  border: 0;
  padding: 2px 7px;
  color: var(--ivory-58);
  background: 0 0;
  font: 29px/1 Georgia,serif;
  cursor: pointer
}
.cartographer-device-tip-close:focus-visible,
.cartographer-device-tip-close:hover {
  color: #ecd39f
}
.cartographer-device-tip-compass {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  margin: 0 auto 12px;
  border: 1px solid rgba(210,173,112,.42);
  border-radius: 50%;
  color: #dcbd7f;
  background: radial-gradient(circle,rgba(185,139,66,.25),rgba(20,13,7,.76));
  box-shadow: 0 0 30px var(--gold-18),inset 0 0 12px rgba(255,220,154,.04)
}
.cartographer-device-tip-compass span {
  font-size: 21px;
  text-shadow: 0 0 14px rgba(221,181,105,.38)
}
.cartographer-device-tip-kicker {
  margin: 0 0 8px;
  color: #b99055;
  font-size: 9px;
  letter-spacing: .22em;
  text-transform: uppercase
}
.cartographer-device-tip-dialog h2 {
  max-width: 500px;
  margin: 0 auto 17px;
  color: #ead3a3;
  font-weight: 400;
  font-size: clamp(25px,3vw,32px);
  line-height: 1.16;
  font-family: Georgia,serif;
  text-wrap: balance
}
.cartographer-device-tip-copy {
  max-width: 490px;
  margin: 0 auto;
  color: rgba(235,223,201,.78);
  font-size: 14px;
  line-height: 1.68;
  text-align: left
}
.cartographer-device-tip-copy p {
  margin: 0 0 11px
}
.cartographer-device-tip-copy strong {
  color: #ead3a3;
  font-weight: 400
}
.cartographer-device-tip-choice {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 12px auto 20px;
  color: rgba(232,221,201,.72);
  font-size: 12px;
  cursor: pointer
}
.cartographer-device-tip-choice input {
  width: 17px;
  height: 17px;
  accent-color: #b98b42
}
.cartographer-device-tip-action {
  min-width: 190px;
  min-height: 42px
}


























.threshold-v2-seal {
  place-items: center;
  margin: 0 auto 6px;
  border: 1px solid rgba(215,176,107,.4);
  border-radius: 50%;
  color: #e0c080;
  background: radial-gradient(circle,var(--gold-22),rgba(17,11,7,.72));
  box-shadow: 0 0 28px rgba(185,139,66,.17),inset 0 0 13px rgba(255,224,164,.035);
  width: 40px;
  height: 40px
}
.threshold-v2-seal span {
  font-size: 18px;
  text-shadow: 0 0 13px rgba(222,180,103,.34)
}
.threshold-v2-kicker {

  text-transform: uppercase
}
.threshold-v2-access {
  margin: 0
}


.threshold-founding-kicker {
  color: #c79a5b;

  text-transform: uppercase;
  }

.threshold-founding-price {
  display: flex;
  align-items: baseline;
  justify-content: center;

  }


.threshold-founding-price strong {
  font-family: Georgia,serif;
  font-weight: 400;
  text-shadow: 0 1px 0 rgba(22,31,13,.72),0 0 16px rgba(116,139,77,.13)
}

.threshold-founding-progress {
  margin: 0 auto
}
.threshold-founding-track {
  display: block;
  overflow: hidden;
  border: 1px solid rgba(193,149,77,.3);
  background: rgba(0,0,0,.36);
  box-shadow: inset 0 1px 3px rgba(0,0,0,.56)
}
.threshold-founding-track span {
  height: 100%;
  display: block;
  min-width: 2px;
  background: linear-gradient(90deg,#785024,#c08d48 60%,#e0b977);
  box-shadow: 0 0 9px rgba(203,158,84,.3)
}
.threshold-founding-progress strong {
  display: block;
  font-weight: 500;
  letter-spacing: .055em;
  color: rgba(233,218,190,.66)
}



.threshold-v2-pay {
  min-width: 310px;
  letter-spacing: .14em;
  min-height: 40px;
  font-size: 9.5px
}
.threshold-v2-support > p:first-of-type {
  margin-bottom: 6px;
  font-size: 10.5px
}
.threshold-checkout-form {
  display: grid;
  }
.threshold-checkout-form label {
  color: rgba(226,204,164,.82);
  font: italic 12px/1.45 Georgia,serif;
  text-align: center
}
.threshold-checkout-form input[type=email] {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid rgba(194,148,75,.48);
  border-radius: 2px;
  color: #eadfc9;
  box-shadow: inset 0 0 18px var(--shadow-3),0 0 0 1px rgba(255,224,162,.025);
  font-family: Georgia,serif;
  text-align: center;
  outline: 0
}
.threshold-checkout-form input[type=email]::placeholder {
  color: rgba(224,212,190,.34)
}
.threshold-checkout-form input[type=email]:focus {
  border-color: rgba(222,177,96,.82);
  box-shadow: inset 0 0 18px var(--shadow-3),0 0 16px rgba(190,143,70,.13)
}
.threshold-checkout-error {
  margin: 0;
  color: #d9a98b;
  font-size: 10px;
  line-height: 1.45;
  text-align: center
}
.threshold-checkout-form .threshold-v2-pay {

  min-width: 0
}
.threshold-v2-pay.is-opening,
.threshold-v2-pay:disabled {
  cursor: wait;
  opacity: .76;
  box-shadow: 0 0 24px rgba(190,143,70,.15),inset 0 0 16px rgba(228,187,108,.04)
}
.threshold-dialog.threshold-dialog-v2 .threshold-v2-access,
.threshold-dialog.threshold-dialog-v2 .threshold-v2-support {
  position: relative;
  filter: none!important
}
.threshold-dialog.threshold-dialog-v2 .threshold-v2-access::after,
.threshold-dialog.threshold-dialog-v2 .threshold-v2-access::before,
.threshold-dialog.threshold-dialog-v2 .threshold-v2-support::after,
.threshold-dialog.threshold-dialog-v2 .threshold-v2-support::before {
  content: none!important;
  display: none!important;
  content: none!important
}

.teaser-notice-dialog {
  width: min(92vw,520px);
  padding: 34px 34px 30px;
  border: 1px solid rgba(203,157,81,.66);
  border-radius: 2px;
  color: #e9dfcc;
  text-align: center;
  background: radial-gradient(ellipse 72% 46% at 50% 0,rgba(205,153,75,.2),transparent 68%),linear-gradient(180deg,rgba(20,14,9,.97),rgba(6,6,5,.98));
  box-shadow: 0 34px 110px var(--shadow-88),0 0 52px var(--gold-1),inset 0 0 0 1px rgba(255,229,170,.055)
}
.teaser-notice-dialog::backdrop {
  background: rgba(0,0,0,.67);
  backdrop-filter: blur(8px) brightness(.62)
}
.teaser-notice-dialog[open] {
  animation: .28s cubic-bezier(.2,.75,.2,1) dialog-premium-rise
}
.teaser-notice-mark {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  margin: 0 auto 13px;
  border: 1px solid rgba(214,176,105,.42);
  border-radius: 50%;
  color: #e2c17f;
  background: var(--gold-08);
  font-size: 18px;
  box-shadow: 0 0 26px var(--gold-1)
}

.teaser-notice-dialog h2 {
  margin: 0 0 14px;
  color: #ead3a3;
  font: 25px/1.2 Georgia,serif
}
.teaser-notice-dialog p {
  margin: 0 auto 10px;
  max-width: 430px;
  color: #c8bdac;
  font-size: 13px;
  line-height: 1.58
}
.teaser-notice-dialog .teaser-notice-warning {
  margin-top: 13px;
  padding: 12px 14px;
  border: 1px solid rgba(204,156,82,.24);
  background: rgba(30,19,10,.42);
  color: #dfc594
}
.teaser-notice-actions {
  display: flex;
  justify-content: center;
  gap: 11px;
  margin-top: 24px
}
.teaser-notice-actions .button {
  min-width: 170px
}
.teaser-notice-actions .button.secondary {
  border-color: rgba(185,139,66,.3);
  color: #b9ad9b;
  background: var(--shadow-28)
}
.teaser-notice-actions-single .button {
  min-width: 190px
}
.teaser-success-dialog .teaser-notice-mark {
  font-size: 20px
}
@media (max-width:620px) {
  .teaser-notice-dialog {
    padding: 28px 20px 24px
  }
  .teaser-notice-dialog h2 {
    font-size: 22px
  }
  .teaser-notice-actions {
    flex-direction: column-reverse
  }
  .teaser-notice-actions .button {
    width: 100%;
    min-width: 0
  }
}














.admin-grant-table-wrap {
  overflow-x: auto;
  margin-top: 22px;
  border: 1px solid rgba(185,139,66,.17)
}
.admin-grant-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 820px
}
.admin-grant-table th {
  padding: 12px 15px;
  border-bottom: 1px solid rgba(185,139,66,.25);
  background: var(--shadow-24);
  color: #a98751;
  font-size: 9px;
  letter-spacing: .13em;
  text-align: left;
  text-transform: uppercase;
  font-weight: 600
}
.admin-grant-table td {
  padding: 15px;
  border-bottom: 1px solid rgba(185,139,66,.13);
  color: #d8cbb4;
  font-size: 13px;
  vertical-align: middle
}
.admin-grant-table tbody tr:last-child td {
  border-bottom: 0
}
.admin-grant-table tbody tr:hover {
  background: rgba(185,139,66,.035)
}
.admin-grant-table td:first-child strong {
  display: block;
  color: #ead9bb;
  font-weight: 500
}
.admin-grant-table td:first-child small {
  display: block;
  margin-top: 5px;
  color: rgba(232,223,207,.45);
  font-size: 11px
}







@media (max-width:760px) {
  
  
  
  
}
.admin-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end
}
.admin-menu {
  position: relative
}
.admin-menu > summary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  cursor: pointer;
  list-style: none;
  user-select: none
}
.admin-menu > summary::-webkit-details-marker {
  display: none
}
.admin-menu > summary span {
  display: inline-block;
  font-size: 15px;
  line-height: 1;
  transition: transform .18s
}
.admin-menu[open] > summary span {
  transform: rotate(180deg)
}
.admin-menu-panel {
  position: absolute;
  z-index: 120;
  top: calc(100% + 9px);
  right: 0;
  width: min(280px,calc(100vw - 48px));
  padding: 8px;
  border: 1px solid rgba(185,139,66,.38);
  border-radius: 10px;
  background: linear-gradient(145deg,rgba(31,22,13,.99),rgba(8,7,6,.99));
  box-shadow: 0 18px 45px var(--shadow-5),inset 0 0 0 1px rgba(255,220,151,.035)
}
.admin-menu-panel a {
  display: block;
  padding: 11px 13px;
  border-radius: 7px;
  color: rgba(232,223,207,.82);
  font-size: 13px;
  letter-spacing: .025em;
  text-decoration: none;
  transition: background .15s,color .15s
}
.admin-menu-panel a:focus-visible,
.admin-menu-panel a:hover {
  color: #f3d89f;
  background: rgba(185,139,66,.11);
  outline: 0
}
.admin-menu-panel a.is-current {
  color: #f2d293;
  background: var(--gold-16)
}
.admin-menu-panel a.is-current::before {
  content: "◆";
  margin-right: 8px;
  color: #b98b42;
  font-size: 8px;
  vertical-align: 2px
}
.admin-menu-separator {
  display: block;
  height: 1px;
  margin: 6px 8px;
  background: var(--gold-22)
}
@media (max-width:760px) {
  .admin-header {
    align-items: flex-start
  }
  .admin-header-actions {
    width: 100%;
    justify-content: flex-start
  }
  .admin-menu-panel {
    right: auto;
    left: 0
  }
}
.top-admin-menu {
  position: relative;
  flex: 0 0 auto
}
.top-admin-menu > summary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  list-style: none;
  user-select: none;
  white-space: nowrap
}
.top-admin-menu > summary::-webkit-details-marker {
  display: none
}
.top-admin-chevron {
  display: inline-block;
  margin-left: 2px;
  font-size: 14px;
  line-height: 1;
  transition: transform .18s
}
.top-admin-menu[open] .top-admin-chevron {
  transform: rotate(180deg)
}
.top-admin-menu-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 450px;
  padding: 7px;
  border: 1px solid rgba(185,139,66,.48);
  background: linear-gradient(145deg,rgba(28,20,12,.99),rgba(7,6,5,.995));
  box-shadow: 0 18px 42px rgba(0,0,0,.58),inset 0 0 0 1px rgba(255,221,157,.035)
}
.top-admin-menu-panel a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  color: rgba(232,223,207,.84);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid transparent
}
.top-admin-menu-panel a span {
  width: 14px;
  color: #c69543;
  text-align: center
}
.top-admin-menu-panel a:focus-visible,
.top-admin-menu-panel a:hover {
  color: #f1d394;
  background: var(--gold-1);
  border-color: var(--gold-18);
  outline: 0
}
.topbar {
  position: relative;
  z-index: 1000;
  overflow: visible
}
.top-actions {
  position: relative;
  z-index: 510;
  overflow: visible
}
.top-admin-menu {
  z-index: 520
}
.top-admin-menu-panel {
  z-index: 1000
}
.hunt-waiting-banner {
  position: absolute;
  z-index: 90;
  left: 50%;
  top: 24px;
  transform: translateX(-50%);
  width: min(720px,calc(100% - 48px));
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 15px 20px;
  border: 1px solid var(--gold-42);
  background: linear-gradient(145deg,rgba(24,17,10,.96),rgba(8,7,6,.97));
  box-shadow: 0 15px 38px rgba(0,0,0,.35);
  color: rgba(232,223,207,.78);
  pointer-events: none;
  opacity: 1;
  transition: opacity .5s,transform .5s
}
.hunt-waiting-banner.is-hiding {
  opacity: 0;
  transform: translateX(-50%) translateY(-8px)
}

.hunt-waiting-banner strong {
  display: block;
  margin-bottom: 4px;
  color: #efd095;
  font-family: Georgia,"Times New Roman",serif;
  font-size: 17px;
  font-weight: 400
}
.hunt-waiting-banner span:last-child {
  display: block;
  font-size: 12px;
  line-height: 1.5
}
.hunt-launch-card {
  max-width: 780px
}
.hunt-launch-status {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 20px 0 28px;
  padding: 22px;
  border: 1px solid var(--gold-28);
  background: rgba(185,139,66,.035)
}
.hunt-launch-status-mark {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border: 1px solid rgba(185,139,66,.5);
  border-radius: 50%;
  color: #e0b86e;
  font-size: 20px
}
.hunt-launch-status strong {
  display: block;
  margin-bottom: 6px;
  color: #f0d198;
  font-family: Georgia,"Times New Roman",serif;
  font-size: 22px;
  font-weight: 400
}
.hunt-launch-status span:last-child {
  display: block;
  color: rgba(232,223,207,.68);
  line-height: 1.55
}
.hunt-launch-button {
  min-width: 260px
}
@media (max-width:700px) {
  .hunt-waiting-banner {
    top: 14px;
    width: calc(100% - 28px)
  }
}
.notebook-demo-banner {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0 0 22px;
  padding: 14px 18px;
  border: 1px solid rgba(185,139,66,.32);
  background: rgba(185,139,66,.055)
}
.notebook-demo-banner > span {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(185,139,66,.48);
  border-radius: 50%;
  color: #dcb268
}
.notebook-demo-banner > div {
  flex: 1 1 auto
}
.notebook-demo-banner strong {
  display: block;
  margin-bottom: 3px;
  color: #efd19a;
  font-family: Georgia,"Times New Roman",serif;
  font-weight: 400
}
.notebook-demo-banner p {
  margin: 0;
  color: rgba(232,223,207,.65);
  font-size: 12px;
  line-height: 1.5
}
.notebook-demo-mode textarea[readonly] {
  cursor: default;
  opacity: .94
}
.notebook-demo-mode .favorite-card:disabled,
.notebook-demo-mode .notebook-consign-button:disabled {
  cursor: not-allowed;
  opacity: .38
}
.notebook-card-thumbnail-link.is-demo-disabled {
  cursor: default;
  pointer-events: none
}
@media (max-width:760px) {
  .notebook-demo-banner {
    align-items: flex-start;
    flex-wrap: wrap
  }
}
.notebook-demo-mode .notebook-demo-workspace {
  position: relative
}
.notebook-demo-mode .notebook-demo-workspace > :not(.notebook-seal-gate) {
  pointer-events: none;
  user-select: none
}
.notebook-demo-mode .notebook-seal-gate {
  display: block!important;
  opacity: 1!important;
  pointer-events: auto
}
.notebook-demo-mode .notebook-seal-gate button:disabled,
.notebook-demo-mode .notebook-seal-gate input:disabled {
  cursor: not-allowed
}
.notebook-demo-seal-note {
  margin: 0 0 18px;
  padding: 10px 12px;
  border: 1px solid var(--gold-22);
  background: rgba(185,139,66,.04);
  color: rgba(232,223,207,.6);
  font-size: 11px;
  line-height: 1.5;
  letter-spacing: .02em
}
.maintenance-page {
  min-height: 100vh;
  margin: 0;
  color: #e8dfcf;
  background: radial-gradient(circle at 50% 38%,rgba(126,84,30,.1),transparent 30%),linear-gradient(rgba(3,4,4,.7),rgba(3,4,4,.88)),url("images/fond.webp") center/cover fixed,#050606;
  overflow: hidden
}
.maintenance-stage {
  min-height: 100vh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
  box-sizing: border-box
}
.maintenance-card {
  position: relative;
  width: min(680px,100%);
  padding: 68px 64px 62px;
  box-sizing: border-box;
  text-align: center;
  border: 1px solid rgba(185,139,66,.46);
  background: linear-gradient(145deg,rgba(30,22,13,.94),rgba(8,7,6,.98));
  box-shadow: 0 28px 80px rgba(0,0,0,.58),inset 0 0 0 1px rgba(255,222,158,.035)
}
.maintenance-card::after,
.maintenance-card::before {
  content: "";
  position: absolute;
  width: 42px;
  height: 42px;
  pointer-events: none
}
.maintenance-card::before {
  top: 14px;
  left: 14px;
  border-top: 1px solid var(--gold-42);
  border-left: 1px solid var(--gold-42)
}
.maintenance-card::after {
  right: 14px;
  bottom: 14px;
  border-right: 1px solid var(--gold-42);
  border-bottom: 1px solid var(--gold-42)
}
.maintenance-mark {
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  margin: 0 auto 24px;
  border: 1px solid rgba(185,139,66,.56);
  border-radius: 50%;
  color: #ddb36b;
  box-shadow: inset 0 0 18px var(--gold-08)
}
.maintenance-mark span {
  font-size: 18px;
  transform: translateY(-1px)
}
.maintenance-kicker {
  margin: 0 0 12px;
  color: #c9994c;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .28em;
  text-transform: uppercase
}
.maintenance-card h1 {
  margin: 0;
  color: #f0d39c;
  font-family: Georgia,"Times New Roman",serif;
  font-size: clamp(34px, 5vw, 54px);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: .01em
}
.maintenance-lead {
  max-width: 500px;
  margin: 24px auto 0;
  color: rgba(232,223,207,.74);
  font-family: Georgia,"Times New Roman",serif;
  font-size: 17px;
  line-height: 1.7
}
.maintenance-ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 34px auto 26px;
  color: #b98b42
}
.maintenance-ornament span {
  width: 96px;
  height: 1px;
  background: linear-gradient(90deg,transparent,rgba(185,139,66,.58))
}
.maintenance-ornament span:last-child {
  background: linear-gradient(90deg,rgba(185,139,66,.58),transparent)
}
.maintenance-ornament b {
  font-size: 10px;
  font-weight: 400
}
.maintenance-signature {
  margin: 0;
  color: rgba(221,179,107,.72);
  font-family: Georgia,"Times New Roman",serif;
  font-size: 14px;
  font-style: italic;
  letter-spacing: .02em
}
.launch-second-lock {
  margin-top: 22px
}

.launch-pricing-test {
  margin-top: 52px;
  padding-top: 8px
}
.maintenance-preview-help {
  margin-top: 22px;
  max-width: 780px
}
.maintenance-preview-help code {
  color: #efd19a;
  overflow-wrap: anywhere
}
.maintenance-preview-help a {
  color: #ddb36b
}
@media(max-width:700px) {
  .maintenance-stage {
    padding: 18px
  }
  .maintenance-card {
    padding: 50px 26px 46px
  }
  .maintenance-card::after,
  .maintenance-card::before {
    width: 28px;
    height: 28px
  }
  .maintenance-lead {
    font-size: 16px
  }
  .maintenance-ornament span {
    width: 58px
  }
}
.threshold-dialog.threshold-dialog-v2 {
  width: min(980px,calc(100vw - 40px));
  max-height: calc(100dvh - 22px);
  box-sizing: border-box;
  padding: 18px 44px 16px;
  overflow-x: hidden;
  overflow-y: auto;
  border: 1px solid rgba(205,157,79,.78);
  border-radius: 3px;
  color: #e8dfcf;
  background: linear-gradient(180deg,rgba(5,8,9,.54),rgba(5,6,6,.76)),radial-gradient(ellipse 64% 45% at 50% 8%,rgba(181,128,51,.13),transparent 72%),url("images/stripe_dons.webp") center/cover no-repeat;
  box-shadow: 0 34px 110px rgba(0,0,0,.86),0 0 48px var(--gold-1),inset 0 0 0 1px rgba(255,226,167,.035);
  scrollbar-width: thin;
  scrollbar-color: rgba(190,143,70,.62) rgba(7,7,6,.40)
}
.threshold-dialog.threshold-dialog-v2::before {
  opacity: .18;
  filter: none
}
.threshold-dialog.threshold-dialog-v2::after {
  inset: 8px;
  inset: 9px;
  border-color: rgba(223,182,108,.14)
}
.threshold-dialog.threshold-dialog-v2 .threshold-close {
  top: 11px;
  right: 13px
}
.threshold-v2-header {
  margin: 0 0 10px;
  text-align: center
}
.threshold-v2-seal {
  display: none
}
.threshold-v2-kicker {
  margin: 0 0 3px;
  color: #c39a59;
  font-size: 8px;
  letter-spacing: .3em
}
.threshold-dialog.threshold-dialog-v2 h2 {
  letter-spacing: .015em;
  margin: 0;
  color: #f0d6a0;
  font-weight: 400;
  font-size: clamp(30px,3.5vw,42px);
  line-height: 1.02;
  font-family: Georgia,serif;
  letter-spacing: .01em;
  text-shadow: 0 1px 18px rgba(195,145,66,.08)
}
.threshold-v2-invitation {
  margin: 5px 0 0;
  color: rgba(235,223,201,.67);
  font: italic 12px/1.35 Georgia,serif
}
.threshold-dialog.threshold-dialog-v2 .threshold-v2-access,
.threshold-dialog.threshold-dialog-v2 .threshold-v2-support {
  background: 0 0!important;
  border: 0!important;
  box-shadow: none!important
}


.threshold-founding-kicker {
  margin: 0 0 4px;
  font-size: 8px;
  letter-spacing: .29em
}


.threshold-founding-price {
  gap: 15px;
  margin: 0
}

.threshold-founding-price strong {
  color: #899b67;
  font-size: clamp(38px,4.7vw,50px);
  line-height: .98
}

.threshold-founding-progress {
  max-width: 620px
}
.threshold-founding-track {
  height: 3px
}
.threshold-founding-progress strong {
  margin-top: 5px;
  font-size: 8.5px
}
.threshold-v2-list {
  column-gap: 30px;
  max-width: 860px;
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  column-gap: 20px;
  margin: 0 auto 9px;
  padding: 0;
  list-style: none
}
.threshold-v2-list li {
  min-height: 30px;
  display: flex;
  align-items: center;
  padding: 0 0 0 17px;
  border-right: 1px solid rgba(190,145,72,.2);
  font-size: 9.7px;
  line-height: 1.3
}
.threshold-v2-list li:last-child {
  border-right: 0
}
.threshold-v2-list li::before {
  content: "✦";
  top: 50%;
  transform: translateY(-50%);
  font-size: 7px;
  display: none
}
.threshold-checkout-form {
  width: min(100%,760px);
  gap: 6px;
  margin: 0 auto
}
.threshold-checkout-form > label[for=thresholdCheckoutEmail] {
  margin: 0;
  font-size: 11px;
  line-height: 1.25
}
.threshold-checkout-form input[type=email] {
  min-height: 43px;
  padding: 9px 14px;
  border-color: rgba(195,148,72,.52);
  background: rgba(5,7,7,.64);
  font-size: 14px;
  backdrop-filter: blur(2px)
}
.threshold-legal-consent {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 8px;
  margin: 1px auto 0;
  color: rgba(231,220,200,.72);
  font: italic 10px/1.3 Georgia,serif;
  text-align: left
}
.threshold-legal-consent input {
  flex: 0 0 auto;
  margin: 1px 0 0;
  accent-color: #b58a3a
}
.threshold-legal-consent a {
  color: #d8b570;
  text-decoration: none;
  border-bottom: 1px solid rgba(216,181,112,.34)
}
.threshold-checkout-form .threshold-v2-pay {
  width: min(100%,520px);
  min-height: 42px;
  margin: 2px auto 0;
  border-color: rgba(209,159,72,.7);
  background: linear-gradient(180deg,rgba(176,125,43,.88),rgba(112,72,22,.9));
  box-shadow: 0 8px 22px var(--shadow-28),inset 0 1px rgba(255,232,184,.12);
  color: #f0dbb0;
  font-size: 9.5px;
  letter-spacing: .16em
}
.threshold-checkout-form .threshold-v2-pay:not(:disabled):hover {
  background: linear-gradient(180deg,rgba(194,143,53,.94),rgba(128,84,25,.94));
  box-shadow: 0 9px 28px var(--shadow-34),0 0 18px rgba(189,140,61,.13)
}
.threshold-checkout-form .threshold-v2-pay:disabled {
  opacity: .34;
  cursor: not-allowed;
  filter: saturate(.45)
}
.threshold-dialog-v2 .threshold-secure,
.threshold-dialog-v2 .threshold-test-mode {
  margin: 4px 0 0;
  font-size: 8.5px;
  color: rgba(231,220,200,.45)
}
.threshold-v2-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
  margin: 5px auto 4px;
  color: #b98b42;
  font: italic 10px Georgia,serif
}
.threshold-v2-divider::after,
.threshold-v2-divider::before {
  content: "";
  width: 120px;
  height: 1px;
  background: linear-gradient(90deg,transparent,var(--gold-42))
}
.threshold-v2-divider::after {
  background: linear-gradient(90deg,var(--gold-42),transparent)
}
.threshold-v2-support {
  width: min(100%,760px);
  display: grid;
  grid-template-columns: minmax(0,1fr) 230px;
  grid-template-areas: "copy button" "note free";
  align-items: center;
  gap: 4px 22px;
  margin: 0 auto;
  padding: 8px 18px!important;
  border: 1px solid rgba(196,149,75,.34)!important;
  background: rgba(5,7,7,.56)!important;
  box-shadow: inset 0 0 0 1px rgba(255,228,176,.018)!important;
  backdrop-filter: blur(2px)
}
.threshold-support-copy {
  grid-area: copy;
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0
}
.threshold-support-mark {
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(197,151,75,.43);
  border-radius: 50%;
  color: #d4aa64;
  font-size: 16px
}
.threshold-support-copy p {
  margin: 0!important;
  color: rgba(232,223,207,.8);
  font: 11px/1.3 Georgia,serif;
  text-align: left
}
.threshold-support-copy strong {
  color: #e5c88e;
  font-weight: 400
}
.threshold-v2-support .threshold-donate {
  grid-area: button;
  min-width: 0;
  width: 100%;
  min-height: 36px;
  margin: 0;
  border-color: rgba(173,153,74,.62);
  background: linear-gradient(180deg,rgba(65,111,46,.88),rgba(32,72,29,.94));
  color: #eed8a9;
  font-size: 9px;
  letter-spacing: .14em
}
.threshold-v2-support .threshold-free-amount {
  grid-area: free;
  margin: 0!important;
  color: rgba(232,223,207,.42);
  font-size: 8px;
  text-align: center
}
.threshold-v2-support .threshold-support-note {
  max-width: 590px;
  grid-area: note;
  max-width: none;
  margin: 0!important;
  color: rgba(232,223,207,.42);
  font-size: 8px;
  line-height: 1.25;
  text-align: left
}
@media (min-width:900px) and (min-height:760px) {
  .threshold-dialog.threshold-dialog-v2 {
    overflow-y: hidden
  }
}
@media (max-width:899px) {
  .threshold-dialog.threshold-dialog-v2 {
    width: min(94vw,760px);
    max-height: calc(100dvh - 18px);
    padding: 22px 20px 18px;
    overflow-y: auto;
    background: linear-gradient(180deg,rgba(5,8,9,.58),rgba(5,6,6,.82)),url("images/stripe_dons.webp") center/cover no-repeat
  }
  .threshold-v2-list {
    grid-template-columns: 1fr 1fr;
    row-gap: 5px
  }
  .threshold-v2-list li:nth-child(2n) {
    border-right: 0
  }
  .threshold-v2-support {
    grid-template-columns: 1fr;
    grid-template-areas: "copy" "button" "free" "note";
    gap: 7px
  }
  .threshold-support-copy {
    justify-content: center
  }
  .threshold-support-copy p,
  .threshold-v2-support .threshold-support-note {
    text-align: center
  }
}
@media (max-width:560px) {
  .threshold-dialog.threshold-dialog-v2 {
    width: calc(100vw - 12px);
    padding: 19px 13px 15px
  }
  
  .threshold-v2-list {
    grid-template-columns: 1fr
  }
  .threshold-v2-list li {
    border-right: 0;
    border-bottom: 1px solid rgba(190,145,72,.14)
  }
  .threshold-v2-list li:last-child {
    border-bottom: 0
  }
  .threshold-legal-consent {
    font-size: 9.5px
  }
}
@media (min-width:900px) {
  .threshold-dialog.threshold-dialog-v2 {
    padding: 15px 38px 14px;
    border-color: rgba(205,157,79,.62);
    box-shadow: 0 30px 96px rgba(0,0,0,.82),0 0 34px rgba(185,139,66,.075),inset 0 0 0 1px rgba(255,226,167,.025)
  }
  .threshold-dialog.threshold-dialog-v2::before {
    opacity: .1
  }
  .threshold-dialog.threshold-dialog-v2::after {
    inset: 11px;
    border-color: rgba(223,182,108,.075)
  }
  
  
  .threshold-founding-kicker {
    margin-bottom: 3px
  }
  
  
  .threshold-founding-price {
    margin: -1px 0
  }
  
  .threshold-founding-progress strong {
    margin-top: 4px
  }
  .threshold-v2-list {
    column-gap: 34px;
    margin-bottom: 8px
  }
  .threshold-v2-list li {
    min-height: 27px;
    padding-left: 15px;
    padding-right: 0;
    border-right: 0;
    color: rgba(235,224,205,.76)
  }
  .threshold-legal-consent {
    max-width: 700px;
    margin-top: 2px;
    color: rgba(231,220,200,.62);
    font: 9.6px/1.35 Georgia,serif
  }
  .threshold-legal-consent a {
    color: #d7b26a;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-decoration-color: rgba(215,178,106,.48);
    text-underline-offset: 2px;
    border-bottom: 0
  }
  .threshold-v2-support {
    padding: 7px 16px 6px!important;
    gap: 2px 22px;
    border-color: rgba(196,149,75,.25)!important;
    background: rgba(5,7,7,.44)!important
  }
  .threshold-support-mark {
    width: 28px;
    height: 28px;
    flex-basis: 28px
  }
  .threshold-v2-support .threshold-support-note {
    margin-top: 1px!important;
    color: rgba(232,223,207,.49)
  }
  .threshold-v2-support .threshold-free-amount {
    margin-top: 1px!important;
    color: rgba(232,223,207,.48)
  }
  .threshold-v2-divider {
    margin-top: 4px;
    margin-bottom: 3px
  }
}
.threshold-v2-list li {
  gap: 10px;
  padding-left: 0
}
.threshold-feature-icon {
  display: block;
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  object-fit: contain;
  filter: drop-shadow(0 2px 5px var(--shadow-55))
}
.threshold-feature-icon--cards {
  width: 36px;
  height: 38px
}
.threshold-feature-icon--journal {
  width: 40px;
  height: 38px
}
.threshold-feature-icon--space {
  width: 39px;
  height: 39px
}
.threshold-feature-icon--clues {
  width: 43px;
  height: 40px
}
.game-shelf .shelf-game[data-pile=clue],
.game-shelf .shelf-game[data-pile=textual],
.game-shelf .shelf-game[data-pile=visual] {
  width: 100%;
  margin-left: 0;
  margin-right: 0;
  transform: none;
  display: grid;
  grid-template-columns: 56px minmax(0,1fr);
  grid-template-rows: auto auto;
  column-gap: 10px;
  row-gap: 3px;
  align-items: center;
  min-height: 78px;
  padding: 8px 9px
}
.game-shelf .shelf-game[data-pile=clue] .shelf-game-icon,
.game-shelf .shelf-game[data-pile=textual] .shelf-game-icon,
.game-shelf .shelf-game[data-pile=visual] .shelf-game-icon {
  grid-column: 1;
  grid-row: 1/3;
  align-self: center;
  justify-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  overflow: hidden;
  opacity: 1;
  font-size: 0
}
.game-shelf .shelf-game[data-pile=clue] .shelf-game-icon img,
.game-shelf .shelf-game[data-pile=textual] .shelf-game-icon img,
.game-shelf .shelf-game[data-pile=visual] .shelf-game-icon img {
  display: block;
  width: 52px;
  height: 52px;
  max-width: 52px;
  max-height: 52px;
  object-fit: contain;
  object-position: center;
  filter: drop-shadow(0 2px 5px var(--shadow-55))
}
.game-shelf .shelf-game[data-pile=clue] > span:not(.shelf-game-icon):not(.shelf-status),
.game-shelf .shelf-game[data-pile=textual] > span:not(.shelf-game-icon):not(.shelf-status),
.game-shelf .shelf-game[data-pile=visual] > span:not(.shelf-game-icon):not(.shelf-status) {
  grid-column: 2;
  grid-row: 1;
  align-self: end;
  min-width: 0
}
.game-shelf .shelf-game[data-pile=clue] .shelf-status,
.game-shelf .shelf-game[data-pile=textual] .shelf-status,
.game-shelf .shelf-game[data-pile=visual] .shelf-status {
  grid-column: 2;
  grid-row: 2;
  align-self: start;
  margin: 0;
  min-width: 0;
  line-height: 1.35
}
@media (max-width:899px) {
  .threshold-feature-icon,
  .threshold-feature-icon--cards,
  .threshold-feature-icon--clues,
  .threshold-feature-icon--journal,
  .threshold-feature-icon--space {
    width: 34px;
    height: 34px
  }
  .game-shelf .shelf-game[data-pile=textual],
  .game-shelf .shelf-game[data-pile=visual] {
    grid-template-columns: 54px minmax(0,1fr);
    min-height: 84px
  }
  .game-shelf .shelf-game[data-pile=textual] .shelf-game-icon,
  .game-shelf .shelf-game[data-pile=visual] .shelf-game-icon {
    width: 54px;
    height: 54px
  }
  .game-shelf .shelf-game[data-pile=textual] .shelf-game-icon img,
  .game-shelf .shelf-game[data-pile=visual] .shelf-game-icon img {
    width: 50px;
    height: 50px;
    max-width: 50px;
    max-height: 50px
  }
}
.game-shelf {
  gap: 7px
}
@media (min-width:901px) {
  .sidebar {
    padding-top: 8px
  }
  .sidebar .brand {
    margin-top: 0
  }
}
.main-nav .teaser-nav-item {
  min-height: 0;
  height: auto;
  margin: -12px 0 0;
  padding: 0 8px 4px 17px;
  line-height: 1;
  gap: 0
}
.main-nav .teaser-nav-item.active,
.main-nav .teaser-nav-item:focus-visible,
.main-nav .teaser-nav-item:hover {
  padding-left: 17px
}
.main-nav .teaser-nav-item img {
  display: block;
  width: 80px;
  height: auto;
  margin: 0
}
.top-actions .top-donate-button {
  border-color: rgba(79,126,91,.96);
  color: #d6e2d8;
  background: linear-gradient(180deg,rgba(40,83,54,.96) 0,rgba(22,55,34,.98) 55%,rgba(13,35,22,.99) 100%),#163722;
  box-shadow: inset 0 1px rgba(220,240,224,.1),inset 0 -9px 14px var(--shadow-22),0 5px 14px rgba(0,0,0,.32),0 0 0 1px rgba(118,159,128,.05)
}
.top-actions .top-donate-button .button-icon {
  color: #9fbea7
}
.top-actions .top-donate-button:hover {
  border-color: #6b9d77;
  color: #edf4ee;
  background: linear-gradient(180deg,rgba(49,101,65,.98),rgba(27,68,42,.99) 55%,#0f2a19),#1b442a;
  box-shadow: inset 0 1px rgba(231,246,234,.13),inset 0 -9px 14px var(--shadow-2),0 7px 18px rgba(0,0,0,.36),0 0 12px rgba(56,112,70,.1)
}
.top-actions .top-donate-button.is-disabled {
  opacity: .48;
  cursor: not-allowed;
  filter: saturate(.55)
}
.notebook-recovery-panel {
  margin-top: 18px;
  padding-top: 20px;
  border-top: 1px solid var(--gold-24)
}
.notebook-recovery-hint {
  display: block;
  margin-top: 12px;
  line-height: 1.5
}
.admin-recovery-shell {
  width: min(1180px,100%)
}
.admin-recovery-stats {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 14px;
  margin-top: 26px
}
.admin-recovery-stats > div {
  padding: 20px 22px;
  border: 1px solid var(--gold-28);
  background: linear-gradient(145deg,rgba(32,23,14,.78),rgba(8,7,6,.9))
}
.admin-recovery-stats span {
  display: block;
  color: #aa8750;
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase
}
.admin-recovery-stats strong {
  display: block;
  margin-top: 8px;
  color: #efd39c;
  font: 30px Georgia,serif
}
.admin-recovery-explanation {
  margin: 0 0 22px;
  max-width: 920px;
  color: #bfb39a;
  line-height: 1.7
}
.admin-recovery-explanation strong {
  color: #e2c487
}
.admin-recovery-table-wrap {
  overflow-x: auto;
  border: 1px solid rgba(185,139,66,.17)
}
.admin-recovery-table {
  width: 100%;
  min-width: 880px;
  border-collapse: collapse
}
.admin-recovery-table th {
  padding: 12px 15px;
  border-bottom: 1px solid rgba(185,139,66,.25);
  background: var(--shadow-24);
  color: #a98751;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .13em;
  text-align: left;
  text-transform: uppercase
}
.admin-recovery-table td {
  padding: 15px;
  border-bottom: 1px solid rgba(185,139,66,.13);
  color: #d8cbb4;
  font-size: 13px;
  vertical-align: middle
}
.admin-recovery-table tbody tr:last-child td {
  border-bottom: 0
}
.admin-recovery-table tbody tr:hover {
  background: rgba(185,139,66,.035)
}
.admin-recovery-table td:first-child strong {
  display: block;
  color: #ead9bb;
  font-weight: 500
}
.admin-recovery-meta,
.admin-recovery-table td:first-child small {
  display: block;
  margin-top: 5px;
  color: rgba(232,223,207,.45);
  font-size: 11px
}
.admin-recovery-state {
  display: inline-flex;
  padding: 6px 9px;
  border: 1px solid;
  font-size: 9px;
  letter-spacing: .09em;
  text-transform: uppercase;
  white-space: nowrap
}
.admin-recovery-state.is-entrusted {
  border-color: rgba(205,157,78,.45);
  background: rgba(116,75,25,.16);
  color: #e0bc78
}
.admin-recovery-state.is-authorized {
  border-color: rgba(108,166,112,.42);
  background: rgba(48,104,54,.15);
  color: #a9cfaa
}
.admin-recovery-action {
  text-align: right
}
.admin-recovery-action form {
  margin: 0
}
.admin-recovery-action .button {
  padding: 8px 11px;
  font-size: 10px;
  white-space: nowrap
}
@media(max-width:760px) {
  .admin-recovery-stats {
    grid-template-columns: 1fr
  }
}
.notebook-page.notebook-recovery-active {
  overflow-y: auto!important;
  overflow-x: hidden!important;
  height: auto!important;
  min-height: 100vh!important
}
html.notebook-document body.notebook-page.notebook-recovery-active {
  overflow: visible!important
}
.notebook-page.notebook-recovery-active .notebook-free-panel {
  position: relative!important;
  top: auto!important;
  min-height: 0!important
}
.notebook-seal-gate.has-recovery {
  display: block;
  min-height: 0;
  overflow: visible;
  padding-top: 38px;
  padding-bottom: 38px
}
.notebook-seal-gate.has-recovery .notebook-recovery-panel {
  width: min(520px,100%);
  margin: 0 auto;
  padding-top: 0;
  border-top: 0
}
.notebook-seal-gate.has-recovery .notebook-seal-emblem {
  display: none
}
.notebook-password-wrap {
  position: relative;
  display: block;
  width: 100%
}
.notebook-password-wrap > input {
  width: 100%;
  padding-right: 50px!important
}
.notebook-password-toggle {
  position: absolute;
  top: 50%;
  right: 8px;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  background: 0 0;
  color: #b99047;
  cursor: pointer;
  transform: translateY(-50%);
  transition: color .18s,opacity .18s,transform .18s;
  opacity: .78
}
.notebook-password-toggle:focus-visible,
.notebook-password-toggle:hover {
  color: #efd39c;
  opacity: 1;
  outline: 0
}
.notebook-password-toggle:focus-visible {
  box-shadow: 0 0 0 1px rgba(222,185,112,.38)
}
.notebook-eye-icon {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: opacity .16s,transform .16s
}
.notebook-eye-open {
  display: block
}
.notebook-eye-closed,
.notebook-password-toggle.is-visible .notebook-eye-open {
  display: none
}
.notebook-password-toggle.is-visible .notebook-eye-closed {
  display: block
}
.notebook-password-toggle:hover .notebook-eye-icon {
  transform: scale(1.05)
}

/* Coffre du trésor — accès à la dotation */
.topbar-title-row {
  display: flex;
  align-items: center;
  min-width: 0;
  padding-left: 92px;
}
.topbar-title-row h1 {
  flex: 0 1 auto;
  min-width: 0;
}
.treasure-trigger {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  max-width: 100%;
  padding: 0;
  border: 0;
  color: inherit;
  background: transparent;
  font: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  text-align: left;
  cursor: pointer;
  text-shadow: inherit;
}
.treasure-trigger img {
  position: absolute;
  left: 0;
  top: 50%;
  display: block;
  width: auto;
  height: 60px;
  max-height: 60px;
  object-fit: contain;
  object-position: center;
  transform: translateY(-50%);
  transform-origin: center;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,.76));
  transition: transform .18s ease, filter .18s ease;
}
.treasure-trigger-title {
  min-width: 0;
  background: linear-gradient(180deg,#f3e2b6 0,#dfbd78 38%,#b78338 72%,#8b622b 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: saturate(1.02);
  transition: filter .18s ease, text-shadow .18s ease;
}
.treasure-trigger:hover img,
.treasure-trigger:focus-visible img {
  transform: translateY(-50%) scale(1.06);
  filter: drop-shadow(0 3px 6px rgba(0,0,0,.78)) drop-shadow(0 0 7px rgba(205,157,77,.32));
}
.treasure-trigger:hover .treasure-trigger-title,
.treasure-trigger:focus-visible .treasure-trigger-title {
  filter: saturate(1.08) brightness(1.08);
  text-shadow: 0 1px 0 rgba(255,242,204,.18),0 2px 0 rgba(83,47,12,.54),0 4px 12px rgba(0,0,0,.68);
}
.treasure-trigger:focus-visible {
  outline: 1px solid rgba(215,174,97,.58);
  outline-offset: 5px;
}
.treasure-trigger:active img { transform: translateY(-50%) scale(.98); }
.treasure-trigger .restricted-access {
  -webkit-text-fill-color: #d6ba83;
}
@media (max-width: 900px) {
  .topbar-title-row { padding-left: 66px; }
  .treasure-trigger { gap: 8px; }
  .treasure-trigger img {
    left: 6px;
    width: auto;
    height: 48px;
    max-height: 48px;
  }
}

.treasure-dialog {
  width: min(610px,calc(100vw - 30px));
  max-height: calc(100vh - 30px);
  padding: 34px 42px 32px;
  overflow: auto;
  border: 1px solid rgba(203,157,81,.56);
  color: #e9dfcc;
  background: radial-gradient(circle at 50% 0,rgba(124,82,28,.22),transparent 38%),linear-gradient(145deg,#1d160f,#090807 72%);

  text-align: center;
}

.treasure-close {
  position: absolute;
  right: 15px;
  top: 10px;
  padding: 0;
  border: 0;
  color: rgba(239,229,209,.58);
  background: transparent;
  font-size: 29px;
  line-height: 1;
  cursor: pointer;
}
.treasure-close:hover,.treasure-close:focus-visible { color:#ecd39f; outline:0; }
.treasure-dialog-chest { width: 112px; margin: -5px auto 2px; }
.treasure-dialog-chest img { display:block; width:100%; height:auto; filter:drop-shadow(0 8px 12px rgba(0,0,0,.62)); }
.treasure-kicker { margin: 3px 0 5px; color:#b99055; font-size:9px; letter-spacing:.2em; text-transform:uppercase; }
.treasure-dialog h2 { margin: 4px 0 5px; color:#ead3a3; font:29px Georgia,serif; }
.treasure-intro { margin:0 auto 22px; color:rgba(232,223,207,.7); font:italic 14px/1.55 Georgia,serif; }
.treasure-current {
  padding: 22px 24px;
  border: 1px solid rgba(203,157,81,.32);

}
.treasure-current-label { display:block; margin-bottom:9px; color:#c89c55; font-size:10px; letter-spacing:.18em; text-transform:uppercase; }
.treasure-prize-image {
  display: block;
  width: min(100%, 360px);
  height: auto;
  margin: 2px auto 12px;
  filter: drop-shadow(0 9px 12px rgba(0,0,0,.58)) drop-shadow(0 0 8px rgba(185,139,66,.12));
}
.treasure-current strong { display:block; color:#f0d49c; font:22px/1.25 Georgia,serif; font-weight:400; }
.treasure-current p { margin:12px auto 0; max-width:440px; color:rgba(232,223,207,.7); font:13px/1.55 Georgia,serif; text-align:left; }
.treasure-note { margin:18px auto 0; max-width:470px; color:rgba(232,223,207,.52); font:11px/1.55 Georgia,serif; text-align:left; }

/* Correctif coffre + titre : le dégradé historique appliqué au H1 parent
   entrait en conflit avec le texte cliquable et provoquait un second rendu
   du titre. Le H1 devient un simple conteneur ; le rendu doré reste porté
   uniquement par .treasure-trigger-title. */
.topbar-title-row h1 {
  background: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  -webkit-text-fill-color: initial !important;
  filter: none !important;
  text-shadow: none !important;
}
.topbar-title-row .treasure-trigger {
  line-height: 1;
}
.topbar-title-row .treasure-trigger-title {
  display: inline-block;
  background: linear-gradient(180deg,#f3e2b6 0,#dfbd78 38%,#b78338 72%,#8b622b 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #dfbf7b;
  text-shadow: none;
}

/* Dotation dynamique : valeur actuelle + historique compact dans la fenêtre Le Trésor */
.treasure-current-amount {
  margin-top: 7px;
  color: #d7aa62;
  font: 18px/1.2 Georgia,'Times New Roman',serif;
  letter-spacing: .025em;
}
.treasure-current-amount span {
  color: rgba(232,223,207,.58);
  font-size: .72em;
  letter-spacing: .035em;
}
.treasure-current-date {
  display: block;
  margin-top: 10px;
  color: rgba(232,223,207,.43);
  font: 9px/1.35 Georgia,'Times New Roman',serif;
  letter-spacing: .035em;
}
.treasure-history {
  margin-top: 15px;
  text-align: left;
}
.treasure-history-heading {
  margin: 0 0 7px;
  padding-left: 2px;
  color: rgba(200,156,85,.82);
  font-size: 9px;
  letter-spacing: .17em;
  text-transform: uppercase;
}
.treasure-history-list {
  max-height: 112px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 6px;
  border-top: 1px solid rgba(203,157,81,.18);
  border-bottom: 1px solid rgba(203,157,81,.13);
  scrollbar-width: thin;
  scrollbar-color: rgba(185,139,66,.58) rgba(0,0,0,.18);
}
.treasure-history-item {
  display: grid;
  grid-template-columns: 72px minmax(0,1fr) auto;
  align-items: baseline;
  gap: 10px;
  padding: 7px 4px;
  border-bottom: 1px solid rgba(232,223,207,.07);
  color: rgba(232,223,207,.61);
  font: 10px/1.35 Georgia,'Times New Roman',serif;
}
.treasure-history-item:last-child { border-bottom: 0; }
.treasure-history-item time {
  color: rgba(210,173,112,.58);
  white-space: nowrap;
}
.treasure-history-composition {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.treasure-history-item strong {
  color: rgba(232,211,165,.78);
  font-weight: 400;
  white-space: nowrap;
}
.treasure-history-empty {
  margin: 0;
  padding: 10px 4px;
  color: rgba(232,223,207,.42);
  font: italic 10px/1.4 Georgia,'Times New Roman',serif;
}
.treasure-history-list::-webkit-scrollbar { width: 7px; }
.treasure-history-list::-webkit-scrollbar-track { background: rgba(0,0,0,.16); }
.treasure-history-list::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(185,139,66,.5);
}

/* On garde la hauteur visuelle actuelle en compensant l'ajout de l'historique. */
.treasure-dialog .treasure-intro { margin-bottom: 15px; }
.treasure-dialog .treasure-current { padding-top: 17px; padding-bottom: 17px; }
.treasure-dialog .treasure-note { margin-top: 13px; }

@media (max-width: 640px) {
  .treasure-history-item {
    grid-template-columns: 64px minmax(0,1fr) auto;
    gap: 7px;
  }
}

/* Harmonisation de la fenêtre « Le Trésor » avec les autres écrans d'aide :
   fond du bureau en filigrane, sans modifier les dimensions ni la structure. */
.treasure-dialog {
  background-image:
    radial-gradient(ellipse 70% 46% at 50% 3%, rgba(216,165,80,.20), transparent 68%),
    radial-gradient(ellipse 82% 78% at 50% 46%, rgba(7,6,4,.25), rgba(3,3,2,.68) 88%),
    linear-gradient(180deg, rgba(23,15,8,.26), rgba(5,5,4,.58)),
    var(--echo-image-fond-ecrans, url("images/fond_ecrans.webp"));
  background-size: auto, auto, auto, 200% auto;
  background-position: center, center, center, right center;
  background-repeat: no-repeat;
  box-shadow:
    0 34px 100px rgba(0,0,0,.86),
    0 0 48px var(--gold-08),
    inset 0 0 0 1px rgba(255,229,170,.055),
    inset 0 0 90px var(--shadow-3);
}
.treasure-dialog::backdrop {
  background: radial-gradient(ellipse 56% 58% at 50% 48%,rgba(185,139,66,.07),transparent 72%),rgba(0,0,0,.53);
  backdrop-filter: blur(7px) brightness(.63) saturate(.85);
}
.treasure-dialog[open] {
  outline: rgba(222,181,106,.08) solid 1px;
  outline-offset: -10px;
}

/* Les blocs restent lisibles tout en laissant apparaître le filigrane. */
.treasure-current {
  background: linear-gradient(145deg,rgba(31,22,13,.72),rgba(8,8,7,.80));
  border-color: rgba(203,157,81,.30);
  box-shadow: inset 0 1px rgba(255,229,170,.025),0 12px 28px var(--shadow-18);
  backdrop-filter: blur(2px);
}
.treasure-history-list {
  background: rgba(5,5,4,.18);
}
\n\n/* Détection du code secret de la contremarque dans les hypothèses */\n.hypothesis-admin-card.has-countermark-code {\n  border-color: rgba(220, 169, 76, .86);\n  background: linear-gradient(145deg, rgba(58, 36, 12, .96), rgba(11, 8, 5, .98));\n  box-shadow: 0 0 0 1px rgba(238, 190, 92, .12), inset 4px 0 0 #d7a342, 0 18px 55px rgba(0,0,0,.3)\n}\n.hypothesis-admin-card.has-countermark-code .hypothesis-card-summary {\n  background: linear-gradient(90deg, rgba(208, 151, 55, .09), transparent 62%)\n}\n.hypothesis-countermark-badge {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 7px 10px;\n  border: 1px solid rgba(229, 183, 92, .66);\n  color: #f0cf8c;\n  background: rgba(120, 76, 18, .28);\n  font: 700 .66rem/1 Arial, sans-serif;\n  letter-spacing: .09em;\n  text-transform: uppercase;\n  white-space: nowrap\n}\n.hypothesis-countermark-alert {\n  display: grid;\n  gap: 5px;\n  margin: 22px 0 0;\n  padding: 16px 18px;\n  border: 1px solid rgba(229, 183, 92, .55);\n  background: linear-gradient(90deg, rgba(149, 95, 24, .22), rgba(24, 15, 7, .5));\n  color: #d9c49b\n}\n.hypothesis-countermark-alert strong {\n  color: #f0cc82;\n  font: 700 .78rem/1.2 Arial, sans-serif;\n  letter-spacing: .1em\n}\n.hypothesis-countermark-alert span {\n  font-size: .83rem\n}\n.hypothesis-countermark-alert small {\n  color: #9f927c\n}\n.hypothesis-countermark-solution {\n  display: grid;\n  gap: 7px;\n  margin: 12px 0 0;\n  padding: 14px 18px;\n  border: 1px solid rgba(194,155,84,.2);\n  background: rgba(0,0,0,.2)\n}\n.hypothesis-countermark-solution span {\n  color: #a99a80;\n  font: 700 .66rem/1 Arial,sans-serif;\n  letter-spacing: .09em;\n  text-transform: uppercase\n}\n.hypothesis-countermark-solution strong {\n  color: #f1dfb9;\n  font: 400 1.12rem/1.4 Georgia,serif;\n  overflow-wrap: anywhere\n}\n.hypothesis-filter-countermark {\n  border-color: rgba(215,163,66,.48);\n  color: #d9b76d\n}\n.hypothesis-filter-countermark.is-active,\n.hypothesis-filter-countermark:hover {\n  border-color: #d6a348;\n  background: rgba(137,87,18,.25);\n  color: #f1d08a\n}\n
/* Consentement distinct à l’exécution immédiate du contenu numérique */
.threshold-withdrawal-consent {
  margin-top: 10px;
}
.threshold-withdrawal-consent strong {
  color: inherit;
  font-weight: 600;
}
\n\n/* --- Prise en main physique des cartes -----------------------------------
   La déformation porte sur la face, jamais sur .enigma-card : le JS peut donc
   continuer à gérer librement position et rotation de la carte. */
.board {
  perspective: 1100px;
}

.enigma-card .card-face {
  transform: perspective(850px) translateZ(0) rotateX(0deg) rotateY(0deg);
  transform-origin: 18% 88%;
  transition: transform 90ms cubic-bezier(.22,.75,.28,1),
              box-shadow 90ms ease-out;
  will-change: transform;
}

.enigma-card.card-lifted .card-face {
  transform: perspective(850px) translateY(-4px) translateZ(9px) rotateX(2.8deg) rotateY(-3.8deg);
  box-shadow: 8px 15px 22px rgba(0,0,0,.22);
}

/* Retombée très brève : le son est synchronisé côté JS à ~72 ms. */
.enigma-card.card-landing .card-face {
  transition-duration: 78ms;
  transition-timing-function: cubic-bezier(.28,.02,.62,1);
}

@media (prefers-reduced-motion: reduce) {
  .enigma-card .card-face,
  .enigma-card.card-landing .card-face {
    transition-duration: 1ms;
  }
  .enigma-card.card-lifted .card-face {
    transform: none;
  }
}

/* Bandeau de la contremarque : inscription légère fondue dans le bureau. */
.hunt-start-notice {
  position: absolute;
  z-index: 90;
  top: 37px;
  left: 50%;
  width: min(720px, calc(100% - 220px));
  min-height: 54px;
  transform: translateX(-50%);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 7px 44px 9px;
  color: #bf9958;
  text-align: center;
  pointer-events: none;
  user-select: none;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(5,3,1,.24) 7%,
    rgba(5,3,1,.68) 22%,
    rgba(5,3,1,.78) 50%,
    rgba(5,3,1,.68) 78%,
    rgba(5,3,1,.24) 93%,
    transparent 100%);
  border: 0;
  box-shadow: none;
}
.hunt-start-notice::before { display: none; }
.hunt-start-notice::after {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: 1px;
  height: 1px;
  background: linear-gradient(90deg,
    transparent,
    rgba(191,145,62,.22) 16%,
    rgba(211,161,67,.52) 50%,
    rgba(191,145,62,.22) 84%,
    transparent);
}

.hunt-start-copy {
  position: relative;
  z-index: 2;
}
.hunt-start-copy::before,
.hunt-start-copy::after { display: none; }

.hunt-start-notice p {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(14px, 1.02vw, 17px);
  font-weight: 500;
  line-height: 1.22;
  letter-spacing: .012em;
  color: #c7a064;
  white-space: nowrap;
  text-shadow:
    0 1px 1px rgba(0,0,0,1),
    0 0 5px rgba(0,0,0,.98),
    0 0 11px rgba(0,0,0,.72);
}
.hunt-start-notice p + p {
  margin-top: 2px;
  color: #cfa96b;
  font-size: clamp(15px, 1.08vw, 18px);
}
.hunt-start-notice sup {
  position: relative;
  top: -.08em;
  font-size: .62em;
  line-height: 0;
}
.hunt-start-side {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: #b78b3f;
  font-size: 13px;
  line-height: 1;
  opacity: .82;
  text-shadow:
    0 0 4px rgba(0,0,0,1),
    0 0 8px rgba(185,139,57,.22);
}
.hunt-start-side::before,
.hunt-start-side::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 12px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(184,132,44,.38));
}
.hunt-start-side-left { left: 24px; }
.hunt-start-side-left::before { right: 12px; transform: scaleX(-1); }
.hunt-start-side-left::after { left: 12px; }
.hunt-start-side-right { right: 24px; }
.hunt-start-side-right::before { right: 12px; transform: scaleX(-1); }
.hunt-start-side-right::after { left: 12px; }

@media (max-width: 900px) {
  .hunt-start-notice {
    width: calc(100% - 48px);
    min-height: 50px;
    top: 10px;
    padding: 7px 34px 9px;
  }
  .hunt-start-notice p { font-size: 14px; }
  .hunt-start-notice p + p { font-size: 15px; }
}

@media (max-width: 600px) {
  .hunt-start-notice {
    width: calc(100% - 16px);
    min-height: 0;
    top: 8px;
    gap: 0;
    padding: 8px 20px 10px;
    background: linear-gradient(90deg,
      transparent 0%, rgba(5,3,1,.60) 10%, rgba(5,3,1,.78) 50%, rgba(5,3,1,.60) 90%, transparent 100%);
  }
  .hunt-start-notice::after { left: 8%; right: 8%; }
  .hunt-start-notice p,
  .hunt-start-notice p + p {
    font-size: 12px;
    line-height: 1.2;
    white-space: normal;
  }
  .hunt-start-notice p + p { margin-top: 3px; }
  .hunt-start-side { font-size: 9px; }
  .hunt-start-side-left { left: 8px; }
  .hunt-start-side-right { right: 8px; }
  .hunt-start-side::before,
  .hunt-start-side::after { display: none; }
}

/* Alerte critique : code de la contremarque détecté */
.hypothesis-countermark-alert {
  border: 2px solid #ff2020;
  background: rgba(170, 0, 0, .30);
  box-shadow: 0 0 0 1px rgba(255, 32, 32, .18), 0 0 22px rgba(255, 0, 0, .16);
  color: #ff6b6b;
}
.hypothesis-countermark-alert strong {
  color: #ff3030;
  text-shadow: 0 0 10px rgba(255, 0, 0, .30);
}
.hypothesis-countermark-alert span {
  color: #ff6b6b;
}
.hypothesis-countermark-alert small {
  color: #ff8a8a;
}

/* ==========================================================================
   CLÉ DU BUREAU
   Objet librement déplaçable, volontairement sans indication d'usage.
   ========================================================================== */
.desk-key {
  position: absolute !important;
  left: auto;
  right: 32%;
  top: 270px;
  /* Toujours sous les cartes du bureau (celles-ci sont au minimum à z-index:1). */
  z-index: 0 !important;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
  pointer-events: auto;
  width: 160px;
  max-width: 32%;
}

.desk-key img {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
  /* Posée sur le bureau, la clé se fond volontairement dans le décor. */
  opacity: .78;
  filter:
    drop-shadow(2px 3px 2px rgba(0, 0, 0, .95))
    drop-shadow(3px 5px 4px rgba(0, 0, 0, .55));
  transform: scaleY(.75);
  transform-origin: center center;
  transition: opacity .14s ease, filter .14s ease, transform .18s ease;
}

.desk-key:hover img {
  opacity: .82;
  filter: drop-shadow(0 9px 9px rgba(0,0,0,.62));
}

.desk-key.is-dragging {
  cursor: grabbing;
  /* En main, la clé passe temporairement au-dessus des cartes et des paquets. */

}

.desk-key.is-dragging img {
  /* En main : la clé retrouve toute son opacité. */
  opacity: 1;
  filter: drop-shadow(0 12px 12px rgba(0,0,0,.68));

}

/* ==========================================================================
   PIÈCES JOINTES DES ÉCHOS
   ========================================================================== */
.echo-attachment-field {
  margin-top: 14px;
  padding: 14px 16px;
  border: 1px solid rgba(184, 128, 36, .32);
  background: rgba(0, 0, 0, .16);
}
.echo-attachment-field label {
  display: block;
  margin-bottom: 9px;
}
.echo-attachment-field label span,
.echo-attachment-field small {
  color: rgba(218, 194, 157, .62);
  font-size: 12px;
  font-weight: 400;
}
.echo-attachment-field input[type="file"] {
  display: block;
  width: 100%;
  margin-bottom: 8px;
  color: rgba(232, 211, 177, .82);
}
.echo-attachment-link,
.admin-attachment-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding: 8px 11px;
  border: 1px solid rgba(184, 128, 36, .35);
  color: #d9aa56;
  text-decoration: none;
  background: rgba(0, 0, 0, .18);
}
.echo-attachment-link:hover,
.admin-attachment-link:hover {
  border-color: rgba(218, 169, 83, .72);
  color: #f0c777;
}
.echo-attachment-link small,
.admin-attachment-link small {
  color: rgba(218, 194, 157, .58);
}

/* ==========================================================================
   CORRESPONDANCE PRIVÉE — réponse / accusé de lecture
   ========================================================================== */
.private-original-message {
  margin: 16px 0 0;
  padding: 17px 18px;
  border: 1px solid rgba(185,139,66,.28);
  background: rgba(0,0,0,.18);
  color: rgba(238,225,203,.92);
  font-size: 14px;
  line-height: 1.65;
}
.private-response-form {
  margin-top: 16px;
}
.private-response-label,
.private-reply-kicker {
  display: block;
  margin-bottom: 8px;
  color: rgba(210,173,112,.9);
  font-size: 9px;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.private-response-form textarea {
  min-height: 112px;
}
.private-read-button span,
.private-read-eye {
  display: inline-block;
  filter: grayscale(1) sepia(.8) saturate(.7);
}
.private-read-eye {
  font-size: 20px;
}
.private-organizer-reply {
  margin-top: 17px;
  padding: 15px 17px;
  border-left: 2px solid rgba(210,173,112,.78);
  background: linear-gradient(90deg,rgba(185,139,66,.10),rgba(0,0,0,.10));
}
.private-organizer-reply p {
  margin: 8px 0 7px;
}
.private-organizer-reply small {
  color: rgba(210,173,112,.58);
  font-size: 10px;
}
.private-read-receipt {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 15px;
  padding: 6px 10px;
  border: 1px solid rgba(185,139,66,.26);
  color: rgba(210,173,112,.78);
  background: rgba(0,0,0,.14);
  font-size: 14px;
  letter-spacing: .06em;
}
.private-admin-outcome {
  margin-top: 15px;
  padding: 12px 14px;
  border: 1px solid rgba(185,139,66,.24);
  background: rgba(0,0,0,.14);
}
.private-admin-reply > span:first-child {
  display: block;
  margin-bottom: 7px;
  color: rgba(210,173,112,.78);
  font-size: 9px;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.private-admin-reply p {
  margin: 0;
  line-height: 1.6;
}
.private-admin-read {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgba(210,173,112,.76);
}

/* Pas de guillemet décoratif sur les conversations privées */
.private-echo-card::before,
.private-echo-card::after {
    content: none !important;
    display: none !important;
}

/* ==========================================================================
   CLÉ -> COFFRE : ÉTAPE 1
   La clé sort du bureau pendant le drag et change d'échelle à l'approche.
   ========================================================================== */
.desk-key.is-dragging {
  z-index: 2147483000 !important;
  max-width: none !important;
  margin: 0 !important;
  transform-origin: center center;
  transform: scale(1);
  transition: transform .06s linear;
}

.desk-key.is-dragging img {
  transform: rotate(-14deg) scaleY(1);
}

.desk-key.is-near-treasure img {
  /* Très près de la serrure, la clé fait un demi-tour : le penne se présente
     côté serrure et la tête reste à l'opposé. */
  transform: rotate(166deg) scaleY(-1);
  filter:
    drop-shadow(0 7px 7px rgba(0,0,0,.72))
    drop-shadow(0 0 7px rgba(207,158,78,.16));
}

/* Correction étape 1 : pendant le drag libre la clé vit sous <body>.
   Le !important est nécessaire car .desk-key est normalement absolute !important. */
body > .desk-key.is-free-dragging {
  position: fixed !important;
  z-index: 2147483000 !important;
  max-width: none !important;
  right: auto !important;
  margin: 0 !important;
  pointer-events: auto;
}

/* ==========================================================================
   CLÉ -> COFFRE : ÉTAPE 2
   Aimantation du bout de la clé vers la serrure.
   ========================================================================== */
body > .desk-key.is-magnetizing {
  position: fixed !important;
  z-index: 2147483000 !important;
  max-width: none !important;
  right: auto !important;
  margin: 0 !important;
  pointer-events: none !important;
  transform-origin: center center;
  transform: scale(1);
  transition:
    left .26s cubic-bezier(.18,.78,.22,1),
    top .26s cubic-bezier(.18,.78,.22,1),
    transform .26s cubic-bezier(.18,.78,.22,1);
}

body > .desk-key.is-magnetizing img {
  opacity: 1;
  transform: rotate(calc(var(--key-insert-angle, -14deg) + 180deg)) scaleY(-1);
  filter:
    drop-shadow(0 5px 6px rgba(0,0,0,.72))
    drop-shadow(0 0 6px rgba(215,171,91,.18));
  transition: transform .26s cubic-bezier(.18,.78,.22,1);
}

body > .desk-key.is-in-lock {
  position: fixed !important;
  z-index: 2147483000 !important;
  max-width: none !important;
  right: auto !important;
  margin: 0 !important;
  pointer-events: none !important;
  transform-origin: center center;
  transform: scale(1);
}

body > .desk-key.is-in-lock img {
  opacity: 1;
  transform: rotate(calc(var(--key-insert-angle, -14deg) + 180deg)) scaleY(-1);
  filter:
    drop-shadow(0 2px 3px rgba(0,0,0,.78))
    drop-shadow(0 0 4px rgba(215,171,91,.14));
}

/* ==========================================================================
   CLÉ -> COFFRE : SWAP FINAL
   Après l'aimantation, la clé séparée disparaît et le coffre passe à
   images/coffre_cle.webp, qui contient déjà la clé dans la serrure.
   ========================================================================== */
body > .desk-key.is-swapped-into-chest {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: opacity .08s linear, visibility 0s linear .08s;
}

/* ==========================================================================
   GRADE — SCEAU DES PRÉCURSEURS
   ========================================================================== */
.user-grade-badge {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  margin-right: 1px;
  border-radius: 50%;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.72));
  pointer-events: auto;
}
.user-grade-badge img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.echo-author {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.echo-author-grade {
  width: 35px;
  height: 35px;
  flex: 0 0 35px;
  object-fit: contain;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.62));
}

.echo-author-seals {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
}
.echo-author-seal-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 39px;
  height: 39px;
  padding: 2px;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
}
.echo-author-seal-button .echo-author-grade {
  pointer-events: none;
}
.echo-seal-count {
  position: absolute;
  right: -4px;
  bottom: -1px;
  min-width: 15px;
  height: 15px;
  padding: 0 4px;
  border: 1px solid rgba(202,158,83,.58);
  border-radius: 999px;
  background: rgba(18,13,8,.94);
  color: rgba(232,209,167,.94);
  font: 10px/13px Georgia,'Times New Roman',serif;
  text-align: center;
  box-shadow: 0 1px 4px rgba(0,0,0,.58);
  pointer-events: none;
}
.echo-seal-collection {
  position: absolute;
  z-index: 80;
  left: 0;
  top: calc(100% + 7px);
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 60px;
  padding: 5px 8px;
  border: 1px solid rgba(190,145,72,.48);
  border-radius: 2px;
  background: linear-gradient(180deg, rgba(31,23,15,.97), rgba(13,11,8,.98));
  box-shadow: 0 9px 20px rgba(0,0,0,.48), inset 0 0 0 1px rgba(231,193,125,.04);
  white-space: nowrap;
}
.echo-seal-collection[hidden] { display: none; }
.echo-seal-collection img {
  display: block;
  width: 50px;
  height: 50px;
  object-fit: contain;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.58));
}
.echo-author-seal-button:hover .echo-author-grade,
.echo-author-seal-button:focus-visible .echo-author-grade {
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.7)) brightness(1.08);
}
.echo-author-seal-button:focus-visible {
  outline: 1px solid rgba(214,173,99,.72);
  outline-offset: 2px;
}
@media (max-width: 640px) {
  .echo-seal-collection {
    min-height: 56px;
    gap: 5px;
    padding: 4px 6px;
  }
  .echo-seal-collection img {
    width: 46px;
    height: 46px;
  }
}

/* ==========================================================================
   SECRET DÉCOUVERT — SCEAU DES PRÉCURSEURS
   ========================================================================== */
.precursor-seal-dialog {
  width: min(480px, calc(100vw - 30px));
  padding: 0;
  border: 1px solid rgba(198,146,61,.66);
  border-radius: 3px;
  color: #dfc795;
  background:
    radial-gradient(circle at 50% 35%,rgba(183,126,37,.12),transparent 42%),
    linear-gradient(155deg,rgba(26,18,10,.995),rgba(5,6,6,.997));
  box-shadow:
    0 32px 100px rgba(0,0,0,.88),
    inset 0 0 0 1px rgba(255,224,162,.045),
    0 0 34px rgba(180,126,43,.12);
}
.precursor-seal-dialog::backdrop {
  background: rgba(0,0,0,.64);
  backdrop-filter: blur(2px);
}
.precursor-seal-inner {
  position: relative;
  overflow: hidden;
  padding: 30px 34px 28px;
  text-align: center;
}
.precursor-seal-inner::before {
  content: '';
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(198,146,61,.18);
  pointer-events: none;
}
.precursor-seal-kicker {
  position: relative;
  z-index: 2;
  margin: 0 0 18px;
  color: #d6a95d;
  font: 400 19px/1.1 Georgia,'Times New Roman',serif;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.precursor-seal-close {
  position: absolute;
  z-index: 4;
  top: 9px;
  right: 11px;
  border: 0;
  color: rgba(222,188,124,.72);
  background: transparent;
  cursor: pointer;
  font-size: 18px;
}
.precursor-seal-image {
  position: relative;
  z-index: 2;
  display: block;
  width: 172px;
  max-width: 55%;
  margin: 0 auto 18px;
  object-fit: contain;
  filter:
    drop-shadow(0 0 10px rgba(219,161,59,.34))
    drop-shadow(0 0 24px rgba(219,161,59,.20));
}
.precursor-seal-rays {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 46%;
  width: 250px;
  height: 250px;
  transform: translate(-50%,-50%);
  background: radial-gradient(circle,rgba(222,165,62,.20),rgba(222,165,62,.06) 34%,transparent 68%);
  pointer-events: none;
}
.precursor-seal-inner > p:not(.precursor-seal-kicker) {
  position: relative;
  z-index: 2;
  margin: 4px 0;
  color: rgba(233,216,185,.84);
  font: 15px/1.45 Georgia,'Times New Roman',serif;
}
.precursor-seal-inner h2 {
  position: relative;
  z-index: 2;
  margin: 5px 0;
  color: #d9a650;
  font: 400 23px/1.15 Georgia,'Times New Roman',serif;
}


/* Cinquième sceau : annonce immédiate de la récompense physique. */
.seal-award-physical-notice {
  position: relative;
  z-index: 2;
  margin: 16px 0 4px;
  padding: 13px 15px 14px;
  border: 1px solid rgba(198,146,61,.34);
  background: rgba(13,10,7,.52);
  box-shadow: inset 0 0 18px rgba(198,146,61,.06);
}
.seal-award-physical-notice[hidden] { display: none !important; }
.precursor-seal-inner .seal-award-physical-notice p {
  margin: 3px 0 7px;
  color: rgba(239,222,192,.9);
  font: 14px/1.42 Georgia,'Times New Roman',serif;
}
.precursor-seal-inner .seal-award-physical-notice p strong {
  color: #d9a650;
  font-weight: 400;
}
.seal-award-physical-button {
  margin-top: 7px;
}
.precursor-seal-ornament {
  position: relative;
  z-index: 2;
  margin: 18px 0 13px;
  color: rgba(201,150,65,.72);
  font-size: 10px;
}
.precursor-seal-continue {
  position: relative;
  z-index: 2;
  min-width: 145px;
}

@media (max-width: 600px) {
  .user-grade-badge {
    width: 24px;
    height: 24px;
    flex-basis: 24px;
  }
  .precursor-seal-inner {
    padding: 26px 22px 24px;
  }
  .precursor-seal-image {
    width: 145px;
  }
}

/* ==========================================================================
   SCEAU DEVANT LE PSEUDO — CLIQUABLE
   ========================================================================== */
button.user-grade-badge {
  padding: 0;
  border: 0;
  background: transparent;
  appearance: none;
  cursor: pointer;
  transition: transform .16s ease, filter .16s ease;
}
button.user-grade-badge:hover,
button.user-grade-badge:focus-visible {
  transform: scale(1.12);
  filter:
    drop-shadow(0 2px 4px rgba(0,0,0,.72))
    drop-shadow(0 0 7px rgba(210,160,75,.34));
}
button.user-grade-badge:focus-visible {
  outline: 1px solid rgba(220,177,98,.72);
  outline-offset: 3px;
}

/* ==========================================================================
   APERÇU GRAND FORMAT DU GRADE
   ========================================================================== */
.grade-seal-dialog {
  width: min(390px, calc(100vw - 30px));
  padding: 0;
  border: 1px solid rgba(198,146,61,.62);
  border-radius: 3px;
  color: #dfc795;
  background:
    radial-gradient(circle at 50% 45%, rgba(184,130,43,.14), transparent 48%),
    linear-gradient(155deg, rgba(26,18,10,.995), rgba(5,6,6,.997));
  box-shadow:
    0 30px 95px rgba(0,0,0,.88),
    inset 0 0 0 1px rgba(255,224,162,.045);
}
.grade-seal-dialog::backdrop {
  background: rgba(0,0,0,.62);
  backdrop-filter: blur(2px);
}
.grade-seal-inner {
  position: relative;
  padding: 32px 32px 28px;
  text-align: center;
}
.grade-seal-inner::before {
  content: '';
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(198,146,61,.18);
  pointer-events: none;
}
.grade-seal-image {
  position: relative;
  display: block;
  width: 280px;
  max-width: 78%;
  margin: 4px auto 18px;
  object-fit: contain;
  filter:
    drop-shadow(0 0 12px rgba(218,160,56,.26))
    drop-shadow(0 0 30px rgba(218,160,56,.12));
}
.grade-seal-inner h2 {
  position: relative;
  margin: 0;
  color: #d7a657;
  font: 400 24px/1.2 Georgia,'Times New Roman',serif;
}
.grade-seal-inner p {
  position: relative;
  margin: 8px 0 0;
  color: rgba(222,207,178,.64);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
}

@media (max-width: 600px) {
  .grade-seal-image {
    width: 230px;
  }
}

/* ==========================================================================
   CARNET — PARTAGE VOLONTAIRE AVEC L'ORGANISATEUR
   ========================================================================== */
.notebook-read-access-choice {
  margin-top: 10px;
}
.notebook-sharing-control {
  margin: 18px 0 0;
  padding: 17px 18px;
  border: 1px solid rgba(185,139,66,.28);
  background:
    linear-gradient(135deg,rgba(83,57,26,.13),rgba(8,8,7,.2)),
    rgba(7,7,6,.28);
}
.notebook-sharing-copy h3 {
  margin: 3px 0 7px;
  color: #dec28d;
  font: 400 20px/1.2 Georgia,'Times New Roman',serif;
}
.notebook-sharing-copy > p:last-child {
  margin: 0;
  color: rgba(215,198,168,.7);
  font-size: 12px;
  line-height: 1.55;
}
.notebook-sharing-toggle {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 14px;
  padding: 13px 14px;
  border: 1px solid rgba(185,139,66,.2);
  background: rgba(0,0,0,.16);
  cursor: pointer;
}
.notebook-sharing-toggle input {
  width: 16px;
  height: 16px;
  margin-top: 2px;
  accent-color: #b8873e;
}
.notebook-sharing-toggle span {
  display: grid;
  gap: 4px;
}
.notebook-sharing-toggle strong {
  color: #dfc391;
  font-size: 13px;
  font-weight: 400;
}
.notebook-sharing-toggle small {
  color: rgba(205,190,164,.58);
  font-size: 10px;
  line-height: 1.45;
}
.notebook-sharing-state {
  min-height: 15px;
  margin: 8px 0 0;
  color: rgba(209,170,102,.78);
  font-size: 9px;
  letter-spacing: .08em;
  text-align: right;
  text-transform: uppercase;
}
.notebook-sharing-state.is-error {
  color: #ce8d76;
}

/* ==========================================================================
   ADMIN — CARNETS PARTAGÉS
   ========================================================================== */
.admin-shared-notebooks-shell {
  max-width: 1320px;
}
.admin-shared-layout {
  display: grid;
  grid-template-columns: minmax(260px,320px) minmax(0,1fr);
  gap: 18px;
  align-items: start;
}
.admin-shared-list-panel,
.admin-shared-reader {
  min-width: 0;
}
.admin-shared-list {
  display: grid;
  gap: 8px;
  margin-top: 16px;
}
.admin-shared-list a {
  display: grid;
  gap: 5px;
  padding: 13px 14px;
  border: 1px solid rgba(185,139,66,.22);
  color: #dfc391;
  background: rgba(0,0,0,.14);
  text-decoration: none;
}
.admin-shared-list a:hover,
.admin-shared-list a.is-current {
  border-color: rgba(210,164,84,.58);
  background: linear-gradient(90deg,rgba(102,67,26,.22),rgba(0,0,0,.12));
}
.admin-shared-list a strong {
  font-weight: 400;
}
.admin-shared-list a small {
  color: rgba(202,187,160,.56);
  font-size: 9px;
}
.admin-shared-placeholder {
  padding: 50px 20px;
  text-align: center;
}
.admin-shared-placeholder h2 {
  color: #dfc391;
  font-weight: 400;
}
.admin-shared-reader-title > div > p:last-child {
  margin: 5px 0 0;
  color: rgba(205,190,164,.58);
  font-size: 11px;
}
.admin-readonly-badge {
  padding: 7px 10px;
  border: 1px solid rgba(185,139,66,.34);
  color: rgba(218,181,117,.82);
  font-size: 9px;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.admin-shared-section {
  margin-top: 18px;
  padding: 18px 20px;
  border: 1px solid rgba(185,139,66,.22);
  background: rgba(0,0,0,.13);
}
.admin-shared-section header {
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(185,139,66,.16);
}
.admin-shared-section h3 {
  margin: 2px 0 0;
  color: #dfc391;
  font: 400 23px/1.2 Georgia,'Times New Roman',serif;
}
.admin-shared-note-text {
  color: rgba(232,222,204,.88);
  font: 14px/1.72 Georgia,'Times New Roman',serif;
  white-space: normal;
  overflow-wrap: anywhere;
}
.admin-shared-empty-note {
  color: rgba(205,190,164,.48);
  font-style: italic;
}
.admin-shared-card-notes {
  display: grid;
  gap: 12px;
}
.admin-shared-card-note {
  padding: 14px 15px;
  border-left: 2px solid rgba(185,139,66,.5);
  background: rgba(0,0,0,.14);
}
.admin-shared-card-note-heading {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
.admin-shared-card-note-heading strong {
  color: #ddbd82;
  font-weight: 400;
}
.admin-shared-card-note-heading span {
  color: rgba(207,168,100,.68);
  font-size: 9px;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.admin-shared-card-note > small {
  display: block;
  margin-top: 9px;
  color: rgba(196,181,154,.45);
  font-size: 9px;
}

@media (max-width: 860px) {
  .admin-shared-layout {
    grid-template-columns: 1fr;
  }
  .admin-shared-list {
    grid-template-columns: repeat(auto-fit,minmax(190px,1fr));
  }
}

/* Demande de récupération du sceau depuis le carnet verrouillé */
.notebook-forgot-seal {
  display: block;
  margin: 14px auto 0;
  padding: 3px 6px;
  border: 0;
  border-bottom: 1px solid rgba(203,158,83,.34);
  color: #c9a766;
  background: transparent;
  font: italic 12px Georgia,serif;
  cursor: pointer;
  transition: color .18s,border-color .18s,opacity .18s
}
.notebook-forgot-seal:hover:not(:disabled) {
  color: #efd39c;
  border-bottom-color: rgba(239,211,156,.68)
}
.notebook-forgot-seal:disabled {
  opacity: .58;
  cursor: default
}
.notebook-recovery-request-state {
  display: block;
  max-width: 360px;
  margin: 8px auto 0;
  color: rgba(230,217,193,.5);
  font: italic 11px/1.45 Georgia,serif
}
.admin-recovery-state.is-requested {
  border-color: rgba(215,154,63,.7);
  background: rgba(151,85,18,.2);
  color: #f0bd68
}
.admin-recovery-table tr.is-requested {
  background: rgba(183,105,25,.07)
}

/* Compteurs : marron/doré = déjà consulté ; rouge = nouveaux enregistrements. */
.top-admin-menu-panel a .top-admin-badge {
  width: auto;
  min-width: 20px;
  height: 20px;
  margin-left: auto;
  padding: 0 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(215,151,74,.7);
  border-radius: 999px;
  background: #352519;
  color: #ffe0a0;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0;
  text-align: center;
  box-shadow: none;
}
.top-admin-summary-badge {
  min-width: 21px;
  height: 21px;
  padding: 0 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(225,164,82,.72);
  border-radius: 999px;
  background: #352519;
  color: #ffe0a0;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0;
  box-shadow: none;
}
.top-admin-menu-panel a .top-admin-badge.is-new {
  background: #8d2721;
  border-color: #df8c6a;
  color: #ffe4ad;
  box-shadow: 0 0 8px rgba(126,28,22,.25);
}
.top-admin-new-marker {
  display: inline-block; width: 8px; height: 8px; flex: 0 0 8px;
  border-radius: 50%; background: #c64b3e;
}
.top-admin-new-marker[hidden] { display: none; }


/* Administration · Soutiens */
.admin-support-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin: 22px 0 28px;
}
.admin-support-stat {
  padding: 20px 22px;
  border: 1px solid rgba(185,139,66,.17);
  background: rgba(0,0,0,.10);
}
.admin-support-stat span {
  display: block;
  margin-bottom: 8px;
  color: rgba(232,223,207,.5);
  font-size: 9px;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.admin-support-stat strong {
  color: #ead9bb;
  font-size: 24px;
  font-weight: 500;
}
.admin-support-table td:last-child strong { color: #ead9bb; font-weight: 600; }
@media (max-width: 640px) {
  .admin-support-summary { grid-template-columns: 1fr; }
}

/* Réponses prédéfinies aux hypothèses */
.hypothesis-template-picker select,
.response-template-card input,
.response-template-card textarea {
  width: 100%; box-sizing: border-box; border: 1px solid rgba(196,156,84,.35); border-radius: 3px;
  padding: 12px 14px; color: #eee2c8; background: rgba(10,7,4,.68); font: inherit; outline: 0
}
.hypothesis-template-picker select:focus,
.response-template-card input:focus,
.response-template-card textarea:focus { border-color: rgba(222,185,112,.8); box-shadow: 0 0 0 3px rgba(183,135,58,.12) }
.hypothesis-template-picker small { color: #887e6c; font-weight: 400; line-height: 1.45 }
.response-template-list { display: grid; gap: 16px }
.response-template-card { display: grid; gap: 15px; padding: 20px; border: 1px solid rgba(197,158,88,.28); background: linear-gradient(145deg,rgba(31,22,14,.9),rgba(8,7,6,.95)) }
.response-template-card > label, .response-template-meta label { display: grid; gap: 8px; color: #d7c7a5; font-weight: 700 }
.response-template-card textarea { resize: vertical }
.response-template-meta { display: grid; grid-template-columns: minmax(240px,1fr) 110px auto; gap: 14px; align-items: end }
.response-template-active { display: flex!important; grid-template-columns: none!important; align-items: center; gap: 8px!important; min-height: 45px }
.response-template-active input { width: auto; accent-color: #b58a3d }
.response-template-new { border-style: dashed; border-color: rgba(205,166,95,.48) }
@media (max-width: 760px) { .response-template-meta { grid-template-columns: 1fr } }

/* Réactions silencieuses aux Échos publics */
.echo-reactions {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid rgba(185,139,66,.22)
}
.echo-reaction {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 58px;
  height: 35px;
  padding: 3px 6px 3px 6px;
  border: 1px solid transparent;
  border-radius: 23px;
  background: transparent;
  color: rgba(233,205,150,.88);
  cursor: pointer;
  transition: background .18s ease,border-color .18s ease,color .18s ease,transform .18s ease,box-shadow .18s ease
}
.echo-reaction img {
  width: 30px;
  height: 30px;
  object-fit: contain;
  opacity: .72;
  filter: saturate(.72) brightness(.82) drop-shadow(0 1px 3px rgba(0,0,0,.65));
  transition: opacity .18s ease,filter .18s ease,transform .18s ease
}
.echo-reaction-count {
  min-width: 10px;
  font: 13px/1 Georgia,serif;
  font-variant-numeric: tabular-nums;
  color: rgba(233,205,150,.9)
}
.echo-reaction:hover:not(:disabled),
.echo-reaction.is-active {
  border-color: rgba(205,158,72,.58);
  background: rgba(185,139,66,.11);
  color: #f1d79f;
  box-shadow: inset 0 0 14px rgba(185,139,66,.09),0 0 10px rgba(185,139,66,.06)
}
.echo-reaction:hover:not(:disabled) img,
.echo-reaction.is-active img {
  opacity: 1;
  filter: saturate(1.08) brightness(1.22) drop-shadow(0 1px 4px rgba(0,0,0,.8));
  transform: translateY(-1px) scale(1.06)
}
.echo-reaction.is-active {
  box-shadow: inset 0 0 16px rgba(185,139,66,.12),0 0 10px rgba(185,139,66,.08)
}
.echo-reaction.is-loading { opacity: .5; pointer-events: none }

/* Sur son propre Écho les réactions restent visibles, mais non cliquables. */
.echo-reaction:disabled {
  cursor: default;
  opacity: .78
}
.echo-reaction:disabled img {
  opacity: .72;
  filter: saturate(.72) brightness(.82) drop-shadow(0 1px 3px rgba(0,0,0,.65))
}
@media (max-width: 620px) {
  .echo-reactions { gap: 7px; flex-wrap: wrap }
  .echo-reaction { min-width: 50px; height: 40px; padding-right: 7px }
  .echo-reaction img { width: 32px; height: 32px }
  .echo-reaction-count { font-size: 12px }
}

/* Consentements du paiement : blocs cadrés à gauche */
.threshold-checkout-form .threshold-legal-consent {
  width: min(100%, 700px);
  justify-content: flex-start;
  gap: 10px;
  text-align: left;
}
.threshold-checkout-form .threshold-legal-consent input[type="checkbox"] {
  flex: 0 0 auto;
  margin-top: 2px;
}
.threshold-checkout-form .threshold-legal-consent > span {
  flex: 1 1 auto;
  min-width: 0;
  text-align: left;
}

/* ===== Mode Indices isolé du bureau ===== */
.clue-mode-shade {
  position: absolute;
  inset: 0;
  z-index: 1450;
  background: rgba(3, 7, 10, .78);
  backdrop-filter: blur(1.2px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .22s ease, visibility .22s ease;
}
.clue-mode-header {
  position: absolute;
  left: 50%;
  top: 24px;
  transform: translateX(-50%);
  z-index: 1800;
  display: flex;
  align-items: center;
  gap: 18px;
  color: #d7b878;
  font-family: Georgia, serif;
  font-size: 15px;
  letter-spacing: .18em;
  text-transform: uppercase;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .22s ease, visibility .22s ease;
}
.clue-mode-header button {
  width: 32px;
  height: 32px;
  border: 1px solid rgba(215,184,120,.55);
  border-radius: 50%;
  background: rgba(5,10,13,.72);
  color: #d7b878;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
body.clue-mode-open .clue-mode-shade,
body.clue-mode-open .clue-mode-header {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
body:not(.clue-mode-open) .enigma-card.clue {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
body.clue-mode-open .enigma-card.clue {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;

}
body.clue-mode-open .pile-shelve,
body.clue-mode-open .desk-key,
body.clue-mode-open .researcher-signature {
  filter: brightness(.28);
  pointer-events: none;
}
.clue-pile-shelve { display: none !important; }
.clue-new-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  position: relative;
  top: -14px;
  padding: 3px 7px;
  border: 1px solid rgba(215,184,120,.7);
  border-radius: 999px;
  background: rgba(126,31,20,.92);
  color: #f3dfb4;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .12em;
  box-shadow: 0 0 12px rgba(215,184,120,.16);
}
.clue-new-badge[hidden] { display: none !important; }

/* Correctif mode Indices : les cartes d'indice doivent toujours rester au-dessus du voile.
   !important est volontaire ici : applyLayout() attribue un z-index inline aux cartes. */
/* Pendant l'écran des indices, toutes les cartes du bureau (y compris un éventail
   déjà ouvert à z-index 50000+) passent sous le voile. Leur z-index inline est
   conservé et redevient effectif automatiquement à la fermeture du mode Indices. */
body.clue-mode-open .enigma-card:not(.clue) {
  z-index: 1400 !important;
  pointer-events: none !important;
}

body.clue-mode-open .enigma-card.clue {
  z-index: 1700 !important;
  filter: none !important;
}
body.clue-mode-open .enigma-card.clue.dragging,
body.clue-mode-open .enigma-card.clue.fan-card-held {
  z-index: 1750 !important;
}
body.clue-mode-open .clue-mode-header {
  z-index: 1800 !important;
}

/* Paquets rangés dans le menu gauche : signaler clairement qu'ils sont cliquables. */
.shelf-game.stored,
.shelf-game.stored * {
  cursor: pointer !important;
}

/* Menu gauche : les tuiles des jeux sont des boutons cliquables dans tous leurs états. */
.game-shelf .shelf-game,
.game-shelf .shelf-game * {
  cursor: pointer !important;
}

/* Collection de sceaux et choix du sceau porté devant le pseudo */
.grade-seal-choice-label {
  margin-top: 18px !important;
  color: rgba(222,207,178,.72) !important;
}
.grade-seal-collection {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 8px;
  margin-top: 13px;
}
.grade-seal-choice,
.grade-seal-empty {
  box-sizing: border-box;
  width: 68px;
  min-height: 86px;
}
.grade-seal-choice {
  padding: 7px 4px 6px;
  border: 1px solid rgba(198,146,61,.26);
  background: rgba(0,0,0,.18);
  color: #d7a657;
  cursor: pointer;
  font: 11px/1.2 Georgia,'Times New Roman',serif;
  transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
.grade-seal-choice:hover,
.grade-seal-choice:focus-visible {
  border-color: rgba(218,171,91,.62);
  background: rgba(198,146,61,.08);
  transform: translateY(-1px);
}
.grade-seal-choice.is-selected {
  border-color: rgba(218,171,91,.88);
  box-shadow: inset 0 0 0 1px rgba(218,171,91,.18), 0 0 12px rgba(198,146,61,.10);
}
.grade-seal-choice img {
  display: block;
  width: 50px;
  height: 50px;
  margin: 0 auto 6px;
  object-fit: contain;
}
.grade-seal-choice span { display: block; }

.grade-seal-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(198,146,61,.14);
  background: rgba(0,0,0,.10);
  pointer-events: none;
}
.grade-seal-empty-mark {
  display: block;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(198,146,61,.13);
  border-radius: 50%;
  box-shadow: inset 0 0 12px rgba(0,0,0,.30);
  opacity: .72;
}

.grade-seal-choice-status {
  min-height: 16px;
  margin-top: 9px !important;
  color: rgba(218,171,91,.86) !important;
  letter-spacing: .05em !important;
  text-transform: none !important;
}

/* Mode Indices : conserver le même repère visuel que sur le bureau.
   La flèche au-dessus du paquet permet de distinguer immédiatement le paquet
   des cartes d'indice qui en ont été sorties. Elle est ici purement indicative :
   la fermeture du mode Indices reste assurée par la croix de l'en-tête. */
body.clue-mode-open .clue-pile-shelve {
  display: grid !important;
  z-index: 1760 !important;
  filter: none !important;
  pointer-events: none !important;
}
body.clue-mode-open .clue-pile-shelve.visible {
  opacity: 1 !important;
  visibility: visible !important;
  transform: scale(1) !important;
}

/* -------------------------------------------------------------------------
   Épreuve de déverrouillage des indices
   ------------------------------------------------------------------------- */
.clue-unlock-dialog {
  position: relative;
  isolation: isolate;
  width: min(760px, calc(100vw - 32px));
  max-height: calc(100vh - 40px);
  padding: 0;
  border: 1px solid rgba(198,146,61,.42);
  color: #e1d3b8;
  overflow: hidden;
  background: #171009;
  box-shadow: 0 24px 70px rgba(0,0,0,.72), inset 0 0 55px rgba(180,126,48,.05);
}
.clue-unlock-dialog::backdrop {
  background: rgba(18,12,7,.84);
  backdrop-filter: blur(3px);
}
.clue-unlock-bg {
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  display: block;
  width: 200%;
  height: 100%;
  max-width: none;
  object-fit: fill;
  object-position: left center;
  pointer-events: none;
  user-select: none;
  filter: brightness(.52) sepia(.10);
}
#clueDeclineConfirmDialog .clue-unlock-bg {
  left: -100%;
}

.clue-unlock-dialog::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  background: linear-gradient(rgba(38,24,13,.42), rgba(18,12,7,.62));
  pointer-events: none;
}
.clue-unlock-inner {
  position: relative;
  z-index: 2;
  padding: 34px 34px 28px;
  text-align: center;
  background: transparent;
}
.clue-unlock-kicker { margin: 0 36px 7px; color: rgba(215,166,87,.72); font: 11px/1.4 Georgia,'Times New Roman',serif; letter-spacing: .18em; text-transform: uppercase; }
.clue-unlock-inner h2 { margin: 0 36px 9px; color: #d7a657; font: 27px/1.2 Georgia,'Times New Roman',serif; font-weight: normal; }
.clue-unlock-intro { max-width: 570px; margin: 0 auto 25px; color: rgba(225,211,184,.78); font: 14px/1.55 Georgia,'Times New Roman',serif; }
.egypt-slots { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; margin: 0 auto 22px; }
.egypt-slot { height: 206px; min-height: 206px; padding: 12px; border: 1px solid rgba(198,146,61,.42); background: rgba(10,8,6,.72); cursor: pointer; box-shadow: inset 0 0 24px rgba(0,0,0,.38), 0 1px 0 rgba(230,190,115,.04); transition: border-color .16s ease, background .16s ease, box-shadow .16s ease; }
.egypt-slot.is-active { border-color: rgba(218,171,91,.86); background: rgba(38,27,14,.82); box-shadow: inset 0 0 26px rgba(0,0,0,.32), 0 0 0 1px rgba(218,171,91,.10); }
.egypt-slot:focus-visible { outline: 2px solid rgba(218,171,91,.75); outline-offset: 2px; }
.egypt-slot-content { display: grid; grid-template-columns: repeat(3,54px); grid-template-rows: repeat(3,54px); place-content: center; justify-items: center; align-items: center; gap: 4px; height: 180px; min-height: 180px; }
.egypt-placed-symbol, .egypt-symbol { border: 0; background: transparent; cursor: pointer; padding: 4px; }
.egypt-placed-symbol { width: 54px; height: 54px; padding: 2px; border-radius: 50%; }
.egypt-placed-symbol:hover, .egypt-placed-symbol:focus-visible { background: rgba(198,146,61,.09); }
.egypt-placed-symbol img { display: block; width: 50px; height: 50px; object-fit: contain; }
.egypt-palette { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding: 12px; border-top: 1px solid rgba(198,146,61,.16); border-bottom: 1px solid rgba(198,146,61,.16); }
.egypt-symbol { width: 62px; height: 62px; border: 1px solid transparent; transition: border-color .15s ease, background .15s ease, transform .15s ease; }
.egypt-symbol:hover, .egypt-symbol:focus-visible { border-color: rgba(218,171,91,.5); background: rgba(198,146,61,.06); transform: translateY(-1px); }
.egypt-symbol img { display: block; width: 48px; height: 48px; margin: auto; object-fit: contain; }
.clue-unlock-actions { display: flex; justify-content: center; gap: 10px; margin-top: 21px; }
.clue-unlock-actions .button.secondary { opacity: .76; }
.clue-unlock-attempt-note {
  padding-top:20px;
  max-width: 600px;
  margin: 10px auto 0;
  color: rgba(225,211,184,.56);
  font: 12px/1.45 Georgia,'Times New Roman',serif;
  text-align: center;
}
.clue-unlock-status { min-height: 20px; margin: 13px 0 0; color: rgba(218,171,91,.92); font: 13px/1.45 Georgia,'Times New Roman',serif; white-space: pre-line; }
.shelf-game.clue-locked .shelf-game-icon { filter: saturate(.45); opacity: .78; }
.shelf-game.clue-locked .shelf-status::before { content: '◇ '; }
@media (max-width: 620px) {
  .clue-unlock-inner { padding: 28px 15px 22px; }
  .egypt-slots { gap: 6px; }
  .egypt-slot { height: 146px; min-height: 146px; padding: 6px; }
  .egypt-slot-content { grid-template-columns: repeat(3,40px); grid-template-rows: repeat(3,40px); height: 132px; min-height: 132px; gap: 2px; }
  .egypt-placed-symbol { width: 40px; height: 40px; padding: 1px; }
  .egypt-placed-symbol img { width: 38px; height: 38px; }
  .egypt-palette { gap: 3px; padding: 9px 2px; }
  .egypt-symbol { width: 44px; height: 50px; padding: 2px; }
  .egypt-symbol img { width: 38px; height: 38px; }
}

/* Titre du bandeau : césure après « Trésor » uniquement sur mobile. */
.mobile-title-break {
  display: none;
}

@media (max-width: 768px) {
  .mobile-title-break {
    display: inline;
  }

  /* Centre les deux lignes du titre de la chasse. */
  .topbar-title-row .treasure-trigger-title {
    text-align: center;
  }
}

/* Épreuve des indices : bandeau métallique à pictogrammes. */
.clue-unlock-dialog .egypt-palette {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 94px;
  padding: 9px 64px;
  border: 0;
  background: transparent url('images/picto-egypt/bandeau-picto.webp') center / 100% 100% no-repeat;
}
.clue-unlock-dialog .egypt-symbol {
  position: relative;
  z-index: 1;
  flex: 0 1 76px;
  width: 76px;
  height: 76px;
  padding: 0;
  border: 0;
  background: transparent;
}
.clue-unlock-dialog .egypt-symbol:hover,
.clue-unlock-dialog .egypt-symbol:focus-visible {
  border-color: transparent;
  background: transparent;
  transform: translateY(-1px) scale(1.035);
}
.clue-unlock-dialog .egypt-symbol img {
  display: block;
  width: 100%;
  height: 100%;
  margin: auto;
  object-fit: contain;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,.42));
}
.clue-unlock-dialog .egypt-placed-symbol img {
  filter: drop-shadow(0 2px 2px rgba(0,0,0,.42));
}
@media (max-width: 620px) {
  .clue-unlock-dialog .egypt-palette {
    gap: 2px;
    min-height: 62px;
    padding: 7px 38px;
  }
  .clue-unlock-dialog .egypt-symbol {
    flex-basis: 48px;
    width: 48px;
    height: 48px;
  }
}

/* Variation très discrète du rayon de lumière, comme un passage de nuages. */
.sunlight-cloud-overlay {
  position: absolute !important;
  inset: 0;
  z-index: 0 !important;
  pointer-events: none;
  opacity: 0;
  /* Ombre étirée dans l'axe du rayon existant : de la fenêtre vers le bureau. */
  background:
    radial-gradient(ellipse 58% 34% at 2% 2%, rgba(12, 10, 8, .90) 0%, rgba(14, 11, 8, .62) 34%, transparent 72%),
    radial-gradient(ellipse 54% 30% at 18% 24%, rgba(12, 10, 8, .76) 0%, rgba(14, 11, 8, .46) 38%, transparent 74%),
    radial-gradient(ellipse 50% 27% at 36% 48%, rgba(12, 10, 8, .58) 0%, rgba(14, 11, 8, .33) 40%, transparent 76%),
    radial-gradient(ellipse 46% 24% at 54% 72%, rgba(12, 10, 8, .42) 0%, rgba(14, 11, 8, .22) 42%, transparent 78%);
  mix-blend-mode: multiply;
  transition-property: opacity;
  transition-timing-function: ease-in-out;
  will-change: opacity;
}

/* Le voile reste derrière tous les objets interactifs du bureau. */
.board > .desk-key {
  z-index: 1 !important;
}

@media (prefers-reduced-motion: reduce) {
  .sunlight-cloud-overlay {
    display: none;
  }
}

/* ============================================================
   MODE PLEIN BUREAU
   Masque l'interface sans modifier la géométrie interne des cartes.
   ============================================================ */
.board-focus-toggle {
  position: fixed;
  right: 34px;
  top: calc(var(--topbar-height) + 62px);
  z-index: 851;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(222,181,105,.68);
  border-radius: 50%;
  color: #f0d49b;
  background: radial-gradient(circle at 35% 28%,rgba(255,231,174,.18),transparent 24%),linear-gradient(145deg,#49351b,#21160c 70%,#0d0906);
  box-shadow: 0 8px 22px rgba(0,0,0,.52),inset 0 1px 0 rgba(255,240,196,.18);
  font: 600 20px/1 Georgia,serif;
  cursor: pointer;
  transition: transform .18s,border-color .18s,box-shadow .18s,color .18s,top .25s ease;
}
.board-focus-toggle:hover,
.board-focus-toggle:focus-visible {
  transform: translateY(-2px);
  border-color: #efd39e;
  color: #fff1ce;
  box-shadow: 0 10px 26px rgba(0,0,0,.62),0 0 18px var(--gold-18),inset 0 1px 0 rgba(255,240,196,.24);
  outline: 0;
}
.board-focus-exit { display: none; font-size: 25px; font-weight: 400; transform: translateY(-1px); }

@media (min-width: 901px) {
  body.board-focus-mode .app-shell { grid-template-columns: 1fr; }
  body.board-focus-mode .sidebar,
  body.board-focus-mode .topbar,
  body.board-focus-mode .bottom-bar { display: none !important; }
  body.board-focus-mode .workspace {
    height: 100vh;
    grid-template-rows: minmax(0,1fr);
  }
  body.board-focus-mode .board-wrap {
    padding: 0;
    height: 100vh;
    overflow-y: auto;
  }
  body.board-focus-mode .board {
    width: 100%;
    min-height: 100vh;
    border-left: 0;
    border-right: 0;
  }
  body.board-focus-mode .board-focus-toggle { top: 52px; right: 25px; }
  body.board-focus-mode .board-focus-enter { display: none; }
  body.board-focus-mode .board-focus-exit { display: inline; }
  body.board-focus-mode .cartographer-help-trigger { bottom: 24px; }
}

@media (max-width: 900px) {
  .board-focus-toggle { display: none; }
}

/* --- Finition bureau : suppression du filet clair et de la barre d'aide --- */
@media (min-width: 901px) {
  /* La barre d'aide du bas est remplacée par le bouton ? */
  body:not(.board-focus-mode) .workspace {
    grid-template-rows: var(--topbar-height) minmax(0,1fr);
  }
  .bottom-bar {
    display: none !important;
  }

  /* En plein bureau, aucun filet clair autour de l'image. */
  body.board-focus-mode .board {
    border: 0;
    box-shadow:
      inset 0 0 150px rgba(0,0,0,.46),
      0 16px 36px rgba(0,0,0,.42);
  }
}

/* ============================================================
   PLEIN BUREAU : MENU GAUCHE ESCAMOTABLE
   Le menu vient en superposition, sans déplacer le bureau.
   ============================================================ */
.board-focus-menu-toggle {
  display: none;
}

@media (min-width: 901px) {
  /* Le menu existe toujours en plein bureau, mais reste hors écran tant qu'il est fermé. */
  body.board-focus-mode .sidebar {
    display: flex !important;
    position: fixed;
    z-index: 890;
    top: 0;
    bottom: 0;
    left: 0;
    width: var(--sidebar-width);
    height: 100vh;
    overflow-y: auto;
    transform: translate3d(-100%, 0, 0);
    transition: transform .24s cubic-bezier(.2,.75,.25,1);
    box-shadow: 14px 0 34px rgba(0,0,0,.5), inset -1px 0 rgba(255,255,255,.018);
    will-change: transform;
  }

  body.board-focus-mode.board-focus-menu-open .sidebar {
    transform: translate3d(0, 0, 0);
  }

  /* Petite languette toujours visible sur le bord gauche du bureau. */
  body.board-focus-mode .board-focus-menu-toggle {
    position: fixed;
    z-index: 895;
    display: grid;
    place-items: center;
    left: 0;
    top: 50%;
    width: 30px;
    height: 62px;
    margin: 0;
    padding: 0;
    border: 1px solid rgba(222,181,105,.62);
    border-left: 0;
    border-radius: 0 9px 9px 0;
    color: #f0d49b;
    background: linear-gradient(180deg,rgba(54,39,22,.98),rgba(20,14,9,.99));
    box-shadow: 7px 0 18px rgba(0,0,0,.46), inset 0 1px rgba(255,240,196,.10);
    font: 400 28px/1 Georgia,serif;
    cursor: pointer;
    transform: translateY(-50%);
    transition: left .24s cubic-bezier(.2,.75,.25,1), color .18s, border-color .18s, background .18s;
  }

  body.board-focus-mode .board-focus-menu-toggle:hover,
  body.board-focus-mode .board-focus-menu-toggle:focus-visible {
    color: #fff1ce;
    border-color: rgba(239,211,158,.92);
    background: linear-gradient(180deg,rgba(72,51,27,.99),rgba(25,17,10,.99));
    outline: 0;
  }

  body.board-focus-mode.board-focus-menu-open .board-focus-menu-toggle {
    left: var(--sidebar-width);
  }
}

/* ========================================================================== */
/* Menu parchemin + pictogrammes — V1                                         */
/* ========================================================================== */
.sidebar {
  border-right: 1px solid rgba(76, 47, 22, .72);
  background-color: #d8bc82;
  background-image:
    linear-gradient(90deg, rgba(255,248,222,.08), transparent 14%, transparent 86%, rgba(60,34,15,.16)),
    var(--echo-image-fond-menu, url("images/fond_menu.webp"));
  background-size: 100% 100%, cover;
  background-position: center, center top;
  box-shadow: 9px 0 26px rgba(0,0,0,.38), inset -1px 0 rgba(69,39,16,.26);
  color: #3d2a18;
}
.sidebar::after {
  right: 3px;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(74,43,19,.38) 12%, rgba(74,43,19,.52) 84%, transparent);
}
@media (min-width:901px) {
  .sidebar::before {
    background: linear-gradient(180deg, rgba(95,55,21,.055), rgba(95,55,21,.02));
    border-bottom-color: rgba(88,52,25,.16);
  }
}
.sidebar .brand {
  border-bottom-color: rgba(91,54,25,.26);
}
.sidebar .brand-title {
  color: #3d2816;
  text-shadow: 0 1px rgba(255,250,226,.42);
}
.sidebar .brand-subtitle {
  color: rgba(62,39,20,.72);
}
.sidebar .brand-compass {
  filter: sepia(.28) saturate(.72) brightness(.74) contrast(1.05);
}
.sidebar .main-nav {
  gap: 2px;
}
.sidebar .nav-item {
  display: grid;
  grid-template-columns: 25px minmax(0,1fr);
  align-items: center;
  column-gap: 8px;
  min-height: 38px;
  padding: 6px 8px;
  border: 0;
  border-radius: 3px;
  color: #3c2918;
  text-shadow: 0 1px rgba(255,250,229,.42);
  background: transparent;
  transition: color .18s, background .18s, box-shadow .18s, transform .18s;
}
.sidebar .nav-item::before {
  display: none;
}
.sidebar .nav-item .nav-picto {
  display: block;
  width: 23px;
  height: 23px;
  object-fit: contain;
  opacity: .84;
  filter: sepia(.14) saturate(.84) contrast(.98);
  transition: opacity .18s, transform .18s;
}
.sidebar .nav-item > span {
  min-width: 0;
}
.sidebar .nav-item.active,
.sidebar .nav-item:hover,
.sidebar .nav-item:focus-visible {
  padding: 6px 8px;
  color: #2c1c0f;
  background: linear-gradient(90deg, rgba(127,79,33,.13), rgba(127,79,33,.045));
  box-shadow: inset 0 0 0 1px rgba(107,63,26,.18), 0 1px rgba(255,250,226,.24);
  transform: translateX(1px);
}
.sidebar .nav-item.active .nav-picto,
.sidebar .nav-item:hover .nav-picto,
.sidebar .nav-item:focus-visible .nav-picto {
  opacity: 1;
  transform: scale(1.04);
}

/* L'enveloppe conserve son rôle d'illustration et ne reçoit pas de picto. */
.sidebar .main-nav .teaser-nav-item {
  display: flex;
  color: #4c3420;
  text-shadow: 0 1px rgba(255,250,226,.36);
}
.sidebar .main-nav .teaser-nav-item.active,
.sidebar .main-nav .teaser-nav-item:focus-visible,
.sidebar .main-nav .teaser-nav-item:hover {
  padding-left: 17px;
  background: transparent;
  box-shadow: none;
  transform: none;
}

.sidebar .shelf-title,
.sidebar .sidebar-legal-title {
  color: rgba(69,43,23,.72);
  text-shadow: 0 1px rgba(255,250,226,.32);
}
.sidebar .game-shelf {
  padding-top: 8px;
  border-top: 1px solid rgba(88,52,25,.22);
}
.sidebar .shelf-game {
  border-color: rgba(103,63,28,.22);
  color: #3a2717;
  background: rgba(123,76,32,.045);
  box-shadow: inset 0 1px rgba(255,250,226,.2);
}
.sidebar .shelf-game.stored {
  border-color: rgba(103,63,28,.32);
  background: rgba(123,76,32,.075);
}
.sidebar .shelf-game.stored:hover {
  border-color: rgba(88,49,18,.55);
  background: rgba(123,76,32,.12);
}
.sidebar .shelf-game strong {
  color: #372313;
  text-shadow: 0 1px rgba(255,250,226,.3);
}
.sidebar .shelf-status,
.sidebar .shelf-game.stored .shelf-status {
  color: rgba(83,50,24,.76);
}
.sidebar .game-shelf .shelf-game .shelf-game-icon img {
  filter: sepia(.08) saturate(.86) drop-shadow(0 2px 3px rgba(56,31,12,.18));
}

.sidebar .sidebar-legal {
  margin-top: 14px;
  padding-top: 12px;
  border-top-color: rgba(88,52,25,.24);
}
.sidebar .sidebar-legal br {
  display: none;
}
.sidebar .sidebar-legal a {
  display: grid;
  grid-template-columns: 20px minmax(0,1fr);
  align-items: center;
  column-gap: 7px;
  min-height: 27px;
  padding: 3px 2px;
  color: rgba(57,37,20,.88);
  font-size: 11px;
  line-height: 1.25;
  text-shadow: 0 1px rgba(255,250,226,.3);
}
.sidebar .sidebar-legal .legal-picto {
  display: block;
  width: 18px;
  height: 18px;
  object-fit: contain;
  opacity: .78;
  filter: sepia(.12) saturate(.78);
  transition: opacity .18s, transform .18s;
}
.sidebar .sidebar-legal a:hover,
.sidebar .sidebar-legal a:focus-visible {
  color: #2d1d10;
  transform: translateX(2px);
}
.sidebar .sidebar-legal a:hover .legal-picto,
.sidebar .sidebar-legal a:focus-visible .legal-picto {
  opacity: 1;
  transform: scale(1.05);
}

/* Correspondance du Cartographe : légende comme une petite bande de parchemin. */
.cartographer-letter-caption {
  right: -20px;
  top: calc(100% - 7px);
  width: 158px;
  padding: 9px 10px 8px;
  border: 0;
  color: #4b2e17;
  background-color: #d9bd84;
  background-image:
    linear-gradient(180deg, rgba(255,250,229,.16), rgba(86,48,19,.05)),
    var(--echo-image-fond-menu, url("images/fond_menu.webp"));
  background-size: auto, 250% auto;
  background-position: center, center 48%;
  box-shadow: 0 7px 14px rgba(0,0,0,.42), inset 0 0 0 1px rgba(88,50,21,.24);
  clip-path: polygon(2% 7%, 11% 3%, 19% 6%, 30% 2%, 42% 5%, 55% 2%, 67% 5%, 81% 2%, 98% 6%, 96% 22%, 99% 39%, 96% 56%, 99% 74%, 96% 94%, 83% 97%, 70% 94%, 57% 98%, 43% 95%, 29% 98%, 15% 94%, 3% 97%, 5% 78%, 2% 61%, 5% 43%, 2% 25%);
  transform: rotate(-1.5deg);
}
.cartographer-letter-caption strong {
  color: #3d2614;
  font: italic 11px/1.2 Georgia,"Times New Roman",serif;
  text-shadow: 0 1px rgba(255,250,226,.4);
}
.cartographer-letter-caption small {
  margin-top: 3px;
  color: rgba(68,41,21,.68);
  font: 6px/1.2 Georgia,"Times New Roman",serif;
  letter-spacing: .045em;
}
.cartographer-letter.is-read .cartographer-letter-caption strong {
  color: rgba(61,38,20,.75);
}
.cartographer-letter.is-read .cartographer-letter-caption small {
  color: rgba(68,41,21,.52);
}

/* ========================================================================== */
/* Menu parchemin — V2 : typographie affirmée + pictos centrés verticalement */
/* ========================================================================== */
.sidebar .nav-item:not(.teaser-nav-item) {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  color: #302013;
  font-size: 14px;
  line-height: 1.22;
  font-weight: 600;
  text-shadow: 0 1px 0 rgba(255,250,229,.38);
}
.sidebar .nav-item:not(.teaser-nav-item) .nav-picto {
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  align-self: center;
  opacity: .96;
  filter: sepia(.10) saturate(.9) contrast(1.08) brightness(.88);
}
.sidebar .nav-item:not(.teaser-nav-item) > span {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  color: inherit;
}

.sidebar .sidebar-legal a {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 29px;
  color: #3a2718;
  font-size: 11.5px;
  line-height: 1.25;
  font-weight: 600;
  text-shadow: 0 1px 0 rgba(255,250,229,.32);
}
.sidebar .sidebar-legal .legal-picto {
  flex: 0 0 19px;
  width: 19px;
  height: 19px;
  align-self: center;
  opacity: .92;
  filter: sepia(.10) saturate(.84) contrast(1.06) brightness(.9);
}
.sidebar .sidebar-legal a > span {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  color: inherit;
}

/* ========================================================================== */
/* Menu parchemin — V3 : poids harmonisés                                    */
/* ========================================================================== */
.sidebar .brand-title {
  color: #2f1d10;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: .22em;
  text-shadow: 0 1px 0 rgba(255,250,229,.34);
}
.sidebar .brand-subtitle {
  color: #49301d;
  font-weight: 500;
  opacity: .92;
}

.sidebar .nav-item:not(.teaser-nav-item) {
  color: #342216;
  font-weight: 500;
}
.sidebar .sidebar-legal a {
  color: #3a2718;
  font-weight: 500;
}

.sidebar .shelf-game strong {
  color: #342116;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.25;
  text-shadow: 0 1px 0 rgba(255,250,229,.30);
}
.sidebar .shelf-status,
.sidebar .shelf-game.stored .shelf-status {
  color: #5a3a20;
  font-size: 8.8px;
  font-weight: 500;
  letter-spacing: .055em;
  opacity: .92;
}

/* ========================================================================== */
/* Menu parchemin — V4 : signature renforcée + bord droit irrégulier         */
/* ========================================================================== */
.sidebar {
  border-right: 0;
  box-shadow: 9px 0 26px rgba(0,0,0,.34);
}

/* Prolonge légèrement le parchemin dans le bureau afin de laisser apparaître
   une vraie lisière irrégulière, sans modifier la largeur utile du menu. */
.sidebar::after {
  content: '';
  position: absolute;
  z-index: 2;
  top: 0;
  right: -8px;
  bottom: 0;
  width: 13px;
  pointer-events: none;
  background-color: #d8bc82;
  background-image: var(--echo-image-fond-menu, url("images/fond_menu.webp"));
  background-size: auto 100%;
  background-position: right top;
  background-repeat: no-repeat;
  clip-path: polygon(
    0 0,
    72% 0,
    88% 2%,
    70% 5%,
    94% 8%,
    76% 11%,
    98% 15%,
    80% 19%,
    92% 23%,
    74% 27%,
    100% 31%,
    79% 35%,
    95% 40%,
    73% 45%,
    99% 50%,
    77% 55%,
    93% 60%,
    72% 65%,
    98% 70%,
    78% 75%,
    94% 80%,
    74% 85%,
    99% 90%,
    79% 95%,
    90% 98%,
    74% 100%,
    0 100%
  );
  filter: drop-shadow(2px 0 2px rgba(38,22,11,.34));
}

.sidebar .brand-title {
  color: #2a190d;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: .205em;
  text-shadow: 0 1px 0 rgba(255,250,229,.38);
}
.sidebar .brand-subtitle {
  color: #3e2818;
  font-weight: 600;
  opacity: .94;
}

/* ========================================================================== */
/* Menu parchemin — V5 : bord droit natif de fond_menu.webp                  */
/* ========================================================================== */
/* Le fichier fond_menu.webp possède déjà sa propre lisière dentelée.
   Aucun masque, découpage ou faux bord n'est ajouté en CSS. */
.sidebar {
  border-right: 0;
  background-color: #d8bc82;
  background-image: var(--echo-image-fond-menu, url("images/fond_menu.webp"));
  background-size: 100% 100%;
  background-position: left top;
  background-repeat: no-repeat;
  box-shadow: 9px 0 26px rgba(0,0,0,.34);
}
.sidebar::after {
  display: none !important;
  content: none !important;
}

/* ========================================================================== */
/* Revue UX — contraste des accès, commandes de piles et textes secondaires   */
/* ========================================================================== */

/* Les deux accès visiteurs restent dans l'esthétique du bandeau, mais leur
   libellé gagne en contraste et en présence. */
.top-actions .gateway-button {
  border-color: rgba(210,173,112,.72);
  color: #ead2a3;
  font-weight: 600;
  text-shadow: 0 1px 2px rgba(0,0,0,.88);
  background: linear-gradient(180deg,rgba(185,139,66,.10),rgba(0,0,0,.08)),rgba(17,14,10,.78);
}
.top-actions .gateway-button .button-icon {
  color: #e2c185;
  opacity: 1;
}
.top-actions .gateway-button:hover,
.top-actions .gateway-button:focus-visible {
  border-color: rgba(234,210,163,.94);
  color: #f4dfb8;
  background: rgba(185,139,66,.17);
}

/* Les commandes de rangement doivent être identifiables comme des contrôles,
   sans devenir des éléments criards dans le décor du bureau. */
.pile-shelve {
  width: 40px;
  height: 40px;
  border-color: rgba(224,190,126,.68);
  background: radial-gradient(circle at 35% 28%,rgba(222,183,111,.22),transparent 38%),rgba(10,8,6,.90);
  box-shadow: 0 8px 22px rgba(0,0,0,.52), inset 0 0 0 1px rgba(239,211,158,.13), 0 0 9px rgba(185,139,66,.12);
  color: #e7c88e;
  font-size: 16px;
  font-weight: 600;
  text-shadow: 0 1px 3px rgba(0,0,0,.9);
}
.pile-shelve.visible {
  opacity: .96;
  transform: scale(1);
}
.pile-shelve:hover,
.pile-shelve:focus-visible {
  border-color: #e8ca91;
  background: radial-gradient(circle at 35% 28%,rgba(235,203,143,.28),transparent 40%),rgba(24,17,10,.94);
  box-shadow: 0 9px 24px rgba(0,0,0,.56), inset 0 0 0 1px rgba(255,228,178,.18), 0 0 13px rgba(210,173,112,.24);
  color: #f2d9a9;
}

/* Les indications sous Illustrations / Manuscrits restent secondaires mais
   deviennent lisibles plus confortablement sur les écrans moins définis. */
.sidebar .shelf-status,
.sidebar .shelf-game.stored .shelf-status {
  color: #51331d;
  font-size: 9.8px;
  line-height: 1.3;
  letter-spacing: .045em;
  opacity: .96;
}



/* Choix proposé après trois essais infructueux à l’épreuve des indices. */
.clue-abandon-offer {
  margin: 14px auto 0;
  max-width: 620px;
  padding: 14px 16px;
  border: 1px solid rgba(196, 157, 92, .45);
  border-radius: 8px;
  text-align: center;
}
.clue-abandon-offer[hidden] { display: none !important; }
.clue-abandon-offer p { margin: 0 0 12px; }
.clue-abandon-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* -------------------------------------------------------------------------
   Proposition facultative avant l'épreuve du Sceau Discretio
   ------------------------------------------------------------------------- */
.clue-choice-dialog {
  position: relative;
  isolation: isolate;
  width: min(650px, calc(100vw - 32px));
  padding: 0;
  border: 1px solid rgba(198,146,61,.42);
  color: #e1d3b8;
  overflow: hidden;
  background: #171009;
  box-shadow: 0 24px 70px rgba(0,0,0,.72), inset 0 0 55px rgba(180,126,48,.05);
}
.clue-choice-dialog::backdrop {
  background: rgba(18,12,7,.84);
  backdrop-filter: blur(3px);
}
.clue-choice-dialog::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  background: linear-gradient(rgba(38,24,13,.42), rgba(18,12,7,.62));
  pointer-events: none;
}
.clue-choice-inner {
  position: relative;
  z-index: 2;
  padding: 36px 42px 32px;
  text-align: center;
}
.clue-choice-inner h2 {
  margin: 0 36px 18px;
  color: #d7a657;
  font: 29px/1.2 Georgia,'Times New Roman',serif;
  font-weight: normal;
}
.clue-choice-inner > p:not(.clue-unlock-kicker):not(.clue-unlock-status) {
  width: 100%;
  max-width: 555px;
  margin: 0 auto 13px;
  color: rgba(225,211,184,.82);
  font: 14px/1.58 Georgia,'Times New Roman',serif;
  text-align: left;
  text-wrap: pretty;
}
.clue-choice-inner strong {
  color: rgba(234,205,151,.96);
  font-weight: normal;
}
.clue-choice-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 11px;
  flex-wrap: wrap;
  margin-top: 24px;
}
.clue-choice-actions .button.secondary { opacity: .8; }
@media (max-width: 620px) {
  .clue-choice-inner { padding: 30px 18px 24px; }
  .clue-choice-inner h2 { margin-left: 28px; margin-right: 28px; font-size: 25px; }
  .clue-choice-actions { flex-direction: column; }
  .clue-choice-actions .button { width: min(100%, 310px); }
}


/* Coffret ouvert : superposé exactement au coffret du fond après insertion de la clé. */
.board > .desk-open-chest {
  position: absolute;
  display: block;
  height: auto;
  max-width: none;
  z-index: 1;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  user-select: none;
}

.board > .desk-open-chest.is-visible {
  opacity: 1;
  visibility: visible;
}


/* Offre des sceaux physiques */
.physical-seal-offer {
  margin-top: 18px;
  padding-top: 2px;
  color: rgba(222,207,178,.86);
  text-align: left;
}
.physical-seal-offer[hidden] { display: none !important; }
.physical-seal-offer-rule {
  width: 76%;
  height: 1px;
  margin: 0 auto 15px;
  background: linear-gradient(90deg, transparent, rgba(198,146,61,.42), transparent);
}
.physical-seal-offer p { margin: 7px 0 !important; text-transform: none !important; letter-spacing: .02em !important; }
.physical-seal-awakening { color: #d7a657 !important; font-size: 16px !important; text-align: center; }
.physical-seal-stock { text-align: center; color: rgba(218,171,91,.92) !important; }
.physical-seal-form { margin-top: 13px; }
.physical-seal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.physical-seal-grid label { display: grid; gap: 4px; }
.physical-seal-grid label.wide { grid-column: 1 / -1; }
.physical-seal-grid label > span { color: rgba(222,207,178,.76); font: 11px/1.25 Georgia,'Times New Roman',serif; letter-spacing: .04em; }
.physical-seal-grid input,
.physical-seal-ship-form input {
  box-sizing: border-box;
  width: 100%;
  border: 1px solid rgba(198,146,61,.28);
  background: rgba(0,0,0,.28);
  color: #e5d9bd;
  padding: 8px 9px;
  font: 13px/1.2 Georgia,'Times New Roman',serif;
}
.physical-seal-grid input:focus,
.physical-seal-ship-form input:focus { outline: 1px solid rgba(218,171,91,.56); outline-offset: 1px; }
.physical-seal-consent { display: flex; gap: 8px; align-items: flex-start; margin-top: 11px; color: rgba(222,207,178,.78); font-size: 12px; }
.physical-seal-consent input { margin-top: 2px; accent-color: #b78437; }
.physical-seal-privacy { font-size: 11px !important; color: rgba(222,207,178,.55) !important; }
.physical-seal-actions { display: flex; justify-content: center; gap: 8px; margin-top: 12px; }
.physical-seal-status { min-height: 16px; text-align: center; color: #d7a657 !important; }
.physical-seal-address { margin: 12px auto; padding: 10px 12px; max-width: 330px; border: 1px solid rgba(198,146,61,.18); background: rgba(0,0,0,.16); color: rgba(231,220,197,.86); font-style: normal; line-height: 1.45; }
.physical-seal-payment-missing { text-align: center; color: rgba(222,207,178,.6) !important; }

.physical-seal-admin-summary { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; margin-bottom: 18px; }
.physical-seal-admin-summary > div { padding: 18px 14px; border: 1px solid rgba(198,146,61,.18); background: rgba(0,0,0,.12); text-align: center; }
.physical-seal-admin-summary strong { display: block; color: #d7a657; font-size: 27px; }
.physical-seal-admin-summary span { color: rgba(222,207,178,.68); font-size: 12px; }
.physical-seal-admin-list { display: grid; gap: 12px; }
.physical-seal-admin-card header { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; }
.physical-seal-admin-state { color: #d7a657; white-space: nowrap; }
.physical-seal-admin-address { margin: 13px 0; line-height: 1.5; color: rgba(238,226,202,.84); }
.physical-seal-ship-form { display: flex; gap: 8px; flex: 1; }
.physical-seal-ship-form input { max-width: 320px; }
@media (max-width: 700px) {
  .physical-seal-grid { grid-template-columns: 1fr; }
  .physical-seal-grid label.wide { grid-column: auto; }
  .physical-seal-admin-summary { grid-template-columns: 1fr 1fr; }
  .physical-seal-admin-card header, .physical-seal-ship-form { flex-direction: column; }
}


/* Dernière énigme : le cinquième sceau apparaît seulement avec 4 sceaux acquis. */
.echo-seal-riddle {
  margin: 14px auto 0;
  padding-top: 13px;
  border-top: 1px solid rgba(198,146,61,.18);
  max-width: 390px;
  text-align: center;
}
.echo-seal-riddle[hidden] { display: none !important; }
.echo-seal-riddle-text {
  margin: 0 0 10px !important;
  color: rgba(222,207,178,.82) !important;
  font: italic 13px/1.45 Georgia,'Times New Roman',serif !important;
}
.echo-seal-answer-form { display: flex; gap: 7px; justify-content: center; }
.echo-seal-answer-form input {
  min-width: 0;
  flex: 1;
  padding: 8px 10px;
  border: 1px solid rgba(198,146,61,.34);
  background: rgba(0,0,0,.22);
  color: #e3e3e3;
  font: 13px Georgia,'Times New Roman',serif;
  outline: none;
}
.echo-seal-answer-form input:focus { border-color: rgba(218,171,91,.72); }
.echo-seal-answer-form button {
  padding: 8px 11px;
  border: 1px solid rgba(198,146,61,.55);
  background: rgba(198,146,61,.08);
  color: #d7a657;
  font: 12px Georgia,'Times New Roman',serif;
  cursor: pointer;
}
.echo-seal-answer-form button:disabled { opacity: .55; cursor: default; }
.echo-seal-answer-status { min-height: 16px; margin: 7px 0 0 !important; color: rgba(218,171,91,.84) !important; font-size: 12px !important; }
.desk-key.is-puzzle-complete,
.desk-key.is-puzzle-complete img { cursor: default !important; }


/* Ascenseur des fenêtres « Mes sceaux » et « Le Trésor », assorti au reste du site */
.grade-seal-dialog,
.treasure-dialog {
  scrollbar-width: thin;
  scrollbar-color: #9c7337 rgba(18,11,6,.72);
}
.grade-seal-dialog::-webkit-scrollbar,
.treasure-dialog::-webkit-scrollbar { width: 8px; }
.grade-seal-dialog::-webkit-scrollbar-track,
.treasure-dialog::-webkit-scrollbar-track {
  background: rgba(18,11,6,.72);
  border-left: 1px solid rgba(198,146,61,.10);
}
.grade-seal-dialog::-webkit-scrollbar-thumb,
.treasure-dialog::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #b88a46, #795425);
  border: 1px solid rgba(225,184,107,.28);
  border-radius: 8px;
}
.grade-seal-dialog::-webkit-scrollbar-thumb:hover,
.treasure-dialog::-webkit-scrollbar-thumb:hover { background: #a87938; }
.grade-seal-dialog::-webkit-scrollbar-corner,
.treasure-dialog::-webkit-scrollbar-corner { background: rgba(18,11,6,.72); }

/* ==========================================================================\n   RITUEL DES SCEAUX — TRANSITION PANNEAU <-> BADGE DU PSEUDO\n   ========================================================================== */
.seal-flight-clone {
  position: fixed;
  z-index: 2147483000;
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  object-fit: contain;
  pointer-events: none;
  transform-origin: top left;
  will-change: transform, opacity;
  filter:
    drop-shadow(0 0 12px rgba(218,160,56,.34))
    drop-shadow(0 6px 18px rgba(0,0,0,.48));
}

.precursor-seal-dialog.is-seal-storing {
  opacity: .05;
  transform: scale(.985);
  transition: opacity 260ms ease, transform 320ms ease;
}
.precursor-seal-dialog.is-seal-storing::backdrop {
  background: rgba(0,0,0,.18);
  backdrop-filter: blur(0);
  transition: background 320ms ease;
}

.user-grade-badge.is-receiving-seal {
  animation: user-grade-badge-receive 700ms cubic-bezier(.2,.75,.2,1) both;
}
@keyframes user-grade-badge-receive {
  0%, 72% { transform: scale(.82); filter: drop-shadow(0 2px 4px rgba(0,0,0,.72)); }
  88% { transform: scale(1.28); filter: drop-shadow(0 0 10px rgba(222,166,66,.72)); }
  100% { transform: scale(1); filter: drop-shadow(0 2px 4px rgba(0,0,0,.72)); }
}

.grade-seal-dialog.is-flight-opening {
  opacity: 0;
}
.grade-seal-dialog.is-flight-opening::backdrop {
  background: rgba(0,0,0,.28);
  backdrop-filter: blur(1px);
}
.grade-seal-dialog:not(.is-flight-opening) {
  transition: opacity 150ms ease;
}

/* Fermeture de la collection : le panneau s'efface, mais le sceau reste
   visible via .seal-flight-clone et retourne se ranger devant le pseudo. */
.grade-seal-dialog.is-flight-closing {
  opacity: .04;
  transform: scale(.985);
  transition: opacity 260ms ease, transform 320ms ease;
}
.grade-seal-dialog.is-flight-closing::backdrop {
  background: rgba(0,0,0,.18);
  backdrop-filter: blur(0);
  transition: background 320ms ease, backdrop-filter 320ms ease;
}

@media (prefers-reduced-motion: reduce) {
  .precursor-seal-dialog.is-seal-storing,
  .user-grade-badge.is-receiving-seal,
  .grade-seal-dialog:not(.is-flight-opening) {
    animation: none !important;
    transition: none !important;
  }
}

/* Participation aux frais du sceau physique */
.physical-seal-shipping-fee {
  margin: 14px 0 4px;
  padding: 10px 12px;
  border-top: 1px solid rgba(198,146,61,.22);
  border-bottom: 1px solid rgba(198,146,61,.22);
  text-align: center;
  font-family: Georgia,'Times New Roman',serif;
}
.physical-seal-shipping-fee strong {
  display: block;
  color: #d7a657;
  font-size: 14px;
  line-height: 1.35;
  font-weight: 600;
}
.physical-seal-shipping-fee span {
  display: block;
  margin-top: 5px;
  color: rgba(222,207,178,.72);
  font-size: 11px;
  line-height: 1.35;
}
.physical-seal-shipping-fee b { color: rgba(231,220,197,.9); font-weight: 600; }


/* Notification discrète : le sceau physique vient d'être expédié. */
.physical-seal-shipped-indicator {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: 8px;
  padding: 2px 7px;
  border: 1px solid rgba(211, 157, 54, .62);
  border-radius: 999px;
  color: #e5bd63;
  background: rgba(12, 8, 3, .72);
  font-size: 10px;
  line-height: 1.35;
  letter-spacing: .04em;
  white-space: nowrap;
  box-shadow: 0 0 10px rgba(211,157,54,.12);
  animation: physical-seal-shipped-pulse 2.2s ease-in-out infinite;
}
.physical-seal-shipped-indicator::before { content: '◆'; font-size: 7px; }
@keyframes physical-seal-shipped-pulse {
  0%,100% { opacity:.72; }
  50% { opacity:1; box-shadow:0 0 14px rgba(211,157,54,.28); }
}
@media (prefers-reduced-motion: reduce) { .physical-seal-shipped-indicator { animation:none; } }


/* Suivi postal du sceau physique */
.physical-seal-tracking-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 4px;
  text-decoration: none;
}


/* Annonce publique de la découverte de la contremarque */
.topbar-motto.is-countermark-found {
  grid-template-columns: auto max-content auto;
  width: min(760px,100%);
  gap: 10px;
}
.topbar-motto.is-countermark-found p {
  color: #ffd36f;
  font-style: normal;
  font-size: 13px;
  letter-spacing: .035em;
  text-shadow: 0 0 8px rgba(255,190,55,.42), 0 1px 3px rgba(0,0,0,.95);
}
.topbar-motto.is-countermark-found strong {
  font-weight: 700;
}
.topbar-countermark-diamond {
  color: #ffd36f;
  font-size: 12px;
  line-height: 1;
  text-shadow: 0 0 7px rgba(255,190,55,.65);
}

.countermark-admin-form {
  display: grid;
  gap: 18px;
  max-width: 620px;
}
.countermark-admin-fields {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 14px;
}
.countermark-admin-field {
  display: grid;
  gap: 7px;
}
.countermark-admin-field label {
  color: #d9bc85;
  font-size: 13px;
}
.countermark-admin-field input,
.countermark-admin-field textarea {
  width: 100%;
  min-height: 44px;
  padding: 9px 12px;
  border: 1px solid rgba(198,149,67,.55);
  background: rgba(8,7,5,.82);
  color: #eee2cd;
  font: inherit;
  box-sizing: border-box;
  border-radius: 2px;
}
.countermark-admin-field textarea {
  min-height: 90px;
  resize: vertical;
  line-height: 1.5;
}
.countermark-admin-field input:focus,
.countermark-admin-field textarea:focus {
  outline: 1px solid #d9bc85;
  outline-offset: 1px;
}
.countermark-current-announcement {
  padding: 16px 18px;
  border: 1px solid rgba(255,198,73,.48);
  background: rgba(255,190,55,.06);
}
.countermark-current-announcement strong {
  color: #ffd36f;
}
.countermark-confirm-dialog {
  width: min(520px,calc(100vw - 32px));
  padding: 0;
  border: 1px solid rgba(198,149,67,.7);
  background: #100d09;
  color: #eee2cd;
  box-shadow: 0 24px 80px rgba(0,0,0,.72);
}
.countermark-confirm-dialog::backdrop { background: rgba(0,0,0,.72); }
.countermark-confirm-inner { padding: 24px; }
.countermark-confirm-inner h2 { margin: 0 0 12px; color: #d9bc85; font-weight: normal; }
.countermark-confirm-value { margin: 18px 0; color: #ffd36f; font-size: 18px; text-align: center; }
.countermark-confirm-actions { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
@media (max-width:620px) {
  .countermark-admin-fields { grid-template-columns: 1fr; }
  .topbar-motto.is-countermark-found { grid-template-columns: 24px minmax(0,1fr) 24px; gap: 7px; }
  .topbar-motto.is-countermark-found p { white-space: normal; line-height: 1.25; }
}


/* Remerciement affiché au retour d'un soutien Stripe.
   Reprend le langage visuel des fenêtres du bureau : fond sombre en filigrane,
   liserés dorés, typographie Georgia et halo discret. */
.support-thanks-dialog {
  position: relative;
  isolation: isolate;
  width: min(590px, calc(100vw - 34px));
  margin: auto;
  box-sizing: border-box;
  padding: 42px 48px 38px;
  overflow: hidden;
  border: 1px solid rgba(203,157,81,.68);
  border-radius: 3px;
  color: #e9dfcc;
  text-align: center;
  background:
    radial-gradient(ellipse 74% 72% at 50% 8%, rgba(192,138,59,.16), transparent 70%),
    linear-gradient(145deg, rgba(31,22,13,.985), rgba(7,7,6,.995));
  box-shadow:
    0 32px 100px rgba(0,0,0,.88),
    0 0 52px rgba(185,139,66,.10),
    inset 0 0 0 1px rgba(255,226,175,.045),
    inset 0 -50px 90px rgba(0,0,0,.31);
  font-family: Georgia, "Times New Roman", serif;
}
.support-thanks-dialog::before {
  content: "";
  position: absolute;
  z-index: -2;
  inset: 0;
  background:
    linear-gradient(rgba(10,8,6,.78), rgba(8,7,6,.90)),
    var(--echo-image-fond-ecrans, url("images/fond_ecrans.webp")) right center / 200% auto no-repeat;
  opacity: .72;
  pointer-events: none;
}
.support-thanks-dialog::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 8px;
  border: 1px solid rgba(219,180,110,.14);
  box-shadow: inset 0 0 58px rgba(0,0,0,.28), inset 0 0 0 1px rgba(0,0,0,.36);
  pointer-events: none;
}
.support-thanks-dialog::backdrop {
  background: rgba(0,0,0,.62);
  backdrop-filter: blur(7px) brightness(.66);
}
.support-thanks-dialog[open] {
  animation: .30s cubic-bezier(.18,.78,.24,1) visitor-restricted-dialog-in;
}
.support-thanks-close {
  position: absolute;
  z-index: 3;
  top: 8px;
  right: 12px;
  padding: 2px 7px;
  border: 0;
  color: rgba(239,229,209,.58);
  background: transparent;
  font: 29px/1 Georgia, serif;
  cursor: pointer;
}
.support-thanks-close:hover,
.support-thanks-close:focus-visible {
  color: #ecd39f;
  outline: 0;
}
.support-thanks-mark {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  margin: 0 auto 11px;
  border: 1px solid rgba(210,173,112,.40);
  border-radius: 50%;
  color: #dcbd7f;
  background: radial-gradient(circle, rgba(185,139,66,.23), rgba(20,13,7,.74));
  box-shadow: 0 0 28px rgba(185,139,66,.17), inset 0 0 12px rgba(255,220,154,.035);
  font-size: 19px;
  line-height: 1;
  text-shadow: 0 0 13px rgba(221,181,105,.35);
}
.support-thanks-kicker {
  margin: 0 0 7px;
  color: #b99055;
  font-size: 9px;
  letter-spacing: .22em;
  text-transform: uppercase;
}
.support-thanks-dialog h2 {
  max-width: 470px;
  margin: 0 auto 15px;
  color: #ead3a3;
  font: 400 clamp(24px, 3vw, 31px)/1.16 Georgia, serif;
  text-wrap: balance;
}
.support-thanks-text {
  max-width: 470px;
  margin: 0 auto 10px;
  color: rgba(239,225,199,.88);
  font: italic 15px/1.65 Georgia, serif;
}
.support-thanks-foot {
  max-width: 470px;
  margin: 0 auto 22px;
  color: rgba(229,218,198,.68);
  font-size: 13px;
  line-height: 1.65;
}
.support-thanks-continue {
  min-width: 190px;
}
@media (max-width: 600px) {
  .support-thanks-dialog {
    width: calc(100vw - 20px);
    padding: 31px 21px 25px;
  }
  .support-thanks-dialog h2 {
    font-size: 25px;
  }
  .support-thanks-text {
    font-size: 14px;
  }
}


/* Louis XIV : deux photos originales, taille physique indicative et loupe optique */
.treasure-coins { display:flex; justify-content:center; align-items:center; gap:clamp(20px,6vw,56px); margin:15px auto 12px; }
.treasure-coin { position:relative; display:block; width:2.5cm; height:2.5cm; padding:0; border:0; border-radius:50%; background:transparent; cursor:zoom-in; flex:none; touch-action:manipulation; }
.treasure-coin > img { display:block; width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 5px 6px rgba(0,0,0,.7)); }
.treasure-coin:focus-visible { outline:2px solid #d8ad65; outline-offset:5px; }
.treasure-magnifier { display:none; position:absolute; pointer-events:none; z-index:10; width:160px; height:160px; border-radius:50%; border:3px solid #c8a66a; box-shadow:0 8px 22px #000c, inset 0 0 0 1px #fff4; background-color:#20180d; background-repeat:no-repeat; }
@media (hover:hover) and (pointer:fine) { .treasure-coin.is-magnifying .treasure-magnifier { display:block; } }
.treasure-size-note { margin:0 auto 14px; color:rgba(232,223,207,.6); font:italic 11px/1.5 Georgia,serif; text-align:center; }
.treasure-coin-viewer { padding:26px; max-width:min(92vw,680px); max-height:92vh; overflow:auto; border:1px solid #ad874b; border-radius:9px; background:#1b140d; color:#ead3a3; text-align:center; box-shadow:0 15px 60px #000b; }
.treasure-coin-viewer::backdrop { background:#000c; }
.treasure-coin-viewer img { display:block; width:min(72vw,500px); max-height:70vh; height:auto; object-fit:contain; margin:auto; }
.treasure-coin-viewer .treasure-viewer-close { display:block; margin:12px 0 0 auto; padding:6px 13px; border:1px solid #ad874b; color:#ead3a3; background:transparent; cursor:pointer; }
@media (max-width:480px) { .treasure-coins { gap:26px; } .treasure-size-note { font-size:10px; } }

/* Ajustement discret du titre de la dotation : une ligne sur écran large. */
@media (min-width: 760px) {
  .treasure-dialog { width: min(720px, calc(100vw - 30px)); }
  .treasure-current strong { font-size: 20px; line-height: 1.3; }
}
@media (max-width: 759px) {
  .treasure-current strong { font-size: clamp(17px, 4vw, 20px); line-height: 1.3; }
}

/* Attire l'attention des visiteurs pendant dix secondes à l'arrivée. */
.cartographer-help-trigger.is-attention {
  animation: cartographer-help-glow 2s ease-in-out 5;
}
@keyframes cartographer-help-glow {
  0%, 100% {
    box-shadow: 0 8px 22px rgba(0,0,0,.52),
      inset 0 1px 0 rgba(255,240,196,.22),
      inset 0 -2px 5px var(--shadow-48);
  }
  50% {
    box-shadow: 0 8px 22px rgba(0,0,0,.52),
      0 0 12px 4px rgba(255,218,132,.8),
      0 0 32px 12px rgba(218,166,65,.45),
      inset 0 1px 0 rgba(255,240,196,.22);
  }
}
@media (prefers-reduced-motion: reduce) {
  .cartographer-help-trigger.is-attention { animation: none; }
}


/* Administration : rubriques lisibles, trois colonnes sur grand écran. */
.top-admin-menu-panel {
  width: min(900px, calc(100vw - 32px));
  max-height: min(76vh, 680px);
  overflow-y: auto;
  padding: 17px;
}
.top-admin-menu-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
.top-admin-menu-column { min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.top-admin-menu-section { min-width: 0; }
.top-admin-menu-section h3 {
  margin: 0 0 8px;
  padding: 0 5px 9px;
  border-bottom: 1px solid rgba(185,139,66,.42);
  color: #e5c487;
  font: 700 12px/1.35 Georgia, serif;
  letter-spacing: .09em;
}
.top-admin-menu-panel .top-admin-menu-section a {
  padding: 9px 5px;
  gap: 8px;
  font-family: Georgia, serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: .005em;
  text-transform: none;
  color: #d8cab4;
}
.top-admin-menu-panel .top-admin-menu-section a > span:first-child { flex: 0 0 14px; }
@media (max-width: 960px) {
  .top-admin-menu-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .top-admin-menu-panel {
    position: fixed;
    top: 76px;
    left: 12px;
    right: 12px;
    width: auto;
    max-height: calc(100dvh - 90px);
    padding: 12px;
  }
  .top-admin-menu-grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .top-admin-menu-column { gap: 18px; }
}

/* En-tête compact de la dotation : coffre latéral, titre centré sur ordinateur. */
.treasure-dialog .treasure-header {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr) 112px;
  align-items: center;
  gap: 14px;
  margin: -8px 0 14px;
}
.treasure-header .treasure-dialog-chest { width: 112px; margin: 0; }
.treasure-header .treasure-heading { min-width: 0; }
.treasure-dialog .treasure-header .treasure-intro { margin: 0; }
@media (max-width: 640px) {
  .treasure-dialog { padding: 28px 16px 24px; }
  .treasure-dialog .treasure-header {
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 12px;
    margin-top: 0;
  }
  .treasure-header .treasure-dialog-chest { width: 96px; }
}


/* Plateau supplémentaire desktop, sans règles touchant la galerie mobile. */
.desktop-spread-toggle[hidden], .desktop-spread[hidden] { display: none !important; }
.desktop-spread-toggle { position: absolute; }
/* Sur le plateau remonté, le retour reste dans son en-tête sans recouvrir les cartes. */
.desktop-spread:not([hidden]) ~ .desktop-spread-toggle { visibility: hidden; pointer-events: none; }
.desktop-spread {
  position: fixed; z-index: 900;
  left: max(16px, calc(var(--sidebar-width) + 22px)); right: 22px;
  top: calc(var(--topbar-height) + 12px); bottom: 18px;
  padding: 18px; border: 1px solid rgba(203,157,81,.64); border-radius: 8px;
  background-color: rgba(12,9,6,.94); color: var(--ivory);
  display: flex; flex-direction: column; min-height: 0;
  animation: desktop-spread-in .16s ease-out;
}
body.board-focus-mode .desktop-spread { top: 18px; left: 18px; right: 18px; }
.desktop-spread header { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-shrink: 0; margin-bottom: 14px; }
.desktop-spread .desktop-spread-close {
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 44px; width: 44px; height: 44px; padding: 0;
  border: 0; border-radius: 6px; background: transparent;
  color: var(--gold-soft); cursor: pointer;
  transition: color .15s, background-color .15s;
}
.desktop-spread .desktop-spread-close:hover { color: #ffe4ad; background-color: rgba(203,157,81,.12); }
.desktop-spread .desktop-spread-close:focus-visible { outline: 2px solid #efd39e; outline-offset: 2px; }
.desktop-spread h2 { margin: 0; font-size: 20px; font-weight: 400; color: var(--gold-soft); }
.desktop-spread-grid {
  display: grid; grid-template-columns: repeat(var(--spread-columns, 7), minmax(0, 1fr));
  grid-template-rows: repeat(var(--spread-rows, 2), minmax(0, 1fr)); flex: 1;
  gap: 12px; overflow: auto; min-height: 0; padding: 3px;
  scrollbar-width: thin; scrollbar-color: #b98b42 #20150d;
}
.desktop-spread-card {
  display: flex; flex-direction: column; align-items: stretch;
  min-width: 0; min-height: 0; padding: 10px 0 0;
  border: 1px solid #b98b4280; border-radius: 5px;
  background: rgba(14,12,9,.55); color: #e8dfcf;
  cursor: pointer; transition: filter .15s;
}
.desktop-spread-card img {
  display: block; width: 100%; height: 0; flex: 1; min-height: 0;
  object-fit: contain; border-radius: 4px;
}
.desktop-spread-card span { display: block; flex-shrink: 0; padding: 5px; font-size: 12px; }
.desktop-spread-card:hover { filter: brightness(1.12); }
.desktop-spread-card:focus-visible { outline: 2px solid #efd39e; outline-offset: 1px; }
@media (max-width: 1150px) { .desktop-spread { left: max(14px, calc(var(--sidebar-width) + 12px)); right: 14px; padding: 12px; } .desktop-spread-grid { gap: 8px; } }
@media (prefers-reduced-motion: reduce) { .desktop-spread { animation: none; } }
@keyframes desktop-spread-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 699px), (orientation: landscape) and (max-width: 950px) and (max-height: 500px) { .desktop-spread, .desktop-spread-toggle { display: none !important; } }

/* La grille des indices reste active au-dessus du bureau assombri. */
body.clue-mode-open .desktop-spread-toggle[data-spread-pile="clue"] { filter: none !important; pointer-events: auto !important; }

/* Peu d'indices : conserver des cartes de taille normale et ajuster le plateau. */
.desktop-spread.is-clue-spread,
body.board-focus-mode .desktop-spread.is-clue-spread {
  --spread-sidebar: var(--sidebar-width);
  --clue-card-width: clamp(60px, min(calc((100vw - var(--spread-sidebar) - 132px) / 7), 28vh), 180px);
  left: calc(var(--spread-sidebar) + (100vw - var(--spread-sidebar)) / 2);
  right: auto; bottom: auto; translate: -50% 0;
  width: max-content; max-width: calc(100vw - var(--spread-sidebar) - 40px);
  max-height: calc(100dvh - var(--topbar-height) - 48px);
}
body.board-focus-mode .desktop-spread.is-clue-spread {
  --spread-sidebar: 0px;
  max-height: calc(100dvh - 36px);
}
.desktop-spread.is-clue-spread .desktop-spread-grid {
  flex: 0 1 auto; justify-content: center;
  grid-template-columns: repeat(var(--spread-columns), var(--clue-card-width));
  grid-template-rows: repeat(var(--spread-rows), calc(var(--clue-card-width) * 1.388 + 36px));
}

/* Un double-clic d'ouverture ne doit pas sélectionner le caractère de fermeture. */
.viewer-controls {
  -webkit-user-select: none;
  user-select: none;
}
.viewer-close:focus:not(:focus-visible) { outline: none; }
.viewer-close:focus-visible {
  outline: 1px solid var(--gold-soft);
  outline-offset: 3px;
}

/* Le lien Dotation reprend strictement la typographie et l'alignement des liens Informations. */
.sidebar .sidebar-legal .sidebar-dotation-link {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: center;
  column-gap: 7px;
  width: 100%;
  min-height: 27px;
  padding: 3px 2px;
  border: 0;
  background: transparent;
  color: rgba(57,37,20,.88);
  font: inherit;
  font-size: 11px;
  line-height: 1.25;
  text-shadow: 0 1px rgba(255,250,226,.3);
  text-align: left;
  cursor: pointer;
}
.sidebar .sidebar-legal .sidebar-dotation-link:hover,
.sidebar .sidebar-legal .sidebar-dotation-link:focus-visible {
  color: #2d1d10;
  transform: translateX(2px);
}


.sidebar .sidebar-legal .sidebar-dotation-link .legal-picto { display: block; width: 18px; height: 18px; object-fit: contain; opacity: .78; filter: sepia(.12) saturate(.78); transition: opacity .18s, transform .18s; }
.sidebar .sidebar-legal .sidebar-dotation-link:hover .legal-picto, .sidebar .sidebar-legal .sidebar-dotation-link:focus-visible .legal-picto { opacity: 1; transform: scale(1.05); }

/* Agrandir réellement le coffre sans déplacer le texte ni les autres pictogrammes. */
.sidebar .sidebar-legal .sidebar-dotation-link .legal-picto { width: 22px; height: 22px; max-width: none; object-fit: contain; transform: translate(-2px, -1px); }
.sidebar .sidebar-legal .sidebar-dotation-link:hover .legal-picto, .sidebar .sidebar-legal .sidebar-dotation-link:focus-visible .legal-picto { transform: translate(-2px, -1px) scale(1.05); }

/* Journal: distinguish the favorite total from annotation status filters. */
.notebook-favorite-total { display: flex; align-items: center; gap: 10px; color: var(--gold-soft); font-size: 13px; }
.notebook-status-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 16px; color: var(--gold-soft); font-size: 13px; }
.notebook-status-filter select { max-width: 100%; padding: 10px 12px; border: 1px solid rgba(185,139,66,.5); border-radius: 4px; background: #17120d; color: #ead6b1; font: inherit; }
.notebook-status-filter select:focus-visible { outline: 2px solid #efd39e; outline-offset: 2px; }

/* Tablettes uniquement : aucun changement de géométrie du bureau ni du décor. */
@media (min-width: 700px) and (min-height: 600px) and (pointer: coarse) and (hover: none) {
  #board > .cartographer-letter-wrap { translate: -110px -20px; }
  #board .cartographer-letter-dismiss { top: auto; bottom: 5px; right: 35px; }
  body #openCartographerHelp.cartographer-help-trigger {
    bottom: calc(74px + env(safe-area-inset-bottom, 0px));
  }
  #board > .enigma-card.tablet-closed-pile {
    width: calc(var(--card-width) * .9);
    height: calc(var(--card-height) * .9);
  }
  #board > .pile-shelve:is([data-pile="visual"], [data-pile="textual"], [data-spread-pile="visual"], [data-spread-pile="textual"]) {
    width: 44px;
    height: 44px;
  }
}
.tablet-rotation-veil[hidden] { display: none; }
.tablet-rotation-veil {
  position: fixed;
  z-index: 900000;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 22px;
  padding: 28px;
  box-sizing: border-box;
  background: rgba(8, 7, 5, .94);
  color: #ecd4a1;
  text-align: center;
  touch-action: none;
}
.tablet-rotation-veil svg { width: 66px; height: 66px; color: var(--gold-soft); }
.tablet-rotation-veil p {
  max-width: 30ch;
  margin: 0;
  font: 22px/1.55 Georgia, serif;
  text-wrap: balance;
}