/* Fenêtre du player sur la page du chemin (javascripts/course-hero/course-hero.js) :
 * player en fenêtre modale sur bureau, plein écran mobile (lch-m-app), fenêtres Ma liste de
 * mots et Dialogue. */

:root {
  --lch-green: #2f8a5b;
  --lch-green-dark: #1d6b49;
  --lch-green-soft: #e6f2eb;
  --lch-green-line: #cfe3d7;
  --lch-ink: #1f2a2a;
  --lch-muted: #5d6866;
  --lch-line: #ece6da;
}

/* Bouton « Test suivant : <thème> ~ N min » sous le player (#nextquizz, acts/splitsn.js
   handleNextQuizButton) : retiré en mode héros, « Ma mission du jour » dit ce qu'il y a à faire.
   Le prochain pas reste calculé (fbLoecsen._nextStep) pour la carte de bilan. */
/* Trois id : bat « body:not(…) #nbotbuttons #nextquizz.next:not(.dnone) » d'ecoach_n.css. */
html.lch-on #nextquizz#nextquizz,
html.lch-on #nbotbuttons #nextquizz#nextquizz {
  display: none !important;
}

/* Clavier des caractères spéciaux du quiz (#vboard, fixé en bas d'écran) : seulement player
   ouvert (desktop : fenêtre ouverte ; mobile : pas sur l'accueil app). */
html.lch-on:not(.lch-m):not(.lch-modal-open) #vboard,
html.lch-m-home #vboard {
  display: none !important;
}

/* ---------- Mobile (< 900 px au lancement, html.lch-m) ----------
   lch-m-home : le player est masqué, la page du chemin reste ; lch-m-app : le player prend
   l'écran (voir plus bas). */
html.lch-m.lch-m-home,
html.lch-m.lch-m-home body {
  overflow: hidden !important;
}
/* Mode player (lch-m-app) : plus de défilement de la page. Le player (#container) devient une
   couche fixe sous le header, à la hauteur de l'écran ; sa liste défile en interne (overflow du
   player en faux plein écran), sa barre d'outils reste fixée en bas. La sortie par défilement
   du faux plein écran n'existe plus : la croix et le drapeau d'arrivée ramènent à l'accueil. */
html.lch-m.lch-m-app,
html.lch-m.lch-m-app body {
  overflow: hidden !important;
  overscroll-behavior: none;
}
html.lch-m.lch-m-app body #container#container {
  position: fixed !important;
  top: var(--lch-top, 50px) !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: auto !important;
  max-width: none !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  /* !important : le pot mobile (ecoach_n.css, data-mobile-mode="pot") force z-index auto
     !important sur #container ; sans ça le chemin passait devant le player. */
  z-index: 9300 !important;
  overflow: hidden !important;
  background: #fff;
}
/* Barre du bas du player en mode player mobile (course-hero.js, ensureNavmButtons) :
   switch, micro, calendrier, « + » groupés à gauche ; « Sortir » à droite. Les boutons du
   player sont en float : la barre passe en flex et l'ordre est fixé ici. La croix
   flottante est masquée. Les autres boutons du player (remise en ordre, quiz) gardent
   leur place entre le groupe et « Sortir ». */
html.lch-m.lch-m-app #navm .content {
  display: flex !important;
  align-items: center;
  justify-content: flex-start !important;
  gap: 8px;
  width: 100% !important;
  height: 100%;
  padding: 0 10px;
  box-sizing: border-box;
}
/* Quiz : le bouton crayon du player est en position absolue à droite ; il rejoint le groupe,
   juste avant « Sortir ». */
html.lch-m.lch-m-app #navm .content > #btn_error_m {
  position: static !important;
  order: 6 !important;
}
html.lch-m.lch-m-app #navm .content > * {
  float: none !important;
  margin: 0 !important;
  order: 5 !important;
  flex: none;
}
html.lch-m.lch-m-app #navm .content > #modes {
  order: 1 !important;
  margin-right: 2px !important;
}
html.lch-m.lch-m-app #navm .content > .btspeech {
  order: 2 !important;
}
html.lch-m.lch-m-app #navm .content > .lch-navm-week {
  order: 3 !important;
}
html.lch-m.lch-m-app #navm .content > #btn_more {
  order: 4 !important;
}
html.lch-m.lch-m-app #navm .content > .lch-navm-exit {
  order: 99 !important;
  margin-left: auto !important;
}
html.lch-m.lch-m-app #navm .content > #more_menu {
  order: 100 !important;
}
html.lch-m.lch-m-app .lch-m-close {
  display: none !important;
}
/* Menu « + » en ligne horizontale, posé au-dessus de la barre, aligné à droite (au lieu de la
   colonne verticale du player). */
