/* STRUCTURE — schema de detention
 *
 * Tranche 12 de public/styles.css, decoupe le 2026-08-24. Les fichiers sont
 * NUMEROTES parce que l'ordre de chargement compte : une regle plus bas l'emporte sur une
 * regle de meme portee plus haut. Ne pas reordonner les <link> de index.html.
 */
@media (max-width: 620px) {
  .invite-foyer { flex-direction: column; align-items: stretch; text-align: center; }
}

/* --- Onglet Structure : le schema de detention ------------------------------------- */
/* Le SVG garde sa taille naturelle et defile plutot que de se comprimer : des disques
   ecrases seraient illisibles bien avant d'etre compacts. */
.structure-titre { margin: 0 0 0.5rem; font-size: 0.82rem; color: var(--muted); }
/* Une date future se signale : le meme schema a deux dates differentes doit se distinguer
   au premier coup d'oeil, sinon le reglage a l'air casse quand la structure ne change pas. */
.structure-titre.projete { color: var(--orange-text); font-weight: 600; }
/* Le dessin tient TOUJOURS dans sa boite : c'est le zoom et le deplacement qui servent a
   aller voir de plus pres, pas un debordement. Avant, un schema plus large que la carte
   depassait des deux cotes, centre par une marge automatique, et sa moitie gauche devenait
   inatteignable meme en defilant. */
.structure-zone { overflow: hidden; height: 58vh; padding: 0.25rem 0 0.5rem; touch-action: none; }
.structure-svg { display: block; width: 100%; height: 100%; cursor: grab; }
.structure-svg.en-deplacement { cursor: grabbing; }
.structure-outils { display: inline-flex; gap: 0.25rem; }
/* Le tiroir (lot 2) prend sa place à côté du schéma, qui se resserre pour lui faire de la
   place — jamais recouvert. `.structure-zone` garde sa hauteur propre ; c'est `.structure-corps`
   qui porte la ligne flex, pour que le tiroir puisse défiler sur sa propre hauteur sans
   dépendre de celle, en vh, du schéma. */
.structure-corps { display: flex; align-items: flex-start; gap: 0.75rem; }
.structure-corps .structure-zone { flex: 1 1 auto; min-width: 0; }
/* Plein ecran : la carte passe par-dessus la page, en gardant son en-tete et ses outils. */
#structure-carte.plein-ecran {
  position: fixed; inset: 0; z-index: 60; margin: 0; border-radius: 0;
  max-height: none; overflow: auto; display: flex; flex-direction: column;
}
#structure-carte.plein-ecran .structure-corps { flex: 1; min-height: 0; }
#structure-carte.plein-ecran .structure-zone { flex: 1; height: auto; }
body.structure-plein-ecran { overflow: hidden; }
.structure-date { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.78rem; color: var(--muted); }
.structure-date select { padding: 0.25rem 0.4rem; font-size: 0.82rem; }
.structure-jeton { cursor: grab; }
.structure-jeton circle { stroke-width: 2; transition: filter 0.12s ease; }
.structure-jeton:hover circle { filter: brightness(1.35); }
.structure-jeton.en-deplacement { cursor: grabbing; }
.structure-jeton.en-deplacement circle { filter: brightness(1.5); }
.structure-nom { fill: var(--text-strong); font-size: 0.72rem; font-weight: 600; }
.structure-montant { fill: var(--muted); font-size: 0.66rem; }
.structure-projete { fill: var(--muted); font-size: 0.6rem; font-style: italic; }
/* Le + / - au centre du groupe epargne : le seul disque qui s'ouvre. */
.structure-indice { fill: var(--text-strong); font-size: 0.95rem; font-weight: 700; }
.structure-pct { fill: var(--muted); font-size: 0.68rem; paint-order: stroke; stroke: var(--card); stroke-width: 3px; }
.structure-trait { stroke: var(--border-strong); stroke-width: 1.6; }
/* Tirets qui defilent du bien vers son detenteur : le sens de lecture est porte par
   l'animation, pas par une pointe de fleche minuscule. */
