/* MeetCraft, direction éditoriale de la page d’accueil. */
@font-face {
  font-family: "Manrope"; src: url("manrope-latin.woff2") format("woff2");
  font-weight: 400 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Playfair Display"; src: url("playfair-display-latin.woff2") format("woff2");
  font-weight: 600 900; font-style: normal; font-display: swap;
}
.mc-public-page, #meetcraft-motion {
  --ink: #211713; --ink-muted: #57463d;
  --paper: #f7efe1; --paper-deep: #efe1cd; --paper-muted: #e6d4bf;
  --pressed-paper: #fff5e5; --vermilion: #c8321b; --vermilion-hover: #a82614;
  --rule: #c8b59d; --paper-rule: #a9947c; --shadow: #31170f27;
  --mc-materials: url("papier-vermillon.webp");
  --display: "Playfair Display", Georgia, serif;
  --sans: "Manrope", system-ui, sans-serif;
  --mono: ui-monospace, Menlo, monospace;
}
.mc-public-page, #meetcraft-motion {
  background: var(--paper); color: var(--ink); font: 500 1rem/1.55 var(--sans);
}
.mc-public-page { margin: 0; }
#meetcraft-motion { container-type: inline-size; }
.mc-public-page *, #meetcraft-motion *, #meetcraft-motion *::before, #meetcraft-motion *::after { box-sizing: border-box; }
.mc-public-page a, #meetcraft-motion a { color: inherit; text-decoration: none; }
.mc-public-page .mc-cta, #meetcraft-motion .mc-cta {
  display: inline-flex; min-height: 44px; align-items: center; background: var(--vermilion); color: white;
  padding: .65em 1.08em; border-radius: 2px; font-weight: 800; line-height: 1.2;
}
.mc-public-page .mc-cta:hover, #meetcraft-motion .mc-cta:hover { background: var(--vermilion-hover); }
.mc-public-page .mc-head {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 9px max(2.7vw, calc((100% - 1512px) / 2)); border-bottom: 1px solid var(--ink);
}
.mc-public-page .mc-brand { font: 900 clamp(26px, 3.3vw, 47px)/1.18 var(--display); letter-spacing: -.04em; }
.mc-public-page .mc-brand-lockup { display: inline-flex; align-items: center; gap: .23em; white-space: nowrap; }
.mc-public-page .mc-brand-lockup img { flex: none; width: .97em; height: auto; }
.mc-public-page .mc-nav { display: flex; align-items: center; gap: clamp(10px, 2.6vw, 38px); }
.mc-public-page .mc-nav a { font-size: clamp(12px, 1.15vw, 16px); font-weight: 650; }
#meetcraft-motion .mc-hero { display: grid; grid-template-columns: minmax(0, .985fr) minmax(0, 1.015fr); max-width: 1600px; margin-inline: auto; }
#meetcraft-motion .mc-copy { align-self: center; padding: 4.3cqw 2.2cqw 4.2cqw; min-inline-size: 0; }
#meetcraft-motion .mc-copy h1 {
  color: var(--ink); margin: 0; font: 900 clamp(33px, 5.1cqw, 76px)/1.03 var(--display);
  letter-spacing: -.04em;
}
#meetcraft-motion .mc-lede { font-size: clamp(15px, 2.12cqw, 31px); line-height: 1.36; margin: 2.4cqw 0 2.65cqw; max-width: 28ch; }
#meetcraft-motion .mc-links { display: flex; flex-wrap: wrap; gap: .7em 1em; align-items: center; font-size: clamp(12px, 1.63cqw, 24px); }
#meetcraft-motion .mc-example { text-decoration: underline; text-underline-offset: .25em; font-weight: 750; }
#meetcraft-motion .mc-free { font-size: clamp(12px, 1.4cqw, 20px); margin: 1.1cqw 0 0; }
#meetcraft-motion .mc-stage {
  position: relative; width: 100%; aspect-ratio: 1.18; isolation: isolate; overflow: clip;
  container-type: size;
  background: var(--vermilion) var(--mc-materials) no-repeat right center / 200% 100%;
}
#meetcraft-motion .mc-ribbons {
  position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none;
}
#meetcraft-motion .mc-sheet {
  position: absolute; width: 56%; height: 80%; color: var(--ink);
  background-color: var(--pressed-paper);
  background-image: linear-gradient(128deg, #fff7e945, #825b3820), var(--mc-materials);
  background-position: left top;
  background-size: 100% 100%, 200% 100%;
  border: 1px solid #fff5df;
  box-shadow: 1px 2px 0 #d4bba1, 1px 3px 1px #a87f64, 16px 18px 3px #530d09a8, 24px 28px 30px #530b0b88;
  padding: 4.2cqw; transform-origin: 55% 75%;
}
#meetcraft-motion .mc-transcript { left: 9%; top: 8%; transform: rotate(-10deg); overflow: hidden; }
#meetcraft-motion .mc-transcript h3 { margin: 0 0 2.3cqw; font: 800 4.9cqw/1.04 var(--display); }
#meetcraft-motion .mc-transcript ol { display: grid; gap: 2.6cqw; list-style: none; padding: 0; margin: 0; font: 500 1.95cqw/1.55 var(--mono); }
#meetcraft-motion .mc-transcript li { display: grid; grid-template-columns: 6.5cqw 1fr; gap: .7cqw; }
#meetcraft-motion .mc-transcript time { color: #68493d; }
#meetcraft-motion .mc-mark {
  display: inline-block; padding: 0 .3em; color: inherit; white-space: nowrap;
  background: linear-gradient(90deg, #fa5b3954, #fa5b3954) no-repeat left center / 0% 100%;
}
#meetcraft-motion .mc-scan {
  position: absolute; inset: 0 0 auto; height: 1px; opacity: 0;
  background: #e0290c; box-shadow: 0 -8px 19px 7px #fb492568;
}
#meetcraft-motion .mc-report { left: 36.5%; top: 9.5%; transform: rotate(2.5deg); }
#meetcraft-motion .mc-report small { display: block; font: 600 italic 2.45cqw/1.2 var(--display); }
#meetcraft-motion .mc-report h3 {
  margin: 1.6cqw 0 2.7cqw; font: 900 8.4cqw/.96 var(--display); letter-spacing: -.04em;
}
#meetcraft-motion .mc-rule { height: .62cqw; background: var(--vermilion); margin-bottom: 2.6cqw; transform-origin: left; }
#meetcraft-motion .mc-report h4 { margin: 0 0 .9cqw; font: 850 4.45cqw/1.1 var(--display); }
#meetcraft-motion .mc-report p { margin: 0; font: 600 max(10px, 2.65cqw)/1.44 var(--display); }
#meetcraft-motion .mc-report .mc-actions { margin-top: 3.4cqw; }
#meetcraft-motion .mc-report .mc-row { display: flex; gap: 1.2cqw; align-items: baseline; margin-top: .66cqw; }
#meetcraft-motion .mc-tick {
  flex: none; width: 2.35cqw; height: 1.2cqw; border: solid var(--vermilion); border-width: 0 0 .44cqw .44cqw;
  transform: rotate(-45deg) translateY(-.5cqw); transform-origin: center;
}
#meetcraft-motion .mc-stamp {
  position: absolute; right: 4cqw; bottom: 4cqw; padding: .62cqw 1.2cqw;
  color: #92240f; border: 1px solid currentColor; font: 800 1.9cqw/1.3 var(--sans);
  transform: rotate(-5deg); letter-spacing: .015em;
}

