/* ============================================================
   Effets visuels Sextant : groupe « structures » (effets n° 36 et 38, 16/09/2026)
   Fiche d'un produit structuré. Voir js/fx/structures.js.
   ============================================================ */

/* ---------- 36 : le nom bascule comme un tableau d'aéroport ---------- */
/* Classes posées uniquement pendant la bascule (moins d'une seconde), puis retirées.
   Le vrai nom garde sa place et devient transparent ; les palettes sont par-dessus. */
.st-entete .fx-structures-bascule{position:relative;-webkit-text-fill-color:transparent}
.fx-structures-tableau{position:absolute;inset:0;pointer-events:none;-webkit-text-fill-color:currentColor;white-space:pre}
.fx-structures-palette{position:absolute;display:flex;justify-content:center;white-space:pre;isolation:isolate}
/* fond de la palette : plaque claire fendue en son milieu, visible pendant la rotation */
.fx-structures-palette::before{content:"";position:absolute;inset:6% .5px 2%;z-index:-1;border-radius:3px;pointer-events:none;
  background:linear-gradient(var(--bg3),var(--bg3)) 0 54%/100% 1px no-repeat,rgba(255,255,255,.12);
  opacity:0;transition:opacity .3s ease}
.fx-structures-palette.fx-structures-tourne::before{opacity:1;transition:opacity .06s ease var(--fx-structures-delai,0ms)}
body.light-theme .fx-structures-palette::before{background:linear-gradient(var(--bg3),var(--bg3)) 0 54%/100% 1px no-repeat,rgba(0,0,0,.08)}

/* ---------- 38 : profondeur de champ sur le graphique ---------- */
#stGraphSvg{--fx-structures-ombre:rgba(0,0,0,.6)}
body.light-theme #stGraphSvg{--fx-structures-ombre:rgba(0,0,0,.22)}
#stGraphSvg>polyline.st-trace,#stGraphSvg>path.st-aire,#stGraphSvg>circle.st-pt,#stGraphSvg>circle.st-halo,#stGraphSvg #stCurseurG>circle{
  transition:stroke-opacity .28s ease,fill-opacity .28s ease,stroke-width .28s ease}

/* courbes qui reculent : opacité de trait / de remplissage (les animations d'entrée
   .st-* tiennent opacity, on n'y touche pas) et léger flou. Les deux états écrivent la
   même liste de filtres pour que la mise au point soit une vraie transition. */
#stGraphSvg[data-fx-structures-focus]>polyline.st-trace,
#stGraphSvg[data-fx-structures-focus]>circle.st-pt,
#stGraphSvg[data-fx-structures-focus] #stCurseurG>circle{
  stroke-opacity:.32;fill-opacity:.32}
#stGraphSvg[data-fx-structures-focus]>path.st-aire{fill-opacity:.32}
#stGraphSvg[data-fx-structures-focus]>circle.st-halo{stroke-opacity:.32}

/* courbe au premier plan (rang vérifié en JS) */
#stGraphSvg[data-fx-structures-focus="0"]>polyline.st-trace:nth-of-type(1),
#stGraphSvg[data-fx-structures-focus="1"]>polyline.st-trace:nth-of-type(2),
#stGraphSvg[data-fx-structures-focus="2"]>polyline.st-trace:nth-of-type(3),
#stGraphSvg[data-fx-structures-focus="3"]>polyline.st-trace:nth-of-type(4),
#stGraphSvg[data-fx-structures-focus="4"]>polyline.st-trace:nth-of-type(5),
#stGraphSvg[data-fx-structures-focus="5"]>polyline.st-trace:nth-of-type(6),
#stGraphSvg[data-fx-structures-focus="0"]>circle.st-pt:nth-of-type(2),
#stGraphSvg[data-fx-structures-focus="1"]>circle.st-pt:nth-of-type(4),
#stGraphSvg[data-fx-structures-focus="2"]>circle.st-pt:nth-of-type(6),
#stGraphSvg[data-fx-structures-focus="3"]>circle.st-pt:nth-of-type(8),
#stGraphSvg[data-fx-structures-focus="4"]>circle.st-pt:nth-of-type(10),
#stGraphSvg[data-fx-structures-focus="5"]>circle.st-pt:nth-of-type(12),
#stGraphSvg[data-fx-structures-focus="0"] #stCurseurG>#stCurseurPt0,
#stGraphSvg[data-fx-structures-focus="1"] #stCurseurG>#stCurseurPt1,
#stGraphSvg[data-fx-structures-focus="2"] #stCurseurG>#stCurseurPt2,
#stGraphSvg[data-fx-structures-focus="3"] #stCurseurG>#stCurseurPt3,
#stGraphSvg[data-fx-structures-focus="4"] #stCurseurG>#stCurseurPt4,
#stGraphSvg[data-fx-structures-focus="5"] #stCurseurG>#stCurseurPt5{
  stroke-opacity:1;fill-opacity:1}
