/* ═══════════════════════════════════════════════════════════════════════════
   mockups.css — les six interfaces animées.

   Trois principes, tenus partout :

   1. Aucune image bitmap. Formes, filets, blocs de couleur, SVG dessinés
      à la main. Une maquette pèse ce que pèse son HTML.
   2. Tout est dimensionné en `cqw` puis en `em` : la même maquette rend
      juste dans une vignette de 280 px et dans un panneau de 900 px, sans
      media query et sans transform de mise à l'échelle.
   3. Ce fichier ne décrit que **l'état de départ**. Le mouvement vit dans
      mockups.js (Web Animations API). L'état final statique — celui que
      voient les gens qui ont demandé moins d'animation — est décrit par
      `.mk--static`, tout en bas.
   ═══════════════════════════════════════════════════════════════════════════ */

.mk {
  container-type: inline-size;
  inline-size: 100%;
  display: block;
}

.mk-screen {
  /* Bornée. Sans plancher, une vignette de 280 px de large donnait 8,7 px
     de corps — et les sous-éléments à 0.62em tombaient à 5,4 px, soit de la
     bouillie grise. Sans plafond, la même maquette ouverte en panneau
     devenait un panneau d'affichage. La requête de conteneur reste : une
     seule maquette sert toujours la vignette et le plein écran. */
  font-size: clamp(11px, 3.1cqw, 22px);
  line-height: 1.35;
  font-family: var(--font-body);
  color: var(--ink);
  position: relative;
  overflow: hidden;
  background: var(--surface);
}

/* ─────────────────────────── Cadre : téléphone ───────────────────────────── */

.mk-phone {
  inline-size: 54%;
  margin-inline: auto;
  aspect-ratio: 9 / 17.5;
  padding: 1.6%;
  background: #1C1C1A;
  border-radius: 12% / 6.2%;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
}
.mk-phone .mk-screen {
  block-size: 100%;
  border-radius: 10% / 5.4%;
  font-size: clamp(12px, 5.4cqw, 26px);
  display: grid;
  grid-template-rows: 1fr auto;
}

/* ─────────────────────────── Cadre : navigateur ──────────────────────────── */

.mk-browser {
  inline-size: 100%;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--surface);
}
.mk-browser__bar {
  display: flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.55em 0.8em;
  background: var(--surface-alt);
  border-block-end: 1px solid var(--line);
  font-size: clamp(9px, 2.6cqw, 17px);
}
.mk-browser__dots { display: flex; gap: 0.34em; }
.mk-browser__dots i { inline-size: 0.5em; block-size: 0.5em; border-radius: 50%; background: var(--line); }
.mk-browser__url {
  flex: 1;
  padding: 0.22em 0.7em;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink-3);
  font-family: var(--font-mono);
  font-size: 0.85em;
  direction: ltr;
  unicode-bidi: isolate;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mk-browser .mk-screen { aspect-ratio: 16 / 10; }

/* ═══════════════════════════ Primitives partagées ═══════════════════════════ */

.mk-block { background: var(--surface-alt); border-radius: 0.3em; }
.mk-line  { block-size: 0.34em; border-radius: 999px; background: var(--line); }
.mk-line--dark { background: color-mix(in srgb, var(--ink) 22%, transparent); }

