/* Studio Memphré — home motion layer. Static by default; animated only when motion is allowed. */
.hero.dark{isolation:isolate}
.steps li{transition:transform .25s ease,box-shadow .25s ease}.steps li:hover{transform:translateY(-4px);box-shadow:0 18px 40px -26px #12343b73}
.price{font-variant-numeric:tabular-nums}
@media(prefers-reduced-motion:no-preference){
@keyframes mo-wave{from{transform:translateY(40px)}to{transform:none}}
.hero.dark .wave{height:150px;animation:mo-wave 1.4s cubic-bezier(.2,.8,.2,1) backwards}
.mo .wave path{animation:none}
.btn:active{transform:translateY(0) scale(.97)}
.package:hover .price{color:var(--deep);transition:color .25s}
.card.sm:hover{transform:translateY(-3px);box-shadow:0 14px 30px -22px #12343b80}
.mo .rv{opacity:0;transform:translateY(30px);transition:opacity .7s cubic-bezier(.2,.8,.2,1) var(--d,0s),transform .7s cubic-bezier(.2,.8,.2,1) var(--d,0s)}
.mo .rv.in{opacity:1;transform:none}
.mo .package.rv.in:hover{transform:translateY(-4px);transition-delay:0s}
}
@media(prefers-reduced-motion:no-preference) and (max-width:600px){.hero.dark .wave{height:80px}}

/* v6: refined hero */
.page-home .hero.dark{padding:120px 0 170px}
.page-home .hero-grid{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:64px}
.page-home .hero.dark h1{font-size:clamp(2.5rem,4vw,4rem);line-height:1.04;letter-spacing:-.045em;max-width:none;margin-bottom:28px}
.page-home .hero.dark .lead{font-size:1.15rem;line-height:1.7;max-width:46ch;margin-bottom:40px}
.page-home .hero.dark .eyebrow{margin-bottom:28px}
.page-home .browser{transform:none;max-width:420px;justify-self:end;box-shadow:0 40px 80px -30px #04141880,0 0 0 1px #ffffff14}
.screens{display:grid}.screens>.browser-page{grid-area:1/1}.screens>.p2,.screens>.p3{visibility:hidden}
/* Illustrative mock-up colours (fictional businesses p2/p3), intentionally outside the brand palette */
.p2 .sample-nav{background:#3b4a2f}.p2 .sample-hero{background:#efe9df}.p2 .sample-art{background:#6E8B5E}.p2 .sample-title{background:#3b4a2f}.p2 .sample-button,.p2 .sample-nav b{background:#c96f3b}
.p3 .sample-nav{background:#1E2326}.p3 .sample-hero{background:#e8eef3}.p3 .sample-art{background:#2F7F86}.p3 .sample-title{background:#1E2326}.p3 .sample-art svg{opacity:.85}
@media(max-width:900px){.page-home .hero-grid{grid-template-columns:1fr}.page-home .browser{justify-self:center}.page-home .hero.dark{padding:72px 0 120px}}
@media(max-width:600px){.page-home .hero.dark h1{font-size:2.5rem}.page-home .hero.dark{padding:48px 0 96px}.page-home .browser{width:92%}}
@media(prefers-reduced-motion:no-preference){
@keyframes mo-cycle{0%,30%{opacity:1}36%,94%{opacity:0}100%{opacity:1}}
.page-home .hero.dark .browser{transform:none}
.js.mo .screens>.browser-page{visibility:visible;animation:mo-cycle 15s ease-in-out infinite} /* continuous (Alexandre's decision; WCAG 2.2.2 accepted risk). Only with JS (.js + .mo) and motion allowed */
/* v17e: same specificity as the .js.mo animation rule above (the shorthand was resetting the delays to 0, so all 3 pages faded out together = blank ~9 s) */
.js.mo .screens>.p1{animation-delay:-1s}.js.mo .screens>.p2{animation-delay:4s;opacity:0}.js.mo .screens>.p3{animation-delay:9s;opacity:0}
.btn{transition:transform .3s cubic-bezier(.16,1,.3,1),box-shadow .3s,filter .2s}
.btn:hover{box-shadow:0 10px 24px -12px #d9833b99}
.btn.secondary:hover{box-shadow:none;background:#ffffff0f}
}
/* v7: light, restrained hero (research-v7) */
.page-home header.site{background:rgba(246,248,246,.86);-webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid #12343b14}
.page-home nav a{color:var(--deep)}.page-home nav a:hover,.page-home nav a[aria-current=page]{color:var(--teal-ink)}
.page-home .lang{border-left-color:#12343b26}.page-home .menu-btn{color:var(--deep);border-color:#12343b55}
.page-home .hero.dark{background:radial-gradient(1100px 560px at 78% 18%,#2f7f861a,transparent 70%),radial-gradient(900px 500px at 8% 100%,#6e8b5e14,transparent 70%),var(--paper);color:var(--text);padding:136px 0 190px}
.page-home .hero.dark h1{color:var(--deep);font-size:clamp(2.5rem,4.1vw,3.9rem);line-height:1.05;letter-spacing:-.042em}
.page-home .hero.dark h1 em{color:var(--teal)}
.page-home .hero.dark .lead{color:var(--muted)}
.page-home .hero.dark .eyebrow{color:var(--teal-ink)}
.page-home .hero .btn.secondary{color:var(--deep);border-color:#12343b40}.page-home .hero .btn.secondary:hover{color:var(--deep);border-color:var(--deep);background:#12343b08}
.page-home .hero .btn:focus-visible{outline:2px solid var(--deep);outline-offset:3px}
.page-home .browser{background:#fff;border:1px solid #12343b14;border-radius:18px;padding:0 12px 10px;box-shadow:0 1px 2px #12343b0d,0 30px 70px -28px #12343b55}
.page-home .browser-chrome i{background:#cfd9d6}.page-home .browser-chrome i:first-child{background:#cfd9d6}
.page-home .browser>p{color:#5f6b6e}
.mk{background:var(--paper);border-radius:8px;overflow:hidden;font-family:Inter,system-ui,sans-serif;border:1px solid #12343b0f}
.mk-nav{display:flex;align-items:center;gap:10px;padding:12px 16px;background:#fff;border-bottom:1px solid #12343b10}
.mk-nav b{font:800 .74rem Manrope,sans-serif;letter-spacing:0;word-spacing:.12em;color:var(--deep);margin-right:auto}
.mk-nav span{width:22px;height:3px;border-radius:2px;background:#c9d4d1}
.mk-hero{display:grid;grid-template-columns:1.25fr 1fr;gap:16px;padding:22px 16px;align-items:center}
.mk-hero small{display:block;font-size:.56rem;letter-spacing:.12em;text-transform:uppercase;color:var(--teal);margin-bottom:6px;font-weight:600}
.mk-hero strong{display:block;font:800 1.02rem/1.15 Manrope,sans-serif;letter-spacing:-.01em;word-spacing:.08em;color:var(--deep);margin-bottom:12px}
.mk-hero i{display:inline-block;font-style:normal;font-size:.58rem;font-weight:600;padding:6px 11px;border-radius:99px;background:var(--cta);color:var(--text)}
.mk-hero svg{width:100%;height:auto;display:block}
.mk-sky{fill:#dfe9e8}.mk-sun{fill:#D9833B}.mk-w1{fill:#2F7F86}.mk-w2{fill:#5FB3B9}
.p2 .mk-sky{fill:#e9e4da}.p2 .mk-sun{fill:#6E8B5E}.p2 .mk-w1{fill:#12343B}.p2 .mk-w2{fill:#4a5558}.p2 .mk-hero small{color:#4F6A42}
.p3 .mk-sky{fill:#e4eadf}.p3 .mk-sun{fill:#e7b05a}.p3 .mk-w1{fill:#6E8B5E}.p3 .mk-w2{fill:#8fa984}.p3 .mk-hero small{color:#5d7a4f}
.mk-cards{display:flex;gap:8px;padding:0 16px 16px}.mk-cards i{flex:1;height:38px;border-radius:6px;background:#fff;border:1px solid #12343b10}
.page-home .hero.dark .wave.lines{height:120px;bottom:24px}
.wave.lines path{fill:none;stroke:var(--teal);stroke-width:1.2;vector-effect:non-scaling-stroke;opacity:.35}
.wave.lines path:nth-child(2){opacity:.22}.wave.lines path:nth-child(3){opacity:.12}
.page-home .steps{border-top:1px solid #12343b0f}
@media(max-width:600px){.page-home .hero.dark{padding:56px 0 130px}.page-home .hero.dark h1{font-size:2.45rem}.page-home .hero.dark .wave.lines{height:70px;bottom:16px}.mk-hero strong{font-size:.9rem}}
@media(prefers-reduced-motion:no-preference){
.page-home .hero.dark .wave{animation:none}
}

/* v10: single hero entrance (Option 1). Title is plain text: no per-word mask, no blur.
   html.hero-wait is set by /assets/hero-wait.js only when motion is allowed; without JS the hero is static. */
@media (prefers-reduced-motion: no-preference){
  .hero-wait .page-home .hero-copy,.hero-wait .page-home .hero .browser{opacity:0}
  .hero-in .page-home .hero-copy{animation:hero-in .6s cubic-bezier(.16,1,.3,1) both}
  .hero-in .page-home .hero .browser{animation:hero-in .6s .12s cubic-bezier(.16,1,.3,1) both}
  @keyframes hero-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
}

/* v12 — Ardoise tokens on the home page (loaded after site.css). Hero structure, entrance and water motion unchanged. */
.page-home header.site{background:var(--sm-entete-fond);-webkit-backdrop-filter:saturate(1.3) blur(12px);backdrop-filter:saturate(1.3) blur(12px);border-bottom:1px solid var(--sm-entete-filet)}
.page-home .lang{border-left-color:rgba(18,52,59,.15)}.page-home .menu-btn{color:var(--sm-ardoise);border-color:var(--sm-ardoise)}
.page-home .hero.dark{background:radial-gradient(1100px 560px at 78% 18%,#2f7f861a,transparent 70%),radial-gradient(900px 500px at 8% 100%,#6e8b5e14,transparent 70%),var(--sm-blanc)}
.page-home .hero.dark h1{font-size:var(--sm-fs-h1);font-weight:var(--sm-fw-gras);line-height:var(--sm-lh-titre);letter-spacing:var(--sm-ls-titre)}
.page-home .hero.dark .lead{font-size:var(--sm-fs-intro)}
.page-home .hero .btn.secondary{color:var(--sm-ardoise);border-color:var(--sm-ardoise)}.page-home .hero .btn.secondary:hover{background:var(--sm-brume);color:var(--sm-ardoise)}
.page-home .hero .btn:focus-visible,.btn:focus-visible{outline:var(--sm-focus);outline-offset:var(--sm-focus-offset)}
.band .btn:focus-visible{outline:var(--sm-focus-fonce)}
.page-home .browser{border-radius:var(--sm-r-lg);box-shadow:var(--sm-ombre-sm),var(--sm-ombre-lg)}
@media(prefers-reduced-motion:no-preference){.btn:hover{box-shadow:none}}
@media(max-width:600px){.page-home .hero.dark h1{font-size:var(--sm-fs-h1)}.page-home .hero.dark .lead{font-size:1.0625rem}}

/* v14 — "drag-and-drop" build of the hero mock-up (assets/hero-build.js). Default = finished state (no JS, reduced motion). */
.mk-nav b{display:inline-flex;align-items:center;gap:6px}
.mk-mark{display:inline-grid;place-items:center;width:16px;height:16px;border-radius:5px;background:var(--sm-ardoise,#12343B);color:#fff;font:800 .55rem/1 Manrope,sans-serif;text-decoration:none}
.p2 .mk-mark{background:#c96f3b}.p3 .mk-mark{background:#6E8B5E}
.page-home .browser{position:relative}
.mk{position:relative}
.mk-ghost,.mk-cur{position:absolute;left:0;top:0;pointer-events:none}
.mk-ghost{border:1.5px dashed #9fb2ae;border-radius:6px;background:#eef2ee;opacity:0;transition:opacity .2s;display:grid;place-items:center;font:700 .5rem/1 Inter,sans-serif;letter-spacing:.14em;color:#8a9c98;z-index:1}
.mk-cur{width:18px;height:18px;z-index:5;opacity:0;will-change:transform;filter:drop-shadow(0 2px 3px #12343b55)}
.mk-cur svg{display:block;width:100%;height:100%}
.hb-sk .hb-t{opacity:0;transition:opacity .18s}
.hb-sk .mk-ghost{opacity:1}
.hb-t{position:relative;z-index:2}
.hb-drag{box-shadow:0 10px 22px -8px #12343b66;border-radius:6px}
.hb .screens>.browser-page{animation:none!important;visibility:hidden;opacity:0}
.hb .screens>.browser-page.hb-on{visibility:visible;opacity:1}
.page-home .browser:focus-visible{outline:var(--sm-focus,2px solid #12343B);outline-offset:6px}
.page-home .browser.hb-i{cursor:pointer}
/* v16: canvas water lines (hero-waves.js, style C). The static SVG lines stay for no-JS. */
.page-home .hero.dark .hero-waves{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.page-home .hero.dark.cw .wave.lines{display:none}