/* TENON — 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 l'atelier (ce que voient les clients) des explications (ce que ça apporte au patron).
   Pages qui l'utilisent : charger aussi ../../assets/css/fonts.css (Archivo, Instrument Serif). */

: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 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, .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(.sheet.is-open, .drawer.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; } }

/* Gestion (≥ 1024 px) : la bascule vit dans le pied de la barre latérale, jamais par-dessus le contenu */
.pmode--side { position: static; transform: none; left: auto; bottom: auto; width: 100%; justify-content: stretch; background: rgba(0, 0, 0, .28); box-shadow: inset 0 0 0 1px rgba(235, 232, 223, .1); }
.pmode--side a { flex: 1; padding: 0 10px; font-size: 12.5px; }
/* chapitre « Côté atelier » : trois cartes */
.pch__cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1100px) { .pch__cards--3 { grid-template-columns: minmax(0, 1fr); } }
.pch__pain { margin-top: 30px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 28px; }
.pch__pain p { margin: 0; padding: 16px 0; border-top: 1px solid var(--p-rule); color: var(--p-dim); font-size: 15px; line-height: 1.5; }
.pch__pain b { display: block; color: var(--p-bone); font-size: 16.5px; margin-bottom: 4px; }
@media (max-width: 760px) { .pch__pain { grid-template-columns: minmax(0, 1fr); } }
.pmode a { height: 44px; }