:root {
  --color-primary-500: #2f7d52;
  --color-primary-400: #3c9465;
  /* Le vert de marque reste inchange pour les FONDS, les BORDURES et les
     barres de progression : eux n'ont aucun rapport de contraste a tenir.
     Seul le vert POSE COMME TEXTE en a un, et il en faut deux, parce qu'un
     texte lisible sur une surface claire ne l'est pas sur une surface sombre.
     Mesure du 2026-08-11 : #2f7d52 rend 4,07 a 4,48 sur les surfaces claires
     du site et 3,00 a 3,92 sur les surfaces sombres, des deux cotes du seuil
     de 4,5. Les deux valeurs ci-dessous rendent 4,9 a 7,2 et 6,0 a 8,5. */
  --moko-texte-vert-sur-clair: #22633f;
  --moko-texte-vert-sur-sombre: #4fae78;
  --moko-texte-vert: var(--moko-texte-vert-sur-clair);
  --color-ns-green: #dcefdc;
  --color-ns-yellow: #f2c14e;
  --color-secondary: #111712;
}

.bg-primary-500 { background-color: #2f7d52 !important; }
.text-primary-500 { color: var(--moko-texte-vert) !important; }
.border-primary-500 { border-color: #2f7d52 !important; }
.border-primary-400 { border-color: #3c9465 !important; }
.bg-ns-green { background-color: #dcefdc !important; }
.text-ns-yellow { color: #f2c14e !important; }
.header-one img[alt="MOKO TCF"],
footer img[alt="MOKO TCF"] {
  object-fit: contain;
}
body {
  background: #f7f8f4;
}

.dark body {
  background: #111712;
}

html,
body {
  overflow-x: hidden;
}

::selection {
  background: color-mix(in srgb, var(--color-primary-500) 22%, #ffffff);
  color: var(--color-secondary);
}

html.dark ::selection {
  background: color-mix(in srgb, var(--color-primary-400) 34%, #111712);
  color: #ffffff;
}

button,
.btn,
a.btn,
[role="tab"],
[role="button"],
.moko-client-tabs a,
.moko-client-actions a,
.moko-client-mobile-nav a,
.moko-sim-nav-grid button,
.moko-sim-topbar button,
.moko-sim-bottombar button,
button *,
.btn *,
a.btn *,
[role="tab"] *,
[role="button"] *,
.moko-client-tabs a *,
.moko-client-actions a *,
.moko-client-mobile-nav a *,
.moko-sim-nav-grid button *,
.moko-sim-topbar button *,
.moko-sim-bottombar button * {
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
}

/* Les libelles des actions publiques et apprenant utilisent desormais la
   graisse normale du role bouton. Le perimetre reste ferme afin de ne pas
   modifier l'administration ni les liens de navigation qui ne sont pas des
   boutons. Les descendants sont inclus car certains composants entourent le
   libelle d'un span portant sa propre graisse. */
body:has(.header-one) :is(
  button,
  input[type="button"],
  input[type="submit"],
  input[type="reset"],
  .btn,
  [role="button"],
  a[class*="action"],
  a[class*="Action"],
  a[class*="Button"]
),
:is(.moko-client-app, .moko-client-immersive) :is(
  button,
  input[type="button"],
  input[type="submit"],
  input[type="reset"],
  .btn,
  [role="button"],
  a[class*="Action"],
  a[class*="Button"],
  a[class*="primaryLink"],
  a[class*="returnLink"],
  a[class*="sessionsLink"]
),
body:has(.header-one) :is(
  button,
  .btn,
  [role="button"],
  a[class*="action"],
  a[class*="Action"],
  a[class*="Button"]
) *,
:is(.moko-client-app, .moko-client-immersive) :is(
  button,
  .btn,
  [role="button"],
  a[class*="Action"],
  a[class*="Button"],
  a[class*="primaryLink"],
  a[class*="returnLink"],
  a[class*="sessionsLink"]
) * {
  font-weight: 400 !important;
}

textarea,
input,
[contenteditable="true"] {
  -webkit-user-select: text;
  user-select: text;
}

/* Les blocs du gabarit portent `data-ns-animate` et partent à `opacity: 0`,
   en attendant que le script du thème les révèle. La règle ci-dessous les rend
   visibles sans dépendre de ce script.

   `!important` sur `opacity` prend le pas sur une animation CSS : c'est l'ordre
   de la cascade, une déclaration importante de la feuille passant devant les
   images-clés. Un élément dont l'opacité est justement ce qui doit varier se
   retrouve donc figé. Le fond en pointillés du hero est dans ce cas : il porte
   `animate-pulse`, l'animation tourne, et sa sortie était écartée.

   Il est donc traité par la règle suivante, qui le rend visible sans
   `!important` : elle est plus spécifique que le `opacity: 0` du thème, et
   laisse les images-clés reprendre la main. */
.header-one.opacity-0,
[data-ns-animate]:not(.animate-pulse) {
  opacity: 1 !important;
  filter: none !important;
}

[data-ns-animate].animate-pulse {
  opacity: 1;
  filter: none !important;
}

/* Le visiteur qui a demandé la réduction des animations dans son système garde
   le bloc entièrement visible et immobile. C'est la convention déjà suivie par
   le thème pour ses propres animations et par la bande défilante. */
@media (prefers-reduced-motion: reduce) {
  [data-ns-animate].animate-pulse {
    animation: none;
  }
}

/* Systeme central de boutons MOKO.
   Roles couverts : primaire, secondaire, contour/ghost, blanc, lien-fleche, danger et variante sur fond sombre.
   Les classes du theme importe sont mappees ici pour eviter les conflits de contraste clair/sombre. */
:root {
  --moko-btn-primary-bg: #2f7d52;
  --moko-btn-primary-bg-hover: #24613f;
  --moko-btn-primary-text: #ffffff;
  --moko-btn-secondary-bg: #111712;
  --moko-btn-secondary-bg-hover: #253126;
  --moko-btn-secondary-text: #ffffff;
  --moko-btn-outline-bg: transparent;
  --moko-btn-outline-text: #111712;
  --moko-btn-outline-border: #cfd8cf;
  --moko-btn-outline-bg-hover: #111712;
  --moko-btn-outline-text-hover: #ffffff;
  --moko-btn-white-bg: #ffffff;
  --moko-btn-white-text: #111712;
  --moko-btn-white-border: #dce5dc;
  --moko-btn-white-bg-hover: #2f7d52;
  --moko-btn-white-text-hover: #ffffff;
  --moko-btn-danger-bg: #b42318;
  --moko-btn-danger-bg-hover: #8f1c13;
  --moko-btn-danger-text: #ffffff;
  --moko-btn-focus: #f2c14e;
  --moko-semantic-info-bg: #eef5ff;
  --moko-semantic-info-border: #bfd7ff;
  --moko-semantic-info-text: #17406d;
  --moko-semantic-success-bg: #e9f7ee;
  --moko-semantic-success-border: #9fd8b3;
  --moko-semantic-success-text: #19613a;
  --moko-semantic-danger-bg: #fff0ed;
  --moko-semantic-danger-border: #f4a89f;
  --moko-semantic-danger-text: #9f2418;
  --moko-semantic-advice-bg: #fff8dc;
  --moko-semantic-advice-border: #e7c85a;
  --moko-semantic-advice-text: #6f4d00;
}

html.dark {
  --moko-texte-vert: var(--moko-texte-vert-sur-sombre);
  --moko-btn-outline-text: #ffffff;
  --moko-btn-outline-border: #3b463d;
  --moko-btn-outline-bg-hover: #ffffff;
  --moko-btn-outline-text-hover: #111712;
  --moko-btn-white-bg: #ffffff;
  --moko-btn-white-text: #111712;
  --moko-btn-white-border: #ffffff;
  --moko-btn-white-bg-hover: #2f7d52;
  --moko-btn-white-text-hover: #ffffff;
  --moko-semantic-info-bg: #122033;
  --moko-semantic-info-border: #2a4f79;
  --moko-semantic-info-text: #d8e8ff;
  --moko-semantic-success-bg: #102719;
  --moko-semantic-success-border: #2f7d52;
  --moko-semantic-success-text: #cdeed7;
  --moko-semantic-danger-bg: #321613;
  --moko-semantic-danger-border: #ad382d;
  --moko-semantic-danger-text: #ffd9d4;
  --moko-semantic-advice-bg: #2d260f;
  --moko-semantic-advice-border: #8f7625;
  --moko-semantic-advice-text: #ffe99a;
}

.moko-btn,
a.btn,
button.btn {
  border-color: currentColor;
}

/* Une action garde un libelle court sur une ligne. Le texte explicatif reste
   dans le contenu voisin ; il ne sert jamais a agrandir artificiellement le
   bouton. La largeur mobile est la mesure validee pour /a-propos a 377 px. */
body:has(.header-one) main .moko-about-reviews-cta,
body:has(.header-one) main .moko-about-reviews-cta > span {
  white-space: nowrap;
}

body:has(.header-one) main .moko-about-reviews-cta {
  border-width: 0;
}

@media (max-width: 767px) {
  body:has(.header-one) main .moko-about-reviews-cta {
    width: 303px;
    max-width: 100%;
  }
}

/* Une pile centree n'etire pas ses enfants ; une fois passee en rangee, leur
   largeur intrinseque peut aussi ecraser le visuel voisin. La contrainte reste
   donc valable de part et d'autre du point de rupture du gabarit. */
body:has(.header-one) main .flex.flex-col[class~="md:flex-row"][class~="items-center"] > * {
  min-width: 0;
  max-width: 100%;
}

.moko-btn,
.moko-btn span,
.moko-btn svg,
.moko-btn path,
a.btn span,
a.btn svg,
a.btn path,
button.btn span,
button.btn svg,
button.btn path {
  color: inherit;
  stroke: currentColor;
}

.moko-btn:focus-visible,
a.btn:focus-visible,
button.btn:focus-visible {
  outline: 3px solid var(--moko-btn-focus) !important;
  outline-offset: 3px !important;
}

.moko-btn[disabled],
.moko-btn[aria-disabled="true"],
a.btn[aria-disabled="true"],
button.btn:disabled {
  cursor: not-allowed !important;
  opacity: 0.55 !important;
  pointer-events: none !important;
}

.moko-btn-primary,
a.btn[class~="btn-primary"],
button.btn[class~="btn-primary"] {
  background-color: var(--moko-btn-primary-bg) !important;
  border-color: var(--moko-btn-primary-bg) !important;
  color: var(--moko-btn-primary-text) !important;
}

.moko-btn-primary:hover,
a.btn[class~="btn-primary"]:hover,
button.btn[class~="btn-primary"]:hover {
  background-color: var(--moko-btn-primary-bg-hover) !important;
  border-color: var(--moko-btn-primary-bg-hover) !important;
  color: var(--moko-btn-primary-text) !important;
}

.moko-btn-secondary,
a.btn[class~="btn-secondary"],
button.btn[class~="btn-secondary"],
a.btn[class~="btn-white-dark"],
button.btn[class~="btn-white-dark"] {
  background-color: var(--moko-btn-secondary-bg) !important;
  border-color: var(--moko-btn-secondary-bg) !important;
  color: var(--moko-btn-secondary-text) !important;
}

.moko-btn-secondary:hover,
a.btn[class~="btn-secondary"]:hover,
button.btn[class~="btn-secondary"]:hover,
a.btn[class~="btn-white-dark"]:hover,
button.btn[class~="btn-white-dark"]:hover {
  background-color: var(--moko-btn-secondary-bg-hover) !important;
  border-color: var(--moko-btn-secondary-bg-hover) !important;
  color: var(--moko-btn-secondary-text) !important;
}

.moko-btn-outline,
.moko-btn-ghost,
a.btn[class~="btn-transparent"],
button.btn[class~="btn-transparent"] {
  background-color: var(--moko-btn-outline-bg) !important;
  border-color: var(--moko-btn-outline-border) !important;
  color: var(--moko-btn-outline-text) !important;
}

.moko-btn-outline:hover,
.moko-btn-ghost:hover,
a.btn[class~="btn-transparent"]:hover,
button.btn[class~="btn-transparent"]:hover {
  background-color: var(--moko-btn-outline-bg-hover) !important;
  border-color: var(--moko-btn-outline-bg-hover) !important;
  color: var(--moko-btn-outline-text-hover) !important;
}

.moko-btn-white,
a.btn[class~="btn-white"],
button.btn[class~="btn-white"],
a.btn[class~="btn-accent"],
button.btn[class~="btn-accent"] {
  background-color: var(--moko-btn-white-bg) !important;
  border-color: var(--moko-btn-white-border) !important;
  color: var(--moko-btn-white-text) !important;
}

.moko-btn-white:hover,
a.btn[class~="btn-white"]:hover,
button.btn[class~="btn-white"]:hover,
a.btn[class~="btn-accent"]:hover,
button.btn[class~="btn-accent"]:hover {
  background-color: var(--moko-btn-white-bg-hover) !important;
  border-color: var(--moko-btn-white-bg-hover) !important;
  color: var(--moko-btn-white-text-hover) !important;
}

.moko-btn-on-dark {
  background-color: #ffffff !important;
  border-color: #ffffff !important;
  color: #111712 !important;
}

.moko-btn-on-dark:hover {
  background-color: #2f7d52 !important;
  border-color: #2f7d52 !important;
  color: #ffffff !important;
}

.moko-btn-danger {
  background-color: var(--moko-btn-danger-bg) !important;
  border-color: var(--moko-btn-danger-bg) !important;
  color: var(--moko-btn-danger-text) !important;
}

.moko-btn-danger:hover {
  background-color: var(--moko-btn-danger-bg-hover) !important;
  border-color: var(--moko-btn-danger-bg-hover) !important;
  color: var(--moko-btn-danger-text) !important;
}

.moko-btn-link-arrow {
  background: transparent !important;
  border-color: transparent !important;
  color: var(--moko-texte-vert) !important;
}

.moko-btn-link-arrow:hover {
  color: var(--moko-btn-primary-bg-hover) !important;
}

.btn.btn-white,
a.btn.btn-white,
.btn.btn-white span,
.btn.hover\:btn-white:hover,
a.btn.hover\:btn-white:hover,
.btn.hover\:btn-white:hover span,
/* `h2[data-ns-animate]` couvre TOUT titre anime, quelle que soit la surface qui
   le porte, et il y en a qui ne suivent pas le theme. Mesure du 2026-08-09, les
   deux instruments d'accord a 0,04 pres : sur `/a-propos`, le titre « Memoire »
   est pose sur une carte `bg-secondary`, sombre dans les DEUX themes ; la regle
   le peignait en #111712, soit exactement la couleur de son fond — ratio 1,00,
   titre strictement invisible en theme clair.

   Le titre portait pourtant deja sa couleur : `text-accent`. C'est le
   `!important` de cette regle qui la lui reprenait. L'exclusion ci-dessous rend
   la main aux titres qui declarent leur couleur, et ne change rien aux autres. */
h2[data-ns-animate]:not([class*="text-accent"]):not([class*="text-primary"]),
h2[data-ns-animate] span:not(.text-primary-500),
.text-secondary {
  color: #111712 !important;
}

.dark .btn.btn-white,
.dark a.btn.btn-white,
.dark .btn.btn-white span,
.dark .btn.btn-white-dark,
.dark a.btn.btn-white-dark,
.dark .btn.btn-white-dark span,
.dark .btn.dark\:btn-white-dark,
.dark a.btn.dark\:btn-white-dark,
.dark .btn.dark\:btn-white-dark span,
.dark .btn.dark\:btn-transparent,
.dark a.btn.dark\:btn-transparent,
.dark .btn.dark\:btn-transparent span,
.dark h2[data-ns-animate]:not([class*="text-accent"]):not([class*="text-primary"]),
.dark h2[data-ns-animate] span:not(.text-primary-500),
.dark .text-center > p[data-ns-animate],
.dark .text-secondary {
  color: #ffffff !important;
}

footer .footer-link,
html:not(.dark) footer .footer-link,
html.dark footer .footer-link {
  color: #ffffff !important;
}

footer .footer-link:before,
html:not(.dark) footer .footer-link:before,
html.dark footer .footer-link:before {
  background-color: #ffffff !important;
}

footer p[class*="text-primary-50"],
html:not(.dark) footer p[class*="text-primary-50"],
html.dark footer p[class*="text-primary-50"] {
  color: #ffffff !important;
}

footer > figure {
  z-index: 0;
}

footer .main-container {
  position: relative;
  z-index: 1;
}

html:not(.dark) a.btn[class~="btn-white"],
html:not(.dark) a.btn[class~="btn-white"] span {
  color: #111712 !important;
}

html.dark a.btn[class~="dark:btn-white-dark"],
html.dark a.btn[class~="dark:btn-white-dark"] span,
html.dark a.btn[class~="dark:btn-transparent"],
html.dark a.btn[class~="dark:btn-transparent"] span {
  color: #ffffff !important;
}

.dark .header-one a,
.dark .header-one a span,
.dark .header-one .nav-arrow,
.dark .header-one .nav-arrow svg,
.dark .header-one .dropdown-menu,
.dark .header-one .dropdown-menu p,
.dark .header-one .dropdown-menu span,
.dark .header-one .dropdown-menu a,
.dark .sidebar,
.dark .sidebar a,
.dark .sidebar span,
.dark .sidebar p {
  color: #ffffff !important;
  stroke: #ffffff !important;
}

.dark .header-one [class*="text-secondary"],
.dark .header-one [class*="dark:text-accent"],
.dark .sidebar [class*="text-secondary"],
.dark .sidebar [class*="dark:text-accent"] {
  color: #ffffff !important;
}

html:not(.dark) .header-one nav a,
html:not(.dark) .header-one nav a span,
html:not(.dark) .header-one .dropdown-menu p,
html:not(.dark) .header-one .dropdown-menu span,
html:not(.dark) .header-one .dropdown-menu a,
html:not(.dark) .sidebar a,
html:not(.dark) .sidebar span,
html:not(.dark) .sidebar p {
  color: #111712 !important;
}

html.dark .header-one a[class*="text-secondary"],
html.dark .header-one a[class*="dark:text-accent"],
html.dark .header-one a[class*="text-secondary"] span,
html.dark .header-one a[class*="dark:text-accent"] span,
html.dark .header-one .dropdown-menu [class*="text-secondary"],
html.dark .header-one .dropdown-menu [class*="dark:text-accent"],
html.dark .sidebar [class*="text-secondary"],
html.dark .sidebar [class*="dark:text-accent"] {
  color: #ffffff !important;
}

html.dark .header-one a[class*="text-secondary"] svg,
html.dark .header-one a[class*="dark:text-accent"] svg {
  color: #ffffff !important;
  stroke: #ffffff !important;
}

a.btn[class~="hover:btn-secondary"]:hover,
a.btn[class~="hover:btn-secondary"]:hover span {
  color: #ffffff !important;
}

html.dark a.btn[class~="dark:hover:btn-accent"]:hover,
html.dark a.btn[class~="dark:hover:btn-accent"]:hover span,
html.dark a.btn[class~="dark:hover:text-secondary"]:hover,
html.dark a.btn[class~="dark:hover:text-secondary"]:hover span {
  color: #111712 !important;
}
html.light body .header-one nav ul li > a[class*="text-secondary"],
html.light body .header-one nav ul li > a[class*="text-secondary"] span,
html:not(.dark) body .header-one nav ul li > a[class*="text-secondary"],
html:not(.dark) body .header-one nav ul li > a[class*="text-secondary"] span {
  color: #111712 !important;
}

html.dark body .header-one nav ul li > a[class*="text-secondary"],
html.dark body .header-one nav ul li > a[class*="text-secondary"] span,
html.dark body .header-one nav ul li > a[class*="dark:text-accent"],
html.dark body .header-one nav ul li > a[class*="dark:text-accent"] span {
  color: #ffffff !important;
}

html.light .header-one nav a,
html.light .header-one nav a span,
html:not(.dark) .header-one nav a,
html:not(.dark) .header-one nav a span {
  color: #111712 !important;
}

html.dark .header-one nav a,
html.dark .header-one nav a span,
html.dark .header-one .dropdown-menu a,
html.dark .header-one .dropdown-menu a span,
html.dark .header-one .dropdown-menu p {
  color: #ffffff !important;
}

html.light footer .footer-link,
html.light footer .footer-link span,
html:not(.dark) footer .footer-link,
html:not(.dark) footer .footer-link span,
html.dark footer .footer-link,
html.dark footer .footer-link span {
  color: #ffffff !important;
}

.moko-footer-grid {
  display: grid;
  grid-template-columns: minmax(220px, 1.25fr) repeat(4, minmax(138px, 0.9fr));
  gap: 42px 48px;
  align-items: start;
}

.moko-footer-brand,
.moko-footer-group {
  min-width: 0;
}

.moko-footer-group p,
.moko-footer-group a {
  white-space: nowrap;
}

@media (max-width: 1279px) {
  .moko-footer-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    justify-items: center;
    text-align: left;
  }

  .moko-footer-brand,
  .moko-footer-group {
    width: min(100%, 260px);
  }
}

@media (max-width: 767px) {
  .moko-footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-items: start;
  }

  .moko-footer-brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 520px) {
  .moko-footer-grid {
    grid-template-columns: 1fr;
  }

  .moko-footer-brand,
  .moko-footer-group {
    width: 100%;
  }
}

a.btn[class~="btn-primary"],
a.btn[class~="btn-primary"] span,
a.btn[class~="btn-secondary"],
a.btn[class~="btn-secondary"] span,
a.btn[class~="btn-white-dark"],
a.btn[class~="btn-white-dark"] span,
a.btn[class~="hover:btn-primary"]:hover,
a.btn[class~="hover:btn-primary"]:hover span,
a.btn[class~="hover:btn-secondary"]:hover,
a.btn[class~="hover:btn-secondary"]:hover span,
a.btn[class~="hover:btn-white-dark"]:hover,
a.btn[class~="hover:btn-white-dark"]:hover span {
  color: #ffffff !important;
}

a.btn[class~="btn-white"],
a.btn[class~="btn-white"] span,
button.btn[class~="btn-white"],
button.btn[class~="btn-white"] span,
a.btn[class~="btn-accent"],
a.btn[class~="btn-accent"] span,
button.btn[class~="btn-accent"],
button.btn[class~="btn-accent"] span,
a.btn[class~="hover:btn-white"]:hover,
a.btn[class~="hover:btn-white"]:hover span,
button.btn[class~="hover:btn-white"]:hover,
button.btn[class~="hover:btn-white"]:hover span,
a.btn[class~="hover:btn-accent"]:hover,
a.btn[class~="hover:btn-accent"]:hover span,
button.btn[class~="hover:btn-accent"]:hover,
button.btn[class~="hover:btn-accent"]:hover span {
  color: #111712 !important;
}

html.dark a.btn[class~="dark:btn-primary"],
html.dark a.btn[class~="dark:btn-primary"] span,
html.dark a.btn[class~="dark:btn-white-dark"],
html.dark a.btn[class~="dark:btn-white-dark"] span,
html.dark a.btn[class~="dark:btn-transparent"],
html.dark a.btn[class~="dark:btn-transparent"] span,
html.dark a.btn[class~="dark:hover:btn-primary"]:hover,
html.dark a.btn[class~="dark:hover:btn-primary"]:hover span,
html.dark a.btn[class~="dark:hover:btn-secondary"]:hover,
html.dark a.btn[class~="dark:hover:btn-secondary"]:hover span,
html.dark a.btn[class~="dark:hover:btn-white-dark"]:hover,
html.dark a.btn[class~="dark:hover:btn-white-dark"]:hover span {
  color: #ffffff !important;
}

html.dark a.btn[class~="dark:btn-white"],
html.dark a.btn[class~="dark:btn-white"] span,
html.dark a.btn[class~="dark:btn-accent"],
html.dark a.btn[class~="dark:btn-accent"] span,
html.dark a.btn[class~="dark:hover:btn-white"]:hover,
html.dark a.btn[class~="dark:hover:btn-white"]:hover span,
html.dark a.btn[class~="dark:hover:btn-accent"]:hover,
html.dark a.btn[class~="dark:hover:btn-accent"]:hover span,
html.dark a.btn[class~="dark:hover:text-secondary"]:hover,
html.dark a.btn[class~="dark:hover:text-secondary"]:hover span {
  color: #111712 !important;
}
/* Final hover contrast lock for imported theme buttons. */
html:not(.dark) a.btn[class~="hover:btn-primary"]:hover,
html:not(.dark) a.btn[class~="hover:btn-primary"]:hover span {
  color: #ffffff !important;
}

html:not(.dark) a.btn[class~="hover:btn-primary"]:hover {
  background-color: var(--color-primary-500) !important;
  border-color: var(--color-primary-500) !important;
}

html:not(.dark) a.btn[class~="hover:btn-secondary"]:hover,
html:not(.dark) a.btn[class~="hover:btn-secondary"]:hover span,
html:not(.dark) a.btn[class~="hover:btn-white-dark"]:hover,
html:not(.dark) a.btn[class~="hover:btn-white-dark"]:hover span {
  color: #ffffff !important;
}

html:not(.dark) a.btn[class~="hover:btn-secondary"]:hover {
  background-color: #111712 !important;
  border-color: #111712 !important;
}

html:not(.dark) a.btn[class~="hover:btn-white-dark"]:hover {
  background-color: var(--color-background-6) !important;
  border-color: var(--color-stroke-7) !important;
}

html:not(.dark) a.btn[class~="hover:btn-white"]:hover,
html:not(.dark) a.btn[class~="hover:btn-white"]:hover span,
html:not(.dark) a.btn[class~="hover:btn-accent"]:hover,
html:not(.dark) a.btn[class~="hover:btn-accent"]:hover span {
  color: #111712 !important;
}

html:not(.dark) a.btn[class~="hover:btn-white"]:hover {
  background-color: var(--color-background-1) !important;
  border-color: var(--color-stroke-3) !important;
}

html:not(.dark) a.btn[class~="hover:btn-accent"]:hover {
  background-color: var(--color-accent) !important;
  border-color: var(--color-stroke-3) !important;
}

html.dark a.btn[class~="dark:hover:btn-primary"]:hover,
html.dark a.btn[class~="dark:hover:btn-primary"]:hover span {
  color: #ffffff !important;
}

html.dark a.btn[class~="dark:hover:btn-primary"]:hover {
  background-color: var(--color-primary-500) !important;
  border-color: var(--color-primary-500) !important;
}

html.dark a.btn[class~="dark:hover:btn-secondary"]:hover,
html.dark a.btn[class~="dark:hover:btn-secondary"]:hover span,
html.dark a.btn[class~="dark:hover:btn-white-dark"]:hover,
html.dark a.btn[class~="dark:hover:btn-white-dark"]:hover span {
  color: #ffffff !important;
}

html.dark a.btn[class~="dark:hover:btn-secondary"]:hover {
  background-color: #111712 !important;
  border-color: #111712 !important;
}

html.dark a.btn[class~="dark:hover:btn-white-dark"]:hover {
  background-color: var(--color-background-6) !important;
  border-color: var(--color-stroke-7) !important;
}

html.dark a.btn[class~="dark:hover:btn-white"]:hover,
html.dark a.btn[class~="dark:hover:btn-white"]:hover span,
html.dark a.btn[class~="dark:hover:btn-accent"]:hover,
html.dark a.btn[class~="dark:hover:btn-accent"]:hover span,
html.dark a.btn[class~="dark:hover:text-secondary"]:hover,
html.dark a.btn[class~="dark:hover:text-secondary"]:hover span {
  color: #111712 !important;
}

html.dark a.btn[class~="dark:hover:btn-white"]:hover {
  background-color: var(--color-background-1) !important;
  border-color: var(--color-stroke-3) !important;
}

html.dark a.btn[class~="dark:hover:btn-accent"]:hover {
  background-color: var(--color-accent) !important;
  border-color: var(--color-stroke-3) !important;
}

.moko-pricing-price {
  color: #ffffff;
  font-size: clamp(34px, 5vw, 52px);
  font-weight: 500;
  line-height: 1;
}

.moko-pricing h2[data-ns-animate],
.moko-pricing h2[data-ns-animate] span:not(.text-primary-500),
.moko-pricing p[data-ns-animate],
.moko-pricing h3,
.moko-pricing h4 {
  color: #ffffff !important;
}

.moko-home-process .badge,
html.dark .moko-home-process .badge {
  color: #f2c14e !important;
}

.moko-home-process h2.moko-home-process-title[data-ns-animate],
.moko-home-process h2.moko-home-process-title[data-ns-animate] span:not(.text-primary-500),
html.dark .moko-home-process h2.moko-home-process-title[data-ns-animate],
html.dark .moko-home-process h2.moko-home-process-title[data-ns-animate] span:not(.text-primary-500) {
  color: #ffffff !important;
}

.moko-pricing-list li {
  position: relative;
  padding-left: 30px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 16px;
  line-height: 1.55;
}

.moko-pricing-list li::before {
  position: absolute;
  top: 7px;
  left: 0;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  content: "";
  background: var(--color-primary-500);
}

.moko-pricing-list li::after {
  position: absolute;
  top: 10px;
  left: 5px;
  width: 5px;
  height: 8px;
  border-right: 2px solid #ffffff;
  border-bottom: 2px solid #ffffff;
  content: "";
  transform: rotate(45deg);
}

.moko-nclc-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  max-width: 1100px;
  margin: 0 auto;
}

@media (min-width: 900px) {
  .moko-nclc-grid {
    grid-template-columns: minmax(0, 1fr) minmax(320px, 0.8fr);
  }
}

.moko-nclc-panel,
.moko-nclc-result,
.moko-nclc-table-wrap {
  border: 1px solid var(--color-stroke-2);
  border-radius: 20px;
  background: #ffffff;
  box-shadow: 0 18px 70px rgba(17, 23, 18, 0.08);
}

html.dark .moko-nclc-panel,
html.dark .moko-nclc-result,
html.dark .moko-nclc-table-wrap {
  border-color: var(--color-stroke-7);
  background: var(--color-background-7);
}

.moko-nclc-panel,
.moko-nclc-result {
  padding: 24px;
}

.moko-nclc-fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}

@media (min-width: 640px) {
  .moko-nclc-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.moko-nclc-field span {
  display: block;
  margin-bottom: 8px;
  color: rgba(17, 23, 18, 0.72);
  font-size: 14px;
  font-weight: 500;
}

html.dark .moko-nclc-field span {
  color: rgba(255, 255, 255, 0.72);
}

.moko-nclc-field input {
  width: 100%;
  min-height: 46px;
  border: 1px solid var(--color-stroke-2);
  border-radius: 12px;
  background: transparent;
  color: var(--color-secondary);
  padding: 0 14px;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

html.dark .moko-nclc-field input {
  border-color: var(--color-stroke-7);
  color: #ffffff;
}

.moko-nclc-field input:focus {
  border-color: var(--color-primary-500);
  box-shadow: 0 0 0 4px rgba(47, 125, 82, 0.14);
}

.moko-nclc-field input.is-invalid {
  border-color: #dc2626;
  box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.12);
}

.moko-nclc-result {
  display: flex;
  align-items: center;
  min-height: 220px;
}

.moko-nclc-empty,
.moko-nclc-output {
  width: 100%;
}

.moko-nclc-empty span {
  display: inline-flex;
  min-width: 72px;
  min-height: 72px;
  align-items: center;
  justify-content: center;
  border-radius: 18px;
  background: var(--color-primary-500);
  color: #ffffff;
  font-size: 24px;
  font-weight: 600;
}

.moko-nclc-title {
  margin-bottom: 18px;
  color: var(--color-secondary);
  font-size: 24px;
  font-weight: 600;
}

html.dark .moko-nclc-title {
  color: #ffffff;
}

.moko-nclc-final {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border-radius: 18px;
  background: linear-gradient(90deg, #111712, #2455ef);
  padding: 22px 24px;
  color: #ffffff;
}

.moko-nclc-final strong,
.moko-nclc-final span {
  display: block;
  color: #ffffff !important;
}

.moko-nclc-final strong {
  font-size: 24px;
  font-weight: 650;
}

.moko-nclc-final span {
  margin-top: 4px;
  font-size: 15px;
  opacity: 0.82;
}

.moko-nclc-final b {
  display: inline-flex;
  min-width: 92px;
  min-height: 72px;
  align-items: center;
  justify-content: center;
  border-radius: 18px;
  background: #ffffff;
  color: #111712;
  font-size: 22px;
  font-weight: 700;
}

.moko-nclc-final-warning {
  background: linear-gradient(90deg, #111712, #dc2626);
}

.moko-nclc-final-warning b {
  color: #dc2626;
}

.moko-nclc-empty p,
.moko-nclc-note {
  margin-top: 16px;
  color: rgba(17, 23, 18, 0.66);
  font-size: 15px;
  line-height: 1.55;
}

html.dark .moko-nclc-empty p,
html.dark .moko-nclc-note {
  color: rgba(255, 255, 255, 0.68);
}

.moko-nclc-result-list {
  display: grid;
  gap: 12px;
  margin-top: 18px;
}

.moko-nclc-result-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border: 1px solid var(--color-stroke-2);
  border-radius: 16px;
  background: #ffffff;
  padding: 14px 16px;
  color: rgba(17, 23, 18, 0.74);
  font-size: 15px;
}

html.dark .moko-nclc-result-row {
  border-color: var(--color-stroke-7);
  background: var(--color-background-6);
  color: rgba(255, 255, 255, 0.74);
}

.moko-nclc-result-row span strong,
.moko-nclc-result-row span small {
  display: block;
}

.moko-nclc-result-row span strong {
  color: var(--color-secondary);
  font-weight: 600;
}

.moko-nclc-result-row span small {
  margin-top: 3px;
  color: rgba(17, 23, 18, 0.64);
  font-size: 13px;
}

html.dark .moko-nclc-result-row span strong {
  color: #ffffff;
}

.moko-nclc-result-row b {
  display: inline-flex;
  min-width: 88px;
  justify-content: center;
  border-radius: 12px;
  background: var(--color-primary-500);
  color: #ffffff;
  padding: 8px 12px;
  font-weight: 700;
  white-space: nowrap;
}

.moko-nclc-result-row b.is-error {
  background: #dc2626;
}

.moko-nclc-table-wrap {
  max-width: 1100px;
  margin: 32px auto 0;
  overflow: hidden;
}

.moko-nclc-table-head {
  background: linear-gradient(90deg, #1f6f46, #245e6c);
  padding: 20px 24px;
  text-align: center;
}

.moko-nclc-table-head h3,
.moko-nclc-table-head p {
  color: #ffffff !important;
}

.moko-nclc-table-head h3 {
  font-size: 22px;
  font-weight: 600;
}

.moko-nclc-table-head p {
  margin-top: 6px;
  font-size: 14px;
  opacity: 0.78;
}

.moko-nclc-table-scroll {
  overflow-x: auto;
}

.moko-nclc-table {
  width: 100%;
  min-width: 680px;
  border-collapse: collapse;
}

.moko-nclc-table th,
.moko-nclc-table td {
  border-bottom: 1px solid var(--color-stroke-2);
  padding: 14px 16px;
  text-align: center;
  color: rgba(17, 23, 18, 0.74);
  font-size: 14px;
}

html.dark .moko-nclc-table th,
html.dark .moko-nclc-table td {
  border-color: var(--color-stroke-7);
  color: rgba(255, 255, 255, 0.74);
}

.moko-nclc-table th {
  background: rgba(47, 125, 82, 0.08);
  color: var(--color-secondary);
  font-weight: 600;
}

html.dark .moko-nclc-table th {
  color: #ffffff;
}

.moko-nclc-table td:first-child span {
  display: inline-flex;
  min-width: 44px;
  justify-content: center;
  border-radius: 10px;
  background: var(--color-primary-500);
  color: #ffffff;
  padding: 6px 8px;
  font-weight: 600;
}

.moko-nclc-source {
  padding: 16px 24px 20px;
  color: rgba(17, 23, 18, 0.64);
  font-size: 13px;
}

html.dark .moko-nclc-source {
  color: rgba(255, 255, 255, 0.64);
}

.moko-nclc-source a {
  color: var(--moko-texte-vert);
  font-weight: 600;
}

.moko-page-hero h1 {
  color: #ffffff !important;
  font-size: clamp(44px, 7vw, 82px);
  line-height: 1.05;
}

.moko-page-hero p {
  color: rgba(255, 255, 255, 0.72) !important;
  opacity: 1 !important;
  filter: none !important;
  transform: none !important;
}

.moko-public-card,
.moko-legal-block {
  border: 1px solid var(--color-stroke-2);
  border-radius: 20px;
  background: #ffffff;
  padding: 28px;
  box-shadow: 0 18px 70px rgba(17, 23, 18, 0.08);
}

html.dark .moko-public-card,
html.dark .moko-legal-block {
  border-color: var(--color-stroke-7);
  background: var(--color-background-7);
}

.moko-public-card-index {
  display: inline-flex;
  min-width: 46px;
  min-height: 34px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(47, 125, 82, 0.12);
  color: var(--moko-texte-vert);
  font-size: 14px;
  font-weight: 700;
}

.moko-public-card h2,
.moko-legal-block h2 {
  margin-top: 18px;
  color: var(--color-secondary);
  font-size: 24px;
  font-weight: 500;
  line-height: 1.2;
}

.moko-legal-block h2 {
  margin-top: 0;
}

html.dark .moko-public-card h2,
html.dark .moko-legal-block h2 {
  color: #ffffff;
}

.moko-public-card p,
.moko-legal-block p {
  margin-top: 12px;
  color: rgba(17, 23, 18, 0.64);
  font-size: 16px;
  line-height: 1.65;
}

html.dark .moko-public-card p,
html.dark .moko-legal-block p {
  color: rgba(255, 255, 255, 0.66);
}

/* Le gabarit masque aussi les menus avec `visibility`. Au clavier, le focus
   doit restaurer cette propriete comme le fait deja l'etat actif au survol. */
@media (min-width: 1280px) {
  .nav-item:focus-within .mega-menu,
  .nav-item:focus-within .dropdown-menu {
    visibility: visible;
  }
}

.moko-mega-menu,
.moko-mega-menu-bridge {
  width: min(940px, calc(100vw - 40px));
}

.moko-mega-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 16px;
  align-items: stretch;
}

@media (min-width: 1280px) {
  html body header .moko-mega-menu {
    position: fixed !important;
    top: 92px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    translate: none !important;
  }
}

.moko-mega-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
}

.moko-menu-icon,
.moko-mobile-menu-icon {
  position: relative;
  z-index: 10;
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-stroke-1);
  border-radius: 10px;
  background: #ffffff;
  box-shadow: 0 10px 30px rgba(17, 23, 18, 0.08);
  transition: background-color 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
}

.moko-menu-icon {
  width: 44px;
  height: 44px;
  margin-top: 4px;
  padding: 11px;
}

.moko-mobile-menu-icon {
  width: 36px;
  height: 36px;
  padding: 9px;
}

.moko-menu-icon svg,
.moko-mobile-menu-icon svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

html.dark .moko-menu-icon,
html.dark .moko-mobile-menu-icon {
  border-color: var(--color-background-7);
  background: var(--color-background-6);
}

.moko-menu-icon path,
.moko-mobile-menu-icon path {
  transition: fill 200ms ease, stroke 200ms ease;
}

html body header .moko-menu-icon .stroke-secondary,
html body header .moko-mobile-menu-icon .stroke-secondary {
  stroke: var(--color-secondary) !important;
}

html body header .moko-menu-icon .fill-secondary,
html body header .moko-mobile-menu-icon .fill-secondary {
  fill: var(--color-secondary) !important;
}

html.dark body header .moko-menu-icon .dark\:stroke-accent,
html.dark body header .moko-mobile-menu-icon .dark\:stroke-accent {
  stroke: var(--color-accent) !important;
}

html.dark body header .moko-menu-icon .dark\:fill-accent,
html.dark body header .moko-mobile-menu-icon .dark\:fill-accent {
  fill: var(--color-accent) !important;
}

html body header .moko-mega-link:hover,
html body header .moko-mega-link:focus-visible {
  color: var(--color-secondary) !important;
}

html body header .moko-mega-link:hover .moko-mega-title,
html body header .moko-mega-link:focus-visible .moko-mega-title {
  color: var(--color-secondary) !important;
}

html body header .moko-mega-link:hover .moko-mega-description,
html body header .moko-mega-link:focus-visible .moko-mega-description {
  color: rgba(17, 23, 18, 0.64) !important;
}

html body header .moko-mega-link:hover .moko-menu-icon,
html body header .moko-mega-link:focus-visible .moko-menu-icon {
  border-color: rgba(47, 125, 82, 0.24);
  background: #ffffff;
  box-shadow: 0 12px 34px rgba(17, 23, 18, 0.1);
}

html.dark body header .moko-mega-link:hover .moko-mega-title,
html.dark body header .moko-mega-link:focus-visible .moko-mega-title {
  color: var(--color-accent) !important;
}

html.dark body header .moko-mega-link:hover .moko-mega-description,
html.dark body header .moko-mega-link:focus-visible .moko-mega-description {
  color: rgba(255, 255, 255, 0.62) !important;
}

html.dark body header .moko-mega-link:hover .moko-menu-icon,
html.dark body header .moko-mega-link:focus-visible .moko-menu-icon {
  border-color: rgba(255, 255, 255, 0.14);
  background: var(--color-background-6);
}

html body header .moko-mobile-menu-link {
  border-radius: 12px;
  padding-right: 12px;
  padding-left: 12px;
}

html body header .moko-mobile-menu-link:hover,
html body header .moko-mobile-menu-link:focus-visible {
  background: var(--color-background-3);
  color: var(--color-secondary) !important;
}

html body header .moko-mobile-menu-link:hover .moko-mobile-menu-label,
html body header .moko-mobile-menu-link:focus-visible .moko-mobile-menu-label {
  color: var(--color-secondary) !important;
}

html.dark body header .moko-mobile-menu-link:hover,
html.dark body header .moko-mobile-menu-link:focus-visible {
  background: var(--color-background-7);
  color: var(--color-accent) !important;
}

html.dark body header .moko-mobile-menu-link:hover .moko-mobile-menu-label,
html.dark body header .moko-mobile-menu-link:focus-visible .moko-mobile-menu-label {
  color: var(--color-accent) !important;
}

.moko-mega-promo {
  display: flex;
  min-height: 100%;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  border: 1px solid rgba(47, 125, 82, 0.18);
  border-radius: 18px;
  background:
    radial-gradient(circle at 18% 0%, rgba(204, 255, 97, 0.28), transparent 36%),
    linear-gradient(145deg, #f6faf4, #ffffff);
  padding: 14px;
}

html.dark .moko-mega-promo {
  border-color: rgba(255, 255, 255, 0.12);
  background:
    radial-gradient(circle at 18% 0%, rgba(204, 255, 97, 0.16), transparent 36%),
    linear-gradient(145deg, #172018, #0d130f);
}

.moko-mega-promo figure {
  overflow: hidden;
  border-radius: 14px;
  aspect-ratio: 16 / 10;
  background: rgba(47, 125, 82, 0.08);
}

.moko-mega-promo figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.moko-mega-promo h3 {
  margin-top: 14px;
  color: var(--color-secondary);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.15;
}

html.dark .moko-mega-promo h3 {
  color: #ffffff;
}

.moko-mega-promo p {
  margin-top: 8px;
  color: rgba(17, 23, 18, 0.64);
  font-size: 13px;
  line-height: 1.45;
}

html.dark .moko-mega-promo p {
  color: rgba(255, 255, 255, 0.68);
}

.moko-mega-promo-link {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  justify-content: center;
  margin-top: 14px;
  border-radius: 999px;
  background: var(--moko-btn-primary-bg);
  color: #ffffff !important;
  padding: 9px 14px;
  font-size: 12px;
  font-weight: 800;
  transition: background-color 200ms ease, color 200ms ease;
}

html body header .moko-mega-promo .moko-mega-promo-link:hover,
html body header .moko-mega-promo .moko-mega-promo-link:focus-visible {
  background: var(--color-secondary);
  border-color: var(--color-secondary);
  color: #ffffff !important;
}

html.dark body header .moko-mega-promo .moko-mega-promo-link:hover,
html.dark body header .moko-mega-promo .moko-mega-promo-link:focus-visible {
  background: #ffffff;
  border-color: #ffffff;
  color: var(--color-secondary) !important;
}

html body header .moko-mega-promo .moko-mega-promo-link:hover *,
html body header .moko-mega-promo .moko-mega-promo-link:focus-visible * {
  color: inherit !important;
  fill: currentColor !important;
  stroke: currentColor !important;
}

.moko-public-figure {
  overflow: hidden;
  border-radius: 20px;
  background: var(--color-background-3);
  aspect-ratio: 4 / 3;
}

.moko-public-figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.moko-public-copy h2 {
  color: var(--color-secondary);
  font-size: clamp(34px, 5vw, 56px);
  font-weight: 500;
  line-height: 1.05;
}

html.dark .moko-public-copy h2 {
  color: #ffffff;
}

.moko-public-copy p {
  margin-top: 20px;
  color: rgba(17, 23, 18, 0.66);
  font-size: 17px;
  line-height: 1.7;
}

html.dark .moko-public-copy p {
  color: rgba(255, 255, 255, 0.66);
}

.moko-public-copy ul {
  margin-top: 26px;
  display: grid;
  gap: 14px;
}

.moko-public-copy li {
  position: relative;
  padding-left: 30px;
  color: rgba(17, 23, 18, 0.74);
  font-size: 16px;
  line-height: 1.55;
}

html.dark .moko-public-copy li {
  color: rgba(255, 255, 255, 0.74);
}

.moko-public-copy li::before {
  position: absolute;
  top: 7px;
  left: 0;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: var(--color-primary-500);
  content: "";
}

.moko-epreuve-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: center;
}

@media (min-width: 1024px) {
  .moko-epreuve-row {
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    gap: 56px;
  }

  .moko-epreuve-row.is-reversed .moko-epreuve-figure {
    order: 2;
  }

  .moko-epreuve-row.is-reversed .moko-epreuve-copy {
    order: 1;
  }
}

.moko-epreuve-figure {
  border: 1px solid var(--color-stroke-2);
  background:
    radial-gradient(circle at 18% 18%, rgba(204, 255, 97, 0.28), transparent 34%),
    linear-gradient(135deg, #f6faf4, #ffffff);
}

html.dark .moko-epreuve-figure {
  border-color: var(--color-stroke-7);
  background:
    radial-gradient(circle at 18% 18%, rgba(204, 255, 97, 0.18), transparent 34%),
    linear-gradient(135deg, #121a14, #0b100c);
}

.moko-epreuve-figure img {
  padding: 22px;
  object-fit: contain;
}

.moko-epreuve-format {
  border-left: 4px solid var(--color-primary-500);
  padding-left: 16px;
}

.moko-epreuve-format strong {
  color: var(--color-secondary);
  font-weight: 700;
}

html.dark .moko-epreuve-format strong {
  color: #ffffff;
}

.moko-epreuve-detail-grid {
  display: grid;
  gap: 16px;
  margin-top: 24px;
}

@media (min-width: 768px) {
  .moko-epreuve-detail-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.moko-epreuve-detail-card {
  border: 1px solid var(--color-stroke-2);
  border-radius: 18px;
  background: #ffffff;
  padding: 20px;
}

html.dark .moko-epreuve-detail-card {
  border-color: var(--color-stroke-7);
  background: var(--color-background-7);
}

.moko-epreuve-detail-card h3 {
  color: var(--color-secondary);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.25;
}

html.dark .moko-epreuve-detail-card h3 {
  color: #ffffff;
}

.moko-epreuve-detail-card p {
  margin-top: 10px;
  font-size: 15px;
  line-height: 1.6;
}

.moko-epreuve-detail-card ul {
  margin-top: 12px;
  gap: 10px;
}

.moko-epreuve-detail-card li {
  font-size: 15px;
}

.moko-epreuve-secondary-card {
  display: flex;
  min-height: 100%;
  flex-direction: column;
  align-items: flex-start;
}

.moko-epreuve-secondary-card a {
  margin-top: auto;
}

.moko-public-cta {
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: flex-start;
  justify-content: space-between;
  border-radius: 20px;
  background: var(--color-secondary);
  padding: 32px;
}

@media (min-width: 768px) {
  .moko-public-cta {
    flex-direction: row;
    align-items: center;
    padding: 42px;
  }
}

.moko-public-cta h2,
.moko-public-cta p {
  color: #ffffff !important;
}

.moko-public-cta h2 {
  font-size: clamp(30px, 4vw, 46px);
  font-weight: 500;
}

.moko-public-cta p {
  margin-top: 12px;
  max-width: 620px;
  opacity: 0.72;
}

/* Final contrast lock for imported pill links using group-hover backgrounds. */
.group:hover a[class*="group-hover:bg-primary-500"],
.group:hover a[class*="group-hover:bg-primary-500"] span,
.group:hover a[class*="group-hover:bg-primary-500"] svg,
.group:hover a[class*="group-hover:bg-primary-500"] path,
a[class*="group-hover:bg-primary-500"]:hover,
a[class*="group-hover:bg-primary-500"]:hover span,
a[class*="group-hover:bg-primary-500"]:hover svg,
a[class*="group-hover:bg-primary-500"]:hover path {
  color: #ffffff !important;
  fill: #ffffff !important;
  stroke: #ffffff !important;
}

html body .group:hover a[class~="group-hover:text-white"],
html body .group:hover a[class~="group-hover:text-white"] span,
html body .group:hover a[class~="group-hover:text-white"] svg,
html body .group:hover a[class~="group-hover:text-white"] path,
html body a[class~="group-hover:text-white"]:hover,
html body a[class~="group-hover:text-white"]:hover span,
html body a[class~="group-hover:text-white"]:hover svg,
html body a[class~="group-hover:text-white"]:hover path,
html body .group:hover .group-hover\:text-white,
html body .group:hover .group-hover\:text-white span,
html body .group:hover .group-hover\:text-white svg,
html body .group:hover .group-hover\:text-white path {
  color: #ffffff !important;
  fill: #ffffff !important;
  stroke: #ffffff !important;
}

.group:hover a[class*="group-hover:bg-primary-500"],
a[class*="group-hover:bg-primary-500"]:hover {
  background-color: var(--color-primary-500) !important;
  border-color: var(--color-primary-500) !important;
}

.moko-token-panel,
.moko-checkout-card,
.moko-checkout-summary,
.moko-centre-card,
.moko-session-table-wrap,
.moko-tarif-card,
.moko-tarifs-note {
  border: 1px solid var(--color-stroke-2);
  border-radius: 20px;
  background: #ffffff;
  box-shadow: 0 18px 70px rgba(17, 23, 18, 0.08);
}

html.dark .moko-token-panel,
html.dark .moko-checkout-card,
html.dark .moko-checkout-summary,
html.dark .moko-centre-card,
html.dark .moko-session-table-wrap,
html.dark .moko-tarif-card,
html.dark .moko-tarifs-note {
  border-color: var(--color-stroke-7);
  background: var(--color-background-7);
}

.moko-token-panel,
.moko-checkout-card,
.moko-checkout-summary,
.moko-tarif-card,
.moko-tarifs-note {
  padding: 28px;
}

.moko-token-panel h2,
.moko-checkout-card h2,
.moko-checkout-summary h2,
.moko-centre-card h2,
.moko-tarif-card h2,
.moko-tarifs-note h2 {
  color: var(--color-secondary);
  font-size: 24px;
  font-weight: 600;
  line-height: 1.2;
}

html.dark .moko-token-panel h2,
html.dark .moko-checkout-card h2,
html.dark .moko-checkout-summary h2,
html.dark .moko-centre-card h2,
html.dark .moko-tarif-card h2,
html.dark .moko-tarifs-note h2 {
  color: #ffffff;
}

.moko-token-panel p,
.moko-token-panel li,
.moko-checkout-card p,
.moko-checkout-summary p,
.moko-centre-card p,
.moko-centre-card address,
.moko-tarif-card p,
.moko-tarif-card li,
.moko-tarifs-note p {
  color: rgba(17, 23, 18, 0.66);
  line-height: 1.65;
}

html.dark .moko-token-panel p,
html.dark .moko-token-panel li,
html.dark .moko-checkout-card p,
html.dark .moko-checkout-summary p,
html.dark .moko-centre-card p,
html.dark .moko-centre-card address,
html.dark .moko-tarif-card p,
html.dark .moko-tarif-card li,
html.dark .moko-tarifs-note p {
  color: rgba(255, 255, 255, 0.68);
}

.moko-tarifs-grid {
  display: grid;
  gap: 18px;
}

@media (min-width: 768px) {
  .moko-tarifs-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1180px) {
  .moko-tarifs-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.moko-tarif-card {
  display: flex;
  min-height: 100%;
  flex-direction: column;
  gap: 18px;
}

.moko-tarif-card.is-featured {
  background: var(--color-secondary);
}

html.dark .moko-tarif-card.is-featured {
  background: #ffffff;
}

.moko-tarif-card > span {
  width: fit-content;
  border-radius: 999px;
  background: rgba(47, 125, 82, 0.1);
  color: var(--moko-texte-vert);
  padding: 7px 11px;
  font-size: 12px;
  font-weight: 700;
}

.moko-tarif-card > strong {
  color: var(--moko-texte-vert);
  font-size: 32px;
  line-height: 1;
}

.moko-tarif-card ul {
  display: grid;
  gap: 10px;
  margin-bottom: auto;
}

.moko-tarif-card li {
  position: relative;
  padding-left: 22px;
}

.moko-tarif-card li::before {
  position: absolute;
  top: 8px;
  left: 0;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--color-primary-500);
  content: "";
}

.moko-tarif-card.is-featured h2,
.moko-tarif-card.is-featured p,
.moko-tarif-card.is-featured li {
  color: #ffffff !important;
}

html.dark .moko-tarif-card.is-featured h2,
html.dark .moko-tarif-card.is-featured p,
html.dark .moko-tarif-card.is-featured li {
  color: var(--color-secondary) !important;
}

.moko-tarifs-note {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  align-items: flex-start;
  justify-content: space-between;
}

@media (min-width: 768px) {
  .moko-tarifs-note {
    flex-direction: row;
    align-items: center;
  }
}

.moko-pricing-detail-panel,
.moko-pricing-compare,
.moko-pricing-specifics article {
  border: 1px solid var(--color-stroke-2);
  border-radius: 20px;
  background: #ffffff;
  box-shadow: 0 18px 70px rgba(17, 23, 18, 0.08);
}

html.dark .moko-pricing-detail-panel,
html.dark .moko-pricing-compare,
html.dark .moko-pricing-specifics article {
  border-color: var(--color-stroke-7);
  background: var(--color-background-7);
}

.moko-pricing-detail-panel {
  padding: 24px;
}

.moko-pricing-detail-head,
.moko-pricing-compare-head {
  display: flex;
  flex-direction: column;
  gap: 22px;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 26px;
}

.moko-pricing-detail-head h2,
.moko-pricing-compare-head h2,
.moko-pricing-specifics h2 {
  color: var(--color-secondary);
  font-size: clamp(28px, 3vw, 42px);
  font-weight: 600;
  line-height: 1.08;
}

html.dark .moko-pricing-detail-head h2,
html.dark .moko-pricing-compare-head h2,
html.dark .moko-pricing-specifics h2 {
  color: #ffffff;
}

.moko-pricing-detail-head p,
.moko-pricing-compare-head p,
.moko-pricing-specifics p,
.moko-pricing-specifics li,
.moko-plan-limit,
.moko-plan-meta small {
  color: rgba(17, 23, 18, 0.66);
  line-height: 1.65;
}

html.dark .moko-pricing-detail-head p,
html.dark .moko-pricing-compare-head p,
html.dark .moko-pricing-specifics p,
html.dark .moko-pricing-specifics li,
html.dark .moko-plan-limit,
html.dark .moko-plan-meta small {
  color: rgba(255, 255, 255, 0.68);
}

.moko-tarifs-detail-grid {
  display: grid;
  gap: 18px;
}

.moko-plan-detail-card {
  min-height: 520px;
}

.moko-plan-meta {
  display: grid;
  gap: 6px;
  border-top: 1px solid rgba(17, 23, 18, 0.1);
  border-bottom: 1px solid rgba(17, 23, 18, 0.1);
  padding: 14px 0;
}

html.dark .moko-plan-meta {
  border-color: rgba(255, 255, 255, 0.12);
}

.moko-plan-meta b {
  color: var(--color-secondary);
  font-size: 14px;
  font-weight: 700;
}

html.dark .moko-plan-meta b {
  color: #ffffff;
}

.moko-tarif-card.is-featured .moko-plan-meta,
.moko-tarif-card.is-featured .moko-plan-limit {
  border-color: rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.78) !important;
}

html.dark .moko-tarif-card.is-featured .moko-plan-meta,
html.dark .moko-tarif-card.is-featured .moko-plan-limit {
  border-color: rgba(17, 23, 18, 0.12);
  color: rgba(17, 23, 18, 0.68) !important;
}

.moko-tarif-card.is-featured .moko-plan-meta b {
  color: #ffffff !important;
}

html.dark .moko-tarif-card.is-featured .moko-plan-meta b {
  color: var(--color-secondary) !important;
}

/* La carte mise en avant inverse son fond : sombre en theme clair, claire en
   theme sombre. Les deux regles ci-dessus reglaient la couleur du CONTENEUR
   `.moko-plan-meta`, mais `.moko-plan-meta small` porte sa PROPRE declaration
   de couleur (plus haut dans ce fichier). Une couleur heritee, meme en
   `!important`, ne bat jamais une declaration qui vise directement l'element :
   le `small` gardait donc la couleur du theme courant sur un fond inverse.
   Resultat mesure : texte fonce sur carte foncee en clair, texte blanc sur
   carte blanche en sombre, RATIO 1,00 DANS LES DEUX CAS, texte strictement
   invisible. C'est le meme piege que celui deja consigne dans CONVENTIONS.md,
   transpose du systeme de boutons a une carte de tarif.
   Ratios apres correction : 11,21 en clair et 6,30 en sombre. */
.moko-tarif-card.is-featured .moko-plan-meta small {
  color: rgba(255, 255, 255, 0.78) !important;
}

html.dark .moko-tarif-card.is-featured .moko-plan-meta small {
  color: rgba(17, 23, 18, 0.68) !important;
}

.moko-pricing-compare {
  margin-top: 24px;
  padding: 24px;
}

.moko-pricing-table-wrap {
  overflow-x: auto;
}

.moko-pricing-table {
  width: 100%;
  min-width: 900px;
  border-collapse: collapse;
}

.moko-pricing-table th,
.moko-pricing-table td {
  border-bottom: 1px solid var(--color-stroke-2);
  padding: 16px 14px;
  text-align: left;
  vertical-align: top;
}

html.dark .moko-pricing-table th,
html.dark .moko-pricing-table td {
  border-color: var(--color-stroke-7);
}

.moko-pricing-table th {
  color: var(--color-secondary);
  font-size: 14px;
  font-weight: 700;
}

.moko-pricing-table td {
  color: rgba(17, 23, 18, 0.68);
  font-size: 14px;
  line-height: 1.5;
}

html.dark .moko-pricing-table th {
  color: #ffffff;
}

html.dark .moko-pricing-table td {
  color: rgba(255, 255, 255, 0.7);
}

.moko-pricing-table td:first-child {
  color: var(--color-secondary);
  font-weight: 700;
}

html.dark .moko-pricing-table td:first-child {
  color: #ffffff;
}

.moko-pricing-specifics {
  margin-top: 24px;
  display: grid;
  gap: 18px;
}

.moko-pricing-specifics article {
  padding: 28px;
}

.moko-pricing-specifics ul {
  margin-top: 20px;
  display: grid;
  gap: 12px;
}

.moko-pricing-specifics li {
  position: relative;
  padding-left: 22px;
}

.moko-pricing-specifics li::before {
  position: absolute;
  top: 8px;
  left: 0;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--color-primary-500);
  content: "";
}

@media (min-width: 768px) {
  .moko-pricing-detail-head,
  .moko-pricing-compare-head {
    flex-direction: row;
    align-items: center;
  }

  .moko-tarifs-detail-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .moko-pricing-specifics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1180px) {
  .moko-pricing-detail-panel,
  .moko-pricing-compare {
    padding: 34px;
  }

  .moko-tarifs-detail-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .moko-pricing-table {
    min-width: 0;
  }

  .moko-pricing-table thead {
    display: none;
  }

  .moko-pricing-table,
  .moko-pricing-table tbody,
  .moko-pricing-table tr,
  .moko-pricing-table td {
    display: block;
    width: 100%;
  }

  .moko-pricing-table tr {
    border: 1px solid var(--color-stroke-2);
    border-radius: 14px;
    margin-bottom: 12px;
    overflow: hidden;
  }

  html.dark .moko-pricing-table tr {
    border-color: var(--color-stroke-7);
  }

  .moko-pricing-table td {
    display: grid;
    grid-template-columns: minmax(110px, 42%) 1fr;
    gap: 12px;
    border-bottom: 1px solid var(--color-stroke-2);
  }

  html.dark .moko-pricing-table td {
    border-color: var(--color-stroke-7);
  }

  .moko-pricing-table td::before {
    content: attr(data-label);
    color: var(--color-secondary);
    font-weight: 700;
  }

  html.dark .moko-pricing-table td::before {
    color: #ffffff;
  }
}

.moko-token-panel ul {
  margin-top: 24px;
  display: grid;
  gap: 12px;
}

.moko-form-alert {
  margin-bottom: 18px;
  border: 1px solid rgba(190, 45, 45, 0.28);
  border-radius: 14px;
  background: rgba(190, 45, 45, 0.08);
  color: #8f1d1d;
  padding: 12px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.45;
}

.moko-form-alert[data-state="success"] {
  border-color: rgba(47, 125, 82, 0.26);
  background: rgba(47, 125, 82, 0.1);
  color: var(--moko-texte-vert);
}

html body .btn:disabled,
html body .btn[disabled] {
  border-color: rgba(17, 23, 18, 0.16) !important;
  background: #e5e8e2 !important;
  color: var(--color-secondary) !important;
  opacity: 1 !important;
  cursor: not-allowed;
}

html.dark body .btn:disabled,
html.dark body .btn[disabled] {
  border-color: rgba(255, 255, 255, 0.16) !important;
  background: #f4f4f1 !important;
  color: var(--color-secondary) !important;
}

html body .btn:disabled span,
html body .btn[disabled] span {
  color: inherit !important;
}

[data-moko-token-form] .btn,
.moko-profile-card .btn {
  white-space: normal;
}

html.dark .moko-profile-card .btn-white,
html.dark .moko-profile-card .btn-white span {
  color: var(--color-secondary) !important;
}

html.dark .moko-form-alert {
  color: #ffb3b3;
}

html.dark .moko-form-alert[data-state="success"] {
  color: #bdf7ca;
}

.moko-auth-step {
  display: grid;
  gap: 16px;
}

.moko-auth-step[hidden],
.moko-auth-enrollment-details[hidden] {
  display: none;
}

.moko-auth-step h2 {
  color: var(--color-secondary);
  font-size: 24px;
  line-height: 1.25;
}

.moko-auth-step > p,
.moko-auth-enrollment-details > p {
  color: rgba(17, 23, 18, 0.72);
  font-size: 14px;
  line-height: 1.55;
}

.moko-auth-step label {
  color: var(--color-secondary);
  font-size: 14px;
  font-weight: 650;
}

.moko-auth-step-label {
  color: var(--moko-texte-vert) !important;
  font-weight: 700;
}

.moko-auth-warning {
  border-left: 4px solid #a96900;
  background: #fff4d6;
  color: #5e3a00;
  padding: 14px 16px;
  font-size: 14px;
  font-weight: 650;
  line-height: 1.5;
}

.moko-auth-text-button {
  width: fit-content;
  color: #174f34;
  font-size: 14px;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.moko-auth-enrollment-details {
  display: grid;
  gap: 14px;
  border-top: 1px solid rgba(17, 23, 18, 0.14);
  padding-top: 18px;
}

.moko-auth-enrollment-details code,
.moko-auth-enrollment-details li {
  overflow-wrap: anywhere;
  border: 1px solid rgba(17, 23, 18, 0.16);
  background: #f4f6f2;
  color: #111712;
  padding: 9px 11px;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 13px;
}

.moko-auth-enrollment-details ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

html.dark .moko-auth-step h2 {
  color: var(--color-accent);
}

html.dark body .moko-auth-step label {
  color: var(--color-accent) !important;
}

html.dark .moko-auth-step > p,
html.dark .moko-auth-enrollment-details > p {
  color: rgba(255, 255, 255, 0.74);
}

html.dark .moko-auth-warning {
  border-left-color: #ffc45c;
  background: #302610;
  color: #ffe2a6;
}

html.dark .moko-auth-text-button {
  color: #bdf7ca;
}

html.dark .moko-auth-enrollment-details {
  border-top-color: rgba(255, 255, 255, 0.18);
}

html.dark .moko-auth-enrollment-details code,
html.dark .moko-auth-enrollment-details li {
  border-color: rgba(255, 255, 255, 0.18);
  background: #20251f;
  color: #ffffff;
}

@media (max-width: 479px) {
  .moko-auth-enrollment-details ul {
    grid-template-columns: minmax(0, 1fr);
  }
}

.moko-consent-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  color: rgba(17, 23, 18, 0.68);
  font-size: 14px;
  line-height: 1.5;
}

html.dark .moko-consent-row {
  color: rgba(255, 255, 255, 0.68);
}

.moko-token-success {
  margin-top: 20px;
  border: 1px solid rgba(47, 125, 82, 0.28);
  border-radius: 16px;
  background: rgba(47, 125, 82, 0.08);
  padding: 18px;
}

.moko-token-success strong,
.moko-token-success p {
  display: block;
}

.moko-token-success strong {
  color: var(--color-secondary);
  font-weight: 800;
}

html.dark .moko-token-success strong {
  color: #ffffff;
}

.moko-token-success a {
  margin-top: 14px;
}

.moko-token-timer {
  display: grid;
  justify-items: start;
  gap: 4px;
  margin-bottom: 22px;
  border-radius: 16px;
  background: var(--color-background-3);
  padding: 14px 16px;
}

html.dark .moko-token-timer {
  background: var(--color-background-8);
}

.moko-token-timer span {
  color: rgba(17, 23, 18, 0.64);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}

html.dark .moko-token-timer span {
  color: rgba(255, 255, 255, 0.64);
}

.moko-token-timer strong {
  color: var(--moko-texte-vert);
  font-size: clamp(16px, 2vw, 20px);
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
}

.moko-token-form-actions .btn {
  min-width: 0;
  padding-inline: 14px;
  font-size: 13px;
  white-space: nowrap;
}

@media (max-width: 639px) {
  .moko-token-form-actions .btn {
    font-size: 14px;
  }
}

.moko-code-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
}

.moko-code-grid input {
  width: 100%;
  aspect-ratio: 1 / 1;
  border: 1px solid var(--color-stroke-2);
  border-radius: 14px;
  background: #ffffff;
  color: var(--color-secondary);
  text-align: center;
  font-size: 24px;
  font-weight: 800;
  outline: none;
}

.moko-code-grid input:focus {
  border-color: var(--color-primary-500);
  box-shadow: 0 0 0 3px rgba(47, 125, 82, 0.12);
}

html.dark .moko-code-grid input {
  border-color: var(--color-stroke-7);
  background: var(--color-background-8);
  color: #ffffff;
}

.moko-password-meter {
  display: grid;
  gap: 8px;
}

.moko-password-meter::before {
  display: block;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(17, 23, 18, 0.12);
  height: 8px;
  content: "";
}

.moko-password-meter span {
  display: block;
  width: 8%;
  max-width: 100%;
  height: 8px;
  margin-top: -16px;
  border-radius: 999px;
  background: var(--color-primary-500);
  transition: width 180ms ease;
}

.moko-password-meter small {
  color: rgba(17, 23, 18, 0.6);
  font-size: 12px;
  font-weight: 700;
}

html.dark .moko-password-meter small {
  color: rgba(255, 255, 255, 0.6);
}

.moko-token-panel li {
  position: relative;
  padding-left: 26px;
}

.moko-token-panel li::before {
  position: absolute;
  top: 9px;
  left: 0;
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: var(--color-primary-500);
  content: "";
}

.moko-token-status,
.moko-checkout-note {
  margin-top: 26px;
  border-radius: 16px;
  background: rgba(47, 125, 82, 0.1);
  padding: 18px;
}

html.dark .moko-token-status,
html.dark .moko-checkout-note {
  background: rgba(47, 125, 82, 0.18);
}

.moko-backend-note,
.moko-order-receipt,
.moko-password-after-payment,
.moko-preview-access,
.moko-client-panel,
.moko-client-sidebar,
.moko-profile-card {
  border: 1px solid var(--color-stroke-2);
  border-radius: 20px;
  background: #ffffff;
  box-shadow: 0 18px 70px rgba(17, 23, 18, 0.08);
}

html.dark .moko-backend-note,
html.dark .moko-order-receipt,
html.dark .moko-password-after-payment,
html.dark .moko-preview-access,
html.dark .moko-client-panel,
html.dark .moko-client-sidebar,
html.dark .moko-profile-card {
  border-color: var(--color-stroke-7);
  background: var(--color-background-7);
}

.moko-backend-note {
  margin-top: 16px;
  padding: 16px;
}

.moko-backend-note strong,
.moko-backend-note p {
  display: block;
}

.moko-token-status strong,
.moko-token-status span,
.moko-checkout-note strong,
.moko-checkout-note p {
  display: block;
}

.moko-token-status strong,
.moko-checkout-note strong,
.moko-backend-note strong {
  color: var(--color-secondary);
  font-weight: 800;
}

.moko-token-status span,
.moko-backend-note p {
  color: rgba(17, 23, 18, 0.68);
  line-height: 1.6;
}

html.dark .moko-token-status strong,
html.dark .moko-checkout-note strong,
html.dark .moko-backend-note strong {
  color: #ffffff;
}

html.dark .moko-token-status span,
html.dark .moko-backend-note p {
  color: rgba(255, 255, 255, 0.72);
}

.moko-checkout-grid {
  display: grid;
  gap: 28px;
}

@media (min-width: 1024px) {
  .moko-checkout-grid {
    grid-template-columns: minmax(0, 1fr) minmax(320px, 420px);
    align-items: start;
  }
}

.moko-checkout-fields {
  display: grid;
  gap: 16px;
}

@media (min-width: 768px) {
  .moko-checkout-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.moko-checkout-fields label,
.moko-promo {
  display: grid;
  gap: 8px;
  color: var(--color-secondary);
  font-size: 14px;
  font-weight: 600;
}

html.dark .moko-checkout-fields label,
html.dark .moko-promo {
  color: #ffffff;
}

.moko-payment-methods {
  margin-top: 16px;
  display: grid;
  gap: 12px;
}

.moko-payment-card-brands {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.moko-payment-card-brands span {
  border: 1px solid var(--color-stroke-2);
  border-radius: 6px;
  padding: 6px 9px;
  color: rgba(17, 23, 18, 0.72);
  font-size: 12px;
  line-height: 1;
}

html.dark .moko-payment-card-brands span {
  color: rgba(255, 255, 255, 0.78);
}

[data-payment-family] {
  display: grid;
  gap: 8px;
  min-width: 0;
  margin: 0;
  border: 0;
  padding: 0;
}

[data-payment-family] + [data-payment-family] {
  margin-top: 8px;
}

[data-payment-family] legend {
  margin-bottom: 6px;
  color: rgba(17, 23, 18, 0.72);
  font-size: 13px;
  font-weight: 800;
}

html.dark [data-payment-family] legend {
  color: rgba(255, 255, 255, 0.78);
}

.moko-payment-method {
  display: grid;
  grid-template-columns: auto 44px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  border: 1px solid var(--color-stroke-2);
  border-radius: 16px;
  padding: 14px;
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease;
}

html.dark .moko-payment-method {
  border-color: var(--color-stroke-7);
}

.moko-payment-method:hover,
.moko-payment-method.is-selected {
  border-color: var(--color-primary-500);
  background: rgba(47, 125, 82, 0.08);
}

.moko-payment-method img {
  width: 44px;
  height: 32px;
  object-fit: contain;
}

.moko-payment-method > span[aria-hidden="true"] {
  display: grid;
  place-items: center;
  width: 44px;
  height: 32px;
  border-radius: 8px;
  background: var(--color-background-3);
  color: var(--moko-texte-vert);
}

.moko-payment-method > span[aria-hidden="true"] svg {
  width: 20px;
  height: 20px;
}

html.dark .moko-payment-method > span[aria-hidden="true"] {
  background: var(--color-background-8);
  color: var(--color-primary-400);
}

.moko-payment-method strong,
.moko-payment-method small,
.moko-payment-method b {
  display: block;
}

.moko-payment-method strong {
  color: var(--color-secondary);
}

html.dark .moko-payment-method strong {
  color: #ffffff;
}

.moko-payment-method small,
.moko-payment-method b {
  color: rgba(17, 23, 18, 0.62);
  font-size: 12px;
}

html.dark .moko-payment-method small,
html.dark .moko-payment-method b {
  color: rgba(255, 255, 255, 0.62);
}

.moko-payment-dynamic {
  margin-top: 20px;
  border-radius: 16px;
  background: var(--color-background-3);
  padding: 18px;
}

html.dark .moko-payment-dynamic {
  background: var(--color-background-8);
}

.moko-payment-dynamic h3 {
  color: var(--color-secondary);
  font-size: 18px;
  font-weight: 600;
}

.moko-payment-dynamic[data-state="chargement"] {
  border-left: 4px solid #2f5f98;
}

.moko-payment-dynamic[data-state="echec"] {
  border-left: 4px solid #a63d3d;
  background: #fff2f2;
}

.moko-payment-dynamic[data-state="succes"] {
  border-left: 4px solid var(--color-primary-500);
  background: #eef8f1;
}

html.dark .moko-payment-dynamic[data-state="echec"] {
  border-left-color: #ff9c9c;
  background: #2b2020;
}

html.dark .moko-payment-dynamic[data-state="succes"] {
  border-left-color: #75c997;
  background: #17271d;
}

[data-payment-secure-slot] {
  min-height: 88px;
  margin-top: 14px;
  border: 1px dashed color-mix(in srgb, var(--color-primary-500) 55%, var(--color-stroke-2));
  border-radius: 8px;
  background: #ffffff;
}

html.dark [data-payment-secure-slot] {
  border-color: color-mix(in srgb, var(--color-primary-400) 60%, var(--color-stroke-7));
  background: #111712;
}

[data-payment-mount-note] {
  margin-top: 10px;
}

[data-payment-retry],
[data-payment-transfer] .btn {
  margin-top: 14px;
  width: fit-content;
}

[data-payment-transfer] {
  border-left: 4px solid #b48313;
}

.moko-payment-states button {
  min-height: 34px;
  border: 1px solid color-mix(in srgb, #8a6100 42%, var(--color-stroke-2));
  border-radius: 999px;
  background: rgba(242, 193, 78, 0.14);
  padding: 6px 10px;
  color: #6f4d00;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.moko-payment-states button[aria-pressed="true"] {
  border-color: var(--color-primary-500);
  background: rgba(47, 125, 82, 0.12);
  color: #195f3a;
}

html.dark .moko-payment-states button {
  border-color: color-mix(in srgb, #f2c14e 45%, var(--color-stroke-7));
  background: rgba(242, 193, 78, 0.1);
  color: #f6d77f;
}

html.dark .moko-payment-states button[aria-pressed="true"] {
  border-color: var(--color-primary-400);
  background: rgba(60, 148, 101, 0.18);
  color: #a6dfbc;
}

@media (max-width: 639px) {
  .moko-payment-method {
    grid-template-columns: auto 40px minmax(0, 1fr);
  }

  .moko-payment-method b {
    grid-column: 2 / -1;
  }

  [data-payment-retry],
  [data-payment-transfer] .btn {
    width: 100%;
  }
}

html.dark .moko-payment-dynamic h3 {
  color: #ffffff;
}

.moko-summary-line,
.moko-summary-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid var(--color-stroke-2);
  padding: 16px 0;
}

.moko-summary-line span,
.moko-summary-total span {
  color: rgba(17, 23, 18, 0.64);
  font-weight: 700;
}

.moko-summary-line strong {
  color: var(--color-secondary);
  font-weight: 800;
}

html.dark .moko-summary-line span,
html.dark .moko-summary-total span {
  color: rgba(255, 255, 255, 0.66);
}

html.dark .moko-summary-line strong {
  color: #ffffff;
}

html.dark .moko-summary-line,
html.dark .moko-summary-total {
  border-color: var(--color-stroke-7);
}

.moko-summary-total strong {
  color: var(--moko-texte-vert);
  font-size: 28px;
}

.moko-payment-states {
  margin-top: 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.moko-payment-states span,
.moko-status-check {
  border-radius: 999px;
  background: rgba(242, 193, 78, 0.18);
  color: #8a6100;
  padding: 7px 10px;
  font-size: 12px;
  font-weight: 700;
}

html.dark .moko-payment-states span,
html.dark .moko-status-check {
  color: #f2c14e;
}

.moko-confirmation-grid {
  margin-top: 32px;
  display: grid;
  gap: 14px;
}

.moko-order-receipt,
.moko-password-after-payment {
  margin-top: 28px;
  padding: 22px;
}

.moko-order-receipt span,
.moko-order-receipt strong,
.moko-order-receipt p,
.moko-password-after-payment strong,
.moko-password-after-payment p {
  display: block;
}

.moko-order-receipt span {
  color: rgba(17, 23, 18, 0.64);
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
}

html.dark .moko-order-receipt span {
  color: rgba(255, 255, 255, 0.58);
}

.moko-order-receipt strong {
  margin-top: 8px;
  color: var(--moko-texte-vert);
  font-size: clamp(28px, 5vw, 44px);
}

.moko-password-after-payment {
  display: grid;
  gap: 18px;
}

@media (min-width: 768px) {
  .moko-password-after-payment {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }
}

@media (min-width: 768px) {
  .moko-confirmation-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.moko-confirmation-grid article {
  border: 1px solid var(--color-stroke-2);
  border-radius: 16px;
  padding: 18px;
}

html.dark .moko-confirmation-grid article {
  border-color: var(--color-stroke-7);
}

.moko-confirmation-grid strong,
.moko-confirmation-grid span {
  display: block;
}

.moko-confirmation-grid strong {
  color: var(--color-secondary);
}

html.dark .moko-confirmation-grid strong {
  color: #ffffff;
}

.moko-confirmation-grid span {
  margin-top: 8px;
  color: rgba(17, 23, 18, 0.66);
}

html.dark .moko-confirmation-grid span {
  color: rgba(255, 255, 255, 0.66);
}

.moko-session-filters {
  display: grid;
  gap: 14px;
  margin-bottom: 28px;
}

@media (min-width: 768px) {
  .moko-session-filters {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.moko-session-filters label {
  display: grid;
  gap: 8px;
  color: var(--color-secondary);
  font-weight: 600;
}

html.dark .moko-session-filters label {
  color: #ffffff;
}

.moko-select-field {
  position: relative;
  display: block;
}

.moko-select-field::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 18px;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--color-primary-500);
  border-bottom: 2px solid var(--color-primary-500);
  pointer-events: none;
  transform: translateY(-65%) rotate(45deg);
}

.moko-select-field select.auth-form-input {
  height: 52px;
  appearance: none;
  border-color: var(--color-stroke-2);
  background-color: #ffffff;
  padding: 0 48px 0 18px;
  color: var(--color-secondary);
  cursor: pointer;
}

html.dark .moko-select-field select.auth-form-input {
  border-color: var(--color-stroke-7);
  background-color: var(--color-background-7);
  color: #ffffff;
}

.moko-select-field select.auth-form-input:focus-visible {
  border-color: var(--color-primary-500);
  outline: 2px solid rgba(47, 125, 82, 0.24);
  outline-offset: 2px;
}

.moko-centres-grid {
  display: grid;
  gap: 18px;
}

@media (min-width: 768px) {
  .moko-centres-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.moko-centre-card {
  padding: 22px;
}

.moko-centre-card span,
.moko-centre-card b {
  display: inline-flex;
  width: fit-content;
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 700;
}

.moko-centre-card span {
  background: rgba(47, 125, 82, 0.1);
  color: var(--moko-texte-vert);
}

.moko-centre-card b {
  margin-top: 16px;
  background: rgba(242, 193, 78, 0.18);
  color: #8a6100;
}

.moko-session-table-wrap {
  margin-top: 28px;
  overflow-x: auto;
}

.moko-session-table {
  width: 100%;
  min-width: 1120px;
  border-collapse: collapse;
}

.moko-session-table th,
.moko-session-table td {
  border-bottom: 1px solid var(--color-stroke-2);
  padding: 16px;
  text-align: left;
  vertical-align: top;
}

html.dark .moko-session-table th,
html.dark .moko-session-table td {
  border-color: var(--color-stroke-7);
}

.moko-session-table th {
  color: var(--color-secondary);
  font-size: 13px;
  font-weight: 700;
}

.moko-session-table th:nth-last-child(-n + 3),
.moko-session-table td:nth-last-child(-n + 3) {
  min-width: 132px;
}

.moko-session-table th:nth-last-child(2),
.moko-session-table td:nth-last-child(2) {
  white-space: nowrap;
}

.moko-session-table td:nth-last-child(3),
.moko-session-table td:nth-last-child(1) {
  overflow-wrap: anywhere;
}

html.dark .moko-session-table th {
  color: #ffffff;
}

.home-centres-grid-section {
  scroll-margin-top: 130px;
}

.home-centres-grid-section .home-centre-card {
  border: 1px solid var(--color-stroke-2);
  box-shadow: 0 22px 70px rgba(17, 23, 18, 0.08);
}

html.dark .home-centres-grid-section .home-centre-card {
  border-color: var(--color-stroke-7);
  box-shadow: 0 22px 70px rgba(0, 0, 0, 0.22);
}

.home-centres-grid-section figure {
  aspect-ratio: 16 / 10;
  overflow: hidden;
}

.home-centres-grid-section figure img {
  display: block;
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.home-centre-card-body {
  display: grid;
  gap: 12px;
}

.home-centre-card-top {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: flex-start;
  justify-content: space-between;
}

.home-centre-card-top > span,
.home-centre-card-top > b {
  display: inline-flex;
  width: fit-content;
  border-radius: 999px;
  padding: 7px 11px;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
}

.home-centre-card-top > span {
  background: rgba(47, 125, 82, 0.12);
  color: var(--moko-texte-vert);
}

.home-centres-grid-section h3 {
  color: var(--color-secondary);
  line-height: 1.18;
}

html.dark .home-centres-grid-section h3 {
  color: #ffffff;
}

.home-centres-grid-section p,
.home-centres-grid-section address,
.home-centres-grid-section dd {
  color: rgba(17, 23, 18, 0.66);
  line-height: 1.55;
}

html.dark .home-centres-grid-section p,
html.dark .home-centres-grid-section address,
html.dark .home-centres-grid-section dd {
  color: rgba(255, 255, 255, 0.68);
}

.home-centres-grid-section address {
  font-style: normal;
}

.home-centres-grid-section dl {
  display: grid;
  gap: 10px;
  margin: 0;
}

.home-centres-grid-section dt {
  color: var(--color-secondary);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

html.dark .home-centres-grid-section dt {
  color: #ffffff;
}

.home-centres-grid-section .moko-centre-register-link {
  max-width: 100%;
  padding: 11px 16px;
  font-size: 14px;
  line-height: 1.18;
  text-align: center;
  white-space: normal;
}

@media (max-width: 767px) {
  .home-centre-card-top {
    display: grid;
    grid-template-columns: 1fr;
    justify-items: start;
  }
}

.moko-centre-meta dt {
  color: var(--color-secondary);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

html.dark .moko-centre-meta dt {
  color: #ffffff;
}

.moko-centre-status,
.moko-status-check,
.moko-centre-card b[data-status] {
  display: inline-flex;
  width: fit-content;
  border-radius: 999px;
  padding: 7px 11px;
  font-size: 12px;
  font-weight: 800;
}

.moko-centre-status.is-confirmed,
.moko-status-check[data-status="disponible"],
.moko-centre-card b[data-status="disponible"] {
  background: rgba(47, 125, 82, 0.12);
  color: var(--moko-texte-vert);
}

.moko-centre-status.is-check,
.moko-status-check[data-status="a_verifier"],
.moko-centre-card b[data-status="a_verifier"] {
  background: rgba(242, 193, 78, 0.2);
  color: #8a6100;
}

html.dark .moko-centre-status.is-check,
html.dark .moko-status-check[data-status="a_verifier"],
html.dark .moko-centre-card b[data-status="a_verifier"] {
  color: #f2c14e;
}

.moko-centre-register-link,
.moko-session-table a,
.moko-centre-source a {
  border-radius: 999px;
  color: var(--moko-texte-vert);
  font-weight: 800;
  text-decoration: none;
  transition: background 180ms ease, border-color 180ms ease, color 180ms ease, transform 180ms ease;
}

.moko-centre-register-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  border: 1px solid var(--color-secondary);
  background: var(--color-secondary);
  color: #ffffff;
  padding: 13px 18px;
}

.moko-centre-register-link:hover,
.moko-centre-register-link:focus-visible {
  border-color: var(--color-primary-500);
  background: var(--color-primary-500);
  color: #ffffff;
  transform: translateY(-1px);
}

html.dark .moko-centre-register-link {
  border-color: #ffffff;
  background: #ffffff;
  color: var(--color-secondary);
}

html.dark .moko-centre-register-link:hover,
html.dark .moko-centre-register-link:focus-visible {
  border-color: var(--color-primary-500);
  background: var(--color-primary-500);
  color: #ffffff;
}

.moko-session-table a:hover,
.moko-session-table a:focus-visible,
.moko-centre-source a:hover,
.moko-centre-source a:focus-visible {
  background: var(--color-primary-500);
  color: #ffffff;
}

.moko-centre-card.is-rich {
  display: grid;
  gap: 0;
  overflow: hidden;
  padding: 0;
}

.moko-centre-card.is-rich[hidden] {
  display: none !important;
}

.moko-centre-card.is-rich figure {
  display: block;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 16 / 10;
  height: 240px;
  min-height: 0;
}

.moko-centre-card.is-rich img {
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
}

@media (max-width: 767px) {
  .moko-centre-card.is-rich figure {
    height: 210px;
  }
}

.moko-centre-card-body {
  display: grid;
  gap: 14px;
  padding: 22px;
}

.moko-centre-card-top {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: space-between;
  align-items: flex-start;
}

.moko-centre-card.is-rich .moko-centre-card-top span {
  margin: 0;
  background: rgba(47, 125, 82, 0.1);
  color: var(--moko-texte-vert);
  white-space: nowrap;
}

.moko-centre-card.is-rich .moko-centre-card-top b {
  margin-top: 0;
  white-space: nowrap;
}

@media (max-width: 520px) {
  .moko-centre-card-top {
    display: grid;
    grid-template-columns: 1fr;
    justify-items: start;
  }
}

.moko-centre-meta {
  display: grid;
  gap: 10px;
}

.moko-centre-meta dd {
  margin-top: 3px;
  color: rgba(17, 23, 18, 0.66);
}

html.dark .moko-centre-meta dd {
  color: rgba(255, 255, 255, 0.68);
}

.moko-centre-source {
  font-size: 13px;
}

.moko-centre-source span {
  color: rgba(17, 23, 18, 0.66);
  font-weight: 600;
}

html.dark .moko-centre-source span {
  color: rgba(255, 255, 255, 0.7);
}

.moko-centre-register-link.is-disabled,
.moko-centre-register-link.is-disabled:hover,
.moko-centre-register-link.is-disabled:focus-visible {
  border-color: var(--color-stroke-2);
  background: rgba(17, 23, 18, 0.08);
  color: rgba(17, 23, 18, 0.64);
  cursor: not-allowed;
  transform: none;
}

html.dark .moko-centre-register-link.is-disabled,
html.dark .moko-centre-register-link.is-disabled:hover,
html.dark .moko-centre-register-link.is-disabled:focus-visible {
  border-color: var(--color-stroke-7);
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.66);
}

@media (max-width: 767px) {
  .moko-session-table-wrap {
    overflow: visible;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  .moko-session-table {
    min-width: 0;
    border-collapse: separate;
    border-spacing: 0 14px;
  }

  .moko-session-table thead {
    display: none;
  }

  .moko-session-table,
  .moko-session-table tbody,
  .moko-session-table tr,
  .moko-session-table td {
    display: block;
    width: 100%;
  }

  .moko-session-table tr {
    border: 1px solid var(--color-stroke-2);
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 16px 46px rgba(17, 23, 18, 0.08);
    overflow: hidden;
  }

  html.dark .moko-session-table tr {
    border-color: var(--color-stroke-7);
    background: var(--color-background-7);
  }

  .moko-session-table td {
    display: grid;
    grid-template-columns: minmax(96px, 38%) minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    border-bottom: 1px solid var(--color-stroke-2);
    padding: 12px 14px;
    color: rgba(17, 23, 18, 0.74);
    overflow-wrap: anywhere;
  }

  html.dark .moko-session-table td {
    border-color: var(--color-stroke-7);
    color: rgba(255, 255, 255, 0.74);
  }

  .moko-session-table td::before {
    content: attr(data-label);
    color: var(--color-secondary);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
  }

  html.dark .moko-session-table td::before {
    color: #ffffff;
  }

  .moko-session-table td:last-child {
    border-bottom: 0;
  }
}

.moko-centres-empty {
  border: 1px solid var(--color-stroke-2);
  border-radius: 18px;
  background: #ffffff;
  color: var(--color-secondary);
  padding: 18px;
  text-align: center;
}

html.dark .moko-centres-empty {
  border-color: var(--color-stroke-7);
  background: var(--color-background-7);
  color: #ffffff;
}

.moko-not-found-page {
  min-height: 100vh;
}

.moko-404-hero {
  border-color: rgba(255, 255, 255, 0.12);
  background:
    radial-gradient(52.78% 57.9% at 3.87% 7.86%, rgba(47, 125, 82, 0.46) 0%, rgba(17, 23, 18, 0) 72%),
    linear-gradient(135deg, var(--color-secondary), #101712 62%, #1d2b20);
}

html.dark .moko-404-hero {
  border-color: var(--color-stroke-7);
  background:
    radial-gradient(52.78% 57.9% at 3.87% 7.86%, rgba(47, 125, 82, 0.42) 0%, rgba(17, 23, 18, 0) 72%),
    linear-gradient(135deg, #0b0f0d, #111712 62%, #203527);
}

.moko-404-glow {
  border-radius: 999px;
  background: radial-gradient(circle, rgba(242, 193, 78, 0.34), rgba(47, 125, 82, 0.24) 42%, transparent 72%);
  filter: blur(8px);
}

.moko-404-code {
  color: #ffffff;
  font-size: clamp(96px, 15vw, 200px);
  font-weight: 500;
  line-height: 1;
}

.moko-404-hero .moko-404-title {
  color: rgba(255, 255, 255, 0.92) !important;
  font-size: clamp(32px, 5vw, 72px);
  font-weight: 500;
  line-height: 1.04;
}

.moko-404-copy,
.moko-404-help-copy {
  color: rgba(255, 255, 255, 0.62);
}

.moko-404-copy {
  margin-inline: auto;
  max-width: 420px;
}

.moko-404-help-title {
  color: var(--color-secondary);
  font-size: clamp(32px, 5vw, 64px);
  font-weight: 500;
  line-height: 1.08;
}

html.dark .moko-404-help-title {
  color: #ffffff;
}

.moko-404-help-copy {
  color: rgba(17, 23, 18, 0.62);
}

html.dark .moko-404-help-copy {
  color: rgba(255, 255, 255, 0.62);
}

.moko-404-card {
  display: flex;
  min-height: 230px;
  flex-direction: column;
  justify-content: space-between;
  gap: 56px;
  border: 1px solid var(--color-stroke-2);
  border-radius: 12px;
  background: #ffffff;
  color: var(--color-secondary);
  padding: 28px;
  box-shadow: 0 18px 70px rgba(17, 23, 18, 0.08);
}

html.dark .moko-404-card {
  border-color: var(--color-stroke-7);
  background: var(--color-background-7);
  color: #ffffff;
}

.moko-404-card h3 {
  color: inherit;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.35;
}

.moko-404-card [class*="ns-shape-"] {
  color: var(--moko-texte-vert);
}

.moko-404-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  width: fit-content;
  max-width: 100%;
  border: 1px solid transparent;
  border-radius: 999px;
  background: #ffffff;
  color: var(--color-secondary);
  padding: 0 22px;
  font-size: 14px;
  font-weight: 800;
  transition: background 180ms ease, border-color 180ms ease, color 180ms ease, transform 180ms ease;
}

.moko-404-link:hover,
.moko-404-link:focus-visible {
  border-color: var(--color-primary-500);
  background: var(--color-primary-500);
  color: #ffffff;
  transform: translateY(-1px);
}

.moko-404-card .moko-404-link {
  border-color: var(--color-secondary);
  background: var(--color-secondary);
  color: #ffffff;
}

.moko-404-card .moko-404-link:hover,
.moko-404-card .moko-404-link:focus-visible {
  border-color: var(--color-primary-500);
  background: var(--color-primary-500);
  color: #ffffff;
}

html.dark .moko-404-link {
  border-color: #ffffff;
  background: #ffffff;
  color: var(--color-secondary);
}

html.dark .moko-404-link:hover,
html.dark .moko-404-link:focus-visible {
  border-color: var(--color-primary-500);
  background: var(--color-primary-500);
  color: #ffffff;
}

.moko-preview-access {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  align-items: center;
  margin-bottom: 18px;
  padding: 14px 16px;
}

.moko-preview-access strong {
  color: var(--color-secondary);
  font-weight: 800;
}

html.dark .moko-preview-access strong {
  color: #ffffff;
}

.moko-preview-access span {
  color: rgba(17, 23, 18, 0.62);
  font-size: 14px;
}

html.dark .moko-preview-access span {
  color: rgba(255, 255, 255, 0.62);
}

.moko-preview-access a,
.moko-client-actions a,
.moko-client-table a,
.moko-client-course-list a:not(.btn) {
  border-radius: 999px;
  background: rgba(47, 125, 82, 0.1);
  color: var(--moko-texte-vert);
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 800;
  transition: background 160ms ease, color 160ms ease;
}

.moko-preview-access a:hover,
.moko-client-actions a:hover,
.moko-client-table a:hover,
.moko-client-course-list a:not(.btn):hover {
  background: var(--color-primary-500);
  color: #ffffff;
}

html.dark .moko-client-actions a,
html.dark .moko-client-table a,
html.dark .moko-client-course-list a:not(.btn) {
  background: rgba(255, 255, 255, 0.1) !important;
  color: #ffffff !important;
}

html.dark .moko-client-actions a:hover,
html.dark .moko-client-table a:hover,
html.dark .moko-client-course-list a:not(.btn):hover {
  background: #ffffff !important;
  color: var(--color-secondary) !important;
}

.moko-client-shell {
  display: grid;
  gap: 20px;
}

@media (min-width: 1100px) {
  .moko-client-shell {
    grid-template-columns: 300px minmax(0, 1fr);
    align-items: start;
  }
}

.moko-client-sidebar {
  padding: 24px;
}

@media (min-width: 1100px) {
  .moko-client-sidebar {
    position: sticky;
    top: 120px;
  }
}

.moko-client-sidebar h1 {
  color: var(--color-secondary);
  font-size: 34px;
  font-weight: 600;
  line-height: 1.08;
}

html.dark .moko-client-sidebar h1 {
  color: #ffffff;
}

.moko-client-sidebar p {
  margin-top: 12px;
  color: rgba(17, 23, 18, 0.64);
  line-height: 1.6;
}

html.dark .moko-client-sidebar p {
  color: rgba(255, 255, 255, 0.64);
}

.moko-client-sidebar nav {
  display: grid;
  gap: 8px;
  margin-top: 26px;
}

.moko-client-sidebar nav a {
  border: 1px solid transparent;
  border-radius: 14px;
  color: rgba(17, 23, 18, 0.72);
  padding: 12px 14px;
  font-weight: 800;
}

html.dark .moko-client-sidebar nav a {
  color: rgba(255, 255, 255, 0.72);
}

.moko-client-sidebar nav a:hover,
.moko-client-sidebar nav a.is-active {
  border-color: rgba(47, 125, 82, 0.28);
  background: rgba(47, 125, 82, 0.1);
  color: var(--moko-texte-vert);
}

.moko-client-content {
  display: grid;
  gap: 16px;
}

.moko-client-toast {
  display: none;
  border-radius: 16px;
  background: rgba(47, 125, 82, 0.12);
  color: var(--moko-texte-vert);
  padding: 14px 16px;
  font-weight: 800;
}

.moko-client-toast.is-visible {
  display: block;
}

.moko-client-panel {
  min-width: 0;
  padding: clamp(20px, 3vw, 32px);
}

.moko-client-panel-head {
  margin-bottom: 24px;
}

.moko-client-panel-head + .moko-client-kpis,
.moko-client-panel-head + .moko-client-course-list,
.moko-client-panel-head + .moko-notification-list,
.moko-client-panel-head ~ [data-section-panel] > :first-child,
.moko-client-focus-card[hidden] + .moko-client-table-wrap,
.moko-client-tabs.is-inline + .moko-client-course-list {
  margin-top: 0;
}

.moko-client-panel-head > span,
.moko-client-panel-head > div > span {
  display: inline-flex;
  border-radius: 999px;
  background: rgba(47, 125, 82, 0.1);
  color: var(--moko-texte-vert);
  padding: 7px 11px;
  font-size: 12px;
  font-weight: 800;
}

.moko-client-panel-head h2 {
  margin-top: 14px;
  color: var(--color-secondary);
  font-size: clamp(30px, 4vw, 46px);
  font-weight: 600;
  line-height: 1.08;
}

html.dark .moko-client-panel-head h2 {
  color: #ffffff;
}

.moko-client-panel-head p {
  margin-top: 12px;
  max-width: 760px;
  color: rgba(17, 23, 18, 0.66);
  line-height: 1.65;
}

html.dark .moko-client-panel-head p {
  color: rgba(255, 255, 255, 0.66);
}

.moko-client-kpis,
.moko-client-payment-grid,
.moko-client-course-list,
.moko-notification-list,
.moko-profile-grid {
  display: grid;
  gap: 14px;
  margin-top: 28px;
}

@media (min-width: 768px) {
  .moko-client-kpis,
  .moko-client-payment-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .moko-profile-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1180px) {
  .moko-client-kpis {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.moko-client-kpis article,
.moko-client-payment-grid article,
.moko-client-course-list article,
.moko-notification-list article {
  border: 1px solid var(--color-stroke-2);
  border-radius: 18px;
  background: var(--color-background-3);
  padding: 18px;
}

.moko-client-course-list article {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.moko-client-course-list article[hidden] {
  display: none;
}

.moko-client-course-list article > div:not(.moko-client-progress-track) {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  align-items: center;
  justify-content: space-between;
}

html.dark .moko-client-kpis article,
html.dark .moko-client-payment-grid article,
html.dark .moko-client-course-list article,
html.dark .moko-notification-list article {
  border-color: var(--color-stroke-7);
  background: var(--color-background-8);
}

.moko-client-kpis span,
.moko-client-payment-grid span,
.moko-client-course-list article > span,
.moko-client-course-list article > div:first-child > span,
.moko-notification-list small {
  color: rgba(17, 23, 18, 0.64);
  font-size: 13px;
  font-weight: 800;
}

.moko-client-course-list article > span,
.moko-client-course-list article > div:first-child > span {
  width: fit-content;
  border-radius: 999px;
  background: rgba(47, 125, 82, 0.1);
  color: var(--moko-texte-vert);
  padding: 6px 10px;
  line-height: 1;
}

html.dark .moko-client-kpis span,
html.dark .moko-client-payment-grid span,
html.dark .moko-client-course-list article > span,
html.dark .moko-client-course-list article > div:first-child > span,
html.dark .moko-notification-list small {
  color: rgba(255, 255, 255, 0.58);
}

html.dark .moko-client-course-list article > span,
html.dark .moko-client-course-list article > div:first-child > span {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
}

.moko-client-kpis strong,
.moko-client-payment-grid strong,
.moko-client-course-list strong,
.moko-notification-list strong,
.moko-profile-card h3 {
  display: block;
  margin-top: 8px;
  color: var(--color-secondary);
  font-size: 22px;
  font-weight: 800;
  line-height: 1.18;
}

.moko-client-course-list strong {
  margin-top: 0;
}

html.dark .moko-client-kpis strong,
html.dark .moko-client-payment-grid strong,
html.dark .moko-client-course-list strong,
html.dark .moko-notification-list strong,
html.dark .moko-profile-card h3 {
  color: #ffffff;
}

.moko-client-kpis small,
.moko-client-payment-grid small,
.moko-client-course-list small,
.moko-notification-list span,
.moko-profile-card p {
  display: block;
  margin-top: 8px;
  color: rgba(17, 23, 18, 0.64);
  line-height: 1.55;
}

.moko-client-course-list small {
  margin-top: 0;
}

.moko-client-course-list b {
  color: var(--color-secondary);
  font-size: 14px;
  font-weight: 900;
}

html.dark .moko-client-course-list b {
  color: #ffffff;
}

.moko-client-course-list .moko-client-progress-track {
  margin-top: 0;
}

.moko-client-course-list a {
  align-self: flex-start;
  margin-top: 2px;
}

.moko-client-course-list [data-cours-empty] {
  border: 1px dashed var(--color-stroke-2);
  border-radius: 18px;
  background: var(--color-background-3);
  color: rgba(17, 23, 18, 0.66);
  padding: 18px;
  text-align: center;
  font-weight: 800;
}

.moko-client-course-list [data-cours-empty][hidden] {
  display: none;
}

html.dark .moko-client-course-list [data-cours-empty] {
  border-color: var(--color-stroke-7);
  background: var(--color-background-8);
  color: rgba(255, 255, 255, 0.72);
}

html.dark .moko-client-kpis small,
html.dark .moko-client-payment-grid small,
html.dark .moko-client-course-list small,
html.dark .moko-notification-list span,
html.dark .moko-profile-card p {
  color: rgba(255, 255, 255, 0.64);
}

.moko-client-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 28px;
}

.moko-client-subscription,
.moko-client-included {
  margin-top: 28px;
}

.moko-client-subscription,
.moko-client-included-grid article {
  border: 1px solid var(--color-stroke-2);
  border-radius: 22px;
  background: #ffffff;
  box-shadow: 0 18px 64px rgba(17, 23, 18, 0.07);
}

html.dark .moko-client-subscription,
html.dark .moko-client-included-grid article {
  border-color: var(--color-stroke-7);
  background: var(--color-background-8);
  box-shadow: 0 18px 64px rgba(0, 0, 0, 0.18);
}

.moko-client-subscription {
  overflow: hidden;
}

.moko-client-subscription-head {
  display: grid;
  gap: 18px;
  align-items: start;
  justify-content: space-between;
  background: linear-gradient(135deg, rgba(242, 193, 78, 0.28), rgba(47, 125, 82, 0.12));
  padding: 24px;
}

html.dark .moko-client-subscription-head {
  background: linear-gradient(135deg, rgba(242, 193, 78, 0.16), rgba(47, 125, 82, 0.14));
}

.moko-client-plan-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.moko-client-plan-badges span,
.moko-client-plan-badges strong,
.moko-client-section-title span {
  display: inline-flex;
  width: fit-content;
  border-radius: 999px;
  padding: 7px 11px;
  font-size: 12px;
  font-weight: 900;
}

.moko-client-plan-badges span {
  background: var(--color-secondary);
  color: #ffffff;
}

.moko-client-plan-badges strong,
.moko-client-section-title span {
  background: rgba(47, 125, 82, 0.12);
  color: var(--moko-texte-vert);
}

html.dark .moko-client-plan-badges span {
  background: #ffffff;
  color: var(--color-secondary);
}

.moko-client-subscription h3,
.moko-client-section-title h3 {
  color: var(--color-secondary);
  font-size: clamp(24px, 3vw, 34px);
  font-weight: 800;
  line-height: 1.12;
}

html.dark .moko-client-subscription h3,
html.dark .moko-client-section-title h3 {
  color: #ffffff;
}

.moko-client-subscription p,
.moko-client-exam-date small,
.moko-client-access-top small {
  margin-top: 8px;
  color: rgba(17, 23, 18, 0.66);
  line-height: 1.55;
}

html.dark .moko-client-subscription p,
html.dark .moko-client-exam-date small,
html.dark .moko-client-access-top small {
  color: rgba(255, 255, 255, 0.66);
}

.moko-client-subscription-head .btn {
  width: fit-content;
}

.moko-client-subscription-stats,
.moko-client-included-grid {
  display: grid;
  gap: 14px;
}

.moko-client-subscription-stats {
  padding: 24px 24px 0;
}

.moko-client-subscription-stats article {
  border-radius: 16px;
  background: var(--color-background-3);
  padding: 16px;
}

html.dark .moko-client-subscription-stats article {
  background: var(--color-background-7);
}

.moko-client-subscription-stats span,
.moko-client-progress-block span,
.moko-client-exam-date span,
.moko-client-quota-row span,
.moko-client-access-unlimited span {
  color: rgba(17, 23, 18, 0.64);
  font-size: 13px;
  font-weight: 800;
}

html.dark .moko-client-subscription-stats span,
html.dark .moko-client-progress-block span,
html.dark .moko-client-exam-date span,
html.dark .moko-client-quota-row span,
html.dark .moko-client-access-unlimited span {
  color: rgba(255, 255, 255, 0.58);
}

.moko-client-subscription-stats strong,
.moko-client-progress-block strong,
.moko-client-exam-date strong,
.moko-client-access-top strong,
.moko-client-quota-row strong,
.moko-client-access-unlimited strong {
  display: block;
  margin-top: 5px;
  color: var(--color-secondary);
  font-weight: 900;
}

html.dark .moko-client-subscription-stats strong,
html.dark .moko-client-progress-block strong,
html.dark .moko-client-exam-date strong,
html.dark .moko-client-access-top strong,
html.dark .moko-client-quota-row strong,
html.dark .moko-client-access-unlimited strong {
  color: #ffffff;
}

.moko-client-progress-block,
.moko-client-exam-date {
  margin: 20px 24px 0;
}

.moko-client-progress-block > div:first-child {
  display: flex;
  justify-content: space-between;
  gap: 14px;
}

.moko-client-progress-track {
  margin-top: 10px;
  height: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(47, 125, 82, 0.12);
}

.moko-client-progress-track span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--color-primary-500);
}

.moko-client-exam-date {
  display: grid;
  gap: 3px;
  border-top: 1px solid var(--color-stroke-2);
  padding: 18px 0 24px;
}

html.dark .moko-client-exam-date {
  border-color: var(--color-stroke-7);
}

.moko-client-section-title {
  display: grid;
  gap: 10px;
  margin-bottom: 16px;
}

.moko-client-included-grid article {
  display: grid;
  gap: 18px;
  padding: 20px;
}

.moko-client-access-top {
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
}

.moko-client-access-top > span {
  display: grid;
  width: 50px;
  height: 50px;
  place-items: center;
  border-radius: 16px;
  background: rgba(47, 125, 82, 0.12);
  color: var(--moko-texte-vert);
  font-weight: 900;
}

.moko-client-included-grid article.is-limited .moko-client-access-top > span {
  background: rgba(242, 193, 78, 0.22);
  color: #8f5b00;
}

html.dark .moko-client-included-grid article.is-limited .moko-client-access-top > span {
  color: #f2c14e;
}

.moko-client-quota-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.moko-client-quota-row div,
.moko-client-access-unlimited {
  border-radius: 14px;
  background: var(--color-background-3);
  padding: 12px;
}

html.dark .moko-client-quota-row div,
html.dark .moko-client-access-unlimited {
  background: var(--color-background-7);
}

@media (min-width: 768px) {
  .moko-client-subscription-head {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }

  .moko-client-subscription-stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .moko-client-included-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1180px) {
  .moko-client-included-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  .moko-client-quota-row {
    grid-template-columns: 1fr;
  }
}

.moko-client-table-wrap {
  margin-top: 28px;
  overflow-x: auto;
}

.moko-client-table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
}

.moko-client-table th,
.moko-client-table td {
  border-bottom: 1px solid var(--color-stroke-2);
  padding: 15px;
  text-align: left;
}

html.dark .moko-client-table th,
html.dark .moko-client-table td {
  border-color: var(--color-stroke-7);
}

.moko-client-table th {
  color: var(--color-secondary);
  font-size: 13px;
  font-weight: 800;
}

html.dark .moko-client-table th {
  color: #ffffff;
}

.moko-answer-pill,
.moko-answer-explanation {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--moko-semantic-info-border);
  border-radius: 999px;
  background: var(--moko-semantic-info-bg);
  color: var(--moko-semantic-info-text);
  padding: 6px 10px;
  font-size: 13px;
  font-weight: 800;
}

.moko-answer-explanation {
  border-radius: 14px;
  white-space: normal;
  font-weight: 700;
}

.moko-answer-pill.is-correct {
  border-color: var(--moko-semantic-success-border);
  background: var(--moko-semantic-success-bg);
  color: var(--moko-semantic-success-text);
}

.moko-answer-pill.is-incorrect {
  border-color: var(--moko-semantic-danger-border);
  background: var(--moko-semantic-danger-bg);
  color: var(--moko-semantic-danger-text);
}

.moko-answer-pill.is-incorrect::before {
  content: "x";
  font-weight: 900;
}

.moko-profile-card {
  display: grid;
  gap: 14px;
  padding: 16px;
}

@media (max-width: 767px) {
  .moko-profile-card {
    padding: 14px;
  }
}

.moko-profile-card label {
  display: grid;
  gap: 8px;
  color: var(--color-secondary);
  font-size: 14px;
  font-weight: 800;
}

html.dark .moko-profile-card label {
  color: #ffffff;
}

.moko-client-app {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  color: var(--color-secondary);
}

html.dark .moko-client-app {
  color: #ffffff;
}

/* Les quatre visuels du hero restent administrables en base et visibles sur
   toutes les largeurs. Le texte garde toujours la couche superieure. */
[data-moko-home-hero-content] {
  isolation: isolate;
}

[data-moko-home-hero-content] > :not([data-moko-hero-visual]) {
  position: relative;
  z-index: 2;
}

[data-moko-hero-visual] {
  pointer-events: none;
  z-index: 0 !important;
}

@media (min-width: 1280px) {
  /* Les cartes restent dans les limites laterales du hero. Le leger decalage
     conserve l'effet flottant sans les coller aux bords de la fenetre. */
  [data-moko-hero-visual="1"] { left: -4% !important; }
  [data-moko-hero-visual="2"] { left: 38px !important; }
  [data-moko-hero-visual="3"] { right: -3% !important; }
  [data-moko-hero-visual="4"] { right: 38px !important; }
}

@media (min-width: 1280px) and (max-width: 1599px) {
  /* Sur un ordinateur plus étroit, le déplacement reste léger afin de ne pas
     rogner les cartes : l'écart plus ample ne commence qu'aux grands écrans. */
  [data-moko-hero-visual="1"] { left: -18px !important; }
  [data-moko-hero-visual="3"] { right: -14px !important; }
}

@media (min-width: 640px) and (max-width: 1279px) {
  [data-moko-hero-visual] {
    display: block !important;
    opacity: 0.62;
    width: 104px !important;
  }

  [data-moko-hero-visual="1"] { left: 14px !important; top: 16% !important; }
  [data-moko-hero-visual="2"] { bottom: auto !important; left: 24px !important; top: 44% !important; }
  [data-moko-hero-visual="3"] { right: 14px !important; top: 18% !important; }
  [data-moko-hero-visual="4"] { bottom: auto !important; right: 24px !important; top: 47% !important; }
}

@media (max-width: 639px) {
  [data-moko-accueil-champ="hero-sous-titre"] {
    margin-top: 24px;
  }

  [data-moko-hero-visual] {
    display: block !important;
    opacity: 0.58;
    width: 68px !important;
  }

  /* Sur mobile, les quatre visuels retrouvent leur position autour du titre.
     Le z-index les place derriere le texte : "en dessous" designe ici le plan
     d'empilement, sans creer de bande verticale ni repousser le paragraphe. */
  [data-moko-hero-visual="1"] { left: 2px !important; top: 2px !important; }
  [data-moko-hero-visual="2"] { bottom: auto !important; left: 16px !important; top: 176px !important; }
  [data-moko-hero-visual="3"] { right: 2px !important; top: 8px !important; }
  [data-moko-hero-visual="4"] { bottom: auto !important; right: 16px !important; top: 188px !important; }
}

.moko-client-app-sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  gap: 28px;
  border-right: 1px solid var(--color-stroke-2);
  background: rgba(255, 255, 255, 0.92);
  padding: 34px 28px;
}

html.dark .moko-client-app-sidebar {
  border-color: var(--color-stroke-7);
  background: rgba(17, 23, 18, 0.94);
}

.moko-client-brand {
  display: inline-flex;
  width: 190px;
  max-width: 100%;
  border-radius: 18px;
  background: #ffffff;
  padding: 10px 16px;
  box-shadow: 0 12px 40px rgba(17, 23, 18, 0.08);
}

html.dark .moko-client-brand {
  background: #000000;
}

.moko-client-brand img {
  width: 100%;
  height: 44px;
  object-fit: contain;
}

.moko-client-nav-block {
  display: grid;
  gap: 12px;
}

.moko-client-nav-block > span {
  color: rgba(17, 23, 18, 0.64);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

html.dark .moko-client-nav-block > span {
  color: rgba(255, 255, 255, 0.48);
}

.moko-client-nav-block nav {
  display: grid;
  gap: 8px;
}

.moko-client-nav-block a,
.moko-client-mobile-nav a {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid transparent;
  border-radius: 14px;
  color: rgba(17, 23, 18, 0.68);
  padding: 12px 14px;
  font-weight: 800;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
}

html.dark .moko-client-nav-block a,
html.dark .moko-client-mobile-nav a {
  color: rgba(255, 255, 255, 0.68);
}

.moko-client-nav-block a svg,
.moko-client-mobile-nav a svg,
.moko-client-icon-link svg,
.moko-client-search svg {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
}

.moko-client-nav-block a:hover,
.moko-client-nav-block a.is-active,
.moko-client-mobile-nav a:hover,
.moko-client-mobile-nav a.is-active {
  border-color: rgba(47, 125, 82, 0.26);
  background: rgba(47, 125, 82, 0.1);
  color: var(--moko-texte-vert);
}

.moko-client-user-card {
  margin-top: auto;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  border: 1px solid var(--color-stroke-2);
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(47, 125, 82, 0.18), rgba(242, 193, 78, 0.22));
  padding: 14px;
}

html.dark .moko-client-user-card {
  border-color: var(--color-stroke-7);
}

.moko-client-user-card > span {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border-radius: 999px;
  background: var(--color-secondary);
  color: #ffffff;
  font-weight: 900;
}

html.dark .moko-client-user-card > span {
  background: #ffffff;
  color: var(--color-secondary);
}

.moko-client-user-card strong,
.moko-client-user-card small {
  display: block;
}

.moko-client-user-card strong {
  color: var(--color-secondary);
  font-weight: 800;
}

.moko-client-user-card small {
  margin-top: 3px;
  color: rgba(17, 23, 18, 0.62);
  font-size: 12px;
}

html.dark .moko-client-user-card strong {
  color: #ffffff;
}

html.dark .moko-client-user-card small {
  color: rgba(255, 255, 255, 0.66);
}

.moko-client-app-main {
  min-width: 0;
}

.moko-client-topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(260px, 560px) auto;
  gap: 22px;
  align-items: center;
  border-bottom: 1px solid var(--color-stroke-2);
  background: rgba(255, 255, 255, 0.92);
  padding: 24px 36px;
  backdrop-filter: blur(18px);
}

html.dark .moko-client-topbar {
  border-color: var(--color-stroke-7);
  background: rgba(17, 23, 18, 0.9);
}

.moko-client-topbar p {
  color: rgba(17, 23, 18, 0.64);
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
}

.moko-client-topbar h1 {
  margin-top: 2px;
  color: var(--color-secondary);
  font-size: 28px;
  font-weight: 700;
  line-height: 1.1;
}

html.dark .moko-client-topbar p {
  color: rgba(255, 255, 255, 0.52);
}

html.dark .moko-client-topbar h1 {
  color: #ffffff;
}

.moko-client-search {
  position: relative;
}

.moko-client-search svg {
  position: absolute;
  top: 50%;
  left: 18px;
  color: rgba(17, 23, 18, 0.64);
  transform: translateY(-50%);
}

html.dark .moko-client-search svg {
  color: rgba(255, 255, 255, 0.48);
}

.moko-client-search .auth-form-input {
  height: 54px;
  border-color: var(--color-stroke-2);
  border-radius: 16px;
  background: var(--color-background-3);
  padding-left: 52px;
}

html.dark .moko-client-search .auth-form-input {
  border-color: var(--color-stroke-7);
  background: var(--color-background-8);
}

.moko-client-topbar-actions {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: flex-end;
}

.moko-client-topbar-actions .btn span {
  text-transform: none;
}

.moko-client-icon-link {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border: 1px solid var(--color-stroke-2);
  border-radius: 999px;
  background: #ffffff;
  color: var(--color-secondary);
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}

.moko-client-icon-link:hover {
  border-color: var(--color-primary-500);
  background: var(--color-primary-500);
  color: #ffffff;
}

html.dark .moko-client-icon-link {
  border-color: var(--color-stroke-7);
  background: var(--color-background-7);
  color: #ffffff;
}

.moko-client-app .moko-client-content {
  max-width: 1500px;
  margin: 0 auto;
  padding: 34px 36px 48px;
}

@media (min-width: 900px) {
  /* Le verrou `height: 100vh; overflow: hidden` sur .moko-client-app figeait
     la page entiere : la molette au-dessus de la barre laterale et le clavier
     ne defilaient plus rien, et la barre de defilement vivait cachee a
     l'interieur de la colonne. La page defile a nouveau normalement ; la
     barre laterale reste a demeure par le `position: sticky` qu'elle porte
     deja, sans conteneur fige. */
  .moko-client-app-sidebar {
    height: 100vh;
    overflow-y: auto;
  }

  .moko-client-topbar {
    background: #ffffff;
  }

  html.dark .moko-client-topbar {
    background: var(--color-background-9);
  }
}

.moko-client-mobile-nav {
  display: none;
}

.moko-client-tabs {
  display: flex;
  flex-wrap: wrap;
  overflow-x: auto;
  gap: 8px;
  margin-bottom: 24px;
  border-radius: 18px;
  background: var(--color-background-3);
  padding: 6px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.moko-client-tabs::-webkit-scrollbar { display: none; }

html.dark .moko-client-tabs {
  background: var(--color-background-8);
}

.moko-client-tabs a {
  flex: 1 1 auto;
  min-width: 120px;
  border-radius: 14px;
  color: rgba(17, 23, 18, 0.62);
  padding: 10px 14px;
  text-align: center;
  font-weight: 800;
  transition: background 160ms ease, color 160ms ease;
}

.moko-client-tabs a:hover,
.moko-client-tabs a.is-active {
  background: #ffffff;
  color: var(--color-secondary);
  box-shadow: 0 8px 24px rgba(17, 23, 18, 0.08);
}

html.dark .moko-client-tabs a {
  color: rgba(255, 255, 255, 0.62);
}

html.dark .moko-client-tabs a:hover,
html.dark .moko-client-tabs a.is-active {
  background: var(--color-background-7);
  color: #ffffff;
}

@media (max-width: 899px) {
  .moko-client-tabs {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 50;
    flex-wrap: nowrap;
    overflow-x: auto;
    margin-bottom: 0;
    border-top: 1px solid var(--color-stroke-2);
    border-radius: 18px 18px 0 0;
    background: var(--color-background-3);
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
    box-shadow: 0 -16px 42px rgba(17, 23, 18, 0.14);
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .moko-client-tabs::-webkit-scrollbar {
    display: none;
  }

  html.dark .moko-client-tabs {
    border-top-color: var(--color-stroke-7);
    background: var(--color-background-8);
    box-shadow: 0 -16px 42px rgba(0, 0, 0, 0.34);
  }

  .moko-client-tabs a {
    flex: 0 0 auto;
    min-width: max-content;
    white-space: nowrap;
  }

  .moko-client-tabs.is-inline {
    position: static;
    z-index: auto;
    margin-bottom: 18px;
    border-top: 0;
    border-radius: 999px;
    box-shadow: none;
    padding: 6px;
  }
}

/* La carte active du carrousel porte toujours un fond sombre via son
   pseudo-element. Les utilitaires de couleur du gabarit etaient charges
   apres les regles du composant et remettaient le texte principal en noir
   en mode clair. La priorite reste locale au carrousel : les cartes
   inactives conservent leurs couleurs de surface claire. */
.reviews-swiper .swiper-slide-active .review-text,
.reviews-swiper .swiper-slide-active .review-name {
  color: #fcfcfc !important;
}

.reviews-swiper .swiper-slide-active .review-title {
  color: rgb(252 252 252 / 80%) !important;
}

.moko-client-dashboard-grid {
  display: grid;
  gap: 14px;
  margin-top: 18px;
}

.moko-sim-shell {
  min-height: 100vh;
  color: var(--color-secondary);
}

html.dark .moko-sim-shell {
  color: var(--color-background-1);
}

.moko-sim-reader {
  min-height: 100vh;
  padding: 24px 24px 112px;
}

.moko-sim-topbar,
.moko-sim-bottombar,
.moko-sim-stage,
.moko-sim-drawer,
.moko-sim-bilan-card {
  border: 1px solid var(--color-stroke-2);
  background: var(--color-background-1);
  box-shadow: 0 18px 48px color-mix(in srgb, var(--color-secondary) 10%, transparent);
}

html.dark .moko-sim-topbar,
html.dark .moko-sim-bottombar,
html.dark .moko-sim-stage,
html.dark .moko-sim-drawer,
html.dark .moko-sim-bilan-card {
  border-color: var(--color-stroke-7);
  background: var(--color-background-8);
  box-shadow: 0 18px 48px color-mix(in srgb, var(--color-secondary) 42%, transparent);
}

.moko-sim-topbar {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto minmax(260px, 1fr);
  align-items: center;
  gap: 18px;
  border-radius: 24px;
  padding: 16px;
}

.moko-sim-timer,
.moko-sim-counts {
  display: grid;
  gap: 4px;
}

.moko-sim-timer span,
.moko-sim-counts span,
.moko-sim-note,
.moko-sim-question-head span,
.moko-sim-question-head strong,
.moko-sim-support span,
.moko-sim-bilan-card > span,
.moko-sim-bilan-grid span {
  color: color-mix(in srgb, currentColor 68%, transparent);
  font-size: 13px;
  font-weight: 800;
}

.moko-sim-timer strong {
  color: var(--moko-texte-vert);
  font-size: clamp(28px, 4vw, 42px);
  line-height: 1;
}

.moko-sim-counts {
  justify-items: center;
  text-align: center;
}

.moko-sim-counts strong {
  font-size: 18px;
}

.moko-sim-top-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

html.dark .moko-sim-top-actions .btn {
  border-color: var(--color-background-1) !important;
  background: var(--color-background-1) !important;
  color: var(--color-secondary) !important;
}

html.dark .moko-sim-top-actions .btn span {
  color: var(--color-secondary) !important;
}

.moko-sim-stage {
  max-width: 980px;
  margin: 26px auto 0;
  border-radius: 28px;
  padding: clamp(18px, 4vw, 42px);
  align-self: start;
}

.moko-sim-note {
  display: block;
  width: fit-content;
  max-width: 100%;
  border: 1px solid var(--moko-semantic-info-border);
  border-radius: 12px;
  background: var(--moko-semantic-info-bg);
  color: var(--moko-semantic-info-text);
  padding: 12px;
  margin-bottom: 18px;
}

.moko-sim-question {
  display: grid;
  gap: 20px;
}

.moko-sim-question-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.moko-sim-question-head span {
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-primary-500) 12%, transparent);
  color: var(--moko-texte-vert);
  padding: 8px 14px;
}

.moko-sim-support {
  display: grid;
  gap: 10px;
  border: 1px solid var(--color-stroke-2);
  border-radius: 22px;
  background: var(--color-background-2);
  padding: clamp(18px, 3vw, 28px);
}

html.dark .moko-sim-support {
  border-color: var(--color-stroke-7);
  background: var(--color-background-7);
}

.moko-sim-support p,
.moko-sim-bilan-card p {
  color: color-mix(in srgb, currentColor 72%, transparent);
}

.moko-sim-document,
.moko-sim-audio {
  display: flex;
  min-height: 96px;
  align-items: center;
  justify-content: center;
  border: 1px dashed var(--color-stroke-3);
  border-radius: 18px;
  background: color-mix(in srgb, var(--color-primary-500) 8%, transparent);
  color: var(--moko-texte-vert);
}

html.dark .moko-sim-document,
html.dark .moko-sim-audio {
  border-color: var(--color-stroke-7);
}

.moko-sim-audio {
  gap: 12px;
}

.moko-sim-audio span {
  width: 56px;
  height: 56px;
  border-radius: 999px;
  background: var(--color-primary-500);
}

.moko-sim-question h1 {
  margin: 0;
  font-size: clamp(30px, 4vw, 54px);
  line-height: 1.08;
}

.moko-sim-bilan-card h1 {
  margin: 0;
  font-size: clamp(24px, 2.6vw, 30px);
  line-height: 1.2;
}

.moko-sim-choices {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.moko-sim-choices button,
.moko-sim-nav-grid button,
.moko-sim-drawer > div:first-child button {
  border: 1px solid var(--color-stroke-2);
  background: var(--color-background-1);
  color: var(--color-secondary);
  transition: border-color 160ms ease, background 160ms ease, color 160ms ease, transform 160ms ease;
}

html.dark .moko-sim-choices button,
html.dark .moko-sim-nav-grid button,
html.dark .moko-sim-drawer > div:first-child button {
  border-color: var(--color-stroke-7);
  background: var(--color-background-7);
  color: var(--color-background-1);
}

.moko-sim-choices button {
  display: flex;
  min-height: 78px;
  align-items: center;
  gap: 14px;
  border-radius: 18px;
  padding: 14px;
  text-align: left;
}

.moko-sim-choices button strong {
  display: inline-grid;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-primary-500) 12%, transparent);
  color: var(--moko-texte-vert);
}

.moko-sim-choices button:hover,
.moko-sim-choices button.is-selected,
.moko-sim-nav-grid button:hover,
.moko-sim-nav-grid button.is-current {
  border-color: var(--color-primary-500);
  background: var(--color-primary-500);
  color: var(--color-background-1);
}

.moko-sim-choices button:hover strong,
.moko-sim-choices button.is-selected strong {
  background: var(--color-background-1);
  color: var(--moko-texte-vert);
}

.moko-sim-nav-grid button.is-answered:not(.is-current) {
  border-color: var(--color-primary-500);
  background: color-mix(in srgb, var(--color-primary-500) 14%, transparent);
  color: var(--moko-texte-vert);
}

.moko-sim-bottombar {
  position: fixed;
  right: 24px;
  bottom: 24px;
  left: 24px;
  z-index: 40;
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: 14px;
  border-radius: 24px;
  padding: 14px;
}

.moko-sim-bottombar > span {
  justify-self: center;
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-primary-500) 12%, transparent);
  color: var(--moko-texte-vert);
  padding: 8px 14px;
  font-weight: 900;
}

.moko-sim-drawer {
  position: fixed;
  top: 24px;
  right: 24px;
  z-index: 60;
  width: min(380px, calc(100vw - 48px));
  border-radius: 24px;
  padding: 18px;
}

.moko-sim-drawer-overlay {
  position: fixed;
  inset: 0;
  z-index: 55;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
}

.moko-sim-drawer > div:first-child {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.moko-sim-drawer > div:first-child + * {
  display: contents;
}

.moko-sim-drawer h2 {
  margin: 0;
  font-size: 22px;
}

.moko-sim-drawer > div:first-child button {
  border-radius: 999px;
  padding: 8px 12px;
  font-weight: 800;
}

.moko-sim-nav-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.moko-sim-nav-grid button {
  aspect-ratio: 1;
  border-radius: 14px;
  font-weight: 900;
}

.moko-sim-legend {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 16px 0;
  font-size: 12px;
  font-weight: 400;
}

.moko-sim-legend span {
  display: flex;
  align-items: center;
  gap: 6px;
}

.moko-sim-legend i {
  width: 12px;
  height: 12px;
  border: 2px solid var(--color-stroke-2);
  border-radius: 4px;
}

.moko-sim-legend i[data-state="current"] {
  border-color: var(--color-primary-500);
  background: var(--color-primary-500);
}

.moko-sim-legend i[data-state="answered"] {
  border-color: var(--color-primary-500);
  background: color-mix(in srgb, var(--color-primary-500) 16%, transparent);
}

.moko-sim-bilan {
  display: grid;
  min-height: 100vh;
  place-items: center;
  padding: 24px;
}

.moko-sim-bilan-card {
  width: min(880px, 100%);
  border-radius: 28px;
  padding: clamp(20px, 3vw, 32px);
}

.moko-sim-bilan-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 24px 0;
}

.moko-sim-bilan-grid article {
  border: 1px solid var(--color-stroke-2);
  border-radius: 18px;
  background: var(--moko-semantic-info-bg);
  padding: 16px;
}

.moko-sim-bilan-grid article:first-child {
  border-color: var(--moko-semantic-success-border);
  background: var(--moko-semantic-success-bg);
  color: var(--moko-semantic-success-text);
}

.moko-sim-bilan-grid article:nth-child(2) {
  border-color: var(--moko-semantic-info-border);
  color: var(--moko-semantic-info-text);
}

html.dark .moko-sim-bilan-grid article {
  border-color: var(--color-stroke-7);
}

.moko-sim-bilan-grid strong {
  display: block;
  margin-top: 6px;
  font-size: 28px;
}

.moko-sim-bilan-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.moko-sim-shell [hidden] {
  display: none !important;
}

@media (max-width: 899px) {
  .moko-sim-reader {
    padding: 12px 12px 128px;
  }

  .moko-sim-topbar,
  .moko-sim-bottombar {
    grid-template-columns: 1fr;
  }

  .moko-sim-counts,
  .moko-sim-top-actions {
    justify-items: stretch;
    justify-content: stretch;
  }

  .moko-sim-top-actions,
  .moko-sim-bilan-actions {
    display: grid;
  }

  .moko-sim-top-actions {
    display: flex;
    justify-content: center;
    gap: 8px;
  }

  .moko-sim-top-actions .btn {
    width: auto;
    min-height: 34px;
    font-size: 13px;
  }

  .moko-sim-choices {
    grid-template-columns: 1fr;
  }

  .moko-sim-bilan-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  .moko-sim-bilan-grid article {
    border-radius: 14px;
    padding: 12px 10px;
  }

  .moko-sim-bilan-grid span {
    display: block;
    font-size: 11px;
    font-weight: 400;
    line-height: 1.3;
    white-space: nowrap;
  }

  .moko-sim-bilan-grid strong {
    margin-top: 4px;
    font-size: 20px;
    line-height: 1.2;
    white-space: nowrap;
  }

  .moko-sim-bottombar {
    right: 12px;
    bottom: 12px;
    left: 12px;
  }

  .moko-sim-audio-row {
    min-height: 58px;
    padding: 10px 12px;
  }

  .moko-sim-question-head {
    align-items: flex-start;
    flex-direction: column;
  }

}

.moko-sim-progress {
  width: min(320px, 44vw);
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in srgb, currentColor 10%, transparent);
}

.moko-sim-progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--color-primary-500);
  transition: width 180ms ease;
}

.moko-sim-current-count {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  gap: 1px;
}

.moko-sim-current-count span {
  color: currentColor;
  font-size: 20px;
  font-weight: 900;
}

.moko-sim-current-count small {
  color: color-mix(in srgb, currentColor 78%, transparent);
  font-size: 14px;
  font-weight: 600;
}

.moko-sim-start {
  display: grid;
  min-height: 100vh;
  place-items: center;
  padding: 24px;
}

.moko-sim-start-card {
  display: grid;
  width: min(760px, 100%);
  gap: 18px;
  border: 1px solid var(--color-stroke-2);
  border-radius: 28px;
  background: var(--color-background-1);
  box-shadow: 0 22px 64px color-mix(in srgb, var(--color-secondary) 14%, transparent);
  padding: clamp(22px, 5vw, 44px);
}

html.dark .moko-sim-start-card {
  border-color: var(--color-stroke-7);
  background: var(--color-background-8);
  box-shadow: 0 22px 64px color-mix(in srgb, var(--color-secondary) 45%, transparent);
}

.moko-sim-start-card > span,
.moko-sim-start-meta {
  color: var(--moko-semantic-info-text);
  font-size: 13px;
  font-weight: 900;
}

.moko-sim-start-card h1 {
  margin: 0;
  font-size: clamp(42px, 7vw, 74px);
  line-height: 1;
}

.moko-sim-start-meta {
  margin: 0;
  border: 1px solid var(--moko-semantic-info-border);
  border-radius: 999px;
  background: var(--moko-semantic-info-bg);
  padding: 8px 14px;
  width: fit-content;
}

.moko-sim-start-advice,
.moko-sim-start-audio,
.moko-sim-exam-mode {
  border: 1px solid var(--color-stroke-2);
  border-radius: 18px;
  background: var(--color-background-2);
  padding: 16px;
}

html.dark .moko-sim-start-advice,
html.dark .moko-sim-start-audio,
html.dark .moko-sim-exam-mode {
  border-color: var(--color-stroke-7);
  background: var(--color-background-7);
}

.moko-sim-start-advice strong,
.moko-sim-start-audio > strong,
.moko-sim-exam-mode strong {
  display: block;
  margin-bottom: 6px;
}

.moko-sim-start-advice p,
.moko-sim-exam-mode p,
.moko-sim-exam-mode small {
  margin: 0;
  color: color-mix(in srgb, currentColor 70%, transparent);
}

.moko-ee-exam-mode {
  border-radius: 14px;
  padding: 12px 14px;
}

.moko-ee-exam-mode strong {
  margin-bottom: 2px;
  font-size: 14px;
}

.moko-ee-exam-mode p,
.moko-ee-exam-mode small {
  display: block;
  font-size: 11px;
  line-height: 1.35;
}

.moko-sim-exam-mode {
  display: flex;
  align-items: center;
  gap: 14px;
}

.moko-sim-exam-mode button {
  position: relative;
  width: 50px;
  height: 28px;
  flex: 0 0 auto;
  border: 1px solid var(--color-stroke-2);
  border-radius: 999px;
  background: var(--color-background-1);
  transition: background 160ms ease, border-color 160ms ease;
}

.moko-sim-exam-mode button span {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: var(--color-primary-500);
  transition: transform 160ms ease;
}

.moko-sim-exam-mode button.is-active {
  border-color: var(--color-primary-500);
  background: color-mix(in srgb, var(--color-primary-500) 18%, transparent);
}

.moko-sim-exam-mode button.is-active span {
  transform: translateX(22px);
}

.moko-sim-audio-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 64px;
  border: 1px solid color-mix(in srgb, var(--color-primary-500) 22%, var(--color-stroke-2));
  border-radius: 12px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--color-primary-500) 11%, var(--color-background-1)), color-mix(in srgb, var(--color-primary-500) 7%, var(--color-background-2)));
  padding: 12px 14px;
}

