/* ============================================================================
   Bières V3 — listing (/bieres, /couleur/…) et fiche d'une bière, en charte
   « éditorial néo-brutaliste ». Tout est scopé sous .bieres-v3.

   Le préfixe est bv3b- et non bv3- : blog-v3.css occupe déjà bv3-, et les deux
   feuilles peuvent se croiser sur une même page si un jour un article de blog
   renvoie vers une bière.
   ========================================================================== */

.bieres-v3{
  --paper:#F2E7D0; --paper2:#FBF6EC; --card:#FFFFFF;
  --ink:#171310; --ink2:#5c5044;
  --orange:#FF5A1F; --orange2:#F0872E; --green:#1F5138; --amber:#E9A94A;
  --bd:2.5px solid var(--ink);
  --sh:7px 7px 0 var(--ink); --sh-sm:4px 4px 0 var(--ink);
  background:var(--paper); color:var(--ink);
  font-family:"Hanken Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  overflow-x:clip;padding-bottom:34px;
}
.bieres-v3 *{box-sizing:border-box}
.bieres-v3 a{text-decoration:none;color:inherit}
.bieres-v3 img{max-width:100%}
.bieres-v3 .bv3b-wrap{max-width:1280px;margin:0 auto;padding:0 26px}

/* Le fond crème doit couvrir toute la page, sinon des bandes blanches
   apparaissent au-dessus du header et sous le footer (cf. fix home V3). */
body.page-template-template-bieres,
body.tax-colors,
body.single-beers{background:#F2E7D0}
body.page-template-template-bieres #footer,
body.tax-colors #footer,
body.single-beers #footer{margin-top:0 !important}

.bieres-v3 .bv3b-grain{
  position:fixed;inset:0;z-index:9990;pointer-events:none;opacity:.05;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion:no-preference){
    .bieres-v3 .bv3b-rv{animation:bv3b-rise linear both;animation-timeline:view();animation-range:entry 0% cover 20%}
    @keyframes bv3b-rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
  }
}

/* --- Typo --- */
.bieres-v3 h1,.bieres-v3 h2,.bieres-v3 h3{margin:0;font-weight:400;color:var(--ink)}
.bieres-v3 .bv3b-eyebrow{
  display:inline-block;font-family:"Fraunces",Georgia,serif;font-style:italic;
  font-weight:600;font-size:16px;margin-bottom:12px;color:var(--orange);
}
.bieres-v3 .bv3b-eyebrow::before{content:"— "}
.bieres-v3 a.bv3b-eyebrow:hover{color:var(--ink)}
.bieres-v3 .bv3b-h1,.bieres-v3 .bv3b-article-head h1{
  font-family:"Anton",Impact,sans-serif;text-transform:uppercase;
  font-size:clamp(34px,4.8vw,64px);line-height:.95;margin:0;
}
.bieres-v3 .bv3b-h2{
  font-family:"Anton",Impact,sans-serif;text-transform:uppercase;
  font-size:clamp(26px,3.2vw,40px);line-height:1;
}
.bieres-v3 .bv3b-h2 em{
  font-family:"Fraunces",Georgia,serif;font-style:italic;font-weight:600;
  text-transform:none;color:var(--orange);
}
.bieres-v3 .bv3b-lead{font-size:17px;line-height:1.55;color:var(--ink2);max-width:660px;margin:14px 0 0}

