@view-transition {
  navigation: auto;
}

@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700;800;900&display=swap');

/* ══════════════════════════════════════════
   VARIABLES — LIGHT MODE (défaut)
══════════════════════════════════════════ */
:root {
  --surface:  rgba(255,255,255,.92);
  --surface2: rgba(236,248,254,.95);
  --border:   rgba(170,212,232,.65);
  --border2:  rgba(140,192,218,.75);

  --text:     #1A2E3A;
  --muted:    #6A8E9E;
  --faint:    #A2C4D0;

  --legs:    #2E9E5B; --legs-bg:  rgba(232,249,240,.95); --legs-bd:  #A8E8C4;
  --push:    #2563EB; --push-bg:  rgba(239,246,255,.95); --push-bd:  #BFDBFE;
  --pull:    #7C3AED; --pull-bg:  rgba(245,243,255,.95); --pull-bd:  #DDD6FE;
  --nat:     #0891B2; --nat-bg:   rgba(236,254,255,.95); --nat-bd:   #A5F3FC;
  --run:     #EA580C; --run-bg:   rgba(255,247,237,.95); --run-bd:   #FED7AA;
  --rep:     #9CA3AF; --rep-bg:   rgba(249,250,251,.95); --rep-bd:   #E5E7EB;
  --dld:     #D97706; --dld-bg:   rgba(255,251,235,.95); --dld-bd:   #FDE68A;

  --val:     #2E9E5B; --val-bg:   rgba(232,249,240,.95); --val-bd:   #A8E8C4;
  --eli:     #EC4899; --eli-bg:   rgba(253,242,248,.95); --eli-bd:   #FBCFE8;

  --hero-bg:    rgba(26,46,58,.92);
  --hero-fg:    #ffffff;
  --hero-muted: rgba(255,255,255,.45);
  --hero-faint: rgba(255,255,255,.22);

  --radius-sm: 10px;
  --radius:    14px;
  --radius-lg: 24px;

  --shadow-sm: 0 2px 10px rgba(30,80,120,.10);
  --shadow:    0 4px 20px rgba(30,80,120,.14);
  --shadow-lg: 0 8px 36px rgba(30,80,120,.20);

  --font-display: 'Nunito', sans-serif;
  --font-body:    'Nunito', sans-serif;

  --hdr-bg:  rgba(255,255,255,.15);
  --nav-bg:  rgba(255,255,255,.78);
  --tabs-bg: rgba(255,255,255,.80);
}

/* ══════════════════════════════════════════
   VARIABLES — DARK MODE (préférence système)
══════════════════════════════════════════ */
@media (prefers-color-scheme: dark) {
  :root {
    --surface:  rgba(14,32,50,.92);
    --surface2: rgba(10,22,36,.95);
    --border:   rgba(28,58,88,.72);
    --border2:  rgba(38,78,116,.80);

    --text:     #C8E8F4;
    --muted:    #5A7E92;
    --faint:    #284860;

    --legs:    #22C55E; --legs-bg:  rgba(10,30,22,.92); --legs-bd:  #164A2C;
    --push:    #3B82F6; --push-bg:  rgba(10,22,46,.92); --push-bd:  #143068;
    --pull:    #A855F7; --pull-bg:  rgba(22,10,46,.92); --pull-bd:  #341870;
    --nat:     #22D3EE; --nat-bg:   rgba(10,30,40,.92); --nat-bd:   #125068;
    --run:     #FB923C; --run-bg:   rgba(38,14,6,.92);  --run-bd:   #5A2A10;
    --rep:     #6B7280; --rep-bg:   rgba(20,24,30,.92); --rep-bd:   #20303E;
    --dld:     #FBBF24; --dld-bg:   rgba(34,24,0,.92);  --dld-bd:   #5A3E00;

    --val:     #22C55E; --val-bg:   rgba(10,30,22,.92); --val-bd:   #164A2C;
    --eli:     #F472B6; --eli-bg:   rgba(38,8,22,.92);  --eli-bd:   #5A1A3A;

    --hero-bg:    rgba(20,42,64,.95);
    --hero-fg:    #C8E8F4;
    --hero-muted: rgba(200,232,244,.46);
    --hero-faint: rgba(200,232,244,.20);

    --shadow-sm: 0 2px 10px rgba(0,0,0,.42);
    --shadow:    0 4px 20px rgba(0,0,0,.52);
    --shadow-lg: 0 8px 36px rgba(0,0,0,.62);

    --hdr-bg:  rgba(10,24,38,.20);
    --nav-bg:  rgba(10,24,38,.82);
    --tabs-bg: rgba(10,24,38,.82);
  }
}