html.dark .moko-sim-audio-row {
  border-color: color-mix(in srgb, var(--color-primary-500) 34%, var(--color-stroke-7));
  background: linear-gradient(90deg, color-mix(in srgb, var(--color-primary-500) 18%, var(--color-background-8)), color-mix(in srgb, var(--color-primary-500) 10%, var(--color-background-7)));
}

.moko-sim-audio-play {
  display: inline-grid;
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: var(--color-primary-500);
  color: var(--color-background-1);
  box-shadow: 0 8px 18px color-mix(in srgb, var(--color-primary-500) 30%, transparent);
  font-size: 10px;
  font-weight: 900;
}

.moko-sim-audio-play svg {
  width: 18px;
  height: 18px;
}

.moko-sim-audio-main {
  display: grid;
  flex: 1;
  min-width: 0;
  gap: 7px;
}

.moko-sim-audio-main span {
  color: var(--moko-texte-vert);
  font-size: 13px;
  font-weight: 900;
}

.moko-sim-audio-main input,
.moko-sim-volume-popover input {
  width: 100%;
  accent-color: var(--color-primary-500);
}

.moko-sim-audio-main input {
  height: 6px;
}

.moko-sim-audio-row.is-strict {
  border-color: var(--moko-semantic-danger-border);
  background: var(--moko-semantic-danger-bg);
}

