/* French Path Canada - shared styles for the free tools and guide pages.
   Brand palette: Late Fall Frosts. Navy = authority, Persimmon = action,
   Olive/gold = framework and achievement. No green in the palette. */

:root {
  --navy: #233145;
  --navy-mid: #3D566F;
  --cream: #F7F5F2;
  --cream-dark: #EFEDE9;
  --maple: #D97455;
  --maple-light: #E08B7A;
  --gold: #F1AC5F;
  --paper: #ffffff;
  --text: #4C5556;
  --text-strong: #233145;
  --text-muted: #696F7C;
  --border: #DDDACb;
  --border-soft: #E7E4DC;
  --warm-surface: #F4E7E2;
  --ink-maple: #AF5232;
  --ink-gold: #8A6220;
  --shadow-sm: 0 2px 8px rgba(35,49,69,0.06);
  --shadow-md: 0 8px 32px rgba(35,49,69,0.10);
  --radius: 14px;
  --radius-lg: 22px;
  --maxw: 720px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --cream: #0F1B2D;
    --cream-dark: #16202F;
    --paper: #1A2739;
    --text: #C6CCD2;
    --text-strong: #F2EFEA;
    --text-muted: #9BA7B4;
    --border: #2E3D52;
    --border-soft: #283647;
    --warm-surface: #2A2036;
    --ink-maple: #E9A488;
    --ink-gold: #F8C88C;
    --shadow-sm: 0 2px 8px rgba(0,0,0,0.30);
    --shadow-md: 0 12px 36px rgba(0,0,0,0.38);
  }
}
:root[data-theme="dark"] {
  --cream: #0F1B2D;
  --cream-dark: #16202F;
  --paper: #1A2739;
  --text: #C6CCD2;
  --text-strong: #F2EFEA;
  --text-muted: #9BA7B4;
  --border: #2E3D52;
  --border-soft: #283647;
  --warm-surface: #2A2036;
  --ink-maple: #E9A488;
  --ink-gold: #F8C88C;
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.30);
  --shadow-md: 0 12px 36px rgba(0,0,0,0.38);
}

* , *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  background: var(--cream);
  color: var(--text);
  font-family: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 17px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

/* ---- header ---- */
.pg-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--navy);
  color: #fff;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.pg-header .in {
  max-width: 1080px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: 0.7rem 1.2rem;
}
.pg-logo {
  display: inline-flex; align-items: center; gap: 0.55rem;
  color: #fff; text-decoration: none;
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 700; font-size: 1.05rem; letter-spacing: -0.01em;
}
.pg-logo svg { width: 22px; height: 22px; stroke: var(--gold); fill: none; stroke-width: 2; }
.pg-nav { display: flex; gap: 1.1rem; align-items: center; }
.pg-nav a {
  color: rgba(255,255,255,0.82); text-decoration: none; font-size: 0.9rem;
  font-weight: 500;
}
.pg-nav a:hover { color: #fff; }
.pg-nav .cta {
  background: var(--maple); color: #fff; padding: 0.5rem 0.95rem;
  border-radius: 9px; font-weight: 600;
}
.pg-nav .cta:hover { background: var(--maple-light); }
.pg-theme {
  width: 34px; height: 34px; flex-shrink: 0;
  border: 1px solid rgba(255,255,255,0.24);
  background: rgba(255,255,255,0.12);
  color: #fff; cursor: pointer; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0;
}
.pg-theme:hover { background: rgba(255,255,255,0.2); }
.pg-theme svg { width: 17px; height: 17px; }
@media (max-width: 640px) {
  .pg-nav a:not(.cta) { display: none; }
  /* Sur 375 px, le nom de marque ET « Book the $24 diagnostic » passaient
     chacun sur deux lignes : l'en-tête collant montait à 88 px, soit un
     neuvième de l'écran occupé en permanence sur chaque guide. On resserre
     les espacements et on retire le verbe de l'appel à l'action, que le
     bouton rend évident. Tout tient sur une ligne, l'en-tête retombe à 52 px. */
  .pg-header .in { padding: 0.55rem 0.9rem; gap: 0.6rem; }
  .pg-nav { gap: 0.55rem; }
  .pg-logo { font-size: 0.95rem; white-space: nowrap; gap: 0.4rem; }
  .pg-logo svg { width: 19px; height: 19px; }
  .pg-nav .cta { font-size: 0.84rem; padding: 0.5rem 0.75rem; white-space: nowrap; }
  .cta-verb { display: none; }
  .pg-theme { width: 32px; height: 32px; }
}

/* ---- shell ---- */
.pg-main { max-width: var(--maxw); margin: 0 auto; padding: 2.4rem 1.2rem 4rem; }
.pg-wide { max-width: 900px; }

.crumbs { font-size: 0.82rem; color: var(--text-muted); margin-bottom: 1.4rem; }
.crumbs a { color: var(--text-muted); text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }

.eyebrow {
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: 0.72rem; letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--ink-maple); font-weight: 500;
}

