/* =============================================================================
   mockups — les vues d'application, dessinées en CSS
   =============================================================================
   Aucune capture d'écran n'existe encore : ces vues en tiennent lieu. Elles
   gardent leur propre habillage — une fenêtre d'application ne change pas de
   couleur parce que la page défile — mais empruntent au thème sa couleur
   d'accent, pour que chaque vue porte celle de son application.

   Tout est dimensionné en em sur un corps proportionnel à la largeur du
   bloc : la vue se réduit d'un seul tenant, comme le ferait une image.
   Les navigateurs sans unités de conteneur retombent sur le corps fixe.
   ========================================================================== */

.col-shot { container-type: inline-size }

.mk {
  --m-bg: #FFFFFF;
  --m-panel: #F7F7F5;
  --m-line: #E8E6E2;
  --m-ink: #292524;
  --m-mute: #8F8A85;

  font-size: 11px;
  font-size: clamp(7px, 1.5cqw, 13px);
  color: var(--m-ink);
  background: var(--m-bg);
  border: 1px solid var(--m-line);
  border-radius: 1.1em;
  overflow: hidden;
  display: flex; flex-direction: column;
  aspect-ratio: 4 / 3;
  box-shadow: 0 1px 2px rgba(20, 16, 12, .04),
              0 2.2em 4.6em -2.4em color-mix(in srgb, var(--accent) 55%, transparent);
  transition: box-shadow var(--fondu);
}

.mk-dark {
  --m-bg: #161513;
  --m-panel: #0F0E0D;
  --m-line: #332F2C;
  --m-ink: #F5F0E8;
  --m-mute: #8A837B;
}

.mk-wide { aspect-ratio: 21 / 9 }

