/* ==========================================================================
   STYLE-MEDIA.CSS — VERSION RÉORGANISÉE
   --------------------------------------------------------------------------
   Ordre de cascade :
   1. écrans compacts et tablettes
   2. tablettes tactiles
   3. téléphones, base commune
   4. téléphone portrait
   5. téléphone paysage
   6. accessibilité

   Les déclarations existantes ont été conservées. Les blocs partageant
   exactement la même condition @media ont été réunis afin de réduire les
   contradictions et de rendre les priorités lisibles.
   ========================================================================== */


/* ==========================================================================
   ÉCRANS COMPACTS ET TABLETTES
   Règles générales, du grand écran compact jusqu’aux tablettes.
   ========================================================================== */

@media (max-height: 760px) and (min-width: 761px) {
.teaser-challenge-trigger.cartographer-letter {
    right: 42px;
    top: 38px;
    width: clamp(96px, 8.5vw, 126px);
  }
}

@media (max-width: 1380px) {
.topbar {
    min-height: 78px;
    padding-left: 24px;
    gap: 18px;
  }
  .topbar h1 { font-size: clamp(25px, 2vw, 33px); }
  .topbar-motto {
    grid-template-columns: 84px max-content 84px;
    width: min(470px, 100%);
  }
  .topbar-motto-line { width: 84px; }
  .top-actions { flex-wrap: wrap; max-width: 510px; }
  .top-actions .button { min-width: 132px; }
}

@media (max-width: 1150px) {
.board { width: 1120px; }

.board { width: 1120px; }

.board { width: 1120px; height: 1100px; }
  .board-wrap { overflow: auto; }

:root {
    --visual-pile-x: 19%;
    --textual-pile-x: 50%;
    --clue-pile-x: 81%;
  }
}

@media (min-width: 841px) and (max-width: 1100px) and (orientation: landscape) {
/* Tablettes en paysage : bureau plus large et cartes plus généreuses. */

:root {
    --sidebar-width: 184px;
    --card-width: 190px;
    --card-height: 279px;
    --pile-base-y: 205px;
    --fan-center-y: 400px;
    --fan-radius-max: 300px;
    --fan-y-radius: 135px;
    --fan-y-offset: 118px;
  }

  .board {
    min-width: 760px;
    height: 780px;
    min-height: 780px;
  }

  .topbar {
    grid-template-columns: minmax(270px, 1fr) minmax(360px, auto);
    align-items: center;
    gap: 10px 14px;
  }
  .topbar-identity { grid-column: 1; }
  .top-actions {
    grid-column: 2;
    grid-template-columns: repeat(3, minmax(110px, 1fr));
  }
}

@media (max-width: 1050px) {
.notebook-workspace{grid-template-columns:1fr}.notebook-free-panel{position:relative;top:auto;min-height:0}.notebook-free-panel #notebookContent{min-height:420px}.notebook-card-list{grid-template-columns:repeat(2,minmax(0,1fr))}

.notebook-workspace{grid-template-columns:1fr}.notebook-free-panel{position:relative}.notebook-free-panel #notebookContent{min-height:420px}

.notebook-workspace{grid-template-columns:1fr}.notebook-consign-control{align-items:flex-end;flex-direction:column}.notebook-save-state{text-align:right}

.topbar {
    flex-direction: column;
    align-items: stretch;
    gap: 11px;
    padding: 12px 18px 11px;
  }
  .top-actions {
    width: 100%;
    max-width: none;
    justify-content: flex-start;
  }

/* ==========================================================================
   PHASE 2E — FENÊTRES ET PAGES SECONDAIRES
   Confort de lecture, formulaires tactiles et composition verticale.
   Le bureau principal n'est pas modifié par cette phase.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Tablettes et écrans intermédiaires
   -------------------------------------------------------------------------- */

.content-page,
  .echoes-page,
  .notebook-page,
  .account-page,
  .hypothesis-page,
  .legal-page,
  .payment-screen,
  .welcome-page {
    background-attachment: scroll !important;
  }

  .echoes-shell,
  .notebook-shell,
  .account-shell,
  .hypothesis-shell {
    width: min(100% - 34px, 980px);
  }

  .echoes-header,
  .notebook-header,
  .account-header,
  .hypothesis-header {
    gap: 20px;
  }

  .echo-compose,
  .notebook-book,
  .notebook-section,
  .account-card,
  .hypothesis-submit-card,
  .hypothesis-history {
    box-shadow:
      0 18px 48px rgba(0, 0, 0, .42),
      inset 0 0 0 1px rgba(255, 255, 255, .025);
  }

  .notebook-workspace {
    grid-template-columns: 1fr;
  }

  .notebook-free-panel {
    position: relative;
    top: auto;
    min-height: 0;
  }

  .notebook-free-panel #notebookContent {
    min-height: 430px;
  }

  .notebook-card-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .payment-panel {
    width: min(720px, calc(100vw - 34px));
  }

  .legal-main {
    min-width: 0;
  }
}

