.wb{--wb-accent:var(--bsc-beer-accent,#00d1b4);--wb-secondary:var(--bsc-beer-secondary,#bd009f);--wb-surface:#111;--wb-ink:#fff;--wb-muted:#bdbdbd;--wb-border:#313131;--wb-padding:clamp(32px,5vw,64px);box-sizing:border-box;width:100%;max-width:100%;min-width:0;overflow:visible;padding:var(--wb-padding);background:var(--wb-surface);color:var(--wb-ink);border:0;font-family:var(--bsc-entity-font,Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif);font-size:15px;line-height:1.6;text-align:left;position:relative;isolation:isolate}
.wb--light{--wb-surface:var(--bsc-beer-surface,#f4f1ec);--wb-ink:var(--bsc-beer-ink,#111);--wb-muted:#525252;--wb-border:#111}
.wb--inherit{--wb-surface:transparent;--wb-ink:inherit;--wb-muted:inherit;--wb-border:currentColor}
.wb *,.wb *::before,.wb *::after{box-sizing:border-box}
.wb .wb__header,.wb .wb__body{padding:0;min-width:0;max-width:100%}
.wb .wb__title{display:block;min-width:0;max-width:100%;height:auto;overflow:visible;white-space:normal;overflow-wrap:anywhere;font-family:inherit;color:inherit;font-size:clamp(2.1rem,5vw,4.8rem);font-weight:950;letter-spacing:-.06em;line-height:1.08;text-transform:uppercase;margin:0 0 clamp(24px,4vw,40px)}
.wb p{margin:0 0 12px}
.wb .wb__hero{display:flex;align-items:center;gap:20px;margin-bottom:20px;flex-wrap:wrap}
.wb .wb__icon{width:66px;height:66px;flex-shrink:0;color:var(--wb-accent)}
.wb .wb__temperature{font-size:clamp(48px,6vw,72px);font-weight:850;letter-spacing:-.06em;line-height:1.1}
.wb .wb__condition{font-weight:650}.wb .wb__subtitle{font-size:.8em;color:var(--wb-muted);margin:3px 0}
.wb .wb__metrics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;border:1px solid var(--wb-border);margin:0}
.wb--history .wb__metrics{grid-template-columns:repeat(3,minmax(0,1fr))}
.wb--today .wb__metric:last-child:nth-child(odd){grid-column:1/-1}
.wb{container-type:inline-size}
.wb .wb__title{text-wrap:balance;hyphens:auto}
@supports(font-size:1cqi){.wb .wb__title{font-size:clamp(2.1rem,9cqi,4.8rem)}}
.wb .wb__hero>div{min-width:0;overflow-wrap:anywhere}
.wb .wb__metric{padding:13px 14px;min-width:0;border:1px solid var(--wb-border)}
.wb .wb__metric dt{font-size:.7em;text-transform:uppercase;letter-spacing:.06em;color:var(--wb-muted);line-height:1.5}
.wb .wb__metric dd{font-size:1.4em;font-weight:800;margin:5px 0 0;line-height:1.3;font-variant-numeric:tabular-nums}
.wb .wb__periods{display:flex;flex-wrap:wrap;gap:6px;padding:0;margin:0 0 14px}
.wb .wb__periods button,.wb .wb__retry{font:inherit;font-size:.78em;font-weight:700;padding:8px 12px;border:1px solid var(--wb-border);border-radius:0;cursor:pointer;background:var(--wb-menu-bg,transparent);color:var(--wb-menu-ink,inherit);line-height:1.5;min-height:38px;white-space:normal;overflow-wrap:anywhere}
.wb .wb__periods button[aria-pressed=true]{background:var(--wb-menu-active-bg,var(--wb-accent));color:var(--wb-menu-active-ink,#111);border-color:var(--wb-accent)}
.wb button:focus-visible,.wb summary:focus-visible,.wb a:focus-visible{outline:3px solid var(--wb-secondary);outline-offset:3px}
.wb .wb__periods button:hover,.wb .wb__retry:hover,.wb summary:hover{border-color:var(--wb-accent);background:var(--wb-menu-hover-bg,var(--wb-menu-bg,transparent));color:var(--wb-menu-hover-ink,var(--wb-menu-ink,inherit))}
.wb .wb__periods button[aria-pressed=true]:hover{background:var(--wb-menu-hover-bg,var(--wb-menu-active-bg,var(--wb-accent)));color:var(--wb-menu-hover-ink,var(--wb-menu-active-ink,#111))}
.wb .wb__status{font-size:.8em;color:var(--wb-muted)}
.wb [data-wb-status]:not(:empty){padding:0;margin:12px 0}
.wb [data-wb-status]:empty{display:none}
.wb .wb__footer{padding:0;margin-top:16px;font-size:9px;line-height:1.4;color:var(--wb-muted)}
.wb a{color:inherit;text-underline-offset:3px}
.wb .wb__pairing{border-top:1px solid var(--wb-border);padding:20px 0 0;margin-top:20px}
.wb .wb__pairing dl{margin:0 0 12px}.wb .wb__pairing dt{font-size:.8em;color:var(--wb-muted)}
.wb .wb__ideal{font-size:clamp(32px,4vw,45px);font-weight:850;line-height:1.2;letter-spacing:-.04em;margin:4px 0 0}
.wb .wb__sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.wb .wb__chart{width:100%;height:auto;display:block;margin:18px 0 0;overflow:visible}
.wb .wb__chart text{fill:var(--wb-muted);font:12px system-ui,sans-serif}
.wb .wb__chart line{stroke:var(--wb-border);stroke-width:1}
.wb .wb__chart polyline{fill:none;stroke:var(--wb-accent);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
.wb .wb__chart circle{fill:var(--wb-accent)}
.wb .wb__table-wrap{max-height:310px;overflow:auto;margin-top:14px}
.wb table{width:100%;border-collapse:collapse;font-size:.75em;color:inherit;margin:0;white-space:nowrap}
.wb th,.wb td{padding:8px;text-align:right;border:1px solid var(--wb-border);background:transparent}
.wb th:first-child,.wb td:first-child{text-align:left}
.wb caption{text-align:left;padding:8px 0;font-weight:650}
.wb details{margin-top:18px;font-size:.88em}.wb summary{cursor:pointer;font-weight:650;background:var(--wb-menu-bg,transparent);color:var(--wb-menu-ink,inherit);overflow-wrap:anywhere}
.wb .wb__readings-heading,.wb .wb__chart-heading{font:inherit;font-weight:650;color:inherit;margin:18px 0 0;overflow-wrap:anywhere}
.wb .wb__tag{display:inline-block;font-size:.7em;padding:3px 8px;border:1px solid var(--wb-border);margin-bottom:12px;color:var(--wb-muted)}
.wb .wb__error{border-left:3px solid var(--wb-secondary);padding-left:14px}
.wb [aria-busy=true]{opacity:.65}
@media(max-width:480px){.wb .wb__metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.wb .wb__icon{width:50px;height:50px}.wb .wb__hero{gap:14px}.wb .wb__periods button{flex:1;padding:8px}}
@container(max-width:400px){.wb .wb__temperature{font-size:48px}.wb .wb__icon{width:50px;height:50px}.wb .wb__metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.wb .wb__hero{gap:14px}}
@media(prefers-reduced-motion:no-preference){.wb .wb__periods button{transition:background-color .15s,border-color .15s}}

/* History: the compact "La brasserie en chiffres" presentation. */
.wb.wb--figures{--wb-accent:#fff;--wb-secondary:#fff;--wb-tile:#111;border:0}
.wb--figures.wb--bsc{--wb-surface:#000;--wb-border:#383838}
.wb--figures.wb--light{--wb-tile:#fff;--wb-accent:#111;--wb-secondary:#111;--wb-border:#d0cec9}
.wb--figures.wb--inherit{--wb-tile:transparent;--wb-accent:currentColor;--wb-secondary:currentColor}
.wb--figures .wb__periods{padding:0;margin:0 0 14px;gap:4px}
.wb--figures .wb__periods button{font-size:10px;min-height:28px;padding:4px 10px;font-weight:850;text-transform:uppercase;letter-spacing:.04em}
.wb--figures .wb__metrics{grid-template-columns:repeat(5,minmax(0,1fr));gap:1px;background:var(--wb-border);border:0}
.wb--figures .wb__metric{position:relative;display:flex;flex-direction:column-reverse;justify-content:center;min-height:76px;padding:14px 12px 14px 48px;border:0;background:var(--wb-tile)}
.wb--figures .wb__metric dd{color:var(--wb-ink);font-size:20px;line-height:1.1;font-weight:950;letter-spacing:-.035em;margin:0 0 4px;overflow-wrap:anywhere}
.wb--figures .wb__metric dt{color:var(--wb-ink);font-size:9px;font-weight:850;line-height:1.35;letter-spacing:.055em;text-transform:uppercase;opacity:.88}
.wb--figures .wb__metric-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;font-size:21px;font-weight:400;line-height:1;letter-spacing:0}
.wb--figures.wb--no-metric-icons .wb__metric{padding-left:12px}
.wb--figures .wb__range{font-size:11px;color:var(--wb-muted);margin:12px 0 5px}
.wb--figures .wb__subtitle{font-size:10px;margin:8px 0}
.wb--figures details{font-size:11px;margin-top:10px}
.wb--figures summary{font-weight:750}
.wb--figures .wb__chart{margin-top:12px}
.wb--figures [data-wb-status]:not(:empty){padding:0;font-size:10px;margin:10px 0}
.wb--figures .wb__footer{padding:0;margin-top:12px;border-top:0;font-size:9px}
@container(max-width:760px){.wb--figures .wb__metrics{grid-template-columns:repeat(3,minmax(0,1fr))}}
@container(max-width:440px){.wb--figures .wb__metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.wb--figures .wb__metric{padding-left:44px}.wb--figures .wb__metric dd{font-size:18px}.wb--figures .wb__metric-icon{left:12px;font-size:20px}}
@container(max-width:220px){.wb--figures .wb__metrics{grid-template-columns:1fr}}

