/* Chemin de progression de la page cours (javascripts/course-path/) — squelette.
 * Valeurs reprises de Loe.me (MissionMapLovable.module.css, MissionOpeningScreen.module.css) :
 * fond dégradé, barre floutée, nœuds 56 px (or = terminé, sakura = en cours, verre sombre =
 * verrouillé), ligne blanche pointillée, étiquettes pilule, popup voile + carte pastel + carte blanche.
 * Polices : Nunito / Poppins / Inter si présentes sur le poste, sinon la pile Noto du site
 * (pas de Google Fonts : à auto-héberger comme CSS/fonts/noto avant fusion). */

/* Carte des popups (Loe.me previewCard › whiteCard), aussi la fenêtre du player (.lch-modal,
 * montée sur body) : définie sur html pour être vue des deux. */
html.cpath {
  --cp-card-bg: linear-gradient(to bottom, #e7f3f5, #e4f4ef, #e8f3e6, #f2f0dd, #ffebdb);
  --cp-card-pad: 20px;
  --cp-card-radius: 40px;
  --cp-card-line: #e5e7eb;
  --cp-card-shadow: 0 5px 15px rgb(0 0 0 / 35%);
  --cp-white-radius: 30px;
  --cp-white-shadow: 0 2px 12px rgb(15 23 42 / 6%);
  --cp-veil: rgb(0 87 115 / 32%);
  /* Voile du player : le dégradé de la page, opaque (rien ne se voit dessous). */
  --cp-veil-page: linear-gradient(#e7f3f5, #e4f4ef, #e8f3e6, #f2f0dd, #ffebdb);
}
#course-path {
  --cp-sakura: hsl(330, 85%, 65%);
  --cp-sakura-light: hsl(330, 90%, 80%);
  --cp-gold: hsl(42, 100%, 65%);
  --cp-orange: hsl(25, 100%, 55%);
  --cp-muted: hsl(220, 15%, 55%);
  --cp-ink: #111;
  --cp-btn-shadow: rgb(0 0 0 / 16%) 0 2px 14px 0, rgb(0 0 0 / 14%) -1px 6px 20px 0, rgb(0 0 0 / 20%) 0 -5px 0 0 inset;
  --cp-cta: linear-gradient(135deg, #81479e 0%, #81479e 35%, #aa7cc1 100%);
  position: relative;
  /* Pleine largeur de la fenêtre, comme le header du site (la colonne de la page est centrée). */
  margin: 0 calc(50% - 50vw);
  font-family: "Nunito", "Noto Sans", -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--cp-ink);
  /* Dégradé Loe.me (.background fixed) : sur la hauteur de la fenêtre, fixe au défilement,
     pas étiré sur toute la page. */
  background: #fff linear-gradient(#e7f3f5, #e4f4ef, #e8f3e6, #f2f0dd, #ffebdb, #fff) no-repeat;
  background-size: 100% 100vh;
  background-attachment: fixed;
  overflow: clip;
}
/* 100vw compte la barre de défilement : pas de défilement horizontal pour autant. */
html.cpath body {
  overflow-x: clip;
}
/* Le H1 (drapeau + langue · formation) est déplacé dans la barre du chemin : la ligne #h-infos
 * ne garde que ses conteneurs techniques (#sublist, #h-prog), sans hauteur. Sauf sur la racine
 * (cpath-home) : la ligne classique reprend le drapeau + H1 (ui/app.js, placeHomeHead). */
html.cpath:not(.cpath-home) #h-infos {
  height: 0 !important; /* gabarit : 38 px de haut, vides */
  min-height: 0 !important;
  padding-top: 0 !important; /* course-hero.css (html.lch-pre #h-infos) impose 6px */
  padding-bottom: 0 !important;
  margin-bottom: 0;
}
/* Zone du player (.pb40, vide ici : le player est dans la fenêtre du héros) : sans ses 40 px de
 * padding bas, le chemin et son dégradé commencent en haut de la page, sous la barre fixe. */
html.cpath:not(.cpath-home) #first_c,
html.cpath:not(.cpath-home) #first_c > .pb40 {
  padding-bottom: 0 !important;
}
/* Rien au-dessus du chemin : il est collé sous la barre fixe dès l'ouverture. */
html.cpath #nbotbuttons {
  height: 0;
  overflow: hidden;
}
html.cpath #nprog,
html.cpath #nprog .bg-image-progression {
  margin-top: 0 !important;
  padding-top: 0 !important;
}
/* Rangée de boutons du gabarit (#dconnect…, tous masqués ici) : sans ses marges, le chemin
 * vient sous le header du site. */
html.cpath #nbotbuttons {
  margin-top: 0;
  margin-bottom: 0;
  /* ecoach_pre.css (≤ 899 px) lui impose 12px 8px !important : 24 px de dégradé rose du site
     entre la barre fixe et le chemin sur mobile. */
  padding: 0 !important;
  min-height: 0;
}

/* Page du chemin (html.cpath, player.html.php) : avec un hash de thème, pas d'écran « Lancer le
 * cours » du player (#container) avant le lancement ; le chemin est l'écran d'accueil. Le player
 * revient dans la fenêtre modale du héros au lancement (course-hero.js retire lch-pre). */
html.cpath.lch-pre:not(.cpath-home) #container {
  display: none !important; /* body.pre-launch impose display:flex */
}

/* URL racine du cours (html.cpath-home, sans hash) : image du thème + « Commencer » (le vrai
 * #container du player, ses écouteurs), puis la fiche de présentation (#allcats, rendue cachée
 * dans .cpath-pres) ; pas encore de chemin (ui/app.js ne rend pas .cpath-wrap, HOME) : sous la
 * fiche, seulement les mentions légales. Le tout sur le dégradé du chemin. */
/* Dégradé sur <html> (pas sur body) : body commence sous la marge de #home_content, le dégradé
 * rose du site (html) restait visible sous le header. */
html.cpath.cpath-home {
  background: #fff linear-gradient(#e7f3f5, #e4f4ef, #e8f3e6, #f2f0dd, #ffebdb, #fff) no-repeat !important;
  background-size: 100% 100vh !important;
  background-attachment: fixed !important;
}
html.cpath.cpath-home body {
  background: transparent;
}
/* Mi-jour et nuit ne concernent que la timeline (CSS/path-themes/) : cette vue garde les fonds du jour
 * (mêmes valeurs que les règles :not(.midday):not(.night) de ecoach_n.css). Sans ça : bande sombre
 * sous le header, et titre de jour illisible sur le fond du thème. */
html.cpath.cpath-home:is(.midday, .night) body {
  --lc-container-bg-color: #fff8ec;
  --lc-grd-pres-bg: #fff8ec;
}
html.cpath.cpath-home:is(.midday, .night) body #home_content,
html.cpath.cpath-home:is(.midday, .night) body #splitsn {
  background-image: radial-gradient(rgba(210, 180, 130, 0.18) 1.5px, transparent 1.6px) !important;
  background-size: 22px 22px !important;
}
html.cpath.cpath-home:is(.midday, .night) body #home_content {
  background-color: #fff8ec !important;
}
/* Ligne drapeau + titre : collée sous le header (50 px), même espace au-dessus et au-dessous,
 * drapeau aligné sur le bord de l'image (course-hero.css impose ses paddings en !important). */
html.cpath.cpath-home body #home_content {
  margin-top: 50px !important;
  padding-top: 0 !important;
}
html.cpath.cpath-home body #h-infos {
  min-height: 0;
  margin: 0 !important;
  padding: 20px 0 !important;
}
/* Mobile : le gabarit descend déjà #home_content sous le header (top: --lc-header-h, safe-area
 * comprise). Avec la marge du dessus, le décalage comptait deux fois. */
@media (max-width: 899px) {
  html.cpath.cpath-home body #home_content {
    margin-top: 0 !important;
  }
  html.cpath.cpath-home body #h-infos {
    padding: 20px 5px !important;
  }
}
/* Retour + drapeau + H1 n'arrivent qu'au montage du module (ui/app.js placeHomeHead) : hauteur de
 * la pilule .cpath-back (30 px + bordures) réservée dès le premier rendu, sinon l'image du thème et
 * « Commencer » sautent de 32 px à ce moment-là. */
html.cpath.cpath-home body #h-infos > .c {
  min-height: 32px;
}
/* Bloc du player (#sublist, #h-prog, #perinfos, tous masqués ici) : en mobile, il passe seul à la
 * ligne (flex-basis 100 %) et ajoute 12 px de gap sous la ligne, donc un saut après le montage. */
html.cpath.cpath-home body #h-infos > .c > .i:not(.cpath-home-line) {
  display: none;
}
/* Bouton vert (#start) : un mot court (arabe « ابدأ ») en faisait un carré étroit et haut. */
html.cpath-home #start {
  min-width: 180px;
  max-height: 100px;
}
html.cpath-home #nprog .bg-image-progression {
  display: flex;
  flex-direction: column;
}
html.cpath-home .cpath-pres[hidden] {
  display: block;
  order: -1;
  margin-top: 40px;
}
html.cpath-home #course-path .cpath-root {
  padding-top: 24px;
  padding-bottom: 0;
}
/* Liste SSR des leçons (SEO) avant le montage du module : pas affichée sur la racine. */
html.cpath-home #course-path:not(.is-mounted) .cpath-ssr {
  display: none;
}

/* En-tête SSR (drapeau + H1) avant le montage : même rendu que la barre du cours. */
#course-path .cpath-ssr-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 32px 0;
}
#course-path .cpath-ssr-head img {
  width: 28px;
  height: 28px;
  border-radius: 50%;
}
#course-path .cpath-ssr-head h1 {
  margin: 0;
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
}

/* Liste SEO : visible tant que le module n'est pas monté (sans JS, lecteurs). */
#course-path .cpath-ssr {
  padding: 24px 32px;
  margin: 0;
}
#course-path .cpath-ssr h3 {
  margin: 16px 0 4px;
  font-size: 16px;
}
#course-path .cpath-ssr ol {
  padding-left: 20px;
}
#course-path .cpath-ssr a {
  color: inherit;
}

/* Page du chemin : plus de header du site en haut (ses accès sont dans le pied fixe), plus de
 * fond rose ni de marge au-dessus ; la barre du chemin est le header fixe des pages player. */
html.cpath body {
  background: #fff;
}
/* top : le gabarit (≤ 899 px) descend #home_content de la hauteur du header, ici vidé. Son fond rose
 * restait visible en bande entre la barre fixe et le chemin, avec les 20 px de #nbotbuttons. */
html.cpath:not(.cpath-home) #home_content {
  top: 0;
  margin-top: 0;
  padding-top: 0;
}
/* Sélecteur plus spécifique que celui d'ecoach_n.css (≤ 899 px : #nbotbuttons.tcenterflex, 20px !important). */
html.cpath:not(.cpath-home) body #nbotbuttons.tcenterflex {
  margin-top: 0 !important;
}
/* Sur la racine (cpath-home, vue de prélancement), le header du site reste tel quel : pas de
 * barre du cours ni de pied fixe. */
