/* ==========================================================================
   Stolip — hero « Le cadre » (choisi par Julien le 03/10/2026)

   La voie 0 de la chaîne encadre la grande maquette du héros : bord haut =
   la voie elle-même (les trois voies du logo traversent ensemble au-dessus
   de la fenêtre), puis une voie d'évitement qui fait le tour de la fenêtre,
   au même écart des quatre côtés, coins concentriques. Une étiquette posée
   en station sur le faisceau nomme l'objet de la page. Le trait est celui
   de la chaîne (mêmes classes, même épaisseur), à la couleur de l'objet de
   la maquette (le changement de couleur se fait aux aiguillages) : net, pas
   d'ombre ni de flou ; c'est lui qui détache la maquette.
   Le dessin et la synchronisation avec la chaîne : js/hero-cadre.js.

   Ici : la scène du héros se pose à plat (plus d'inclinaison au repos), la
   fenêtre perd son ombre portée (le cadre la remplace), l'écart entre le
   texte et la maquette est réglé pour que la chaîne passe à la bonne hauteur,
   et le haut de la fenêtre remonte dans le premier écran sur les écrans bas.

   Activation : <html data-hero="cadre"> + cette feuille (après mat-chaine.css)
   + js/hero-cadre.js (après js/mat-chaine.js). Sans JS : la scène à plat,
   sans cadre.
   ========================================================================== */

/* ---------- 1. La scène, à plat ---------- */
html[data-hero="cadre"] .fx-hero .fx-tilt{transform:none;will-change:auto}
/* L'ombre portée salissait le trait du cadre : un simple anneau. */
html[data-hero="cadre"] .fx-hero .fx-stage [data-fit] > *,
html[data-hero="cadre"] main > .hero .appwrap > .app{box-shadow:0 0 0 1px rgba(0,0,0,.4)}
html[data-hero="cadre"] body.fx-ava .fx-hero .fx-stage [data-fit] > *{box-shadow:0 0 0 1px rgba(22,19,15,.05)}

/* Écart texte → maquette : la chaîne traverse au milieu de cette bande ; la
   voie 0 (bord haut du cadre) passe 7 px sous ce milieu. 64 px → 25 px
   d'écart entre le cadre et la fenêtre (grand écran) ; 56 px → 21 px
   (700–1299 px) ; 48 px → 17 px (téléphone). Sous la ligne de flottaison,
   la chaîne ne traverse qu'une bande d'au moins 54 px (46 px sur téléphone) :
   ces hauteurs gardent 2 px de marge, la traversée a toujours lieu. */
html[data-hero="cadre"] .fx-hero .fx-stage,
html[data-hero="cadre"] main > .hero .appwrap{margin-top:64px}
@media (min-width:700px) and (max-width:1299px){
  html[data-hero="cadre"] .fx-hero .fx-stage,
  html[data-hero="cadre"] main > .hero .appwrap{margin-top:56px}
}
@media (max-width:699px){
  html[data-hero="cadre"] .fx-hero .fx-stage,
  html[data-hero="cadre"] main > .hero .appwrap{margin-top:48px}
}
/* Place du cadre sur les côtés : à droite descendent les voies et leur
   convoi (31 px gardés entre le cadre et la voie la plus proche, 14 px sur
   téléphone) ; à gauche, à partir de 700 px, le cadre passe 12 px à droite
   du faisceau de la marge. La scène se resserre (--hcd-room-l / --hcd-room-r,
   posées par js/hero-cadre.js sur .fx-stage / .appwrap ; la maquette suit par
   data-fit, sans passer sous son zoom plancher). Valeur de départ sur
   téléphone seulement (les maquettes y sont déjà rognées). */
