:root{
    /* Warmer than the club's #FFD400, which reads as lemon rather than gold.
       Closer in feel to the gold monogram while staying bright enough to highlight. */
    --gold:#E8B21E;
    --gold-deep:#6B4E06;
    --gold-wash:rgba(232,178,30,.18);
    --on-gold:#102033;
    /* One blue. --accent and --accent-deep are deliberately the same value: the
       distinction is kept only so fills and text can diverge again if needed. */
    --accent:#003370;
    --accent-deep:#003370;
    --accent-wash:rgba(0,51,112,.10);
    --cherry:#C8102E;
    --cherry-wash:rgba(200,16,46,.08);
    --on-accent:#FFFFFF;
    --paper:#F6FAFD;
    --surface:#FFFFFF;
    --surface-2:#E8F1F9;
    --ink:#102033;
    --ink-soft:#465A72;
    --ink-faint:#5B6E85;
    --border:#D3E2F0;
    --border-strong:#778CA2;
    --panel:#003370;--panel-ink:#FFFFFF;--panel-soft:#B9C9DC;
    --full:#A8422C;
    --full-bg:rgba(168,66,44,.10);
    --open:#2C6E52;
    --open-bg:rgba(44,110,82,.10);
    --shadow:0 1px 2px rgba(15,20,30,.05),0 8px 24px rgba(15,20,30,.05);
    --measure:66ch;
    --gut:clamp(16px,5vw,64px);
  }
  @media (prefers-color-scheme:dark){
    :root:not([data-theme="light"]){
      --gold:#E8B21E;
      --gold-deep:#E8B21E;
      --gold-wash:rgba(232,178,30,.14);
      --on-gold:#102033;
      --accent:#5CB2EC;
      --accent-deep:#5CB2EC;
      --accent-wash:rgba(92,178,236,.14);
      --cherry:#FF5C70;
      --cherry-wash:rgba(255,92,112,.12);
      --on-accent:#08121D;
      --paper:#0B1420;
      --surface:#111E2E;
      --surface-2:#18283A;
      --ink:#E9F0F8;
      --ink-soft:#A3B5CA;
      --ink-faint:#8DA1B8;
      --border:#24374B;
      --border-strong:#62798F;
      --panel:#003F80;--panel-ink:#F5F9FF;--panel-soft:#B9C9DC;
      --full:#E08A72;
      --full-bg:rgba(224,138,114,.12);
      --open:#6BBF96;
      --open-bg:rgba(107,191,150,.12);
      --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.3);
    }
  }
  :root[data-theme="dark"]{
      --gold:#E8B21E;
      --gold-deep:#E8B21E;
      --gold-wash:rgba(232,178,30,.14);
      --on-gold:#102033;
      --accent:#5CB2EC;
      --accent-deep:#5CB2EC;
      --accent-wash:rgba(92,178,236,.14);
      --cherry:#FF5C70;
      --cherry-wash:rgba(255,92,112,.12);
      --on-accent:#08121D;
      --paper:#0B1420;
      --surface:#111E2E;
      --surface-2:#18283A;
      --ink:#E9F0F8;
      --ink-soft:#A3B5CA;
      --ink-faint:#8DA1B8;
      --border:#24374B;
      --border-strong:#62798F;
      --panel:#003F80;--panel-ink:#F5F9FF;--panel-soft:#B9C9DC;
      --full:#E08A72;
      --full-bg:rgba(224,138,114,.12);
      --open:#6BBF96;
      --open-bg:rgba(107,191,150,.12);
    --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.3);
    }

  *{box-sizing:border-box}
  body{
    margin:0;background:var(--paper);color:var(--ink);
    font-family:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
    font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;
  }
  h1,h2,h3,h4{font-family:"Archivo",system-ui,sans-serif;margin:0;text-wrap:balance;letter-spacing:-.02em;line-height:1.05}
  p{margin:0}
  a{color:inherit}
  :focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}
  img{max-width:100%}

  .wrap{max-width:1180px;margin:0 auto;padding-inline:var(--gut)}
  .eyebrow{
    font-family:"Archivo",sans-serif;font-size:11px;font-weight:700;
    letter-spacing:.16em;text-transform:uppercase;color:var(--accent-deep);
  }

  /* ---------- prototype ribbon ---------- */
  /* It sits inside the sticky header, so it stays on screen while scrolling. It keeps
     to one line at every width, so its height is known: on a narrow screen the
     explanation ends in an ellipsis, and MAQUETTE always shows. Every offset that
     clears the sticky header adds --proto-h, which stays 0 on a page with no ribbon. */
  :root:has(.proto){--proto-h:38px}
  .proto{
    background:var(--ink);color:var(--paper);font-size:12.5px;
    height:var(--proto-h);padding:0 var(--gut);display:flex;align-items:center;
    justify-content:center;text-align:center;white-space:nowrap;
  }
  .proto span{overflow:hidden;text-overflow:ellipsis;min-width:0}
  .proto b{color:var(--gold);font-family:"Archivo",sans-serif;letter-spacing:.04em}

  /* ---------- header ---------- */
  header{
    position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--paper) 88%,transparent);
    backdrop-filter:blur(12px);border-bottom:1px solid var(--border);
  }
  .nav{display:flex;align-items:center;gap:24px;height:66px}
  .brand{display:flex;align-items:center;gap:11px;text-decoration:none;margin-right:10px;flex-shrink:0}
  .brand img{width:42px;height:42px;display:block}
  .brand span{font-family:"Archivo",sans-serif;font-weight:800;font-size:19px;letter-spacing:-.03em}
  .nav-links{display:flex;gap:26px;list-style:none;margin:0;padding:0}
  /* a label never wraps: the row has to fit whole, or collapse behind the menu button */
  .nav-links > li > a,.nav-links > li > .sub-trigger{white-space:nowrap}
  .nav-links a{
    text-decoration:none;font-size:14.5px;font-weight:500;color:var(--ink-soft);
    padding-block:4px;border-bottom:2px solid transparent;transition:color .15s,border-color .15s;
  }
  .nav-links a:hover{color:var(--ink);border-bottom-color:var(--accent)}
  .btn{
    display:inline-flex;align-items:center;gap:8px;font-family:"Archivo",sans-serif;
    font-weight:700;font-size:14px;letter-spacing:-.01em;text-decoration:none;
    padding:11px 19px;border-radius:6px;border:1px solid transparent;cursor:pointer;
    transition:transform .12s,background .15s,border-color .15s;
  }
  .btn-primary{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
  .btn-primary:hover{transform:translateY(-1px)}
  .btn-ghost{border-color:var(--border-strong);color:var(--ink);background:transparent}
  .btn-ghost:hover{border-color:var(--accent);color:var(--accent-deep)}
  .nav .btn{flex-shrink:0}
  /* 870px is the nav breakpoint throughout. Measured: the full row needs about 760px
     in English and 831px in French, so this leaves about 40px of headroom. Kept in
     step with the other 870px queries and the matchMedia in nav.js. The footer has
     its own. Measure the space between the last label and the tools, not the page
     width: a squeezed row shrinks its items rather than widening the page. */
  @media(max-width:870px){ .nav-links{display:none} }

  /* the homepage hero is the banner, see the end of this file */

  /* ---------- stats ---------- */
  /* .stats / .stat live in the multi-page additions below */
  .stat-n{font-family:"Archivo",sans-serif;font-size:clamp(26px,4vw,38px);font-weight:800;
    letter-spacing:-.03em;font-variant-numeric:tabular-nums;line-height:1}
  .stat-l{font-size:12.5px;color:var(--ink-soft);margin-top:7px;line-height:1.35}


  /* ---------- sections ---------- */
  section{scroll-margin-top:calc(78px + var(--proto-h, 0px))}
  /* Sections carry their own padding, so the gap between two of them is double this.
     The eyebrow's 14px top margin collapses through .sec-head and adds to the top. */
  .sec{padding-block:clamp(40px,5.5vw,68px)}
  .sec-head{margin-bottom:34px;max-width:var(--measure)}
  .sec-head h2{font-size:clamp(28px,4.4vw,44px);font-weight:800;margin-top:10px}
  .sec-head p{margin-top:14px;color:var(--ink-soft);font-size:16.5px}

  /* ---------- filters ---------- */
  .filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:26px}
  .chip{
    font-family:"Archivo",sans-serif;font-size:13px;font-weight:600;letter-spacing:-.005em;
    padding:8px 15px;border-radius:100px;border:1px solid var(--border-strong);
    background:transparent;color:var(--ink-soft);cursor:pointer;transition:.15s;
  }
  .chip:hover{border-color:var(--accent);color:var(--ink)}
  .chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
  .chip .c{opacity:.85;font-variant-numeric:tabular-nums;margin-left:5px}

  /* ---------- group cards ---------- */
  .groups{display:grid;grid-template-columns:repeat(auto-fill,minmax(288px,1fr));gap:14px}
  .g{
    background:var(--surface);border:1px solid var(--border);border-radius:10px;
    padding:20px;display:flex;flex-direction:column;gap:13px;
  }
  .g-top{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
  .g h3{font-size:16.5px;font-weight:700;line-height:1.25}
  .g-sub{font-size:12.5px;color:var(--ink-faint);margin-top:4px}
  .badge{
    font-family:"Archivo",sans-serif;font-size:10.5px;font-weight:700;letter-spacing:.07em;
    text-transform:uppercase;padding:5px 9px;border-radius:4px;white-space:nowrap;flex-shrink:0;
  }
  .b-full{background:var(--full-bg);color:var(--full)}
  .b-open{background:var(--open-bg);color:var(--open)}
  .b-sel{background:var(--gold-wash);color:var(--gold-deep)}
  .g-when{display:flex;flex-direction:column;gap:5px;font-size:13.5px}
  .g-when div{display:flex;gap:9px;align-items:baseline}
  .g-when .d{font-family:"Archivo",sans-serif;font-weight:700;min-width:62px;flex-shrink:0}
  .g-when .h{font-variant-numeric:tabular-nums;color:var(--ink-soft)}
  .g-foot{
    margin-top:auto;padding-top:12px;border-top:1px solid var(--border);
    font-size:12.5px;color:var(--ink-soft);
  }
  .g-foot .lab{color:var(--ink-faint)}
  .g-recruit{
    display:flex;gap:7px;align-items:center;font-size:12.5px;font-weight:600;
    color:var(--on-gold);background:var(--gold);
    padding:8px 11px;border-radius:6px;
  }
  .empty{padding:44px 0;color:var(--ink-faint);text-align:center;font-size:15px}

  /* ---------- values ---------- */
  .vals{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1px;background:var(--border);
    border:1px solid var(--border);border-radius:10px;overflow:hidden}
  .v{background:var(--surface);padding:26px 24px}
  .v-n{font-family:"Archivo",sans-serif;font-size:12px;font-weight:800;color:var(--accent-deep);
    letter-spacing:.1em}
  .v h3{font-size:19px;font-weight:700;margin-top:12px}
  .v p{margin-top:9px;font-size:14.5px;color:var(--ink-soft)}

  /* ---------- agenda ---------- */
  .ag{border-top:1px solid var(--border)}
  .ev{
    display:grid;grid-template-columns:88px minmax(0,1fr) auto;gap:clamp(14px,3vw,32px);
    padding:20px 0;border-bottom:1px solid var(--border);align-items:baseline;
  }
  .ev-d{font-family:"Archivo",sans-serif;line-height:1}
  .ev-d .dd{font-size:28px;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.03em}
  .ev-d .mm{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
    color:var(--accent-deep);margin-top:5px}
  .ev h3{font-size:17px;font-weight:700}
  .ev-meta{font-size:13.5px;color:var(--ink-soft);margin-top:5px}
  .ev-tag{
    font-family:"Archivo",sans-serif;font-size:10.5px;font-weight:700;letter-spacing:.07em;
    text-transform:uppercase;color:var(--ink-faint);border:1px solid var(--border-strong);
    padding:4px 9px;border-radius:4px;white-space:nowrap;
  }
  @media(max-width:680px){
    .ev{grid-template-columns:60px minmax(0,1fr);gap:16px}
    .ev-side{grid-column:2;justify-self:start;margin-top:8px}
    .ev-d .dd{font-size:23px}
  }

  /* ---------- join ---------- */
  .join{background:var(--ink);color:#F2F3F5;border-radius:14px;padding:clamp(30px,5vw,56px);
    display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:clamp(26px,5vw,54px);align-items:center}
  .join h2{font-size:clamp(26px,4vw,40px);font-weight:800;color:#fff}
  .join p{margin-top:16px;color:#AAB2BE;font-size:16.5px;max-width:48ch}
  .join .btn-primary:hover{transform:translateY(-1px)}
  .join-n{font-family:"Archivo",sans-serif;font-size:clamp(60px,11vw,120px);font-weight:800;
    color:var(--gold);line-height:.85;letter-spacing:-.05em;font-variant-numeric:tabular-nums}
  .join-nl{font-size:14px;color:#AAB2BE;margin-top:12px;max-width:22ch}
  .join.join-solo{grid-template-columns:1fr}
  @media(max-width:870px){ .join{grid-template-columns:1fr} }

  /* ---------- committee ---------- */
  .com{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:1px;
    background:var(--border);border:1px solid var(--border);border-radius:10px;overflow:hidden}
  .cm{background:var(--surface);padding:18px 20px}
  .cm .nm{font-family:"Archivo",sans-serif;font-weight:700;font-size:15px}
  .cm .rl{font-size:12.5px;color:var(--ink-soft);margin-top:3px}

  /* ---------- partners ---------- */
  .parts{display:flex;flex-wrap:wrap;gap:10px}
  .pt{
    border:1px solid var(--border);background:var(--surface);border-radius:8px;
    padding:13px 18px;font-size:13.5px;font-weight:500;color:var(--ink-soft);
  }

  /* ---------- footer ---------- */
  /* One text size for the whole footer, 14px, set here and inherited: the headings,
     the links, the tagline, the bottom row, and the version. Only the club name next
     to the logos stays larger. */
  footer{background:var(--surface-2);border-top:1px solid var(--border);margin-top:clamp(24px,4vw,48px);font-size:14px}
  .foot{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:28px 36px;padding-block:36px 24px}
  .foot .foot-h{font-family:"Archivo",sans-serif;font-size:inherit;font-weight:700;letter-spacing:.08em;
    text-transform:uppercase;color:var(--ink-faint);margin-bottom:13px}
  .foot ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
  .foot a{color:var(--ink-soft);text-decoration:none}
  .foot a:hover{color:var(--accent-deep)}
  .foot-brand p{color:var(--ink-soft);margin-top:12px;max-width:34ch}
  /* Two lines: the copyright, the Swiss flag, and the date across the first, the legal
     links on the left of the second and the buttons on its right. */
  /* The bottom padding adds one blank line, 22px, under the last line, so the link
     preview the browser shows in the bottom corner does not hide the legal links. */
  .foot-bot{border-top:1px solid var(--border);padding-block:20px 42px;color:var(--ink-faint);
    display:grid;grid-template-columns:1fr auto;align-items:start;gap:5px 14px}
  @media(max-width:760px){ .foot{grid-template-columns:1fr 1fr;gap:28px} .foot-brand{grid-column:1/-1} }

  @media (prefers-reduced-motion:reduce){
    *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  }
  html{scroll-behavior:smooth}

/* ============ multi-page additions ============ */

[hidden]{display:none!important}

.nav-links a.on{color:var(--ink);border-bottom-color:var(--accent)}

/* ============ narrow layout: a real menu behind a button ============ */
/* Wrapping seven links across the header cost about 190px above the fold before
   any content. They now live in a panel the button discloses.
   The 870px boundary is measured, not guessed: the full row needs about 760px in
   English and 831px in French, so this collapses it with about 40px to spare. */
.burger{display:none}

@media(max-width:870px){
  /* one row: brand, then the menu button hard right */
  .nav{height:auto;flex-wrap:wrap;padding-block:9px;column-gap:12px;row-gap:0}
  .brand{margin-right:0;order:1}

  .burger{order:3;margin-left:auto;display:inline-flex;align-items:center;justify-content:center;
    width:42px;height:42px;padding:0;background:none;cursor:pointer;
    border:1px solid var(--border);border-radius:9px;color:var(--ink)}
  .burger:hover{border-color:var(--border-strong)}
  .b-x{display:none}
  .burger[aria-expanded="true"] .b-bars{display:none}
  .burger[aria-expanded="true"] .b-x{display:block}

  /* the panel takes its own row under that, so it spans the full width */
  .nav-links{order:4;width:100%;display:flex;flex-direction:column;gap:0;
    margin:6px 0 2px;padding:0}
  .nav-links > li{border-top:1px solid var(--border)}

  /* one full-width row per item, with a tap target that clears 44px */
  .nav-links > li > a,
  .nav-links > li > .sub-trigger{display:flex;align-items:center;width:100%;
    min-height:46px;font-size:15.5px;line-height:1.35;text-align:left;
    border-bottom:0;border-left:3px solid transparent;padding:0 13px}
  /* the desktop underline reads as a divider at this width, so the current page
     is marked down the side instead */
  .nav-links > li > a.on,
  .nav-links > li > .sub-trigger.on{border-left-color:var(--accent);
    color:var(--ink);font-weight:600}

  /* the trigger owns the whole row, so the caret goes to the far end */
  .nav-links > li > .sub-trigger{justify-content:space-between}

  html.js .nav-links{display:none}
  /* With the club group expanded the panel is taller than a short phone, and it
     lives in a sticky header, so the overflow would be awkward to reach. Cap it
     and let the panel scroll instead. The 128px covers the prototype ribbon and the
     header row, with about 20px to spare. dvh second, so browsers without it keep
     the vh value rather than dropping the declaration. */
  html.js .nav.is-open .nav-links{display:flex;
    max-height:calc(100vh - 128px);max-height:calc(100dvh - 128px);
    overflow-y:auto;overscroll-behavior:contain}
}

/* page headers */
.page-head{padding-block:clamp(34px,5vw,60px) clamp(20px,3vw,30px)}
.page-head h1{font-size:clamp(34px,6vw,60px);font-weight:800;margin-top:10px}
.page-head p{margin-top:16px;color:var(--ink-soft);font-size:16.5px;max-width:60ch}
.sub-line{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.sec-tight{padding-block:clamp(18px,3vw,30px) clamp(56px,8vw,96px)}
.h-sm{font-size:19px;font-weight:700;margin-bottom:16px}
.more{margin-top:26px}

/* breadcrumbs */
.crumbs{display:flex;gap:9px;flex-wrap:wrap;align-items:center;padding-top:26px;
  font-size:13.5px;color:var(--ink-faint)}
.crumbs a{color:var(--ink-soft);text-decoration:none}
.crumbs a:hover{color:var(--accent-deep);text-decoration:underline}
.crumbs .cur{color:var(--ink)}

/* group card title is a link, but reads as a heading: ink at rest, no underline */
.g h2 a,.g h3 a{text-decoration:none;color:inherit}
.g h2 a:hover,.g h3 a:hover{color:var(--accent-deep)}
.g-foot .tm{margin-top:5px}

/* group detail */
.detail{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);
  gap:clamp(26px,5vw,56px);align-items:start}
@media(max-width:870px){ .detail{grid-template-columns:1fr} }
.tbl-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:10px;background:var(--surface)}
.tbl{border-collapse:collapse;width:100%;min-width:340px;font-size:14.5px}
.tbl th,.tbl td{text-align:left;padding:13px 16px;border-bottom:1px solid var(--border)}
.tbl thead th{font-family:"Archivo",sans-serif;font-size:11px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint);
  background:var(--surface-2)}
.tbl tbody th{font-family:"Archivo",sans-serif;font-weight:700;width:110px}
.tbl tbody tr:last-child th,.tbl tbody tr:last-child td{border-bottom:0}
.tbl .h{font-variant-numeric:tabular-nums;color:var(--ink-soft)}
.note{margin-top:16px;font-size:14.5px;color:var(--ink-soft)}

.side{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:22px}
.side .lab{font-family:"Archivo",sans-serif;font-size:10.5px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint)}
.resp .nm{font-family:"Archivo",sans-serif;font-weight:700;font-size:17px;margin-top:5px}
.team{list-style:none;margin:7px 0 0;padding:0;display:flex;flex-direction:column;gap:5px;
  font-size:14.5px;color:var(--ink-soft)}
.team .none{color:var(--ink-faint);font-style:italic}
.team.links a{color:var(--ink-soft);text-decoration:none}
.team.links a:hover{color:var(--accent-deep);text-decoration:underline}

/* callout */
.callout{background:var(--gold-wash);border:1px solid color-mix(in srgb,var(--gold) 40%,transparent);
  border-radius:10px;padding:22px;margin-top:26px}
.callout h3{font-size:17px;font-weight:700}
.callout p{margin-top:9px;font-size:14.5px;color:var(--ink-soft)}
.callout .btn{margin-top:16px}

/* recruitment list */
.needs{display:flex;flex-direction:column;gap:1px;background:var(--border);
  border:1px solid var(--border);border-radius:10px;overflow:hidden}
.need{background:var(--surface);padding:18px 20px;display:flex;gap:18px;
  align-items:center;justify-content:space-between}
.need h3{font-size:16px;font-weight:700}
.need h3 a{text-decoration:none}
.need h3 a:hover{color:var(--accent-deep);text-decoration:underline}
/* Ink rather than gold: the gold read at 1.94:1 on a light surface, below WCAG AA
   even for large text. */
.need-n{font-family:"Archivo",sans-serif;font-size:26px;font-weight:800;
  color:var(--ink);
  font-variant-numeric:tabular-nums;flex-shrink:0}

/* join block reused on rejoindre.html */
.join h2{color:#fff}
.join .h-sm{color:#fff}

/* ============ light / dark switch ============ */
.theme-btn{
  flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;
  width:32px;height:32px;padding:0;cursor:pointer;
  background:none;border:0;border-radius:6px;
  color:var(--ink-faint);transition:color .15s;
}
.theme-btn:hover{color:var(--accent-deep)}

/* Show the icon for the theme the button switches TO.
   Written for all three states: unset (follows OS), forced light, forced dark.
   There is deliberately no `.theme-btn svg{display:block}` here: at (0,1,1) it
   outranked `.t-sun{display:none}` at (0,1,0), so a first-time visitor in light
   mode saw both icons side by side. The rules below set display on every path. */
.t-sun{display:none}
.t-moon{display:block}
@media(prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .t-sun{display:block}
  :root:not([data-theme="light"]) .t-moon{display:none}
}
:root[data-theme="dark"] .t-sun{display:block}
:root[data-theme="dark"] .t-moon{display:none}
:root[data-theme="light"] .t-sun{display:none}
:root[data-theme="light"] .t-moon{display:block}

/* The L'Ondine logo sits next to the Gym Pully logo, at the same size, wherever it
   appears: the two clubs of Pully share the site equally (committee, 2026-10-12).
   Its official red on light backgrounds, its white version on dark ones. The rules
   are prefixed with .brand to outrank `.brand img{display:block}`. */
.brand-logos{display:flex;align-items:center;gap:8px}
.brand .ond-white{display:none}
.brand .ond-red{display:block}
@media(prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .brand .ond-white{display:block}
  :root:not([data-theme="light"]) .brand .ond-red{display:none}
}
:root[data-theme="dark"] .brand .ond-white{display:block}
:root[data-theme="dark"] .brand .ond-red{display:none}
:root[data-theme="light"] .brand .ond-white{display:none}
:root[data-theme="light"] .brand .ond-red{display:block}

/* ============ footer tools: language + theme, bottom right ============ */
/* The buttons form the right column of the bottom row. They sit on the second line,
   next to the legal links, so they are no taller than a line of text:
   small icons, and a negative margin that keeps a larger click area without pushing
   the line down. The language menu opens upwards. */
.foot-bot .tools{justify-self:end}
/* when the legal links wrap on a phone, the buttons follow their last line */
.foot-bot .tools{align-self:end}
/* One line of text tall, 22px, whatever the buttons measure: the language menu is a
   <details>, a block whose line box otherwise added height and pushed the icons below
   the line of the date. The 24px buttons overflow it evenly above and below. */
.tools{display:flex;align-items:center;gap:6px;flex-shrink:0;height:22px;margin-right:-5px}
.tools .lang{display:flex}
/* the site version, such as v0.1.0, the faintest text of the footer */
.tools .ver{color:var(--ink-faint);font-variant-numeric:tabular-nums;
  margin-right:4px}
.tools .lang-btn,.tools .theme-btn{width:24px;height:24px}

/* The language menu is a <details>, so it opens and closes without script. nav.js
   only adds closing on Escape and on a click elsewhere, like the other menus. */
.lang{position:relative}
.lang-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:32px;height:32px;cursor:pointer;list-style:none;border-radius:6px;
  color:var(--ink-faint);transition:color .15s;
}
.lang-btn::-webkit-details-marker{display:none}
.lang-btn:hover,.lang[open] .lang-btn{color:var(--accent-deep)}
.lang-list{position:absolute;bottom:calc(100% + 10px);right:-8px;z-index:60;min-width:150px;
  margin:0;padding:7px;list-style:none;border-radius:10px;
  background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow)}
.lang-list a{display:block;padding:9px 12px;border-radius:7px;font-size:14px;
  text-decoration:none;color:var(--ink-soft)}
.lang-list a:hover{background:var(--accent-wash);color:var(--ink)}
.lang-list a[aria-current]{color:var(--ink);font-weight:600}

/* ============ member information pages ============ */
.b-aud{background:var(--gold-wash);color:var(--gold-deep)}
.b-arc{background:var(--surface-2);color:var(--ink-faint);border:1px solid var(--border)}
.b-draft{background:var(--cherry);color:var(--paper);font-size:12px;padding:5px 10px}
.info-draft{margin-top:12px}
.info-short{margin-top:10px;font-size:14px;font-weight:700;white-space:nowrap}

.infos{display:flex;flex-direction:column;gap:1px;background:var(--border);
  border:1px solid var(--border);border-radius:10px;overflow:hidden}
.info-row{background:var(--surface);padding:20px 22px;display:grid;
  grid-template-columns:minmax(0,1fr) auto;gap:20px;align-items:start}
.infos.is-archive .info-row{background:var(--surface)}
.infos.is-archive .info-main h3 a{color:var(--ink-soft)}
.info-top{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.info-main h3{font-size:17.5px;font-weight:700;margin-top:10px;line-height:1.25}
.info-main h3 a{text-decoration:none}
.info-main h3 a:hover{color:var(--accent-deep);text-decoration:underline}
.info-lede{margin-top:7px;font-size:14px;color:var(--ink-soft);max-width:62ch}
.info-meta{text-align:right;flex-shrink:0}
.info-season{font-family:"Archivo",sans-serif;font-weight:700;font-size:13px;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.info-upd{font-size:12px;color:var(--ink-faint);margin-top:4px;white-space:nowrap}
@media(max-width:620px){
  .info-row{grid-template-columns:1fr}
  .info-meta{text-align:left}
}

.info-upd-big{margin-top:14px;font-size:14px;color:var(--ink-faint)}
.page-head .info-top{margin-bottom:6px}

.notice{background:var(--gold-wash);
  border:1px solid color-mix(in srgb,var(--gold) 40%,transparent);
  border-radius:10px;padding:15px 18px;font-size:14.5px;color:var(--ink-soft);
  margin-bottom:26px}
.notice-draft{background:var(--cherry-wash);
  border:2px solid var(--cherry);border-left-width:8px;
  padding:18px 22px;font-size:15.5px;color:var(--ink)}
.notice-draft strong{display:block;font-family:"Archivo",sans-serif;font-size:19px;
  text-transform:uppercase;letter-spacing:.04em;margin-bottom:6px;color:var(--cherry)}

.info-body{display:grid;grid-template-columns:minmax(0,1fr) 250px;
  gap:clamp(26px,5vw,52px);align-items:start}
@media(max-width:880px){
  .info-body{grid-template-columns:1fr}
  .info-toc{order:-1}
}
.info-toc{position:sticky;top:calc(86px + var(--proto-h, 0px))}
.info-intro{font-size:16.5px;color:var(--ink-soft);max-width:62ch}
.info-intro + .search{margin-top:22px}
/* the search box above the year filter of the gallery and the results */
.search{display:block;width:100%;max-width:420px;margin-bottom:12px;padding:10px 14px;
  font:inherit;font-size:15px;color:var(--ink);background:var(--surface);
  border:1px solid var(--border);border-radius:10px}
.search::placeholder{color:var(--ink-faint)}
.search:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
.info-sec{margin-top:34px;scroll-margin-top:calc(86px + var(--proto-h, 0px))}

.dl{margin:0;display:flex;flex-direction:column;gap:1px;background:var(--border);
  border:1px solid var(--border);border-radius:10px;overflow:hidden}
.dl-row{background:var(--surface);display:grid;grid-template-columns:190px minmax(0,1fr);
  gap:16px;padding:13px 17px}
.dl dt{font-family:"Archivo",sans-serif;font-weight:700;font-size:13.5px}
.dl dd{margin:0;font-size:14.5px;color:var(--ink-soft)}
@media(max-width:620px){
  .dl-row{grid-template-columns:1fr;gap:4px}
}
.info-sec .note{margin-top:14px}
.info-sec .dl + .note{margin-top:16px}

/* ============ stats band ============ */
/* The rules stop at the content column rather than running to the viewport edge. */
.stats{display:grid;grid-template-columns:repeat(4,1fr);
  border-block:1px solid var(--border)}
.stat{padding-block:26px;padding-inline:clamp(16px,2.4vw,28px)}
.stat:first-child{padding-inline-start:0}
.stat + .stat{border-left:1px solid var(--border)}
@media(max-width:760px){
  .stats{grid-template-columns:repeat(2,1fr)}
  .stat:nth-child(odd){padding-inline-start:0;border-left:0}
  .stat:nth-child(n+3){border-top:1px solid var(--border)}
}

/* ============ partner logos, socials ============ */
/* The skip link: hidden until a keyboard user reaches it with the first Tab, then
   shown above the header, so the menu can be jumped over. */
.skip{position:absolute;left:16px;top:-60px;z-index:100;padding:10px 16px;border-radius:8px;
  background:var(--accent);color:var(--on-accent);font-weight:600;text-decoration:none}
.skip:focus{top:12px}
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}


.parts{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.pt{border:1px solid var(--border);background:var(--surface);border-radius:8px;
  aspect-ratio:16/10;display:flex;align-items:center;justify-content:center;padding:14px}
.pt-text{font-size:13.5px;font-weight:500;color:var(--ink-soft);text-align:center}
.pt-text a{color:inherit;text-decoration:none}
.pt-text a:hover{color:var(--accent-deep);text-decoration:underline}
.pt-logo{background:#fff}
.pt-logo a{display:flex;align-items:center;justify-content:center;width:100%;height:100%}
.pt-logo img{max-height:100%;max-width:100%;width:auto;height:auto;object-fit:contain}

.socials{list-style:none;margin:0;padding:0;display:flex;gap:8px;flex-wrap:wrap}
.soc{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;
  border:1px solid var(--border);border-radius:8px;color:var(--ink-soft);
  text-decoration:none;transition:color .15s,border-color .15s}
a.soc:hover{color:var(--accent-deep);border-color:var(--accent)}
.soc.is-soon{opacity:.6;border-style:dashed;cursor:default}

/* The footer holds only what the menu does not: the club, the contact, and the social
   accounts. The pages themselves are in the menu, so the footer does not repeat them.
   The three stay on one row down to 700px, and the social icons sit in a row. */
.foot{grid-template-columns:2fr 1fr 1fr}
.foot .socials{flex-direction:row}
@media(max-width:700px){ .foot{grid-template-columns:1fr 1fr} .foot-brand{grid-column:1/-1} }
@media(max-width:520px){ .foot{grid-template-columns:1fr} }

/* ============ lightbox / video modal ============ */
.lb-open{display:block;padding:0;border:0;background:none;cursor:zoom-in;position:relative;
  width:100%;border-radius:12px;overflow:hidden}
.lb-badge{position:absolute;left:12px;bottom:12px;background:rgba(10,12,16,.72);
  color:#fff;font-size:11.5px;font-family:"Archivo",sans-serif;font-weight:600;
  letter-spacing:.04em;padding:6px 10px;border-radius:6px;opacity:0;transition:opacity .15s}
.lb-open:hover .lb-badge,.lb-open:focus-visible .lb-badge{opacity:1}

.vids{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px}
.vid-btn{display:block;width:100%;padding:0;border:1px solid var(--border);background:var(--surface);
  border-radius:12px;overflow:hidden;cursor:pointer;position:relative;text-align:left;
  transition:border-color .15s,transform .12s}
.vid-btn:hover{border-color:var(--accent);transform:translateY(-2px)}
.vid-btn img{width:100%;height:auto;display:block;aspect-ratio:16/9;object-fit:cover}
.vid-play{position:absolute;top:calc(50% - 34px);left:50%;transform:translate(-50%,-50%);
  width:54px;height:54px;border-radius:50%;background:rgba(10,12,16,.74);color:#fff;
  display:flex;align-items:center;justify-content:center;transition:background .15s}
.vid-btn:hover .vid-play{background:var(--gold);color:var(--on-gold)}
.vid-title{display:block;padding:14px 16px;font-size:14.5px;font-weight:600;line-height:1.35}

.lb{border:0;padding:0;background:transparent;max-width:min(1100px,92vw);max-height:92vh;
  overflow:visible;color:#fff}
.lb::backdrop{background:rgba(8,10,14,.82);backdrop-filter:blur(3px)}
.lb-body img{display:block;max-width:100%;max-height:80vh;width:auto;height:auto;
  border-radius:12px;margin:0 auto}
.lb-video{position:relative;width:min(1000px,88vw);aspect-ratio:16/9;border-radius:12px;
  overflow:hidden;background:#000}
.lb-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.lb-cap{margin:14px auto 0;max-width:70ch;text-align:center;font-size:14px;color:#D6DAE2}
.lb-close{position:absolute;top:-46px;right:0;width:36px;height:36px;border-radius:8px;
  border:1px solid rgba(255,255,255,.28);background:rgba(0,0,0,.4);color:#fff;
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.lb-close:hover{background:rgba(0,0,0,.7);border-color:#fff}
@media(max-width:620px){ .lb-close{top:-42px} }
/* previous and next, at the edges of the screen, shown only for a photo of an album */
.lb-step{position:fixed;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;
  border:1px solid rgba(255,255,255,.28);background:rgba(0,0,0,.45);color:#fff;
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;z-index:1}
.lb-step:hover{background:rgba(0,0,0,.75);border-color:#fff}
.lb-step[hidden]{display:none}
.lb-prev{left:max(12px,2vw)}
.lb-next{right:max(12px,2vw)}

/* ============ gallery ============ */
.gal-note{margin-top:6px;font-size:14px;color:var(--accent-deep);font-weight:600}
/* the gallery and results pages: one card per album or competition, text only, the
   whole card links to its page like the other cards of the site */
.alb-cards{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px}
.alb{position:relative;background:var(--surface);border:1px solid var(--border);border-radius:12px;
  overflow:hidden;transition:border-color .15s,transform .12s}
.alb:hover{border-color:var(--accent);transform:translateY(-2px)}
.alb-txt{padding:12px 14px 14px}
.alb h2{font-size:15.5px;font-weight:700;line-height:1.3}
.alb h2 a{text-decoration:none}
.alb h2 a::after{content:"";position:absolute;inset:0}
.alb:hover h2 a{color:var(--accent-deep)}
.alb:focus-within{outline:2px solid var(--accent);outline-offset:2px}
.alb h2 a:focus-visible{outline:none}
.alb .res-meta{margin:4px 0 0;font-size:13px}
.alb .gal-note{margin-top:6px;font-size:12.5px;font-weight:500;line-height:1.45}
/* square tiles cropped from the small photos, the whole photo opens in the lightbox */
.gal{list-style:none;margin:16px 0 0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.gal .ph{border-radius:8px;background:var(--surface-2)}
.gal .ph img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover;
  transition:transform .2s}
.gal .ph:hover img,.gal .ph:focus-visible img{transform:scale(1.04)}
.gal-links{display:flex;flex-wrap:wrap;gap:6px 20px}
@media(max-width:520px){ .gal{grid-template-columns:repeat(3,1fr);gap:4px} .gal .ph{border-radius:4px} }

/* ============ join form ============ */
.form-intro{color:var(--ink-soft);font-size:15.5px;max-width:62ch;margin-bottom:22px}
.jform fieldset{border:0;padding:0;margin:0 0 22px}
.jform legend{font-family:"Archivo",sans-serif;font-size:13.5px;font-weight:700;
  margin-bottom:12px;padding:0}
.choice-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:10px}
/* the label stretches to the tallest card of its row, and its box fills it, so the
   three cards have the same height */
.opt{position:relative;display:block;cursor:pointer}
.opt-b{height:100%;box-sizing:border-box}
.opt input{position:absolute;opacity:0;width:1px;height:1px}
.opt-b{display:block;border:1px solid var(--border-strong);border-radius:10px;padding:15px 16px;
  background:var(--surface);transition:border-color .15s,background .15s}
.opt:hover .opt-b{border-color:var(--accent)}
.opt input:checked + .opt-b{border-color:var(--accent);background:var(--accent-wash);
  box-shadow:inset 0 0 0 1px var(--accent)}
.opt input:focus-visible + .opt-b{outline:2px solid var(--accent);outline-offset:2px}
.opt-t{display:block;font-family:"Archivo",sans-serif;font-weight:700;font-size:14.5px}
.opt-d{display:block;font-size:13px;color:var(--ink-soft);margin-top:4px}

.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:6px}
@media(max-width:620px){ .grid2{grid-template-columns:1fr} }
.field{margin:0 0 16px;display:flex;flex-direction:column;gap:6px}
.field label{font-family:"Archivo",sans-serif;font-size:13px;font-weight:700}
.field input,.field select,.field textarea{
  font:inherit;font-size:15px;color:var(--ink);background:var(--surface);
  border:1px solid var(--border-strong);border-radius:8px;padding:10px 12px;width:100%}
.field textarea{resize:vertical;min-height:92px}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{
  outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
.field [aria-invalid="true"]{border-color:var(--full);background:var(--full-bg)}
.hint{font-size:12.5px;color:var(--ink-faint)}

.cbx-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:8px}
.cbx{display:flex;gap:9px;align-items:flex-start;font-size:14.5px;color:var(--ink-soft);
  padding:9px 11px;border:1px solid var(--border);border-radius:8px;background:var(--surface);
  cursor:pointer;margin-bottom:8px}
.cbx:hover{border-color:var(--accent)}
.cbx input{margin-top:2px;accent-color:var(--accent);width:16px;height:16px;flex-shrink:0}

.form-note{font-size:13px;color:var(--ink-faint);background:var(--surface-2);
  border-radius:8px;padding:11px 14px;margin:6px 0 18px}
.form-ok{border:1px solid var(--accent);background:var(--accent-wash);border-radius:12px;
  padding:26px;margin-top:26px}
.form-ok h3{font-size:19px;font-weight:700}
.form-ok p{margin:9px 0 18px;color:var(--ink-soft);font-size:15px}

/* ============ theme-safe inverted panel ============ */
/* .join used var(--ink) as a background, which flips to near-white in dark mode
   while its text stayed white. It now has tokens that stay dark in both themes. */
.join{background:var(--panel);color:var(--panel-ink)}
.join h2,.join .h-sm{color:var(--panel-ink)}
.join p,.join-nl{color:var(--panel-soft)}
/* the line under the number of open positions, in the gold of the number, in bold */
.join .join-nl{color:var(--gold);font-weight:700}
/* the club address in the right half of the block, while the join form is parked. The
   button is gold, since the primary blue is the colour of the block itself. */
.join-mail{border-left:1px solid color-mix(in srgb,var(--panel-soft) 35%,transparent);
  padding-left:clamp(22px,4vw,44px)}
.join-mail h3{font-size:20px;font-weight:800;color:var(--panel-ink)}
.join-mail p{margin-top:10px;font-size:15px}
.join-mail .btn-primary{margin-top:20px;background:var(--gold);border-color:var(--gold);color:#14213A}
@media(max-width:870px){
  .join-mail{border-left:0;padding-left:0;padding-top:26px;
    border-top:1px solid color-mix(in srgb,var(--panel-soft) 35%,transparent)}
}

/* ============ long-form club pages ============ */
.club-links{display:flex;gap:10px;flex-wrap:wrap}

.ticks{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:9px}
.ticks li{position:relative;padding-left:26px;font-size:14.5px;color:var(--ink-soft);
  max-width:64ch}
.ticks li::before{content:"";position:absolute;left:4px;top:.55em;width:7px;height:7px;
  border-radius:50%;background:var(--accent)}
.ticks.wide li{font-size:15px}
.sub-list{margin-top:22px}
.sub-list h3{font-family:"Archivo",sans-serif;font-size:14px;font-weight:700}

.contacts{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:1px;
  background:var(--border);border:1px solid var(--border);border-radius:10px;overflow:hidden}
.contact{background:var(--surface);padding:16px 18px;display:flex;gap:14px;align-items:flex-start}
.contact-n{font-family:"Archivo",sans-serif;font-weight:800;font-size:13px;color:var(--on-accent);
  background:var(--accent);width:24px;height:24px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center}
.contact h3{font-size:15.5px;font-weight:700}
.contact p{margin-top:4px;font-size:14px;color:var(--ink-soft)}
.contact a{color:var(--accent-deep)}

.quote{margin:0;padding:20px 24px;border-left:3px solid var(--accent);
  background:var(--accent-wash);border-radius:0 10px 10px 0;font-size:16px;
  color:var(--ink-soft);max-width:70ch;font-style:italic}

.goals{list-style:none;margin:14px 0 0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1px;background:var(--border);
  border:1px solid var(--border);border-radius:10px;overflow:hidden}
.goal{background:var(--surface);padding:22px}
.goal-n{font-family:"Archivo",sans-serif;font-size:12px;font-weight:800;color:var(--accent-deep);
  letter-spacing:.1em}
.goal h3{font-size:16px;font-weight:700;margin-top:10px;line-height:1.3}
.goal p{margin-top:8px;font-size:14px;color:var(--ink-soft)}

.docs{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1px;
  background:var(--border);border:1px solid var(--border);border-radius:10px;overflow:hidden}
.doc{background:var(--surface)}
.doc a,.doc.is-soon{display:flex;gap:13px;align-items:center;padding:16px 18px;
  text-decoration:none;color:inherit}
.doc a:hover{background:var(--accent-wash)}
.doc-i{color:var(--accent-deep);display:flex;flex-shrink:0}
.doc-t{font-weight:600;font-size:15px;flex:1}
.doc-m{font-size:12.5px;color:var(--ink-faint);white-space:nowrap}
.doc.is-soon .doc-t{color:var(--ink-soft)}
.doc.is-soon .doc-i{color:var(--ink-faint)}

/* ============ compact group card + CTA strip ============ */
.g-mini{gap:10px}
.g-mini .g-sub{margin-top:3px}
.g-mini-when{font-size:13.5px;color:var(--ink-soft);font-variant-numeric:tabular-nums}

.cta-strip{display:flex;gap:22px;align-items:center;justify-content:space-between;
  flex-wrap:wrap;background:var(--panel);color:var(--panel-ink);
  border-radius:12px;padding:26px clamp(22px,4vw,36px)}
.cta-strip h2{font-size:clamp(20px,2.6vw,26px);font-weight:800;color:var(--panel-ink)}
.cta-strip p{margin-top:7px;color:var(--panel-soft);font-size:15px}
.cta-strip .btn{flex-shrink:0}

/* the values grid is now a page in its own right, so its items are headings */
.vals .v h2{font-size:19px;font-weight:700;margin-top:12px}

/* ============ grouped "Le club" navigation ============ */
.has-sub{position:relative}

.sub-trigger{display:inline-flex;align-items:center;gap:5px;font:inherit;font-size:14.5px;
  font-weight:500;color:var(--ink-soft);background:none;border:0;padding:0;cursor:pointer;
  padding-block:4px;border-bottom:2px solid transparent;transition:color .15s,border-color .15s}
.sub-trigger:hover{color:var(--ink);border-bottom-color:var(--accent)}
.sub-trigger.on{color:var(--ink);border-bottom-color:var(--accent)}
.caret{opacity:.6;transition:transform .15s}

/* wide layout: a real dropdown, closed until opened */
@media(min-width:871px){
  /* The trigger is a <button>, so it lays out as a flex container and sizes its
     line box from line-height, while the sibling links are inline boxes sized from
     the font's content area. That made it 33.2px against their 27px, dropping the
     label 3px and the underline 6px below the rest of the row. Give every item in
     the row the same box. Child selectors so the dropdown's links are untouched. */
  .nav-links > li > a,
  .nav-links > li > .sub-trigger{display:inline-flex;align-items:center;line-height:19px}

  .sub{position:absolute;top:calc(100% + 10px);left:-14px;z-index:60;min-width:246px;
    margin:0;padding:7px;list-style:none;border-radius:10px;
    background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow);
    opacity:0;visibility:hidden;transform:translateY(-4px);
    transition:opacity .14s,transform .14s,visibility .14s}
  /* hover and keyboard focus also open it, so the menu still works without JS */
  /* the 10px gap belongs to neither the trigger nor the panel, so moving the
     pointer across it used to drop :hover and close the menu. This transparent
     strip is part of the panel and bridges it. */
  .sub::before{content:"";position:absolute;left:0;right:0;top:-14px;height:14px}
  .has-sub.is-open .sub,.has-sub:hover .sub,.has-sub:focus-within .sub{
    opacity:1;visibility:visible;transform:none}
  .has-sub.is-open .caret,.has-sub:hover .caret{transform:rotate(180deg)}
  .sub-hub{font-weight:600}
  .sub li + li .sub-hub{border-top:0}
  .sub-hub{border-bottom:1px solid var(--border);border-radius:7px 7px 0 0}
  .sub li{margin:0}
  .sub a{display:block;padding:9px 12px;border-radius:7px;font-size:14px;
    color:var(--ink-soft);text-decoration:none;border:0}
  .sub a:hover{background:var(--accent-wash);color:var(--ink)}
  .sub a[aria-current]{color:var(--ink);font-weight:600}
}

/* Narrow layout: the group collapses like an accordion rather than floating.
   Display, not opacity, so the collapsed items take no space and are not
   reachable by keyboard or screen reader while closed. */
@media(max-width:870px){
  .has-sub{display:block;width:100%}
  .sub-trigger{cursor:pointer}
  /* a vertical list, indented under its trigger, on the panel's own tinted ground
     so the nesting is legible without a second set of dividers */
  .sub{list-style:none;margin:0;padding:0;display:none;flex-direction:column;gap:0;
    background:var(--surface-2);border-radius:0;box-shadow:none;min-width:0;
    position:static;opacity:1;visibility:visible;transform:none}
  .has-sub.is-open .sub{display:flex}
  .has-sub.is-open .caret{transform:rotate(180deg)}
  .sub a{display:flex;align-items:center;min-height:44px;padding:0 13px 0 30px;
    font-size:14.5px;color:var(--ink-soft);text-decoration:none;
    border-left:3px solid transparent}
  .sub a:hover{color:var(--ink)}
  .sub a[aria-current]{color:var(--ink);font-weight:600;border-left-color:var(--accent)}
}

/* the club hub page */
.club-cards{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1px;background:var(--border);
  border:1px solid var(--border);border-radius:10px;overflow:hidden}
.club-card{background:var(--surface);padding:24px}
.club-card h2{font-size:18px;font-weight:700}
.club-card h2 a{text-decoration:none}
.club-card h2 a:hover{color:var(--accent-deep);text-decoration:underline}
.club-card p{margin-top:8px;font-size:14.5px;color:var(--ink-soft)}

/* ============ whole-card click targets ============ */
/* Each of these cards contains exactly one link, so the link is stretched over
   the card. The accessible name stays on the heading text. */
.club-card,.g,.info-row,.need{position:relative}
.club-card h2 a::after,
.g h2 a::after,.g h3 a::after,
.info-row h3 a::after,
.need h3 a::after{content:"";position:absolute;inset:0}

.club-card:hover,.info-row:hover,.need:hover{background:var(--accent-wash);cursor:pointer}
.g:hover{border-color:var(--accent);cursor:pointer}
.club-card:hover h2 a,.info-row:hover h3 a,.need:hover h3 a,.g:hover h3 a,.g:hover h2 a{
  color:var(--accent-deep)}
.g h2 a,.g h3 a,.g:hover h2 a,.g:hover h3 a{text-decoration:none}
.club-card:focus-within,.info-row:focus-within,.need:focus-within,.g:focus-within{
  outline:2px solid var(--accent);outline-offset:-2px}
/* the stretched overlay already carries focus, so the inner ring is redundant */
.club-card h2 a:focus-visible,.info-row h3 a:focus-visible,
.need h3 a:focus-visible,.g h3 a:focus-visible,.g h2 a:focus-visible{outline:none}

/* ============ grids without the empty-cell artifact ============ */
/* These used a 1px gap over a border-coloured background, which leaves a
   coloured block wherever the last row is not full. Real gaps instead. */
.club-cards,.vals,.com,.goals{background:none;border:0;border-radius:0;overflow:visible;
  gap:12px}
.club-card,.vals .v,.com .cm,.goals .goal{
  border:1px solid var(--border);border-radius:10px}

/* footer legal links */
/* a date split across two lines reads as two dates, so keep it whole */
.foot-upd{white-space:nowrap}
.foot-legal{display:flex;gap:4px 16px;flex-wrap:wrap}
/* the first line: the copyright, the flag, then the date, as plain text with spaces */
.foot-line1{grid-column:1/-1}
/* The Swiss flag, drawn rather than an emoji, which some systems show as the letters CH
   and others set below the line. Square like the real flag, as tall as a capital
   letter and sitting on the baseline, so it lines up with the D of "Dernière". */
.foot-line1 .flag{display:inline-block;vertical-align:baseline;margin-inline:1px;
  width:10px;height:10px;width:1cap;height:1cap}
.foot-legal a{color:var(--ink-faint);text-decoration:none}
.foot-legal a:hover{color:var(--accent-deep);text-decoration:underline}

/* ============ groups page accents ============ */
/* The category selector uses the accent blue, so the active filter reads as the
   accent rather than a neutral dark chip. Page titles stay ink everywhere. */
.chip[aria-pressed="true"]{background:var(--accent-deep);border-color:var(--accent-deep);
  color:var(--on-accent)}
.chip[aria-pressed="true"]:hover{border-color:var(--accent-deep);color:var(--on-accent)}

/* competition results */
.res-meta{font-size:14px;color:var(--ink-soft);margin:-8px 0 14px}
.res-rankings{list-style:none;margin:0 0 14px;padding:0;display:flex;flex-direction:column;gap:6px}
.res-rankings li{background:var(--gold-wash);border-radius:8px;padding:10px 14px;font-size:14.5px}
.res-cat{font-size:15px;font-weight:700;margin:22px 0 10px}
.tbl.res{min-width:560px;font-size:14px}
.tbl.res th,.tbl.res td{padding:10px 12px}
.tbl.res .sc{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.tbl.res .tot{font-weight:700}
.tbl.res .rk{font-family:"Archivo",sans-serif;font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums}
.tbl.res .of{font-weight:400;color:var(--ink-faint);font-size:12px}
/* The name and its award stay on one line: the score columns give up the space, and
   on a phone the table scrolls sideways as it already does. */
.tbl.res .nm{white-space:nowrap}
/* The same width for the rank and every score column in every table, so the columns
   line up from one category to the next. The name takes the rest of the width. A long
   heading, such as BARRES PARALLELES, wraps onto two lines rather than widening its
   column. */
.tbl.res thead th.rk{width:76px}
/* a line drawing of the apparatus above its name, aligned right like the scores */
.tbl.res .app-ic{display:block;margin:0 0 6px auto;color:var(--accent)}
.tbl.res thead th.sc{width:92px;white-space:normal;vertical-align:bottom}
.tbl.res .nm .badge{margin-left:8px}
.aw-or{background:var(--gold-wash);color:var(--gold-deep)}
.aw-ag{background:var(--surface-2);color:var(--ink-soft)}
.aw-br{background:var(--full-bg);color:var(--full)}
.aw-dist{background:var(--open-bg);color:var(--open)}

/* ============ the Pully landscape at the top of the footer ============ */
/* Decorative: the lake, the Alps, the Lavaux terraces, and the Prieuré tower, in the
   accent color at several opacities, so it follows the light and dark themes. It spans
   the full width of the window, like the footer itself. */
.landscape{display:block;width:100%;height:clamp(56px,8vw,110px);color:var(--accent)}
.landscape .ls-far{fill:currentColor;opacity:.12}
.landscape .ls-snow{fill:#fff;opacity:.6}
.landscape .ls-lake{fill:currentColor;opacity:.07}
.landscape .ls-wave{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;opacity:.3}
.landscape .ls-near{fill:currentColor;opacity:.18}
.landscape .ls-line{fill:none;stroke:currentColor;stroke-width:1.5;opacity:.35}
.landscape .ls-town{fill:currentColor;opacity:.4}
.landscape .ls-tree{fill:var(--open);opacity:.35}
.landscape .ls-sail{fill:var(--gold)}
.landscape .ls-hull{fill:currentColor;opacity:.5}

/* ============ homepage hero banner ============ */
/* The photo across the width of the page content, so it stops growing on a large
   screen, cropped from the top so every head stays in view, and opening in the image
   modal. The title and the buttons follow below it, on the page background: the
   group photo has no calm area where text could sit without hiding faces. */
.hero-outer{padding-top:clamp(16px,3vw,32px)}
.hero-banner{border-radius:16px;overflow:hidden;background:var(--surface-2)}
.hero-banner > .lb-open{border-radius:0}
.hero-banner > .lb-open img{display:block;width:100%;height:auto;aspect-ratio:2/1;
  object-fit:cover;object-position:50% 12%}
.hero-banner .lb-badge{top:14px;left:14px;bottom:auto}
.hero-txt{padding:clamp(24px,4vw,40px) 0 clamp(32px,5vw,56px)}
.hero-txt h1{font-size:clamp(34px,5.6vw,64px);font-weight:800;max-width:20ch}
.hero-txt h1 em{font-style:normal;color:var(--accent-deep)}
.hero-txt .hero-lede{margin-top:16px;font-size:clamp(16px,1.8vw,18.5px);color:var(--ink-soft);max-width:56ch}
.hero-txt .hero-cta{display:flex;gap:12px;margin-top:24px;flex-wrap:wrap}
@media(max-width:700px){
  .hero-banner{border-radius:12px}
  .hero-banner > .lb-open img{aspect-ratio:3/2;object-position:50% 50%}
}

/* ============ agenda by month ============ */
/* a heading per month, such as NOVEMBRE 2026, above its events; filter.js hides a
   month whose events are all filtered out */
.ag-month + .ag-month{margin-top:26px}
.ag-mh{font-family:"Archivo",sans-serif;font-size:12px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent-deep);margin:0 0 10px}

/* ============ the AI page ============ */
.ai-page > *{max-width:var(--measure)}
.ai-list{margin:6px 0 0;padding-left:20px;display:flex;flex-direction:column;gap:8px;
  font-size:15.5px;color:var(--ink-soft)}
.ai-list strong{color:var(--ink)}

/* ============ agenda: calendar menus ============ */
/* A small button that opens a menu of calendar choices: one under the introduction
   for the whole agenda, and a calendar icon next to the tag of each event. Both are
   a <details>, like the language menu, and nav.js closes them like it. */
.ev-side{display:flex;align-items:center;gap:6px}
.cal-menu{position:relative;display:inline-block}
.page-head .cal-menu{margin-top:16px}
.cal-menu summary{list-style:none;display:inline-flex;align-items:center;gap:7px;cursor:pointer;
  font-size:14px;font-weight:600;color:var(--accent-deep);padding:7px 12px;
  border:1px solid var(--border);border-radius:8px;background:var(--surface);transition:border-color .15s}
.cal-menu summary::-webkit-details-marker{display:none}
.cal-menu summary:hover,.cal-menu[open] summary{border-color:var(--accent)}
.pop-list{position:absolute;top:calc(100% + 6px);left:0;z-index:60;width:max-content;
  max-width:min(320px,86vw);margin:0;padding:6px;list-style:none;border-radius:10px;
  background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow)}
.pop-list a{display:flex;flex-direction:column;gap:2px;padding:9px 11px;border-radius:7px;
  text-decoration:none;color:var(--ink)}
.pop-list a:hover,.pop-list a:focus-visible{background:var(--accent-wash)}
.pop-list strong{font-size:14px;font-weight:600}
.pop-list span{font-size:12.5px;color:var(--ink-soft);white-space:normal}
/* the icon alone, next to the tag of an event, quiet until hovered */
.cal-mini summary{width:30px;height:30px;padding:0;justify-content:center;
  border-color:transparent;background:none;color:var(--ink-faint)}
.cal-mini summary:hover,.cal-mini[open] summary{color:var(--accent-deep);border-color:var(--border)}
.cal-mini .pop-list{left:auto;right:0}
@media(max-width:680px){ .cal-mini .pop-list{right:auto;left:0} }

/* ============ homepage: Instagram ============ */
/* three square posts in a row, each linking to the account, with the Instagram mark */
.insta{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.insta a{position:relative;display:block;border-radius:12px;overflow:hidden;color:#fff}
.insta img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover;transition:transform .25s}
.insta a:hover img,.insta a:focus-visible img{transform:scale(1.04)}
.insta svg{position:absolute;top:10px;right:10px;filter:drop-shadow(0 1px 3px rgba(0,0,0,.5))}
@media(max-width:520px){ .insta{gap:6px} .insta a{border-radius:8px} .insta svg{width:18px;height:18px} }

/* ============ spacing helpers ============ */
/* instead of style attributes, which the Content-Security-Policy forbids */
.mb-14{margin-bottom:14px}
.mt-12{margin-top:12px}
.mt-16{margin-top:16px}
.mt-20{margin-top:20px}
.mt-30{margin-top:30px}
.mt-34{margin-top:34px}
.mt-40{margin-top:40px}
.mt-44{margin-top:44px}
.mt-48{margin-top:48px}

/* ============ agenda: past events ============ */
/* a toggle at the end of the filters, dashed so it does not read as a kind of event */
.chip-past{font-family:"Archivo",sans-serif;font-size:13px;font-weight:600;letter-spacing:-.005em;
  padding:8px 15px;border-radius:100px;border:1px dashed var(--border-strong);
  background:transparent;color:var(--ink-soft);cursor:pointer;transition:.15s}
.chip-past:hover{border-color:var(--accent);color:var(--ink)}
.chip-past[aria-pressed="true"]{border-style:solid;border-color:var(--accent-deep);color:var(--accent-deep);
  background:var(--accent-wash)}
.chip-past .c{opacity:.55;font-variant-numeric:tabular-nums;margin-left:5px}
.chip-past[hidden]{display:none}

/* ============ 404 page ============ */
/* A page on its own, with no header and no footer: everything centered in the
   window, vertically too. */
body.p-notfound{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;justify-content:center}
/* the same space above and below, since the usual page head has more above */
.page-head.nf{padding-block:32px}
.nf{text-align:center}
.nf p{margin-inline:auto}
.nf .hero-cta{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:28px}
/* The drawing of an empty swinging ring, above the title, see NF_ART in build.py.
   Lines in the ink color, the 4s in the accent, the ring in gold. */
.nf-fig{margin:0 auto 18px;max-width:360px}
.nf-art{display:block;width:100%;height:auto;color:var(--ink)}
.nf-line,.nf-strap{fill:none;stroke:currentColor;stroke-width:5;stroke-linecap:round}
.nf-strap{stroke-width:3}
.nf-4{font-family:"Archivo",sans-serif;font-weight:800;font-size:120px;fill:var(--accent)}
.nf-ring{fill:none;stroke:var(--gold);stroke-width:9}
.nf-swing{fill:none;stroke:var(--ink-faint);stroke-width:2.5;stroke-linecap:round;opacity:.6}
.nf-fig figcaption{margin-top:8px;font-size:14px;color:var(--ink-faint);font-style:italic}

/* ============ brand guidelines page ============ */
/* The tiles and swatches show fixed colors on purpose: they show the brand, so they
   look the same in the light and the dark theme. */
.charte .callout{max-width:var(--measure)}
.h-xs{font-size:15px;font-weight:700;margin-top:28px}
.bg-logos{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px;margin-top:6px}
.bg-logos figure{margin:0}
.bg-pair{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--border);border-radius:10px;overflow:hidden}
.bg-tile{display:flex;align-items:center;justify-content:center;padding:24px 12px}
.bg-tile img{width:min(120px,100%);height:auto;display:block}
.bg-tile.light{background:#F6FAFD}
.bg-tile.dark{background:#003370}
.bg-logos figcaption{margin-top:9px;font-size:13.5px;color:var(--ink-soft)}
.charte .ticks{max-width:var(--measure)}
.swatches{list-style:none;margin:20px 0 0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}
.sw{background:var(--surface);border:1px solid var(--border);border-radius:10px;overflow:hidden;
  display:flex;flex-direction:column}
.sw-chip{min-height:96px;padding:14px 16px;display:flex;flex-direction:column;justify-content:flex-end;gap:2px}
.sw-n{font-family:"Archivo",sans-serif;font-weight:700;font-size:15px}
.sw-chip code,.sw-dark code{font-size:12.5px;font-variant-numeric:tabular-nums;letter-spacing:.02em}
.sw-role{padding:12px 16px 0;font-size:13.5px;color:var(--ink-soft)}
.sw-dark{margin-top:auto;padding:10px 16px 14px;font-size:12.5px;color:var(--ink-faint);
  display:flex;align-items:center;gap:7px}
.sw-dot{width:14px;height:14px;border-radius:50%;border:1px solid var(--border-strong);flex-shrink:0}
.fonts{list-style:none;margin:20px 0 0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px}
.fs{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:22px 22px 20px;min-width:0}
.fs-aa{font-size:64px;line-height:1;color:var(--accent-deep)}
.fs h3{font-size:17px;font-weight:700;margin-top:14px}
.fs-sample{margin-top:8px;font-size:20px;line-height:1.3}
.fs-display{font-family:"Archivo",sans-serif;font-weight:800;letter-spacing:-.02em}
.fs-body{font-family:"Instrument Sans",sans-serif;font-weight:400}
.fs-link{display:inline-block;margin-top:12px;font-size:14px;color:var(--accent-deep)}
.tscale{list-style:none;margin:14px 0 0;padding:0;border-top:1px solid var(--border)}
.ts{padding:16px 0;border-bottom:1px solid var(--border);min-width:0}
.ts-l{font-size:12.5px;color:var(--ink-faint);margin-bottom:6px}
.ts-h1,.ts-h2,.ts-h3{font-family:"Archivo",sans-serif;letter-spacing:-.02em;line-height:1.05;text-wrap:balance}
.ts-h1{font-size:clamp(34px,6vw,60px);font-weight:800}
.ts-h2{font-size:clamp(28px,4.4vw,44px);font-weight:800}
.ts-h3{font-size:19px;font-weight:700}
.ts-body{font-size:16px;max-width:var(--measure)}
.demo{margin-top:18px;padding:22px;background:var(--surface);border:1px solid var(--border);
  border-radius:10px;display:flex;flex-direction:column;gap:16px}
.demo-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.sw-ratio{padding:6px 16px 0;font-size:12.5px;color:var(--ink-soft)}
.sw-ratio strong{color:var(--ink)}
/* Wrong uses of the monogram, drawn from the real file with CSS. */
.misuse{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:12px;margin-top:12px}
.mu{margin:0}
.mu .bg-tile{border:1px solid var(--border);border-radius:10px;height:112px;overflow:hidden}
.mu img{width:72px;height:auto}
.mu figcaption{margin-top:7px;font-size:13px;color:var(--ink-soft)}
.mu-stretch{transform:scaleX(1.5)}
.mu-recolor{filter:hue-rotate(150deg) saturate(2.4)}
.mu-shadow{filter:drop-shadow(3px 4px 2px rgba(0,0,0,.55))}
.mu-rotate{transform:rotate(-18deg)}

/* ============ history page ============ */
.song{margin-top:16px;max-width:var(--measure);display:flex;flex-direction:column;gap:12px;
  font-size:15px;line-height:1.6;color:var(--ink);font-style:italic}
.song p{margin:0}

/* ============ the annual show on the homepage ============ */
.soiree{display:grid;grid-template-columns:340px minmax(0,1fr);gap:clamp(26px,5vw,56px);
  align-items:center;background:var(--surface);border:1px solid var(--border);
  border-radius:14px;padding:clamp(20px,4vw,36px)}
.soiree-img{display:block;border-radius:8px;overflow:hidden;
  box-shadow:0 10px 30px rgba(16,32,51,.18);transition:transform .2s}
.soiree-img:hover{transform:translateY(-2px)}
.soiree-img img{display:block;width:100%;height:auto}
.soiree-txt h2{margin-top:6px}
.soiree-txt p{margin-top:12px;color:var(--ink-soft);max-width:52ch}
.soiree-prices{font-size:14.5px}
.soiree-txt .more{margin-top:20px}
.soiree-size{font-size:12.5px;color:var(--ink-faint)}
@media(max-width:720px){
  .soiree{grid-template-columns:1fr}
  .soiree-img{max-width:300px;margin:0 auto}
}