/* Shell applicatif : sidebar gauche + topnav + zone principale.
   Fond = colo-fresh à 10 %. Pièce amovible. Tokens → tokens.css */

/* CC-SATOSHI-02 (#536) : Satoshi porte le NOM (wordmark), pas l'UI —
   une seule graisse (Bold 700, 27 ko, font-display swap), la même que le
   seuil (#531). Déclarée ici pour le wordmark de la sidebar ; le
   chargement est paresseux (rien ne se télécharge tant qu'aucun glyphe
   ne l'utilise… et le wordmark n'est visible qu'en tiroir mobile). */
@font-face {
  font-family: 'Satoshi';
  src: url('/public/assets/fonts/Satoshi-Bold.woff2?v=6f979e75') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
/* CC-DESIGN-3-01 (#566) : Instrument Serif (OFL, auto-hébergée — la CSP bloque
   Google Fonts) porte le WORDMARK « Genealogo » et les TITRES d'Atlas.
   Une graisse (Regular 400), font-display swap, licence à côté du woff2. */
@font-face {
  font-family: 'Instrument Serif';
  src: url('/public/assets/fonts/InstrumentSerif-Regular.woff2?v=60c06664') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

html, body { margin: 0; height: 100%; }

body {
  font-family: var(--font, 'Satoshi', -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif);
  /* CC-UI-POLISH-04 : fond des vues en lecture — CC-DESIGN-3-01 (#566) : fond
     PEAU très pâle (--bg, colors.css). Le violet pâle reste le repère des vues
     ÉDITABLES (.edit-view). */
  background: var(--bg);
  color: var(--shell-fg);
  overflow: hidden;
  transition: background .3s;
}
/* ══════════ #996 amendement — LE FOND DU GRAPHE A UN NOM ══════════
   Le family node ouvert doit avoir EXACTEMENT le fond du graphe, pour
   l'illusion de transparence — et le suivre quand le look change.
   ⚠️ IL N'EXISTAIT AUCUNE VARIABLE POUR ÇA, et `--bg` n'est PAS celle-là :
   mesuré en page, `--bg` vaut #FBF4EE en clair COMME en sombre, alors que le
   fond réellement peint est color-mix(--colo-fresh 10%, white) en clair et
   #14161f en sombre. S'en servir aurait donné un node beige sur fond lavande,
   puis beige sur fond nuit. C'est le piège exact que l'amendement nomme :
   « pas un token approchant ».
   LA RÈGLE : `--graph-bg` EST la valeur, déclarée ICI, à l'endroit unique où
   le fond est peint — et `background` la consomme au lieu de la répéter. Une
   seule source : changer le fond, c'est changer cette ligne, et le node suit
   sans qu'on y pense. C'est aussi pourquoi l'illusion tient d'un look à
   l'autre — `--colo-fresh` bouge avec le look, `--graph-bg` avec lui. */
/* ⚠️ #1263 — LE FOND PASSE DE `edit-view` À `chrono-view`, ET GAGNE LE HALO.
   VERDICT DAMIEN : « mets ce dégradé lavande derrière les vues, toutes les
   vues ». Mesuré avant de toucher : `edit-view` ne couvre QUE Megatree et
   Brackets ; Cercle, Carré, Isométrique, Line et Powerbars étaient sur le
   beige #FBF4EE. « Toutes » veut donc dire `chrono-view`, la classe que
   chaque vue porte.
   ⚠️ `--graph-bg` RESTE LA COULEUR PLATE, et c'est important : le family node
   ouvert la reprend pour son illusion de transparence. Le halo est posé en
   `background-image` PAR-DESSUS, il ne la remplace pas — un dégradé dans
   `--graph-bg` aurait cassé l'illusion partout d'un coup.
   ⚠️ ET LE MODE SOMBRE N'EN VEUT PAS : `body.vo-dark` suit juste en dessous
   avec le raccourci `background`, qui remet `background-image` à `none`. Du
   lavande sur la nuit n'aurait de sens pour personne. */
body.chrono-view {
  --graph-bg: color-mix(in srgb, var(--colo-fresh) 10%, white);
  background-color: var(--graph-bg);
  background-image: var(--halo-marque);
  background-attachment: fixed;
}
/* CC-DESIGN-3-01 (#566) : mode sombre — le fond reste NUIT (même teinte que
   #stage), le fond peau ne déborde pas aux marges. */
body.vo-dark { --graph-bg: #14161f; background: var(--graph-bg); }

/* #1268 — règles #sidebar / .sidebar-* → public/ui/sidebar.css */

/* ——— Zone principale (topnav + contenu) ———
   STAGE-FULL-01 : le graphe occupe 100 % de la fenêtre (largeur ET hauteur).
   La sidebar (déjà position:fixed) et la topnav FLOTTENT par-dessus — le
   centre du stage = le vrai centre de la fenêtre (la caméra lit
   stage.clientWidth/Height, donc « centrer » centre réellement). */
#app-shell {
  margin-left: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
}

/* CC-UI-POLISH-05 : plus de bandeau — rail TRANSPARENT qui n'ancre que le
   burger (mobile) et les CTA Export/Print à droite, à la même place qu'avant.
   pointer-events: none sur le rail → le graphe reste manipulable dessous ;
   chaque enfant redevient cliquable. */
#topnav {
  position: absolute;
  top: 0; left: var(--sidebar-w); right: 0;
  height: auto;
  display: flex; align-items: center; gap: 16px; /* NAV-BTNS-01 : plus d'air entre les boutons */
  /* #945 : l'inset droit est NOMMÉ — le rail de looks (#look-carousel) s'y
     aligne par déduction (même bord droit que l'avatar compte), idiome #898.
     #951 : il se DÉDUIT désormais de la loge (--loge-inset) au lieu du 22 en
     dur — l'avatar tombe sur l'AXE de la loge, comme les icônes de gauche
     tombent sur celui du rail. Conséquence assumée et mesurée : « Inviter » et
     « Commander », qui partagent ce padding, glissent de 5px vers la droite —
     ils restent alignés sur l'avatar, ce qui est le sujet. */
  --topnav-x-right: var(--loge-inset);
  padding: var(--loge-top) var(--topnav-x-right) 0 20px; /* CC-UI-POLISH-09 : de l'air en haut et à droite pour Print + compte */
  background: transparent;
  border-bottom: 0;
  pointer-events: none;
  z-index: 10;
}
#topnav > * { pointer-events: auto; }
.topnav-spacer { flex: 1; pointer-events: none !important; }

/* RESPONSIVE-02 : burger d'ouverture de la sidebar — n'existe qu'en mobile */
.topnav-burger {
  display: none; border: 0; background: transparent; cursor: pointer;
  font-size: var(--text-20); line-height: 1; padding: 6px 8px; color: var(--text-fg);
}
#sidebar-backdrop {
  display: none; position: fixed; inset: 0; z-index: 19;
  background: rgba(20, 25, 40, .32);
}

