/* ══════════════════════════════════════════════════════════════════
   handbook.css — the coach handbook, on screen and on paper.

   Shared by /handbook/ (EN) and /handbook/fr/ (FR): the two pages differ
   only in their prose, never in their layout, so the styling lives here
   instead of being inlined twice and drifting.

   The site's other static pages inline their CSS because each one is a
   single self-contained article. This one is a manual in two languages
   with a print stylesheet, which is exactly the case a shared file is for.

   Tokens (colours, fonts, the brand lockup) are copied from the article
   pages deliberately — the handbook must look like the same product, not
   like documentation bolted on beside it.
   ══════════════════════════════════════════════════════════════════ */

*{box-sizing:border-box}
body{margin:0}

.page{
  font-family:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;
  background:#eceef3;color:#14171f;min-height:100vh;
  -webkit-font-smoothing:antialiased;line-height:1.5;
}
a{color:#3a55e6}
code{font-family:'JetBrains Mono',ui-monospace,'SFMono-Regular',Consolas,monospace}

/* ── Header ─────────────────────────────────────────────────────── */
.hdr{position:sticky;top:0;z-index:50;background:rgba(236,238,243,.85);backdrop-filter:saturate(140%) blur(12px);border-bottom:1px solid #e4e7ee}
.hdr-inner{max-width:1220px;margin:0 auto;padding:0 24px;height:64px;display:flex;align-items:center;gap:12px}
.hdr-actions{margin-left:auto;display:flex;align-items:center;gap:10px}

/* Brand lockup — must stay identical on every page (see index.html .lf-brand) */
@font-face{font-family:'Bricolage Fallback';src:local('Arial');size-adjust:99.65%;ascent-override:93.4%;descent-override:27.1%;line-gap-override:0%}
.brandlock{display:flex;align-items:center;gap:11px;text-decoration:none;color:inherit}
.logo-mark{width:40px;height:40px;border-radius:13px;background:linear-gradient(150deg,#3a55e6,#2b40c4);color:#fff;display:flex;align-items:center;justify-content:center;font-family:'Bricolage Grotesque','Bricolage Fallback';font-weight:800;font-size:16px;box-shadow:0 8px 18px -8px rgba(58,85,230,.9);position:relative;flex:none}
.brandlock .logo-mark::after{content:"";position:absolute;top:8px;right:8px;width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.85)}
.brandlock-txt b{display:block;font-family:'Bricolage Grotesque','Bricolage Fallback';font-weight:800;font-size:19px;letter-spacing:-.02em;line-height:1}
.brandlock-txt small{display:block;font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#5b626f;margin-top:-1px}
.logo-mark.sm{width:32px;height:32px;border-radius:9px;font-size:11px;background:#3a55e6;box-shadow:none}
@media(max-width:700px){.brandlock .logo-mark{width:34px;height:34px;border-radius:11px;font-size:13px}.brandlock .logo-mark::after{top:7px;right:7px;width:5px;height:5px}.brandlock-txt b{font-size:16px}.brandlock-txt small{font-size:9px}}

.cta{display:inline-flex;align-items:center;gap:8px;padding:11px 20px;border-radius:12px;font-size:15px;font-weight:800;color:#fff;text-decoration:none;background:linear-gradient(135deg,#3a55e6,#2b40c4);box-shadow:0 14px 30px -16px #3a55e6}
.pdf-btn{appearance:none;border:1px solid #d3d8e4;background:#fff;color:#2a2f3a;font-family:inherit;font-size:14px;font-weight:800;padding:10px 15px;border-radius:11px;cursor:pointer}
.pdf-btn:hover{border-color:#3a55e6;color:#3a55e6}
.langpick{font-size:14px;font-weight:800;color:#5b626f;text-decoration:none;padding:10px 8px}
.langpick:hover{color:#3a55e6}
@media(max-width:760px){.langpick,.hdr-actions .cta{display:none}}

/* ── Two-column shell: contents rail + document ─────────────────── */
.shell{max-width:1220px;margin:0 auto;padding:0 24px;display:grid;grid-template-columns:236px minmax(0,1fr);gap:52px;align-items:start}
@media(max-width:1000px){.shell{grid-template-columns:minmax(0,1fr);gap:0}}

.toc{position:sticky;top:88px;padding:28px 0 40px}
@media(max-width:1000px){
  .toc{position:static;padding:24px 0 0}
  .toc-list{columns:2;column-gap:20px}
}
.toc-title{font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#8a909c;margin-bottom:12px}
.toc-list{list-style:none;margin:0;padding:0}
.toc-list li{margin:0}
.toc-list a{display:flex;gap:10px;align-items:baseline;padding:7px 10px;margin-left:-10px;border-radius:8px;font-size:14.5px;font-weight:600;color:#464d5a;text-decoration:none;line-height:1.35;break-inside:avoid}
.toc-list a span{font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:700;color:#a3a9b6;flex:none}
.toc-list a:hover{background:#e3e7f2;color:#14171f}
.toc-list a.is-here{background:#fff;color:#2b40c4;box-shadow:0 6px 18px -12px #2b40c4}
.toc-list a.is-here span{color:#3a55e6}
.toc-cta{display:inline-block;margin-top:18px;font-size:13.5px;font-weight:800;color:#3a55e6;text-decoration:none}

/* ── Document ───────────────────────────────────────────────────── */
.doc{max-width:760px;padding:0 0 20px}

.cover{margin-top:34px;padding:38px 34px 32px;border-radius:22px;color:#fff;background:linear-gradient(145deg,#3a55e6,#22307f 68%,#171c3a);box-shadow:0 30px 60px -34px rgba(43,64,196,.9);position:relative;overflow:hidden}
.cover::after{content:"";position:absolute;right:-70px;top:-70px;width:240px;height:240px;border-radius:50%;background:rgba(255,255,255,.07)}
.cover-mark{width:46px;height:46px;border-radius:14px;background:rgba(255,255,255,.16);display:flex;align-items:center;justify-content:center;font-family:'Bricolage Grotesque','Bricolage Fallback';font-weight:800;font-size:17px;margin-bottom:22px}
.cover-kicker{font-size:11px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:rgba(255,255,255,.68);line-height:1.5}
.cover h1{font-family:'Bricolage Grotesque','Bricolage Fallback';font-size:46px;line-height:1.03;font-weight:800;letter-spacing:-.03em;margin:12px 0 0;text-wrap:balance}
.cover h1 span{color:rgba(255,255,255,.62)}
.cover-sub{font-size:17px;line-height:1.6;color:rgba(255,255,255,.86);margin:18px 0 0;max-width:46ch}
.cover-meta{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:26px;padding-top:20px;border-top:1px solid rgba(255,255,255,.18);font-size:12.5px;font-weight:700;color:rgba(255,255,255,.7)}
.cover-meta a{color:#fff}
@media(max-width:600px){.cover{padding:28px 22px}.cover h1{font-size:33px}.cover-sub{font-size:15.5px}}

.lede{font-size:18.5px;color:#464d5a;margin:30px 0 0;line-height:1.65}

.chapter{margin-top:60px;padding-top:34px;border-top:1px solid #dde1eb}
.chapter-num{font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#3a55e6}
h2{font-family:'Bricolage Grotesque','Bricolage Fallback';font-size:29px;font-weight:800;letter-spacing:-.025em;margin:8px 0 0;line-height:1.15}
h3{font-size:19px;font-weight:800;letter-spacing:-.01em;margin:38px 0 0;scroll-margin-top:80px}
.chapter{scroll-margin-top:80px}
p{font-size:16.5px;line-height:1.75;color:#2a2f3a;margin:14px 0 0}
ul,ol{font-size:16.5px;line-height:1.75;color:#2a2f3a;margin:14px 0 0;padding-left:22px}
li{margin-top:8px}
em{color:#464d5a}

/* ── Tables ─────────────────────────────────────────────────────── */
table{border-collapse:collapse;width:100%;margin-top:18px;font-size:15px;background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 1px 0 #e4e7ee}
th,td{text-align:left;padding:11px 14px;border-bottom:1px solid #eaedf3;vertical-align:top}
th{font-weight:800;background:#f5f6fa;font-size:13.5px;letter-spacing:.01em}
tr:last-child td{border-bottom:none}
td code,th code{font-size:13.5px;font-weight:700;background:#eef1fe;color:#2b40c4;padding:2px 7px;border-radius:6px}
p code{font-size:14px;font-weight:700;background:#eef1fe;color:#2b40c4;padding:2px 7px;border-radius:6px}

/* The barème table carries the meaning of the whole app, so it is the one
   table allowed to use colour: win / open / lose, the same three tones the
   in-app "How to speak" sheet uses. */
.bareme td:first-child code{font-size:16px;padding:3px 10px}
.bareme .b-win td:first-child code{background:#dcfce7;color:#15803d}
.bareme .b-lose td:first-child code{background:#fee2e2;color:#b91c1c}
.bareme .b-win{background:#f6fdf8}
.bareme .b-lose{background:#fff7f7}

.skillgrid{font-size:13.5px}
.skillgrid th{white-space:nowrap}
.skillgrid td,.skillgrid th{padding:9px 11px}
.skillgrid tr th:first-child{background:#f5f6fa;font-size:13.5px}
.skillgrid .b-win{background:#f0fdf4;font-weight:700;color:#15803d}
.skillgrid .b-lose{background:#fef2f2;font-weight:700;color:#b91c1c}
@media(max-width:820px){
  .skillgrid{display:block;overflow-x:auto;white-space:nowrap}
}

.ref td:first-child{white-space:nowrap;font-weight:700}

/* ── Set pieces ─────────────────────────────────────────────────── */
.slots{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.slot{display:flex;flex-direction:column;gap:3px;padding:12px 16px;background:#fff;border:1px solid #e0e4ee;border-radius:12px;min-width:104px}
.slot b{font-size:16px;font-weight:800;letter-spacing:-.01em}
.slot i{font-size:11px;font-style:normal;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#9aa1b0}
.slot.is-result{background:#eef1fe;border-color:#c9d3fb}
.slot.is-result b{color:#2b40c4}
.slot.is-result i{color:#7183d8}

.speech{margin-top:18px;padding:18px 20px;background:#0f1220;color:#e7ecff;border-radius:14px;font-size:16px;line-height:1.7}
.speech span{display:block}

.formula{margin-top:16px;padding:16px 18px;background:#0f1220;color:#e7ecff;border-radius:12px;font-size:15.5px;line-height:1.6;overflow-x:auto}
.formula code{color:#9fb4ff;background:none;padding:0}

.callout{margin-top:20px;padding:16px 18px;background:#eef1fe;border:1px solid #d4dbfb;border-radius:12px;font-size:15.5px;line-height:1.65}
.callout p{margin:0;font-size:15.5px}

.advice{margin-top:22px;padding:18px 20px;background:#fbf7ef;border:1px solid #ecdcbf;border-left:4px solid #c98a2b;border-radius:12px;font-size:15.5px;line-height:1.68}
.advice-tag{display:flex;align-items:center;gap:7px;font-size:11.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#a56c1e;margin:0 0 8px}
.advice p{margin:8px 0 0;font-size:15.5px}
.advice p:first-of-type{margin-top:0}

.court{margin-top:20px;background:#fff;border:1px solid #e0e4ee;border-radius:14px;padding:14px;max-width:430px}
.court-net{font-size:10.5px;font-weight:800;letter-spacing:.22em;color:#9aa1b0;text-align:center;padding-bottom:9px;border-bottom:2px solid #c9d3fb;margin-bottom:9px}
.court-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.court-row+.court-row{margin-top:8px}
.court-cell{background:#f5f6fa;border-radius:9px;padding:12px 6px;text-align:center}
.court-cell b{display:block;font-size:17px;font-weight:800;letter-spacing:-.01em}
.court-cell i{display:block;font-style:normal;font-size:10.5px;font-weight:700;color:#9aa1b0;margin-top:2px}
.court-cell.is-serve{background:#eef1fe}
.court-cell.is-serve b{color:#2b40c4}
.court-cell.is-serve i{color:#7183d8}

.shot{display:block;width:100%;height:auto;margin-top:22px;border-radius:14px;border:1px solid #e0e4ee;box-shadow:0 20px 44px -30px #2b40c4}

.ctaband{margin:56px 0 0;padding:34px 28px;border-radius:20px;text-align:center;background:linear-gradient(135deg,#3a55e6,#2b40c4);color:#fff}
.ctaband h2{color:#fff;margin:0}
.ctaband p{color:rgba(255,255,255,.9);max-width:52ch;margin:12px auto 0}
.ctaband .cta{margin-top:20px;background:#fff;color:#2b40c4}

.colophon{margin-top:40px;font-size:12.5px;color:#8a909c;text-align:center}
.colophon a{color:#8a909c}

/* ── Footer ─────────────────────────────────────────────────────── */
.ftr{border-top:1px solid #e4e7ee;margin-top:56px}
.ftr-inner{max-width:1220px;margin:0 auto;padding:28px 24px;display:flex;gap:14px;align-items:center;flex-wrap:wrap;font-size:13px;color:#646b78}
.ftr a{color:#5b626f;text-decoration:none;font-weight:700}

@media(max-width:600px){
  .cover h1{font-size:31px}
  h2{font-size:24px}
  h3{font-size:17.5px}
  .lede{font-size:16.5px}
  table{font-size:14px}
  th,td{padding:9px 11px}
}

/* ══════════════════════════════════════════════════════════════════
   PRINT — this is the "PDF" half of the deliverable.

   The ⤓ Download PDF button is just window.print(); the browser's own
   "Save as PDF" does the rest. So everything that makes this read like a
   manual rather than a printed web page has to happen here: chapters on
   fresh pages, no navigation chrome, no shadows, black on white.
   ══════════════════════════════════════════════════════════════════ */
@media print{
  @page{size:A4;margin:17mm 16mm}

  html,body,.page{background:#fff !important;color:#000}
  .no-print,.hdr,.ftr,.toc,.ctaband,.toc-cta{display:none !important}

  .shell{display:block;max-width:none;padding:0}
  .doc{max-width:none}

  /* Colour survives only where it carries meaning (the barème). Everything
     else prints as ink on paper, which is cheaper and reads better. */
  *{-webkit-print-color-adjust:exact;print-color-adjust:exact;box-shadow:none !important}

  /* No break-after here: the cover and the opening paragraph share page 1,
     and each chapter's own break-before starts the manual on page 2. Forcing
     a break here instead left a page holding one paragraph. */
  .cover{margin:0;border-radius:0;padding:0;background:none !important;color:#000}
  .cover::after{display:none}
  .cover-mark{background:#2b40c4 !important;color:#fff;margin-top:34mm}
  .cover-kicker{color:#555}
  .cover h1{font-size:40pt;margin-top:10mm}
  .cover h1 span{color:#2b40c4}
  .cover-sub{color:#333;font-size:13pt}
  .cover-meta{border-top:1px solid #bbb;color:#555}
  .cover-meta a{color:#000;text-decoration:none}

  .lede{font-size:12pt;color:#333;margin-top:14mm}

  .chapter{break-before:page;border-top:none;margin-top:0;padding-top:0}
  .chapter-num{color:#2b40c4;font-size:8pt}
  h2{font-size:22pt;margin-top:2mm}
  h3{font-size:13pt;margin-top:8mm;break-after:avoid}
  p,ul,ol{font-size:10.5pt;line-height:1.6;color:#111}
  p{orphans:3;widows:3}

  table{font-size:9pt;break-inside:avoid;border:1px solid #ccc;border-radius:0}
  th{background:#f0f0f0 !important;font-size:8.5pt}
  th,td{padding:5pt 7pt;border-bottom:1px solid #ddd}
  td code,th code,p code{background:#eee !important;color:#000;font-size:9pt}

  .skillgrid{font-size:8pt;display:table;white-space:normal}
  .bareme .b-win{background:#eefaf1 !important}
  .bareme .b-lose{background:#fdf0f0 !important}
  .bareme .b-win td:first-child code{background:#cdf0d8 !important;color:#0a5c2b}
  .bareme .b-lose td:first-child code{background:#f8d4d4 !important;color:#8c1414}
  .skillgrid .b-win{background:#eefaf1 !important;color:#0a5c2b}
  .skillgrid .b-lose{background:#fdf0f0 !important;color:#8c1414}

  .speech,.formula{background:#f4f4f6 !important;color:#111;border:1px solid #ddd}
  .speech span,.formula code{color:#111}
  .callout{background:#f3f5ff !important;border:1px solid #ccd}
  .advice{background:#fdfaf3 !important;border:1px solid #e4d4b4;border-left:3pt solid #c98a2b}
  .advice-tag{color:#8a5a12}
  .slot,.court,.court-cell{background:#fff !important;border:1px solid #ddd}
  .court{break-inside:avoid}
  .shot{border:1px solid #ccc;break-inside:avoid}
  .callout,.advice,.slots,.speech{break-inside:avoid}

  .colophon{margin-top:10mm;color:#888;font-size:8pt}
  a{color:#000;text-decoration:none}
}