.structure-trait.detention { stroke: var(--accent); stroke-dasharray: 7 7; animation: structure-defile 1.1s linear infinite; }
/* Un trait de foyer n'est pas une detention : ni couleur, ni mouvement, ni pourcentage. */
.structure-trait.foyer { stroke: var(--muted); stroke-dasharray: 2 5; }
.structure-trait.contenu { stroke: var(--accent); stroke-width: 1.2; opacity: 0.55; }
@keyframes structure-defile { to { stroke-dashoffset: -14; } }
@media (prefers-reduced-motion: reduce) {
  .structure-trait.detention { animation: none; }
}
/* --- Onglet Structure : le survol d'un disque (cockpit, lot 1) ---------------------- */
/* `#structure-carte` porte le referentiel : `position: relative` explicite, pour ne pas
   dependre du `transform: translateY(0)` que `.panel.active .card` laisse figee apres son
   animation d'entree (02-mise-en-page.css, `animation … both`) — cette carte est DEJA le
   referentiel de facto a cause de ce transform, mais le dire ici rend la position stable
   meme si cette animation change un jour. Chaque bloc est `position: absolute`, place en
   coordonnees relatives a `#structure-carte` (cf. positionnerBloc, structure.js) — le disque
   survole est en SVG, transforme par le zoom/deplacement du schema, mais son rectangle
   ecran (getBoundingClientRect) se lit normalement. `pointer-events: none` partout : le
   survol se regarde, il ne doit jamais voler le clic/drag du disque en dessous. */
#structure-carte { position: relative; }
#structure-survol { pointer-events: none; }
.structure-survol-bloc {
  position: absolute;
  z-index: 56; /* sous #structure-carte.plein-ecran (60), au-dessus du reste */
  min-width: 9rem;
  padding: 0.5rem 0.7rem;
  border-radius: 10px;
  background: var(--card);
  border: 1px solid var(--border-strong);
  box-shadow: 0 6px 18px color-mix(in srgb, var(--text-strong) 16%, transparent);
  font-size: 0.76rem;
  opacity: 0;
  /* `left`/`top` portent le glissement (posés par structure.js : départ au centre du disque,
     arrivée à la position finale, cf. afficherSurvol) — `transform` ne fait qu'aligner le bon
     coin/bord du bloc sur ce point et reste FIXE, il ne participe pas à la transition. */
  transition: opacity 0.3s ease, left 0.3s ease, top 0.3s ease;
}
.structure-survol-bloc-nom { transform: translate(-50%, -100%); }
.structure-survol-bloc-resultat { transform: translate(0, 0); }
.structure-survol-bloc-argent { transform: translate(-100%, 0); }
.structure-survol.visible .structure-survol-bloc { opacity: 1; }
.structure-survol-nom { font-weight: 700; color: var(--text-strong); }
.structure-survol-statut { color: var(--muted); font-size: 0.7rem; margin-top: 0.1rem; }
.structure-survol-titre { color: var(--muted); font-size: 0.7rem; margin-bottom: 0.3rem; }
.structure-survol-ligne { display: flex; justify-content: space-between; gap: 0.6rem; padding: 0.05rem 0; }
.structure-survol-ligne.accent { font-weight: 700; border-top: 1px solid var(--border-strong); margin-top: 0.2rem; padding-top: 0.25rem; }
.structure-survol-ligne .positive { color: var(--accent-text); }
.structure-survol-ligne .negative { color: var(--red); }
.structure-survol-ligne.discret { color: var(--muted); font-style: italic; font-size: 0.7rem; }
/* Les deux dernières lignes (impôt loyers + net après impôt) en gris italique, spec §2. */
.structure-survol-est { color: var(--muted); font-style: italic; }
.structure-survol-est .structure-survol-ligne.accent { color: var(--text-strong); font-style: normal; }

/* --- Onglet Structure : le tiroir de détail (cockpit, lot 2) ------------------------ */
/* Transitoire (aucun état persisté, contrairement aux positions des disques) : largeur fixe,
   défile sur sa propre hauteur plutôt que d'imposer celle du schéma. Les lignes réutilisent
   `.structure-survol-ligne` (même langage visuel qu'au survol). */
