:root {
  --color-primary-50: var(--moko-navy-50, #eeedf2);
  --color-primary-100: var(--moko-navy-100, #dddce5);
  --color-primary-200: var(--moko-navy-200, #bbb9cb);
  --color-primary-300: var(--moko-navy-300, #8986a5);
  --color-primary-500: var(--moko-navy-500, #29235b);
  --color-primary-400: var(--moko-navy-400, #544f7c);
  --color-primary-600: var(--moko-navy-600, #221d4c);
  --color-primary-700: var(--moko-navy-700, #1c183e);
  --color-primary-800: var(--moko-violet-surface, #15122f);
  --color-primary-900: var(--moko-violet-fond, #0f0d21);
  /* Le rôle principal suit désormais la famille navy documentée. Les anciens
     noms « vert » restent des alias de compatibilité afin de ne casser aucun
     gabarit historique ; ils ne désignent plus une couleur sémantique. */
  --moko-texte-primaire-sur-clair: var(--moko-navy-500, #29235b);
  --moko-texte-primaire-sur-sombre: var(--moko-navy-200, #bbb9cb);
  --moko-texte-primaire: var(--moko-texte-primaire-sur-clair);
  --moko-texte-vert-sur-clair: var(--moko-texte-primaire-sur-clair);
  --moko-texte-vert-sur-sombre: var(--moko-texte-primaire-sur-sombre);
  --moko-texte-vert: var(--moko-texte-primaire);
  --color-ns-green: var(--moko-navy-100, #dddce5);
  --color-ns-green-light: var(--moko-navy-50, #eeedf2);
  --color-ns-yellow: #f2c14e;
  --color-secondary: var(--moko-navy-500, #29235b);
  /* Accent rouge du logo. La variante sombre conserve la meme teinte et
     augmente seulement sa luminosite pour atteindre le contraste AA. */
  --moko-rouge-accent: #d80c60;
}

.bg-primary-500 { background-color: var(--color-primary-500) !important; }
.text-primary-500 { color: var(--moko-texte-primaire) !important; }
[data-moko-accueil-champ="hero-titre"] .text-primary-500 {
  color: var(--moko-rouge-accent) !important;
}
.border-primary-500 { border-color: var(--color-primary-500) !important; }
.border-primary-400 { border-color: var(--color-primary-400) !important; }
.bg-ns-green { background-color: var(--color-ns-green) !important; }
.text-ns-yellow { color: #f2c14e !important; }
.header-one img[alt="MOKO TCF"],
footer img[alt="MOKO TCF"] {
  object-fit: contain;
}
.moko-public-header-logo {
  box-sizing: border-box;
  flex: 0 0 auto;
  overflow: hidden;
  border: 1px solid var(--color-stroke-2, #e3e7ed);
  background: #ffffff;
}
.moko-public-header-logo img {
  display: block;
  object-fit: contain;
}
.moko-public-header-logo-desktop {
  width: 198px;
  height: 50.90625px;
  align-items: center;
  gap: 3px;
  padding: 4px 6px 4px 4px;
  border-radius: 999px;
}
.moko-public-header-logo-desktop img {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
}
.moko-public-header-logo-desktop figcaption {
  display: grid;
  min-width: 0;
  gap: 1px;
  color: #30246c;
  font-family: "Arial Rounded MT Bold", Nunito, ui-rounded, system-ui, sans-serif;
  font-size: 10px;
  font-style: normal;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.1px;
  white-space: nowrap;
}
.moko-public-header-logo-desktop strong {
  color: #d80c60;
  font: inherit;
}
.moko-public-header-logo-desktop em {
  color: #217445;
  font: inherit;
}

/* La capsule reste blanche dans les deux themes. Ses trois textes portent
   donc leurs couleurs de marque controlees sur blanc, sans heriter des
   regles generales de l'en-tete sombre. */
html.dark .header-one .moko-public-header-logo-desktop figcaption,
html.dark .header-one .moko-public-header-logo-desktop figcaption > span {
  color: #30246c !important;
}

html.dark .header-one .moko-public-header-logo-desktop strong {
  color: #d80c60 !important;
}

html.dark .header-one .moko-public-header-logo-desktop em {
  color: #217445 !important;
}
.moko-public-header-logo-mobile {
  width: 48px;
  height: 48px;
  place-items: center;
  padding: 3px;
  border-radius: 999px;
}
.moko-public-header-logo-mobile img {
  width: 42px;
  height: 42px;
}
body {
  background: #f7f8f4;
}

.dark body {
  background: var(--moko-violet-fond, #0f0d21);
}

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%, var(--moko-violet-fond, #0f0d21));
  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;
}

/* Tous les libelles qui ont reellement le role d'action utilisent la graisse
   normale du role bouton, dans le public, l'espace apprenant et l'administration.
   Les liens de navigation ordinaires gardent leur hierarchie propre. */
button,
input[type="button"],
input[type="submit"],
input[type="reset"],
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"]
),
.moko-client-focus-card > a,
.moko-client-course-list article > a,
.moko-centre-register-link,
div[class*="cardActions"] a,
: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"]
),
button *,
body:has(.header-one) :is(
  button,
  .btn,
  [role="button"],
  a[class*="action"],
  a[class*="Action"],
  a[class*="Button"]
) *,
.moko-client-focus-card > a *,
.moko-client-course-list article > a *,
.moko-centre-register-link *,
div[class*="cardActions"] a *,
: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: var(--moko-navy-500, #29235b);
  --moko-btn-primary-bg-hover: var(--moko-navy-700, #1c183e);
  --moko-btn-primary-text: #ffffff;
  --moko-btn-secondary-bg: var(--moko-violet-fond, #0f0d21);
  --moko-btn-secondary-bg-hover: var(--moko-violet-surface, #15122f);
  --moko-btn-secondary-text: #ffffff;
  --moko-btn-outline-bg: transparent;
  --moko-btn-outline-text: var(--moko-navy-500, #29235b);
  --moko-btn-outline-border: var(--moko-navy-100, #dddce5);
  --moko-btn-outline-bg-hover: var(--moko-navy-500, #29235b);
  --moko-btn-outline-text-hover: #ffffff;
  --moko-btn-white-bg: #ffffff;
  --moko-btn-white-text: var(--moko-navy-500, #29235b);
  --moko-btn-white-border: var(--moko-navy-100, #dddce5);
  --moko-btn-white-bg-hover: var(--moko-navy-500, #29235b);
  --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-primaire: var(--moko-texte-primaire-sur-sombre);
  --moko-texte-vert: var(--moko-texte-primaire);
  --moko-rouge-accent: #f21e75;
  --color-background-5: var(--moko-violet-surface, #15122f);
  --color-background-6: var(--moko-violet-fond, #0f0d21);
  --color-background-7: var(--moko-violet-surface, #15122f);
  --color-background-8: var(--moko-violet-fond, #0f0d21);
  --color-background-9: var(--moko-navy-700, #1c183e);
  --color-stroke-5: var(--moko-navy-700, #1c183e);
  --color-stroke-6: var(--moko-navy-500, #29235b);
  --color-stroke-7: var(--moko-violet-bordure-sombre, #433d6f);
  --color-stroke-8: var(--moko-violet-bordure-sombre, #433d6f);
  --moko-btn-primary-bg: var(--moko-navy-400, #544f7c);
  --moko-btn-primary-bg-hover: var(--moko-navy-500, #29235b);
  --moko-btn-outline-text: #ffffff;
  --moko-btn-outline-border: var(--moko-violet-bordure-sombre, #433d6f);
  --moko-btn-outline-bg-hover: #ffffff;
  --moko-btn-outline-text-hover: var(--moko-navy-500, #29235b);
  --moko-btn-white-bg: #ffffff;
  --moko-btn-white-text: var(--moko-navy-500, #29235b);
  --moko-btn-white-border: #ffffff;
  --moko-btn-white-bg-hover: var(--moko-navy-400, #544f7c);
  --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: var(--moko-navy-500, #29235b) !important;
}

.moko-btn-on-dark:hover {
  background-color: var(--color-primary-500) !important;
  border-color: var(--color-primary-500) !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: var(--moko-navy-500, #29235b) !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: var(--moko-navy-500, #29235b) !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: var(--moko-navy-500, #29235b) !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: var(--moko-navy-500, #29235b) !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: var(--moko-navy-500, #29235b) !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: var(--moko-navy-500, #29235b) !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-logo-link {
  display: inline-flex;
  width: fit-content;
  text-decoration: none;
}

.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: var(--moko-navy-500, #29235b) !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: var(--moko-navy-500, #29235b) !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: var(--moko-violet-fond, #0f0d21) !important;
  border-color: var(--moko-navy-500, #29235b) !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: var(--moko-navy-500, #29235b) !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: var(--moko-violet-fond, #0f0d21) !important;
  border-color: var(--moko-navy-500, #29235b) !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: var(--moko-navy-500, #29235b) !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-workspace,
.moko-nclc-table-wrap {
  max-width: 1100px;
  margin-inline: auto;
  border: 1px solid var(--color-stroke-2);
  border-radius: 20px;
  background: #ffffff;
  box-shadow: 0 18px 70px rgba(41, 35, 91, 0.08);
}

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

.moko-nclc-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  overflow: hidden;
}

.moko-nclc-panel,
.moko-nclc-result {
  padding: clamp(20px, 3vw, 32px);
}

.moko-nclc-result {
  border-top: 1px solid var(--color-stroke-2);
  background: var(--moko-navy-50, #eeedf2);
}

html.dark .moko-nclc-result {
  border-color: var(--color-stroke-7);
  background: var(--moko-violet-fond, #0f0d21);
}

@media (min-width: 900px) {
  .moko-nclc-workspace {
    grid-template-columns: minmax(0, 1.12fr) minmax(340px, 0.88fr);
  }

  .moko-nclc-result {
    border-top: 0;
    border-left: 1px solid var(--color-stroke-2);
  }
}

.moko-nclc-panel-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 24px;
}

.moko-nclc-step {
  display: inline-flex;
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: var(--moko-navy-100, #dddce5);
  color: var(--moko-navy-500, #29235b);
  font-size: 13px;
  font-weight: 600;
}

html.dark .moko-nclc-step {
  background: var(--moko-navy-700, #1c183e);
  color: #ffffff;
}

.moko-nclc-panel-head h3,
.moko-nclc-panel-head p {
  margin: 0;
}

.moko-nclc-panel-head h3 {
  color: var(--color-secondary);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.2;
}

.moko-nclc-panel-head p {
  margin-top: 4px;
  color: rgba(41, 35, 91, 0.66);
  font-size: 14px;
  line-height: 1.5;
}

html.dark .moko-nclc-panel-head h3 {
  color: #ffffff;
}

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

.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: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
  color: rgba(41, 35, 91, 0.78);
  font-size: 14px;
  font-weight: 500;
}

.moko-nclc-field span small {
  color: rgba(41, 35, 91, 0.56);
  font-size: 12px;
  font-weight: 400;
  white-space: nowrap;
}

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

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

.moko-nclc-field input {
  width: 100%;
  min-height: 48px;
  border: 1px solid var(--color-stroke-2);
  border-radius: 8px;
  background: #ffffff;
  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);
  background: var(--moko-violet-surface, #15122f);
  color: #ffffff;
}

.moko-nclc-field input:focus {
  border-color: var(--color-primary-400);
  box-shadow: 0 0 0 4px rgba(84, 79, 124, 0.18);
}

.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: stretch;
  min-height: 100%;
}

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

.moko-nclc-empty {
  display: flex;
  min-height: 100%;
  flex-direction: column;
  justify-content: center;
}

.moko-nclc-empty-levels {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.moko-nclc-empty-levels span {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--moko-navy-200, #bbb9cb);
  border-radius: 8px;
  color: var(--moko-navy-500, #29235b);
  font-size: 13px;
  font-weight: 500;
}

.moko-nclc-empty-levels span:first-child {
  grid-column: span 2;
  background: var(--moko-navy-500, #29235b);
  color: #ffffff;
}

html.dark .moko-nclc-empty-levels span {
  border-color: var(--color-stroke-7);
  color: #ffffff;
}

html.dark .moko-nclc-empty-levels span:first-child {
  background: var(--moko-navy-400, #544f7c);
}

.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: var(--moko-navy-500, #29235b);
  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: 600;
}

.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: var(--moko-navy-500, #29235b);
  font-size: 22px;
  font-weight: 700;
}

.moko-nclc-final-warning {
  background: #7f1d1d;
}

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

.moko-nclc-empty p,
.moko-nclc-note {
  margin-top: 16px;
  color: rgba(41, 35, 91, 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-bottom: 1px solid var(--color-stroke-2);
  padding: 12px 0;
  color: rgba(41, 35, 91, 0.74);
  font-size: 15px;
}

html.dark .moko-nclc-result-row {
  border-color: var(--color-stroke-7);
  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 {
  margin-top: 24px;
  overflow: hidden;
}

.moko-nclc-table-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  background: var(--moko-navy-500, #29235b);
  padding: 20px 24px;
  text-align: left;
}

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

.moko-nclc-table-head > div > span {
  display: block;
  margin-bottom: 4px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.72;
}

.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-head a {
  display: inline-flex;
  min-height: 40px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.36);
  border-radius: 999px;
  color: #ffffff;
  padding: 0 16px;
  font-size: 14px;
  font-weight: 400;
  white-space: nowrap;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.moko-nclc-table-head a:hover,
.moko-nclc-table-head a:focus-visible {
  background: #ffffff;
  color: var(--moko-navy-500, #29235b);
}

.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: var(--moko-navy-50, #eeedf2);
  color: var(--color-secondary);
  font-weight: 600;
}

html.dark .moko-nclc-table th {
  background: var(--moko-navy-700, #1c183e);
  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;
}

@media (max-width: 767px) {
  .moko-nclc-panel,
  .moko-nclc-result {
    padding: 20px;
  }

  .moko-nclc-table-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 16px;
    padding: 20px;
  }

  .moko-nclc-table-head a {
    width: 100%;
  }

  .moko-nclc-table-scroll {
    overflow: visible;
  }

  .moko-nclc-table,
  .moko-nclc-table tbody {
    display: block;
    min-width: 0;
  }

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

  .moko-nclc-table tbody {
    padding: 16px;
  }

  .moko-nclc-table tr {
    display: block;
    border: 1px solid var(--color-stroke-2);
    border-radius: 16px;
    padding: 14px;
  }

  .moko-nclc-table tr + tr {
    margin-top: 12px;
  }

  html.dark .moko-nclc-table tr {
    border-color: var(--color-stroke-7);
    background: var(--moko-violet-fond, #0f0d21);
  }

  .moko-nclc-table td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    border-bottom: 1px solid var(--color-stroke-2);
    padding: 10px 0;
    text-align: right;
  }

  .moko-nclc-table td::before {
    color: rgba(41, 35, 91, 0.66);
    content: attr(data-label);
    font-weight: 500;
    text-align: left;
  }

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

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

.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,
.moko-menu-icon img,
.moko-mobile-menu-icon img {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  object-fit: contain;
}

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(41, 35, 91, 0.18);
  border-radius: 18px;
  background:
    radial-gradient(circle at 18% 0%, rgba(216, 12, 96, 0.12), transparent 36%),
    linear-gradient(145deg, var(--moko-navy-50, #eeedf2), #ffffff);
  padding: 14px;
}

html.dark .moko-mega-promo {
  border-color: rgba(255, 255, 255, 0.12);
  background:
    radial-gradient(circle at 18% 0%, rgba(242, 30, 117, 0.12), transparent 36%),
    linear-gradient(145deg, var(--moko-violet-surface, #15122f), var(--moko-violet-fond, #0f0d21));
}

.moko-mega-promo figure {
  overflow: hidden;
  border-radius: 14px;
  aspect-ratio: 16 / 10;
  background: rgba(41, 35, 91, 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: 400;
  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 {
  
  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;
}

/* Les quatre apprentissages d'une page d'epreuve sont une seule grille
   editoriale : meme hauteur, meme surface et meme cadre pour chaque frere. */
.moko-epreuve-learning-grid {
  grid-auto-rows: minmax(0, 1fr);
}

.moko-epreuve-learning-cell {
  min-width: 0;
  height: 100%;
}

.moko-epreuve-learning-card {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: stretch;
  gap: 24px;
  overflow: hidden;
  border: 1px solid #dce3d8;
  border-radius: 20px;
  background: #ffffff;
  padding: 32px 20px;
}

html.dark .moko-epreuve-learning-card {
  border-color: #433d6f;
  background: #15122f;
}

.moko-epreuve-learning-copy {
  display: flex;
  min-width: 0;
  flex: 1 1 0;
  flex-direction: column;
  justify-content: center;
}

.moko-epreuve-learning-figure {
  display: flex;
  width: 100%;
  aspect-ratio: 253 / 220;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid #dce3d8;
  border-radius: 10px;
  background: #f7f8f4;
  padding: 12px;
}

html.dark .moko-epreuve-learning-figure {
  border-color: #433d6f;
  background: #0f0d21;
}

.moko-epreuve-learning-figure img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.moko-epreuve-learning-figure img[data-moko-image-theme="clair"] {
  display: block;
}

.moko-epreuve-learning-figure img[data-moko-image-theme="sombre"] {
  display: none;
}

html.dark .moko-epreuve-learning-figure img[data-moko-image-theme="clair"] {
  display: none;
}

html.dark .moko-epreuve-learning-figure img[data-moko-image-theme="sombre"] {
  display: block;
}

@media (min-width: 768px) {
  .moko-epreuve-learning-card {
    padding: 32px;
  }

  .moko-epreuve-learning-figure {
    width: min(46%, 253px);
    flex-basis: min(46%, 253px);
  }
}

@media (min-width: 1024px) {
  .moko-epreuve-learning-card {
    padding-block: 56px;
  }
}

.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;
}

/* Le bouton du bloc final porte un fond plein qui tranche sur la carte marine (5 octobre 2026, demande du
   propriétaire). Le bouton primaire prend ses couleurs des jetons `--moko-btn-primary-*` : en clair, son fond était
   exactement celui de la carte (#29235b) et il disparaissait. Le bloc redéfinit ces jetons pour ses descendants. */
.moko-public-cta {
  --moko-btn-primary-bg: #ffffff;
  --moko-btn-primary-bg-hover: #ecebf7;
  --moko-btn-primary-text: #29235b;
}
.moko-public-cta .btn {
  flex: none;
  font-weight: 500;
  box-shadow: 0 10px 24px rgb(9 7 32 / 28%);
}
.moko-public-cta .btn:focus-visible {
  outline: 3px solid #f8ad33;
  outline-offset: 3px;
}

/* 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-tarif-card .moko-prix-local > strong,
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(41, 35, 91, 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);
}

/* Les remarques des offres utilisent l'encre contractuelle du thème. Le pack
   mis en avant conserve plus bas son inversion navy sur blanc. */
.moko-tarif-card p,
.moko-tarif-card li {
  color: var(--moko-navy-500, #29235b);
}

html.dark .moko-tarif-card p,
html.dark .moko-tarif-card li {
  color: #ffffff;
}

.moko-tarifs-grid {
  display: grid;
  gap: 16px;
  justify-content: center;
}

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

  .moko-tarifs-grid > .moko-tarif-card:last-child:nth-child(odd) {
    width: calc((100% - 16px) / 2);
    grid-column: 1 / -1;
    justify-self: center;
  }
}

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

  .moko-tarifs-grid > .moko-tarif-card,
  .moko-tarifs-grid > .moko-tarif-card:last-child:nth-child(odd) {
    width: auto;
    grid-column: span 2;
  }

  .moko-tarifs-grid > .moko-tarif-card:nth-last-child(2):nth-child(3n + 1) {
    grid-column: 2 / span 2;
  }

  .moko-tarifs-grid > .moko-tarif-card:nth-last-child(1):nth-child(3n + 2) {
    grid-column: 4 / span 2;
  }

  /* Demande du propriétaire (12 octobre 2026) : une carte seule sur la dernière rangée est centrée, comme deux. */
  .moko-tarifs-grid > .moko-tarif-card:nth-last-child(1):nth-child(3n + 1) {
    grid-column: 3 / span 2;
  }
}

/* « Afficher plus de détails » sous le bouton de chaque carte d'offre de l'accueil (12 octobre 2026) : lien texte vers
   /tarifs (la carte gratuite mène à la page du test de niveau), dans l'encre de la carte. */
.moko-tarif-card > a.moko-plan-details-link {
  align-self: center;
  margin-top: -6px;
  color: var(--moko-navy-500, #29235b);
  font-size: 14px;
  line-height: 1.4;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.moko-tarif-card > a.moko-plan-details-link:hover,
.moko-tarif-card > a.moko-plan-details-link:focus-visible {
  color: var(--color-primary-500);
}

html.dark .moko-tarif-card > a.moko-plan-details-link {
  color: #ffffff;
}

.moko-tarif-card.is-featured > a.moko-plan-details-link {
  color: var(--color-background-1);
}

html.dark .moko-tarif-card.is-featured > a.moko-plan-details-link {
  color: var(--moko-navy-500, #29235b);
}

.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,
.moko-tarif-card .moko-prix-local > strong {
  color: var(--moko-texte-vert);
  font-size: 32px;
  line-height: 1;
}

/* Un seul groupe de prix : estimation TTC, devise facturée et limite explicite. */
.moko-prix-local {
  display: grid;
  color: var(--moko-texte-primaire);
  gap: var(--moko-space-2, 8px);
  min-width: 0;
  margin-block: var(--moko-space-4, 16px);
  overflow-wrap: anywhere;
}
.moko-prix-local > strong { font-size: 24px; line-height: 1.25; }
.moko-prix-local > small { color: inherit; font-size: 14px; line-height: 1.5; font-weight: 400; }
.moko-prix-attribution { margin-block: var(--moko-space-4, 16px); font-size: 12px; line-height: 1.5; }
/* La petite mention et son lien suivent aussi le thème, y compris au paiement. */
html body .moko-prix-attribution { color: var(--moko-texte-primaire); }
html body .moko-prix-attribution a { color: inherit; }
.moko-prix-attribution a { text-decoration: underline; text-underline-offset: 3px; }
.moko-prix-local:empty { display: none; }
.moko-tarif-card.is-featured .moko-prix-local { color: var(--moko-texte-primaire-sur-sombre); }
html.dark .moko-tarif-card.is-featured .moko-prix-local { color: var(--moko-texte-primaire-sur-clair); }

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

.moko-tarif-card li {
  position: relative;
}

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

/* Les avantages reprennent le marqueur rond du gabarit. L'etat herite reste
   lisible sans couleur grace a sa bordure interrompue et a son libelle. */
.moko-tarif-card li.moko-plan-benefit {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding-left: 0;
}

.moko-tarif-card li.moko-plan-benefit::before {
  content: none;
}

.moko-plan-benefit-icon {
  display: grid;
  width: 20px;
  height: 20px;
  place-items: center;
  border: 1px solid var(--color-primary-500);
  border-radius: 999px;
  background: var(--color-primary-500);
  color: #ffffff;
  font-size: 12px;
  font-weight: 400;
  line-height: 1;
  margin-top: 2px;
}

/* La carte mise en avant doit conserver un bouton distinct de sa propre
   surface : clair sur la carte navy en clair, navy sur la carte claire en sombre.
   Le lien des pages publiques et le bouton de la page Abonnement (même carte,
   mêmes classes) reçoivent la même pilule. Au survol en clair, le bouton garde
   la pilule sombre de hover:btn-white-dark, comme le lien. */
.moko-tarif-card.is-featured > button.btn,
.moko-tarif-card.is-featured > a.btn {
  border-color: var(--color-background-1) !important;
  background: var(--color-background-1) !important;
  color: var(--moko-navy-500, #29235b) !important;
}

.moko-tarif-card.is-featured > button.btn > span,
.moko-tarif-card.is-featured > a.btn > span {
  color: inherit !important;
}

.moko-tarif-card.is-featured > a.btn:hover,
.moko-tarif-card.is-featured > a.btn:focus-visible {
  background: color-mix(in srgb, var(--color-primary-500) 10%, var(--color-background-1)) !important;
}

html.dark .moko-tarif-card.is-featured > button.btn,
html.dark .moko-tarif-card.is-featured > a.btn {
  border-color: var(--moko-navy-500, #29235b) !important;
  background: var(--moko-navy-500, #29235b) !important;
  color: var(--color-background-1) !important;
}

html.dark .moko-tarif-card.is-featured > button.btn:hover,
html.dark .moko-tarif-card.is-featured > button.btn:focus-visible,
html.dark .moko-tarif-card.is-featured > a.btn:hover,
html.dark .moko-tarif-card.is-featured > a.btn:focus-visible {
  background: var(--moko-violet-surface, #15122f) !important;
}

/* Revue visuelle du 28 septembre 2026 : sur ce violet sombre, le chevron de `dark:hover:btn-white` (#1a1a1c) disparaissait.
   Le bouton reprend le chevron blanc de `btn-white-dark`, de la couleur de son texte. */
html.dark .moko-tarif-card.is-featured > button.btn:hover::before,
html.dark .moko-tarif-card.is-featured > button.btn:focus-visible::before,
html.dark .moko-tarif-card.is-featured > a.btn:hover::before,
html.dark .moko-tarif-card.is-featured > a.btn:focus-visible::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='white' viewBox='0 0 256 256'%3E%3Cpath d='M181.66,133.66l-80,80a8,8,0,0,1-11.32-11.32L164.69,128,90.34,53.66a8,8,0,0,1,11.32-11.32l80,80A8,8,0,0,1,181.66,133.66Z'%3E%3C/path%3E%3C/svg%3E");
}

.moko-plan-benefit-icon svg {
  width: 12px;
  height: 12px;
  stroke: currentColor;
}

.moko-plan-benefit-label {
  min-width: 0;
}

.moko-plan-benefit-state {
  border: 1px solid currentColor;
  border-radius: 999px;
  padding: 2px 7px;
  color: inherit;
  font-size: 11px;
  line-height: 1.35;
}

.moko-plan-benefit.is-attenue .moko-plan-benefit-icon {
  border-style: dashed;
  background: transparent;
  color: var(--color-primary-500);
}

/* Carte mise en avant en clair (bleu nuit) : le disque bleu nuit se fondait dans la carte, seule la coche restait (revue
   visuelle du 28 septembre 2026). Disque blanc et coche bleu nuit ; l'avantage atténué garde son contour pointillé. */
.moko-tarif-card.is-featured .moko-plan-benefit-icon {
  border-color: #ffffff;
  background: #ffffff;
  color: var(--moko-navy-500, #29235b);
}

.moko-tarif-card.is-featured .moko-plan-benefit.is-attenue .moko-plan-benefit-icon {
  border-color: rgba(255, 255, 255, 0.72);
  background: transparent;
  color: #ffffff;
}

html.dark .moko-tarif-card.is-featured .moko-plan-benefit-icon {
  border-color: var(--color-primary-500);
  background: var(--color-primary-500);
  color: #ffffff;
}

html.dark .moko-tarif-card.is-featured .moko-plan-benefit.is-attenue .moko-plan-benefit-icon {
  border-color: var(--color-primary-500);
  background: transparent;
  color: var(--color-primary-500);
}

/* Le prix prend la couleur du nom de l'offre : premier plan de la carte. */
.moko-tarif-card.is-featured h2,
.moko-tarif-card.is-featured .moko-prix-local > strong,
.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 .moko-prix-local > strong,
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);
}

/* 28 septembre 2026 : « Accès pendant N jours » n'avait aucune taille propre. Il héritait de la règle de base
   `small { font-size: 80% }` de assets/main.css (l.1638), soit 12,8 px sous une racine de 16 px : la plus petite
   mention de la carte, jugée trop petite. 14 px, la taille des deux autres mentions de la même carte : la
   périodicité (`.moko-plan-meta b`) et les lignes sous le prix (`.moko-prix-local > small`). */
.moko-plan-meta small {
  font-size: 14px;
}

.moko-tarifs-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  justify-content: center;
}

.moko-pricing-catalog {
  display: grid;
  gap: 16px;
  align-items: start;
}

.moko-pricing-common {
  border: 1px solid var(--color-stroke-2);
  border-radius: 20px;
  background: var(--color-background-2);
  padding: 28px;
}

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

.moko-pricing-common h3 {
  margin-bottom: 20px;
  color: var(--color-secondary);
  font-size: 20px;
  font-weight: 600;
}

html.dark .moko-pricing-common h3 {
  color: #ffffff;
}

.moko-pricing-common ul {
  display: grid;
  gap: 12px;
}

.moko-pricing-common .moko-plan-benefit {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  color: var(--moko-navy-500, #29235b);
}

html.dark .moko-pricing-common .moko-plan-benefit {
  color: #ffffff;
}

.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;
  table-layout: fixed;
  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;
  overflow-wrap: anywhere;
}

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;
}

/* 18 septembre 2026 : avantages et quotas du tableau comparatif, un par ligne, avec le
   marqueur rond des cartes de tarifs (même objet, mêmes jetons). */
.moko-pricing-table .moko-pricing-benefits {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.moko-pricing-table li.moko-plan-benefit {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  align-items: start;
  gap: 8px;
  padding: 0;
  font-size: 13px;
  line-height: 1.45;
}

.moko-pricing-table li.moko-plan-benefit::before {
  content: none;
}

.moko-pricing-table .moko-plan-benefit-icon {
  width: 18px;
  height: 18px;
  margin-top: 1px;
  font-size: 11px;
}

.moko-pricing-table td.moko-pricing-cell-liste {
  vertical-align: top;
}

/* Matrice de comparaison (ordinateur) : intitulé à gauche, coche ou valeur par offre. */
.moko-pricing-table th:first-child,
.moko-pricing-table td:first-child {
  width: 26%;
}

.moko-pricing-table th,
.moko-pricing-table td {
  overflow-wrap: normal;
  hyphens: auto;
}

.moko-pricing-table tr.moko-pricing-matrix td {
  padding-top: 12px;
  padding-bottom: 12px;
}

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

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

.moko-pricing-table td.moko-pricing-cell-matrice {
  text-align: center;
}

.moko-pricing-table td.moko-pricing-cell-matrice .moko-plan-benefit-icon {
  display: inline-grid;
  margin: 0 auto;
}

.moko-pricing-table td.moko-pricing-cell-matrice .moko-plan-benefit-icon.is-attenue {
  border-style: dashed;
  background: transparent;
  color: var(--color-primary-500);
}

.moko-pricing-table td.moko-pricing-cell-matrice .moko-plan-benefit-state {
  display: inline-block;
  margin-left: 6px;
  vertical-align: middle;
}

.moko-pricing-table td.moko-pricing-cell-matrice strong {
  color: var(--color-secondary);
  font-weight: 600;
}

html.dark .moko-pricing-table td.moko-pricing-cell-matrice strong {
  color: #ffffff;
}

.moko-pricing-absent {
  color: rgba(17, 23, 18, 0.35);
}

html.dark .moko-pricing-absent {
  color: rgba(255, 255, 255, 0.35);
}

@media (min-width: 1024px) {
  .moko-pricing-table tr.moko-pricing-listes {
    display: none;
  }
}

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-tarifs-detail-grid > .moko-tarif-card:last-child:nth-child(odd) {
    width: calc((100% - 16px) / 2);
    grid-column: 1 / -1;
    justify-self: center;
  }

  .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,
  .moko-pricing-catalog.is-learner .moko-tarifs-detail-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .moko-tarifs-detail-grid > .moko-tarif-card,
  .moko-tarifs-detail-grid > .moko-tarif-card:last-child:nth-child(odd) {
    width: auto;
    grid-column: span 2;
  }

  .moko-tarifs-detail-grid > .moko-tarif-card:nth-last-child(2):nth-child(3n + 1) {
    grid-column: 2 / span 2;
  }

  .moko-tarifs-detail-grid > .moko-tarif-card:nth-last-child(1):nth-child(3n + 2) {
    grid-column: 4 / span 2;
  }

}

@media (max-width: 1023px) {
  .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;
  }

  /* La liste des avantages prend toute la largeur sous son intitulé, sans colonne étroite ;
     la matrice d'ordinateur ne s'affiche pas ici. */
  .moko-pricing-table td.moko-pricing-cell-liste {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .moko-pricing-table tr.moko-pricing-matrix {
    display: none;
  }

  .moko-pricing-table th:first-child,
  .moko-pricing-table td:first-child {
    width: auto;
  }
}

/* 18 septembre 2026 : sur mobile, les quatre épreuves de l'accueil se lisent à la suite,
   sans clic sur un onglet ; chaque bloc porte le nom de son épreuve. Au-delà de 1024 px, le
   gabarit garde ses onglets et ce titre reste masqué. */
.moko-epreuve-titre-mobile {
  display: none;
}

@media (max-width: 1023px) {
  [data-moko-epreuves-empilees] .tab-mobile {
    display: none !important;
  }

  [data-moko-epreuves-empilees] [data-tab-content] {
    display: block !important;
  }

  [data-moko-epreuves-empilees] [data-tab-content] + [data-tab-content] {
    margin-top: 40px;
    padding-top: 40px;
    border-top: 1px solid var(--color-stroke-2);
  }

  html.dark [data-moko-epreuves-empilees] [data-tab-content] + [data-tab-content] {
    border-top-color: var(--color-stroke-7);
  }

  .moko-epreuve-titre-mobile {
    display: inline-flex;
    align-items: center;
    margin-bottom: 14px;
    padding: 6px 14px;
    border-radius: 999px;
    background: var(--color-primary-500);
    color: #ffffff;
    font-size: var(--text-tagline-2);
    font-weight: 500;
    line-height: 1.4;
  }
}

.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 {
  
  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: var(--moko-navy-500, #29235b);
  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 {
  
  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;
}

html.dark .moko-payment-method[data-payment-code="apple_pay"] img {
  filter: brightness(0) invert(1);
}

.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="echec"] {
  
  background: #fff2f2;
}

.moko-payment-dynamic[data-state="succes"] {
  
  background: #eef8f1;
}

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

html.dark .moko-payment-dynamic[data-state="succes"] {
  
  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: var(--moko-violet-fond, #0f0d21);
}

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

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



.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;
}

/* 28 septembre 2026 (décision du propriétaire) : une seule image modèle de fond pour toutes les cartes de centres, en
   paire claire et sombre (frontend/public/images/vitrine/centre-fond-*), et le sigle du centre, une donnée, posé en
   texte dans la zone vide du milieu de l'image. La règle `.home-centres-grid-section figure img { display: block }`
   (spécificité 0,1,2) est surclassée par les règles d'attribut ci-dessous (0,2,1 puis 0,3,2) : une image par thème.
   Aucune marge ici : cette feuille est hors couche et l'emporterait sur l'espacement `space-y-6` des cartes de l'accueil
   (couche utilities), qui sépare l'image du corps de la carte ; la marge des figures est déjà nulle (preflight). */
.moko-centre-visuel {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  container-type: inline-size;
}

.home-centres-grid-section .moko-centre-visuel {
  border-radius: 16px;
}

.moko-centre-visuel > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.moko-centre-visuel > img[data-moko-image-theme="sombre"] {
  display: none;
}

html.dark .moko-centre-visuel > img[data-moko-image-theme="clair"] {
  display: none;
}

html.dark .moko-centre-visuel > img[data-moko-image-theme="sombre"] {
  display: block;
}

/* Zone vide de l'image : de 18 % à 82 % de la largeur, le décor restant sur les bords gauche et droit. Les tailles
   suivent la largeur de la figure (de 236 à 677 px sur l'accueil) ; la première déclaration sert de repli. */
.moko-centre-sigle {
  position: absolute;
  inset: 0 18%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0;
  text-align: center;
  pointer-events: none;
}

.moko-centre-sigle strong {
  display: block;
  max-width: 100%;
  color: var(--moko-navy-500, #29235b);
  font-family: var(--font-inter-tight), system-ui, sans-serif;
  font-size: 1.75rem;
  font-size: clamp(1.375rem, 11cqi, 3.5rem);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.02em;
  overflow-wrap: anywhere;
  text-wrap: balance;
}

.moko-centre-sigle[data-sigle-long] strong {
  font-size: 1.125rem;
  font-size: clamp(1rem, 6.2cqi, 2.125rem);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.01em;
}

.moko-centre-sigle small {
  display: block;
  max-width: 100%;
  margin-top: 0.55em;
  color: var(--moko-navy-400, #544f7c);
  font-size: 0.75rem;
  font-size: clamp(0.6875rem, 3.6cqi, 1rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

html.dark .moko-centre-sigle strong {
  color: #ffffff;
}

html.dark .moko-centre-sigle small {
  color: var(--moko-navy-200, #bbb9cb);
}

/* Repère vide du lieu (carte sans lieu du sigle, administrable depuis la section `accueil-centres`) : aucune ligne ni
   marge tant que l'administration ne l'a pas rempli. */
.moko-centre-sigle small:empty {
  display: none;
}

/* Répertoire /sessions, rendu de repli (`pages-sessions.ts`, cartes `.moko-centre-card.is-rich`) : même BANDEAU 3:1 que
   la page servie (`PublicSessionsPage.module.css`), l'accueil gardant 16:10. Les cartes riches fixent la hauteur de leur
   figure (`.moko-centre-card.is-rich figure`, 240 px puis 210 px sous 768 px, spécificité 0,2,1) : la règle du bandeau,
   à trois classes (0,3,0), la surclasse partout, requête étroite comprise, et rend la hauteur au ratio. Aucun arrondi
   propre : la figure occupe toute la largeur d'une carte sans marge intérieure, dont `overflow: hidden` arrondit déjà le
   haut. `cover` ne rogne que le haut et le bas de l'image modèle, fenêtre calée à 29 % de sa hauteur comme sur la page
   servie (centrée, elle coupait le triangle de lecture) ; la zone vide du milieu reste entière. Le bandeau n'a qu'un tiers de sa largeur en hauteur : le sigle court tient en deux lignes au
   plus, le long en trois, et le lieu en une seule (points de suspension au-delà). */
.moko-centre-card.is-rich > .moko-centre-visuel {
  height: auto;
  aspect-ratio: 3 / 1;
}

.moko-centre-card.is-rich > .moko-centre-visuel > img {
  object-position: 50% 29%;
}

/* Le sigle limité en lignes est rogné à son cadre (`overflow: hidden`). Les glyphes d'Inter Tight occupent 1,21 em
   (ascendante 0,969 em, descendante 0,241 em) : avec un interligne de 1,02, ils débordent de 0,095 em en haut et en bas
   de la ligne, et la marge intérieure les rend aux jambages (g, p, y) et aux accents des capitales (É, À) ; 0,05 em
   suffit au sigle long (interligne 1,12). */
.moko-centre-card.is-rich > .moko-centre-visuel > .moko-centre-sigle strong {
  display: -webkit-box;
  overflow: hidden;
  padding-block: 0.1em;
  font-size: clamp(1.25rem, 10cqi, 3.25rem);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.moko-centre-card.is-rich > .moko-centre-visuel > .moko-centre-sigle[data-sigle-long] strong {
  padding-block: 0.05em;
  font-size: clamp(0.9375rem, 5.6cqi, 1.875rem);
  -webkit-line-clamp: 3;
  line-clamp: 3;
}

/* Le lieu (60 caractères admis par l'administration des centres) ne tiendrait pas sur deux lignes sous le sigle : une
   seule ligne, points de suspension au-delà ; le corps de la carte donne la ville et l'adresse en entier. En capitales,
   sous un interligne de 1,2, ses glyphes ne débordent que de 0,005 em : rien n'est rogné. */
.moko-centre-card.is-rich > .moko-centre-visuel > .moko-centre-sigle small {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* Les cartes d'une rangée ont la même hauteur (grille de l'accueil) : le corps prend la place restante et pousse le lien
   d'inscription en bas, comme sur /sessions (revue visuelle du 28 septembre 2026). Colonne flexible au même écart que
   l'ancienne grille à une colonne : le reste ne bouge pas. */
.home-centre-card-body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 12px;
}

.home-centres-grid-section .home-centre-card {
  display: flex;
  flex-direction: column;
}

.home-centre-card-body > .moko-centre-register-link {
  margin-top: auto;
}

.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: 400;
  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;
}

/* Fiche sans adresse d'inscription (12 octobre 2026) : même mention que /sessions, sans apparence de bouton. */
.home-centre-card-body > .moko-centre-register-indisponible {
  margin-top: auto;
  border: 1px dashed var(--color-stroke-2);
  border-radius: 999px;
  padding: 10px 16px;
  color: rgba(17, 23, 18, 0.66);
  font-size: 14px;
  line-height: 1.18;
  text-align: center;
}

html.dark .home-centre-card-body > .moko-centre-register-indisponible {
  border-color: var(--color-stroke-7);
  color: rgba(255, 255, 255, 0.68);
}

/* Demande du propriétaire (12 octobre 2026) : sur mobile, « Centre officiel » et le statut restent sur une même ligne,
   alignés à gauche ; ils ne passent à la ligne que si la carte est trop étroite pour les deux. */
@media (max-width: 767px) {
  .home-centre-card-top {
    justify-content: flex-start;
    gap: 8px;
  }
}

.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: 400;
}

.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, var(--moko-violet-fond, #0f0d21), var(--moko-violet-surface, #15122f) 62%, var(--moko-navy-700, #1c183e));
}

.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-actions .moko-client-link {
  border: 0;
  background: transparent;
  color: var(--color-secondary);
  padding: 8px 4px;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

html.dark .moko-client-actions .moko-client-link {
  color: var(--color-accent);
}

.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] {
  aspect-ratio: 8 / 7;
  overflow: hidden;
  pointer-events: none;
  z-index: 0 !important;
}

[data-moko-hero-visual] img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* En theme sombre, le contour suit l'arrondi applique par le navigateur et
   separe la carte de l'entete sans modifier les couleurs des visuels valides. */
html.dark .moko-page-hero figure img,
html.dark [data-moko-hero-visual] img {
  border: 1px solid rgba(255, 255, 255, 0.22);
}

/* 28 septembre 2026 : un visuel transparent (personnage détouré, WebP avec canal
   alpha, figure marquée data-moko-hero-transparent) n'a ni arrondi, ni ombre,
   ni contour : un cadre trahirait la découpe, comme pour les images des onglets
   « Les quatre épreuves ». Le second sélecteur surclasse le contour blanc du
   thème sombre ci-dessus (spécificité 0,3,2 contre 0,2,2). */
[data-moko-hero-visual][data-moko-hero-transparent] img,
html.dark [data-moko-hero-visual][data-moko-hero-transparent] img {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  outline: 0;
}

/* 4 octobre 2026 : les deux images du fond A (clair et sombre) cèdent la place à
   ses éléments posés un par un (voir le bloc « Héros vivant » plus bas). Les
   règles d'affichage des images, qui verrouillaient la variante sur le thème
   MOKO explicite, n'ont plus d'objet : les couleurs suivent `html.dark` par les
   variables du héros. Les deux WebP restent dans public/images/vitrine/. */

/* Description d'inscription : mêmes teintes opaques que les textes secondaires
   de référence, sans l'alpha du gabarit qui diminuait le contraste. */
[data-moko-signup-description] {
  color: var(--moko-navy-400, #544f7c) !important;
}

html.dark [data-moko-signup-description] {
  color: var(--moko-navy-200, #bbb9cb) !important;
}

/* Héros vivant (4 octobre 2026, vidéo de référence du propriétaire du 2 octobre).
   Le fond animé du 28 septembre (une image entière qui dérivait de 1,5 % en 18 s)
   était presque imperceptible, perdait ses formes latérales sous 1 900 px et ne
   suivait pas le curseur. Ses éléments sont désormais posés un par un sur toute
   la surface du héros, en pourcentages de la section (--x, --y : centre de la
   forme ; --t : diamètre), avec une disposition par largeur. Le script
   (PublicHeroMouvementBridge) ne fait que les déplacer par la propriété
   `translate` : leur place au repos est celle-ci, avec ou sans script.
   Couleurs : codes de la marque (docs/REFERENCE_DESIGN_MOKO.md : rose #d80c60,
   vert #31aa66, marine #29235b, jaune #f8ad33), en triplets pour régler l'alpha ;
   le canevas de la grille lit les mêmes variables. */
[data-moko-home-hero] {
  --moko-hero-rose: 216 12 96;
  --moko-hero-vert: 49 170 102;
  --moko-hero-jaune: 248 173 51;
  --moko-hero-marine: 41 35 91;
  --moko-hero-point: 41 35 91;
  --moko-hero-point-alpha: 0.2;
  --moko-hero-disque-alpha: 0.18;
  --moko-hero-trait: 97 94 131;
  --moko-hero-trait-alpha: 0.55;
}

html.dark [data-moko-home-hero] {
  --moko-hero-point: 187 185 203;
  --moko-hero-point-alpha: 0.28;
  --moko-hero-disque-alpha: 0.48;
  --moko-hero-trait: 187 185 203;
  --moko-hero-trait-alpha: 0.5;
}

[data-moko-hero-ciel],
[data-moko-hero-formes] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* La grille n'existe que dessinée : elle apparaît en fondu quand le script prend la main. */
[data-moko-hero-ciel] {
  opacity: 0;
  transition: opacity 900ms ease;
}

[data-moko-home-hero][data-moko-hero-vivant] [data-moko-hero-ciel] {
  opacity: 1;
}

[data-moko-hero-forme] {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--t);
  height: var(--t);
  margin: calc(var(--t) / -2) 0 0 calc(var(--t) / -2);
  border-radius: 50%;
}

[data-moko-home-hero][data-moko-hero-vivant="anime"] [data-moko-hero-forme] {
  will-change: translate, rotate, scale;
}

[data-moko-hero-forme] > svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

[data-moko-hero-forme="disque-gauche"],
[data-moko-hero-forme="disque-droite"] {
  filter: blur(calc(var(--t) * 0.045));
}

[data-moko-hero-forme="disque-gauche"] {
  background: rgb(var(--moko-hero-rose) / var(--moko-hero-disque-alpha));
}

[data-moko-hero-forme="disque-droite"] {
  background: rgb(var(--moko-hero-marine) / calc(var(--moko-hero-disque-alpha) * 0.75));
}

html.dark [data-moko-hero-forme="disque-droite"] {
  background: rgb(var(--moko-hero-rose) / calc(var(--moko-hero-disque-alpha) * 0.9));
}

[data-moko-hero-forme="disque-vert"] {
  background: rgb(var(--moko-hero-vert) / calc(var(--moko-hero-disque-alpha) * 1.3));
  box-shadow: 0 0 calc(var(--t) * 0.35) rgb(var(--moko-hero-vert) / calc(var(--moko-hero-disque-alpha) * 0.5));
}

[data-moko-hero-forme="disque-jaune"] {
  background: rgb(var(--moko-hero-jaune) / calc(var(--moko-hero-disque-alpha) * 1.4));
  box-shadow: 0 0 calc(var(--t) * 0.35) rgb(var(--moko-hero-jaune) / calc(var(--moko-hero-disque-alpha) * 0.5));
}

[data-moko-hero-forme="pastille-rose"] { background: rgb(var(--moko-hero-rose) / 0.75); }
[data-moko-hero-forme="pastille-verte"] { background: rgb(var(--moko-hero-vert) / 0.75); }
[data-moko-hero-forme="pastille-jaune"] { background: rgb(var(--moko-hero-jaune) / 0.85); }

[data-moko-hero-forme="anneau"],
[data-moko-hero-forme="anneau-petit"] {
  border: 1.5px solid rgb(var(--moko-hero-trait) / var(--moko-hero-trait-alpha));
}

[data-moko-hero-forme="arcs"],
[data-moko-hero-forme="arcs-haut"],
[data-moko-hero-forme="lecture"],
[data-moko-hero-forme="lecture-petit"] {
  border-radius: 0;
  color: rgb(var(--moko-hero-trait) / var(--moko-hero-trait-alpha));
}

/* Disposition au repos. Ordinateur : les grandes formes tiennent les bords, comme sur le fond A validé, et des
   pastilles, anneaux et triangles occupent le haut, le bas et les flancs, hors du couloir du titre. */
[data-moko-hero-forme="disque-gauche"] { --x: -2%; --y: 30%; --t: clamp(240px, 21vw, 560px); }
[data-moko-hero-forme="disque-droite"] { --x: 101%; --y: 46%; --t: clamp(240px, 20vw, 520px); }
[data-moko-hero-forme="disque-vert"] { --x: 6.5%; --y: 66%; --t: clamp(64px, 6vw, 124px); }
[data-moko-hero-forme="disque-jaune"] { --x: 95%; --y: 76%; --t: clamp(44px, 3.4vw, 76px); }
[data-moko-hero-forme="pastille-rose"] { --x: 31%; --y: 10%; --t: 14px; }
[data-moko-hero-forme="pastille-verte"] { --x: 71%; --y: 90%; --t: 18px; }
[data-moko-hero-forme="pastille-jaune"] { --x: 23%; --y: 86%; --t: 12px; }
[data-moko-hero-forme="anneau"] { --x: 77%; --y: 13%; --t: 46px; }
[data-moko-hero-forme="anneau-petit"] { --x: 15.5%; --y: 47%; --t: 26px; }
[data-moko-hero-forme="arcs"] { --x: 0%; --y: 100%; --t: clamp(300px, 22vw, 460px); }
[data-moko-hero-forme="arcs-haut"] { --x: 100%; --y: 0%; --t: clamp(240px, 16vw, 340px); }
[data-moko-hero-forme="lecture"] { --x: 94%; --y: 10%; --t: 46px; }
[data-moko-hero-forme="lecture-petit"] { --x: 40%; --y: 93%; --t: 26px; rotate: -18deg; }

/* Tablette : les formes se resserrent vers les bords pour laisser le titre, plus large que son couloir d'ordinateur. */
@media (max-width: 1023px) {
  [data-moko-hero-forme="disque-gauche"] { --x: -8%; --y: 22%; --t: 300px; }
  [data-moko-hero-forme="disque-droite"] { --x: 106%; --y: 54%; --t: 300px; }
  [data-moko-hero-forme="disque-vert"] { --x: 7%; --y: 70%; --t: 72px; }
  [data-moko-hero-forme="disque-jaune"] { --x: 93%; --y: 84%; --t: 48px; }
  [data-moko-hero-forme="pastille-rose"] { --x: 22%; --y: 8%; }
  [data-moko-hero-forme="anneau"] { --x: 82%; --y: 30%; --t: 38px; }
  [data-moko-hero-forme="anneau-petit"] { --x: 9%; --y: 44%; --t: 22px; }
  [data-moko-hero-forme="arcs"] { --t: 300px; }
  [data-moko-hero-forme="arcs-haut"] { --t: 240px; }
  [data-moko-hero-forme="lecture"] { --x: 90%; --y: 14%; --t: 38px; }
  [data-moko-hero-forme="lecture-petit"] { --x: 50%; --y: 95%; }
}

/* Téléphone : le héros est haut et étroit ; les formes se répartissent sur toute sa hauteur, à moitié hors cadre
   pour les grandes, afin de couvrir le conteneur entier sans passer sous les lignes du titre. */
@media (max-width: 639px) {
  [data-moko-hero-forme="disque-gauche"] { --x: -16%; --y: 30%; --t: 230px; }
  [data-moko-hero-forme="disque-droite"] { --x: 116%; --y: 62%; --t: 240px; }
  [data-moko-hero-forme="disque-vert"] { --x: 4%; --y: 78%; --t: 56px; }
  [data-moko-hero-forme="disque-jaune"] { --x: 94%; --y: 24%; --t: 40px; }
  [data-moko-hero-forme="pastille-rose"] { --x: 30%; --y: 6%; --t: 10px; }
  [data-moko-hero-forme="pastille-verte"] { --x: 82%; --y: 92%; --t: 14px; }
  [data-moko-hero-forme="pastille-jaune"] { --x: 12%; --y: 90%; --t: 10px; }
  [data-moko-hero-forme="anneau"] { --x: 88%; --y: 42%; --t: 30px; }
  [data-moko-hero-forme="anneau-petit"] { --x: 8%; --y: 52%; --t: 20px; }
  [data-moko-hero-forme="arcs"] { --t: 240px; }
  [data-moko-hero-forme="arcs-haut"] { --t: 200px; }
  [data-moko-hero-forme="lecture"] { --x: 92%; --y: 12%; --t: 30px; }
  [data-moko-hero-forme="lecture-petit"] { --x: 60%; --y: 96%; --t: 20px; }
}

/* Étiquettes des épreuves : un curseur et une pastille, comme les curseurs partagés de la référence. Le calque est
   ancré au coin du contenu (le script les place en pixels), entre les personnages (plan 0) et les textes (plan 2). */
[data-moko-home-hero-content] > [data-moko-hero-etiquettes] {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  z-index: 1;
  pointer-events: none;
}

[data-moko-hero-etiquette] {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: flex-start;
  opacity: 0;
  visibility: hidden;
  white-space: nowrap;
  transition: opacity 500ms ease, visibility 0s linear 500ms;
}

[data-moko-home-hero][data-moko-hero-vivant="anime"] [data-moko-hero-etiquette][data-visible] {
  opacity: 1;
  visibility: visible;
  transition: opacity 500ms ease, visibility 0s;
}

/* Sur la moitié gauche du héros, la pastille passe à gauche de la flèche, retournée en miroir (le script l'indique) :
   elle s'étend vers le bord, jamais vers le titre. */
[data-moko-hero-etiquette][data-retournee] {
  flex-direction: row-reverse;
}

[data-moko-hero-etiquette][data-retournee] > svg {
  transform: scaleX(-1);
}

[data-moko-hero-etiquette][data-retournee] > span {
  margin: 12px -2px 0 0;
}

[data-moko-hero-etiquette] > svg {
  flex: none;
  width: 16px;
  height: 16px;
  fill: var(--moko-hero-etiquette-fond);
  stroke: #ffffff;
  stroke-width: 1.2;
  stroke-linejoin: round;
  filter: drop-shadow(0 1px 1.5px rgb(21 18 47 / 0.3));
}

[data-moko-hero-etiquette] > span,
[data-moko-hero-vous] {
  padding: 3px 10px 4px;
  border-radius: 9999px;
  font-size: 13px;
  line-height: 18px;
  font-weight: 500;
  white-space: nowrap;
}

[data-moko-hero-etiquette] > span {
  margin: 12px 0 0 -2px;
  background: var(--moko-hero-etiquette-fond);
  color: var(--moko-hero-etiquette-texte);
  box-shadow: 0 6px 16px rgb(21 18 47 / 0.18);
}

[data-moko-hero-etiquette="1"] { --moko-hero-etiquette-fond: var(--moko-rouge-accent, #d80c60); --moko-hero-etiquette-texte: #ffffff; }
[data-moko-hero-etiquette="2"] { --moko-hero-etiquette-fond: #31aa66; --moko-hero-etiquette-texte: var(--moko-violet-surface, #15122f); }
[data-moko-hero-etiquette="3"] { --moko-hero-etiquette-fond: #f8ad33; --moko-hero-etiquette-texte: var(--moko-violet-surface, #15122f); }
[data-moko-hero-etiquette="4"] { --moko-hero-etiquette-fond: var(--moko-navy-500, #29235b); --moko-hero-etiquette-texte: #ffffff; }

html.dark [data-moko-hero-etiquette] > span {
  box-shadow: 0 6px 18px rgb(0 0 0 / 0.35);
}

html.dark [data-moko-hero-etiquette="4"] > span {
  box-shadow: 0 0 0 1px rgb(255 255 255 / 0.35), 0 6px 18px rgb(0 0 0 / 0.35);
}

/* « Vous » suit le curseur du visiteur, au-dessus du contenu, sans jamais intercepter un clic. */
[data-moko-hero-vous] {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 30;
  pointer-events: none;
  background: #ffffff;
  color: var(--moko-violet-surface, #15122f);
  box-shadow: 0 0 0 1px rgb(21 18 47 / 0.12), 0 6px 16px rgb(21 18 47 / 0.18);
  opacity: 0;
  visibility: hidden;
  transition: opacity 200ms ease, visibility 0s linear 200ms;
}

[data-moko-home-hero][data-moko-hero-vivant="anime"] [data-moko-hero-vous][data-visible] {
  opacity: 1;
  visibility: visible;
  transition: opacity 200ms ease, visibility 0s;
}

/* Téléphone : le nom entier de l'épreuve cacherait le titre ; l'étiquette porte son sigle (CO, CE, EO, EE). */
@media (max-width: 639px) {
  [data-moko-hero-etiquette] > span {
    padding: 2px 8px 3px;
    font-size: 0;
    line-height: 0;
  }

  [data-moko-hero-etiquette] > span::after {
    content: attr(data-court);
    font-size: 11px;
    line-height: 16px;
    font-weight: 600;
    letter-spacing: 0.02em;
  }
}

@media (min-width: 1280px) {
  /* La rotation agrandit la boite visuelle au-dela de la largeur déclarée.
     Les retraits ci-dessous gardent donc les quatre coins dans la fenêtre. */
  [data-moko-hero-visual="1"] { left: 32px !important; }
  [data-moko-hero-visual="2"] { left: 12px !important; }
  [data-moko-hero-visual="3"] { right: 32px !important; }
  [data-moko-hero-visual="4"] { right: 16px !important; }
}

@media (min-width: 1280px) and (max-width: 1535px) {
  [data-moko-hero-visual="1"],
  [data-moko-hero-visual="2"],
  [data-moko-hero-visual="4"] {
    width: 150px !important;
  }

  [data-moko-hero-visual="3"] {
    width: 145px !important;
  }
}

@media (min-width: 1536px) {
  /* Sur les écrans larges, les quatre cartes s'écartent progressivement du
     couloir du titre. Le déplacement s'arrête à 96 px, conformément aux
     marqueurs validés sur la capture de référence du 29 août 2026. */
  [data-moko-home-hero-content] {
    --moko-hero-outward-shift: clamp(0px, calc((100vw - 1536px) / 4), 96px);
  }

  [data-moko-hero-visual="1"] { left: calc(8px - var(--moko-hero-outward-shift)) !important; }
  [data-moko-hero-visual="2"] {
    bottom: auto !important;
    left: calc(0px - var(--moko-hero-outward-shift)) !important;
    top: 330px !important;
  }
  [data-moko-hero-visual="3"] { right: calc(32px - var(--moko-hero-outward-shift)) !important; }
  [data-moko-hero-visual="4"] {
    bottom: auto !important;
    right: calc(0px - var(--moko-hero-outward-shift)) !important;
    top: 330px !important;
  }
}

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

  /* La zone 640-1279 px ne possède pas les couloirs latéraux du desktop.
     Les cartes hautes restent au-dessus du titre et les cartes basses dans
     les angles libres, sans recouvrir les lignes ni les actions. */
  /* 5 octobre 2026 : les cartes basses se posent de part et d'autre de la dernière ligne du titre ; le script du héros
     (`public-hero-mouvement.ts`) lit la place libre et pose les variables. Les valeurs de repli sont les anciennes.
     Comme sur téléphone, elles sont un peu plus petites que les cartes hautes : elles tiennent entre deux lignes. */
  [data-moko-hero-visual="2"],
  [data-moko-hero-visual="4"] { width: 66px !important; }
  [data-moko-hero-visual="1"] { left: 8px !important; top: -40px !important; }
  [data-moko-hero-visual="2"] { bottom: auto !important; left: var(--moko-hero-ce-gauche, 8px) !important; top: var(--moko-hero-ce-haut, 350px) !important; }
  [data-moko-hero-visual="3"] { right: 8px !important; top: -30px !important; }
  [data-moko-hero-visual="4"] { bottom: auto !important; right: var(--moko-hero-ee-droite, 8px) !important; top: var(--moko-hero-ee-haut, 330px) !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;
  }

  [data-moko-hero-visual="2"],
  [data-moko-hero-visual="4"] {
    width: 56px !important;
  }

  [data-moko-home-hero-content] > .badge {
    margin-bottom: 32px !important;
  }

  /* Sur mobile, les quatre cartes forment une seule bande decorative entre
     l'entete et le titre. Les cartes hautes restent entierement sous la barre
     de navigation. Un leger recouvrement vertical entre les deux paires est
     admis : les cartes sont laterales et ne masquent aucun contenu. */
  [data-moko-hero-visual="1"] {
    left: 6px !important;
    top: -36px !important;
    z-index: 1 !important;
  }
  /* 5 octobre 2026, demande du propriétaire : CE et EE descendent de part et d'autre de la dernière ligne du titre
     (« avec méthode. »), posés par le script du héros ; sans lui, ils gardent leur place sous CO et EO. */
  [data-moko-hero-visual="2"] {
    bottom: auto !important;
    left: var(--moko-hero-ce-gauche, max(25px, calc(50% - 140px))) !important;
    top: var(--moko-hero-ce-haut, 0px) !important;
  }
  [data-moko-hero-visual="3"] {
    right: 6px !important;
    top: -36px !important;
    z-index: 1 !important;
  }
  [data-moko-hero-visual="4"] {
    bottom: auto !important;
    right: var(--moko-hero-ee-droite, max(25px, calc(50% - 140px))) !important;
    top: var(--moko-hero-ee-haut, 2px) !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: var(--moko-violet-fond, #0f0d21);
}

.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(41, 35, 91, 0.66);
  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 {
  
  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-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;
}

/* Assistant public : saisie Shopify et surfaces du chat apprenant validé.
   Les captures claire/sombre du 19 septembre fixent les deux types de message. */
.moko-chat {
  position: fixed; left: 22px; right: auto;
  bottom: calc(22px + var(--moko-chat-consentement, 0px)); z-index: 9998;
  --moko-chat-fond: var(--color-background-1, #fff); --moko-chat-encre: var(--moko-navy-500, #29235b); --moko-chat-ligne: var(--color-stroke-2, #dddce5);
  color: var(--moko-chat-encre);
}
.moko-chat-toggle {
  display: inline-flex; align-items: center; gap: 10px; min-height: 54px;
  border: 1px solid var(--moko-navy-500, #29235b); border-radius: 999px;
  background: var(--moko-navy-500, #29235b); color: #fff;
  box-shadow: 0 12px 32px #0003; padding: 8px 16px 8px 8px; font-weight: 400;
}
.moko-chat-toggle-icon { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background: #fff; color: var(--moko-navy-500, #29235b); }
.moko-chat-toggle-label { color: inherit; }
.moko-chat-non-lu { position: absolute; top: -4px; right: -4px; width: 14px; height: 14px; border: 2px solid #fff; border-radius: 50%; background: var(--moko-rose-500, #d00b51); }
.moko-chat-panel {
  position: absolute; left: 0; right: auto; bottom: 70px; display: flex;
  width: min(390px, calc(100vw - 28px)); height: min(680px, calc(var(--moko-chat-hauteur, 100dvh) - 110px - var(--moko-chat-consentement, 0px)));
  max-height: calc(var(--moko-chat-hauteur, 100dvh) - 32px); min-height: 0;
  flex-direction: column; gap: var(--moko-space-4, 16px); overflow: hidden;
  border: 1px solid var(--moko-chat-ligne); border-radius: 22px;
  background: var(--moko-chat-fond); box-shadow: 0 12px 40px #0003; padding: 16px;
}
.moko-chat-panel.hidden { display: none; }
.moko-chat-header { display: flex; align-items: center; gap: var(--moko-space-4, 16px); flex-shrink: 0; }
.moko-chat-connexion { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; border-radius: 999px; padding: 8px 14px; background: var(--moko-navy-500, #29235b); color: #fff !important; font-size: 14px; white-space: nowrap; }
.moko-chat-close, .moko-chat-son {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 44px; height: 44px; min-height: 44px; padding: 0; border-radius: 50%;
  border: 1px solid var(--moko-chat-ligne); background: var(--moko-chat-fond); color: var(--moko-chat-encre); box-shadow: 0 3px 8px #0001;
}
.moko-chat-close { margin-left: auto; font-size: 24px; line-height: 1; }
.moko-chat-son svg { width: 20px; height: 20px; }
.moko-chat-son[aria-pressed="true"] { opacity: .65; box-shadow: inset 0 0 0 2px currentColor; }
.moko-chat-thread { display: flex; flex: 1; min-height: 0; flex-direction: column; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; gap: var(--moko-space-4, 16px); background: color-mix(in srgb, var(--moko-navy-500, #29235b) 4%, transparent); border: 1px solid var(--moko-chat-ligne); border-radius: 12px; padding: var(--moko-space-3, 12px); }
.moko-chat-messages { display: flex; min-height: 0; flex-direction: column; flex-shrink: 0; gap: var(--moko-space-4, 16px); }
.moko-chat-message { max-width: 100%; color: var(--moko-chat-encre); overflow-wrap: anywhere; flex-shrink: 0; }
.moko-chat-message strong { display: block; margin: 0 0 8px; color: inherit; font-size: 14px; font-weight: 600; }
.moko-chat-message p { margin: 0; color: inherit; font-size: 16px; line-height: 1.5; white-space: pre-wrap; }
.moko-chat-message.is-assistant { align-self: stretch; background: var(--color-white, #fff); border: 1px solid var(--moko-chat-ligne); border-radius: 14px 14px 14px 4px; padding: 12px 14px; }
.moko-chat-message.is-user { align-self: flex-end; max-width: 88%; border-radius: 14px 14px 4px 14px; padding: 12px 14px; background: var(--moko-navy-500, #29235b); color: #fff; }
.moko-chat-message.is-muted { opacity: .8; }
.moko-chat-suggestions { display: grid; gap: var(--moko-space-2, 8px); margin: var(--moko-space-4, 16px) 0 0; padding-left: 20px; }
.moko-chat-suggestions a,
.moko-chat-message p a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.moko-chat-status, .moko-chat-error, .moko-chat-empty { flex-shrink: 0; margin: 0; font-size: 14px; line-height: 1.45; }
.moko-chat-status { display: flex; align-items: center; gap: 8px; color: var(--moko-chat-encre); }
.moko-chat-status p { margin: 0; color: inherit; font-size: inherit; }
.moko-chat-status span { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: moko-chat-pulse 900ms ease-in-out infinite; }
.moko-chat-status span:nth-child(2) { animation-delay: 150ms; }
.moko-chat-status span:nth-child(3) { animation-delay: 300ms; }
.moko-chat-error { color: #8f1c13; background: #fff0ee; padding: 12px; border-radius: 12px; }
.moko-chat-empty { color: var(--moko-chat-encre); }
.moko-chat-status[hidden], .moko-chat-error[hidden], .moko-chat-empty[hidden], .moko-chat-non-lu[hidden] { display: none; }
.moko-chat-form { display: flex; align-items: flex-end; gap: 8px; flex-shrink: 0; border: 1.5px solid var(--moko-chat-encre); border-radius: 28px; padding: 4px; box-shadow: 0 3px 5px #0001; }
.moko-chat-form textarea { flex: 1; min-width: 0; min-height: 44px; max-height: 96px; resize: none; border: 0; border-radius: 24px; background: transparent; color: var(--moko-chat-encre); padding: 10px 8px 10px 12px; font: inherit; font-size: 16px; line-height: 24px; outline: none; }
.moko-chat-form textarea::placeholder { color: var(--moko-chat-encre); opacity: .65; }
.moko-chat-form:focus-within { outline: 2px solid var(--moko-navy-500, #29235b); outline-offset: 2px; }
.moko-chat-form button { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 44px; height: 44px; min-height: 44px; border: 0; border-radius: 50%; background: #000; color: #fff; padding: 0; font-weight: 400; }
.moko-chat-form button svg { width: 24px; height: 24px; transform: rotate(-90deg); }
.moko-chat-form button:disabled { opacity: 0; pointer-events: none; }
.moko-chat-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 0; flex-shrink: 0; }
.moko-chat-actions a { color: var(--moko-chat-encre); font-size: 12px; font-weight: 400; text-decoration: underline; text-underline-offset: 3px; }
.moko-chat-actions span { color: var(--moko-chat-encre); opacity: .65; font-size: 12px; }
.moko-chat button:focus-visible, .moko-chat a:focus-visible { outline: 3px solid #f8ad33; outline-offset: 3px; }
html.dark .moko-chat { --moko-chat-fond: var(--moko-violet-surface, #15122f); --moko-chat-encre: #fff; --moko-chat-ligne: var(--moko-violet-bordure-sombre, #433d6f); }
html.dark .moko-chat-panel { box-shadow: 0 12px 40px #0007; }
html.dark .moko-chat-message.is-assistant { background: var(--moko-navy-700, #1c183e); color: #fff; }
html.dark .moko-chat-empty { color: #fff; }
html.dark .moko-chat-connexion { background: #fff; color: #29235b !important; }
html.dark .moko-chat-form:focus-within { outline-color: #f8ad33; }
body:has([data-moko-payment-form]) .moko-chat { display: none; }
@keyframes moko-chat-pulse { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .moko-chat-status span { animation: none; } }
@media (max-width: 520px) {
  .moko-chat { left: 14px; bottom: calc(14px + var(--moko-chat-consentement, 0px)); }
  .moko-chat-panel { position: fixed; left: 10px; right: auto; bottom: auto;
    top: calc(var(--moko-chat-haut, 0px) + 8px + env(safe-area-inset-top, 0px));
    width: calc(100vw - 20px);
    height: calc(var(--moko-chat-hauteur, 100dvh) - 16px - var(--moko-chat-consentement, 0px) - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    max-height: none; padding: 14px; }
  .moko-chat-toggle-label { display: none; }
  .moko-chat-toggle { min-width: 56px; padding: 8px; }
  .moko-chat.is-open .moko-chat-toggle { visibility: hidden; }
  html.moko-chat-ouvert [data-moko-theme-toggle] { visibility: hidden; }
}

/* Lanceur du chat public : avatar animé de la mascotte MOKO (4 octobre 2026), à la taille du bouton d'origine, et
   bulle qui appelle le visiteur. Le libellé « Moko » reste le nom accessible du bouton, masqué à l'écran. */
.moko-chat-toggle.moko-chat-toggle-avatar {
  position: relative; justify-content: center; gap: 0; width: 60px; height: 60px; min-width: 60px; min-height: 60px; padding: 0;
  border: 3px solid var(--moko-navy-500, #29235b); background: #fff;
  box-shadow: 0 12px 30px rgb(15 13 33 / 28%);
  transition: transform 260ms cubic-bezier(.22, 1, .36, 1), box-shadow 260ms cubic-bezier(.22, 1, .36, 1);
}
.moko-chat-toggle.moko-chat-toggle-avatar:hover { transform: translateY(-2px) scale(1.04); box-shadow: 0 16px 36px rgb(15 13 33 / 34%); }
.moko-chat-toggle.moko-chat-toggle-avatar:focus-visible { outline: 3px solid #f8ad33; outline-offset: 3px; }
.moko-chat-toggle-avatar .moko-chat-avatar { width: 100%; height: 100%; overflow: hidden; background: #fff; }
.moko-chat-toggle-avatar .moko-chat-avatar video { display: block; width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); }
.moko-chat-toggle-avatar .moko-chat-toggle-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
html.dark .moko-chat-toggle.moko-chat-toggle-avatar { border-color: #fff; box-shadow: 0 12px 30px rgb(0 0 0 / 45%); }
.moko-chat-bulle {
  position: absolute; left: 74px; bottom: 8px; width: max-content; max-width: min(250px, calc(100vw - 110px));
  padding: 10px 14px; border-radius: 16px 16px 16px 4px; background: #fff; color: var(--moko-navy-500, #29235b);
  box-shadow: 0 12px 30px rgb(15 13 33 / 22%); font-size: 14px; line-height: 1.35; cursor: pointer;
  opacity: 0; transform: translateX(-8px) scale(.96); transform-origin: left bottom;
  transition: opacity 340ms cubic-bezier(.22, 1, .36, 1), transform 340ms cubic-bezier(.22, 1, .36, 1);
}
.moko-chat-bulle.is-visible { opacity: 1; transform: none; }
.moko-chat-bulle[hidden], .moko-chat.is-open .moko-chat-bulle { display: none; }
html.dark .moko-chat-bulle { background: var(--moko-violet-surface, #1d1940); color: #fff; box-shadow: 0 12px 30px rgb(0 0 0 / 45%); }
.moko-chat-message.is-accueil p { color: inherit; }
@media (prefers-reduced-motion: reduce) {
  .moko-chat-bulle, .moko-chat-toggle.moko-chat-toggle-avatar { transition: none; }
  .moko-chat-toggle.moko-chat-toggle-avatar:hover { transform: none; }
}
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: var(--moko-navy-500, #29235b) !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, var(--moko-navy-500, #29235b) 66%, transparent) !important;
}

html.dark section[class~="bg-background-3"]:not([class*="dark:bg-"])
  .badge:not(:where([class*="dark:bg-"], [class*="dark:bg-"] *)) {
  color: var(--moko-navy-500, #29235b) !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: var(--moko-navy-500, #29235b) !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, var(--moko-navy-500, #29235b) 66%, 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, var(--moko-navy-500, #29235b) 66%, 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;
}

/* Le formulaire de versement est un bloc autonome. Son bouton est séparé des
   champs par l'écart canonique, sans marge ad hoc sur le contrôle lui-même. */
.moko-client-app .moko-client-parrainage [data-parrainage-versement] {
  display: grid;
  gap: var(--moko-space-4);
}

/* 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;
  }
}

/* --------------------------------------------------------------------------
   A propos : processus en quatre temps

   Le composant reprend le DOM et le mouvement du bloc process-cards Nexsas.
   Les utilitaires arbitraires et les variantes data-* de ce gabarit ne sont
   toutefois pas tous présents dans la feuille vendor compilée. Ces règles
   verrouillent donc les dimensions et les états réellement observés, sans
   modifier main.css ni remplacer l'animation GSAP d'origine.
   -------------------------------------------------------------------------- */
[data-cms-emplacement="a-propos-processus"] [data-process-deck] {
  min-height: 472px;
}

[data-cms-emplacement="a-propos-processus"] [data-process-card] {
  min-height: 472px;
}

[data-cms-emplacement="a-propos-processus"] [data-process-step] {
  background: transparent;
  border-color: var(--color-stroke-3, #d7dde5);
  color: color-mix(in srgb, var(--color-secondary, #29235b) 72%, transparent);
}

[data-cms-emplacement="a-propos-processus"] [data-process-step][data-item="active"],
[data-cms-emplacement="a-propos-processus"] [data-process-step][data-item="completed"] {
  background: var(--color-primary-500, #29235b);
  border-color: transparent;
  color: var(--color-accent, #ffffff);
}

[data-cms-emplacement="a-propos-processus"] [data-process-line-fill] {
  background: linear-gradient(
    var(--moko-process-direction, to bottom),
    transparent,
    var(--color-primary-500, #29235b)
  );
}

[data-cms-emplacement="a-propos-processus"] [data-process-timeline].flex-row [data-process-line-fill] {
  --moko-process-direction: to right;
}

html.dark [data-cms-emplacement="a-propos-processus"] [data-process-step] {
  border-color: var(--moko-navy-300, #8986a5);
  color: var(--color-accent, #ffffff);
}

html.dark [data-cms-emplacement="a-propos-processus"] [data-process-step][data-item="active"],
html.dark [data-cms-emplacement="a-propos-processus"] [data-process-step][data-item="completed"] {
  background: var(--color-primary-400, #544f7c);
  border-color: transparent;
  color: var(--color-accent, #ffffff);
}

html.dark [data-cms-emplacement="a-propos-processus"] [data-process-line-fill] {
  background: linear-gradient(
    var(--moko-process-direction, to bottom),
    transparent,
    var(--color-primary-400, #544f7c)
  );
}

@media (min-width: 768px) {
  [data-cms-emplacement="a-propos-processus"] [data-process-image] {
    height: 464px;
  }
}

@media (max-width: 767px) {
  [data-cms-emplacement="a-propos-processus"] [data-process-deck],
  [data-cms-emplacement="a-propos-processus"] [data-process-card] {
    min-height: 472px;
  }

  [data-cms-emplacement="a-propos-processus"] [data-process-image] {
    height: auto;
  }
}

/* Sur une surface violette sombre, le navy reste reserve aux aplats d'action.
   Les informations, pictogrammes et progressions utilisent le blanc afin de
   ne jamais superposer deux teintes violettes de contraste insuffisant. */
html.dark body .dark\:stroke-accent,
html.dark body .dark\:stroke-stroke-8 {
  stroke: #ffffff !important;
}

html:not(.dark) body .stroke-stroke-3 {
  stroke: var(--moko-navy-500, #29235b) !important;
}

html.dark body .dark\:bg-secondary .fill-primary-500 {
  fill: #ffffff !important;
}

/* Les icones X du gabarit de parrainage portent un fill hexadecimal en ligne.
   Sur les cartes violettes sombres, ce pictogramme suit le premier plan blanc. */
html.dark body .dark\:bg-secondary path[fill="#12161F"] {
  fill: #ffffff !important;
}

html.dark .moko-client-app .moko-client-progress-track span {
  background: #ffffff;
}

/* Les tableaux issus du contrat Markdown gardent la typographie du document
   long. Le conteneur ajoute seulement le defilement horizontal requis sur un
   petit ecran, sans toucher aux mesures des pages sans tableau. */
.moko-markdown-table {
  max-width: 100%;
  overflow-x: auto;
  margin-block: 16px;
}

.moko-markdown-table table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
}

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

@media (max-width: 560px) {
  /* Le document editorial reste entier et lisible : chaque ligne de tableau
     devient une fiche dont les libelles viennent des vrais en-tetes Markdown. */
  [data-cms-document="true"] .moko-markdown-table {
    overflow-x: visible;
  }

  [data-cms-document="true"] .moko-markdown-table table {
    display: block;
    min-width: 0;
  }

  [data-cms-document="true"] .moko-markdown-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  [data-cms-document="true"] .moko-markdown-table tbody {
    display: grid;
    gap: 12px;
  }

  [data-cms-document="true"] .moko-markdown-table tr {
    display: grid;
    gap: 0;
    border: 1px solid var(--color-stroke-2);
    border-radius: 16px;
    padding: 12px;
  }

  [data-cms-document="true"] .moko-markdown-table td {
    display: grid;
    grid-template-columns: minmax(104px, 38%) minmax(0, 1fr);
    gap: 12px;
    overflow-wrap: break-word;
    border: 0;
    padding: 8px 0;
  }

  [data-cms-document="true"] .moko-markdown-table td + td {
    border-top: 1px solid var(--color-stroke-2);
  }

  [data-cms-document="true"] .moko-markdown-table td::before {
    content: attr(data-label);
    color: var(--color-secondary);
    font-weight: 600;
  }

  html.dark [data-cms-document="true"] .moko-markdown-table tr,
  html.dark [data-cms-document="true"] .moko-markdown-table td + td {
    border-color: var(--color-stroke-7);
  }

  html.dark [data-cms-document="true"] .moko-markdown-table td::before {
    color: var(--color-accent);
  }
}

.privacy-policy {
  border: 1px solid var(--color-stroke-2, #e3e7ed);
  border-radius: 20px;
  background: var(--color-background-2, #f8f8fa);
  color: var(--moko-navy-500, #29235b);
  padding: clamp(20px, 3vw, 32px);
}

.privacy-policy :is(h1, h2, h3, p, li, th, td, strong) {
  color: inherit;
}

.privacy-policy > * + * {
  margin-top: 24px;
}

.privacy-policy li::before {
  background: var(--moko-navy-500, #29235b);
}

html.dark .privacy-policy {
  border-color: var(--color-stroke-7);
  background: var(--color-background-7);
  color: #ffffff;
}

html.dark .privacy-policy li::before {
  background: #ffffff;
}

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

/* Le hero À propos est une surface autonome du gabarit. Il reste distinct du
   fond de page dans les deux thèmes et conserve les jetons de surface validés. */
[data-cms-emplacement="a-propos-hero"] {
  background: var(--color-background-2);
}

html.dark [data-cms-emplacement="a-propos-hero"] {
  background: var(--color-background-7);
}

/* Le panneau CTA est un grand conteneur autonome. Dans le thème sombre, la
   classe vendor `dark:bg-background-8` le confondait avec le fond de page. */
html.dark [data-cms-emplacement="a-propos-commencer"] [data-about-template-panel="cta"] {
  border: 1px solid var(--color-stroke-7);
  background: var(--color-background-7) !important;
}

/* Le panneau d'appel à l'action est sombre dans les deux thèmes. Son action
   principale utilise donc la surface claire dédiée, avec l'encre navy. */
[data-cms-emplacement="a-propos-commencer"] [data-about-template-panel="cta"] .btn {
  border-color: var(--color-background-1) !important;
  background: var(--color-background-1) !important;
  color: var(--moko-navy-500, #29235b) !important;
}

[data-cms-emplacement="a-propos-commencer"] [data-about-template-panel="cta"] .btn > span {
  color: inherit !important;
}

[data-cms-emplacement="a-propos-commencer"] [data-about-template-panel="cta"] .btn:hover,
[data-cms-emplacement="a-propos-commencer"] [data-about-template-panel="cta"] .btn:focus-visible {
  border-color: var(--color-ns-yellow, #f2c14e) !important;
  background: var(--color-ns-yellow, #f2c14e) !important;
  color: var(--moko-navy-500, #29235b) !important;
}

[data-cms-emplacement="a-propos-commencer"] [data-about-template-panel="cta"] .btn:hover > span,
[data-cms-emplacement="a-propos-commencer"] [data-about-template-panel="cta"] .btn:focus-visible > span {
  color: inherit !important;
}

/* Les quatre modules de l'accueil conservent le rapport mesuré de leur boîte,
 * indépendamment du fichier CMS. Les deux familles ne sont pas interchangeables. */
#modules-epreuves [data-moko-module-visual] {
  flex: 0 0 auto;
}

#modules-epreuves [data-moko-module-visual="comprehension-orale"],
#modules-epreuves [data-moko-module-visual="comprehension-ecrite"] {
  aspect-ratio: 7 / 6;
}

#modules-epreuves [data-moko-module-visual="expression-orale"],
#modules-epreuves [data-moko-module-visual="expression-ecrite"] {
  aspect-ratio: 3 / 1;
}

#modules-epreuves [data-moko-module-visual] img {
  width: 100%;
  height: 100% !important;
  object-fit: contain !important;
}

/* Les modules portent désormais un vrai canal alpha. Une bordure sur la balise
 * image recréerait un rectangle artificiel autour du sujet détouré. */
html.dark #modules-epreuves [data-moko-image-theme="sombre"] {
  border: 0;
}
/*
 * Les cartes Conseils utilisent des images chargees en differe. Sans hauteur
 * reservee, leur figure peut rester a 0 px et ne jamais entrer dans la zone de
 * chargement. Le rapport historique est conserve avant et apres le chargement.
 */
.moko-home-guide-figure {
  aspect-ratio: 818 / 521;
  min-height: 220px;
  width: 100%;
}

.moko-home-guide-figure > img {
  display: block;
  height: 100%;
  min-height: inherit;
  width: 100%;
}
/* Checkout : mêmes blocs MOKO, regroupés selon le parcours choisi par le propriétaire.
   Les marques officielles restent intactes sur leur réserve blanche dans les deux thèmes. */
[data-moko-checkout] .moko-checkout-heading,
[data-moko-checkout] .moko-checkout-card,
[data-moko-checkout] .moko-checkout-summary,
[data-moko-checkout] .moko-checkout-section { display: grid; gap: var(--moko-block-gap); min-width: 0; }
[data-moko-checkout] .moko-checkout-heading { margin-bottom: var(--moko-page-section-gap); justify-items: start; }
[data-moko-checkout] .moko-checkout-heading h1 { font-size: var(--text-heading-3); }
[data-moko-checkout] p { margin: 0; color: var(--color-secondary); }
html.dark [data-moko-checkout] p { color: var(--color-accent); }
[data-moko-checkout] .moko-checkout-grid { gap: var(--moko-page-section-gap); }
[data-moko-checkout] .moko-checkout-card,
[data-moko-checkout] .moko-checkout-summary { padding: var(--moko-card-padding); }
[data-moko-checkout] .moko-checkout-section + .moko-checkout-section { border-top: 1px solid var(--color-stroke-2); padding-top: var(--moko-page-section-gap); }
html.dark [data-moko-checkout] .moko-checkout-section + .moko-checkout-section { border-color: var(--color-stroke-7); }
.moko-checkout-section-heading { display: flex; align-items: center; justify-content: space-between; gap: var(--moko-block-gap); }
.moko-checkout-section-heading a { font-size: var(--text-tagline-2); white-space: nowrap; text-decoration: underline; }
/* 11 octobre 2026 : « Modifier » (facturation) et « Ajouter un code promotionnel » reprennent le lien « Se connecter ». */
[data-moko-checkout] .moko-checkout-lien { justify-self: start; min-height: 24px; padding: 0; border: 0; background: none; color: inherit; font: inherit; font-size: var(--text-tagline-2); white-space: nowrap; text-decoration: underline; cursor: pointer; }
html.dark [data-moko-checkout] .moko-checkout-lien { color: #ffffff; }
[data-moko-checkout] .moko-checkout-lien:focus-visible { outline: 3px solid var(--color-ns-yellow); outline-offset: 3px; }
/* Le montant ne s'écrit qu'une fois, dans Total : ce bloc garde la facturation et la précision fiscale. */
[data-moko-checkout] .moko-prix-local-detail { margin-block: 0; }
[data-moko-checkout] .moko-prix-local-detail > strong { display: none; }
/* Sans champ de contact à montrer (cas courant), l'emplacement du compte ne laisse pas de blanc sous sa phrase. */
[data-moko-checkout] [data-payment-account-inline]:not(:has(p, fieldset, input, button, a)) { display: none; }
.moko-payment-quick { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--moko-space-3); align-items: start; }
/* 11 octobre 2026 : une seule colonne. Les boutons natifs (Apple Pay, Google Pay côte à côte) prennent toute la largeur et
   PayPal se place dessous : le SDK mesure dès l'ouverture la largeur qu'il garde, plus aucun bouton rogné par son voisin. */
.moko-payment-quick [data-payment-wallet-slot] { min-width: 0; grid-column: 1 / -1; }
/* Le SDK peut mesurer son emplacement sans réserver de colonne avant son état prêt. */
.moko-payment-quick [data-payment-wallet-slot]:not([data-payment-wallet-ready="true"]) { position: absolute; inset: 0 0 auto 0; visibility: hidden; pointer-events: none; }
.moko-payment-quick-choice,
html.dark .moko-payment-quick-choice { display: flex; align-items: center; justify-content: center; width: 100%; min-width: 0; height: 48px; padding: var(--moko-space-2) var(--moko-space-3); border: 1px solid transparent; border-radius: 12px; background: #ffc439; color: #003087; cursor: pointer; }
.moko-payment-quick-choice img { width: 108px; height: 28px; flex: 0 0 auto; object-fit: contain; background: transparent; border-radius: 0; padding: 0; }
.moko-payment-quick-choice:hover:not(:disabled) { background: #f2ba36; }
.moko-payment-quick-choice:disabled { cursor: wait; }
/* La zone d'erreur reste hors des deux colonnes et garde sa place, même vide. */
.moko-payment-region-notice { min-height: 48px; font-size: 14px; line-height: 24px; color: #a32121; }
html.dark .moko-payment-region-notice { color: #ffb4b4; }
[data-moko-checkout] select.auth-form-input { min-height: 48px; }
.moko-payment-quick-choice:focus-visible,
[data-moko-checkout] .moko-payment-method:focus-within { outline: 3px solid var(--color-ns-yellow); outline-offset: 3px; }
[data-moko-checkout] .moko-payment-methods { margin: 0; gap: var(--moko-space-3); }
[data-moko-checkout] .moko-payment-method { padding: var(--moko-space-3); gap: var(--moko-space-3); min-height: 64px; }
[data-moko-checkout] .moko-payment-method img { padding: 4px; border-radius: 8px; background: white; filter: none; }
[data-moko-checkout] .moko-payment-method:hover,
[data-moko-checkout] .moko-payment-method.is-selected { background: var(--color-background-3); }
html.dark [data-moko-checkout] .moko-payment-method:hover,
html.dark [data-moko-checkout] .moko-payment-method.is-selected { background: var(--color-background-8); border-color: var(--color-primary-400); }
[data-moko-checkout] .moko-payment-method small:empty,
[data-moko-checkout] .moko-payment-method b:empty { display: none; }
[data-moko-checkout] [data-payment-family] legend { font-weight: 500; font-size: var(--text-tagline-2); color: var(--color-secondary); }
html.dark [data-moko-checkout] [data-payment-family] legend { color: white; }
[data-moko-checkout] .moko-payment-dynamic { display: grid; gap: var(--moko-space-3); margin: 0; padding: var(--moko-space-4); }
[data-moko-checkout] .moko-summary-line,
[data-moko-checkout] .moko-summary-total { margin: 0; padding-block: var(--moko-space-3); gap: var(--moko-space-4); }
[data-moko-checkout] .moko-summary-line strong,
[data-moko-checkout] .moko-summary-total strong { text-align: right; max-width: 65%; }
[data-moko-checkout] .moko-checkout-note { margin: 0; display: grid; gap: var(--moko-space-3); padding: var(--moko-space-4); }
[data-moko-checkout] .moko-checkout-note p { margin: 0; }
.moko-checkout-assurance { font-size: var(--text-tagline-2); text-align: center; }
.moko-checkout-transfer summary { cursor: pointer; min-height: 44px; padding-block: var(--moko-space-3); }
[data-moko-checkout] [hidden] { display: none !important; }
@media (max-width: 1023px) { [data-moko-checkout] .moko-checkout-summary { order: -1; } }

/* Le libellé d'attente n'est pas un montant ; il conserve la taille du texte de lecture. */
[data-moko-checkout] [data-plan-total] { font-size: 16px; line-height: 1.5; overflow-wrap: anywhere; }
[data-moko-checkout] [data-plan-total][data-total-confirme="true"] { font-size: 24px; }

/* Bloc de paiement minimaliste (11 octobre 2026, demande du propriétaire) : une colonne d'actions, sans cadre dans le cadre.
   Portefeuilles en tête, « ou », la carte, puis deux lignes de confirmation ; le récapitulatif est une surface teintée. */
[data-moko-checkout] .moko-checkout-heading { margin-bottom: 24px; }
[data-moko-checkout] .moko-checkout-heading h1 { font-size: 2.25rem; line-height: 1.15; letter-spacing: -0.02em; }
[data-moko-checkout] .moko-checkout-card { gap: 0; padding: 32px; }
[data-moko-checkout] .moko-checkout-express { gap: var(--moko-space-3); }
[data-moko-checkout] .moko-checkout-card .moko-checkout-express > h2 { font-size: 14px; font-weight: 500; line-height: 1.4; text-align: center; color: rgba(41, 35, 91, 0.72); }
html.dark [data-moko-checkout] .moko-checkout-card .moko-checkout-express > h2 { color: rgba(255, 255, 255, 0.72); }
[data-moko-checkout] .moko-checkout-ou { display: flex; align-items: center; gap: 16px; margin-block: 24px; font-size: 14px; color: rgba(41, 35, 91, 0.72); }
[data-moko-checkout] .moko-checkout-ou::before,
[data-moko-checkout] .moko-checkout-ou::after { content: ""; flex: 1 1 0; height: 1px; background: var(--color-stroke-2); }
html.dark [data-moko-checkout] .moko-checkout-ou { color: rgba(255, 255, 255, 0.72); }
html.dark [data-moko-checkout] .moko-checkout-ou::before,
html.dark [data-moko-checkout] .moko-checkout-ou::after { background: var(--color-stroke-7); }
[data-moko-checkout] [data-payment-quick-section][hidden] + .moko-checkout-ou { display: none; }
[data-moko-checkout] .moko-checkout-carte { gap: var(--moko-space-3); }
[data-moko-checkout] .moko-checkout-carte-entete { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--moko-space-3); }
[data-moko-checkout] .moko-checkout-card .moko-checkout-carte-entete h2 { font-size: 18px; line-height: 1.3; }
[data-moko-checkout] .moko-checkout-payer { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; }
[data-moko-checkout] .moko-checkout-cadenas { flex: none; }
[data-moko-checkout] .moko-checkout-securite { display: flex; align-items: flex-start; gap: 8px; color: rgba(41, 35, 91, 0.72); }
[data-moko-checkout] .moko-checkout-securite .moko-checkout-cadenas { margin-top: 3px; }
[data-moko-checkout] .moko-checkout-card .moko-checkout-securite p { font-size: 14px; line-height: 1.5; color: inherit; }
html.dark [data-moko-checkout] .moko-checkout-securite { color: rgba(255, 255, 255, 0.72); }
[data-moko-checkout] .moko-checkout-carte .moko-payment-dynamic { margin-top: 0; }
/* Lignes de confirmation : intitulé, valeur, action ; les champs n'apparaissent qu'à la demande. */
[data-moko-checkout] .moko-checkout-ligne { display: grid; grid-template-columns: minmax(0, 9rem) minmax(0, 1fr) auto; align-items: baseline; column-gap: 16px; row-gap: 12px; padding-block: 16px; border-top: 1px solid var(--color-stroke-2); }
[data-moko-checkout] .moko-checkout-carte + .moko-checkout-ligne { margin-top: 28px; }
html.dark [data-moko-checkout] .moko-checkout-ligne { border-color: var(--color-stroke-7); }
[data-moko-checkout] .moko-checkout-card .moko-checkout-ligne > h2 { font-size: 15px; font-weight: 600; line-height: 1.5; }
[data-moko-checkout] .moko-checkout-card .moko-checkout-ligne > p { font-size: 15px; line-height: 1.5; color: var(--color-secondary); }
html.dark [data-moko-checkout] .moko-checkout-card .moko-checkout-ligne > p { color: #ffffff; }
[data-moko-checkout] .moko-checkout-ligne > a,
[data-moko-checkout] .moko-checkout-ligne > button { justify-self: end; font-size: var(--text-tagline-2); white-space: nowrap; text-decoration: underline; text-underline-offset: 3px; }
html.dark [data-moko-checkout] .moko-checkout-ligne > a { color: #ffffff; }
[data-moko-checkout] .moko-checkout-ligne > .moko-checkout-fields,
[data-moko-checkout] .moko-checkout-ligne > .moko-payment-region-notice,
[data-moko-checkout] .moko-checkout-ligne > .moko-checkout-inline { grid-column: 1 / -1; }
[data-moko-checkout] .moko-checkout-ligne > .moko-payment-region-notice { min-height: 0; }
/* Compte connecté : « Connecté avec … » prend la place de la phrase. */
[data-moko-checkout] .moko-checkout-ligne:has(> [data-payment-account-text][hidden]) > .moko-checkout-inline { grid-column: 2 / -1; grid-row: 1; }
/* Récapitulatif : surface teintée, sans ombre ni bordure ; il reste à portée de vue sur grand écran. */
[data-moko-checkout] .moko-checkout-summary { gap: var(--moko-space-3); padding: 28px; border-color: transparent; box-shadow: none; background: var(--color-background-3); }
html.dark [data-moko-checkout] .moko-checkout-summary { background: var(--color-background-8); border-color: var(--color-stroke-7); }
[data-moko-checkout] .moko-checkout-summary h2 { font-size: 18px; }
[data-moko-checkout] [data-plan-label] { font-size: 17px; font-weight: 600; color: var(--color-secondary); }
[data-moko-checkout] .moko-checkout-summary .moko-summary-total { border-bottom: 0; border-top: 1px solid var(--color-stroke-2); margin-top: 8px; padding-block: 16px 0; }
html.dark [data-moko-checkout] .moko-checkout-summary .moko-summary-total { border-top-color: var(--color-stroke-7); }
[data-moko-checkout] .moko-summary-total span { color: var(--color-secondary); font-weight: 600; }
html.dark [data-moko-checkout] .moko-summary-total span { color: #ffffff; }
[data-moko-checkout] .moko-checkout-summary .moko-prix-local-detail > small { font-size: 13px; color: rgba(41, 35, 91, 0.72); }
html.dark [data-moko-checkout] .moko-checkout-summary .moko-prix-local-detail > small { color: rgba(255, 255, 255, 0.72); }
@media (min-width: 1024px) {
  [data-moko-checkout] .moko-checkout-grid { grid-template-columns: minmax(0, 1fr) minmax(320px, 400px); column-gap: 40px; }
  [data-moko-checkout] .moko-checkout-summary { position: sticky; top: 120px; }
}
@media (max-width: 639px) {
  [data-moko-checkout] .moko-checkout-heading h1 { font-size: 1.75rem; }
  [data-moko-checkout] .moko-checkout-card { padding: 20px; }
  [data-moko-checkout] .moko-checkout-summary { padding: 20px; }
  [data-moko-checkout] .moko-checkout-ligne { grid-template-columns: minmax(0, 1fr) auto; }
  [data-moko-checkout] .moko-checkout-ligne > p { grid-column: 1 / -1; grid-row: 2; }
  [data-moko-checkout] .moko-checkout-ligne:has(> [data-payment-account-text][hidden]) > .moko-checkout-inline { grid-column: 1 / -1; grid-row: 2; }
}
html.dark [data-moko-checkout] .moko-checkout-section-heading a,
html.dark [data-moko-checkout] [data-plan-label] { color: #ffffff; }
html.dark [data-moko-checkout] .moko-transfer-next { color: #ffffff !important; background: transparent !important; border-color: var(--color-stroke-7) !important; }
html.dark [data-moko-checkout] .moko-transfer-next > span { color: inherit !important; }
html.dark [data-moko-checkout] .moko-transfer-next:hover,
html.dark [data-moko-checkout] .moko-transfer-next:focus-visible { color: #29235b !important; background: #f8ad32 !important; border-color: #f8ad32 !important; }

/* Les marques d'acceptation officielles ne reprennent pas le filtre de l'ancien pictogramme. */
html.dark [data-moko-checkout] .moko-payment-method[data-payment-code="apple_pay"] img { filter: none; }
html.dark [data-moko-checkout] .moko-checkout-transfer summary { color: #ffffff; }

/* Paiement invité : les mentions restent attachées au libellé, sans déplacer le champ. */
[data-moko-checkout] .moko-checkout-label-line { display: flex; align-items: baseline; flex-wrap: nowrap; gap: var(--moko-space-1); white-space: nowrap; min-width: 0; }
[data-moko-checkout] .moko-checkout-label-line small { display: inline; margin: 0; color: inherit; font-size: inherit; font-weight: 400; }
/* Les portails montent des groupes et des champs ; jamais un formulaire dans le formulaire. */
[data-moko-checkout] .moko-checkout-inline,
[data-moko-checkout] .moko-checkout-inline-fields,
[data-moko-checkout] .moko-checkout-sdk-fields { display: grid; min-width: 0; gap: var(--moko-block-gap); }
[data-moko-checkout] .moko-checkout-inline:empty,
[data-moko-checkout] .moko-checkout-sdk-fields:empty { display: none; }
[data-moko-checkout] .moko-checkout-inline label { display: grid; min-width: 0; gap: var(--moko-space-2); color: var(--color-secondary); }
[data-moko-checkout] .moko-checkout-inline .auth-form-input { width: 100%; min-width: 0; min-height: 48px; border-radius: 8px; }
[data-moko-checkout] .moko-checkout-inline-actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--moko-space-3); }
[data-moko-checkout] .moko-checkout-inline-actions .btn { min-height: 48px; }
/* Bouton natif Apple Pay ou Google Pay (18 septembre 2026) : il prend la place et la largeur du bouton principal.
   La hauteur minimale réserve l'emplacement pendant le montage du bouton par le prestataire. */
[data-moko-checkout] [data-payment-wallet-slot] { width: 100%; min-height: 48px; }
[data-moko-checkout] [data-payment-wallet-slot][hidden] { display: none; }
[data-moko-checkout] .moko-checkout-inline [role="alert"] { margin: 0; padding: var(--moko-space-3); border: 1px solid var(--color-stroke-2); border-radius: 8px; color: var(--moko-rouge-accent); }
html.dark [data-moko-checkout] .moko-checkout-inline label { color: #ffffff; }
html.dark [data-moko-checkout] .moko-checkout-inline [role="alert"] { border-color: var(--color-stroke-7); }
/* Le SDK conserve ses marques dynamiques dans son iframe, sans badges de réseaux supposés. */
[data-moko-checkout] .moko-checkout-sdk-fields > div { min-width: 0; width: 100%; }
/* Le volet carte appartient à sa ligne ; son contenu garde une marge lisible. */
[data-moko-checkout] [data-payment-secure-fields]:not(:empty) { padding: var(--moko-space-4); border: 1px solid var(--color-stroke-2); border-radius: 8px; }
html.dark [data-moko-checkout] [data-payment-secure-fields]:not(:empty) { border-color: var(--color-stroke-7); }
@media (max-width: 767px) { [data-moko-checkout] .moko-checkout-inline-actions .btn { width: 100%; } }

/* Le lien de récupération reste lisible dans la connexion intégrée sur fond sombre. */
html.dark [data-moko-checkout] .moko-checkout-inline-actions > a:not(.btn) { color: #ffffff; }

/* Réseaux de cartes : rangée unique liée au libellé, même sans SDK chargé. */
[data-moko-checkout] .moko-payment-method[data-payment-code="carte"] { grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--moko-space-2); }
[data-moko-checkout] .moko-payment-method[data-payment-code="carte"] > span[aria-hidden="true"] { display: none; }
[data-moko-checkout] [data-card-networks] { display: inline-flex; flex-wrap: nowrap; flex: 0 0 auto; align-items: center; gap: var(--moko-space-1); white-space: nowrap; }
[data-moko-checkout] .moko-payment-method [data-card-networks] img { display: block; flex: 0 0 30px; width: 30px; height: 20px; object-fit: contain; padding: 0; border-radius: 3px; background: white; filter: none; }

/* Bouton WhatsApp fixé au-dessus du bouton de thème des pages publiques (4 octobre 2026, demande du propriétaire). */
.moko-whatsapp {
  position: fixed; right: 0; bottom: 80px; z-index: 9999;
  display: grid; place-items: center; width: 48px; height: 48px;
  border-radius: 16px 0 0 16px; background: linear-gradient(145deg, #2fd46f, #1aa758); color: #fff !important;
  box-shadow: 0 10px 24px rgb(26 167 88 / 32%);
  transition: filter 260ms cubic-bezier(.22, 1, .36, 1), box-shadow 260ms cubic-bezier(.22, 1, .36, 1);
}
.moko-whatsapp svg { position: relative; z-index: 1; }
.moko-whatsapp-halo { position: absolute; inset: 0; border-radius: inherit; background: #2fd46f; opacity: .45; animation: moko-whatsapp-halo 2.4s cubic-bezier(.22, 1, .36, 1) infinite; }
@keyframes moko-whatsapp-halo { 0% { transform: scale(1); opacity: .45; } 70%, 100% { transform: scale(1.45); opacity: 0; } }
.moko-whatsapp:hover { filter: brightness(1.07); box-shadow: 0 14px 30px rgb(26 167 88 / 42%); }
.moko-whatsapp:focus-visible { outline: 3px solid #f8ad33; outline-offset: 3px; }
html.moko-chat-ouvert .moko-whatsapp { display: none; }
@media (prefers-reduced-motion: reduce) { .moko-whatsapp-halo { animation: none; opacity: 0; } .moko-whatsapp { transition: none; } }

/* Coordonnées sous le texte de marque du pied de page, servies par la route publique des paramètres. */
.moko-footer-contact { display: grid; gap: 14px; max-width: 306px; margin: 0; font-style: normal; }
.moko-footer-contact-titre { margin: 0; color: #fff; font-size: 18px; line-height: 1.3; }
.moko-footer-contact ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.moko-footer-contact li { display: flex; align-items: flex-start; gap: 10px; color: rgb(255 255 255 / 72%); font-size: 15px; line-height: 1.45; }
.moko-footer-contact li[hidden] { display: none; }
.moko-footer-contact svg { flex: none; margin-top: 2px; color: #bbb9cb; }
.moko-footer-contact a { color: inherit; text-decoration: underline; text-decoration-color: rgb(255 255 255 / 28%); text-underline-offset: 4px; overflow-wrap: anywhere; }
.moko-footer-contact a:hover { color: #fff; text-decoration-color: currentColor; }
.moko-footer-contact a:focus-visible { outline: 3px solid #f8ad33; outline-offset: 3px; border-radius: 2px; }
/* WhatsApp du pied de page : un bouton, sans le numéro (5 octobre 2026, demande du propriétaire). Vert foncé pour que le
   libellé blanc reste lisible (contraste 5,4:1). */
.moko-footer-contact li.moko-footer-contact-whatsapp { margin-top: 4px; }
.moko-footer-contact a.moko-footer-whatsapp {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 18px 8px 14px;
  border-radius: 999px; background: #0f7a40; color: #fff; font-size: 15px; font-weight: 500; line-height: 1;
  text-decoration: none; box-shadow: 0 8px 20px rgb(15 122 64 / 28%);
  transition: filter 260ms cubic-bezier(.22, 1, .36, 1);
}
.moko-footer-contact a.moko-footer-whatsapp svg { margin-top: 0; color: currentColor; }
.moko-footer-contact a.moko-footer-whatsapp:hover { color: #fff; filter: brightness(1.12); }
.moko-footer-contact a.moko-footer-whatsapp:focus-visible { border-radius: 999px; }
@media (prefers-reduced-motion: reduce) { .moko-footer-contact a.moko-footer-whatsapp { transition: none; } }