/* Graphen Studio — mockups de page projet */

.mk {
  position: absolute;
  inset: 0;
  background: var(--mk-fond, #ebebeb);
}

/* Un panneau : la fenêtre par laquelle on voit la page. Elle est toujours au
   format d'un écran (1440 × 900)
   la page est rognée en bas, comme une capture qu'on aurait coupée. */
.mk__ecran {
  position: absolute;
  aspect-ratio: 1440 / 900;
  overflow: hidden;
  background: #fff;
}

.mk__ecran iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 1440px;
  height: 900px;
  border: 0;
  transform: scale(var(--k, .3));
  transform-origin: 0 0;
  pointer-events: none;
}

/* ---------- 1. Deux écrans qui se chevauchent ----------
   Canevas 2048, fond #ebebeb. Deux panneaux de 1360 × 850 : celui du fond en
   (234, 292), celui de devant en (453, 903), qui recouvre le premier par son
   coin bas droit. */

.mk--chevauche { --mk-fond: #ebebeb; }
.mk--chevauche .mk__ecran { width: 66.406%; }
.mk--chevauche .mk__ecran--fond   { left: 11.426%; top: 14.258%; }
.mk--chevauche .mk__ecran--devant { left: 22.119%; top: 44.092%; }

/* ---------- 2. Un seul écran, au centre ----------
   Canevas 1600, fond #f8f8f8. Un panneau de 1318 × 824 en (141, 392) : centré
   dans les deux sens, une large marge tout autour. */

.mk--plein { --mk-fond: #f8f8f8; }
.mk--plein .mk__ecran { left: 8.813%; top: 24.5%; width: 82.375%; }

/* ---------- 3. Deux écrans empilés, sur noir ----------
   Canevas 1600, fond noir. Deux panneaux de 980 × 610 alignés à gauche sur
   310, l'un en 170, l'autre en 819 — 39px de noir entre les deux, et
   l'ensemble centré verticalement. */

.mk--empile { --mk-fond: #000; }
.mk--empile .mk__ecran { left: 19.375%; width: 61.25%; }
.mk--empile .mk__ecran--haut { top: 10.625%; }
.mk--empile .mk__ecran--bas  { top: 51.188%; }

/* ---------- 4. Trois écrans en bande ----------
   Canevas 1024, fond #f8f8f8. Trois panneaux au même format mais à trois
   échelles, alignés par le HAUT sur 353 ; les deux petits sont coupés net par
   le bord du carré, ce qui fait lire la bande comme la suite d'un plan plus
   large. */

.mk--bande { --mk-fond: #f8f8f8; }
.mk--bande .mk__ecran { top: 34.473%; }
.mk--bande .mk__ecran--un    { left: -3.711%; width: 30.762%; }
.mk--bande .mk__ecran--deux  { left: 28.125%; width: 49.023%; }
.mk--bande .mk__ecran--trois { left: 78.223%; width: 25.195%; }

/* ---------- 5. Trois téléphones, sur noir ----------
   Canevas 1024, fond noir. Trois corps de 260 × 548 en (107, 237), (382, 237)
   et (657, 237) : 16px entre eux, l'ensemble centré. Le corps est noir sur
   noir — ce qu'on voit du téléphone, c'est l'écran et son îlot.

   Tout est exprimé en pourcentage de l'élément qui précède, si bien que le
   dessin du téléphone suit la taille de la carte sans une seule mesure en
   pixels : rayons en % de la largeur / de la hauteur pour rester ronds. */

.mk--telephones { --mk-fond: #000; }

.mk__tel {
  position: absolute;
  /* le rembourrage EST la bordure de l'écran : il se prend sur les 260px du
     corps, il ne s'y ajoute pas */
  box-sizing: border-box;
  top: 23.145%;
  width: 25.391%;
  height: 53.516%;
  padding: 2.31%;
  border-radius: 14.6% / 6.93%;
  background: #0a0a0a;
}
.mk__tel--un    { left: 10.449%; }
.mk__tel--deux  { left: 37.305%; }
.mk__tel--trois { left: 64.16%; }

.mk__dalle {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 12.96% / 5.97%;
  background: #fff;
}

.mk__dalle iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 390px;
  height: 844px;
  border: 0;
  transform: scale(var(--k, .3));
  transform-origin: 0 0;
  pointer-events: none;
}

/* L'îlot : une pastille noire posée sur la dalle, 68 × 24 à 12px du haut. */
.mk__ilot {
  position: absolute;
  top: 2.24%;
  left: 50%;
  width: 27.53%;
  height: 4.48%;
  transform: translateX(-50%);
  border-radius: 999px;
  background: #0a0a0a;
}

/* ---------- Tablette et mobile ----------
   La galerie passe en une colonne : les compositions gardent leur carré et
   leurs proportions, tout suit --k. Rien à reprendre ici. */