/* 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; }
/* Mobile : le tiroir de detail s'empile SOUS le schema plutot que de l'ecraser sur le cote
   (aucun repli n'existait avant ce chantier). En paysage, la largeur revient : le tiroir
   retrouve sa place a cote du schema, comme sur bureau. */
@media (max-width: 900px) {
  .structure-corps { flex-direction: column; }
}
@media (max-width: 900px) and (orientation: landscape) {
  .structure-corps { flex-direction: row; }
}
/* 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. `positionFinale`, structure/survol.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;
  /* Posé près du bord droit de la carte, un bloc absolu se rétrécit à la place qui reste
     jusqu'au bord : ses libellés passaient à la ligne, un mot par ligne. */
  width: max-content;
  max-width: 20rem;
  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/survol.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; }
/* Le seul élément du survol qui se touche : posé au doigt, il mène au détail. */
.structure-survol-detail { pointer-events: auto; margin-top: 0.4rem; }
.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); }
/* Teinte d'un revenu et case vide : mêmes règles que le compte d'un bien, dont le survol
   partage `montantHtml`. */
.structure-survol-ligne .vert { color: var(--accent-text); }
.structure-survol-ligne .vide { color: var(--muted); }
.structure-survol-ligne.discret { color: var(--muted); font-style: italic; font-size: 0.7rem; }

/* Le compte d'un bien : libellé, /mois, /an (2026-09-09). Grille sur le CONTENEUR, lignes en
   `display: contents`, pour que les trois colonnes s'alignent d'une ligne à l'autre quel que
   soit le libellé — un libellé long se replie donc sans décaler les chiffres des autres
   lignes. Les chiffres sont en chasse fixe (`tabular-nums`) : sans ça, deux montants de même
   longueur ne s'alignent pas verticalement. */
/* Gouttiere a zero, l'ecart est porte par le `padding-left` des cellules de chiffres : le
   trait des lignes de total (pose sur les CELLULES, cf. plus bas) reste alors continu d'un
   bout a l'autre de la ligne au lieu d'etre coupe a chaque colonne. */
.structure-compte { display: grid; grid-template-columns: 1fr auto auto; column-gap: 0; }
.structure-compte-ligne { display: contents; }
.structure-compte-ligne > span { padding: 0.05rem 0; }
.structure-compte-ligne > span:not(:first-child) {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  padding-left: 0.7rem;
}
.structure-compte-ligne.entete > span {
  color: var(--muted);
  font-size: 0.7rem;
  padding-bottom: 0.15rem;
}
/* La bordure se pose sur les CELLULES, pas sur la ligne : `display: contents` fait disparaître
   la boîte de la ligne, un `border-top` posé dessus ne dessinerait rien. */
.structure-compte-ligne.accent > span {
  font-weight: 700;
  border-top: 1px solid var(--border-strong);
  margin-top: 0.2rem;
  padding-top: 0.25rem;
}
.structure-compte-ligne .positive { color: var(--accent-text); }
.structure-compte-ligne .negative { color: var(--red); }
.structure-compte-ligne .vide { color: var(--muted); }
/* Teintes forcees, independantes du signe (cf. `montantHtml`, structure/comptes-bien.js) : le loyer est ce
   que le bien RAPPORTE, le capital rembourse n'est qu'un deplacement d'argent qui ne change
   rien au patrimoine. Meme convention d'or que le Sankey mensuel. */
.structure-compte-ligne .vert { color: var(--accent-text); }
.structure-compte-ligne .or { color: var(--gold-strong); }
/* Le déroulé « Charges et impôts » : son enveloppe ne dessine rien (`display: contents`, comme
   les lignes) et se replie par `hidden`. Un `display` d'auteur annule `hidden`, d'où la garde. */
.structure-compte-sous { display: contents; }
.structure-compte-sous[hidden] { display: none !important; }
.structure-compte-sous .structure-compte-ligne > span:first-child { padding-left: 0.9rem; }
.structure-deroule {
  all: unset; cursor: pointer; font: inherit; color: inherit;
}
.structure-deroule::before { content: '▸ '; color: var(--muted); }
.structure-deroule[aria-expanded="true"]::before { content: '▾ '; }
.structure-deroule:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.structure-compte-ligne.discret > span { color: var(--muted); font-style: italic; font-size: 0.7rem; }
/* Une ligne muette (« pas encore un an de recul ») n'a pas deux montants mais une explication :
   elle occupe les deux colonnes de chiffres, et se lit à gauche comme une phrase. */
/* Selecteur porte par la MEME regle que le `nowrap` des colonnes de chiffres
   (`.structure-compte-ligne > span`) : ecrit plus court, il perdait en specificite et la
   phrase se faisait couper au lieu de se replier. */
.structure-compte-ligne > span.structure-compte-explication {
  grid-column: span 2;
  text-align: right;
  white-space: normal;
}
/* Le bouton « Indicateurs de performance » (2026-09-22) : seul enfant de sa ligne, il prend les
   trois colonnes plutôt que de se caler dans celle du libellé. */
.structure-compte-ligne > .structure-perf-bouton {
  grid-column: 1 / -1;
  width: 100%;
  margin-top: 0.3rem;
}

/* --- 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 340px;
  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 { margin-top: 0.4rem; }
.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); }
/* Les lectures d'un bien (le bien entier, vous, chaque société) : la rangée passe à la ligne,
   jamais le libellé d'une pastille. */
.structure-vues { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.75rem; }
.structure-vue {
  border: 1px solid var(--border); background: var(--bg-hover); color: var(--muted);
  border-radius: 999px; padding: 0.22rem 0.65rem; font-size: 0.74rem; white-space: nowrap; cursor: pointer;
}
.structure-vue:hover { color: var(--text-strong); border-color: var(--border-strong); }
.structure-vue[aria-selected="true"] {
  border-color: var(--accent); color: var(--accent-text);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}
.structure-tiroir-titre { font-weight: 600; color: var(--text-strong); margin-bottom: 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; }

/* --- Onglet Structure : fenêtre « Indicateurs de performance » (2026-09-22) --------- */
/* Même langage que `.structure-survol-ligne` (libellé à gauche, montant à droite) : c'est le
   même genre de ligne, juste dans une fenêtre plutôt qu'une bulle flottante. */
.structure-perf-ligne {
  display: flex; justify-content: space-between; align-items: center; gap: 0.75rem;
  padding: 0.5rem 0; border-bottom: 1px solid var(--border);
}
.structure-perf-ligne:last-child { border-bottom: none; }
.structure-perf-ligne .positive { color: var(--accent-text); font-weight: 600; }
.structure-perf-ligne .negative { color: var(--red); font-weight: 600; }

.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;
}

/* Carte « Ce que coûtent vos structures » : un tableau qui se lit en une passe. */
.structure-architecture-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; margin: 0.5rem 0; }
.structure-architecture-table th, .structure-architecture-table td { padding: 0.35rem 0.5rem; text-align: right; border-bottom: 1px solid var(--border); white-space: nowrap; }
.structure-architecture-table th:first-child { text-align: left; white-space: normal; }
.structure-architecture-table thead th { color: var(--muted); font-weight: 600; }
.structure-architecture-table tfoot th, .structure-architecture-table tfoot td { font-weight: 700; border-bottom: 0; }
#structure-architecture-corps[hidden] { display: none !important; }