/* ============================================================
   metier.css - /metier/ : ATELIER / CRAFT / 15 ANS
   Narratif : "Nous fabriquons des logiciels qui doivent encore
   tourner dans quinze ans". Doctrine, métier, précision.

   Effets distincts (mesh drift diagonal, repères de découpe,
   chaîne workflow, numéros géants ateliers) - jamais les memes
   que /ia/, /securite/, /a-propos/.
   ============================================================ */

.page-metier { --m-ease-out: cubic-bezier(.23, 1, .32, 1); }

/* Mesh : drift diagonal lent (vs pendule, scanner, radar) */
.page-metier .idx3-page-hero__mesh::before {
  animation: metierDrift 14s ease-in-out infinite;
}
@keyframes metierDrift {
  0%, 100% { transform: translate(-20px, -10px) scale(1); }
  50%      { transform: translate(20px, 10px) scale(1.04); }
}

/* Title clip + em : REPERES DE DECOUPE aux 4 coins (signature
   atelier - 4 petits L qui s'inscrivent) */
.page-metier .idx3-page-hero__title {
  opacity: 0;
  transform: translateY(10px);
  animation: metierTitleIn .9s var(--m-ease-out) 200ms forwards;
}
@keyframes metierTitleIn { to { opacity: 1; transform: translateY(0); } }

.page-metier .idx3-page-hero__title em {
  position: relative;
  display: inline-block;
  padding: 2px 12px;
  font-style: italic;
  color: var(--lume-1);
}
/* 4 repères L aux coins (signature) */
.page-metier .idx3-page-hero__title em::before,
.page-metier .idx3-page-hero__title em::after {
  content: "";
  position: absolute;
  width: 10px; height: 10px;
  border: 1px solid var(--lume-1);
  opacity: 0;
  transition: opacity .5s var(--m-ease-out);
}
.page-metier .idx3-page-hero__title em::before {
  top: 0; left: 0;
  border-right: none; border-bottom: none;
}
.page-metier .idx3-page-hero__title em::after {
  bottom: 0; right: 0;
  border-left: none; border-top: none;
}
.page-metier .idx3-page-hero__title em::before { animation: metierMark 1s var(--m-ease-out) 1200ms forwards; }
.page-metier .idx3-page-hero__title em::after  { animation: metierMark 1s var(--m-ease-out) 1500ms forwards; }
@keyframes metierMark { to { opacity: 1; } }

/* Lead + meta */
.page-metier .idx3-page-hero__lead {
  opacity: 0;
  animation: metierFadeIn 1s var(--m-ease-out) 700ms forwards;
}
@keyframes metierFadeIn { to { opacity: 1; } }

.page-metier .idx3-page-hero__meta > div {
  opacity: 0;
  transform: translateX(12px);
  animation: metierMetaIn .6s var(--m-ease-out) forwards;
}
.page-metier .idx3-page-hero__meta > div:nth-child(1) { animation-delay: 1100ms; }
.page-metier .idx3-page-hero__meta > div:nth-child(2) { animation-delay: 1200ms; }
.page-metier .idx3-page-hero__meta > div:nth-child(3) { animation-delay: 1300ms; }
.page-metier .idx3-page-hero__meta > div:nth-child(4) { animation-delay: 1400ms; }
@keyframes metierMetaIn { to { opacity: 1; transform: translateX(0); } }

/* Section titles + num */
.page-metier .idx3-page-section.reveal .idx3-page-section__num {
  opacity: 0; transform: translateY(-6px);
  transition: opacity .5s var(--m-ease-out), transform .5s var(--m-ease-out);
}
.page-metier .idx3-page-section.reveal.in .idx3-page-section__num {
  opacity: 1; transform: translateY(0); transition-delay: 60ms;
}
.page-metier .idx3-page-section.reveal .idx3-page-section__title,
.page-metier .idx3-page-section.reveal .idx3-page-section__lead {
  opacity: 0; transform: translateY(8px);
  transition: opacity .7s var(--m-ease-out), transform .7s var(--m-ease-out);
}
.page-metier .idx3-page-section.reveal.in .idx3-page-section__title { opacity: 1; transform: translateY(0); transition-delay: 160ms; }
.page-metier .idx3-page-section.reveal.in .idx3-page-section__lead { opacity: 1; transform: translateY(0); transition-delay: 240ms; }

/* WORKFLOWS - numero geant inscribed depuis le haut + chain
   qui se trace de gauche a droite (signature atelier) */