html.dark .moko-sim-audio-row.is-strict {
  border-color: var(--moko-semantic-danger-border);
  background: var(--moko-semantic-danger-bg);
}

.moko-sim-audio-row.is-strict .moko-sim-audio-main span,
.moko-sim-audio-row.is-strict .moko-sim-volume-button {
  color: var(--moko-semantic-danger-text);
}

.moko-sim-audio-row.is-strict input[data-moko-audio-progress] {
  cursor: not-allowed;
}

.moko-sim-audio-row.is-strict .moko-sim-audio-play[disabled] {
  opacity: 0.75;
  cursor: not-allowed;
}

.moko-sim-volume {
  position: relative;
  flex: 0 0 auto;
}

.moko-sim-volume-button {
  display: inline-grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-primary-500) 12%, transparent);
  color: var(--moko-texte-vert);
  font-size: 11px;
  font-weight: 900;
}

.moko-sim-volume-button svg {
  width: 16px;
  height: 16px;
}

.moko-sim-volume-popover {
  position: absolute;
  right: 0;
  bottom: calc(100% + 8px);
  z-index: 5;
  width: 130px;
  border: 1px solid var(--color-stroke-2);
  border-radius: 12px;
  background: var(--color-background-1);
  padding: 10px;
  box-shadow: 0 12px 30px color-mix(in srgb, var(--color-secondary) 18%, transparent);
}