.bieres-v3 .bv3b-btn{
  display:inline-block;font-weight:800;font-size:15px;text-transform:uppercase;
  letter-spacing:.02em;padding:14px 24px;border:var(--bd);
  box-shadow:var(--sh-sm);transition:transform .12s,box-shadow .12s;cursor:pointer;
}
.bieres-v3 .bv3b-btn:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--ink)}
.bieres-v3 .bv3b-btn--solid{background:var(--orange);color:#fff}
.bieres-v3 .bv3b-btn--ghost{background:var(--card);color:var(--ink)}
.bieres-v3 .bv3b-more{
  display:inline-block;font-weight:800;font-size:14px;text-transform:uppercase;letter-spacing:.03em;
  background:linear-gradient(var(--orange),var(--orange)) 0 100%/0 2px no-repeat;
  transition:color .15s,background-size .38s cubic-bezier(.2,.8,.2,1);padding-bottom:3px;
}
.bieres-v3 .bv3b-more:hover{color:var(--orange);background-size:100% 2px}

/* --- En-tête et filtres --- */
.bieres-v3 .bv3b-head{padding:38px 0 24px}
.bieres-v3 .bv3b-filters{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.bieres-v3 .bv3b-filters a{
  display:inline-flex;align-items:center;gap:6px;padding:8px 13px;
  border:2px solid var(--ink);background:var(--card);font-size:13px;font-weight:700;
  transition:background .12s,color .12s;
}
.bieres-v3 .bv3b-filters a:hover{background:var(--amber)}
.bieres-v3 .bv3b-filters .bv3b-on a{background:var(--ink);color:#fff}
.bieres-v3 .bv3b-n{font-size:11px;font-weight:800;opacity:.7;padding:1px 5px;border:1px solid currentColor}

.bieres-v3 .bv3b-search{display:flex;gap:10px;margin-top:18px;max-width:520px}
.bieres-v3 .bv3b-search input{
  flex:1;padding:12px 14px;border:var(--bd);background:var(--card);
  font-family:inherit;font-size:15px;color:var(--ink);box-shadow:var(--sh-sm);
}
.bieres-v3 .bv3b-search input:focus{outline:none;box-shadow:1px 1px 0 var(--ink);transform:translate(3px,3px)}
.bieres-v3 .bv3b-search button{
  background:var(--ink);color:#fff;border:var(--bd);padding:12px 20px;
  font-weight:800;text-transform:uppercase;font-size:13px;letter-spacing:.03em;
  box-shadow:var(--sh-sm);cursor:pointer;transition:transform .12s,box-shadow .12s;
}
.bieres-v3 .bv3b-search button:hover{transform:translate(-2px,-2px);box-shadow:var(--sh)}

.bieres-v3 .bv3b-count{
  font-size:15px;color:var(--ink2);margin:0 0 18px;padding-bottom:14px;border-bottom:var(--bd);
}
.bieres-v3 .bv3b-count strong{color:var(--ink);font-size:17px}

/* --- La grille --- */
.bieres-v3 .bv3b-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.bieres-v3 .bv3b-card{
  display:flex;flex-direction:column;background:var(--card);border:var(--bd);
  box-shadow:var(--sh-sm);transition:transform .14s,box-shadow .14s;
}
.bieres-v3 .bv3b-card:hover{transform:translate(-3px,-3px);box-shadow:var(--sh)}
/* 141/250 est le format d'une bouteille en taille « blog-list » : la vignette
   épouse l'image au lieu de la rogner. main.css force une height sur les img,
   que l'on neutralise ici. */
.bieres-v3 .bv3b-card-media{
  position:relative;display:block;aspect-ratio:141/250;overflow:hidden;
  background:var(--paper2);border-bottom:var(--bd);
}
.bieres-v3 .bv3b-card-media img{
  width:100% !important;height:100% !important;object-fit:cover;display:block;
  transition:transform .45s cubic-bezier(.2,.8,.2,1);
}
.bieres-v3 .bv3b-card:hover .bv3b-card-media img{transform:scale(1.09) rotate(-2deg)}
/* Pastille de couleur SRM : l'échelle mesure la teinte de la bière, autant la montrer. */
.bieres-v3 .bv3b-srm{
  position:absolute;top:10px;right:10px;width:20px;height:20px;border:2px solid var(--ink);border-radius:50%;
}
.bieres-v3 .bv3b-card-body{padding:14px;display:flex;flex-direction:column;gap:6px;flex:1}
.bieres-v3 .bv3b-card-body h2{
  font-family:"Anton",Impact,sans-serif;text-transform:uppercase;font-size:17px;line-height:1.08;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.bieres-v3 .bv3b-card-body h2 a:hover{color:var(--orange)}
.bieres-v3 .bv3b-brew{margin:0;font-size:13px;color:var(--ink2);
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.bieres-v3 .bv3b-specs{
  list-style:none;margin:auto 0 0;padding:8px 0 0;display:flex;flex-wrap:wrap;gap:4px 10px;
  border-top:1px solid rgba(23,19,16,.15);font-size:12px;color:var(--ink2);
}
.bieres-v3 .bv3b-specs b{color:var(--ink);font-weight:800}

/* --- Pagination --- */
.bieres-v3 .bv3b-pagination{display:flex;justify-content:center;margin:34px 0 0}
.bieres-v3 .bv3b-pagination .page-numbers{
  display:inline-block;min-width:42px;text-align:center;padding:10px 12px;margin:0 4px;
  border:2px solid var(--ink);background:var(--card);font-weight:800;font-size:14px;
  transition:background .12s,color .12s;
}
.bieres-v3 .bv3b-pagination .page-numbers:hover{background:var(--amber)}
.bieres-v3 .bv3b-pagination .page-numbers.current{background:var(--ink);color:#fff}
.bieres-v3 .bv3b-pagination .dots{border-color:transparent;background:none}

/* --- Bière du mois --- */
.bieres-v3 .bv3b-section{margin-top:56px}
.bieres-v3 .bv3b-sechead{margin-bottom:22px}
.bieres-v3 .bv3b-monthly{
  display:grid;grid-template-columns:150px 1fr;gap:26px;align-items:center;
  background:var(--green);color:#fff;border:var(--bd);box-shadow:var(--sh);padding:28px;
}
.bieres-v3 .bv3b-monthly h3{font-family:"Anton",Impact,sans-serif;text-transform:uppercase;font-size:26px;color:#fff;margin-bottom:10px}
.bieres-v3 .bv3b-monthly p{margin:0 0 18px;font-size:15px;line-height:1.55;opacity:.92}
.bieres-v3 .bv3b-monthly-media img{border:var(--bd);display:block;width:100%;background:var(--card)}

/* --- Conversion --- */
.bieres-v3 .bv3b-cta{
  display:grid;grid-template-columns:1fr auto;gap:30px;align-items:center;
  background:var(--paper2);border:var(--bd);box-shadow:var(--sh);padding:30px 34px;
}
.bieres-v3 .bv3b-cta h2{font-family:"Anton",Impact,sans-serif;text-transform:uppercase;font-size:clamp(22px,2.6vw,32px);line-height:1.04}
.bieres-v3 .bv3b-cta p{margin:10px 0 0;font-size:16px}
.bieres-v3 .bv3b-cta-actions{display:flex;gap:14px;flex-wrap:wrap}

/* ============================================================================
   FICHE D'UNE BIÈRE
   ========================================================================== */

.bieres-v3 .bv3b-crumb{
  display:inline-block;margin:30px 0 22px;font-weight:800;font-size:14px;
  text-transform:uppercase;letter-spacing:.03em;color:var(--ink2);
}
.bieres-v3 .bv3b-crumb:hover{color:var(--orange)}
.bieres-v3 .bv3b-article-head{padding-bottom:30px;border-bottom:var(--bd);margin-bottom:36px}
.bieres-v3 .bv3b-article-head--media{display:grid;grid-template-columns:1fr 300px;gap:44px;align-items:center}
.bieres-v3 .bv3b-article-head h1{margin-bottom:12px}
.bieres-v3 .bv3b-article-meta{
  margin:0 0 20px;font-weight:800;font-size:13px;text-transform:uppercase;
  letter-spacing:.05em;color:var(--ink2);
}
.bieres-v3 .bv3b-frame{
  border:var(--bd);box-shadow:var(--sh);background:var(--card);padding:14px;
  transform:rotate(-2deg);transition:transform .25s cubic-bezier(.2,.8,.2,1);
}
.bieres-v3 .bv3b-frame:hover{transform:none}
.bieres-v3 .bv3b-frame img{display:block;width:100%;height:auto !important;object-fit:contain}

/* Caractéristiques en grand sur la fiche */
.bieres-v3 .bv3b-specs--big{
  display:flex;gap:14px;flex-wrap:wrap;border:0;padding:0;margin:0;
}
.bieres-v3 .bv3b-specs--big li{
  position:relative;background:var(--card);border:var(--bd);box-shadow:var(--sh-sm);
  padding:12px 16px;min-width:104px;
}
.bieres-v3 .bv3b-spec-v{font-family:"Anton",Impact,sans-serif;font-size:26px;line-height:1;display:block}
.bieres-v3 .bv3b-spec-u{font-size:12px;font-weight:800;color:var(--ink2);display:block;margin-top:2px}
.bieres-v3 .bv3b-spec-t{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink2);display:block;margin-top:6px}
.bieres-v3 .bv3b-spec-dot{
  position:absolute;top:10px;right:10px;width:16px;height:16px;border:2px solid var(--ink);border-radius:50%;
}

/* Mesure de lecture : ~75 caractères par ligne à 18px, colonne centrée. */
.bieres-v3 .bv3b-prose{max-width:720px;margin:0 auto;font-size:18px;line-height:1.68}
.bieres-v3 .bv3b-prose p{margin:0 0 1.15em}
.bieres-v3 .bv3b-prose a{color:var(--orange);text-decoration:underline}
.bieres-v3 .bv3b-prose img{
  display:block;margin:1.4em auto;max-width:100%;height:auto !important;
  border:var(--bd);box-shadow:var(--sh-sm);
}
.bieres-v3 .bv3b-brewlink{
  max-width:720px;margin:26px auto 0;display:flex;gap:14px;flex-wrap:wrap;justify-content:center;
}
/* Le lien marchand est ambré, comme celui de la fiche brasserie : c'est une
   sortie vers un autre site, elle ne se confond pas avec la navigation interne. */
.bieres-v3 .bv3b-btn--buy{background:var(--amber);color:var(--ink)}

/* Les autres bières de la maison */
.bieres-v3 .bv3b-others{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.bieres-v3 .bv3b-other{display:flex;flex-direction:column;background:var(--card);border:var(--bd);box-shadow:var(--sh-sm);transition:transform .13s,box-shadow .13s}
.bieres-v3 .bv3b-other:hover{transform:translate(-3px,-3px);box-shadow:var(--sh)}
.bieres-v3 .bv3b-other-media{aspect-ratio:141/250;background:var(--paper2);border-bottom:var(--bd);overflow:hidden;display:block}
.bieres-v3 .bv3b-other-media img{width:100% !important;height:100% !important;object-fit:cover;display:block}
.bieres-v3 .bv3b-other-name{
  font-family:"Anton",Impact,sans-serif;text-transform:uppercase;font-size:12px;
  line-height:1.1;padding:10px 10px 12px;text-align:center;
}

/* ============================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1080px){
  .bieres-v3 .bv3b-grid{grid-template-columns:repeat(3,1fr)}
  .bieres-v3 .bv3b-others{grid-template-columns:repeat(4,1fr)}
  .bieres-v3 .bv3b-article-head--media{grid-template-columns:1fr;gap:28px}
  .bieres-v3 .bv3b-article-media{max-width:300px}
}
@media (max-width:760px){
  .bieres-v3 .bv3b-wrap{padding:0 18px}
  .bieres-v3 .bv3b-grid{grid-template-columns:repeat(2,1fr)}
  .bieres-v3 .bv3b-others{grid-template-columns:repeat(3,1fr)}
  .bieres-v3 .bv3b-monthly{grid-template-columns:1fr}
  .bieres-v3 .bv3b-cta{grid-template-columns:1fr;padding:24px}
  .bieres-v3 .bv3b-search{flex-direction:column;max-width:none}
}
@media (prefers-reduced-motion:reduce){
  .bieres-v3 *{transition:none !important;animation:none !important}
  .bieres-v3 .bv3b-frame{transform:none}
}