@media (max-width: 900px) {
.app-shell { grid-template-columns: 1fr; }
  .sidebar { display: none; }
  .topbar { align-items: flex-start; flex-direction: column; }
  .bottom-bar { flex-direction: column; }

.workspace { grid-template-rows: auto minmax(650px, 1fr) auto; }
  .topbar { min-height: auto; padding: 14px 18px; }
  .board-wrap { overflow: auto; }
  .board { width: 1120px; height: 1100px; }



.hypothesis-admin-controls {
    grid-template-columns: 1fr 1fr;
  }

  .hypothesis-search-field {
    grid-column: 1 / -1;
  }

.topbar { min-height: auto; padding: 12px 16px 11px; }
  .topbar h1 { font-size: 24px; }
  .topbar-motto {
    grid-template-columns: minmax(24px, 64px) auto minmax(24px, 64px);
    width: 100%;
  }
  .topbar-motto-line { width: 100%; }
  .topbar-motto p { font-size: 11px; white-space: normal; }
  .top-actions .button { min-width: 126px; min-height: 38px; }

/* ==========================================================================
   PHASE 2 · BLOC 1 — STRUCTURE GÉNÉRALE ET NAVIGATION MOBILE
   Le bureau et la géométrie des cartes ne sont pas encore remaniés ici.
   ========================================================================== */

html,
  body {
    width: 100%;
    min-width: 0;
  }

  body.mobile-nav-open { overflow: hidden; }

  .app-shell {
    position: relative;
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
    min-width: 0;
  }

  .workspace { width: 100%; min-width: 0; }

  .sidebar {
    display: flex;
    position: fixed;
    z-index: 12020;
    inset: 0 auto 0 0;
    width: min(86vw, 330px);
    height: 100dvh;
    max-height: 100dvh;
    padding: 20px 18px 28px;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transform: translateX(-104%);
    transition: transform .28s cubic-bezier(.2,.75,.2,1), opacity .2s ease, visibility 0s linear .28s;
    box-shadow: 24px 0 70px rgba(0,0,0,.72), inset -1px 0 rgba(210,173,112,.15);
  }

  body.mobile-nav-open .sidebar {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transform: translateX(0);
    transition-delay: 0s;
  }

  .mobile-nav-backdrop {
    display: block;
    position: fixed;
    z-index: 12010;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background: rgba(0,0,0,.68);
    backdrop-filter: blur(2px);
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity .22s ease, visibility 0s linear .22s;
  }

  body.mobile-nav-open .mobile-nav-backdrop {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transition-delay: 0s;
  }

  .mobile-nav-close {
    display: grid;
    place-items: center;
    position: absolute;
    z-index: 2;
    top: 8px;
    right: 9px;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 0;
    background: transparent;
    color: rgba(232,223,207,.72);
    font-size: 32px;
    line-height: 1;
    cursor: pointer;
  }

  .mobile-nav-close:hover,
  .mobile-nav-close:focus-visible { color: var(--gold-soft); }

  .mobile-nav-toggle {
    display: inline-grid;
    flex: 0 0 44px;
    place-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid rgba(198,149,67,.58);
    border-radius: 2px;
    color: var(--gold-soft);
    background: rgba(10,8,6,.78);
    box-shadow: inset 0 0 0 1px rgba(255,225,165,.035), 0 5px 14px rgba(0,0,0,.28);
    cursor: pointer;
  }

  .mobile-nav-toggle span {
    display: block;
    width: 20px;
    height: 1px;
    background: currentColor;
    box-shadow: 0 1px 2px rgba(0,0,0,.68);
  }

  .topbar {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    align-items: start;
    gap: 10px 12px;
    padding: 11px 12px 12px;
  }

  .topbar-identity { grid-column: 2; align-self: center; }
  .topbar h1 { font-size: clamp(20px, 5.7vw, 26px); line-height: 1.12; }

  .topbar-motto {
    grid-template-columns: minmax(18px, 44px) minmax(0, auto) minmax(18px, 44px);
    gap: 8px;
    margin-top: 6px;
  }

  .topbar-motto p { font-size: 10px; white-space: normal; }

  .top-actions {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    gap: 8px;
  }

  .top-actions .button {
    width: 100%;
    min-width: 0;
    min-height: 42px;
    padding-inline: 10px;
  }

  .board-wrap {
    width: 100%;
    max-width: 100%;
    padding: 8px;
    overflow-x: auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .bottom-bar {
    min-height: 0;
    padding: 8px 12px;
    gap: 5px;
    font-size: 9px;
    line-height: 1.4;
  }

  .sidebar .brand { padding-right: 34px; }

  .main-nav .nav-item {
    min-height: 44px;
    display: flex;
    align-items: center;
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .shelf-game { min-height: 52px; }

  .sidebar-legal a {
    min-height: 36px;
    display: flex;
    align-items: center;
    padding: 7px 0;
    font-size: 11px;
  }
}

@media (max-width: 800px) {
.notebook-page{padding:18px}.notebook-header{align-items:stretch;flex-direction:column}.notebook-book{padding:24px 20px}.notebook-book:after{display:none}
}

@media (max-width: 760px) {
.topbar h1 .restricted-access {
    margin-left: .08em;
    font-size: .54em;
    letter-spacing: .09em;
  }

.account-page,
  .hypothesis-page {
    background-size: auto, auto, auto 100vh;
    background-attachment: scroll;
  }

  .account-page { --page-desk-position: 24% top; }
  .hypothesis-page { --page-desk-position: 76% top; }

.teaser-challenge-dialog{padding:25px 16px 20px}
  .teaser-challenge-layout{grid-template-columns:1fr}
  .teaser-challenge-image-button{max-width:350px;margin:auto}
  .teaser-challenge-trigger.cartographer-letter{left:auto;right:18px;top:20px;bottom:auto;width:min(112px,30vw)}
  .cartographer-letter-caption{
    right:-18px;
    top:calc(100% - 8px);
    bottom:auto;
    width:142px;
    max-width:none;
    padding:5px 8px 4px;
  }
  .cartographer-letter-caption strong{font-size:8.5px}
  .cartographer-letter-caption small{font-size:5.4px}

.visitor-intro {
    top: 12px;
    width: calc(100% - 16px);
    margin: 0;
    padding: 15px 22px 14px;
  }

  .visitor-intro h2 {
    font-size: clamp(18px, 5.8vw, 23px);
  }

  .visitor-intro-echo {
    font-size: 13px !important;
  }

  .visitor-intro p {
    font-size: 13px;
    line-height: 1.48;
  }

  .visitor-intro-action {
    width: 100%;
    max-width: 310px;
  }
}

@media (max-width: 720px) {
.cartographer-help-trigger { right: 14px; bottom: 58px; }
  .cartographer-help-dialog { padding: 31px 21px 24px; }
  .cartographer-help-dialog h2 { font-size: 24px; }
  .cartographer-help-grid { grid-template-columns: 1fr; }
  .cartographer-help-section dl > div { grid-template-columns: 96px minmax(0, 1fr); }

.hypothesis-shell { width: min(100% - 22px, 1120px); padding-top: 24px; }
  .hypothesis-header, .hypothesis-section-heading, .hypothesis-entry > header, .hypothesis-admin-card > header, .hypothesis-submit-row { align-items: stretch; flex-direction: column; }
  .hypothesis-header .button { align-self: flex-start; }
  .hypothesis-status, .hypothesis-availability { align-self: flex-start; }
  .hypothesis-submit-row .button { width: 100%; }
}

/* ==========================================================================
   TABLETTES TACTILES
   Règles explicitement réservées aux tablettes et aux pointeurs tactiles.
   ========================================================================== */

@media (min-width: 700px) and (max-width: 1100px) {
/* ==========================================================================
   PHASE 2A — TABLETTE TACTILE
   La tablette conserve le bureau complet et la navigation latérale.
   La caméra se rapproche, les cartes et les zones tactiles gagnent en présence.
   ========================================================================== */

:root {
    --sidebar-width: 178px;
    --topbar-height: 116px;
    --footer-height: 30px;
    --card-width: 170px;
    --card-height: 250px;
    --viewer-card-width: min(58vw, 400px);
    --viewer-card-height: min(85vw, 588px);
    --pile-base-y: 190px;
    --fan-center-y: 370px;
    --fan-radius-max: 270px;
    --fan-y-radius: 126px;
    --fan-y-offset: 112px;
    --fan-span-max: 76deg;
  }

  html,
  body {
    min-width: 0;
    width: 100%;
    overflow-x: hidden;
  }

  body.mobile-nav-open { overflow: auto; }

  .app-shell {
    display: grid;
    grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
    width: 100%;
    min-height: 100vh;
  }

  .sidebar {
    display: flex;
    position: relative;
    inset: auto;
    z-index: 20;
    width: auto;
    height: 100vh;
    max-height: 100vh;
    padding: 15px 12px 15px;
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transform: none;
    transition: none;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    box-shadow: 8px 0 28px rgba(0,0,0,.30), inset -1px 0 rgba(210,173,112,.12);
  }

  .mobile-nav-toggle,
  .mobile-nav-close,
  .mobile-nav-backdrop {
    display: none !important;
  }

  .sidebar .brand {
    padding: 0 0 11px;
  }

  .brand-mark { margin-bottom: 4px; }
  .brand-compass { width: 50px; height: 50px; }
  .brand-title { font-size: 15px; line-height: 1.32; letter-spacing: .18em; }
  .brand-subtitle { margin-top: 4px; font-size: 7px; letter-spacing: .17em; }

  .main-nav { gap: 1px; }
  .main-nav .nav-item {
    min-height: 39px;
    padding: 8px 7px 8px 14px;
    font-size: 9px;
    line-height: 1.28;
  }
  .nav-item:hover,
  .nav-item.active { padding-left: 17px; }

  .game-shelf { margin-top: 3px; }
  .shelf-title { margin-bottom: 7px; font-size: 8px; }
  .shelf-game {
    min-height: 48px;
    padding: 8px 7px;
    gap: 7px;
  }
  .shelf-game-icon { font-size: 16px; }
  .shelf-game strong { font-size: 9px; }
  .shelf-status { font-size: 7px; line-height: 1.25; }

  .sidebar-legal {
    margin-top: auto;
    padding-top: 12px;
  }
  .sidebar-legal-title { font-size: 8px; }
  .sidebar-legal a {
    min-height: 29px;
    padding: 5px 0;
    font-size: 8px;
    line-height: 1.3;
  }

  .workspace {
    width: 100%;
    min-width: 0;
    min-height: 100vh;
    grid-template-rows: auto minmax(0, 1fr) var(--footer-height);
  }

  .topbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 8px;
    min-height: 0;
    padding: 10px 14px 9px;
  }

  .topbar-identity {
    grid-column: 1;
    width: 100%;
    padding: 2px 10px 3px 12px;
  }

  .topbar h1 {
    font-size: clamp(20px, 3.1vw, 27px);
    line-height: 1.05;
    white-space: normal;
  }

  .topbar h1 .restricted-access {
    min-height: 27px;
    padding: 5px 9px 4px;
  }

  .topbar-motto {
    grid-template-columns: minmax(30px, 70px) auto minmax(30px, 70px);
    margin-top: 4px;
  }
  .topbar-motto p { font-size: 9px; white-space: nowrap; }

  .top-actions {
    grid-column: 1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
    gap: 6px;
  }

  .top-actions .button {
    width: 100%;
    min-width: 0;
    min-height: 39px;
    padding: 7px 7px 6px;
    font-size: 8px;
    letter-spacing: .09em;
  }
  .top-actions .button-icon { font-size: 13px; }

  .board-wrap {
    width: 100%;
    max-width: 100%;
    min-height: 0;
    padding: 10px;
    overflow: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  .board {
    width: 100%;
    min-width: 590px;
    height: 760px;
    min-height: 760px;
    margin: 0;
    background-position: center top;
  }

  .pile-shelve {
    width: 42px;
    height: 42px;
    transform: scale(1);
  }
  .visual-pile-shelve { left: calc(var(--visual-pile-x) + 108px); }
  .textual-pile-shelve { left: calc(var(--textual-pile-x) + 108px); }
  .clue-pile-shelve { left: calc(var(--clue-pile-x) + 108px); }

  .cartographer-help-trigger {
    width: 46px;
    height: 46px;
    font-size: 21px;
  }

  

  .viewer-card,
  .viewer-card .enigma-card {
    width: var(--viewer-card-width);
    height: var(--viewer-card-height);
  }

  .viewer-controls button,
  .viewer-close,
  .viewer-return {
    min-width: 44px;
    min-height: 44px;
  }

  .bottom-bar {
    min-height: var(--footer-height);
    padding: 6px 10px;
    font-size: 8px;
  }

  /* Le cartouche visiteur reste lisible sans engloutir le bureau. */
  .visitor-intro {
    top: 28px;
    width: min(690px, calc(100% - 28px));
    padding: 15px 28px 14px;
  }
  .visitor-intro h2 { font-size: clamp(19px, 2.5vw, 24px); }
  .visitor-intro p { font-size: 13px; line-height: 1.72; }
  .visitor-intro-action { min-height: 44px; }
}

@media (min-width: 700px) and (max-width: 840px) and (orientation: portrait) {
/* iPad Mini et tablettes étroites en portrait. */

:root {
    --sidebar-width: 166px;
    --card-width: 158px;
    --card-height: 232px;
    --pile-base-y: 178px;
    --fan-center-y: 350px;
    --fan-radius-max: 235px;
    --fan-y-radius: 112px;
    --fan-y-offset: 102px;
    --visual-pile-x: 18%;
    --textual-pile-x: 50%;
    --clue-pile-x: 82%;
    --visual-fan-center-x: 27%;
    --textual-fan-center-x: 50%;
    --clue-fan-center-x: 73%;
  }

  .sidebar { padding-inline: 10px; }
  .brand-compass { width: 46px; height: 46px; }
  .brand-title { font-size: 14px; }

  .topbar { padding-inline: 11px; }
  .topbar h1 { font-size: clamp(19px, 3vw, 23px); }
  .top-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .top-actions .button:last-child:nth-child(odd) { grid-column: 1 / -1; }

  .board-wrap { padding: 8px; }
  .board {
    min-width: 570px;
    height: 735px;
    min-height: 735px;
  }

  .visual-pile-shelve { left: calc(var(--visual-pile-x) + 96px); }
  .textual-pile-shelve { left: calc(var(--textual-pile-x) + 96px); }
  .clue-pile-shelve { left: calc(var(--clue-pile-x) + 96px); }

  .visitor-intro {
    width: calc(100% - 22px);
    padding-inline: 22px;
  }
}

@media (min-width: 700px) and (max-width: 1100px) and (pointer: coarse) {
.button,
  .nav-item,
  .shelf-game,
  .pile-shelve,
  .cartographer-help-trigger {
    touch-action: manipulation;
  }

  .enigma-card { touch-action: none; }
}

@media (max-width: 699px), (pointer: coarse) and (max-width: 1100px) {
/* ==========================================================================
   PHASE 2C — INTERACTIONS TACTILES ET FINITIONS
   ========================================================================== */

.enigma-card,
  .card-face,
  .card-image {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
  }

  .enigma-card {
    transform-origin: 50% 62%;
    transition:
      left .32s cubic-bezier(.22,.78,.24,1),
      top .32s cubic-bezier(.22,.78,.24,1),
      transform .24s ease,
      filter .2s ease,
      box-shadow .2s ease;
  }

  .enigma-card.dragging,
  .enigma-card.dragging-deck {
    transition: filter .12s ease, box-shadow .12s ease;
    filter: brightness(1.045) saturate(1.05);
  }

  body.touch-card-dragging {
    cursor: grabbing;
  }

  body.touch-card-dragging .board-wrap {
    overscroll-behavior: none;
  }

  .viewer-stage {
    touch-action: none;
    overscroll-behavior: contain;
  }

  .viewer-stage.is-pinching {
    touch-action: none;
    cursor: zoom-in;
  }

  .viewer-card {
    transform-origin: center center;
    transition: transform .16s ease-out;
    will-change: transform;
  }

  .viewer-stage.is-pinching .viewer-card {
    transition: none;
  }
}

/* ==========================================================================
   TÉLÉPHONES — BASE COMMUNE
   Téléphone portrait et règles communes avant les variantes d’orientation.
   ========================================================================== */

@media (pointer: coarse) {
/* Double-toucher tactile sur une carte sortie : retour visuel discret. */

.enigma-card:not(.stacked):active {
    filter: brightness(1.06);
  }

/* ==========================================================================
   PHASE 2D — STABILISATION DES INTERACTIONS TACTILES
   ========================================================================== */

.enigma-card,
  .enigma-card * {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
  }

  .enigma-card.is-touch-held {
    filter: brightness(1.045);
  }

  .enigma-card.dragging,
  .dragging-deck {
    transition: none !important;
    will-change: left, top, transform;
  }

  body.touch-card-dragging,
  body.touch-card-dragging .board-wrap {
    overscroll-behavior: none;
  }

  body.touch-card-dragging .board-wrap {
    scroll-behavior: auto !important;
    scrollbar-color: rgba(218, 172, 92, .72) rgba(8, 7, 6, .72);
  }

  .pile-shelve,
  .cartographer-help-trigger,
  .viewer-controls button,
  .mobile-nav-toggle,
  .mobile-nav-close {
    min-width: 44px;
    min-height: 44px;
  }

  .viewer-stage.is-pinching {
    touch-action: none;
    cursor: grabbing;
  }
}

@media (max-width: 700px) {
.threshold-dialog{width:calc(100vw - 16px);max-height:calc(100vh - 16px);padding:22px 18px 20px}
  
  .threshold-dialog h2{font-size:25px}
  .threshold-list{grid-template-columns:1fr;max-width:480px}
  .threshold-list li{font-size:11px}
  .threshold-pay,.threshold-donate{min-width:220px}
  .entry-message strong{font-size:27px}

.threshold-dialog{width:calc(100vw - 20px);max-height:calc(100vh - 20px);padding:24px 20px 24px}.entry-message strong{font-size:27px}

.echoes-page{padding:18px}.echoes-header,.echo-form-footer,.admin-header{align-items:stretch;flex-direction:column}.echo-compose{padding:21px}.echo-compose-heading{align-items:flex-start;flex-direction:column}.echo-form-footer .button{width:100%;justify-content:center}.echo-card{padding:19px}.admin-header-actions{justify-content:flex-start}.moderation-card header{flex-direction:column}.moderation-actions{justify-content:stretch}.moderation-actions .button{flex:1 1 100%;justify-content:center}

.echo-options{width:100%}

.echo-compose-launch{margin-top:22px}
  .echo-compose-toggle{width:100%;min-width:0}
  .echo-compose-panel .echo-compose{margin-top:16px}

.payment-screen { padding: 12px; background-attachment: scroll; }
  .payment-panel { padding: 34px 21px 29px; }
  .payment-detail { grid-template-columns: 36px 1fr; gap: 12px; padding: 15px; }
  .payment-detail-icon { width: 34px; height: 34px; }
  .payment-actions .button,
  .payment-submit { width: 100%; min-width: 0; }
  
}

@media (max-width: 699px) {
/* ==========================================================================
   VISITEUR — MODALE D'ACCÈS RÉSERVÉ / PETITS ÉCRANS
   ========================================================================== */

.visitor-restricted-dialog {
    width: calc(100vw - 22px);
    max-height: calc(100dvh - 22px);
    padding: 37px 22px 26px;
  }

  .visitor-restricted-dialog h2 {
    font-size: clamp(22px, 7vw, 28px);
  }

  .visitor-restricted-intro {
    font-size: 14px;
  }

  .visitor-restricted-note {
    font-size: 12px;
    margin-bottom: 20px;
  }

  .visitor-restricted-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 9px;
  }

  .visitor-restricted-actions .button {
    width: 100%;
    min-width: 0;
    min-height: 44px;
  }

/* ==========================================================================
   PHASE 2B — TÉLÉPHONE TACTILE
   Le téléphone ne montre plus le bureau de loin : la caméra se rapproche.
   Les deux jeux occupent le premier plan et la navigation reste en tiroir.
   ========================================================================== */

:root {
    --topbar-height: auto;
    --footer-height: 28px;

    /* Cartes volontairement très présentes : environ un tiers de l'écran. */
    --card-width: clamp(128px, 35vw, 152px);
    --card-height: clamp(188px, 51.5vw, 223px);

    --viewer-card-width: min(88vw, 390px);
    --viewer-card-height: min(129.3vw, 573px);

    /* Deux jeux côte à côte, cadrés comme un gros plan sur le bureau. */
    --visual-pile-x: 24%;
    --textual-pile-x: 76%;
    --clue-pile-x: 50%;

    --pile-base-y: 174px;
    --clue-pile-y: 500px;

    /* Éventails plus fermés et compatibles avec la largeur du doigt. */
    --visual-fan-center-x: 28%;
    --textual-fan-center-x: 72%;
    --clue-fan-center-x: 50%;
    --fan-center-y: 350px;
    --clue-fan-center-y: 674px;
    --fan-radius-max: 146px;
    --fan-radius-ratio: .34;
    --fan-y-radius: 82px;
    --fan-y-offset: 68px;
    --fan-span-max: 62deg;
    --fan-span-min: 15deg;

    --pile-stack-x-step: 1.8px;
    --pile-stack-y-step: 1.3px;
  }

  html,
  body {
    width: 100%;
    min-width: 0;
    min-height: 100%;
    overflow-x: hidden;
  }

  body {
    min-height: 100dvh;
    background: #070706;
  }

  .app-shell,
  .workspace {
    width: 100%;
    min-width: 0;
    min-height: 100dvh;
  }

  .workspace {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
  }

  /* Bandeau compact, pensé comme une barre d'application. */
  .topbar {
    position: relative;
    z-index: 80;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: center;
    gap: 8px 10px;
    min-height: 0;
    padding: max(8px, env(safe-area-inset-top)) 10px 9px;
    background:
      linear-gradient(180deg, rgba(14,13,11,.985), rgba(8,8,7,.985));
    box-shadow:
      0 8px 22px rgba(0,0,0,.38),
      inset 0 -1px rgba(185,139,66,.20);
  }

  .mobile-nav-toggle {
    grid-column: 1;
    grid-row: 1;
    align-self: start;
    width: 42px;
    height: 42px;
  }

  .topbar-identity {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    min-width: 0;
    padding: 1px 2px 0;
  }

  .topbar h1 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 7px;
    margin: 0;
    font-size: clamp(17px, 5.1vw, 22px);
    line-height: 1.05;
    letter-spacing: .015em;
  }

  .topbar h1 .restricted-access {
    min-height: 25px;
    padding: 4px 8px 3px;
    font-size: 8px;
    letter-spacing: .10em;
  }

  .topbar-motto {
    grid-template-columns: minmax(18px, 42px) minmax(0, auto) minmax(18px, 42px);
    gap: 6px;
    margin-top: 5px;
  }

  .topbar-motto p {
    max-width: 100%;
    font-size: 8px;
    line-height: 1.15;
    white-space: nowrap;
  }

  /* Les actions restent visibles sans voler la scène aux cartes. */
  .top-actions {
    grid-column: 1 / -1;
    grid-row: 2;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    width: 100%;
  }

  .top-actions .button {
    min-width: 0;
    min-height: 38px;
    padding: 6px 5px 5px;
    font-size: 7px;
    line-height: 1.15;
    letter-spacing: .07em;
  }

  .top-actions .button-icon {
    font-size: 12px;
  }

  /* Gros plan sur le bureau, sans largeur desktop artificielle. */
  .board-wrap {
    position: relative;
    width: 100%;
    max-width: 100%;
    min-height: 0;
    padding: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
    background: #100b06;
  }

  .board {
    width: 100%;
    min-width: 0;
    height: 790px;
    min-height: 790px;
    margin: 0;
    border-right: 0;
    border-left: 0;
    border-radius: 0;
    background-size: auto 100%;
    background-position: 50% 0;
    box-shadow:
      inset 0 20px 35px rgba(0,0,0,.18),
      inset 0 -28px 58px rgba(0,0,0,.36);
  }

  .board::before {
    background:
      radial-gradient(ellipse 190px 170px at 25% 42%, rgba(255,196,110,.16), transparent 69%),
      radial-gradient(ellipse 190px 170px at 75% 42%, rgba(255,196,110,.16), transparent 69%),
      radial-gradient(ellipse 92% 65% at 50% 44%, transparent 38%, rgba(0,0,0,.20) 100%),
      linear-gradient(90deg, rgba(0,0,0,.16), transparent 14%, transparent 86%, rgba(0,0,0,.16)),
      linear-gradient(180deg, rgba(0,0,0,.10), transparent 18%, transparent 76%, rgba(0,0,0,.30));
  }

  .enigma-card {
    border-radius: 6px;
    box-shadow:
      0 15px 28px rgba(0,0,0,.56),
      0 0 0 1px rgba(238,211,158,.05);
    touch-action: none;
  }

  .enigma-card.dragging {
    box-shadow:
      0 25px 46px rgba(0,0,0,.72),
      0 0 22px rgba(209,162,83,.12);
  }

  /* Les commandes liées aux piles deviennent de vraies cibles tactiles. */
  .pile-shelve {
    width: 44px;
    height: 44px;
    font-size: 20px;
    border-radius: 50%;
  }

  .visual-pile-shelve {
    left: calc(var(--visual-pile-x) + (var(--card-width) * .58));
  }

  .textual-pile-shelve {
    left: calc(var(--textual-pile-x) + (var(--card-width) * .58));
  }

  .clue-pile-shelve {
    left: calc(var(--clue-pile-x) + (var(--card-width) * .58));
  }

  .cartographer-help-trigger {
    width: 46px;
    height: 46px;
    right: 12px;
    bottom: 14px;
    font-size: 21px;
    touch-action: manipulation;
  }

  /* La visionneuse devient une lecture plein écran, pas une petite fenêtre. */
  .viewer {
    width: 100vw;
    height: 100dvh;
    max-width: none;
    max-height: none;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background:
      radial-gradient(circle at 50% 34%, rgba(130,84,28,.18), transparent 44%),
      rgba(5,5,4,.985);
  }

  .viewer::backdrop {
    background: rgba(0,0,0,.92);
  }

  .viewer-stage {
    width: 100%;
    height: 100%;
    min-height: 0;
    padding:
      calc(62px + env(safe-area-inset-top))
      12px
      calc(22px + env(safe-area-inset-bottom));
    display: grid;
    place-items: center;
    overflow: auto;
  }

  .viewer-card,
  .viewer-card .enigma-card {
    width: var(--viewer-card-width);
    height: var(--viewer-card-height);
    max-width: calc(100vw - 24px);
    max-height: calc(100dvh - 100px);
  }

  .viewer-controls {
    top: max(8px, env(safe-area-inset-top));
    right: 8px;
    gap: 6px;
  }

  .viewer-controls button,
  .viewer-close,
  .viewer-return {
    min-width: 44px;
    min-height: 44px;
  }

  .note-panel {
    position: fixed;
    inset: auto 0 0;
    width: 100%;
    max-width: none;
    max-height: 78dvh;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    border-radius: 14px 14px 0 0;
    padding-bottom: max(18px, env(safe-area-inset-bottom));
    box-shadow: 0 -24px 64px rgba(0,0,0,.72);
  }

  /* L'introduction visiteur ne doit pas masquer tout le gros plan. */
  .visitor-intro {
    top: 18px;
    width: calc(100% - 20px);
    max-height: calc(100% - 36px);
    padding: 14px 18px 13px;
    overflow-y: auto;
  }

  .visitor-intro h2 {
    font-size: clamp(18px, 5.6vw, 23px);
    line-height: 1.2;
  }

  .visitor-intro p {
    font-size: 12px;
    line-height: 1.65;
  }

  .visitor-intro-action {
    min-height: 44px;
  }

  /* Les fenêtres deviennent des feuilles plein écran ou quasi plein écran. */
  .login-dialog,
  .threshold-dialog,
  .confirm-dialog,
  .cartographer-help-dialog,
  .teaser-challenge-dialog {
    width: calc(100vw - 18px);
    max-width: none;
    max-height: calc(100dvh - 18px);
    margin: auto;
    overflow-y: auto;
  }

  .login-dialog {
    padding: 34px 22px 25px;
  }

  .cartographer-help-dialog,
  .teaser-challenge-dialog {
    padding-inline: 18px;
  }

  .cartographer-help-grid,
  .teaser-challenge-layout {
    grid-template-columns: 1fr;
  }

  .threshold-dialog {
    padding-inline: 18px;
  }

  /* Le pied de page devient une consigne tactile concise. */
  .bottom-bar {
    min-height: 28px;
    padding: 6px 10px max(6px, env(safe-area-inset-bottom));
    font-size: 0;
    line-height: 1.25;
    text-align: center;
  }

  .bottom-bar span {
    display: none;
  }

  .bottom-bar::before {
    content: "Touchez un paquet pour l’ouvrir. Faites glisser une carte pour la sortir.";
    color: rgba(224,210,187,.60);
    font-size: 8px;
    letter-spacing: .03em;
  }

  .button,
  .nav-item,
  .shelf-game,
  .pile-shelve,
  .cartographer-help-trigger {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }

.board-wrap {
    scroll-snap-type: none;
  }

  .enigma-card.dragging {
    filter: brightness(1.07) drop-shadow(0 18px 22px rgba(0, 0, 0, .45));
  }

  .viewer-card {
    transform-origin: center center;
  }

/* --------------------------------------------------------------------------
   Téléphones et petites tablettes
   -------------------------------------------------------------------------- */

/*
   * Base commune : aucune page secondaire ne doit imposer de largeur desktop
   * ni provoquer de déplacement horizontal involontaire.
   */
  .content-page,
  .echoes-page,
  .notebook-page,
  .account-page,
  .hypothesis-page,
  .legal-page,
  .payment-screen,
  .welcome-page {
    width: 100%;
    min-width: 0;
    min-height: 100dvh;
    box-sizing: border-box;
    overflow-x: hidden;
  }

  .echoes-page,
  .notebook-page,
  .account-page,
  .hypothesis-page {
    padding:
      max(17px, env(safe-area-inset-top))
      12px
      max(28px, env(safe-area-inset-bottom));
  }

  .echoes-shell,
  .notebook-shell,
  .account-shell,
  .hypothesis-shell {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
  }

  /*
   * En-têtes de pages : titre, introduction et retour dans une colonne claire.
   */
  .echoes-header,
  .notebook-header,
  .account-header,
  .hypothesis-header {
    display: grid;
    grid-template-columns: 1fr;
    align-items: stretch;
    gap: 15px;
    margin: 0 0 20px;
    padding: 0 0 19px;
  }

  .echoes-header h1,
  .notebook-header h1,
  .account-header h1,
  .hypothesis-header h1 {
    margin-top: 4px;
    font-size: clamp(31px, 10.5vw, 44px);
    line-height: 1.04;
    overflow-wrap: anywhere;
  }

  .echoes-intro,
  .notebook-intro,
  .account-lead,
  .hypothesis-lead {
    max-width: none;
    font-size: 14px;
    line-height: 1.68;
  }

  .echoes-header > .button,
  .notebook-header > .button,
  .account-header > .button,
  .hypothesis-header > .button {
    width: 100%;
    min-height: 44px;
    justify-content: center;
  }

  /*
   * Cartouches principaux : moins de bord perdu, davantage de place au texte.
   */
  .echo-compose,
  .notebook-book,
  .notebook-section,
  .account-card,
  .hypothesis-submit-card,
  .hypothesis-history {
    width: 100%;
    box-sizing: border-box;
    margin: 17px 0;
    padding: 21px 16px;
    border-radius: 2px;
  }

  .echo-compose-heading,
  .echo-list-heading,
  .notebook-book-heading,
  .notebook-section-heading,
  .account-card-heading,
  .hypothesis-section-heading {
    display: grid;
    grid-template-columns: 1fr;
    align-items: stretch;
    gap: 11px;
  }

  .echo-compose h2,
  .echo-list-heading h2,
  .notebook-book h2,
  .notebook-section h2,
  .account-card h2,
  .hypothesis-section-heading h2 {
    font-size: clamp(24px, 7.5vw, 31px);
    line-height: 1.12;
  }

  .echo-rule,
  .notebook-save-state,
  .hypothesis-availability,
  .hypothesis-count,
  .hypothesis-status {
    width: fit-content;
    max-width: 100%;
    min-height: 32px;
    box-sizing: border-box;
    white-space: normal;
  }

  /*
   * Tous les champs sont dimensionnés pour le pouce et empêchent iOS de
   * déclencher un zoom automatique à la mise au point.
   */
  .echo-form input,
  .echo-form textarea,
  .notebook-field input,
  .notebook-field select,
  .notebook-field textarea,
  .hypothesis-form input,
  .hypothesis-form textarea,
  .account-form input,
  .account-form textarea,
  .payment-form input,
  .access-form input,
  .login-dialog input,
  .threshold-dialog input {
    width: 100%;
    min-height: 46px;
    box-sizing: border-box;
    font-size: 16px !important;
  }

  .echo-form textarea,
  .hypothesis-form textarea,
  .notebook-field textarea {
    min-height: 150px;
    line-height: 1.6;
  }

  .echo-form-footer,
  .hypothesis-submit-row,
  .payment-actions {
    display: grid;
    grid-template-columns: 1fr;
    align-items: stretch;
    gap: 11px;
  }

  .echo-form-footer .button,
  .hypothesis-submit-row .button,
  .payment-actions .button,
  .account-form .button,
  .access-form .button {
    width: 100%;
    min-height: 46px;
    justify-content: center;
  }

  /* Échos des chercheurs */
  .echo-compose {
    margin-top: 20px;
  }

  .echo-compose-launch,
  .echo-compose-toggle {
    width: 100%;
  }

  .echo-card {
    margin-top: 13px;
    padding: 19px 16px;
  }

  .echo-card header {
    display: grid;
    grid-template-columns: 1fr;
    gap: 5px;
  }

  .echo-card time {
    font-size: 9px;
  }

  .echo-card p {
    margin-top: 14px;
    font-size: 14px;
    line-height: 1.68;
  }

  .echo-options {
    display: grid;
    grid-template-columns: 1fr;
    gap: 9px;
  }

  /* Journal de bord */
  .notebook-book::after {
    display: none;
  }

  .notebook-workspace {
    display: grid;
    grid-template-columns: 1fr;
    gap: 17px;
    margin-top: 18px;
    padding-bottom: 24px;
  }

  .notebook-free-panel,
  .notebook-cards-panel {
    min-width: 0;
  }

  .notebook-free-panel #notebookContent {
    min-height: 380px;
    padding: 21px 17px;
    font-size: 16px;
    line-height: 1.7;
  }

  .notebook-consign-control,
  .notebook-actions {
    width: 100%;
    align-items: stretch;
  }

  .notebook-consign-button,
  .notebook-seal-button {
    width: 100%;
    min-height: 46px;
    justify-content: center;
  }

  .notebook-card-filter {
    display: grid;
    grid-template-columns: 1fr;
    gap: 7px;
  }

  .notebook-card-filter span {
    padding: 10px;
    text-align: center;
  }

  .notebook-card-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 11px;
  }

  .notebook-card-entry {
    min-height: 0 !important;
    grid-template-columns: 76px minmax(0, 1fr);
    gap: 12px;
    padding: 14px;
  }

  .notebook-card-thumbnail-link,
  .notebook-card-thumbnail {
    width: 76px;
    height: 112px;
  }

  .notebook-card-content {
    min-width: 0;
  }

  /* Hypothèses */
  .hypothesis-form {
    gap: 17px;
  }

  .hypothesis-submit-row p {
    font-size: 13px;
    line-height: 1.55;
  }

  .hypothesis-timeline {
    gap: 13px;
  }

  .hypothesis-entry {
    padding: 19px 16px;
  }

  .hypothesis-entry > header {
    display: grid;
    grid-template-columns: 1fr;
    gap: 9px;
  }

  .hypothesis-entry h3 {
    font-size: 21px;
  }

  .hypothesis-entry-section {
    margin-top: 17px;
    padding-top: 15px;
  }

  .hypothesis-entry-section.echo-reply {
    padding: 15px;
  }

  

  /* Compte */
  .account-card {
    padding: 21px 16px;
  }

  .account-form {
    gap: 15px;
  }

  .account-form .button {
    justify-self: stretch;
  }

  .account-confirm-check {
    align-items: flex-start;
    line-height: 1.5;
  }

  .account-delete-details summary {
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  /* Paiement, confirmation et création d'accès */
  .payment-screen {
    display: grid;
    place-items: start center;
    padding:
      max(10px, env(safe-area-inset-top))
      9px
      max(10px, env(safe-area-inset-bottom));
  }

  .payment-panel {
    width: 100%;
    max-width: none;
    min-height: calc(100dvh - 20px);
    box-sizing: border-box;
    margin: 0;
    padding: 31px 17px 24px;
  }

  .payment-panel h1 {
    font-size: clamp(31px, 10vw, 43px);
  }

  .payment-lead {
    font-size: 14px;
    line-height: 1.65;
  }

  .payment-details {
    gap: 10px;
  }

  .payment-detail {
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 11px;
    padding: 14px 12px;
  }

  .payment-detail strong {
    line-height: 1.35;
  }

  .payment-detail p {
    line-height: 1.55;
  }

  

  /*
   * Ces deux pages possèdent encore quelques styles intégrés après les liens
   * CSS. Les !important sont donc volontairement limités à leur mise en page.
   */
  .welcome-page {
    display: grid !important;
    place-items: start center !important;
    padding:
      max(10px, env(safe-area-inset-top))
      9px
      max(10px, env(safe-area-inset-bottom)) !important;
  }

  .welcome-card {
    width: 100% !important;
    max-width: none !important;
    min-height: calc(100dvh - 20px);
    box-sizing: border-box;
    margin: 0 !important;
    padding: 35px 18px 27px !important;
  }

  .welcome-card h1 {
    font-size: clamp(30px, 9.5vw, 42px) !important;
    line-height: 1.08 !important;
  }

  .welcome-detail {
    text-align: left;
  }

  .access-form {
    width: 100%;
    gap: 13px !important;
  }

  .access-form button {
    justify-self: stretch !important;
  }

  /* Pages légales */
  .legal-page {
    display: block;
  }

  .legal-shell {
    display: block;
    min-height: 100dvh;
  }

  .legal-sidebar {
    position: relative;
    width: 100%;
    height: auto;
    max-height: none;
    box-sizing: border-box;
    padding:
      max(16px, env(safe-area-inset-top))
      15px
      15px;
    border-right: 0;
    border-bottom: 1px solid rgba(185, 139, 66, .30);
  }

  .legal-sidebar .brand {
    margin-bottom: 12px;
  }

  .legal-sidebar .main-nav {
    display: flex;
    gap: 7px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 2px 0 7px;
    scrollbar-width: thin;
    scroll-snap-type: x proximity;
  }

  .legal-sidebar .nav-item {
    flex: 0 0 auto;
    min-height: 40px;
    padding: 9px 12px;
    scroll-snap-align: start;
    white-space: nowrap;
  }

  .legal-main {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    padding:
      24px
      14px
      max(38px, env(safe-area-inset-bottom));
  }

  .legal-document {
    width: 100%;
    max-width: none;
    box-sizing: border-box;
    padding: 23px 16px;
  }

  .legal-topbar {
    display: grid;
    grid-template-columns: 1fr;
    gap: 11px;
  }

  .legal-topbar h1 {
    font-size: clamp(31px, 10vw, 43px);
    overflow-wrap: anywhere;
  }

  .legal-back {
    width: 100%;
    min-height: 44px;
    justify-content: center;
  }

  .legal-intro,
  .legal-section p,
  .legal-section li {
    font-size: 14px;
    line-height: 1.7;
  }

  .legal-summary {
    padding: 16px 14px;
  }

  .legal-section {
    scroll-margin-top: 18px;
  }

  /* Modales génériques : lecture verticale et boutons tactiles. */
  .login-dialog,
  .threshold-dialog,
  .confirm-dialog,
  .visitor-restricted-dialog,
  .cartographer-help-dialog,
  .teaser-challenge-dialog {
    width: calc(100vw - 16px);
    max-width: none;
    max-height: calc(100dvh - 16px);
    box-sizing: border-box;
    margin: auto;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .login-dialog,
  .confirm-dialog {
    padding: 34px 18px 24px;
  }

  .threshold-dialog {
    padding: 34px 16px 24px;
  }

  .login-dialog form,
  .threshold-access,
  .confirm-actions {
    width: 100%;
  }

  .threshold-actions,
  .confirm-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 9px;
  }

  .threshold-actions .button,
  .confirm-actions .button,
  .login-dialog form .button {
    width: 100%;
    min-height: 46px;
    justify-content: center;
  }
}