.mk-chip {
  display: inline-block;
  padding: 0.14em 0.55em;
  border-radius: 999px;
  font-size: 0.62em;
  font-family: var(--font-mono);
  background: var(--surface-alt);
  color: var(--ink-3);
  white-space: nowrap;
}
.mk-chip--ok { background: #E4F2E7; color: #1E5B31; }
.mk-chip--accent { background: var(--accent-soft); color: var(--accent-ink); }

.mk-side {
  background: var(--surface-alt);
  border-inline-end: 1px solid var(--line);
  padding: 0.8em 0.6em;
  display: grid;
  gap: 0.5em;
  align-content: start;
}
.mk-side i {
  block-size: 1.5em;
  border-radius: 0.3em;
  background: color-mix(in srgb, var(--ink) 7%, transparent);
  display: block;
}

.mk-body { padding: 0.9em; display: grid; gap: 0.7em; align-content: start; }

.mk-title { font-family: var(--font-display); font-size: 1.05em; }
.mk-sub { color: var(--ink-3); font-size: 0.7em; }

/* Élément qui n'entre en scène qu'à une étape donnée. */
.mk-later { opacity: 0; }

/* ═══════════════════════════════ 1 · JAHIZ ═══════════════════════════════ */

.mk-jz-map {
  position: relative;
  overflow: hidden;
  background:
    repeating-linear-gradient(90deg, transparent 0 11%, rgba(20,20,15,.05) 11% 11.6%),
    repeating-linear-gradient(0deg,  transparent 0 9%,  rgba(20,20,15,.05) 9% 9.5%),
    #EFEEE7;
}
/* Le lac de Tunis, en biais : le repère qui rend la carte reconnaissable. */
.mk-jz-map::after {
  content: "";
  position: absolute;
  inset-block-start: 8%;
  inset-inline-end: -18%;
  inline-size: 62%;
  block-size: 44%;
  background: #D6E6EA;
  border-radius: 46% 54% 38% 62% / 52% 40% 60% 48%;
  transform: rotate(-12deg);
}

.mk-jz-route { position: absolute; inset: 0; z-index: 1; }
.mk-jz-seg {
  position: absolute;
  background: #0D6A7F;
  border-radius: 999px;
  transform: scale(0);
}
.mk-jz-seg--a { inset-block-end: 22%; inset-inline-start: 18%; inline-size: 34%; block-size: 0.22em; transform-origin: left center; transform: scaleX(0); }
.mk-jz-seg--b { inset-block-end: 22%; inset-inline-start: 51%; inline-size: 0.22em; block-size: 36%;  transform-origin: bottom center; transform: scaleY(0); }
.mk-jz-seg--c { inset-block-start: 42%; inset-inline-start: 51%; inline-size: 26%; block-size: 0.22em; transform-origin: left center; transform: scaleX(0); }

.mk-jz-pin {
  position: absolute;
  z-index: 2;
  inline-size: 0.62em;
  block-size: 0.62em;
  border-radius: 50%;
  translate: -50% 50%;
}
.mk-jz-pin--from {
  inset-block-end: 22%;
  inset-inline-start: 18%;
  background: var(--surface);
  box-shadow: 0 0 0 0.16em #0D6A7F;
}
.mk-jz-pin--to {
  inset-block-start: 42%;
  inset-inline-start: 77%;
  translate: -50% -50%;
  background: #F3A712;
  box-shadow: 0 0 0 0.16em rgba(243, 167, 18, .28);
  opacity: 0;
}

/* La voiture. Elle garde son sens de marche en arabe : une scène à ancrage
   spatial réel ne se retourne pas (voir rtl.css). */
.mk-jz-car {
  position: absolute;
  z-index: 3;
  inset-block-end: 22%;
  inset-inline-start: 18%;
  inline-size: 0.9em;
  block-size: 0.52em;
  border-radius: 0.16em;
  background: #14140F;
  translate: -50% 50%;
  opacity: 0;
}
.mk-jz-car::before {
  content: "";
  position: absolute;
  inset: 0.1em 0.16em auto;
  block-size: 0.16em;
  border-radius: 0.06em;
  background: #7FC6D4;
}

.mk-jz-sheet {
  background: var(--surface);
  border-start-start-radius: 1em;
  border-start-end-radius: 1em;
  padding: 0.7em 0.85em 1em;
  display: grid;
  gap: 0.5em;
  box-shadow: 0 -0.3em 1.2em rgba(20, 20, 15, .07);
  position: relative;
  z-index: 4;
}
.mk-jz-handle {
  inline-size: 2.2em; block-size: 0.22em;
  border-radius: 999px;
  background: var(--line);
  margin-inline: auto;
  margin-block-end: 0.2em;
}

.mk-jz-field {
  display: flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.42em 0.6em;
  border: 1px solid var(--line);
  border-radius: 0.45em;
  font-size: 0.62em;
  color: var(--ink-2);
}
.mk-jz-field i {
  inline-size: 0.5em; block-size: 0.5em;
  border-radius: 50%;
  background: #0D6A7F;
  flex: none;
}
.mk-jz-field--to i { background: #F3A712; border-radius: 0.1em; }
.mk-jz-field--to { opacity: 0; }

.mk-jz-fare {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 0.4em 0.6em;
  border-radius: 0.45em;
  background: #E7F1F3;
  opacity: 0;
}
.mk-jz-fare b {
  font-family: var(--font-mono);
  font-size: 0.86em;
  color: #0A5062;
  direction: ltr;
  unicode-bidi: isolate;
}
.mk-jz-fare span { font-size: 0.58em; color: #2C7285; }

.mk-jz-btn {
  padding: 0.5em;
  border-radius: 0.45em;
  background: #0D6A7F;
  color: #fff;
  text-align: center;
  font-size: 0.66em;
  font-weight: 600;
  opacity: 0;
}

.mk-jz-driver {
  display: flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.45em 0.6em;
  border: 1px solid var(--line);
  border-radius: 0.45em;
  background: var(--surface);
  opacity: 0;
}
.mk-jz-driver > i {
  inline-size: 1.35em; block-size: 1.35em;
  border-radius: 50%;
  background: #CBD9DD;
  flex: none;
}
.mk-jz-driver div { flex: 1; display: grid; gap: 0.22em; }
.mk-jz-driver .mk-line { inline-size: 60%; }
.mk-jz-driver .mk-line:last-child { inline-size: 38%; }

.mk-jz-badge {
  padding: 0.16em 0.5em;
  border-radius: 999px;
  background: #E4F2E7;
  color: #1E5B31;
  font-size: 0.55em;
  font-family: var(--font-mono);
  white-space: nowrap;
}

/* ══════════════════════════ 2 · GESTION CLINIQUE ══════════════════════════ */

.mk-cl { display: grid; grid-template-columns: 3.2em 1fr; block-size: 100%; }

.mk-cl-head { display: flex; align-items: baseline; justify-content: space-between; }
.mk-cl-count {
  font-family: var(--font-mono);
  font-size: 1.15em;
  color: var(--accent-ink);
}

.mk-cl-patient {
  display: flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.4em 0.55em;
  border: 1px solid var(--line);
  border-radius: 0.4em;
  background: var(--surface);
  font-size: 0.68em;
  /* La fiche entre par le côté d'où l'on lit. --dir vaut -1 en arabe. */
  transform: translateX(calc(-120% * var(--dir)));
  opacity: 0;
}
.mk-cl-patient i {
  inline-size: 1.2em; block-size: 1.2em;
  border-radius: 50%;
  background: #DCE7F2;
  flex: none;
}
.mk-cl-patient b { font-weight: 600; }
.mk-cl-patient span { color: var(--ink-3); font-size: 0.86em; }

/* La feuille de surveillance : sept constantes, comme dans la table. */
.mk-cl-vitals {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.4em;
}
.mk-cl-vital {
  padding: 0.4em;
  border: 1px solid var(--line);
  border-radius: 0.4em;
  display: grid;
  gap: 0.15em;
  opacity: 0;
}
.mk-cl-vital em {
  font-style: normal;
  font-size: 0.52em;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.mk-cl-vital b {
  font-family: var(--font-mono);
  font-size: 0.72em;
  direction: ltr;
  unicode-bidi: isolate;
}

.mk-cl-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5em;
  padding: 0.4em 0.55em;
  border: 1px solid var(--line);
  border-radius: 0.4em;
  font-size: 0.64em;
  color: var(--ink-3);
  transition: none;
}
.mk-cl-row.is-saved { border-color: #9AC9A8; background: #F1F8F3; }

/* ═══════════════════════════ 3 · E-LEARNING ═══════════════════════════ */

.mk-el { block-size: 100%; display: grid; grid-template-rows: auto 1fr; }

.mk-el-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6em;
  padding: 0.55em 0.9em;
  border-block-end: 1px solid var(--line);
  font-size: 0.7em;
}
/* Le logotype du projet : une marque dessinée et le nom, côte à côte. */
.mk-el-logo {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  direction: ltr;
  unicode-bidi: isolate;
}
.mk-el-logo svg { inline-size: 1.5em; block-size: 1.5em; flex: none; }
.mk-el-logo b {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95em;
  letter-spacing: -0.02em;
}

.mk-el-cart {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  font-family: var(--font-mono);
  font-size: 0.86em;
  color: var(--ink-2);
}
.mk-el-cart b {
  min-inline-size: 1.25em;
  padding: 0 0.25em;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  text-align: center;
  font-size: 0.85em;
}

.mk-el-catalog { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.55em; }
.mk-el-course {
  border: 1px solid var(--line);
  border-radius: 0.4em;
  overflow: hidden;
  opacity: 0;
}
.mk-el-course > i {
  display: block;
  block-size: 2.1em;
  background: linear-gradient(135deg, #DDE6F7, #EDE7F5);
}
.mk-el-course > div { padding: 0.4em; display: grid; gap: 0.25em; }

/* Le lecteur qui s'ouvre par-dessus le catalogue. */
.mk-el-player {
  position: absolute;
  inset: 1.4em 0.9em auto;
  padding: 0.6em;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 0.5em;
  box-shadow: var(--shadow-hover);
  display: grid;
  gap: 0.45em;
  opacity: 0;
  z-index: 2;
}
.mk-el-video {
  block-size: 3.4em;
  border-radius: 0.35em;
  background: linear-gradient(135deg, #1E2530, #39485C);
  display: grid;
  place-items: center;
}
.mk-el-video i {
  inline-size: 0; block-size: 0;
  border-block: 0.42em solid transparent;
  border-inline-start: 0.7em solid rgba(255, 255, 255, .9);
  border-inline-end: 0;
  margin-inline-start: 0.2em;
}
.mk-el-bar { block-size: 0.24em; border-radius: 999px; background: var(--surface-alt); overflow: hidden; }
.mk-el-bar i {
  display: block;
  block-size: 100%;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
}
.mk-el-actions { display: flex; align-items: center; justify-content: space-between; gap: 0.5em; }
.mk-el-buy {
  padding: 0.3em 0.7em;
  border-radius: 0.35em;
  background: var(--ink);
  color: var(--bg);
  font-size: 0.6em;
  font-weight: 600;
}
.mk-el-stars { display: flex; gap: 0.16em; }
.mk-el-stars i {
  inline-size: 0.42em; block-size: 0.42em;
  background: #E0B23A;
  clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  opacity: 0.25;
}

.mk-el-chat {
  position: absolute;
  inset-block-end: 0.9em;
  inset-inline-end: 0.9em;
  inline-size: 45%;
  padding: 0.5em;
  border: 1px solid var(--line);
  border-radius: 0.5em;
  background: var(--surface);
  box-shadow: var(--shadow-hover);
  display: grid;
  gap: 0.35em;
  opacity: 0;
  z-index: 3;
}
.mk-el-msg { padding: 0.3em 0.45em; border-radius: 0.4em; font-size: 0.58em; }
.mk-el-msg--them { background: var(--surface-alt); color: var(--ink-2); justify-self: start; }
.mk-el-msg--me { background: var(--accent-soft); color: var(--accent-ink); justify-self: end; }

/* ═══════════════════════════════ 4 · GBM LTD ═══════════════════════════════ */

.mk-gb { block-size: 100%; overflow: hidden; }
.mk-gb-scroll { display: grid; gap: 0.7em; padding: 0.9em; }

.mk-gb-hero { display: grid; gap: 0.4em; }
.mk-gb-hero > * { opacity: 0; }
.mk-gb-hero .mk-title { font-size: 1.2em; }

.mk-gb-list { display: grid; gap: 0.45em; }
.mk-gb-item {
  display: flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.45em 0.6em;
  border: 1px solid var(--line);
  border-radius: 0.4em;
  font-size: 0.68em;
  opacity: 0;
}
.mk-gb-item > i {
  inline-size: 1.6em; block-size: 1.6em;
  border-radius: 0.3em;
  background: linear-gradient(135deg, #E7EAF3, #F2ECE5);
  flex: none;
}
.mk-gb-item div { flex: 1; display: grid; gap: 0.22em; }
.mk-gb-seats { font-family: var(--font-mono); font-size: 0.8em; color: var(--warm-ink); white-space: nowrap; }
.mk-gb-book {
  padding: 0.26em 0.6em;
  border-radius: 0.35em;
  border: 1px solid var(--ink);
  font-size: 0.78em;
  white-space: nowrap;
}
.mk-gb-book.is-done { background: #E4F2E7; border-color: #9AC9A8; color: #1E5B31; }

/* ══════════════════════════════ 5 · 9ANTRA ══════════════════════════════ */

.mk-9a { display: grid; grid-template-columns: 4.4em 1fr; block-size: 100%; position: relative; }

/* Le logotype, repris du produit : « 9antra » en corail, « kids » dessous.
   Écrit en texte et non en image — il suit la taille de la maquette. */
.mk-9a-logo {
  display: block;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  font-size: 0.86em;
  line-height: 1;
  /* Le corail du vrai logo, #D2622F, ne donne que 3,36:1 sur ce fond. WCAG
     exempte les logotypes, mais un texte illisible reste un texte illisible :
     #AE4C1E est la teinte la plus proche qui passe (4,82:1). */
  color: #AE4C1E;
  letter-spacing: -0.02em;
  margin-block-end: 0.3em;
  direction: ltr;
  unicode-bidi: isolate;
}
.mk-9a-logo em {
  display: block;
  font-size: 0.62em;
  color: #B33A6A;
  text-align: end;
  margin-block-start: -0.15em;
}

/* Le curseur d'onglet actif : il glisse le long de la barre latérale. */
.mk-9a-side { position: relative; }
.mk-9a-cursor {
  position: absolute;
  inset-inline: 0.3em;
  /* Décalé sous le logotype : 0.8em de padding + la hauteur du bloc de marque. */
  inset-block-start: 2.7em;
  block-size: 1.5em;
  border-radius: 0.3em;
  background: var(--accent-soft);
  z-index: 0;
}
.mk-9a-side i { position: relative; z-index: 1; background: color-mix(in srgb, var(--ink) 7%, transparent); }

.mk-9a-events { display: flex; gap: 0.5em; }
.mk-9a-event {
  flex: none;
  inline-size: 6.2em;
  border-radius: 0.4em;
  overflow: hidden;
  border: 1px solid var(--line);
}
.mk-9a-event > i {
  display: block;
  block-size: 2.4em;
  background: linear-gradient(135deg, #CFE3E8, #E9E2D6);
}
.mk-9a-event > div { padding: 0.35em; display: grid; gap: 0.2em; }

.mk-9a-grades { display: grid; gap: 0.35em; }
.mk-9a-grade {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5em;
  padding: 0.35em 0.55em;
  border-block-end: 1px solid var(--line);
  font-size: 0.66em;
  opacity: 0;
}
.mk-9a-grade b {
  font-family: var(--font-mono);
  direction: ltr;
  unicode-bidi: isolate;
  color: var(--accent-ink);
}

.mk-9a-success {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 0.5em;
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  backdrop-filter: blur(2px);
  opacity: 0;
  z-index: 4;
}
.mk-9a-check {
  inline-size: 2.4em; block-size: 2.4em;
  border-radius: 50%;
  background: #E4F2E7;
  display: grid;
  place-items: center;
}
.mk-9a-check::after {
  content: "";
  inline-size: 0.85em; block-size: 0.45em;
  border-inline-start: 0.16em solid #1E5B31;
  border-block-end: 0.16em solid #1E5B31;
  transform: rotate(-45deg) translate(0.05em, -0.1em);
}

/* ══════════════════════════════ 6 · UBWAYS ══════════════════════════════ */

.mk-ub { display: grid; grid-template-columns: 1fr 42%; block-size: 100%; }

.mk-ub-map {
  position: relative;
  overflow: hidden;
  background:
    repeating-linear-gradient(90deg, transparent 0 13%, rgba(20,20,15,.05) 13% 13.7%),
    repeating-linear-gradient(0deg,  transparent 0 15%, rgba(20,20,15,.05) 15% 15.8%),
    #EFEEE7;
}
/* Une avenue en diagonale : sans elle, la grille se lit comme un damier. */
.mk-ub-map::after {
  content: "";
  position: absolute;
  inset-block: -20%;
  inset-inline-start: 42%;
  inline-size: 0.5em;
  background: #E2E0D6;
  transform: rotate(18deg);
}

.mk-ub-pin {
  position: absolute;
  inset-inline-start: var(--x);
  inset-block-start: var(--y);
  z-index: 2;
  inline-size: 0.55em;
  block-size: 0.55em;
  border-radius: 50%;
  background: #2F7D4F;
  box-shadow: 0 0 0 0.14em rgba(47, 125, 79, .22);
  translate: -50% -50%;
  opacity: 0;
}
.mk-ub-pin.is-booked { background: #14307F; box-shadow: 0 0 0 0.14em rgba(31, 75, 216, .24); }

.mk-ub-halo {
  position: absolute;
  inset-inline-start: var(--x);
  inset-block-start: var(--y);
  z-index: 1;
  inline-size: 2.4em;
  block-size: 2.4em;
  border-radius: 50%;
  border: 0.1em solid #2F7D4F;
  translate: -50% -50%;
  opacity: 0;
}

.mk-ub-panel {
  border-inline-start: 1px solid var(--line);
  background: var(--surface);
  padding: 0.8em;
  display: grid;
  gap: 0.5em;
  align-content: start;
  opacity: 0;
}

.mk-ub-head { display: grid; gap: 0.2em; }
.mk-ub-head b { font-family: var(--font-display); font-size: 0.92em; }
.mk-ub-places {
  font-family: var(--font-mono);
  font-size: 0.6em;
  color: #2F7D4F;
  justify-self: start;
}

.mk-ub-dates { display: grid; grid-template-columns: 1fr 1fr; gap: 0.4em; }
.mk-ub-date {
  padding: 0.35em 0.5em;
  border: 1px solid var(--line);
  border-radius: 0.4em;
  display: grid;
  gap: 0.1em;
  opacity: 0;
}
.mk-ub-date em {
  font-style: normal;
  font-size: 0.5em;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.mk-ub-date b {
  font-family: var(--font-mono);
  font-size: 0.68em;
  direction: ltr;
  unicode-bidi: isolate;
}

.mk-ub-price {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 0.4em 0.55em;
  border-radius: 0.4em;
  background: var(--surface-alt);
  opacity: 0;
}
.mk-ub-price span { font-size: 0.56em; color: var(--ink-3); }
.mk-ub-price b {
  font-family: var(--font-mono);
  font-size: 0.78em;
  direction: ltr;
  unicode-bidi: isolate;
}

.mk-ub-btn {
  padding: 0.45em;
  border-radius: 0.4em;
  background: #2F7D4F;
  color: #fff;
  text-align: center;
  font-size: 0.62em;
  font-weight: 600;
  opacity: 0;
}

.mk-ub-card {
  display: flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.4em 0.5em;
  border: 1px solid var(--line);
  border-radius: 0.4em;
  font-family: var(--font-mono);
  font-size: 0.58em;
  color: var(--ink-2);
  opacity: 0;
}
.mk-ub-card > i {
  inline-size: 1.5em;
  block-size: 1em;
  border-radius: 0.14em;
  background: linear-gradient(120deg, #4A5A78, #2A3446);
  flex: none;
}
.mk-ub-card .mk-chip { margin-inline-start: auto; }

/* ═══════════════════════════ 7 · MOVIE TEMPLATE ═══════════════════════════ */

.mk-mv { block-size: 100%; background: #10131A; color: #E8ECF2; display: grid; grid-template-rows: auto 1fr; }
.mk-mv-top {
  display: flex; align-items: center; gap: 0.6em;
  padding: 0.5em 0.9em;
  border-block-end: 1px solid rgba(255, 255, 255, .09);
  font-size: 0.68em;
}
.mk-mv-brand { font-family: var(--font-display); color: #E5484D; }
.mk-mv-top .mk-line { background: rgba(255, 255, 255, .18); }

.mk-mv-rail { display: flex; gap: 0.5em; padding: 0.9em; align-items: center; }
.mk-mv-poster {
  flex: none;
  inline-size: 4.2em;
  aspect-ratio: 2 / 3;
  border-radius: 0.35em;
  background: linear-gradient(160deg, #2A3446, #4A3A52);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
  position: relative;
  overflow: hidden;
}
.mk-mv-poster::after {
  content: "";
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  block-size: 40%;
  background: linear-gradient(to top, rgba(0, 0, 0, .55), transparent);
}
.mk-mv-poster:nth-child(2) { background: linear-gradient(160deg, #3B2A2A, #5A3742); }
.mk-mv-poster:nth-child(3) { background: linear-gradient(160deg, #24303A, #2F4A47); }
.mk-mv-poster:nth-child(4) { background: linear-gradient(160deg, #332A44, #4A3050); }
.mk-mv-poster:nth-child(5) { background: linear-gradient(160deg, #2C3330, #47503A); }

.mk-mv-detail {
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  padding: 0.8em 0.9em;
  background: linear-gradient(to top, #10131A 62%, transparent);
  display: grid;
  gap: 0.35em;
  opacity: 0;
  z-index: 2;
}
.mk-mv-detail .mk-title { color: #F2F5F9; }
.mk-mv-genres { display: flex; gap: 0.3em; }
.mk-mv-genres span {
  padding: 0.1em 0.45em;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .2);
  font-size: 0.55em;
  color: #C4CCD8;
}
.mk-mv-rating {
  font-family: var(--font-mono);
  font-size: 0.7em;
  color: #E0B23A;
  direction: ltr;
  unicode-bidi: isolate;
}

.mk-mv-player {
  position: absolute;
  inset: 12% 10%;
  border-radius: 0.5em;
  background: #05070B;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .12);
  display: grid;
  place-items: center;
  opacity: 0;
  z-index: 3;
}
.mk-mv-player i {
  inline-size: 0; block-size: 0;
  border-block: 0.55em solid transparent;
  border-inline-start: 0.9em solid rgba(255, 255, 255, .92);
  border-inline-end: 0;
  margin-inline-start: 0.25em;
}

/* ═══════════════════════════════════════════════════════════════════════════
   État final statique.

   Posé par mockups.js quand `prefers-reduced-motion: reduce` est actif : la
   maquette montre alors ce qu'elle **raconte**, d'un coup, sans boucler.
   ═══════════════════════════════════════════════════════════════════════════ */

.mk--static .mk-later,
.mk--static .mk-jz-field--to,
.mk--static .mk-jz-fare,
.mk--static .mk-jz-btn,
.mk--static .mk-jz-driver,
.mk--static .mk-jz-pin--to,
.mk--static .mk-jz-car,
.mk--static .mk-cl-patient,
.mk--static .mk-cl-vital,
.mk--static .mk-el-course,
.mk--static .mk-el-player,
.mk--static .mk-el-chat,
.mk--static .mk-gb-hero > *,
.mk--static .mk-gb-item,
.mk--static .mk-9a-grade,
.mk--static .mk-ub-pin,
.mk--static .mk-ub-panel,
.mk--static .mk-ub-date,
.mk--static .mk-ub-price,
.mk--static .mk-ub-btn,
.mk--static .mk-ub-card,
.mk--static .mk-mv-detail {
  opacity: 1;
  transform: none;
}

.mk--static .mk-jz-seg { transform: scale(1); }
.mk--static .mk-el-bar i { transform: scaleX(0.68); }
.mk--static .mk-el-stars i { opacity: 1; }

/* Le lecteur et l'écran de succès restent fermés : ce sont des surcouches
   momentanées, pas l'état de repos de l'interface. */
.mk--static .mk-9a-success,
.mk--static .mk-mv-player { opacity: 0; }

/* Les deux maquettes ajoutées par la refonte. Un oubli ici est silencieux :
   la maquette clignoterait en mouvement réduit au lieu de s'afficher posée. */
.mk--static .mk-sf-stat,
.mk--static .mk-sf-report,
.mk--static .mk-vm-vital { opacity: 1; transform: none; }
.mk--static .mk-sf-fill { transform: scaleX(0.86); }
.mk--static .mk-vm-limit { transform: scaleX(1); }
.mk--static .mk-vm-spark i { transform: scaleY(1); }
/* L'alerte est une surcouche momentanée, comme le lecteur d'Educad : au
   repos, l'animal va bien. */
.mk--static .mk-vm-alert { opacity: 0; }

/* Les trois maquettes ajoutées avec Mariem, 3ANDI et la scission de SESAME. */
.mk--static .mk-ex-code i,
.mk--static .mk-ex-out span,
.mk--static .mk-mr-photo,
.mk--static .mk-mr-title i,
.mk--static .mk-mr-date,
.mk--static .mk-mr-gal i,
.mk--static .mk-mr-book,
.mk--static .mk-an-msg--me,
.mk--static .mk-an-tr,
.mk--static .mk-an-badge,
.mk--static .mk-an-src span { opacity: 1; transform: none; }
.mk--static .mk-an-msg--bot i { transform: scaleX(1); }
/* Les surcouches momentanées restent fermées au repos. */
.mk--static .mk-ex-veil { opacity: 0; }



/* ═══════════════════════ SESAME Feedback & Examens ═══════════════════════
   La boucle raconte le cycle d'une campagne : on l'ouvre, les réponses
   arrivent, les résultats se lisent, le bilan part en PDF. Aucune
   technologie n'apparaît — ni ici, ni dans la fiche : c'est une demande
   explicite de Rayen, la partie serveur n'est pas encore écrite. */

.mk-sf { display: grid; grid-template-columns: auto 1fr; block-size: 100%; }

.mk-sf-head {
  display: flex;
  align-items: center;
  gap: 0.5em;
  padding-block-end: 0.5em;
  border-block-end: 1px solid var(--line);
  margin-block-end: 0.7em;
}
.mk-sf-head .mk-sub { flex: 1; }

/* La jauge de participation : scaleX avec origine, jamais une largeur. */
.mk-sf-bar {
  block-size: 0.42em;
  border-radius: 999px;
  background: var(--surface-alt);
  overflow: hidden;
}
.mk-sf-fill {
  display: block;
  block-size: 100%;
  background: #1F5FA8;
  transform: scaleX(0);
  transform-origin: left;
}
.mk-sf-part {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-block: 0.45em 0.9em;
  font-size: 0.68em;
  color: var(--ink-3);
}
.mk-sf-part b { color: #1F5FA8; font-size: 1.15em; }

.mk-sf-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.45em; }
.mk-sf-stat {
  padding: 0.5em 0.55em;
  border: 1px solid var(--line);
  border-radius: 0.35em;
  background: var(--surface);
  opacity: 0;
}
.mk-sf-stat em { display: block; font-style: normal; font-size: 0.58em; color: var(--ink-3); }
.mk-sf-stat b { font-size: 1.05em; color: var(--ink); }

/* Le bilan : il arrive en dernier, c'est la sortie du cycle. */
.mk-sf-report {
  display: flex;
  align-items: center;
  gap: 0.5em;
  margin-block-start: 0.9em;
  padding: 0.5em 0.6em;
  border: 1px solid var(--line);
  border-radius: 0.35em;
  background: var(--surface);
  opacity: 0;
}
.mk-sf-report > i {
  inline-size: 1.5em;
  block-size: 1.9em;
  border-radius: 0.2em;
  background: #E3ECF7;
  border: 1px solid #C2D4EA;
  flex: none;
}
.mk-sf-report > div { flex: 1; display: grid; gap: 0.28em; }
.mk-sf-seal { background: #E3ECF7; color: #1F5FA8; }

/* ════════════════════════════ VetMonitor ═════════════════════════════════
   La feuille accrochée à la cage devient une courbe, et c'est la courbe qui
   donne l'alerte. La séquence montre exactement cela : la température monte,
   franchit le seuil, l'état bascule, l'alerte s'ouvre — puis se résout. */

.mk-vm { display: grid; grid-template-columns: auto 1fr; block-size: 100%; }

.mk-vm-animal {
  display: flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.5em 0.6em;
  border: 1px solid var(--line);
  border-inline-start: 0.28em solid #2F9E6B;
  border-radius: 0.35em;
  background: var(--surface);
  margin-block-end: 0.7em;
  transition: border-color 260ms linear;
}
.mk-vm-animal.is-critical { border-inline-start-color: #C0341B; }
.mk-vm-animal > i {
  inline-size: 1.7em;
  block-size: 1.7em;
  border-radius: 50%;
  background: #DDEAE3;
  flex: none;
}
.mk-vm-animal > div { flex: 1; display: grid; gap: 0.28em; }
.mk-vm-state { background: #E0F1E8; color: #1E5B3F; }
.mk-vm-state.is-critical { background: #F8E3DE; color: #96280D; }

.mk-vm-vitals { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.4em; }
.mk-vm-vital {
  padding: 0.45em 0.4em;
  border: 1px solid var(--line);
  border-radius: 0.3em;
  background: var(--surface);
  text-align: center;
  opacity: 0;
  transition: background 260ms linear, border-color 260ms linear;
}
.mk-vm-vital em { display: block; font-style: normal; font-size: 0.55em; color: var(--ink-3); }
.mk-vm-vital b { font-size: 0.98em; }
.mk-vm-vital.is-hot { background: #FBEAE5; border-color: #E8BCB0; }
.mk-vm-vital.is-hot b { color: #96280D; }

/* La courbe : cinq barres qui montent en scaleY, et une ligne de seuil qui se
   dessine en scaleX. Ni l'une ni l'autre n'anime une dimension. */
.mk-vm-chart {
  position: relative;
  block-size: 3.4em;
  margin-block-start: 0.7em;
  padding: 0.3em 0.2em 0;
  border-block-end: 1px solid var(--line);
}
.mk-vm-limit {
  position: absolute;
  inset-inline: 0;
  inset-block-start: 34%;
  block-size: 0;
  border-block-start: 1px dashed #C0341B;
  transform: scaleX(0);
  transform-origin: left;
  opacity: .75;
}
.mk-vm-limit::after {
  content: "39,5";
  position: absolute;
  inset-block-start: -1.05em;
  inset-inline-end: 0;
  font-size: 0.52em;
  color: #96280D;
}
.mk-vm-spark {
  position: absolute;
  inset: 0.3em 0.2em 0;
  display: flex;
  align-items: flex-end;
  gap: 0.28em;
}
.mk-vm-spark i {
  flex: 1;
  border-radius: 0.14em 0.14em 0 0;
  background: #7FB8A0;
  transform: scaleY(0);
  transform-origin: bottom;
}
.mk-vm-spark i:nth-child(1) { block-size: 34%; }
.mk-vm-spark i:nth-child(2) { block-size: 46%; }
.mk-vm-spark i:nth-child(3) { block-size: 57%; }
.mk-vm-spark i:nth-child(4) { block-size: 64%; }
.mk-vm-spark i:nth-child(5) { block-size: 82%; background: #C0341B; }

.mk-vm-alert {
  display: flex;
  align-items: center;
  gap: 0.45em;
  margin-block-start: 0.7em;
  padding: 0.45em 0.6em;
  border: 1px solid #E8BCB0;
  border-radius: 0.3em;
  background: #FBEAE5;
  font-size: 0.66em;
  color: #96280D;
  opacity: 0;
}
.mk-vm-alert .mk-vm-dot {
  inline-size: 0.5em;
  block-size: 0.5em;
  border-radius: 50%;
  background: #C0341B;
  flex: none;
}
.mk-vm-alert > span:nth-child(2) { flex: 1; }
.mk-vm-fix { background: #FFFFFF; color: #96280D; }
.mk-vm-fix.mk-chip--ok { background: #E4F2E7; color: #1E5B31; }

/* ═══════════════════════════ SESAME Examens ═══════════════════════════════
   L'écran d'un devoir : l'énoncé à gauche, la zone de travail à droite. La
   boucle raconte la remise — on écrit, on exécute, on remet, la copie se fige,
   la note tombe. Aucune technologie n'est nommée, ici comme dans la fiche. */

.mk-ex { display: grid; grid-template-rows: auto 1fr; block-size: 100%; }

.mk-ex-top {
  display: flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.45em 0.7em;
  border-block-end: 1px solid var(--line);
}
.mk-ex-top .mk-sub { flex: 1; }
.mk-ex-clock { font-size: 0.7em; color: var(--ink-3); }
.mk-ex-clock.is-done { color: #1E5B31; font-weight: 600; }

.mk-ex-body { display: grid; grid-template-columns: 30% 1fr; gap: 0.6em; padding: 0.7em; }

.mk-ex-brief { display: grid; gap: 0.34em; align-content: start; }
.mk-ex-shot {
  block-size: 1.6em;
  border-radius: 0.22em;
  background: var(--surface-alt);
  border: 1px solid var(--line);
}

/* La zone de travail : fond nuit, comme tout éditeur — c'est une convention
   universelle, pas une marque. */
.mk-ex-work {
  position: relative;
  border-radius: 0.3em;
  overflow: hidden;
  background: #16181D;
  display: grid;
  grid-template-rows: auto 1fr auto auto;
}
.mk-ex-tabs { display: flex; gap: 0.3em; padding: 0.35em 0.45em; background: #1E212A; }
.mk-ex-tabs i { inline-size: 1.6em; block-size: 0.42em; border-radius: 999px; background: #39404F; }
.mk-ex-tabs i:first-child { background: #6E7B93; }

.mk-ex-code { display: grid; gap: 0.32em; padding: 0.5em 0.6em; align-content: start; }
.mk-ex-code i {
  block-size: 0.32em;
  border-radius: 999px;
  background: #39404F;
  opacity: 0;
}
.mk-ex-code i:nth-child(1) { inline-size: 62%; }
.mk-ex-code i:nth-child(2) { inline-size: 84%; margin-inline-start: 1.1em; background: #4F7FA8; }
.mk-ex-code i:nth-child(3) { inline-size: 54%; margin-inline-start: 1.1em; }
.mk-ex-code i:nth-child(4) { inline-size: 70%; margin-inline-start: 2.2em; background: #6E8F5E; }
.mk-ex-code i:nth-child(5) { inline-size: 40%; }

.mk-ex-out {
  display: grid;
  gap: 0.28em;
  padding: 0.45em 0.6em;
  background: #101216;
  border-block-start: 1px solid #262B35;
  min-block-size: 2.1em;
  align-content: start;
}
.mk-ex-out span {
  display: flex;
  align-items: center;
  gap: 0.4em;
  font-size: 0.6em;
  color: #97A3B6;
  opacity: 0;
}
.mk-ex-ok {
  inline-size: 0.55em;
  block-size: 0.55em;
  border-radius: 50%;
  background: #4FAE72;
  flex: none;
}

.mk-ex-actions { display: flex; gap: 0.4em; padding: 0.45em 0.6em; background: #1E212A; }
.mk-ex-run, .mk-ex-send {
  padding: 0.22em 0.7em;
  border-radius: 0.25em;
  font-size: 0.62em;
  color: #E6EAF2;
  background: #39404F;
}
.mk-ex-send { background: #1F5FA8; }

/* Le voile ne couvre que la zone de travail : c'est le travail qui se ferme,
   pas le sujet. L'énoncé reste lisible. */
.mk-ex-veil {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(10, 12, 16, .72);
  opacity: 0;
}
.mk-ex-frozen {
  padding: 0.22em 0.7em;
  border-radius: 999px;
  font-size: 0.6em;
  background: #E6EAF2;
  color: #16181D;
}

/* ══════════════════════ Mariem Nourreddine — site officiel ════════════════
   Une affiche, trois langues, des dates, un bouton. La bascule en arabe
   retourne la maquette : c'est le geste central du produit. */

/* Quatre rangées, et la troisième absorbe le reste : sans cela, l'affiche
   d'ouverture prenait toute la hauteur et poussait les dates et le bouton de
   booking hors du cadre — c'est-à-dire précisément ce que la maquette doit
   montrer. */
.mk-mr {
  display: grid;
  grid-template-rows: auto auto auto 1fr auto;
  block-size: 100%;
  background: #0E1526;
}

.mk-mr-hero {
  position: relative;
  display: grid;
  grid-template-columns: 38% 1fr;
  gap: 0.7em;
  padding: 0.8em;
  align-items: center;
  block-size: 8.2em;
}
.mk-mr-photo {
  display: block;
  block-size: 100%;
  border-radius: 0.3em;
  background: linear-gradient(150deg, #3A4A6B, #1A2238 60%, #4A3A22);
  opacity: 0;
}
.mk-mr-title { display: grid; gap: 0.36em; }
.mk-mr-title i {
  display: block;
  block-size: 0.5em;
  border-radius: 999px;
  background: #D9B26A;
  opacity: 0;
}
.mk-mr-title i:nth-child(1) { inline-size: 78%; }
.mk-mr-title i:nth-child(2) { inline-size: 54%; background: #8FA0C0; }

.mk-mr-langs { display: flex; gap: 0.35em; padding-inline: 0.8em; }
.mk-mr-langs i {
  display: grid;
  place-items: center;
  inline-size: 1.9em;
  block-size: 1.15em;
  border-radius: 999px;
  border: 1px solid #2C3A57;
  font-family: var(--font-mono);
  font-size: 0.54em;
  font-style: normal;
  color: #8FA0C0;
}
.mk-mr-langs i.is-on { background: #D9B26A; color: #0E1526; border-color: #D9B26A; }

.mk-mr-dates { display: grid; gap: 0.32em; padding: 0.7em 0.8em 0; align-content: start; }
.mk-mr-date {
  display: flex;
  align-items: center;
  gap: 0.45em;
  padding: 0.32em 0.5em;
  border-radius: 0.25em;
  background: #16203A;
  opacity: 0;
}
.mk-mr-date em {
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 0.52em;
  color: #D9B26A;
}
.mk-mr-date i { flex: 1; block-size: 0.3em; border-radius: 999px; background: #2C3A57; }

.mk-mr-gal {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.3em;
  padding: 0.6em 0.8em 0;
  align-content: start;
}
.mk-mr-gal i {
  display: block;
  /* Hauteur fixe et non ratio : la rangee absorbe le reste de la grille, et
     un carre parfait sur quatre colonnes larges mangeait le bouton de booking. */
  block-size: 3.1em;
  border-radius: 0.22em;
  background: linear-gradient(140deg, #2C3A57, #16203A);
  opacity: 0;
}
.mk-mr-gal i:nth-child(2) { background: linear-gradient(140deg, #4A3A22, #16203A); }
.mk-mr-gal i:nth-child(4) { background: linear-gradient(140deg, #3A4A6B, #16203A); }

.mk-mr-book {
  margin: 0.7em 0.8em 0.8em;
  padding: 0.34em 0.8em;
  border-radius: 0.25em;
  background: #D9B26A;
  color: #0E1526;
  font-size: 0.62em;
  text-align: center;
  opacity: 0;
}

/* ═══════════════════════════════ 3ANDI ════════════════════════════════════
   Une question en arabizi, sa translittération, l'intention reconnue, la
   réponse, et les sources en dessous. La boucle montre exactement la chaîne
   décrite dans la fiche — et le fait que les sources soient citées. */

/* Deux rangées : la conversation, puis le champ de saisie collé en bas. Le
   champ n'est pas décoratif — c'est lui qui dit que la maquette est un chat
   et non une capture de conversation. */
.mk-an { display: grid; grid-template-rows: 1fr auto; block-size: 100%; }
.mk-an-chat { display: grid; gap: 0.42em; padding: 0.7em; align-content: start; }

.mk-an-bar {
  display: flex;
  align-items: center;
  gap: 0.5em;
  margin: 0 0.7em 0.7em;
  padding: 0.4em 0.6em;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
}
.mk-an-bar i {
  flex: 1;
  block-size: 0.3em;
  border-radius: 999px;
  background: var(--line);
}
.mk-an-bar span {
  inline-size: 1.4em;
  block-size: 1.4em;
  border-radius: 50%;
  background: #1F5FA8;
  flex: none;
}

.mk-an-msg {
  padding: 0.38em 0.6em;
  border-radius: 0.5em;
  font-size: 0.62em;
  line-height: 1.4;
  max-inline-size: 84%;
}
.mk-an-msg--me {
  justify-self: end;
  background: #1F5FA8;
  color: #FFFFFF;
  border-end-end-radius: 0.14em;
  opacity: 0;
  direction: ltr;
}
.mk-an-msg--bot {
  justify-self: start;
  background: var(--surface-alt);
  border-end-start-radius: 0.14em;
  display: grid;
  gap: 0.3em;
  inline-size: 84%;
}
.mk-an-msg--bot i {
  display: block;
  block-size: 0.3em;
  border-radius: 999px;
  background: var(--line);
  transform: scaleX(0);
  transform-origin: left;
}
.mk-an-msg--bot i:nth-child(1) { inline-size: 92%; }
.mk-an-msg--bot i:nth-child(2) { inline-size: 76%; }
.mk-an-msg--bot i:nth-child(3) { inline-size: 88%; }
.mk-an-msg--bot i:nth-child(4) { inline-size: 48%; }

/* La ligne de translittération : le cœur du produit, et donc de la maquette. */
.mk-an-tr {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 0.4em;
  font-size: 0.56em;
  color: var(--ink-3);
  direction: rtl;
  opacity: 0;
}
.mk-an-tr::before {
  content: "↳";
  color: #1F5FA8;
  font-size: 1.1em;
}

.mk-an-badge {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  padding: 0.16em 0.55em;
  border-radius: 999px;
  background: #E3ECF7;
  color: #1F5FA8;
  font-family: var(--font-mono);
  font-size: 0.52em;
  opacity: 0;
}
.mk-an-badge::before {
  content: "";
  inline-size: 0.42em;
  block-size: 0.42em;
  border-radius: 50%;
  background: currentColor;
}

.mk-an-src { display: flex; gap: 0.3em; }
.mk-an-src span {
  padding: 0.14em 0.5em;
  border-radius: 999px;
  border: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 0.5em;
  color: var(--ink-3);
  opacity: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   MODE SOMBRE

   Le reste du site bascule tout seul : il ne consomme que des jetons. Les
   maquettes, elles, portent des couleurs en dur — le teal de Jahiz, le vert
   d'UBWAYS, le corail de 9antra sont **les couleurs de ces produits**, pas
   celles du portfolio. Elles ne peuvent pas devenir des variables sans cesser
   de dire ce qu'elles disent.

   Ce qui change ici n'est donc pas la teinte mais sa **clarté** : chaque marque
   garde sa couleur, remontée de ce qu'il faut pour rester lisible sur fond
   sombre. Et les cartes passent en nuit, parce qu'une carte blanche dans un
   téléphone noir éblouit.
   ═══════════════════════════════════════════════════════════════════════════ */

[data-theme="dark"] .mk-phone {
  background: #0A0A09;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16);
}

/* ── Jahiz ─────────────────────────────────────────────────────────────────── */
[data-theme="dark"] .mk-jz-map {
  background:
    repeating-linear-gradient(90deg, transparent 0 11%, rgba(255,255,255,.055) 11% 11.6%),
    repeating-linear-gradient(0deg,  transparent 0 9%,  rgba(255,255,255,.055) 9% 9.5%),
    #1B2027;
}
[data-theme="dark"] .mk-jz-map::after { background: #223540; }
[data-theme="dark"] .mk-jz-seg { background: #3FA8C2; }
[data-theme="dark"] .mk-jz-pin--from { background: #E9F4F6; box-shadow: 0 0 0 0.16em #3FA8C2; }
[data-theme="dark"] .mk-jz-car::before { background: #4FC3DC; }
[data-theme="dark"] .mk-jz-sheet { box-shadow: 0 -0.3em 1.2em rgba(0, 0, 0, .45); }
[data-theme="dark"] .mk-jz-field i { background: #3FA8C2; }
[data-theme="dark"] .mk-jz-fare { background: #12313A; }
[data-theme="dark"] .mk-jz-fare b { color: #9CDDEC; }
[data-theme="dark"] .mk-jz-fare span { color: #86B9C6; }
[data-theme="dark"] .mk-jz-btn { background: #14829B; }
[data-theme="dark"] .mk-jz-driver > i { background: #33454C; }
[data-theme="dark"] .mk-jz-badge,
[data-theme="dark"] .mk-chip--ok { background: #17331F; color: #93DBAB; }

/* ── Passation infirmière ──────────────────────────────────────────────────── */
[data-theme="dark"] .mk-cl-patient i { background: #26313E; }
[data-theme="dark"] .mk-cl-row.is-saved { border-color: #2E5B3D; background: #16241A; }

/* ── Educad ────────────────────────────────────────────────────────────────── */
[data-theme="dark"] .mk-el-course > i { background: linear-gradient(135deg, #26303F, #2F2A3E); }
[data-theme="dark"] .mk-el-player { box-shadow: 0 8px 28px rgba(0, 0, 0, .5); }
[data-theme="dark"] .mk-el-chat { box-shadow: 0 8px 28px rgba(0, 0, 0, .5); }

/* ── GBM Ltd ───────────────────────────────────────────────────────────────── */
[data-theme="dark"] .mk-gb-item > i { background: linear-gradient(135deg, #262A34, #33302B); }
[data-theme="dark"] .mk-gb-book.is-done { background: #16241A; border-color: #2E5B3D; color: #93DBAB; }

/* ── 9antra kids ───────────────────────────────────────────────────────────── */
[data-theme="dark"] .mk-9a-logo { color: #EE9560; }
[data-theme="dark"] .mk-9a-logo em { color: #EE86AF; }
[data-theme="dark"] .mk-9a-event > i { background: linear-gradient(135deg, #223840, #38332A); }
[data-theme="dark"] .mk-9a-check { background: #17331F; }
[data-theme="dark"] .mk-9a-check::after { border-color: #93DBAB; }

/* ── UBWAYS ────────────────────────────────────────────────────────────────── */
[data-theme="dark"] .mk-ub-map {
  background:
    repeating-linear-gradient(90deg, transparent 0 13%, rgba(255,255,255,.055) 13% 13.7%),
    repeating-linear-gradient(0deg,  transparent 0 15%, rgba(255,255,255,.055) 15% 15.8%),
    #1B2027;
}
[data-theme="dark"] .mk-ub-map::after { background: #262C35; }
[data-theme="dark"] .mk-ub-pin { background: #58B87A; box-shadow: 0 0 0 0.14em rgba(88, 184, 122, .26); }
[data-theme="dark"] .mk-ub-pin.is-booked { background: #92AAFF; box-shadow: 0 0 0 0.14em rgba(146, 170, 255, .26); }
[data-theme="dark"] .mk-ub-halo { border-color: #58B87A; }
[data-theme="dark"] .mk-ub-places { color: #7FCF9B; }
[data-theme="dark"] .mk-ub-btn { background: #3C9760; }

/* ── SESAME Feedback ───────────────────────────────────────────────────────── */
[data-theme="dark"] .mk-sf-fill { background: #5B9BE0; }
[data-theme="dark"] .mk-sf-part b { color: #8FBEF0; }
[data-theme="dark"] .mk-sf-report > i { background: #1B2A3D; border-color: #2C4360; }
[data-theme="dark"] .mk-sf-seal { background: #1B2A3D; color: #8FBEF0; }

/* ── VetMonitor ────────────────────────────────────────────────────────────── */
[data-theme="dark"] .mk-vm-animal { border-inline-start-color: #4CBF8C; }
[data-theme="dark"] .mk-vm-animal.is-critical { border-inline-start-color: #FF8A5E; }
[data-theme="dark"] .mk-vm-animal > i { background: #24352E; }
[data-theme="dark"] .mk-vm-state { background: #17331F; color: #93DBAB; }
[data-theme="dark"] .mk-vm-state.is-critical { background: #3A2119; color: #FFAE92; }
[data-theme="dark"] .mk-vm-vital.is-hot { background: #33211A; border-color: #5C3324; }
[data-theme="dark"] .mk-vm-vital.is-hot b { color: #FFAE92; }
[data-theme="dark"] .mk-vm-spark i { background: #4E8A73; }
[data-theme="dark"] .mk-vm-spark i:nth-child(5) { background: #FF8A5E; }
[data-theme="dark"] .mk-vm-limit { border-block-start-color: #FF8A5E; }
[data-theme="dark"] .mk-vm-limit::after { color: #FFAE92; }
[data-theme="dark"] .mk-vm-alert { background: #33211A; border-color: #5C3324; color: #FFAE92; }
[data-theme="dark"] .mk-vm-alert .mk-vm-dot { background: #FF8A5E; }
[data-theme="dark"] .mk-vm-fix { background: #1A1A17; color: #FFAE92; }
[data-theme="dark"] .mk-vm-fix.mk-chip--ok { background: #17331F; color: #93DBAB; }

/* ── SESAME Examens ───────────────────────────────────────────────────────── */
[data-theme="dark"] .mk-ex-shot { background: #22262F; border-color: #333A46; }
[data-theme="dark"] .mk-ex-frozen { background: #22262F; color: #E6EAF2; }
[data-theme="dark"] .mk-ex-clock.is-done { color: #93DBAB; }

/* ── Mariem Nourreddine ───────────────────────────────────────────────────── */
/* Le site de l'artiste est deja nocturne : sa maquette ne change pas de
   couleurs, elle est deja a sa place sur un fond sombre. */

/* ── 3ANDI ────────────────────────────────────────────────────────────────── */
[data-theme="dark"] .mk-an-msg--me { background: #2A6FBF; }
[data-theme="dark"] .mk-an-badge { background: #1B2A3D; color: #8FBEF0; }