html.cpath:not(.cpath-home) #header-t-art-actions {
  height: 0;
}
/* Header du site vidé (logo dans la barre du chemin, accès dans le pied) : gardé pour les
 * scripts du player, sans hauteur ni ombre. */
html.cpath:not(.cpath-home) #header_nav_classic {
  height: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  overflow: hidden;
  box-shadow: none !important;
}
.cpath-root {
  /* Hauteur des deux barres fixes : valeur de départ, puis mesurée sur la barre du haut, dont le
     contenu varie (ui/bar-height.js). */
  --cp-bar-h: 58px;
  padding-top: 76px;
  padding-bottom: var(--cp-bar-h);
}

/* ——— Barre du cours (Loe.me .header) : header fixe ——— */
.cpath-head {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  padding: 10px 16px;
  backdrop-filter: blur(17px);
  -webkit-backdrop-filter: blur(17px);
  background: linear-gradient(181deg, rgb(231 243 245 / 30%), rgb(231 243 245 / 12%));
  box-shadow: 0 4px 12px rgb(0 0 0 / 12%);
  /* Coins bas arrondis, comme le header du site (#header_nav_classic). */
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
}
.cpath-head__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.cpath-head__id {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.cpath-head__id img {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  flex-shrink: 0;
}
/* Logo du site : pas sur la vue chemin (ni dans la barre, ni à sa place fixe du header vidé). */
html.cpath:not(.cpath-home) #btn_home {
  display: none !important;
}
/* Dans la barre du chemin, le retour au hub n'est plus que « < » (libellé dans aria-label). */
.cpath-head .cpath-back {
  width: 30px;
  padding: 0;
  justify-content: center;
}
.cpath-head .cpath-back span {
  display: none;
}
/* Retour au hub des parcours (« Tous les cours ») : pilule devant le drapeau, dans la barre du
 * chemin et sur la ligne de prélancement (#h-infos). */
.cpath-back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  height: 30px;
  padding: 0 12px 0 8px;
  border-radius: 999px;
  border: 1px solid rgb(0 0 0 / 8%);
  background: rgb(255 255 255 / 80%);
  color: var(--cp-ink, #111);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 1px 3px rgb(0 0 0 / 8%);
}
.cpath-back:hover {
  background: #fff;
}
.cpath-back svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
#h-infos > .c > .cpath-back {
  margin-right: 10px;
}
/* Racine d'une langue à un seul cours : le bouton ramène à la vue de prélancement (ui/app.js), il n'a
 * donc pas sa place sur cette vue. */
html.cpath-home .cpath-back--root {
  display: none;
}
@media (max-width: 600px) {
  .cpath-back span {
    display: none;
  }
  .cpath-back {
    padding: 0 8px;
  }
}
.cpath-head__id h1,
.cpath-head__name {
  margin: 0;
  display: flex;
  flex-direction: column;
  min-width: 0;
  font: inherit;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.1;
  color: var(--cp-ink);
  text-transform: none;
  letter-spacing: 0;
}
/* Deux lignes (ui/app.js splitTitle) : la langue, puis le nom du cours en dessous, plus discret. */
.cpath-head__id h1 .lch-h1-lang,
.cpath-head__sub,
.cpath-head__name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cpath-head__id h1 .lch-h1-lang {
  font: inherit;
  color: inherit;
}
.cpath-head__sub {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  color: #4f5b64;
}

/* Barre du haut : compteur de séance (#counter) et, en visiteur, langue + Se connecter / S'inscrire
 * (.header_right, déplacé par ui/app.js Footer) à droite, comme sur la vue de prélancement. */
.cpath-head__tools {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
}
.cpath-head .header_right {
  position: static;
  height: auto;
}
.cpath-head .header_right .dropdown,
.cpath-head #login_right_view {
  height: auto;
}
.cpath-head .login-button,
.cpath-head .signup-button {
  white-space: nowrap;
}
/* Couleur de la barre (donc du thème du chemin) : le noir fixe du header du site
 * (#login_right_view button) restait illisible sur une barre sombre. */
.cpath-head #login_right_view .login-button,
.cpath-head #login_right_view .language-code {
  color: inherit;
}

/* Mobile (< 900 px, seuil du mode mobile du héros) : pas de titre du cours (il reste sur la vue
 * de prélancement, avec l'image du thème) ; « < » à gauche, compteur à droite. */
@media (max-width: 899px) {
  .cpath-head {
    padding: 10px 12px 10px 10px;
  }
  .cpath-head__id h1,
  .cpath-head__name {
    display: none;
  }
}

/* ——— Chemin ——— */
.cpath-wrap {
  position: relative;
  padding: 24px 16px 24px;
}
.cpath-line {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 0;
}
.cpath-line path {
  fill: none;
  stroke: #fff;
  stroke-width: 5px;
  stroke-dasharray: 10 10;
  stroke-linecap: round;
}
.cpath-zone {
  padding: 17px 0;
}
.cpath-zone__head {
  position: relative;
  z-index: 1;
  text-align: center;
  margin-bottom: 16px;
}
.cpath-zone__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgb(255 255 255 / 60%);
  padding: 0.5rem 1rem;
  border-radius: 999px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-family: "Poppins", "Nunito", "Noto Sans", sans-serif;
  font-weight: 600;
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: rgb(55 65 81);
  margin-bottom: 8px;
}
.cpath-zone__obj {
  font-size: 13px;
  color: var(--cp-muted);
  font-style: italic;
  max-width: 320px;
  margin: 0 auto;
}
/* Rangées plus hautes que Loe.me (72 px) : l'étiquette est une carte (barre + pastilles). */
.cpath-row {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 104px;
}
/* Le rond (56 px) est centré sur l'axe du chemin (+ décalage du zigzag) et l'étiquette part à sa
 * droite : sa largeur (image, nom) ne décale plus le rond par rapport au tracé. */
.cpath-step {
  position: absolute;
  left: calc(50% - 28px);
  display: flex;
  align-items: center;
  gap: 12px;
  z-index: 1;
}
html[dir="rtl"] .cpath-step {
  left: auto;
  right: calc(50% - 28px);
}
/* Écran étroit : axe du chemin à 30 % de la largeur, pour que l'étiquette tienne à droite. */
@media (max-width: 640px) {
  .cpath-step {
    left: calc(30% - 28px);
  }
  html[dir="rtl"] .cpath-step {
    left: auto;
    right: calc(30% - 28px);
  }
}
.cpath-node {
  position: relative;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: "Poppins", "Nunito", "Noto Sans", sans-serif;
  font-weight: 700;
  font-size: 18px;
  color: #fff;
  flex-shrink: 0;
  box-shadow: var(--cp-btn-shadow);
  transition: transform 0.3s ease;
}
.cpath-node:hover:not(:disabled) {
  transform: scale(1.05);
}
.cpath-num {
  display: inline-block;
  transform: translateY(-4px);
}
/* Nœud de départ « Progression » : pastille or (comme une leçon terminée), oiseau posé dedans
   (.cpath-bird--path, views/bird.js), anneau du % du cours autour (.cpath-ring--node, 70 px, trait
   de 3 px à 2,5 px de la pastille de 56 px) et le
   chiffre en blanc au centre, sous l'oiseau. */
.cpath-node.is-start {
  background: linear-gradient(135deg, var(--cp-gold), var(--cp-orange));
  box-shadow: var(--cp-btn-shadow), 0 0 20px hsl(42 100% 65% / 50%), 0 0 40px hsl(42 100% 65% / 30%);
  color: #fff;
}
.cpath-ringwrap {
  position: relative;
  width: 70px;
  height: 70px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
/* % du cours en blanc au centre de la pastille (cœur à 0 %, coupe à 100 %) : l'oiseau posé le
 * recouvre, il se lit quand l'oiseau s'envole. */
.cpath-pct {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 11px;
  color: #fff;
  white-space: nowrap;
  pointer-events: none;
}
.cpath-pct__ic {
  width: 18px;
  height: 18px;
  fill: currentColor;
  /* Relief du bas de la pastille (ombre inset) : l'icône remonte un peu pour paraître centrée. */
  transform: translateY(-2px);
}
/* Bulle de dialogue de l'oiseau (libellé du nœud de départ) : un peu plus haut que la pastille,
 * queue en bas à gauche vers l'oiseau. Même police que les autres étiquettes ; sélecteur doublé
 * pour passer devant .cpath-label, déclarée plus bas. */
.cpath-label.cpath-label--bubble {
  position: relative;
  align-self: flex-start;
  margin-top: -18px;
  margin-left: -18px;
  border-radius: 14px;
  background: #fff;
  border: 1.5px solid #d6dae1;
  overflow: visible;
}
/* Queue : triangle rectangle dont la pointe part en bas à gauche, vers la pastille et l'oiseau ;
 * ::before = contour, ::after = intérieur blanc qui recouvre la bordure du bas de la bulle. */
.cpath-label.cpath-label--bubble::before,
.cpath-label.cpath-label--bubble::after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
}
.cpath-label.cpath-label--bubble::before {
  left: 9px;
  bottom: -13px;
  border-top: 14px solid #d6dae1;
  border-right: 17px solid transparent;
}
.cpath-label.cpath-label--bubble::after {
  left: 11px;
  bottom: -10px;
  border-top: 11px solid #fff;
  border-right: 13px solid transparent;
}
html[dir="rtl"] .cpath-label.cpath-label--bubble::before {
  left: auto;
  right: 9px;
  border-right: 0;
  border-left: 17px solid transparent;
}
html[dir="rtl"] .cpath-label.cpath-label--bubble::after {
  left: auto;
  right: 11px;
  border-right: 0;
  border-left: 13px solid transparent;
}
/* L'anneau déborde de 8 px autour des 56 px de la pastille : le nœud reste centré sur l'axe. */
.cpath-step--start {
  margin-left: -7px;
}
html[dir="rtl"] .cpath-step--start {
  margin-left: 0;
  margin-right: -7px;
}
.cpath-node.is-done {
  background: linear-gradient(135deg, var(--cp-gold), var(--cp-orange));
  box-shadow: var(--cp-btn-shadow), 0 0 20px hsl(42 100% 65% / 50%), 0 0 40px hsl(42 100% 65% / 30%);
}
.cpath-node.is-active {
  background: linear-gradient(135deg, var(--cp-sakura), var(--cp-sakura-light));
  box-shadow: var(--cp-btn-shadow), 0 0 20px hsl(330 85% 65% / 50%), 0 0 40px hsl(330 85% 65% / 30%);
  animation: cpath-pulse 2s ease-in-out infinite;
}
.cpath-node.is-active::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid hsl(330 85% 65% / 70%);
  pointer-events: none;
  animation: cpath-ring 2s ease-out infinite;
}
.cpath-node.is-available {
  background: linear-gradient(135deg, hsl(200, 88%, 52%), hsl(195, 85%, 62%));
  box-shadow: var(--cp-btn-shadow), 0 0 18px hsl(200 90% 50% / 35%);
}
.cpath-node.is-locked {
  background: hsl(220deg 8.31% 42.96% / 40%);
  backdrop-filter: blur(4px);
  color: hsl(220deg 15.92% 56.54%);
  cursor: default;
}
.cpath-node.is-locked svg {
  stroke: #fff;
}
/* Leçon terminée : coupe (sprite icon-trophy) à la place du numéro. */
.cpath-cup {
  width: 18px;
  height: 18px;
  fill: #fff;
  /* Remontée comme le numéro (.cpath-num, relief du bas) et un peu à gauche : le petit numéro
     du coin bas-droit reste dégagé. */
  transform: translate(-2px, -4px);
}
/* Leçon du plan du jour : rond vert (couleur du liseré .is-today) sur le coin haut-droit de
   l'étiquette, moitié dedans moitié dehors. */
