/* Oiseaux pixel du chemin de progression : oiseau de la popup Progression, oiseau jaune de la
 * pastille de départ, oiseau de la mission et ses boules jaunes (javascripts/course-path/ui/views/
 * bird.js, todo-bird.js, bird-paint.js). Sorti de course-path.css le 05/11/2026 ; chargé juste
 * après lui par player.html.php, avant les thèmes (CSS/path-themes/) et course-path-rtl.css. */

/* ------------------------------------------------ oiseau de la popup Progression */
/* ui/views/bird.js. Sprites pixel du CodePen « birds » (images en data:, aucune requête), deux
 * poses seulement : .is-perched (face, pattes, tête qui tourne via data-head) et .is-flying (de
 * côté, aile qui bat ; .is-right retourne le dessin, qui regarde à gauche). Fixe sur le voile de
 * la popup, sans capter les clics. */
.cpath-bird {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 6;
  pointer-events: none;
  transition: transform 1.4s ease-in-out;
}
.cpath-bird.is-still {
  transition: none;
}
/* Oiseau du chemin : dans .cpath-wrap (suit le défilement), au-dessus des étapes (z-index 1), à
 * l'échelle 1,5 pour tenir au centre de la pastille (3 px écran par pixel du dessin en écran ×2). */
.cpath-bird--path {
  position: absolute;
  z-index: 4;
}
.cpath-bird--path .cpath-bird__b {
  --m: 1.5;
}
/* Oiseau de la leçon à faire (ui/views/todo-bird.js ; plumage plus bas) : vols courts, donc plus
 * rapides. Durée = FLY_MS du module. */
.cpath-bird--todo {
  transition-duration: 1s;
}
.cpath-bird * {
  box-sizing: border-box;
}
.cpath-bird__b {
  --m: 2;
  --w: 21px;
  --h: 18px;
  position: absolute;
  width: calc(var(--m) * var(--w));
  height: calc(var(--m) * var(--h));
  margin-top: calc(var(--m) * var(--h) * -0.5);
  margin-left: calc(var(--m) * var(--w) * -0.5);
}
.cpath-bird.is-right .cpath-bird__b {
  transform: scale(-1, 1);
}
/* Liseré sombre : l'oiseau est clair (jaune pastel #fff4c2, recolorié dans les sprites), il
 * disparaîtrait sur le fond blanc de la popup. */
