/* Fiche de leçon à côté du chemin (décision du 09/11/2026).
 *
 * Le régime est posé sur .cpath-root par javascripts/course-path/ui/side-layout.js :
 *   data-side="A" : fiche + arbre centré ;
 *   data-side="B" : fiche + arbre repoussé de --cp-side-shift ;
 *   data-side="C" : pas la place (en largeur, ou en hauteur pour la leçon à faire) : affichage
 *                   d'avant (popup au bouton) ;
 *   rien          : sous 900 px, affichage d'avant.
 * Les mesures de la fiche (400 px, 50 px du bord, 50 px de l'arbre) sont aussi dans side-layout.js :
 * les changer aux deux endroits.
 *
 * Tout est en propriétés logiques : en RTL la fiche passe à droite et l'arbre part à gauche sans
 * règle à part. */

/* ——— Fiche (javascripts/course-path/ui/views/lesson-side.js) ——— */
.cpath-side {
  position: fixed;
  inset-inline-start: 50px;
  /* Sous la barre du haut, dont la hauteur est mesurée (--cp-bar-h, ui/bar-height.js). La même
     marge est gardée au-dessus de la barre du bas (ui/side-fit.js la lit ici). */
  top: calc(var(--cp-bar-h) + 24px);
  width: 400px;
  /* Au-dessus de l'arbre, sous les deux barres (30 et 10000), les popups (10001) et la fenêtre
     du player (9600). */
  z-index: 20;
}
/* Fiche qui ne tient pas en hauteur, même resserrée (paliers plus bas) : pas affichée, mais
   toujours mesurée, pour revenir dès que la fenêtre le permet. */
.cpath-side[data-out] {
  visibility: hidden;
  pointer-events: none;
}
/* Le focus y est porté quand on demande la fiche d'une leçon (icône « menu de la leçon ») : pas de
   cadre à la souris ; au clavier, un liseré sur la carte, de la couleur du focus de cette icône. */
.cpath-side:focus {
  outline: none;
}
.cpath-side:focus-visible .cpath-card--side {
  box-shadow:
    0 0 0 2px #f25aa6,
    0 4px 14px rgb(0 0 0 / 22%);
}
/* Le cadre de la popup, en plus serré. Hauteur au contenu : la carte s'arrête sous ses boutons
   du bas, sans vide (demande du 09/11), et rien n'y défile jamais (même jour) : les deux zones
   défilantes de la popup sont ouvertes ici, la hauteur se règle par les paliers. */
.cpath-card--side {
  --cp-card-pad: 14px;
  --cp-card-radius: 32px;
  --cp-white-radius: 24px;
  width: 100%;
  max-height: none;
  box-shadow: 0 4px 14px rgb(0 0 0 / 22%);
}
.cpath-card--side .cpath-card__body {
  padding-bottom: 0;
}
.cpath-card--side .cpath-white {
  padding: 14px 12px 12px;
  overflow: visible;
}
.cpath-card--side .cpath-tabc--scroll {
  max-height: none;
  overflow: visible;
}
/* Pas de croix : le titre prend toute la largeur. */
.cpath-card--side .cpath-title {
  font-size: 19px;
  margin: 0 0 2px;
}
.cpath-card--side .cpath-viz {
  height: 110px;
  flex-shrink: 0;
}
.cpath-card--side .cpath-act {
  gap: 8px;
  padding: 8px;
}
.cpath-card--side .cpath-act__go {
  display: none;
}
.cpath-card--side .cpath-pfoot {
  justify-content: center;
  gap: 8px;
  padding: 10px 12px 12px;
}
.cpath-card--side .cpath-pfoot__group {
  gap: 8px;
}
.cpath-card--side .cpath-pfoot__btn {
  padding: 8px 12px;
  font-size: 12px;
}

/* ——— Paliers de hauteur (data-fit, posé par ui/side-fit.js) ———
   Le premier qui tient entre les deux barres est gardé ; aucun : la fiche n'est pas affichée. */

/* 1 — image du thème moins haute ; l'étiquette de mots et le voile se resserrent pour ne pas se
   toucher. */
.cpath-side[data-fit="1"] .cpath-viz {
  height: 72px;
}
.cpath-side[data-fit="1"] .cpath-viz__words {
  top: 6px;
  inset-inline-start: 8px;
  padding: 3px 10px;
  font-size: 12px;
}
.cpath-side[data-fit="1"] .cpath-viz__over {
  padding: 6px 12px 8px;
}
.cpath-side[data-fit="1"] .cpath-viz__row {
  margin-bottom: 4px;
}
.cpath-side[data-fit="1"] .cpath-viz__bar {
  height: 6px;
}

/* 2 — image en bandeau : « Leçon n », le pourcentage et la barre, sur l'image assombrie d'un
   bout à l'autre. Le nombre de mots reste dit sous le titre. */
.cpath-side:is([data-fit="2"], [data-fit="3"]) .cpath-viz {
  height: 44px;
}
.cpath-side:is([data-fit="2"], [data-fit="3"]) .cpath-viz__words {
  display: none;
}
.cpath-side:is([data-fit="2"], [data-fit="3"]) .cpath-viz__over {
  top: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 12px;
  background: rgb(0 0 0 / 45%);
}
.cpath-side:is([data-fit="2"], [data-fit="3"]) .cpath-viz__row {
  margin-bottom: 4px;
}
.cpath-side:is([data-fit="2"], [data-fit="3"]) .cpath-viz__bar {
  height: 6px;
}