html.dark .moko-sim-volume-popover {
  border-color: var(--color-stroke-7);
  background: var(--color-background-8);
}

.moko-sim-question-head .moko-sim-question-badge {
  border: 2px solid #3b82f6;
  border-radius: 999px;
  background: transparent;
  color: #2563eb;
  padding: 8px 24px;
  font-weight: 900;
}

.moko-sim-official-support {
  display: grid;
  gap: 12px;
  justify-items: center;
}

.moko-sim-official-support.has-audio-image {
  width: min(901px, 100%);
}

.moko-sim-official-support.has-audio-image .moko-sim-audio-row {
  width: 100%;
}

.moko-sim-official-card {
  position: relative;
  display: block;
  width: min(901px, 100%);
  min-height: 356px;
  overflow: hidden;
  border: 2px solid #3b82f6;
  border-radius: 12px;
  background: #f9fafb;
  color: #111827;
  padding: clamp(22px, 4vw, 42px);
  text-align: left;
  cursor: zoom-in;
  box-shadow: 0 18px 42px color-mix(in srgb, #2563eb 10%, transparent);
}

.moko-sim-official-card:not(.is-image) {
  display: flex;
  width: min(640px, 100%);
  min-height: 160px;
  height: auto;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  padding: 28px 28px 50px;
}

.moko-sim-official-card.is-image {
  display: grid;
  place-items: center;
  padding: 18px;
}

.moko-sim-official-card.is-audio {
  display: grid;
  align-items: center;
}

.moko-sim-official-image {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  max-height: 360px;
  object-fit: contain;
}

.moko-sim-watermark {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 0;
  width: min(68%, 520px);
  max-height: 70%;
  object-fit: contain;
  opacity: 0.1;
  pointer-events: none;
  transform: translate(-50%, -50%);
}

.moko-sim-official-card:not(.is-image) .moko-sim-watermark {
  width: 60%;
  opacity: 0.07;
}

.moko-sim-official-document {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 10px;
  color: #111827;
  font-size: 24px;
  line-height: 1.6;
  font-weight: 400;
}

.moko-sim-official-document p {
  margin: 0;
  color: inherit !important;
  font-size: inherit !important;
  line-height: inherit !important;
  -webkit-text-fill-color: currentColor;
}

.moko-sim-official-card:not(.is-image) .moko-sim-official-document {
  width: 100%;
  color: #111827 !important;
}

.moko-sim-credit {
  position: absolute;
  right: 18px;
  bottom: 14px;
  z-index: 2;
  color: #2563eb;
  font-size: 13px;
  font-weight: 900;
}

.moko-sim-official-card:not(.is-image) .moko-sim-credit {
  font-size: 11px;
}

.moko-sim-zoom {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, #111827 55%, transparent);
  color: #ffffff;
  font-size: 14px;
  font-weight: 700;
  opacity: 0;
  transition: opacity 160ms ease;
}

.moko-sim-zoom > span {
  border-radius: 999px;
  background: #111827;
  color: #ffffff;
  padding: 6px 14px;
  text-shadow: none;
}

.moko-sim-official-card:hover .moko-sim-zoom,
.moko-sim-official-card:focus-visible .moko-sim-zoom {
  opacity: 1;
}

.moko-sim-question h3.moko-sim-enonce {
  max-width: 640px;
  margin: 0 auto;
  color: var(--color-secondary);
  font-size: clamp(15px, 1.6vw, 18px);
  line-height: 1.35;
  font-weight: 700;
  text-align: center;
}

html.dark .moko-sim-question h3.moko-sim-enonce {
  color: var(--color-background-1);
}

.moko-sim-choices {
  gap: 8px;
}

.moko-sim-question .moko-sim-choices,
.moko-sim-question .moko-sim-enonce {
  width: 100%;
  max-width: 640px;
  margin-inline: auto;
}

.moko-sim-choices button {
  min-height: 44px;
  gap: 8px;
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 15px;
  line-height: 1.35;
}

.moko-sim-choices button strong {
  width: 28px;
  height: 28px;
}

.moko-sim-choices.is-letter-only {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.moko-sim-choices.is-letter-only button {
  width: auto;
  min-width: 44px;
  min-height: 44px;
  flex: 0 0 auto;
  justify-content: center;
  border-radius: 999px;
  padding: 5px;
  text-align: center;
}

.moko-sim-choices.is-letter-only button strong {
  width: 32px;
  height: 32px;
}

.moko-sim-transcript-toggle {
  justify-self: start;
  border: 1px solid var(--moko-semantic-info-border);
  border-radius: 999px;
  background: var(--moko-semantic-info-bg);
  color: var(--moko-semantic-info-text);
  padding: 7px 12px;
  font-size: 13px;
  font-weight: 900;
  transition: border-color 160ms ease, background 160ms ease, color 160ms ease;
}

.moko-sim-transcript-toggle:hover {
  border-color: var(--color-primary-500);
  background: color-mix(in srgb, var(--color-primary-500) 10%, var(--color-background-1));
  color: var(--color-secondary);
}

html.dark .moko-sim-transcript-toggle:hover {
  background: color-mix(in srgb, var(--color-primary-500) 16%, var(--color-background-8));
  color: var(--color-background-1);
}

.moko-sim-transcript-toggle[disabled],
html.dark .moko-sim-transcript-toggle[disabled] {
  border-color: var(--moko-semantic-danger-border);
  background: var(--moko-semantic-danger-bg);
  color: var(--moko-semantic-danger-text);
  cursor: not-allowed;
}

.moko-sim-transcript {
  width: 100%;
  border: 1px solid var(--moko-semantic-info-border);
  border-radius: 16px;
  background: var(--moko-semantic-info-bg);
  color: var(--moko-semantic-info-text);
  padding: 14px;
}

.moko-sim-transcript strong {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 900;
  text-transform: uppercase;
}

.moko-sim-transcript p {
  margin: 0;
  color: inherit;
  font-size: 15px;
  line-height: 1.55;
}

.moko-sim-review-support {
  overflow: hidden;
  border: 1px solid #3b82f6;
  border-radius: 16px;
  background: #f9fafb;
  color: #111827;
  padding: 16px;
}

@media (max-width: 767px) {
  .moko-sim-review-support {
    padding: 14px;
  }
}

.moko-sim-review-support .moko-sim-official-document {
  font-size: 18px;
  line-height: 1.45;
}

.moko-sim-review-support .moko-sim-official-document,
.moko-sim-review-support .moko-sim-official-document p {
  color: #111827 !important;
  -webkit-text-fill-color: #111827;
}

.moko-sim-review-support img {
  display: block;
  width: 100%;
  max-height: 240px;
  object-fit: contain;
}

@media (max-width: 899px) {
  .moko-sim-official-card {
    min-height: 260px;
    padding: 18px;
  }

  .moko-sim-official-card:not(.is-image) {
    width: calc(100% - 32px);
    min-height: 140px;
    margin-inline: 16px;
    padding: 20px 20px 42px;
  }

  .moko-sim-official-document {
    font-size: 18px;
    line-height: 1.6;
  }

  .moko-sim-official-image {
    max-height: 240px;
  }
}

.moko-sim-support .btn {
  width: max-content;
}

.moko-sim-choices button.is-selected {
  border-color: var(--color-primary-500);
  background: color-mix(in srgb, var(--color-primary-500) 12%, var(--color-background-1));
  color: var(--color-secondary);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-primary-500) 16%, transparent);
}