.cpath-bird__b {
  filter: drop-shadow(0 0 1px rgb(31 41 55 / 60%));
}
.cpath-bird__b > i,
.cpath-bird__legs {
  position: absolute;
  display: block;
  image-rendering: pixelated;
  background-repeat: no-repeat;
}
/* Tête : planche 5 vues (colonnes) × 3 orientations (lignes). */
.cpath-bird__head {
  --w: 19px;
  --h: 15px;
  --bw: 0;
  --bh: 0;
  z-index: 2;
  top: calc(var(--m) * -2px);
  left: calc(var(--m) * 1px);
  width: calc(var(--m) * var(--w));
  height: calc(var(--m) * var(--h));
  background-size: calc(var(--m) * var(--w) * 5) calc(var(--m) * var(--h) * 6);
  background-position: calc(var(--m) * var(--w) * var(--bw)) calc(var(--m) * var(--h) * var(--bh));
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAF8AAABaCAYAAADegYpGAAADQ0lEQVR42u2cMXLrMAxEQY9LHchVqlS5hHM0+xKpUqXygdTrV5zh8FsSAAIURe7OpJKEkCAiky/wEkFQT7rfpoVz33Xr4jL//RckTB+hh+Q8X/Ph8wjcpFstQh7bKo40VqzOuAgWhSaNETSJ1wxuLy43llVh3G/T8vj9MZmndkxBm3jJRLlxLSZZO1ZJnIv3e00yOM3ia2Kl174/v9SxpOPN77+UTtwyYS38npq6tJaw9Jn7bVriT35fScWm4r7381gWxfo2+XsT40zcQi1sB09b+RaL93zN4d0icCv2FMlPP4nzieXJSq/v7SqkfyWWh7i1WJrfkT+jHWf6XJDsBiRJz4/ZW5Vqucc/4szgeShlswoIgiCIWkbLQyLlGniZ8zl51XIRzSJYLqZ3LKs5PoiW1S3vqEjZeuuqmd/FktKV3Gd1jzRWKSpZ5r9FO/YhkbJVLCDlwlhaqkm9I+UUK5MTUq5dDLtImYzJpHcLBvWGlL2Ty4kfcfJQSJmTrDh5zjZMspBAym/eZzGBkqTHWPmzZ9rnH46US97BwNEQBEHNKIyOlI9E1KftUi4pjjxBVkgZXcrMeOhSduws9uwuptG6lD2oJvfk7YWUrxaUzutDuPSA5jk2izG5NsqWIuWtXYMF+JPAOasuZfFrx4NwcmOuUU3qFSmnFRGTtNazyU209QL2gJRddztcoumxs6gRqzRf4SzYlkZHyhAEQRCd1fRi6C7lFswvYHwB44u628OYeCBlGF8QjC/QpUwwvoDxBYwvusbJh/F8Sby1/fgQxhffn1/0+P1ReTBoOH4er6TyW+9Svr67YHXIer7mEJl+umB51XJihekjWH57kBtv85BknC/zf2SjSxmCIKjKa1HtvQCkXGdBqyLl1owv9uim9xxhfAHjCxhfEIwvgJRhfDEKUobxBQEpN2d8MSRS3sLDGg+GEuOLnpGyyPhC6qUM44tGjC+AliEIgghdygTXERhfwPhiLOOLLpHy3r2SxHvmoGmknH54WUKymPijjS+aRsrP1xzWqOZZO5urNcpaeCmvsR0YXxQ8W0o1aRTji61GWU51lRhfrCV+GOOLnGhKv6+09TyMLxwPWZxtHYwvIGgk/QOyY8++UNfVgQAAAABJRU5ErkJggg==);
}
.cpath-bird[data-head="2"] .cpath-bird__head {
  --bh: -1;
}
.cpath-bird[data-head="3"] .cpath-bird__head {
  --bh: -2;
}
.cpath-bird.is-flying .cpath-bird__head {
  --bw: -2;
  --bh: 0;
  left: calc(var(--m) * -1px);
}
.cpath-bird__body {
  z-index: 1;
  top: calc(var(--m) * 5px);
  width: calc(var(--m) * 21px);
  height: calc(var(--m) * 14px);
  background-size: cover;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAOCAYAAADABlfOAAAAUElEQVR42mNgoAFgxCXx/8uh/wQ189gxEmUoMYYRMpyJUgOx6WOi1EBs+ploEVFM1HAlumtp59KhYyiuRExuemUilDvIyQCM5GZRajmGaAAAs2ojfkfXUk4AAAAASUVORK5CYII=);
}
/* Ailes : repliées de chaque côté (posé) ; en vol, une seule de côté, qui bat. */
.cpath-bird__wing {
  z-index: 2;
  top: calc(var(--m) * 9px);
  width: 0;
  height: 0;
}
.cpath-bird__wing::after {
  content: "";
  position: absolute;
  width: calc(var(--m) * 7px);
  height: calc(var(--m) * 4px);
  background-size: cover;
  image-rendering: pixelated;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAECAYAAABCxiV9AAAANklEQVR4AUzJsQ0AIAwDQXDNQGzDbGzDQPSgRxQfyZFzSfkzejsO/J4gh4OFZXTPXLsSIx27AAAA///Y5+gzAAAABklEQVQDAEQqEpFoMrQzAAAAAElFTkSuQmCC);
}
.cpath-bird.is-perched .cpath-bird__wing--l {
  left: calc(var(--m) * 2px);
  transform: rotate(-90deg);
}
.cpath-bird.is-perched .cpath-bird__wing--l::after {
  right: 0;
  top: calc(var(--m) * -2px);
}
.cpath-bird.is-perched .cpath-bird__wing--r {
  right: calc(var(--m) * 2px);
  transform: rotate(90deg);
}
.cpath-bird.is-perched .cpath-bird__wing--r::after {
  left: 0;
  top: calc(var(--m) * -2px);
  transform: scale(-1, 1);
}
.cpath-bird.is-flying .cpath-bird__wing--r {
  display: none !important;
}
.cpath-bird.is-flying .cpath-bird__wing--l {
  left: calc(var(--m) * 6px);
  top: calc(var(--m) * 10px);
}
.cpath-bird.is-flying .cpath-bird__wing--l::after {
  z-index: 1;
  width: calc(var(--m) * 9px);
  animation: cpath-bird-flap 0.2s steps(1) infinite;
}
@keyframes cpath-bird-flap {
  0%,
  100% {
    top: calc(var(--m) * -8px);
    height: calc(var(--m) * 11px);
    transform: none;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAALCAYAAACtWacbAAAAAXNSR0IArs4c6QAAADVJREFUKFNjZEAC8RY8/2HchSe+MMLYcAayAnSFYEXYFCArJE4RPlPgbhqMiogOAlwKYaEOAHB1IDa+c4RSAAAAAElFTkSuQmCC);
  }
  25%,
  75% {
    top: 0;
    height: calc(var(--m) * 4px);
    transform: none;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAECAYAAABcDxXOAAAAAXNSR0IArs4c6QAAACNJREFUGFdjZGBgYIi34PkPorGBhSe+MDLiUwDTRJwiYqwDAFHXC0mhFNqMAAAAAElFTkSuQmCC);
  }
  50% {
    top: 0;
    height: calc(var(--m) * 11px);
    transform: scale(1, -1);
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAALCAYAAACtWacbAAAAAXNSR0IArs4c6QAAADVJREFUKFNjZEAC8RY8/2HchSe+MMLYcAayAnSFYEXYFCArJE4RPlPgbhqMiogOAlwKYaEOAHB1IDa+c4RSAAAAAElFTkSuQmCC);
  }
}
/* Pattes (posé seulement) et queue (en vol seulement). */
.cpath-bird__legs {
  bottom: 0;
  width: calc(var(--m) * 21px);
  height: calc(var(--m) * 2px);
  padding: 0 calc(var(--m) * 5px);
  display: flex !important;
  justify-content: space-between;
}
.cpath-bird__legs > i {
  z-index: 1;
  width: calc(var(--m) * 1px);
  height: calc(var(--m) * 3px);
  background: #5f380c;
}
.cpath-bird.is-flying .cpath-bird__legs {
  display: none !important;
}
.cpath-bird__tail {
  display: none !important;
}
.cpath-bird.is-flying .cpath-bird__tail {
  display: block !important;
  z-index: 1;
  left: calc(var(--m) * 19px);
  top: calc(var(--m) * 12px);
  width: calc(var(--m) * 7px);
  height: calc(var(--m) * 2px);
  background-size: cover;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAACCAYAAACUn8ZgAAAAAXNSR0IArs4c6QAAABdJREFUGFdjjLfg+c+AAzDiklx44gsjAIuGBaUigwNFAAAAAElFTkSuQmCC);
}
/* Oiseau de la mission (ui/views/todo-bird.js) : plumage aux couleurs du niveau, calculé par
 * ui/views/bird-paint.js et posé en variables --bird-*. Il a son propre battement d'aile, car les
 * images sont dans les keyframes. Après les règles de l'oiseau jaune : mêmes spécificités en vol. */