.cpath-label--card.is-today {
  position: relative;
  overflow: visible;
}
.cpath-today-dot {
  position: absolute;
  top: -5px;
  right: -5px;
  width: 14px;
  height: 14px;
  border: 1px solid #fff;
  border-radius: 50%;
  background: #b3e147;
  pointer-events: none;
}
html[dir="rtl"] .cpath-today-dot {
  right: auto;
  left: -5px;
}
/* Même icône + petit numéro pour une leçon du plan du jour (calendrier, icon-calendar1). */
/* …et son numéro en petit, discret : chiffre blanc sans fond, dans le rond, en bas à droite. */
.cpath-num-mini {
  position: absolute;
  right: 13px;
  bottom: 12px;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  opacity: 0.9;
  pointer-events: none;
}
html[dir="rtl"] .cpath-num-mini {
  right: auto;
  left: 13px;
}
.cpath-label {
  padding: 8px 12px;
  border-radius: 999px;
  background: rgb(250, 250, 250);
  border: 1px solid rgb(255 255 255 / 12%);
  color: #000;
  font: inherit;
  font-weight: 700;
  font-size: 12px;
  line-height: 1.2;
  max-width: 260px;
  box-shadow: 0 6px 16px rgb(0 0 0 / 18%);
  cursor: pointer;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* Étiquette-carte : image ronde du thème (lesson.img, celle de l'API telle quelle pour l'essai),
 * puis nom, barre de progression, pastilles des vignettes. */
.cpath-label--card {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  min-width: 170px;
  max-width: 300px;
  padding: 8px 14px 8px 8px;
  border-radius: 16px;
  -webkit-line-clamp: unset;
  transform-origin: left center;
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}
html[dir="rtl"] .cpath-label--card {
  transform-origin: right center;
}
/* Survol de l'étape : léger zoom de l'étiquette, ancré côté rond (discret). */
@media (hover: hover) {
  .cpath-step:hover .cpath-label--card {
    transform: scale(1.04);
  }
}
.cpath-label--card:focus-visible {
  transform: scale(1.04);
}
@media (prefers-reduced-motion: reduce) {
  .cpath-label--card {
    transition: none;
  }
}
.cpath-label__img {
  flex-shrink: 0;
  width: 70px;
  height: 50px;
  border-radius: 10px;
  object-fit: cover;
  background: #e5e7eb;
  transition: filter 0.25s ease, opacity 0.25s ease;
}
/* Leçon pas lancée ou verrouillée : image en gris, en couleur au survol de l'étape. */
.cpath-label__img.is-grey {
  filter: grayscale(1);
  opacity: 0.8;
}
.cpath-step:hover .cpath-label__img.is-grey,
.cpath-step:focus-within .cpath-label__img.is-grey {
  filter: none;
  opacity: 1;
}
.cpath-label__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1 auto;
  min-width: 0;
}
.cpath-label__name {
  font-size: 13px;
  line-height: 1.2;
}
.cpath-label__bar {
  display: block;
  height: 5px;
  border-radius: 999px;
  background: #e5e7eb;
  overflow: hidden;
}
.cpath-label__bar i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #f25aa6, #ffc94d);
}
.cpath-label__goal {
  font-size: 11px;
  font-weight: 600;
  color: var(--cp-muted);
}
.cpath-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.cpath-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 7px;
  border-radius: 999px;
  background: #f5f7fb;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
}
.cpath-badge.is-red {
  color: #d13b2a;
  background: #fff1ee;
}
.cpath-badge.is-green {
  color: #0b6655;
  background: #eaf6f3;
}
.cpath-badge__ico {
  width: 13px;
  height: 13px;
  fill: currentColor;
}

/* Couleur du niveau (--lv → --lv2, ui/app.js LEVEL_COLORS) : dégradé vif sur l'étiquette et
 * sur les leçons disponibles du niveau ; texte blanc. */
.cpath-zone[style*="--lv"] .cpath-zone__badge {
  background: linear-gradient(135deg, var(--lv), var(--lv2));
  color: #fff;
}
/* Étiquette d'une leçon : la couleur de son rond, en très léger — couleur du niveau pour une
 * leçon disponible (#19a9f0 → ≈ #edf6fb), rose pour la leçon en cours, or / orangé pour une
 * leçon terminée, gris pour une leçon verrouillée. */