#meetcraft-motion .mc-scene { min-width: 0; margin: 0; background: var(--ink); }
#meetcraft-motion .mc-control-row {
  display: flex; align-items: center; gap: 12px;
  min-height: 48px; padding: 0 clamp(12px, 2.2cqw, 32px);
  background: var(--ink); color: var(--paper); font: 650 .8rem/1.25 var(--sans);
}
#meetcraft-motion .mc-control-row[hidden], #meetcraft-motion .mc-control-row [hidden] { display: none; }
#meetcraft-motion .mc-control-row button {
  min-height: 44px; border: 0; padding: 0 .3rem; color: inherit; background: transparent; font: inherit; cursor: pointer;
}
#meetcraft-motion .mc-control-row button:hover { text-decoration: underline; text-underline-offset: .2em; }
#meetcraft-motion .mc-control-row input { flex: 1 1 3rem; min-width: 2.75rem; margin: 0; accent-color: var(--paper); }
#meetcraft-motion .mc-phase { min-width: 9.2rem; text-align: end; color: var(--paper-muted); }
#meetcraft-motion .mc-control-row :focus-visible { outline-color: var(--paper); }

.mc-wrap { width: min(100% - 5.4vw, 1312px); margin-inline: auto; }
#meetcraft-motion .mc-steps { color: var(--paper); background: var(--ink); padding: clamp(36px, 5.3cqw, 82px) 0; }
#meetcraft-motion .mc-steps h2, #meetcraft-motion .mc-section h2, #meetcraft-motion .mc-closing h2 {
  margin: 0; font: 850 clamp(2.3rem, 4.55cqw, 4.6rem)/1.04 var(--display); letter-spacing: -.037em;
}
#meetcraft-motion .mc-steps ol {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); list-style: none;
  border-top: 1px solid var(--paper-rule); padding: 0; margin: clamp(24px, 3.3cqw, 48px) 0 0;
}
#meetcraft-motion .mc-steps li { padding: clamp(18px, 2cqw, 28px) 0 0; }
#meetcraft-motion .mc-steps li + li { padding-inline-start: clamp(16px, 3cqw, 45px); border-left: 1px solid var(--paper-rule); }
#meetcraft-motion .mc-steps h3 { margin: 0 0 8px; font: 800 clamp(1.5rem, 2.9cqw, 2.9rem)/1.13 var(--display); }
#meetcraft-motion .mc-steps p { margin: 0; padding-inline-end: 12px; max-width: 28ch; color: var(--paper-muted); }