/* ---------- barre de fenêtre ---------- */
.mk-bar {
  flex: none;
  height: 3.2em;
  display: flex; align-items: center; gap: .55em;
  padding: 0 1.3em;
  background: var(--m-panel);
  border-bottom: 1px solid var(--m-line);
}
.mk-bar > i { width: .72em; height: .72em; border-radius: 50%; background: var(--m-line); flex: none }
.mk-title {
  margin-left: 1.2em;
  font-family: var(--mono); font-size: .82em; color: var(--m-mute);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.mk-body { flex: 1; display: flex; min-height: 0 }
.mk-body-col { flex-direction: column; padding: 1.8em }

/* ---------- rail latéral sombre ---------- */
.mk-side {
  flex: none; width: 4em;
  background: #292524;
  display: flex; flex-direction: column; align-items: center; gap: 1.2em;
  padding: 1.2em 0;
}
.mk-avatar {
  width: 2em; height: 2em; border-radius: .45em;
  background: #4A4340; color: #FFF;
  display: flex; align-items: center; justify-content: center;
  font-size: .95em; font-weight: 700; margin-bottom: .6em;
}
.mk-ico { width: 1.35em; height: 1.35em; border-radius: .28em; background: #4A4340 }
.mk-ico.on { background: #FFF }

/* ---------- rail latéral clair ---------- */
.mk-side-light {
  width: 11em; background: var(--m-bg); border-right: 1px solid var(--m-line);
  align-items: stretch; padding: 1em .8em; gap: .3em;
}
.mk-item {
  font-size: .92em; color: var(--m-mute);
  padding: .6em .7em; border-radius: .4em;
}
.mk-item.on { background: var(--m-panel); color: var(--m-ink); font-weight: 600 }

/* ---------- corps principal ---------- */
.mk-main { flex: 1; min-width: 0; padding: 1.5em; display: flex; flex-direction: column; gap: 1em }

.mk-tabs { display: flex; gap: 1.4em; font-size: .88em; color: var(--m-mute) }
.mk-tabs .on { color: var(--m-ink); font-weight: 600; border-bottom: 2px solid var(--accent-ink); padding-bottom: .5em }
.mk-tabs-bar { margin-left: 1.4em; gap: 1.6em }

.mk-label {
  font-family: var(--mono); font-size: .78em; letter-spacing: .12em;
  text-transform: uppercase; color: var(--m-mute);
}

/* ---------- planning ---------- */
.mk-gantt { display: flex; flex-direction: column; gap: .55em }
.mk-row { display: flex; align-items: center; font-size: .85em; color: var(--m-mute) }
.mk-row > span { width: 5.5em; flex: none }
.mk-row > b { height: .95em; border-radius: .3em; background: #D6D2CC }
.mk-row > b.dark { background: #57514C }
.mk-row > b.accent { background: var(--accent) }
.mk-row.on > span { color: var(--accent-ink); font-weight: 600 }

/* ---------- chiffres de bas de vue ---------- */
.mk-stats {
  margin-top: auto; padding-top: 1.2em;
  border-top: 1px solid var(--m-line);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1em;
}
.mk-stats span { display: flex; flex-direction: column; gap: .3em; min-width: 0 }
.mk-stats i {
  font-style: normal; font-family: var(--mono); font-size: .74em;
  letter-spacing: .1em; text-transform: uppercase; color: var(--m-mute);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mk-stats b { font-size: 1.45em; font-weight: 600; letter-spacing: -.02em }

/* ---------- deux vraies captures, en décalé ----------
   La colonne n'a pas la largeur pour deux vues côte à côte lisibles : on les
   superpose en quinconce. Les captures sont recadrées sur le contenu — dans
   l'original, l'application n'occupe que 40 % de la largeur. */
.duo { position: relative; aspect-ratio: 4 / 3 }
.duo img {
  position: absolute; width: 78%; height: auto; background: #FFF;
  border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--line));
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(20, 16, 12, .05),
              0 26px 50px -26px color-mix(in srgb, var(--accent) 55%, transparent);
  transition: border-color var(--fondu), box-shadow var(--fondu);
}
.duo-a { top: 0; left: 0; z-index: 1 }
.duo-b { bottom: 0; right: 0; z-index: 2 }

/* ---------- boîte à outils de calculs ---------- */
.mk-docs { aspect-ratio: 16 / 10 }
.mk-bar-app { justify-content: space-between; height: 3.6em }
.mk-brand { font-weight: 700; font-size: 1.05em; letter-spacing: -.02em; display: flex; align-items: center; gap: .4em }
.mk-brand i { width: .45em; height: .45em; border-radius: 50%; background: var(--accent) }

.mk-search {
  border: 1px solid var(--m-line); border-radius: .55em;
  padding: .8em 1em; font-size: .88em; color: var(--m-mute);
  background: var(--m-bg);
}
.mk-body-col > .mk-label { margin-top: 1.4em }

.mk-guides { display: grid; grid-template-columns: repeat(3, 1fr); gap: .9em; margin-top: .8em }
.mk-guides span {
  border: 1px solid var(--m-line); border-radius: .6em; padding: .9em;
  display: flex; flex-direction: column; gap: .5em; min-width: 0;
}
.mk-guides b { font-size: .88em; font-weight: 600; line-height: 1.3 }
.mk-guides i { font-style: normal; font-size: .78em; color: var(--accent-ink) }

.mk-cats { display: flex; flex-direction: column; gap: .55em; margin-top: auto; padding-top: 1.2em }
.mk-cats span {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: .2em 1em;
  border: 1px solid var(--m-line); border-radius: .6em; padding: .75em 1em;
}
.mk-cats b { grid-column: 1; grid-row: 1; font-size: .92em; font-weight: 600 }
.mk-cats i { grid-column: 1; grid-row: 2; font-style: normal; font-size: .78em; color: var(--m-mute) }
.mk-cats em {
  grid-column: 2; grid-row: 1 / 3; justify-self: end;
  font-style: normal; font-size: .78em; color: var(--m-mute);
  background: var(--m-panel); border-radius: var(--pill); padding: .25em .8em;
}

/* ---------- arborescence documentaire ---------- */
.mk-tree {
  flex: none; width: 26%;
  background: var(--m-panel); border-right: 1px solid var(--m-line);
  padding: 1.4em 1em; display: flex; flex-direction: column; gap: .35em;
}
.mk-tree-h { height: 1.5em; width: 55%; border-radius: .3em; background: var(--m-line); margin-bottom: 1em }
.mk-fold {
  font-size: .88em; color: var(--m-mute);
  padding: .6em .7em; border-radius: .4em;
  display: flex; align-items: center; gap: .6em;
}
.mk-fold::before {
  content: ''; width: 1em; height: .8em; border-radius: .16em .3em .16em .16em;
  background: currentColor; opacity: .45; flex: none;
}
.mk-fold.on {
  background: var(--m-bg); color: var(--m-ink); font-weight: 600;
  border: 1px solid var(--m-line);
}
.mk-fold.on::before { background: var(--accent); opacity: 1 }

.mk-head {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 1.1em; border-bottom: 1px solid var(--m-line);
  font-size: .95em; font-weight: 600;
}
.mk-head em { width: 6em; height: 1.6em; border-radius: var(--pill); background: var(--m-panel); border: 1px solid var(--m-line) }

.mk-file {
  display: flex; align-items: center; justify-content: space-between; gap: 1em;
  padding: .85em 0; border-bottom: 1px solid var(--m-panel);
  font-size: .85em; color: var(--m-mute);
}
.mk-file span { display: flex; align-items: center; gap: .7em; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.mk-file span::before {
  content: ''; flex: none; width: .95em; height: 1.2em; border-radius: .18em;
  background: var(--accent); opacity: .5;
}
.mk-file b { font-weight: 400; flex: none }

/* ---------- chantier : fenêtre et téléphone ---------- */
.mk-stack { position: relative; aspect-ratio: 4 / 3.15 }
.mk-stack .mk { position: absolute; top: 0; right: 0; width: 87%; aspect-ratio: 4 / 3 }

.mk-main-plan { background: var(--m-panel); position: relative }
.mk-photos { display: grid; grid-template-columns: 1fr 1fr; gap: .8em; height: 100%; min-height: 0 }
.mk-photos span { background: #DCDAD6; border-radius: .5em }
.mk-photos span:nth-child(2) { background: #D2D5CB }
.mk-photos span:nth-child(3) { background: #D7D4CF }
.mk-note {
  position: absolute; right: 1.4em; bottom: 1.4em; width: 17em;
  background: var(--m-bg); border: 1px solid var(--m-line);
  border-radius: .8em; padding: 1.1em;
  display: flex; flex-direction: column; gap: .45em;
  box-shadow: 0 1.2em 2.4em -1.4em rgba(20, 16, 12, .3);
}
.mk-note strong { font-size: .95em }
.mk-note span { font-size: .85em; color: var(--m-mute) }
.mk-note em { font-style: normal; font-size: .8em; color: var(--m-mute); display: flex; align-items: center; gap: .7em; margin-top: .3em }
.mk-chip {
  font-weight: 600; padding: .3em .7em; border-radius: .35em;
  color: var(--accent-ink);
  background: color-mix(in srgb, var(--accent) 22%, transparent);
}

.mk-phone {
  position: absolute; left: 3%; bottom: 0; z-index: 2;
  width: 27%; aspect-ratio: 9 / 18.5;
  background: var(--m-bg);
  border: .45em solid #FFF; border-radius: 2.2em;
  box-shadow: 0 2em 4em -1.4em rgba(20, 16, 12, .38), 0 0 0 1px rgba(20, 16, 12, .08);
  overflow: hidden; display: flex; flex-direction: column;
  font-size: 11px; font-size: clamp(6px, 1.5cqw, 13px);
}
.mk-phone-bar {
  flex: none; height: 4.2em; background: #F7F7F5;
  display: flex; align-items: flex-end; justify-content: center; padding-bottom: .9em;
  font-size: .82em; font-weight: 600; color: #292524;
}
.mk-phone-shot { flex: none; height: 22%; background: #DEDCD8 }
.mk-phone-form {
  flex: 1; background: #FFF; border-radius: 1.1em 1.1em 0 0; margin-top: -.8em;
  padding: 1.1em; display: flex; flex-direction: column; gap: .9em;
}
.mk-field {
  display: flex; flex-direction: column; gap: .25em;
  font-size: .82em; font-weight: 500; color: #292524;
  border-bottom: 1px solid #EFEDEA; padding-bottom: .45em;
}
.mk-field i {
  font-style: normal; font-family: var(--mono); font-size: .78em;
  letter-spacing: .1em; text-transform: uppercase; color: #A8A29C;
}
.mk-cta {
  margin-top: auto; text-align: center;
  background: var(--accent-ink); color: #FFF;
  padding: .85em; border-radius: .7em; font-size: .82em; font-weight: 600;
}

/* ---------- carnet véhicule ---------- */
.mk-head-veh { display: block; border-bottom: 1px solid var(--m-line); padding-bottom: 1.2em }
.mk-head-veh strong { display: block; font-size: 1.5em; letter-spacing: -.02em }
.mk-plate { font-family: var(--mono); font-size: .85em; letter-spacing: .1em; color: var(--m-mute) }

.mk-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2em; margin-top: 1.4em }
.mk-card {
  background: color-mix(in srgb, var(--m-ink) 5%, var(--m-bg));
  border: 1px solid var(--m-line); border-radius: .7em;
  padding: 1.2em; display: flex; flex-direction: column; gap: .35em;
}
.mk-card-t { font-size: .9em; font-weight: 500; margin-top: .8em }
.mk-big { font-size: 2.3em; font-weight: 300; letter-spacing: -.03em; line-height: 1.1 }
.mk-big i { font-style: normal; font-size: .38em; color: var(--m-mute); margin-left: .4em }
.mk-sub { font-size: .82em; color: var(--m-mute) }
.mk-gauge {
  margin-top: auto; height: .38em; border-radius: var(--pill);
  background: var(--m-line); overflow: hidden;
}
.mk-gauge b { display: block; height: 100%; background: var(--accent); border-radius: var(--pill) }
.mk-state { font-size: .9em; color: #6FBF73; display: flex; align-items: center; gap: .55em; margin: .6em 0 1em }
.mk-state::before { content: ''; width: .55em; height: .55em; border-radius: 50%; background: currentColor }
.mk-kv {
  display: flex; justify-content: space-between; gap: 1em;
  font-size: .82em; padding: .55em 0; border-bottom: 1px solid var(--m-line);
}
.mk-kv:last-child { border-bottom: 0 }
.mk-kv i { font-style: normal; color: var(--m-mute) }

.mk-hist { margin-top: 1.5em; display: flex; flex-direction: column }
.mk-hist .mk-label { margin-bottom: .7em }

/* ---------- réductions ---------- */
@media (max-width: 900px) {
  .mk-note { position: static; width: auto; margin: auto 0 0 }
  .mk-main-plan { padding: 1.2em }
}
@media (max-width: 620px) {
  .mk-side-light { width: 8em }
  .mk-tree { width: 34% }
  .mk-wide { aspect-ratio: 16 / 10 }
}