html.lch-m.lch-m-app #navm #more_menu:not(.dnonei) {
  top: auto !important;
  bottom: calc(100% + 8px) !important;
  left: auto !important;
  right: 10px !important;
  width: auto !important;
  height: auto !important;
  max-width: calc(100vw - 20px);
  flex-direction: row !important;
  align-items: center;
  gap: 6px;
  padding: 6px 8px !important;
  border-radius: 999px !important;
  box-shadow: 0 10px 28px -10px rgba(0, 0, 0, 0.35) !important;
}
html.lch-m.lch-m-app #navm #more_menu > * {
  margin: 0 !important;
}
/* Icône icon-plus1 du « + » (course-hero.js) : le symbole porte un cadre carré tracé en
   var(--color6, #000) ; on ne garde que la croix. */
#btn_more svg {
  --color6: transparent;
}
/* Menu « + » : plus de « Signaler une erreur » (crayon). */
html.lch-m.lch-m-app #more_menu #btn_error_more {
  display: none !important;
}
.lch-navm-btn {
  display: none;
}
html.lch-m.lch-m-app #navm .lch-navm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 43px;
  height: 43px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}
html.lch-m.lch-m-app #navm .lch-navm-week {
  background: #a171e2;
  color: #fff;
}
html.lch-m.lch-m-app #navm .lch-navm-exit {
  background: #2f8a5b;
  color: #fff;
}
.lch-navm-btn svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
html.lch-m.lch-m-app #navm .lch-navm-btn:focus-visible {
  outline: 3px solid #2f6fb0;
  outline-offset: 2px;
}

/* Bouton traduction (player, #btn_trad) : posé à cheval sur le bord haut du bloc jaune
   (.exp_trad_card), à gauche — moitié dedans, moitié dehors. La phrase reprend toute la largeur. */
/* Le bloc jaune est #lbl_trans (la carte .exp_trad_card, transparente, reste statique pour que
   le bouton se place par rapport au bloc). La moitié basse du bouton (16 px) déborde dans le
   bloc : la phrase passe dessous. */
/* Hors quiz seulement : en quiz, le player masque le bouton traduction. */
html.lch-m.lch-m-app #container #cnt_exp:not(.active_quizz) #lbl_trans {
  position: relative !important;
  padding-top: 20px !important;
}
html.lch-m.lch-m-app #container #cnt_exp .exp_trad_card {
  position: static !important;
}
html.lch-m.lch-m-app #container #cnt_exp .exp_trad_card > #btn_trad {
  position: absolute !important;
  left: 12px;
  top: 0;
  z-index: 3;
  margin: 0 !important;
  float: none !important;
  width: 32px !important;
  height: 32px !important;
  transform: translateY(-50%);
  /* Fond du jaune du bloc (#lbl_trans), icône verte, sans liseré. */
  background: #fef9c3 !important;
  color: #2f8a5b !important;
  border: 0 !important;
  box-shadow: 0 3px 8px -4px rgba(0, 0, 0, 0.3) !important;
}
html.lch-m.lch-m-app #container #cnt_exp .exp_trad_card > #btn_trad svg,
html.lch-m.lch-m-app #container #cnt_exp .exp_trad_card > #btn_trad svg * {
  fill: #2f8a5b !important;
  color: #2f8a5b !important;
}

html.lch-on #dconnect {
  display: none !important;
}

/* ---------- Fenêtre modale du player ---------- */

/* Fermée : invisible mais mise en page (le player mesure sa taille pendant le chargement).
   Sous le header du site (z 10000) et sous #vboard (clavier du quiz, z 9999). */
.lch-modal {
  position: fixed;
  left: 0;
  right: 0;
  top: var(--lch-top, 56px);
  bottom: 0;
  z-index: 9600;
  visibility: hidden;
  pointer-events: none;
}
.lch-modal.is-open {
  visibility: visible;
  pointer-events: auto;
}
.lch-modal__backdrop {
  position: absolute;
  inset: 0;
  /* Flou sans voile : la page reste lisible derrière la fenêtre ; le fond capte aussi le clic de fermeture. */
  background: transparent;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 0.2s ease;
}
.lch-modal.is-open .lch-modal__backdrop {
  opacity: 1;
}
/* Infobulle « Fermer » au survol du fond (desktop, course-hero.js watchBackdropTip) : pastille
   sombre qui suit le pointeur, au-dessus de la fenêtre. */
.lch-backdrop-tip {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 9700;
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(31, 42, 42, 0.82);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 6px 18px rgba(31, 42, 42, 0.18), inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.01em;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.18s ease;
}
.lch-backdrop-tip.is-on {
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .lch-backdrop-tip {
    transition: none;
  }
}
/* Fenêtre calée au pixel sur le rectangle --lch-dlg-* (sizeModal : centrée). Pas de barre « Fermer » : croix flottante dans le cadre (.lch-modal__x), Échap ou
   le fond. Le logement (.lch-modal__slot) rogne le contenu. */