html[data-hero="cadre"] .fx-hero .fx-stage .fx-fitbox{margin-left:var(--hcd-room-l,0px);margin-right:var(--hcd-room-r,0px)}
html[data-hero="cadre"] main > .hero .appwrap{padding-left:calc(var(--gut) + var(--hcd-room-l,0px));padding-right:calc(var(--gut) + var(--hcd-room-r,0px))}
/* Scène sans .fx-fitbox (page inconnue, sommaire des cas d'usage) : c'est la scène qui se resserre. */
html[data-hero="cadre"] .fx-hero .fx-stage.wrap:not(:has(.fx-fitbox)){padding-left:calc(var(--gut) + var(--hcd-room-l,0px));padding-right:calc(var(--gut) + var(--hcd-room-r,0px))}
html[data-hero="cadre"] .fx-hero .fx-stage:not(.wrap):not(:has(.fx-fitbox)){padding-left:var(--hcd-room-l,0px);padding-right:var(--hcd-room-r,0px)}
@media (max-width:699px){
  html[data-hero="cadre"] .fx-hero .fx-stage,html[data-hero="cadre"] main > .hero .appwrap{--hcd-room-r:22px}
}
/* Portable (720–820 px de haut) : la fenêtre et les deux coins du cadre
   entrent dans le premier écran. */
@media (min-width:700px) and (max-height:820px){
  html[data-hero="cadre"] .fx-hero{padding-top:112px}
  html[data-hero="cadre"] main > .hero{padding-top:112px}
}

/* ---------- 2. Le cadre (svg posé par le JS, sous la chaîne) ---------- */
html[data-hero="cadre"] .hcd{position:absolute;left:0;top:0;width:100%;z-index:-1;pointer-events:none;overflow:hidden;
  font-family:'Spline Sans Mono',ui-monospace,monospace;-webkit-user-select:none;user-select:none}
html[data-hero="cadre"] .hcd path{fill:none}
/* Mêmes traits que la voie (classes chn-lane / chn-tint de mat-chaine.css),
   bouts francs : le cadre se raccorde à la voie aux aiguillages. */
html[data-hero="cadre"] .hcd .hcd-line{stroke-linecap:butt;stroke-linejoin:round}
html[data-hero="cadre"] .hcd .hcd-tint{transition:opacity .7s ease-out}
/* Couleur de l'objet : --k est posée par le JS sur le tracé coloré (c'est --hc-k). */
html[data-hero="cadre"] .hcd .hcd-tint{--k:var(--hc-k)}
html[data-hero="cadre"]:not([data-mat="chaine"]) .hcd .hcd-line{stroke:var(--hc-k);stroke-width:2}
@media (max-width:699px){html[data-hero="cadre"]:not([data-mat="chaine"]) .hcd .hcd-line{stroke-width:1.5}}

/* ---------- 3. L'étiquette : la station du héros ---------- */
/* Forme des stations de la chaîne (« LIGNE 1 ») : panneau plein au fond de
   page, filet et texte à la couleur de l'objet, petite barre du logo. Le fond
   déborde de 4 px : les voies s'arrêtent avant le panneau. */
html[data-hero="cadre"] .hcd-st{opacity:0;transition:opacity .5s ease-out}
html[data-hero="cadre"] .hcd-st.on{opacity:1}
html[data-hero="cadre"] .hcd-st.now{transition:none}
html[data-hero="cadre"] .hcd-st-bg{fill:var(--chn-st-bg,var(--bg,#0A0B0D))}
html[data-hero="cadre"] .hcd-st-b{fill:var(--chn-st-bg,var(--bg,#0A0B0D));stroke:var(--hc-k);stroke-width:1}
html[data-hero="cadre"] .hcd-st-bar{fill:var(--hc-k)}
html[data-hero="cadre"] .hcd-st-t{fill:var(--hc-k);dominant-baseline:central;font-weight:500;letter-spacing:.04em;white-space:pre}
/* Page claire (AVA) : le texte fonce comme celui des stations de la chaîne
   (≈ 5,6:1 sur #FAFAF8) ; filet, barre et cadre restent à la couleur. */
html[data-hero="cadre"] body.fx-ava .hcd-st-t{fill:color-mix(in srgb,var(--hc-k) 72%,#16130F)}

@media (prefers-reduced-motion:reduce){html[data-hero="cadre"] .hcd-st,html[data-hero="cadre"] .hcd .hcd-tint{transition:none}}
@media print{html[data-hero="cadre"] .hcd{display:none}}