/* Centre dentaire Nacre — la couche Démesure posée sur la démo : bascule « Site patient | Gestion cabinet »
   et le chapitre « Côté cabinet » en bas du site. Encre, os et orange du studio, pour qu'on distingue
   au premier coup d'œil le site du cabinet (ce que voient les patients) des explications (ce que ça apporte au cabinet). */

:root {
  --p-ink: #0b0b0a;
  --p-ink-2: #151513;
  --p-bone: #ebe8df;
  --p-dim: rgba(235, 232, 223, .66);
  --p-faint: rgba(235, 232, 223, .32);
  --p-rule: rgba(235, 232, 223, .14);
  --p-acc: #ff4a1c;
  --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;
}

.pbtn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-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; }

.pch { background: var(--p-ink); color: var(--p-bone); font-family: var(--p-display); padding: clamp(80px, 11vw, 150px) clamp(16px, 4vw, 56px) clamp(110px, 12vw, 160px); scroll-margin-top: 60px; }
.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 { 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 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: 60ch; 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: 17ch; }

.pch__quote { margin: clamp(40px, 6vw, 70px) 0 0; padding: 26px 0 0; border-top: 1px solid var(--p-rule); max-width: 34ch; font-family: var(--p-serif); font-style: italic; font-size: clamp(26px, 3.2vw, 44px); line-height: 1.12; color: var(--p-bone); }
.pch__quote small { display: block; margin-top: 14px; font: 500 12px/1.4 var(--p-mono); font-style: normal; letter-spacing: .08em; text-transform: uppercase; color: #a3a99f; }

.pch__cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 48px; }
.pcard { display: flex; flex-direction: column; min-width: 0; 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(21px, 1.8vw, 27px); 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; min-height: 44px; display: flex; align-items: center; }
.pcard__go:hover { color: var(--p-acc); }

.pfaq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 40px; margin: clamp(70px, 9vw, 120px) 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: 54ch; }
.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 patient / gestion du cabinet */
.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: 40px; 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: calc(max(16px, env(safe-area-inset-bottom)) + 76px); }
html:has(.menu.is-open, .sheet.is-open) .pmode { opacity: 0; pointer-events: none; }
.is-embed .pmode, .is-embed .demo-bar { display: none !important; }

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