/* Réactivité (spec 2026-10-11) : l'appui qui répond, puis, si la page tarde,
   un reflet sur l'élément touché et une cocotte qui frémit dans le coin.
   Les classes sont posées par core/js/reactivite.js ; rien ici ne restyle un
   composant du site. Maquette : .claude/design-drafts/chargement-page-mockup.html. */

/* ── Temps 1 : l'appui ──
   `scale` et non `transform` : l'élément touché peut déjà porter un transform.
   Le sélecteur pèse (0,2,1) pour passer devant l'opacité ou la transition
   qu'une feuille de page poserait sur le même élément. */
html.rx-occupe .rx-appuye {
  scale: .975;
  opacity: .78;
  transition: scale 80ms ease, opacity 80ms ease;
}
html.rx-occupe a,
html.rx-occupe button { cursor: progress; }

/* ── Temps 2 : le reflet ──
   Un seul élément, créé par le script, posé sur les 4 px du bas de l'élément
   touché. Le script lui donne sa place et la découpe des coins (clip-path).
   Au-dessus de tout : l'élément touché peut vivre dans une modale. */
.rx-reflet {
  position: fixed; left: 0; top: 0; z-index: 100000;
  height: 4px;
  overflow: hidden;
  pointer-events: none;
  visibility: hidden;
  color: var(--text-accent);
}
/* Sur un fond d'accent, l'accent ne se verrait pas : le script donne au trait
   la couleur du texte de l'élément touché. Ce jeton n'est que le repli. */
.rx-reflet--clair { color: var(--on-accent); }
.rx-reflet.rx-actif { visibility: visible; }
.rx-reflet::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, currentColor 35%, currentColor 65%, transparent);
  transform: translateX(-100%);
}
.rx-reflet.rx-actif::after { animation: rx-balai 1.1s ease-in-out infinite; }
@keyframes rx-balai {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* ── Temps 2 : la cocotte ──
   z-index 160 : au-dessus de la barre du bas (150) et du bandeau cookies (140),
   sous les toasts et les modales. Le bandeau cookies la rehausse dans
   bandeau_cookies.css, section « Éléments fixés en bas ». */
.rx-cocotte {
  position: fixed; right: 14px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 160;
  width: 50px; height: 50px;
  box-sizing: border-box;
  display: grid; place-items: center;
  border: 1px solid var(--border-focus); border-radius: 50%;
  background: var(--bg-card-solid);
  box-shadow: var(--shadow-card);
  pointer-events: none;
  opacity: 0; visibility: hidden;
  transform: translateY(8px) scale(.9);
  transition: opacity 180ms ease, transform 180ms ease, visibility 0s linear 180ms;
}
.rx-cocotte.rx-actif {
  opacity: 1; visibility: visible;
  transform: none;
  transition: opacity 180ms ease, transform 180ms ease;
}
/* La barre du bas des membres (56 px, sous 768 px) : la cocotte passe au-dessus.
   Les deux sont frères dans base.html, aucune condition dans le gabarit. */
@media (max-width: 767px) {
  .mn-basse ~ .rx-cocotte { bottom: calc(16px + 56px + env(safe-area-inset-bottom, 0px)); }
}
.rx-cocotte svg { width: 30px; height: 30px; overflow: visible; }
.rx-cocotte path,
.rx-cocotte rect { fill: var(--text-accent); }
.rx-cocotte .rx-vapeur path {
  fill: none;
  stroke: var(--text-accent); stroke-width: 3.2; stroke-linecap: round;
  opacity: 0;
}
.rx-cocotte.rx-actif .rx-couvercle {
  transform-box: fill-box; transform-origin: 50% 100%;
  animation: rx-fremit .5s ease-in-out infinite;
}
.rx-cocotte.rx-actif .rx-vapeur path { animation: rx-vapeur 1.3s ease-out infinite; }
.rx-cocotte.rx-actif .rx-vapeur path:nth-child(2) { animation-delay: .42s; }
.rx-cocotte.rx-actif .rx-vapeur path:nth-child(3) { animation-delay: .84s; }
@keyframes rx-fremit {
  0%, 100% { transform: translateY(0) rotate(0); }
  25% { transform: translateY(-3px) rotate(-3deg); }
  60% { transform: translateY(-1px) rotate(2.5deg); }
}
@keyframes rx-vapeur {
  0% { opacity: 0; transform: translateY(6px); }
  30% { opacity: .85; }
  100% { opacity: 0; transform: translateY(-14px); }
}

/* ── iOS ──
   Safari gèle transitions et animations dès que la navigation démarre : le
   signe, posé dans le geste (html.rx-ios, reactivite.js), doit se lire dans
   sa première image. Pas de fondu d'entrée ; le trait tient toute la largeur
   et bat au lieu de balayer (un balayage part hors de l'élément) ; les volutes
   partent en cours de course, mêmes écarts entre elles. */
html.rx-ios .rx-cocotte,
html.rx-ios .rx-cocotte.rx-actif { transition: none; }
html.rx-ios .rx-reflet::after { transform: none; }
html.rx-ios .rx-cocotte .rx-vapeur path { opacity: .7; }
@media (prefers-reduced-motion: no-preference) {
  html.rx-ios .rx-reflet.rx-actif::after { animation-name: rx-pouls; }
  html.rx-ios .rx-cocotte.rx-actif .rx-vapeur path { animation-delay: -.52s; }
  html.rx-ios .rx-cocotte.rx-actif .rx-vapeur path:nth-child(2) { animation-delay: -.1s; }
  html.rx-ios .rx-cocotte.rx-actif .rx-vapeur path:nth-child(3) { animation-delay: -.98s; }
}
@keyframes rx-pouls {
  0%, 100% { opacity: 1; }
  50% { opacity: .35; }
}

/* Animations réduites : le signe s'affiche, rien ne bouge. Le trait tient
   toute la largeur, les volutes restent visibles. */
@media (prefers-reduced-motion: reduce) {
  html.rx-occupe .rx-appuye,
  .rx-cocotte,
  .rx-cocotte.rx-actif { transition: none; }
  .rx-reflet.rx-actif::after,
  .rx-cocotte.rx-actif .rx-couvercle,
  .rx-cocotte.rx-actif .rx-vapeur path { animation: none; }
  .rx-reflet::after { transform: none; }
  .rx-cocotte.rx-actif .rx-vapeur path { opacity: .7; }
}