/* Hop-Lab — styles de la page. Portee limitee a .hoplab pour ne pas
   interferer avec Bootstrap ni avec le theme parent craft-beer-nation. */
:root{
  --jaune:#FFC81F;
  --noir:#000000;
  --creme:#FDF7E4;
  --blanc:#FFFFFF;
  --gris:#EBEBEB;
  --gris-txt:#4A4A46;

  --blonde:#E9B420;
  --triple:#2E5FA8;
  --rouge:#E5426B;
  --ipa:#58B47A;

  --display:'Outfit',system-ui,sans-serif;
  --texte:'Fira Sans',system-ui,sans-serif;

  --mesure:64ch;
  --rythme:clamp(4rem,9vw,8rem);
}
.hoplab *{box-sizing:border-box}
.hoplab{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){.hoplab{scroll-behavior:auto}
.hoplab *{animation:none!important;transition:none!important}
}
.hoplab{
  margin:0;
  background:var(--creme);
  color:var(--noir);
  font-family:var(--texte);
  font-weight:300;
  font-size:clamp(1rem,.5vw + .9rem,1.075rem);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
.hoplab img{max-width:100%;display:block}
.hoplab a{color:inherit}
.hoplab :focus-visible{outline:3px solid var(--noir);outline-offset:3px}
.hoplab .jaune :focus-visible{outline-color:var(--noir)}
.hoplab .noir :focus-visible{outline-color:var(--jaune)}
.hoplab h1, .hoplab h2, .hoplab h3, .hoplab h4{font-family:var(--display);font-weight:700;line-height:1.06;margin:0;letter-spacing:-.02em}
.hoplab h2{font-size:clamp(2rem,4.4vw,3.4rem)}
.hoplab h3{font-size:clamp(1.3rem,1.9vw,1.6rem);line-height:1.15}
.hoplab p{margin:0 0 1.1em;max-width:var(--mesure)}
.hoplab p:last-child{margin-bottom:0}
.hoplab .wrap{width:min(1240px,92vw);margin-inline:auto}
.hoplab .bloc{padding-block:var(--rythme)}
.hoplab .jaune{background:var(--jaune)}
.hoplab .noir{background:var(--noir);color:var(--creme)}
.hoplab .noir h2, .hoplab .noir h3{color:var(--jaune)}

/* ---------- HERO : mur de logotypes ---------- */
.hoplab .hl-hero{position:relative;background:var(--noir);overflow:hidden;isolation:isolate}
.hoplab .mur{
  position:absolute;inset:-6% -10%;z-index:0;
  display:grid;gap:0;
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  align-content:center;
  user-select:none;pointer-events:none;
}
.hoplab .mur span{
  font-family:var(--display);font-weight:800;
  font-size:clamp(3.2rem,7vw,6rem);
  line-height:1.35;
  color:transparent;
  -webkit-text-stroke:1.5px var(--jaune);
  text-stroke:1.5px var(--jaune);
  opacity:.5;
  white-space:nowrap;
}
.hoplab .mur span.plein{color:var(--jaune);-webkit-text-stroke:0;opacity:1}
.hoplab .hl-hero-contenu{position:relative;z-index:1;padding-block:clamp(6rem,16vw,11rem)}
.hoplab .hl-hero-carte{
  background:var(--jaune);color:var(--noir);
  padding:clamp(2rem,4.5vw,3.5rem);
  max-width:47rem;
}
.hoplab .hl-hero h1{font-size:clamp(2.3rem,6vw,4.6rem);margin-bottom:.5em}
.hoplab .hl-hero-carte p{font-size:clamp(1.05rem,1.4vw,1.25rem);font-weight:400;max-width:38ch}
.hoplab .hl-logo{width:clamp(190px,26vw,270px);height:auto;margin:0 0 2rem}
.hoplab .hl-logo-marque{width:clamp(150px,20vw,210px);height:auto;margin:0 auto 2.2rem}
.hoplab .eyebrow{
  font-family:var(--display);font-weight:700;
  text-transform:uppercase;letter-spacing:.18em;
  font-size:.74rem;margin:0 0 1.5rem;
}
.hoplab .chips{display:flex;flex-wrap:wrap;gap:.5rem;list-style:none;padding:0;margin:2.2rem 0 0}
.hoplab .chips li{
  border:1.5px solid currentColor;padding:.55em .95em;
  font-family:var(--display);font-weight:500;font-size:.85rem;line-height:1;
}
.hoplab .chips-sm{margin-top:.9rem}
.hoplab .chips-sm li{font-size:.74rem;padding:.45em .7em}
.hoplab .stats{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));list-style:none;padding:0;margin:3rem 0 0}
.hoplab .stats li{border:2px solid var(--jaune);padding:1.4rem 1.5rem}
.hoplab .stats b{display:block;font-family:var(--display);font-size:clamp(1.9rem,3vw,2.4rem);font-weight:800;line-height:1;color:var(--jaune)}
.hoplab .stats span{font-size:.92rem;color:var(--creme)}
.hoplab .duo .hl-lead{font-size:clamp(1.05rem,1.3vw,1.18rem);font-weight:400;line-height:1.55;max-width:32ch}

