/* ============================================================
   logiciels.css - /logiciels/ : PORTFOLIO / 5 SECTEURS / SUR MESURE
   Narratif : "Quand un ERP du marche ne suffit pas". 5 secteurs
   en production, qualites systemiques (Q1-Q6).

   Effets distincts : grille dots wave, box border 3-trace,
   mosaic irregulier secteurs, `<code>` shimmer (Q1-Q6).
   ============================================================ */

.page-logiciels { --l-ease-out: cubic-bezier(.23, 1, .32, 1); }
.page-logiciels { overflow-x: clip; }

/* Mesh : drift opposite to metier (autre direction) */
.page-logiciels .idx3-page-hero__mesh::before {
  animation: logiDrift 16s ease-in-out infinite;
}
@keyframes logiDrift {
  0%, 100% { transform: translate(15px, -15px); }
  50%      { transform: translate(-15px, 15px); }
}

/* Title + em : box border 3-trace (top + left + right, signature) */
.page-logiciels .idx3-page-hero__title {
  opacity: 0; transform: translateY(10px);
  animation: logiTitleIn .9s var(--l-ease-out) 200ms forwards;
}
@keyframes logiTitleIn { to { opacity: 1; transform: translateY(0); } }

.page-logiciels .idx3-page-hero__title em {
  position: relative;
  display: inline-block;
  padding: 4px 10px;
  font-style: italic;
  color: var(--lume-1);
}
/* 3 segments : top, left, right via 3 box-shadow inset progressifs */
.page-logiciels .idx3-page-hero__title em::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: var(--lume-1);
  transform: scaleX(0);
  transform-origin: left;
  animation: logiBoxTop .5s var(--l-ease-out) 1300ms forwards;
}
.page-logiciels .idx3-page-hero__title em::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: 0;
  width: 1px;
  background: var(--lume-1);
  transform: scaleY(0);
  transform-origin: top;
  animation: logiBoxSide .5s var(--l-ease-out) 1800ms forwards;
  /* Box-shadow simule la branche droite : 1px lume a x=100% */
  box-shadow: calc(100% + 0px) 0 0 var(--lume-1);
}
@keyframes logiBoxTop { to { transform: scaleX(1); } }
@keyframes logiBoxSide { to { transform: scaleY(1); } }

.page-logiciels .idx3-page-hero__lead {
  opacity: 0;
  animation: logiFade 1s var(--l-ease-out) 700ms forwards;
}
@keyframes logiFade { to { opacity: 1; } }

/* Meta - stack vertical avec tag style */
.page-logiciels .idx3-page-hero__meta > div {
  opacity: 0; transform: translateY(8px);
  animation: logiMetaIn .55s var(--l-ease-out) forwards;
}
.page-logiciels .idx3-page-hero__meta > div:nth-child(1) { animation-delay: 1100ms; }
.page-logiciels .idx3-page-hero__meta > div:nth-child(2) { animation-delay: 1180ms; }
.page-logiciels .idx3-page-hero__meta > div:nth-child(3) { animation-delay: 1260ms; }
.page-logiciels .idx3-page-hero__meta > div:nth-child(4) { animation-delay: 1340ms; }
.page-logiciels .idx3-page-hero__meta > div:nth-child(5) { animation-delay: 1420ms; }
@keyframes logiMetaIn { to { opacity: 1; transform: translateY(0); } }

/* Facts row */
.page-logiciels .idx3-facts-row > div {
  opacity: 0; transform: translateY(8px);
  transition: opacity .5s var(--l-ease-out), transform .5s var(--l-ease-out);
}
.page-logiciels .idx3-facts-row.in > div { opacity: 1; transform: translateY(0); }
.page-logiciels .idx3-facts-row.in > div:nth-child(1) { transition-delay: 80ms; }
.page-logiciels .idx3-facts-row.in > div:nth-child(2) { transition-delay: 160ms; }
.page-logiciels .idx3-facts-row.in > div:nth-child(3) { transition-delay: 240ms; }
.page-logiciels .idx3-facts-row.in > div:nth-child(4) { transition-delay: 320ms; }
.page-logiciels .idx3-facts-row.in > div:nth-child(5) { transition-delay: 400ms; }

/* Section title + num */
.page-logiciels .idx3-page-section.reveal .idx3-page-section__num,
.page-logiciels .idx3-page-section.reveal .idx3-page-section__title,
.page-logiciels .idx3-page-section.reveal .idx3-page-section__lead {
  opacity: 0; transform: translateY(8px);
  transition: opacity .65s var(--l-ease-out), transform .65s var(--l-ease-out);
}
.page-logiciels .idx3-page-section.reveal.in .idx3-page-section__num { opacity: 1; transform: translateY(0); transition-delay: 60ms; }
.page-logiciels .idx3-page-section.reveal.in .idx3-page-section__title { opacity: 1; transform: translateY(0); transition-delay: 160ms; }
.page-logiciels .idx3-page-section.reveal.in .idx3-page-section__lead { opacity: 1; transform: translateY(0); transition-delay: 280ms; }

