/* Les 4 étapes « De ton profil à ton assiette » (methode.html), proposition A validée le 08/10.
   Les classes ne sont posées que par le script, et seulement si WebGL marche et sans « réduire les animations » :
   sinon la section reste EXACTEMENT celle d'aujourd'hui. */

/* ---------- A : un fil conducteur en 3D, une scène collée qui suit la lecture ---------- */
.steps.e3a{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);column-gap:clamp(28px,4vw,64px);align-items:start}
.steps.e3a > .step{grid-column:1;min-height:64vh;align-content:center;transition:opacity .5s ease}
.steps.e3a > .step:not(.e3-actif){opacity:.38}
.e3a-scene{grid-column:2;grid-row:1 / span 4;position:sticky;top:calc(64px + 7vh);height:min(76vh,720px);margin:0}
.e3a-scene canvas{display:block;width:100%;height:100%}
/* l'étape 3 (le Tetris de la journée) a besoin de plus de défilement pour que les pièces tombent une à une */
.steps.e3a > .step:nth-of-type(3){min-height:96vh}
@media(max-width:900px){
  .steps.e3a{display:block}
  .e3a-scene{position:sticky;top:64px;z-index:3;height:38vh;margin:0 calc(-1*var(--edge,16px));background:var(--fond,#F6F3EE);
    -webkit-mask-image:linear-gradient(#000 92%,transparent);mask-image:linear-gradient(#000 92%,transparent)}
  .steps.e3a > .step{min-height:52vh;align-content:start}
  .steps.e3a > .step:nth-of-type(3){min-height:88vh}
  .steps.e3a::before,.steps.e3a .spine-fill{top:38vh}
}
/* Dimitri 08/10 : pendant les transitions, rien ne doit être coupé net par le bord : les bords de la scène s'effacent en fondu */
.e3a-scene canvas{-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
/* Dimitri 08/10 — ordinateur : une réserve sous la dernière étape, pour que la scène reste en place jusqu'à la fin de l'étape 4
   (le bas de la scène collée = la ligne de lecture à 55 % + cette réserve) ; la barre grise s'arrête à la dernière étape */
@media(min-width:901px){
  .e3a-reserve{grid-column:1;height:max(0px,calc(64px + 7vh + min(76vh,720px) - 55vh))}
  .steps.e3a::before{bottom:max(0px,calc(64px + 7vh + min(76vh,720px) - 55vh))}
}
/* téléphone : fond opaque, le fil s'efface
   avant le bas, et un fondu sous la scène : le texte passe dessous sans jamais être barré */
@media(max-width:900px){
  .e3a-scene{-webkit-mask-image:none;mask-image:none;transition:opacity .2s linear}
  .e3a-scene::after{content:"";position:absolute;left:0;right:0;top:100%;height:22px;background:linear-gradient(var(--fond,#F6F3EE),transparent);pointer-events:none}
  .e3a-scene canvas{-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent),linear-gradient(#000 86%,transparent);
    mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent),linear-gradient(#000 86%,transparent);
    -webkit-mask-composite:source-in;mask-composite:intersect}
}
/* SORTIE (téléphone, 08/10) : une courte réserve sous le bloc 4 ; la scène y descend un peu et se fond dans la page (etapes.js),
   puis la bande remonte avec la section suivante juste dessous */
@media(max-width:900px){
  .e3a-reserve{height:14vh}
  .steps.e3a::before{bottom:14vh}
  .e3a-scene{transition:none}
  .e3a-scene canvas{position:relative;z-index:1;transform-origin:50% 0;will-change:transform}
}