@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,200..600;1,6..72,300..500&family=Hanken+Grotesk:wght@300;400;500&family=IBM+Plex+Mono:wght@400&display=swap');

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; overflow-x: hidden; background: #F7F4F0; color: #2B1E1E; font-family: 'Hanken Grotesk', 'Helvetica Neue', Helvetica, sans-serif; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
a { color: #6E2D3D; text-decoration: none; transition: color .25s ease, background-color .25s ease, border-color .25s ease; }
a:hover { color: #CBA96A; }
p { text-wrap: pretty; }
input, button { font: inherit; }
::selection { background: #C9A9B4; color: #2B1E1E; }

@keyframes mjl-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.mjl-reveal { opacity: 0; transform: translateY(24px); transition: opacity 1.15s cubic-bezier(.22,.72,.2,1), transform 1.15s cubic-bezier(.22,.72,.2,1); }
.mjl-reveal.mjl-visible { opacity: 1; transform: none; }

.mjl-photo { background-color:#E9E2DA; background-image:var(--mjl-photo, var(--mjl-default-photo, repeating-linear-gradient(135deg, rgba(43,30,30,.055) 0 1px, transparent 1px 10px))); background-position:center; background-size:cover; background-repeat:no-repeat; display:flex; align-items:flex-end; padding:24px; }
.mjl-photo[style] > span { display:none; }
.mjl-hero-backdrop { position:absolute; inset:0 0 0 auto; width:60%; background-image:var(--mjl-hero-image, url('mjl-fond-debout.jpg')); background-position:72% center; background-size:cover; background-repeat:no-repeat; -webkit-mask-image:linear-gradient(90deg, transparent 0%, rgba(0,0,0,.02) 14%, rgba(0,0,0,.11) 28%, rgba(0,0,0,.27) 43%, rgba(0,0,0,.5) 57%, rgba(0,0,0,.81) 71%, #000 78%); mask-image:linear-gradient(90deg, transparent 0%, rgba(0,0,0,.02) 14%, rgba(0,0,0,.11) 28%, rgba(0,0,0,.27) 43%, rgba(0,0,0,.5) 57%, rgba(0,0,0,.81) 71%, #000 78%); pointer-events:none; }
.mjl-hero-top-gradient { position:absolute; inset:0 0 auto auto; width:70%; height:340px; background:linear-gradient(180deg, rgba(43,30,30,.96) 0, rgba(43,30,30,.9) 90px, rgba(43,30,30,.66) 170px, rgba(43,30,30,.3) 250px, transparent 340px); pointer-events:none; }
.mjl-about-photo { height:600px; background-position:55% 18%; }
.mjl-service-photo { height:460px; }
.mjl-resource-photo { height:260px; margin-top:40px; }
.mjl-photo-dark { background-color:#4A2C3D; }
.mjl-approach-backdrop { position:absolute; inset:0 0 0 auto; width:62%; background:linear-gradient(rgba(43,30,30,.62),rgba(43,30,30,.62)),var(--mjl-approach-image,url('mjl-fond-foret-d.jpg')) 100% center/cover no-repeat; opacity:.85; -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.14) 14%,rgba(0,0,0,.32) 24%,rgba(0,0,0,.58) 34%,rgba(0,0,0,.82) 44%,#000 58%); mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.14) 14%,rgba(0,0,0,.32) 24%,rgba(0,0,0,.58) 34%,rgba(0,0,0,.82) 44%,#000 58%); pointer-events:none; }
.mjl-cta-backdrop { position:absolute; inset:0 0 0 auto; width:82%; background:var(--mjl-cta-image,url('mjl-fond-assise-d.jpg')) 100% center/cover no-repeat; opacity:.82; -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.02) 14%,rgba(0,0,0,.11) 28%,rgba(0,0,0,.27) 43%,rgba(0,0,0,.5) 57%,rgba(0,0,0,.81) 71%,#000 78%); mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.02) 14%,rgba(0,0,0,.11) 28%,rgba(0,0,0,.27) 43%,rgba(0,0,0,.5) 57%,rgba(0,0,0,.81) 71%,#000 78%); pointer-events:none; }

.mjl-resource-form { max-width:400px; }
.mjl-resource-form form { display:flex; flex-direction:column; gap:14px; }
.mjl-resource-form input { width:100%; border:0; border-bottom:1px solid rgba(43,30,30,.35); background:transparent; padding:14px 2px; font-size:15px; color:#2B1E1E; outline:none; }
.mjl-resource-form button { margin-top:12px; border:0; background:#2B1E1E; color:#F7F4F0; font-size:11px; letter-spacing:.2em; text-transform:uppercase; padding:19px 28px; cursor:pointer; }
.mjl-resource-form button:hover { background:#6E2D3D; }
.mjl-form-placeholder { max-width:400px; padding:18px; border:1px dashed rgba(43,30,30,.35); font-size:14px; line-height:1.6; }

@media (max-width: 1100px) {
  [data-screen-label="Hero A · Espresso"] > header { padding:26px 34px !important; }
  [data-screen-label="Hero A · Espresso"] > header nav { gap:18px !important; }
  [data-screen-label="Hero A · Espresso"] > div:last-child { grid-template-columns:1fr 1fr !important; }
  [data-screen-label="Hero A · Espresso"] h1 { font-size:82px !important; }
  section { padding-left:34px !important; padding-right:34px !important; }
}

@media (max-width: 767px) {
  [data-screen-label="Hero A · Espresso"] > header { padding:22px 20px !important; }
  [data-screen-label="Hero A · Espresso"] > header nav { display:none !important; }
  [data-screen-label="Hero A · Espresso"] > header img { height:76px !important; }
  [data-screen-label="Hero A · Espresso"] > div:last-child { display:flex !important; flex-direction:column !important; min-height:0 !important; }
  [data-screen-label="Hero A · Espresso"] > div:last-child > div:first-child { padding:68px 20px 64px !important; }
  [data-screen-label="Hero A · Espresso"] h1 { font-size:59px !important; }
  [data-screen-label="Hero A · Espresso"] h1 + div { margin:30px 0 24px !important; }
  [data-screen-label="Hero A · Espresso"] p { font-size:16px !important; }
  [data-screen-label="Hero A · Espresso"] [data-reveal="0.26"] { align-items:flex-start !important; flex-direction:column !important; gap:22px !important; }
  .mjl-hero-backdrop { width:100%; opacity:.42; -webkit-mask-image:none; mask-image:none; }
  .mjl-hero-top-gradient { width:100%; }
  .mjl-approach-backdrop,.mjl-cta-backdrop { width:100%; opacity:.28; -webkit-mask-image:none; mask-image:none; }
  section { padding:76px 20px !important; }
  section > div[style*="display:grid"], section div[style*="grid-template-columns:1fr 1fr"], section div[style*="grid-template-columns:.86fr 1.14fr"], section div[style*="grid-template-columns:.9fr 1.1fr"], section div[style*="grid-template-columns:1.1fr .9fr"], footer > div > div[style*="grid-template-columns"] { display:flex !important; flex-direction:column !important; gap:44px !important; }
  [data-screen-label="Services"] > div > div:first-child { align-items:flex-start !important; flex-direction:column !important; gap:24px !important; margin-bottom:42px !important; }
  [data-screen-label="Services"] > div > div:first-child h2,
  [data-screen-label="Services"] > div > div:first-child p { white-space:normal !important; text-align:left !important; }
  [data-screen-label="Services"] [data-reveal] { padding:48px 0 !important; }
  [data-screen-label="Services"] [data-reveal] > .mjl-photo { order:0; width:100%; }
  [data-screen-label="Services"] [data-reveal] > div:not(.mjl-photo) { order:1; }
  h2 { font-size:44px !important; }
  blockquote p { font-size:28px !important; }
  footer[data-screen-label="Pied de page"] { padding:72px 20px 34px !important; }
  footer[data-screen-label="Pied de page"] > div > div:last-child { align-items:flex-start !important; flex-direction:column !important; }
  footer[data-screen-label="Pied de page"] > div > div:last-child > div:last-child { flex-direction:column !important; gap:14px !important; }
}

/* Kajabi's mobile editor can render its preview slightly wider than the
   visible phone frame. These explicit component rules keep every editorial
   grid fluid in both the editor preview and on a real phone. */
@media (max-width: 900px) {
  [data-screen-label="Hero A · Espresso"] > div:last-child {
    display:block !important;
    min-height:0 !important;
  }
  [data-screen-label="Hero A · Espresso"] > div:last-child > div:last-child {
    display:none !important;
    min-height:0 !important;
  }

  .mjl-about-layout,
  .mjl-about-copy,
  .mjl-service-row,
  .mjl-approach-pillars,
  .mjl-footer-grid {
    display:flex !important;
    flex-direction:column !important;
    width:100% !important;
    max-width:100% !important;
  }

  .mjl-about-layout { gap:48px !important; }
  .mjl-about-copy { gap:26px !important; }
  .mjl-about-layout > div,
  .mjl-about-copy > div,
  .mjl-service-row > div,
  .mjl-approach-pillars > div,
  .mjl-footer-grid > div { min-width:0 !important; width:100% !important; }

  .mjl-about-photo { width:100% !important; height:420px !important; background-position:55% 18%; }

  .mjl-approach-pillars { gap:0 !important; padding-top:48px !important; }
  .mjl-approach-pillars > div { padding:30px 0 !important; border-bottom:1px solid rgba(247,244,240,.14); }

  [data-screen-label="Services"] .mjl-service-row { gap:30px !important; padding:48px 0 !important; }
  [data-screen-label="Services"] .mjl-service-row > .mjl-photo { order:0 !important; width:100% !important; height:300px !important; }
  [data-screen-label="Services"] .mjl-service-row > div:not(.mjl-photo) { order:1 !important; width:100% !important; }
  [data-screen-label="Services"] .mjl-service-row h3 { font-size:36px !important; overflow-wrap:anywhere; }
  [data-screen-label="Services"] .mjl-service-row h3 + * { max-width:100% !important; }
  [data-screen-label="Services"] .mjl-service-row p { max-width:100% !important; }
  [data-screen-label="Services"] .mjl-service-row > div > div:first-child { align-items:flex-start !important; }

  .mjl-footer-grid { gap:36px !important; padding-bottom:48px !important; }
  .mjl-footer-grid img { height:auto !important; width:min(230px,100%) !important; }
}

@media (max-width: 480px) {
  .mjl-about-photo { height:360px !important; }
  [data-screen-label="Services"] .mjl-service-row > .mjl-photo { height:250px !important; }
  [data-screen-label="Services"] .mjl-service-row h3 { font-size:32px !important; }
  .mjl-approach-pillars h3 { max-width:230px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  .mjl-reveal { opacity:1; transform:none; }
}