/* Belvédère — la « vue promoteur » : la couche Démesure posée sur le site de la promotion.
   Encre, os et orange du studio, pour qu'on distingue au premier coup d'œil le site (ce que voient les acheteurs)
   des explications (ce que ça apporte au promoteur). */

:root {
  --p-ink: #0b0b0a;
  --p-ink-2: #151513;
  --p-ink-3: #1e1e1b;
  --p-bone: #ebe8df;
  --p-dim: rgba(235, 232, 223, .64);
  --p-faint: rgba(235, 232, 223, .3);
  --p-rule: rgba(235, 232, 223, .14);
  --p-acc: #ff4a1c;
  --p-good: #5f9a42;
  --p-red: #e0452f;
  --p-display: "Archivo", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --p-serif: "Instrument Serif", "Times New Roman", serif;
  --p-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* Boutons de la couche promoteur */
.pbtn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 50px; padding: 0 22px; border-radius: 999px; font: 600 15px/1 var(--p-display); text-decoration: none; color: var(--p-bone); box-shadow: inset 0 0 0 1px var(--p-faint); transition: transform .3s cubic-bezier(.16, 1, .3, 1), background-color .2s, color .2s; }
.pbtn:hover { transform: translateY(-2px); }
.pbtn--accent { background: var(--p-acc); color: var(--p-ink); box-shadow: none; }
.pbtn--ghost:hover { background: var(--p-bone); color: var(--p-ink); }
.pbtn--sm { height: 38px; padding: 0 14px; font-size: 13px; }

/* Le chapitre « Côté promoteur » */
.pch { background: var(--p-ink); color: var(--p-bone); font-family: var(--p-display); padding: clamp(80px, 11vw, 150px) clamp(16px, 4vw, 56px); }
.pch__in { max-width: 1320px; margin: 0 auto; }
.pch em { font-family: var(--p-serif); font-weight: 400; font-style: italic; color: var(--p-acc); letter-spacing: -.01em; }
.pch__kicker, .pch__n { display: flex; align-items: center; gap: 10px; font: 500 11.5px/1.4 var(--p-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--p-acc); }
.pch__head h2 { margin: 16px 0 18px; font-family: var(--p-display); font-size: clamp(40px, 6vw, 92px); font-weight: 700; font-stretch: 88%; line-height: .94; letter-spacing: -.035em; max-width: 14ch; }
.pch__lead { max-width: 58ch; color: var(--p-dim); font-size: clamp(16px, 1.3vw, 19px); line-height: 1.55; }
.pch__h { margin: 12px 0 16px; font-family: var(--p-display); font-size: clamp(32px, 4.2vw, 64px); font-weight: 700; font-stretch: 90%; line-height: .98; letter-spacing: -.03em; max-width: 16ch; }

.pch__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 48px; }
.pcard { display: flex; flex-direction: column; padding: 24px 22px 20px; border-radius: 22px; background: var(--p-ink-2); box-shadow: inset 0 0 0 1px var(--p-rule); }
.pcard--you { background: linear-gradient(160deg, rgba(255, 74, 28, .16), transparent 55%), var(--p-ink-2); box-shadow: inset 0 0 0 1px rgba(255, 74, 28, .35); }
.pcard__who { align-self: flex-start; padding: 5px 10px; border-radius: 999px; background: rgba(255, 74, 28, .12); color: var(--p-acc); font: 500 11px/1.3 var(--p-mono); letter-spacing: .06em; text-transform: uppercase; }
.pcard h3 { display: flex; align-items: baseline; gap: 10px; margin: 16px 0; font-family: var(--p-display); font-size: clamp(22px, 2vw, 30px); font-weight: 700; font-stretch: 92%; letter-spacing: -.02em; line-height: 1.05; }
.pcard h3 span { font: 500 12px/1 var(--p-mono); color: var(--p-faint); }
.pcard__k { margin: 4px 0 8px; font: 500 11px/1.3 var(--p-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--p-faint); }
.pcard ul { display: grid; gap: 6px; margin: 0 0 16px; padding: 0; list-style: none; }
.pcard li { position: relative; padding-left: 16px; font-size: 14.5px; line-height: 1.4; color: rgba(235, 232, 223, .82); }
.pcard li::before { content: ""; position: absolute; left: 0; top: .62em; width: 7px; height: 1.5px; background: var(--p-faint); }
.pcard__win li { color: var(--p-bone); font-weight: 600; }
.pcard__win li::before { width: 8px; height: 8px; top: .4em; border-radius: 50%; background: var(--p-acc); }
.pcard__go { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--p-rule); font-size: 14px; font-weight: 600; color: var(--p-bone); text-decoration: none; }
.pcard__go:hover { color: var(--p-acc); }

/* Questions, contact */
.pfaq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 40px; margin: clamp(80px, 10vw, 130px) 0 0; }
.pfaq div { padding: 22px 0; border-top: 1px solid var(--p-rule); }
.pfaq dt { font-size: clamp(19px, 1.7vw, 24px); font-weight: 700; font-stretch: 94%; letter-spacing: -.01em; line-height: 1.2; }
.pfaq dd { margin: 10px 0 0; color: var(--p-dim); font-size: 15.5px; line-height: 1.55; max-width: 52ch; }
.pcta { margin-top: clamp(70px, 9vw, 120px); padding: clamp(28px, 5vw, 64px); border-radius: 30px; background: radial-gradient(circle at 85% 0%, rgba(255, 74, 28, .28), transparent 50%), var(--p-ink-2); box-shadow: inset 0 0 0 1px var(--p-rule); }
.pcta__btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }

/* Démo : la bascule site client / gestion promoteur */
.pmode { position: fixed; z-index: 75; left: 50%; bottom: max(16px, env(safe-area-inset-bottom)); transform: translateX(-50%); display: flex; gap: 3px; padding: 4px; border-radius: 999px; background: rgba(11, 11, 10, .9); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .55), inset 0 0 0 1px rgba(235, 232, 223, .12); font-family: var(--p-display); transition: bottom .4s cubic-bezier(.16, 1, .3, 1), opacity .5s; }
.pmode a { display: grid; place-items: center; height: 36px; padding: 0 16px; border-radius: 999px; color: var(--p-dim); font-size: 13px; font-weight: 600; white-space: nowrap; text-decoration: none; transition: background-color .25s, color .25s; }
.pmode a:hover { color: var(--p-bone); }
.pmode a[aria-current="page"] { background: var(--p-bone); color: var(--p-ink); }
.pmode a:not([aria-current]) { color: var(--p-acc); }
.has-track .pmode { bottom: 92px; }
:is(.intro-on, .hero-quick):not(.hero-in) .pmode { opacity: 0; pointer-events: none; }
html:has(.drawer.is-open, .lightbox.is-open) .pmode { opacity: 0; pointer-events: none; }
.pch { scroll-margin-top: 70px; }

@media (max-width: 960px) {
  .pch__cards { grid-template-columns: 1fr; }
  .pfaq { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .pmode a { padding: 0 14px; font-size: 12.5px; }
}