/* Accueil MonResto pour les restaurateurs (body.pro-home). En-tête et pied de page : homepage.css (body.home-redesign). */
body.pro-home {
  --pro-ink: #262826;
  --pro-muted: #6a6d65;
  --pro-accent: #d72e43;
  --pro-accent-dark: #b4233a;
  --pro-line: #e8e5dd;
  --pro-cream: #f7f6f2;
  --pro-warm: #fbefe6;
}
body.pro-home .pro-skip { position: fixed; top: -100px; left: 20px; z-index: 1100; padding: 12px 18px; color: #fff; background: var(--pro-ink); border-radius: 10px; font-size: 14px; }
body.pro-home .pro-skip:focus { top: 12px; }
body.pro-home .pro-landing { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 32px 72px; color: var(--pro-ink); text-align: left; }
body.pro-home .pro-landing h1, body.pro-home .pro-landing h2, body.pro-home .pro-landing h3 { margin: 0; padding: 0; color: var(--pro-ink); text-align: left; border: 0; text-transform: none; }
body.pro-home .pro-landing h1::before, body.pro-home .pro-landing h1::after, body.pro-home .pro-landing h2::before, body.pro-home .pro-landing h2::after { display: none; }
body.pro-home .pro-landing p { margin: 0; }
body.pro-home .pro-landing :focus-visible { outline: 3px solid var(--pro-accent); outline-offset: 3px; }

body.pro-home .pro-eyebrow { display: inline-flex; align-items: center; gap: 9px; margin: 0 0 14px !important; color: var(--pro-accent); font-size: 13px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
body.pro-home .pro-eyebrow > span { width: 8px; height: 8px; background: var(--pro-accent); border-radius: 50%; }

/* Bandeau principal. */
body.pro-home .pro-hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(280px, .9fr); align-items: center; gap: 56px; padding: 64px 0 56px; }
body.pro-home .pro-hero h1 { font-size: clamp(38px, 5.4vw, 66px); line-height: 1.02; letter-spacing: -.045em; font-weight: 820; }
body.pro-home .pro-hero h1 span { color: var(--pro-accent); }
body.pro-home .pro-intro { max-width: 560px; margin-top: 22px !important; color: var(--pro-muted); font-size: 18px; line-height: 1.6; }
body.pro-home .pro-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
body.pro-home .pro-button { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 14px 26px; color: #fff; background: var(--pro-accent); border: 1px solid var(--pro-accent); border-radius: 13px; font-size: 16px; font-weight: 750; line-height: 1.2; text-decoration: none; box-shadow: 0 10px 24px #d72e4326; transition: background .15s, transform .15s; }
body.pro-home .pro-button:hover { color: #fff; background: var(--pro-accent-dark); border-color: var(--pro-accent-dark); transform: translateY(-1px); }
body.pro-home .pro-button-ghost { color: var(--pro-ink); background: #fff; border-color: var(--pro-line); box-shadow: none; }
body.pro-home .pro-button-ghost:hover { color: var(--pro-ink); background: #faf9f6; border-color: #d6d2c7; }
body.pro-home .pro-button-light { color: var(--pro-accent-dark); background: #fff; border-color: #fff; box-shadow: none; }
body.pro-home .pro-button-light:hover { color: var(--pro-accent-dark); background: #fff4f1; border-color: #fff4f1; }

/* Téléphone avec la capture du site de La Passerelle. */
body.pro-home .pro-hero-visual { position: relative; display: grid; justify-items: center; gap: 14px; margin: 0; }
body.pro-home .pro-hero-visual::before { content: ""; position: absolute; inset: 8% -4% 14%; z-index: 0; background: radial-gradient(closest-side, #f3c79f, #fbefe600); opacity: .7; }
body.pro-home .pro-phone { position: relative; z-index: 1; width: min(320px, 74vw); padding: 10px; background: #1f1e1c; border-radius: 40px; box-shadow: 0 28px 60px #2b20142e, 0 4px 14px #2b201420; transform: rotate(2deg); }
body.pro-home .pro-phone-bar { display: flex; align-items: center; gap: 6px; padding: 9px 14px; color: #3b3a36; background: #f1efea; border-radius: 30px 30px 0 0; font-size: 11px; font-weight: 600; letter-spacing: .01em; white-space: nowrap; overflow: hidden; }
body.pro-home .pro-phone-bar span { flex: 0 0 auto; width: 9px; height: 9px; border: 1.6px solid #6a6d65; border-radius: 3px; }
body.pro-home .pro-phone img { display: block; width: 100%; height: auto; aspect-ratio: 772 / 1440; object-fit: cover; object-position: top; border-radius: 0 0 30px 30px; }
body.pro-home .pro-hero-visual figcaption { position: relative; z-index: 1; color: var(--pro-muted); font-size: 13px; }

/* Sections. */
body.pro-home .pro-section { padding: 56px 0 0; }
body.pro-home .pro-heading { max-width: 720px; margin-bottom: 28px; }
body.pro-home .pro-heading h2 { font-size: clamp(28px, 3.4vw, 40px); line-height: 1.12; letter-spacing: -.035em; font-weight: 800; }
body.pro-home .pro-features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
body.pro-home .pro-features li { padding: 26px; background: #fff; border: 1px solid var(--pro-line); border-radius: 20px; }
body.pro-home .pro-feature-icon { display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: 18px; color: var(--pro-accent); background: #fbecef; border-radius: 14px; }
body.pro-home .pro-features h3, body.pro-home .pro-steps h3 { margin-bottom: 8px; font-size: 18px; line-height: 1.35; font-weight: 750; }
body.pro-home .pro-features p, body.pro-home .pro-steps p { color: var(--pro-muted); font-size: 15px; line-height: 1.6; overflow-wrap: anywhere; }

body.pro-home .pro-example-card { display: grid; justify-items: start; gap: 12px; padding: 40px; background: var(--pro-warm); border: 1px solid #f0dccb; border-radius: 26px; }
body.pro-home .pro-example-card h2 { font-size: clamp(24px, 3vw, 34px); line-height: 1.15; letter-spacing: -.03em; font-weight: 800; }
body.pro-home .pro-example-card p:not(.pro-eyebrow) { max-width: 640px; color: #5d5148; font-size: 16px; line-height: 1.6; }
body.pro-home .pro-example-card .pro-eyebrow { margin: 6px 0 0 !important; color: #b86517; }
body.pro-home .pro-example-logo { width: 240px; max-width: 100%; height: auto; }
body.pro-home .pro-link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: #9a4f0e; font-weight: 750; text-decoration: underline; text-underline-offset: 4px; }
body.pro-home .pro-link:hover { color: #7a3d08; }

body.pro-home .pro-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; counter-reset: none; }
body.pro-home .pro-steps li { position: relative; padding: 26px; background: #fff; border: 1px solid var(--pro-line); border-radius: 20px; }
body.pro-home .pro-step-number { display: block; margin-bottom: 16px; color: var(--pro-accent); font-size: 28px; font-weight: 820; letter-spacing: -.03em; }

body.pro-home .pro-final { display: grid; justify-items: center; gap: 12px; margin-top: 64px; padding: 56px 28px; color: #fff; background: var(--pro-accent); border-radius: 28px; text-align: center; }
body.pro-home .pro-final h2 { color: #fff; font-size: clamp(28px, 3.6vw, 42px); line-height: 1.1; letter-spacing: -.035em; font-weight: 820; text-align: center; }
body.pro-home .pro-final p { color: #ffe9ec; font-size: 16px; line-height: 1.6; text-align: center; }
body.pro-home .pro-final .pro-button { margin-top: 10px; }
body.pro-home .pro-contact { margin-top: 6px !important; font-size: 14px !important; }
body.pro-home .pro-contact a { color: #fff; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 960px) {
  body.pro-home .pro-features, body.pro-home .pro-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  body.pro-home .pro-landing { padding: 0 20px 48px; }
  body.pro-home .pro-hero { grid-template-columns: minmax(0, 1fr); gap: 36px; padding: 36px 0 24px; }
  body.pro-home .pro-intro { font-size: 16px; }
  body.pro-home .pro-actions .pro-button { flex: 1 1 100%; }
  body.pro-home .pro-phone { width: min(280px, 76vw); transform: none; }
  body.pro-home .pro-section { padding-top: 44px; }
  body.pro-home .pro-features, body.pro-home .pro-steps { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  body.pro-home .pro-features li, body.pro-home .pro-steps li { padding: 22px; }
  body.pro-home .pro-example-card { padding: 26px 22px; }
  body.pro-home .pro-final { margin-top: 44px; padding: 40px 22px; border-radius: 22px; }
  body.pro-home .pro-final .pro-button { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  body.pro-home .pro-button { transition: none; }
  body.pro-home .pro-button:hover { transform: none; }
}