html.dark .moko-sim-choices button.is-selected {
  background: color-mix(in srgb, var(--color-primary-500) 18%, var(--color-background-8));
  color: var(--color-background-1);
}

.moko-sim-choices button:hover {
  border-color: var(--color-primary-500);
  background: color-mix(in srgb, var(--color-primary-500) 10%, var(--color-background-1));
  color: var(--color-secondary);
  transform: translateY(-1px);
}

html.dark .moko-sim-choices button:hover {
  background: color-mix(in srgb, var(--color-primary-500) 16%, var(--color-background-8));
  color: var(--color-background-1);
}

.moko-sim-choices button:hover strong,
.moko-sim-choices button.is-selected strong {
  background: var(--color-primary-500);
  color: var(--color-background-1);
}

.moko-sim-nav-grid button.is-answered:not(.is-current) {
  border-color: color-mix(in srgb, var(--color-primary-500) 46%, var(--color-ns-green));
  background: color-mix(in srgb, var(--color-ns-green) 16%, transparent);
  color: color-mix(in srgb, var(--color-primary-500) 52%, var(--color-ns-green));
}

.moko-sim-answer-map {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 20px 0 8px;
}

.moko-sim-answer-map span {
  display: inline-grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid var(--color-stroke-2);
  border-radius: 12px;
  font-weight: 900;
}

html.dark .moko-sim-answer-map span {
  border-color: var(--color-stroke-7);
}

.moko-sim-answer-map span[data-state="correct"],
.moko-sim-legend i[data-state="correct"] {
  border-color: var(--moko-semantic-success-border);
  background: var(--moko-semantic-success-bg);
  color: var(--moko-semantic-success-text);
}

.moko-sim-answer-map span[data-state="wrong"],
.moko-sim-legend i[data-state="wrong"] {
  border-color: var(--moko-semantic-danger-border);
  background: var(--moko-semantic-danger-bg);
  color: var(--moko-semantic-danger-text);
}

.moko-sim-bilan-card .moko-sim-legend {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 14px;
  font-weight: 400;
}

.moko-sim-bilan-card .moko-sim-legend > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: max-content;
  white-space: nowrap;
  font-weight: 400;
}

html:not(.dark) .moko-sim-bilan-card .moko-sim-legend i[data-state="correct"] {
  border-color: var(--moko-semantic-success-text);
  background: var(--moko-semantic-success-text);
}

html:not(.dark) .moko-sim-bilan-card .moko-sim-legend i[data-state="wrong"] {
  border-color: var(--moko-semantic-danger-text);
  background: var(--moko-semantic-danger-text);
}

html.dark .moko-sim-bilan-card .moko-sim-legend i[data-state="correct"] {
  border-color: var(--moko-semantic-success-border);
  background: var(--moko-semantic-success-border);
}

html.dark .moko-sim-bilan-card .moko-sim-legend i[data-state="wrong"] {
  border-color: var(--moko-semantic-danger-border);
  background: var(--moko-semantic-danger-border);
}

html.dark .moko-sim-answer-map span[data-state="correct"] {
  border-color: var(--moko-semantic-success-border);
}

html.dark .moko-sim-answer-map span[data-state="wrong"] {
  border-color: var(--moko-semantic-danger-border);
}

.moko-sim-review {
  display: grid;
  gap: 18px;
  margin-top: 22px;
}

.moko-sim-review article {
  display: grid;
  gap: 16px;
  border: 1px solid var(--color-stroke-2);
  border-radius: 22px;
  padding: clamp(16px, 3vw, 24px);
}

html.dark .moko-sim-review article {
  border-color: var(--color-stroke-7);
}

.moko-sim-review header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px;
}

[data-moko-review-question] h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.35;
}

.moko-sim-review-choices {
  display: grid;
  gap: 10px;
}

.moko-sim-review-choices div {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--color-stroke-2);
  border-radius: 16px;
  padding: 12px;
}

html.dark .moko-sim-review-choices div {
  border-color: var(--color-stroke-7);
}

.moko-sim-review-choices div.is-correct,
html.dark .moko-sim-review-choices div.is-correct {
  border-color: var(--moko-semantic-success-border);
  background: var(--moko-semantic-success-bg);
  color: var(--moko-semantic-success-text);
}

.moko-sim-review-choices div.is-incorrect,
.moko-sim-review-choices div.is-selected:not(.is-correct),
html.dark .moko-sim-review-choices div.is-incorrect,
html.dark .moko-sim-review-choices div.is-selected:not(.is-correct) {
  border-color: var(--moko-semantic-danger-border);
  background: var(--moko-semantic-danger-bg);
  color: var(--moko-semantic-danger-text);
}

.moko-sim-review-choices div.is-incorrect::after,
.moko-sim-review-choices div.is-selected:not(.is-correct)::after {
  content: "Mauvaise réponse";
  margin-left: auto;
  border-radius: 999px;
  background: var(--moko-semantic-danger-bg);
  color: var(--moko-semantic-danger-text);
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 900;
}

.moko-sim-review-choices strong {
  display: inline-grid;
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-primary-500) 12%, transparent);
  color: var(--moko-texte-vert);
}

.moko-sim-review-choices em {
  margin-left: auto;
  border-radius: 999px;
  background: var(--moko-semantic-success-bg);
  color: var(--moko-semantic-success-text);
  padding: 5px 10px;
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
}

.moko-sim-explanation {
  border: 1px solid var(--moko-semantic-info-border);
  border-radius: 18px;
  background: var(--moko-semantic-info-bg);
  color: var(--moko-semantic-info-text);
  padding: 16px;
  font-size: 14px;
  line-height: 1.5;
}

.moko-sim-explanation strong {
  font-size: 12px;
  letter-spacing: 0.04em;
}

.moko-sim-modal {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 18px;
  background: color-mix(in srgb, var(--color-secondary) 58%, transparent);
}

.moko-sim-modal > div {
  width: min(560px, 100%);
  border: 1px solid var(--color-stroke-2);
  border-radius: 26px;
  background: var(--color-background-1);
  box-shadow: 0 28px 80px color-mix(in srgb, var(--color-secondary) 26%, transparent);
  padding: clamp(20px, 4vw, 34px);
}

html.dark .moko-sim-modal > div {
  border-color: var(--color-stroke-7);
  background: var(--color-background-8);
}

.moko-sim-modal h2 {
  margin: 0 0 10px;
  font-size: clamp(26px, 4vw, 42px);
}

[data-moko-lightbox] {
  --moko-lightbox-scale: 2;
  --moko-lightbox-base-width: 640px;
  --moko-lightbox-frame-width: 1280px;
  --moko-lightbox-frame-height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(0, 0, 0, 0.9);
  backdrop-filter: blur(4px);
}

.moko-sim-lightbox-backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  border: 0;
  background: transparent;
  cursor: default;
}

[data-moko-lightbox] > div,
html.dark [data-moko-lightbox] > div {
  position: relative;
  z-index: 1;
  display: flex;
  width: 100%;
  max-width: none;
  height: 100%;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
  pointer-events: none;
}

.moko-sim-lightbox-close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 3;
  display: inline-grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
  padding: 0;
  pointer-events: auto;
}

.moko-sim-lightbox-close:hover,
.moko-sim-lightbox-close:focus-visible {
  background: rgba(255, 255, 255, 0.22);
}

.moko-sim-lightbox-close svg {
  width: 22px;
  height: 22px;
}

.moko-sim-lightbox-stage {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
}

.moko-sim-lightbox-text-frame {
  width: var(--moko-lightbox-frame-width);
  height: var(--moko-lightbox-frame-height);
  flex: 0 0 auto;
}

.moko-sim-lightbox-text-card {
  position: relative;
  display: flex;
  width: var(--moko-lightbox-base-width, 640px);
  min-height: 160px;
  height: auto;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 2px solid #3b82f6;
  border-radius: 12px;
  background: #f9fafb;
  color: #111827;
  padding: 28px 28px 44px;
  transform: scale(var(--moko-lightbox-scale));
  transform-origin: left top;
}

.moko-sim-lightbox-text-card .moko-sim-official-document,
.moko-sim-lightbox-text-card .moko-sim-official-document p {
  color: #111827 !important;
  font-size: 24px !important;
  line-height: 1.6 !important;
  -webkit-text-fill-color: #111827;
}

.moko-sim-lightbox-text-card .moko-sim-watermark {
  width: 66%;
  opacity: 0.07;
}

.moko-sim-lightbox-text-card .moko-sim-credit {
  right: 12px;
  bottom: 12px;
  font-size: 12px;
}

.moko-sim-lightbox-image {
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.moko-sim-nav-scope {
  margin: 10px 0 0;
  color: color-mix(in srgb, var(--color-secondary) 65%, transparent);
  font-size: 12px;
  line-height: 1.45;
}

html.dark .moko-sim-nav-scope {
  color: color-mix(in srgb, var(--color-background-1) 65%, transparent);
}

@media (min-width: 1024px) {
  .moko-sim-drawer-overlay {
    display: none;
  }

  .moko-sim-reader {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    grid-template-rows: auto 1fr auto;
    gap: 20px;
  }

  .moko-sim-topbar {
    grid-column: 1 / -1;
  }

  .moko-sim-drawer {
    position: sticky;
    top: 20px;
    grid-column: 1;
    grid-row: 2 / 4;
    width: auto;
    align-self: start;
  }

  .moko-sim-drawer > div:first-child button {
    display: none;
  }

  .moko-sim-stage {
    grid-column: 2;
    width: min(960px, 100%);
    margin-top: 0;
  }

  .moko-sim-bottombar {
    position: sticky;
    right: auto;
    bottom: 16px;
    left: auto;
    grid-column: 2;
    margin-top: 18px;
  }
}

@media (max-width: 1023px) {
  .moko-sim-reader {
    padding-bottom: 24px;
  }

  .moko-sim-drawer {
    position: fixed;
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    max-height: 70vh;
    overflow-y: auto;
    border-radius: 16px 16px 0 0;
    padding: 0;
  }

  .moko-sim-drawer > div:first-child {
    position: sticky;
    top: 0;
    z-index: 1;
    margin-bottom: 0;
    border-bottom: 1px solid var(--color-stroke-2);
    background: var(--color-background-1);
    padding: 16px;
  }

  html.dark .moko-sim-drawer > div:first-child {
    border-color: var(--color-stroke-7);
    background: var(--color-background-8);
  }

  .moko-sim-drawer > div:first-child + * {
    display: block;
    padding: 16px;
  }

  .moko-sim-bottombar {
    position: sticky;
    right: auto;
    bottom: 12px;
    left: auto;
    grid-template-columns: auto 1fr auto;
    gap: 8px;
    margin-top: 14px;
    border-radius: 18px;
    padding: 10px;
  }

  .moko-sim-bottombar .btn {
    width: auto;
    min-width: 88px;
    height: 44px;
    padding-right: 14px;
    padding-left: 14px;
  }

  .moko-sim-bottombar > span {
    min-width: 0;
    padding: 5px 10px;
    font-size: 13px;
    white-space: nowrap;
  }
}

/* Detail des combinaisons EE et favoris locaux. */
.moko-combi-page {
  min-height: 100vh;
  background: var(--color-background-3);
  padding-top: clamp(142px, 13vw, 182px);
  padding-bottom: 72px;
}

html.dark .moko-combi-page {
  background: var(--color-background-6);
}

.moko-combi-detail {
  width: min(1040px, calc(100% - 36px));
  margin: 0 auto;
  padding: clamp(18px, 4vw, 42px);
}

.moko-combi-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 24px;
}

.moko-combi-head h1 {
  margin-top: 12px;
  font-size: 36px;
  line-height: 1.08;
}

.moko-combi-head p {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-top: 12px;
  color: rgba(17, 23, 18, 0.68);
  font-size: 14px;
}

.moko-combi-head p span + span::before {
  content: "·";
  margin-right: 18px;
}

html.dark .moko-combi-head p {
  color: rgba(255, 255, 255, 0.72);
}

.moko-combi-fav {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid var(--moko-semantic-advice-border);
  border-radius: 8px;
  background: var(--moko-semantic-advice-bg);
  color: var(--moko-semantic-advice-text);
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.moko-combi-fav:hover,
.moko-combi-fav[aria-pressed="true"] {
  border-color: #b58d13;
  background: #fff1a8;
  color: #5b3e00;
}

html.dark .moko-combi-fav:hover,
html.dark .moko-combi-fav[aria-pressed="true"] {
  border-color: #d9b83d;
  background: #40350f;
  color: #fff1b5;
}

.moko-combi-fav.is-compact {
  width: 40px;
  flex: 0 0 40px;
  padding: 0;
}

.moko-combi-fav-icon {
  font-size: 20px;
  line-height: 1;
}

.moko-combi-preview-note,
.moko-combi-local-note {
  border-left: 3px solid var(--moko-semantic-info-border);
  color: var(--moko-semantic-info-text);
  font-size: 13px;
  line-height: 1.55;
}

.moko-combi-preview-note {
  margin-bottom: 24px;
  background: var(--moko-semantic-info-bg);
  padding: 12px;
}

.moko-combi-local-note {
  margin: -10px 0 24px;
  padding-left: 12px;
}

.moko-combi-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin-bottom: 12px;
  border: 1px solid var(--color-stroke-2);
  border-radius: 8px;
  background: var(--color-background-2);
  padding: 6px;
}

html.dark .moko-combi-tabs {
  border-color: var(--color-stroke-7);
  background: var(--color-background-8);
}

.moko-combi-tabs button {
  min-width: 0;
  min-height: 40px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: rgba(17, 23, 18, 0.7);
  padding: 8px 10px;
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.moko-combi-tabs button:hover {
  background: rgba(47, 125, 82, 0.08);
  color: var(--color-secondary);
}

.moko-combi-tabs button[aria-selected="true"] {
  border-color: var(--color-stroke-2);
  background: #ffffff;
  color: var(--color-secondary);
  box-shadow: inset 0 -3px 0 #c18c00;
}

html.dark .moko-combi-tabs button {
  color: rgba(255, 255, 255, 0.74);
}

html.dark .moko-combi-tabs button:hover,
html.dark .moko-combi-tabs button[aria-selected="true"] {
  border-color: var(--color-stroke-7);
  background: var(--color-background-7);
  color: #ffffff;
}

.moko-combi-tabs .is-mobile-label {
  display: none;
}

.moko-combi-panel {
  border: 1px solid var(--color-stroke-2);
  border-radius: 8px;
  background: #ffffff;
  padding: 16px;
}

.moko-combi-panel[hidden] {
  display: none;
}

html.dark .moko-combi-panel {
  border-color: var(--color-stroke-7);
  background: var(--color-background-8);
}

.moko-combi-panel h2 {
  font-size: 22px;
  font-weight: 800;
  line-height: 1.2;
}

.moko-combi-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 14px 0 18px;
  padding: 0;
  list-style: none;
}

.moko-combi-meta li {
  border: 1px solid var(--color-stroke-2);
  border-radius: 999px;
  color: rgba(17, 23, 18, 0.68);
  padding: 5px 9px;
  font-size: 12px;
  font-weight: 800;
}

html.dark .moko-combi-meta li {
  border-color: var(--color-stroke-7);
  color: rgba(255, 255, 255, 0.72);
}

.moko-combi-sujet {
  border: 1px solid var(--color-stroke-2);
  border-radius: 8px;
  background: var(--color-background-3);
  padding: 16px;
}

html.dark .moko-combi-sujet {
  border-color: var(--color-stroke-7);
  background: var(--color-background-6);
}

.moko-combi-sujet > span {
  color: var(--moko-texte-vert);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.moko-combi-sujet p {
  margin-top: 8px;
  color: var(--color-secondary);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.55;
}

.moko-combi-sujet small {
  display: block;
  margin-top: 12px;
  color: rgba(17, 23, 18, 0.64);
  font-size: 13px;
  line-height: 1.55;
}

html.dark .moko-combi-sujet p {
  color: #ffffff;
}

html.dark .moko-combi-sujet small {
  color: rgba(255, 255, 255, 0.7);
}

.moko-combi-correction {
  margin-top: 16px;
  border: 1px solid var(--color-stroke-2);
  border-radius: 8px;
  overflow: hidden;
}

html.dark .moko-combi-correction {
  border-color: var(--color-stroke-7);
}

.moko-combi-correction summary {
  padding: 12px 16px;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  user-select: none;
}

.moko-combi-correction > div {
  border-top: 1px solid var(--color-stroke-2);
  padding: 16px;
}

html.dark .moko-combi-correction > div {
  border-top-color: var(--color-stroke-7);
}

.moko-combi-correction strong {
  display: block;
  color: var(--moko-semantic-advice-text);
  font-size: 13px;
}

.moko-combi-correction p {
  margin-top: 10px;
  line-height: 1.65;
}

.moko-combi-actions {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-top: 20px;
}

.moko-combi-actions > div {
  display: grid;
  gap: 6px;
}

.moko-combi-actions small,
.moko-series-cost {
  color: var(--moko-semantic-advice-text) !important;
  font-size: 12px !important;
  font-weight: 800;
}

.moko-series-card-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px !important;
}

.moko-series-card-actions .btn {
  margin-top: 0;
}

.moko-sim-bilan-actions .btn {
  min-width: 112px;
}

@media (max-width: 639px) {
  .moko-combi-page {
    padding-top: 118px;
    padding-bottom: 48px;
  }

  .moko-combi-detail {
    width: 100%;
    padding: 18px;
  }

  .moko-combi-head {
    align-items: center;
    gap: 12px;
  }

  .moko-combi-head h1 {
    font-size: 30px;
  }

  .moko-combi-head p {
    display: grid;
    gap: 2px;
  }

  .moko-combi-head p span + span::before {
    content: none;
  }

  .moko-combi-fav:not(.is-compact) {
    width: 40px;
    flex: 0 0 40px;
    padding: 0;
  }

  .moko-combi-fav:not(.is-compact) .moko-combi-fav-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
  }

  .moko-combi-tabs {
    gap: 4px;
    padding: 4px;
  }

  .moko-combi-tabs button {
    min-height: 38px;
    padding: 7px 4px;
    font-size: 11px;
  }

  .moko-combi-tabs .is-desktop-label {
    display: none;
  }

  .moko-combi-tabs .is-mobile-label {
    display: inline;
  }

  .moko-combi-panel {
    padding: 14px;
  }

  .moko-combi-sujet {
    padding: 14px;
  }

  .moko-combi-sujet p {
    font-size: 18px;
  }

  .moko-combi-actions {
    display: grid;
    align-items: stretch;
  }

  .moko-combi-actions .btn,
  .moko-combi-actions > div {
    width: 100%;
  }

  .moko-combi-actions .btn {
    justify-content: center;
  }

  .moko-sim-bilan-actions .btn {
    width: 100%;
  }
}

/* Expression orale : salle d'examen guidée. */
.moko-eo-shell {
  --moko-eo-active: #8a5d00;
}

html.dark .moko-eo-shell {
  --moko-eo-active: #f2c14e;
}

.moko-eo-start,
.moko-eo-micro-error,
.moko-eo-finish {
  display: grid;
  min-height: 100vh;
  place-items: center;
  padding: clamp(18px, 4vw, 42px);
}

.moko-eo-start-card,
.moko-eo-micro-error > div,
.moko-eo-finish > div {
  display: grid;
  width: min(680px, 100%);
  gap: 18px;
  border: 1px solid var(--color-stroke-2);
  border-radius: 12px;
  background: var(--color-background-1);
  box-shadow: 0 18px 48px color-mix(in srgb, var(--color-secondary) 10%, transparent);
  padding: clamp(20px, 3vw, 32px);
}

html.dark .moko-eo-start-card,
html.dark .moko-eo-micro-error > div,
html.dark .moko-eo-finish > div {
  border-color: var(--color-stroke-7);
  background: var(--color-background-8);
}

.moko-eo-start-card > span,
.moko-eo-finish > div > span {
  color: color-mix(in srgb, currentColor 68%, transparent);
  font-size: 13px;
}

.moko-eo-start-card h1,
.moko-eo-micro-error h1,
.moko-eo-finish h1 {
  margin: 0;
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1.08;
}

.moko-eo-start-card p,
.moko-eo-micro-error p,
.moko-eo-finish p {
  margin: 0;
  line-height: 1.55;
}

.moko-eo-start-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.moko-eo-start-stats article {
  display: grid;
  gap: 3px;
  border: 1px solid var(--color-stroke-2);
  border-radius: 8px;
  background: var(--color-background-2);
  padding: 16px;
  text-align: center;
}

html.dark .moko-eo-start-stats article {
  border-color: var(--color-stroke-7);
  background: var(--color-background-7);
}

.moko-eo-start-stats strong {
  font-size: 24px;
}

.moko-eo-start-stats span {
  font-size: 12px;
}

.moko-eo-start-criteria,
.moko-eo-micro-note {
  border: 1px solid var(--moko-semantic-info-border);
  border-radius: 8px;
  background: var(--moko-semantic-info-bg);
  color: var(--moko-semantic-info-text);
  padding: 12px;
}

.moko-eo-start-criteria p {
  margin-top: 4px;
  font-size: 14px;
}

.moko-eo-start-card > button,
.moko-eo-micro-error .btn {
  justify-self: start;
}

.moko-eo-finish audio {
  width: 100%;
}

.moko-eo-room {
  display: grid;
  height: 100dvh;
  min-height: 0;
  grid-template-columns: minmax(0, 1fr) 320px;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 16px;
  overflow: hidden;
  padding: 16px;
}

.moko-eo-topbar,
.moko-eo-footer,
.moko-eo-party,
.moko-eo-subject-bar,
.moko-eo-side {
  border: 1px solid var(--color-stroke-2);
  background: var(--color-background-1);
}

html.dark .moko-eo-topbar,
html.dark .moko-eo-footer,
html.dark .moko-eo-party,
html.dark .moko-eo-subject-bar,
html.dark .moko-eo-side {
  border-color: var(--color-stroke-7);
  background: var(--color-background-8);
}

.moko-eo-topbar {
  display: grid;
  min-height: 68px;
  grid-column: 1 / -1;
  grid-row: 1;
  grid-template-columns: 40px minmax(180px, 1fr) auto auto;
  align-items: center;
  gap: 14px;
  border-radius: 12px;
  padding: 8px 16px;
}

.moko-eo-topbar > a,
.moko-eo-side-trigger {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border: 1px solid var(--color-stroke-2);
  border-radius: 8px;
  background: var(--color-background-2);
  color: var(--color-secondary);
}

html.dark .moko-eo-topbar > a,
html.dark .moko-eo-side-trigger {
  border-color: var(--color-stroke-7);
  background: var(--color-background-7);
  color: var(--color-background-1);
}

.moko-eo-topbar svg,
.moko-eo-controls svg,
.moko-eo-micro-error svg {
  width: 20px;
  height: 20px;
}

.moko-eo-phase-timer {
  display: grid;
  min-width: 126px;
  justify-items: center;
  border: 1px solid var(--moko-semantic-info-border);
  border-radius: 8px;
  background: var(--moko-semantic-info-bg);
  color: var(--moko-semantic-info-text);
  padding: 6px 12px;
}

.moko-eo-phase-timer > span {
  font-size: 11px;
  font-weight: 700;
}

.moko-eo-phase-timer > strong {
  font-size: 26px;
  line-height: 1;
}

.moko-eo-phase-timer[data-state="warning"] {
  border-color: var(--moko-semantic-advice-border);
  background: var(--moko-semantic-advice-bg);
  color: var(--moko-semantic-advice-text);
}

.moko-eo-statuses {
  display: flex;
  align-items: center;
  gap: 8px;
}

.moko-eo-rec-state,
.moko-eo-listen-state {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--color-stroke-3);
  border-radius: 999px;
  background: var(--color-background-2);
  color: var(--color-secondary);
  padding: 7px 11px;
  font-size: 12px;
  font-weight: 700;
}

html.dark .moko-eo-rec-state,
html.dark .moko-eo-listen-state {
  border-color: var(--color-stroke-7);
  background: var(--color-background-7);
  color: var(--color-background-1);
}

.moko-eo-rec-state i,
.moko-eo-listen-state i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--color-stroke-4);
}

.moko-eo-rec-state[data-state="recording"] i {
  background: var(--moko-eo-active);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--moko-eo-active) 24%, transparent);
}

.moko-eo-listen-state[data-state="listening"] {
  border-color: var(--moko-semantic-info-border);
  background: var(--moko-semantic-info-bg);
  color: var(--moko-semantic-info-text);
}

.moko-eo-listen-state[data-state="listening"] i {
  background: var(--moko-semantic-info-text);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--moko-semantic-info-text) 20%, transparent);
}

.moko-eo-side-trigger {
  display: none;
}

.moko-eo-scene {
  display: grid;
  min-height: 0;
  grid-column: 1;
  grid-row: 2;
  align-content: start;
  gap: 16px;
  overflow-y: auto;
  margin: 0;
  border-radius: 12px;
  padding: clamp(18px, 4vw, 42px);
}

.moko-eo-stage-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.moko-eo-party {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 260px;
  align-content: center;
  justify-items: center;
  gap: 14px;
  margin: 0;
  border-radius: 8px;
  opacity: 0.75;
  padding: clamp(20px, 3vw, 32px);
  text-align: center;
  transition: border-color 180ms ease, opacity 180ms ease;
}

.moko-eo-party[data-speaking="true"] {
  border: 2px solid var(--moko-eo-active);
  opacity: 1;
}

.moko-eo-avatar {
  display: grid;
  width: 72px;
  height: 72px;
  place-items: center;
  border: 2px solid var(--moko-eo-active);
  border-radius: 50%;
  background: var(--color-background-3);
  color: var(--color-secondary);
  font-size: 20px;
  font-weight: 800;
}

html.dark .moko-eo-avatar {
  background: var(--color-background-7);
  color: var(--color-background-1);
}

.moko-eo-party figcaption {
  display: grid;
  gap: 2px;
}

.moko-eo-party figcaption span {
  color: color-mix(in srgb, currentColor 68%, transparent);
  font-size: 12px;
}

.moko-eo-wave {
  display: flex;
  height: 24px;
  align-items: center;
  gap: 4px;
}

.moko-eo-wave i {
  width: 3px;
  height: 7px;
  border-radius: 999px;
  background: var(--moko-eo-active);
}

.moko-eo-party[data-speaking="true"] .moko-eo-wave i {
  animation: moko-eo-wave 760ms ease-in-out infinite alternate;
}

.moko-eo-party[data-speaking="true"] .moko-eo-wave i:nth-child(2),
.moko-eo-party[data-speaking="true"] .moko-eo-wave i:nth-child(4) {
  animation-delay: 180ms;
}

@keyframes moko-eo-wave {
  to { height: 22px; }
}

.moko-eo-vumeter {
  width: min(180px, 82%);
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--color-background-4);
}

html.dark .moko-eo-vumeter {
  background: var(--color-background-6);
}

.moko-eo-vumeter i {
  display: block;
  width: 3%;
  height: 100%;
  border-radius: inherit;
  background: var(--moko-eo-active);
  transition: width 100ms linear;
}

.moko-eo-subject-bar {
  border-radius: 8px;
  padding: 16px;
}

.moko-eo-subject-bar strong {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  text-transform: uppercase;
}

.moko-eo-subject-bar p {
  margin: 0;
  font-size: 18px;
  font-weight: 650;
  line-height: 1.45;
}

[data-moko-eo-reco-consent] {
  display: grid;
  gap: 10px;
  border: 1px solid var(--moko-semantic-info-border);
  border-radius: 8px;
  background: var(--moko-semantic-info-bg);
  color: var(--moko-semantic-info-text);
  padding: 16px;
}

[data-moko-eo-reco-consent][hidden] {
  display: none;
}

[data-moko-eo-reco-consent] > strong {
  font-size: 16px;
}

[data-moko-eo-reco-consent] > p {
  margin: 0;
  color: inherit;
  font-size: 13px;
  line-height: 1.5;
}

[data-moko-eo-reco-consent] > div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

[data-moko-eo-reco-consent] button,
[data-moko-eo-reco-settings] {
  min-height: 38px;
  border: 1px solid var(--moko-semantic-info-border);
  border-radius: 8px;
  background: var(--color-background-1);
  color: var(--moko-semantic-info-text);
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 750;
}

[data-moko-eo-reco-consent] button:first-child {
  background: var(--moko-semantic-info-text);
  color: var(--moko-semantic-info-bg);
}

[data-moko-eo-reco-consent] button:hover,
[data-moko-eo-reco-consent] button:focus-visible,
[data-moko-eo-reco-settings]:hover,
[data-moko-eo-reco-settings]:focus-visible {
  border-color: var(--moko-eo-active);
  outline: 2px solid var(--moko-eo-active);
  outline-offset: 2px;
}

html.dark [data-moko-eo-reco-consent] button:not(:first-child),
html.dark [data-moko-eo-reco-settings] {
  background: var(--color-background-8);
}

.moko-eo-side {
  position: relative;
  inset: auto;
  display: flex;
  width: 320px;
  min-height: 0;
  max-height: none;
  grid-column: 2;
  grid-row: 2;
  flex-direction: column;
  gap: 14px;
  overflow: hidden;
  border-radius: 12px;
  padding: clamp(20px, 3vw, 32px);
}

.moko-eo-side-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.moko-eo-side-head h2,
.moko-eo-transcript h3,
.moko-eo-progress h3 {
  margin: 0;
  font-size: 15px;
}

.moko-eo-side-head > button {
  display: none;
}

.moko-eo-transcript {
  display: grid;
  min-height: 0;
  flex: 1;
  gap: 8px;
}

.moko-eo-transcript > div {
  display: grid;
  min-height: 120px;
  align-content: start;
  gap: 10px;
  overflow-y: auto;
  border: 1px solid var(--color-stroke-2);
  border-radius: 8px;
  background: var(--color-background-2);
  padding: 12px;
}

html.dark .moko-eo-transcript > div {
  border-color: var(--color-stroke-7);
  background: var(--color-background-7);
}

.moko-eo-transcript p {
  display: grid;
  gap: 3px;
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
}

.moko-eo-transcript p strong {
  color: color-mix(in srgb, currentColor 68%, transparent);
  font-size: 10px;
}

.moko-eo-transcript p[data-speaker="candidate"] {
  border-left: 3px solid var(--moko-semantic-info-border);
  border-radius: 4px;
  background: var(--moko-semantic-info-bg);
  color: var(--moko-semantic-info-text);
  padding: 7px 8px;
}

.moko-eo-transcript p[data-speaker="candidate-interim"] {
  color: color-mix(in srgb, currentColor 62%, transparent);
  font-style: italic;
}

.moko-eo-progress {
  display: grid;
  gap: 8px;
}

.moko-eo-progress > div {
  display: grid;
  gap: 6px;
}

.moko-eo-progress article {
  display: grid;
  grid-template-columns: 28px 1fr;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--color-stroke-2);
  border-radius: 8px;
  padding: 8px;
  opacity: 0.65;
}

html.dark .moko-eo-progress article {
  border-color: var(--color-stroke-7);
}

.moko-eo-progress article.is-current {
  border-color: var(--moko-eo-active);
  opacity: 1;
}

.moko-eo-progress article.is-complete {
  opacity: 0.85;
}

.moko-eo-progress article > span {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 50%;
  background: var(--color-background-3);
  font-size: 12px;
  font-weight: 800;
}

html.dark .moko-eo-progress article > span {
  background: var(--color-background-7);
}

.moko-eo-progress article div {
  display: grid;
}

.moko-eo-progress article strong,
.moko-eo-progress article small,
.moko-eo-progress > p {
  font-size: 11px;
}

.moko-eo-progress > p {
  margin: 0;
}

[data-moko-eo-reco-info] {
  display: grid;
  gap: 8px;
  border-top: 1px solid var(--color-stroke-2);
  padding-top: 12px;
}

html.dark [data-moko-eo-reco-info] {
  border-color: var(--color-stroke-7);
}

[data-moko-eo-reco-info] p {
  margin: 0;
  color: color-mix(in srgb, currentColor 72%, transparent);
  font-size: 11px;
  line-height: 1.45;
}

