/* Maquettes de sites : tout est proportionnel à la largeur du cadre (container queries). */
.mk-list { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 40px; }
.mk-item { margin: 0; }
.mk-wide { grid-column: 1 / -1; }
.mk-item figcaption { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 14px; font-size: .93rem; color: var(--ink-soft); }
.mk-item figcaption strong { color: var(--ink); }
.mk-item figcaption .btn { flex: none; }
@media (max-width: 820px) { .mk-list { grid-template-columns: 1fr; } .mk-item figcaption { flex-direction: column; align-items: flex-start; } }

.mk-frame { container-type: inline-size; border-radius: 12px; overflow: hidden; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 12px 32px rgba(59,51,72,.14); border: 1px solid var(--line); }
.mk-bar { display: flex; align-items: center; gap: 6px; padding: 9px 12px; background: #EEE9EF; }
.mk-bar span { width: 9px; height: 9px; border-radius: 50%; background: #D4CBD6; }
.mk-bar span:first-child { background: #E8857A; } .mk-bar span:nth-child(2) { background: #EDC56A; } .mk-bar span:nth-child(3) { background: #7FC79A; }
.mk-bar em { margin-left: 10px; font: 500 11px/1 var(--sans); color: #7A7085; font-style: normal; }

.mk { --a: hsl(var(--h) 75% 50%); --d: hsl(var(--h) 45% 16%); position: relative; aspect-ratio: 16 / 9; overflow: hidden; font: 400 1.4cqw/1.45 var(--sans); color: #222; }
.mk svg { width: 1em; height: 1em; flex: none; }
.mk h3 { font-family: inherit; margin: 0 0 .4em; line-height: 1.1; letter-spacing: -.01em; }
.mk p { margin: 0 0 .9em; }
.mk-fict { position: absolute; right: 1.2em; bottom: 1em; z-index: 3; font-size: .75em; padding: .25em .7em; border-radius: 99em; background: rgba(0,0,0,.55); color: #fff; letter-spacing: .03em; }
.mk-nav { display: flex; align-items: center; gap: 2em; padding: 1.3em 3em; }
.mk-logo { display: flex; align-items: center; gap: .5em; font-weight: 700; font-size: 1.15em; white-space: nowrap; }
.mk-logo i { display: grid; place-items: center; width: 1.9em; height: 1.9em; border-radius: .5em; background: var(--a); color: #fff; }
.mk-logo i svg { width: 1.1em; height: 1.1em; }
.mk-links { display: flex; gap: 1.6em; margin-left: auto; font-size: .92em; opacity: .8; }
.mk-btn { display: inline-flex; align-items: center; gap: .45em; padding: .65em 1.3em; border-radius: .5em; background: var(--a); color: #fff; font-weight: 600; font-size: .92em; white-space: nowrap; }
.mk-ghost { background: transparent; border: 1px solid rgba(255,255,255,.5); }
.mk-ctas { display: flex; gap: .8em; align-items: center; }
.mk-kicker { text-transform: uppercase; letter-spacing: .14em; font-size: .78em; font-weight: 600; }

/* 1 · Classique */
.mk1 { background: #F4F5F7; }
.mk1 .mk-nav { background: #fff; }
.mk1 .mk-hero { display: grid; grid-template-columns: 1.5fr 1fr; align-items: center; padding: 2.6em 3em 3.2em; background: linear-gradient(120deg, var(--d), hsl(var(--h) 45% 28%)); color: #fff; }
.mk1 .mk-kicker { color: hsl(var(--h) 85% 72%); }
.mk1 h3 { font-size: 3em; font-family: Georgia, serif; }
.mk1 .mk-hero p { opacity: .85; }
.mk1 .mk-hero-art { justify-self: center; display: grid; place-items: center; width: 11em; height: 11em; border-radius: 50%; background: rgba(255,255,255,.08); color: hsl(var(--h) 85% 70%); box-shadow: 0 0 0 1.4em rgba(255,255,255,.04); }
.mk1 .mk-hero-art svg { width: 5.5em; height: 5.5em; }
.mk1 .mk-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4em; padding: 0 3em; margin-top: -1.6em; position: relative; }
.mk1 .mk-card { background: #fff; border-radius: .8em; padding: 1.3em; box-shadow: 0 .4em 1.4em rgba(0,0,0,.08); display: flex; flex-direction: column; gap: .5em; }
.mk1 .mk-card i { color: var(--a); font-size: 1.6em; }
.mk-lines { display: grid; gap: .35em; }
.mk-lines span { height: .45em; border-radius: 1em; background: #E6E8EC; }
.mk-lines span:last-child { width: 65%; }
.mk1 .mk-trust { display: flex; justify-content: center; gap: 3em; padding: 1.6em 3em; font-size: .9em; font-weight: 500; }
.mk1 .mk-trust span { display: flex; align-items: center; gap: .4em; }
.mk1 .mk-trust svg { color: var(--a); }

/* 2 · Pratique */
.mk2 { background: #fff; }
.mk2 .mk-top { display: flex; justify-content: center; align-items: center; gap: .5em; padding: .55em; background: var(--a); color: #fff; font-weight: 600; font-size: .95em; }
.mk2 .mk-nav { border-bottom: 1px solid #EEE; }
.mk2 .mk-logo i { background: var(--d); }
.mk2 .mk-split { display: grid; grid-template-columns: 1.2fr 1fr; }
.mk2 .mk-split-l { padding: 3em; }
.mk2 h3 { font-size: 2.6em; color: var(--d); font-family: Georgia, serif; }
.mk2 .mk-call { display: inline-flex; align-items: center; gap: .6em; padding: .9em 1.5em; border-radius: .6em; background: var(--a); color: #fff; font-weight: 700; font-size: 1.15em; box-shadow: 0 .5em 1.4em hsl(var(--h) 75% 50% / .35); }
.mk2 .mk-sub { display: block; margin-top: .8em; font-size: .88em; color: #777; text-decoration: underline; }
.mk2 .mk-split-r { background: hsl(var(--h) 60% 96%); padding: 2.6em 2.4em; }
.mk2 .mk-split-r b { display: block; margin-bottom: .8em; color: var(--d); }
.mk2 ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .65em; }
.mk2 li { display: flex; align-items: center; gap: .55em; padding: .55em .8em; background: #fff; border-radius: .5em; font-size: .95em; }
.mk2 li svg { color: var(--a); }
.mk2 .mk-zones { display: flex; align-items: center; gap: .8em; padding: 1.3em 3em; border-top: 1px solid #EEE; font-size: .9em; }
.mk2 .mk-zones span { padding: .3em .9em; border-radius: 99em; background: #F2F2F2; }

/* 3 · Élégant */
.mk3 { background: #F7F3EC; color: #2B2620; font-family: Georgia, "Times New Roman", serif; }
.mk3 .mk-nav.mk-center { justify-content: space-between; border-bottom: 1px solid #E5DDD0; }
.mk3 .mk-links { margin: 0; font-family: var(--sans); font-size: .85em; letter-spacing: .06em; }
.mk3 .mk-logo { font-weight: 400; font-size: 1.35em; letter-spacing: .04em; }
.mk3 .mk-logo i { background: transparent; color: hsl(var(--h) 40% 38%); border: 1px solid currentColor; border-radius: 50%; }
.mk3 .mk-hero { text-align: center; padding: 3em 6em 2em; }
.mk3 .mk-kicker { font-family: var(--sans); color: hsl(var(--h) 40% 40%); }
.mk3 h3 { font-size: 3.2em; font-weight: 400; font-style: italic; }
.mk3 .mk-rule { display: block; width: 4em; height: 1px; margin: 1em auto; background: hsl(var(--h) 40% 45%); }
.mk3 .mk-hero p { font-family: var(--sans); font-size: .95em; color: #6B6257; }
.mk3 .mk-gallery { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 1em; padding: 0 3em; height: 30%; }
.mk3 .mk-tile { position: relative; border-radius: .3em; display: grid; place-items: center; color: rgba(255,255,255,.85); overflow: hidden; }
.mk3 .mk-tile svg { width: 3.4em; height: 3.4em; }
.mk3 .mk-tile span { position: absolute; left: .9em; bottom: .7em; font-family: var(--sans); font-size: .82em; color: #fff; }
.mk3 .mk-t0 { background: linear-gradient(160deg, hsl(var(--h) 35% 52%), hsl(var(--h) 40% 30%)); }
.mk3 .mk-t1 { background: linear-gradient(160deg, hsl(calc(var(--h) + 25) 30% 62%), hsl(calc(var(--h) + 25) 30% 40%)); }
.mk3 .mk-t2 { background: linear-gradient(160deg, #B9A88F, #7D6C55); }
.mk3 .mk-quote { text-align: center; font-style: italic; color: #6B6257; margin-top: 1.4em; }

/* 4 · Moderne */
.mk4 { background: hsl(var(--h) 60% 97%); }
.mk4 .mk-btn { border-radius: 99em; }
.mk4 .mk-logo i { border-radius: 50%; }
.mk4 .mk-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 2em; align-items: center; padding: 2.4em 3em 1.5em; }
.mk4 .mk-pill { display: inline-block; padding: .35em .9em; border-radius: 99em; background: hsl(var(--h) 70% 90%); color: hsl(var(--h) 60% 30%); font-weight: 600; font-size: .82em; margin-bottom: 1em; }
.mk4 h3 { font-size: 2.7em; color: #15131A; font-weight: 800; }
.mk4 h3 em { color: var(--a); font-style: normal; }
.mk4 .mk-link { font-weight: 600; font-size: .92em; color: var(--d); }
.mk4 .mk-stack { position: relative; height: 18em; }
.mk4 .mk-main { position: absolute; inset: 0 2em 0 2em; border-radius: 1.6em; background: linear-gradient(140deg, var(--a), hsl(calc(var(--h) + 40) 70% 55%)); display: grid; place-items: center; color: rgba(255,255,255,.9); }
.mk4 .mk-main svg { width: 6em; height: 6em; }
.mk4 .mk-float { position: absolute; display: flex; align-items: center; gap: .5em; padding: .8em 1.1em; background: #fff; border-radius: .9em; font-weight: 600; font-size: .88em; box-shadow: 0 .6em 1.6em rgba(0,0,0,.12); }
.mk4 .mk-float svg { color: var(--a); }
.mk4 .mk-f1 { left: 0; top: 1.4em; }
.mk4 .mk-f2 { right: 0; bottom: 1.6em; }
.mk4 .mk-chips { display: flex; gap: .8em; padding: 0 3em; }
.mk4 .mk-chips span { padding: .6em 1.1em; background: #fff; border-radius: 99em; font-size: .9em; box-shadow: 0 .2em .6em rgba(0,0,0,.05); }

/* 5 · Contraste */
.mk5 { background: #111318; color: #F2F2F5; --a: hsl(var(--h) 90% 60%); }
.mk5 .mk-logo i { background: transparent; color: var(--a); border: 1px solid var(--a); }
.mk5 .mk-hero { padding: 2.2em 3em 1.6em; }
.mk5 h3 { font-size: 5.6em; font-weight: 800; letter-spacing: -.03em; line-height: 1; }
.mk5 h3 span { color: var(--a); }
.mk5 .mk-hero p { color: #A9ABB8; font-size: 1.05em; }
.mk5 .mk-btn { background: var(--a); color: #111318; border-radius: 0; }
.mk5 .mk-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1em; padding: 0 3em; }
.mk5 .mk-card { border: 1px solid #2A2D36; padding: 1.2em; min-height: 6.5em; display: flex; flex-direction: column; justify-content: space-between; }
.mk5 .mk-card small { color: var(--a); font-weight: 700; }
.mk5 .mk-card b { font-weight: 600; font-size: .95em; }
.mk5 .mk-band { display: flex; justify-content: space-between; align-items: center; margin: 1.6em 3em 0; padding: 1.1em 1.6em; background: var(--a); color: #111318; font-weight: 700; font-size: 1.1em; }

/* Page exemples */
.hub-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin-top: 28px; }
.hub-card { display: block; text-decoration: none; color: var(--ink); transition: transform .15s; }
.hub-card:hover { transform: translateY(-3px); }
.hub-label { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-top: 12px; font-size: .95rem; }
.hub-label span { color: var(--cta); font-size: .88rem; white-space: nowrap; }
@media (max-width: 1000px) { .hub-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .hub-grid { grid-template-columns: 1fr; } }

/* ===== Professions libérales : registre élégant ===== */
.mkl { --serif-l: "Cormorant Garamond", "Cormorant", Garamond, "Times New Roman", serif; background: var(--bg); color: var(--ink); font-family: var(--sans); }
.mkl h3 { font-family: var(--serif-l); font-weight: 500; letter-spacing: 0; }
.mkl-nav { display: flex; align-items: center; gap: 2em; padding: 1.6em 3.4em; }
.mkl-brand { display: flex; flex-direction: column; font-family: var(--serif-l); font-size: 1.35em; font-weight: 600; letter-spacing: .08em; line-height: 1.1; }
.mkl-brand small { font-family: var(--sans); font-size: .5em; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; opacity: .65; margin-top: .45em; }
.mkl-menu { display: flex; gap: 2em; margin-left: auto; font-size: .78em; letter-spacing: .16em; text-transform: uppercase; opacity: .8; }
.mkl-center { justify-content: center; margin: 0; gap: 1em; }
.mkl-kicker { font-size: .74em; letter-spacing: .24em; text-transform: uppercase; color: var(--acc); font-weight: 600; margin: 0 0 1em; }
.mkl-btn { display: inline-block; padding: .9em 2em; border: 1px solid var(--acc); color: var(--acc); font-size: .78em; letter-spacing: .2em; text-transform: uppercase; }
.mkl-link { color: var(--acc); font-weight: 600; letter-spacing: .06em; opacity: 1; }
.mkl-p { font-size: .95em; line-height: 1.7; opacity: .78; max-width: 32em; }

/* 1 · Prestige */
.mkl1 .mkl-nav { background: var(--ink); color: var(--bg); border-bottom: 1px solid color-mix(in srgb, var(--acc) 45%, transparent); }
.mkl1 .mkl-hero { background: var(--ink); color: var(--bg); text-align: center; padding: 2.6em 8em 3.4em; }
.mkl1 .mkl-rule { display: block; width: 3.5em; height: 1px; margin: 0 auto 1.6em; background: var(--acc); }
.mkl1 h3 { font-size: 3.4em; line-height: 1.12; margin-bottom: .6em; }
.mkl1 .mkl-cols { display: grid; grid-template-columns: repeat(3, 1fr); padding: 2.2em 3.4em; }
.mkl1 .mkl-cols > div { padding: 0 2em; border-left: 1px solid color-mix(in srgb, var(--ink) 14%, transparent); display: grid; gap: .6em; }
.mkl1 .mkl-cols > div:first-child { border-left: 0; padding-left: 0; }
.mkl1 .mkl-cols em { font-family: var(--serif-l); font-size: 1.8em; color: var(--acc); font-style: normal; line-height: 1; }
.mkl1 .mkl-cols b { font-family: var(--serif-l); font-size: 1.3em; font-weight: 600; }
.mkl .mk-lines span { background: color-mix(in srgb, var(--ink) 10%, transparent); }

/* 2 · Éditorial */
.mkl2 .mkl-nav { border-bottom: 1px solid color-mix(in srgb, var(--ink) 12%, transparent); }
.mkl2 .mkl-ed { display: grid; grid-template-columns: 1.35fr 1fr; gap: 3em; padding: 2.4em 3.4em; align-items: center; }
.mkl2 h3 { font-size: 3.5em; line-height: 1.05; }
.mkl2 h3 i { display: block; color: var(--acc); }
.mkl2 dl { display: grid; grid-template-columns: auto 1fr; gap: .5em 1.6em; margin: 1.4em 0 0; padding-top: 1.2em; border-top: 1px solid color-mix(in srgb, var(--ink) 15%, transparent); font-size: .85em; }
.mkl2 dt { letter-spacing: .14em; text-transform: uppercase; font-size: .82em; opacity: .55; }
.mkl2 dd { margin: 0; }
.mkl2 .mkl-arch { position: relative; aspect-ratio: 3 / 4; max-height: 21em; justify-self: center; width: 100%; border-radius: 50% 50% 0 0 / 34% 34% 0 0; background: linear-gradient(170deg, var(--soft), color-mix(in srgb, var(--acc) 55%, var(--soft))); display: grid; place-items: center; }
.mkl2 .mkl-arch span { font-family: var(--serif-l); font-size: 5em; color: var(--bg); font-style: italic; }
.mkl2 .mkl-arch small { position: absolute; bottom: 1em; font-size: .7em; letter-spacing: .14em; text-transform: uppercase; color: var(--bg); opacity: .85; }

/* 3 · Monogramme */
.mkl3 .mkl-frame3 { position: absolute; inset: 1.6em; border: 1px solid color-mix(in srgb, var(--acc) 70%, transparent); outline: 1px solid color-mix(in srgb, var(--acc) 35%, transparent); outline-offset: .45em; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 1em 3em; }
.mkl3 .mkl-mono { display: grid; place-items: center; width: 4.4em; height: 4.4em; border-radius: 50%; border: 1px solid var(--acc); font-family: var(--serif-l); font-size: 1.9em; font-style: italic; color: var(--acc); margin-bottom: .5em; }
.mkl3 .mkl-name { font-family: var(--serif-l); font-size: 2.3em; letter-spacing: .22em; margin: 0 0 .2em; }
.mkl3 .mkl-kicker { margin-bottom: 1.4em; }
.mkl3 .mkl-tag { font-family: var(--serif-l); font-style: italic; font-size: 1.7em; margin: 1.1em 0; }
.mkl3 .mkl-boxes { display: flex; gap: 1em; }
.mkl3 .mkl-boxes span { padding: .7em 1.4em; border: 1px solid color-mix(in srgb, var(--ink) 18%, transparent); font-size: .82em; letter-spacing: .06em; }

/* 4 · Colonne */
.mkl4 .mkl-col { display: grid; grid-template-columns: 38% 1fr; height: 100%; }
.mkl4 .mkl-col-l { background: var(--ink); color: var(--bg); padding: 2.4em 2.6em; display: flex; flex-direction: column; }
.mkl4 .mkl-big { margin-top: auto; font-family: var(--serif-l); font-size: 3.4em; font-style: italic; line-height: 1; color: var(--acc); }
.mkl4 .mkl-col-tel { font-size: .85em; letter-spacing: .12em; opacity: .8; }
.mkl4 .mkl-col-r { padding: 2.4em 3.2em; display: flex; flex-direction: column; }
.mkl4 .mkl-menu { margin-left: 0; justify-content: flex-end; margin-bottom: 1.8em; }
.mkl4 h3 { font-size: 2.4em; margin-bottom: .6em; }
.mkl4 ol { list-style: none; margin: 0 0 1.4em; padding: 0; }
.mkl4 li { display: flex; align-items: baseline; gap: 1.2em; padding: .75em 0; border-bottom: 1px solid color-mix(in srgb, var(--ink) 12%, transparent); font-family: var(--serif-l); font-size: 1.25em; }
.mkl4 li em { font-family: var(--sans); font-style: normal; font-size: .62em; letter-spacing: .1em; color: var(--acc); }
.mkl4 li span { margin-left: auto; color: var(--acc); font-family: var(--sans); font-size: .8em; }

/* 5 · Sérénité */
.mkl5 { background: linear-gradient(160deg, var(--bg), var(--soft)); }
.mkl5 .mkl-soft-brand { flex-direction: row; align-items: center; gap: .55em; letter-spacing: .02em; }
.mkl5 .mkl-soft-brand i { display: grid; place-items: center; width: 1.7em; height: 1.7em; border-radius: 50%; background: var(--acc); color: #fff; font-size: .85em; }
.mkl5 .mkl-soft-brand i svg { width: 1em; height: 1em; }
.mkl5 .mkl-menu { text-transform: none; letter-spacing: .02em; font-size: .9em; }
.mkl-pill { padding: .7em 1.5em; border-radius: 99em; background: var(--ink); color: var(--bg); font-size: .85em; }
.mkl5 .mkl-calm { display: grid; grid-template-columns: 1.2fr 1fr; gap: 2em; align-items: center; padding: 1.6em 3.4em; }
.mkl5 h3 { font-size: 3.6em; line-height: 1.05; }
.mkl-chips { display: flex; flex-wrap: wrap; gap: .6em; margin-top: 1.2em; }
.mkl-chips span { padding: .55em 1.2em; border-radius: 99em; background: rgba(255,255,255,.7); font-size: .85em; }
.mkl5 .mkl-blob { justify-self: center; width: 17em; height: 19em; border-radius: 48% 52% 46% 54% / 58% 56% 44% 42%; background: linear-gradient(150deg, color-mix(in srgb, var(--acc) 55%, #fff), var(--acc)); display: grid; place-items: center; }
.mkl5 .mkl-blob-in { display: grid; place-items: center; width: 7em; height: 7em; border-radius: 50%; background: rgba(255,255,255,.35); color: #fff; }
.mkl5 .mkl-blob-in svg { width: 3.4em; height: 3.4em; }

/* ===== Textures matières (vignettes et visuels des maquettes) ===== */
.mk .tx-steel { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36'%3E%3Crect width='36' height='36' fill='%238B9199'/%3E%3Crect x='5' y='7' width='13' height='4' rx='2' fill='%23BFC4CA' transform='rotate%2845 11.5 9%29'/%3E%3Crect x='5' y='25' width='13' height='4' rx='2' fill='%23BFC4CA' transform='rotate%28-45 11.5 27%29'/%3E%3Crect x='23' y='7' width='13' height='4' rx='2' fill='%23BFC4CA' transform='rotate%28-45 29.5 9%29'/%3E%3Crect x='23' y='25' width='13' height='4' rx='2' fill='%23BFC4CA' transform='rotate%2845 29.5 27%29'/%3E%3C/svg%3E") 0 0 / 4em 4em repeat, #8B9199; }
.mk .tx-water { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='40'%3E%3Crect width='80' height='40' fill='%232E7FB8'/%3E%3Cpath d='M0 12 Q20 4 40 12 T80 12' fill='none' stroke='%23fff' stroke-opacity='.28' stroke-width='2'/%3E%3Cpath d='M0 30 Q20 22 40 30 T80 30' fill='none' stroke='%23fff' stroke-opacity='.16' stroke-width='3'/%3E%3C/svg%3E") 0 0 / 7em 3.5em repeat, #2E7FB8; }
.mk .tx-elec { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='48'%3E%3Crect width='120' height='48' fill='%2322262D'/%3E%3Cpath d='M0 10 C30 4 60 18 120 10' stroke='%238A5A2E' stroke-width='5' fill='none'/%3E%3Cpath d='M0 24 C40 30 80 16 120 24' stroke='%232F6FD6' stroke-width='5' fill='none'/%3E%3Cpath d='M0 38 C30 44 70 32 120 38' stroke='%23C9B53A' stroke-width='5' fill='none'/%3E%3Cpath d='M0 38 C30 44 70 32 120 38' stroke='%233E9B4F' stroke-width='5' fill='none' stroke-dasharray='6 6'/%3E%3C/svg%3E") 0 0 / 10em 4em repeat, #22262D; }
.mk .tx-roof { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='32'%3E%3Crect width='40' height='32' fill='%236B3526'/%3E%3Cpath d='M0 0h20v10a10 6 0 0 1-20 0zM20 0h20v10a10 6 0 0 1-20 0z' fill='%23B0573B'/%3E%3Cpath d='M-10 16h20v10a10 6 0 0 1-20 0zM10 16h20v10a10 6 0 0 1-20 0zM30 16h20v10a10 6 0 0 1-20 0z' fill='%23A04E35'/%3E%3C/svg%3E") 0 0 / 3.4em 2.7em repeat, #6B3526; }
.mk .tx-wood { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='200'%3E%3Crect width='44' height='200' fill='%23B5804F'/%3E%3Crect width='2' height='200' fill='%237A4E2B'/%3E%3Cpath d='M10 0 C14 50 6 90 12 140 S8 190 11 200M24 0 C20 60 30 110 24 160 S28 190 26 200M36 0 C38 40 32 90 37 130 S34 180 36 200' stroke='%238E5D35' stroke-opacity='.45' fill='none'/%3E%3Cellipse cx='25' cy='95' rx='3' ry='7' fill='none' stroke='%237A4E2B' stroke-opacity='.5'/%3E%3C/svg%3E") 0 0 / 3.4em 15em repeat, #B5804F; }
.mk .tx-radiator { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='100'%3E%3Crect width='24' height='100' fill='%23E4DACB'/%3E%3Crect x='3' y='4' width='18' height='92' rx='9' fill='%23FBF8F3' stroke='%23D2C6B5'/%3E%3Crect x='9' y='12' width='6' height='76' rx='3' fill='%23EFE8DD'/%3E%3C/svg%3E") 0 0 / 2em 8.3em repeat, #ECE5DA; }
.mk .tx-brick { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='30'%3E%3Crect width='60' height='30' fill='%23E2D3C1'/%3E%3Crect x='1' y='1' width='58' height='13' fill='%23A9553A'/%3E%3Crect x='-29' y='16' width='58' height='13' fill='%23B4603F'/%3E%3Crect x='31' y='16' width='58' height='13' fill='%239C4C33'/%3E%3C/svg%3E") 0 0 / 4.2em 2.1em repeat, #A9553A; }
.mk .tx-leaf { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Crect width='60' height='60' fill='%233F6B3A'/%3E%3Ccircle cx='10' cy='12' r='11' fill='%235C8F4E'/%3E%3Ccircle cx='38' cy='8' r='9' fill='%234E7F45'/%3E%3Ccircle cx='50' cy='34' r='12' fill='%236FA35C'/%3E%3Ccircle cx='22' cy='40' r='13' fill='%234A7A41'/%3E%3Ccircle cx='6' cy='56' r='9' fill='%236FA35C'/%3E%3Ccircle cx='40' cy='58' r='8' fill='%235C8F4E'/%3E%3C/svg%3E") 0 0 / 5em 5em repeat, #3F6B3A; }
.mk .tx-tile { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='50' height='50'%3E%3Crect width='50' height='50' fill='%23F4F1EC'/%3E%3Crect x='1' y='1' width='23' height='23' fill='%23E4DED4'/%3E%3Crect x='26' y='1' width='23' height='23' fill='%23D6CEC1'/%3E%3Crect x='1' y='26' width='23' height='23' fill='%23D9D2C7'/%3E%3Crect x='26' y='26' width='23' height='23' fill='%23E8E3DA'/%3E%3C/svg%3E") 0 0 / 4.4em 4.4em repeat, #D9D2C7; }
.mk .tx-blueprint { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Crect width='60' height='60' fill='%231F4E8C'/%3E%3Cpath d='M0 .5H60M.5 0V60' stroke='%23fff' stroke-opacity='.35'/%3E%3Cpath d='M0 15.5H60M0 30.5H60M0 45.5H60M15.5 0V60M30.5 0V60M45.5 0V60' stroke='%23fff' stroke-opacity='.12'/%3E%3C/svg%3E") 0 0 / 5em 5em repeat, #1F4E8C; }
.mk .tx-foam { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Crect width='60' height='60' fill='%23BFE6EA'/%3E%3Ccircle cx='12' cy='14' r='8' fill='%23fff' fill-opacity='.55'/%3E%3Ccircle cx='40' cy='22' r='5' fill='none' stroke='%23fff' stroke-width='1.5'/%3E%3Ccircle cx='28' cy='46' r='10' fill='none' stroke='%23fff' stroke-opacity='.8' stroke-width='1.5'/%3E%3Ccircle cx='52' cy='50' r='4' fill='%23fff' fill-opacity='.7'/%3E%3C/svg%3E") 0 0 / 5em 5em repeat, #BFE6EA; }
.mk .tx-kraft { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Crect width='80' height='80' fill='%23C49B6C'/%3E%3Cpath d='M0 20h80M0 47h80M0 71h80' stroke='%23B48A5C' stroke-opacity='.5'/%3E%3Cpath d='M5 10l3 1M30 33l4 1M60 58l3 1M50 14l4-1M18 62l3-1' stroke='%239C7348' stroke-opacity='.6'/%3E%3C/svg%3E") 0 0 / 6em 6em repeat, #C49B6C; }
.mk .tx-steel { background-image: linear-gradient(115deg, rgba(255,255,255,.25), transparent 40%, rgba(0,0,0,.15)), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36'%3E%3Crect width='36' height='36' fill='%238B9199'/%3E%3Crect x='5' y='7' width='13' height='4' rx='2' fill='%23BFC4CA' transform='rotate%2845 11.5 9%29'/%3E%3Crect x='5' y='25' width='13' height='4' rx='2' fill='%23BFC4CA' transform='rotate%28-45 11.5 27%29'/%3E%3Crect x='23' y='7' width='13' height='4' rx='2' fill='%23BFC4CA' transform='rotate%28-45 29.5 9%29'/%3E%3Crect x='23' y='25' width='13' height='4' rx='2' fill='%23BFC4CA' transform='rotate%2845 29.5 27%29'/%3E%3C/svg%3E"); background-size: auto, 4em 4em; }
.mk .tx-paint { background: repeating-linear-gradient(112deg, hsl(var(--h) 55% 62%) 0 3.2em, hsl(calc(var(--h) + 35) 50% 70%) 3.2em 5.6em, #F3EEE6 5.6em 6.4em, hsl(calc(var(--h) - 25) 45% 55%) 6.4em 8.6em); }
.mk .tx-glass { background: linear-gradient(90deg, transparent calc(50% - .25em), rgba(255,255,255,.9) calc(50% - .25em) calc(50% + .25em), transparent calc(50% + .25em)), linear-gradient(0deg, transparent calc(50% - .25em), rgba(255,255,255,.9) calc(50% - .25em) calc(50% + .25em), transparent calc(50% + .25em)), repeating-linear-gradient(125deg, rgba(255,255,255,.32) 0 .6em, transparent .6em 4em), linear-gradient(140deg, #A9CFE0, #5D8EAB); }
.mk .tx-plaster { background: radial-gradient(ellipse 3em 1em at 20% 30%, rgba(0,0,0,.05), transparent 70%), radial-gradient(ellipse 4em 1.2em at 70% 60%, rgba(0,0,0,.05), transparent 70%), radial-gradient(ellipse 3em .9em at 40% 85%, rgba(255,255,255,.6), transparent 70%), #EAE4DB; background-size: 9em 6em; }
.mk .tx-kraft { box-shadow: inset 0 -2.6em 0 -1.4em rgba(0,0,0,0); }

/* ===== v1.7 : monogrammes, carte devis, matières ===== */
.mk-logo i.mk-mono { font-style: normal; font-size: .72em; font-weight: 800; letter-spacing: .02em; width: 2.5em; height: 2.5em; }
.mk4 .mk-logo i.mk-mono { border-radius: 50%; }
.mk5 .mk-logo i.mk-mono { border-radius: 0; }
.mk-logo.mk-word { font-family: Georgia, serif; font-weight: 400; font-size: 1.4em; letter-spacing: .06em; font-style: italic; }

.mk1 .mk-hero { position: relative; grid-template-columns: 1.35fr 1fr; gap: 2em; overflow: hidden; }
.mk1 .mk-hero > * { position: relative; z-index: 1; }
.mk1 .mk-hero .mk-hero-tex { position: absolute; z-index: 0; inset: 0 0 0 45%; opacity: .45; -webkit-mask-image: linear-gradient(90deg, transparent, #000 55%); mask-image: linear-gradient(90deg, transparent, #000 55%); }
.mk-quote-card { justify-self: end; width: 100%; max-width: 21em; background: #fff; color: #222; border-radius: .8em; padding: 1.4em; display: grid; gap: .6em; box-shadow: 0 1em 2.4em rgba(0,0,0,.3); }
.mk-quote-card b { font-size: 1.05em; color: var(--d); }
.mk-field { display: block; padding: .6em .8em; border: 1px solid #E1E3E8; border-radius: .45em; font-size: .78em; color: #858A94; background: #FAFAFB; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-quote-card .mk-btn { justify-content: center; margin-top: .2em; }
.mk1 .mk-card { gap: .35em; }
.mk1 .mk-card small { color: var(--a); font-weight: 700; font-size: .8em; letter-spacing: .08em; }
.mk1 .mk-card b { font-size: 1.05em; }
.mk-desc { font-size: .85em; color: #6A6F78; }
.mk-more { font-size: .8em; font-weight: 600; color: var(--a); margin-top: .3em; }

.mk3 .mk-tile { box-shadow: inset 0 -5em 3em -2em rgba(0,0,0,.55); }
.mk3 .mk-tile svg { display: none; }
.mk3 .mk-t1 { background-position: 2.2em 1.4em; filter: brightness(1.06) saturate(.85); }
.mk3 .mk-t2 { background-position: 4em .8em; filter: brightness(.9) sepia(.15); }
.mk3 .mk-tile em { position: absolute; top: .8em; left: .8em; padding: .25em .7em; background: rgba(255,255,255,.9); color: #2B2620; font: 600 .7em var(--sans); letter-spacing: .1em; text-transform: uppercase; font-style: normal; border-radius: 99em; }

.mk4 .mk-ba { overflow: hidden; padding: 0; display: block; }
.mk4 .mk-ba > span { position: absolute; top: 0; bottom: 0; }
.mk4 .mk-before { left: 0; width: 50%; filter: grayscale(.85) brightness(.75) contrast(.9); }
.mk4 .mk-after { right: 0; width: 50%; background-position: -50% 0; }
.mk4 .mk-ba em { position: absolute; bottom: .9em; padding: .3em .8em; border-radius: 99em; background: rgba(0,0,0,.55); color: #fff; font: 600 .75em var(--sans); font-style: normal; letter-spacing: .06em; }
.mk4 .mk-before em { left: .9em; }
.mk4 .mk-after em { right: .9em; }
.mk4 .mk-handle { position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: #fff; }
.mk4 .mk-handle::after { content: "⟷"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: grid; place-items: center; width: 2.2em; height: 2.2em; border-radius: 50%; background: #fff; color: #333; font-size: .9em; font-style: normal; box-shadow: 0 .3em .8em rgba(0,0,0,.25); }

.mkl5 .mkl-soft-brand i { font-style: normal; font-family: var(--serif-l); font-size: .8em; }
.mkl5 .mkl-blob-in { font-family: var(--serif-l); font-style: italic; font-size: 3em; width: 2.3em; height: 2.3em; }

.mk3 .mk-tile[class*='tx-'] { background-color: transparent; }

/* Modèle signature */
.mk-sig { display: grid; grid-template-columns: 1.25fr 1fr; gap: 48px; align-items: center; margin: 40px 0 0; }
.mk-sig-shot { display: block; height: 560px; overflow: hidden; border-radius: 14px; border: 1px solid var(--line); box-shadow: 0 20px 50px rgba(59,51,72,.18); }
.mk-sig-shot img { display: block; width: 100%; height: auto; transition: transform 6s ease; }
.mk-sig-shot:hover img { transform: translateY(calc(-100% + 560px)); }
.mk-sig h3 { font-size: 1.7rem; }
.mk-sig figcaption > p { color: var(--ink-soft); }
.mk-sig-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.mk-more-title { margin: 64px 0 0; font-size: 1.4rem; }
.hub-sig { display: block; aspect-ratio: 16 / 10; }
.hub-sig img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
@media (max-width: 820px) { .mk-sig { grid-template-columns: 1fr; } .mk-sig-shot { height: 380px; } .mk-sig-shot:hover img { transform: none; } }
@media (prefers-reduced-motion: reduce) { .mk-sig-shot img { transition: none; } }