.structure-tiroir {
  flex: 0 0 300px;
  max-height: 58vh;
  overflow-y: auto;
  padding-left: 0.75rem;
  border-left: 1px solid var(--border-strong);
  font-size: 0.8rem;
}
#structure-carte.plein-ecran .structure-tiroir { max-height: none; }
.structure-tiroir-entete { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.5rem; }
.structure-tiroir-nom { font-weight: 700; color: var(--text-strong); font-size: 0.92rem; }
.structure-tiroir-statut { color: var(--muted); font-size: 0.76rem; margin-top: 0.1rem; }
.structure-tiroir-fiche { display: inline-block; margin-top: 0.3rem; font-size: 0.76rem; }
.structure-tiroir-fermer {
  background: none; border: none; cursor: pointer; color: var(--muted); font-size: 1rem;
  line-height: 1; padding: 0.1rem 0.3rem; flex: 0 0 auto;
}
.structure-tiroir-fermer:hover { color: var(--text-strong); }
.structure-tiroir-section { margin-top: 0.85rem; padding-top: 0.75rem; border-top: 1px solid var(--border); }
.structure-tiroir-titre { font-weight: 600; color: var(--text-strong); margin-bottom: 0.35rem; }
.structure-tiroir-note { color: var(--muted); font-style: italic; font-size: 0.72rem; margin-top: 0.35rem; }
.structure-tiroir-sparkline { display: block; width: 100%; height: 64px; margin-top: 0.4rem; cursor: pointer; }
.structure-tiroir-actions { display: flex; flex-direction: column; gap: 0.4rem; }
.structure-tiroir-actions .btn { width: 100%; }
.structure-tiroir[hidden] { display: none !important; }

.structure-legende { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; margin-top: 0.5rem; }
.structure-legende .btn { margin-left: auto; }
.structure-legende-aide { margin-left: 0.9rem; font-style: italic; }
.structure-puce { width: 0.6rem; height: 0.6rem; border-radius: 50%; display: inline-block; margin-left: 0.6rem; }
.structure-puce.personne { background: var(--accent); }
.structure-puce.societe { background: var(--purple); }
.structure-puce.bien { background: var(--gold-strong); }
.structure-puce.epargne { background: var(--accent); }

/* Positions qu'aucun cours ne valorise : posé sous le montant de l'enveloppe, là où le
   manque se lit, et non dans une modale qu'on n'ouvre pas tous les jours. */
.env-detail-non-cotes {
  display: flex; align-items: center; gap: 0.35rem;
  margin: -0.25rem 0 0.75rem; font-size: 0.8rem; color: var(--warn);
}
/* Meme piege que `.btn[hidden]` : sans cette ligne, `display: flex` neutralise le `[hidden]`
   du navigateur et la ligne d'avertissement restait affichee — vide au premier affichage,
   puis portant les positions non cotees de l'enveloppe PRECEDENTE. */
.env-detail-non-cotes[hidden] { display: none !important; }
.crypto-sync-non-cotes { color: var(--warn); }

/* Logo du jeton en tête de ligne de légende, à la place de la pastille de couleur. */
.env-chart-legend-icon {
  width: 14px; height: 14px; border-radius: 50%; flex: 0 0 14px; object-fit: contain;
}

/* Frontière entre ce qui a eu lieu et ce qui est prévu, dans la chronologie. Un trait plein
   plutôt qu'un espacement : c'est la distinction structurante de l'écran, pas une nuance. */
.timeline-aujourdhui {
  display: flex; align-items: center; gap: 0.6rem;
  margin: 1.1rem 0; color: var(--accent); font-size: 0.72rem;
  font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
}
.timeline-aujourdhui::before,
.timeline-aujourdhui::after {
  content: ''; flex: 1; height: 1px; background: var(--accent); opacity: 0.45;
}
.timeline-aujourdhui span { flex: 0 0 auto; }

/* Fait constaté : partagé par tous les scénarios, donc distinct d'une hypothèse locale. */
.timeline-constate {
  display: inline-flex; align-items: center; gap: 0.2rem;
  padding: 0.05rem 0.4rem; border-radius: 999px;
  font-size: 0.68rem; font-weight: 600;
  color: var(--accent-text);
  background: color-mix(in srgb, var(--accent-text) 12%, transparent);
  cursor: help;
}