/* ══ /apps : la cascade de fenêtres (design Apps Cascade) ══════════════════
   Feuille DE PAGE (chargée par apps.html seulement) : hors de style.css pour
   ne pas peser sur le contrat de poids de l'accueil (cf. spotlight.css).
   Une scène collante de la hauteur de l'écran ; les fenêtres, empilées au
   centre, se déploient en diagonale au fil du défilement (script
   static/js/apps-cascade.js, qui pose largeur, hauteur et transform de chaque
   fenêtre et étend la scène d'un bord à l'autre). Par DÉFAUT, donc sans
   script ou sous 721 px, la même liste est un rail horizontal qui se fait
   glisser : sur un téléphone, onze fenêtres qui se recouvrent ne montreraient
   que des bandeaux. */
.apps-hero-cta {
  display: flex; gap: 12px; flex-wrap: wrap; justify-content: center;
  margin-top: 4px;
}
.apps-scroll-cue {
  margin-top: 44px;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  font-family: var(--font-mono);
  font-size: 10px; color: var(--muted-3);
  letter-spacing: 0.22em; text-transform: uppercase;
}
.apps-scroll-cue i { display: block; width: 1px; height: 28px; background: var(--line-strong); }
.apps-cascade { position: relative; }
.cascade-sticky { position: relative; }
.cascade-stage {
  display: flex; gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 6px 4px 20px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.cascade-win {
  position: relative;
  flex: 0 0 min(260px, 78vw);
  height: 198px;                 /* 30 px de barre + écran + légende .cascade-cap */
  scroll-snap-align: center;
  display: flex; flex-direction: column;
  border-radius: 12px; overflow: hidden;
  background: var(--card);
  border: 1px solid var(--line);
  /* Dans le rail, une ombre courte : le conteneur qui défile rogne tout ce
     qui dépasse de ses 20 px de garniture basse, et une ombre de 80 px s'y
     coupait net en une ligne sous toute la rangée (mesuré au pixel). */
  box-shadow: 0 8px 20px -8px rgba(0, 0, 0, 0.10);
  color: inherit; text-decoration: none;
  transition: box-shadow 0.35s var(--ease-standard);
}
@media (hover: hover) {
  .cascade-win:hover { box-shadow: 0 16px 40px -14px rgba(0, 0, 0, 0.3), 0 8px 18px -6px rgba(0, 0, 0, 0.14); }
}
.cascade-bar {
  flex: none; height: 30px;
  background: var(--paper-2);
  border-bottom: 1px solid var(--line-soft);
  display: flex; align-items: center; gap: 6px;
  padding: 0 12px;
}
.cascade-bar i { width: 9px; height: 9px; border-radius: 50%; display: block; }
.cascade-bar i:nth-child(1) { background: #ff5f57; }
.cascade-bar i:nth-child(2) { background: #febc2e; }
.cascade-bar i:nth-child(3) { background: #28c840; }
.cascade-url {
  margin-left: 8px; min-width: 0;
  font-family: var(--font-mono);
  font-size: 11px; color: var(--muted-3); letter-spacing: 0.04em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cascade-screen { position: relative; flex: 1; min-height: 0; overflow: hidden; background: var(--paper); }
.cascade-screen picture,
.cascade-img { position: absolute; inset: 0; width: 100%; height: 100%; }
.cascade-img { display: block; object-fit: cover; object-position: top center; }
/* Fenêtre sans capture : le même aplat d'accent que les tuiles du catalogue. */
.cascade-panel {
  position: absolute; inset: 0;
  background: color-mix(in oklch, var(--accent) 70%, #16140f);
  color: #fff;
  padding: 16px;
  display: flex; flex-direction: column;
}
.cascade-panel::before {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.14) 1px, transparent 1.4px);
  background-size: 16px 16px;
  -webkit-mask-image: linear-gradient(135deg, #000 0%, transparent 62%);
  mask-image: linear-gradient(135deg, #000 0%, transparent 62%);
}
.cascade-panel::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(120% 90% at 15% 0%, rgba(255, 255, 255, 0.32) 0%, transparent 55%);
}
.cascade-kind, .cascade-name, .cascade-tagline { position: relative; z-index: 1; }
.cascade-kind {
  align-self: flex-start;
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
  background: #fff; color: #14120e; font-weight: 600;
  border-radius: 999px; padding: 4px 9px;
}
.cascade-name {
  margin-top: auto;
  font-family: var(--font-display);
  font-size: clamp(18px, 2.2vw, 30px); font-weight: 600;
  letter-spacing: -0.03em; line-height: 1;
}
.cascade-tagline {
  margin-top: 8px;
  font-size: 12px; line-height: 1.45;
  color: rgba(255, 255, 255, 0.94);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.cascade-counter, .cascade-note { display: none; }
/* Légende du rail : le nom et la nature de l'app sous l'écran de la fenêtre,
   parce qu'une capture seule ne dit pas laquelle c'est. */
.cascade-cap {
  flex: none;
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  padding: 7px 12px 8px;
  border-top: 1px solid var(--line-soft);
  background: var(--card);
  font-size: 12.5px; line-height: 1.2;
}
.cascade-cap b { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.01em; }
.cascade-cap span {
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--muted-3); white-space: nowrap;
}
.cascade-rail-hint {
  margin: 0 0 8px;
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--muted-3);
}
/* Le raccourci du hero vers le catalogue (cf. apps.html). */
.apps-catalogue-link {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 18px; min-height: 44px;
  font-size: 14px; font-weight: 500; color: var(--fg);
  text-decoration: underline; text-underline-offset: 4px;
  text-decoration-color: color-mix(in oklab, var(--fg) 30%, transparent);
}
.apps-catalogue-link:hover { text-decoration-color: var(--fg); }
/* Scène (script armé, écran large ET assez haut : sous 640 px de haut, un
   téléphone en paysage par exemple, le pas vertical de la diagonale tombait à
   5 px et la pile se lisait comme une rangée de barres de titre ; le script
   n'arme pas, le rail reste). 220 vh de défilement (la maquette en voulait
   320) : la cascade prouve, le catalogue sert, et il se trouve dessous. Les
   `dvh` suivent la barre d'outils des navigateurs mobiles, `vh` reste le
   repli. */
.apps-cascade.is-live { height: 220vh; height: 220dvh; }
.apps-cascade.is-live .cascade-cap,
.apps-cascade.is-live .cascade-rail-hint { display: none; }
.apps-cascade.is-live.is-static { height: auto; }
.apps-cascade.is-live .cascade-sticky {
  position: sticky; top: 0;
  height: 100vh; height: 100dvh;
  overflow: hidden;
}
.apps-cascade.is-live .cascade-stage {
  position: absolute; inset: 96px 48px 72px;
  display: block;
  overflow: visible;
  padding: 0;
}
.apps-cascade.is-live .cascade-win {
  position: absolute; left: 0; top: 0;
  flex: none;
  transform-origin: center;
  will-change: transform;
  cursor: pointer;
  /* Ombre de la scène, plus courte que celle de la maquette (80 px de flou) :
     chaque fenêtre est un calque à part (will-change), et le flou agrandit le
     calque d'autant, mesuré à 2,5 fois la surface utile en Retina. */
  box-shadow: 0 14px 36px -14px rgba(0, 0, 0, 0.22), 0 6px 14px -6px rgba(0, 0, 0, 0.10);
}
.apps-cascade.is-live .cascade-counter {
  display: flex; align-items: center; gap: 16px;
  position: absolute; left: 48px; bottom: 28px;
  font-family: var(--font-mono);
  font-size: 11px; color: var(--muted-3);
  letter-spacing: 0.18em; text-transform: uppercase;
}
.cascade-counter i { width: 24px; height: 1px; background: var(--line-strong); display: block; }
.cascade-counter [data-cascade-current] { color: var(--fg); }
.apps-cascade.is-live .cascade-note {
  display: block;
  position: absolute; right: 48px; bottom: 28px;
  font-family: var(--font-mono);
  font-size: 11px; color: var(--muted-3);
  letter-spacing: 0.18em; text-transform: uppercase;
}
@media (prefers-reduced-motion: reduce) {
  .cascade-win { transition: none; }
  /* La scène est rendue déployée d'emblée : l'indice promettrait une mise en
     scène au défilement qui n'existe plus dans ce mode. */
  .apps-scroll-cue { display: none; }
}
/* Sous la cascade : la recherche et les filtres, puis le catalogue. */
.apps-tools {
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  margin: 8px 0 48px;
}
.apps-cascade + .apps-tools { margin-top: 56px; }
/* Bloc final : la porte vers le second métier. */
.apps-final {
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  padding: 96px 0 24px;
}
.apps-final .section-title { margin: 0 0 20px; }
.apps-final p {
  max-width: 520px;
  margin: 0 0 32px;
  font-size: 17px; line-height: 1.6;
  color: var(--muted);
  text-wrap: pretty;
}
.apps-final-links { display: flex; gap: 12px 22px; flex-wrap: wrap; align-items: center; justify-content: center; }
@media (max-width: 720px) {
  .apps-scroll-cue { display: none; }
  .apps-final { padding-top: 64px; }
}