/* frame, grid, positions */
/* top-right caché tant que JS pas prêt */
html:not(.frame-ready) [data-frame-part="topRight"] {
  opacity: 0;
  pointer-events: none;
}

.frame {
  position: relative;
  width: 100%;
  height: 100%;
  
}

.top-left {
  position: absolute;
  top: 0;
  left: 0;
}

.top-right {
  position: absolute;
  top: 0;
  right: 0;
}
.bottom-right {
  position: absolute;
  bottom: 0;
  right: 0;
}
.bottom-left {
  position: absolute;
  bottom: 0;
  left: 0;
}

/* règle générale pour toutes les parties du frame */
[data-frame-part].is-visible {
  opacity: 1;
  pointer-events: auto;
  transition: opacity 100ms ease;
}

[data-frame-part].is-invisible {
  opacity: 0;
  pointer-events: none; /* super important pour pas cliquer un lien "invisible" */
  transition: opacity 100ms ease;
}

/* ton état "full" plus tard */
[data-frame-part].is-full {
  opacity: 1;
  pointer-events: auto;
  /* + règles spécifiques (ex: top: 100px etc.) */
}

[data-frame-part].is-fixed {
  position: fixed;
}

/* coords SUR LE WRAPPER */
[data-frame-part="topLeft"].is-fixed {
  top: var(--space-4);
  left: var(--space-4);
}

[data-frame-part="topRight"].is-fixed {
  top: var(--space-4);
  right: var(--space-4);
}

[data-frame-part="bottomLeft"].is-fixed {
  bottom: var(--space-4);
  left: var(--space-4);
}

[data-frame-part="bottomRight"].is-fixed {
  bottom: var(--space-4);
  right: var(--space-4);
}

[data-frame-part].is-fixed .top-left,
[data-frame-part].is-fixed .top-right,
[data-frame-part].is-fixed .bottom-left,
[data-frame-part].is-fixed .bottom-right {
  position: static; /* ils suivent le wrapper */
}

.bottom-left .frame__bottom-left-text {
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 75vw; /* état hero */
}

[data-frame-part="bottomLeft"].is-shrinked .bottom-left .frame__bottom-left-text {
  max-width: 20vw;
}


/* cache complètement le bloc (mais garde le layout ailleurs) */
[data-frame-part].is-hidden-on-scroll {
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms ease;
}