@media (max-width: 680px) {
.account-shell { width: min(100% - 24px, 980px); padding-top: 28px; }
  .account-header, .account-card-heading { flex-direction: column; }
  .account-card { padding: 21px 18px; }
}

@media (max-width: 650px) {
.note-panel { width: 100vw; }
  .viewer-note-toggle { right: 62px; }

.admin-page{padding:18px}.admin-header{align-items:flex-start;flex-direction:column}.admin-panel{padding:24px}

.notebook-card-list{grid-template-columns:1fr}.notebook-workspace{gap:18px}.notebook-cards-panel{padding:22px 18px}

.notebook-header{padding-top:8px}.notebook-book{padding:25px 20px 22px}.notebook-consign-button{width:100%}.notebook-card-entry{grid-template-columns:82px minmax(0,1fr);gap:13px}.notebook-card-thumbnail-link,.notebook-card-thumbnail{width:82px;height:120px}.notebook-card-entry{min-height:134px!important}.notebook-footer-quote{font-size:14px}

.notebook-book-heading{align-items:flex-start;gap:16px}.notebook-consign-control{width:100%;align-items:stretch}.notebook-consign-button{width:100%}.notebook-save-state{max-width:none;text-align:center}#notebookContent{min-height:420px;padding:25px 22px}.notebook-card-entry{grid-template-columns:72px minmax(0,1fr)}.notebook-card-thumbnail-link,.notebook-card-thumbnail{width:72px;height:98px}

.notebook-seal-gate{min-height:390px;padding:28px 18px}.notebook-seal-emblem{top:18px;right:16px;width:52px}.notebook-seal-gate.is-sealed .notebook-seal-emblem{transform:translate(-118px,155px) rotate(0) scale(1.06)}.notebook-seal-panel h3{font-size:26px}
}