/* RESPONSIVE-02 : ≤ 768px — sidebar en tiroir (off-canvas) ouverte au burger,
   topnav condensée (badges masqués, boutons resserrés). Le graphe garde 100 %
   de l'écran ; les widgets flottants restent à leur place. */
@media (max-width: 768px) {
  #topnav { left: 0; padding: 0 10px; gap: 6px; }
  .topnav-burger { display: inline-flex; }
  .topnav-tag { display: none; }
  .topnav-export { padding: 6px 10px; margin-right: 4px; font-size: var(--text-sm); }
  .topnav-edit { margin-right: 4px; }
  /* #1268 : tiroir #sidebar → sidebar.css */
  /* ⚠️ #934 — RÈGLE RENVERSÉE, et ce n'est pas un détail de tiroir.
     Elle disait : « titres en libellés ; pas de filets fins (le padding des
     labels suffit) » — donc au doigt, les FILETS étaient masqués et les TITRES
     seuls portaient le groupement. Retirer les titres sans toucher à ça aurait
     laissé le tiroir mobile SANS AUCUN séparateur : une colonne de 8 à 10
     icônes d'affilée, exactement le « on ne sait plus lesquelles éditent et
     lesquelles habillent » que le ticket nomme — et il n'aurait pas crevé
     l'écran en desktop, où tout allait bien. C'est le genre de défaut qui
     n'apparaît que chez l'utilisateur.
     Les filets REPRENNENT donc du service dans le tiroir, à leur géométrie de
     BASE (1px de trait, marge 10 — shell.css:146). La surcharge qui vivait ici
     (font-size --text-xs, height auto, margin 0, background transparent,
     padding 10/10/4) les transformait en boîtes de TITRE : elle est retirée
     avec les titres, pas neutralisée par une seconde règle. Il n'y a donc plus
     rien à écrire pour le tiroir — l'absence de règle EST la règle. */
}
.topnav-tag {
  font-size: var(--text-2xs); font-weight: 600;
  padding: 4px 11px; border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--colo-fresh) 10%, white);
  color: color-mix(in srgb, var(--colo-fresh) 80%, var(--text-fg));
  border: 1px solid color-mix(in srgb, var(--colo-fresh) 15%, transparent);
}
.topnav-link {
  font-size: var(--text-sm); font-weight: 500; color: var(--shell-muted);
  text-decoration: none; padding: 6px 10px; border-radius: var(--radius-8);
  transition: background 0.12s, color 0.12s;
}
.topnav-link:hover {
  background: var(--nav-hover-bg); color: var(--colo-fresh);
}

#main {
  flex: 1;
  position: relative;
  overflow: hidden;
  min-height: 0;
}

#stage {
  /* #883 (1) — RENVERSE le point 4 du #878 (graphe accroché à --sidebar-w,
     Δ=148 mesuré) : le graphe s'ancre désormais sur --sidebar-RAIL, la largeur
     FERMÉE, constante. L'encre ne bouge JAMAIS — ni à l'ouverture (le surplus
     de 148px FLOTTE par-dessus), ni à la fermeture.
     #1178 amendement Aperçu : en preview-mode, plein cadre (left:0) — la
     sidebar transparente flotte par-dessus ; graphe + Timeline passent derrière
     (décision 48 « Aperçu NU », transparence sans chrome d'édition). */
  position: absolute; inset: 0 0 0 var(--sidebar-rail, 72px);
  overflow: hidden; cursor: grab;
  /* RESPONSIVE-01 : les gestes tactiles (pan au doigt, pincer-zoomer) sont
     gérés par l'app (Pointer Events) — le navigateur ne doit ni défiler ni
     zoomer la page sur le graphe. */
  touch-action: none;
}
#stage:active { cursor: grabbing; }
/* #1178 : Aperçu — rendu pleine largeur ; sidebar flotte transparente par-dessus */
body.preview-mode #stage { left: 0; }
@media (max-width: 768px) { #stage { left: 0; } }
/* VIEWBOX-CLIP-02 : le svg ne clippe JAMAIS son encre (traits épais, flous,
   embouts…) — le viewBox ne sert qu'au cadrage, la découpe est au bord du
   stage (#stage est overflow:hidden). Sans ça, tout style plus large que la
   réserve du viewBox était tranché net au dézoom (vue Cercle, épaisseur 425+,
   ou épaisseur montée au curseur APRÈS le calcul du viewBox). */
#stage svg { display: block; width: 100%; height: 100%; overflow: visible; }