.lch-modal__dialog {
  position: absolute;
  top: calc(var(--lch-dlg-top, 86px) - var(--lch-top, 56px));
  left: var(--lch-dlg-left, 110px);
  width: var(--lch-dlg-w, 1220px);
  height: var(--lch-dlg-h, 80vh);
  display: flex;
  flex-direction: column;
  border-radius: 20px;
  background: #fff;
  box-shadow: rgba(149, 157, 165, 0.2) 0 8px 24px;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.lch-modal.is-open .lch-modal__dialog {
  opacity: 1;
  transform: none;
}
.lch-modal__slot {
  position: relative;
  flex: 1;
  min-height: 0;
  border-radius: 20px;
  overflow: hidden;
}

/* Lancement d'une mission (course-hero.js runLaunch) : fenêtre ouverte dès le clic, l'oiseau
   origami du player (gabarit #ptv-bird-tpl, styles d'ecoach_n.css) par-dessus tout le player
   (au-dessus de son propre voile, z 150000) jusqu'à la vue finale de la mission. */
.lch-launch-veil {
  position: absolute;
  inset: 0;
  z-index: 2147483000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--lc-container-bg-color, #fff8ec);
  border-radius: inherit;
  pointer-events: none;
}

/* Le player prend toute la fenêtre (écrase 75vh / 550px / --player-shell-h du shell desktop). */
.lch-modal #container.iframeplayer,
.lch-modal #container.iframeplayer.shell-expanded,
.lch-modal #container.iframeplayer.opaci,
.lch-modal #container.iframeplayer.player-boot-veiled {
  height: var(--lch-container-h, 70vh) !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Écran bas (≤ 666px) : #page1 garde son min-height 550px (ecoach_n.css) et dépasse
   la fenêtre → scroll vertical plutôt que contenu rogné (même si disgracieux). */
@media (max-height: 666px) {
  .lch-modal #container.iframeplayer,
  .lch-modal #container.iframeplayer.shell-expanded,
  .lch-modal #container.iframeplayer.opaci,
  .lch-modal #container.iframeplayer.player-boot-veiled {
    overflow-y: auto !important;
    overscroll-behavior: contain;
  }
}

html.lch-modal-open,
html.lch-modal-open body {
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .lch-modal__backdrop,
  .lch-modal__dialog {
    transition: none;
  }
}

/* ---------- Barre latérale des fiches (#mdetails) ---------- */

/* Fenêtre fermée : pas de barre des fiches. */
html.lch-on:not(.lch-modal-open) #mdetails {
  display: none !important;
}
/* Modale ouverte : au-dessus du fond sombre, au niveau de la fenêtre du player
   (z 9600) et sous le header du site (10000). Le conteneur fixed (50 % de large)
   ne capte pas les clics destinés au player : seuls le menu et l'onglet ouvert. */
html.lch-modal-open #mdetails .bhoechie-tab-container {
  z-index: 9700 !important;
  pointer-events: none;
}
html.lch-modal-open #mdetails .bhoechie-tab-menu,
html.lch-modal-open #mdetails .bhoechie-tab.active {
  pointer-events: auto;
}

/* ---------- Bouton : calendrier au coin bas-droit ---------- */

/* Coin bas-droit, fond violet. */
.lch-week-fab {
  position: fixed;
  right: 12px;
  bottom: 12px;
  z-index: 99990;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  border: none;
  background: #f368af;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.22);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.lch-week-fab:hover {
  background: #e04a98;
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
}
.lch-week-fab:focus-visible {
  outline: 3px solid #2f6fb0;
  outline-offset: 2px;
}
.lch-week-fab .icon {
  width: 26px;
  height: 26px;
  fill: currentColor;
}
html[dir="rtl"] .lch-week-fab {
  right: auto;
  left: 12px;
}
/* Le header du site reste toujours au-dessus de la barre des fiches, de la modale et du
   panneau de la semaine (le focus desktop le passe à z-index 100 / 0 via .opaci). */
html.lch-on #header_nav_classic,
html.lch-on #header_nav_classic.opaci {
  z-index: 10001 !important;
}

/* Modale fermée : rien du player n'attrape les clics (le player force par endroits
   visibility/pointer-events sur ses blocs, qui sinon couvriraient la page). */
.lch-modal:not(.is-open),
.lch-modal:not(.is-open) * {
  pointer-events: none !important;
}

/* Fenêtre du dialogue : même taille que celle du player. */
.lch-frame {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  background: #fff;
}
.lch-modal--frame {
  z-index: 9650;
}