/* ══════════════════════════════════════════
   VARIABLES — DARK MODE (forcé via bouton)
══════════════════════════════════════════ */
html[data-theme="dark"] {
  --surface:  rgba(14,32,50,.92);
  --surface2: rgba(10,22,36,.95);
  --border:   rgba(28,58,88,.72);
  --border2:  rgba(38,78,116,.80);

  --text:     #C8E8F4;
  --muted:    #5A7E92;
  --faint:    #284860;

  --legs:    #22C55E; --legs-bg:  rgba(10,30,22,.92); --legs-bd:  #164A2C;
  --push:    #3B82F6; --push-bg:  rgba(10,22,46,.92); --push-bd:  #143068;
  --pull:    #A855F7; --pull-bg:  rgba(22,10,46,.92); --pull-bd:  #341870;
  --nat:     #22D3EE; --nat-bg:   rgba(10,30,40,.92); --nat-bd:   #125068;
  --run:     #FB923C; --run-bg:   rgba(38,14,6,.92);  --run-bd:   #5A2A10;
  --rep:     #6B7280; --rep-bg:   rgba(20,24,30,.92); --rep-bd:   #20303E;
  --dld:     #FBBF24; --dld-bg:   rgba(34,24,0,.92);  --dld-bd:   #5A3E00;

  --val:     #22C55E; --val-bg:   rgba(10,30,22,.92); --val-bd:   #164A2C;
  --eli:     #F472B6; --eli-bg:   rgba(38,8,22,.92);  --eli-bd:   #5A1A3A;

  --hero-bg:    rgba(20,42,64,.95);
  --hero-fg:    #C8E8F4;
  --hero-muted: rgba(200,232,244,.46);
  --hero-faint: rgba(200,232,244,.20);

  --shadow-sm: 0 2px 10px rgba(0,0,0,.42);
  --shadow:    0 4px 20px rgba(0,0,0,.52);
  --shadow-lg: 0 8px 36px rgba(0,0,0,.62);

  --hdr-bg:  rgba(10,24,38,.84);
  --nav-bg:  rgba(10,24,38,.90);
  --tabs-bg: rgba(10,24,38,.82);
}

/* ══════════════════════════════════════════
   VARIABLES — LIGHT MODE (forcé via bouton)
══════════════════════════════════════════ */
html[data-theme="light"] {
  --surface:  rgba(255,255,255,.92);
  --surface2: rgba(236,248,254,.95);
  --border:   rgba(170,212,232,.65);
  --border2:  rgba(140,192,218,.75);

  --text:     #1A2E3A;
  --muted:    #6A8E9E;
  --faint:    #A2C4D0;

  --legs:    #2E9E5B; --legs-bg:  rgba(232,249,240,.95); --legs-bd:  #A8E8C4;
  --push:    #2563EB; --push-bg:  rgba(239,246,255,.95); --push-bd:  #BFDBFE;
  --pull:    #7C3AED; --pull-bg:  rgba(245,243,255,.95); --pull-bd:  #DDD6FE;
  --nat:     #0891B2; --nat-bg:   rgba(236,254,255,.95); --nat-bd:   #A5F3FC;
  --run:     #EA580C; --run-bg:   rgba(255,247,237,.95); --run-bd:   #FED7AA;
  --rep:     #9CA3AF; --rep-bg:   rgba(249,250,251,.95); --rep-bd:   #E5E7EB;
  --dld:     #D97706; --dld-bg:   rgba(255,251,235,.95); --dld-bd:   #FDE68A;

  --val:     #2E9E5B; --val-bg:   rgba(232,249,240,.95); --val-bd:   #A8E8C4;
  --eli:     #EC4899; --eli-bg:   rgba(253,242,248,.95); --eli-bd:   #FBCFE8;

  --hero-bg:    rgba(26,46,58,.92);
  --hero-fg:    #ffffff;
  --hero-muted: rgba(255,255,255,.45);
  --hero-faint: rgba(255,255,255,.22);

  --shadow-sm: 0 2px 10px rgba(30,80,120,.10);
  --shadow:    0 4px 20px rgba(30,80,120,.14);
  --shadow-lg: 0 8px 36px rgba(30,80,120,.20);

  --hdr-bg:  rgba(255,255,255,.15);
  --nav-bg:  rgba(255,255,255,.78);
  --tabs-bg: rgba(255,255,255,.80);
}