.moko-eo-test-controls {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.moko-eo-test-controls button {
  min-height: 36px;
  border: 1px solid var(--color-stroke-3);
  border-radius: 8px;
  background: var(--color-background-3);
  color: var(--color-secondary);
  padding: 7px;
  font-size: 11px;
  font-weight: 700;
}

.moko-eo-test-controls button:hover,
.moko-eo-test-controls button:focus-visible {
  background: var(--color-background-4);
}

html.dark .moko-eo-test-controls button {
  border-color: var(--color-stroke-7);
  background: var(--color-background-7);
  color: var(--color-background-1);
}

html.dark .moko-eo-test-controls button:hover,
html.dark .moko-eo-test-controls button:focus-visible {
  background: var(--color-background-6);
}

.moko-eo-test-controls button:disabled {
  cursor: not-allowed;
  opacity: 0.74;
}

.moko-eo-footer {
  display: grid;
  grid-column: 1 / -1;
  grid-row: 3;
  gap: 7px;
  border-radius: 12px;
  padding: 10px 16px;
}

.moko-eo-controls {
  display: flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.moko-eo-controls button {
  display: grid;
  min-width: 44px;
  height: 44px;
  place-items: center;
  border: 1px solid var(--color-stroke-3);
  border-radius: 50%;
  background: var(--color-background-2);
  color: var(--color-secondary);
  padding: 0 12px;
  font-weight: 750;
}

html.dark .moko-eo-controls button {
  border-color: var(--color-stroke-7);
  background: var(--color-background-7);
  color: var(--color-background-1);
}

.moko-eo-controls button:hover,
.moko-eo-controls button:focus-visible {
  border-color: var(--moko-eo-active);
  background: var(--color-background-3);
}

html.dark .moko-eo-controls button:hover,
html.dark .moko-eo-controls button:focus-visible {
  background: var(--color-background-6);
}

.moko-eo-controls [data-moko-eo-mic] {
  width: 56px;
  height: 56px;
  border: 2px solid var(--moko-eo-active);
}

.moko-eo-controls button:disabled,
html.dark .moko-eo-controls button:disabled {
  cursor: not-allowed;
  opacity: 0.72;
}

.moko-eo-controls .moko-eo-ready,
.moko-eo-controls .moko-eo-done {
  width: auto;
  border-radius: 8px;
}

.moko-eo-footer > p {
  margin: 0;
  color: color-mix(in srgb, currentColor 72%, transparent);
  font-size: 11px;
  line-height: 1.35;
  text-align: center;
}

.moko-eo-room button,
.moko-eo-room button * {
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

@media (min-width: 1024px) {
  .moko-eo-room .moko-eo-side[hidden] {
    display: flex !important;
  }
}

@media (max-width: 1023px) {
  .moko-eo-room {
    display: grid;
    min-height: 100dvh;
    grid-template-columns: 1fr;
    grid-template-rows: 60px minmax(0, 1fr);
    gap: 10px;
    overflow: hidden;
    padding: 16px;
    padding-bottom: 124px;
  }

  .moko-eo-topbar {
    min-height: 60px;
    grid-column: 1;
    grid-row: 1;
    grid-template-columns: 36px auto minmax(0, 1fr) 36px;
    gap: 7px;
    padding: 6px 8px;
  }

  .moko-eo-topbar > a,
  .moko-eo-side-trigger {
    width: 36px;
    height: 36px;
  }

  .moko-eo-topbar > strong {
    display: none;
  }

  .moko-eo-phase-timer {
    min-width: 80px;
    padding: 5px 8px;
  }

  .moko-eo-phase-timer > strong {
    font-size: 22px;
  }

  .moko-eo-statuses {
    display: grid;
    min-width: 0;
    justify-self: stretch;
    gap: 2px;
  }

  .moko-eo-rec-state,
  .moko-eo-listen-state {
    min-width: 0;
    min-height: 24px;
    padding: 3px 7px;
    font-size: 9px;
    line-height: 1.15;
  }

  .moko-eo-rec-state i,
  .moko-eo-listen-state i {
    width: 7px;
    height: 7px;
  }

  .moko-eo-side-trigger {
    display: grid;
  }

  .moko-eo-scene {
    width: 100%;
    min-height: 0;
    grid-column: 1;
    grid-row: 2;
    gap: 10px;
    border-radius: 8px;
    padding: 18px;
  }

  .moko-eo-stage-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .moko-eo-party {
    min-height: 120px;
    grid-template-columns: 48px 1fr;
    align-content: center;
    justify-items: start;
    gap: 10px;
    padding: 14px;
    text-align: left;
  }

  .moko-eo-party[data-speaking="true"] {
    order: 0;
  }

  .moko-eo-party[data-speaking="false"] {
    order: 1;
  }

  .moko-eo-avatar {
    width: 48px;
    height: 48px;
    grid-row: 1 / 3;
    font-size: 15px;
  }

  .moko-eo-wave,
  .moko-eo-vumeter {
    width: 100%;
    max-width: 170px;
  }

  .moko-eo-subject-bar {
    padding: 14px;
  }

  .moko-eo-subject-bar p {
    font-size: 15px;
  }

  .moko-eo-side {
    position: fixed;
    z-index: 60;
    inset: auto 0 0;
    display: flex;
    width: 100%;
    max-width: none;
    height: 70vh;
    max-height: 70vh;
    grid-column: auto;
    grid-row: auto;
    border-radius: 16px 16px 0 0;
    overflow-y: auto;
    padding: 20px;
  }

  .moko-eo-side-head > button {
    display: inline-flex;
    min-height: 36px;
    align-items: center;
    border: 1px solid var(--color-stroke-3);
    border-radius: 8px;
    background: transparent;
    color: inherit;
    padding: 7px 10px;
    font-size: 12px;
    font-weight: 700;
  }

  .moko-eo-side .moko-eo-transcript {
    min-height: 0;
    flex: 0 0 auto;
  }

  .moko-eo-side .moko-eo-transcript > div {
    min-height: 140px;
    max-height: 180px;
  }

  .moko-eo-footer {
    position: fixed;
    z-index: 50;
    inset: auto 0 0;
    grid-column: auto;
    grid-row: auto;
    border-radius: 12px 12px 0 0;
    padding: 8px 12px 10px;
  }

  .moko-eo-controls {
    gap: 8px;
  }

  .moko-eo-controls [data-moko-eo-sound] { order: 1; }
  .moko-eo-controls [data-moko-eo-mic] { order: 2; }
  .moko-eo-controls .moko-eo-ready,
  .moko-eo-controls .moko-eo-done { order: 3; }
  .moko-eo-controls .is-quit { order: 4; }

  .moko-eo-footer > p {
    max-width: 560px;
    margin: 0 auto;
    font-size: 10px;
  }
}

@media (max-width: 520px) {
  .moko-eo-start,
  .moko-eo-micro-error,
  .moko-eo-finish {
    align-items: start;
    padding: 18px;
  }

  .moko-eo-start-stats {
    gap: 8px;
  }

  .moko-eo-start-stats article {
    padding: 12px 8px;
  }

  .moko-eo-topbar > strong {
    display: none;
  }

  .moko-eo-topbar {
    grid-template-columns: 36px 80px minmax(0, 1fr) 36px;
  }
}

@media (min-width: 900px) {
  .moko-client-dashboard-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.moko-client-focus-card {
  border: 1px solid var(--color-stroke-2);
  border-radius: 18px;
  background: var(--color-background-3);
  padding: 22px;
}

.moko-client-focus-card.is-info {
  border-color: var(--moko-semantic-info-border);
  background: var(--moko-semantic-info-bg);
  color: var(--moko-semantic-info-text);
}

html.dark .moko-client-focus-card {
  border-color: var(--color-stroke-7);
  background: var(--color-background-8);
}

html.dark .moko-client-focus-card.is-info {
  border-color: var(--moko-semantic-info-border);
  background: var(--moko-semantic-info-bg);
}

.moko-client-focus-card span,
.moko-client-course-list article em {
  color: rgba(17, 23, 18, 0.64);
  font-size: 13px;
  font-style: normal;
  font-weight: 800;
}

.moko-client-focus-card h3 {
  margin-top: 8px;
  color: var(--color-secondary);
  font-size: 24px;
  font-weight: 800;
}

.moko-client-focus-card p {
  margin-top: 8px;
  color: rgba(17, 23, 18, 0.64);
  line-height: 1.6;
}

html.dark .moko-client-focus-card span,
html.dark .moko-client-course-list article em,
html.dark .moko-client-focus-card p {
  color: rgba(255, 255, 255, 0.64);
}

html.dark .moko-client-focus-card h3 {
  color: #ffffff;
}

.moko-client-focus-card.is-info span,
.moko-client-focus-card.is-info p,
.moko-client-focus-card.is-info h3,
html.dark .moko-client-focus-card.is-info span,
html.dark .moko-client-focus-card.is-info p,
html.dark .moko-client-focus-card.is-info h3 {
  color: var(--moko-semantic-info-text);
}

.moko-client-focus-card a {
  display: inline-flex;
  margin-top: 18px;
  border-radius: 999px;
  background: var(--color-primary-500);
  color: #ffffff;
  padding: 9px 14px;
  font-size: 13px;
  font-weight: 800;
}

@media (max-width: 1099px) {
  .moko-client-app {
    grid-template-columns: 1fr;
  }

  .moko-client-app-sidebar {
    display: none;
  }

  .moko-client-topbar {
    grid-template-columns: 1fr;
    padding: 18px;
  }

  .moko-client-topbar-actions {
    justify-content: flex-start;
  }

  .moko-client-app .moko-client-content {
    padding: 18px;
  }

  .moko-client-mobile-nav {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    padding-bottom: 4px;
  }

  .moko-client-mobile-nav a {
    justify-content: center;
    min-width: 0;
    background: #ffffff;
    padding-inline: 10px;
  }

  html.dark .moko-client-mobile-nav a {
    background: var(--color-background-7);
  }
}

@media (max-width: 899px) {
  .moko-client-app .moko-client-content {
    padding: 18px 18px 136px;
  }
}

@media (max-width: 767px) {
  .moko-client-panel-head {
    margin-bottom: 20px;
  }

  .moko-client-tabs.is-inline {
    margin-bottom: 20px;
  }

  .moko-client-topbar-actions .btn {
    width: auto;
  }

  .moko-client-table {
    min-width: 0;
  }

  .moko-client-table thead {
    display: none;
  }

  .moko-client-table,
  .moko-client-table tbody,
  .moko-client-table tr,
  .moko-client-table td {
    display: block;
    width: 100%;
  }

  .moko-client-table tr {
    border: 1px solid var(--color-stroke-2);
    border-radius: 14px;
    margin-bottom: 12px;
    overflow: hidden;
  }

  html.dark .moko-client-table tr {
    border-color: var(--color-stroke-7);
  }

  .moko-client-table td {
    display: grid;
    grid-template-columns: minmax(96px, 38%) 1fr;
    gap: 12px;
    border-bottom: 1px solid var(--color-stroke-2);
  }

  .moko-client-table td::before {
    content: attr(data-label);
    color: var(--color-secondary);
    font-weight: 800;
  }

  html.dark .moko-client-table td,
  html.dark .moko-client-table td::before {
    border-color: var(--color-stroke-7);
  }

  html.dark .moko-client-table td::before {
    color: #ffffff;
  }
}

.moko-session-table td,
.moko-session-table a {
  color: rgba(17, 23, 18, 0.72);
}

html.dark .moko-session-table td,
html.dark .moko-session-table a {
  color: rgba(255, 255, 255, 0.72);
}

.moko-session-table a {
  color: var(--moko-texte-vert) !important;
  font-weight: 700;
}

.moko-session-table a:hover,
.moko-session-table a:focus-visible {
  background: var(--color-primary-500) !important;
  color: #ffffff !important;
}

/* Verrou final du systeme de boutons et des paginations importees. */
a.btn[class~="btn-primary"],
button.btn[class~="btn-primary"] {
  background-color: var(--moko-btn-primary-bg) !important;
  border-color: var(--moko-btn-primary-bg) !important;
  color: var(--moko-btn-primary-text) !important;
}

a.btn[class~="btn-primary"] span,
button.btn[class~="btn-primary"] span {
  color: var(--moko-btn-primary-text) !important;
}

a.btn[class~="btn-primary"]:hover,
button.btn[class~="btn-primary"]:hover,
a.btn[class~="hover:btn-primary"]:hover {
  background-color: var(--moko-btn-primary-bg-hover) !important;
  border-color: var(--moko-btn-primary-bg-hover) !important;
  color: var(--moko-btn-primary-text) !important;
}

a.btn[class~="btn-primary"]:hover span,
button.btn[class~="btn-primary"]:hover span,
a.btn[class~="hover:btn-primary"]:hover span {
  color: var(--moko-btn-primary-text) !important;
}

a.btn[class~="btn-white"],
a.btn[class~="btn-accent"],
button.btn[class~="btn-white"],
button.btn[class~="btn-accent"] {
  background-color: var(--moko-btn-white-bg) !important;
  border-color: var(--moko-btn-white-border) !important;
  color: var(--moko-btn-white-text) !important;
}

a.btn[class~="btn-white"] span,
a.btn[class~="btn-accent"] span,
button.btn[class~="btn-white"] span,
button.btn[class~="btn-accent"] span {
  color: var(--moko-btn-white-text) !important;
}

a.btn[class~="btn-white"]:hover,
a.btn[class~="btn-accent"]:hover,
button.btn[class~="btn-white"]:hover,
button.btn[class~="btn-accent"]:hover,
a.btn[class~="hover:btn-white"]:hover,
a.btn[class~="hover:btn-accent"]:hover {
  background-color: var(--moko-btn-white-bg-hover) !important;
  border-color: var(--moko-btn-white-bg-hover) !important;
  color: var(--moko-btn-white-text-hover) !important;
}

a.btn[class~="btn-white"]:hover span,
a.btn[class~="btn-accent"]:hover span,
button.btn[class~="btn-white"]:hover span,
button.btn[class~="btn-accent"]:hover span,
a.btn[class~="hover:btn-white"]:hover span,
a.btn[class~="hover:btn-accent"]:hover span {
  color: var(--moko-btn-white-text-hover) !important;
}

html:not(.dark) a.btn[class~="btn-white"]:hover span,
html:not(.dark) a.btn[class~="btn-accent"]:hover span,
html:not(.dark) button.btn[class~="btn-white"]:hover span,
html:not(.dark) button.btn[class~="btn-accent"]:hover span,
html.dark a.btn[class~="btn-accent"]:hover span,
html.dark button.btn[class~="btn-accent"]:hover span {
  color: var(--moko-btn-white-text-hover) !important;
}

a.btn[class~="hover:btn-white-dark"]:hover,
a.btn[class~="hover:btn-secondary"]:hover,
button.btn[class~="hover:btn-white-dark"]:hover,
button.btn[class~="hover:btn-secondary"]:hover,
html.dark a.btn[class~="dark:hover:btn-white-dark"]:hover,
html.dark button.btn[class~="dark:hover:btn-white-dark"]:hover {
  background-color: var(--moko-btn-secondary-bg) !important;
  border-color: var(--moko-btn-secondary-bg) !important;
  color: var(--moko-btn-secondary-text) !important;
}

a.btn[class~="hover:btn-white-dark"]:hover span,
a.btn[class~="hover:btn-secondary"]:hover span,
button.btn[class~="hover:btn-white-dark"]:hover span,
button.btn[class~="hover:btn-secondary"]:hover span,
html.dark a.btn[class~="dark:hover:btn-white-dark"]:hover span,
html.dark button.btn[class~="dark:hover:btn-white-dark"]:hover span {
  color: var(--moko-btn-secondary-text) !important;
}

html.dark a.btn[class~="dark:btn-white"],
html.dark a.btn[class~="dark:btn-white-dark"],
html.dark a.btn[class~="dark:btn-transparent"],
html.dark button.btn[class~="dark:btn-white"],
html.dark button.btn[class~="dark:btn-white-dark"],
html.dark button.btn[class~="dark:btn-transparent"] {
  background-color: var(--moko-btn-white-bg) !important;
  border-color: var(--moko-btn-white-border) !important;
  color: var(--moko-btn-white-text) !important;
}

html.dark a.btn[class~="dark:btn-white"] span,
html.dark a.btn[class~="dark:btn-white-dark"] span,
html.dark a.btn[class~="dark:btn-transparent"] span,
html.dark button.btn[class~="dark:btn-white"] span,
html.dark button.btn[class~="dark:btn-white-dark"] span,
html.dark button.btn[class~="dark:btn-transparent"] span {
  color: var(--moko-btn-white-text) !important;
}

html.dark a.btn[class~="dark:hover:btn-white"]:hover,
html.dark a.btn[class~="dark:hover:btn-accent"]:hover,
html.dark a.btn[class~="dark:hover:text-secondary"]:hover,
html.dark button.btn[class~="dark:hover:btn-white"]:hover,
html.dark button.btn[class~="dark:hover:btn-accent"]:hover,
html.dark button.btn[class~="dark:hover:text-secondary"]:hover {
  background-color: var(--moko-btn-white-bg-hover) !important;
  border-color: var(--moko-btn-white-bg-hover) !important;
  color: var(--moko-btn-white-text-hover) !important;
}

html.dark a.btn[class~="dark:hover:btn-white"]:hover span,
html.dark a.btn[class~="dark:hover:btn-accent"]:hover span,
html.dark a.btn[class~="dark:hover:text-secondary"]:hover span,
html.dark button.btn[class~="dark:hover:btn-white"]:hover span,
html.dark button.btn[class~="dark:hover:btn-accent"]:hover span,
html.dark button.btn[class~="dark:hover:text-secondary"]:hover span {
  color: var(--moko-btn-white-text-hover) !important;
}

a.btn span,
a.btn svg,
a.btn path,
button.btn span,
button.btn svg,
button.btn path {
  color: inherit !important;
  stroke: currentColor !important;
}

html.dark a[class*="group-[.page-active]"],
html.dark a[class*="group-[.page-active]"] span,
html.dark a[class*="group-[.page-active]"] svg,
html.dark a[class*="group-[.page-active]"] path {
  color: #ffffff !important;
  stroke: currentColor !important;
}

html.dark .page-active a[class*="group-[.page-active]"],
html.dark a[class*="hover:bg-primary-500"]:hover {
  background-color: var(--moko-btn-primary-bg) !important;
  border-color: var(--moko-btn-primary-bg) !important;
  color: #ffffff !important;
  stroke: currentColor !important;
}

html.dark .page-active a[class*="group-[.page-active]"] span,
html.dark .page-active a[class*="group-[.page-active]"] svg,
html.dark .page-active a[class*="group-[.page-active]"] path,
html.dark a[class*="hover:bg-primary-500"]:hover span,
html.dark a[class*="hover:bg-primary-500"]:hover svg,
html.dark a[class*="hover:bg-primary-500"]:hover path {
  color: #ffffff !important;
  stroke: currentColor !important;
}

.moko-chat {
  position: fixed;
  left: 22px;
  right: auto;
  bottom: 22px;
  z-index: 9998;
  color: #111712;
}

.moko-chat-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 54px;
  border: 1px solid rgba(47, 125, 82, 0.38);
  border-radius: 999px;
  background: #2f7d52;
  color: #ffffff;
  box-shadow: 0 22px 60px rgba(17, 23, 18, 0.25);
  padding: 8px 16px 8px 8px;
  font-weight: 700;
  transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease, transform 200ms ease;
}

.moko-chat-toggle:hover,
.moko-chat-toggle:focus-visible {
  border-color: #111712;
  background: #111712;
  color: #ffffff;
}

.moko-chat-toggle:focus-visible,
.moko-chat-close:focus-visible,
.moko-chat-form button:focus-visible,
.moko-chat-actions a:focus-visible {
  outline: 3px solid #f2c14e;
  outline-offset: 3px;
}

.moko-chat-toggle-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  background: #ffffff;
  color: var(--moko-texte-vert);
  font-weight: 900;
}

.moko-chat-panel {
  position: absolute;
  left: 0;
  right: auto;
  bottom: 70px;
  display: flex;
  width: min(390px, calc(100vw - 28px));
  max-height: min(680px, calc(100vh - 110px));
  overflow: hidden;
  flex-direction: column;
  border: 1px solid #dce5dc;
  border-radius: 22px;
  background: #ffffff;
  box-shadow: 0 28px 90px rgba(17, 23, 18, 0.22);
}

.moko-chat-panel.hidden {
  display: none;
}

.moko-chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid #e7eee7;
  background: #111712;
  padding: 18px;
  color: #ffffff;
}

.moko-chat-header span {
  color: #f2c14e;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.moko-chat-header h2 {
  margin: 2px 0 0;
  color: #ffffff !important;
  font-size: 28px;
  line-height: 1;
}

.moko-chat-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  font-size: 24px;
  line-height: 1;
}

.moko-chat-close:hover {
  background: #ffffff;
  color: #111712;
}

.moko-chat-scope {
  border-bottom: 1px solid #e7eee7;
  background: #f6faf4;
  padding: 12px 18px;
  color: rgba(17, 23, 18, 0.72);
  font-size: 13px;
  font-weight: 700;
}

.moko-chat-messages {
  display: flex;
  min-height: 230px;
  overflow-y: auto;
  flex: 1;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
}

.moko-chat-message {
  max-width: 88%;
  border-radius: 16px;
  padding: 12px 14px;
  color: #111712;
}

.moko-chat-message strong {
  display: block;
  margin-bottom: 5px;
  font-size: 12px;
  font-weight: 800;
}

.moko-chat-message p {
  margin: 0;
  color: inherit;
  font-size: 14px;
  line-height: 1.45;
}

.moko-chat-message.is-assistant {
  align-self: flex-start;
  background: #eef7ec;
}

.moko-chat-message.is-user {
  align-self: flex-end;
  background: #111712;
  color: #ffffff;
}

.moko-chat-message.is-muted {
  border: 1px solid #dce5dc;
  background: #ffffff;
}

.moko-chat-status,
.moko-chat-error {
  margin: 0 16px 12px;
  border-radius: 14px;
  padding: 11px 12px;
  font-size: 13px;
  font-weight: 700;
}

.moko-chat-status {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #f6faf4;
  color: var(--moko-texte-vert);
}

.moko-chat-status.hidden,
.moko-chat-error.hidden {
  display: none;
}

.moko-chat-status span {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #2f7d52;
  animation: moko-chat-pulse 900ms ease-in-out infinite;
}

.moko-chat-status p {
  margin: 0;
}

.moko-chat-error {
  border: 1px solid rgba(180, 35, 24, 0.22);
  background: #fff0ee;
  color: #8f1c13;
}

.moko-chat-form {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  border-top: 1px solid #e7eee7;
  padding: 14px 16px;
}

.moko-chat-form textarea {
  min-height: 48px;
  max-height: 120px;
  resize: vertical;
  border: 1px solid #dce5dc;
  border-radius: 14px;
  background: #ffffff;
  color: #111712;
  padding: 12px;
  font-size: 14px;
}

.moko-chat-form textarea:focus {
  border-color: #2f7d52;
  outline: none;
}

.moko-chat-form button {
  align-self: stretch;
  border-radius: 14px;
  background: #2f7d52;
  color: #ffffff;
  padding: 0 16px;
  font-weight: 800;
}

.moko-chat-form button:hover {
  background: #111712;
  color: #ffffff;
}

.moko-chat-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-top: 1px solid #e7eee7;
  padding: 0 16px 16px;
}

.moko-chat-actions a {
  color: var(--moko-texte-vert);
  font-size: 13px;
  font-weight: 800;
}

.moko-chat-actions a:hover {
  color: #111712;
}

.moko-chat-actions span {
  max-width: 160px;
  color: rgba(17, 23, 18, 0.64);
  font-size: 11px;
  line-height: 1.35;
  text-align: right;
}

html.dark .moko-chat {
  color: #ffffff;
}

html.dark .moko-chat-toggle {
  border-color: rgba(242, 193, 78, 0.35);
  background: #ffffff;
  color: #111712;
}

html.dark .moko-chat-toggle:hover,
html.dark .moko-chat-toggle:focus-visible {
  border-color: #2f7d52;
  background: #2f7d52;
  color: #ffffff;
}

html.dark .moko-chat-toggle-icon {
  background: #111712;
  color: #ffffff;
}

html.dark .moko-chat-panel {
  border-color: #2e3a31;
  background: #111712;
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.42);
}

html.dark .moko-chat-header,
html.dark .moko-chat-scope,
html.dark .moko-chat-form,
html.dark .moko-chat-actions {
  border-color: #2e3a31;
}

html.dark .moko-chat-scope,
html.dark .moko-chat-status {
  background: #172018;
  color: rgba(255, 255, 255, 0.78);
}

html.dark .moko-chat-message.is-assistant {
  background: #172018;
  color: #ffffff;
}

html.dark .moko-chat-message.is-muted {
  border-color: #2e3a31;
  background: #101511;
  color: rgba(255, 255, 255, 0.82);
}

html.dark .moko-chat-form textarea {
  border-color: #2e3a31;
  background: #0c100d;
  color: #ffffff;
}

html.dark .moko-chat-form textarea::placeholder {
  color: rgba(255, 255, 255, 0.55);
}

html.dark .moko-chat-actions a {
  color: #f2c14e;
}

html.dark .moko-chat-actions a:hover {
  color: #ffffff;
}

html.dark .moko-chat-actions span {
  color: rgba(255, 255, 255, 0.56);
}

body:has([data-moko-payment-form]) .moko-chat {
  display: none;
}

@keyframes moko-chat-pulse {
  0%, 100% {
    opacity: 0.35;
    transform: scale(0.85);
  }
  50% {
    opacity: 1;
    transform: scale(1);
  }
}

@media (max-width: 520px) {
  .moko-chat {
    left: 14px;
    right: auto;
    bottom: 14px;
  }

  .moko-chat-panel {
    left: -4px;
    right: auto;
    bottom: 68px;
    width: calc(100vw - 20px);
    max-height: calc(100vh - 96px);
  }

  .moko-chat-toggle-label {
    display: none;
  }

  .moko-chat-toggle {
    min-width: 56px;
    padding: 8px;
  }

  .moko-chat-form {
    grid-template-columns: 1fr;
  }

  .moko-chat-form button {
    min-height: 44px;
  }
}

html body button.btn:disabled span,
html body button.btn[disabled] span,
html.dark body button.btn:disabled span,
html.dark body button.btn[disabled] span {
  color: var(--color-secondary) !important;
}

/* Lecteur partage CE/CO : chrome compact conforme aux releves desktop et mobile. */
.moko-sim-reader button,
.moko-sim-reader button *,
.moko-sim-start button,
.moko-sim-start button * {
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
}

.moko-sim-mobile-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.moko-sim-timer-pill {
  display: inline-flex;
  align-items: center;
  min-width: 74px;
  justify-content: center;
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-primary-500) 14%, var(--color-background-1));
  color: var(--moko-texte-vert);
  padding: 6px 12px;
}

.moko-sim-timer-pill strong {
  font-size: 18px;
  line-height: 1;
}

.moko-sim-mobile-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

