/* ==========================================================================
   Sequences d'etapes animees ([data-frise]), deux mises en forme :
   .frise    frise numerotee, horizontale sur ordinateur, verticale sur mobile ;
             le trait se dessine d'une pastille a la suivante.
   .briques  rangee de cartes .incl-card ; chaque carte apparait a son tour
             et un trait parcourt son bord haut, en relais de l'une a l'autre.
   Dans les deux cas, chaque etape apparait a son tour : l'element .frise-pop
   (pastille ou icone) gonfle avec une onde, puis les mots du titre et du
   texte sortent du flou un par un (decoupe faite par assets/frise.js).
   Contenu visible par defaut : les etats caches n'existent que sous
   .is-armed, pose par le script (et jamais en mouvement reduit).
   ========================================================================== */
[data-frise]{--pas:560ms;} /* temps entre deux etapes */

/* --- Frise numerotee ------------------------------------------------------ */
.frise{
  --gap:32px;
  list-style:none;padding:0;margin:0;
  /* une colonne par etape, quel qu'en soit le nombre */
  display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:var(--gap);
}
.frise .frise-step{position:relative;display:grid;grid-template-columns:1fr;align-content:start;}
.frise .frise-num{
  z-index:1;
  width:48px;height:48px;border-radius:50%;
  background:var(--emerald);color:#fff;
  font-family:var(--font-display);font-weight:800;font-size:22px;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 0 6px #fff;
}
.frise .frise-step:last-child .frise-num{background:var(--mint);color:#0C1B14;}
.frise .frise-title{font-size:18px;font-weight:700;margin:20px 0 8px;color:var(--ink);}
.frise .frise-text{font-size:15px;color:var(--ink-500);margin:0;}

/* Trait : un segment par etape, de sa pastille a la suivante */
.frise .frise-step:not(:last-child)::before,
.frise .frise-step:not(:last-child)::after{
  content:"";position:absolute;top:23px;left:56px;
  width:calc(100% + var(--gap) - 64px);height:2px;border-radius:2px;
}
.frise .frise-step:not(:last-child)::before{background:var(--line);}
.frise .frise-step:not(:last-child)::after{
  background:linear-gradient(90deg,var(--emerald),var(--mint));
  transform-origin:left center;
}

/* --- Cartes : trait le long du bord haut ---------------------------------- */
.briques .frise-step::before{
  content:"";position:absolute;top:-1px;left:18px;right:18px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--emerald),var(--mint));
  transform-origin:left center;pointer-events:none;
}

/* --- Pastille ou icone : onde unique a l'arrivee -------------------------- */
.frise-pop{position:relative;}
.frise-pop::after{
  content:"";position:absolute;inset:0;border-radius:inherit;
  border:2px solid var(--rose);opacity:0;pointer-events:none;
}

/* --- Animation (seulement si le script a arme la sequence) ---------------- */
/* `scale` et non `transform` : l'icone des cartes garde son agrandissement au survol */
[data-frise].is-armed .frise-pop{opacity:0;scale:0.85;}
[data-frise].is-armed .frise-w{
  display:inline-block;opacity:0;filter:blur(6px);transform:translateY(6px);
}
.frise.is-armed .frise-step:not(:last-child)::after,
.briques.is-armed .frise-step::before{transform:scaleX(0);}
/* Cartes : chaque cadre apparait a son tour, jamais de carte vide qui attend.
   `scale` et non `transform`, pour ne pas gener les effets de survol. */
.briques.is-armed .frise-step{opacity:0;scale:0.97;}
.briques.is-in .frise-step{
  opacity:1;scale:1;
  transition:opacity 420ms var(--ease-out),scale 420ms var(--ease-out);
  transition-delay:calc(var(--i) * var(--pas));
}

[data-frise].is-in .frise-pop{
  opacity:1;scale:1;
  transition:opacity 380ms var(--ease-out),scale 380ms var(--ease-out);
  transition-delay:calc(var(--i) * var(--pas));
}
[data-frise].is-in .frise-pop::after{
  animation:frise-onde 700ms var(--ease-out) both;
  animation-delay:calc(var(--i) * var(--pas) + 120ms);
}
/* lineaire : les segments s'enchainent sans a-coup, comme un seul trait */
.frise.is-in .frise-step:not(:last-child)::after,
.briques.is-in .frise-step::before{
  transform:scaleX(1);
  transition:transform calc(var(--pas) - 80ms) linear;
  transition-delay:calc(var(--i) * var(--pas) + 80ms);
}
/* Element de fin d'etape (lien « En savoir plus ») : arrive avec le texte */
[data-frise].is-armed .frise-fin{opacity:0;transform:translateY(6px);}
[data-frise].is-in .frise-fin{
  opacity:1;transform:none;
  transition:opacity 520ms var(--ease-out),transform 520ms var(--ease-out);
  transition-delay:calc(var(--i) * var(--pas) + 360ms);
}
[data-frise].is-in .frise-w{
  opacity:1;filter:blur(0);transform:none;
  transition:opacity 520ms var(--ease-out),filter 520ms var(--ease-out),transform 520ms var(--ease-out);
  transition-delay:calc(var(--i) * var(--pas) + var(--d));
}

@keyframes frise-onde{
  0%{opacity:0.7;transform:scale(1);}
  100%{opacity:0;transform:scale(1.6);}
}

/* --- Mobile : frise verticale --------------------------------------------- */
@media(max-width:860px){
  .frise{grid-auto-flow:row;grid-template-columns:1fr;--gap:28px;}
  .frise .frise-step{grid-template-columns:48px 1fr;column-gap:20px;}
  .frise .frise-num{grid-row:span 2;}
  .frise .frise-title{margin:10px 0 6px;}
  .frise .frise-step:not(:last-child)::before,
  .frise .frise-step:not(:last-child)::after{
    top:56px;left:23px;width:2px;height:calc(100% + var(--gap) - 64px);
  }
  .frise .frise-step:not(:last-child)::after{
    background:linear-gradient(180deg,var(--emerald),var(--mint));
    transform-origin:center top;
  }
  .frise.is-armed .frise-step:not(:last-child)::after{transform:scaleY(0);}
  .frise.is-in .frise-step:not(:last-child)::after{transform:scaleY(1);}
}

/* --- Suite ([data-suite]) -------------------------------------------------
   Bloc qui apparait une fois la sequence precedente terminee, ou seul a son
   entree dans l'ecran (declenche par frise.js) : ses [data-suite-el] montent
   et sortent du flou en cascade. */
[data-suite].is-armed [data-suite-el]{opacity:0;transform:translateY(14px);filter:blur(4px);}
[data-suite].is-in [data-suite-el]{
  opacity:1;transform:none;filter:blur(0);
  transition:opacity 600ms var(--ease-out),transform 600ms var(--ease-out),filter 600ms var(--ease-out);
  /* plafonnee : une longue liste ne fait pas attendre ses derniers elements */
  transition-delay:min(calc(var(--k) * 90ms), 720ms);
}