/* ══════════════════════════════════════════
   PAYSAGE SVG — fond fixe (compatible iOS)
   Technique : pseudo-élément html::before en
   position:fixed — contourne le bug iOS Safari
   où background-attachment:fixed ne fonctionne pas.
   Le ::before couvre tout l'écran, reste immobile,
   et porte les 2 couches (SVG + gradient).
══════════════════════════════════════════ */

html { min-height: 100%; }

html::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  /* Jour (défaut) */
  background-color: #C4E8BC;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 900' preserveAspectRatio='none'%3E%3Cg opacity='.82'%3E%3Cpath d='M188 132 Q152 122 156 98 Q160 70 196 68 Q208 44 252 54 Q282 34 322 52 Q356 38 388 62 Q418 52 444 76 Q462 94 450 118 Q454 142 420 146 Q390 156 360 150 Q320 160 280 150 Q235 155 200 142 Z' fill='white'/%3E%3C/g%3E%3Cg opacity='.75'%3E%3Cpath d='M1176 120 Q1150 108 1154 84 Q1158 60 1190 58 Q1204 36 1242 48 Q1274 30 1310 52 Q1344 38 1368 66 Q1390 80 1378 106 Q1382 130 1350 136 Q1318 146 1290 140 Q1256 150 1222 140 Q1185 145 1170 130 Z' fill='white'/%3E%3C/g%3E%3Cpath d='M-10 658 C120 610 320 565 620 572 C860 578 1080 608 1340 558 C1470 530 1555 542 1610 550 L1610 900 L-10 900Z' fill='%23A8D8A0'/%3E%3Cpath d='M-10 742 C180 706 420 672 720 684 C940 694 1180 674 1430 660 C1520 654 1570 662 1610 666 L1610 900 L-10 900Z' fill='%2380C276'/%3E%3Cpath d='M-10 820 C200 794 500 774 820 784 C1060 792 1330 774 1610 778 L1610 900 L-10 900Z' fill='%235CB050'/%3E%3C/svg%3E"),
    linear-gradient(180deg, #7EC8E8 0%, #B8DDF0 50%, #D4EDF5 82%, #C4E8BC 100%);
  background-size: 100% 100%, 100% 100%;
}

