/* ═══════════════════════════════════════════════════════════════════════
   LES MISES EN SCÈNE DE LA V5, portées sur les fiches V6 — chargée par les
   fiches reconstruites (fiches.py), après style.css. Le fichier d'origine
   est repris tel quel ; seuls ses jetons sont rebranchés sur ceux de la V6.
   Les sites, eux, passent dans les écrans V6 (ecr--navigateur, ecr--tel).
   ═══════════════════════════════════════════════════════════════════════ */
.scene {
  --gold: var(--or); --gold-lo: #997F29; --gold-hi: #F5E4AD;
  --f-mono: var(--mono); --f-titre: var(--display);
  --txt-dim: var(--gris-txt); --ink: #0B0B0C; --ink-3: #1C1C1F;
  --or-degrade: linear-gradient(162deg, #E6D8A4 0%, #F0E2B4 19%, #E0CE92 54%, #C5B27C 100%);
  --doux: var(--douce);
}
.scene__legende { margin: clamp(1.1rem, 2vw, 1.7rem) 0 0; }
/* une adresse longue dans la barre du navigateur ne pousse pas la page */
.scene > * { min-width: 0; }
.scene .ecr__url { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* un visuel resté seul sur sa rangée : centré, à la largeur d'une colonne */
@media (min-width: 900px) {
  .scene__bloc--seul { grid-column: 1 / -1; justify-self: center; width: min(100%, calc(50% - clamp(2.25rem, 3.5vw, 4rem))); }
}
.livrables--court .livrable { min-height: 0; }
/* un tirage très haut (une carte de restaurant, une affiche en long) ne
   déborde pas de l'écran : il se montre entier, sur son fond */
.scene .mk--flat .mk__brut { display: grid; place-items: center; }
.scene .mk--flat img { width: auto; max-width: 100%; max-height: min(86vh, 980px); object-fit: contain; }
.fiche-resume { max-width: 60ch; margin: clamp(2rem, 4vw, 3rem) 0 0; font-size: 1.05rem; line-height: 1.65; color: var(--gris-txt); }

/* ==================================================================
   EAT — MOCKUPS
   Mises en scène 100 % CSS. On dépose un visuel plat, il ressort
   dans un navigateur, sur un écran, sur un mur ou sur une façade.
   Aucun traitement d'image : le rendu reste net sur écran Retina.
   ================================================================== */

.mk {
  --ratio: auto;
  margin: 0; position: relative;
  transition: transform .8s var(--sortie);
  transform-style: preserve-3d;
}
.mk:hover { transform: perspective(1800px) rotateX(1.1deg) rotateY(-1.4deg) translateY(-5px); }

.mk__ecran { position: relative; overflow: hidden; background: #0D0D0C; }
.mk__ecran img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 0%;
  transition: object-position 5.5s var(--doux);
}
.mk:hover .mk__ecran--defile img { object-position: 50% 100%; }

.mk__reflet {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(108deg, rgb(255 255 255 / .1) 0 16%, transparent 24% 100%);
  mix-blend-mode: screen;
}

/* ───────────────────────────────── Navigateur */
.mk--browser .mk__fenetre {
  border-radius: 11px; overflow: hidden;
  background: #1F1E1D;
  box-shadow:
    0 0 0 1px rgb(255 255 255 / .09),
    0 42px 80px -34px rgb(0 0 0 / .9),
    0 8px 20px -10px rgb(0 0 0 / .6);
}
.mk__chrome {
  display: flex; align-items: center; gap: .85rem;
  padding: .6rem .85rem;
  background: linear-gradient(#2A2927, #232321);
  border-bottom: 1px solid rgb(255 255 255 / .06);
}
.mk__feux { display: flex; gap: 6px; flex: none; }
.mk__feux i { width: 9px; height: 9px; border-radius: 50%; background: rgb(255 255 255 / .16); }
.mk__feux i:first-child { background: var(--gold-lo); }
.mk__url {
  flex: 1 1 auto; max-width: 320px; margin-inline: auto;
  padding: .34rem .9rem; border-radius: 30px;
  background: rgb(0 0 0 / .38);
  font-family: var(--f-mono); font-size: .63rem; letter-spacing: .04em;
  color: var(--txt-dim); text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mk__onglets { display: flex; flex-direction: column; gap: 3px; flex: none; }
.mk__onglets i { width: 13px; height: 1.5px; background: rgb(255 255 255 / .22); }
.mk--browser .mk__ecran { aspect-ratio: var(--ratio, 16 / 10); }

/* ───────────────────────────────── Ordinateur portable */
.mk--laptop .mk__portable { width: min(880px, 100%); margin-inline: auto; }
.mk__capot {
  position: relative; padding: 11px 11px 13px;
  border-radius: 13px 13px 3px 3px;
  background: linear-gradient(160deg, #3B3A37, #232321 40%, #2C2B29);
  box-shadow: 0 0 0 1px rgb(255 255 255 / .07), 0 34px 60px -30px rgb(0 0 0 / .9);
}
.mk--laptop .mk__ecran { aspect-ratio: var(--ratio, 16 / 10); border-radius: 3px; }
.mk__socle {
  position: relative; width: 116%; margin-left: -8%; height: 15px;
  background: linear-gradient(#3D3C3A, #262523 62%, #1B1A19);
  clip-path: polygon(0 0, 100% 0, 97.2% 100%, 2.8% 100%);
  box-shadow: 0 16px 30px -14px rgb(0 0 0 / .85);
}
.mk__encoche {
  position: absolute; left: 50%; top: 0; transform: translateX(-50%);
  width: 13%; height: 5px; border-radius: 0 0 6px 6px;
  background: #171716;
}

/* ───────────────────────────────── Mobile */
.mk--phone .mk__mobile {
  position: relative; width: min(310px, 74%); margin-inline: auto;
  padding: 11px; border-radius: 44px;
  background: linear-gradient(146deg, #444340, #1B1A19 42%, #393836);
  box-shadow: 0 0 0 1px rgb(255 255 255 / .07), 0 40px 70px -30px rgb(0 0 0 / .9);
}
.mk--phone .mk__ecran { aspect-ratio: var(--ratio, 9 / 19.2); border-radius: 34px; }
.mk--phone .mk__reflet { border-radius: 34px; margin: 11px; inset: 0; }
.mk__ilot {
  position: absolute; z-index: 3; top: 22px; left: 50%; transform: translateX(-50%);
  width: 76px; height: 21px; border-radius: 12px; background: #0A0A09;
}
.mk__bouton { position: absolute; background: linear-gradient(#494845, #292927); border-radius: 3px; }
.mk__bouton--v  { left: -2px; top: 108px; width: 3px; height: 34px; }
.mk__bouton--v2 { left: -2px; top: 152px; width: 3px; height: 34px; }
.mk__bouton--p  { right: -2px; top: 130px; width: 3px; height: 56px; }

/* ───────────────────────────────── Tablette */
.mk--tablet .mk__tablette {
  position: relative; width: min(680px, 96%); margin-inline: auto;
  padding: 15px; border-radius: 22px;
  background: linear-gradient(150deg, #41403D, #1E1D1C 45%, #363533);
  box-shadow: 0 0 0 1px rgb(255 255 255 / .07), 0 36px 64px -30px rgb(0 0 0 / .88);
}
.mk--tablet .mk__ecran { aspect-ratio: var(--ratio, 4 / 3); border-radius: 8px; }
.mk__objectif {
  position: absolute; z-index: 3; top: 7px; left: 50%; transform: translateX(-50%);
  width: 5px; height: 5px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #5A5955, #101010);
}

/* ───────────────────────────────── Affiche sur mur */
.mk--poster .mk__mur {
  position: relative; overflow: hidden;
  padding: clamp(1.6rem, 5vw, 3.6rem);
  display: grid; place-items: center;
  background:
    radial-gradient(80% 60% at 50% -10%, rgb(161 159 155 / .1), transparent 70%),
    repeating-linear-gradient(0deg, rgb(0 0 0 / .07) 0 1px, transparent 1px 52px),
    linear-gradient(165deg, #323230, #1D1C1B);
}
.mk__affiche {
  position: relative; width: min(480px, 100%);
  aspect-ratio: var(--ratio, 2 / 3); overflow: hidden;
  transform: rotate(-1.1deg);
  box-shadow: 0 34px 60px -22px rgb(0 0 0 / .85), 0 2px 6px rgb(0 0 0 / .5);
  transition: transform .9s var(--sortie);
}
.mk:hover .mk__affiche { transform: rotate(0deg) scale(1.012); }
.mk__affiche img { width: 100%; height: 100%; object-fit: cover; }
.mk__pli {
  position: absolute; inset: 0; mix-blend-mode: soft-light;
  background: linear-gradient(102deg,
    rgb(255 255 255 / .18) 0 9%, transparent 18% 46%,
    rgb(0 0 0 / .2) 56%, transparent 68%, rgb(255 255 255 / .1) 88%);
}
.mk__ombre-sol {
  position: absolute; left: 50%; bottom: clamp(.6rem, 2vw, 1.4rem);
  transform: translateX(-50%); width: 60%; height: 26px;
  background: radial-gradient(ellipse, rgb(0 0 0 / .6), transparent 72%);
  filter: blur(6px);
}

/* ───────────────────────────────── Cartes de visite */
.mk--card .mk__cartes {
  position: relative; display: grid; place-items: center;
  padding: clamp(2.4rem, 7vw, 5rem) clamp(1rem, 4vw, 3rem);
  background:
    radial-gradient(70% 60% at 30% 20%, rgb(161 159 155 / .12), transparent 68%),
    linear-gradient(150deg, #2B2A28, #171716);
  min-height: 260px;
}
.mk__carte {
  width: min(360px, 76%); aspect-ratio: 85 / 55;
  box-shadow: 0 26px 48px -18px rgb(0 0 0 / .85);
  transition: transform .9s var(--sortie);
}
.mk__carte--dos {
  position: absolute; display: grid; place-items: center;
  background: var(--or-degrade);
  transform: rotate(-8deg) translate(-11%, -9%);
}
.mk__marque {
  font-family: var(--f-titre); font-weight: 900; font-stretch: 125%;
  font-size: clamp(1.6rem, 4vw, 2.4rem); letter-spacing: -.03em; color: var(--ink);
}
.mk__carte--face { position: relative; overflow: hidden; background: #F3F3F3; transform: rotate(3.5deg) translate(9%, 8%); }
.mk__carte--face img { width: 100%; height: 100%; object-fit: cover; }
.mk:hover .mk__carte--dos  { transform: rotate(-11deg) translate(-14%, -12%); }
.mk:hover .mk__carte--face { transform: rotate(2deg) translate(11%, 10%); }

/* ───────────────────────────────── Édition (double page) */
.mk--magazine .mk__edition {
  display: grid; place-items: center;
  padding: clamp(1.6rem, 5vw, 3.4rem);
  background:
    radial-gradient(70% 60% at 50% 0%, rgb(161 159 155 / .09), transparent 70%),
    linear-gradient(160deg, #2A2927, #181817);
}
.mk__double {
  position: relative; width: min(820px, 100%);
  aspect-ratio: var(--ratio, 2 / 1.42); overflow: hidden;
  box-shadow: 0 40px 70px -26px rgb(0 0 0 / .9);
}
.mk__double img { width: 100%; height: 100%; object-fit: cover; }
.mk__gouttiere {
  position: absolute; inset-block: 0; left: 50%; width: 46px; transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, rgb(0 0 0 / .32) 38%, rgb(0 0 0 / .46) 50%, rgb(0 0 0 / .32) 62%, transparent);
}
.mk__tranche {
  position: absolute; right: 0; top: 2.5%; bottom: 2.5%; width: 7px;
  background: repeating-linear-gradient(#F9F9F9 0 1px, #C6C5C2 1px 2.2px);
  box-shadow: inset 2px 0 4px rgb(0 0 0 / .25);
}

/* ───────────────────────────────── Textile */
.mk--tote .mk__textile {
  display: flex; flex-direction: column; align-items: center;
  padding: clamp(1.8rem, 5vw, 3.4rem) clamp(1rem, 4vw, 3rem) clamp(2.4rem, 6vw, 4rem);
  background:
    radial-gradient(60% 60% at 50% 10%, rgb(161 159 155 / .1), transparent 70%),
    linear-gradient(160deg, #2C2B29, #171716);
}
.mk__anses { position: relative; width: min(400px, 80%); height: 76px; }
.mk__anses::before, .mk__anses::after {
  content: ""; position: absolute; bottom: -2px;
  width: 92px; height: 78px;
  border: 13px solid #D5D4D2; border-bottom: 0;
  border-radius: 70px 70px 0 0;
}
.mk__anses::before { left: 13%; }
.mk__anses::after  { right: 13%; }
.mk__sac {
  position: relative; width: min(400px, 80%); aspect-ratio: 1 / 1.14;
  padding: clamp(1.4rem, 4vw, 2.6rem);
  background: linear-gradient(155deg, #E8E8E7, #CDCCC9);
  box-shadow: 0 30px 55px -20px rgb(0 0 0 / .8), inset 0 0 60px rgb(49 48 46 / .07);
}
.mk__sac::after {
  content: ""; position: absolute; inset: 0; mix-blend-mode: multiply;
  background:
    repeating-linear-gradient(90deg, rgb(49 48 46 / .05) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(0deg, rgb(49 48 46 / .05) 0 1px, transparent 1px 3px),
    linear-gradient(120deg, transparent 40%, rgb(49 48 46 / .1));
}
.mk__zone { position: relative; width: 100%; height: 100%; overflow: hidden; mix-blend-mode: multiply; }
.mk__zone img { width: 100%; height: 100%; object-fit: contain; }

/* ───────────────────────────────── Enseigne / façade */
.mk--signage .mk__facade {
  position: relative; overflow: hidden;
  display: grid; place-items: center;
  padding: clamp(2rem, 6vw, 4.6rem) clamp(1rem, 4vw, 3rem);
  background:
    repeating-linear-gradient(0deg, rgb(0 0 0 / .14) 0 2px, transparent 2px 54px),
    repeating-linear-gradient(90deg, rgb(0 0 0 / .1) 0 2px, transparent 2px 112px),
    linear-gradient(170deg, #41403E, #212120);
}
.mk__panneau {
  position: relative; width: min(760px, 100%);
  aspect-ratio: var(--ratio, 16 / 5); overflow: hidden;
  background: #121211;
  box-shadow: 0 0 0 1px rgb(255 255 255 / .1), 0 22px 44px -14px rgb(0 0 0 / .85);
}
.mk__panneau img { width: 100%; height: 100%; object-fit: cover; }
.mk__vis {
  position: absolute; width: 9px; height: 9px; border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #E3E3E2, #373633);
  box-shadow: 0 1px 3px rgb(0 0 0 / .6);
}
.mk__vis--hg { top: 12px; left: 12px; }
.mk__vis--hd { top: 12px; right: 12px; }
.mk__vis--bg { bottom: 12px; left: 12px; }
.mk__vis--bd { bottom: 12px; right: 12px; }
.mk__halo {
  position: absolute; left: 50%; bottom: 6%; transform: translateX(-50%);
  width: 70%; height: 120px; pointer-events: none;
  background: radial-gradient(ellipse at 50% 0%, rgb(161 159 155 / .3), transparent 68%);
  filter: blur(14px);
}

/* ───────────────────────────────── Vitrine */
.mk--vitrine .mk__glace {
  position: relative; display: grid; place-items: center;
  padding: clamp(1.6rem, 4vw, 3rem);
  background: linear-gradient(168deg, #252523, #141413);
}
.mk__verre {
  position: relative; width: min(760px, 100%);
  aspect-ratio: var(--ratio, 4 / 3); overflow: hidden;
  background: #0E0E0D; border: 7px solid #2F2E2C;
  box-shadow: inset 0 0 70px rgb(0 0 0 / .7), 0 26px 50px -20px rgb(0 0 0 / .85);
}
.mk__verre img { width: 100%; height: 100%; object-fit: cover; }
.mk__eclat {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(112deg,
    rgb(255 255 255 / .16) 0 12%, transparent 19% 43%,
    rgb(255 255 255 / .09) 47% 53%, transparent 60%);
}
.mk__montant { position: absolute; top: 0; bottom: 0; width: 11px; background: linear-gradient(90deg, #3C3B38, #232220); }
.mk__montant--g { left: clamp(.4rem, 2vw, 1.4rem); }
.mk__montant--d { right: clamp(.4rem, 2vw, 1.4rem); }

/* ───────────────────────────────── Visuel brut */
.mk--flat .mk__brut {
  overflow: hidden; background: var(--ink-3);
  box-shadow: 0 32px 60px -26px rgb(0 0 0 / .8);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 24px), calc(100% - 24px) 100%, 0 100%);
}
.mk--flat img { width: 100%; }
.mk--pleine .mk__brut { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 40px), calc(100% - 40px) 100%, 0 100%); }
.mk--pleine img { aspect-ratio: var(--ratio, 16 / 9); object-fit: cover; }
.mk--pleine:hover { transform: none; }

/* ───────────────────────────────── Réglages fins */
@media (prefers-reduced-motion: reduce) {
  .mk:hover { transform: none; }
  .mk__ecran img { transition: none; }
  .mk:hover .mk__affiche, .mk:hover .mk__carte { transform: none; }
}

@media (max-width: 600px) {
  .mk--phone .mk__mobile { width: min(260px, 84%); }
  .mk__anses::before, .mk__anses::after { width: 70px; height: 62px; border-width: 11px; }
  .mk__anses { height: 60px; }
}

/* ─── Carte de visite à deux faces réelles ────────────────────────────
   Le gabarit d'origine dessine un dos doré générique avec le nom de la
   marque en toutes lettres. Quand les deux faces existent en fichier,
   on les montre : `--photo` neutralise le dégradé et cadre l'image. */
.mk__carte--photo { background: none !important; overflow: hidden; }
.mk__carte--photo img { width: 100%; height: 100%; object-fit: cover; }

/* ═══ maquettes.py ═══ */
/* Ajouté par _noir/maquettes.py — ne pas modifier à la main.
   Quatre familles que le gabarit ne connaissait pas. Elles reprennent les
   gris d'atelier des maquettes existantes (#41403E → #212120 pour les
   fonds, #D5D4D2 pour les pièces claires) : posées à côté d'une enseigne
   ou d'un sac, elles doivent venir du même atelier. */

/* ───────────────────────────────── Covering de véhicule */

.mk--vehicule .mk__route {
  position: relative; overflow: hidden;
  display: grid; place-items: center;
  padding: clamp(2rem, 5vw, 3.6rem) clamp(1rem, 4vw, 2.6rem) clamp(3rem, 7vw, 5rem);
  background:
    /* la ligne d'horizon : un sol plus clair que le mur, posée aux deux
       tiers, c'est elle qui fait lire la scène comme un atelier */
    linear-gradient(to bottom, #2A2927 0 62%, #35342F 62%, #1C1B1A 100%),
    #262524;
}
.mk--vehicule .mk__route::before {
  content: ""; position: absolute; left: 0; right: 0; top: 62%; height: 1px;
  background: rgb(213 212 210 / .16);
}
.mk__flanc {
  position: relative; width: min(880px, 100%);
  /* la planche du client donne le rapport ; 16/9 n'est qu'un secours */
  aspect-ratio: var(--ratio, 16 / 9);
  background: #131312;
  box-shadow: 0 0 0 1px rgb(255 255 255 / .08),
              0 34px 60px -22px rgb(0 0 0 / .9);
}
.mk__flanc img { width: 100%; height: 100%; object-fit: contain; }
/* l'ombre portée au sol : une ellipse écrasée, décalée sous la planche */
.mk__ombre-sol {
  position: absolute; left: 50%; bottom: clamp(1.2rem, 3vw, 2.2rem);
  transform: translateX(-50%);
  width: min(820px, 92%); height: 46px; pointer-events: none;
  background: radial-gradient(ellipse at 50% 50%, rgb(0 0 0 / .7), transparent 72%);
  filter: blur(9px);
}

/* ───────────────────────────────── Panneau sur pied */

.mk--totem .mk__bord {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; align-items: center;
  padding: clamp(2.2rem, 6vw, 4rem) clamp(1rem, 4vw, 3rem) 0;
  background:
    /* un ciel qui descend vers un bas-côté : deux aplats, pas une photo */
    linear-gradient(to bottom, #3A3A38 0 58%, #2A2A27 58%, #1A1A18 100%);
}
/* Une plaque professionnelle est en paysage, un panneau de bord de route
   en portrait : aucun rapport ne vaut pour les deux. On n'en impose donc
   aucun — la plaque prend celui de son image — et le recadrage est en
   `contain`, qui ne coupe jamais un texte. `--ratio` et `--ajust: cover`
   restent disponibles quand le visuel est fait pour remplir. */
.mk__plaque {
  position: relative; width: min(560px, 100%);
  aspect-ratio: var(--ratio, auto); overflow: hidden;
  background: #121211;
  box-shadow: 0 0 0 1px rgb(255 255 255 / .12),
              0 26px 46px -16px rgb(0 0 0 / .85);
}
.mk__plaque img {
  display: block; width: 100%; height: 100%;
  object-fit: var(--ajust, contain);
}
/* les deux pieds : ils partent de sous la plaque et plongent dans le sol */
.mk__pieds {
  position: relative; width: min(560px, 100%); height: clamp(70px, 14vw, 130px);
  display: flex; justify-content: space-between;
  padding: 0 16%;
}
.mk__pieds::before, .mk__pieds::after {
  content: ""; width: 18px; height: 100%;
  background: linear-gradient(90deg, #4A4946, #2C2B29 60%, #1E1D1C);
  box-shadow: 0 2px 6px rgb(0 0 0 / .5);
}
/* la coupure d'ombre au pied du totem */
.mk--totem .mk__bord::after {
  content: ""; position: absolute; left: 50%; bottom: 0;
  transform: translateX(-50%);
  width: 70%; height: 40px; pointer-events: none;
  background: radial-gradient(ellipse at 50% 100%, rgb(0 0 0 / .75), transparent 70%);
  filter: blur(7px);
}

/* ───────────────────────────────── Grille de publications */

.mk--grille .mk__feed {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(3px, .6vw, 6px);
  padding: clamp(3px, .6vw, 6px);
  background: linear-gradient(160deg, #2C2B29, #171716);
  box-shadow: 0 30px 55px -22px rgb(0 0 0 / .8);
}
.mk__post { position: relative; aspect-ratio: 1 / 1; overflow: hidden; background: #101010; }
.mk__post img { width: 100%; height: 100%; object-fit: cover; }
/* Une grille de neuf cases pour six visuels ferait trois trous. Les cases
   sans image portent la marque en très discret plutôt que du vide. */
.mk__post--vide {
  display: grid; place-items: center;
  background: repeating-linear-gradient(45deg,
    rgb(213 212 210 / .04) 0 6px, transparent 6px 12px), #1A1A19;
}

/* ───────────────────────────────── Planche de propositions */

.mk--planche .mk__etude {
  display: grid; gap: clamp(.6rem, 1.4vw, 1.1rem);
  grid-template-columns: repeat(auto-fit, minmax(clamp(130px, 22vw, 210px), 1fr));
  padding: clamp(1rem, 3vw, 2rem);
  background: linear-gradient(150deg, #302F2D, #1B1B1A);
}
.mk__piste {
  position: relative; aspect-ratio: 4 / 3; overflow: hidden;
  display: grid; place-items: center; padding: clamp(.5rem, 1.4vw, 1rem);
  background: #F4F4F2;   /* une proposition de logo se juge sur du blanc */
  box-shadow: 0 10px 22px -10px rgb(0 0 0 / .7);
}
.mk__piste img { width: 100%; height: 100%; object-fit: contain; }
/* Les pistes écartées reculent, sans disparaître : le travail a eu lieu. */
.mk__piste--ecartee { opacity: .55; filter: saturate(.35); }
/* La retenue avance : un liseré doré, et sa mention. */
.mk__piste--retenue { box-shadow: 0 0 0 2px var(--gold, #E0CE92), 0 16px 30px -12px rgb(0 0 0 / .8); }
.mk__retenue {
  position: absolute; right: 0; bottom: 0;
  padding: .3rem .6rem;
  font-family: var(--f-mono, ui-monospace, monospace);
  font-size: .58rem; letter-spacing: .14em; text-transform: uppercase;
  background: var(--gold, #E0CE92); color: #111111;
}


/* ═══ Trois corrections que les neuf projets ont révélées ═══════════

   Les cinq projets d'origine ne montraient jamais deux pages d'un même
   imprimé, ni une carte dont le dos comptait autant que la face. Les
   nouveaux si — et ces trois règles-là ne tenaient pas. */

/* 1. La double page ne montrait QUE la première image.
      `.mk__double` n'a pas de colonnes : les deux <img> se suivaient en
      blocs de 100 % de large, la seconde tombait sous le cadre et
      `overflow:hidden` l'effaçait. Personne ne l'avait vu parce qu'avec
      un dépliant, la première image contient déjà les deux volets. */
.mk__double { display: grid; grid-template-columns: 1fr 1fr; background: #FFFFFF; }
.mk__double img { object-fit: contain; }

/* 2. Deux cartes qui se recouvrent à 80 % ne font qu'une carte.
      L'écart entre le dos et la face valait 20 % de la largeur ; il en
      faut 37 pour que le dos garde son message lisible. */
.mk--card .mk__carte { width: min(324px, 70%); }
.mk__carte--dos  { transform: rotate(-8deg) translate(-21%, -13%); }
.mk__carte--face { transform: rotate(3.5deg) translate(16%, 11%); }
.mk:hover .mk__carte--dos  { transform: rotate(-11deg) translate(-25%, -16%); }
.mk:hover .mk__carte--face { transform: rotate(2deg) translate(19%, 13%); }
/* une carte imprimée se regarde entière : `cover` en rognait les bords */
.mk__carte--face img, .mk__carte--photo img { object-fit: contain; }