/* Boutons de page sans objet sur le chemin : Découvrir la méthode, Écoute Consciente,
   Pratiquer cette leçon. */
html.lch-on #guide,
html.lch-on #videomode,
html.lch-on #promptdiag {
  display: none !important;
}

/* ---------- Loader : avion en papier dans les nuages ----------
   (animation fournie par Christophe, styles limités à .lch-sky ; avion rouge clair) */
.lch-sky {
  position: relative;
  width: 100%;
  height: 210px;
  border-radius: 20px;
  overflow: hidden;
  background: linear-gradient(180deg, #cfe5f6 0%, #e8f3fb 100%);
}
/* Paysage : les nuages et le trajet de l'avion occupent toute la largeur du ciel. */
.lch-sky__frame {
  position: absolute;
  left: 0;
  top: 34px;
  width: var(--lch-sky-w, 100%);
}
.lch-sky svg {
  max-width: 100%;
  height: auto;
  display: block;
}
/* Avion : la piste (`__plane-wrap`, largeur du paysage) traverse de gauche à droite en % de sa
   propre largeur (lch-plane-fly : sort du paysage puis revient par la gauche si le chargement
   dure) ; l'avion est posé 130 px avant son bord gauche ; houle verticale (scoping) et tangage
   (soaring) en courbes douces. Transform seul : animations sur le compositeur. */
.lch-sky__plane-wrap {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 120px;
  z-index: 3;
  transform: translateX(-5%);
  will-change: transform;
  animation: lch-plane-fly 18s linear infinite;
}
.lch-sky__plane-bob {
  position: absolute;
  left: -130px;
  top: 0;
  width: 120px;
  will-change: transform;
  animation: lch-plane-scoping 2.6s ease-in-out alternate infinite;
}
.lch-sky__plane {
  width: 100%;
  height: 40px;
  will-change: transform;
  animation: lch-plane-soaring 5.2s ease-in-out infinite;
}
@keyframes lch-plane-fly {
  0% { transform: translateX(-5%); }
  60% { transform: translateX(115%); }
  100% { transform: translateX(115%); }
}
@keyframes lch-plane-scoping {
  0% { transform: translateY(0); }
  100% { transform: translateY(60px); }
}
@keyframes lch-plane-soaring {
  0% { transform: rotate(0deg); }
  30% { transform: rotate(9deg); }
  70% { transform: rotate(-7deg); }
  100% { transform: rotate(0deg); }
}
.lch-sky__clouds {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--lch-sky-w, 100%);
  transform: translateZ(0);
}
/* Nuages : chaque nuage est posé à droite de sa piste (largeur du paysage) ; c'est la piste qui
   glisse, en % de sa largeur, de la droite du dernier panneau à la gauche du premier. */
.lch-sky__cloud-track {
  position: absolute;
  inset: 0;
  will-change: transform, opacity;
  animation: lch-cloud-move 11s linear infinite;
}
.lch-sky .cloud {
  position: absolute;
  top: 20%;
  right: 0;
  width: 160px;
}
.lch-sky__cloud-track.front { z-index: 9; }
.lch-sky__cloud-track.distant { z-index: 1; }
.lch-sky .cloud.smaller { margin-right: 220px; width: 60px; margin-top: 30px; }
.lch-sky .cloud.small { margin-right: 110px; width: 90px; }
.lch-sky .cloud.big { width: 260px; margin-top: 30px; margin-right: 80px; }
.lch-sky .cloud.massive { width: 320px; margin-top: 12px; margin-right: 0; }
.lch-sky .slow { animation-duration: 12.5s; }
.lch-sky .slower { animation-duration: 15s; }
.lch-sky .slowest { animation-duration: 18s; }
.lch-sky .super-slow { animation-duration: 27s; }
@keyframes lch-cloud-move {
  0% { opacity: 0.1; transform: translateX(28%); }
  8% { opacity: 0.8; }
  88% { opacity: 0.8; }
  100% { opacity: 0; transform: translateX(-135%); }
}
@media (prefers-reduced-motion: reduce) {
  .lch-sky__plane-wrap,
  .lch-sky__plane-bob,
  .lch-sky__plane,
  .lch-sky__cloud-track {
    animation: none;
  }
  .lch-sky__plane-wrap {
    transform: translateX(45%);
  }
}

/* ---------- Mobile (< 900 px) : accueil « app » ↔ player ----------
   html.lch-m (posé par course-hero.js begin en mobile) : le héros empilé est l'accueil ;
   lch-m-home = player masqué ; lch-m-app = player affiché, en plein écran mobile du player
   (faux FS : stepper sous le header, barre d'outils fixée en bas) avec une croix flottante
   pour revenir à l'accueil. Les fenêtres secondaires (Ma liste de mots, Dialogue)
   prennent tout l'écran sous le header. */