/* Nuit — préférence système */
@media (prefers-color-scheme: dark) {
  html::before {
    background-color: #060E1E;
    background-image:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 900' preserveAspectRatio='none'%3E%3Ccircle cx='180' cy='80' r='2.5' fill='white' opacity='.75'/%3E%3Ccircle cx='450' cy='45' r='1.8' fill='white' opacity='.60'/%3E%3Ccircle cx='630' cy='110' r='2.2' fill='white' opacity='.82'/%3E%3Ccircle cx='900' cy='55' r='1.6' fill='white' opacity='.70'/%3E%3Ccircle cx='1100' cy='30' r='2.8' fill='white' opacity='.90'/%3E%3Ccircle cx='1300' cy='95' r='1.8' fill='white' opacity='.65'/%3E%3Ccircle cx='760' cy='20' r='2' fill='white' opacity='.72'/%3E%3Ccircle cx='290' cy='140' r='1.5' fill='white' opacity='.55'/%3E%3Ccircle cx='1050' cy='130' r='2.2' fill='white' opacity='.68'/%3E%3Ccircle cx='550' cy='165' r='1.5' fill='white' opacity='.60'/%3E%3Ccircle cx='1420' cy='60' r='2' fill='white' opacity='.70'/%3E%3Ccircle cx='1180' cy='155' r='1.8' fill='white' opacity='.58'/%3E%3Ccircle cx='180' cy='155' r='40' fill='%23FFF5D0' opacity='.92'/%3E%3Ccircle cx='196' cy='143' r='32' fill='%23030A14'/%3E%3Cpath d='M-10 658 C250 558 550 522 800 562 C1050 602 1350 542 1610 578 L1610 900 L-10 900Z' fill='%230E2040'/%3E%3Cpath d='M-10 742 C250 668 550 642 800 674 C1050 706 1350 654 1610 680 L1610 900 L-10 900Z' fill='%23091630'/%3E%3Cpath d='M-10 818 C250 772 550 756 800 774 C1050 792 1350 758 1610 776 L1610 900 L-10 900Z' fill='%23060E1E'/%3E%3C/svg%3E"),
      linear-gradient(180deg, #030A14 0%, #0A1C2E 45%, #0E2638 82%, #060E1E 100%);
    background-size: 100% 100%, 100% 100%;
  }
}

/* Nuit — forcé via bouton */
html[data-theme="dark"]::before {
  background-color: #060E1E;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 900' preserveAspectRatio='none'%3E%3Ccircle cx='180' cy='80' r='2.5' fill='white' opacity='.75'/%3E%3Ccircle cx='450' cy='45' r='1.8' fill='white' opacity='.60'/%3E%3Ccircle cx='630' cy='110' r='2.2' fill='white' opacity='.82'/%3E%3Ccircle cx='900' cy='55' r='1.6' fill='white' opacity='.70'/%3E%3Ccircle cx='1100' cy='30' r='2.8' fill='white' opacity='.90'/%3E%3Ccircle cx='1300' cy='95' r='1.8' fill='white' opacity='.65'/%3E%3Ccircle cx='760' cy='20' r='2' fill='white' opacity='.72'/%3E%3Ccircle cx='290' cy='140' r='1.5' fill='white' opacity='.55'/%3E%3Ccircle cx='1050' cy='130' r='2.2' fill='white' opacity='.68'/%3E%3Ccircle cx='550' cy='165' r='1.5' fill='white' opacity='.60'/%3E%3Ccircle cx='1420' cy='60' r='2' fill='white' opacity='.70'/%3E%3Ccircle cx='1180' cy='155' r='1.8' fill='white' opacity='.58'/%3E%3Ccircle cx='180' cy='155' r='40' fill='%23FFF5D0' opacity='.92'/%3E%3Ccircle cx='196' cy='143' r='32' fill='%23030A14'/%3E%3Cpath d='M-10 658 C250 558 550 522 800 562 C1050 602 1350 542 1610 578 L1610 900 L-10 900Z' fill='%230E2040'/%3E%3Cpath d='M-10 742 C250 668 550 642 800 674 C1050 706 1350 654 1610 680 L1610 900 L-10 900Z' fill='%23091630'/%3E%3Cpath d='M-10 818 C250 772 550 756 800 774 C1050 792 1350 758 1610 776 L1610 900 L-10 900Z' fill='%23060E1E'/%3E%3C/svg%3E"),
    linear-gradient(180deg, #030A14 0%, #0A1C2E 45%, #0E2638 82%, #060E1E 100%);
  background-size: 100% 100%, 100% 100%;
}

/* Jour — forcé via bouton */
html[data-theme="light"]::before {
  background-color: #C4E8BC;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 900' preserveAspectRatio='none'%3E%3Cg opacity='.82'%3E%3Cpath d='M188 132 Q152 122 156 98 Q160 70 196 68 Q208 44 252 54 Q282 34 322 52 Q356 38 388 62 Q418 52 444 76 Q462 94 450 118 Q454 142 420 146 Q390 156 360 150 Q320 160 280 150 Q235 155 200 142 Z' fill='white'/%3E%3C/g%3E%3Cg opacity='.75'%3E%3Cpath d='M1176 120 Q1150 108 1154 84 Q1158 60 1190 58 Q1204 36 1242 48 Q1274 30 1310 52 Q1344 38 1368 66 Q1390 80 1378 106 Q1382 130 1350 136 Q1318 146 1290 140 Q1256 150 1222 140 Q1185 145 1170 130 Z' fill='white'/%3E%3C/g%3E%3Cpath d='M-10 658 C120 610 320 565 620 572 C860 578 1080 608 1340 558 C1470 530 1555 542 1610 550 L1610 900 L-10 900Z' fill='%23A8D8A0'/%3E%3Cpath d='M-10 742 C180 706 420 672 720 684 C940 694 1180 674 1430 660 C1520 654 1570 662 1610 666 L1610 900 L-10 900Z' fill='%2380C276'/%3E%3Cpath d='M-10 820 C200 794 500 774 820 784 C1060 792 1330 774 1610 778 L1610 900 L-10 900Z' fill='%235CB050'/%3E%3C/svg%3E"),
    linear-gradient(180deg, #7EC8E8 0%, #B8DDF0 50%, #D4EDF5 82%, #C4E8BC 100%);
  background-size: 100% 100%, 100% 100%;
}

/* ══════════════════════════════════════════
   RESET
══════════════════════════════════════════ */
*, *::before, *::after {
  margin: 0; padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

/* ══════════════════════════════════════════
   BASE
══════════════════════════════════════════ */
body {
  background: transparent;
  color: var(--text);
  font-family: var(--font-body);
  min-height: 100vh;
  padding-bottom: calc(5.5rem + env(safe-area-inset-bottom));
}

h1, h2, h3 {
  font-family: var(--font-display);
  letter-spacing: -.02em;
  font-weight: 800;
}

/* ══════════════════════════════════════════
   HEADER
══════════════════════════════════════════ */
#hdr {
  padding: .9rem 1.1rem 0;
  position: sticky;
  top: 0;
  z-index: 100;
}
.hdr-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: .75rem;
}
h1 {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--text);
}
.hbts { display: flex; gap: .4rem; }
.ibt {
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--muted);
  width: 34px; height: 34px;
  border-radius: var(--radius-sm);
  font-size: .85rem;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s, border-color .15s;
}
.ibt:hover { opacity: .8; }
.ibt:active { opacity: .6; }

