/* TRAVERSE — la couche Démesure posée sur la démo : bascule « Site client | Gestion atelier »
   et le chapitre « Côté atelier » en bas du site. Encre, os et orange du studio, pour qu'on
   distingue au premier coup d'œil le site de la menuiserie (ce que voient ses clients) des
   explications (ce que le logiciel apporte à l'atelier). */

: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__note { margin-top: 18px; max-width: 64ch; padding: 12px 14px; border-radius: 12px; background: rgba(235, 232, 223, .06); color: var(--p-dim); font: 500 13px/1.5 var(--p-mono); }

.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; font-family: var(--ui, var(--p-display)); }
.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; }
.pfoot { margin: 0; padding: 18px 16px 110px; background: var(--p-ink); color: var(--p-faint); font: 500 12px/1.5 var(--p-mono); text-align: center; }
.pfoot a { color: var(--p-bone); }

/* Démo : la bascule site client / gestion de l'atelier */
.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, .92); -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 .35s, transform .4s cubic-bezier(.16, 1, .3, 1); }
.pmode a { display: grid; place-items: center; height: 44px; 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); }
.pm-away .pmode { opacity: 0; pointer-events: none; transform: translateX(-50%) translateY(18px); }
/* Gestion, ordinateur : la bascule vit dans le pied de la barre latérale, jamais par-dessus le contenu */
.pmode--side { position: static; transform: none; z-index: auto; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); background: rgba(0, 0, 0, .28); }
.pmode--side a { flex: 1 1 0; height: 40px; padding: 0 8px; font-size: 12.5px; }
.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; } }