/* Cadres d'écran (ordinateur et smartphone) des réalisations — site public et back office.
   Toutes les mesures sont proportionnelles : le même cadre sert en vignette de 120 px et en grand. */

.cadre-ordi { display: block; margin: 0; width: 100%; --coque: #1d211c; --alu: #c3c8bc; }
.cadre-ordi .ecran {
  display: block;
  position: relative;
  padding: 2.4% 2.4% 4.6%;
  background: var(--coque);
  border-radius: clamp(4px, 1.6%, 18px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06), 0 22px 44px -28px rgba(31, 36, 29, 0.6);
}
.cadre-ordi .ecran::before { /* webcam */
  content: ""; position: absolute; top: 1.05%; left: 50%; width: 0.7%; aspect-ratio: 1;
  border-radius: 50%; background: #3a4036; transform: translateX(-50%);
}
.cadre-ordi .ecran::after { /* témoin du menton */
  content: ""; position: absolute; bottom: 1.7%; left: 50%; width: 3%; height: 0.5%; min-height: 1px;
  border-radius: 9px; background: #343a31; transform: translateX(-50%);
}
.cadre-ordi .cou {
  display: block; width: 15%; margin: 0 auto; padding-top: 5.5%;
  background: linear-gradient(90deg, #a9ae9f, #dde0d6 45%, #b3b8aa);
  clip-path: polygon(9% 0, 91% 0, 100% 100%, 0 100%);
}
.cadre-ordi .base {
  display: block; width: 30%; margin: 0 auto; padding-top: 1.4%;
  background: linear-gradient(#d4d7cd, #aeb3a6);
  border-radius: 2px 2px 50% 50% / 2px 2px 100% 100%;
  box-shadow: 0 8px 12px -8px rgba(31, 36, 29, 0.45);
}

.cadre-mobile {
  display: block; position: relative; margin: 0; width: 100%;
  padding: 3.8%;
  background: #1d211c;
  border-radius: 15% / 7%;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 26px 40px -24px rgba(31, 36, 29, 0.65);
}
.cadre-mobile::after { /* bouton latéral */
  content: ""; position: absolute; right: -1.4%; top: 23%; width: 1.4%; height: 10%;
  background: #2c3229; border-radius: 0 3px 3px 0;
}
.cadre-mobile .dalle { aspect-ratio: 390 / 844; border-radius: 12% / 5.6%; }
.cadre-mobile .dalle::before { /* encoche */
  content: ""; position: absolute; z-index: 2; top: 1.4%; left: 50%; width: 30%; aspect-ratio: 3.6;
  border-radius: 999px; background: #1d211c; transform: translateX(-50%);
}

.cadre-ordi .dalle, .cadre-mobile .dalle {
  position: relative; display: grid; place-items: center; overflow: hidden;
  background: var(--vert-pale, #eef4dc);
}
.cadre-ordi .dalle { aspect-ratio: 16 / 10; border-radius: 2px; }
.cadre-ordi .dalle img, .cadre-mobile .dalle img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: top center; display: block;
}
.cadre-ordi .dalle .initiale { font-weight: 900; font-size: 2.2rem; color: var(--vert, #99be18); letter-spacing: -0.05em; }

/* Écran cliquable pour agrandir */
.cadre-clic { all: unset; display: block; width: 100%; cursor: zoom-in; border-radius: 12px; }
.cadre-clic:focus-visible { outline: 3px solid var(--vert, #99be18); outline-offset: 6px; }
.cadre-clic .dalle::after {
  content: "Agrandir"; position: absolute; right: 1.5%; bottom: 2.5%; z-index: 2;
  padding: 0.35em 0.8em; border-radius: 999px; font: 600 0.85rem/1.2 inherit;
  background: rgba(31, 36, 29, 0.82); color: #fff; opacity: 0; transition: opacity 0.2s;
}
.cadre-clic:hover .dalle::after, .cadre-clic:focus-visible .dalle::after { opacity: 1; }

/* ======================================================================
   Mises en scène des imprimés (carte de visite, flyer, affiche, papeterie, logo, autre).
   Fond 16:10 ; tailles, positions et ombres proportionnelles (unités cqw).
   ====================================================================== */
.maquette {
  display: block; position: relative; width: 100%; aspect-ratio: 16 / 10; overflow: hidden;
  container-type: inline-size;
  border-radius: 1.6% / 2.6%;
  background: radial-gradient(120% 95% at 28% 18%, #f6f7f2 0%, #e7eae1 55%, #dadecf 100%);
}
.maquette.m-affiche { background: linear-gradient(#f1f0ea, #e5e3da 82%, #d9d6cb 82%, #d2cfc3); }
.maquette.m-logo { background: #f3f4ef; }
.maquette.m-logo.avec-verso { background: linear-gradient(90deg, #f3f4ef 50%, #1f241d 50%); }

.maquette .feuille {
  position: absolute; display: block; margin: 0; padding: 0; border: 0; font: inherit; color: inherit;
  background: #fff; overflow: hidden; border-radius: 0.35cqw;
  box-shadow: 0 0.15cqw 0.3cqw rgba(31, 36, 29, 0.18), 0 1.5cqw 2.8cqw -0.6cqw rgba(31, 36, 29, 0.4);
  transition: box-shadow 0.25s, transform 0.25s;
}
.maquette .feuille img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.maquette .reflet {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0) 64%, rgba(0, 0, 0, 0.06) 100%);
}
.maquette .scotch { display: none; }
.maquette .feuille.vide { display: grid; place-items: center; background: repeating-linear-gradient(135deg, #fff 0 1cqw, #f2f4ed 1cqw 2cqw); }
.maquette .attente { position: relative; font-weight: 800; font-size: 2.6cqw; color: #8b9184; text-align: center; padding: 0 4%; }
.maquette button.feuille { cursor: zoom-in; }
.maquette button.feuille:hover { z-index: 3; box-shadow: 0 0.2cqw 0.4cqw rgba(31, 36, 29, 0.2), 0 2.4cqw 4cqw -0.6cqw rgba(31, 36, 29, 0.45); }
.maquette button.feuille:focus-visible { outline: 0.4cqw solid var(--vert, #99be18); outline-offset: 0.6cqw; z-index: 3; }

/* Pile : un seul visuel, posé sur quelques exemplaires */
.m-carte:not(.avec-verso) .recto, .m-flyer:not(.avec-verso) .recto {
  box-shadow: 0.5cqw 0.45cqw 0 -0.05cqw #fff, 0.5cqw 0.45cqw 0.2cqw 0 rgba(31, 36, 29, 0.14),
    1cqw 0.9cqw 0 -0.1cqw #fff, 1cqw 0.9cqw 0.25cqw 0 rgba(31, 36, 29, 0.14),
    0 1.8cqw 3.2cqw -0.6cqw rgba(31, 36, 29, 0.42);
}

/* Proportions des supports recadrés */
.m-carte .feuille.paysage { aspect-ratio: 85 / 55; }
.m-carte .feuille.portrait { aspect-ratio: 55 / 85; }
.m-carte .feuille { border-radius: 0.6cqw; }
.m-flyer .feuille.paysage, .m-affiche .feuille.paysage, .m-papeterie .recto.paysage { aspect-ratio: 1.4142; }
.m-flyer .feuille.portrait, .m-affiche .feuille.portrait, .m-papeterie .recto.portrait { aspect-ratio: 1 / 1.4142; }

/* Carte de visite */
.m-carte.paysage .recto { width: 43%; left: 5%; top: 29%; transform: rotate(-7deg); z-index: 2; }
.m-carte.paysage .verso { width: 43%; left: 51%; top: 23%; transform: rotate(6deg); z-index: 1; }
.m-carte.paysage:not(.avec-verso) .recto { left: 27%; top: 22%; transform: rotate(-5deg); }
.m-carte.portrait .recto { width: 23%; left: 26%; top: 20%; transform: rotate(-6deg); z-index: 2; }
.m-carte.portrait .verso { width: 23%; left: 51%; top: 22%; transform: rotate(5deg); }
.m-carte.portrait:not(.avec-verso) .recto { left: 38.5%; transform: rotate(-4deg); }

/* Flyer */
.m-flyer.portrait .recto { width: 29%; left: 18%; top: 13%; transform: rotate(-5deg); z-index: 2; }
.m-flyer.portrait .verso { width: 29%; left: 52%; top: 16%; transform: rotate(4deg); }
.m-flyer.portrait:not(.avec-verso) .recto { left: 35.5%; top: 14%; transform: rotate(-3deg); }
.m-flyer.paysage .recto { width: 46%; left: 5%; top: 17%; transform: rotate(-4deg); z-index: 2; }
.m-flyer.paysage .verso { width: 46%; left: 49%; top: 29%; transform: rotate(4deg); }
.m-flyer.paysage:not(.avec-verso) .recto { left: 27%; top: 22%; transform: rotate(-3deg); }

/* Affiche, scotchée au mur */
.m-affiche .feuille { border-radius: 0; overflow: visible; box-shadow: 0 0.2cqw 0.4cqw rgba(31, 36, 29, 0.16), 0 1.2cqw 2.2cqw -1cqw rgba(31, 36, 29, 0.38); }
.m-affiche .scotch { display: block; position: absolute; top: -1.6%; width: 22%; height: 5.5%; background: rgba(236, 229, 205, 0.85); box-shadow: 0 0.1cqw 0.2cqw rgba(0, 0, 0, 0.08); }
.m-affiche .feuille.paysage .scotch { height: 8%; width: 14%; top: -2.6%; }
.m-affiche .scotch.g { left: -6%; transform: rotate(-38deg); }
.m-affiche .scotch.d { right: -6%; transform: rotate(38deg); }
.m-affiche.portrait .feuille { width: 29%; top: 9%; }
.m-affiche.portrait .recto { left: 35.5%; }
.m-affiche.portrait.avec-verso .recto { left: 16%; }
.m-affiche.portrait .verso { left: 55%; }
.m-affiche.paysage .feuille { width: 52%; top: 12%; }
.m-affiche.paysage .recto { left: 24%; }
.m-affiche.paysage.avec-verso .feuille { width: 42%; top: 20%; }
.m-affiche.paysage.avec-verso .recto { left: 5%; }
.m-affiche.paysage .verso { left: 53%; }

/* Papeterie : papier à en-tête et seconde pièce posée dessus */
.m-papeterie.portrait .recto { width: 30%; left: 16%; top: 11%; transform: rotate(-3deg); }
.m-papeterie.portrait:not(.avec-verso) .recto { left: 35%; transform: rotate(-2deg); }
.m-papeterie.paysage .recto { width: 48%; left: 7%; top: 18%; transform: rotate(-3deg); }
.m-papeterie.paysage:not(.avec-verso) .recto { left: 26%; }
.m-papeterie .verso { left: 48%; top: 34%; width: 42%; height: 52%; transform: rotate(5deg); z-index: 2; }

/* Visuels libres (logo, autre imprimé, seconde pièce de papeterie) : l'image garde ses proportions */
.m-logo .feuille, .m-imprime .feuille, .m-papeterie .verso {
  display: flex; align-items: center; justify-content: center;
  background: none; box-shadow: none; overflow: visible; border-radius: 0;
}
.m-logo .feuille img, .m-imprime .feuille img, .m-papeterie .verso img {
  position: static; width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain;
}
.m-imprime .feuille img, .m-papeterie .verso img {
  border-radius: 0.35cqw; background: #fff;
  box-shadow: 0 0.15cqw 0.3cqw rgba(31, 36, 29, 0.18), 0 1.5cqw 2.8cqw -0.6cqw rgba(31, 36, 29, 0.4);
}
.m-logo .reflet, .m-imprime .reflet, .m-papeterie .verso .reflet { display: none; }
.m-logo .feuille.vide, .m-imprime .feuille.vide, .m-papeterie .verso.vide { border: 0.25cqw dashed #b9bfae; border-radius: 1cqw; background: rgba(255, 255, 255, 0.5); }
.m-logo .recto { left: 20%; top: 18%; width: 60%; height: 64%; }
.m-logo.avec-verso .recto { left: 7%; top: 22%; width: 36%; height: 56%; }
.m-logo .verso { left: 57%; top: 22%; width: 36%; height: 56%; }
.m-logo .verso.vide .attente { color: #aab0a2; }
.m-logo.avec-verso .verso.vide, .m-logo .verso.vide { background: rgba(31, 36, 29, 0.06); }
.m-imprime .recto { left: 12%; top: 8%; width: 76%; height: 84%; transform: rotate(-1.5deg); }
.m-imprime.avec-verso .recto { left: 4%; top: 10%; width: 44%; height: 80%; transform: rotate(-2deg); }
.m-imprime .verso { left: 52%; top: 10%; width: 44%; height: 80%; transform: rotate(2deg); }

.maquette:not(.avec-verso) .verso, .maquette img[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .maquette .feuille { transition: none; } }