#meetcraft-motion .mc-section { padding: clamp(52px, 7cqw, 110px) 0; }
#meetcraft-motion .mc-section-heading {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
  align-items: end; gap: 24px; margin-bottom: clamp(24px, 3.9cqw, 54px);
}
#meetcraft-motion .mc-section-heading p { margin: 0; max-width: 34ch; font-size: clamp(1rem, 1.38cqw, 1.25rem); }
#meetcraft-motion .mc-example-grid {
  display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr);
  align-items: start; gap: 22px clamp(24px, 4cqw, 54px);
}
#meetcraft-motion .mc-report-link { display: flex; flex-direction: column; border-top: 1px solid var(--rule); padding-top: 12px; }
#meetcraft-motion .mc-report-link-main { grid-row: span 2; }
#meetcraft-motion .mc-report-image {
  display: grid; place-items: start center; overflow: clip; background: var(--paper-deep);
  aspect-ratio: 2.7; padding: 10px 14px 0;
}
#meetcraft-motion .mc-report-link-main .mc-report-image { aspect-ratio: 1.73; padding: 16px 20px 0; }
#meetcraft-motion .mc-report-image img {
  display: block; width: 100%; height: 100%; object-fit: cover; object-position: top;
  box-shadow: 0 10px 18px var(--shadow);
}
#meetcraft-motion .mc-report-label { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding-top: 10px; }
#meetcraft-motion .mc-report-label h3 { margin: 0; font: 800 clamp(1.25rem, 2.05cqw, 2rem)/1.16 var(--display); }
#meetcraft-motion .mc-report-label p { margin: 4px 0 0; color: var(--ink-muted); }
#meetcraft-motion .mc-report-arrow { font-size: 1.55rem; color: var(--vermilion); }
#meetcraft-motion .mc-report-link:hover h3 { text-decoration: underline; text-underline-offset: .2em; }

#meetcraft-motion .mc-import { background: var(--paper-deep); }
#meetcraft-motion .mc-import-grid {
  display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; gap: clamp(26px, 5cqw, 72px);
}
#meetcraft-motion .mc-import p { max-width: 42ch; margin: 18px 0; font-size: clamp(1rem, 1.36cqw, 1.2rem); }
#meetcraft-motion .mc-import .mc-compatible { color: var(--ink-muted); font-size: 1rem; }
#meetcraft-motion .mc-demo { margin: 0; min-width: 0; }
#meetcraft-motion .mc-demo video { display: block; width: 100%; aspect-ratio: 16 / 9; background: var(--ink); }
#meetcraft-motion .mc-demo figcaption { margin-top: 8px; color: var(--ink-muted); font-size: .84rem; }

