* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 24px; }
body { margin: 0; overflow-x: hidden; font-family: Arial, Helvetica, sans-serif; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
#contenu:focus { outline: none; }
.skip-link { position: fixed; z-index: 40; top: 12px; left: 12px; padding: 10px 14px; border-radius: 999px; color: #111; background: #fff; transform: translateY(-160%); transition: transform .2s ease; }
.skip-link:focus { transform: translateY(0); }
a:focus-visible { outline: 3px solid #111; outline-offset: 4px; box-shadow: 0 0 0 6px rgba(255,255,255,.92); }
.back { position: relative; z-index: 20; display: inline-flex; min-height: 44px; margin: 16px 0 0 max(16px, calc((100vw - 1120px) / 2)); padding: 11px 15px; align-items: center; border: 1px solid rgba(0,0,0,.12); border-radius: 999px; color: #161616; background: rgba(255,255,255,.92); font-size: 13px; font-weight: 700; transition: transform .2s ease; }
.back:hover { transform: translateY(-2px); }
.demo-nav { display: flex; width: min(100% - 56px, 1120px); min-height: 82px; margin: auto; align-items: center; justify-content: space-between; }
.demo-brand { font-family: Georgia, serif; font-size: 22px; font-weight: 700; }
.demo-nav div { display: flex; align-items: center; gap: 24px; font-size: 13px; }
.demo-nav div > a:not(.cta) { padding: 12px 0; border-bottom: 1px solid transparent; }
.demo-nav div > a:not(.cta):hover { border-color: currentColor; }
.demo-nav .cta { min-height: 44px; padding: 11px 16px; border: 1px solid currentColor; border-radius: 999px; font-weight: 700; }
.demo-hero { display: grid; width: min(100% - 56px, 1120px); min-height: 650px; margin: auto; padding: 50px 0 80px; align-items: center; grid-template-columns: 1.03fr .97fr; gap: clamp(40px, 7vw, 90px); }
.demo-kicker { font-size: 12px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.demo-hero h1 { max-width: 700px; margin: 20px 0 26px; font-family: Georgia, serif; font-size: clamp(56px, 8vw, 105px); font-weight: 400; line-height: .9; letter-spacing: -.065em; text-wrap: balance; }
.demo-hero p { max-width: 520px; font-size: 18px; line-height: 1.6; }
.demo-button { display: inline-flex; min-height: 48px; margin-top: 16px; padding: 13px 20px; align-items: center; justify-content: center; border-radius: 999px; font-weight: 700; }
.demo-button-disabled { cursor: default; opacity: .82; }
.demo-art { position: relative; min-height: 510px; overflow: hidden; border-radius: 240px 240px 24px 24px; box-shadow: 0 28px 80px rgba(0,0,0,.13); }
.demo-art::before, .demo-art::after { position: absolute; content: ""; }
.demo-section { padding: 105px 28px; }
.demo-section-inner { display: grid; max-width: 1120px; margin: auto; grid-template-columns: .7fr 1.3fr; gap: 70px; }
.demo-section h2, .demo-story h2, .demo-cta h2 { margin: 0; font-family: Georgia, serif; font-size: clamp(40px, 6vw, 72px); font-weight: 400; line-height: 1; letter-spacing: -.04em; text-wrap: balance; }
.demo-section p, .demo-story p, .demo-cta p { font-size: 18px; line-height: 1.7; }
.items { display: grid; margin-top: 32px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 28px; }
.item { padding: 20px 0; border-top: 1px solid currentColor; }
.item strong, .item span { display: block; }
.item span { margin-top: 6px; font-size: 14px; opacity: .7; }
.demo-story { display: grid; width: min(100% - 56px, 1120px); margin: auto; padding: 110px 0; border-top: 1px solid currentColor; align-items: end; grid-template-columns: 1.1fr .9fr; gap: 80px; }
.demo-story p { max-width: 510px; margin: 0; opacity: .78; }
.demo-story .demo-kicker { display: block; margin-bottom: 20px; }
.demo-cta { width: min(100% - 56px, 1120px); margin: 0 auto 70px; padding: 76px; border-radius: 30px; text-align: center; }
.demo-cta h2 { margin: 18px auto 20px; }
.demo-cta p { max-width: 680px; margin: 0 auto; opacity: .78; }
.demo-footer { display: flex; width: min(100% - 56px, 1120px); margin: auto; padding: 35px 0 96px; border-top: 1px solid currentColor; justify-content: space-between; gap: 24px; font-size: 13px; opacity: .75; }

.restaurant { color: #f8efdf; background: #572f22; }
.restaurant .demo-button { color: #572f22; background: #f2ca87; }
.restaurant .demo-art { background: radial-gradient(circle at 50% 35%,#eabf73 0 7%,transparent 8%),radial-gradient(circle at 35% 48%,#bf6e47 0 13%,transparent 14%),radial-gradient(circle at 65% 53%,#6e8b57 0 14%,transparent 15%),linear-gradient(145deg,#d89562,#7b3f2c); }
.restaurant .demo-art::after { right: -25px; bottom: 50px; width: 160px; height: 160px; border: 1px solid #f2ca87; border-radius: 50%; }
.restaurant .demo-section { color: #572f22; background: #f2e5d2; }
.restaurant .demo-cta { color: #572f22; background: #f2ca87; }
.restaurant .demo-cta .demo-button { border: 1px solid #572f22; background: transparent; }

.salon { color: #34242e; background: #ecdce0; }
.salon .demo-button { color: #f8eef2; background: #6e3e59; }
.salon .demo-art { background: linear-gradient(30deg,transparent 0 30%,#c790a9 31% 45%,transparent 46%),linear-gradient(150deg,#f9eef2,#8e5871); }
.salon .demo-art::before { top: 14%; left: -30px; width: 170px; height: 310px; border: 1px solid #6e3e59; border-radius: 100%; transform: rotate(-18deg); }
.salon .demo-section { color: #f8eef2; background: #6e3e59; }
.salon .demo-cta { color: #f8eef2; background: #6e3e59; }
.salon .demo-cta .demo-button { border: 1px solid #f8eef2; background: transparent; }

.grocery { color: #f6edcf; background: #334c2f; }
.grocery .demo-button { color: #334c2f; background: #e9d85c; }
.grocery .demo-art { background: radial-gradient(circle at 30% 30%,#e9d85c 0 9%,transparent 10%),radial-gradient(circle at 67% 40%,#cd694c 0 15%,transparent 16%),radial-gradient(circle at 45% 70%,#a8bf72 0 19%,transparent 20%),#e7ddbd; }
.grocery .demo-art::before { inset: 10%; border: 2px dashed #334c2f; border-radius: 50%; }
.grocery .demo-section { color: #334c2f; background: #e7ddbd; }
.grocery .demo-cta { color: #334c2f; background: #e9d85c; }
.grocery .demo-cta .demo-button { border: 1px solid #334c2f; background: transparent; }

@media (max-width: 800px) {
  .demo-nav div { gap: 14px; }
  .demo-nav div > a:not(.cta) { display: none; }
  .demo-hero, .demo-section-inner, .demo-story { grid-template-columns: 1fr; gap: 45px; }
  .demo-hero { min-height: auto; padding-top: 55px; }
  .demo-art { min-height: 440px; }
  .demo-story { padding: 85px 0; }
  .demo-cta { padding: 58px 34px; }
}

@media (max-width: 520px) {
  .demo-nav, .demo-hero, .demo-story, .demo-cta, .demo-footer { width: min(100% - 32px, 1120px); }
  .demo-nav { min-height: 72px; }
  .demo-brand { max-width: 150px; font-size: 18px; line-height: 1.05; }
  .demo-nav .cta { padding-inline: 13px; font-size: 12px; }
  .demo-hero { padding: 40px 0 64px; }
  .demo-hero h1 { font-size: clamp(52px, 17vw, 76px); }
  .demo-art { min-height: 350px; }
  .demo-section { padding: 76px 16px; }
  .items { grid-template-columns: 1fr; gap: 0; }
  .demo-story { padding: 75px 0; }
  .demo-cta { margin-bottom: 50px; padding: 48px 22px; }
  .demo-footer { align-items: flex-start; flex-direction: column; }
  .back { margin-top: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition-duration: .01ms !important; }
}