/* ---------- Boutons ---------- */
.hoplab .hl-btn{
  display:inline-block;font-family:var(--display);font-weight:700;
  text-decoration:none;padding:.95em 2.1em;
  border:2px solid var(--noir);background:var(--noir);color:var(--jaune);
  transition:background .18s ease,color .18s ease;
}
.hoplab .hl-btn:hover{background:transparent;color:var(--noir)}
.hoplab .hl-btn-clair{border-color:var(--jaune);background:var(--jaune);color:var(--noir)}
.hoplab .hl-btn-clair:hover{background:transparent;color:var(--jaune)}
.hoplab .actions{display:flex;flex-wrap:wrap;gap:1rem;margin-top:2.2rem}

/* ---------- Intro deux colonnes ---------- */
.hoplab .duo{display:grid;gap:clamp(2rem,5vw,4.5rem);grid-template-columns:1fr}
@media(min-width:900px){.hoplab .duo{grid-template-columns:minmax(0,5fr) minmax(0,6fr);align-items:start}
}
.hoplab .duo h2{margin-bottom:.6em}
.hoplab .chiffres{display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));margin-top:3rem;border-top:2px solid var(--noir);padding-top:1.8rem}
.hoplab .chiffre b{display:block;font-family:var(--display);font-size:clamp(2rem,3.5vw,2.8rem);font-weight:800;line-height:1}
.hoplab .chiffre span{font-size:.92rem;color:var(--gris-txt)}

/* ---------- Savoir-faire ---------- */
.hoplab .savoir{
  display:grid;grid-template-columns:1fr;
  gap:1px;background:rgba(0,0,0,.20);
  border:1px solid rgba(0,0,0,.20);
  margin-top:3.5rem;
}
@media(min-width:640px){.hoplab .savoir{grid-template-columns:repeat(2,1fr)}
}
@media(min-width:1080px){.hoplab .savoir{grid-template-columns:repeat(4,1fr)}
}
.hoplab .savoir article{background:var(--jaune);padding:clamp(1.6rem,2.2vw,2.2rem)}
.hoplab .savoir .num{
  font-family:var(--display);font-weight:800;
  font-size:clamp(1.8rem,2.6vw,2.3rem);line-height:1;
  color:rgba(0,0,0,.34);margin:0 0 1.1rem;
}
.hoplab .savoir h3{font-size:1.08rem;margin-bottom:.55em}
.hoplab .savoir p{font-size:.95rem;margin:0}
.hoplab .savoir .final{
  background:rgba(0,0,0,.13);display:flex;align-items:center;
  grid-column:span 1;
}
@media(min-width:1080px){.hoplab .savoir .final{grid-column:span 2}
}
.hoplab .savoir .final p{font-family:var(--display);font-weight:700;font-size:clamp(1.1rem,1.7vw,1.45rem);line-height:1.25;max-width:22ch}

