/* ════════════════════════════════════════════════════════════════════════════
   PATIENTÈLE — tokens de la charte (source unique pour site, dashboard, pages)
   Rose papier · bordeaux · surligneur · encre. Angles quasi droits, filets plutôt qu'ombres.
   Le quiz (repo quiz-engine) garde ses propres variables dans clients/patientele/style.css (mêmes valeurs) :
   si une couleur change ici, la reporter là-bas.
   ════════════════════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Fraunces:ital,opsz,wght@1,9..144,400&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root {
  --p-bg: #F7EEE9;     /* rose papier (fond) */
  --p-card: #FFFAF7;   /* cartes */
  --p-tint: #EDD5CB;   /* aplats doux */
  --p-ink: #21121A;    /* encre (titres) */
  --p-text: #3B2A31;   /* texte courant */
  --p-muted: #6E5A61;
  --p-line: #D9C3BB;   /* filets */
  --p-line2: #8C757D;
  --p-bdx: #5C1A2B;    /* bordeaux (accent, CTA) */
  --p-bdx2: #45121F;   /* bordeaux hover */
  --p-hl: #F2D64B;     /* surligneur */
  --p-green: #3E8E5A;

  --p-sans: 'Plus Jakarta Sans', 'Helvetica Neue', Arial, sans-serif;
  --p-serif: 'Fraunces', Georgia, serif;          /* mot-clé en italique surligné */
  --p-mono: 'IBM Plex Mono', Menlo, monospace;    /* chiffres, kickers */
  --p-radius: 4px;
}

/* Mot-clé surligné : <h1>Vos <em>créneaux vides</em> vous coûtent</h1> */
.p-hl, h1 em, h2 em {
  font-family: var(--p-serif); font-style: italic; font-weight: 400;
  background: linear-gradient(transparent 12%, var(--p-hl) 12%, var(--p-hl) 88%, transparent 88%);
  padding: 0 .12em; -webkit-box-decoration-break: clone; box-decoration-break: clone;
}

/* Logo texte : Patient<span class="e">è</span>le */
.p-logo { font-family: var(--p-sans); font-weight: 800; letter-spacing: -.045em; color: var(--p-bdx); }
.p-logo .e { position: relative; display: inline-block; }
.p-logo .e::before { content: ""; position: absolute; left: .02em; right: .02em; top: -.12em; height: .16em;
  background: var(--p-hl); transform: skewX(-18deg) rotate(-6deg); }

.p-btn { display: inline-block; background: var(--p-bdx); color: var(--p-bg); font: 700 17px/1 var(--p-sans);
  padding: 17px 26px; border: 0; border-radius: 3px; text-decoration: none; cursor: pointer; }
.p-btn:hover { background: var(--p-bdx2); }
.p-kicker { font: 500 12px/1.4 var(--p-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--p-muted); }