.cpath-bird--todo .cpath-bird__b {
  filter: drop-shadow(0 0 1px var(--bird-line));
}
.cpath-bird--todo .cpath-bird__head {
  background-image: var(--bird-head);
}
.cpath-bird--todo .cpath-bird__body {
  background-image: var(--bird-body);
}
.cpath-bird--todo .cpath-bird__wing::after {
  background-image: var(--bird-wing);
}
.cpath-bird--todo .cpath-bird__legs > i {
  background: var(--bird-leg);
}
.cpath-bird--todo.is-flying .cpath-bird__tail {
  background-image: var(--bird-tail);
}
.cpath-bird--todo.is-flying .cpath-bird__wing--l::after {
  animation-name: cpath-bird-flap-todo;
}
@keyframes cpath-bird-flap-todo {
  0%,
  100% {
    top: calc(var(--m) * -8px);
    height: calc(var(--m) * 11px);
    transform: none;
    background-image: var(--bird-flap1);
  }
  25%,
  75% {
    top: 0;
    height: calc(var(--m) * 4px);
    transform: none;
    background-image: var(--bird-flap2);
  }
  50% {
    top: 0;
    height: calc(var(--m) * 11px);
    transform: scale(1, -1);
    background-image: var(--bird-flap1);
  }
}
/* Boules jaunes (mêmes taille, couleur et trajet que #lights du player, à la 5e expression) : elles
 * montent de toute la largeur de la carte quand l'oiseau jaune s'y pose, une fois par chargement.
 * Sous les oiseaux, au-dessus des étapes. */
