/* Chemin en attente de ses données. Il n'y a plus d'écran de chargement (#cpath-load) : le chemin
 * est dessiné dès le montage du module (javascripts/course-path/ui/app.js, classe is-pending sur
 * .cpath-root ; signal pending, ui/path-wait.js).
 *
 * Christophe, 11/11/2026, après un premier essai en flou pulsé jugé peu fluide : les leçons sont
 * affichées en clair mais vides (pastille neutre, image en gris, barre vide : ui/app.js Step) ; la
 * fiche à côté du chemin n'apparaît qu'une fois complète. À l'arrivée des données, les couleurs,
 * les pourcentages et les pastilles viennent en fondu (classe is-revealing, 600 ms).
 * Avant le chemin, le temps de charger le module : l'avion en papier sur bureau ; sur mobile, la
 * page est floue jusqu'à l'arrivée des données. Du début à la fin, la même popup centrale (texte +
 * barre de progression).
 * Chargé après les autres feuilles du chemin (player.html.php). */

/* ---------- Pendant l'attente ---------- */

/* Aucun geste sur une leçon tant que son état n'est pas sûr (les rangées sont aussi inertes,
 * ui/app.js) ; les titres de niveau restent actifs. */
#course-path .is-pending .cpath-row {
  pointer-events: none;
}
/* Fiche à côté du chemin : montée (elle mesure sa place, l'arbre ne bougera pas) mais pas affichée. */
#course-path .is-pending .cpath-side {
  visibility: hidden;
}
/* Calendrier : à sa place, éteint. */
#course-path .is-pending :where(.cpath-bar__week, .cpath-week-fab) {
  opacity: 0.5;
  pointer-events: none;
}

/* Place de la bulle de l'oiseau au-dessus de la carte qui la portait à la dernière visite (la leçon
 * à jouer, ou la suivante quand le plan du jour est fini), gardée d'une visite à l'autre (--tip-hold
 * et data-tip-hold, ui/path-wait.js) : la bulle arrive après les données et pousserait la carte. Dès
 * qu'elle est là, sa propre règle prend le relais (course-path-focus.css, --tip-room). */
.cpath-wrap .cpath-row[data-tip-hold] {
  margin-top: var(--tip-hold, 0px);
}

/* ---------- Arrivée du chemin, puis des données : en fondu ---------- */

@keyframes cpath-reveal {
  from {
    opacity: 0;
  }
}
/* Le chemin, à son montage. Sans maintien après la fin : une animation d'opacité qui reste posée
 * ferait du chemin un contexte d'empilement, et l'oiseau en vol vers la barre du haut (z-index
 * 99995, course-path-birds.css) passerait dessous. */
.cpath-wrap {
  animation: cpath-reveal 0.3s ease;
}
/* Pastilles : du gris neutre à leur couleur. Images : même fondu (transition déjà posée sur
 * .cpath-label__img, course-path.css). Barres : elles se remplissent. */
#course-path .is-revealing .cpath-node:not(.is-start) {
  transition: filter 0.35s ease;
}
#course-path .is-revealing .cpath-label__bar i {
  transition: width 0.5s ease;
}
/* Ce qui n'existait pas pendant l'attente : pastilles de tests, ▷ des vignettes, étiquette et nom
 * de la mission, fiche à côté du chemin. */
#course-path .is-revealing :where(.cpath-badges, .cpath-label__play, .cpath-mini__tag, .cpath-mini__line, .cpath-side) {
  animation: cpath-reveal 0.35s ease;
}
#course-path .is-revealing :where(.cpath-bar__week, .cpath-week-fab) {
  transition: opacity 0.35s ease;
}

/* ---------- Avant le montage du module ----------
 * La liste SSR des leçons (SEO, lecteurs) n'est pas montrée : affichée puis remplacée d'un coup par
 * le chemin, elle faisait sauter la page. html.cpath-wait : posé par player.html.php, retiré par
 * course-path.js quand le chemin est prêt ou ne sera pas monté. Si le module n'arrive jamais
 * (réseau), la liste s'affiche au bout de 20 s. Sans JavaScript, la classe n'est pas posée : liste
 * visible tout de suite. */
html.cpath-wait:not(.cpath-home) #course-path:not(.is-mounted) .cpath-ssr {
  animation: cpath-reveal 20s step-end;
}

/* ---------- Avion en papier (#cpath-sky, SSR player.html.php) ----------
 * Tant que le chemin n'est pas affichable (le module se charge), l'avion en papier traverse les
 * nuages, plein écran, sur le fond de la page ; dès que le chemin est monté, il s'efface (is-done,
 * course-path.js : 2 s à l'écran au moins, voulu par Christophe, 11/11/2026). Si le
 * module n'arrive jamais, il se retire au bout de 20 s, avec la liste des leçons.
 * Dessin et mouvements : ceux de l'ancien écran de chargement (.lch-sky, venus de course-hero.css,
 * animation fournie par Christophe), sans ciel bleu. */