.page-metier .idx3-page-section.reveal .idx3-workflow {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .65s var(--m-ease-out), transform .65s var(--m-ease-out);
}
.page-metier .idx3-page-section.reveal.in .idx3-workflow {
  opacity: 1; transform: translateY(0);
}
.page-metier .idx3-page-section.reveal.in .idx3-workflow:nth-child(1) { transition-delay: 100ms; }
.page-metier .idx3-page-section.reveal.in .idx3-workflow:nth-child(2) { transition-delay: 240ms; }
.page-metier .idx3-page-section.reveal.in .idx3-workflow:nth-child(3) { transition-delay: 380ms; }
.page-metier .idx3-page-section.reveal.in .idx3-workflow:nth-child(4) { transition-delay: 520ms; }
.page-metier .idx3-page-section.reveal.in .idx3-workflow:nth-child(5) { transition-delay: 660ms; }
.page-metier .idx3-page-section.reveal.in .idx3-workflow:nth-child(6) { transition-delay: 800ms; }

/* Numero geant - scale/rotate inscription (signature) */
.page-metier .idx3-workflow__num {
  display: block;
  transform: scale(.6) rotate(-3deg);
  opacity: 0;
  transition: opacity .55s var(--m-ease-out), transform .55s var(--m-ease-out);
}
.page-metier .idx3-page-section.reveal.in .idx3-workflow .idx3-workflow__num {
  opacity: 1; transform: scale(1) rotate(0);
}
.page-metier .idx3-page-section.reveal.in .idx3-workflow:nth-child(1) .idx3-workflow__num { transition-delay: 250ms; }
.page-metier .idx3-page-section.reveal.in .idx3-workflow:nth-child(2) .idx3-workflow__num { transition-delay: 390ms; }
.page-metier .idx3-page-section.reveal.in .idx3-workflow:nth-child(3) .idx3-workflow__num { transition-delay: 530ms; }
.page-metier .idx3-page-section.reveal.in .idx3-workflow:nth-child(4) .idx3-workflow__num { transition-delay: 670ms; }
.page-metier .idx3-page-section.reveal.in .idx3-workflow:nth-child(5) .idx3-workflow__num { transition-delay: 810ms; }
.page-metier .idx3-page-section.reveal.in .idx3-workflow:nth-child(6) .idx3-workflow__num { transition-delay: 950ms; }

/* Chain workflow : chaque span apparait en stagger avec scaleX
   sur sa fleche (effet chaine qui se construit) */
.page-metier .idx3-workflow__chain span {
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity .35s var(--m-ease-out), transform .35s var(--m-ease-out);
}
.page-metier .idx3-page-section.reveal.in .idx3-workflow .idx3-workflow__chain span {
  opacity: 1; transform: translateX(0);
}
.page-metier .idx3-page-section.reveal.in .idx3-workflow .idx3-workflow__chain span:nth-child(1) { transition-delay: 450ms; }
.page-metier .idx3-page-section.reveal.in .idx3-workflow .idx3-workflow__chain span:nth-child(2) { transition-delay: 530ms; }
.page-metier .idx3-page-section.reveal.in .idx3-workflow .idx3-workflow__chain span:nth-child(3) { transition-delay: 610ms; }
.page-metier .idx3-page-section.reveal.in .idx3-workflow .idx3-workflow__chain span:nth-child(4) { transition-delay: 690ms; }

/* Prose ColdFusion */
.page-metier .idx3-prose > p,
.page-metier .idx3-prose > h3 {
  opacity: 0; transform: translateY(8px);
  transition: opacity .7s var(--m-ease-out), transform .7s var(--m-ease-out);
}
.page-metier .idx3-page-section.reveal.in .idx3-prose > p,
.page-metier .idx3-page-section.reveal.in .idx3-prose > h3 {
  opacity: 1; transform: translateY(0);
}
.page-metier .idx3-page-section.reveal.in .idx3-prose > p:nth-child(1) { transition-delay: 150ms; }
.page-metier .idx3-page-section.reveal.in .idx3-prose > p:nth-child(2) { transition-delay: 270ms; }
.page-metier .idx3-page-section.reveal.in .idx3-prose > p:nth-child(3) { transition-delay: 390ms; }
.page-metier .idx3-page-section.reveal.in .idx3-prose > p:nth-child(n+4) { transition-delay: 510ms; }
.page-metier .idx3-page-section.reveal.in .idx3-prose > h3 { transition-delay: 510ms; }

.page-metier .idx3-finalcta.reveal {
  opacity: 0; transform: scale(.97);
  transition: opacity .7s var(--m-ease-out), transform .7s var(--m-ease-out);
}
.page-metier .idx3-finalcta.reveal.in { opacity: 1; transform: scale(1); }

@media (prefers-reduced-motion: reduce) {
  .page-metier *, .page-metier *::before, .page-metier *::after {
    animation: none !important; transition: none !important;
    opacity: 1 !important; transform: none !important;
  }
}