/* Leçons du jour sur le chemin (11/11/2026, décisions de Christophe sur les maquettes mobiles) :
 * - pastilles des leçons du plan du jour à la couleur d'action (framboise, comme le bouton
 *   « Continuer » ; violet jusqu'à l'étude des couleurs du 11/11/2026), avec leur numéro ; celle
 *   de la leçon à jouer (mission du jour, sinon leçon en cours : .is-play) porte le triangle ;
 * - sous 900 px, la carte de la leçon à jouer devient une mini fiche (views/lesson-mini.js).
 * Chargé après course-path.css et course-path-focus.css (player.html.php) : mêmes poids de
 * sélecteurs que leurs règles, l'ordre fait le reste. */

/* ---------- Pastilles ---------- */
.cpath-zone .cpath-node.is-plan.is-plan,
.cpath-node.is-plan.is-plan,
.cpath-zone .cpath-node.is-play.is-play,
.cpath-node.is-play.is-play {
  background: linear-gradient(135deg, #c2206a, #ec5aa3);
  box-shadow: var(--cp-btn-shadow), 0 0 20px rgb(214 51 122 / 45%), 0 0 40px rgb(214 51 122 / 25%);
}
/* Missions du jour faites sur la leçon : le liseré blanc et l'ombre portée restent (course-path.css). */
.cpath-zone .cpath-node.is-plan.is-plan.is-plan-done,
.cpath-node.is-plan.is-plan.is-plan-done {
  box-shadow: rgb(0 0 0 / 35%) 0 5px 15px;
}
/* Anneau qui pulse autour de la leçon à jouer : à la couleur d'action lui aussi. */
.cpath-node.is-play::before,
.cpath-node.is-mission::before {
  border-color: rgb(214 51 122 / 70%);
}
/* Triangle de la leçon à jouer, remonté comme le numéro (relief du bas de la pastille). */
.cpath-node__play {
  width: 24px;
  height: 24px;
  transform: translate(1px, -3px);
}

/* ---------- Mini fiche (mobile) ---------- */
@media (max-width: 899px) {
  .cpath-zone .cpath-row--focus .cpath-label--mini {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 10px;
    border-radius: 20px;
  }
  .cpath-mini__poster {
    position: relative;
    display: block;
    height: 156px;
    border-radius: 14px;
    overflow: hidden;
    background: #e7f3f5 center / cover no-repeat;
  }
  /* Étiquette « Mission du jour · durée » : mêmes couleurs que sur la fiche de leçon. */
  .cpath-mini__tag {
    position: absolute;
    inset-inline-start: 8px;
    top: 8px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 11px;
    border-radius: 999px;
    background: linear-gradient(135deg, #b5165a, #d6337a);
    color: #fff;
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1.2;
    box-shadow: 0 2px 8px rgb(0 0 0 / 22%);
  }
  .cpath-mini__tag svg {
    width: 12px;
    height: 12px;
  }
  .cpath-zone .cpath-row--focus .cpath-label--mini .cpath-mini__menu {
    position: absolute;
    inset-inline-end: 8px;
    top: 6px;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgb(255 255 255 / 95%);
    color: #c2206a;
    box-shadow: 0 2px 8px rgb(0 0 0 / 30%);
  }
  .cpath-mini__menu svg {
    width: 19px;
    height: 19px;
  }
  /* ▷ : 18 px sous l'étiquette, halo rose quand c'est la mission du jour (comme la fiche). */
  .cpath-mini__play {
    position: absolute;
    left: 50%;
    top: 78px;
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    margin: -26px 0 0 -26px;
    border-radius: 50%;
    background: #fff;
    color: #c2206a;
    box-shadow: 0 8px 24px rgb(0 0 0 / 30%), 0 0 0 6px rgb(255 255 255 / 30%);
  }
  .cpath-label--mini.has-mission .cpath-mini__play {
    box-shadow: 0 8px 24px rgb(0 0 0 / 30%), 0 0 0 6px rgb(214 51 122 / 60%);
  }
  .cpath-mini__play svg {
    width: 26px;
    height: 26px;
  }
  .cpath-mini__over {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    display: block;
    padding: 30px 12px 10px;
    background: linear-gradient(rgb(0 0 0 / 0%), rgb(0 0 0 / 72%));
    color: #fff;
    text-align: start;
  }
  .cpath-zone .cpath-row--focus .cpath-label--mini .cpath-label__name {
    display: block;
    font-size: 19px;
    font-weight: 800;
    line-height: 1.1;
    color: #fff;
  }
  .cpath-mini__prog {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
  }
  .cpath-zone .cpath-row--focus .cpath-label--mini .cpath-label__bar {
    flex: 1 1 auto;
    height: 7px;
    background: rgb(255 255 255 / 35%);
  }
  .cpath-label--mini .cpath-label__bar i {
    background: #fff;
  }
  /* Nom de la mission, sous l'image ; couleur du texte de la carte (thèmes mi-jour et nuit). */
  .cpath-mini__line {
    display: block;
    padding: 0 2px;
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.3;
    color: inherit;
    text-align: start;
  }
}