/* ---------- Gamme ---------- */
.hoplab .gamme{display:grid;gap:clamp(1.5rem,2.2vw,2rem);grid-template-columns:1fr;margin-top:3.5rem;align-items:stretch}
@media(min-width:640px){.hoplab .gamme{grid-template-columns:repeat(2,1fr)}
}
@media(min-width:1080px){.hoplab .gamme{grid-template-columns:repeat(4,1fr)}
}
.hoplab .biere{display:flex;flex-direction:column;background:var(--gris)}
.hoplab .b-blonde{--accent:var(--blonde)}
.hoplab .b-triple{--accent:var(--triple)}
.hoplab .b-rouge{--accent:var(--rouge)}
.hoplab .b-ipa{--accent:var(--ipa)}
.hoplab .biere-visuel{background:var(--gris);position:relative;padding-top:2.6rem}
.hoplab .hl-badge{
  position:absolute;top:0;left:0;margin:0;background:var(--accent);
  font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.12em;
  font-size:.68rem;padding:.5em .9em;
}
.hoplab .hl-badge-noir{color:var(--noir)}
.hoplab .hl-badge-clair{color:var(--blanc)}
.hoplab .biere-question{
  padding:0 1rem;min-height:4.4em;margin:0;
  font-family:var(--display);font-weight:700;font-size:.8rem;
  line-height:1.35;text-transform:uppercase;text-align:center;
}
.hoplab .packshot{width:100%;height:auto;display:block}
.hoplab .biere-corps{background:var(--creme);padding:1.6rem 1.4rem 1.4rem;flex:1;display:flex;flex-direction:column}
.hoplab .biere-nom{font-family:var(--display);font-weight:700;font-size:1.5rem;margin-bottom:.45rem}
.hoplab .biere-nom em{font-style:normal;color:var(--accent)}
.hoplab .biere-tag{font-size:.92rem;color:var(--gris-txt);margin:0 0 1.4rem}
.hoplab .roue{display:block;width:100%;max-width:220px;margin:.5rem auto 1.6rem;color:var(--accent)}
.hoplab .roue .etiq text{font-family:var(--display);font-weight:700;font-size:11px;fill:var(--noir);letter-spacing:.04em}
.hoplab .fiche{margin:0}
.hoplab .fiche dt{font-family:var(--display);font-weight:700;font-size:.72rem;text-transform:uppercase;letter-spacing:.12em;color:var(--accent);margin-top:1rem}
.hoplab .fiche dt:first-child{margin-top:0}
.hoplab .fiche dd{margin:.3rem 0 0;font-size:.93rem}
.hoplab .formats{font-family:var(--display);font-weight:500;font-size:.85rem;margin:1.2rem 0 0}
.hoplab .ing{margin-top:auto;padding-top:1.2rem}
.hoplab .ing summary{
  border-top:1px solid rgba(0,0,0,.18);padding-top:1.1rem;cursor:pointer;list-style:none;
  font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.1em;
  font-size:.72rem;display:flex;justify-content:space-between;gap:1rem;align-items:center;
}
.hoplab .ing summary::-webkit-details-marker{display:none}
.hoplab .ing summary::after{content:'+';font-size:1.15rem;line-height:1}
.hoplab .ing[open] summary::after{content:'–'}
.hoplab .ing p{font-size:.78rem;line-height:1.55;color:var(--gris-txt);margin:.9rem 0 0}