/* 3 — tout serré : la fiche gagne aussi 12 px de marge en haut et en bas. */
.cpath-side:is([data-fit="3"], [data-fit="4"]) {
  top: calc(var(--cp-bar-h) + 12px);
}
.cpath-side:is([data-fit="3"], [data-fit="4"]) .cpath-card--side {
  --cp-card-pad: 10px;
}
.cpath-side:is([data-fit="3"], [data-fit="4"]) .cpath-white {
  padding: 10px 12px;
}
.cpath-side:is([data-fit="3"], [data-fit="4"]) .cpath-title {
  font-size: 17px;
}
/* Nombre de mots et durée sur une ligne quand ils y tiennent. */
.cpath-side:is([data-fit="3"], [data-fit="4"]) .cpath-est {
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 10px;
  margin: 0 0 6px;
}
.cpath-side:is([data-fit="3"], [data-fit="4"]) .cpath-badges--hero {
  margin: 0 0 8px;
}
.cpath-side:is([data-fit="3"], [data-fit="4"]) .cpath-badges--hero:empty {
  margin: 0;
}
.cpath-side:is([data-fit="3"], [data-fit="4"]) .cpath-hbadge {
  padding: 2px 10px;
}
.cpath-side:is([data-fit="3"], [data-fit="4"]) .cpath-tabs {
  margin-top: 8px;
}
.cpath-side:is([data-fit="3"], [data-fit="4"]) .cpath-tab {
  padding: 7px 10px;
}
.cpath-side:is([data-fit="3"], [data-fit="4"]) .cpath-tabc {
  padding: 6px 4px;
}
.cpath-side:is([data-fit="3"], [data-fit="4"]) .cpath-missions {
  gap: 5px;
}
.cpath-side:is([data-fit="3"], [data-fit="4"]) .cpath-mission__num {
  width: 18px;
  height: 18px;
}
.cpath-side:is([data-fit="3"], [data-fit="4"]) .cpath-empty {
  margin: 4px 0;
}
.cpath-side:is([data-fit="3"], [data-fit="4"]) .cpath-acts {
  gap: 6px;
}
.cpath-side:is([data-fit="3"], [data-fit="4"]) .cpath-act {
  padding: 5px 8px;
}
.cpath-side:is([data-fit="3"], [data-fit="4"]) .cpath-act__ic {
  width: 30px;
  height: 30px;
}
.cpath-side:is([data-fit="3"], [data-fit="4"]) .cpath-cta {
  margin-top: 8px;
  gap: 8px;
}
.cpath-side:is([data-fit="3"], [data-fit="4"]) .cpath-cta__next {
  margin: 8px 0 0;
}
.cpath-side:is([data-fit="3"], [data-fit="4"]) .cpath-btn {
  padding: 10px 14px;
  font-size: 14px;
}
.cpath-side:is([data-fit="3"], [data-fit="4"]) .cpath-ghost {
  padding: 8px 14px;
}
.cpath-side:is([data-fit="3"], [data-fit="4"]) .cpath-cta--next .cpath-ghost {
  padding: 10px 14px;
  font-size: 14px;
}
.cpath-side:is([data-fit="3"], [data-fit="4"]) .cpath-locked {
  margin: 8px 0 0;
}
.cpath-side:is([data-fit="3"], [data-fit="4"]) .cpath-locked__title {
  margin: 0 0 4px;
  font-size: 15px;
}
.cpath-side:is([data-fit="3"], [data-fit="4"]) .cpath-locked__txt {
  font-size: 13px;
  line-height: 1.3;
}
.cpath-side:is([data-fit="3"], [data-fit="4"]) .cpath-locked__pitch {
  margin: 0;
}
.cpath-side:is([data-fit="3"], [data-fit="4"]) .cpath-pfoot {
  gap: 6px;
  padding: 8px 10px 10px;
}
.cpath-side:is([data-fit="3"], [data-fit="4"]) .cpath-pfoot__group {
  gap: 6px;
}
.cpath-side:is([data-fit="3"], [data-fit="4"]) .cpath-pfoot__btn {
  padding: 6px 10px;
}

/* 4 — sans image : « Leçon n » se lit sur l'arbre, la progression aussi. */
.cpath-side[data-fit="4"] .cpath-viz {
  display: none;
}

/* ——— Régime B : l'arbre est repoussé ———
   .cpath-wrap reste un bloc centré sur son axe : une marge du double du décalage, du côté de la
   fiche, déplace cet axe du décalage voulu. Le trait du chemin se redessine seul (PathLine suit
   la taille du bloc). */
.cpath-root[data-side="B"] .cpath-wrap {
  margin-inline-start: calc(2 * var(--cp-side-shift, 0px));
}
/* Mentions légales en bas de page : pas sous la fiche. */
.cpath-root:is([data-side="A"], [data-side="B"]) .cpath-legal {
  margin-inline-start: 450px;
}