.cpath-sky {
  position: fixed;
  inset: 0;
  z-index: 10001; /* au-dessus des deux barres (10000), sous la popup de chargement */
  display: none;
  overflow: hidden;
  background: #fff linear-gradient(#e7f3f5, #e4f4ef, #e8f3e6, #f2f0dd, #ffebdb, #fff) no-repeat;
  background-size: 100% 100vh;
}
html.cpath-wait:not(.cpath-home) .cpath-sky,
.cpath-sky.is-done {
  display: block;
}
html.cpath-wait:not(.cpath-home) .cpath-sky {
  animation: cpath-sky-late 20s step-end forwards;
}
@keyframes cpath-sky-late {
  to {
    visibility: hidden;
  }
}
/* Deux fois la classe : passe devant la règle d'affichage ci-dessus, qui porte une animation. */
html .cpath-sky.is-done.is-done {
  animation: cpath-waitpop-out 0.3s ease both;
  pointer-events: none;
}
/* Thèmes mi-jour et nuit : le fond de la page. */
html.cpath:is(.midday, .night) .cpath-sky {
  background: var(--pt-page) no-repeat;
  background-size: 100% 100vh;
}
/* Le ciel : une bande de bord à bord, juste au-dessus de la popup de chargement (au centre). */
.lch-sky {
  position: absolute;
  left: 0;
  top: max(0px, calc(50% - 320px));
  width: 100%;
  height: 240px;
  overflow: hidden;
}
/* Paysage : les nuages et le trajet de l'avion occupent toute la largeur du ciel. */
.lch-sky__frame {
  position: absolute;
  left: 0;
  top: 34px;
  width: var(--lch-sky-w, 100%);
}
.lch-sky svg {
  max-width: 100%;
  height: auto;
  display: block;
}
/* Avion : la piste (`__plane-wrap`, largeur du paysage) traverse de gauche à droite en % de sa
   propre largeur, en 11 s (cpath-plane-fly : il sort à droite et revient aussitôt par la gauche) ;
   l'avion est posé 130 px avant son bord gauche ; houle verticale (scoping) et tangage (soaring)
   en courbes douces. Transform seul : animations sur le compositeur. */
.lch-sky__plane-wrap {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 120px;
  z-index: 3;
  transform: translateX(-5%);
  will-change: transform;
  animation: cpath-plane-fly 11s linear infinite;
  /* L'avion ne reste parfois que 2 s : il est déjà dans le ciel à la première image (un tiers de la
     largeur), au lieu d'entrer par le bord gauche, et arrive vers le milieu quand il s'efface. */
  animation-delay: -3.5s;
}
.lch-sky__plane-bob {
  position: absolute;
  left: -130px;
  top: 0;
  width: 120px;
  will-change: transform;
  animation: lch-plane-scoping 2.6s ease-in-out alternate infinite;
}
.lch-sky__plane {
  width: 100%;
  height: 40px;
  will-change: transform;
  animation: lch-plane-soaring 5.2s ease-in-out infinite;
}
@keyframes cpath-plane-fly {
  0% { transform: translateX(-5%); }
  100% { transform: translateX(115%); }
}
@keyframes lch-plane-scoping {
  0% { transform: translateY(0); }
  100% { transform: translateY(60px); }
}
@keyframes lch-plane-soaring {
  0% { transform: rotate(0deg); }
  30% { transform: rotate(9deg); }
  70% { transform: rotate(-7deg); }
  100% { transform: rotate(0deg); }
}
.lch-sky__clouds {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--lch-sky-w, 100%);
  transform: translateZ(0);
}
/* Nuages : chaque nuage est posé à droite de sa piste (largeur du paysage) ; c'est la piste qui
   glisse, en % de sa largeur, de la droite du dernier panneau à la gauche du premier. */
.lch-sky__cloud-track {
  position: absolute;
  inset: 0;
  will-change: transform, opacity;
  animation: lch-cloud-move 11s linear infinite;
}
.lch-sky .cloud {
  position: absolute;
  top: 20%;
  right: 0;
  width: 160px;
}
/* Même raison : les nuages sont déjà en route, chacun à un endroit différent de sa traversée. */
.lch-sky__cloud-track:nth-child(1) { animation-delay: -6s; }
.lch-sky__cloud-track:nth-child(2) { animation-delay: -3s; }
.lch-sky__cloud-track:nth-child(3) { animation-delay: -5s; }
.lch-sky__cloud-track:nth-child(4) { animation-delay: -9s; }
.lch-sky__cloud-track:nth-child(5) { animation-delay: -7s; }
.lch-sky__cloud-track.front { z-index: 9; }
.lch-sky__cloud-track.distant { z-index: 1; }
.lch-sky .cloud.smaller { margin-right: 220px; width: 60px; margin-top: 30px; }
.lch-sky .cloud.small { margin-right: 110px; width: 90px; }
.lch-sky .cloud.big { width: 260px; margin-top: 30px; margin-right: 80px; }
.lch-sky .cloud.massive { width: 320px; margin-top: 12px; margin-right: 0; }
.lch-sky .slow { animation-duration: 12.5s; }
.lch-sky .slower { animation-duration: 15s; }
.lch-sky .slowest { animation-duration: 18s; }
.lch-sky .super-slow { animation-duration: 27s; }
@keyframes lch-cloud-move {
  0% { opacity: 0.1; transform: translateX(28%); }
  8% { opacity: 0.8; }
  88% { opacity: 0.8; }
  100% { opacity: 0; transform: translateX(-135%); }
}