/* Deux id : bat « body.unified-list:not(…)×4 #container { display:block !important } » d'ecoach_n.css. */
html.lch-m.lch-m-home body #container#container {
  display: none !important;
}
.lch-m-close {
  position: fixed;
  top: calc(var(--lch-top, 50px) + 8px);
  right: 10px;
  z-index: 9700;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid rgba(21, 35, 42, 0.1);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.94);
  color: #15232a;
  box-shadow: 0 6px 18px -6px rgba(0, 0, 0, 0.35);
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
html.lch-m.lch-m-app .lch-m-close {
  display: inline-flex;
}
.lch-m-close svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
}
.lch-m-close:focus-visible {
  outline: 3px solid #2f6fb0;
  outline-offset: 2px;
}
html.lch-m .lch-modal {
  top: var(--lch-top, 50px);
}
html.lch-m .lch-modal__dialog {
  position: fixed;
  top: var(--lch-top, 50px);
  left: 0;
  right: 0;
  bottom: 0;
  width: auto;
  height: auto;
  border-radius: 0;
  transform: none;
}

/* ---------- Ligne d'en-tête (#h-infos, ex-bandeau vert) ----------
   Le thème du player (#sublist), sa barre (#h-prog) et le reste du bandeau restent dans le DOM,
   masqués. */

html:is(.lch-on, .lch-pre) #h-infos {
  display: flex;
  align-items: center;
  gap: 14px;
  box-sizing: border-box;
  height: auto !important;
  min-height: 0;
  padding: 6px 8px !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  color: #15232a;
  overflow: visible;
}
html:is(.lch-on, .lch-pre) #h-infos > .c {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 0;
  float: none;
}
html:is(.lch-on, .lch-pre) #h-infos > .c > .phoca-flagbox-list {
  position: relative;
  width: 28px !important;
  height: 28px !important;
  margin: 0;
  padding: 0;
  float: none;
  display: flex !important;
  align-items: center;
  justify-content: center;
  flex: none;
}
html:is(.lch-on, .lch-pre) #h-infos > .c > .phoca-flagbox-list .phoca-flagbox {
  position: static;
  display: block;
  width: 28px !important;
  height: 28px !important;
  margin: 0;
}
html:is(.lch-on, .lch-pre) #h-infos > .c > .phoca-flagbox-list img {
  position: static;
  display: block;
  width: 28px !important;
  height: 28px !important;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
}
html:is(.lch-on, .lch-pre) #h-infos > .c > .i {
  margin: 0;
  float: none;
  min-width: 0;
  flex: 1;
}
html:is(.lch-on, .lch-pre) #h-infos h1 {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #6b787e;
  opacity: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
html:is(.lch-on, .lch-pre) #h-infos h1 .lch-h1-lang {
  color: #15232a;
}
html:is(.lch-on, .lch-pre) #h-infos #subtitle,
html:is(.lch-on, .lch-pre) #h-infos #sublist,
html:is(.lch-on, .lch-pre) #h-infos #h-prog,
html:is(.lch-on, .lch-pre) #h-infos #perinfos,
html:is(.lch-on, .lch-pre) #h-infos .theme-toggle,
html:is(.lch-on, .lch-pre) #h-infos #theme-toggle {
  display: none !important;
}

@media (max-width: 899px) {
  html:is(.lch-on, .lch-pre) #h-infos {
    flex-wrap: wrap;
    row-gap: 8px;
  }
      }
/* Hôte du lecteur de dialogue : la fenêtre lui appartient, il ne touche pas au player. */
.lch-dialogue-slot {
  position: relative;
  overflow: hidden;
  background: #fff;
}
/* Bureau : la croix de la fenêtre (course-hero.js, buildFrameModal) remplace celle du lecteur. */
html.lch-on:not(.lch-m) .lch-dialogue-slot .ldlg-close {
  display: none;
}

/* ---------- Fenêtres (player, dialogue, liste des mots) : croix discrète dans le cadre, en
   haut à droite (bande libre de ~35 px au-dessus du parcours du player). ---------- */
.lch-modal__x {
  position: absolute;
  top: 6px;
  right: 8px;
  z-index: 20;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #6b7472;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.lch-modal__x:hover {
  background: rgba(31, 42, 42, 0.08);
  color: var(--lch-ink);
}
.lch-modal__x:focus-visible {
  outline: 3px solid #2f6fb0;
  outline-offset: 2px;
}
.lch-modal__x svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
}
html[dir="rtl"] .lch-modal__x {
  right: auto;
  left: 8px;
}

/* ---------- Écoute consciente : dans le cadre de la fenêtre du player (desktop seulement :
   en mobile, html.lch-m, l'Écoute consciente garde sa mise en page native du player) ----------
   Ancien titre : ---------- */