#meetcraft-motion .mc-pricing-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; border-block: 1px solid var(--rule); }
#meetcraft-motion .mc-plan { display: flex; flex-direction: column; align-items: start; padding: clamp(24px, 4.7cqw, 62px); }
#meetcraft-motion .mc-plan + .mc-plan { border-inline-start: 1px solid var(--rule); background: var(--paper-deep); }
#meetcraft-motion .mc-plan h3 { margin: 0; font: 850 1.75rem/1.1 var(--display); }
#meetcraft-motion .mc-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 .65rem; margin: 10px 0 22px; }
#meetcraft-motion .mc-price strong { font: 850 clamp(2.9rem, 5.5cqw, 5.5rem)/1.12 var(--display); letter-spacing: -.04em; }
#meetcraft-motion .mc-price span { white-space: nowrap; }
#meetcraft-motion .mc-plan ul { list-style: none; padding: 0; margin: 0 0 24px; width: 100%; }
#meetcraft-motion .mc-plan li { border-top: 1px solid var(--rule); padding: 8px 0; }
#meetcraft-motion .mc-plan .mc-cta { margin-top: auto; }
#meetcraft-motion .mc-referral { margin: 0 0 22px; color: var(--ink-muted); }
#meetcraft-motion .mc-closing { padding: clamp(32px, 5.8cqw, 80px) 0; background: var(--vermilion); color: white; }
#meetcraft-motion .mc-closing .mc-wrap { display: flex; justify-content: space-between; align-items: center; gap: 20px 36px; flex-wrap: wrap; }
#meetcraft-motion .mc-closing .mc-cta { color: var(--ink); background: var(--paper); }
#meetcraft-motion .mc-closing .mc-cta:hover { background: white; }
#meetcraft-motion .mc-closing :focus-visible { outline-color: var(--paper); }
.mc-public-page .mc-footer { padding: clamp(24px, 4vw, 56px) 0; }
.mc-public-page .mc-footer .mc-wrap { display: flex; align-items: center; justify-content: space-between; gap: 14px 26px; flex-wrap: wrap; }
.mc-public-page .mc-footer nav { display: flex; gap: 8px 18px; flex-wrap: wrap; }
.mc-public-page .mc-footer nav a { text-decoration: underline; text-underline-offset: .2em; }
.mc-public-page .mc-footer p { margin: 0; color: var(--ink-muted); }
.mc-public-page .mc-skip { position: absolute; z-index: 10; top: 10px; left: 10px; padding: .65rem 1rem; background: var(--paper); transform: translateY(-180%); }
.mc-public-page .mc-skip:focus { transform: none; }
.mc-public-page :focus-visible, #meetcraft-motion :focus-visible { outline: 2px solid var(--vermilion); outline-offset: 3px; }

@container (max-width: 720px) {
  #meetcraft-motion .mc-hero { grid-template-columns: minmax(0, 1fr); }
  #meetcraft-motion .mc-copy { padding: 33px 20px 30px; }
  #meetcraft-motion .mc-copy h1 { font-size: clamp(2.3rem, 8.5cqw, 4rem); }
  #meetcraft-motion .mc-lede { margin: 15px 0 18px; }
  #meetcraft-motion .mc-free { margin-top: 9px; }
  #meetcraft-motion .mc-stage { aspect-ratio: 1.05; }
  #meetcraft-motion .mc-section-heading,
  #meetcraft-motion .mc-import-grid,
  #meetcraft-motion .mc-example-grid { grid-template-columns: minmax(0, 1fr); }
  #meetcraft-motion .mc-report-link-main { grid-row: auto; }
  #meetcraft-motion .mc-example-grid { gap: 22px; }
}
@container (max-width: 515px) {
  #meetcraft-motion .mc-steps ol, #meetcraft-motion .mc-pricing-grid { grid-template-columns: minmax(0, 1fr); }
  #meetcraft-motion .mc-steps li + li { padding-inline-start: 0; margin-top: 16px; border-left: 0; border-top: 1px solid var(--paper-rule); }
  #meetcraft-motion .mc-plan + .mc-plan { border-inline-start: 0; border-top: 1px solid var(--rule); }
  #meetcraft-motion .mc-phase { min-width: 0; font-size: .7rem; }
  #meetcraft-motion .mc-control-row { gap: 9px; }
}
@media (max-width: 600px) {
  .mc-public-page .mc-head { padding: 8px 16px; }
  .mc-public-page .mc-nav { gap: 10px; }
  .mc-public-page .mc-nav .mc-nav-secondary { display: none; }
  .mc-wrap { width: calc(100% - 40px); }
}
@media (max-width: 360px) {
  .mc-public-page .mc-head { padding-inline: 12px; gap: 8px; }
  .mc-public-page .mc-brand-lockup { font-size: 23px; }
  .mc-public-page .mc-nav { gap: 8px; }
  .mc-public-page .mc-nav .mc-cta { padding-inline: .8em; }
}
@media (prefers-reduced-motion: reduce) {
  html:has(.mc-public-page), html:has(.mc-landing-app) { scroll-behavior: auto; }
}