@media (max-width: 620px) {
.viewer-copy-text {
    min-width: 42px;
    width: 42px;
    padding: 0;
  }
  .viewer-copy-text .copy-text-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

.hypothesis-admin-controls {
    grid-template-columns: 1fr;
  }

  .hypothesis-search-field {
    grid-column: auto;
  }

  .hypothesis-card-summary {
    min-height: 0;
    align-items: flex-start;
    padding: 17px 18px;
  }

  .hypothesis-card-summary-end {
    align-items: flex-end;
    flex-direction: column;
    gap: 12px;
  }

  .hypothesis-card-panel {
    padding: 0 18px 20px;
  }

  .hypothesis-card-identity strong {
    white-space: normal;
  }

.viewer-controls {
    gap: 6px;
  }

  .viewer-gateway-button {
    min-height: 40px;
    padding: 0 11px;
    font-size: 8px;
    letter-spacing: .09em;
  }

  .viewer-gateway-mark {
    display: none;
  }
}

@media (max-width: 560px) {
.notebook-card-entry{grid-template-columns:72px minmax(0,1fr);gap:12px}.notebook-card-thumbnail{width:72px;height:106px}.notebook-card-filter{display:grid;grid-template-columns:1fr 1fr}.notebook-card-filter span{text-align:center;padding:10px 8px}

.notebook-card-thumbnail-link{width:72px;height:106px}

.notebook-card-filter{grid-template-columns:1fr;}

.topbar { grid-template-columns: 42px minmax(0, 1fr); }
  .mobile-nav-toggle { width: 42px; height: 42px; }
  .topbar h1 { gap: 6px; }
  .topbar h1 .restricted-access { min-height: 29px; padding: 6px 10px 5px; }
  .top-actions { grid-template-columns: 1fr; }
  .top-actions .button { min-height: 44px; }
}