html.lch-on:not(.lch-m) body.immersion-active #immersion-overlay {
  inset: auto !important;
  /* Tout le cadre de la fenêtre ; sortie par son bouton « Fermer » (.btclose → retour héros). */
  top: var(--lch-dlg-top, 66px) !important;
  left: var(--lch-dlg-left, 110px) !important;
  width: var(--lch-dlg-w, 1220px) !important;
  height: var(--lch-dlg-h, 80vh) !important;
  border-radius: 20px;
}

/* Bandeau vert descendu de 15 px (plus d'air sous le header du site). Pas de margin sur
   #h-infos : elle fusionnerait avec celle de #home_content (70 px) sans rien déplacer. */
html:is(.lch-on, .lch-pre) #home_content {
  padding-top: 15px;
}

/* ---------- Avant le lancement (html.lch-pre, player.html.php) ---------- */
@media (min-width: 900px) {
  /* Le temps que le module se charge : pas d'écran du player à son ancienne place. */
  html.lch-pre:not(.lch-pre-ready) #container {
    visibility: hidden;
  }
}
/* Fil d'Ariane du bas de page décalé de 20 px (position relative) : il dépassait de 20 px à
   droite, et le lancement du player faisait défiler le body de 0,5 px en horizontal — toute la
   page bougeait d'un demi-pixel au lancement. */
html:is(.lch-on, .lch-pre) #sheet > .breadcrumb {
  margin-right: 20px;
}
/* Lien de leçon du hub avec hash : lancement immédiat, l'écran du player ne s'affiche pas. */
html.lch-pre-go #container {
  visibility: hidden !important;
}
/* Écoute consciente dans la fenêtre : fond transparent, image (cadre noir 16/9) réduite pour
   tenir entière avec la barre de boutons dessous. */
html.lch-on:not(.lch-m) body.immersion-active #immersion-overlay {
  background: transparent !important;
  background-image: none !important;
  box-shadow: none;
}
html.lch-on:not(.lch-m) body.immersion-active #immersion-overlay #immersion-stage {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  height: 100% !important;
  box-sizing: border-box;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  padding: 0;
  position: relative;
}
/* Image 16/9 entière dans la fenêtre : la plus grande qui tient en hauteur (barre de boutons
   + marges déduites) ET en largeur (24 px de marge de chaque côté). */
html.lch-on:not(.lch-m) body.immersion-active #immersion-overlay {
  /* Toute la largeur de la fenêtre (16/9), plafonnée pour laisser la barre de boutons dessous. */
  --lch-imm-h: min(calc(var(--lch-dlg-w, 1220px) * 0.5625), calc(var(--lch-dlg-h, 779px) - 85px));
}
/* Sélecteurs à 3 id : battent #immersion-stage #canvmob / #rcanv2 (86vh) d'ecoach_n.css. */
html.lch-on:not(.lch-m) body.immersion-active #immersion-overlay #immersion-stage #canvmob {
  flex: none;
  /* Même largeur ET même hauteur que la fenêtre du player (image recadrée, cadre noir entier). */
  height: 100% !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  margin: 0 auto !important;
}
html.lch-on:not(.lch-m) body.immersion-active #immersion-overlay #immersion-stage #canvmob #rcanv2 {
  width: 100% !important;
  height: 100% !important;
  box-sizing: border-box;
}
html.lch-on:not(.lch-m) body.immersion-active #immersion-overlay #immersion-stage #canvmob #rcanv,
html.lch-on:not(.lch-m) body.immersion-active #immersion-overlay #immersion-stage #canvmob #immersion-lum-scrim {
  width: 100% !important;
  height: 100% !important;
}
/* Boutons posés en bas, sur l'image (elle occupe toute la fenêtre). */
html.lch-on:not(.lch-m) body.immersion-active #immersion-overlay #immersion-stage #bar_tools {
  position: absolute !important;
  left: 0;
  right: 0;
  bottom: 22px;
  width: 100%;
  /* Au-dessus du voile de luminosité (#immersion-lum-scrim, z-index 1001) : les boutons
     restent pleinement visibles quel que soit le réglage. */
  z-index: 1100 !important;
  margin: 0 !important;
}
/* Pendant l'Écoute consciente : fenêtre du player transparente (même position, même taille),
   son contenu masqué ; l'image prend toute la largeur, collée en haut. */