.moko-sim-answered-count {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: color-mix(in srgb, currentColor 78%, transparent);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.moko-sim-answered-count svg {
  width: 12px;
  height: 12px;
}

.moko-sim-icon-button {
  display: inline-grid;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  place-items: center;
  border: 1px solid var(--color-stroke-2);
  border-radius: 8px;
  background: var(--color-background-2);
  color: var(--color-secondary);
  padding: 0;
}

html.dark .moko-sim-icon-button {
  border-color: var(--color-stroke-7);
  background: var(--color-background-7);
  color: var(--color-background-1);
}

.moko-sim-icon-button:hover,
.moko-sim-icon-button:focus-visible {
  border-color: var(--color-primary-500);
  color: var(--moko-texte-vert);
}

.moko-sim-icon-button.is-quit,
html.dark .moko-sim-icon-button.is-quit {
  border-color: var(--moko-btn-danger-bg);
  background: var(--moko-btn-danger-bg);
  color: var(--moko-btn-danger-text);
}

.moko-sim-icon-button.is-quit:hover,
.moko-sim-icon-button.is-quit:focus-visible {
  border-color: var(--moko-btn-danger-bg-hover);
  background: var(--moko-btn-danger-bg-hover);
  color: var(--moko-btn-danger-text);
}

.moko-sim-icon-button svg,
.moko-sim-rail-actions svg,
.moko-sim-step-button svg {
  width: 18px;
  height: 18px;
  pointer-events: none;
}

.moko-sim-rail-timer {
  display: grid;
  gap: 8px;
  border: 1px solid var(--moko-semantic-info-border);
  border-radius: 12px;
  background: var(--moko-semantic-info-bg);
  color: var(--moko-semantic-info-text);
  padding: 14px;
}

.moko-sim-rail-timer > span {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.moko-sim-rail-timer > strong {
  color: var(--moko-texte-vert);
  font-size: 22px;
  line-height: 1;
}

.moko-sim-rail-timer > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.moko-sim-testfill {
  display: flex;
  width: 100%;
  min-height: 36px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid var(--color-stroke-3);
  border-radius: 8px;
  background: var(--color-background-3);
  color: var(--color-secondary);
  padding: 8px 10px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
}

.moko-sim-testfill:hover,
.moko-sim-testfill:focus-visible {
  border-color: var(--color-stroke-4);
  background: var(--color-background-4);
  color: var(--color-secondary);
}

html.dark .moko-sim-testfill {
  border-color: var(--color-stroke-7);
  background: var(--color-background-7);
  color: var(--color-background-1);
}

html.dark .moko-sim-testfill:hover,
html.dark .moko-sim-testfill:focus-visible {
  border-color: var(--color-stroke-6);
  background: var(--color-background-6);
  color: var(--color-background-1);
}

.moko-sim-testfill:disabled,
html.dark .moko-sim-testfill:disabled {
  cursor: not-allowed;
  opacity: 0.74;
}

.moko-sim-testfill,
.moko-sim-testfill * {
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.moko-sim-rail-actions {
  display: grid;
  gap: 8px;
  margin-top: auto;
}

.moko-sim-rail-actions button {
  display: flex;
  min-height: 36px;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--color-stroke-2);
  border-radius: 8px;
  background: var(--color-background-2);
  color: var(--color-secondary);
  padding: 8px 10px;
  font-size: 13px;
  font-weight: 800;
}

html.dark .moko-sim-rail-actions button {
  border-color: var(--color-stroke-7);
  background: var(--color-background-7);
  color: var(--color-background-1);
}

.moko-sim-rail-actions button.is-quit,
html.dark .moko-sim-rail-actions button.is-quit {
  border-color: var(--moko-btn-danger-bg);
  background: var(--moko-btn-danger-bg);
  color: var(--moko-btn-danger-text);
}

.moko-sim-rail-actions button:disabled,
.moko-sim-icon-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.moko-sim-nav-grid {
  grid-template-columns: repeat(6, 34px);
  gap: 6px;
}

.moko-sim-nav-grid button {
  width: 34px;
  height: 34px;
  aspect-ratio: auto;
  border-radius: 8px;
  padding: 0;
  font-size: 14px;
}

html.dark .moko-sim-nav-grid button:hover,
html.dark .moko-sim-nav-grid button.is-current {
  border-color: var(--color-primary-500);
  background: var(--color-primary-500);
  color: var(--color-background-1);
}

.moko-sim-nav-grid button.is-answered:not(.is-current) {
  border-color: var(--moko-semantic-success-border);
  background: var(--moko-semantic-success-bg);
  color: var(--moko-semantic-success-text);
}

.moko-sim-step-button,
.moko-sim-finish-button {
  display: inline-grid;
  height: 44px;
  place-items: center;
  border: 1.5px solid var(--color-primary-500);
  border-radius: 999px;
  font-size: 15px;
  font-weight: 800;
}

.moko-sim-step-button {
  width: 44px;
  background: var(--color-background-1);
  color: var(--moko-texte-vert);
  padding: 0;
}

.moko-sim-step-button.is-next,
.moko-sim-finish-button {
  background: var(--color-primary-500);
  color: var(--color-background-1);
}

html.dark .moko-sim-step-button.is-previous {
  background: var(--color-background-8);
}

.moko-sim-step-button:disabled {
  opacity: 0.42;
  cursor: not-allowed;
}

.moko-sim-finish-button {
  width: auto;
  min-width: 104px;
  padding: 0 16px;
}

.moko-sim-start-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.moko-sim-start-stats article {
  display: grid;
  gap: 4px;
  border-radius: 12px;
  background: var(--color-background-2);
  padding: 16px;
  text-align: center;
}

html.dark .moko-sim-start-stats article {
  background: var(--color-background-7);
}

.moko-sim-start-stats strong {
  color: var(--moko-texte-vert);
  font-size: 24px;
  line-height: 1;
}

.moko-sim-start-stats span {
  color: color-mix(in srgb, currentColor 64%, transparent);
  font-size: 14px;
}

.moko-sim-start-scope {
  margin-top: 10px;
  color: color-mix(in srgb, var(--color-secondary) 70%, transparent);
  font-size: 13px;
  line-height: 1.5;
}

html.dark .moko-sim-start-scope {
  color: color-mix(in srgb, var(--color-background-1) 70%, transparent);
}

.moko-sim-start-advice,
html.dark .moko-sim-start-advice {
  border-color: var(--moko-semantic-advice-border);
  background: var(--moko-semantic-advice-bg);
  color: var(--moko-semantic-advice-text);
  padding: 12px;
}

.moko-sim-start-advice strong {
  display: flex;
  align-items: center;
  gap: 8px;
}

.moko-sim-start-advice p,
html.dark .moko-sim-start-advice p {
  color: inherit;
}

.moko-sim-start [data-moko-exam-start] span,
html.dark .moko-sim-start [data-moko-exam-start] span {
  color: var(--moko-btn-danger-text) !important;
}

@media (min-width: 1024px) {
  .moko-sim-reader {
    grid-template-columns: 280px minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto;
    gap: 20px;
    padding: 20px;
  }

  .moko-sim-topbar {
    display: none;
  }

  .moko-sim-drawer {
    position: sticky;
    top: 20px;
    display: flex;
    width: 280px;
    min-height: calc(100vh - 40px);
    max-height: calc(100vh - 40px);
    grid-column: 1;
    grid-row: 1 / 3;
    flex-direction: column;
    align-self: start;
    gap: 16px;
    overflow-y: auto;
    border-radius: 12px;
    padding: 20px;
  }

  .moko-sim-drawer > div:first-child {
    margin-bottom: 0;
  }

  .moko-sim-drawer h2 {
    font-size: 16px;
  }

  .moko-sim-stage {
    grid-column: 2;
    grid-row: 1;
    margin-top: 0;
  }

  .moko-sim-bottombar {
    grid-column: 2;
    grid-row: 2;
  }
}

@layer base {
  @media (min-width: 1024px) {
    .moko-sim-shell .moko-sim-drawer:not(.moko-ee-outils-sheet)[hidden] {
      display: flex !important;
    }
  }
}

@media (max-width: 1023px) {
  .moko-sim-reader {
    display: block;
    padding: 0 12px 24px;
  }

  .moko-sim-drawer:not(.moko-ee-navigation) .moko-sim-testfill {
    margin-bottom: 12px;
  }

  .moko-sim-topbar {
    position: sticky;
    top: 0;
    z-index: 40;
    display: block;
    margin: 0 -12px;
    border-radius: 0;
    padding: 0;
    backdrop-filter: blur(10px);
  }

  .moko-sim-mobile-bar {
    min-height: 54px;
    padding: 10px 14px;
  }

  .moko-sim-topbar .moko-sim-progress {
    width: 100%;
    height: 4px;
    border-radius: 0;
  }

  .moko-sim-stage {
    margin-top: 12px;
    border-radius: 16px;
    padding: 14px;
  }

  .moko-sim-note {
    margin-bottom: 14px;
    padding: 12px;
    font-size: 12px;
    line-height: 1.35;
    white-space: nowrap;
  }

  .moko-sim-rail-timer,
  .moko-sim-rail-actions {
    display: none;
  }

  .moko-sim-bottombar {
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    min-height: 66px;
    padding: 10px;
  }

  .moko-sim-bottombar .moko-sim-finish-button {
    min-width: 94px;
  }

  .moko-sim-bottombar:has(.moko-sim-finish-button:not([hidden])) {
    grid-template-columns: 44px minmax(0, 1fr) auto;
  }
}

@media (max-width: 479px) {
  .moko-sim-mobile-bar {
    gap: 10px;
    padding-right: 10px;
    padding-left: 10px;
  }

  .moko-sim-timer-pill {
    min-width: 68px;
    padding-right: 9px;
    padding-left: 9px;
  }

  .moko-sim-start {
    padding: 14px;
  }

  .moko-sim-start-stats {
    gap: 8px;
  }

  .moko-sim-start-stats article {
    padding: 12px 8px;
  }

  .moko-sim-bottombar > span {
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* Expression écrite : consignes et éditeur des trois tâches. */
.moko-ee-start {
  min-height: 100dvh;
  padding: 16px;
}

.moko-ee-instructions {
  width: min(896px, 100%);
  overflow: hidden;
  border: 1px solid var(--color-stroke-2);
  border-radius: 14px;
  background: var(--color-background-1);
  box-shadow: 0 18px 48px color-mix(in srgb, var(--color-secondary) 12%, transparent);
}

html.dark .moko-ee-instructions {
  border-color: var(--color-stroke-7);
  background: var(--color-background-8);
  box-shadow: 0 18px 48px color-mix(in srgb, var(--color-secondary) 44%, transparent);
}

.moko-ee-trial-band {
  display: flex;
  min-height: 76px;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid var(--moko-semantic-info-border);
  background: var(--moko-semantic-info-bg);
  color: var(--moko-semantic-info-text);
  padding: 12px 16px;
}

.moko-ee-trial-band > strong,
.moko-ee-trial-band > div,
.moko-ee-trial-band > div > span {
  display: flex;
  align-items: center;
}

.moko-ee-trial-band > strong {
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
}

.moko-ee-trial-band svg {
  width: 20px;
  height: 20px;
}

.moko-ee-trial-band > div {
  gap: 14px;
}

.moko-ee-trial-band > div > span {
  flex-direction: column;
  line-height: 1;
}

.moko-ee-trial-band small {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
}

.moko-ee-trial-band b {
  margin-top: 5px;
  font-size: 24px;
  font-weight: 700;
}

.moko-ee-trial-band i {
  font-style: normal;
}

.moko-ee-instructions-body {
  display: grid;
  gap: 12px;
  padding: 16px;
}

.moko-ee-instructions-body .moko-sim-note {
  margin: 0;
}

.moko-ee-instructions-body h1,
.moko-ee-instructions-body h2 {
  margin: 0;
  letter-spacing: 0;
}

.moko-ee-instructions-body h1 {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
}

.moko-ee-instructions-body h2 {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.25;
}

.moko-ee-instruction-tasks {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.moko-ee-instruction-tasks article {
  display: grid;
  height: 72px;
  place-items: center;
  align-content: center;
  gap: 3px;
  border: 1px solid var(--moko-semantic-info-border);
  border-radius: 8px;
  background: var(--moko-semantic-info-bg);
  color: var(--moko-semantic-info-text);
  padding: 12px;
  text-align: center;
}

.moko-ee-instruction-tasks article.is-task-2 {
  border-color: var(--moko-semantic-advice-border);
  background: var(--moko-semantic-advice-bg);
  color: var(--moko-semantic-advice-text);
}

.moko-ee-instruction-tasks article.is-task-3 {
  border-color: var(--moko-semantic-success-border);
  background: var(--moko-semantic-success-bg);
  color: var(--moko-semantic-success-text);
}

.moko-ee-instruction-tasks article > strong {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border-radius: 999px;
  background: var(--moko-semantic-info-text);
  color: var(--color-background-1);
  font-size: 12px;
  font-weight: 700;
}

.moko-ee-instruction-tasks article.is-task-2 > strong {
  background: var(--moko-semantic-advice-text);
}

.moko-ee-instruction-tasks article.is-task-3 > strong {
  background: var(--moko-semantic-success-text);
}

html.dark .moko-ee-instruction-tasks article.is-task-1 > strong {
  background: var(--moko-semantic-info-border);
  color: var(--color-background-1);
}

html.dark .moko-ee-instruction-tasks article.is-task-2 > strong {
  background: var(--moko-semantic-advice-border);
  color: var(--color-background-1);
}

html.dark .moko-ee-instruction-tasks article.is-task-3 > strong {
  background: var(--moko-semantic-success-border);
  color: var(--color-background-1);
}

.moko-ee-instruction-tasks article > span {
  font-size: 12px;
  font-weight: 500;
  line-height: 1.1;
}

.moko-ee-instruction-tasks article > small {
  font-size: 10px;
  line-height: 1;
}

.moko-ee-start-action {
  display: grid;
  justify-items: center;
  gap: 5px;
}

.moko-ee-start-action [data-moko-exam-start] {
  width: 267px;
  height: 48px;
  border-radius: 14px;
  font-size: 16px;
  font-weight: 700;
}

.moko-ee-start-action > small {
  color: color-mix(in srgb, currentColor 66%, transparent);
  font-size: 11px;
}

.moko-ee-advice {
  border-radius: 14px;
  padding: 12px;
}

.moko-ee-advice strong {
  margin-bottom: 4px;
  font-size: 14px;
}

.moko-ee-advice p {
  font-size: 12px;
  line-height: 1.35;
}

.moko-ee-reader button,
.moko-ee-reader button * {
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.moko-ee-desktop-topbar,
.moko-ee-tools {
  border: 1px solid var(--color-stroke-2);
  background: var(--color-background-1);
  box-shadow: 0 10px 30px color-mix(in srgb, var(--color-secondary) 9%, transparent);
}

html.dark .moko-ee-desktop-topbar,
html.dark .moko-ee-tools {
  border-color: var(--color-stroke-7);
  background: var(--color-background-8);
}

.moko-ee-desktop-topbar {
  display: flex;
  align-items: center;
  gap: 10px;
  border-radius: 12px;
  padding: 10px 16px;
}

.moko-ee-desktop-topbar > a {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border: 1px solid var(--color-stroke-2);
  border-radius: 8px;
  color: inherit;
}

html.dark .moko-ee-desktop-topbar > a {
  border-color: var(--color-stroke-7);
}

.moko-ee-desktop-topbar > a svg,
.moko-ee-timer svg,
.moko-ee-step-actions svg {
  width: 20px;
  height: 20px;
}

.moko-ee-desktop-topbar > strong {
  font-size: 16px;
}

.moko-ee-timer {
  position: absolute;
  left: 50%;
  display: flex;
  align-items: center;
  gap: 8px;
  transform: translateX(-50%);
  border: 1px solid var(--moko-semantic-info-border);
  border-radius: 999px;
  background: var(--moko-semantic-info-bg);
  color: var(--moko-semantic-info-text);
  padding: 8px 14px;
}

.moko-ee-timer strong {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
}

.moko-ee-navigation-body,
.moko-ee-task-list {
  display: grid;
  gap: 12px;
}

.moko-ee-task-card {
  display: grid;
  width: 100%;
  height: 94px;
  align-content: center;
  gap: 7px;
  overflow: hidden;
  border: 1px solid var(--color-stroke-2);
  border-radius: 14px;
  background: var(--color-background-2);
  color: var(--color-secondary);
  padding: 16px;
  text-align: left;
}

html.dark .moko-ee-task-card {
  border-color: var(--color-stroke-7);
  background: var(--color-background-7);
  color: var(--color-background-1);
}

.moko-ee-task-card:hover {
  border-color: var(--color-primary-500);
  background: color-mix(in srgb, var(--color-primary-500) 10%, var(--color-background-1));
  color: var(--color-secondary);
}

html.dark .moko-ee-task-card:hover {
  background: color-mix(in srgb, var(--color-primary-500) 18%, var(--color-background-8));
  color: var(--color-background-1);
}

.moko-ee-task-card.is-current,
.moko-ee-task-card.is-current:hover {
  border-color: var(--color-primary-500);
  background: var(--color-primary-500);
  color: var(--color-background-1);
}

.moko-ee-task-card > strong {
  font-size: 15px;
}

.moko-ee-task-card > span {
  overflow: hidden;
  font-size: 12px;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.moko-ee-task-card > span b {
  font-weight: 700;
}

.moko-ee-task-card > i,
.moko-ee-tool-progress > i,
.moko-ee-current-progress > i {
  display: block;
  height: 2px;
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in srgb, currentColor 18%, transparent);
}

.moko-ee-task-card > i > span,
.moko-ee-tool-progress > i > span,
.moko-ee-current-progress > i > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: currentColor;
}

.moko-ee-task-legend {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border-top: 1px solid var(--color-stroke-2);
  padding-top: 12px;
  font-size: 12px;
  white-space: nowrap;
}

html.dark .moko-ee-task-legend {
  border-color: var(--color-stroke-7);
}

.moko-ee-task-legend span {
  display: flex;
  align-items: center;
  gap: 5px;
}

.moko-ee-task-legend i {
  width: 14px;
  height: 14px;
  border: 2px solid var(--color-stroke-3);
  border-radius: 4px;
}

.moko-ee-task-legend i[data-state="current"] {
  border-color: var(--color-primary-500);
  background: var(--color-primary-500);
}

.moko-ee-task-legend i[data-state="complete"] {
  border-color: var(--moko-semantic-success-border);
  background: var(--moko-semantic-success-bg);
}

.moko-ee-finish {
  min-height: 40px;
  border: 1px solid var(--color-stroke-3);
  border-radius: 8px;
  background: var(--color-background-3);
  color: var(--color-secondary);
  padding: 8px 14px;
  font-size: 14px;
  font-weight: 700;
}

html.dark .moko-ee-finish {
  border-color: var(--color-stroke-7);
  background: var(--color-background-7);
  color: var(--color-background-1);
}

.moko-ee-finish:disabled {
  cursor: not-allowed;
  opacity: 0.78;
}

.moko-ee-task {
  display: grid;
  gap: 12px;
}

.moko-ee-task-head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.moko-ee-task-head > span {
  display: grid;
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 14px;
  background: var(--color-primary-500);
  color: var(--color-background-1);
  font-size: 16px;
  font-weight: 700;
}

.moko-ee-task-head h2,
.moko-ee-task-head p,
.moko-ee-generic-instruction,
.moko-ee-subject p {
  margin: 0;
}

.moko-ee-task-head h2 {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
}

.moko-ee-task-head p {
  margin-top: 3px;
  color: color-mix(in srgb, currentColor 62%, transparent);
  font-size: 14px;
}

.moko-ee-brief-toggle {
  width: 104px;
  height: 32px;
  flex: 0 0 auto;
  margin-left: auto;
  border: 1px solid var(--color-stroke-2);
  border-radius: 10px;
  background: var(--color-background-2);
  color: var(--color-secondary);
  padding: 0 12px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
}

.moko-ee-brief-toggle:hover,
.moko-ee-brief-toggle:focus-visible {
  border-color: var(--moko-semantic-info-border);
  background: var(--moko-semantic-info-bg);
  color: var(--moko-semantic-info-text);
}

html.dark .moko-ee-brief-toggle {
  border-color: var(--color-stroke-7);
  background: var(--color-background-7);
  color: var(--color-background-1);
}

html.dark .moko-ee-brief-toggle:hover,
html.dark .moko-ee-brief-toggle:focus-visible {
  border-color: var(--moko-semantic-info-border);
  background: var(--moko-semantic-info-bg);
  color: var(--moko-semantic-info-text);
}

.moko-ee-brief {
  display: grid;
  gap: 12px;
  padding: 16px;
}

.moko-ee-generic-instruction {
  color: color-mix(in srgb, currentColor 76%, transparent);
  font-size: 14px;
  line-height: 1.45;
}

.moko-ee-subject {
  border: 1px solid var(--moko-semantic-info-border);
  border-radius: 14px;
  background: var(--moko-semantic-info-bg);
  color: var(--moko-semantic-info-text);
  padding: 16px;
  font-size: 16px;
  line-height: 24px;
}

.moko-ee-subject > strong {
  display: block;
  margin-bottom: 4px;
  font-size: 12px;
  text-transform: uppercase;
}

.moko-ee-textarea {
  width: 100%;
  height: 350px;
  min-height: 350px;
  resize: none;
  border: 2px solid var(--color-stroke-2);
  border-radius: 16px;
  background: var(--color-background-1);
  color: var(--color-secondary);
  padding: 24px;
  font-family: inherit;
  font-size: 16px;
  line-height: 26px;
  outline: none;
}

html.dark .moko-ee-textarea {
  border-color: var(--color-stroke-7);
  background: var(--color-background-8);
  color: var(--color-background-1);
}

.moko-ee-textarea:focus {
  border-color: var(--color-primary-500);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary-500) 18%, transparent);
}

.moko-ee-task.is-brief-hidden .moko-ee-textarea {
  height: 486px;
  min-height: 486px;
}

.moko-ee-textarea[readonly] {
  border-color: var(--color-stroke-3);
  background: var(--color-background-2);
  color: var(--color-secondary);
  cursor: text;
  opacity: 1;
}

html.dark .moko-ee-textarea[readonly] {
  border-color: var(--color-stroke-7);
  background: var(--color-background-7);
  color: var(--color-background-1);
}

.moko-ee-reader-notice {
  flex: 0 0 auto;
  margin: 0 0 12px;
  border-radius: 12px;
  padding: 12px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
}

.moko-ee-reader-notice[data-state="warning"] {
  border-color: var(--moko-semantic-advice-border);
  background: var(--moko-semantic-advice-bg);
  color: var(--moko-semantic-advice-text);
}

.moko-ee-reader-notice[data-state="urgent"],
.moko-ee-reader-notice[data-state="expired"],
html.dark .moko-ee-reader-notice[data-state="urgent"],
html.dark .moko-ee-reader-notice[data-state="expired"] {
  border-color: var(--moko-semantic-danger-border);
  background: var(--moko-semantic-danger-bg);
  color: var(--moko-semantic-danger-text);
}

.moko-ee-shell[data-timer-state="warning"] .moko-ee-timer,
.moko-ee-shell[data-timer-state="warning"] .moko-sim-timer-pill {
  border-color: var(--moko-semantic-advice-border);
  background: var(--moko-semantic-advice-bg);
  color: var(--moko-semantic-advice-text);
}

.moko-ee-shell[data-timer-state="urgent"] .moko-ee-timer,
.moko-ee-shell[data-timer-state="urgent"] .moko-sim-timer-pill,
.moko-ee-shell[data-timer-state="expired"] .moko-ee-timer,
.moko-ee-shell[data-timer-state="expired"] .moko-sim-timer-pill {
  border-color: var(--moko-semantic-danger-border);
  background: var(--moko-semantic-danger-bg);
  color: var(--moko-semantic-danger-text);
}

.moko-ee-editor-footer {
  display: flex;
  min-height: 56px;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-top: 1px solid var(--color-stroke-2);
  background: var(--color-background-1);
  padding: 8px 0 0;
}

html.dark .moko-ee-editor-footer {
  border-color: var(--color-stroke-7);
  background: var(--color-background-8);
}

.moko-ee-current-progress {
  display: grid;
  min-width: 210px;
  gap: 5px;
}

.moko-ee-current-progress > span {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}

.moko-ee-current-progress strong {
  border-radius: 999px;
  padding: 5px 10px;
  font-size: 16px;
}

.moko-ee-current-progress small {
  font-size: 13px;
}

.moko-ee-current-progress [data-moko-ee-remaining] {
  font-size: 12px;
  font-weight: 600;
}

.moko-ee-current-progress > span > i {
  font-style: normal;
  opacity: 0.65;
}

.moko-ee-step-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.moko-ee-step-actions > button:not(.moko-ee-finish) {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border: 1px solid var(--color-stroke-2);
  border-radius: 8px;
  background: var(--color-background-1);
  color: var(--color-secondary);
}

.moko-ee-step-actions > button.is-next {
  border-color: var(--color-primary-500);
  background: var(--color-primary-500);
  color: var(--color-background-1);
}

html.dark .moko-ee-step-actions > button:not(.moko-ee-finish) {
  border-color: var(--color-stroke-7);
  background: var(--color-background-7);
  color: var(--color-background-1);
}

html.dark .moko-ee-step-actions > button.is-next {
  border-color: var(--color-primary-500);
  background: var(--color-primary-500);
}

.moko-ee-step-actions > button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.moko-ee-current-progress.is-under,
.moko-ee-tool-progress.is-under {
  color: var(--moko-semantic-advice-text);
}

.moko-ee-current-progress.is-under strong {
  background: var(--moko-semantic-advice-bg);
}

.moko-ee-current-progress.is-valid,
.moko-ee-tool-progress.is-valid {
  color: var(--moko-semantic-success-text);
}

.moko-ee-current-progress.is-valid strong {
  background: var(--moko-semantic-success-bg);
}

.moko-ee-current-progress.is-over,
.moko-ee-tool-progress.is-over {
  color: var(--moko-semantic-danger-text);
}

.moko-ee-current-progress.is-over strong {
  background: var(--moko-semantic-danger-bg);
}

.moko-ee-tools {
  border-radius: 12px;
  padding: 16px;
}

.moko-ee-tools h2,
.moko-ee-tools h3 {
  margin: 0;
  font-size: 16px;
}

.moko-ee-tools section {
  display: grid;
  gap: 14px;
  margin-top: 18px;
}

.moko-ee-tools h3 {
  font-size: 14px;
}

.moko-ee-character-grid {
  display: grid;
  grid-template-columns: repeat(5, 32px);
  gap: 4px;
}

.moko-ee-character-grid button {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border: 1px solid var(--color-stroke-2);
  border-radius: 10px;
  background: var(--color-background-1);
  color: var(--color-secondary);
  padding: 0;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  transition: border-color 160ms ease, background 160ms ease, color 160ms ease;
}

.moko-ee-character-grid button:hover,
.moko-ee-character-grid button:focus-visible {
  border-color: var(--moko-semantic-info-border);
  background: var(--moko-semantic-info-bg);
  color: var(--moko-semantic-info-text);
}

html.dark .moko-ee-character-grid button {
  border-color: var(--color-stroke-7);
  background: var(--color-background-7);
  color: var(--color-background-1);
}

html.dark .moko-ee-character-grid button:hover,
html.dark .moko-ee-character-grid button:focus-visible {
  border-color: var(--moko-semantic-info-border);
  background: var(--moko-semantic-info-bg);
  color: var(--moko-semantic-info-text);
}

.moko-ee-character-grid button:disabled,
html.dark .moko-ee-character-grid button:disabled {
  border-color: var(--color-stroke-3);
  background: var(--color-background-3);
  color: var(--color-secondary);
  cursor: not-allowed;
  opacity: 1;
}

.moko-ee-finish:not(:disabled) {
  border-color: var(--color-primary-500);
  background: var(--color-primary-500);
  color: var(--color-background-1);
}

.moko-ee-finish:not(:disabled):hover,
.moko-ee-finish:not(:disabled):focus-visible {
  border-color: var(--color-primary-600);
  background: var(--color-primary-600);
  color: var(--color-background-1);
}

.moko-ee-finish-modal {
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(8px);
}

.moko-ee-finish-modal > div,
html.dark .moko-ee-finish-modal > div {
  width: min(448px, 100%);
  height: 165px;
  min-height: 165px;
  border-radius: 10px;
  padding: 24px;
}

.moko-ee-finish-modal h2,
html.dark .moko-ee-finish-modal h2 {
  margin: 0 0 4px;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
}

.moko-ee-finish-modal p {
  margin: 0;
  font-size: 14px;
  line-height: 20px;
}

.moko-ee-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 10px;
}

.moko-ee-modal-actions .btn {
  height: 36px;
  min-height: 36px;
  border-radius: 8px;
  padding: 0 14px;
  font-size: 14px;
}

.moko-ee-modal-actions .btn:first-child {
  width: 159px;
}

.moko-ee-modal-actions .btn:last-child {
  width: 113px;
}

.moko-ee-loading {
  display: grid;
  min-height: 100dvh;
  place-content: center;
  justify-items: center;
  gap: 14px;
  padding: 24px;
  text-align: center;
}

.moko-ee-loading .moko-sim-note {
  margin: 0 0 14px;
}

.moko-ee-loading-spinner {
  width: 48px;
  height: 48px;
  border: 4px solid color-mix(in srgb, var(--color-primary-500) 22%, transparent);
  border-top-color: var(--color-primary-500);
  border-radius: 999px;
  animation: moko-ee-spin 800ms linear infinite;
}

.moko-ee-loading h2,
.moko-ee-loading p {
  margin: 0;
}

.moko-ee-loading h2 {
  font-size: 28px;
  font-weight: 700;
}

.moko-ee-loading > p:not(.moko-sim-note) {
  max-width: 560px;
  color: color-mix(in srgb, currentColor 72%, transparent);
  font-size: 15px;
}

.moko-ee-loading aside {
  max-width: 640px;
  border: 1px solid var(--moko-semantic-advice-border);
  border-radius: 12px;
  background: var(--moko-semantic-advice-bg);
  color: var(--moko-semantic-advice-text);
  padding: 12px 16px;
  font-size: 14px;
  line-height: 1.45;
}

@keyframes moko-ee-spin {
  to { transform: rotate(360deg); }
}

.moko-ee-results {
  min-height: 100dvh;
  background: var(--color-background-2);
  color: var(--color-secondary);
  padding-bottom: 56px;
}

html.dark .moko-ee-results {
  background: var(--color-background-9);
  color: var(--color-background-1);
}

.moko-ee-results-note {
  width: min(1080px, calc(100% - 32px));
  margin: 16px auto;
}

.moko-ee-results-hero {
  display: grid;
  min-height: 180px;
  place-content: center;
  justify-items: center;
  gap: 10px;
  background: var(--color-primary-500);
  color: #ffffff;
  padding: 28px 20px;
  text-align: center;
}

.moko-ee-results-hero span {
  border: 1px solid rgba(255, 255, 255, 0.52);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  color: #ffffff;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 600;
}

.moko-ee-results-hero h1 {
  margin: 0;
  color: #ffffff;
  font-size: 32px;
  font-weight: 700;
  line-height: 1.2;
}

.moko-ee-results-body {
  display: grid;
  width: min(1080px, calc(100% - 32px));
  gap: 24px;
  margin: -34px auto 0;
}

.moko-ee-results-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid var(--color-stroke-2);
  border-radius: 16px;
  background: var(--color-background-1);
  box-shadow: 0 16px 36px color-mix(in srgb, var(--color-secondary) 12%, transparent);
  padding: 16px;
}

html.dark .moko-ee-results-summary,
html.dark .moko-ee-review-card {
  border-color: var(--color-stroke-7);
  background: var(--color-background-8);
}

.moko-ee-results-summary article {
  display: grid;
  min-width: 0;
  place-content: center;
  justify-items: center;
  gap: 5px;
  padding: 10px 16px;
  text-align: center;
}

.moko-ee-results-summary article + article {
  border-left: 1px solid var(--color-stroke-2);
}

html.dark .moko-ee-results-summary article + article {
  border-color: var(--color-stroke-7);
}

.moko-ee-results-summary article > span {
  color: color-mix(in srgb, currentColor 68%, transparent);
  font-size: 13px;
}

.moko-ee-results-summary article > strong:not(.moko-ee-level-badge) {
  font-size: 40px;
  font-weight: 700;
  line-height: 1;
}

.moko-ee-results-summary article > strong.is-eliminated,
.moko-ee-results-summary article > small[data-moko-ee-elimination] {
  color: var(--moko-semantic-danger-text);
}

.moko-ee-results-summary article > small {
  max-width: 260px;
  font-size: 12px;
  line-height: 1.35;
}

.moko-ee-level-badge,
.moko-ee-review-card-head aside span {
  border-radius: 999px;
  background: var(--moko-semantic-info-bg);
  color: var(--moko-semantic-info-text);
  padding: 6px 12px;
  font-size: 16px;
  font-weight: 700;
}

.moko-ee-results-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
}

.moko-ee-results-actions .btn {
  min-width: 190px;
  text-transform: none;
}

.moko-ee-results-actions .btn span {
  text-transform: none;
}

.moko-ee-results-actions a:first-child:hover,
.moko-ee-results-actions a:first-child:focus-visible,
html.dark .moko-ee-results-actions a:first-child:hover,
html.dark .moko-ee-results-actions a:first-child:focus-visible {
  border-color: var(--moko-btn-secondary-bg-hover) !important;
  background: var(--moko-btn-secondary-bg-hover) !important;
  color: #ffffff !important;
  transition: none;
}

.moko-ee-results-actions a:first-child:hover span,
.moko-ee-results-actions a:first-child:focus-visible span,
html.dark .moko-ee-results-actions a:first-child:hover span,
html.dark .moko-ee-results-actions a:first-child:focus-visible span {
  color: #ffffff !important;
}

.moko-ee-results-actions .is-mobile-label {
  display: none;
}

.moko-ee-review-list {
  display: grid;
  gap: 20px;
}

.moko-ee-review-card {
  display: grid;
  gap: 18px;
  border: 1px solid var(--color-stroke-2);
  border-radius: 12px;
  background: var(--color-background-1);
  padding: 16px;
}

.moko-ee-review-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}

.moko-ee-review-card-head h2,
.moko-ee-review-card-head p {
  margin: 0;
}

.moko-ee-review-card-head h2 {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
}

.moko-ee-review-card-head p {
  margin-top: 5px;
  color: color-mix(in srgb, currentColor 66%, transparent);
  font-size: 14px;
  line-height: 1.4;
}

.moko-ee-review-card-head aside {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
}

.moko-ee-review-card-head aside strong {
  font-size: 24px;
  line-height: 1;
}

.moko-ee-review-card-head aside span {
  padding: 5px 9px;
  font-size: 13px;
}

.moko-ee-review-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.moko-ee-review-columns section {
  border: 1px solid;
  border-radius: 12px;
  padding: 16px;
}

.moko-ee-review-columns .is-positive {
  border-color: var(--moko-semantic-success-border);
  background: var(--moko-semantic-success-bg);
  color: var(--moko-semantic-success-text);
}

.moko-ee-review-columns .is-improvement {
  border-color: var(--moko-semantic-advice-border);
  background: var(--moko-semantic-advice-bg);
  color: var(--moko-semantic-advice-text);
}

.moko-ee-review-columns h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  font-size: 15px;
  font-weight: 700;
}

.moko-ee-review-columns h3 svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}

.moko-ee-review-columns ul {
  display: grid;
  gap: 7px;
  margin: 0;
  padding-left: 20px;
  font-size: 14px;
  line-height: 1.45;
  list-style: disc;
}

.moko-ee-review-columns li::marker {
  color: currentColor;
}

.moko-ee-review-accordions {
  display: grid;
  gap: 8px;
}

.moko-ee-review-accordions > div {
  overflow: hidden;
  border: 1px solid var(--color-stroke-2);
  border-radius: 10px;
}

html.dark .moko-ee-review-accordions > div {
  border-color: var(--color-stroke-7);
}

.moko-ee-review-accordions button {
  display: flex;
  width: 100%;
  min-height: 44px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 0;
  background: var(--color-background-2);
  color: var(--color-secondary);
  padding: 10px 14px;
  font-size: 16px;
  font-weight: 600;
  text-align: left;
}

html.dark .moko-ee-review-accordions button {
  background: var(--color-background-7);
  color: var(--color-background-1);
}

.moko-ee-review-accordions button:hover,
.moko-ee-review-accordions button:focus-visible,
html.dark .moko-ee-review-accordions button:hover,
html.dark .moko-ee-review-accordions button:focus-visible {
  background: var(--moko-semantic-info-bg);
  color: var(--moko-semantic-info-text);
}

.moko-ee-review-accordions button svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  transition: transform 160ms ease;
}

.moko-ee-review-accordions button > span {
  min-width: 0;
}

.moko-ee-review-accordions button b {
  font: inherit;
}

.moko-ee-review-accordions button[aria-expanded="true"] svg {
  transform: rotate(90deg);
}

.moko-ee-review-accordions [data-moko-ee-accordion-panel] {
  padding: 12px 14px 16px;
  font-size: 14px;
  line-height: 20px;
}

.moko-ee-review-accordions [data-moko-ee-accordion-panel] strong {
  display: block;
  margin-bottom: 8px;
  color: var(--moko-semantic-info-text);
  font-size: 12px;
}

.moko-ee-review-accordions [data-moko-ee-accordion-panel] p {
  margin: 0;
  white-space: pre-wrap;
}

.moko-ee-results a,
.moko-ee-results button,
.moko-ee-results a *,
.moko-ee-results button *,
.moko-ee-finish-modal button,
.moko-ee-finish-modal button * {
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

html.dark .moko-ee-character-grid button:disabled {
  border-color: var(--color-stroke-7);
  background: var(--color-background-7);
  color: var(--color-background-1);
}

.moko-ee-outils-sheet-body {
  display: grid;
  justify-items: center;
  padding: 16px;
}

.moko-ee-tool-progress {
  display: grid;
  gap: 7px;
}

.moko-ee-tool-progress > span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: inherit;
  font-size: 12px;
}

.moko-ee-tool-progress strong,
.moko-ee-tool-progress b {
  color: inherit;
}

@media (min-width: 1024px) {
  .moko-ee-reader {
    display: grid;
    width: 100%;
    height: 100dvh;
    min-height: 0;
    grid-template-columns: minmax(0, 287px) minmax(0, 848px) minmax(0, 255px);
    grid-template-rows: 64px minmax(0, 1fr);
    gap: 8px;
    justify-content: space-between;
    overflow: hidden;
    padding: 16px;
  }

  .moko-ee-desktop-topbar {
    position: relative;
    grid-column: 1 / -1;
    grid-row: 1;
  }

  .moko-ee-reader > .moko-sim-topbar {
    display: none;
  }

  .moko-ee-navigation {
    position: relative;
    inset: auto;
    display: flex;
    width: 287px;
    min-height: 0;
    max-height: none;
    grid-column: 1;
    grid-row: 2;
    padding: 16px;
  }

  .moko-ee-navigation > div:first-child {
    flex: 0 0 auto;
  }

  .moko-ee-navigation > div:first-child + .moko-ee-navigation-body {
    display: flex;
    min-height: 0;
    flex: 1;
    flex-direction: column;
    padding: 0;
  }

  .moko-ee-task-list {
    flex: 0 0 auto;
  }

  .moko-ee-task-card {
    width: 255px;
  }

  .moko-ee-task-legend {
    margin-top: auto;
  }

  .moko-ee-stage {
    display: flex;
    width: 848px;
    max-width: 848px;
    height: 100%;
    min-height: 0;
    grid-column: 2;
    grid-row: 2;
    flex-direction: column;
    overflow-y: auto;
    margin: 0;
    border: 0;
    border-radius: 12px;
    box-shadow: none;
    padding: clamp(18px, 4vw, 42px);
  }

  .moko-ee-stage > .moko-ee-task,
  .moko-ee-stage > .moko-ee-editor-footer {
    width: 100%;
  }

  .moko-ee-tools {
    width: 255px;
    min-width: 0;
    grid-column: 3;
    grid-row: 2;
    overflow-y: auto;
  }

  .moko-ee-outils-sheet {
    display: none !important;
  }
}

@media (max-width: 1023px) {
  .moko-ee-reader {
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
    padding: 0;
  }

  .moko-ee-desktop-topbar,
  .moko-ee-tools {
    display: none;
  }

  .moko-ee-reader > .moko-sim-topbar {
    height: 60px;
    margin: 0;
  }

  .moko-ee-reader .moko-sim-mobile-bar {
    height: 56px;
    min-height: 56px;
  }

  .moko-ee-reader .moko-sim-mobile-actions {
    margin-left: auto;
  }

  .moko-ee-navigation-body {
    display: grid !important;
    padding: 16px !important;
  }

  .moko-ee-outils-sheet-body {
    display: grid !important;
    padding: 16px !important;
  }

  .moko-ee-task-card {
    width: 100%;
    height: 95px;
  }

  .moko-ee-stage {
    width: 100%;
    max-width: none;
    height: calc(100dvh - 60px);
    overflow-y: auto;
    margin: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: clamp(18px, 4vw, 42px);
  }

  .moko-ee-brief {
    padding: 14px;
  }

  html.dark .moko-ee-stage {
    border: 0;
    box-shadow: none;
  }

  .moko-ee-task {
    gap: 10px;
  }

  .moko-ee-generic-instruction {
    font-size: 13px;
    line-height: 1.35;
  }

  .moko-ee-subject {
    padding: 12px;
    font-size: 15px;
    line-height: 21px;
  }

  .moko-ee-textarea {
    width: 100%;
    height: 250px;
    min-height: 250px;
    padding: 16px;
  }

  .moko-ee-task.is-brief-hidden .moko-ee-textarea {
    height: 374px;
    min-height: 374px;
  }

  .moko-ee-editor-footer {
    position: sticky;
    bottom: 0;
    z-index: 2;
    min-height: 58px;
    margin-top: 10px;
    padding: 8px 0;
  }

  .moko-ee-current-progress {
    min-width: 0;
  }

  .moko-ee-current-progress > i {
    display: none;
  }

  .moko-ee-current-progress strong {
    font-size: 14px;
  }

  .moko-ee-current-progress small {
    font-size: 12px;
  }

  .moko-ee-current-progress > span {
    row-gap: 4px;
  }
}