.cpath-zone[style*="--lv"] .cpath-label--card.is-available {
  background: color-mix(in srgb, var(--lv) 6%, #fbfbfc);
}
.cpath-label--card.is-active {
  background: color-mix(in srgb, var(--cp-sakura) 7%, #fbfbfc);
}
.cpath-label--card.is-done {
  background: color-mix(in srgb, var(--cp-orange) 8%, #fbfbfc);
}
.cpath-label--card.is-locked {
  background: color-mix(in srgb, hsl(220 8% 43%) 7%, #fbfbfc);
}
/* Leçon du plan du jour (Ma mission) : fond blanc et liseré vert, sans décaler l'étiquette ;
 * prime sur la teinte de l'état (sélecteur au poids de celui des leçons disponibles). */
.cpath-zone .cpath-label--card.is-today.is-today {
  background: #fff;
  box-shadow: inset 0 0 0 2px #b3e147, 0 6px 16px rgb(0 0 0 / 18%);
}
.cpath-zone[style*="--lv"] .cpath-node.is-available {
  background: linear-gradient(135deg, var(--lv), var(--lv2));
  box-shadow: var(--cp-btn-shadow), 0 0 18px color-mix(in srgb, var(--lv) 35%, transparent);
}
/* Pastille des leçons du plan du jour : le rose de la mission prioritaire (.is-active), sans
 * pulsation (seule .is-mission pulse) ; prime sur la teinte du niveau et l'or des terminées. */
.cpath-zone .cpath-node.is-plan.is-plan,
.cpath-node.is-plan.is-plan {
  background: linear-gradient(135deg, var(--cp-sakura), var(--cp-sakura-light));
  box-shadow: var(--cp-btn-shadow), 0 0 20px hsl(330 85% 65% / 50%), 0 0 40px hsl(330 85% 65% / 30%);
}
/* Missions du jour faites sur la leçon (ui/app.js isPlanDone) : liseré blanc, ombre portée. */
.cpath-zone .cpath-node.is-plan.is-plan.is-plan-done,
.cpath-node.is-plan.is-plan.is-plan-done {
  border: 2px solid #fff;
  box-shadow: rgb(0 0 0 / 35%) 0 5px 15px;
}
/* Pastille d'une leçon pas encore commencée : en gris clair. */
.cpath-node.is-new {
  filter: grayscale(1) brightness(1.15);
}
/* Leçon retirée du programme (Ma mission › Ajuster) : rond et étiquette estompés, sans pastille. */
.cpath-node.is-removed {
  filter: grayscale(1) opacity(0.55);
}
.cpath-label--card.is-removed {
  opacity: 0.6;
}
/* Sous la barre d'une leçon retirée : « Leçon retirée » (2430). */
.cpath-label__removed {
  font-size: 11px;
  font-weight: 700;
  color: var(--cp-muted);
}

/* Pied fixe : barre sur toute la largeur, transparente et floutée comme la barre du haut
 * (.cpath-head), coins hauts arrondis (15 px, comme le bas du header du site) ; icônes groupées
 * au centre de la barre, en cellules séparées d'un filet, sans texte (libellé en infobulle,
 * ui/app.js bindFootTips). Grille 1fr | icônes | 1fr : le groupe
 * reste centré sur la barre ; quand la place manque, la 1re colonne disparaît et les icônes
 * rétrécissent (48 px mini) puis défilent en x. */
.cpath-foot {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 30;
  height: var(--cp-bar-h);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, max-content) minmax(0, 1fr);
  align-items: stretch;
  padding: 0;
  box-sizing: border-box;
  backdrop-filter: blur(17px);
  -webkit-backdrop-filter: blur(17px);
  background: linear-gradient(181deg, rgb(231 243 245 / 30%), rgb(231 243 245 / 12%));
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
  box-shadow: 0 -4px 12px rgb(0 0 0 / 12%);
  overflow: hidden;
}
.cpath-foot__menu {
  display: flex;
  align-items: center;
  height: 100%;
}
/* Rangée d'icônes : prend la place libre ; défile en x quand elle ne tient plus (48 px mini par
 * cellule), sans barre de défilement visible. */
.cpath-foot__menu {
  grid-column: 2;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.cpath-foot__menu::-webkit-scrollbar {
  display: none;
}
.cpath-foot .logomenu {
  position: static;
  display: flex;
  align-items: stretch;
  /* Rétrécit avec la place (cellules de 84 à 48 px), puis la rangée défile. */
  flex: 0 1 auto;
  min-width: min-content;
  width: auto;
  height: 100%;
  margin: 0 !important; /* haut2-header : margin-left 190px (place du logo) */
  padding: 0;
  float: none;
  /* ecoach_n.css (≥ 900 px) centre la barre du header : left 50 % + translateX(-50 %), qui la
     décalait hors de l'écran à gauche dans le pied. */
  left: auto !important;
  transform: none !important;
}
.cpath-foot .logomenu .tablinks2 {
  flex: 0 1 auto;
  min-width: 48px;
  width: 84px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.cpath-foot .logomenu .tablinks2 + .tablinks2 {
  border-left: 1px solid rgb(0 0 0 / 8%) !important;
}
.cpath-foot .logomenu .tablinks2:hover,
.cpath-foot .logomenu .tablinks2:focus-visible {
  background: rgb(255 255 255 / 45%) !important;
}
/* L'icône au centre de sa cellule (haut2-header la décale / la positionne pour le header). */
.cpath-foot .logomenu .tablinks2 .icon {
  position: static !important;
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  margin: 0 !important;
  padding: 0 !important;
  left: auto !important;
  top: auto !important;
  transform: none !important;
  fill: #29a9a4;
}
/* Libellé (.infos, infobulle du header) : jamais dans la cellule, repris par .cpath-foot-tip. */
.cpath-foot .logomenu .tablinks2 > .infos {
  display: none !important;
}
/* Visiteur (#login_right_view visible, LoecsenAuthChrome le masque à la connexion) : la connexion et
 * le choix de langue sont en haut à droite, pas en bas. Les onglets restent dans le DOM, cachés : le
 * player les déclenche par script (user_tab.click()…). */
html:has(#login_right_view:not(.dnonei)) .cpath-foot #user_tab,
html:has(#login_right_view:not(.dnonei)) .cpath-foot .cpath-bar__slot:has(#user_tab),
html:has(#login_right_view:not(.dnonei)) .cpath-foot #n_change_lang,
html:has(#login_right_view:not(.dnonei)) .cpath-more #n_change_lang {
  display: none !important;
}
html:has(#login_right_view:not(.dnonei)) .cpath-foot .logomenu #reg_tab {
  border-left: none !important; /* désormais la première cellule visible */
}
.cpath-foot-tip {
  position: fixed;
  z-index: 10003;
  max-width: 220px;
  padding: 6px 10px;
  border-radius: 8px;
  background: #1f2937;
  color: #fff;
  font-family: "Nunito", "Noto Sans", -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 4px 12px rgb(0 0 0 / 18%);
}
.cpath-foot-tip[hidden] {
  display: none;
}
/* « Objectifs de la semaine » (ui/app.js WeekFab) : coin bas-droit, au-dessus du pied fixe. */
.lch-week-fab.cpath-week-fab {
  bottom: calc(var(--cp-bar-h) + 12px);
}
/* Nombre d'expressions à travailler aujourd'hui (ui/app.js ExprBadge) : pastille rose pâle bordée
 * de blanc au coin haut-droit du rond rose (bouton bureau et rond de la barre mobile). */
.cpath-fab-count {
  position: absolute;
  top: -5px;
  right: -5px;
  box-sizing: border-box;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 1px solid #fff;
  border-radius: 12px;
  background: #ffcfe8;
  color: #1d1e20;
  font: 700 10px/20px "Nunito", "Noto Sans", sans-serif;
  text-align: center;
  pointer-events: none;
}
/* Mobile (héros lch-m sans scène sur le chemin) : player masqué (lch-m-home), la page défile
 * comme sur desktop ; player ouvert (lch-m-app), plein écran depuis le haut (pas de header du site
 * sur le chemin), barres du chemin masquées. */
html.cpath.lch-m.lch-m-home {
  overflow-x: hidden !important;
  overflow-y: auto !important;
}
html.cpath.lch-m.lch-m-home body {
  overflow: visible !important;
  overflow-x: clip !important;
}
html.cpath.lch-m {
  --lch-top: 0px;
}
html.lch-m-app .cpath-head,
html.lch-m-app .cpath-foot,
html.lch-m-app .cpath-more,
html.lch-m-app .cpath-week-fab {
  display: none !important;
}
/* ——— Fenêtres du player, du dialogue et de la liste des mots (course-hero.js .lch-modal) :
 * même carte que les popups (voile, carte pastel, carte blanche), sur desktop ; en mobile
 * (lch-m) le player reste en plein écran. Le rectangle vient toujours de sizeModal. ——— */
/* Player, dialogue, liste des mots : voile couleur de page sur tout l'écran, header compris
 * (sizeModal : --lch-top 0 sur cette page). */
html.cpath:not(.lch-m) .lch-modal__backdrop {
  background: var(--cp-veil-page);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
html.cpath.lch-modal-open:not(.lch-m) .cpath-head {
  z-index: 1;
}
html.lch-m .lch-modal__x--player {
  display: none;
}
/* Le player a sa croix mobile (.lch-m-close) ; la liste de mots n'a que celle-ci. */
html.lch-m .lch-modal--words .lch-modal__x--player {
  display: flex;
}
html.cpath:not(.lch-m) .lch-modal__dialog {
  box-sizing: border-box;
  padding: var(--cp-card-pad);
  background: var(--cp-card-bg);
  border: 1px solid var(--cp-card-line);
  border-radius: var(--cp-card-radius);
  box-shadow: var(--cp-card-shadow);
}
html.cpath:not(.lch-m) .lch-modal__slot {
  background: #fff;
  border-radius: var(--cp-white-radius);
  box-shadow: var(--cp-white-shadow);
}
/* Le player remplit la carte blanche : taille de la fenêtre moins le cadre (marge + bord) ; sa
 * largeur fixe (1220 px, ecoach_n.css) déborderait. */
html.cpath:not(.lch-m) .lch-modal #container.iframeplayer,
html.cpath:not(.lch-m) .lch-modal #container.iframeplayer.shell-expanded,
html.cpath:not(.lch-m) .lch-modal #container.iframeplayer.opaci,
html.cpath:not(.lch-m) .lch-modal #container.iframeplayer.player-boot-veiled {
  width: 100% !important;
  max-width: 100% !important;
  height: calc(var(--lch-container-h, 70vh) - 2 * var(--cp-card-pad) - 2px) !important;
}
/* Croix du dialogue / de la liste des mots : celle des popups (.cpath-close), dans la carte blanche. */
html.cpath:not(.lch-m) .lch-modal__x {
  top: calc(var(--cp-card-pad) + 12px);
  right: calc(var(--cp-card-pad) + 12px);
  width: 28px;
  height: 28px;
  border: 1px solid var(--cp-card-line);
  border-radius: 50%;
  background: #fff;
  color: #6b7280;
}
html[dir="rtl"].cpath:not(.lch-m) .lch-modal__x {
  right: auto;
  left: calc(var(--cp-card-pad) + 12px);
}
/* Fenêtres du player et du dialogue : croix sur le coin de la carte pastel. */
html.cpath:not(.lch-m) .lch-modal__x--player {
  top: -3px;
  right: -6px;
}
html[dir="rtl"].cpath:not(.lch-m) .lch-modal__x--player {
  right: auto;
  left: -6px;
}
/* Barre des fiches du player (#mdetails, ≥ 1380 px, ecoach_n.css : colonne fixe au bord gauche
 * de l'écran) : à gauche de la carte, collée à son bord, entre ses deux arrondis, coins gauches
 * arrondis ; l'onglet ouvert se déploie vers la droite, par-dessus le player. */
html.cpath.lch-modal-open:not(.lch-m) #mdetails .bhoechie-tab-container {
  top: calc(var(--lch-dlg-top, 66px) + var(--cp-card-radius));
  bottom: auto;
  height: calc(var(--lch-dlg-h, 80vh) - 2 * var(--cp-card-radius));
  left: calc(var(--lch-dlg-left, 110px) - 70px);
  width: auto;
  margin: 0;
  border-radius: var(--cp-card-radius) 0 0 var(--cp-card-radius);
  overflow: hidden;
}
html.cpath.lch-modal-open:not(.lch-m) #mdetails .bhoechie-tab-menu {
  margin-top: 0;
}
html.cpath.lch-modal-open:not(.lch-m) #mdetails .bhoechie-tab.active {
  flex: 0 0 auto;
  width: calc(var(--lch-dlg-w, 1220px) * 0.45);
  box-shadow: inset 0 0 0 2px #157e7d, 0 6px 12px rgb(0 0 0 / 17.5%);
}
/* Barre de défilement verte, curseur carré. Chrome / Safari : pseudo-éléments seulement (avec
 * scrollbar-color / scrollbar-width, Chrome les ignore et dessine son curseur arrondi) ;
 * Firefox : propriétés standard (curseur toujours arrondi, non réglable). */
html.cpath.lch-modal-open:not(.lch-m) #mdetails .bhoechie-tab.active::-webkit-scrollbar {
  width: 8px;
}
html.cpath.lch-modal-open:not(.lch-m) #mdetails .bhoechie-tab.active::-webkit-scrollbar-track {
  background: transparent;
}
html.cpath.lch-modal-open:not(.lch-m) #mdetails .bhoechie-tab.active::-webkit-scrollbar-thumb {
  background: #157e7d;
  border-radius: 0;
}
@supports not selector(::-webkit-scrollbar) {
  html.cpath.lch-modal-open:not(.lch-m) #mdetails .bhoechie-tab.active {
    scrollbar-width: thin;
    scrollbar-color: #157e7d transparent;
  }
}
/* Fiche ouverte : le player passe au flou derrière (#mdetails est hors de #container). */
html.cpath:not(.lch-m) .lch-modal #container {
  transition: filter 0.2s ease;
}
html.cpath.lch-modal-open:not(.lch-m):has(#mdetails .bhoechie-tab.active) .lch-modal #container {
  filter: blur(4px);
}
@media (prefers-reduced-motion: reduce) {
  html.cpath:not(.lch-m) .lch-modal #container {
    transition: none;
  }
}
html[dir="rtl"].cpath.lch-modal-open:not(.lch-m) #mdetails .bhoechie-tab-container {
  left: auto;
  right: calc(100vw - var(--lch-dlg-left, 110px) - var(--lch-dlg-w, 1220px) - 70px);
  border-radius: 0 var(--cp-card-radius) var(--cp-card-radius) 0;
}
/* ——— Écoute consciente dans la carte : la fenêtre garde sa carte pastel et sa carte blanche
 * (course-hero.css les rend transparentes hors chemin) ; l'image ou la vidéo remplit la carte
 * blanche, sans cadre noir, aux coins de la carte ; la barre de boutons vient par-dessus, en bas
 * (course-hero.css : effacée après 5 s sans geste). ——— */
html.cpath.lch-on:not(.lch-m) body.immersion-active .lch-modal:not(.lch-modal--frame) .lch-modal__dialog {
  background: var(--cp-card-bg) !important;
  box-shadow: var(--cp-card-shadow) !important;
}
html.cpath.lch-on:not(.lch-m) body.immersion-active .lch-modal:not(.lch-modal--frame) .lch-modal__slot {
  background: #fff !important;
  box-shadow: var(--cp-white-shadow) !important;
}
/* Overlay du player (fixe) calé sur la carte blanche. */
html.cpath.lch-on:not(.lch-m) body.immersion-active #immersion-overlay {
  top: calc(var(--lch-dlg-top, 66px) + var(--cp-card-pad) + 1px) !important;
  left: calc(var(--lch-dlg-left, 110px) + var(--cp-card-pad) + 1px) !important;
  width: calc(var(--lch-dlg-w, 1220px) - 2 * var(--cp-card-pad) - 2px) !important;
  height: calc(var(--lch-dlg-h, 80vh) - 2 * var(--cp-card-pad) - 2px) !important;
  border-radius: var(--cp-white-radius);
  overflow: hidden;
}
/* Pas de cadre noir (ecoach_n.css : 10 px) ni d'arrondi propre (course-hero.css : 16 px) :
 * l'overlay rogne aux coins de la carte blanche. */
html.cpath.lch-on:not(.lch-m) body.immersion-active #immersion-overlay #immersion-stage #canvmob #rcanv2 {
  border: 0 !important;
}
html.cpath.lch-on:not(.lch-m) body.immersion-active #immersion-overlay #immersion-stage #canvmob #rcanv2,
html.cpath.lch-on:not(.lch-m) body.immersion-active #immersion-overlay #immersion-stage #canvmob #rcanv,
html.cpath.lch-on:not(.lch-m) body.immersion-active #immersion-overlay #immersion-stage #canvmob #immersion-lum-scrim {
  border-radius: 0 !important;
}
/* « Fermer » rouge de la barre (.btclose, canvy.js) : la croix de la fenêtre le remplace ; il
 * reste ailleurs (mobile, page cours sans chemin). */
