/* ------------------------------------------------------------------
 * demo.css — la seule chose que les six demos ont en commun.
 *
 * Chaque demo a sa propre direction artistique, sa propre typographie
 * et ses propres couleurs : c'est tout l'argument de la serie. Ce
 * fichier ne contient donc RIEN de graphique, seulement la pastille de
 * retour vers le portfolio et le respect du mouvement reduit.
 *
 * La page declare son ton sur <html data-demo="clair"> ou "sombre" :
 * la pastille s'inverse en consequence.
 * ------------------------------------------------------------------ */

.dune-retour {
  position: fixed;
  left: 18px; bottom: 18px;
  z-index: 9999;
  display: inline-flex; align-items: center; gap: 9px;
  padding: 9px 15px 9px 12px;
  border-radius: 999px;
  text-decoration: none;
  font: 500 12px/1 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  letter-spacing: .06em;
  white-space: nowrap;
  transition: transform .35s cubic-bezier(.16, 1, .3, 1),
              box-shadow .35s ease, background .35s ease;
}

/* sur fond clair : pastille sombre */
html[data-demo="clair"] .dune-retour {
  background: rgba(14, 15, 18, .88);
  color: #f4f6fa;
  box-shadow: 0 6px 22px rgba(0, 0, 0, .18);
}
html[data-demo="clair"] .dune-retour:hover { background: #0e0f12; }

/* sur fond sombre : pastille claire */
html[data-demo="sombre"] .dune-retour {
  background: rgba(244, 246, 250, .93);
  color: #0e0f12;
  box-shadow: 0 6px 26px rgba(0, 0, 0, .45);
}
html[data-demo="sombre"] .dune-retour:hover { background: #fff; }

.dune-retour:hover { transform: translateY(-2px); }
.dune-retour:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

.dune-retour svg { width: 13px; height: 13px; flex: none; }
.dune-retour b { font-weight: 500; opacity: .55; }

/* Le mot « demo » doit rester lisible meme si la page est imprimee. */
.mention-demo { font-variant-numeric: tabular-nums; }

@media print { .dune-retour { display: none; } }

@media (max-width: 700px) {
  .dune-retour { left: 12px; bottom: 12px; padding: 8px 13px 8px 10px; font-size: 11px; }
  .dune-retour b { display: none; }
}

/* ------------------------------------------------------------------
 * Apparition au defilement — un seul mecanisme pour les six demos,
 * chacune choisissant son amplitude via --leve.
 * ------------------------------------------------------------------ */

[data-monte] {
  opacity: 0;
  transform: translateY(var(--leve, 22px));
  transition: opacity .9s cubic-bezier(.16, 1, .3, 1),
              transform .9s cubic-bezier(.16, 1, .3, 1);
}
[data-monte].vu { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  [data-monte] { opacity: 1; transform: none; transition: none; }
  .dune-retour { transition: none; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
}