/* Espace membre et console des associés : mêmes jetons que la page publique, densité d'application. */
.espace { line-height: 1.65; }
.discret { color: var(--ivoire-pale); }
.champ-otp { font-family: var(--serif) !important; font-size: 1.6rem !important; letter-spacing: 0.4em; width: min(100%, 12rem); }
.qr { background: var(--ivoire); padding: 14px; width: max-content; max-width: 100%; }
.qr img, .qr canvas { display: block; max-width: 100%; height: auto; }
.cle-totp { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 0.85rem; letter-spacing: 0.12em; word-break: break-all; color: var(--ivoire); }

/* En-tête et navigation */
.espace-tete {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 10;
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap;
  padding: 1.2rem var(--gouttiere); background: rgba(10, 22, 40, 0.94);
  border-bottom: 1px solid rgba(168, 137, 79, 0.25);
  backdrop-filter: blur(6px);
}
body.espace::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 11; background: var(--nuit); }
.espace-marque { font-family: var(--serif); letter-spacing: 0.42em; font-size: 0.95rem; text-decoration: none; color: var(--ivoire); white-space: nowrap; }
.espace-nav { display: flex; gap: 0.4rem 1.6rem; flex-wrap: wrap; }
.espace-nav a {
  font-size: 0.68rem; letter-spacing: 0.2em; text-transform: uppercase; text-decoration: none;
  color: var(--ivoire-pale); padding: 0.35rem 0; border-bottom: 1px solid transparent;
  transition: color var(--fondu), border-color var(--fondu);
}
.espace-nav a:hover { color: var(--ivoire); }
.espace-nav a[aria-current="page"] { color: var(--ivoire); border-bottom-color: var(--laiton); }
@media (max-width: 720px) {
  .espace-nav { flex-wrap: nowrap; overflow-x: auto; width: 100%; padding-bottom: 0.2rem; scrollbar-width: none; }
  .espace-nav::-webkit-scrollbar { display: none; }
  .espace-nav a { white-space: nowrap; }
}

.espace-contenu { max-width: 62rem; margin: 0 auto; padding: 4.5rem var(--gouttiere) 5rem; outline: none; display: flex; flex-direction: column; gap: 3rem; min-height: 60vh; }
.espace-pied { border-top: 1px solid rgba(168, 137, 79, 0.2); padding: 2rem var(--gouttiere) calc(2.5rem + env(safe-area-inset-bottom, 0px)); }
.espace-pied p { max-width: 62rem; margin: 0 auto; font-size: 0.74rem; color: rgba(245, 241, 232, 0.38); }

/* Typographie des vues */
.surtitre { font-size: 0.68rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--laiton); margin: 0; }
.vue-titre { margin: 0.4rem 0 0; font-family: var(--serif); font-weight: 300; font-size: clamp(2rem, 5vw, 3rem); line-height: 1.15; text-wrap: balance; }
.vue-intro { margin: 0; color: var(--ivoire-doux); max-width: 40rem; }
.bloc { display: flex; flex-direction: column; gap: 1.2rem; min-width: 0; }
.bloc h2 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: 1.5rem; }
.note-associes { border-left: 1px solid var(--laiton); padding-left: 1.4rem; display: flex; flex-direction: column; gap: 0.9rem; max-width: 40rem; }
.note-associes p { margin: 0; font-family: var(--serif); font-size: 1.2rem; line-height: 1.55; }
.vide { color: var(--ivoire-pale); font-family: var(--serif); font-style: italic; font-size: 1.2rem; }

/* Tableaux */
.tableau-wrap { overflow-x: auto; }
.tableau { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; font-size: 0.92rem; }
.tableau th { text-align: left; font-weight: 400; font-size: 0.7rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ivoire-pale); padding: 0 1rem 0.8rem 0; border-bottom: 1px solid rgba(168, 137, 79, 0.35); }
.tableau td { padding: 0.95rem 1rem 0.95rem 0; border-bottom: 1px solid rgba(245, 241, 232, 0.08); vertical-align: baseline; }
.tableau .nombre { text-align: right; white-space: nowrap; }
.tableau th.nombre { text-align: right; }
.titre-ligne { font-family: var(--serif); font-size: 1.15rem; }
.ticker { font-size: 0.75rem; letter-spacing: 0.12em; color: var(--ivoire-pale); }
.marque-nouveau { display: inline-block; margin-left: 0.7rem; font-size: 0.66rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--laiton-clair); border: 1px solid var(--filet); padding: 0.1rem 0.45rem; vertical-align: middle; }
.sortants { display: flex; flex-wrap: wrap; gap: 0.6rem 1.6rem; margin: 0; padding: 0; list-style: none; color: var(--ivoire-doux); }