/* Navigation semaine */
.wnav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: .8rem;
  gap: .5rem;
}
.nbt {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
  width: 32px; height: 32px;
  border-radius: var(--radius-sm);
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s;
}
.nbt:hover { background: var(--surface2); }
#wlbl {
  font-size: .85rem;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: .01em;
  flex: 1;
  text-align: center;
}

/* ══════════════════════════════════════════
   TABS
══════════════════════════════════════════ */
.tabs {
  display: flex;
  background: var(--tabs-bg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
}
.tab {
  flex: 1;
  padding: .55rem .3rem;
  text-align: center;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color .15s, border-color .15s;
  user-select: none;
}
.tab.active {
  color: var(--text);
  border-bottom-color: var(--text);
}

/* ══════════════════════════════════════════
   MODALS (bottom sheet)
══════════════════════════════════════════ */
.modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(10,25,40,.52);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 999;
  align-items: flex-end;
}
.modal.open { display: flex; }
.ms {
  background: var(--surface);
  border-radius: 24px 24px 0 0;
  padding: 1.4rem 1.2rem 2.5rem;
  width: 100%;
  max-height: 85vh;
  overflow-y: auto;
  border-top: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
}
.ms h2 {
  font-size: 1.1rem;
  font-weight: 800;
  margin-bottom: .4rem;
}
.ms .msub {
  font-size: .78rem;
  color: var(--muted);
  line-height: 1.55;
  margin-bottom: 1rem;
}
.srow { margin-bottom: 1rem; }
.slb {
  display: block;
  font-size: .7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
  margin-bottom: .35rem;
}
.shi {
  font-size: .74rem;
  color: var(--faint);
  line-height: 1.5;
  margin-bottom: .5rem;
}
select.ss {
  width: 100%;
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--text);
  font-family: var(--font-body);
  font-size: .9rem;
  font-weight: 600;
  padding: .55rem .75rem;
  border-radius: var(--radius-sm);
  outline: none;
  cursor: pointer;
}
.sb {
  width: 100%;
  font-family: var(--font-body);
  font-size: .85rem;
  font-weight: 700;
  padding: .75rem 1rem;
  border-radius: var(--radius);
  cursor: pointer;
  margin-bottom: .5rem;
  text-align: left;
  border: 1px solid var(--border);
  transition: opacity .15s;
}
.sb:active { opacity: .7; }
.sb.swap {
  background: var(--surface);
  border-color: var(--border2);
  color: var(--text);
}
.sb.swap.ok {
  background: var(--legs-bg);
  border-color: var(--legs-bd);
  color: var(--legs);
}
.sb.swap .sb-sub {
  display: block;
  font-size: .7rem;
  font-weight: 500;
  color: var(--muted);
  margin-top: .15rem;
}
.sb.dg {
  background: rgba(254,242,242,.95);
  border-color: #FECACA;
  color: #DC2626;
}
html[data-theme="dark"] .sb.dg { background: rgba(42,10,10,.92); border-color: #5A1A1A; color: #F87171; }
html[data-theme="light"] .sb.dg { background: rgba(254,242,242,.95); border-color: #FECACA; color: #DC2626; }
@media (prefers-color-scheme: dark) {
  .sb.dg { background: rgba(42,10,10,.92); border-color: #5A1A1A; color: #F87171; }
}
.sb.cl {
  background: var(--surface2);
  border-color: var(--border);
  color: var(--text);
}

/* ══════════════════════════════════════════
   BOTTOM NAV
══════════════════════════════════════════ */
#bnav {
  position: fixed;
  bottom: calc(14px + env(safe-area-inset-bottom));
  left: 14px;
  right: 14px;
  border-radius: 28px;
  background: var(--nav-bg);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  border: 1px solid rgba(255,255,255,.30);
  display: flex;
  z-index: 200;
  padding-bottom: 0;
  box-shadow: 0 8px 32px rgba(0,20,60,.16), 0 2px 8px rgba(0,0,0,.08);
}
@media (prefers-color-scheme: dark) {
  #bnav { border-color: rgba(255,255,255,.10); }
}
html[data-theme="dark"] #bnav { border-color: rgba(255,255,255,.10); }
html[data-theme="light"] #bnav { border-color: rgba(255,255,255,.30); }

.bn-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  padding: .72rem .3rem;
  text-decoration: none;
  color: var(--muted);
  transition: color .15s;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
/* Masque les labels texte — icônes seules dans le dock */
#bnav .bn-item > span:not(.bn-ico) { display: none; }
.bn-item.active { color: var(--text); }
.bn-item.active .bn-ico {
  background: rgba(30,80,120,.12);
  padding: .28rem .55rem;
  border-radius: 14px;
}
@media (prefers-color-scheme: dark) {
  .bn-item.active .bn-ico { background: rgba(200,232,244,.13); }
}
html[data-theme="dark"] .bn-item.active .bn-ico { background: rgba(200,232,244,.13); }
html[data-theme="light"] .bn-item.active .bn-ico { background: rgba(30,80,120,.12); }
.bn-ico { font-size: 1.55rem; line-height: 1; }

/* ══════════════════════════════════════════
   UTILITAIRES
══════════════════════════════════════════ */
.dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-block;
}

/* ── BACK BUTTON ── */
.back-btn {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .75rem;
  font-weight: 700;
  color: var(--muted);
  text-decoration: none;
  padding: .3rem .5rem;
  border-radius: var(--radius-sm);
  transition: color .15s, background .15s;
}
.back-btn:active { background: var(--surface2); }

/* ── SECTION LABEL ── */
.section-lbl {
  font-size: .65rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
  padding: .65rem 1rem .3rem;
}

/* ── CARD GRID ── */
.card-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .5rem;
  padding: .5rem 1rem;
}
.card-grid.full { grid-template-columns: 1fr; }