#stGraphSvg[data-fx-structures-focus="0"]>path.st-aire:nth-of-type(1),
#stGraphSvg[data-fx-structures-focus="1"]>path.st-aire:nth-of-type(2),
#stGraphSvg[data-fx-structures-focus="2"]>path.st-aire:nth-of-type(3),
#stGraphSvg[data-fx-structures-focus="3"]>path.st-aire:nth-of-type(4),
#stGraphSvg[data-fx-structures-focus="4"]>path.st-aire:nth-of-type(5),
#stGraphSvg[data-fx-structures-focus="5"]>path.st-aire:nth-of-type(6){fill-opacity:1}
#stGraphSvg[data-fx-structures-focus="0"]>circle.st-halo:nth-of-type(1),
#stGraphSvg[data-fx-structures-focus="1"]>circle.st-halo:nth-of-type(3),
#stGraphSvg[data-fx-structures-focus="2"]>circle.st-halo:nth-of-type(5),
#stGraphSvg[data-fx-structures-focus="3"]>circle.st-halo:nth-of-type(7),
#stGraphSvg[data-fx-structures-focus="4"]>circle.st-halo:nth-of-type(9),
#stGraphSvg[data-fx-structures-focus="5"]>circle.st-halo:nth-of-type(11){stroke-opacity:1}
#stGraphSvg[data-fx-structures-focus="0"]:not([data-fx-structures-sobre])>polyline.st-trace:nth-of-type(1),
#stGraphSvg[data-fx-structures-focus="1"]:not([data-fx-structures-sobre])>polyline.st-trace:nth-of-type(2),
#stGraphSvg[data-fx-structures-focus="2"]:not([data-fx-structures-sobre])>polyline.st-trace:nth-of-type(3),
#stGraphSvg[data-fx-structures-focus="3"]:not([data-fx-structures-sobre])>polyline.st-trace:nth-of-type(4),
#stGraphSvg[data-fx-structures-focus="4"]:not([data-fx-structures-sobre])>polyline.st-trace:nth-of-type(5),
#stGraphSvg[data-fx-structures-focus="5"]:not([data-fx-structures-sobre])>polyline.st-trace:nth-of-type(6){stroke-width:2.6}

/* « réduire les animations » : opacité seule, sans flou, sans ombre, sans transition */
#stGraphSvg[data-fx-structures-sobre]>*,#stGraphSvg[data-fx-structures-sobre] #stCurseurG>circle{transition:none!important;filter:none!important}
@media (prefers-reduced-motion:reduce){
  .fx-structures-palette::before{display:none}
  #stGraphSvg>polyline.st-trace,#stGraphSvg>path.st-aire,#stGraphSvg>circle.st-pt,#stGraphSvg>circle.st-halo,#stGraphSvg #stCurseurG>circle{transition:none}
  #stGraphSvg[data-fx-structures-focus]>*,#stGraphSvg[data-fx-structures-focus] #stCurseurG>circle{filter:none!important}
}