/* Timeline : fond, barres haut et bas, niveaux, nœuds et cartes de leçon (palette : tokens.css).
 * Tout est sous :not(.cpath-home) : la vue d'avant la timeline (illustration, « Écouter et
 * pratiquer ») partage ces éléments mais garde son rendu de jour.
 * Les couleurs d'état des nœuds (or, sakura, bleu, couleur de niveau) restent celles du jour :
 * elles portent une information et se lisent sur les deux fonds. */

/* ---------- Fond : page, écran de chargement ---------- */
/* #home_content (ecoach_n.css) peint --lc-page-bg, plus clair : bande visible sous la barre en mobile. */
html.cpath:not(.cpath-home):is(.midday, .night),
html.cpath:not(.cpath-home):is(.midday, .night) body {
  --lc-page-bg: var(--pt-page);
}
/* Même taille que le jour : le dégradé couvre la fenêtre, fixe au défilement. */
html.cpath:not(.cpath-home):is(.midday, .night),
html.cpath:not(.cpath-home):is(.midday, .night) body,
html.cpath:not(.cpath-home):is(.midday, .night) #course-path,
html.cpath:not(.cpath-home):is(.midday, .night) .cpath-load {
  background: var(--pt-page) no-repeat;
  background-size: 100% 100vh;
  background-attachment: fixed;
}
html.cpath:not(.cpath-home):is(.midday, .night) .cpath-load,
html.cpath:not(.cpath-home):is(.midday, .night) .cpath-load__txt,
html.cpath:not(.cpath-home):is(.midday, .night) .cpath-load__pct {
  color: var(--pt-ink);
}

/* ---------- Barres haut et bas ---------- */
html.cpath:not(.cpath-home):is(.midday, .night) .cpath-head,
html.cpath:not(.cpath-home):is(.midday, .night) .cpath-foot {
  background: var(--pt-bar);
  border-color: var(--pt-line);
}
html.cpath:not(.cpath-home).night .cpath-head {
  box-shadow: 0 4px 14px rgb(0 0 0 / 40%);
}
html.cpath:not(.cpath-home).night .cpath-foot {
  box-shadow: 0 -4px 14px rgb(0 0 0 / 40%);
}
html.cpath:not(.cpath-home):is(.midday, .night) .cpath-head__name,
html.cpath:not(.cpath-home):is(.midday, .night) .cpath-head__id h1,
html.cpath:not(.cpath-home):is(.midday, .night) .cpath-head__id h1 .lch-h1-lang {
  color: var(--pt-ink);
}
html.cpath:not(.cpath-home):is(.midday, .night) .cpath-head__sub {
  color: var(--pt-ink-2);
}
html.cpath:not(.cpath-home):is(.midday, .night) .cpath-back {
  background: var(--pt-surface);
  border-color: var(--pt-line);
  color: var(--pt-ink);
}
html.cpath:not(.cpath-home):is(.midday, .night) .cpath-back:hover {
  background: var(--pt-surface-2);
}
html.cpath:not(.cpath-home):is(.midday, .night) .cpath-foot .logomenu .tablinks2 {
  border-color: var(--pt-line);
}
html.cpath:not(.cpath-home):is(.midday, .night) .cpath-foot .logomenu .tablinks2 .icon {
  fill: var(--pt-accent);
  color: var(--pt-accent);
}
html.cpath:not(.cpath-home):is(.midday, .night) .cpath-foot .logomenu .tablinks2:focus-visible {
  background: var(--pt-accent-soft) !important;
}

/* Bloc compte : « Se connecter », langue et séparateurs (hors de .cpath-root). */
html.cpath:not(.cpath-home):is(.midday, .night) .header_right,
html.cpath:not(.cpath-home):is(.midday, .night) .header_right :is(a, span, label, button):not(.signup-button) {
  color: var(--pt-ink);
}
html.cpath:not(.cpath-home):is(.midday, .night) .header_right .icon {
  fill: var(--pt-accent);
}