html.lch-on:not(.lch-m) body.immersion-active .lch-modal:not(.lch-modal--frame) .lch-modal__dialog,
html.lch-on:not(.lch-m) body.immersion-active .lch-modal:not(.lch-modal--frame) .lch-modal__slot,
html.lch-on:not(.lch-m) body.immersion-active .lch-modal #container {
  background: transparent !important;
  box-shadow: none !important;
}
html.lch-on:not(.lch-m) body.immersion-active .lch-modal #container > * {
  visibility: hidden !important;
}
html.lch-on:not(.lch-m) body.immersion-active #immersion-overlay #immersion-stage #canvmob #rcanv2,
html.lch-on:not(.lch-m) body.immersion-active #immersion-overlay #immersion-stage #canvmob #rcanv,
html.lch-on:not(.lch-m) body.immersion-active #immersion-overlay #immersion-stage #canvmob #immersion-lum-scrim {
  border-radius: 16px !important;
}

/* Même arrondi que le bandeau vert (16 px) : la fenêtre le recouvre jusque dans les coins
   (avec 20 px, ses coins dépassaient de quelques pixels). */
.lch-modal__dialog,
.lch-modal__slot {
  border-radius: 16px;
}
html.lch-on:not(.lch-m) body.immersion-active #immersion-overlay {
  border-radius: 16px;
}
/* Boutons de l'Écoute consciente : effacés après 5 s sans geste (course-hero.js). */
html.lch-on:not(.lch-m) body.immersion-active #immersion-overlay #immersion-stage #bar_tools {
  transition: opacity 0.4s ease;
}
html.lch-on.lch-imm-idle:not(.lch-m) body.immersion-active #immersion-overlay #immersion-stage #bar_tools {
  opacity: 0;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  html.lch-on:not(.lch-m) body.immersion-active #immersion-overlay #immersion-stage #bar_tools {
    transition: none;
  }
}

/* ---------- Dialogue : colonne de gauche (choix) compacte, tient dans 500 px ----------
   Limité au lecteur ouvert dans notre fenêtre (.lch-dialogue-slot) : son CSS d'origine
   (CSS/dialogue.css, .ldlg) n'est pas modifié ailleurs. */
.lch-dialogue-slot .ldlg .ldlg-panel {
  gap: 8px;
  padding: 10px 12px 12px;
}
.lch-dialogue-slot .ldlg .ldlg-situation {
  margin: 0;
  font-size: 13px;
  line-height: 1.35;
}
.lch-dialogue-slot .ldlg .ldlg-section {
  margin: 0;
  font-size: 10.5px;
  line-height: 1.25;
}
.lch-dialogue-slot .ldlg .ldlg-cast {
  flex-direction: row;
  gap: 6px;
}
.lch-dialogue-slot .ldlg .ldlg-cast-card {
  flex: 1 1 0;
  min-width: 0;
  min-height: 0;
  padding: 6px 8px;
  gap: 6px;
  align-items: center;
}
.lch-dialogue-slot .ldlg .ldlg-cast-emoji {
  font-size: 18px;
}
.lch-dialogue-slot .ldlg .ldlg-cast-name {
  font-size: 13px;
  line-height: 1.2;
}
.lch-dialogue-slot .ldlg .ldlg-cast-role {
  font-size: 11px;
  line-height: 1.2;
}
.lch-dialogue-slot .ldlg .ldlg-gender {
  flex-wrap: nowrap;
  align-items: center;
  gap: 6px;
}
.lch-dialogue-slot .ldlg .ldlg-seg {
  min-height: 28px;
  height: auto;
  padding: 3px 10px;
  font-size: 12.5px;
  white-space: nowrap;
}
.lch-dialogue-slot .ldlg .ldlg-phases {
  margin: 0;
  gap: 6px;
}
.lch-dialogue-slot .ldlg .ldlg-phases {
  display: flex;
  flex-direction: column;
}
.lch-dialogue-slot .ldlg .ldlg-phase {
  padding: 7px 9px;
  gap: 8px;
}
.lch-dialogue-slot .ldlg .ldlg-phase-num {
  width: 24px;
  height: 24px;
  min-width: 24px;
  font-size: 12px;
}
.lch-dialogue-slot .ldlg .ldlg-phase-kicker {
  font-size: 10.5px;
  line-height: 1.2;
}
.lch-dialogue-slot .ldlg .ldlg-mode-name {
  font-size: 13.5px;
  line-height: 1.25;
}
.lch-dialogue-slot .ldlg .ldlg-mode-desc {
  font-size: 11.5px;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.lch-dialogue-slot .ldlg .ldlg-link {
  padding: 4px 6px;
  font-size: 13px;
}
/* « Phase N » redit le numéro de la pastille : on ne garde que l'étiquette « Conseillée ». */
.lch-dialogue-slot .ldlg .ldlg-phase-kicker {
  font-size: 0;
  line-height: 0;
}
/* Étiquette « Conseillée » en pastille, coin haut-droit de la carte (pas de ligne en plus). */
.lch-dialogue-slot .ldlg .ldlg-phase {
  position: relative;
}
.lch-dialogue-slot .ldlg .ldlg-phase-kicker .ldlg-phase-tag {
  position: absolute;
  top: 6px;
  right: 8px;
  margin: 0;
  font-size: 10px;
  line-height: 1.3;
}
.lch-dialogue-slot .ldlg .ldlg-phase.is-on .ldlg-mode-name,
.lch-dialogue-slot .ldlg .ldlg-phase-item:first-child .ldlg-mode-name {
  padding-right: 72px;
}
/* Cartes de rôle côte à côte : pastille plus petite pour que le nom tienne (« Interlocuteur »). */
.lch-dialogue-slot .ldlg .ldlg-cast-card {
  padding: 6px 6px;
  gap: 5px;
}
.lch-dialogue-slot .ldlg .ldlg-cast-emoji {
  width: 26px !important;
  height: 26px !important;
  min-width: 26px;
  font-size: 15px !important;
  line-height: 26px;
  flex: none;
}
.lch-dialogue-slot .ldlg .ldlg-cast-card > span:last-child {
  min-width: 0;
  overflow: hidden;
}
.lch-dialogue-slot .ldlg .ldlg-cast-name {
  font-size: 12.5px;
  white-space: nowrap;
}
.lch-dialogue-slot .ldlg .ldlg-cast-role {
  font-size: 10.5px;
}

/* L'Écoute consciente arrive en fondu. */
html.lch-on:not(.lch-m) body.immersion-active #immersion-overlay {
  animation: lch-imm-in 0.25s ease both;
}
@keyframes lch-imm-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  html.lch-on:not(.lch-m) body.immersion-active #immersion-overlay {
    animation: none;
  }
}