.cpath-lights {
  position: absolute;
  z-index: 3;
  height: 0;
  pointer-events: none;
}
.cpath-lights i {
  position: absolute;
  top: 0;
  width: 1.5vmin;
  height: 1.5vmin;
  margin-left: -0.75vmin;
  border-radius: 50%;
  background: rgb(255 251 0);
  filter: blur(0.2vmin);
  opacity: 0;
  animation: cpath-light 7s linear both;
}
@keyframes cpath-light {
  0% {
    opacity: 0;
    transform: translateY(0);
  }
  25% {
    opacity: 1;
    transform: translateY(-10vmin) translateX(-2vmin);
  }
  50% {
    opacity: 1;
    transform: translateY(-20vmin) translateX(2vmin);
    filter: blur(0.2vmin);
  }
  60% {
    transform: translateY(-30vmin) translateX(-2vmin);
    filter: blur(0.2vmin);
  }
  70% {
    transform: translateY(-40vmin) translateX(2vmin);
    filter: blur(0.2vmin);
  }
  80% {
    transform: translateY(-50vmin) translateX(-2vmin);
    filter: blur(0.2vmin);
  }
  100% {
    opacity: 0;
    transform: translateY(-60vmin);
    filter: blur(1vmin);
  }
}
/* Guide d'accueil (ui/views/todo-guide.js). Pour présenter une cible fixe à l'écran (bouton
 * calendrier, minuteur, « S'inscrire »), l'oiseau quitte le repère du chemin : #course-path le
 * couperait (overflow: clip) et la barre du haut (10000) comme le bouton calendrier (99990) le
 * recouvriraient. Tout cela vit dans la couche de #nprog, donc sous les modales du site. */
.cpath-bird--todo.is-fixed {
  position: fixed;
  z-index: 99995;
}
/* Bulle du guide : même dessin que celle de l'oiseau jaune (.cpath-label--bubble), mais flottante
 * et placée par le module. Largeur au contenu, pour ne pas dépendre de la place restante à droite.
 * --tail-x : place de la pointe, sous l'oiseau. */
