/* ══════════════════════════════════════
   RESET & BASE
══════════════════════════════════════ */
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: system-ui, -apple-system, sans-serif; background: #f5f4f0; color: #1a1a1a; min-height: 100vh; }

/* ══════════════════════════════════════
   CSS VARIABLES — domaine FA = Orange (D-001)
══════════════════════════════════════ */
:root {
  --fa:       #d4620a;
  --fa-lt:    #fef3e8;
  --fa-mid:   #f9dfc0;
  --fa-dk:    #a04808;
  --fa-acc:   #e07820;
  --bdr:      #e0ddd6;
  --color-background-primary: #ffffff;
  --color-border-tertiary:    #e0ddd6;
  --border-radius-lg:         10px;

  /* Domain colour — each page overrides --domain, --domain-dk, --domain-acc */
  --domain:     var(--fa);
  --domain-dk:  var(--fa-dk);
  --domain-acc: var(--fa-acc);

  /* Layout tokens — override per breakpoint */
  --page-pad:     1.5rem;
  --chart-h:      calc(100vh - 110px);
  --chart-h-min:  480px;
  --nav-top:      52px;   /* height of sticky nav — used for sticky chart offset */
}

/* ══════════════════════════════════════
   NAV
══════════════════════════════════════ */
.site-nav {
  background: #fff;
  border-bottom: 2px solid var(--fa);
  padding: .75rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #888;
  position: sticky;
  top: 0;
  z-index: 100;
  min-height: 48px;
}
.site-nav .nav-home  { font-weight:600; color:var(--fa); cursor:pointer; white-space:nowrap; }
.site-nav .nav-home:hover { text-decoration:underline; }
.site-nav .nav-sep   { color:#ccc; }
.site-nav .nav-crumb { color:#555; cursor:pointer; }
.site-nav .nav-crumb:hover { text-decoration:underline; color:var(--fa); }
.site-nav .nav-current { color:#111; font-weight:500; }

/* ══════════════════════════════════════
   PAGES
══════════════════════════════════════ */
.page { display: none; }
.page.active { display: block; }
.page-padded { padding: var(--page-pad); }

/* ══════════════════════════════════════
   HOME
══════════════════════════════════════ */
.home-hero {
  margin: 2rem 0 2.5rem;
  text-align: left;
}
.domain-badge {
  display: inline-block;
  background: var(--fa-lt); color: var(--fa-dk);
  font-size: 11px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  border-radius: 20px; padding: 4px 14px;
  margin-bottom: .75rem; border: 1px solid var(--fa-mid);
}
.home-hero h1 { font-size: 2rem; font-weight: 700; color: var(--domain); margin-bottom: .75rem; }
.home-hero p  { font-size: 1rem; color: #555; line-height: 1.7; }

.home-section-label {
  margin: 0 0 .75rem;
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--fa-dk);
}
.card-grid   { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); gap: 16px; margin: 0 0 16px; }
.card-grid-2 { grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); }
.card-grid-4 { grid-template-columns: repeat(auto-fit, minmax(200px,1fr)); }

.nav-card {
  background: #fff; border: 1px solid var(--bdr);
  border-radius: 14px; padding: 1.25rem 1.5rem;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s, transform .1s;
}
.nav-card:hover {
  border-color: var(--fa-acc);
  box-shadow: 0 2px 16px rgba(212,98,10,.13);
  transform: translateY(-1px);
}
.nav-card .card-icon   { font-size: 1.75rem; margin-bottom: .5rem; }
.nav-card .card-meta   { font-size: 10px; font-weight: 600; color: var(--domain); letter-spacing: .05em; text-transform: uppercase; margin-bottom: .4rem; }
.nav-card h2           { font-size: 1rem; font-weight: 600; color: var(--domain-dk); margin-bottom: .35rem; }
.nav-card p            { font-size: .83rem; color: #666; line-height: 1.55; }
.nav-card .card-arrow  { margin-top: .85rem; font-size: 12px; color: var(--domain); font-weight: 600; }

/* ══════════════════════════════════════
   PAGE SUBJECT TAG (kept in CSS, removed from HTML)
══════════════════════════════════════ */
.page-subject-tag {
  font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--fa); background: var(--fa-lt); border: 1px solid var(--fa-mid);
  border-radius: 20px; display: none; padding: 3px 12px; margin-bottom: .5rem;
}

/* ══════════════════════════════════════
   AFFINE HEADER + TABS
══════════════════════════════════════ */
.affine-header { background: #fff; border-bottom: 1px solid var(--bdr); }
.tab-nav {
  display: flex;
  padding: 0 var(--page-pad);
  margin-top: .65rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;   /* smooth scroll on iOS */
  scrollbar-width: none;               /* hide scrollbar on Firefox */
  gap: 0;
}
.tab-nav::-webkit-scrollbar { display: none; }  /* hide scrollbar on Chrome/Safari */

.tab-btn {
  background: none; border: none;
  border-bottom: 3px solid transparent;
  padding: .6rem 1.1rem;
  font-size: 13px; font-weight: 500; color: #555;
  cursor: pointer; white-space: nowrap;
  transition: color .15s, border-color .15s;
  display: flex; align-items: center; gap: 6px;
  font-family: inherit;
  /* Touch-friendly minimum tap target */
  min-height: 44px;
}
.tab-btn:hover  { color: var(--fa); }
.tab-btn.active { color: var(--fa); border-bottom-color: var(--fa); font-weight: 600; }
.tab-ref {
  font-size: 10px; background: var(--fa-lt); color: var(--fa-dk);
  border-radius: 10px; padding: 1px 7px; font-weight: 600; letter-spacing: .04em;
}
.affine-tab        { display: none; }
.affine-tab.active { display: block; }

/* ══════════════════════════════════════
   STEP CARDS (Construire FA01-05)
══════════════════════════════════════ */
.step-cards { display: flex; flex-direction: column; gap: 10px; }
.step-card  { display: flex; gap: 14px; background: #fff; border: 1px solid var(--bdr); border-radius: 12px; padding: .9rem 1.1rem; }
.step-num   { width:30px; height:30px; min-width:30px; background:var(--fa); color:#fff; border-radius:50%; font-size:14px; font-weight:700; display:flex; align-items:center; justify-content:center; margin-top:2px; flex-shrink:0; }
.step-body  { flex: 1; }
.step-title { font-size: .9rem; font-weight: 600; color: #111; margin-bottom: 5px; }
.step-body p { font-size: .84rem; color: #444; line-height: 1.65; }

.build-examples    { display: flex; flex-direction: column; gap: 8px; }
.build-ex          { background: var(--fa-lt); border: 1px solid var(--fa-mid); border-radius: 8px; padding: 10px 14px; cursor: pointer; transition: border-color .15s, background .15s; }
.build-ex:hover    { border-color: var(--fa-acc); background: #fde9d4; }
.build-ex-formula  { font-size: .95rem; font-weight: 700; color: var(--fa-dk); margin-bottom: 3px; }
.build-ex-pts      { font-size: .79rem; color: #666; }

.build-legend      { display: flex; flex-wrap: wrap; gap: 10px 18px; padding: 12px 14px; background: #fff; border: 1px solid var(--bdr); border-radius: 10px; margin-top: 10px; }
.build-legend-item { display: flex; align-items: center; gap: 7px; font-size: 11px; color: #555; }
.bl-line  { display: inline-block; width: 24px; height: 3px; border-radius: 2px; }
.bl-dot   { display: inline-block; width: 10px; height: 10px; border-radius: 50%; }
.bl-dash  { display: inline-block; width: 22px; height: 0; border-top: 2px dashed; }

/* ══════════════════════════════════════
   SLOPE CALCULATOR (Pente / Formule)
══════════════════════════════════════ */
.slope-calc        { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: .75rem; }
.slope-point       { background: #f9f8f5; border: 1px solid var(--bdr); border-radius: 10px; padding: 10px 12px; }
.slope-point-label { font-size: 11px; font-weight: 600; color: var(--fa); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 8px; }
.slope-inputs      { display: grid; grid-template-columns: auto 1fr; gap: 4px 8px; align-items: center; }
.slope-inputs label { font-size: 12px; color: #555; font-weight: 500; }
.slope-inputs input {
  width: 100%; border: 1px solid var(--bdr); border-radius: 6px;
  padding: 6px 8px; font-size: 13px; color: #111; background: #fff;
  font-family: inherit;
  /* Larger touch target on mobile */
  min-height: 36px;
}
.slope-inputs input:focus { outline: none; border-color: var(--fa); }

.slope-result    { background: var(--fa-lt); border-left: 3px solid var(--fa); border-radius: 0 8px 8px 0; padding: 12px 14px; margin-top: 10px; }
.slope-steps     { font-size: .84rem; color: #333; line-height: 2; }
.slope-answer    { font-size: 1rem; font-weight: 700; color: var(--fa-dk); margin-top: 6px; }
.formula-result  { background: var(--fa-lt); border-left: 3px solid var(--fa); border-radius: 0 8px 8px 0; padding: 12px 14px; margin-top: 10px; font-size: .84rem; color: #333; line-height: 2.1; }

.slope-visual-info { background: #fff; border: 1px solid var(--bdr); border-radius: 10px; padding: 12px 14px; margin-top: 10px; }
.svi-row           { display: flex; justify-content: space-between; align-items: center; padding: 4px 0; font-size: 13px; color: #555; }
.svi-row + .svi-row { border-top: 1px solid #f0eee8; }
.svi-val           { font-weight: 700; color: #111; }
.svi-total         { padding-top: 8px; margin-top: 4px; }
.svi-total .svi-val { color: var(--fa); font-size: 15px; }

/* ══════════════════════════════════════
   CONCEPT LAYOUT (FA01-01/02/03)
══════════════════════════════════════ */
.concept-layout {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 16px;
  align-items: stretch;
  max-width: 1100px;
  margin: 0 auto;
  height: calc(100vh - 160px);
  min-height: 600px;
}
.concept-left  { min-width: 0; }
.concept-right { display: flex; flex-direction: column; gap: 10px; min-width: 0; min-height: 0; }

.concept-card          { background: #fff; border: 1px solid var(--bdr); border-radius: 12px; padding: 1.25rem 1.4rem; margin-bottom: 1rem; }
.concept-card:last-child { margin-bottom: 0; }
.concept-card h2       { font-size: .95rem; font-weight: 600; margin-bottom: .65rem; color: var(--domain); }
.concept-card p        { font-size: .87rem; color: #444; line-height: 1.75; margin-bottom: .5rem; }
.concept-card p:last-child { margin-bottom: 0; }
.concept-card b        { color: var(--fa); }

.example-box { background: var(--fa-lt); border-left: 3px solid var(--fa); border-radius: 0 8px 8px 0; padding: 10px 14px; font-size: .87rem; color: #333; margin-top: .75rem; line-height: 1.9; }

.vocab-list  { display: flex; flex-direction: column; gap: 7px; }
.vocab-item  { display: flex; align-items: baseline; gap: 10px; font-size: .83rem; }
.vocab-term  { min-width: 62px; font-weight: 700; color: var(--fa-dk); flex-shrink: 0; }
.vocab-def   { color: #555; line-height: 1.5; }

.def-repr-list { margin-top: .5rem; display: flex; flex-direction: column; gap: 7px; }
.def-repr-item { display: flex; align-items: center; gap: 8px; font-size: .85rem; color: #333; font-weight: 500; }

.repr-num    { width:26px; height:26px; min-width:26px; background:#3475c8; color:#fff; border-radius:50%; font-size:13px; font-weight:700; display:flex; align-items:center; justify-content:center; }
.fa-repr-num { background: var(--fa) !important; }

.repr-card { background: #fff; border: 1px solid var(--bdr); border-radius: 12px; padding: 1rem 1.1rem; flex-shrink: 0; }
.repr-lg   { flex: 1 1 0; display: flex; flex-direction: column; min-height: 0; }
.repr-alg  { flex: 0 0 auto; }
.repr-tab  { flex: 0 0 auto; }
.repr-sm-note { font-size: .75rem; color: #999; margin-top: 4px; }

.alg-examples    { display: flex; flex-direction: column; gap: 8px; }
.alg-formula-box { font-family: Georgia,serif; font-size: 1.05rem; font-weight: 700; color: #185fa5; background: #eef4fc; border-radius: 8px; padding: 8px 14px; display: inline-block; }
.fa-formula-box  { color: var(--fa-dk) !important; background: var(--fa-lt) !important; }

.alg-calc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.alg-calc-card { background: #f9f8f5; border: 1px solid #e8e5de; border-radius: 8px; padding: 8px 12px; }
.alg-calc-x    { font-size: .8rem; color: #888; margin-bottom: 2px; }
.alg-calc-step { font-size: .82rem; color: #444; line-height: 1.4; }
.alg-calc-result { font-size: 1rem; font-weight: 700; margin-top: 2px; }
.fa-result     { color: var(--fa) !important; }

.tab-both  { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.tab-block { display: flex; flex-direction: column; gap: 5px; }
.tab-label { font-size: 11px; color: #aaa; letter-spacing: .04em; text-transform: uppercase; margin-bottom: 3px; }

.repr-table             { border-collapse: collapse; font-size: 12px; }
.repr-table th,
.repr-table td          { border: 1px solid var(--bdr); padding: 5px 9px; text-align: center; }
.repr-table thead th    { background: var(--fa-lt); color: var(--fa-dk); font-weight: 600; }
.repr-table tbody th    { background: #f0eee8; color: #555; font-weight: 600; white-space: nowrap; }
.repr-table tbody td    { color: var(--fa-dk); font-weight: 600; }

/* ══════════════════════════════════════
   EXPLORER LAYOUT
══════════════════════════════════════ */
.explorer-layout {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 0;
  align-items: start;
  width: 100%;
}
.left-col  { min-width: 0; padding: 1.5rem 1.5rem 1.5rem 1.5rem; }
.right-col { min-width: 0; padding: 1rem 1.5rem 1rem 0; }

.formula-badge {
  display: inline-block;
  background: var(--fa-lt); border: 1px solid var(--fa-mid);
  border-radius: 8px; padding: .5rem 1rem;
  font-size: 1.05rem; font-weight: 700;
  margin-bottom: 1.25rem; color: var(--fa-dk);
  font-family: Georgia,serif;
}
.controls      { display: grid; grid-template-columns: 1fr; gap: 10px; margin-bottom: 1.25rem; }
.control-card  { background: #fff; border: 1px solid var(--bdr); border-radius: 10px; padding: 14px; }
.control-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.control-label  { font-size: 13px; color: #555; line-height: 1.4; }
.control-label b { font-size: 15px; color: #111; }
.control-value  { font-size: 18px; font-weight: 700; min-width: 44px; text-align: right; color: var(--fa); flex-shrink: 0; }
.control-value.positive { color: var(--fa); }
.control-value.negative { color: #c0390a; }
.control-value.zero     { color: #888; }

input[type=range] {
  width: 100%;
  accent-color: var(--fa);
  cursor: pointer;
  height: 6px;          /* slightly taller track — easier to grab on touch */
}
.control-hint { font-size: 11px; color: #999; margin-top: 6px; line-height: 1.5; }

.stats     { display: grid; grid-template-columns: 1fr; gap: 8px; margin-bottom: 1.25rem; }
.stat-card { background: #fff; border: 1px solid var(--bdr); border-radius: 10px; padding: 12px 14px; }
.stat-label { font-size: 10px; color: #888; letter-spacing: .04em; text-transform: uppercase; margin-bottom: 4px; line-height: 1.4; }
.stat-value { font-size: 13px; font-weight: 600; color: #111; }

.observation   { background: var(--fa-lt); border-left: 3px solid var(--fa); border-radius: 0 8px 8px 0; padding: 12px 16px; font-size: 13px; color: #333; line-height: 1.7; }
.observation b { color: var(--fa-dk); }

.chart-wrapper   { background: #fff; border: 1px solid var(--bdr); border-radius: 12px; padding: 16px; position: sticky; top: var(--nav-top); }
.chart-title     { font-size: 13px; color: #555; margin-bottom: 8px; font-weight: 500; }
.chart-formula   { font-weight: 700; color: var(--fa); }
.chart-container { position: relative; height: var(--chart-h); min-height: var(--chart-h-min); }

/* ══════════════════════════════════════
   PAGE HEADER
══════════════════════════════════════ */
.page-header    { max-width: 860px; margin: 0 0 1.5rem; }
.page-header h1 { font-size: 1.4rem; font-weight: 700; margin-bottom: .3rem; color: var(--domain); }
.page-header p  { font-size: .9rem; color: #666; }

/* ══════════════════════════════════════
   REAL-LIFE HOOK
══════════════════════════════════════ */
.rl-hook       { margin-bottom: 1.25rem; }
.rl-hook-label { font-size: 11px; font-weight: 600; color: #555; text-transform: uppercase; letter-spacing: .07em; margin-bottom: 10px; }
.rl-grid  { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; }
.rl-card  { background: var(--color-background-primary); border: .5px solid var(--color-border-tertiary); border-radius: var(--border-radius-lg); padding: 12px 14px; display: flex; flex-direction: column; gap: 7px; }
.rl-top   { display: flex; align-items: center; gap: 8px; }
.rl-icon  { width:32px; height:32px; border-radius:7px; display:flex; align-items:center; justify-content:center; font-size:16px; flex-shrink:0; }
.rl-type  { font-size:10px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; }
.rl-formula   { font-family:Georgia,serif; font-size:12px; font-weight:700; padding:4px 9px; border-radius:5px; display:inline-block; }
.rl-situation { font-size:12px; color:#1a1a1a; font-weight:500; line-height:1.5; }

.rl-icon-blue{background:#E6F1FB;}   .rl-type-blue{color:#185FA5;}   .rl-formula-blue{background:#E6F1FB;color:#0C447C;}
.rl-icon-teal{background:#E1F5EE;}   .rl-type-teal{color:#0F6E56;}   .rl-formula-teal{background:#E1F5EE;color:#085041;}
.rl-icon-amber{background:#FAEEDA;}  .rl-type-amber{color:#854F0B;}  .rl-formula-amber{background:#FAEEDA;color:#633806;}
.rl-icon-purple{background:#EEEDFE;} .rl-type-purple{color:#534AB7;} .rl-formula-purple{background:#EEEDFE;color:#3C3489;}

/* ══════════════════════════════════════
   PAGE TAG (debug — bottom right)
══════════════════════════════════════ */
.page-tag {
  position: fixed; bottom: 12px; right: 14px;
  font-size: 10px; font-family: monospace; color: #bbb;
  background: rgba(255,255,255,.85); border: 1px solid var(--bdr);
  border-radius: 5px; padding: 3px 8px;
  pointer-events: none; z-index: 999; letter-spacing: .05em;
}

/* ══════════════════════════════════════
   RESPONSIVE — TABLET LANDSCAPE + SMALL LAPTOP
   901px – 1199px
   e.g. iPad Pro landscape (1024px), Surface Go landscape
══════════════════════════════════════ */
@media (max-width: 1199px) {
  :root {
    --chart-h:     calc(100vh - 120px);
    --chart-h-min: 420px;
  }
  .home-hero h1  { font-size: 1.75rem; }
  .card-grid-4   { grid-template-columns: repeat(2, 1fr); }
}

/* ══════════════════════════════════════
   RESPONSIVE — TABLET PORTRAIT
   601px – 900px
   e.g. iPad (768px), iPad Mini (768px), iPad Air portrait
══════════════════════════════════════ */
@media (max-width: 900px) {
  :root {
    --page-pad:    1.25rem;
    --chart-h:     420px;   /* fixed height — avoids 100vh issues in tablet browsers */
    --chart-h-min: 380px;
    --nav-top:     48px;
  }

  /* Explorer: stack vertically — graph below controls */
  .explorer-layout {
    grid-template-columns: 1fr;
  }
  .left-col  { padding: 1.25rem 1.25rem 0 1.25rem; }
  .right-col {
    padding: 0 1.25rem 1.25rem 1.25rem;
    /* Un-sticky the chart on tablet portrait — it's below the controls */
  }
  .chart-wrapper {
    position: static;   /* no sticky on tablet portrait — full scroll */
    margin-top: 1.25rem;
  }

  /* Concept layout: stack vertically */
  .concept-layout {
    grid-template-columns: 1fr;
    height: auto;
    min-height: unset;
  }
  .repr-lg { min-height: 300px; }

  /* Home grid */
  .card-grid-2 { grid-template-columns: 1fr; }
  .card-grid-4 { grid-template-columns: repeat(2, 1fr); }

  /* Affine tabs: smaller text, full scrollable */
  .tab-btn { font-size: 12px; padding: .5rem .9rem; }

  /* Slope calculator: stack the two point inputs */
  .slope-calc { grid-template-columns: 1fr; }

  /* Calc grid in concept page */
  .alg-calc-grid { grid-template-columns: 1fr 1fr; }

  /* RL grid: 2 columns */
  .rl-grid { grid-template-columns: 1fr 1fr; }

  /* Lineaire & constante side-by-side cards */
  .lineaire-grid { grid-template-columns: 1fr !important; }

  /* Home hero */
  .home-hero { margin: 1.5rem 0 2rem; }
  .home-hero h1 { font-size: 1.6rem; }
  .home-hero p  { font-size: .95rem; }

  /* Affine header padding */
  .affine-header > div { padding-left: 1.25rem; padding-right: 1.25rem; }
  .tab-nav { padding: 0 1.25rem; }
}

/* ══════════════════════════════════════
   RESPONSIVE — PHONE
   ≤ 600px
   Not a primary target but must not break
══════════════════════════════════════ */
@media (max-width: 600px) {
  :root {
    --page-pad:    1rem;
    --chart-h:     320px;
    --chart-h-min: 300px;
  }

  .home-hero h1    { font-size: 1.4rem; }
  .home-hero p     { font-size: .9rem; }
  .home-section-label { font-size: 10px; }

  /* Single column for all home grids */
  .card-grid-2,
  .card-grid-4 { grid-template-columns: 1fr; }

  /* Tabs: even more compact */
  .tab-btn { font-size: 11px; padding: .45rem .7rem; min-height: 40px; }

  /* Concept calc grid: single column */
  .alg-calc-grid { grid-template-columns: 1fr; }

  /* RL grid: single column */
  .rl-grid { grid-template-columns: 1fr; }

  /* Slope calc: single column */
  .slope-calc { grid-template-columns: 1fr; }

  /* Repr table: allow horizontal scroll */
  .repr-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Tab-both: stack */
  .tab-both { flex-direction: column; }

  /* Nav: smaller text */
  .site-nav { font-size: 12px; padding: .6rem 1rem; }

  /* Formula badge: slightly smaller */
  .formula-badge { font-size: .95rem; }

  /* Page padded */
  .page-padded { padding: var(--page-pad); }

  /* Affine header */
  .affine-header > div { padding-left: 1rem; padding-right: 1rem; }
  .tab-nav { padding: 0 1rem; }

  /* Left/right cols */
  .left-col  { padding: 1rem 1rem 0 1rem; }
  .right-col { padding: 0 1rem 1rem 1rem; }
}

/* ── Bouton retour au chapitre (concept-nav) ── */
.concept-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid #e0ddd6;
}
.cnb {
  display: inline-block;
  font-size: .82rem;
  font-weight: 600;
  color: var(--domain);
  text-decoration: none;
  padding: 6px 14px;
  border: 1px solid var(--domain-mid, #b2b2b2);
  border-radius: 20px;
  transition: background .15s;
}
.cnb:hover { background: var(--domain-lt, #f5f5f5); }
.cnb.prev  { color: #888; border-color: #ddd; }
.cnb.prev:hover { background: #f5f5f5; color: #555; }