@media (max-width: 470px) {
.notebook-book-heading,.notebook-section-heading{align-items:flex-start;flex-direction:column}#notebookContent{padding:20px;min-height:340px}
.notebook-count{width:38px;min-width:38px;height:38px;flex:0 0 38px;align-self:center}
}

@media (max-width: 374px) {
/* Téléphones très étroits : cartes légèrement resserrées, sans redevenir minuscules. */

:root {
    --card-width: 122px;
    --card-height: 179px;
    --visual-pile-x: 22%;
    --textual-pile-x: 78%;
    --fan-radius-max: 124px;
    --fan-radius-ratio: .32;
  }

  .topbar h1 {
    font-size: 16px;
  }

  .top-actions .button {
    font-size: 6.5px;
  }

/* --------------------------------------------------------------------------
   Téléphones très étroits
   -------------------------------------------------------------------------- */

.echoes-page,
  .notebook-page,
  .account-page,
  .hypothesis-page {
    padding-inline: 9px;
  }

  .echo-compose,
  .notebook-book,
  .notebook-section,
  .account-card,
  .hypothesis-submit-card,
  .hypothesis-history,
  .legal-document {
    padding-inline: 13px;
  }

  .notebook-card-entry {
    grid-template-columns: 66px minmax(0, 1fr);
    padding: 12px;
  }

  .notebook-card-thumbnail-link,
  .notebook-card-thumbnail {
    width: 66px;
    height: 97px;
  }

  .payment-detail {
    grid-template-columns: 1fr;
  }

  .payment-detail-icon {
    margin-bottom: 2px;
  }
}

/* ==========================================================================
   TÉLÉPHONES — PORTRAIT
   Bureau élargi et déplacement latéral au doigt.
   ========================================================================== */

@media (max-width: 699px) and (orientation: portrait) {
/* ==========================================================================
   CORRECTIF PHASE 2C — DÉPLACEMENT LATÉRAL EN PORTRAIT
   Le bureau reste volontairement plus large que l'écran, mais la vue initiale
   est désormais calée sur son bord gauche. Les deux paquets principaux sont
   disposés en quinconce afin de rester immédiatement lisibles.
   ========================================================================== */

:root {
    /* Paquet visuel presque au bord gauche, paquet textuel plus bas et décalé. */
    --visual-pile-x: 2.5%;
    --textual-pile-x: 7.5%;
    --pile-base-y: 310px;
    --visual-pile-y-offset: 0px;
    --textual-pile-y-offset: 235px;

    /* Éventail nettement plus ouvert : chaque carte offre une zone de prise. */
    --fan-radius-max: 250px;
    --fan-radius-ratio: .42;
    --fan-y-radius: 100px;
    --fan-y-offset: 78px;
    --fan-span-max: 104deg;
    --fan-span-min: 24deg;
  }

.board-wrap {
    overflow-x: auto;
    overflow-y: auto;
    overscroll-behavior-x: contain;
    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color:
      rgba(190, 145, 74, .45)
      rgba(8, 7, 6, .72);
    touch-action: pan-x pan-y;
  }

  .board-wrap::-webkit-scrollbar {
    height: 5px;
  }

  .board-wrap::-webkit-scrollbar-track {
    background: rgba(8, 7, 6, .72);
  }

  .board-wrap::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(190, 145, 74, .45);
  }

  /*
   * Largeur de table supérieure à celle du téléphone :
   * on conserve le gros plan tout en autorisant le déplacement latéral.
   */
  .board {
    width: max(100%, 720px);
    min-width: 720px;
    background-size: auto 100%;
    background-position: left top;
  }

  /*
   * Les éléments flottants restent attachés au bureau élargi.
   * Les cartes elles-mêmes gardent touch-action:none pour le glisser-déposer.
   */
  

  /* La fenêtre d'accueil reste attachée au bord gauche visible du téléphone. */
  .visitor-intro {
    left: 12px;
    width: min(392px, calc(100vw - 24px));
    transform: translateY(-8px);
  }

  .visitor-intro.is-visible {
    transform: translateY(0);
  }

  .visitor-intro.is-closing {
    transform: translateY(-7px);
  }

  /* L'énigme teaser occupe le coin supérieur droit de la zone visible,
     indépendamment de la largeur réelle du bureau. */
  .cartographer-letter-wrap {
    left: calc(100vw - 118px);
    right: auto;
    top: 18px;
    width: 104px;
  }

}

@media (max-width: 374px) and (orientation: portrait) {
.board {
    width: 680px;
    min-width: 680px;
  }

  
}

/* ==========================================================================
   TÉLÉPHONES — PAYSAGE
   Priorité finale pour les écrans larges mais très peu hauts.
   ========================================================================== */

@media (max-width: 699px) and (orientation: landscape) {
/* Téléphone en paysage : bureau court et visionneuse très large. */

:root {
    --card-width: 132px;
    --card-height: 194px;
    --pile-base-y: 112px;
    --fan-center-y: 272px;
    --fan-y-radius: 68px;
    --fan-y-offset: 52px;
  }

  .topbar {
    grid-template-columns: 42px minmax(0, 1fr) minmax(270px, .9fr);
    align-items: center;
  }

  .mobile-nav-toggle {
    grid-column: 1;
    grid-row: 1;
  }

  .topbar-identity {
    grid-column: 2;
    grid-row: 1;
  }

  .top-actions {
    grid-column: 3;
    grid-row: 1;
  }

  .topbar-motto {
    display: none;
  }

  .board {
    height: 570px;
    min-height: 570px;
    background-size: 100% auto;
  }

  .viewer-card,
  .viewer-card .enigma-card {
    width: min(54vw, 350px);
    height: min(79.4vw, 515px);
  }

  .bottom-bar {
    display: none;
  }
}

@media (orientation: landscape) and (max-width: 950px) and (max-height: 500px) {
/* iPhone et téléphones comparables en paysage : le viewport CSS peut dépasser
   699 px. Ce bloc détecte donc aussi la faible hauteur de l'écran. */

.topbar {
    grid-template-columns: 42px minmax(0, 1fr) minmax(250px, .82fr);
    gap: 8px;
    padding-top: 6px;
    padding-bottom: 6px;
  }

  .topbar-identity {
    min-width: 0;
  }

  .topbar h1 {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 10px;
    min-width: 0;
    font-size: clamp(22px, 3.05vw, 29px);
    line-height: 1;
    white-space: nowrap;
  }

  .topbar h1 > :first-child,
  .topbar h1 .title-text {
    min-width: 0;
    white-space: nowrap;
  }

  .topbar h1 .restricted-access {
    flex: 0 0 auto;
    min-height: 32px;
    margin: 0;
    padding: 7px 12px 6px;
    font-size: 10px;
    white-space: nowrap;
  }

  .topbar-motto {
    margin-top: 5px;
  }

  .topbar-motto p {
    font-size: 10px;
  }

  .top-actions {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px;
  }

  .top-actions .button {
    min-height: 38px;
    padding-inline: 6px;
    font-size: 7px;
  }

/* ==========================================================================
   CORRECTIF PHASE 2C — TÉLÉPHONE EN PAYSAGE
   Une largeur de 932 px ne signifie pas « tablette » lorsque la hauteur ne
   dépasse pas 500 px. On force donc ici toute l'interface téléphone.
   ========================================================================== */

:root {
    --sidebar-width: 0px;
    --topbar-height: auto;
  }

  .app-shell {
    grid-template-columns: minmax(0, 1fr);
  }

  .workspace {
    width: 100%;
    min-width: 0;
  }

  /* Le menu latéral redevient un tiroir, même si la largeur dépasse 900 px. */
  .sidebar {
    display: flex;
    position: fixed;
    z-index: 12020;
    inset: 0 auto 0 0;
    width: min(72vw, 330px);
    height: 100dvh;
    max-height: 100dvh;
    padding: 18px 18px 24px;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transform: translateX(-104%);
    transition:
      transform .28s cubic-bezier(.2,.75,.2,1),
      opacity .2s ease,
      visibility 0s linear .28s;
    box-shadow:
      24px 0 70px rgba(0,0,0,.72),
      inset -1px 0 rgba(210,173,112,.15);
  }

  body.mobile-nav-open .sidebar {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transform: translateX(0);
    transition-delay: 0s;
  }

  .mobile-nav-backdrop {
    display: block;
  }

  .mobile-nav-close {
    display: grid;
  }

  .mobile-nav-toggle {
    display: inline-grid;
    grid-column: 1;
    grid-row: 1;
  }

  /*
   * Une seule ligne pour le titre et le badge.
   * Les actions occupent leur propre zone à droite sans chevauchement.
   */
  .topbar {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) minmax(270px, 31vw);
    grid-template-rows: auto;
    align-items: center;
    gap: 8px 10px;
    min-height: 0;
    padding: 7px 9px;
  }

  .topbar-identity {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    align-self: center;
  }

  .topbar h1 {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 9px;
    min-width: 0;
    margin: 0;
    font-size: clamp(21px, 2.75vw, 27px);
    line-height: 1;
    white-space: nowrap;
  }

  .topbar h1 .title-text,
  .topbar h1 > :first-child {
    flex: 0 1 auto;
    min-width: 0;
    white-space: nowrap;
  }

  .topbar h1 .restricted-access {
    flex: 0 0 auto;
    min-height: 32px;
    margin: 0;
    padding: 7px 10px 6px;
    font-size: 9px;
    white-space: nowrap;
  }

  .topbar-motto {
    display: none;
  }

  .top-actions {
    grid-column: 3;
    grid-row: 1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px;
    width: 100%;
    min-width: 0;
  }

  .top-actions .button {
    width: 100%;
    min-width: 0;
    min-height: 38px;
    padding: 5px 4px;
    font-size: 6.5px;
    line-height: 1.08;
    letter-spacing: .055em;
  }

  .top-actions .button-icon {
    font-size: 11px;
  }

  .board-wrap,
  .board {
    width: 100%;
    max-width: 100%;
  }

