/* Les animations des articles de blog (`views/blog-animation.liquid`).
   Chargée seulement par un article qui en porte une : `theme.css` est sur le chemin critique
   de toutes les pages, et une page produit n'a pas à payer pour un article.
   Aucune couleur ici qui ne vienne de la charte (`:root`, dans `theme.css`). */

.anim { margin: 2.4rem 0 3.2rem; }
.anim figcaption { margin: 1.2rem 0 0; font-size: 1.3rem; line-height: 1.5; color: rgb(var(--encre-douce)); }

/* — Les cinq formats, à l'échelle —
   Chacun arrive à son tour (`--i`), reste, puis tous s'effacent et la boucle reprend. La
   même durée pour tous, seul le départ décale : les cinq restent donc en phase d'un tour à
   l'autre. */
.anim-formats { display: block; width: 100%; height: auto; padding: 1.6rem 0 0; background: rgb(var(--creme)); border-radius: var(--card-radius); }
.anim-formats__sol { stroke: rgba(var(--encre), .18); stroke-width: 1.5; }
.anim-formats__papier { fill: rgb(255, 255, 255); stroke: rgb(var(--encre)); stroke-width: 1.5; }
.anim-formats__ciel { fill: rgb(var(--navy)); }
.anim-formats__etoiles { stroke: rgb(var(--sable)); stroke-linecap: round; fill: none; }
.anim-formats__texte { stroke: rgb(var(--brun)); stroke-linecap: round; fill: none; }
/* 22 unités : à 390 px de large, l'image est réduite de moitié, et un libellé plus petit
   tomberait sous les 11 px. */
.anim-formats__nom { font-family: var(--font-heading-family); font-size: 22px; font-weight: 600; text-anchor: middle; fill: rgb(var(--encre-douce)); }
.anim-formats__affiche {
  transform-box: fill-box; transform-origin: 50% 100%;
  animation: anim-formats 9s calc(var(--i) * .5s) infinite both;
}
@keyframes anim-formats {
  0% { opacity: 0; transform: translateY(1.2rem) scale(.94); }
  7%, 78% { opacity: 1; transform: none; }
  90%, 100% { opacity: 0; transform: none; }
}

/* — Le parcours, du lien au mur —
   Quatre étapes qui s'allument tour à tour, deux secondes chacune, et le pictogramme de
   l'étape allumée fait son geste (la pastille, la flèche, la feuille, le cadre). */
.anim-parcours { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .8rem; margin: 0; padding: 2rem 1.2rem; list-style: none; background: rgb(var(--creme)); border-radius: var(--card-radius); counter-reset: etape; }
.anim-parcours__etape {
  display: flex; flex-direction: column; align-items: center; gap: .8rem; text-align: center;
  color: rgb(var(--navy)); counter-increment: etape;
  animation: anim-etape 8s calc(var(--i) * 2s) infinite both;
}
.anim-parcours__icone { width: 5.2rem; height: 5.2rem; overflow: visible; }
.anim-parcours__texte { font-size: 1.4rem; line-height: 1.35; color: rgb(var(--encre)); overflow-wrap: anywhere; hyphens: auto; }
.anim-parcours__texte::before { content: counter(etape) ". "; font-weight: 600; color: rgb(var(--brun)); }
.anim-parcours__pastille { fill: rgb(var(--ocre)); stroke: none; }
/* Le fond du bloc, pour qu'une pièce en cache une autre (la machine couvre sa feuille). */
.anim-parcours__plein { fill: rgb(var(--creme)); }
.anim-parcours__mobile { transform-box: fill-box; animation: 8s calc(var(--i) * 2s) infinite both; }
.anim-parcours__pastille { transform-origin: center; animation-name: anim-pastille; }
.anim-parcours__fleche { animation-name: anim-fleche; }
.anim-parcours__feuille { animation-name: anim-feuille; }
.anim-parcours__cadre { transform-origin: 50% 0; animation-name: anim-cadre; }
@keyframes anim-etape {
  0%, 30%, 100% { opacity: .38; }
  4%, 25% { opacity: 1; }
}
@keyframes anim-pastille {
  0%, 3% { transform: scale(0); }
  8%, 25% { transform: scale(1); }
  30%, 100% { transform: scale(0); }
}
@keyframes anim-fleche {
  0%, 25%, 100% { transform: translateY(0); }
  8% { transform: translateY(.5rem); }
  14% { transform: translateY(0); }
  19% { transform: translateY(.5rem); }
}
@keyframes anim-feuille {
  0%, 2% { transform: translateY(-1rem); opacity: 0; }
  16%, 30% { transform: translateY(0); opacity: 1; }
  34%, 100% { transform: translateY(-1rem); opacity: 0; }
}
@keyframes anim-cadre {
  0%, 25%, 100% { transform: rotate(0); }
  7% { transform: rotate(6deg); }
  13% { transform: rotate(-4deg); }
  19% { transform: rotate(2deg); }
}
@media (max-width: 480px) {
  .anim-parcours { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 2rem; }
}

/* Rien ne bouge quand le visiteur l'a demandé : tout est posé, tout est lisible. */
@media (prefers-reduced-motion: reduce) {
  .anim-formats__affiche, .anim-parcours__etape, .anim-parcours__mobile { animation: none; }
  .anim-parcours__feuille { opacity: 1; }
}