/* Chiffres clés */
.chiffres { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); gap: 1px; background: rgba(168, 137, 79, 0.22); border: 1px solid rgba(168, 137, 79, 0.22); }
.chiffre { background: var(--nuit); padding: 1.4rem 1.3rem; display: flex; flex-direction: column; gap: 0.35rem; }
.chiffre span { font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ivoire-pale); }
.chiffre strong { font-family: var(--serif); font-weight: 300; font-size: 2rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.chiffre small { color: var(--ivoire-pale); font-size: 0.78rem; font-variant-numeric: tabular-nums; }

/* Graphique */
.graphe { position: relative; width: 100%; min-height: 320px; }
.graphe svg { display: block; width: 100%; height: auto; overflow: visible; }
.graphe text { font-family: var(--sans); font-size: 11px; fill: rgba(245, 241, 232, 0.5); }
.legende { display: flex; gap: 1.6rem; flex-wrap: wrap; font-size: 0.78rem; color: var(--ivoire-doux); }
.legende i { display: inline-block; width: 18px; height: 2px; vertical-align: middle; margin-right: 0.5rem; }
.infobulle { position: absolute; pointer-events: none; background: var(--nuit-2); border: 1px solid var(--filet); padding: 0.5rem 0.8rem; font-size: 0.78rem; line-height: 1.5; white-space: nowrap; font-variant-numeric: tabular-nums; opacity: 0; transition: opacity 200ms; }

/* Cartes d'événements, lettres, codes */
.liste { display: flex; flex-direction: column; }
.element { border-top: 1px solid rgba(245, 241, 232, 0.1); padding: 1.8rem 0; display: flex; flex-direction: column; gap: 0.8rem; }
.element:last-child { border-bottom: 1px solid rgba(245, 241, 232, 0.1); }
.element h3 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: 1.45rem; }
.meta { font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ivoire-pale); }
.element p { margin: 0; color: var(--ivoire-doux); max-width: 42rem; }
.actions { display: flex; flex-wrap: wrap; gap: 0.8rem; align-items: center; }
.actions .bouton { padding: 0.7rem 1.4rem; font-size: 0.66rem; }
.bouton.actif { background: var(--laiton); color: var(--nuit); border-color: var(--laiton); }
.lettre-corps { display: flex; flex-direction: column; gap: 1rem; }
.lettre-corps p { font-family: var(--serif); font-size: 1.2rem; line-height: 1.6; color: var(--ivoire); }
details > summary { cursor: pointer; list-style: none; }
details > summary::-webkit-details-marker { display: none; }
details > summary .meta::after { content: " +"; }
details[open] > summary .meta::after { content: " −"; }
.code-presentation { font-family: var(--serif); font-size: 1.6rem; letter-spacing: 0.3em; }
.etat { font-size: 0.64rem; letter-spacing: 0.2em; text-transform: uppercase; }
.etat.disponible { color: var(--laiton-clair); }
.etat.utilise, .etat.revoque { color: var(--ivoire-pale); }

