/* /Pages/About.cshtml.rz.scp.css */
.lead[b-p144hd9rer] {
font-size: var(--bl-fs-lead);
color: var(--bl-text-muted);
margin-top: var(--bl-space-3);
margin-bottom: var(--bl-space-6);
}
.story p[b-p144hd9rer] {
margin-bottom: var(--bl-space-3);
}
.team-photo[b-p144hd9rer] {
margin: 0 0 var(--bl-space-5);
}
@media (min-width: 768px) {
.team-photo[b-p144hd9rer] {
float: right;
max-width: 320px;
margin: 0 0 var(--bl-space-3) var(--bl-space-5);
}
}
.hop-photo[b-p144hd9rer] {
margin: 0 0 var(--bl-space-4);
}
@media (min-width: 768px) {
.hop-photo[b-p144hd9rer] {
float: left;
max-width: 260px;
margin: var(--bl-space-2) var(--bl-space-5) var(--bl-space-3) 0;
}
}
.signature[b-p144hd9rer] {
font-family: var(--bl-font-display);
font-size: var(--bl-fs-h3);
color: var(--bl-white);
text-align: right;
margin-top: var(--bl-space-5);
}
.cta-row[b-p144hd9rer] {
display: flex;
flex-wrap: wrap;
gap: var(--bl-space-3);
margin-top: var(--bl-space-6);
}
/* /Pages/Beers/Detail.cshtml.rz.scp.css */
.beer-detail-top[b-swpf2g7s09] {
display: grid;
gap: var(--bl-space-5);
align-items: center;
}
.beer-detail-image[b-swpf2g7s09] {
aspect-ratio: 4 / 5;
background: var(--bl-black-3);
border-radius: var(--bl-radius);
overflow: hidden;
}
.beer-detail-header[b-swpf2g7s09] {
display: flex;
flex-direction: column;
gap: var(--bl-space-3);
}
.beer-type[b-swpf2g7s09] {
font-family: var(--bl-font-body);
font-weight: 700;
font-size: var(--bl-fs-small);
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--bl-text-muted);
margin: 0;
}
.beer-detail-header h1[b-swpf2g7s09] {
font-size: var(--bl-fs-h1-hero);
margin: 0;
}
.beer-tagline[b-swpf2g7s09] {
font-size: var(--bl-fs-lead);
color: var(--bl-text);
margin: 0;
max-width: none;
}
/* Le corps Markdown est mis en forme dans pages.css : ses éléments naissent à
l'exécution, sans l'attribut de portée que cette feuille exige. */
.beer-block p[b-swpf2g7s09] {
margin-bottom: var(--bl-space-3);
max-width: none;
}
.beer-block p:last-child[b-swpf2g7s09] {
margin-bottom: 0;
}
.beer-specs[b-swpf2g7s09] {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: var(--bl-space-3);
margin: var(--bl-space-4) 0 var(--bl-space-6);
padding: 0;
}
.beer-specs > div[b-swpf2g7s09] {
background: var(--bl-black-3);
border: var(--bl-border-width) solid var(--bl-border);
border-radius: var(--bl-radius);
padding: var(--bl-space-3);
}
.beer-specs dt[b-swpf2g7s09] {
font-family: var(--bl-font-body);
font-weight: 700;
font-size: var(--bl-fs-small);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--bl-text-muted);
margin-bottom: var(--bl-space-1);
}
.beer-specs dd[b-swpf2g7s09] {
font-family: var(--bl-font-display);
font-size: var(--bl-fs-h3);
color: var(--bl-white);
margin: 0;
}
.format-title[b-swpf2g7s09],
.subhead[b-swpf2g7s09] {
margin-top: var(--bl-space-5);
margin-bottom: var(--bl-space-3);
}
.formats-list[b-swpf2g7s09],
.bullet-list[b-swpf2g7s09] {
list-style: disc;
padding-left: var(--bl-space-4);
color: var(--bl-text);
}
.formats-list li[b-swpf2g7s09],
.bullet-list li[b-swpf2g7s09] {
margin-bottom: var(--bl-space-2);
}
.allergens[b-swpf2g7s09] {
color: var(--bl-white);
max-width: none;
}
.beer-block[b-swpf2g7s09] {
margin-bottom: var(--bl-space-6);
}
.beer-block:last-child[b-swpf2g7s09] {
margin-bottom: 0;
}
.visually-hidden[b-swpf2g7s09] {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
@media (min-width: 768px) {
.beer-detail-top[b-swpf2g7s09] {
grid-template-columns: 1fr 1fr;
}
}
/* /Pages/Beers/Index.cshtml.rz.scp.css */
.lead[b-qmf8dewo59] {
font-size: var(--bl-fs-lead);
color: var(--bl-text-muted);
margin-top: var(--bl-space-3);
max-width: none;
}
.lead:last-of-type[b-qmf8dewo59] {
margin-bottom: var(--bl-space-6);
}
.empty[b-qmf8dewo59] {
color: var(--bl-text-muted);
text-align: center;
padding: var(--bl-space-7) 0;
}
.beers-grid[b-qmf8dewo59] {
display: grid;
grid-template-columns: 1fr;
gap: var(--bl-space-4);
}
@media (min-width: 768px) {
.beers-grid[b-qmf8dewo59] {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1024px) {
.beers-grid[b-qmf8dewo59] {
grid-template-columns: repeat(3, 1fr);
gap: var(--bl-space-5);
}
}
/* /Pages/Cart/Index.cshtml.rz.scp.css */
.pickup-info[b-n1rccefcub] {
background: var(--bl-black-3);
border: var(--bl-border-width) solid var(--bl-border);
border-radius: var(--bl-radius);
padding: var(--bl-space-4);
margin-bottom: var(--bl-space-6);
}
/* Badge « Click & Collect » : même langage que le bandeau shop des cards */
.pickup-info-badge[b-n1rccefcub] {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 12px;
border-radius: 999px;
background: rgba(0, 255, 51, 0.12);
border: var(--bl-border-width) solid rgba(0, 255, 51, 0.4);
color: #00ff33;
font-family: var(--bl-font-body);
font-weight: 700;
font-size: var(--bl-fs-micro);
letter-spacing: 0.1em;
text-transform: uppercase;
margin: 0 0 var(--bl-space-3);
}
.pickup-info-title[b-n1rccefcub] {
font-family: var(--bl-font-display);
font-weight: 400;
font-size: var(--bl-fs-h3);
color: var(--bl-white);
letter-spacing: 0.02em;
margin: 0 0 var(--bl-space-2);
}
.pickup-info-intro[b-n1rccefcub] {
color: var(--bl-text);
margin: 0 0 var(--bl-space-4);
max-width: none;
}
.pickup-steps[b-n1rccefcub] {
list-style: none;
padding: 0;
margin: 0;
display: grid;
gap: var(--bl-space-2);
}
.pickup-steps li[b-n1rccefcub] {
display: flex;
align-items: center;
gap: var(--bl-space-3);
color: var(--bl-text);
}
.pickup-step-num[b-n1rccefcub] {
width: 32px;
height: 32px;
border-radius: 50%;
background: var(--bl-white);
color: var(--bl-black-1);
display: inline-flex;
align-items: center;
justify-content: center;
font-family: var(--bl-font-display);
font-weight: 400;
flex-shrink: 0;
}
.reservation-layout[b-n1rccefcub] {
display: grid;
gap: var(--bl-space-6);
}
.reservation-recap h2[b-n1rccefcub],
.reservation-slot h2[b-n1rccefcub],
.reservation-form-wrap h2[b-n1rccefcub] {
font-family: var(--bl-font-body);
font-weight: 700;
font-size: var(--bl-fs-h3);
letter-spacing: 0;
margin-bottom: var(--bl-space-4);
}
/* Garde le titre du créneau (avec son astérisque) sur une seule ligne */
.reservation-slot h2[b-n1rccefcub] {
white-space: nowrap;
}
.reservation-items[b-n1rccefcub] {
background: var(--bl-black-3);
border: var(--bl-border-width) solid var(--bl-border);
border-radius: var(--bl-radius);
padding: var(--bl-space-3);
}
.recap-total[b-n1rccefcub] {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--bl-space-3);
margin-top: var(--bl-space-3);
padding-top: var(--bl-space-3);
border-top: var(--bl-border-width) solid var(--bl-border);
}
/* L'attribut hidden doit l'emporter sur display:flex (sinon le total
reste affiché, figé, quand le panier se vide). */
.recap-total[hidden][b-n1rccefcub] {
display: none;
}
.recap-total-label[b-n1rccefcub] {
font-family: var(--bl-font-body);
font-weight: 700;
color: var(--bl-text-muted);
text-transform: uppercase;
letter-spacing: 0.08em;
font-size: var(--bl-fs-small);
}
.recap-total-amount[b-n1rccefcub] {
font-family: var(--bl-font-display);
font-weight: 400;
color: var(--bl-white);
font-size: var(--bl-fs-h2);
letter-spacing: 0.02em;
margin-left: auto;
text-align: right;
}
.reservation-form[b-n1rccefcub] {
display: flex;
flex-direction: column;
gap: var(--bl-space-3);
}
.slot-empty[b-n1rccefcub] {
background: var(--bl-black-3);
border: var(--bl-border-width) solid var(--bl-border);
border-radius: var(--bl-radius);
padding: var(--bl-space-3);
color: var(--bl-text-muted);
margin: 0;
}
.slot-locations[b-n1rccefcub] {
display: flex;
flex-direction: column;
gap: var(--bl-space-4);
}
.slot-location-head[b-n1rccefcub] {
margin-bottom: var(--bl-space-2);
}
.slot-location-name[b-n1rccefcub] {
font-family: var(--bl-font-display);
font-weight: 400;
font-size: var(--bl-fs-h4, 1.15rem);
color: var(--bl-white);
letter-spacing: 0.02em;
margin: 0;
}
.slot-location-address[b-n1rccefcub] {
font-size: var(--bl-fs-small);
color: var(--bl-text-muted);
margin: 2px 0 0;
}
.day-grid[b-n1rccefcub] {
display: grid;
grid-template-columns: 1fr;
gap: var(--bl-space-3);
}
@media (min-width: 560px) {
.day-grid[b-n1rccefcub] {
grid-template-columns: 1fr 1fr;
}
}
.day-card[b-n1rccefcub] {
display: flex;
flex-direction: column;
gap: var(--bl-space-2);
padding: var(--bl-space-3);
background: var(--bl-black-3);
border: 1px solid var(--bl-border);
border-radius: var(--bl-radius);
}
.day-card-date[b-n1rccefcub] {
font-family: var(--bl-font-display);
font-weight: 400;
color: var(--bl-white);
letter-spacing: 0.02em;
font-size: var(--bl-fs-body);
margin: 0;
}
.day-card-slots[b-n1rccefcub] {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 6px;
}
.slot-chip[b-n1rccefcub] {
position: relative;
display: flex;
align-items: center;
justify-content: center;
padding: 6px 12px;
background: var(--bl-black-2);
border: 1.5px solid var(--bl-border-strong);
border-radius: var(--bl-radius);
cursor: pointer;
transition: border-color var(--bl-transition-fast), background-color var(--bl-transition-fast), color var(--bl-transition-fast);
}
.slot-chip:hover[b-n1rccefcub] {
border-color: var(--bl-text);
}
.slot-chip input[type='radio'][b-n1rccefcub] {
position: absolute;
opacity: 0;
pointer-events: none;
}
.slot-chip input[type='radio']:focus-visible + .slot-chip-time[b-n1rccefcub] {
outline: 2px solid var(--bl-white);
outline-offset: 4px;
border-radius: 4px;
}
.slot-chip-time[b-n1rccefcub] {
font-family: var(--bl-font-body);
font-weight: 700;
color: var(--bl-text);
font-size: var(--bl-fs-small);
letter-spacing: 0.04em;
}
.slot-chip.is-selected[b-n1rccefcub] {
background: var(--bl-white);
border-color: var(--bl-white);
}
.slot-chip.is-selected .slot-chip-time[b-n1rccefcub] {
color: var(--bl-black-1);
}
/* "Arrange directly with the brewery" option — full-width, stacked */
.slot-chip-arrange[b-n1rccefcub] {
justify-content: flex-start;
text-align: left;
padding: var(--bl-space-3);
margin-top: var(--bl-space-2);
}
.slot-chip-arrange-body[b-n1rccefcub] {
display: flex;
flex-direction: column;
gap: 2px;
}
.slot-chip-arrange-label[b-n1rccefcub] {
font-family: var(--bl-font-display);
font-weight: 400;
color: var(--bl-text);
font-size: var(--bl-fs-body);
letter-spacing: 0.02em;
}
.slot-chip-arrange-help[b-n1rccefcub] {
font-weight: 400;
color: var(--bl-text-muted);
font-size: var(--bl-fs-small);
letter-spacing: 0;
line-height: var(--bl-lh-small);
}
.slot-chip-arrange.is-selected .slot-chip-arrange-label[b-n1rccefcub],
.slot-chip-arrange.is-selected .slot-chip-arrange-help[b-n1rccefcub] {
color: var(--bl-black-1);
}
.slot-chip input[type='radio']:focus-visible + .slot-chip-arrange-body[b-n1rccefcub] {
outline: 2px solid var(--bl-white);
outline-offset: 4px;
border-radius: 4px;
}
.form-row[b-n1rccefcub] {
display: flex;
flex-direction: column;
gap: 6px;
}
.form-row label[b-n1rccefcub] {
font-family: var(--bl-font-body);
font-weight: 700;
font-size: var(--bl-fs-small);
display: flex;
align-items: baseline;
gap: 6px;
}
.form-optional[b-n1rccefcub] {
font-weight: 400;
color: var(--bl-text-muted);
text-transform: none;
}
.form-row input[b-n1rccefcub],
.form-row textarea[b-n1rccefcub] {
width: 100%;
padding: 12px 16px;
background: var(--bl-black-3);
border: var(--bl-border-width) solid var(--bl-border-strong);
border-radius: var(--bl-radius);
color: var(--bl-text);
font-family: var(--bl-font-body);
font-size: var(--bl-fs-body);
line-height: var(--bl-lh-body);
}
.form-row input[b-n1rccefcub]::placeholder,
.form-row textarea[b-n1rccefcub]::placeholder {
color: rgba(255, 255, 255, 0.4);
}
.form-row input:focus-visible[b-n1rccefcub],
.form-row textarea:focus-visible[b-n1rccefcub] {
outline: none;
border-color: var(--bl-white);
border-width: 2px;
}
.form-help[b-n1rccefcub] {
font-size: var(--bl-fs-small);
color: var(--bl-text-muted);
margin: 0;
}
.form-grid[b-n1rccefcub] {
display: grid;
gap: var(--bl-space-3);
}
.form-consent[b-n1rccefcub] {
display: flex;
align-items: flex-start;
gap: var(--bl-space-2);
margin-top: var(--bl-space-2);
font-size: var(--bl-fs-small);
color: var(--bl-text);
cursor: pointer;
}
/* Case à cocher : rendu géré globalement (src/styles/global.css). */
.form-consent input[b-n1rccefcub] {
margin-top: 2px;
}
.form-error[b-n1rccefcub] {
background: var(--bl-black-3);
border: 2px solid var(--bl-white);
border-radius: var(--bl-radius);
padding: var(--bl-space-2) var(--bl-space-3);
color: var(--bl-white);
font-weight: 700;
margin: 0;
}
.cart-total[b-n1rccefcub] {
background: var(--bl-black-3);
border: 1.5px solid var(--bl-border-strong);
border-radius: var(--bl-radius);
padding: var(--bl-space-3) var(--bl-space-4);
display: flex;
flex-direction: column;
gap: var(--bl-space-1);
}
/* idem : hidden prioritaire sur display:flex */
.cart-total[hidden][b-n1rccefcub] {
display: none;
}
.cart-total-row[b-n1rccefcub] {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--bl-space-3);
margin: 0;
max-width: none;
}
.cart-total-label[b-n1rccefcub] {
font-family: var(--bl-font-body);
font-weight: 700;
font-size: var(--bl-fs-small);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--bl-text-muted);
}
.cart-total-amount[b-n1rccefcub] {
font-family: var(--bl-font-display);
font-weight: 400;
font-size: var(--bl-fs-h2);
color: var(--bl-white);
letter-spacing: 0.02em;
margin-left: auto;
text-align: right;
}
.cart-bulk[b-n1rccefcub] {
margin: 0;
padding: var(--bl-space-2) var(--bl-space-3);
background: rgba(0, 255, 51, 0.1);
border: 1px solid rgba(0, 255, 51, 0.4);
border-radius: var(--bl-radius);
color: var(--bl-text);
font-size: var(--bl-fs-small);
line-height: var(--bl-lh-small);
}
.cart-bulk a[b-n1rccefcub] {
color: #00FF33;
font-weight: 700;
text-decoration: underline;
text-underline-offset: 3px;
white-space: nowrap;
}
.cart-bulk a:hover[b-n1rccefcub],
.cart-bulk a:focus-visible[b-n1rccefcub] {
color: var(--bl-white);
}
.form-field-error[b-n1rccefcub] {
margin: 0;
color: #ff8c8c;
font-size: var(--bl-fs-small);
font-weight: 600;
}
.form-row.has-error input[b-n1rccefcub],
.form-row.has-error textarea[b-n1rccefcub] {
border-color: #ff8c8c;
}
.form-row.has-error .form-consent input[type="checkbox"][b-n1rccefcub] {
outline: 2px solid #ff8c8c;
outline-offset: 2px;
}
.form-submit[b-n1rccefcub] {
align-self: flex-end;
display: inline-flex;
align-items: center;
gap: var(--bl-space-2);
padding: 14px 28px;
min-height: 44px;
background: transparent;
color: var(--bl-white);
border: var(--bl-border-width-strong) solid var(--bl-white);
border-radius: var(--bl-radius);
font-family: var(--bl-font-body);
font-weight: 700;
font-size: var(--bl-fs-small);
letter-spacing: 0.06em;
text-transform: uppercase;
cursor: pointer;
transition: background-color var(--bl-transition-fast), color var(--bl-transition-fast);
margin-top: var(--bl-space-3);
}
/* Le site d'origine aligne ce bouton à droite en français et en anglais, mais
à gauche en néerlandais. L'écart vient d'une retouche jamais reportée d'une
page à l'autre ; il est reproduit tel quel plutôt que corrigé, un portage
n'ayant pas à trancher une question de mise en page. */
html[lang="nl"] .form-submit[b-n1rccefcub] {
align-self: flex-start;
}
.form-submit:hover[b-n1rccefcub],
.form-submit:focus-visible[b-n1rccefcub] {
background: var(--bl-white);
color: var(--bl-black-1);
}
.form-legal[b-n1rccefcub] {
font-size: var(--bl-fs-small);
color: var(--bl-text-muted);
margin: 0;
max-width: 60ch;
align-self: flex-end;
text-align: right;
}
.honeypot[b-n1rccefcub] {
position: absolute;
left: -10000px;
width: 1px;
height: 1px;
opacity: 0;
}
@media (min-width: 768px) {
.form-grid[b-n1rccefcub] {
grid-template-columns: 1fr 1fr;
}
.pickup-steps[b-n1rccefcub] {
grid-template-columns: repeat(3, 1fr);
gap: var(--bl-space-3);
}
}
@media (min-width: 1024px) {
.reservation-layout[b-n1rccefcub] {
grid-template-columns: 1fr 1.3fr;
column-gap: var(--bl-space-7);
align-items: start;
}
.reservation-form-wrap[b-n1rccefcub] {
grid-column: 1 / -1;
}
}
/* /Pages/Cart/Thanks.cshtml.rz.scp.css */
.merci[b-08bw8cp0g3] {
text-align: center;
max-width: 640px;
margin: 0 auto;
padding: var(--bl-space-7) 0;
}
.merci-overline[b-08bw8cp0g3] {
font-family: var(--bl-font-body);
font-weight: 700;
font-size: var(--bl-fs-small);
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--bl-text-muted);
margin: 0 0 var(--bl-space-3);
}
.merci-title[b-08bw8cp0g3] {
font-size: var(--bl-fs-h1-hero);
margin: 0 0 var(--bl-space-5);
}
.merci-recap[b-08bw8cp0g3] {
background: var(--bl-black-3);
border: 1.5px solid var(--bl-border-strong);
border-radius: var(--bl-radius);
padding: var(--bl-space-4);
margin: 0 auto var(--bl-space-6);
max-width: 520px;
text-align: left;
}
.merci-recap[hidden][b-08bw8cp0g3] { display: none; }
.merci-recap-heading[b-08bw8cp0g3] {
font-family: var(--bl-font-body);
font-weight: 700;
font-size: var(--bl-fs-small);
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--bl-text-muted);
margin: 0 0 var(--bl-space-3);
text-align: center;
}
.merci-recap-list[b-08bw8cp0g3] {
margin: 0 0 var(--bl-space-3);
padding: 0;
display: flex;
flex-direction: column;
gap: var(--bl-space-3);
}
.merci-recap-row[b-08bw8cp0g3] {
display: flex;
flex-direction: column;
gap: 2px;
}
.merci-recap-row[hidden][b-08bw8cp0g3] {
display: none;
}
.merci-recap-row dt[b-08bw8cp0g3] {
font-family: var(--bl-font-body);
font-weight: 700;
font-size: var(--bl-fs-micro);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--bl-text-muted);
}
.merci-recap-row dd[b-08bw8cp0g3] {
margin: 0;
display: flex;
flex-direction: column;
gap: 2px;
color: var(--bl-text);
}
.merci-recap-row dd strong[b-08bw8cp0g3] {
font-family: var(--bl-font-display);
font-weight: 400;
color: var(--bl-white);
font-size: var(--bl-fs-h4);
letter-spacing: 0.02em;
}
.merci-recap-row dd span[b-08bw8cp0g3] {
font-size: var(--bl-fs-small);
color: var(--bl-text-muted);
}
.merci-recap-ring[b-08bw8cp0g3] {
margin: 0;
padding-top: var(--bl-space-3);
border-top: var(--bl-border-width) solid var(--bl-border);
color: var(--bl-text);
text-align: center;
font-style: italic;
}
.merci-actions[b-08bw8cp0g3] {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--bl-space-3);
}
/* /Pages/Contact.cshtml.rz.scp.css */
.lead[b-fbcn8xbql2] {
font-size: var(--bl-fs-lead);
color: var(--bl-text-muted);
margin-top: var(--bl-space-3);
margin-bottom: 0;
max-width: none;
}
/* ---- Formulaire ------------------------------------------------------ */
.contact-form[b-fbcn8xbql2] {
display: flex;
flex-direction: column;
gap: var(--bl-space-4);
}
.form-type[b-fbcn8xbql2] {
display: flex;
flex-direction: column;
gap: var(--bl-space-2);
border: none;
padding: 0;
margin: 0;
}
.form-type legend[b-fbcn8xbql2] {
font-family: var(--bl-font-body);
font-weight: 700;
font-size: var(--bl-fs-small);
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--bl-text);
padding: 0;
margin-bottom: var(--bl-space-2);
}
.form-type-option[b-fbcn8xbql2] {
display: flex;
align-items: center;
gap: var(--bl-space-2);
color: var(--bl-text);
cursor: pointer;
}
/* Bouton radio : rendu géré globalement (wwwroot/styles/global.css). */
.form-row[b-fbcn8xbql2] {
display: flex;
flex-direction: column;
gap: 6px;
}
.form-row label[b-fbcn8xbql2] {
font-family: var(--bl-font-body);
font-weight: 700;
font-size: var(--bl-fs-small);
display: flex;
align-items: baseline;
gap: 6px;
}
.form-optional[b-fbcn8xbql2] {
font-weight: 400;
color: var(--bl-text-muted);
text-transform: none;
}
.form-row input[b-fbcn8xbql2],
.form-row textarea[b-fbcn8xbql2] {
width: 100%;
padding: 12px 16px;
background: var(--bl-black-3);
border: var(--bl-border-width) solid var(--bl-border-strong);
border-radius: var(--bl-radius);
color: var(--bl-text);
font-family: var(--bl-font-body);
font-size: var(--bl-fs-body);
line-height: var(--bl-lh-body);
}
.form-row input:focus-visible[b-fbcn8xbql2],
.form-row textarea:focus-visible[b-fbcn8xbql2] {
outline: none;
border-color: var(--bl-white);
border-width: 2px;
}
.form-row textarea[b-fbcn8xbql2] {
resize: vertical;
min-height: 140px;
}
.form-help[b-fbcn8xbql2] {
font-size: var(--bl-fs-small);
color: var(--bl-text-muted);
margin: 0;
}
.form-grid[b-fbcn8xbql2] {
display: grid;
gap: var(--bl-space-3);
}
@media (min-width: 640px) {
.form-grid[b-fbcn8xbql2] {
grid-template-columns: 1fr 1fr;
}
}
.form-consent[b-fbcn8xbql2] {
display: flex;
align-items: flex-start;
gap: var(--bl-space-2);
font-size: var(--bl-fs-small);
color: var(--bl-text);
cursor: pointer;
}
/* Case à cocher : rendu géré globalement (wwwroot/styles/global.css). */
.form-consent input[type="checkbox"][b-fbcn8xbql2] {
margin-top: 2px;
}
.form-error[b-fbcn8xbql2] {
background: var(--bl-black-3);
border: 2px solid var(--bl-white);
border-radius: var(--bl-radius);
padding: var(--bl-space-2) var(--bl-space-3);
color: var(--bl-white);
font-weight: 700;
margin: 0;
}
.form-field-error[b-fbcn8xbql2] {
margin: 0;
color: #ff8c8c;
font-size: var(--bl-fs-small);
font-weight: 600;
}
.form-row.has-error input[b-fbcn8xbql2],
.form-row.has-error textarea[b-fbcn8xbql2] {
border-color: #ff8c8c;
}
.form-row.has-error .form-consent input[type="checkbox"][b-fbcn8xbql2] {
outline: 2px solid #ff8c8c;
outline-offset: 2px;
}
.form-submit[b-fbcn8xbql2] {
align-self: flex-start;
display: inline-flex;
align-items: center;
gap: var(--bl-space-2);
padding: 14px 28px;
min-height: 44px;
background: transparent;
color: var(--bl-white);
border: var(--bl-border-width-strong) solid var(--bl-white);
border-radius: var(--bl-radius);
font-family: var(--bl-font-body);
font-weight: 700;
font-size: var(--bl-fs-small);
letter-spacing: 0.06em;
text-transform: uppercase;
cursor: pointer;
transition: background-color var(--bl-transition-fast), color var(--bl-transition-fast);
}
.form-submit:hover:not(:disabled)[b-fbcn8xbql2],
.form-submit:focus-visible:not(:disabled)[b-fbcn8xbql2] {
background: var(--bl-white);
color: var(--bl-black-1);
outline: none;
}
.form-submit:disabled[b-fbcn8xbql2] {
opacity: 0.5;
cursor: not-allowed;
}
.form-legal[b-fbcn8xbql2] {
font-size: var(--bl-fs-small);
color: var(--bl-text-muted);
margin: 0;
max-width: 60ch;
}
.honeypot[b-fbcn8xbql2] {
position: absolute;
left: -9999px;
width: 1px;
height: 1px;
opacity: 0;
}
/* ---- Bloc succès ---------------------------------------------------- */
.contact-success[b-fbcn8xbql2] {
padding: var(--bl-space-5) var(--bl-space-3);
background: var(--bl-black-3);
border: 1.5px solid var(--bl-white);
border-radius: var(--bl-radius);
text-align: center;
}
.contact-success-title[b-fbcn8xbql2] {
font-family: var(--bl-font-display);
font-size: var(--bl-fs-h2);
color: var(--bl-white);
margin: 0 0 var(--bl-space-3);
}
.contact-success-message[b-fbcn8xbql2] {
color: var(--bl-text);
margin: 0;
max-width: 50ch;
margin-inline: auto;
}
/* ---- Carte ---------------------------------------------------------- */
.contact-find-intro[b-fbcn8xbql2] {
margin: var(--bl-space-2) 0 var(--bl-space-4);
color: var(--bl-text);
max-width: 60ch;
}
.contact-hours[b-fbcn8xbql2] {
margin-top: var(--bl-space-5);
}
.contact-map-card[b-fbcn8xbql2] {
display: flex;
flex-direction: column;
gap: var(--bl-space-3);
}
.contact-map-iframe-wrap[b-fbcn8xbql2] {
position: relative;
aspect-ratio: 16 / 9;
width: 100%;
border: 1.5px solid var(--bl-border-strong);
border-radius: var(--bl-radius);
overflow: hidden;
background: var(--bl-black-3);
}
.contact-map-iframe[b-fbcn8xbql2] {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
filter: grayscale(1) contrast(1.05);
}
.contact-map-address[b-fbcn8xbql2] {
font-style: normal;
font-family: var(--bl-font-body);
color: var(--bl-text);
line-height: var(--bl-lh-body);
margin: 0;
}
.contact-map-address strong[b-fbcn8xbql2] {
font-family: var(--bl-font-display);
font-weight: 400;
font-size: var(--bl-fs-h4);
color: var(--bl-white);
letter-spacing: 0.02em;
}
.contact-map-link[b-fbcn8xbql2] {
color: var(--bl-text);
text-decoration: underline;
text-underline-offset: 3px;
font-size: var(--bl-fs-small);
align-self: flex-start;
}
.contact-map-link:hover[b-fbcn8xbql2],
.contact-map-link:focus-visible[b-fbcn8xbql2] {
color: var(--bl-white);
}
/* /Pages/Events/Invitation.cshtml.rz.scp.css */
/* ---- En-tête de l'invitation ------------------------------------------ */
/* Même langage que le badge « Click & Collect » du panier. */
.invite-badge[b-q7u1lmi1c9] {
display: inline-flex;
align-items: center;
padding: 4px 12px;
border-radius: 999px;
background: rgba(0, 255, 51, 0.12);
border: var(--bl-border-width) solid rgba(0, 255, 51, 0.4);
color: #00ff33;
font-family: var(--bl-font-body);
font-weight: 700;
font-size: var(--bl-fs-micro);
letter-spacing: 0.1em;
text-transform: uppercase;
margin: 0 0 var(--bl-space-3);
}
/* Le texte vient du back-office : un saut de ligne simple y reste un saut de ligne. */
.invite-intro[b-q7u1lmi1c9] {
font-size: var(--bl-fs-lead);
color: var(--bl-text-muted);
margin: var(--bl-space-3) 0 0;
max-width: 60ch;
white-space: pre-line;
}
.invite-where[b-q7u1lmi1c9] {
margin: var(--bl-space-4) 0 0;
color: var(--bl-text);
font-size: var(--bl-fs-small);
}
.invite-where strong[b-q7u1lmi1c9] {
color: var(--bl-white);
}
.invite-notice[b-q7u1lmi1c9] {
background: var(--bl-black-3);
border: var(--bl-border-width) solid var(--bl-border);
border-radius: var(--bl-radius);
padding: var(--bl-space-4);
max-width: 60ch;
}
.invite-notice h2[b-q7u1lmi1c9] {
font-family: var(--bl-font-body);
font-weight: 700;
font-size: var(--bl-fs-h3);
letter-spacing: 0;
margin: 0 0 var(--bl-space-2);
}
.invite-notice p[b-q7u1lmi1c9] {
margin: 0;
}
.invite-notice a[b-q7u1lmi1c9] {
color: var(--bl-white);
text-decoration: underline;
text-underline-offset: 3px;
}
/* ---- Formulaire -------------------------------------------------------- */
.invite-form[b-q7u1lmi1c9] {
display: flex;
flex-direction: column;
gap: var(--bl-space-5);
}
/* Consentement, envoi et mention : un seul bloc, à écart serré. */
.invite-submit[b-q7u1lmi1c9] {
display: flex;
flex-direction: column;
gap: var(--bl-space-3);
}
.invite-submit .form-legal[b-q7u1lmi1c9] {
margin-top: calc(-1 * var(--bl-space-2));
}
.invite-step[b-q7u1lmi1c9] {
border: none;
padding: 0;
margin: 0;
min-width: 0;
display: flex;
flex-direction: column;
gap: var(--bl-space-3);
}
.invite-step-title[b-q7u1lmi1c9] {
display: flex;
align-items: center;
gap: var(--bl-space-3);
padding: 0;
margin-bottom: var(--bl-space-3);
font-family: var(--bl-font-body);
font-weight: 700;
font-size: var(--bl-fs-h3);
color: var(--bl-white);
}
.invite-step-num[b-q7u1lmi1c9] {
width: 32px;
height: 32px;
border-radius: 50%;
background: var(--bl-white);
color: var(--bl-black-1);
display: inline-flex;
align-items: center;
justify-content: center;
font-family: var(--bl-font-display);
font-weight: 400;
font-size: var(--bl-fs-body);
flex-shrink: 0;
}
.invite-full[b-q7u1lmi1c9] {
margin: 0;
padding: var(--bl-space-3);
background: var(--bl-black-3);
border: var(--bl-border-width) solid var(--bl-border);
border-radius: var(--bl-radius);
color: var(--bl-text);
}
.invite-days[b-q7u1lmi1c9] {
display: flex;
flex-direction: column;
gap: var(--bl-space-4);
}
.invite-day-date[b-q7u1lmi1c9] {
font-family: var(--bl-font-display);
font-weight: 400;
color: var(--bl-white);
letter-spacing: 0.02em;
margin: 0 0 var(--bl-space-2);
}
.invite-slots[b-q7u1lmi1c9] {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--bl-space-2);
}
@media (min-width: 640px) {
.invite-slots[b-q7u1lmi1c9] {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (min-width: 1024px) {
.invite-slots[b-q7u1lmi1c9] {
grid-template-columns: repeat(5, minmax(0, 1fr));
}
}
.slot-chip[b-q7u1lmi1c9] {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
padding: 10px 12px;
background: var(--bl-black-2);
border: 1.5px solid var(--bl-border-strong);
border-radius: var(--bl-radius);
cursor: pointer;
transition: border-color var(--bl-transition-fast), background-color var(--bl-transition-fast);
}
.slot-chip:hover[b-q7u1lmi1c9] {
border-color: var(--bl-text);
}
.slot-chip input[type='radio'][b-q7u1lmi1c9] {
position: absolute;
opacity: 0;
pointer-events: none;
}
.slot-chip input[type='radio']:focus-visible + .slot-chip-time[b-q7u1lmi1c9] {
outline: 2px solid var(--bl-white);
outline-offset: 4px;
border-radius: 4px;
}
.slot-chip-time[b-q7u1lmi1c9] {
font-family: var(--bl-font-body);
font-weight: 700;
color: var(--bl-text);
font-size: var(--bl-fs-body);
letter-spacing: 0.04em;
}
.slot-chip-seats[b-q7u1lmi1c9] {
font-size: var(--bl-fs-micro);
color: var(--bl-text-muted);
}
.slot-chip.is-selected[b-q7u1lmi1c9] {
background: var(--bl-white);
border-color: var(--bl-white);
}
.slot-chip.is-selected .slot-chip-time[b-q7u1lmi1c9],
.slot-chip.is-selected .slot-chip-seats[b-q7u1lmi1c9] {
color: var(--bl-black-1);
}
/* « Je ne sais pas encore » et « Je ne viens pas » répondent à la même
question que les créneaux, et appartiennent au même groupe de boutons
radio — mais ce ne sont pas des heures. Elles tiennent toute la largeur,
sous la grille, en trait discontinu : on les lit comme des replis, pas
comme des créneaux de plus. */
.slot-aside[b-q7u1lmi1c9] {
margin-top: var(--bl-space-3);
align-items: flex-start;
padding: var(--bl-space-3);
border-style: dashed;
}
/* Le désistement est la sortie, pas une option parmi d'autres : il reste en
retrait tant qu'on ne le survole pas, pour ne pas se proposer de lui-même à
qui parcourt la liste des créneaux. */
.slot-declined[b-q7u1lmi1c9] {
border-color: var(--bl-border);
}
.slot-declined .slot-chip-time[b-q7u1lmi1c9] {
color: var(--bl-text-muted);
}
/* Au survol, et seulement tant qu'elle n'est pas cochée : une fois cochée la
pastille passe en fond blanc, et c'est `.slot-chip.is-selected` qui doit
donner le noir. Sans le `:not()`, le survol — où la souris reste après le
clic — gagnerait à égalité de spécificité et laisserait du gris clair sur
du blanc. */
.slot-declined:not(.is-selected):hover .slot-chip-time[b-q7u1lmi1c9] {
color: var(--bl-text);
}
.slot-chip.is-full[b-q7u1lmi1c9] {
cursor: not-allowed;
opacity: 0.45;
border-style: dashed;
}
.slot-chip.is-full:hover[b-q7u1lmi1c9] {
border-color: var(--bl-border-strong);
}
.form-row[b-q7u1lmi1c9] {
display: flex;
flex-direction: column;
gap: 6px;
}
.form-row label[b-q7u1lmi1c9] {
font-family: var(--bl-font-body);
font-weight: 700;
font-size: var(--bl-fs-small);
display: flex;
align-items: baseline;
gap: 6px;
}
.form-optional[b-q7u1lmi1c9] {
font-weight: 400;
color: var(--bl-text-muted);
text-transform: none;
}
.form-row input[b-q7u1lmi1c9],
.form-row select[b-q7u1lmi1c9] {
width: 100%;
padding: 12px 16px;
background: var(--bl-black-3);
border: var(--bl-border-width) solid var(--bl-border-strong);
border-radius: var(--bl-radius);
color: var(--bl-text);
font-family: var(--bl-font-body);
font-size: var(--bl-fs-body);
line-height: var(--bl-lh-body);
}
.form-row-seats select[b-q7u1lmi1c9] {
max-width: 240px;
}
.form-row input:focus-visible[b-q7u1lmi1c9],
.form-row select:focus-visible[b-q7u1lmi1c9] {
outline: none;
border-color: var(--bl-white);
border-width: 2px;
}
.form-help[b-q7u1lmi1c9] {
font-size: var(--bl-fs-small);
color: var(--bl-text-muted);
margin: 0;
}
.form-grid[b-q7u1lmi1c9] {
display: grid;
gap: var(--bl-space-3);
}
@media (min-width: 768px) {
.form-grid[b-q7u1lmi1c9] {
grid-template-columns: 1fr 1fr;
}
}
.form-consent[b-q7u1lmi1c9] {
display: flex;
align-items: flex-start;
gap: var(--bl-space-2);
margin-top: var(--bl-space-2);
font-size: var(--bl-fs-small);
color: var(--bl-text);
cursor: pointer;
}
/* Case à cocher : rendu géré globalement (wwwroot/styles/global.css). */
.form-consent input[b-q7u1lmi1c9] {
margin-top: 2px;
}
.form-field-error[b-q7u1lmi1c9] {
margin: 0;
color: #ff8c8c;
font-size: var(--bl-fs-small);
font-weight: 600;
}
.form-row.has-error input[b-q7u1lmi1c9] {
border-color: #ff8c8c;
}
.form-row.has-error .form-consent input[type="checkbox"][b-q7u1lmi1c9] {
outline: 2px solid #ff8c8c;
outline-offset: 2px;
}
.form-error[b-q7u1lmi1c9] {
background: var(--bl-black-3);
border: 2px solid var(--bl-white);
border-radius: var(--bl-radius);
padding: var(--bl-space-2) var(--bl-space-3);
color: var(--bl-white);
font-weight: 700;
margin: 0;
}
.form-submit[b-q7u1lmi1c9] {
align-self: flex-end;
display: inline-flex;
align-items: center;
gap: var(--bl-space-2);
padding: 14px 28px;
min-height: 44px;
background: transparent;
color: var(--bl-white);
border: var(--bl-border-width-strong) solid var(--bl-white);
border-radius: var(--bl-radius);
font-family: var(--bl-font-body);
font-weight: 700;
font-size: var(--bl-fs-small);
letter-spacing: 0.06em;
text-transform: uppercase;
cursor: pointer;
transition: background-color var(--bl-transition-fast), color var(--bl-transition-fast);
}
.form-submit:hover[b-q7u1lmi1c9],
.form-submit:focus-visible[b-q7u1lmi1c9] {
background: var(--bl-white);
color: var(--bl-black-1);
}
.form-submit:disabled[b-q7u1lmi1c9] {
opacity: 0.6;
cursor: progress;
}
.form-legal[b-q7u1lmi1c9] {
font-size: var(--bl-fs-small);
color: var(--bl-text-muted);
margin: calc(-1 * var(--bl-space-3)) 0 0;
align-self: flex-end;
text-align: right;
max-width: 60ch;
}
.honeypot[b-q7u1lmi1c9] {
position: absolute;
left: -10000px;
width: 1px;
height: 1px;
opacity: 0;
}
/* /Pages/Events/Registration.cshtml.rz.scp.css */
.booking[b-nbflzkg75u] {
display: flex;
flex-direction: column;
gap: var(--bl-space-4);
}
.booking-overline[b-nbflzkg75u] {
margin: 0;
font-family: var(--bl-font-body);
font-weight: 700;
font-size: var(--bl-fs-micro);
letter-spacing: 0.1em;
text-transform: uppercase;
color: #00ff33;
}
.booking-overline.is-cancelled[b-nbflzkg75u] {
color: #ff8c8c;
}
.booking-title[b-nbflzkg75u] {
margin: 0;
}
.booking-lead[b-nbflzkg75u] {
margin: 0;
font-size: var(--bl-fs-lead);
color: var(--bl-text-muted);
}
.booking-recap[b-nbflzkg75u] {
margin: 0;
padding: var(--bl-space-3) var(--bl-space-4);
background: var(--bl-black-3);
border: var(--bl-border-width) solid var(--bl-border);
border-radius: var(--bl-radius);
}
.booking-row[b-nbflzkg75u] {
display: grid;
grid-template-columns: 1fr;
gap: 2px;
padding: var(--bl-space-2) 0;
border-bottom: var(--bl-border-width) solid var(--bl-border);
}
.booking-row:last-child[b-nbflzkg75u] {
border-bottom: none;
}
@media (min-width: 560px) {
.booking-row[b-nbflzkg75u] {
grid-template-columns: 140px 1fr;
gap: var(--bl-space-3);
}
}
.booking-row dt[b-nbflzkg75u] {
font-size: var(--bl-fs-small);
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--bl-text-muted);
}
.booking-row dd[b-nbflzkg75u] {
margin: 0;
color: var(--bl-white);
}
.booking-note[b-nbflzkg75u] {
margin: 0;
color: var(--bl-text);
}
.booking-note a[b-nbflzkg75u] {
color: var(--bl-white);
text-decoration: underline;
text-underline-offset: 3px;
}
.booking-cancel[b-nbflzkg75u] {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--bl-space-3);
padding-top: var(--bl-space-4);
border-top: var(--bl-border-width) solid var(--bl-border);
}
.booking-cancel p[b-nbflzkg75u] {
margin: 0;
color: var(--bl-text-muted);
}
.booking-cancel-btn[b-nbflzkg75u] {
padding: 12px 24px;
min-height: 44px;
border: var(--bl-border-width-strong) solid #ff8c8c;
border-radius: var(--bl-radius);
color: #ff8c8c;
font-weight: 700;
font-size: var(--bl-fs-small);
letter-spacing: 0.06em;
text-transform: uppercase;
transition: background-color var(--bl-transition-fast), color var(--bl-transition-fast);
}
.booking-cancel-btn:hover[b-nbflzkg75u],
.booking-cancel-btn:focus-visible[b-nbflzkg75u] {
background: #ff8c8c;
color: var(--bl-black-1);
}
/* /Pages/Faq.cshtml.rz.scp.css */
.lead[b-1iwinoteoe] {
font-size: var(--bl-fs-lead);
color: var(--bl-text-muted);
margin-top: var(--bl-space-3);
margin-bottom: var(--bl-space-6);
max-width: 65ch;
}
.faq-list[b-1iwinoteoe] {
margin-bottom: var(--bl-space-6);
}
.cta-row[b-1iwinoteoe] {
display: flex;
flex-wrap: wrap;
gap: var(--bl-space-3);
}
/* /Pages/FindUs.cshtml.rz.scp.css */
.lead[b-foh0ugf0zr] {
font-size: var(--bl-fs-lead);
color: var(--bl-text-muted);
margin-top: var(--bl-space-3);
margin-bottom: 0;
max-width: none;
}
.empty[b-foh0ugf0zr] {
color: var(--bl-text-muted);
text-align: center;
padding: var(--bl-space-7) 0;
}
.partners-grid[b-foh0ugf0zr] {
display: grid;
grid-template-columns: 1fr;
gap: var(--bl-space-4);
}
@media (min-width: 768px) {
.partners-grid[b-foh0ugf0zr] {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (min-width: 1024px) {
.partners-grid[b-foh0ugf0zr] {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--bl-space-5);
}
}
/* /Pages/Home.cshtml.rz.scp.css */
.lead[b-db5e3u5enj] {
font-size: var(--bl-fs-lead);
line-height: var(--bl-lh-body);
margin: 0 0 var(--bl-space-5);
max-width: none;
}
.empty[b-db5e3u5enj] {
color: var(--bl-text-muted);
text-align: center;
padding: var(--bl-space-6) 0;
}
.beers-grid[b-db5e3u5enj] {
display: grid;
grid-template-columns: 1fr;
gap: var(--bl-space-4);
}
.news-grid[b-db5e3u5enj] {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--bl-space-3);
}
.section-cta[b-db5e3u5enj] {
display: flex;
justify-content: flex-start;
margin-top: var(--bl-space-5);
}
.partners-logos-grid[b-db5e3u5enj] {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--bl-space-3);
}
.latest-empty[b-db5e3u5enj] {
background: var(--bl-black-2);
border: var(--bl-border-width) solid var(--bl-border);
border-radius: var(--bl-radius);
padding: var(--bl-space-5);
display: flex;
flex-direction: column;
gap: var(--bl-space-3);
max-width: 560px;
}
.latest-empty p[b-db5e3u5enj] {
color: var(--bl-text-muted);
margin: 0;
}
.philosophy[b-db5e3u5enj] {
display: flex;
flex-direction: column;
gap: var(--bl-space-5);
}
.philosophy-grid[b-db5e3u5enj] {
display: grid;
gap: var(--bl-space-4);
}
.philosophy-pillar[b-db5e3u5enj] {
background: var(--bl-black-3);
border: var(--bl-border-width) solid var(--bl-border);
border-radius: var(--bl-radius);
padding: var(--bl-space-4);
}
.philosophy-pillar h3[b-db5e3u5enj] {
margin-bottom: var(--bl-space-3);
}
.philosophy-pillar p[b-db5e3u5enj] {
margin: 0;
max-width: none;
}
.philosophy-cta[b-db5e3u5enj] {
display: flex;
justify-content: flex-start;
}
@media (min-width: 768px) {
.philosophy-grid[b-db5e3u5enj] {
grid-template-columns: repeat(3, 1fr);
}
.beers-grid[b-db5e3u5enj],
.news-grid[b-db5e3u5enj] {
gap: var(--bl-space-4);
}
.beers-grid[b-db5e3u5enj] {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.partners-logos-grid[b-db5e3u5enj] {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--bl-space-4);
}
}
@media (min-width: 1024px) {
.beers-grid[b-db5e3u5enj],
.news-grid[b-db5e3u5enj] {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--bl-space-5);
}
.partners-logos-grid[b-db5e3u5enj] {
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: var(--bl-space-5);
}
}
/* /Pages/News/Detail.cshtml.rz.scp.css */
.news-date[b-yobsv2teoj] {
font-family: var(--bl-font-body);
font-weight: 700;
font-size: var(--bl-fs-small);
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--bl-text-muted);
margin: 0 0 var(--bl-space-3);
}
.news-detail h1[b-yobsv2teoj] {
margin-bottom: var(--bl-space-4);
}
.news-excerpt[b-yobsv2teoj] {
font-size: var(--bl-fs-lead);
color: var(--bl-text);
margin-top: var(--bl-space-3);
max-width: 65ch;
}
.news-cover[b-yobsv2teoj] {
margin: 0 0 var(--bl-space-5);
}
@media (min-width: 768px) {
.news-cover[b-yobsv2teoj] {
float: right;
max-width: 380px;
margin: 0 0 var(--bl-space-3) var(--bl-space-5);
}
}
/* Le corps est rendu depuis le Markdown : ses éléments naissent à l'exécution
et n'ont pas la portée de cette page, d'où les sélecteurs descendants. */
.news-prose[b-yobsv2teoj]::after {
content: '';
display: block;
clear: both;
}
/* Le corps Markdown est mis en forme dans pages.css — voir Detail.cshtml.css
des bières pour la raison. */
/* /Pages/News/Index.cshtml.rz.scp.css */
.lead[b-u9wmhs7sop] {
font-size: var(--bl-fs-lead);
color: var(--bl-text-muted);
margin-top: var(--bl-space-3);
margin-bottom: var(--bl-space-6);
max-width: none;
}
.empty[b-u9wmhs7sop] {
color: var(--bl-text-muted);
text-align: center;
padding: var(--bl-space-7) 0;
}
.news-grid[b-u9wmhs7sop] {
display: grid;
grid-template-columns: 1fr;
gap: var(--bl-space-4);
}
@media (min-width: 768px) {
.news-grid[b-u9wmhs7sop] {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1024px) {
.news-grid[b-u9wmhs7sop] {
grid-template-columns: repeat(3, 1fr);
gap: var(--bl-space-5);
}
}
/* /Pages/NotFound.cshtml.rz.scp.css */
.not-found[b-fi1blpkn2f] {
min-height: 60vh;
display: flex;
align-items: center;
justify-content: center;
padding: var(--bl-space-7) var(--bl-space-3);
}
.not-found-inner[b-fi1blpkn2f] {
text-align: center;
max-width: 640px;
display: flex;
flex-direction: column;
align-items: center;
gap: var(--bl-space-4);
}
.not-found-code[b-fi1blpkn2f] {
font-family: var(--bl-font-display);
font-size: clamp(5rem, 14vw, 9rem);
line-height: 1;
color: var(--bl-white);
letter-spacing: 0.04em;
margin: 0;
opacity: 0.85;
}
.not-found-title[b-fi1blpkn2f] {
font-size: var(--bl-fs-h1-hero);
margin: 0;
}
.not-found-subtitle[b-fi1blpkn2f] {
font-size: var(--bl-fs-lead);
color: var(--bl-text-muted);
max-width: 50ch;
margin: 0 auto;
}
.not-found-actions[b-fi1blpkn2f] {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--bl-space-3);
margin-top: var(--bl-space-3);
}
/* /Pages/Shared/_AgeGate.cshtml.rz.scp.css */
/* Le modal n'est visible que si . Cette classe
* est posée par le script en ligne du layout pour éviter le FOUC : le contenu
* du body est masqué tant qu'elle est présente, seul le modal apparaît.
* Les règles qui ciblent vivent dans global.css — elles portent sur des
* éléments extérieurs à ce composant, hors de portée du style isolé. */
.age-gate[b-s8e06xt9ee] {
display: none;
position: fixed;
inset: 0;
z-index: var(--bl-z-modal);
align-items: center;
justify-content: center;
padding: var(--bl-space-3);
opacity: 1;
transition: opacity 200ms ease-out;
}
.age-gate.closing[b-s8e06xt9ee] {
opacity: 0;
pointer-events: none;
}
html.age-gate-required .age-gate[b-s8e06xt9ee] {
display: flex;
}
.age-gate-backdrop[b-s8e06xt9ee] {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.92);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
animation: ageGateFade-b-s8e06xt9ee 200ms ease-out;
}
.age-gate-modal[b-s8e06xt9ee] {
position: relative;
background: var(--bl-black-2);
border: var(--bl-border-width) solid var(--bl-border);
border-radius: var(--bl-radius);
padding: var(--bl-space-6) var(--bl-space-4);
max-width: 480px;
width: 100%;
text-align: center;
animation: ageGateScale-b-s8e06xt9ee 250ms ease-out;
}
.age-gate-logo[b-s8e06xt9ee] {
width: min(220px, 60%);
height: auto;
margin: 0 auto var(--bl-space-4);
display: block;
}
.age-gate-title[b-s8e06xt9ee] {
font-family: var(--bl-font-display);
font-size: var(--bl-fs-h2);
line-height: var(--bl-lh-title);
color: var(--bl-white);
letter-spacing: 0.02em;
margin-bottom: var(--bl-space-3);
}
.age-gate-intro[b-s8e06xt9ee] {
color: var(--bl-text-muted);
font-size: var(--bl-fs-small);
margin-bottom: var(--bl-space-2);
max-width: none;
}
.age-gate-question[b-s8e06xt9ee] {
font-family: var(--bl-font-body);
font-weight: 700;
font-size: var(--bl-fs-h3);
color: var(--bl-white);
margin: var(--bl-space-2) 0 var(--bl-space-5);
max-width: none;
}
/* Case à cocher transformée en grande zone cliquable : texte plus grand,
toute la barre est un bouton, et l'état coché est mis en évidence. */
.age-gate-check[b-s8e06xt9ee] {
display: flex;
align-items: center;
gap: var(--bl-space-3);
margin: 0 0 var(--bl-space-3);
padding: var(--bl-space-3) var(--bl-space-4);
border: var(--bl-border-width-strong) solid var(--bl-border-strong);
border-radius: var(--bl-radius);
color: var(--bl-white);
font-size: var(--bl-fs-body);
font-weight: 700;
line-height: var(--bl-lh-body);
text-align: left;
cursor: pointer;
min-height: 60px;
transition:
border-color var(--bl-transition-fast),
background-color var(--bl-transition-fast);
}
.age-gate-check:hover[b-s8e06xt9ee] {
border-color: var(--bl-white);
}
.age-gate-check.is-checked[b-s8e06xt9ee] {
border-color: #00ff33;
background: rgba(0, 255, 51, 0.08);
}
/* Case à cocher : rendu géré globalement (wwwroot/styles/global.css). */
.age-gate-error[b-s8e06xt9ee] {
color: #ff6b6b;
font-size: var(--bl-fs-small);
margin: 0 0 var(--bl-space-3);
max-width: none;
}
.age-gate.has-error .age-gate-check[b-s8e06xt9ee] {
color: #ff6b6b;
border-color: #ff6b6b;
}
.age-gate-actions[b-s8e06xt9ee] {
display: flex;
flex-direction: column;
gap: var(--bl-space-2);
margin-top: var(--bl-space-5);
margin-bottom: var(--bl-space-4);
}
.age-gate-btn[b-s8e06xt9ee] {
display: inline-flex;
align-items: center;
justify-content: center;
padding: var(--bl-space-3) var(--bl-space-4);
min-height: 44px;
font-family: var(--bl-font-body);
font-weight: 700;
font-size: var(--bl-fs-small);
letter-spacing: 0.06em;
text-transform: uppercase;
border-radius: var(--bl-radius);
cursor: pointer;
transition:
background-color var(--bl-transition-fast),
color var(--bl-transition-fast),
border-color var(--bl-transition-fast);
}
.age-gate-btn.primary[b-s8e06xt9ee] {
background: transparent;
color: var(--bl-white);
border: var(--bl-border-width-strong) solid var(--bl-white);
}
.age-gate-btn.primary:hover[b-s8e06xt9ee] {
background: var(--bl-white);
color: var(--bl-black-1);
}
.age-gate-btn:focus-visible[b-s8e06xt9ee] {
outline: 2px solid var(--bl-white);
outline-offset: 3px;
}
.age-gate-legal[b-s8e06xt9ee] {
font-size: var(--bl-fs-micro);
line-height: var(--bl-lh-small);
color: var(--bl-text-muted);
max-width: none;
}
@media (min-width: 480px) {
.age-gate-btn[b-s8e06xt9ee] {
min-width: 240px;
}
}
@media (min-width: 768px) {
.age-gate-modal[b-s8e06xt9ee] {
padding: var(--bl-space-7) var(--bl-space-6);
}
}
@keyframes ageGateFade-b-s8e06xt9ee {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes ageGateScale-b-s8e06xt9ee {
from { opacity: 0; transform: scale(0.96); }
to { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
.age-gate-backdrop[b-s8e06xt9ee],
.age-gate-modal[b-s8e06xt9ee] {
animation: none !important;
}
.age-gate[b-s8e06xt9ee] {
transition: none !important;
}
}
/* /Pages/Shared/_BeerPurchasePanel.cshtml.rz.scp.css */
.purchase-panel[b-22s4cf7zy7] {
margin-top: var(--bl-space-2);
display: flex;
flex-direction: column;
gap: var(--bl-space-4);
}
/* Retrait et paiement, dits avant les prix. */
.purchase-cnc[b-22s4cf7zy7] {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: var(--bl-space-1) var(--bl-space-2);
margin: 0;
padding: var(--bl-space-2) var(--bl-space-3);
background: rgba(0, 255, 51, 0.08);
border: var(--bl-border-width) solid rgba(0, 255, 51, 0.35);
border-radius: var(--bl-radius);
font-size: var(--bl-fs-small);
line-height: var(--bl-lh-small);
color: var(--bl-text);
max-width: none;
}
.purchase-cnc-badge[b-22s4cf7zy7] {
color: #00ff33;
font-weight: 700;
font-size: var(--bl-fs-micro);
letter-spacing: 0.08em;
text-transform: uppercase;
}
/* Le prochain retrait sur sa propre ligne : c'est l'information qui décide. */
.purchase-cnc-next[b-22s4cf7zy7] {
flex-basis: 100%;
color: var(--bl-white);
font-weight: 700;
}
.purchase-group[b-22s4cf7zy7] {
display: flex;
flex-direction: column;
gap: var(--bl-space-2);
}
/* Titre du format — précise le contenant/volume (ex. « Canette 44 cl ») */
.purchase-group-title[b-22s4cf7zy7] {
font-family: var(--bl-font-body);
font-weight: 700;
font-size: var(--bl-fs-h4);
color: var(--bl-white);
margin: 0;
}
.purchase-rows[b-22s4cf7zy7] {
display: flex;
flex-direction: column;
gap: var(--bl-space-2);
}
/* Une option passe sur deux lignes quand la place manque. Sur un téléphone de
360 px, « Caisse de 24 », son prix barré, son prix et les boutons ne
tiennent pas côte à côte : sans retour à la ligne, la rangée poussait la
fiche entière hors de l'écran, et le bouton « + » avec. */
.purchase-row[b-22s4cf7zy7] {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--bl-space-3);
padding: var(--bl-space-2);
background: var(--bl-black-3);
border: var(--bl-border-width) solid var(--bl-border);
border-radius: var(--bl-radius);
}
.purchase-row-label[b-22s4cf7zy7] {
font-family: var(--bl-font-body);
color: var(--bl-text);
flex: 1 1 auto;
}
.purchase-row-prices[b-22s4cf7zy7] {
display: inline-flex;
align-items: baseline;
gap: var(--bl-space-2);
margin-right: var(--bl-space-2);
white-space: nowrap;
}
/* Prix barré = référence « à l'unité × quantité » avant remise quantité */
.purchase-row-old[b-22s4cf7zy7] {
font-family: var(--bl-font-body);
font-size: var(--bl-fs-small);
color: var(--bl-text-muted);
text-decoration: line-through;
}
.purchase-row-price[b-22s4cf7zy7] {
font-family: var(--bl-font-display);
font-weight: 400;
color: var(--bl-white);
font-size: var(--bl-fs-body);
letter-spacing: 0.02em;
white-space: nowrap;
}
/* Renvoyés seuls sur la seconde ligne, les boutons restent à droite, sous le prix. */
.purchase-row-qty[b-22s4cf7zy7] {
display: inline-flex;
align-items: center;
gap: var(--bl-space-1);
margin-left: auto;
}
.purchase-row-btn[b-22s4cf7zy7] {
width: 36px;
height: 36px;
border: var(--bl-border-width) solid var(--bl-border-strong);
border-radius: var(--bl-radius);
background: transparent;
color: var(--bl-white);
font-size: 1.25rem;
line-height: 1;
cursor: pointer;
transition: background-color var(--bl-transition-fast), color var(--bl-transition-fast);
}
.purchase-row-btn:hover[b-22s4cf7zy7],
.purchase-row-btn:focus-visible[b-22s4cf7zy7] {
background: var(--bl-white);
color: var(--bl-black-1);
}
.purchase-row-input[b-22s4cf7zy7] {
width: 56px;
height: 36px;
text-align: center;
background: var(--bl-black-1);
border: var(--bl-border-width) solid var(--bl-border-strong);
border-radius: var(--bl-radius);
color: var(--bl-white);
font-family: var(--bl-font-body);
font-size: var(--bl-fs-body);
-moz-appearance: textfield;
}
.purchase-row-input[b-22s4cf7zy7]::-webkit-outer-spin-button,
.purchase-row-input[b-22s4cf7zy7]::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.purchase-row-input:focus-visible[b-22s4cf7zy7] {
outline: 2px solid var(--bl-white);
outline-offset: 1px;
}
.purchase-foot[b-22s4cf7zy7] {
border-top: var(--bl-border-width) solid var(--bl-border);
padding-top: var(--bl-space-3);
display: flex;
flex-direction: column;
gap: var(--bl-space-3);
}
.purchase-total[b-22s4cf7zy7] {
display: flex;
justify-content: space-between;
align-items: baseline;
margin: 0;
font-family: var(--bl-font-body);
color: var(--bl-text-muted);
text-transform: uppercase;
letter-spacing: 0.06em;
font-size: var(--bl-fs-small);
}
.purchase-total strong[b-22s4cf7zy7] {
font-family: var(--bl-font-display);
font-weight: 400;
color: var(--bl-white);
font-size: var(--bl-fs-h2);
letter-spacing: 0.02em;
}
.purchase-bulk[b-22s4cf7zy7] {
margin: 0;
padding: var(--bl-space-2) var(--bl-space-3);
background: rgba(0, 255, 51, 0.1);
border: 1px solid rgba(0, 255, 51, 0.4);
border-radius: var(--bl-radius);
color: var(--bl-text);
font-size: var(--bl-fs-small);
line-height: var(--bl-lh-small);
}
.purchase-bulk[hidden][b-22s4cf7zy7] {
display: none;
}
.purchase-bulk a[b-22s4cf7zy7] {
color: #00ff33;
font-weight: 700;
text-decoration: underline;
text-underline-offset: 3px;
white-space: nowrap;
}
.purchase-bulk a:hover[b-22s4cf7zy7],
.purchase-bulk a:focus-visible[b-22s4cf7zy7] {
color: var(--bl-white);
}
.purchase-error[b-22s4cf7zy7] {
color: var(--bl-white);
font-weight: 700;
font-size: var(--bl-fs-small);
margin: 0;
}
.purchase-error[hidden][b-22s4cf7zy7] {
display: none;
}
.purchase-add[b-22s4cf7zy7] {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--bl-space-2);
width: 100%;
padding: 14px 28px;
min-height: 44px;
background: transparent;
color: var(--bl-white);
border: var(--bl-border-width-strong) solid var(--bl-white);
border-radius: var(--bl-radius);
font-family: var(--bl-font-body);
font-weight: 700;
font-size: var(--bl-fs-small);
letter-spacing: 0.06em;
text-transform: uppercase;
cursor: pointer;
transition: background-color var(--bl-transition-fast), color var(--bl-transition-fast);
}
.purchase-add:hover[b-22s4cf7zy7],
.purchase-add:focus-visible[b-22s4cf7zy7] {
background: var(--bl-white);
color: var(--bl-black-1);
}
.purchase-add span:last-child[b-22s4cf7zy7] {
transition: transform var(--bl-transition-fast);
display: inline-block;
}
.purchase-add:hover span:last-child[b-22s4cf7zy7],
.purchase-add:focus-visible span:last-child[b-22s4cf7zy7] {
transform: translateX(4px);
}
.purchase-live[b-22s4cf7zy7] {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
}
/* /Pages/Shared/_BeerStockNotice.cshtml.rz.scp.css */
.stock-notice[b-jr7p48phzt] {
margin-top: var(--bl-space-2);
padding: var(--bl-space-4);
background: var(--bl-black-3);
border: var(--bl-border-width) solid var(--bl-border-strong);
border-left-width: 3px;
border-radius: var(--bl-radius);
display: flex;
flex-direction: column;
gap: var(--bl-space-2);
}
/* Rupture de stock : accent orange ambré, cohérent avec le badge de la carte */
.stock-notice.is-soldout[b-jr7p48phzt] {
border-left-color: #ff9a3d;
}
.stock-notice-title[b-jr7p48phzt] {
display: flex;
align-items: center;
gap: 8px;
margin: 0;
font-family: var(--bl-font-body);
font-weight: 700;
font-size: var(--bl-fs-small);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--bl-text-muted);
}
.stock-notice.is-soldout .stock-notice-title[b-jr7p48phzt] {
color: #ff9a3d;
}
.stock-notice-dot[b-jr7p48phzt] {
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--bl-text-muted);
flex-shrink: 0;
}
.stock-notice.is-soldout .stock-notice-dot[b-jr7p48phzt] {
background: #ff9a3d;
}
.stock-notice-text[b-jr7p48phzt] {
margin: 0;
color: var(--bl-text);
font-size: var(--bl-fs-small);
line-height: var(--bl-lh-body);
max-width: none;
}
/* /Pages/Shared/_CartWidget.cshtml.rz.scp.css */
/* Les éléments créés par le script (lignes du panier, état vide) ne portent
* pas la portée de ce fichier : leurs styles sont dans components.css, section
* « panier ». C'est la même séparation que les `:global()` d'origine. */
.cart-trigger[b-x8wfo5xbma] {
position: fixed;
bottom: var(--bl-space-3);
right: var(--bl-space-3);
z-index: var(--bl-z-drawer);
width: 56px;
height: 56px;
border-radius: 50%;
background: var(--bl-white);
color: var(--bl-black-1);
border: var(--bl-border-width-strong) solid var(--bl-white);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
transition: transform var(--bl-transition-fast);
}
.cart-trigger:hover[b-x8wfo5xbma] {
transform: translateY(-2px);
}
.cart-trigger.is-bumped[b-x8wfo5xbma] {
animation: cart-bump-b-x8wfo5xbma 650ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes cart-bump-b-x8wfo5xbma {
0% { transform: scale(1); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); }
35% { transform: scale(1.22); box-shadow: 0 12px 36px rgba(255, 255, 255, 0.45); }
65% { transform: scale(0.96); }
100% { transform: scale(1); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); }
}
/* Bulles de carbonatation qui remontent du panier à l'ajout. Le bloc recouvre
le bouton ; les bulles s'élèvent au-dessus, l'effet reste local. Teintées du
vert de la marque, pour l'identité et pour contraster avec le bouton blanc. */
.cart-fizz[b-x8wfo5xbma] {
position: fixed;
right: var(--bl-space-3);
bottom: var(--bl-space-3);
width: 56px;
height: 56px;
z-index: calc(var(--bl-z-drawer) + 1);
pointer-events: none;
}
.cart-fizz[hidden][b-x8wfo5xbma] {
display: none;
}
.cart-fizz-bubble[b-x8wfo5xbma] {
position: absolute;
bottom: 40px; /* près de l'ouverture haute du bouton de 56 px */
left: 50%;
width: var(--size, 7px);
height: var(--size, 7px);
margin-left: calc(var(--size, 7px) / -2);
border-radius: 50%;
background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.95), rgba(0, 255, 51, 0.6) 72%);
box-shadow: 0 0 9px rgba(0, 255, 51, 0.55);
opacity: 0;
will-change: transform, opacity;
}
.cart-fizz.is-playing .cart-fizz-bubble[b-x8wfo5xbma] {
animation: cart-fizz-rise-b-x8wfo5xbma var(--dur, 900ms) ease-out var(--delay, 0ms) forwards;
}
@keyframes cart-fizz-rise-b-x8wfo5xbma {
0% { opacity: 0; transform: translate(0, 10px) scale(0.4); }
18% { opacity: 1; }
70% { opacity: 0.9; }
100% { opacity: 0; transform: translate(var(--x, 0px), -100px) scale(1); }
}
/* Variété bulle par bulle : dérive horizontale (jusqu'à ±48 px), taille, délai, durée */
.cart-fizz-bubble:nth-child(1)[b-x8wfo5xbma] { --x: -32px; --size: 10px; --delay: 0ms; --dur: 850ms; }
.cart-fizz-bubble:nth-child(2)[b-x8wfo5xbma] { --x: 24px; --size: 13px; --delay: 80ms; --dur: 1000ms; }
.cart-fizz-bubble:nth-child(3)[b-x8wfo5xbma] { --x: -10px; --size: 8px; --delay: 150ms; --dur: 780ms; }
.cart-fizz-bubble:nth-child(4)[b-x8wfo5xbma] { --x: 44px; --size: 11px; --delay: 60ms; --dur: 960ms; }
.cart-fizz-bubble:nth-child(5)[b-x8wfo5xbma] { --x: -48px; --size: 8px; --delay: 210ms; --dur: 880ms; }
.cart-fizz-bubble:nth-child(6)[b-x8wfo5xbma] { --x: 12px; --size: 15px; --delay: 120ms; --dur: 1040ms; }
.cart-fizz-bubble:nth-child(7)[b-x8wfo5xbma] { --x: -24px; --size: 10px; --delay: 270ms; --dur: 820ms; }
.cart-fizz-bubble:nth-child(8)[b-x8wfo5xbma] { --x: 34px; --size: 8px; --delay: 320ms; --dur: 900ms; }
.cart-fizz-bubble:nth-child(9)[b-x8wfo5xbma] { --x: 0px; --size: 12px; --delay: 30ms; --dur: 980ms; }
.cart-trigger:focus-visible[b-x8wfo5xbma] {
outline: 2px solid var(--bl-white);
outline-offset: 4px;
}
.cart-trigger svg[b-x8wfo5xbma] {
width: 24px;
height: 24px;
}
.cart-trigger-badge[b-x8wfo5xbma] {
position: absolute;
top: -4px;
right: -4px;
min-width: 22px;
height: 22px;
padding: 0 6px;
background: #00ff33;
color: var(--bl-black-1);
border: var(--bl-border-width-strong) solid var(--bl-white);
border-radius: 999px;
font-family: var(--bl-font-body);
font-weight: 700;
font-size: 0.75rem;
line-height: 22px;
text-align: center;
}
/* La pastille clignote deux fois pour attirer l'œil après un ajout */
.cart-trigger-badge.is-flashing[b-x8wfo5xbma] {
animation: cart-badge-flash-b-x8wfo5xbma 900ms ease-in-out both;
}
/* Pastille déjà verte au repos : le flash devient un double pulse
(échelle + halo) sans changement de couleur. */
@keyframes cart-badge-flash-b-x8wfo5xbma {
0%, 40%, 80%, 100% {
box-shadow: none;
transform: scale(1);
}
20%, 60% {
box-shadow: 0 0 14px rgba(0, 255, 51, 0.9);
transform: scale(1.25);
}
}
.cart-drawer[b-x8wfo5xbma] {
position: fixed;
inset: 0;
z-index: var(--bl-z-drawer);
pointer-events: none;
}
.cart-drawer.open[b-x8wfo5xbma] {
pointer-events: auto;
}
.cart-drawer-backdrop[b-x8wfo5xbma] {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.75);
opacity: 0;
transition: opacity var(--bl-transition-base);
}
.cart-drawer.open .cart-drawer-backdrop[b-x8wfo5xbma] {
opacity: 1;
}
.cart-drawer-panel[b-x8wfo5xbma] {
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: min(90vw, 420px);
background: var(--bl-black-2);
border-left: var(--bl-border-width) solid var(--bl-border);
transform: translateX(100%);
transition: transform var(--bl-transition-base);
display: flex;
flex-direction: column;
overflow: hidden;
}
.cart-drawer.open .cart-drawer-panel[b-x8wfo5xbma] {
transform: translateX(0);
}
.cart-drawer-panel:focus-visible[b-x8wfo5xbma] {
outline: none;
}
.cart-drawer-header[b-x8wfo5xbma] {
padding: var(--bl-space-4) var(--bl-space-4) var(--bl-space-3);
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: var(--bl-border-width) solid var(--bl-border);
}
.cart-drawer-header h2[b-x8wfo5xbma] {
font-size: var(--bl-fs-h3);
margin: 0;
}
.cart-drawer-close[b-x8wfo5xbma] {
width: 40px;
height: 40px;
border-radius: var(--bl-radius);
color: var(--bl-text);
transition: background-color var(--bl-transition-fast), color var(--bl-transition-fast);
}
.cart-drawer-close:hover[b-x8wfo5xbma] {
background: var(--bl-black-3);
color: var(--bl-white);
}
.cart-drawer-close svg[b-x8wfo5xbma] {
width: 22px;
height: 22px;
fill: none;
}
.cart-drawer-body[b-x8wfo5xbma] {
flex: 1;
overflow-y: auto;
padding: var(--bl-space-3) var(--bl-space-4);
}
.cart-drawer-footer[b-x8wfo5xbma] {
padding: var(--bl-space-3) var(--bl-space-4) var(--bl-space-4);
border-top: var(--bl-border-width) solid var(--bl-border);
background: var(--bl-black-2);
display: flex;
flex-direction: column;
gap: var(--bl-space-3);
}
.cart-drawer-total[b-x8wfo5xbma] {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--bl-space-3);
margin: 0;
padding-bottom: var(--bl-space-2);
border-bottom: var(--bl-border-width) solid var(--bl-border);
}
.cart-drawer-total-label[b-x8wfo5xbma] {
font-family: var(--bl-font-body);
font-weight: 700;
color: var(--bl-text-muted);
text-transform: uppercase;
letter-spacing: 0.08em;
font-size: var(--bl-fs-small);
}
.cart-drawer-total-amount[b-x8wfo5xbma] {
font-family: var(--bl-font-display);
font-weight: 400;
color: var(--bl-white);
font-size: var(--bl-fs-h3);
letter-spacing: 0.02em;
}
.cart-drawer-bulk[b-x8wfo5xbma] {
margin: 0;
padding: var(--bl-space-2) var(--bl-space-3);
background: rgba(0, 255, 51, 0.1);
border: 1px solid rgba(0, 255, 51, 0.4);
border-radius: var(--bl-radius);
color: var(--bl-text);
font-size: var(--bl-fs-small);
line-height: var(--bl-lh-small);
}
.cart-drawer-bulk a[b-x8wfo5xbma] {
color: #00FF33;
font-weight: 700;
text-decoration: underline;
text-underline-offset: 3px;
white-space: nowrap;
}
.cart-drawer-bulk a:hover[b-x8wfo5xbma],
.cart-drawer-bulk a:focus-visible[b-x8wfo5xbma] {
color: var(--bl-white);
}
.cart-drawer-count[b-x8wfo5xbma] {
display: flex;
align-items: baseline;
gap: var(--bl-space-2);
margin: 0;
font-family: var(--bl-font-body);
color: var(--bl-text-muted);
text-transform: uppercase;
letter-spacing: 0.06em;
font-size: var(--bl-fs-small);
}
.cart-drawer-count strong[b-x8wfo5xbma] {
font-family: var(--bl-font-display);
font-weight: 400;
color: var(--bl-white);
font-size: var(--bl-fs-h3);
}
.cart-drawer-cta[b-x8wfo5xbma] {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--bl-space-2);
padding: 14px 22px;
background: transparent;
color: var(--bl-white);
text-decoration: none;
border: var(--bl-border-width-strong) solid var(--bl-white);
border-radius: var(--bl-radius);
font-family: var(--bl-font-body);
font-weight: 700;
font-size: var(--bl-fs-small);
letter-spacing: 0.06em;
text-transform: uppercase;
transition: background-color var(--bl-transition-fast), color var(--bl-transition-fast);
}
.cart-drawer-cta:hover[b-x8wfo5xbma],
.cart-drawer-cta:focus-visible[b-x8wfo5xbma] {
background: var(--bl-white);
color: var(--bl-black-1);
}
.cart-drawer-clear[b-x8wfo5xbma] {
background: transparent;
border: none;
color: var(--bl-text-muted);
font-family: var(--bl-font-body);
font-size: var(--bl-fs-small);
letter-spacing: 0.06em;
text-transform: uppercase;
cursor: pointer;
align-self: center;
transition: color var(--bl-transition-fast);
}
.cart-drawer-clear:hover[b-x8wfo5xbma] {
color: var(--bl-white);
text-decoration: underline;
}
@media (prefers-reduced-motion: reduce) {
.cart-drawer-backdrop[b-x8wfo5xbma],
.cart-drawer-panel[b-x8wfo5xbma] {
transition: none !important;
}
.cart-trigger.is-bumped[b-x8wfo5xbma],
.cart-fizz.is-playing .cart-fizz-bubble[b-x8wfo5xbma],
.cart-trigger-badge.is-flashing[b-x8wfo5xbma] {
animation: none !important;
}
}
/* /Pages/Shared/_CatalogCard.cshtml.rz.scp.css */
.beer-card[b-v6zukf3zyh] {
background: var(--bl-black-3);
border: var(--bl-border-width) solid var(--bl-border);
border-radius: var(--bl-radius);
overflow: hidden;
transition:
transform var(--bl-transition-fast),
border-color var(--bl-transition-fast);
}
.beer-card:hover[b-v6zukf3zyh] {
transform: translateY(-2px);
border-color: var(--bl-border-strong);
}
.beer-card-link[b-v6zukf3zyh] {
display: flex;
flex-direction: column;
height: 100%;
color: var(--bl-text);
text-decoration: none;
}
.beer-card-link:focus-visible[b-v6zukf3zyh] {
outline: 2px solid var(--bl-white);
outline-offset: 2px;
}
.beer-card-image[b-v6zukf3zyh] {
aspect-ratio: 4 / 5;
background: var(--bl-black-1);
overflow: hidden;
}
.beer-card-body[b-v6zukf3zyh] {
padding: var(--bl-space-4);
display: flex;
flex-direction: column;
gap: var(--bl-space-2);
flex: 1;
}
/* Bandeau shop pleine largeur (vert = disponible, atténué = bientôt) */
.beer-card-badge[b-v6zukf3zyh] {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 3px;
padding: 6px 12px;
border-radius: var(--bl-radius);
background: rgba(0, 255, 51, 0.12);
border: var(--bl-border-width) solid rgba(0, 255, 51, 0.4);
color: #00ff33;
font-family: var(--bl-font-body);
font-weight: 700;
font-size: var(--bl-fs-micro);
line-height: 1.25;
letter-spacing: 0.06em;
text-transform: uppercase;
}
/* Ligne principale : pastille + libellé du statut */
.beer-card-badge-line[b-v6zukf3zyh] {
display: flex;
align-items: center;
gap: 8px;
}
/* Sous-ligne « déjà dans le fermenteur » : plus fine, alignée sous le texte */
.beer-card-badge-sub[b-v6zukf3zyh] {
padding-left: 15px;
font-weight: 500;
letter-spacing: 0.02em;
text-transform: none;
opacity: 0.8;
}
.beer-card-badge-dot[b-v6zukf3zyh] {
width: 7px;
height: 7px;
border-radius: 50%;
background: #00ff33;
flex-shrink: 0;
}
.beer-card-badge.is-soon[b-v6zukf3zyh] {
background: var(--bl-black-2);
border-color: var(--bl-border-strong);
color: var(--bl-text-muted);
}
.beer-card-badge.is-soon .beer-card-badge-dot[b-v6zukf3zyh] {
background: var(--bl-text-muted);
}
/* Rupture de stock : orange ambré (produit réel, mais indisponible) */
.beer-card-badge.is-soldout[b-v6zukf3zyh] {
background: rgba(255, 138, 0, 0.12);
border-color: rgba(255, 138, 0, 0.45);
color: #ff9a3d;
}
.beer-card-badge.is-soldout .beer-card-badge-dot[b-v6zukf3zyh] {
background: #ff9a3d;
}
.beer-card-type[b-v6zukf3zyh] {
font-family: var(--bl-font-body);
font-weight: 700;
font-size: var(--bl-fs-small);
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--bl-text-muted);
margin: 0;
}
.beer-card-name[b-v6zukf3zyh] {
font-family: var(--bl-font-display);
font-weight: 400;
font-size: var(--bl-fs-h3);
line-height: var(--bl-lh-title);
color: var(--bl-white);
margin: 0;
letter-spacing: 0.02em;
}
.beer-card-tagline[b-v6zukf3zyh] {
font-size: var(--bl-fs-small);
line-height: var(--bl-lh-body);
color: var(--bl-text);
margin: 0;
}
.beer-card-foot[b-v6zukf3zyh] {
margin-top: auto;
padding-top: var(--bl-space-3);
display: flex;
flex-direction: column;
gap: var(--bl-space-3);
}
.beer-card-price[b-v6zukf3zyh] {
align-self: flex-start;
display: flex;
flex-direction: column;
gap: 1px;
margin: 0;
}
.beer-card-price-from[b-v6zukf3zyh] {
font-family: var(--bl-font-body);
font-weight: 700;
font-size: var(--bl-fs-micro);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--bl-text-muted);
}
.beer-card-price-amount[b-v6zukf3zyh] {
font-family: var(--bl-font-display);
font-weight: 400;
font-size: var(--bl-fs-h3);
line-height: 1;
color: var(--bl-white);
letter-spacing: 0.02em;
}
.beer-card-cta[b-v6zukf3zyh] {
align-self: flex-end;
display: inline-flex;
align-items: center;
gap: var(--bl-space-2);
padding: var(--bl-space-2) var(--bl-space-3);
font-family: var(--bl-font-body);
font-weight: 700;
font-size: var(--bl-fs-small);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--bl-white);
border: var(--bl-border-width) solid var(--bl-border-strong);
border-radius: var(--bl-radius);
transition:
background-color var(--bl-transition-fast),
border-color var(--bl-transition-fast),
color var(--bl-transition-fast);
}
.beer-card-cta-arrow[b-v6zukf3zyh] {
transition: transform var(--bl-transition-fast);
}
.beer-card:hover .beer-card-cta[b-v6zukf3zyh],
.beer-card:focus-within .beer-card-cta[b-v6zukf3zyh] {
background: var(--bl-white);
border-color: var(--bl-white);
color: var(--bl-black-1);
}
.beer-card:hover .beer-card-cta-arrow[b-v6zukf3zyh],
.beer-card:focus-within .beer-card-cta-arrow[b-v6zukf3zyh] {
transform: translateX(4px);
}
/* /Pages/Shared/_ClickCollect.cshtml.rz.scp.css */
.cnc[b-rxsnxp9g9h] {
display: flex;
flex-direction: column;
gap: var(--bl-space-5);
}
.cnc-head[b-rxsnxp9g9h] {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--bl-space-2);
}
/* Même langage que le badge « Click & Collect » du panier. */
.cnc-badge[b-rxsnxp9g9h] {
display: inline-flex;
align-items: center;
padding: 4px 12px;
border-radius: 999px;
background: rgba(0, 255, 51, 0.12);
border: var(--bl-border-width) solid rgba(0, 255, 51, 0.4);
color: #00ff33;
font-family: var(--bl-font-body);
font-weight: 700;
font-size: var(--bl-fs-micro);
letter-spacing: 0.1em;
text-transform: uppercase;
margin: 0;
}
.cnc-title[b-rxsnxp9g9h] {
font-size: var(--bl-fs-h2);
margin: 0;
}
.cnc-intro[b-rxsnxp9g9h] {
color: var(--bl-text-muted);
margin: 0;
}
.cnc-steps[b-rxsnxp9g9h] {
list-style: none;
padding: 0;
margin: 0;
display: grid;
gap: var(--bl-space-3);
}
.cnc-step[b-rxsnxp9g9h] {
display: flex;
align-items: center;
gap: var(--bl-space-3);
padding: var(--bl-space-3);
background: var(--bl-black-2);
border: var(--bl-border-width) solid var(--bl-border);
border-radius: var(--bl-radius);
color: var(--bl-text);
}
.cnc-step-num[b-rxsnxp9g9h] {
width: 36px;
height: 36px;
border-radius: 50%;
background: var(--bl-white);
color: var(--bl-black-1);
display: inline-flex;
align-items: center;
justify-content: center;
font-family: var(--bl-font-display);
font-size: var(--bl-fs-body);
flex-shrink: 0;
}
/* Le prochain retrait, en pastille : c'est la ligne qui transforme « on peut
commander » en « on peut commander pour vendredi ». */
.cnc-next[b-rxsnxp9g9h] {
display: inline-flex;
align-items: center;
align-self: flex-start;
gap: var(--bl-space-2);
margin: 0;
padding: var(--bl-space-2) var(--bl-space-3);
/* Un arrondi modéré plutôt qu'une gélule : sur téléphone la ligne tient
sur deux, et des demi-cercles de cette hauteur se lisaient mal. */
border-radius: 12px;
background: rgba(0, 255, 51, 0.1);
border: var(--bl-border-width) solid rgba(0, 255, 51, 0.4);
color: var(--bl-white);
font-weight: 700;
font-size: var(--bl-fs-small);
max-width: none;
}
.cnc-next[b-rxsnxp9g9h]::before {
content: '';
width: 8px;
height: 8px;
border-radius: 50%;
background: #00ff33;
flex-shrink: 0;
}
@media (min-width: 768px) {
.cnc-steps[b-rxsnxp9g9h] {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.cnc-step[b-rxsnxp9g9h] {
align-items: flex-start;
flex-direction: column;
}
}
/* /Pages/Shared/_Footer.cshtml.rz.scp.css */
.footer[b-ecj3hh8c9d] {
background: var(--bl-black-2);
border-top: var(--bl-border-width) solid var(--bl-border);
padding: var(--bl-space-6) var(--bl-space-3) var(--bl-space-4);
margin-top: var(--bl-space-7);
}
.footer-inner[b-ecj3hh8c9d] {
max-width: var(--bl-max-content);
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
gap: var(--bl-space-4);
text-align: center;
}
.footer-nav-list[b-ecj3hh8c9d] {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--bl-space-2) var(--bl-space-4);
}
.footer-link[b-ecj3hh8c9d] {
font-family: var(--bl-font-body);
font-weight: 700;
font-size: var(--bl-fs-small);
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--bl-text);
text-decoration: none;
transition: color var(--bl-transition-fast);
}
.footer-link:hover[b-ecj3hh8c9d] {
color: var(--bl-white);
}
.footer-contact[b-ecj3hh8c9d] {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: var(--bl-space-3);
}
.footer-icon[b-ecj3hh8c9d] {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
color: var(--bl-text);
border-radius: var(--bl-radius);
transition: color var(--bl-transition-fast), background-color var(--bl-transition-fast);
}
.footer-icon:hover[b-ecj3hh8c9d] {
color: var(--bl-white);
background: var(--bl-black-3);
}
.footer-icon svg[b-ecj3hh8c9d] {
width: 22px;
height: 22px;
fill: currentColor;
}
.footer-email[b-ecj3hh8c9d] {
display: inline-flex;
align-items: center;
gap: var(--bl-space-2);
color: var(--bl-text);
text-decoration: none;
font-size: var(--bl-fs-small);
padding: var(--bl-space-2) var(--bl-space-3);
border-radius: var(--bl-radius);
transition: color var(--bl-transition-fast), background-color var(--bl-transition-fast);
}
.footer-email:hover[b-ecj3hh8c9d] {
color: var(--bl-white);
background: var(--bl-black-3);
}
.footer-email svg[b-ecj3hh8c9d] {
width: 18px;
height: 18px;
fill: currentColor;
flex-shrink: 0;
}
.footer-slogan[b-ecj3hh8c9d] {
font-family: var(--bl-font-display);
font-size: var(--bl-fs-h3);
letter-spacing: 0.04em;
color: var(--bl-white);
margin: var(--bl-space-3) 0;
}
.footer-moderation[b-ecj3hh8c9d] {
font-size: var(--bl-fs-small);
line-height: var(--bl-lh-small);
color: var(--bl-text-muted);
max-width: 60ch;
margin: 0 auto;
}
.footer-legal[b-ecj3hh8c9d] {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: var(--bl-space-2);
font-size: var(--bl-fs-small);
}
.footer-legal span[b-ecj3hh8c9d] {
color: var(--bl-text-muted);
}
.footer-link-small[b-ecj3hh8c9d] {
color: var(--bl-text-muted);
text-decoration: none;
transition: color var(--bl-transition-fast);
}
.footer-link-small:hover[b-ecj3hh8c9d] {
color: var(--bl-white);
}
.footer-tracking[b-ecj3hh8c9d] {
font-size: var(--bl-fs-micro);
line-height: var(--bl-lh-small);
color: var(--bl-text-muted);
max-width: 60ch;
margin: var(--bl-space-2) auto 0;
}
.footer-copy[b-ecj3hh8c9d] {
font-size: var(--bl-fs-micro);
letter-spacing: 0.01em;
color: var(--bl-text-muted);
margin-top: var(--bl-space-2);
}
@media (min-width: 768px) {
.footer[b-ecj3hh8c9d] {
padding: var(--bl-space-7) var(--bl-space-5) var(--bl-space-5);
}
}
/* /Pages/Shared/_Header.cshtml.rz.scp.css */
.header[b-m97yk99lte] {
position: sticky;
top: 0;
z-index: var(--bl-z-header);
background: var(--bl-black-2);
border-bottom: var(--bl-border-width) solid var(--bl-border);
}
.header-inner[b-m97yk99lte] {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--bl-space-3);
max-width: var(--bl-max-content);
margin: 0 auto;
padding: var(--bl-space-3) var(--bl-space-3);
}
.logo-link[b-m97yk99lte] {
display: inline-flex;
align-items: center;
flex-shrink: 0;
}
.logo-link:focus-visible[b-m97yk99lte] {
outline: 2px solid var(--bl-white);
outline-offset: 4px;
border-radius: var(--bl-radius);
}
.logo-img[b-m97yk99lte] {
height: 36px;
width: auto;
}
/* === Bouton burger (visible < 1200 px) ============================ */
.burger[b-m97yk99lte] {
display: inline-flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 5px;
width: 44px;
height: 44px;
border-radius: var(--bl-radius);
transition: background-color var(--bl-transition-fast);
}
.burger:hover[b-m97yk99lte] {
background: var(--bl-black-3);
}
.burger-bar[b-m97yk99lte] {
display: block;
width: 24px;
height: 2px;
background: var(--bl-white);
transition: transform var(--bl-transition-fast), opacity var(--bl-transition-fast);
}
.burger.open .burger-bar:nth-child(1)[b-m97yk99lte] {
transform: translateY(7px) rotate(45deg);
}
.burger.open .burger-bar:nth-child(2)[b-m97yk99lte] {
opacity: 0;
}
.burger.open .burger-bar:nth-child(3)[b-m97yk99lte] {
transform: translateY(-7px) rotate(-45deg);
}
/* === Nav mobile (tiroir plein écran depuis la droite) ============= */
.primary-nav[b-m97yk99lte] {
position: fixed;
inset: 0 0 0 auto;
width: min(85vw, 360px);
background: var(--bl-black-2);
border-left: var(--bl-border-width) solid var(--bl-border);
padding: var(--bl-space-7) var(--bl-space-4) var(--bl-space-4);
transform: translateX(100%);
transition: transform var(--bl-transition-base);
display: flex;
flex-direction: column;
gap: var(--bl-space-5);
overflow-y: auto;
z-index: var(--bl-z-drawer);
}
.primary-nav.open[b-m97yk99lte] {
transform: translateX(0);
box-shadow: -16px 0 32px rgba(0, 0, 0, 0.5);
}
.nav-list[b-m97yk99lte] {
display: flex;
flex-direction: column;
gap: var(--bl-space-2);
}
.nav-link[b-m97yk99lte] {
display: block;
padding: var(--bl-space-3) var(--bl-space-2);
font-family: var(--bl-font-body);
font-weight: 700;
font-size: var(--bl-fs-h4);
color: var(--bl-text);
text-decoration: none;
border-radius: var(--bl-radius);
transition: color var(--bl-transition-fast), background-color var(--bl-transition-fast);
}
.nav-link:hover[b-m97yk99lte] {
color: var(--bl-white);
}
/* Entrée « Panier » : label + pastille compteur alignés */
.nav-cart[b-m97yk99lte] {
display: inline-flex;
align-items: center;
gap: var(--bl-space-2);
}
.nav-cart-badge[b-m97yk99lte] {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 20px;
height: 20px;
padding: 0 6px;
border-radius: 999px;
background: #00ff33;
color: var(--bl-black-1);
font-family: var(--bl-font-body);
font-weight: 700;
font-size: 0.72rem;
line-height: 1;
letter-spacing: 0;
}
/* hidden doit l'emporter sur display:inline-flex (panier vide → pas de pastille) */
.nav-cart-badge[hidden][b-m97yk99lte] {
display: none;
}
.nav-link.active[b-m97yk99lte] {
color: var(--bl-white);
text-decoration: underline;
text-underline-offset: 6px;
text-decoration-thickness: 2px;
}
.lang-wrapper[b-m97yk99lte] {
margin-top: auto;
padding-top: var(--bl-space-4);
border-top: var(--bl-border-width) solid var(--bl-border);
}
/* === Desktop (≥ 1200 px) ========================================= */
@media (min-width: 1200px) {
.header-inner[b-m97yk99lte] {
padding: var(--bl-space-3) var(--bl-space-5);
}
.logo-img[b-m97yk99lte] {
height: 44px;
}
.burger[b-m97yk99lte] {
display: none;
}
.primary-nav[b-m97yk99lte] {
position: static;
width: auto;
transform: none;
padding: 0;
background: transparent;
border: none;
box-shadow: none;
flex-direction: row;
align-items: center;
gap: var(--bl-space-3);
overflow: visible;
}
.nav-list[b-m97yk99lte] {
flex-direction: row;
gap: var(--bl-space-1);
}
.nav-link[b-m97yk99lte] {
padding: var(--bl-space-2) var(--bl-space-2);
font-size: var(--bl-fs-small);
letter-spacing: 0.04em;
text-transform: uppercase;
white-space: nowrap;
}
.nav-cart[b-m97yk99lte] {
/* Centrage symétrique entre les deux séparateurs :
16px à gauche (padding-left) = 16px à droite (le gap flex vers les
langues), d'où padding-right: 0 pour ne pas ajouter d'espace en trop. */
padding-left: var(--bl-space-3);
padding-right: 0;
border-left: var(--bl-border-width) solid var(--bl-border);
}
.lang-wrapper[b-m97yk99lte] {
margin: 0;
padding: 0 0 0 var(--bl-space-3);
border-top: none;
border-left: var(--bl-border-width) solid var(--bl-border);
}
}
/* /Pages/Shared/_Hero.cshtml.rz.scp.css */
.hero[b-ft3zx7pulc] {
position: relative;
min-height: 70vh;
display: flex;
align-items: center;
justify-content: center;
padding: var(--bl-space-6) var(--bl-space-3);
overflow: hidden;
background: var(--bl-black-1);
}
.hero-overlay[b-ft3zx7pulc] {
position: absolute;
inset: 0;
background: radial-gradient(
ellipse at center,
rgba(0, 0, 0, 0.2) 0%,
rgba(0, 0, 0, 0.75) 100%
);
z-index: 1;
}
.hero-content[b-ft3zx7pulc] {
position: relative;
z-index: 2;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
gap: var(--bl-space-3);
max-width: 720px;
}
.hero-logo[b-ft3zx7pulc] {
width: 100%;
max-width: 560px;
height: auto;
}
.hero-slogan[b-ft3zx7pulc] {
font-family: var(--bl-font-display);
font-size: var(--bl-fs-lead);
line-height: var(--bl-lh-title);
color: var(--bl-white);
letter-spacing: 0.04em;
margin: 0;
max-width: none;
}
/* Pastille « Click & Collect » : même langage que le badge du bandeau juste
en dessous, vers lequel elle descend. Un fond sombre la garde lisible sur
la photo. Elle signale sans s'imposer, là où un gros bouton alourdissait
l'accueil. */
.hero-cnc[b-ft3zx7pulc] {
display: inline-flex;
align-items: center;
gap: var(--bl-space-2);
margin-top: var(--bl-space-2);
padding: 8px 16px;
border-radius: 999px;
background: rgba(0, 0, 0, 0.55);
border: var(--bl-border-width) solid rgba(0, 255, 51, 0.6);
color: #00ff33;
font-family: var(--bl-font-body);
font-weight: 700;
font-size: var(--bl-fs-small);
letter-spacing: 0.1em;
text-transform: uppercase;
text-decoration: none;
transition: background-color var(--bl-transition-fast), color var(--bl-transition-fast);
}
.hero-cnc-dot[b-ft3zx7pulc] {
width: 8px;
height: 8px;
border-radius: 50%;
background: #00ff33;
flex-shrink: 0;
}
.hero-cnc-arrow[b-ft3zx7pulc] {
display: inline-block;
transition: transform var(--bl-transition-fast);
}
.hero-cnc:hover[b-ft3zx7pulc],
.hero-cnc:focus-visible[b-ft3zx7pulc] {
background: #00ff33;
color: var(--bl-black-1);
}
.hero-cnc:hover .hero-cnc-dot[b-ft3zx7pulc],
.hero-cnc:focus-visible .hero-cnc-dot[b-ft3zx7pulc] {
background: var(--bl-black-1);
}
.hero-cnc:hover .hero-cnc-arrow[b-ft3zx7pulc],
.hero-cnc:focus-visible .hero-cnc-arrow[b-ft3zx7pulc] {
transform: translateY(3px);
}
@media (min-width: 768px) {
.hero[b-ft3zx7pulc] {
min-height: 80vh;
padding: var(--bl-space-7) var(--bl-space-5);
}
.hero-slogan[b-ft3zx7pulc] {
font-size: var(--bl-fs-h3);
}
}
@media (min-width: 1024px) {
.hero[b-ft3zx7pulc] {
min-height: 85vh;
}
}
/* /Pages/Shared/_LangSwitcher.cshtml.rz.scp.css */
.lang-switcher[b-vvrf0p0s4o] {
display: flex;
align-items: center;
}
.lang-list[b-vvrf0p0s4o] {
display: flex;
gap: var(--bl-space-1);
align-items: center;
}
.lang-link[b-vvrf0p0s4o] {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 36px;
height: 36px;
padding: 0 var(--bl-space-2);
font-family: var(--bl-font-body);
font-weight: 700;
font-size: var(--bl-fs-small);
letter-spacing: 0.05em;
color: var(--bl-text-muted);
text-decoration: none;
border-radius: var(--bl-radius);
transition:
color var(--bl-transition-fast),
background-color var(--bl-transition-fast);
}
.lang-link:hover[b-vvrf0p0s4o] {
color: var(--bl-white);
}
.lang-link.active[b-vvrf0p0s4o] {
color: var(--bl-white);
background: var(--bl-black-3);
}
/* /Pages/Shared/_NewsCard.cshtml.rz.scp.css */
.news-card[b-awl6oakfba] {
background: var(--bl-black-2);
border: var(--bl-border-width) solid var(--bl-border);
border-radius: var(--bl-radius);
overflow: hidden;
transition:
transform var(--bl-transition-fast),
border-color var(--bl-transition-fast);
}
.news-card:hover[b-awl6oakfba] {
transform: translateY(-2px);
border-color: var(--bl-border-strong);
}
.news-card-link[b-awl6oakfba] {
display: flex;
flex-direction: column;
color: var(--bl-text);
text-decoration: none;
height: 100%;
}
.news-card-link:focus-visible[b-awl6oakfba] {
outline: 2px solid var(--bl-white);
outline-offset: 2px;
}
.news-card-image[b-awl6oakfba] {
aspect-ratio: 16 / 9;
overflow: hidden;
background: var(--bl-black-1);
}
.news-card-body[b-awl6oakfba] {
padding: var(--bl-space-4);
display: flex;
flex-direction: column;
gap: var(--bl-space-2);
flex: 1;
}
.news-card-date[b-awl6oakfba] {
font-size: var(--bl-fs-small);
color: var(--bl-text-muted);
letter-spacing: 0.05em;
text-transform: uppercase;
}
.news-card-title[b-awl6oakfba] {
font-family: var(--bl-font-body);
font-weight: 700;
font-size: var(--bl-fs-h3);
line-height: var(--bl-lh-sub);
color: var(--bl-white);
margin: 0;
letter-spacing: 0;
}
.news-card-excerpt[b-awl6oakfba] {
font-size: var(--bl-fs-body);
color: var(--bl-text);
margin: 0;
}
.news-card-link-label[b-awl6oakfba] {
display: inline-flex;
align-items: center;
gap: var(--bl-space-2);
margin-top: auto;
font-family: var(--bl-font-body);
font-weight: 700;
font-size: var(--bl-fs-small);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--bl-text);
transition: color var(--bl-transition-fast);
}
.news-card:hover .news-card-link-label[b-awl6oakfba] {
color: var(--bl-white);
}
.news-card:hover .news-card-link-label span[b-awl6oakfba] {
transform: translateX(4px);
display: inline-block;
transition: transform var(--bl-transition-fast);
}
/* /Pages/Shared/_OpeningHours.cshtml.rz.scp.css */
.opening-hours[b-4utwka5pew] {
background: var(--bl-black-3);
border: var(--bl-border-width-strong) solid var(--bl-border-strong);
border-radius: var(--bl-radius);
padding: var(--bl-space-4) var(--bl-space-5);
max-width: 520px;
margin-inline: auto;
}
.oh-head[b-4utwka5pew] {
display: flex;
align-items: center;
gap: var(--bl-space-3);
margin-bottom: var(--bl-space-4);
}
.oh-icon[b-4utwka5pew] {
display: inline-flex;
color: var(--bl-white);
flex-shrink: 0;
}
.oh-icon svg[b-4utwka5pew] {
width: 28px;
height: 28px;
}
.oh-title[b-4utwka5pew] {
font-family: var(--bl-font-display);
font-weight: 400;
font-size: var(--bl-fs-h3);
color: var(--bl-white);
letter-spacing: 0.02em;
margin: 0;
}
.oh-schedule[b-4utwka5pew] {
margin: 0;
display: flex;
flex-direction: column;
gap: var(--bl-space-3);
}
.oh-row[b-4utwka5pew] {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--bl-space-4);
padding-bottom: var(--bl-space-3);
border-bottom: var(--bl-border-width) solid var(--bl-border);
}
.oh-row:last-child[b-4utwka5pew] {
padding-bottom: 0;
border-bottom: 0;
}
.oh-day[b-4utwka5pew],
.oh-time[b-4utwka5pew] {
margin: 0;
font-family: var(--bl-font-display);
font-weight: 400;
font-size: var(--bl-fs-lead);
color: var(--bl-white);
letter-spacing: 0.02em;
}
.oh-time[b-4utwka5pew] {
font-variant-numeric: tabular-nums;
}
.oh-appointment[b-4utwka5pew] {
margin: var(--bl-space-4) 0 0;
font-family: var(--bl-font-body);
font-size: var(--bl-fs-small);
color: var(--bl-text-muted);
text-align: center;
}
.oh-note[b-4utwka5pew] {
margin: var(--bl-space-3) 0 0;
font-size: var(--bl-fs-small);
text-align: center;
}
.oh-contact[b-4utwka5pew] {
color: var(--bl-text-muted);
text-decoration: underline;
text-underline-offset: 3px;
transition: color var(--bl-transition-fast);
}
.oh-contact:hover[b-4utwka5pew],
.oh-contact:focus-visible[b-4utwka5pew] {
color: var(--bl-white);
}
/* /Pages/Shared/_PartnerCard.cshtml.rz.scp.css */
.partner-card[b-dxn8qg6h6v] {
display: flex;
flex-direction: column;
background: var(--bl-black-3);
border: var(--bl-border-width) solid var(--bl-border);
border-radius: var(--bl-radius);
overflow: hidden;
transition: border-color var(--bl-transition-fast), transform var(--bl-transition-fast);
}
.partner-card:hover[b-dxn8qg6h6v] {
transform: translateY(-2px);
border-color: var(--bl-border-strong);
}
/* Pastille blanche : la plupart des logos partenaires sont prévus pour un fond
clair. object-fit: contain → jamais rogné. */
.partner-card-logo[b-dxn8qg6h6v] {
display: flex;
align-items: center;
justify-content: center;
background: var(--bl-white);
padding: var(--bl-space-4);
min-height: 240px;
width: 100%;
border: none;
appearance: none;
-webkit-appearance: none;
font: inherit;
color: inherit;
cursor: pointer;
}
.partner-card-logo:focus-visible[b-dxn8qg6h6v] {
outline: 2px solid var(--bl-white);
outline-offset: -4px;
}
/* Logo clair (ex. brasserie) : pastille sombre pour rester lisible. */
.partner-card-logo.is-dark[b-dxn8qg6h6v] {
background: var(--bl-black-1);
border-bottom: var(--bl-border-width) solid var(--bl-border);
}
.partner-card-logo img[b-dxn8qg6h6v] {
max-width: 100%;
max-height: 180px;
width: auto;
height: auto;
object-fit: contain;
transition: transform var(--bl-transition-fast);
}
.partner-card-logo:hover img[b-dxn8qg6h6v] {
transform: scale(1.04);
}
.partner-card-body[b-dxn8qg6h6v] {
display: flex;
flex-direction: column;
gap: var(--bl-space-2);
padding: var(--bl-space-4);
flex: 1;
}
.partner-card-name[b-dxn8qg6h6v] {
font-family: var(--bl-font-display);
font-weight: 400;
font-size: var(--bl-fs-h3);
line-height: var(--bl-lh-title);
color: var(--bl-white);
letter-spacing: 0.02em;
margin: 0;
}
.partner-card-address[b-dxn8qg6h6v] {
font-size: var(--bl-fs-small);
line-height: var(--bl-lh-body);
color: var(--bl-text-muted);
margin: 0;
}
.partner-card-links[b-dxn8qg6h6v] {
display: flex;
flex-wrap: wrap;
gap: var(--bl-space-2) var(--bl-space-4);
margin-top: auto;
padding-top: var(--bl-space-2);
}
.partner-card-link[b-dxn8qg6h6v] {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: var(--bl-font-body);
font-weight: 700;
font-size: var(--bl-fs-small);
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--bl-white);
text-decoration: none;
transition: color var(--bl-transition-fast);
}
.partner-card-link:hover[b-dxn8qg6h6v],
.partner-card-link:focus-visible[b-dxn8qg6h6v] {
color: var(--bl-text-muted);
}
.partner-card-link span[b-dxn8qg6h6v] {
transition: transform var(--bl-transition-fast);
}
.partner-card-link:hover span[b-dxn8qg6h6v] {
transform: translateX(3px);
}
/* /Pages/Shared/_PartnerLogo.cshtml.rz.scp.css */
.partner-chip[b-2rimx1ftc5] {
display: flex;
align-items: center;
justify-content: center;
background: var(--bl-white);
border: var(--bl-border-width) solid var(--bl-border);
border-radius: var(--bl-radius);
padding: var(--bl-space-4);
min-height: 240px;
transition: transform var(--bl-transition-fast), border-color var(--bl-transition-fast);
}
/* Logo clair (ex. brasserie) : pastille sombre pour rester lisible. */
.partner-chip.is-dark[b-2rimx1ftc5] {
background: var(--bl-black-1);
border-color: var(--bl-border-strong);
}
.partner-chip:hover[b-2rimx1ftc5] {
transform: translateY(-2px);
border-color: var(--bl-border-strong);
}
.partner-chip:focus-visible[b-2rimx1ftc5] {
outline: 2px solid var(--bl-white);
outline-offset: 3px;
}
.partner-chip img[b-2rimx1ftc5] {
max-width: 100%;
max-height: 180px;
width: auto;
height: auto;
object-fit: contain;
}
/* /Pages/Shared/_SelectiveGreenFilter.cshtml.rz.scp.css */
.svg-filter-defs[b-lax6pp1wj0] {
position: absolute;
width: 0;
height: 0;
pointer-events: none;
}
/* /Pages/Shared/_TransitionFAQ.cshtml.rz.scp.css */
.transition-faq[b-jurt6r5pet] {
background: var(--bl-black-3);
border-top: var(--bl-border-width) solid var(--bl-border);
border-bottom: var(--bl-border-width) solid var(--bl-border);
margin-top: var(--bl-space-7);
}
.transition-faq-inner[b-jurt6r5pet] {
display: flex;
flex-direction: column;
gap: var(--bl-space-4);
align-items: flex-start;
}
.transition-faq-title[b-jurt6r5pet] {
font-size: var(--bl-fs-h2);
margin: 0;
max-width: 18ch;
}
@media (min-width: 768px) {
.transition-faq-inner[b-jurt6r5pet] {
flex-direction: row;
align-items: center;
justify-content: space-between;
gap: var(--bl-space-5);
}
.transition-faq-title[b-jurt6r5pet] {
max-width: 24ch;
}
}
/* /Pages/Shared/_TurnstileWidget.cshtml.rz.scp.css */
/* Le conteneur reste vide tant qu'aucun défi n'est présenté : `:empty` sur
l'enfant évite de réserver une marge pour rien. */
.turnstile-wrap:has(.cf-turnstile:not(:empty))[b-gr5umv93kt] {
margin-block: var(--bl-space-2);
}
/* /Pages/Shop/Detail.cshtml.rz.scp.css */
/*
* Fiche d'un article de boutique.
*
* Mêmes valeurs que la fiche bière, classes distinctes : un verre n'a ni
* degré, ni ingrédients, ni formules pack et caisse, et les deux fiches
* évolueront séparément. Voir Index.cshtml.css pour la raison de la
* duplication.
*/
.shop-detail-top[b-9q8zdo6sik] {
display: grid;
gap: var(--bl-space-5);
align-items: center;
}
.shop-detail-image[b-9q8zdo6sik] {
aspect-ratio: 4 / 5;
background: var(--bl-black-3);
border-radius: var(--bl-radius);
overflow: hidden;
}
.shop-detail-header[b-9q8zdo6sik] {
display: flex;
flex-direction: column;
gap: var(--bl-space-3);
}
.shop-detail-header h1[b-9q8zdo6sik] {
font-size: var(--bl-fs-h1-hero);
margin: 0;
}
.shop-tagline[b-9q8zdo6sik] {
font-size: var(--bl-fs-lead);
color: var(--bl-text);
margin: 0;
max-width: none;
}
.shop-description[b-9q8zdo6sik] {
max-width: none;
margin: 0;
}
.shop-specs[b-9q8zdo6sik] {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: var(--bl-space-3);
margin: var(--bl-space-4) 0 0;
padding: 0;
}
.shop-specs > div[b-9q8zdo6sik] {
background: var(--bl-black-3);
border: var(--bl-border-width) solid var(--bl-border);
border-radius: var(--bl-radius);
padding: var(--bl-space-3);
}
.shop-specs dt[b-9q8zdo6sik] {
font-family: var(--bl-font-body);
font-weight: 700;
font-size: var(--bl-fs-small);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--bl-text-muted);
margin-bottom: var(--bl-space-1);
}
.shop-specs dd[b-9q8zdo6sik] {
font-family: var(--bl-font-display);
font-size: var(--bl-fs-h3);
color: var(--bl-white);
margin: 0;
}
@media (min-width: 768px) {
.shop-detail-top[b-9q8zdo6sik] {
grid-template-columns: 1fr 1fr;
}
}
/* /Pages/Shop/Index.cshtml.rz.scp.css */
/*
* Catalogue boutique.
*
* La grille reprend les valeurs de celle des bières. Le CSS isolé d'ASP.NET
* met chaque feuille à la portée de sa page : une règle ne peut pas être
* partagée entre deux pages sans passer par une feuille globale. Le site fait
* déjà ce choix pour `.beers-grid`, présent à l'identique dans l'accueil et
* dans le catalogue des bières.
*/
.shop-grid[b-g7nxyfuckx] {
display: grid;
grid-template-columns: 1fr;
gap: var(--bl-space-4);
}
@media (min-width: 768px) {
.shop-grid[b-g7nxyfuckx] {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1024px) {
.shop-grid[b-g7nxyfuckx] {
grid-template-columns: repeat(3, 1fr);
gap: var(--bl-space-5);
}
}
.empty[b-g7nxyfuckx] {
text-align: center;
padding: var(--bl-space-7) 0;
}