html.cpath.lch-on:not(.lch-m) body.immersion-active #immersion-overlay #immersion-stage #bar_tools .btclose {
  display: none !important;
}
/* Fenêtres du dialogue et de Ma liste de mots : pas de barre des fiches (elle appartient au
 * player). */
html.cpath.lch-dialogue-open #mdetails,
html.cpath.lch-words-open #mdetails {
  display: none !important;
}
html.lch-modal-open .cpath-week-fab,
.cpath-root:has(.cpath-overlay) .cpath-week-fab {
  display: none;
}
/* Player ouvert dans la fenêtre du héros : la barre (et la feuille « + ») n'a pas sa place dessus. */
html.lch-modal-open .cpath-foot,
html.lch-modal-open .cpath-more {
  display: none;
}
/* #allblocks : deux blocs de ce nom (player.html.php : « Autres ressources gratuites » .gallery sur
 * la racine, et le JSON-LD du cours dans un cadre vide de 170 px). Sur une URL de cours seul le
 * second existe — aucun contenu visible, on ne lui laisse pas de place. */
html.cpath #allblocks {
  display: none;
}
/* Racine d'une langue à un seul cours (/fr/cours-grec, $coursePathRoot) : le contenu SEO de la racine
 * reste rendu — teaser Super Mémoire (#course-sm-teaser, dans #nprog après #course-path), « Autres
 * ressources gratuites » (#allblocks .gallery) et fil d'Ariane (.breadcrumb), après #nprog. Même règle
 * que la fiche .cpath-pres : visibles sur la vue de prélancement (cpath-home), masqués sur le chemin.
 * Les URL de cours (hub) ne rendent pas ces blocs : rien n'y change. */
html.cpath.cpath-home #allblocks:has(.gallery) {
  display: block;
}
html.cpath:not(.cpath-home) #course-sm-teaser,
html.cpath:not(.cpath-home) .breadcrumb {
  display: none;
}

/* Mentions légales (footer-site.php) dans le bloc du chemin : sur le dégradé, sans marge. Vue de
 * prélancement : encore à leur place en bas de page (ui/app.js Legal n'est monté qu'avec le chemin),
 * même rendu. */
.cpath-legal .site-footer,
html.cpath.cpath-home .site-footer {
  background: transparent !important;
  margin: 0;
}
.cpath-legal .site-footer .wrap {
  padding-top: 8px;
}

/* ——— Popup (Loe.me modal-overlay › previewCard › whiteCard) ——— */
.cpath-overlay {
  position: fixed;
  inset: 0;
  /* au-dessus du header du site (#header_nav_classic : 10000) */
  z-index: 10001;
  background: var(--cp-veil);
  /* La page derrière (chemin, header, barre) est floutée sous le voile. */
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.cpath-card {
  width: 670px;
  max-width: 100%;
  max-height: calc(100dvh - 32px);
  box-sizing: border-box;
  background: var(--cp-card-bg);
  border: 1px solid var(--cp-card-line);
  border-radius: var(--cp-card-radius);
  box-shadow: var(--cp-card-shadow);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  font-family: "Inter", "Noto Sans", -apple-system, system-ui, sans-serif;
  color: #1f2937;
}
.cpath-card__body {
  padding: 0 var(--cp-card-pad) var(--cp-card-pad);
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.cpath-white {
  position: relative;
  background: #fff;
  border-radius: var(--cp-white-radius);
  box-shadow: var(--cp-white-shadow);
  padding: 16px 15px 14px;
  margin-top: var(--cp-card-pad);
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: auto;
}
/* Barre de défilement de la carte blanche : la piste s'arrête avant les coins arrondis, sinon le
 * curseur y est coupé par l'arrondi. Chrome / Safari : pseudo-éléments seulement (avec
 * scrollbar-width, Chrome les ignore) ; Firefox : propriétés standard, marge non réglable. */
.cpath-white::-webkit-scrollbar {
  width: 8px;
}
.cpath-white::-webkit-scrollbar-track {
  margin-block: var(--cp-white-radius);
  background: transparent;
}
.cpath-white::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 999px;
  background: #4f9e6a padding-box;
}
@supports not selector(::-webkit-scrollbar) {
  .cpath-white {
    scrollbar-width: thin;
    scrollbar-color: #4f9e6a transparent;
  }
}
.cpath-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid #e5e7eb;
  background: #fff;
  display: grid;
  place-items: center;
  font-size: 14px;
  color: #6b7280;
  cursor: pointer;
  padding: 0;
  z-index: 2;
}
.cpath-title {
  font-size: 21px;
  font-weight: 700;
  margin: 0 30px 2px;
  text-align: center;
  line-height: 1.2;
}
.cpath-sub {
  font-size: 13px;
  color: #6b7280;
  margin: 0 0 12px;
  text-align: center;
}
.cpath-viz {
  position: relative;
  height: 130px;
  border-radius: 12px;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  background-color: #e7f3f5;
}
/* Nombre de mots de la leçon, sur l'image. */
.cpath-viz__words {
  position: absolute;
  top: 10px;
  inset-inline-start: 10px;
  padding: 5px 12px;
  border-radius: 999px;
  background: #fff;
  color: #1f2937;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  box-shadow: 0 2px 8px rgb(0 0 0 / 22%);
}
/* Popup Présentation : fiche du thème, ou liste de ses mots. */
.cpath-lpres {
  margin-top: 16px;
  max-height: 60vh;
  overflow-y: auto;
  text-align: start;
  font-size: 14px;
  line-height: 1.5;
}
.cpath-lpres__card h3 {
  margin: 0 0 8px;
  padding: 0;
  font-size: 16px;
}
.cpath-lpres__card h4 {
  margin: 12px 0 4px;
  padding: 0;
  font-size: 14px;
}
.cpath-lpres__card p {
  margin: 0 0 10px;
}
.cpath-lpres__card ul,
.cpath-lpres__card ol {
  margin: 0 0 10px;
  padding-inline-start: 20px;
}
.cpath-lpres__card table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
}
.cpath-lpres__intro {
  margin: 0 0 12px;
}
.cpath-lwords {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}
.cpath-lwords td {
  padding: 8px 10px;
  border-bottom: 1px solid #e5e7eb;
  vertical-align: top;
  overflow-wrap: anywhere;
}
.cpath-lwords tr:last-child td {
  border-bottom: 0;
}
.cpath-lwords td:first-child {
  font-weight: 600;
}
.cpath-lwords td:last-child {
  opacity: 0.75;
}
/* Popup de leçon : durée estimée sous le titre, deux lignes. */
.cpath-est {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 2px 0 10px;
}
/* Popup Progression : vagues animées + anneau. */
.cpath-viz--course {
  flex-shrink: 0;
}
/* Vagues (intro-tabs.js Waves) : ciel couchant, quatre vagues en parallaxe ; le soleil est
 * l'anneau de progression (.cpath-ring), au-dessus grâce à son z-index. */