/* --------------------------------------------------------------------------
   Téléphone en paysage : fenêtres courtes, pages lisibles sans masquer tout.
   -------------------------------------------------------------------------- */

.payment-panel,
  .welcome-card {
    min-height: auto !important;
    padding-top: 23px !important;
  }

  .login-dialog,
  .threshold-dialog,
  .confirm-dialog,
  .visitor-restricted-dialog,
  .cartographer-help-dialog,
  .teaser-challenge-dialog {
    width: min(720px, calc(100vw - 18px));
    max-height: calc(100dvh - 14px);
  }

  .echoes-page,
  .notebook-page,
  .account-page,
  .hypothesis-page {
    padding-top: 12px;
  }

  .echoes-header,
  .notebook-header,
  .account-header,
  .hypothesis-header {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
  }

  .echoes-header > .button,
  .notebook-header > .button,
  .account-header > .button,
  .hypothesis-header > .button {
    width: auto;
    min-width: 180px;
  }

/* ==========================================================================
   CORRECTIF PHASE 2E — HAMBURGER EN PAYSAGE TÉLÉPHONE
   Les règles tablette masquaient le bouton avec display:none!important.
   Ce bloc final donne définitivement la priorité au mode téléphone court.
   ========================================================================== */

.mobile-nav-toggle {
    display: inline-grid !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    grid-column: 1;
    grid-row: 1;
    place-content: center;
    width: 42px;
    height: 42px;
  }

  .mobile-nav-backdrop {
    display: block !important;
  }

  .mobile-nav-close {
    display: grid !important;
  }

  .sidebar {
    position: fixed !important;
    inset: 0 auto 0 0 !important;
    z-index: 12020 !important;
    width: min(72vw, 330px) !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translateX(-104%) !important;
  }

  body.mobile-nav-open .sidebar {
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: translateX(0) !important;
  }

/* ==========================================================================
   CORRECTIF VISUEL — ICÔNE HAMBURGER EN PAYSAGE
   Le bouton était seulement réaffiché, sans récupérer son habillage mobile
   défini sous 699 px. On rétablit ici l'ensemble de son apparence.
   ========================================================================== */

.mobile-nav-toggle {
    appearance: none !important;
    -webkit-appearance: none !important;
    display: inline-grid !important;
    place-content: center !important;
    gap: 5px !important;
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    padding: 0 !important;
    border: 1px solid rgba(198, 149, 67, .58) !important;
    border-radius: 2px !important;
    color: var(--gold-soft) !important;
    background: rgba(10, 8, 6, .78) !important;
    box-shadow:
      inset 0 0 0 1px rgba(255, 225, 165, .035),
      0 5px 14px rgba(0, 0, 0, .28) !important;
    cursor: pointer;
  }

  .mobile-nav-toggle span {
    display: block !important;
    width: 20px !important;
    height: 1px !important;
    margin: 0 !important;
    border: 0 !important;
    background: currentColor !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .68) !important;
  }

  .mobile-nav-toggle:hover,
  .mobile-nav-toggle:focus-visible {
    color: #efd39a !important;
    border-color: rgba(222, 177, 95, .82) !important;
    background: rgba(27, 19, 10, .92) !important;
  }
}

@media (orientation: landscape) and (max-width: 760px) and (max-height: 500px) {
.topbar h1 {
    font-size: 20px;
    gap: 7px;
  }

  .topbar h1 .restricted-access {
    padding-inline: 8px;
    font-size: 8px;
  }

  .topbar-motto {
    display: none;
  }
}

@media (orientation: landscape) and (max-width: 820px) and (max-height: 500px) {
/* Un peu plus d'air sur les paysages étroits. */

.topbar {
    grid-template-columns: 42px minmax(0, 1fr) minmax(235px, 32vw);
  }

  .topbar h1 {
    gap: 6px;
    font-size: 19px;
  }

  .topbar h1 .restricted-access {
    padding-inline: 7px;
    font-size: 7.5px;
  }

  .top-actions .button {
    font-size: 6px;
  }
}

/* ==========================================================================
   ACCESSIBILITÉ — MOUVEMENTS RÉDUITS
   Neutralisation des animations lorsque l’utilisateur le demande.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
.notebook-card-entry,.notebook-card-thumbnail-link .notebook-card-thumbnail{transition:none!important}.notebook-card-entry.is-return-target{animation:none;box-shadow:0 0 0 2px rgba(235,194,112,.58)}

.account-page,
  .hypothesis-page {
    background-attachment: scroll;
  }

.threshold-dialog[open],
  .login-dialog[open],
  .confirm-dialog[open],
  .cartographer-help-dialog[open],
  .threshold-dialog[open]::backdrop,
  .login-dialog[open]::backdrop,
  .confirm-dialog[open]::backdrop,
  .cartographer-help-dialog[open]::backdrop,
  .threshold-dialog[open] > *,
  .login-dialog[open] > *,
  .confirm-dialog[open] > *,
  .cartographer-help-dialog[open] > * {
    animation: none !important;
  }

.payment-panel { animation: none; }

.visitor-intro,
  .visitor-intro-close,
  .visitor-intro-action {
    transition: none;
  }

.sidebar,
  .mobile-nav-backdrop { transition: none !important; }

.visitor-restricted-link.is-refusing,
  .visitor-restricted-dialog[open],
  .visitor-restricted-dialog.is-closing {
    animation: none !important;
  }

.enigma-card,
  .viewer-card {
    transition: none !important;
  }

.enigma-card.is-touch-held,
  .enigma-card.dragging,
  .dragging-deck {
    transition: none !important;
    animation: none !important;
  }
}


/* ==========================================================================
   FINITIONS PAYSAGE — ÉQUILIBRE VISUEL
   ========================================================================== */
@media (orientation: landscape) and (max-width:950px) and (max-height:500px){

  :root{
    --pile-base-y:52px;
    --fan-center-y:225px;
  }

  .visual-pile-shelve,
  .textual-pile-shelve,
  .clue-pile-shelve{
    transform:translateY(22px);
  }

  .cartographer-help-trigger{
    right:16px;
    bottom:18px;
  }

  .bottom-bar{
    display:none;
  }
}


/* Conseil du cartographe — téléphone et tablette */
@media (max-width: 1100px), (orientation: landscape) and (max-width: 1366px) and (max-height: 700px) {
  .cartographer-device-tip-dialog {
    width: min(610px, calc(100vw - 22px));
    max-height: calc(100dvh - 22px);
    overflow-y: auto;
  }
}

@media (max-width: 699px) {
  .cartographer-device-tip-dialog {
    width: calc(100vw - 18px);
    padding: 36px 21px 25px;
  }
  .cartographer-device-tip-dialog h2 { font-size:clamp(23px,7vw,29px); }
  .cartographer-device-tip-copy { font-size:13px;line-height:1.62; }
  .cartographer-device-tip-choice { width:100%;justify-content:center;margin-bottom:16px; }
  .cartographer-device-tip-action { width:100%;min-height:46px; }
}

@media (orientation: landscape) and (max-width: 950px) and (max-height: 500px) {
  .cartographer-device-tip-dialog {
    width:min(720px,calc(100vw - 18px));
    max-height:calc(100dvh - 14px);
    padding:27px 34px 22px;
  }
  .cartographer-device-tip-compass { width:42px;height:42px;margin-bottom:7px; }
  .cartographer-device-tip-dialog h2 { margin-bottom:10px;font-size:24px; }
  .cartographer-device-tip-copy { max-width:620px;font-size:12px;line-height:1.5; }
  .cartographer-device-tip-copy p { margin-bottom:7px; }
  .cartographer-device-tip-choice { margin:6px auto 12px; }
}

@media (prefers-reduced-motion: reduce) {
  body.cartographer-tip-preamble .brand-compass,
  .cartographer-device-tip-dialog[open],
  .cartographer-device-tip-dialog.is-closing { animation:none!important; }
}

/* ==========================================================================
   ÉDITION FONDATRICE — RESPONSIVE
   ========================================================================== */

@media (max-width: 699px) {
  

  

  

  

  

  

  

  

  

  
}

@media (orientation: landscape) and (max-width: 950px) and (max-height: 500px) {
  

  

  

  

  

  

  

  

  

  

  

  

  

  

  
}

/* ==========================================================================
   TUNNEL D’ENTRÉE — PHASE A / RESPONSIVE
   ========================================================================== */

@media (max-width: 699px) {
  .threshold-dialog.threshold-dialog-v2 {
    width: calc(100vw - 16px);
    max-height: calc(100dvh - 16px);
    padding: 25px 14px 20px;
  }

  .threshold-dialog.threshold-dialog-v2 h2 {
    font-size: clamp(28px, 9vw, 37px);
  }

  .threshold-v2-invitation {
    margin-bottom: 15px;
    padding-inline: 8px;
    font-size: 12px;
  }

  

  

  

  .threshold-founding-price {
    gap: 13px;
  }

  

  .threshold-founding-price strong {
    font-size: clamp(48px, 17vw, 62px);
  }

  .threshold-v2-list {
    grid-template-columns: 1fr;
    gap: 0;
    padding-inline: 4px;
  }

  .threshold-v2-pay,
  .threshold-v2-support .threshold-donate {
    width: 100%;
    min-width: 0;
    min-height: 45px;
  }


  /* Ajustements de la modale fondatrice intégrés */
  .threshold-dialog.threshold-dialog-v2 h2 {
      font-size: clamp(25px, 8vw, 32px);
    }

    

    

    

    

    .threshold-founding-price strong {
      font-size: clamp(38px, 13vw, 46px);
    }
}

@media (orientation: landscape) and (max-width: 950px) and (max-height: 500px) {
  .threshold-dialog.threshold-dialog-v2 {
    width: min(850px, calc(100vw - 16px));
    max-height: calc(100dvh - 12px);
    padding: 16px 26px 15px;
  }

  .threshold-v2-seal {
    display: none;
  }

  .threshold-dialog.threshold-dialog-v2 h2 {
    font-size: 29px;
  }

  .threshold-v2-invitation {
    margin: 2px auto 9px;
  }

  

  .threshold-founding-kicker {
    margin-bottom: 4px;
  }

  

  

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

  .threshold-founding-price strong {
    font-size: 44px;
  }

  

  .threshold-v2-list {
    margin-bottom: 8px;
  }

  .threshold-v2-list li {
    padding-block: 2px;
  }

  .threshold-v2-divider {
    margin-block: 5px 4px;
  }

  .threshold-v2-support .threshold-support-note {
    display: none;
  }


  /* Ajustements de la modale fondatrice intégrés */
  .threshold-dialog.threshold-dialog-v2 h2 {
      font-size: 26px;
    }

    

    

    

    

    .threshold-founding-price strong {
      font-size: 36px;
    }
}