@media (max-width: 767px) {
  .moko-ee-results {
    padding-bottom: 32px;
  }

  .moko-ee-results-note {
    width: calc(100% - 24px);
    margin: 10px auto;
  }

  .moko-ee-results-hero {
    min-height: 150px;
    padding: 22px 14px 44px;
  }

  .moko-ee-results-hero h1 {
    font-size: 24px;
  }

  .moko-ee-results-body {
    width: calc(100% - 24px);
    gap: 16px;
    margin-top: -28px;
  }

  .moko-ee-results-summary {
    padding: 10px 6px;
  }

  .moko-ee-results-summary article {
    gap: 4px;
    padding: 8px 4px;
  }

  .moko-ee-results-summary article > span,
  .moko-ee-results-summary article > small {
    font-size: 10px;
  }

  .moko-ee-results-summary article > strong:not(.moko-ee-level-badge) {
    font-size: 24px;
  }

  .moko-ee-level-badge {
    padding: 5px 9px;
    font-size: 14px;
  }

  .moko-ee-results-actions {
    gap: 8px;
  }

  .moko-ee-results-actions .btn {
    min-width: 0;
    flex: 1;
    padding-inline: 12px;
  }

  .moko-ee-results-actions .is-desktop-label {
    display: none;
  }

  .moko-ee-results-actions .is-mobile-label {
    display: inline;
  }

  .moko-ee-review-card {
    gap: 14px;
    padding: 14px;
  }

  .moko-ee-review-card-head {
    gap: 10px;
  }

  .moko-ee-review-card-head h2 {
    font-size: 16px;
  }

  .moko-ee-review-card-head p {
    display: -webkit-box;
    overflow: hidden;
    font-size: 14px;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .moko-ee-review-card-head aside {
    display: grid;
    justify-items: end;
    gap: 5px;
  }

  .moko-ee-review-card-head aside strong {
    font-size: 20px;
  }

  .moko-ee-review-columns {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .moko-ee-review-columns section {
    padding: 14px;
  }

  .moko-ee-review-accordions button {
    font-size: 14px;
  }

  .moko-ee-finish-modal > div,
  html.dark .moko-ee-finish-modal > div {
    height: auto;
    min-height: 0;
    padding: 20px;
  }

  .moko-ee-modal-actions {
    gap: 8px;
  }

  .moko-ee-modal-actions .btn:first-child,
  .moko-ee-modal-actions .btn:last-child {
    width: auto;
    min-width: 0;
    flex: 1;
  }
}

@media (max-width: 479px) {
  .moko-ee-start {
    padding: 10px;
  }

  .moko-ee-trial-band {
    min-height: 68px;
    gap: 8px;
    padding: 8px 12px;
  }

  .moko-ee-trial-band > strong {
    max-width: 180px;
    font-size: 13px;
  }

  .moko-ee-trial-band > div {
    gap: 8px;
  }

  .moko-ee-trial-band b {
    font-size: 20px;
  }

  .moko-ee-instructions-body {
    gap: 8px;
    padding: 12px;
  }

  .moko-ee-exam-mode {
    gap: 10px;
    padding: 8px 10px;
  }

  .moko-ee-exam-mode button {
    width: 44px;
    height: 26px;
  }

  .moko-ee-exam-mode button span {
    width: 18px;
    height: 18px;
  }

  .moko-ee-exam-mode button.is-active span {
    transform: translateX(18px);
  }

  .moko-ee-instructions-body h1 {
    font-size: 18px;
  }

  .moko-ee-instruction-tasks {
    width: 310px;
    max-width: 100%;
    justify-self: center;
    gap: 8px;
  }

  .moko-ee-instruction-tasks article {
    height: 72px;
    padding: 8px;
  }

  .moko-ee-instruction-tasks article > strong {
    width: 20px;
    height: 20px;
  }

  .moko-ee-advice {
    padding: 12px;
  }

  .moko-ee-advice p {
    font-size: 11px;
  }
}

/* Les règles génériques du lecteur sont déclarées plus haut : EO garde sa grille dédiée. */
@media (min-width: 1024px) {
  .moko-sim-reader.moko-eo-room {
    display: grid;
    height: 100dvh;
    min-height: 0;
    grid-template-columns: minmax(0, 1fr) 320px;
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: 16px;
    overflow: hidden;
    padding: 16px;
  }

  .moko-eo-room .moko-eo-scene {
    grid-column: 1;
    grid-row: 2;
    margin: 0;
    padding: clamp(18px, 4vw, 42px);
  }

  .moko-eo-room .moko-eo-side {
    position: relative;
    inset: auto;
    display: flex;
    width: 320px;
    min-height: 0;
    max-height: none;
    grid-column: 2;
    grid-row: 2;
    align-self: stretch;
    gap: 14px;
    overflow: hidden;
    padding: clamp(20px, 3vw, 32px);
  }
}

@media (max-width: 1023px) {
  .moko-sim-reader.moko-eo-room {
    display: grid;
    height: 100dvh;
    min-height: 0;
    grid-template-columns: 1fr;
    grid-template-rows: 60px minmax(0, 1fr);
    gap: 10px;
    overflow: hidden;
    padding: 16px 16px 124px;
  }

  .moko-eo-room .moko-eo-scene {
    grid-column: 1;
    grid-row: 2;
    margin: 0;
    padding: 18px;
    /* La scene tient sa rangee de grille plutot que la hauteur de son contenu :
       sans cela elle passe sous le pied de page fixe et son `overflow-y: auto`
       n'a rien a faire defiler. La marge basse degage son dernier element du
       bord de coupe en fin de defilement. */
    align-self: stretch;
    padding-bottom: 24px;
  }

  .moko-eo-room .moko-eo-side {
    position: fixed;
    inset: auto 0 0;
    display: flex;
    width: 100%;
    min-height: 0;
    height: 70vh;
    max-height: 70vh;
    overflow-y: auto;
    padding: 20px;
  }
}

/* Deux blocs portent une surface qui NE SUIT PAS le theme, et le vert de texte
   choisi par le theme y serait le mauvais des deux.

   - La carte de tarif mise en avant est INVERSEE : sombre en theme clair,
     blanche en theme sombre. Mesure du 2026-08-11 : 3,29 et 3,62 en clair,
     4,41 en sombre.
   - La section du parcours d'accueil est sombre DANS LES DEUX THEMES : 3,62 en
     clair, 3,92 en sombre. Le titre blanc pose par la regle du bloc reste
     blanc ; seul le mot mis en vert change de vert.

   Le `!important` de la derniere regle repond a celui de `.text-primary-500`,
   qu'elle doit surclasser. Verifie avant de l'ecrire : aucune image-cle de ce
   fichier n'anime `color`. `moko-eo-wave` anime `height`, `moko-chat-pulse`
   anime `opacity` et `transform`, `moko-ee-spin` anime `transform`. Cette
   declaration n'ecrase donc la sortie d'aucune animation. */
.moko-tarif-card.is-featured > span,
.moko-tarif-card.is-featured > strong {
  color: var(--moko-texte-vert-sur-sombre);
}

html.dark .moko-tarif-card.is-featured > span,
html.dark .moko-tarif-card.is-featured > strong {
  color: var(--moko-texte-vert-sur-clair);
}

.moko-home-process .text-primary-500,
html.dark .moko-home-process .text-primary-500 {
  color: var(--moko-texte-vert-sur-sombre) !important;
}

/* Le badge de question de la salle d'examen : 3,82 en sombre, mesure sur
   `/examen/blanc-tcf`. Le bleu clair ci-dessous rend 7,8 sur le meme fond. */
html.dark .moko-sim-question-head .moko-sim-question-badge {
  color: #6aa5f5;
}

/* ===========================================================================
   CONTRASTES RESTANTS : releve du 2026-08-09, deux instruments independants
   ===========================================================================

   Ce que la mesure a etabli, et qui contredit en partie ce qui etait annonce.

   Le chiffre annonce etait de soixante-seize groupes sous 4,5, imputes a « des
   utilitaires poses sans variante sombre ». Recompte avec le meme balayage,
   mais en laissant les TRANSITIONS ABOUTIR avant de lire, il en reste 59 : les
   dix-sept autres etaient des libelles de bouton photographies pendant leur
   fondu de survol. Le meme bouton y rendait 3,29, puis 3,54, puis 3,75 sur
   trois pages ; ce n'etaient pas trois defauts, c'etaient trois instants.

   Sur ces 59, un second instrument, qui ne lit aucune valeur CSS et deduit tout
   du pixel reellement peint, en CONFIRME 43, en INFIRME 8 et en declare 8
   inconnus. Les huit infirmes sont tous des textes clairs poses sur une PHOTO
   placee en `<img>` derriere le bloc : le premier instrument compose les
   `background-color` et ne voit pas une image posee comme element, si bien
   qu'il annonce 1,04 la ou le pixel peint rend 20,19.

   Les deux instruments s'accordent a 0,04 pres sur les groupes confirmes.

   La cause annoncee est donc INFIRMEE telle qu'elle etait ecrite. Les
   utilitaires de texte portent presque tous leur variante sombre. Ce qui
   manque est ailleurs, et se range en familles, d'ou des regles par famille,
   et non quarante-trois corrections.

   Ce qui n'est PAS touche ici : aucun fond, aucune bordure, aucune barre. Et
   aucune declaration ci-dessous ne porte sur une propriete animee : les trois
   images-cles de ce fichier animent `height`, `opacity` et `transform`, jamais
   `color`.

   --------------------------------------------------------------------------
   FAMILLE 1 : un libelle peint pour un fond que sa classe ne repeint jamais
   --------------------------------------------------------------------------
   Les regles de libelle plus haut dans ce fichier traitent `dark:btn-accent`
   comme si cette classe rendait le bouton blanc, et lui posent donc un texte
   sombre. VERIFIE : aucune des classes `dark:btn-accent`, `dark:btn-white`,
   `dark:btn-primary`, `dark:btn-transparent` n'existe dans `assets/main.css`,
   Tailwind ne les a jamais engendrees. Le fond ne change pas ; seul le libelle
   change. Sur un bouton `btn-secondary`, cela donne un texte #111712 sur un
   fond #111712 : ratio 1,00, libelle strictement invisible, les deux
   instruments d'accord au centieme. C'est le defaut deja signale sur
   `/pourquoi-moko`, et il vaut aussi pour `/conditions-generales`.

   La correction ne choisit pas une teinte : elle rend au libelle la couleur qui
   va avec le fond REEL du bouton, celui de `btn-secondary`. Mesure : 18,17 au
   repos, 8,10 au survol quand le fond passe au vert. */
html.dark a.btn[class~="btn-secondary"][class~="dark:btn-accent"],
html.dark a.btn[class~="btn-secondary"][class~="dark:btn-accent"] span,
html.dark button.btn[class~="btn-secondary"][class~="dark:btn-accent"],
html.dark button.btn[class~="btn-secondary"][class~="dark:btn-accent"] span {
  color: #ffffff !important;
}

/* --------------------------------------------------------------------------
   FAMILLE 2 : une section qui reste claire quand le theme passe au sombre
   --------------------------------------------------------------------------
   `bg-background-3` vaut #f4f5f8 et n'a pas de contrepartie sombre. Sur
   `/fonctionnalites`, une section le porte SANS `dark:bg-*` : elle reste donc
   claire en theme sombre, pendant que le texte, lui, bascule. Titre blanc a
   1,09, paragraphe a 1,04, badge a 1,12.

   Ce n'est pas un utilitaire de texte sans variante : c'est une SURFACE sans
   variante, sous un texte qui en a une. La correction rend au texte les roles
   du theme clair, la surface etant claire, et ne touche pas le fond.

   L'exclusion `:not(:where([class*="dark:bg-"] *))` epargne les cartes
   imbriquees qui, elles, suivent le theme : la meme section en contient une,
   sombre en theme sombre, dont le texte clair est correct.

   Mesures : titre 16,67 ; paragraphe 5,28 ; badge 16,67. */
/* La seconde ligne existe pour une raison qui se mesure : la regle
   `.dark h2[data-ns-animate]:not(...):not(...)` du haut de ce fichier compte
   QUATRE classes, une de plus que le selecteur de section ci-dessous. A poids
   egal de `!important`, c'est elle qui l'emportait, et le titre restait blanc
   sur la section claire, a 1,09, inchange. Nommer `[data-ns-animate]` ici rend
   le compte favorable sans forcer quoi que ce soit d'autre. */
html.dark section[class~="bg-background-3"]:not([class*="dark:bg-"])
  :is(h1, h2, h3, h4, h5, h6):not(:where([class*="dark:bg-"], [class*="dark:bg-"] *)),
html.dark section[class~="bg-background-3"]:not([class*="dark:bg-"])
  :is(h1, h2, h3, h4, h5, h6)[data-ns-animate]:not(:where([class*="dark:bg-"], [class*="dark:bg-"] *)),
html.dark [data-cms-emplacement="a-propos-processus"] article[class~="bg-white"]
  :is(h1, h2, h3, h4, h5, h6),
html.dark [data-cms-emplacement="a-propos-equipe"] .group[class~="bg-white"]
  :is(h1, h2, h3, h4, h5, h6) {
  color: #111712 !important;
}

html.dark section[class~="bg-background-3"]:not([class*="dark:bg-"])
  :is(p, li, span, small, strong, em):not(.badge):not(:where([class*="dark:bg-"], [class*="dark:bg-"] *)),
html.dark [data-cms-emplacement="a-propos-processus"] article[class~="bg-white"]
  :is(p, li, span, small, strong, em):not(.badge),
html.dark [data-cms-emplacement="a-propos-equipe"] .group[class~="bg-white"]
  :is(p, li, span, small, strong, em):not(.badge) {
  color: color-mix(in oklab, #111712 64%, transparent) !important;
}

html.dark section[class~="bg-background-3"]:not([class*="dark:bg-"])
  .badge:not(:where([class*="dark:bg-"], [class*="dark:bg-"] *)) {
  color: #111712 !important;
}

/* --------------------------------------------------------------------------
   FAMILLE 3 : les pastilles de la palette fixe, claires dans les deux themes
   --------------------------------------------------------------------------
   `bg-ns-green`, `bg-ns-cyan`, `bg-ns-yellow` et `bg-ns-red` sont des pastels :
   ils ne basculent pas avec le theme. Le gabarit y pose `text-secondary`, et la
   regle generale `.dark .text-secondary` du present fichier repeint ce libelle
   en blanc, soit blanc sur #dcefdc, ratio 1,21. C'est le defaut deja signale sur
   les trois compteurs de `/pourquoi-moko` ; `/remboursement` porte les memes
   pastilles pour ses trois etapes.

   La correction ne change pas la pastille : elle rend au libelle le role
   « texte sur surface claire », sur une surface qui est claire.

   Mesures : 15,08 sur le vert, 12,66 sur le cyan, 10,83 sur le jaune. */
html.dark :is([class~="bg-ns-green"], [class~="bg-ns-cyan"], [class~="bg-ns-yellow"], [class~="bg-ns-red"]),
html.dark :is([class~="bg-ns-green"], [class~="bg-ns-cyan"], [class~="bg-ns-yellow"], [class~="bg-ns-red"])
  :is(p, span, strong, b, small, em, li, h1, h2, h3, h4, h5, h6) {
  color: #111712 !important;
}

/* --------------------------------------------------------------------------
   FAMILLE 4 : un panneau qui se donne un fond sombre sans se donner son texte
   --------------------------------------------------------------------------
   Plus haut dans ce fichier, sept panneaux MOKO recoivent `background:
   var(--color-background-7)` en theme sombre. Aucun ne recoit la couleur de
   texte qui va avec. Les elements qui portent leur propre couleur ne s'en
   apercoivent pas ; ceux qui HERITENT, comme un `strong`, un `button`, un `span` de
   `summary`, heritent de la couleur de page, restee #111712.

   Verifie au protocole de debogage : sur ces trois elements, AUCUNE declaration
   de `color` ne s'applique. Ils n'ont pas la mauvaise regle, ils n'en ont
   aucune. Ratios mesures : 1,08 et 1,09, les deux instruments d'accord au
   centieme.

   La correction se pose sur le PANNEAU, la ou le fond a ete pose, et non sur
   chacun de ses descendants. Mesures : 16,90 sur #181d26, 19,66 sur #070b10. */
html.dark .moko-backend-note,
html.dark .moko-order-receipt,
html.dark .moko-password-after-payment,
html.dark .moko-preview-access,
html.dark .moko-combi-panel,
html.dark .moko-token-actions {
  color: #ffffff;
}

/* --------------------------------------------------------------------------
   FAMILLE 5 : le jaune de marque sert de fond ET de texte
   --------------------------------------------------------------------------
   C'est exactement la cause que le lot precedent a traitee pour le vert, sur
   une autre couleur. `--color-ns-yellow` vaut #f2c14e : parfait en pastille,
   illisible en texte sur une carte claire, ou `.text-ns-yellow` rend 1,61 sur
   #f9fafb, sur quatre pages.

   On ne change donc pas la teinte : on SEPARE LES DEUX ROLES, et le role texte
   prend la valeur deja definie dans ce fichier pour l'ambre semantique,
   `--moko-semantic-advice-text`, #6f4d00 en theme clair.

   LA PORTEE EST LA PARTIE DELICATE, ET UNE PREMIERE VERSION S'Y EST TROMPEE.
   Le meme `.text-ns-yellow` sert a deux endroits : sur une carte claire, ou il
   rendait 1,61 ; et sur le hero sombre, #292f2a en theme CLAIR aussi, car ce
   bloc ne suit pas le theme, ou #f2c14e rend 8,18. Repointer la classe
   entierement a fait tomber le second de 8,18 a 1,79 sur `/tarifs`,
   `/accompagnement` et six autres pages. Mesure du 2026-08-09.

   Les deux roles ne se separent donc pas par le THEME mais par la SURFACE,
   comme la carte de tarif inversee plus haut dans ce fichier. Le jaune reste
   celui du gabarit partout, sauf sur les surfaces claires nommees ci-dessous,
   ou il prend l'ambre. Mesures : 7,37 sur la carte, 8,18 et 9,31 inchanges sur
   le hero.

   L'EXCLUSION FINALE A ETE AJOUTEE APRES UNE SECONDE MESURE, et elle dit
   pourquoi une liste d'ancetres clairs ne suffit pas : sur `/tarifs` et
   `/sessions`, le badge est bien SOUS un `main` clair, mais DANS un
   `section.moko-page-hero.bg-secondary` qui, lui, est sombre dans les deux
   themes. Le premier essai regardait donc un ancetre trop lointain et
   ramenait le badge de 8,18 a 1,79. Ce qui compte n'est pas qu'il existe une
   surface claire au-dessus : c'est que la surface LA PLUS PROCHE soit claire. */
html:not(.dark)
  :is([class~="bg-background-1"], [class~="bg-background-2"], [class~="bg-background-3"],
      [class~="bg-background-4"], [class~="bg-background-12"], [class~="bg-white"])
  .text-ns-yellow:not(:where(
      [class~="bg-secondary"] *, [class~="bg-black"] *, .moko-page-hero *, footer *)) {
  color: var(--moko-semantic-advice-text) !important;
}

/* --------------------------------------------------------------------------
   FAMILLE 6 : des libelles pales trop pales pour etre du texte
   --------------------------------------------------------------------------
   Le lot precedent avait deja releve dix libelles de 0,58 a 0,64. Deux paliers
   du gabarit restaient en dessous : `text-secondary/40` rend 2,54 sur le fond
   de page clair, et `text-accent/40` 3,71 sur une carte sombre. La valeur
   retenue n'est pas choisie a l'oeil : c'est celle que le projet a deja
   arretee pour ce role, 64 %.

   Le paragraphe pale de la carte `bg-background-12` de `/pourquoi-moko` releve
   du meme role : le gabarit le laisse a 60 %, ce qui rend 4,49, sous le seuil
   de quatre centiemes. Mesures apres : 5,68 et 5,10. */
html:not(.dark) [class~="text-secondary/40"] {
  color: color-mix(in oklab, #111712 64%, transparent) !important;
}

html.dark [class~="dark:text-accent/40"],
html.dark [class~="text-accent/40"] {
  color: color-mix(in oklab, #fcfcfc 64%, transparent) !important;
}

html:not(.dark) [class~="bg-background-12"] p {
  color: color-mix(in oklab, #111712 64%, transparent);
}

/* --------------------------------------------------------------------------
   FAMILLE 7 : le numero de page pose sur la pastille verte
   --------------------------------------------------------------------------
   Sur `/guides`, la pagination pose le vert de marque en FOND du chiffre actif
   et au survol, mais laisse le chiffre heriter de la couleur de page : #111712
   sur #2f7d52, ratio 3,62, les deux instruments d'accord au centieme a l'etat
   normal. Le vert reste un fond, il ne bouge pas ; c'est le chiffre qui prend
   la couleur qui va avec. Mesure : 5,04. */
html:not(.dark) li[class~="page-active"] > a[class*="rounded-full"],
html:not(.dark) li[class*="group"] > a[class*="rounded-full"][class*="hover:bg-primary-500"]:hover {
  color: #ffffff;
}

/* --------------------------------------------------------------------------
   FAMILLE 8 : la note d'etat vide du panneau apprenant, en theme sombre
   --------------------------------------------------------------------------
   `.moko-client-empty-note` prend `--ink-muted` (#5c675f), defini pour un fond
   clair et jamais redefini pour le panneau sombre : 2,87 sur #181d26, les deux
   instruments d'accord. Le role est le meme que celui de la famille 6, celui
   d'un libelle discret, et il prend donc la meme valeur. Mesure : 7,56.

   Le jeton `--ink-muted` vit dans `frontend/src/app/globals.css`, hors du
   perimetre de ce lot : la correction est posee ici, sur le seul selecteur
   mesure, et la racine du jeton est signalee sans etre touchee. */
html.dark .moko-client-empty-note {
  color: color-mix(in oklab, #ffffff 64%, transparent);
}

/* ===========================================================================
   LES SEIZE QUI RESTAIENT : releve du 2026-08-09, deux instruments
   ===========================================================================

   RECOMPTAGE. Le meme balayage, sur les memes 69 routes et les memes quatre
   axes, rend les memes chiffres que le releve precedent : 2 927 groupes
   mesures, 16 sous 4,5, 4 non mesurables parce que le fond est un degrade. Le
   second instrument, celui qui ne lit aucune valeur CSS et deduit tout du pixel
   peint, en CONFIRME 6, en INFIRME 8 et en laisse 2 sans verdict. Ecart maximal
   entre les deux instruments : 19,15 ; sur les groupes confirmes : 2,16.

   CE QUE LE RECOMPTAGE A CORRIGE DANS CE QU'ON CROYAIT. Il etait ecrit que six
   groupes n'avaient d'autre levier que leur fond. C'EST FAUX, et cela se
   demontre sans capture : le contraste WCAG ne depend que de deux luminances,
   et la luminance d'un texte est bornee par le noir et le blanc. Le meilleur
   rapport atteignable en ne changeant QUE la couleur du texte vaut donc
   max(rapport(blanc, fond), rapport(noir, fond)). Sur les six, il vaut 6,43,
   5,90 et 4,79 : un levier de texte existe partout, y compris la ou on le
   croyait absent. Le calcul est dans `output/seize-contrastes/levier.js`.

   CE QUE LE RECOMPTAGE A TROUVE QUE PERSONNE NE CHERCHAIT. Le balayage ecarte
   tout texte en `visibility: hidden`, et il ne force `:hover` que sur des
   elements interactifs. Les quatre mega-menus s'ouvrent au survol d'un `li`,
   qui n'en est pas un : leurs 10 groupes de texte n'ont donc JAMAIS ete mesures,
   dans aucun des quatre axes, sur aucune des 69 routes. Mesure : le forcage du
   balayage porte sur 174 elements et laisse le panneau `hidden` ; un survol reel
   du `li` le rend `visible`. Ouvert a la souris et lu apres que sa transition de
   300 ms a abouti, le panneau rend un defaut : le libelle du bouton de
   promotion, corrige ci-dessous.

   Aucune declaration de ce bloc ne porte sur une propriete animee : les
   images-cles de ce fichier animent `height`, `opacity` et `transform`, jamais
   `color`. Le controle est mecanique, dans
   `output/seize-contrastes/verifier-proprietes-animees.js`.

   --------------------------------------------------------------------------
   1 : une regle de navigation repeint le libelle d'un bouton plein
   --------------------------------------------------------------------------
   `html:not(.dark) .header-one nav a` pose #111712 sur TOUT lien de l'en-tete en
   theme clair. Le bouton de promotion des mega-menus n'est pas un lien de
   navigation : c'est un bouton plein, dont le fond est le vert primaire
   #2f7d52. Il recoit donc une encre sombre sur un fond sombre, sur les QUATRE
   panneaux : 3,62 au pixel peint comme a la couleur calculee, les deux
   instruments d'accord au centieme.

   La correction ne choisit pas une teinte : elle rend au libelle la couleur qui
   va avec le fond REEL du bouton, celle que sa propre regle lui donnait deja et
   que la regle de navigation ecrasait. C'est la meme cause que la famille 1 du
   releve precedent, prise par l'autre bout : la, une classe de fond qui
   n'existait pas ; ici, une regle de fond qui ne s'applique pas au bouton.

   Le poids est la partie delicate. `html:not(.dark) .header-one .dropdown-menu a`
   compte trois classes et deux elements ; le selecteur ci-dessous en compte
   quatre et quatre, ce qui suffit sans rien forcer d'autre. Mesure attendue et
   obtenue : 5,03. Le theme sombre n'est pas touche : il y rendait deja 5,03. */
html:not(.dark) body header .header-one .dropdown-menu a.moko-mega-promo-link,
html:not(.dark) body header .header-one .dropdown-menu a.moko-mega-promo-link span {
  color: #ffffff !important;
}

/* --------------------------------------------------------------------------
   2 : une pastille qui prend le jeton de BORDURE la ou l'autre theme prend
       celui de TEXTE
   --------------------------------------------------------------------------
   Sur `/examen/ee-serie-1`, la pastille numerotee de la deuxieme tache rend 4,28
   en theme sombre, les deux instruments d'accord au centieme. Les deux autres
   pastilles vont bien : 8,42 sur le bleu, 5,02 sur le vert. L'ambre est la seule
   a echouer, et la comparaison des trois regles dit pourquoi.

   En theme CLAIR, la pastille se remplit de `--moko-semantic-advice-text` et
   ecrit en `--color-background-1`. En theme SOMBRE, elle se remplit de
   `--moko-semantic-advice-border` — un jeton de BORDURE — et garde la meme encre
   claire. Ce n'est pas une teinte mal choisie, c'est un ROLE pris pour un autre,
   exactement la cause que le vert puis le jaune ont connue.

   Aucune encre du theme ne rattrape #8f7625 : le meilleur atteignable y vaut
   4,79, et seulement avec du noir pur, que la palette ne contient pas ;
   `--color-secondary` n'y rend que 4,14. La correction rend donc a la pastille
   sombre le meme COUPLE que la pastille claire, pris dans les jetons deja
   definis pour cette semantique. Mesure attendue : 12,45.

   Le fond des trois encarts, leur bordure et leur texte ne bougent pas : seule
   la pastille, qui porte un chiffre et tient donc un rapport de contraste. */
html.dark .moko-ee-instruction-tasks article.is-task-2 > strong {
  background: var(--moko-semantic-advice-text);
  color: var(--moko-semantic-advice-bg);
}

/* --------------------------------------------------------------------------
   3 : un libelle a 60 % pose sur une photographie
   --------------------------------------------------------------------------
   Sur `/tutoriels`, le voile de carte se leve au survol et pose son texte sur la
   photographie de la vignette, non sur une couleur. Le libelle discret y est a
   60 % de blanc : 3,25 au pixel peint, et 3,24 sur le pire pixel du trait — la
   photographie est presque unie a cet endroit, l'ecart entre median et pire ne
   vaut qu'un centieme.

   LE CHIFFRE DE 6,90 QUE LE PREMIER INSTRUMENT REND EN THEME SOMBRE N'EXISTE
   PAS. Il compose la pile des `background-color` et ne voit pas la photographie ;
   le pixel peint rend 3,25 dans les DEUX themes, la photographie et le voile
   etant les memes. La correction porte donc sur les deux, et c'est la mesure qui
   le dit, pas une symetrie supposee.

   Le voile n'est pas touche : on rend au libelle l'opacite pleine de l'encre
   claire du theme. Mesure attendue : 6,27.

   CE QUI RESTE, ET QUI EST NOMME PLUTOT QUE TU : le titre du meme voile est
   deja en `--color-accent` plein. Il rend 3,47 au pixel median pour un seuil de
   3,0, son texte faisant 24 px, mais 2,56 sur le pire pixel du trait. Aucune
   couleur de texte ne le repare : sur une photographie qui va du clair au
   sombre, celle qui sauve un pixel en perd un autre. Son seul levier est
   l'opacite du voile, c'est-a-dire un fond, et ce lot n'en touche aucun. */
[class~="backdrop-blur-[10px]"][class~="bg-secondary/10"] p > [class~="text-accent/60"] {
  color: var(--color-accent);
}

/* Le bandeau reste fixe et lisible, mais sa bande ne recouvre plus la fin de
   la page. La reserve additionne sa hauteur mesuree et son decalage du bas. */
body:has(> [data-moko-consentement]) {
  padding-bottom: 282px;
}

@media (max-width: 640px) {
  body:has(> [data-moko-consentement]) {
    padding-bottom: 364px;
  }
}

/* ============================================================
   Reprise du gabarit de l'espace apprenant sur l'echelle de
   l'administration (mandat du 2026-08-12 au soir).
   Perimetre : uniquement le shell `.moko-client-app` — les pages
   publiques d'epreuves et le lecteur d'examen (`moko-sim-*`),
   valides, ne sont pas touches. Valeurs mesurees sur l'admin :
   titre de page 20px/750, corps 14px, menu 13px.
   ============================================================ */

.moko-client-app {
  font-size: 14px;
}

/* La colonne du menu ne se resserre qu'en disposition large : plus bas, la
   regle existante a une colonne reprend la main. */
@media (min-width: 1100px) {
  .moko-client-app {
    grid-template-columns: 250px minmax(0, 1fr);
  }
}

.moko-client-app .moko-client-app-sidebar {
  gap: 20px;
  padding: 22px 16px;
}

.moko-client-app .moko-client-brand {
  width: 160px;
  padding: 8px 12px;
}

.moko-client-app .moko-client-brand img {
  height: 34px;
}

.moko-client-app .moko-client-nav-block {
  gap: 8px;
}

.moko-client-app .moko-client-nav-block > span {
  font-size: 11px;
}

.moko-client-app .moko-client-nav-block a,
.moko-client-app .moko-client-mobile-nav a {
  gap: 10px;
  padding: 9px 12px;
  font-size: 13px;
  font-weight: 650;
}

.moko-client-app .moko-client-nav-block a svg,
.moko-client-app .moko-client-mobile-nav a svg,
.moko-client-app .moko-client-icon-link svg,
.moko-client-app .moko-client-search svg {
  width: 16px;
  height: 16px;
}

.moko-client-app .moko-client-topbar h1 {
  font-size: 20px;
  font-weight: 750;
}

.moko-client-app .moko-client-panel-head h2 {
  margin-top: 10px;
  font-size: 20px;
  font-weight: 750;
  line-height: 1.3;
}

.moko-client-app .moko-client-panel-head p {
  margin-top: 8px;
  font-size: 14px;
}

.moko-client-app .moko-client-panel-head > span,
.moko-client-app .moko-client-panel-head > div > span {
  padding: 5px 9px;
  font-size: 11px;
  font-weight: 650;
}

.moko-client-app .moko-client-tabs a {
  min-width: 96px;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 650;
}

/* Titres de cartes un cran sous le titre de page, comme dans l'admin.
   Les chiffres des indicateurs (.moko-client-kpis) gardent leur taille. */
.moko-client-app .moko-client-course-list strong,
.moko-client-app .moko-notification-list strong,
.moko-client-app .moko-profile-card h3 {
  font-size: 16px;
  font-weight: 700;
}

/* La barre d'onglets vit dans le flux, comme dans l'administration :
   collee en bas de l'ecran, elle recouvrait le contenu en mobile et
   debordait a droite. Elle defile desormais horizontalement a sa place. */
@media (max-width: 899px) {
  .moko-client-app .moko-client-tabs {
    position: static;
    z-index: auto;
    flex-wrap: nowrap;
    overflow-x: auto;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    margin-bottom: 18px;
    border-top: 0;
    border-radius: 999px;
    padding: 6px;
    box-shadow: none;
    overscroll-behavior-inline: contain;
  }

  .moko-client-app .moko-client-tabs a {
    flex: 0 0 auto;
    min-width: max-content;
    padding: var(--moko-space-2);
    white-space: nowrap;
  }

  .moko-client-app .moko-client-tabs.is-scrollable {
    scrollbar-color: var(--color-primary-500) transparent;
    scrollbar-width: thin;
  }

  .moko-client-app .moko-client-tabs.is-scrollable::-webkit-scrollbar {
    display: block;
    height: var(--moko-space-1);
  }

  .moko-client-app .moko-client-tabs.is-scrollable::-webkit-scrollbar-track {
    background: transparent;
  }

  .moko-client-app .moko-client-tabs.is-scrollable::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: var(--color-primary-500);
  }

  /* Le padding de 136px compensait la barre fixe : il n'a plus d'objet. */
  .moko-client-app .moko-client-content {
    padding: 18px;
  }

  /* Les tuiles du menu mobile a l'echelle de l'admin, et jamais plus
     larges que l'ecran : la nav debordait a droite et coupait ses tuiles. */
  .moko-client-app .moko-client-mobile-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    max-width: calc(100vw - 36px);
    min-width: 0;
    gap: 6px;
  }

  .moko-client-app .moko-client-mobile-nav a {
    min-width: 0;
    padding: 8px 10px;
  }

  .moko-client-app .moko-client-mobile-nav a span {
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* Le detail d'un cours est une pile de sections autonomes. Les anciennes
   marges isolees laissaient 0 px entre l'avancement et le contenu suivant. */
.moko-client-app .moko-client-panel.moko-course-detail {
  display: grid;
  gap: var(--moko-page-section-gap);
}

.moko-client-app .moko-course-detail .moko-client-panel-head {
  display: grid;
  gap: var(--moko-space-4);
  margin-bottom: 0;
}

.moko-client-app .moko-course-detail .moko-client-panel-head > span {
  justify-self: start;
}

.moko-client-app .moko-course-detail .moko-client-panel-head h2,
.moko-client-app .moko-course-detail .moko-client-panel-head p {
  margin-top: 0;
}

.moko-client-app .moko-course-detail .moko-client-progress-block {
  display: grid;
  gap: var(--moko-space-4);
  margin: 0;
}

.moko-client-app .moko-course-detail .moko-client-progress-track,
.moko-client-app .moko-course-detail .moko-course-mobile-selector {
  margin-top: 0;
  margin-bottom: 0;
}

/* Une icone et le libelle de son action forment une seule ligne. Cette regle
   couvre les boutons du gabarit, les actions apprenant et celles creees par
   ThemeScripts sans modifier les navigations volontairement empilees. */
a.btn,
button.btn {
  display: inline-flex !important;
  max-width: 100%;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  gap: var(--moko-space-2);
  white-space: nowrap;
}

a.btn > svg,
button.btn > svg {
  flex: 0 0 auto;
}

a.btn > span,
button.btn > span {
  min-width: 0;
  white-space: nowrap;
}

/* Le role blanc conserve les memes quatre combinaisons lisibles en clair et
   en sombre. La regle finale neutralise les anciens utilitaires `dark:*` qui
   rendaient parfois le texte blanc sur le fond blanc au repos. */
html:not(.dark) a.btn[class~="btn-white"],
html:not(.dark) button.btn[class~="btn-white"],
html.dark a.btn[class~="btn-white"],
html.dark button.btn[class~="btn-white"] {
  background-color: var(--moko-btn-white-bg) !important;
  border-color: var(--moko-btn-white-border) !important;
  color: var(--moko-btn-white-text) !important;
}

html:not(.dark) a.btn[class~="btn-white"] span,
html:not(.dark) button.btn[class~="btn-white"] span,
html.dark a.btn[class~="btn-white"] span,
html.dark button.btn[class~="btn-white"] span {
  color: var(--moko-btn-white-text) !important;
}

html:not(.dark) a.btn[class~="btn-white"]:hover,
html:not(.dark) button.btn[class~="btn-white"]:hover,
html.dark a.btn[class~="btn-white"]:hover,
html.dark button.btn[class~="btn-white"]:hover {
  background-color: var(--moko-btn-white-bg-hover) !important;
  border-color: var(--moko-btn-white-bg-hover) !important;
  color: var(--moko-btn-white-text-hover) !important;
}

html:not(.dark) a.btn[class~="btn-white"]:hover span,
html:not(.dark) button.btn[class~="btn-white"]:hover span,
html.dark a.btn[class~="btn-white"]:hover span,
html.dark button.btn[class~="btn-white"]:hover span {
  color: var(--moko-btn-white-text-hover) !important;
}

/* Le panneau de parrainage enchaine des blocs autonomes : les ecarts viennent
   de l'echelle partagee et la zone d'actions ne double plus sa marge. */
.moko-client-app .moko-client-panel.moko-client-parrainage {
  display: grid;
  gap: var(--moko-page-section-gap);
}

.moko-client-app .moko-client-parrainage .moko-client-stack {
  display: grid;
  gap: var(--moko-space-4);
}

.moko-client-app .moko-client-parrainage [data-parrainage-actions] {
  margin: 0;
}

/* La page A propos reprend les hauteurs et les espacements mesures dans les
   blocs sources. Ces trois ajustements compensent uniquement des utilitaires
   absents de la feuille vendor compilee, sans modifier main.css. */
@media (min-width: 1024px) {
  [data-cms-emplacement="a-propos-histoire"] [data-about-template-panel="history"] {
    min-height: 527px;
  }

  [data-cms-emplacement="a-propos-processus"] {
    padding-top: 156px;
  }

  [data-cms-emplacement="a-propos-processus"] [data-about-template-layout="process"] > * + * {
    margin-top: 72px;
  }

  [data-cms-emplacement="a-propos-commencer"] [data-about-template-panel="cta"] {
    min-height: 500px;
  }

  [data-cms-emplacement="a-propos-avis"] {
    min-height: 909px;
  }
}