.cpath-waves {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: linear-gradient(180deg, #f9855d 0%, #fdd288 42%, #fff5e8 72%, #fff 100%);
}
/* Ciel selon l'heure locale (data-sky, intro-tabs.js sky) : 0 = midi (fond ci-dessus),
 * 11 = minuit ; le matin remonte comme le soir descend. 12 nuances, repères midi → après-midi
 * rosé → crépuscule violet → nuit. */
.cpath-waves[data-sky="1"] {
  background: linear-gradient(180deg, #f68064 0%, #fbc688 42%, #feedde 72%, #fffbf8 100%);
}
.cpath-waves[data-sky="2"] {
  background: linear-gradient(180deg, #f47a6a 0%, #fabb88 42%, #fde5d4 72%, #fff8f2 100%);
}
.cpath-waves[data-sky="3"] {
  background: linear-gradient(180deg, #f27471 0%, #f8b087 42%, #fcddca 72%, #fff4eb 100%);
}
.cpath-waves[data-sky="4"] {
  background: linear-gradient(180deg, #ef6f78 0%, #f6a487 42%, #fbd5c0 72%, #fff0e4 100%);
}
.cpath-waves[data-sky="5"] {
  background: linear-gradient(180deg, #c96884 0%, #e4958e 42%, #f4c5b6 72%, #fbe5d9 100%);
}
.cpath-waves[data-sky="6"] {
  background: linear-gradient(180deg, #a36190 0%, #d28795 42%, #edb6ac 72%, #f7dacd 100%);
}
.cpath-waves[data-sky="7"] {
  background: linear-gradient(180deg, #7d5a9c 0%, #c0789c 42%, #e6a6a2 72%, #f3cfc2 100%);
}
.cpath-waves[data-sky="8"] {
  background: linear-gradient(180deg, #604983 0%, #95648c 42%, #b58b95 72%, #c3afb1 100%);
}
.cpath-waves[data-sky="9"] {
  background: linear-gradient(180deg, #44386a 0%, #6a4f7b 42%, #847088 72%, #9390a0 100%);
}
.cpath-waves[data-sky="10"] {
  background: linear-gradient(180deg, #282751 0%, #403a6a 42%, #54547c 72%, #637090 100%);
}
.cpath-waves[data-sky="11"] {
  background: linear-gradient(180deg, #0b1638 0%, #15265a 42%, #23396f 72%, #33507f 100%);
}
/* Chaque vague (SVG à part, 352 unités pour 150 visibles) déborde à gauche et à droite et
 * glisse en entier : transform seul, sur la carte graphique, aucun redessin. Décalage et
 * course = ceux de l'animation d'origine (-90 → +85 unités, soit une période de 176) ramenés en
 * % de la largeur de la vague. */
.cpath-waves__sea {
  position: absolute;
  bottom: 0;
  left: -74.667%;
  z-index: 2;
  width: 234.667%;
  height: 60px;
  margin-bottom: -2px;
  will-change: transform;
  animation: cpath-wave 25s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite;
}
.cpath-waves__sea:nth-child(1) {
  animation-delay: -2s;
  animation-duration: 7s;
}
.cpath-waves__sea:nth-child(2) {
  animation-delay: -3s;
  animation-duration: 10s;
}
.cpath-waves__sea:nth-child(3) {
  animation-delay: -4s;
  animation-duration: 13s;
}
.cpath-waves__sea:nth-child(4) {
  animation-delay: -5s;
  animation-duration: 20s;
}
@keyframes cpath-wave {
  0% {
    transform: translate3d(-25.568%, 0, 0);
  }
  100% {
    transform: translate3d(24.148%, 0, 0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .cpath-waves__sea {
    animation: none;
    will-change: auto;
  }
}
/* Réponse au rappel de mot (intro-tabs.js Recall) dans le ciel de l'en-tête, à gauche du soleil. */
.cpath-recall {
  position: absolute;
  z-index: 3;
  left: 18px;
  top: 14px;
  right: 130px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  color: #fff;
  text-shadow: 0 1px 6px rgb(0 0 0 / 35%);
}
.cpath-recall__ask {
  font-size: 12px;
  opacity: 0.9;
}
.cpath-recall__answer {
  font-size: 22px;
  line-height: 1.15;
  font-weight: 800;
  overflow-wrap: anywhere;
}
.cpath-recall__play {
  align-self: flex-start;
  margin-top: 4px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 0;
  background: rgb(255 255 255 / 85%);
  color: #1f2937;
  font-size: 12px;
  cursor: pointer;
}
/* Anneau de la popup Progression = soleil des vagues : disque jaune, arc vert, % au centre. */
.cpath-ring {
  position: absolute;
  z-index: 3;
  top: 19px;
  right: 39px;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: #f9cb5d;
  display: grid;
  place-items: center;
  box-shadow: 0 0 24px rgb(249 203 93 / 45%);
}
/* La nuit (18 h – 6 h, data-night posé par intro-tabs.js sky) : la lune remplace le soleil. Le
 * disque de l'anneau devient transparent ; la lune est dessinée juste dessous, à la même place
 * (.cpath-waves__moon, en CSS seul : aucune image), avec sa phase du jour (moonLight). */
.cpath-waves[data-night] ~ .cpath-ring {
  background: transparent;
  box-shadow: none;
}
/* Sur la lune : arc turquoise (2e cercle de ring.js) et % en blanc. Deux ombres gardent le blanc
 * lisible sur la partie éclairée, très pâle (pleine lune) : une serrée qui détoure les chiffres, une
 * plus large qui les détache. text-shadow ne s'applique pas au texte SVG, d'où le filtre. */
.cpath-waves[data-night] ~ .cpath-ring circle + circle {
  stroke: #30d5c8;
}
.cpath-waves[data-night] ~ .cpath-ring text {
  fill: #fff;
  filter: drop-shadow(0 0 1px rgb(0 0 0 / 80%)) drop-shadow(0 1px 3px rgb(0 0 0 / 70%));
}
.cpath-waves__moon {
  --moon-lit: hsl(50 30% 84%);
  --moon-dark: hsl(230 14% 62%);
  position: absolute;
  z-index: 3;
  top: 19px;
  right: 39px;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--moon-lit);
  box-shadow: 0 0 24px hsl(50 30% 84% / 35%);
}
/* Cratères discrets (mers et taches), en dégradés : la texture du CodePen sans image tierce. */
.cpath-waves__moon::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  opacity: 0.3;
  background:
    radial-gradient(circle at 34% 34%, hsl(50 8% 42%) 0 8%, transparent 12%),
    radial-gradient(circle at 62% 27%, hsl(50 8% 42%) 0 5%, transparent 9%),
    radial-gradient(circle at 56% 60%, hsl(50 8% 42%) 0 12%, transparent 17%),
    radial-gradient(circle at 28% 66%, hsl(50 8% 42%) 0 5%, transparent 8%),
    radial-gradient(circle at 76% 52%, hsl(50 8% 42%) 0 3%, transparent 6%),
    radial-gradient(circle at 44% 82%, hsl(50 8% 42%) 0 4%, transparent 7%);
}
.cpath-ring text {
  font: 700 13px "Inter", "Noto Sans", sans-serif;
  fill: #4f9e6a;
}
/* Popup Progression : les deux onglets (courbe, Comment ça marche) à hauteur stable. */
/* Corps des onglets de la popup Progression : garde sa hauteur de contenu dans .cpath-white
 * (colonne flex qui défile), sinon il se tasse à min-height et déborde sous le CTA et l'encart. */
.cpath-tabc--intro {
  min-height: 150px;
  flex-shrink: 0;
}
/* Anneau d'un pourcentage sans texte (nœud de départ) : derrière la pastille. */
.cpath-ring--node {
  position: absolute;
  inset: 0;
  display: block;
  pointer-events: none;
}
.cpath-ring--node svg {
  display: block;
  width: 100%;
  height: 100%;
}
/* Courbe des mots maîtrisés (intro-tabs.js) : aplat dégradé, tracé vert, le dernier point et
   son chiffre ; dates de début et du jour dessous. */
.cpath-curve {
  padding: 18px 44px 4px 8px;
}
/* Loader de la courbe (mission/words-curve en cours) : même hauteur que la courbe, pour que le
   corps de l'onglet ne saute pas à la réponse. */
.cpath-curve--wait {
  display: grid;
  place-items: center;
  height: 160px;
  padding: 0;
}
.cpath-curve--wait::before {
  content: "";
  box-sizing: border-box;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 4px solid #d6ebdf;
  border-top-color: #4f9e6a;
  animation: cpath-curve-wait 0.9s linear infinite;
}
@keyframes cpath-curve-wait {
  to {
    transform: rotate(360deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .cpath-curve--wait::before {
    animation-duration: 2.4s;
  }
}
.cpath-curve__plot {
  position: relative;
  height: 118px;
}
.cpath-curve__plot svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.cpath-curve__area {
  fill: url(#cpath-curve-fill);
}
.cpath-curve__line {
  fill: none;
  stroke: #4f9e6a;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.cpath-curve__pt {
  position: absolute;
  left: 100%;
  transform: translate(-50%, -50%);
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #4f9e6a;
  border: 3px solid #fff;
  box-shadow: 0 2px 8px rgb(0 0 0 / 18%);
}
.cpath-curve__pt strong,
.cpath-curve__pt em {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-style: normal;
  line-height: 1.1;
}
.cpath-curve__pt strong {
  bottom: 100%;
  margin-bottom: 8px;
  font-size: 20px;
  font-weight: 800;
  color: #1f7a4d;
}
.cpath-curve__pt em {
  top: 100%;
  margin-top: 8px;
  font-size: 11px;
  font-weight: 600;
  color: #6b7280;
}
.cpath-curve__x {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  font-size: 11px;
  color: #9ca3af;
}
.cpath-curve__empty {
  box-sizing: border-box; /* .cpath-empty est en content-box : débordait de 24 px sur mobile */
  padding: 28px 12px;
  text-align: center;
  border-radius: 12px;
  background: #f3f8f4;
}
/* « Comment ça marche » : quatre gestes numérotés, légende des pastilles, lien méthode. */
.cpath-how {
  font-size: 14px;
  line-height: 1.45;
  color: #374151;
}
.cpath-how__steps {
  list-style: none;
  margin: 2px 0 12px;
  padding: 0;
  display: grid;
  gap: 8px;
}
.cpath-how__steps li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.cpath-how__n {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #4f9e6a;
  color: #fff;
  font-size: 13px;
  font-weight: 800;
}
/* Sous les 4 gestes : Ajuster et la méthode, côte à côte s'ils tiennent (libellés longs selon la
 * langue : retour à la ligne dans le bouton, puis l'un sous l'autre). */
.cpath-how__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px dashed #e5e7eb;
}
/* Deux classes : .cpath-ghost, plus loin dans le fichier, l'emporterait ; le lien garde sa couleur
 * et reste sans soulignement au survol (styles a:hover du site). */
.cpath-how__actions .cpath-how__btn {
  flex: 1 1 130px;
  justify-content: center;
  box-sizing: border-box;
  min-width: 0;
  min-height: 40px;
  padding: 8px 12px;
  color: #374151;
  font-size: 13px;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
}
/* Onglet Légendes : une ligne par icône du player, liste qui défile si la popup manque de place. */
.cpath-legend {
  list-style: none;
  margin: 0;
  padding: 0 2px 0 0;
  display: grid;
  gap: 8px;
  max-height: 230px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #4f9e6a transparent;
  font-size: 13px;
  line-height: 1.3;
  color: #374151;
}
.cpath-legend li {
  display: flex;
  align-items: center;
  gap: 10px;
}
.cpath-legend__dot {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  flex-shrink: 0;
}
.cpath-legend__dot svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
}
/* Cadenas : dessin au trait. */
.cpath-legend__dot.is-locked svg {
  fill: none;
}
.cpath-legend__dot.is-soft {
  background: #e7f3f5;
  color: #1d8a86;
}
.cpath-legend__dot.is-red {
  background: #fff1ee;
  color: #d13b2a;
}
.cpath-legend__dot.is-green {
  background: #eaf6f3;
  color: #0b6655;
}
.cpath-legend__dot.is-done {
  background: linear-gradient(135deg, hsl(42, 100%, 65%), hsl(25, 100%, 55%));
}
.cpath-legend__dot.is-plan {
  background: linear-gradient(135deg, hsl(330, 85%, 65%), hsl(330, 90%, 80%));
}
.cpath-legend__dot.is-locked {
  background: #4b5563;
}
.cpath-viz__over {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 10px 14px 12px;
  background: linear-gradient(rgb(0 0 0 / 0%), rgb(0 0 0 / 55%));
  color: #fff;
}
.cpath-viz__row {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 6px;
}
.cpath-viz__bar {
  height: 8px;
  border-radius: 999px;
  background: rgb(255 255 255 / 35%);
  overflow: hidden;
}
.cpath-viz__bar i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #f25aa6, #ffc94d);
}
.cpath-cta {
  margin-top: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
/* Leçon sans mission à faire, il en reste ailleurs dans le plan du jour (views/lesson-cta.js) :
   titre de la prochaine mission, puis « Mission suivante » et le bouton de la leçon, de même
   gabarit. */
.cpath-cta__next {
  margin: 12px 0 0;
  font-size: 14px;
  line-height: 18px;
  color: #6b7280;
  text-align: center;
}
/* Plan fini, une mission en plus est proposée : « Plan du jour terminé » sur sa ligne, au-dessus
   de la proposition. */
.cpath-cta__next .cpath-done {
  display: flex;
  justify-content: center;
  margin-bottom: 4px;
}
.cpath-cta--next {
  margin-top: 8px;
}
/* Plan du jour en cours de relecture (croix du bilan) : boutons visibles mais inactifs. */
.cpath-cta.is-wait {
  opacity: 0.45;
  pointer-events: none;
}
.cpath-cta--next .cpath-ghost {
  padding: 13px 15px;
  border-radius: 12px;
  font-size: 15px;
  text-decoration: none;
}
/* Badges sous le titre (Mission du jour, ~N min). */
.cpath-badges--hero {
  justify-content: center;
  margin: 0 0 12px;
}
/* Sans pastille (ni mission, ni verrou) : pas de blanc sous la durée estimée. */
.cpath-badges--hero:empty {
  display: none;
}
.cpath-hbadge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 12px;
  border-radius: 999px;
  border: 1px solid #d5ddd8;
  font-size: 12px;
  color: #374151;
  background: #fff;
}
.cpath-hbadge svg {
  width: 14px;
  height: 14px;
}
/* Onglets (Loe.me .tabBar / .tab) */
.cpath-tabs {
  display: flex;
  border-bottom: 1px solid #e5e7eb;
  margin-top: 12px;
  flex-shrink: 0;
}
.cpath-tab {
  flex: 1;
  padding: 10px 12px;
  border: none;
  background: transparent;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  color: #9ca3af;
  cursor: pointer;
  position: relative;
}
.cpath-tab.is-on {
  color: #374151;
  font-weight: 600;
}
/* Onglet avec icône (popup Progression) : icône au-dessus du libellé, trois onglets tiennent sur
 * mobile. */
.cpath-tab--ic {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 8px 4px 10px;
  font-size: 12px;
  line-height: 1.2;
}
.cpath-tab__ic {
  width: 18px;
  height: 18px;
}
.cpath-tab.is-on::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 12px;
  right: 12px;
  height: 2px;
  background: #4f9e6a;
  border-radius: 2px 2px 0 0;
}
.cpath-tabc {
  padding: 10px 4px;
}
/* Missions du jour : seul endroit qui défile. */
.cpath-tabc--scroll {
  max-height: 190px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #4f9e6a transparent;
}
.cpath-missions {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cpath-mission {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #374151;
}
.cpath-mission__num {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #e5e7eb;
  color: #6b7280;
  font-size: 11px;
  font-weight: 700;
  display: grid;
  place-items: center;
}
/* Mission à faire : anneau vert et point central, comme la liste du héros. Un disque
   plein se lirait comme « déjà fait ». */
.cpath-mission.is-next .cpath-mission__num {
  box-sizing: border-box;
  background: #fff;
  border: 2px solid #4f9e6a;
}
.cpath-mission.is-next .cpath-mission__num::after {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #4f9e6a;
}
.cpath-mission.is-done .cpath-mission__num {
  background: linear-gradient(135deg, var(--cp-gold), var(--cp-orange));
  color: #fff;
}
.cpath-mission__txt {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cpath-mission.is-next .cpath-mission__txt {
  font-weight: 600;
  color: #1f2937;
}
.cpath-mission.is-done .cpath-mission__txt {
  color: #9ca3af;
  text-decoration: line-through;
}
.cpath-mission__side {
  font-size: 12px;
  color: #6b7280;
  white-space: nowrap;
}
.cpath-empty {
  margin: 8px 0;
  font-size: 14px;
  color: #6b7280;
  text-align: inherit;
  line-height: 18px;
}
.cpath-planned > p {
  margin: 0 0 8px;
}
.cpath-planned > p:first-child {
  color: var(--cp-ink);
  font-weight: 600;
}
.cpath-planned__note {
  font-size: 13px;
}
.cpath-planned__link {
  font-size: 13px;
  font-weight: 600;
  color: var(--cp-orange);
  text-decoration: underline;
}
/* Autres menus */
.cpath-acts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
/* Nombre impair de boutons : le dernier prend toute la ligne. */
.cpath-act:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}
.cpath-act {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  background: #fff;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
}
.cpath-act__ic {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: #f3eef8;
  color: #81479e;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.cpath-act__txt {
  min-width: 0;
}
.cpath-act__txt strong {
  display: block;
  font-size: 13.5px;
  color: #1f2937;
}
.cpath-act__txt span {
  font-size: 12px;
  color: #6b7280;
}
.cpath-act__go {
  margin-left: auto;
  color: #9ca3af;
  font-size: 16px;
}
.cpath-done {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: #2f7a4f;
}
.cpath-ghost {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid #e3e7ee;
  background: #f5f7fb;
  color: #374151;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
/* Pied de la popup : une ligne de boutons (Écoute consciente · Dialogues). */
.cpath-pfoot {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 20px 16px;
  flex-wrap: wrap;
}
.cpath-pfoot__group {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.cpath-pfoot__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid #acabab;
  background: #fff;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: #1f2937;
  cursor: pointer;
  white-space: nowrap;
}
/* Chiffres clés */
.cpath-grid2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 8px;
}
.cpath-tile {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: #f8fafc;
  border: 1px solid #eef1f5;
}
.cpath-tile--wide {
  grid-column: 1 / -1;
  background: #f3faf5;
  border-color: #dcefe2;
}
.cpath-tico {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: #e8f1ff;
  color: #2563eb;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  font-size: 16px;
}
.cpath-tval {
  font-size: 16px;
  font-weight: 700;
  color: #1f2937;
  line-height: 1.2;
}
.cpath-tlab {
  font-size: 11px;
  color: #6b7280;
  margin-top: 2px;
}
@media (max-width: 640px) {
  .cpath-grid2 {
    grid-template-columns: 1fr;
  }
}
.cpath-btn {
  padding: 14px 15px;
  border: none;
  border-radius: 12px;
  background: var(--cp-cta);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 3px 12px rgb(106 92 255 / 28%);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
/* Survol : pas de soulignement (lien du site), une ombre lumineuse balaie le bouton de gauche à
 * droite. */
.cpath-btn:hover,
.cpath-btn:focus-visible {
  color: #fff;
  text-decoration: none;
}
.cpath-btn::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 60%;
  background: linear-gradient(100deg, transparent, rgb(255 255 255 / 32%), transparent);
  transform: translateX(-120%) skewX(-18deg);
  pointer-events: none;
  z-index: -1;
}
.cpath-btn:hover::after,
.cpath-btn:focus-visible::after {
  animation: cpath-btn-sweep 0.9s ease-out;
}
@keyframes cpath-btn-sweep {
  to {
    transform: translateX(260%) skewX(-18deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .cpath-btn:hover::after,
  .cpath-btn:focus-visible::after {
    animation: none;
  }
}

@keyframes cpath-ring {
  0% {
    transform: scale(1);
    opacity: 0.8;
  }
  100% {
    transform: scale(2);
    opacity: 0;
  }
}
/* Leçon de la mission à faire (ui/app.js missionLessonKey) : c'est elle qui pulse, quel que soit
   son état (Renforcer une leçon terminée, par exemple), et c'est elle qui est en rose. */
.cpath-node.is-mission {
  animation: cpath-pulse 2s ease-in-out infinite;
}
.cpath-node.is-mission::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid hsl(330 85% 65% / 70%);
  pointer-events: none;
  animation: cpath-ring 2s ease-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .cpath-node.is-active,
  .cpath-node.is-active::before,
  .cpath-node.is-mission,
  .cpath-node.is-mission::before {
    animation: none;
  }
}
@keyframes cpath-pulse {
  0%,
  100% {
    transform: scale(1);
    filter: brightness(1);
  }
  50% {
    transform: scale(1.05);
    filter: brightness(1.15);
  }
}

@media (max-width: 640px) {
  #course-path {
    margin: 0 -8px;
    border-radius: 12px;
  }
  .cpath-card {
    border-radius: 28px;
  }
  .cpath-label {
    max-width: 180px;
  }
}

/* ---------- Écran de chargement (#cpath-load, SSR player.html.php) ----------
   Avion en papier + nuages du héros (course-hero.css, .lch-sky et ses animations) sans le ciel
   bleu : fond = dégradé de la page. Couvre tout, header compris, tant que le chemin et la
   progression ne sont pas chargés (course-path.js : paliers en %, puis is-done = fondu et
   retrait). Pas sur la vue de prélancement (cpath-home) ; réapparaît après « Commencer » si le
   chargement n'est pas fini. */
.cpath-load {
  position: fixed;
  inset: 0;
  z-index: 10002;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0;
  overflow: hidden;
  background: #fff linear-gradient(#e7f3f5, #e4f4ef, #e8f3e6, #f2f0dd, #ffebdb, #fff) no-repeat;
  background-size: 100% 100vh;
  font-family: "Nunito", "Noto Sans", -apple-system, "Segoe UI", Roboto, sans-serif;
  transition: opacity 0.35s ease;
}
html.cpath-home .cpath-load {
  display: none;
}
.cpath-load.is-done {
  opacity: 0;
  pointer-events: none;
}
/* Paysage de bord à bord : l'avion et les nuages traversent toute la largeur de la fenêtre.
   L'avion traverse à la vitesse du héros (11 s, la partie traversée de lch-plane-fly), sort à
   droite et revient aussitôt par la gauche tant que le chargement dure (pas la pause hors
   champ du héros). */
.cpath-load .lch-sky__plane-wrap {
  animation: cpath-plane-fly 11s linear infinite;
}
@keyframes cpath-plane-fly {
  0% { transform: translateX(-5%); }
  100% { transform: translateX(115%); }
}
@media (prefers-reduced-motion: reduce) {
  .cpath-load .lch-sky__plane-wrap {
    animation: none;
  }
}
.cpath-load .lch-sky {
  width: 100%;
  height: 240px;
  border-radius: 0;
  background: none;
}
.cpath-load__txt {
  margin: 4px 0 0;
  padding: 0 16px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  color: #3b4645;
  text-align: center;
}
.cpath-load__pct {
  display: inline-block;
  min-width: 3.2em;
  text-align: left;
  font-variant-numeric: tabular-nums;
}

/* ---------- Mobile ----------
   ≤ 899 px (héros en mode mobile) : pied = barre de 4 icônes sans texte (ui/app.js Footer,
   disposition mobileBar) — Mon compte (#user_tab, connecté seulement), Réglages (#reg_tab), « + »
   (feuille basse .cpath-more avec les autres accès du header) et Objectifs de la semaine (rond
   rose surélevé, à droite ; le bouton rond flottant du bureau n'est pas rendu). Libellés en
   aria-label / title (les .infos du header restent masqués) ; dans la feuille, chaque onglet
   devient une ligne icône + libellé (.infos visible).
   ≤ 640 px : popups en feuille basse pleine largeur (coins hauts arrondis), marges réduites,
   image plus basse, pied en trois colonnes icône + libellé.
   ≤ 480 px (narrow, ui/app.js : zigzag × 0,4) : axe du chemin à 27 % et étiquettes plus courtes
   pour qu'elles restent dans l'écran. */
@media (max-width: 899px) {
  .cpath-root {
    --cp-bar-h: 52px;
    padding-bottom: calc(var(--cp-bar-h) + 16px + env(safe-area-inset-bottom, 0px));
  }
  .cpath-foot.is-bar {
    display: flex;
    align-items: stretch;
    height: calc(var(--cp-bar-h) + env(safe-area-inset-bottom, 0px));
    padding: 0 0 env(safe-area-inset-bottom, 0px);
    overflow: visible; /* le rond Objectifs dépasse en haut */
  }
  .cpath-bar__cell {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 2px;
    margin: 0;
    border: 0;
    background: none;
    color: #29a9a4;
    font: inherit;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .cpath-bar__cell:focus-visible {
    background: rgb(255 255 255 / 45%);
  }
  @media (hover: hover) {
    .cpath-bar__cell:hover {
      background: rgb(255 255 255 / 45%);
    }
  }
  /* Onglets du header dans leur cellule (#user_tab, #reg_tab) : mêmes remises à zéro que sur le
     bureau (.cpath-foot .logomenu .tablinks2), hors .logomenu ici. */
  .cpath-foot.is-bar .tablinks2 {
    position: static;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    min-width: 0;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }
  .cpath-foot.is-bar .tablinks2 .icon {
    position: static !important;
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    margin: 0 !important;
    padding: 0 !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    fill: #29a9a4;
  }
  .cpath-foot.is-bar .tablinks2 > .infos {
    display: none !important;
  }
  .cpath-bar__plus {
    width: 26px;
    height: 26px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
  }
  .cpath-bar__more[aria-expanded="true"] {
    color: #1d8a86;
  }
  /* Objectifs de la semaine : rond rose (couleur du bouton rond du héros, .lch-week-fab) dans la
     barre, centré comme les autres icônes (30/10 : plus de débordement au-dessus). */
  .cpath-bar__week:hover,
  .cpath-bar__week:focus-visible {
    background: none;
  }
  .cpath-bar__ring {
    position: relative;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #f368af;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgb(243 104 175 / 35%);
    transition: background 0.2s ease, transform 0.2s ease;
  }
  .cpath-bar__week:hover .cpath-bar__ring,
  .cpath-bar__week:focus-visible .cpath-bar__ring {
    background: #e04a98;
    transform: translateY(-1px);
  }
  .cpath-bar__ring .icon {
    width: 24px;
    height: 24px;
    fill: #fff;
  }

  /* Feuille « + » (ui/app.js MoreSheet) : voile + panneau bas pleine largeur ; au-dessus de la
     barre (30) et du header du site (10000), sous l'écran de chargement (10002) et les modales
     du header (100050). */
  .cpath-more {
    position: fixed;
    inset: 0;
    z-index: 10001;
    display: none;
    font-family: "Nunito", "Noto Sans", -apple-system, "Segoe UI", Roboto, sans-serif;
  }
  .cpath-more.is-open {
    display: block;
  }
  .cpath-more__veil {
    position: absolute;
    inset: 0;
    background: rgb(21 35 42 / 38%);
  }
  .cpath-more__panel {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    max-height: calc(100dvh - 40px);
    overflow-y: auto;
    padding: 10px 0 calc(14px + env(safe-area-inset-bottom, 0px));
    border-radius: 28px 28px 0 0;
    background: #fff;
    box-shadow: 0 -10px 40px rgb(21 35 42 / 22%);
    animation: cpath-sheet-in 0.25s ease-out;
  }
  .cpath-more__grip {
    width: 40px;
    height: 4px;
    margin: 0 auto 8px;
    border-radius: 99px;
    background: #d8e0e2;
  }
  .cpath-more__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 18px 8px;
  }
  .cpath-more__title {
    margin: 0;
    font-size: 17px;
    font-weight: 800;
    color: #15232a;
  }
  .cpath-more__close {
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 50%;
    background: #f1f5f6;
    color: #3b4645;
    font-size: 16px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }
  /* Lignes : onglets du header (icône + libellé .infos, visible ici). */
  .cpath-more__list .tablinks2 {
    position: static;
    display: flex !important;
    align-items: center;
    gap: 14px;
    width: auto;
    min-height: 52px;
    height: auto;
    padding: 0 18px !important;
    margin: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: #15232a;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
  }
  .cpath-more__list .tablinks2 + .tablinks2 {
    border-top: 1px solid #eef2f3 !important;
  }
  .cpath-more__list .tablinks2.dnonei {
    display: none !important; /* Mes cours (#user_p) en visiteur */
  }
  .cpath-more__list .tablinks2 .icon {
    position: static !important;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    fill: #29a9a4;
  }
  .cpath-more__list .tablinks2 > .infos {
    position: static !important;
    display: block !important;
    min-height: 0;
    margin: 0;
    padding: 0;
    transform: none;
    opacity: 1 !important;
    visibility: visible !important;
    background: none;
    box-shadow: none;
    border-radius: 0;
    color: inherit;
    font: inherit;
    text-align: left;
    white-space: normal;
    pointer-events: none;
  }
}
@media (max-width: 360px) {
  .cpath-foot.is-bar .tablinks2 .icon,
  .cpath-bar__plus {
    width: 22px;
    height: 22px;
  }
  .cpath-bar__ring {
    width: 40px;
    height: 40px;
  }
  .cpath-bar__ring .icon {
    width: 22px;
    height: 22px;
  }
}
@media (max-width: 640px) {
  /* Popups : feuille basse, pleine largeur, qui monte du bas. */
  .cpath-overlay {
    align-items: flex-end;
    padding: 0;
  }
  .cpath-card {
    width: 100%;
    max-height: calc(100dvh - 24px);
    border-radius: 28px 28px 0 0;
    border-bottom: none;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    animation: cpath-sheet-in 0.25s ease-out;
  }
  .cpath-card__body {
    padding: 0 10px 10px;
  }
  .cpath-white {
    margin-top: 10px;
    padding: 14px 12px 12px;
    border-radius: 22px;
  }
  .cpath-white::-webkit-scrollbar-track {
    margin-block: 22px;
  }
  .cpath-close {
    top: 10px;
    right: 10px;
  }
  .cpath-title {
    font-size: 19px;
    margin: 0 26px 2px;
  }
  .cpath-viz {
    height: 110px;
  }
  /* Deux colonnes étroites : la place du chevron va au libellé. */
  .cpath-act {
    gap: 8px;
    padding: 8px;
  }
  .cpath-act__go {
    display: none;
  }
  .cpath-tabc--scroll {
    max-height: 160px;
  }
  .cpath-pfoot {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    padding: 8px 6px 10px;
  }
  /* Trois cases égales : le groupe de gauche s'efface au profit de ses deux boutons. */
  .cpath-pfoot--cercle {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .cpath-pfoot__group {
    display: contents;
  }
  .cpath-pfoot__btn {
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    padding: 8px 4px;
    border-radius: 14px;
    font-size: 11px;
    line-height: 1.15;
    white-space: normal;
    text-align: center;
  }
  .cpath-pfoot__btn svg {
    width: 20px;
    height: 20px;
  }
  .cpath-btn {
    padding: 12px 14px;
    font-size: 14px;
  }
}
@keyframes cpath-sheet-in {
  from {
    transform: translateY(24px);
    opacity: 0.6;
  }
}
@media (prefers-reduced-motion: reduce) {
  .cpath-card {
    animation: none;
  }
}
/* Étiquette-carte en content-box : largeur totale = max-width + 22 px de padding + bordure.
   Sur 375 px, axe à 27 % et zigzag ± 40 px : bord droit au plus à 101 + 40 + 28 + 12 + 188 = 369. */
@media (max-width: 480px) {
  .cpath-step {
    left: calc(27% - 28px);
  }
  html[dir="rtl"] .cpath-step {
    left: auto;
    right: calc(27% - 28px);
  }
  .cpath-label--card {
    min-width: 150px;
    max-width: 164px;
  }
  .cpath-label__img {
    width: 62px;
    height: 46px;
  }
}
@media (max-width: 360px) {
  .cpath-label--card {
    min-width: 136px;
    max-width: 150px;
  }
  .cpath-label__img {
    width: 54px;
    height: 42px;
  }
}

/* ---------- Audit des scénarios (30/10) : popups ----------
   Leçon verrouillée (LockedBody) : explication + abonnement ; Point de départ visiteur :
   « Sauvegarde ta progression ». */
.cpath-locked {
  margin: 12px 0 0;
}
.cpath-locked__title {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 800;
  color: #15232a;
}
.cpath-locked__txt {
  margin: 0;
  font-size: 14px;
  line-height: 1.4;
  color: #3b4645;
}
.cpath-locked__pitch {
  flex: 1 0 100%;
  margin: 4px 0 0;
  font-size: 12.5px;
  line-height: 1.35;
  color: #5b6b6a;
  text-align: center;
}
.cpath-signup {
  margin: 14px 0 0;
  padding: 12px 14px;
  border-radius: 16px;
  background: #f1f7f7;
  text-align: center;
}
.cpath-signup strong {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  color: #15232a;
}
.cpath-signup__btns {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 14px;
}
.cpath-link {
  border: 0;
  background: none;
  padding: 6px 4px;
  font: inherit;
  font-weight: 700;
  color: #1d8a86;
  text-decoration: underline;
  cursor: pointer;
}

/* ------------------------------------------------ popup de bienvenue (ui/views/welcome.js) */
/* Après connexion, comme l'écran de retour de Duolingo : la série en héros (flamme, chiffre, frise
 * de la semaine), une ligne pour le cours (petit anneau), deux boutons empilés. Aplats sans
 * dégradé ; orange = série, gris quand elle est à zéro. */
.cpath-card.cpath-card--welcome {
  width: 420px;
}
.cpath-welcome {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  --cpw-streak: #ff9600;
}
.cpath-welcome.is-zero {
  --cpw-streak: #c4cad2;
}
.cpath-welcome__sub {
  font-size: 13px;
  color: #6b7280;
  margin: 2px 0 0;
}
.cpath-welcome .cpath-welcome__flame {
  width: 84px;
  height: 84px;
  margin-top: 10px;
  color: var(--cpw-streak);
  stroke: none;
}
.cpath-welcome__num {
  font-size: 17px;
  font-weight: 800;
  line-height: 1.15;
  color: #6b7280;
}
.cpath-welcome__num b {
  font-size: 46px;
  font-weight: 900;
  line-height: 1;
  color: var(--cpw-streak);
}
.cpath-welcome__streak {
  font-size: 15px;
  font-weight: 800;
  color: #6b7280;
  margin-top: 2px;
}
.cpath-welcome__days {
  display: flex;
  gap: 7px;
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
}
.cpath-welcome__day {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #f1f3f5;
  color: #868e96;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
}
.cpath-welcome__day.is-done {
  background: #ffe8c7;
  color: #a85f00;
}
.cpath-welcome__day.is-streak {
  background: #ff9600;
  color: #fff;
}
.cpath-welcome__day.is-today {
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px #ff9600;
}
.cpath-welcome__course {
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid #eef0f4;
  font-size: 15px;
  font-weight: 800;
  color: #374151;
}
.cpath-welcome__ring {
  display: block;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
}
.cpath-welcome__ring svg {
  display: block;
}
.cpath-cta--col {
  align-self: stretch;
  flex-direction: column;
  gap: 10px;
  margin-top: 16px;
}
.cpath-cta--col .cpath-btn,
.cpath-cta--col .cpath-ghost {
  width: 100%;
  justify-content: center;
}
.cpath-cta--col .cpath-ghost .msn-lu {
  width: 18px;
  height: 18px;
}
/* Écran bas : la flamme rétrécit pour que les boutons restent visibles sans défiler. */
@media (max-height: 680px) {
  .cpath-welcome .cpath-welcome__flame {
    width: 56px;
    height: 56px;
  }
  .cpath-welcome__num b {
    font-size: 34px;
  }
}

/* Oiseaux pixel (popup Progression, pastille de départ, mission) : CSS/course-path-birds.css. */

/* Très petit écran : icône réduite, pour que « Présentation » tienne sans être coupé. En fin de
 * fichier : doit passer après les règles de base de .cpath-act. */
@media (max-width: 340px) {
  .cpath-act {
    gap: 6px;
    padding: 8px 6px;
  }
  .cpath-act__ic {
    width: 28px;
    height: 28px;
  }
  .cpath-act__txt strong {
    font-size: 12.5px;
  }
}