/* ---------- Mobile : la page floue à la place de l'avion ----------
 * Christophe, 11/11/2026 : sur mobile (≤ 899 px, là où le chemin a sa barre du bas), pas d'avion ;
 * la page est floue derrière la popup de chargement, du premier affichage à l'arrivée des données
 * (course-path.js, skyIsVeil : le voile ne part qu'à « prêt »). #cpath-sky sert de voile : il floute
 * ce qui est derrière lui, barres comprises, sans fond et sans prendre les gestes (retour, Réglages
 * et défilement restent possibles, comme sur bureau). Avant le montage du module, la liste SSR des
 * leçons reste cachée, comme sur bureau : montrée sous le flou, on la voyait se changer d'un coup en
 * chemin (essai du 11/11) ; le chemin arrive en fondu sous le voile.
 * Pas de repli sans backdrop-filter : tout navigateur qui sait monter le chemin (carte d'import) le
 * connaît. Deux fois la classe : passe devant les fonds des thèmes ci-dessus. */
@media (max-width: 899px) {
  html.cpath .cpath-sky.cpath-sky {
    background: none;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    pointer-events: none;
  }
  .cpath-sky .lch-sky {
    display: none;
  }
}

/* ---------- Popup de chargement (#cpath-wait, SSR player.html.php) ----------
 * Texte + barre de progression au centre, la même du début à la fin (Christophe, 11/11/2026) : sur
 * l'avion (bureau) ou la page floue (mobile), puis par-dessus le chemin, jusqu'à l'arrivée des données. Sans voile, sans clic : le
 * chemin reste visible derrière. Barre : paliers de course-path.js. is-done : données arrivées, la
 * barre est pleine, la popup s'efface. */
.cpath-waitpop {
  position: fixed;
  left: 50%;
  top: 50%;
  z-index: 10002; /* au-dessus de l'avion (10001), sous les modales du header */
  box-sizing: border-box;
  width: min(300px, calc(100vw - 48px));
  padding: 18px 20px 20px;
  border-radius: 22px;
  background: #fff;
  color: #3b4645;
  box-shadow: 0 12px 34px rgb(0 0 0 / 18%);
  font-family: "Nunito", "Noto Sans", -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
  transform: translate(-50%, -50%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
@keyframes cpath-waitpop-out {
  from {
    opacity: 1;
    visibility: visible;
  }
  to {
    opacity: 0;
    visibility: hidden;
  }
}
/* is-end : chemin prêt, la classe cpath-wait vient de partir ; la popup reste le temps de montrer la
 * barre pleine. Module jamais arrivé : elle se retire au bout de 20 s, comme l'avion. */
html.cpath-wait:not(.cpath-home) .cpath-waitpop,
.cpath-waitpop.is-end {
  opacity: 1;
  visibility: visible;
}
html.cpath-wait:not(.cpath-home) .cpath-waitpop {
  animation: cpath-sky-late 20s step-end forwards;
}
html .cpath-waitpop.is-done.is-done {
  animation: cpath-waitpop-out 0.3s ease both;
}
.cpath-waitpop__txt {
  margin: 0 0 12px;
}
.cpath-waitpop__bar {
  height: 8px;
  border-radius: 999px;
  background: #e5e7eb;
  overflow: hidden;
}
.cpath-waitpop__bar i {
  display: block;
  width: 0;
  height: 100%;
  border-radius: 999px;
  background: var(--cp-cta, linear-gradient(135deg, #c2206a 0%, #d6337a 45%, #ec5aa3 100%));
  transition: width 0.2s linear;
}
/* Thèmes mi-jour et nuit : la surface et l'encre des cartes. */
html.cpath:is(.midday, .night) .cpath-waitpop {
  background: var(--pt-surface, #fff);
  color: var(--pt-ink, #3b4645);
}
html.cpath:is(.midday, .night) .cpath-waitpop__bar {
  background: var(--pt-surface-3, #e5e7eb);
}

@media (prefers-reduced-motion: reduce) {
  .cpath-wrap,
  #course-path .is-revealing :where(.cpath-badges, .cpath-label__play, .cpath-mini__tag, .cpath-mini__line, .cpath-side) {
    animation: none;
  }
  #course-path .is-revealing * {
    transition: none !important;
  }
  /* Avion immobile, au milieu ; l'écran et la popup partent sans fondu. */
  .lch-sky__plane-wrap,
  .lch-sky__plane-bob,
  .lch-sky__plane,
  .lch-sky__cloud-track {
    animation: none;
  }
  .lch-sky__plane-wrap {
    transform: translateX(45%);
  }
  html .cpath-sky.is-done.is-done,
  html .cpath-waitpop.is-done.is-done {
    animation-duration: 0.01s;
  }
  .cpath-waitpop__bar i {
    transition: none;
  }
}