/* ==========================================================================
   TUNNEL DIRECT VERS STRIPE — RESPONSIVE
   ========================================================================== */

@media (max-width: 699px) {
  .threshold-checkout-form {
    width: 100%;
  }

  .threshold-checkout-form label {
    font-size: 12px;
  }

  .threshold-checkout-form input[type="email"] {
    min-height: 47px;
    font-size: 16px;
  }
}

@media (orientation: landscape) and (max-width: 950px) and (max-height: 500px) {
  .threshold-checkout-form {
    grid-template-columns: minmax(0, 1fr) minmax(210px, .62fr);
    gap: 6px 9px;
    max-width: 650px;
  }

  .threshold-checkout-form label,
  .threshold-checkout-error {
    grid-column: 1 / -1;
  }

  .threshold-checkout-form input[type="email"],
  .threshold-checkout-form .threshold-v2-pay {
    min-height: 40px;
  }
}



@media (max-height: 900px) {
  .visitor-intro{
    width:min(690px,calc(100% - 40px));
    padding:12px 28px 12px;
    transform:translate(-50%,0) scale(.90);
    transform-origin:top center;
  }
  .visitor-intro.is-visible{
    transform:translate(-50%,0) scale(.90);
  }
  .visitor-intro.is-closing{
    transform:translate(-50%,-6px) scale(.90);
  }
}


/* Clé du bureau : taille adaptée aux écrans étroits. */
@media (max-width: 900px) {
  .desk-key {
    width: 125px;
    max-width: 32%;
  }
}

@media (max-width: 470px) {
  .desk-key {
    width: 95px;
    max-width: 36%;
  }
}
/* ==========================================================================
   CORRECTIF MOBILE PORTRAIT — priorité finale
   Doit rester après les règles @media (max-height: 900px), qui recentraient
   encore .visitor-intro avec translateX(-50%).
   ========================================================================== */
@media (max-width: 699px) and (orientation: portrait) {
  .board {
    background-position: left top !important;
  }

  .visitor-intro,
  .visitor-intro.is-visible,
  .visitor-intro.is-closing {
    left: 12px !important;
    right: auto !important;
    width: calc(100vw - 24px) !important;
    max-width: 392px !important;
    box-sizing: border-box;
    transform-origin: top left !important;
  }

  .visitor-intro {
    transform: translateY(-8px) scale(.90) !important;
  }

  .visitor-intro.is-visible {
    transform: translateY(0) scale(.90) !important;
  }

  .visitor-intro.is-closing {
    transform: translateY(-7px) scale(.90) !important;
  }

  /* IMPORTANT : ces deux variables sont lues par script.js comme des RATIOS.
     Il faut donc impérativement conserver des pourcentages ici. Une valeur en
     pixels (ex. 18px) est interprétée comme 18 et expédie le paquet à plusieurs
     milliers de pixels hors du bureau. */
  :root {
    --visual-pile-x: 2.5%;     /* base : ~18 px sur le bureau mobile de 720 px */
    --textual-pile-x: 7.5%;    /* base : ~54 px, conserve le quinconce */
    --pile-base-y: 310px;
    --visual-pile-y-offset: 0px;
    --textual-pile-y-offset: 235px;

    /* Décalage commun smartphone appliqué par script.js :
       +36 px vers la droite et -55 px vers le haut. */
    --mobile-pile-shift-x: 36px;
    --mobile-pile-shift-y: -240px;

    /* Éventail suffisamment ouvert pour viser une carte au doigt. */
    --fan-radius-max: 255px;
    --fan-radius-ratio: .44;
    --fan-y-radius: 102px;
    --fan-y-offset: 80px;
    --fan-span-max: 100deg;
    --fan-span-min: 24deg;
  }

  /* Teaser : légèrement ramené vers l'intérieur et enveloppe réduite pour
     libérer davantage le coin supérieur droit. */
  .cartographer-letter-wrap {
    left: auto !important;
    right: 34px !important;
    top: 18px !important;
    width: 88px !important;
  }

  .teaser-challenge-trigger.cartographer-letter {
    width: 100% !important;
    right: auto !important;
    top: auto !important;
  }

  .cartographer-letter-dismiss {
    top: 18px;
    right: 17px;
    width: 23px;
    height: 23px;
    font-size: 16px;
  }

  .cartographer-letter-caption {
    right: -16px;
    width: 132px;
  }
}

/* ========================================================================== 
   AJUSTEMENT MOBILE PORTRAIT — teaser visible + boutons plus lisibles
   À conserver en fin de fichier pour prendre le pas sur les règles mobiles
   précédentes.
   ========================================================================== */
@media (max-width: 699px) and (orientation: portrait) {
  /* Le teaser est positionné par rapport à la largeur réellement visible du
     téléphone, et non au bord droit du bureau élargi à 720 px. */
  .cartographer-letter-wrap {
    left: calc(100vw - 126px) !important;
    right: auto !important;
    top: 18px !important;
    width: 112px !important;
  }

  .teaser-challenge-trigger.cartographer-letter {
    width: 100% !important;
    right: auto !important;
    top: auto !important;
  }

  .cartographer-letter-dismiss {
    top: 19px !important;
    right: 17px !important;
    width: 25px !important;
    height: 25px !important;
    font-size: 17px !important;
  }

  /* Le cartouche reste lui aussi entièrement dans la zone visible. */
  .cartographer-letter-caption {
    right: 0 !important;
    width: 132px !important;
  }

  /* Les trois boutons disposent de suffisamment de hauteur pour augmenter
     sensiblement la taille du libellé sans modifier leur encombrement. */
  .top-actions .button {
    font-size: 10px !important;
    letter-spacing: .06em;
  }

  .top-actions .button-icon {
    font-size: 15px !important;
  }
}

@media (max-width: 374px) and (orientation: portrait) {
  .cartographer-letter-wrap {
    left: calc(100vw - 120px) !important;
    width: 108px !important;
  }

  .top-actions .button {
    font-size: 9px !important;
  }
}

/* ========================================================================== 
   FRANCHIR LE SEUIL — consentements mobiles
   Le réglage générique des champs mobiles ne doit pas s'appliquer aux
   cases à cocher : sinon elles prennent 100% de largeur et repoussent leur
   libellé hors de la modale.
   ========================================================================== */
@media (max-width: 699px) {
  .threshold-checkout-form .threshold-legal-consent {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    align-items: start;
    justify-content: stretch;
    width: 100%;
    max-width: 100%;
    gap: 8px;
    margin: 5px 0 0;
    box-sizing: border-box;
    text-align: left;
  }

  .threshold-dialog .threshold-checkout-form .threshold-legal-consent input[type="checkbox"] {
    width: 16px !important;
    height: 16px;
    min-width: 16px;
    min-height: 16px;
    margin: 2px 0 0;
    padding: 0;
    box-sizing: border-box;
    font-size: initial !important;
  }

  .threshold-checkout-form .threshold-legal-consent > span {
    display: block;
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: normal;
    text-align: left;
  }
}

/* ========================================================================== 
   ACTIONS DU BANDEAU — mobile portrait connecté
   Soutenir reste lisible ; Réinitialiser et Déconnexion deviennent deux
   commandes compactes afin de rendre davantage de hauteur au bureau.
   ========================================================================== */
@media (max-width: 699px) and (orientation: portrait) {
  body.is-authenticated .top-actions {
    display: grid !important;
    /* Les deux commandes utilitaires sont centrées dans la partie de ligne
       laissée libre par le bouton Soutenir, qui reste calé à droite. */
    grid-template-columns: minmax(0, 1fr) 54px 54px minmax(0, 1fr) 160px !important;
    gap: 6px !important;
    width: 100%;
    align-items: center;
  }

  body.is-authenticated .top-actions > .top-donate-button {
    grid-column: 5;
    justify-self: end;
    width: 160px !important;
    min-width: 160px !important;
    max-width: 160px !important;
    min-height: 36px !important;
    height: 36px !important;
    padding: 4px 10px !important;
    font-size: 9px !important;
  }

  body.is-authenticated .top-actions > #resetButton {
    grid-column: 2;
  }

  body.is-authenticated .top-actions > a.auth-button[href="logout.php"] {
    grid-column: 3;
  }

  body.is-authenticated .top-actions > #resetButton,
  body.is-authenticated .top-actions > a.auth-button[href="logout.php"] {
    width: 54px !important;
    min-width: 54px !important;
    max-width: 54px !important;
    min-height: 36px !important;
    height: 36px !important;
    padding: 0 !important;
    display: inline-grid !important;
    place-items: center;
    position: relative;
  }

  /* Le texte reste disponible aux lecteurs d'écran mais ne prend plus de place. */
  body.is-authenticated .top-actions > #resetButton > span:last-child,
  body.is-authenticated .top-actions > a.auth-button[href="logout.php"] > span:last-child {
    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;
  }

  body.is-authenticated .top-actions > #resetButton .button-icon,
  body.is-authenticated .top-actions > a.auth-button[href="logout.php"] .button-icon {
    margin: 0 !important;
    font-size: 20px !important;
    line-height: 1 !important;
  }

  /* Un compte administrateur conserve son menu complet, sous la barre compacte. */
  body.is-authenticated .top-actions > .top-admin-menu {
    grid-column: 1 / -1;
    grid-row: 2;
  }
}

@media (max-width: 374px) and (orientation: portrait) {
  body.is-authenticated .top-actions {
    grid-template-columns: minmax(0, 1fr) 50px 50px minmax(0, 1fr) 148px !important;
    gap: 5px !important;
  }

  body.is-authenticated .top-actions > .top-donate-button {
    width: 148px !important;
    min-width: 148px !important;
    max-width: 148px !important;
  }

  body.is-authenticated .top-actions > #resetButton,
  body.is-authenticated .top-actions > a.auth-button[href="logout.php"] {
    width: 50px !important;
    min-width: 50px !important;
    max-width: 50px !important;
  }
}

/* ========================================================================== 
   AJUSTEMENT V4 — barre d'actions sur une seule ligne + pseudo visible
   ========================================================================== */
@media (max-width: 699px) and (orientation: portrait) {
  /* On verrouille explicitement les trois commandes sur la même ligne.
     Les deux utilitaires restent centrés dans l'espace laissé à gauche
     du bouton Soutenir, lui-même calé à droite. */
  body.is-authenticated .top-actions {
    grid-template-columns: minmax(0, 1fr) 54px 54px minmax(0, 1fr) 160px !important;
    grid-template-rows: 36px !important;
    align-items: center !important;
    column-gap: 6px !important;
    row-gap: 0 !important;
  }

  body.is-authenticated .top-actions > #resetButton {
    grid-column: 2 !important;
    grid-row: 1 !important;
  }

  body.is-authenticated .top-actions > a.auth-button[href="logout.php"] {
    grid-column: 3 !important;
    grid-row: 1 !important;
  }

  body.is-authenticated .top-actions > .top-donate-button {
    grid-column: 5 !important;
    grid-row: 1 !important;
  }

  /* Le pseudo était attaché au bord droit du bureau élargi : lorsque le
     viewport est centré, il se retrouvait hors champ. Sur téléphone portrait,
     on l'ancre au centre réel du bureau, qui correspond au centre du viewport
     lors du cadrage initial. */
  body.is-authenticated .researcher-signature {
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    max-width: calc(100vw - 28px);
    white-space: nowrap;
  }
}