/* ---------- Comparateur ---------- */
.hoplab .intro-comp{margin-top:1.2rem;color:var(--creme);max-width:46ch}
.hoplab .comp{display:grid;gap:clamp(2.5rem,5vw,4.5rem);grid-template-columns:1fr;margin-top:3.5rem}
@media(min-width:960px){.hoplab .comp{grid-template-columns:repeat(2,minmax(0,1fr))}
}
.hoplab .comp-titre{font-size:1.15rem;color:var(--jaune);margin-bottom:1.2rem}
.hoplab .comp-titre-tab{margin-top:clamp(3rem,6vw,5rem)}
.hoplab .prefs{display:flex;flex-wrap:wrap;gap:.6rem}
.hoplab .pref{
  font-family:var(--display);font-weight:600;font-size:.9rem;
  background:transparent;color:var(--jaune);border:1.5px solid var(--jaune);
  padding:.7em 1.1em;cursor:pointer;transition:background .15s ease,color .15s ease;
}
.hoplab .pref:hover{background:rgba(255,200,31,.15)}
.hoplab .pref[aria-pressed="true"]{background:var(--jaune);color:var(--noir)}
.hoplab .reco{margin-top:2rem;border:1px solid rgba(255,200,31,.45);border-left:5px solid var(--accent,var(--jaune));padding:1.6rem 1.8rem;background:rgba(255,200,31,.05)}
.hoplab .reco-label{font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.16em;font-size:.7rem;color:var(--jaune);margin:0 0 .6rem}
.hoplab .reco-nom{font-family:var(--display);font-weight:700;font-size:1.6rem;color:var(--creme);margin:0 0 .6rem;line-height:1.1}
.hoplab .reco-desc{font-size:.96rem;color:var(--creme);margin:0}
.hoplab .bascules{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.5rem}
.hoplab .bascule{
  font-family:var(--display);font-weight:600;font-size:.85rem;cursor:pointer;
  padding:.6em 1em;border:1.5px solid var(--accent);background:var(--accent);color:var(--noir);
  transition:background .15s ease,color .15s ease;
}
.hoplab .bascule[aria-pressed="false"]{background:transparent;color:var(--accent)}
.hoplab .b-blonde{--accent:var(--blonde)}
.hoplab .b-triple{--accent:#5B8FD6}
.hoplab .b-rouge{--accent:var(--rouge)}
.hoplab .b-ipa{--accent:var(--ipa)}
.hoplab .radar{width:100%;height:auto;max-width:460px}
.hoplab .radar .etiq text{font-family:var(--display);font-weight:700;font-size:15px;fill:var(--jaune);letter-spacing:.05em}
.hoplab .trace{transition:opacity .2s ease}
.hoplab .trace[hidden]{display:none}
.hoplab .hl-tab-wrap{overflow-x:auto;margin-top:1.4rem}
.hoplab .hl-tab{width:100%;border-collapse:collapse;min-width:720px;text-align:left}
.hoplab .hl-tab th[scope="col"]{
  font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.12em;
  font-size:.7rem;color:var(--jaune);padding:0 1rem .8rem;border-bottom:2px solid var(--jaune);
}
.hoplab .hl-tab tbody th, .hoplab .hl-tab td{padding:1.1rem 1rem;border-bottom:1px solid rgba(253,247,228,.18);font-size:.95rem;color:var(--creme);font-weight:300}
.hoplab .hl-tab tbody th{font-family:var(--display);font-weight:700;border-left:5px solid var(--accent);color:var(--creme)}

/* ---------- Accessibilité (bandeau jaune) ---------- */
.hoplab .manifeste{display:grid;gap:clamp(2rem,5vw,4rem);grid-template-columns:1fr}
@media(min-width:900px){.hoplab .manifeste{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center}
}
.hoplab .manifeste-bloc{padding-top:clamp(3.5rem,6vw,5.5rem);padding-bottom:0;overflow:hidden}
.hoplab .manifeste h2{font-size:clamp(2rem,4.2vw,3.2rem);margin-bottom:.55em;max-width:14ch}
.hoplab .manifeste .hl-lead{font-size:clamp(1.1rem,1.5vw,1.35rem);font-weight:400;line-height:1.5;max-width:34ch}
.hoplab .manifeste .regle{width:72px;height:4px;background:var(--noir);margin:0 0 1.8rem}
.hoplab .manifeste .appui{font-size:.98rem;max-width:42ch;margin-top:1.6rem}
.hoplab .bouteille{width:min(72%,250px);height:auto;display:block;margin:2.5rem auto -3px}
@media(min-width:900px){.hoplab .manifeste{grid-template-columns:minmax(0,1fr) minmax(0,auto);align-items:center;column-gap:clamp(2rem,6vw,6rem)}
.hoplab .manifeste > div{padding-bottom:clamp(3.5rem,6vw,5.5rem)}
.hoplab .bouteille{width:clamp(210px,20vw,290px);margin:0 0 -3px 0;align-self:end}
}

/* ---------- Arguments pro ---------- */
.hoplab .pro-liste{list-style:none;padding:0;margin:3rem 0 0;display:grid;gap:0;grid-template-columns:1fr}
@media(min-width:820px){.hoplab .pro-liste{grid-template-columns:repeat(2,1fr);column-gap:clamp(2rem,5vw,4rem)}
}
.hoplab .pro-liste li{border-top:2px solid var(--jaune);padding:1.5rem 0}
.hoplab .pro-liste h3{font-size:1.15rem;margin-bottom:.4em}
.hoplab .pro-liste p{font-size:.96rem;margin:0;color:var(--creme)}
.hoplab .encart{background:var(--jaune);color:var(--noir);padding:clamp(2rem,4vw,3rem);margin-top:3.5rem;max-width:52rem}
.hoplab .encart h3{font-size:clamp(1.6rem,3vw,2.2rem);color:var(--noir);margin-bottom:.5em}
.hoplab .encart p{margin:0;font-weight:400}

/* ---------- FAQ ---------- */
.hoplab .faq{margin-top:3rem;max-width:80ch}
.hoplab .faq details{border-top:2px solid var(--noir);padding:1.3rem 0}
.hoplab .faq details[open] summary{margin-bottom:.9rem}
.hoplab .faq summary{
  font-family:var(--display);font-weight:700;font-size:1.1rem;
  cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:1.5rem;align-items:baseline;
}
.hoplab .faq summary::-webkit-details-marker{display:none}
.hoplab .faq summary::after{content:'+';font-size:1.5rem;line-height:1;flex:none}
.hoplab .faq details[open] summary::after{content:'–'}
.hoplab .faq p{font-size:.98rem}

/* ---------- Contact ---------- */
.hoplab .contact{text-align:center}
.hoplab .contact h2{margin-bottom:.5em}
.hoplab .contact p{margin-inline:auto;text-align:center}
.hoplab .contact .actions{justify-content:center}
.hoplab .coord{margin-top:3rem;font-size:.95rem;line-height:1.9}
.hoplab .coord a{text-decoration:underline;text-underline-offset:3px}

/* Le theme (Bootstrap 3) ne declare pas main en block */
.hoplab main { display: block; }

/* La navbar du theme est en absolu ; le hero, positionne et plus loin
   dans le DOM, se peignait par-dessus. */
.navbar { position: relative; z-index: 100; }
.hoplab .hl-hero { isolation: auto; }

/* Le theme affiche le footer en position fixe (revele au defilement).
   Sur cette page, il reprend le flux normal. */
.page-template-hop-lab footer { position: static; }
.page-template-hop-lab .wrapper { margin-bottom: 0; }
.page-template-hop-lab .hoplab { position: relative; z-index: 1; background: var(--creme); }

/* ============================================================
   Echelle typographique — revision
   Base 17 -> 20px, tous les niveaux remontes proportionnellement.
   ============================================================ */
.hoplab { font-size: clamp(1.05rem, .3vw + .98rem, 1.25rem); }
.hoplab .wrap { width: min(1340px, 92vw); }

/* Titres */
.hoplab h2 { font-size: clamp(2.2rem, 4.6vw, 3.8rem); }
.hoplab h3 { font-size: clamp(1.35rem, 2vw, 1.75rem); }
.hoplab .eyebrow { font-size: .82rem; }

/* Accroches */
.hoplab .duo .hl-lead,
.hoplab .manifeste .hl-lead { font-size: clamp(1.2rem, 1.5vw, 1.45rem); }
.hoplab .manifeste .appui,
.hoplab .intro-comp { font-size: 1.05rem; }

/* Savoir-faire */
.hoplab .savoir .num { font-size: clamp(2rem, 2.8vw, 2.6rem); }
.hoplab .savoir h3   { font-size: 1.22rem; }
.hoplab .savoir p    { font-size: 1.02rem; }

/* Fiches produit */
.hoplab .biere-question { font-size: .88rem; }
.hoplab .biere-nom      { font-size: 1.7rem; }
.hoplab .biere-tag      { font-size: 1rem; }
.hoplab .fiche dt       { font-size: .78rem; }
.hoplab .fiche dd       { font-size: 1rem; }
.hoplab .formats        { font-size: .92rem; }
.hoplab .ing summary    { font-size: .78rem; }
.hoplab .ing p          { font-size: .88rem; }
.hoplab .roue .etiq text { font-size: 12px; }

/* Comparateur */
.hoplab .comp-titre  { font-size: 1.3rem; }
.hoplab .pref,
.hoplab .bascule     { font-size: .95rem; }
.hoplab .reco-nom    { font-size: 1.8rem; }
.hoplab .reco-desc   { font-size: 1.02rem; }
.hoplab .radar .etiq text { font-size: 16px; }
.hoplab .hl-tab th[scope="col"] { font-size: .78rem; }
.hoplab .hl-tab tbody th,
.hoplab .hl-tab td   { font-size: 1.02rem; }

/* Professionnels, FAQ, contact */
.hoplab .pro-liste h3 { font-size: 1.28rem; }
.hoplab .pro-liste p  { font-size: 1.04rem; }
.hoplab .faq summary  { font-size: 1.22rem; }
.hoplab .faq p        { font-size: 1.04rem; }
.hoplab .coord        { font-size: 1.02rem; }

/* Pastilles et boutons */
.hoplab .chips li { font-size: .92rem; }
.hoplab .chips-sm li { font-size: .8rem; }
.hoplab .hl-btn { font-size: 1rem; }

/* ============================================================
   Echelle typographique — seconde passe (+18%)
   Base 20 -> 23px. Interlignage resserre pour compenser.
   ============================================================ */
.hoplab { font-size: clamp(1.2rem, .35vw + 1.1rem, 1.45rem); line-height: 1.6; }

.hoplab h2 { font-size: clamp(2.6rem, 5.2vw, 4.4rem); }
.hoplab h3 { font-size: clamp(1.55rem, 2.3vw, 2.05rem); }
.hoplab .eyebrow { font-size: .95rem; }

.hoplab .duo .hl-lead,
.hoplab .manifeste .hl-lead { font-size: clamp(1.4rem, 1.75vw, 1.7rem); }
.hoplab .manifeste .appui,
.hoplab .intro-comp { font-size: 1.22rem; }

.hoplab .savoir .num { font-size: clamp(2.3rem, 3.2vw, 3rem); }
.hoplab .savoir h3   { font-size: 1.42rem; }
.hoplab .savoir p    { font-size: 1.18rem; }

.hoplab .biere-question { font-size: 1rem; }
.hoplab .biere-nom      { font-size: 2rem; }
.hoplab .biere-tag      { font-size: 1.15rem; }
.hoplab .fiche dt       { font-size: .88rem; }
.hoplab .fiche dd       { font-size: 1.15rem; }
.hoplab .formats        { font-size: 1.06rem; }
.hoplab .ing summary    { font-size: .88rem; }
.hoplab .ing p          { font-size: 1rem; }
.hoplab .roue .etiq text { font-size: 14px; }

.hoplab .comp-titre  { font-size: 1.5rem; }
.hoplab .pref,
.hoplab .bascule     { font-size: 1.1rem; }
.hoplab .reco-nom    { font-size: 2.1rem; }
.hoplab .reco-desc   { font-size: 1.18rem; }
.hoplab .radar .etiq text { font-size: 19px; }
.hoplab .hl-tab th[scope="col"] { font-size: .88rem; }
.hoplab .hl-tab tbody th,
.hoplab .hl-tab td   { font-size: 1.18rem; }

.hoplab .pro-liste h3 { font-size: 1.48rem; }
.hoplab .pro-liste p  { font-size: 1.2rem; }
.hoplab .faq summary  { font-size: 1.42rem; }
.hoplab .faq p        { font-size: 1.2rem; }
.hoplab .coord        { font-size: 1.18rem; }

.hoplab .chips li    { font-size: 1.06rem; }
.hoplab .chips-sm li { font-size: .92rem; }
.hoplab .hl-btn      { font-size: 1.15rem; }

/* Le texte occupant plus de place, on elargit la mesure de lecture
   et on reduit le nombre de colonnes des fiches sur ecran moyen. */
.hoplab { --mesure: 58ch; }
.hoplab .biere-question { min-height: 5em; }