/* ============================================================================
   act4-6.css — mise en scène des actes IV, V et VI.
   ----------------------------------------------------------------------------
   Chargée après shell.css et acts.css : elle peut donc corriger la grille
   générique là où ces trois actes en ont besoin.

   Acte IV — deux temps qui se relaient (les quatre machines, puis le scanner),
             les quatre zones cliquables posées en pourcentage sur la plaque,
             l'hologramme et son faisceau.
   Acte V  — le rejeu du geste au canvas, le bloc scellé et son token.
   Acte VI — la carte de rapport calée sur les zones de ui/report-frame.svg,
             seul acte au thème clair.

   Replis prévus partout : sans JavaScript (.sg-nojs), sous 768 px, et en
   mouvement réduit, où les deux temps de l'acte IV s'empilent au lieu de se
   relayer et où rien ne bouge.
   ========================================================================= */

/* ================================================================ ACTE IV */

.sg-js .act--4{--h:420vh}

/* ---------------------------------------------------------------------------
   CORRECTION DU FOND. Les deux plaques de l'acte se superposaient
   (a4-01-corridor en lointain, a4-04-four-cores en proche, en mix-blend-mode:
   screen) : les deux décors se mélangeaient et la salle devenait illisible au
   moment précis où il faut cliquer dedans. La salle est désormais présentée en
   clair, à son cadrage d'origine, dans la figure cliquable ; au fond, on ne
   garde que le couloir, assombri, dont le centre sombre porte le titre.
   --------------------------------------------------------------------------- */
.act--4 .plate--near{display:none}
.act--4 .plate--far{filter:saturate(.76) contrast(1.05) brightness(.82)}
.act--4 .plate__veil{
  background:
    linear-gradient(to bottom,rgba(5,7,12,.9) 0%,rgba(5,7,12,.56) 38%,rgba(5,7,12,.7) 72%,rgba(5,7,12,.95) 100%),
    radial-gradient(ellipse at 50% 48%,transparent 22%,rgba(5,7,12,.82) 86%);
}

/* LES DEUX TEMPS OCCUPENT LA MÊME PLACE — EN GRILLE À UNE CELLULE, ET SURTOUT
   PAS EN `position:absolute;inset:0`.
   En absolu, le temps caché ne pèse rien : la hauteur du bloc restait celle de
   la salle, et le panneau du contrôle, plus haut de 150 px en 1536 × 826,
   débordait par le bas, hors de l'écran — sa dernière ligne était coupée. Le
   filet des fenêtres peu hautes ne pouvait pas le rattraper : il ne mesure que
   ce qui est dans le flux, et l'absolu n'y est pas. En 1900 × 960 les deux
   temps font la même hauteur à un pixel près, d'où un défaut qui ne se voyait
   qu'en fenêtre courte.
   En grille, les deux temps se superposent dans la même cellule ET le bloc
   prend la hauteur du plus haut : plus rien ne déborde, et le filet mesure
   juste. `align-items:center` garde chaque temps centré dans l'écran, comme
   avant. */
.act4{position:relative;display:grid;align-items:center}
.act4 > .act4__stage{grid-area:1/1}
.sg-js .act4__stage[data-stage="scan"]{
  opacity:0;pointer-events:none;transform:scale(.985);
}
.sg-js .act--4[data-phase="1"] .act4__stage[data-stage="scan"],
.sg-js .act--4[data-phase="2"] .act4__stage[data-stage="scan"]{opacity:1;pointer-events:auto;transform:none}
.sg-js .act--4[data-phase="1"] .act4__stage[data-stage="cores"],
.sg-js .act--4[data-phase="2"] .act4__stage[data-stage="cores"]{opacity:0;pointer-events:none;transform:scale(1.03)}

.act4__grid{
  display:grid;grid-template-columns:minmax(0,.84fr) minmax(0,1.26fr);
  grid-template-areas:'intro room' 'cards room';
  gap:clamp(14px,2vw,26px) clamp(20px,3.4vw,44px);align-items:start;
}
.act4__intro{grid-area:intro}
.act4__room{grid-area:room}
.act4__cards{grid-area:cards}
.act4__pick{margin-top:10px;color:var(--holo);font-weight:600}