.cpath-tip {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 5;
  /* border-box : la largeur maximale compte le liseré et les marges intérieures, pour que la place
   * calculée par views/tip-place.js soit bien celle que la bulle occupe. */
  box-sizing: border-box;
  width: max-content;
  max-width: min(286px, calc(100vw - 16px));
  padding: 8px 12px;
  border: 1.5px solid #d6dae1;
  border-radius: 14px;
  background: #fff;
  color: #000;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  box-shadow: 0 6px 16px rgb(0 0 0 / 18%);
  cursor: pointer;
  animation: cpath-tip-in 0.2s ease-out;
}
.cpath-tip[hidden] {
  display: none;
}
.cpath-tip.is-fixed {
  position: fixed;
  z-index: 99996;
}
/* Pointe : contour puis intérieur, vers le bas (bulle au-dessus de l'oiseau). */
.cpath-tip::before,
.cpath-tip::after {
  content: "";
  position: absolute;
  left: var(--tail-x, 24px);
  width: 0;
  height: 0;
  border-style: solid;
  border-color: transparent;
}
.cpath-tip::before {
  bottom: -11px;
  margin-left: -9px;
  border-width: 10px 9px 0;
  border-top-color: #d6dae1;
}
.cpath-tip::after {
  bottom: -8.5px;
  margin-left: -8px;
  border-width: 9px 8px 0;
  border-top-color: #fff;
}
/* Bulle sous l'oiseau (cibles du haut de l'écran) : pointe vers le haut. */
.cpath-tip--below::before {
  top: -11px;
  bottom: auto;
  border-width: 0 9px 10px;
  border-top-color: transparent;
  border-bottom-color: #d6dae1;
}
.cpath-tip--below::after {
  top: -8.5px;
  bottom: auto;
  border-width: 0 8px 9px;
  border-top-color: transparent;
  border-bottom-color: #fff;
}
/* Bulle à côté de la carte (views/tip-place.js) : pointe sur le flanc, à la hauteur de l'oiseau
 * (--tail-y). --flip : bulle à gauche de la carte, en écriture de droite à gauche. */
.cpath-tip--side::before,
.cpath-tip--side::after {
  top: var(--tail-y, 50%);
  bottom: auto;
  border-top-color: transparent;
}
.cpath-tip--side::before {
  left: -11px;
  margin: -9px 0 0;
  border-width: 9px 10px 9px 0;
  border-right-color: #d6dae1;
}
.cpath-tip--side::after {
  left: -8.5px;
  margin: -8px 0 0;
  border-width: 8px 9px 8px 0;
  border-right-color: #fff;
}
.cpath-tip--side.cpath-tip--flip::before {
  right: -11px;
  left: auto;
  border-width: 9px 0 9px 10px;
  border-right-color: transparent;
  border-left-color: #d6dae1;
}
.cpath-tip--side.cpath-tip--flip::after {
  right: -8.5px;
  left: auto;
  border-width: 8px 0 8px 9px;
  border-right-color: transparent;
  border-left-color: #fff;
}
@keyframes cpath-tip-in {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
}
@media (max-width: 640px) {
  .cpath-tip {
    max-width: min(226px, calc(100vw - 16px));
  }
}
/* Popup du chemin, panneau Ma mission, player ou plein écran mobile ouverts : la bulle et l'oiseau hors du chemin
 * passeraient par-dessus. Ils reviennent à la fermeture. */
html.lch-modal-open .cpath-tip,
html.lch-modal-open .cpath-bird--todo.is-fixed,
html.lch-m-app .cpath-tip,
html.lch-m-app .cpath-bird--todo.is-fixed,
html.mission-panel-open .cpath-tip,
html.mission-panel-open .cpath-bird--todo.is-fixed,
.cpath-root:has(.cpath-overlay) .cpath-tip,
.cpath-root:has(.cpath-overlay) .cpath-bird--todo.is-fixed {
  display: none;
}
@media (prefers-reduced-motion: reduce) {
  .cpath-bird {
    transition: none;
  }
  .cpath-tip {
    animation: none;
  }
  .cpath-bird.is-flying .cpath-bird__wing--l::after {
    animation: none;
  }
}