/* ── NAV CARD ── */
.nav-card {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  padding: 1.1rem 1rem;
  background: rgba(255,255,255,.60);
  border: 1px solid rgba(255,255,255,.55);
  border-radius: var(--radius-lg);
  text-decoration: none;
  cursor: pointer;
  transition: all .15s;
  box-shadow: 0 4px 18px rgba(30,80,120,.10), 0 1px 3px rgba(255,255,255,.4) inset;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
@media (prefers-color-scheme: dark) {
  .nav-card { background: rgba(14,32,50,.58); border-color: rgba(255,255,255,.10); box-shadow: 0 4px 18px rgba(0,0,0,.30); }
}
html[data-theme="dark"] .nav-card { background: rgba(14,32,50,.58); border-color: rgba(255,255,255,.10); box-shadow: 0 4px 18px rgba(0,0,0,.30); }
html[data-theme="light"] .nav-card { background: rgba(255,255,255,.60); border-color: rgba(255,255,255,.55); }
.nav-card:active { opacity: .7; transform: scale(.97); }
.nav-card.full-width { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: .75rem; }
.nav-card-ico  { font-size: 2rem; }
.nav-card-name { font-family: var(--font-display); font-size: 1.15rem; font-weight: 800; letter-spacing: -.01em; color: var(--text); }
.nav-card-sub  { display: none; }
.nav-card.wip .nav-card-name::after { content: ' 🚧'; }

/* ── CONSTRUCTION PAGE ── */
.wip-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem 1.5rem;
  text-align: center;
  gap: .75rem;
}
.wip-icon { font-size: 3rem; }
.wip-title { font-family: var(--font-display); font-size: 1.3rem; font-weight: 900; }
.wip-sub { font-size: .85rem; color: var(--muted); line-height: 1.6; font-weight: 500; }

