/* Mouvement du site éditorial (30/10/2026). Il explique, il ne décore pas.
   Tout sous prefers-reduced-motion: no-preference. Sans script, la page est complète : l'état caché n'existe que
   sous html.anime, posé par scripts/kalma.js une fois que ce qui est déjà à l'écran est marqué .vu. */

@media (prefers-reduced-motion: no-preference) {

  /* Cartes plates à filet : plus de levée de 4 px (kalma.css la posait pour des cartes à ombre). Le fond s'éclaire,
     la flèche avance, c'est tout. */
  .connecte .carte:hover, .connecte .carte:focus-visible { transform: none; }
  .connecte .carte, .carte-spe, .bloc { transition: background-color 200ms var(--courbe); }

  /* 1. Apparition : glissement de 12 px + fondu, 450 ms, une seule fois. Cascade par --d (posé par le script). */
  html.anime [data-apparait]:not(.vu) { opacity: 0; }
  html.anime [data-apparait].vu:not(.deja) { animation: apparait 450ms var(--courbe) var(--d, 0ms) backwards; }
  @keyframes apparait { from { opacity: 0; transform: translateY(12px); } }

  /* 2. Écrans de l'application : se posent un peu plus bas et un peu plus tard (le texte d'abord, l'écran ensuite). */
  html.anime :is(.fenetre, .preuve, .vue)[data-apparait].vu:not(.deja) { animation-name: apparait-ecran; animation-duration: 500ms; animation-delay: calc(var(--d, 0ms) + 100ms); }
  @keyframes apparait-ecran { from { opacity: 0; transform: translateY(20px); } }

  /* 3. Filets qui se tracent : le filet du haut de chaque ligne se dessine de gauche à droite (scaleX), 600 ms.
     La bordure d'origine devient transparente (même épaisseur : la mise en page ne bouge pas). */
  html.anime :is(.faits, .garanties, .filets, .nuit ul) > li { position: relative; border-top-color: transparent; }
  html.anime :is(.faits, .filets) > li::before, html.anime :is(.garanties, .nuit ul) > li::before {
    content: ""; position: absolute; inset: -1px 0 auto; height: 1px; background: var(--filet);
    transform: scaleX(0); transform-origin: left; transition: transform 600ms var(--courbe) calc(var(--r, 0) * 80ms);
  }
  html.anime :is(.garanties, .nuit ul) > li::before { background: var(--encre); }
  html.anime :is(.faits, .garanties, .filets, .nuit ul).vu > li::before { transform: none; }
  html.anime :is(.faits, .garanties, .nuit ul) > li:nth-child(2)::before { --r: 1; }
  html.anime :is(.faits, .garanties, .nuit ul) > li:nth-child(3)::before { --r: 2; }
  html.anime :is(.faits, .garanties, .nuit ul) > li:nth-child(n+4)::before { --r: 3; }
  html.anime .filets > li:nth-child(n+2)::before { --r: 1; }

  /* 4. Lignes de liste : au survol, le contenu avance de 4 px (200 ms) ; le filet reste en place. */
  .filets > li > * { transition: transform 200ms var(--courbe); }
  .filets > li:hover > * { transform: translateX(4px); }

  /* 5. Pilules (puces) : léger retour d'état au survol, 150 ms. */
  .puces li { transition: background-color 150ms var(--courbe), border-color 150ms var(--courbe); }
  .puces li:hover { background: var(--voile); border-color: var(--encre-2); }

  /* 6. Questions en page : le volet d'un <details> s'ouvre en hauteur (300 ms) et fond en entrant.
     Exception assumée à « transform et opacity » : une hauteur ne se simule pas par transform sans déplacer le texte
     suivant. Amélioration progressive : sans ::details-content, le volet s'ouvre d'un coup, ce qui est correct. */
  @supports selector(::details-content) {
    :root { interpolate-size: allow-keywords; }
    .qr details::details-content {
      block-size: 0; opacity: 0; overflow: clip;
      transition: block-size 300ms var(--courbe), opacity 200ms var(--courbe), content-visibility 300ms allow-discrete;
    }
    .qr details[open]::details-content { block-size: auto; opacity: 1; }
    /* la fermeture dure deux tiers de l'ouverture */
    .qr details:not([open])::details-content { transition-duration: 200ms, 130ms, 200ms; }  }
}

/* Impression et aperçu : tout est visible. */
@media print { html.anime [data-apparait] { opacity: 1 !important; animation: none !important; } }