h1, h2, h3 { font-family: "Playfair Display", Georgia, serif; color: var(--text-strong); line-height: 1.18; letter-spacing: -0.015em; text-wrap: balance; }
h1 { font-size: clamp(2rem, 5vw, 2.7rem); font-weight: 800; margin: 0.5rem 0 0.8rem; }
h2 { font-size: 1.5rem; font-weight: 700; margin: 2.6rem 0 0.9rem; }
h3 { font-size: 1.15rem; font-weight: 700; margin: 1.8rem 0 0.5rem; font-family: "DM Sans", sans-serif; color: var(--text-strong); }

.lead { font-size: 1.15rem; color: var(--text-muted); margin-bottom: 1.6rem; text-wrap: pretty; }

.pg-main p { margin: 0 0 1.1rem; }
.pg-main a { color: var(--ink-maple); text-underline-offset: 2px; }
.pg-main a.btn { color: #fff; }
.pg-main ul, .pg-main ol { margin: 0 0 1.2rem 1.3rem; }
.pg-main li { margin-bottom: 0.5rem; }
.pg-main strong { color: var(--text-strong); font-weight: 600; }

.fr {
  font-style: italic;
  color: var(--navy-mid);
}
:root[data-theme="dark"] .fr, :root:not([data-theme="light"]) .fr { color: var(--text-strong); }
.gloss { color: var(--text-muted); font-style: normal; font-size: 0.94em; }

.note {
  border: 1px solid var(--border);
  border-left: 3px solid var(--gold);
  background: var(--cream-dark);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 1rem 1.2rem; margin: 1.6rem 0;
  font-size: 0.96rem;
}
.note.action { border-left-color: var(--maple); }
.note b { color: var(--text-strong); }

.kv {
  display: grid; grid-template-columns: 1fr; gap: 0;
  border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden; margin: 1.6rem 0;
}
.kv > div {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: 0.8rem 1.1rem; border-top: 1px solid var(--border-soft);
  font-size: 0.95rem;
}
.kv > div:first-child { border-top: 0; }
.kv .k { color: var(--text-muted); }
.kv .v { color: var(--text-strong); font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }

table.data {
  width: 100%; border-collapse: collapse; margin: 1.4rem 0; font-size: 0.92rem;
  display: block; overflow-x: auto;
}
table.data th, table.data td { padding: 0.6rem 0.8rem; text-align: left; border-bottom: 1px solid var(--border-soft); white-space: nowrap; }
table.data th { background: var(--navy); color: #fff; font-weight: 600; font-family: "DM Sans", sans-serif; }
table.data td { color: var(--text); font-variant-numeric: tabular-nums; }
table.data tr:hover td { background: var(--cream-dark); }

.cta-block {
  margin: 2.6rem 0 0;
  background: var(--navy);
  color: #fff;
  border-radius: var(--radius-lg);
  padding: 1.8rem 1.6rem;
}
.cta-block h3 { color: #fff; font-family: "Playfair Display", serif; font-size: 1.35rem; margin: 0 0 0.5rem; }
.cta-block p { color: rgba(255,255,255,0.82); margin: 0 0 1.1rem; }
.btn {
  display: inline-block; background: var(--maple); color: #fff;
  padding: 0.8rem 1.4rem; border-radius: 10px; text-decoration: none;
  font-weight: 600; border: 0; cursor: pointer; font-size: 1rem;
}
.btn:hover { background: var(--maple-light); }
.btn.ghost { background: transparent; border: 1px solid rgba(255,255,255,0.3); }

.related { margin-top: 3rem; border-top: 1px solid var(--border); padding-top: 1.4rem; }
.related h3 { font-family: "Playfair Display", serif; font-size: 1.1rem; margin: 0 0 0.7rem; }
.related ul { list-style: none; margin: 0; padding: 0; }
.related li { margin-bottom: 0.4rem; }
.related a { color: var(--ink-maple); text-decoration: none; font-weight: 500; }
.related a:hover { text-decoration: underline; }

.pg-footer {
  background: var(--navy); color: rgba(255,255,255,0.6);
  text-align: center; padding: 2rem 1.2rem;
  font-size: 0.85rem;
}
.pg-footer a { color: rgba(255,255,255,0.8); text-decoration: none; }
.pg-footer .row { display: flex; gap: 1.2rem; justify-content: center; flex-wrap: wrap; margin-bottom: 0.8rem; }

.updated { font-size: 0.82rem; color: var(--text-muted); margin-top: 2.4rem; }

/* ── SIGNATURE ────────────────────────────────────────────────────────────
   Les guides étaient signés dans les données structurées et nulle part sur
   la page. Un lecteur qui arrive par une recherche n'a alors aucun moyen de
   savoir qui écrit, ni pourquoi le croire : c'est exactement ce qui fait
   qu'un texte se lit comme du contenu fabriqué en série. Un visage, un nom,
   une ligne qui dit d'où vient l'autorité, et la date de dernière revue. */
.byline {
  display: flex; align-items: center; gap: 0.85rem;
  margin: 0 0 2rem; padding: 0.9rem 0;
  border-top: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
}
.byline img {
  width: 46px; height: 46px; border-radius: 50%; flex-shrink: 0;
  object-fit: cover; border: 1px solid var(--border);
}
.byline-who { font-size: 0.92rem; color: var(--text-strong); font-weight: 600; }
.byline-who a { color: inherit; text-decoration: none; }
.byline-who a:hover { text-decoration: underline; }
.byline-what { font-size: 0.84rem; color: var(--text-muted); line-height: 1.45; }
.byline-meta {
  font-size: 0.78rem; color: var(--text-muted);
  font-variant-numeric: tabular-nums; margin-top: 0.15rem;
}

/* ── SOMMAIRE ─────────────────────────────────────────────────────────────
   Un guide de quinze cents mots sur un téléphone, c'est une dizaine
   d'écrans à faire défiler pour savoir s'il répond à la question. Le
   sommaire répond en trois secondes, et sert ensuite de repère. */
.toc {
  background: var(--cream-dark);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 1rem 1.2rem; margin: 0 0 2.2rem;
}
.toc-title {
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-muted); margin-bottom: 0.55rem;
}
.toc ol { margin: 0; padding: 0; list-style: none; counter-reset: toc; }
.toc li { margin: 0 0 0.35rem; counter-increment: toc; }
.toc li:last-child { margin-bottom: 0; }
.toc a {
  color: var(--text-strong); text-decoration: none; font-size: 0.93rem;
  display: inline-block; line-height: 1.4;
}
.toc a::before {
  content: counter(toc) ". ";
  color: var(--text-muted); font-variant-numeric: tabular-nums;
}
.toc a:hover { color: var(--ink-maple); text-decoration: underline; }

/* Un titre de section reste atteignable par son lien direct : le décalage
   compense l'en-tête collant, sinon le titre visé passe dessous. */
.pg-main h2[id], .pg-main h3[id] { scroll-margin-top: 4.5rem; }

/* ── IMPRESSION ───────────────────────────────────────────────────────────
   Ce sont des ressources d'examen : beaucoup de gens les impriment ou les
   enregistrent en PDF pour réviser hors ligne. Sans ces règles, la sortie
   emportait le bandeau navy pleine largeur, le bouton de question flottant
   au milieu d'un paragraphe, et des liens dont on ne voyait pas la cible. */
@media print {
  .pg-header, .pg-footer, .fpc-ask, .fpc-ask-launcher, .fpc-ask-panel,
  .cta-block, .crumbs, .pg-theme { display: none !important; }
  html, body {
    background: #fff !important; color: #000 !important;
    font-size: 11pt; line-height: 1.5;
  }
  .pg-main { max-width: none; padding: 0; }
  h1, h2, h3 { color: #000 !important; break-after: avoid; }
  h2, h3 { break-inside: avoid; }
  table.data, .kv, .note, .byline, .toc { break-inside: avoid; }
  table.data { display: table; overflow: visible; }
  table.data th { background: #eee !important; color: #000 !important; }
  .fr { color: #000 !important; }
  .pg-main a { color: #000 !important; text-decoration: underline; }
  /* La cible d'un lien, imprimée à côté : sur papier, un lien sans adresse
     ne mène nulle part. Les ancres internes sont exclues, inutiles ici. */
  .pg-main a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 0.8em; color: #555; word-break: break-all;
  }
  .related { break-before: avoid; }
}

a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 2px solid var(--maple); outline-offset: 2px; border-radius: 3px;
}
@media (prefers-reduced-motion: reduce) {
  * , *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  html { scroll-behavior: auto; }
}

/* Cibles tactiles : au pouce, un lien de 17 px de haut se rate souvent. On
   élargit la zone atteignable sans toucher à la taille du texte, donc sans
   déplacer quoi que ce soit. Pointeur grossier seulement : à la souris, ces
   zones invisibles gêneraient la sélection de texte. */
@media (pointer: coarse) {
  a, button, [role="button"], summary, label { touch-action: manipulation; }
  .pg-footer .row a { display: inline-block; padding: 6px 0; }
  .pg-nav a { display: inline-block; padding: 8px 4px; }
  .crumbs a { display: inline-block; padding: 0.35rem 0; }
  .pg-logo { padding: 0.3rem 0; }
  /* Le sommaire et la liste « à lire ensuite » sont des listes de
     navigation, pas de la prose : viser une ligne de 21 px au pouce rate
     souvent la bonne entrée. */
  .toc a { padding: 0.35rem 0; }
  .related a { display: inline-block; padding: 0.3rem 0; }
}

/* ── QUESTION BOX (fpc-ask) : boîte maison, pas de tchat tiers ── */
.fpc-ask-launcher {
  position: fixed; right: 20px; bottom: 20px; z-index: 9999;
  width: 54px; height: 54px; border-radius: 50%;
  background: var(--navy); color: #fff; border: 1.5px solid var(--gold); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-md); transition: background 0.15s, transform 0.15s;
}
.fpc-ask-launcher:hover { background: var(--navy-mid); transform: scale(1.1); }
.fpc-ask-panel {
  position: fixed; right: 20px; bottom: 86px; z-index: 9999;
  width: 320px; max-width: calc(100vw - 40px);
  background: var(--paper); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-md);
  padding: 1.1rem;
}
.fpc-ask-panel[hidden] { display: none; }
.fpc-ask-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.4rem; }
.fpc-ask-title { font-weight: 700; color: var(--text-strong); font-size: 0.95rem; }
.fpc-ask-close { background: none; border: none; font-size: 1.3rem; line-height: 1; color: var(--text-muted); cursor: pointer; padding: 0 0.2rem; }
.fpc-ask-intro { font-size: 0.82rem; color: var(--text-muted); margin: 0 0 0.7rem; }
.fpc-ask-hp { position: absolute; left: -9999px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.fpc-ask-label { display: block; font-size: 0.72rem; font-weight: 600; color: var(--text-muted); margin-bottom: 0.2rem; }
.fpc-ask-input, .fpc-ask-textarea {
  width: 100%; box-sizing: border-box; padding: 0.55rem 0.7rem;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--paper); color: var(--text-strong);
  font-size: 0.85rem; font-family: inherit; margin-bottom: 0.55rem;
}
.fpc-ask-textarea { min-height: 80px; resize: vertical; }
.fpc-ask-submit {
  width: 100%; appearance: none; -webkit-appearance: none;
  background: var(--maple); color: #fff; border: none; border-radius: 8px;
  padding: 0.6rem; font-weight: 600; font-size: 0.85rem; cursor: pointer; font-family: inherit;
}
.fpc-ask-submit:hover { background: var(--maple-light); }
.fpc-ask-error { font-size: 0.8rem; color: var(--ink-maple); margin: 0.55rem 0 0; }
.fpc-ask-success { text-align: center; padding: 0.4rem 0; }
.fpc-ask-success svg { color: var(--gold); }
.fpc-ask-success-text { font-size: 0.85rem; color: var(--text-strong); margin: 0.6rem 0 0.9rem; }
.fpc-ask-again {
  appearance: none; -webkit-appearance: none; background: none;
  border: 1px solid var(--border); border-radius: 8px;
  padding: 0.5rem 0.9rem; font-size: 0.8rem; font-weight: 600;
  color: var(--text-strong); cursor: pointer; font-family: inherit;
}
.fpc-ask-again:hover { background: var(--cream-dark); }
@media (max-width: 480px) {
  .fpc-ask-panel { right: 12px; left: 12px; width: auto; bottom: 82px; }
}