/* ==========================================================================
   TRANSITION DE PAGE — OPTION A (SVG bars signature)
   Dépendance : body.stancreation-transition-active
   ========================================================================== */

   .stancreation-page-transition{
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: #000;
    display: grid;
    place-items: center;
  
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  
    transition: opacity .18s ease, visibility 0s linear .18s;
  }
  
  body.stancreation-transition-active .stancreation-page-transition{
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity .18s ease, visibility 0s linear 0s;
  }
  
  .stancreation-page-transition-visuel{
    position: relative;
    width: min(52vw, 620px);
    height: auto;
    display: grid;
    place-items: center;
  }
  
  .stancreation-page-transition-svg{
    width: 100%;
    height: auto;
    display: block;
  }
  
  /* bars */
  .stancreation-page-bar{
    fill: #fff;
    transform-box: fill-box;
    transform-origin: left center;
  }
  
  /* état repos */
  .stancreation-page-bar-2,
  .stancreation-page-bar-3{
    opacity: 0;
    transform: scaleX(0);
  }
  
  .stancreation-page-bar-1{
    opacity: 0;
    transform: translateY(-60px) scaleY(0.35);
  }
  
  /* état actif : même vibe que ta transition section */
  body.stancreation-transition-active .stancreation-page-bar-2,
  body.stancreation-transition-active .stancreation-page-bar-3{
    opacity: 1;
    transform: scaleX(1);
    transition: transform .46s cubic-bezier(0.77, 0, 0.175, 1), opacity .22s ease;
  }
  
  body.stancreation-transition-active .stancreation-page-bar-2{ transition-delay: .10s; }
  body.stancreation-transition-active .stancreation-page-bar-3{ transition-delay: .18s; }
  
  body.stancreation-transition-active .stancreation-page-bar-1{
    opacity: 1;
    transform: translateY(0) scaleY(1);
    transition: transform .46s cubic-bezier(0.77, 0, 0.175, 1), opacity .22s ease;
    transition-delay: .05s;
  }
  
  /* anim du carré pendant transition */
  body.stancreation-transition-active .stancreation-page-transition-carre{
    opacity: 1;
    animation: stancreationPageCarreDrop .72s cubic-bezier(0.77, 0, 0.175, 1) forwards;
  }
  
  @keyframes stancreationPageCarreDrop{
    0%   { transform: translateY(-220%) rotate(0deg); opacity: 0; }
    25%  { opacity: 1; }
    100% { transform: translateY(40%) rotate(90deg); opacity: 1; }
  }

  /* ======================================================
   PATCH HARD — Transition page SVG visible (conflits CSS)
   À coller TOUT EN BAS du CSS
====================================================== */

/* état OFF : rien ne doit être visible */
body:not(.stancreation-transition-active) .stancreation-page-transition{
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translateY(0) !important;
}

/* base (écrase anciens styles) */
.stancreation-page-transition{
  position: fixed !important;
  inset: 0 !important;
  z-index: 2000 !important;
  background: #000 !important;

  display: grid !important;
  place-items: center !important;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  /* évite les vieux transforms from-top/bottom */
  transform: translateY(0) !important;
}

/* état ON */
body.stancreation-transition-active .stancreation-page-transition{
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* neutralise d’anciennes classes directionnelles si elles traînent */
.stancreation-page-transition.from-top,
.stancreation-page-transition.from-bottom,
.stancreation-page-transition.from-left,
.stancreation-page-transition.from-right{
  transform: translateY(0) !important;
}