/* SECTEURS (6 modules) - "cartes lancees sur la table" (modele IA)
   Departs lointains, rotations marquees, blur, delais desynchronises. */
.page-logiciels #secteurs.reveal .idx3-modules > .idx3-module {
  opacity: 0;
  transform: var(--l-mod-from, translateY(120px));
  filter: blur(6px);
  transition:
    opacity 1s var(--l-ease-out),
    transform 1.15s var(--l-ease-out),
    filter .9s var(--l-ease-out);
}
.page-logiciels #secteurs.reveal.in .idx3-modules > .idx3-module {
  opacity: 1;
  transform: translate(0, 0) rotate(0);
  filter: blur(0);
}
.page-logiciels #secteurs .idx3-modules > .idx3-module:nth-child(1) { --l-mod-from: translate(-180px, -120px) rotate(-9deg);  transition-delay:  80ms; }
.page-logiciels #secteurs .idx3-modules > .idx3-module:nth-child(2) { --l-mod-from: translate( 160px, -160px) rotate( 11deg); transition-delay: 360ms; }
.page-logiciels #secteurs .idx3-modules > .idx3-module:nth-child(3) { --l-mod-from: translate(-140px,  180px) rotate(  7deg); transition-delay: 180ms; }
.page-logiciels #secteurs .idx3-modules > .idx3-module:nth-child(4) { --l-mod-from: translate( 170px,  150px) rotate(-10deg); transition-delay: 540ms; }
.page-logiciels #secteurs .idx3-modules > .idx3-module:nth-child(5) { --l-mod-from: translate(-200px,  -40px) rotate( -6deg); transition-delay: 260ms; }
.page-logiciels #secteurs .idx3-modules > .idx3-module:nth-child(6) { --l-mod-from: translate( 130px,  200px) rotate( 12deg); transition-delay: 440ms; }

/* QUALITES Q1-Q6 - meme modele "cartes lancees", trajectoires distinctes
   pour ne pas dupliquer exactement le pattern secteurs. */
.page-logiciels #qualites.reveal .idx3-modules > .idx3-module {
  opacity: 0;
  transform: var(--l-qua-from, translateY(120px));
  filter: blur(6px);
  transition:
    opacity 1s var(--l-ease-out),
    transform 1.15s var(--l-ease-out),
    filter .9s var(--l-ease-out);
}
.page-logiciels #qualites.reveal.in .idx3-modules > .idx3-module {
  opacity: 1;
  transform: translate(0, 0) rotate(0);
  filter: blur(0);
}
.page-logiciels #qualites .idx3-modules > .idx3-module:nth-child(1) { --l-qua-from: translate( 170px, -140px) rotate( 10deg); transition-delay: 120ms; }
.page-logiciels #qualites .idx3-modules > .idx3-module:nth-child(2) { --l-qua-from: translate(-150px, -100px) rotate( -8deg); transition-delay: 400ms; }
.page-logiciels #qualites .idx3-modules > .idx3-module:nth-child(3) { --l-qua-from: translate( 200px,   80px) rotate(  6deg); transition-delay: 220ms; }
.page-logiciels #qualites .idx3-modules > .idx3-module:nth-child(4) { --l-qua-from: translate(-170px,  170px) rotate( 11deg); transition-delay: 580ms; }
.page-logiciels #qualites .idx3-modules > .idx3-module:nth-child(5) { --l-qua-from: translate( 140px,  190px) rotate( -7deg); transition-delay: 300ms; }
.page-logiciels #qualites .idx3-modules > .idx3-module:nth-child(6) { --l-qua-from: translate(-190px,   60px) rotate(  9deg); transition-delay: 480ms; }

@media (prefers-reduced-motion: reduce) {
  .page-logiciels #secteurs.reveal .idx3-modules > .idx3-module,
  .page-logiciels #secteurs.reveal.in .idx3-modules > .idx3-module,
  .page-logiciels #qualites.reveal .idx3-modules > .idx3-module,
  .page-logiciels #qualites.reveal.in .idx3-modules > .idx3-module {
    opacity: 1; transform: none; filter: none; transition: none;
  }
}

/* `<code>` dans les qualites - shimmer subtle perpetuel apres apparition */
.page-logiciels #qualites .idx3-modules > .idx3-module code {
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(88,145,199,.05) 30%,
    rgba(88,145,199,.12) 50%,
    rgba(88,145,199,.05) 70%,
    transparent 100%
  );
  background-size: 200% 100%;
  background-position: 100% 0;
}
.page-logiciels #qualites.reveal.in .idx3-modules > .idx3-module code {
  animation: logiCodeShimmer 4s linear 1.5s infinite;
}
@keyframes logiCodeShimmer {
  0%   { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

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

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

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

/* CTA final : retour a la ligne maitrise "Votre metier merite-t-il" /
   "son outil ?". On elargit la contrainte pour que la 1re ligne tienne,
   et on empeche "merite-t-il" de casser sur ses traits d'union. */
.page-logiciels .idx3-finalcta__title {
  max-width: 30ch;
  text-wrap: pretty;
}
.page-logiciels .idx3-finalcta__title em {
  white-space: nowrap;
}