/* ---------- Niveaux et chemin ---------- */
html.cpath:not(.cpath-home):is(.midday, .night) .cpath-line path {
  stroke: var(--pt-path);
}
html.cpath:not(.cpath-home):is(.midday, .night) .cpath-zone__badge {
  background: var(--pt-surface);
  color: var(--pt-ink);
}
html.cpath:not(.cpath-home):is(.midday, .night) .cpath-zone[style*="--lv"] .cpath-zone__badge {
  background: color-mix(in srgb, var(--lv) 82%, #10132a);
  color: #fff;
}
html.cpath:not(.cpath-home):is(.midday, .night) .cpath-zone__obj {
  color: var(--pt-ink-2);
}

/* ---------- Nœuds ---------- */
html.cpath:not(.cpath-home):is(.midday, .night) .cpath-node.is-locked {
  background: color-mix(in srgb, var(--pt-surface-3) 86%, transparent);
  color: var(--pt-ink-2);
}
html.cpath:not(.cpath-home):is(.midday, .night) .cpath-node.is-locked svg {
  stroke: var(--pt-ink-2);
}
/* Leçons pas encore commencées : gris en jour, trop lumineux sur le fond de nuit. */
html.cpath:not(.cpath-home).midday .cpath-node.is-new {
  filter: grayscale(1) brightness(0.86);
}
html.cpath:not(.cpath-home).night .cpath-node.is-new {
  filter: grayscale(1) brightness(0.62);
}
html.cpath:not(.cpath-home):is(.midday, .night) .cpath-node.is-plan.is-plan.is-plan-done {
  border-color: var(--pt-surface);
}

/* ---------- Cartes de leçon et bulle ---------- */
html.cpath:not(.cpath-home):is(.midday, .night) .cpath-label {
  background: var(--pt-surface);
  border-color: var(--pt-line);
  color: var(--pt-ink);
  box-shadow: var(--pt-shadow);
}
html.cpath:not(.cpath-home):is(.midday, .night) .cpath-zone[style*="--lv"] .cpath-label--card.is-available {
  background: color-mix(in srgb, var(--lv) 12%, var(--pt-surface));
}
html.cpath:not(.cpath-home):is(.midday, .night) .cpath-label--card.is-active {
  background: color-mix(in srgb, var(--cp-sakura) 14%, var(--pt-surface));
}
html.cpath:not(.cpath-home):is(.midday, .night) .cpath-label--card.is-done {
  background: color-mix(in srgb, var(--cp-orange) 14%, var(--pt-surface));
}
html.cpath:not(.cpath-home):is(.midday, .night) .cpath-label--card.is-locked {
  background: var(--pt-surface);
}
html.cpath:not(.cpath-home):is(.midday, .night) .cpath-zone .cpath-label--card.is-today.is-today {
  background: var(--pt-surface);
  box-shadow: inset 0 0 0 2px #b3e147, var(--pt-shadow);
}
html.cpath:not(.cpath-home):is(.midday, .night) .cpath-today-dot,
html.cpath:not(.cpath-home):is(.midday, .night) .cpath-fab-count {
  border-color: var(--pt-surface);
}
html.cpath:not(.cpath-home):is(.midday, .night) .cpath-label__img,
html.cpath:not(.cpath-home):is(.midday, .night) .cpath-label__bar {
  background: var(--pt-surface-3);
}
html.cpath:not(.cpath-home):is(.midday, .night) .cpath-label__name {
  color: var(--pt-ink);
}
html.cpath:not(.cpath-home):is(.midday, .night) .cpath-label__goal,
html.cpath:not(.cpath-home):is(.midday, .night) .cpath-label__removed {
  color: var(--pt-ink-3);
}
html.cpath:not(.cpath-home):is(.midday, .night) .cpath-label.cpath-label--bubble {
  background: var(--pt-surface);
  border-color: var(--pt-line-strong);
  color: var(--pt-ink);
}
html.cpath:not(.cpath-home):is(.midday, .night) .cpath-label.cpath-label--bubble::before {
  border-top-color: var(--pt-line-strong);
}
html.cpath:not(.cpath-home):is(.midday, .night) .cpath-label.cpath-label--bubble::after {
  border-top-color: var(--pt-surface);
}
/* Bulle du guide d'accueil (course-path-birds.css) : mêmes teintes que la bulle de l'oiseau jaune. */
html.cpath:not(.cpath-home):is(.midday, .night) .cpath-tip {
  background: var(--pt-surface);
  border-color: var(--pt-line-strong);
  color: var(--pt-ink);
  box-shadow: var(--pt-shadow);
}
html.cpath:not(.cpath-home):is(.midday, .night) .cpath-tip::before {
  border-top-color: var(--pt-line-strong);
}
html.cpath:not(.cpath-home):is(.midday, .night) .cpath-tip::after {
  border-top-color: var(--pt-surface);
}
html.cpath:not(.cpath-home):is(.midday, .night) .cpath-tip--below::before {
  border-top-color: transparent;
  border-bottom-color: var(--pt-line-strong);
}
html.cpath:not(.cpath-home):is(.midday, .night) .cpath-tip--below::after {
  border-top-color: transparent;
  border-bottom-color: var(--pt-surface);
}
html.cpath:not(.cpath-home):is(.midday, .night) .cpath-tip--side::before {
  border-top-color: transparent;
  border-right-color: var(--pt-line-strong);
}
html.cpath:not(.cpath-home):is(.midday, .night) .cpath-tip--side::after {
  border-top-color: transparent;
  border-right-color: var(--pt-surface);
}
html.cpath:not(.cpath-home):is(.midday, .night) .cpath-tip--side.cpath-tip--flip::before {
  border-right-color: transparent;
  border-left-color: var(--pt-line-strong);
}
html.cpath:not(.cpath-home):is(.midday, .night) .cpath-tip--side.cpath-tip--flip::after {
  border-right-color: transparent;
  border-left-color: var(--pt-surface);
}

/* Pastilles rouge / verte sur les cartes. */
html.cpath:not(.cpath-home):is(.midday, .night) .cpath-badge {
  background: var(--pt-surface-2);
  color: var(--pt-ink-2);
}
html.cpath:not(.cpath-home):is(.midday, .night) .cpath-badge.is-red {
  background: var(--pt-red-soft);
  color: var(--pt-red);
}
html.cpath:not(.cpath-home):is(.midday, .night) .cpath-badge.is-green {
  background: var(--pt-accent-soft);
  color: var(--pt-accent-ink);
}

/* Infobulle de la barre du bas : déjà sombre en jour, à relever sur le fond de nuit. */
html.cpath:not(.cpath-home).night .cpath-foot-tip {
  background: var(--pt-surface-3);
  color: var(--pt-ink);
}