/* La vitrine de la boutique (22 octobre 2026) : les produits qui ne sont pas des bieres, sur une bande creme, en cartes blanches. Tout est borne a .vitrine. */
.vitrine{--papier:#f6f1e7;--encre:#1b2330;--nuit:#0c1a2b;
  background:var(--papier);color:#444;margin:0 calc(50% - 50vw);padding:44px max(clamp(14px,4vw,48px),calc((100vw - 1120px) / 2));
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;
  grid-auto-rows:auto;justify-content:start}
.vitrine>*{max-width:none}
.vitrine *{box-sizing:border-box}
@media(min-width:640px){.vitrine{grid-template-columns:repeat(auto-fill,minmax(15rem,17rem));gap:20px}}
.vitrine-palette{display:flex;flex-wrap:wrap;gap:.6rem 1rem;align-items:center;justify-content:space-between;background:var(--papier,#f6f1e7);color:#1b2330;
  border-radius:16px;padding:.8rem 1rem;margin:14px 0 0}
.vitrine-palette a{background:#b8152d;color:#fff;border-radius:99px;padding:.6rem 1.1rem;font-weight:700;text-decoration:none;min-height:44px;display:inline-flex;align-items:center}

.vcarte{position:relative;display:flex;flex-direction:column;min-width:0;overflow:hidden;background:#fff;border-radius:20px;
  box-shadow:0 1px 2px rgba(12,26,43,.06),0 12px 28px -16px rgba(12,26,43,.35);transition:transform .2s,box-shadow .2s;padding:0 0 16px}
.vcarte:hover{transform:translateY(-4px);box-shadow:0 2px 4px rgba(12,26,43,.08),0 20px 36px -16px rgba(12,26,43,.4)}
.vcarte>*:not(.vphoto):not(.vvitrail):not(.vpromo){margin-left:16px;margin-right:16px}
.vvitrail,.vphoto{display:flex;align-items:center;justify-content:center;height:190px;margin:0 0 12px;overflow:hidden;position:relative;text-decoration:none;background:#f1ece1}
.vvitrail img{display:block;width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain}
.vphoto img{display:block;width:100%;height:100%;object-fit:cover}
.vcarte .sans-vitrail{display:block;width:90px;height:90px;border-radius:50%;background:var(--c,#b8152d);border:6px solid #fff8}
.vcarte h2{margin:0;font:600 1.2rem/1.2 var(--affichage)}
.vcarte h2 a{color:#1b2330;text-decoration:none}
.vstyle{margin:.1rem 16px 0;font-size:.82rem;color:#777}
.vprix{margin:.5rem 16px .8rem;font-size:.88rem;color:#555;line-height:1.35}
.vprix strong{font-size:1.25rem;color:#1b2330}
.vprix s{color:#999;margin-right:.35rem}
.vcarte .vbouton{display:flex;align-items:center;justify-content:center;min-height:46px;border:0;border-radius:99px;background:#0c1a2b;color:#fff;font:inherit;font-weight:700;font-size:.9rem;
  cursor:pointer;text-decoration:none;padding:0 1rem;text-align:center;transition:background .18s}
.vcarte .vbouton:hover{background:#b8152d}
.vcarte .vbouton:focus-visible,.vachat input:focus-visible{outline:3px solid #004c8d;outline-offset:2px}
.vachat{margin-top:auto;display:flex;gap:8px;align-items:stretch}
.vachat input[type=number]{width:3.6rem;min-height:46px;border-radius:99px;border:1.5px solid #1b2330;background:#fff;color:#111;font:inherit;font-weight:700;text-align:center;padding:0 .3rem;flex:none}
.vachat .vbouton{flex:1;min-width:0}
.vcarte>.vbouton{margin-top:auto}
.vcommande,.vepuise{margin:.2rem 16px .5rem;font-weight:700;font-size:.82rem;color:#b8152d}
.vcarte:has(.vepuise){filter:grayscale(.7);opacity:.75}
.vpromo{position:absolute;top:10px;left:10px;z-index:2;background:#b8152d;color:#fff;border-radius:99px;font-size:.72rem;font-weight:800;padding:.2rem .6rem}

/* la fiche d'un produit fait de bieres : le vitrail grand, la couleur de la biere choisie, des tuiles pour changer */
.fiche-bieres{background:linear-gradient(165deg,var(--c) -30%,var(--f) 62%);color:var(--t,#fff);border-radius:24px;padding:18px 16px 24px;margin:14px 0;transition:background .3s}
.fiche-bieres .fiche-grand{display:grid;place-items:center;min-height:260px}
.fiche-bieres .fiche-grand img{display:block;max-width:100%;max-height:340px;width:auto;height:auto;object-fit:contain;filter:drop-shadow(0 14px 12px #0008)}
.fiche-bieres .fiche-tete h1,.fiche-bieres h2{color:#fff;font-weight:800}
.fiche-bieres .fiche-tete .prix,.fiche-bieres .prix{color:#fff;font-size:1.3rem;font-weight:800}
.fiche-bieres .fiche-meta,.fiche-bieres .fiche-meta a,.fiche-bieres .resume,.fiche-bieres .description,.fiche-bieres .description *{color:#ffffffdd}
.fiche-bieres .fiche-tuiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(5.4rem,1fr));gap:8px;margin:1rem 0 .4rem}
.fiche-bieres .fiche-tuile{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 4px 8px;min-height:44px;border-radius:16px;border:2px solid #fff3;background:#0003;color:#fff;font:inherit;text-transform:none;letter-spacing:0;font-size:.8rem;font-weight:700;cursor:pointer}
.fiche-bieres .fiche-tuile span{display:block;font-size:.8rem;text-transform:none;letter-spacing:0;color:#fff;background:transparent;padding:0;margin:0}
.fiche-bieres .fiche-tuile img{display:block;height:64px;width:auto;max-width:100%;object-fit:contain}
.fiche-bieres .fiche-tuile i{display:block;width:44px;height:44px;border-radius:50%;background:var(--c);border:4px solid #fff8}
.fiche-bieres .fiche-tuile.on{border-color:#fff;background:#0006;box-shadow:0 0 0 3px var(--c)}
.fiche-bieres .fiche-tuile:disabled{opacity:.45;cursor:not-allowed}
.fiche-bieres .fiche-tuile small{font-weight:600;opacity:.9}
.fiche-bieres .fiche-tuile:focus-visible{outline:3px solid #fff;outline-offset:2px}
.fiche-bieres .achat{max-width:none;background:transparent;padding:0}
.fiche-bieres .achat label{color:#fff}
.fiche-bieres .achat select,.fiche-bieres .achat input{color:#111;background:#fff;border-radius:12px;min-height:46px}
.fiche-bieres .bouton-achat{min-height:50px;border-radius:99px;background:#111;color:#fff;border:0;padding:0 1.6rem;font-size:.95rem}
.fiche-bieres .bouton-achat:hover{background:#000}
.fiche-bieres .onglet{color:#fff;background:#0003;border:0;border-radius:99px;padding:.5rem 1rem}
.fiche-bieres .onglet.actif{background:#fff;color:#111}
.fiche-bieres .tableau,.fiche-bieres .tableau th,.fiche-bieres .tableau td{color:#fff;background:transparent;border-color:#fff3}
.fiche-bieres .rupture,.fiche-bieres .refueling{color:#fff}