/* Console des associés */
.console-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); gap: 2.4rem; }
.panneau { border: 1px solid rgba(168, 137, 79, 0.22); padding: 1.6rem; display: flex; flex-direction: column; gap: 1.1rem; min-width: 0; }
.panneau h2 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: 1.35rem; }
.panneau textarea, .panneau select, .panneau input[type="date"], .panneau input[type="month"] {
  background: transparent; color: var(--ivoire); border: 1px solid rgba(245, 241, 232, 0.2); padding: 0.6rem; font: inherit; font-size: 0.92rem;
}
.panneau textarea { min-height: 8rem; resize: vertical; }
.panneau textarea:focus, .panneau select:focus { outline: none; border-color: var(--laiton); }
.case { display: flex; gap: 0.6rem; align-items: center; font-size: 0.88rem; color: var(--ivoire-doux); }
.petit-bouton { background: none; border: 1px solid rgba(245, 241, 232, 0.2); color: var(--ivoire-doux); font: inherit; font-size: 0.72rem; padding: 0.35rem 0.7rem; cursor: pointer; }
.petit-bouton:hover { border-color: var(--laiton); color: var(--ivoire); }
.ok { color: #9DBF8F; }

/* Record : périodes, échelle logarithmique, journal */
.barre-graphe { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.periodes { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.periode { background: transparent; color: var(--ivoire-doux); border: 1px solid rgba(245, 241, 232, 0.18); font: inherit; font-size: 0.74rem; letter-spacing: 0.08em; padding: 0.4rem 0.9rem; cursor: pointer; transition: border-color var(--fondu), color var(--fondu); }
.periode:hover { color: var(--ivoire); border-color: var(--filet); }
.periode[aria-pressed="true"] { color: var(--nuit); background: var(--laiton); border-color: var(--laiton); }
.bascule { display: inline-flex; align-items: center; gap: 0.7rem; background: none; border: 0; color: var(--ivoire-doux); font: inherit; font-size: 0.76rem; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; padding: 0.3rem 0; }
.bascule-pastille { position: relative; width: 34px; height: 18px; border: 1px solid rgba(245, 241, 232, 0.3); border-radius: 9px; transition: border-color var(--fondu); }
.bascule-pastille::after { content: ""; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: var(--ivoire-pale); transition: transform 300ms ease, background 300ms ease; }
.bascule[aria-pressed="true"] { color: var(--ivoire); }
.bascule[aria-pressed="true"] .bascule-pastille { border-color: var(--laiton); }
.bascule[aria-pressed="true"] .bascule-pastille::after { transform: translateX(16px); background: var(--laiton); }
.resume-periode { display: flex; flex-wrap: wrap; gap: 0.4rem 1.8rem; font-size: 0.88rem; font-variant-numeric: tabular-nums; }
.resume-periode strong { font-weight: 400; font-family: var(--serif); font-size: 1.25rem; }
.hausse { color: #A9C99B; }
.baisse { color: #D69A88; }
.petit { font-size: 0.78rem; }
.journal { max-height: 34rem; overflow: auto; border-top: 1px solid rgba(168, 137, 79, 0.2); }
.journal thead th { position: sticky; top: 0; background: var(--nuit); padding-top: 0.9rem; z-index: 1; }
.sous-ligne { display: block; font-size: 0.72rem; color: var(--ivoire-pale); white-space: nowrap; }
.marque-simule { display: inline-block; margin-top: 0.3rem; font-size: 0.66rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ivoire-pale); border: 1px solid rgba(245, 241, 232, 0.18); padding: 0.05rem 0.4rem; }
.puces { display: flex; flex-wrap: wrap; gap: 0.35rem; min-width: 10.5rem; max-width: 15rem; }
.puce-titre { font-size: 0.7rem; letter-spacing: 0.08em; padding: 0.18rem 0.55rem; border: 1px solid rgba(245, 241, 232, 0.18); border-radius: 999px; color: var(--ivoire-doux); white-space: nowrap; }
.puce-titre.entree { border-color: var(--laiton); color: var(--ivoire); }
.puce-titre.sortie { color: #D69A88; border-color: rgba(214, 154, 136, 0.4); text-decoration: line-through; text-decoration-color: rgba(214, 154, 136, 0.6); }

.espace-contenu.large { max-width: 74rem; }
.journal .tableau td { padding-right: 0.9rem; }
.journal .tableau td:first-child { min-width: 12rem; }
/* Journal en fiches sur téléphone */
@media (max-width: 760px) {
  .journal { max-height: none; overflow: visible; border-top: 0; }
  .journal thead { display: none; }
  .journal table, .journal tbody { display: block; }
  .journal tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.8rem 0.6rem; padding: 1.3rem 0; border-bottom: 1px solid rgba(245, 241, 232, 0.1); }
  .journal td { display: block; padding: 0; border: 0; min-width: 0 !important; }
  .journal td:first-child, .journal td[data-label="Holdings"], .journal td[data-label="Sold"] { grid-column: 1 / -1; }
  .journal td.nombre { text-align: left; }
  .journal td[data-label]::before { content: attr(data-label); display: block; font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ivoire-pale); margin-bottom: 0.3rem; white-space: nowrap; }
  .journal .puces { max-width: none; min-width: 0; }
}

.lien-sortie { background: none; border: 0; border-left: 1px solid rgba(245, 241, 232, 0.18); padding: 0.35rem 0 0.35rem 1.4rem; cursor: pointer;
  font: inherit; font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ivoire-pale); white-space: nowrap; transition: color var(--fondu); }
.lien-sortie:hover { color: var(--ivoire); }

.modele-tete { display: flex; flex-direction: column; gap: 0.4rem; }
.modele-tete.suivant { margin-top: 3rem; padding-top: 3.5rem; border-top: 1px solid rgba(168, 137, 79, 0.35); }
.modele-titre { margin: 0; font-family: var(--serif); font-weight: 300; font-size: clamp(1.7rem, 4vw, 2.3rem); }