/* ── BADGES SPORT ── */
.bg  { display: inline-flex; align-items: center; font-size: .7rem; font-weight: 700; letter-spacing: .02em; padding: .18rem .45rem; border-radius: 5px; white-space: nowrap; }
.bl  { background: var(--legs-bg); color: var(--legs); border: 1px solid var(--legs-bd); }
.bpu { background: var(--push-bg); color: var(--push); border: 1px solid var(--push-bd); }
.bpl { background: var(--pull-bg); color: var(--pull); border: 1px solid var(--pull-bd); }
.bn  { background: var(--nat-bg);  color: var(--nat);  border: 1px solid var(--nat-bd);  }
.br  { background: var(--run-bg);  color: var(--run);  border: 1px solid var(--run-bd);  }
.bre { background: var(--rep-bg);  color: var(--rep);  border: 1px solid var(--rep-bd);  }
.bd  { background: var(--dld-bg);  color: var(--dld);  border: 1px solid var(--dld-bd);  }

/* ── CALENDRIER — BADGES TÂCHES ── */
.week-progress-badge {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  color: #fff;
  margin-top: 2px;
  width: calc(100% - 14px);
  text-align: center;
  box-sizing: border-box;
}
.cal-event.recurring-event {
  background: #9b59b6;
  color: #fff;
  border-radius: 4px;
  padding: 1px 5px;
  font-size: 11px;
  margin-top: 1px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  display: block;
}