/* « The band » — the Sistafund spectrum as a signature (proposal, Arthur 03/11/2026). Active only when <html> has the class « band »
   (band.js: ?band=1 on any page, ?band=0 to switch off). First light rules kept: yellow stays the light; the band is a thin line or a dawn,
   never a fill, never behind a figure. Three uses: the line (reading progress), the touch (what you point at), the dawn (the end of a page). */
:root { --band: linear-gradient(90deg, #FFAEC4 0%, #FFC9A8 20%, #FFF868 42%, #FFF868 55%, #F2B8F0 75%, #D4C2FF 88%, #B5AEFF 100%); }

/* 1 · the line: 2px along the top of the screen, as long as what you have read */
/*   always: yellow with Rainbow off (Arthur 03/11), the band with Rainbow on */
.band-line { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 80; background: var(--yellow, #FFF868); transform-origin: 0 50%; transform: scaleX(var(--read, 0)); pointer-events: none; }
html.band .band-line { background: var(--band); }

/* 2 · the touch: what you point at gets the band underneath, drawn left to right */
/*   always (Rainbow off: a YELLOW line, Arthur 03/11); Rainbow on: the band */
.pf .co .media::before, .co .m::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; z-index: 3; background: var(--yellow, #FFF868);
  transform: scaleX(0); transform-origin: 0 50%; transition: transform .6s cubic-bezier(.22,1,.36,1); }
.pf .co:hover .media::before, .co:hover .m::before, .pf .co:focus-visible .media::before, .co:focus-visible .m::before { transform: scaleX(1); }
html.band .pf .co .media::before, html.band .co .m::before { background: var(--band); }
html.band .c-card .bar { background: var(--band); height: 3px; }
/* ALWAYS (Rainbow on or off, Arthur 03/11): the menu and the light buttons get a flat YELLOW highlighter behind the lower half of the words, like a key figure (Arthur 03/11: « en jaune »);
   the band stays on the line, the touch, the dawn and the edge of the Pitch buttons */
.nav-pill a, .nav-pill a:hover { background: none; }
.nav-pill a.on, .nav-pill a:hover { background: linear-gradient(var(--yellow, #FFF868), var(--yellow, #FFF868)) no-repeat 50% 68% / calc(100% - 14px) 27%; }
.btn.line:hover, .btn.line:focus-visible { background: linear-gradient(var(--yellow, #FFF868), var(--yellow, #FFF868)) no-repeat 50% 68% / calc(100% - 40px) 27%; }

/* the footer, every page (Arthur 03/11: « plus petite »): tighter, a smaller logo and type;
   white like the page with a 3px line along its top edge: YELLOW with Rainbow off, the band with Rainbow on (Arthur 03/11, option A of
   footer_rainbow_options: « A et pour la version non rainbow juste une ligne jaune »); was a yellow fill (off) and the paper ground + dawn (on) */
.footer { padding: clamp(30px, 3.2vw, 46px) var(--gut) 18px; }
.footer .f-say { font-size: clamp(22px, 2.1vw, 30px); }
.footer .f-logo { width: clamp(96px, 7.5vw, 124px); margin-top: clamp(18px, 2.2vw, 28px); }
.footer .f-logo-top { margin-top: 0; }
.footer .f-legal { margin-top: clamp(20px, 2.4vw, 30px); }
.footer .f-bottom { margin-top: 10px; }
html .footer { position: relative; background: var(--ground, #fff); }
@media (max-width: 760px) { .footer .f-top { grid-template-columns: 1fr 1fr; gap: 18px 16px; } .footer .f-say { grid-column: 1 / -1; } .footer .f-col p, .footer .f-col a { font-size: 14px; } }   /* phones: two columns, not one long stack */

/* 3 · the footer line: once per page, along the top edge of the footer (replaces the dawn, Arthur 03/11) */
.footer::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--yellow, #FFF868); pointer-events: none; }
html.band .footer::before { background: var(--band); }

/* 4 · the call: the « Pitch » buttons light up with the band on their edge on hover (back, Arthur 03/11) */
html.band .nav-cta, html.band .btn.dark { border: 1.5px solid transparent; background: linear-gradient(var(--ink), var(--ink)) padding-box, linear-gradient(var(--ink), var(--ink)) border-box; transition: background .3s; }
html.band .nav-cta:hover, html.band .btn.dark:hover, html.band .nav-cta:focus-visible, html.band .btn.dark:focus-visible { background: linear-gradient(var(--ink), var(--ink)) padding-box, var(--band) border-box; }

/* the toggle (always shown on the test site): bottom left, out of the way of the page's own switchers and mock-up note */
.bandpick { position: fixed; left: 14px; bottom: 14px; z-index: 70; display: flex; align-items: center; gap: 2px; white-space: nowrap; background: rgba(255,255,255,.95);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(16,16,16,.12); border-radius: 9px; padding: 4px; box-shadow: 0 6px 24px rgba(16,16,16,.1); font: 500 12px 'Hanken Grotesk', Arial, sans-serif; }
.bandpick span { display: flex; align-items: center; gap: 7px; color: #6e6a5e; padding: 0 8px 0 6px; }
.bandpick span i { width: 22px; height: 3px; border-radius: 2px; background: var(--band); }
.bandpick button { font: inherit; border: 0; background: none; color: #101010; padding: 7px 11px; border-radius: 6px; cursor: pointer; }
.bandpick button.on { background: #101010; color: #fff; }
@media (max-width: 760px) { .bandpick { bottom: 74px; left: 10px; } .bandpick span { padding-right: 4px; } }
@media print { .bandpick { display: none; } }

@media (prefers-reduced-motion: reduce) { .pf .co .media::before, .co .m::before { transition: none; } }
@media print { .band-line, .footer::before { display: none; } }