@media (max-width: 374px) and (orientation: portrait) {
  body.is-authenticated .top-actions {
    grid-template-columns: minmax(0, 1fr) 50px 50px minmax(0, 1fr) 148px !important;
    grid-template-rows: 36px !important;
    column-gap: 5px !important;
  }
}

/* ========================================================================== 
   AJUSTEMENT V5 — position du pseudo sur téléphone portrait
   ========================================================================== */
@media (max-width: 699px) and (orientation: portrait) {
  body.is-authenticated .researcher-signature {
    /* Légèrement au-dessus et à droite du centre visuel du bureau. */
    left: calc(50% + 18px) !important;
    right: auto !important;
    transform: translate(-50%, -14px) !important;
  }
}


/* Teaser mobile — enveloppe seule : même décalage de 20 px vers la gauche. */
@media (max-width:699px) and (orientation:portrait) {
  .cartographer-letter-wrap {
    left: calc(100vw - 146px) !important;
    right: auto !important;
  }
}
@media (max-width:374px) and (orientation:portrait) {
  .cartographer-letter-wrap {
    left: calc(100vw - 140px) !important;
  }
}


/* Découverte de la contremarque : laisser l'annonce respirer sur les petits écrans. */
@media (max-width: 1150px) {
  .topbar-motto.is-countermark-found {
    grid-template-columns: auto minmax(0,1fr) auto;
    width: 100%;
  }
  .topbar-motto.is-countermark-found p {
    font-size: 10px;
    line-height: 1.25;
    white-space: normal;
  }
}
@media (max-width: 620px) {
  .topbar-motto.is-countermark-found {
    grid-template-columns: auto minmax(0,1fr) auto;
    gap: 5px;
  }
  .topbar-motto.is-countermark-found p {
    font-size: 9px;
    line-height: 1.2;
    white-space: normal;
  }
}

/* Bureau téléphone : cadrage complet, paquets centrés et calendrier dégagé. */
@media (max-width: 699px) {
  .board-wrap { box-sizing: border-box; padding: 0; scrollbar-gutter: auto; }
  .hunt-start-notice {
    position: relative;
    left: auto;
    top: auto;
    transform: none;
    width: 100%;
    margin: 0;
    padding: 12px 20px;
  }
  .hunt-start-notice p,
  .hunt-start-notice p + p { white-space: normal; line-height: 1.4; }
}
@media (max-width: 699px) and (orientation: portrait) {
  :root {
    --card-width: 144px;
    --card-height: 212px;
    --visual-pile-x: 50%;
    --textual-pile-x: 50%;
    --mobile-pile-shift-x: -115px;
    --mobile-pile-shift-y: 0px;
    --pile-base-y: 150px;
    --visual-pile-y-offset: 0px;
    --textual-pile-y-offset: 245px;
  }
  .visitor-intro,
  .visitor-intro.is-visible,
  .visitor-intro.is-closing {
    left: 50vw !important;
    right: auto !important;
    width: calc(100vw - 24px) !important;
    box-sizing: border-box;
    transform-origin: top center !important;
    transform: translateX(-50%) !important;
  }
  .cartographer-letter-wrap {
    left: calc(50vw + 70px) !important;
    right: auto !important;
    top: 150px !important;
    width: 80px !important;
  }
}

/* Décor intégral : aucune partie de l'image n'est coupée par cover. */
.board {
  isolation: isolate;
  background-image: none;
}
.board::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: #241708 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 top / contain no-repeat;
}
.board-wrap { overflow-y: auto; }
@media (max-width: 699px),
       (orientation: landscape) and (max-width: 950px) and (max-height: 500px) {
  .board::after { filter: saturate(.78) brightness(1.10) contrast(.94); }
  .board::before {
    background: linear-gradient(rgba(38,54,72,.12),rgba(8,10,14,.08));
    mix-blend-mode: color;
  }
}
@media (max-width: 699px) and (orientation: portrait) {
  /* La vue initiale est centrée par centerPhoneBoard : les objets suivent
     le centre du bureau entier, sans réduire ses dimensions. */
  .cartographer-letter-wrap { left: calc(50% + 70px) !important; }
}

/* Téléphone portrait : fond de 790 px de haut, entièrement parcourable.
   L'image 1536 × 1024 conserve son rapport 3:2 sur un bureau de 1185 × 790. */
@media (max-width: 699px) and (orientation: portrait) {
  .board-wrap { overflow-x: auto; overflow-y: auto; }
  .board {
    width: 1185px;
    min-width: 1185px;
    max-width: none;
    height: 790px;
    min-height: 790px;
    box-sizing: border-box;
    border: 0;
  }
  .board::after { background-size: 100% 100%; }
  .hunt-start-notice {
    width: 1185px;
    max-width: none;
    box-sizing: border-box;
  }
  .hunt-start-copy { width: calc(100vw - 40px); max-width: 659px; flex-shrink: 0; }
  .hunt-start-side { display: none; }
  .visitor-intro,
  .visitor-intro.is-visible,
  .visitor-intro.is-closing { left: 592.5px !important; }
  .cartographer-letter-wrap {
    left: calc(50% + 60px) !important;
    width: 92px !important;
  }
}

/* Le défilement s'arrête au bord du décor intégral, sans bande unie dessous.
   La taille mobile portrait 1185 × 790 reste définie par les règles précédentes. */
@media (min-width: 700px), (orientation: landscape) {
  .board,
  body.board-focus-mode .board {
    height: auto;
    min-height: 0;
    max-height: 1100px;
    aspect-ratio: 3 / 2;
  }
  .board-wrap { padding-bottom: 0; }
}

/* Mobile : aide discrète, titre groupé et sceau lisible. */
.researcher-signature .user-grade-badge {
  background: radial-gradient(circle, #5b3b12, #100b06 78%);
  box-shadow: 0 0 0 1px rgba(235,190,105,.75), 0 2px 6px #000, 0 0 9px rgba(218,166,65,.35);
}
.researcher-signature .user-grade-badge img { filter: brightness(1.2) contrast(1.08); }
.treasure-title-place { white-space: nowrap; }
@media (max-width: 699px) {
  body #openCartographerHelp.cartographer-help-trigger { box-sizing: border-box !important; width: 36px !important; height: 36px !important; min-width: 36px !important; min-height: 36px !important; max-width: 36px !important; max-height: 36px !important; padding: 0 !important; aspect-ratio: 1 / 1 !important; border-radius: 50% !important; flex: 0 0 36px !important; align-self: center !important; font-size: 18px !important; }
  #openTreasure .treasure-trigger-title { font-size: clamp(20px, 5.2vw, 22px) !important; line-height: 1.08 !important; }
}
@media (max-width: 699px) and (orientation: portrait) {
  body.is-authenticated .researcher-signature { top: 19px; }
}

.hunt-start-notice[hidden] { display: none !important; }
.hunt-start-notice-close { position: absolute; top: 0; left: calc(100% + 12px); right: auto; z-index: 3; pointer-events: auto; display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 1px solid rgba(210,173,112,.45); border-radius: 50%; background: rgba(12,9,5,.75); color: #dfbd7d; font: 20px/1 Georgia,serif; cursor: pointer; }
.hunt-start-notice-close:hover, .hunt-start-notice-close:focus-visible { color: #fff1ce; border-color: #efd39e; }

/* Bureau desktop : cartes à 93 %, sans modifier les formats tablette/mobile.
   L'amplitude de l'éventail reste inchangée pour préserver la prise des cartes. */
@media (min-width: 1101px) {
  :root {
    --card-width: 216px;
    --card-height: 300px;
  }
}

/* Accueil public : conserver les accès indisponibles dans le bandeau. */
.top-actions-public > .button {
  box-sizing: border-box;
  min-height: 44px;
}
.top-actions-public > .button:disabled,
.top-actions-public > .button:disabled:hover {
  opacity: 1;
  color: #b8aa96;
  border-color: #746655;
  background: linear-gradient(180deg, #484139, #302b25);
  box-shadow: inset 0 1px rgba(224,208,181,.10), 0 4px 10px rgba(0,0,0,.24);
  text-shadow: 0 1px 2px rgba(0,0,0,.65);
  cursor: not-allowed;
  transform: none;
  filter: none;
}
.top-actions-public > .button:disabled .button-icon {
  color: #aa967b;
}
@media (max-width: 1100px) {
  .top-actions-public {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }
  .top-actions-public > .button {
    width: 100%;
    min-width: 0;
    height: 44px;
    padding: 6px;
    gap: 5px;
    line-height: 1.2;
  }
  .top-actions-public > .button:last-child:nth-child(odd) {
    grid-column: auto;
  }
  .top-actions-public > .button > span:last-child {
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
  }
}

/* Bandeau : titre complet centré et devise dégagée du cadre. */
@media (min-width: 700px) and (min-height: 600px) and (pointer: coarse) and (hover: none) {
  :root { --topbar-height: 104px; }
  .topbar { min-height: 104px; padding-top: 10px; padding-bottom: 14px; }
  .topbar-title-row h1 { width: 100%; justify-content: center; }
  .topbar-title-row .treasure-trigger { width: 100%; justify-content: center; text-align: center; }
  .topbar-title-row .treasure-trigger-title { width: 100%; text-align: center; line-height: 1.08; }
  .topbar h1 .restricted-access { min-height: 22px; padding: 4px 12px; margin-left: 0; vertical-align: middle; }
  .topbar-motto { width: 100%; padding-left: 92px; margin-top: 4px; grid-template-columns: minmax(0, 84px) max-content minmax(0, 84px); gap: 8px; }
  .topbar-motto-line { width: 100%; }
  .topbar-motto.is-countermark-found { width: 100%; grid-template-columns: auto minmax(0, 1fr) auto; }
  .topbar-motto.is-countermark-found p { white-space: normal; }
}
@media (min-width: 700px) and (max-width: 900px) and (min-height: 600px) and (pointer: coarse) and (hover: none) {
  .topbar-motto { padding-left: 66px; }
}

/* Le badge tablette reste au bord de l'écran lorsque le bureau défile. */
@media (min-width: 700px) and (min-height: 600px) and (pointer: coarse) and (hover: none) {
  body > .researcher-signature.tablet-fixed-signature {
    position: fixed;
    top: var(--signature-top, 116px);
    right: max(24px, env(safe-area-inset-right));
    left: auto;
    transform: none;
    z-index: 100;
    max-width: calc(100vw - var(--sidebar-width) - 48px);
  }
  .tablet-fixed-signature .researcher-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .tablet-fixed-signature[hidden] { display: none; }
}

/* Tablette paysage : le décor remplit la hauteur, sans déformation.
   La surface entière (objets et hotspots inclus) défile horizontalement. */
@media (min-width: 700px) and (min-height: 600px) and (pointer: coarse) and (hover: none) and (orientation: landscape) {
  .board-wrap {
    padding: 0;
    overflow-x: auto;
    overflow-y: auto;
    scrollbar-gutter: auto;
    -webkit-overflow-scrolling: touch;
  }
  #board,
  body.board-focus-mode #board {
    box-sizing: border-box;
    border: 0;
    width: max(100%, calc(var(--tablet-desk-height, 730px) * 1.5));
    min-width: 0;
    max-width: none;
    height: auto;
    min-height: 0;
    max-height: none;
    aspect-ratio: 3 / 2;
    background-size: contain;
    background-position: center top;
  }
  #board::after {
    background-size: contain;
    background-position: center top;
  }
}

/* Aide du bureau : vocabulaire adapté aux gestes des tablettes tactiles. */
.help-tablet-only { display: none; }
@media (min-width: 700px) and (min-height: 600px) and (pointer: coarse) and (hover: none) {
  .help-desktop-only { display: none; }
  .help-tablet-only { display: inline; }
}