/* ------------------------------------------------- la salle et ses 4 foyers */
.act4__room{margin:0}
.act4__plate{
  position:relative;aspect-ratio:3168/1344;
  background-size:cover;background-position:center;
  border:1px solid rgba(138,143,152,.3);
  box-shadow:0 20px 60px rgba(0,0,0,.5);
}
.act4__plate::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse at 50% 55%,transparent 44%,rgba(5,7,12,.5) 100%);
}
.act4__room figcaption{
  margin-top:9px;font-family:var(--mono);font-size:.68rem;line-height:1.5;color:var(--imp);max-width:52ch;
}
.act4__cores{position:absolute;inset:0}

.act4__core{
  position:absolute;left:var(--x);top:var(--y);width:var(--w);height:var(--h);
  transform:translate(-50%,-50%);
  background:none;border:0;padding:0;cursor:pointer;color:var(--c,#5fd4ff);
  font:inherit;
}
.act4__core-ring{
  position:absolute;inset:0;border-radius:50%;
  border:2px solid currentColor;opacity:.55;
  box-shadow:0 0 18px -2px currentColor,inset 0 0 22px -6px currentColor;
  transition:opacity .25s,transform .25s var(--ease);
}
.act4__core-ring::after{
  content:'';position:absolute;left:50%;top:50%;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;
  border-radius:50%;background:currentColor;opacity:.9;
}
.act4__core:hover .act4__core-ring,
.act4__core:focus-visible .act4__core-ring{opacity:1;transform:scale(1.07)}
.act4__core.is-on .act4__core-ring{opacity:1;animation:a4-ping 1.8s var(--ease) infinite}
@keyframes a4-ping{0%,100%{box-shadow:0 0 18px -2px currentColor,inset 0 0 22px -6px currentColor}
                   50%{box-shadow:0 0 34px 2px currentColor,inset 0 0 26px -4px currentColor}}
.act4__core-lbl{
  position:absolute;left:50%;top:calc(100% + 6px);transform:translateX(-50%);
  white-space:nowrap;font-family:var(--mono);font-size:.64rem;letter-spacing:.1em;
  text-transform:uppercase;color:#fff;background:rgba(3,5,10,.82);padding:3px 7px;
  border:1px solid currentColor;opacity:0;transition:opacity .2s;pointer-events:none;
}
.act4__core:hover .act4__core-lbl,
.act4__core:focus-visible .act4__core-lbl,
.act4__core.is-on .act4__core-lbl{opacity:1}

/* ------------------------------------------------------------- les fiches */
.act4__cards{
  border-left:2px solid rgba(138,143,152,.35);padding-left:14px;min-height:9em;
}
.act4__card h3{font-size:1.1rem;text-transform:uppercase;letter-spacing:.02em;margin-bottom:4px}
.act4__card-when{font-family:var(--mono);font-size:.7rem;color:var(--holo);margin-bottom:9px}
.act4__card ul{list-style:none;display:grid;gap:5px}
.act4__card li{position:relative;padding-left:14px;font-size:.88rem;color:#c3ced9;max-width:46ch}
.act4__card li::before{content:'';position:absolute;left:0;top:.62em;width:6px;height:1px;background:var(--imp)}
.act4__cards-idle{font-family:var(--mono);font-size:.76rem;color:var(--imp)}

.sg-js .act4__card{display:none}
.sg-js .act4__card.is-on{display:block;animation:a4-card .45s var(--ease)}
.sg-js .act4__cards.is-open .act4__cards-idle{display:none}
.sg-nojs .act4__cards-idle{display:none}
.sg-nojs .act4__card + .act4__card{margin-top:16px}
@keyframes a4-card{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:none}}

/* le foyer ouvert teinte sa fiche */
.act4__card[data-core="search"]{--c:#5fd4ff}
.act4__card[data-core="wait"]{--c:#5fe0a8}
.act4__card[data-core="ads"]{--c:#b08cff}
.act4__card[data-core="video"]{--c:#e0a33c}
.act4__card h3{color:var(--c,#fff)}

/* ------------------------------------------------------------- le scanner */
.act4__scan{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  grid-template-areas:'head holo' 'net holo';gap:clamp(14px,2vw,22px) clamp(20px,3.4vw,44px);align-items:start}
.act4__scan-head{grid-area:head}
.act4__holo{grid-area:holo}
.act4__net{grid-area:net}

.act4__scan-ttl{font-size:clamp(1.5rem,3.4vw,2.4rem);text-transform:uppercase;margin-bottom:10px}
.act4__scan-head p{font-size:.95rem}
.act4__pledge{
  font-family:var(--mono);font-size:.74rem;line-height:1.6;color:#b9c4cf;
  border:1px solid rgba(95,212,255,.26);border-left-width:3px;
  background:rgba(95,212,255,.05);padding:11px 13px;margin-top:14px;max-width:46ch;
}
.act4__pledge strong{color:var(--holo)}
.act4__scan-actions{margin-top:16px}

.act4__holo{
  position:relative;overflow:hidden;
  border:1px solid rgba(95,212,255,.3);
  background:
    linear-gradient(rgba(95,212,255,.045) 1px,transparent 1px) 0 0/100% 22px,
    linear-gradient(90deg,rgba(95,212,255,.045) 1px,transparent 1px) 0 0/22px 100%,
    rgba(4,10,16,.78);
  padding:14px 16px;
}
.act4__beam{
  position:absolute;inset:0;opacity:0;pointer-events:none;
  background:linear-gradient(to bottom,transparent 42%,rgba(95,212,255,.42) 50%,transparent 58%);
  background-size:100% 100%;background-repeat:no-repeat;
}
.act4__scan[data-state="running"] .act4__beam{opacity:1;animation:a4-sweep 1.9s linear 2}
@keyframes a4-sweep{from{background-position:0 -110%}to{background-position:0 110%}}

.act4__rows{list-style:none;display:grid;gap:12px;position:relative}
.act4__row{opacity:.28;transition:opacity .5s var(--ease)}
.act4__row.is-on{opacity:1}
.sg-nojs .act4__row{opacity:1}
.act4__row-ttl{
  display:flex;align-items:baseline;gap:8px;font-size:.84rem;font-weight:700;color:#e6edf4;
  text-transform:uppercase;letter-spacing:.02em;margin-bottom:6px;
}
.act4__row-n{font-family:var(--mono);font-size:.68rem;color:var(--holo);
  border:1px solid rgba(95,212,255,.5);width:1.5em;height:1.5em;display:grid;place-items:center;flex:0 0 auto}
.act4__row dl{display:grid;gap:1px;background:rgba(95,212,255,.12)}
.act4__row dl > div{display:flex;justify-content:space-between;gap:12px;align-items:baseline;
  background:rgba(4,10,16,.86);padding:5px 9px}
.act4__row dt{font-family:var(--mono);font-size:.64rem;letter-spacing:.06em;text-transform:uppercase;color:var(--imp)}
.act4__row dd{font-family:var(--mono);font-size:.78rem;color:#7f8792;text-align:right;
  word-break:break-word;max-width:60%}
.act4__row dd.is-set{color:var(--holo)}
.act4__row dd.is-ok{color:#5fe0a8}
.act4__row dd.is-alert{color:var(--alert)}
.act4__sample{
  display:inline-block;margin:0 0 7px;font-size:1.05rem;color:#dfe6ee;
  border-bottom:1px dashed rgba(95,212,255,.4);padding-bottom:2px;max-width:none;
}
.act4__row--out .act4__row-ttl,.act4__row--out dt{color:#6c737d}
.act4__row--out s{text-decoration-color:var(--alert);text-decoration-thickness:2px}
.act4__row--out dd{text-decoration:line-through;text-decoration-color:rgba(224,49,39,.75)}
.act4__row-note{font-family:var(--mono);font-size:.66rem;line-height:1.5;color:var(--imp);margin-top:6px;max-width:52ch}

.act4__net{
  font-family:var(--mono);font-size:.7rem;color:var(--imp);
  border-top:1px solid rgba(138,143,152,.25);padding-top:9px;margin-top:4px;
}
.act4__net-lbl{display:block;letter-spacing:.14em;text-transform:uppercase;font-size:.6rem;margin-bottom:3px}
.act4__net-v{color:#9fb0bf}
.act4__net-v.is-set{color:var(--holo)}
.act4__nojs{display:none}
.sg-nojs .act4__nojs{display:block;font-family:var(--mono);font-size:.72rem;color:var(--crawl);margin-top:12px}
/* sans JavaScript, aucun bouton mort : les zones cliquables disparaissent,
   les quatre fiches sont de toute façon toutes affichées. */
.sg-nojs .act4__cores{display:none}
.sg-nojs .act4__go,.sg-nojs .act4__beam{display:none}

/* ================================================================= ACTE V */

.sg-js .act--5{--h:380vh}

.act5__grid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(16px,2.4vw,30px) clamp(20px,3.6vw,46px);align-items:start;
}
.act5__src{
  font-family:var(--mono);font-size:.74rem;line-height:1.55;color:var(--holo);
  border-left:2px solid rgba(95,212,255,.5);padding-left:11px;margin-top:14px;max-width:48ch;
}
.act5__src.is-demo{color:var(--crawl);border-left-color:rgba(255,201,60,.6)}

.act5__steps{list-style:none;counter-reset:a5;display:grid;gap:6px;margin-top:16px}
.act5__steps li{
  counter-increment:a5;position:relative;padding-left:28px;
  font-family:var(--mono);font-size:.74rem;color:var(--imp);transition:color .3s;
}
.act5__steps li::before{
  content:counter(a5);position:absolute;left:0;top:0;width:18px;height:18px;
  display:grid;place-items:center;font-size:.6rem;
  border:1px solid rgba(138,143,152,.45);color:inherit;
}
.act5__steps li.is-on{color:var(--holo)}
.act5__steps li.is-on::before{border-color:var(--holo);box-shadow:0 0 12px -2px var(--holo)}
.act5__steps li.is-done{color:#c3ced9}
.act5__steps li.is-done::before{border-color:rgba(95,212,255,.5)}
.act5__actions{margin-top:16px}

.act5__canvas-wrap{
  position:relative;border:1px solid rgba(138,143,152,.28);background:rgba(3,6,11,.62);
}
.act5__canvas{display:block;width:100%;height:clamp(160px,22vh,220px)}
.act5__stage-lbl{
  position:absolute;left:10px;bottom:8px;font-family:var(--mono);font-size:.62rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--imp);
}

.act5__block{
  margin-top:12px;border:1px solid rgba(138,143,152,.28);background:rgba(3,6,11,.72);
  padding:12px 14px;transition:border-color .5s,box-shadow .5s;
}
.act5__block.is-sealed{border-color:rgba(95,212,255,.55);box-shadow:0 0 32px -12px var(--holo)}
.act5__block-head{
  display:flex;justify-content:space-between;gap:10px;align-items:baseline;
  font-family:var(--mono);font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:var(--imp);
  border-bottom:1px solid rgba(138,143,152,.22);padding-bottom:6px;margin-bottom:8px;
}
.act5__block-size{color:var(--holo)}
.act5__token{
  font-family:var(--mono);font-size:.68rem;line-height:1.7;color:var(--holo);
  word-break:break-all;max-height:6.8em;overflow:auto;max-width:none;
}
.act5__block-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:10px}
.act5__copied{font-family:var(--mono);font-size:.7rem;color:#5fe0a8}
.act5__clear-ttl{
  font-family:var(--mono);font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--imp);margin-top:14px;padding-top:9px;border-top:1px solid rgba(138,143,152,.22);
}
.act5__clear{display:grid;gap:1px;background:rgba(138,143,152,.18);margin-top:7px}
.act5__clear > div{display:flex;justify-content:space-between;gap:12px;align-items:baseline;
  background:#06090f;padding:5px 9px}
.act5__clear dt{font-family:var(--mono);font-size:.62rem;letter-spacing:.06em;text-transform:uppercase;color:var(--imp)}
.act5__clear dd{font-family:var(--mono);font-size:.76rem;color:#dfe6ee}

.act5__fake{
  font-family:var(--mono);font-size:.72rem;line-height:1.6;color:#b9c4cf;
  border:1px solid rgba(255,201,60,.3);border-left-width:3px;background:rgba(255,201,60,.05);
  padding:11px 13px;margin-top:18px;max-width:52ch;
}
.act5__fake strong{color:var(--crawl)}
.act5__nojs{display:none}
.sg-nojs .act5__nojs{display:block;font-family:var(--mono);font-size:.72rem;color:var(--crawl);margin-top:12px}
.sg-nojs .act5__actions,.sg-nojs .act5__block-actions,.sg-nojs .act5__canvas-wrap{display:none}

/* ================================================================ ACTE VI */

.sg-js .act--6{--h:260vh}

.act6__grid{
  display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(16px,2.4vw,30px) clamp(20px,3.6vw,46px);align-items:start;
}
.act6__lead{margin-top:12px;font-weight:600;color:#17222c}
.act6__actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}

/* la carte, calée sur les zones de ui/report-frame.svg (repère 1200 x 630) */
.act6__card{
  position:relative;aspect-ratio:1200/630;margin:0;
  background:rgba(255,255,255,.82);border:1px solid rgba(34,60,82,.25);
  box-shadow:0 24px 60px -30px rgba(10,25,40,.6);
  container-type:inline-size;color:#0c1218;
}
.act6__card-frame{position:absolute;inset:0;width:100%;height:100%;color:rgba(34,60,82,.5)}
.sg-uimg--ph.act6__card-frame{inset:6%;width:auto;height:auto}
.act6__zone{position:absolute;left:6%;width:88%}
.act6__zone--ttl{top:9.84%;height:12.38%;display:flex;flex-direction:column;justify-content:center}
.act6__zone--data{top:29.84%;height:51.43%;display:grid;grid-template-columns:repeat(3,1fr);align-content:center}
.act6__zone--foot{top:87.62%;height:6.35%;display:flex;align-items:center}

.act6__card-kicker{
  font-family:var(--mono);letter-spacing:.26em;text-transform:uppercase;color:#2d5070;
  font-size:.62rem;font-size:1.9cqw;
}
.act6__card-ttl{
  font-weight:900;letter-spacing:-.025em;text-transform:uppercase;line-height:1.02;
  font-variation-settings:'wdth' 118;color:#0a1017;
  font-size:1.6rem;font-size:4.4cqw;
}
.act6__col{padding:0 2.2cqw;display:flex;flex-direction:column;justify-content:center;gap:.6cqw}
.act6__col:first-child{padding-left:0}
.act6__col:last-child{padding-right:0}
.act6__col-lbl{
  font-family:var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#4a5a69;
  font-size:.6rem;font-size:1.75cqw;
}
.act6__col-val{
  font-weight:800;line-height:1.08;color:#0a1017;letter-spacing:-.02em;
  font-size:1.2rem;font-size:3.4cqw;text-wrap:balance;
}
.act6__col-sub{color:#3b4a57;line-height:1.4;font-size:.72rem;font-size:1.85cqw;max-width:none}
.act6__zone--foot p{
  font-family:var(--mono);color:#4a5a69;letter-spacing:.06em;
  font-size:.6rem;font-size:1.7cqw;max-width:none;
}
.act6__card-cap{
  position:absolute;left:0;top:calc(100% + 8px);
  font-family:var(--mono);font-size:.66rem;color:#46525e;
}
.act6__nojs{display:none}
.sg-nojs .act6__nojs{display:block;font-family:var(--mono);font-size:.72rem;color:#8a5a00;margin-top:40px}
.sg-nojs .act6__actions button{display:none}

/* ===================================================== écrans intermédiaires */
@media (max-width:980px){
  .act4__grid{grid-template-columns:1fr;grid-template-areas:'intro' 'room' 'cards'}
  .act4__scan{grid-template-columns:1fr;grid-template-areas:'head' 'holo' 'net'}
  .act5__grid,.act6__grid{grid-template-columns:1fr}
  .act6__card{max-width:620px}
}

/* ============================================ écrans peu hauts (portables) */
/* Le contenu de ces trois actes est collé : il doit tenir dans la hauteur
   d'écran, y compris sur un 1280 x 720. On resserre, on ne coupe rien. */
@media (min-width:768px) and (max-height:820px){
  .act4__scan-ttl{font-size:clamp(1.25rem,2.6vw,1.7rem);margin-bottom:7px}
  .act4__scan-head p{font-size:.88rem}
  .act4__pledge{font-size:.69rem;padding:9px 11px;margin-top:11px}
  .act4__scan-actions{margin-top:12px}
  .act4__holo{padding:10px 12px}
  .act4__rows{gap:8px}
  .act4__row-ttl{margin-bottom:4px;font-size:.78rem}
  .act4__row dl > div{padding:3px 9px}
  .act4__sample{font-size:.95rem;margin-bottom:5px}
  .act4__row-note{margin-top:4px}
  .act4__room figcaption{margin-top:6px}

  .act5__canvas{height:clamp(130px,18vh,170px)}
  .act5__block{padding:9px 11px;margin-top:9px}
  .act5__token{max-height:4.4em}
  .act5__clear > div{padding:3px 9px}
  .act5__clear-ttl{margin-top:10px;padding-top:7px}
  .act5__fake{margin-top:12px;padding:9px 11px}
  .act5__steps{margin-top:11px}
}

/* ================================================================== mobile */
@media (max-width:767px){
  /* Les deux temps de l'acte IV s'empilent : plus de relais au défilement. */
  .act4{display:block}
  .sg-js .act4__stage[data-stage="scan"]{opacity:1;pointer-events:auto;transform:none;margin-top:34px}
  .sg-js .act--4[data-phase="1"] .act4__stage[data-stage="cores"],
  .sg-js .act--4[data-phase="2"] .act4__stage[data-stage="cores"]{opacity:1;pointer-events:auto;transform:none}

  /* Les quatre zones deviennent une rangée de boutons étiquetés sous l'image. */
  /* la plaque est recadree plus haute : les quatre boutons se rangent en bas
     sans manger toute l'image. */
  .act4__plate{aspect-ratio:5/4;background-position:50% 38%}
  .act4__cores{position:absolute;inset:auto 5px 5px 5px;display:grid;grid-template-columns:1fr 1fr;gap:5px}
  .act4__core{position:static;width:auto;height:auto;transform:none;
    border:1px solid currentColor;background:rgba(3,5,10,.6);padding:9px 10px;text-align:left}
  .act4__core-ring{position:static;inset:auto;display:inline-block;width:10px;height:10px;
    border-width:1px;box-shadow:0 0 10px -2px currentColor;margin-right:7px;vertical-align:middle;animation:none}
  .act4__core-ring::after{display:none}
  .act4__core.is-on{background:rgba(95,212,255,.1)}
  .act4__core-lbl{position:static;transform:none;opacity:1;display:inline;border:0;background:none;
    padding:0;white-space:normal;font-size:.68rem}
  .act4__cards{min-height:0}
  .act4__scan-ttl{font-size:clamp(1.3rem,7vw,1.8rem)}
  .act4__row dl > div{flex-direction:column;gap:1px}
  .act4__row dd{text-align:left;max-width:none}

  .act5__canvas{height:200px}
  .act5__token{font-size:.64rem;max-height:9em}
  /* la legende reste hors du cadre (qui tient son rapport 1200x630) :
     on lui reserve la place sous la carte. */
  .act6__card{margin-bottom:42px}
}

/* ======================================================== mouvement réduit */
@media (prefers-reduced-motion:reduce){
  /* Empilement statique : les deux temps de l'acte IV cohabitent, rien ne bouge. */
  .act4{display:block}
  .sg-js .act4__stage[data-stage="scan"]{opacity:1;pointer-events:auto;transform:none;margin-top:34px}
  .sg-js .act--4[data-phase="1"] .act4__stage[data-stage="cores"],
  .sg-js .act--4[data-phase="2"] .act4__stage[data-stage="cores"]{opacity:1;pointer-events:auto;transform:none}
  .act4__core.is-on .act4__core-ring{animation:none}
  .act4__beam{display:none}
  .act4__row{opacity:1}
  .act4__card{animation:none}
}