/* ---------- Ma liste de mots ---------- */
.lch-modal--words {
  z-index: 9650;
}
.lch-words {
  background: #fbf8f2;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  padding: 24px 28px 28px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
@media (max-width: 899px) {
  .lch-words {
    padding: 14px 12px 20px;
    gap: 14px;
  }
}

/* Tableau de bord sous le player (Mes objectifs / Ma progression / Ma liste de mots) retiré
   de la page (22/10). Laissé dans le DOM, masqué (prog.js est encore chargé par splitsn). */
html.lch-on #bprog,
html.lch-pre #bprog {
  display: none !important;
}

/* Ma liste de mots (openWords) : cartes du module partagé themewords.js (classes .lex-*
   d'ecoach_n.css). La fenêtre ne défile pas : la liste défile dans son bloc, curseur dans la
   marge intérieure (jamais sur les arrondis). */
.lch-words.lch-words--lesson {
  overflow: hidden !important;
}
.lch-words--lesson .lch-words__list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  padding-right: 6px;
  scrollbar-width: thin;
  scrollbar-color: #c9d3d0 transparent;
}
.lch-words__loading {
  height: 120px;
}
.lch-words--lesson .lex-words-list {
  margin: 0;
}
/* .training-card (ecoach_n.css) : width 100 % + padding sans box-sizing → débordait. */
.lch-words--lesson .training-card {
  box-sizing: border-box;
  margin-bottom: 14px;
}
.lch-words--lesson .lex-card {
  border-radius: 14px;
  background: #fff;
}
.lch-words--lesson .lex-card.lvl5 {
  background: #f6f7f0;
}
/* Sans Premium : liste floutée, inerte, et la carte Premium par-dessus (lesson-words.js). Mêmes
   couleurs que la carte d'Ajuster (.msn-gate--premium, mission-panel.css : pas chargée ici). */
.lch-words__list--locked {
  overflow: hidden !important;
  filter: blur(6px);
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}
.lch-words__gate {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  box-sizing: border-box;
}
.lch-words__gate-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  max-width: 420px;
  padding: 18px 20px;
  box-sizing: border-box;
  border: 1px dashed rgba(168, 107, 18, 0.4);
  border-radius: 16px;
  background: #fff1d6;
  box-shadow: 0 18px 44px -16px rgba(21, 35, 42, 0.32);
}
.lch-words__gate-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #fff;
  color: #a86b12;
}
.lch-words__gate-ico .msn-lu,
.lch-words__gate-btn .msn-lu {
  width: 16px;
  height: 16px;
}
.lch-words__gate-txt {
  margin: 0;
  color: #15232a;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.45;
}
.lch-words__gate-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 18px;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(180deg, #c98d2e 0%, #a86b12 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 10px 22px -12px rgba(168, 107, 18, 0.6);
  color: #fff;
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}
.lch-words--lesson .lex-card.prg-lex-card-red {
  background: #ffdada;
}
.lch-words--lesson .lex-card.prg-lex-card-ora {
  background: #f8f0c3;
}
.lch-words--lesson .lex-cross.noav {
  opacity: 0.35;
  cursor: default;
}