/* Onglet vert de la fenêtre du player (javascripts/course-hero/window-tab.js), page du chemin,
 * bureau : posé sur le bord supérieur de la fenêtre, à droite (à gauche en RTL), dans la teinte de
 * la barre des fiches (#mdetails, ecoach_n.css). Compteur de séance, icône « Menu de la leçon »,
 * croix. Discret : 36 px de haut. Affiché seulement quand l'écran est assez haut
 * (html.lch-tab-on, posée par sizeModal) ; sinon la croix ronde de la fenêtre reste.
 * Décision Christophe, 09/11/2026. */

html.cpath.lch-tab-on.lch-player-open:not(.lch-m) .lch-tab {
  /* Sur <body>, calé sur le rectangle de la fenêtre (--lch-dlg-*, sizeModal) : les fenêtres
     Dialogue et Ma liste de mots s'ouvrent par-dessus le player (9600), l'onglet reste au-dessus
     d'elles (sous le header du site et les popups du chemin). 1 px sur le filet de la carte. */
  position: fixed;
  z-index: 9800;
  top: calc(var(--lch-dlg-top, 66px) - 35px);
  /* Entre les deux arrondis de la carte, comme la barre des fiches sur le bord gauche. */
  right: calc(100vw - var(--lch-dlg-left, 110px) - var(--lch-dlg-w, 1220px) + var(--cp-card-radius, 40px));
  display: flex;
  align-items: center;
  /* Même valeur que TAB_H (window-tab.js) : la fenêtre rend cette hauteur. */
  height: 36px;
  padding-inline: 16px 6px;
  box-sizing: border-box;
  border-radius: 18px 18px 0 0;
  background-color: #2aa8a7;
  background-image: linear-gradient(90deg, #147e7d, #ffffff78);
  box-shadow: var(--lc-tab-menu-shadow, rgba(0, 0, 0, 0.16) 0 10px 36px 0, rgba(0, 0, 0, 0.06) 0 0 0 1px);
  /* L'ombre ne déborde pas sur la carte, sous l'onglet. */
  clip-path: inset(-40px -40px 0 -40px);
  color: #fff;
}
html[dir="rtl"].cpath.lch-tab-on.lch-player-open:not(.lch-m) .lch-tab {
  right: auto;
  left: calc(var(--lch-dlg-left, 110px) + var(--cp-card-radius, 40px));
  background-image: linear-gradient(270deg, #147e7d, #ffffff78);
}
/* L'onglet porte la croix et ferme la fenêtre du dessus : plus de croix ronde, ni sur le player
   ni sur le Dialogue ou Ma liste de mots ouverts par-dessus. Ces fenêtres ouvertes sans le player
   (depuis le chemin) n'ont pas d'onglet et gardent leur croix. */
html.cpath.lch-tab-on.lch-player-open:not(.lch-m) .lch-modal__x--player {
  display: none;
}
/* Écoute consciente (#immersion-overlay, z 50000) : l'infobulle de l'onglet et la popup de leçon
   passent devant l'image. */
html.cpath.lch-player-open:not(.lch-m) body.immersion-active .cpath-foot-tip {
  z-index: 60001;
}
html.cpath.lch-player-open:not(.lch-m) body.immersion-active .cpath-overlay {
  z-index: 60000;
}

/* Popup de leçon ouverte par-dessus la fenêtre (icône de l'onglet) : #home_content et #nprog ont
   un z-index, donc une couche à eux, sous la fenêtre (9600), et la popup du chemin y restait
   enfermée, invisible. Sans leur z-index, elle passe devant (10001) ; le reste du chemin ne bouge
   pas, ses éléments n'ont pas de z-index assez haut pour dépasser la fenêtre. */
html.cpath.lch-modal-open:not(.lch-m):has(.cpath-overlay) :is(#home_content, #nprog) {
  z-index: auto;
}

/* ---------- Boutons (menu de la leçon, croix) : icônes blanches, grossies au survol comme celles
   de la barre des fiches, dans la hauteur de l'onglet. ---------- */
.lch-tab__btn {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  background: none;
  color: #fff;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.lch-tab__btn svg {
  width: 20px;
  height: 20px;
  transition: transform 1s;
}
.lch-tab__btn--close svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
}
.lch-tab__btn:hover svg {
  transform: scale(1.3);
}
.lch-tab__btn:focus-visible {
  outline: 2px solid #fff;
  outline-offset: -5px;
  border-radius: 10px;
}
@media (prefers-reduced-motion: reduce) {
  .lch-tab__btn svg {
    transition: none;
  }
}

/* ---------- Compteur de séance (#counter, déplacé ici tant que la fenêtre est ouverte) :
   tuiles de 20 px de haut, comme les icônes de l'onglet, sans unité au-dessus (« min », « h » :
   le « : » suffit). ---------- */
.lch-tab__clock {
  display: flex;
  align-items: center;
  padding-inline-end: 8px;
}
.lch-tab #counter {
  color: #fff;
  --cf-w: 15px;
  --cf-h: 20px;
  --cf-fs: 13px;
  --cf-r: 4px;
}
.lch-tab #counter .counter-face {
  gap: 7px;
  padding: 0;
  color: #fff;
}
/* Premium : la pastille (10 px d'arrondi, overflow: hidden, ecoach_n.css) n'a plus de marge ici et
   rognait les coins de la tuile de gauche. */
.lch-tab #counter.counter--paid .counter-face {
  border-radius: 0;
  overflow: visible;
}
.lch-tab #counter .cf-unit {
  display: none;
}
/* Visiteur : #counter reste dnone hors du chemin, l'onglet l'affiche (la barre du chemin aussi :
   counter-goal-ring.css) ; rien au clic. */
.lch-tab #counter.dnone.counter--guest {
  display: flex !important;
}
.lch-tab #counter.counter--guest .counter-face {
  cursor: default;
}
.lch-tab #counter .cf-sep {
  color: #fff;
}
/* Sous 5 min en gratuit et à 00 : fond ambre gardé, resserré pour tenir dans l'onglet. */
.lch-tab #counter.counter--low .counter-face {
  padding: 3px 6px;
}
.lch-tab #counter .counter-premium {
  height: 26px;
}
/* ⓘ : les tuiles ouvrent la même popup. */
.lch-tab #counter .counter-info {
  display: none;
}

/* Objectif du jour en anneau : CSS/counter-goal-ring.css. */