@charset "UTF-8";
/*=============================================================================
  Recherche « Le Catalogue » (lot/recherche-catalogue, maquette B) : page de recherche, toutes les bières et résultats
  gabarit/catalogue-bandeau.php, gabarit/catalogue-2026.php (bureau), gabarit/catalogue-amp.php (AMP), fonctions/catalogue.php
  Feuille chargée sur ces pages seulement ($recherche_catalogue). La partie avant « FIN COMMUN » est reprise en AMP par style_amp_catalogue() :
  ni !important, ni variable propre au gabarit 2026 (budget CSS AMP de 75 000 octets) ; écrite pour le téléphone, la fin l'adapte au bureau.
  =============================================================================*/

.cat {font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; color: #1f1a17;}
.cat h1, .cat h2, .cat-chiffres dd, .cat-famille__nb, .cat-palmares__rang, .cat-statut {font-family: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;}
.cat a {color: #9a5a0c;}
.cat a:hover {color: #6e3510;}

/*----- Bandeau : fil d'Ariane, H1, phrase, chiffres, recherche par nom -----*/
.cat-bandeau {background: #fbf7f0; border-bottom: 1px solid #e6d9c3;}
.cat-bandeau__int {padding: 14px 16px 18px;}
.cat-ariane ol {display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; padding: 0; list-style: none; font-size: 14px; color: #5c5048;}
.cat-ariane li {margin: 0; padding: 0;}
.cat h1 {margin: 0; font-size: 30px; font-weight: 700; line-height: 1.1; color: #24170f;}
.cat-intro {margin: 8px 0 0; font-size: 16px; line-height: 1.5; color: #5c5048;}
.cat-entete {display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px 24px;}
.cat-entete__texte {flex: 999 1 520px; min-width: 0;}
.cat-chiffres {display: flex; flex: 1 1 auto; gap: 8px; margin: 0;}
.cat-chiffres div {display: flex; flex-direction: column-reverse; flex: 1 1 0; min-width: 0; padding: 8px 12px; background: #fff; border: 1px solid #e6d9c3; border-radius: 12px;}
.cat-chiffres dd {margin: 0; font-size: 24px; font-weight: 700; line-height: 1.1; color: #9a5a0c; white-space: nowrap;}
.cat-chiffres dt {font-size: 13px; line-height: 1.3; color: #5c5048;}
.cat-nom {display: flex; align-items: stretch; margin: 16px 0 0; background: #fff; border: 2px solid #3a2618; border-radius: 14px; overflow: hidden; box-shadow: 0 8px 22px rgba(36, 23, 15, .10);}
.cat-nom:focus-within {box-shadow: 0 0 0 3px #e8a93a, 0 8px 22px rgba(36, 23, 15, .10);}
.cat-nom__libelle {display: none;}
.cat-nom input {flex: 1 1 auto; min-width: 0; min-height: 52px; margin: 0; padding: 0 14px; background: transparent; border: 0; border-radius: 0; font: inherit; font-size: 17px; color: #1f1a17; outline: none; -webkit-appearance: none; appearance: none;}
.cat-nom input::placeholder {color: #767676; opacity: 1;}
.cat-nom__bouton {display: flex; flex: none; align-items: center; justify-content: center; gap: 8px; margin: 0; padding: 0 16px; background: #3a2618; border: 0; border-radius: 0; font: inherit; font-size: 16px; font-weight: 700; color: #fbf7f0; cursor: pointer;}
.cat-nom__bouton:hover {background: #24170f;}
.cat-nom__bouton span {position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;}
.cat-entete--compact {align-items: center;}
.cat-entete--compact h1 {flex: 1 1 auto;}
.cat-entete--compact .cat-entete__texte {flex: 1 1 320px;}	/* lot/toutes-textes : page de brasserie, H1 et phrase */
.cat-entete--compact .cat-intro {margin-top: 6px; font-size: 15px;}
.cat-entete--compact .cat-nom {flex: 1 1 320px; margin: 0;}
.cat-entete--compact .cat-nom input {min-height: 46px; font-size: 16px;}

/*----- Corps -----*/
.cat-corps {padding: 0;}
.cat-contenu {display: flex; flex-direction: column; gap: 32px; min-width: 0;}

/*----- Panneau des filtres -----*/
.cat-filtres {margin: 0 0 24px; text-align: left; background: #fff; border: 1px solid #e6d9c3; border-radius: 16px; box-shadow: 0 1px 2px rgba(36, 23, 15, .05), 0 12px 30px rgba(36, 23, 15, .10);}
.cat-filtres__haut {display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 12px 16px 10px; border-bottom: 1px solid #efe4d2;}
.cat .cat-filtres h2 {margin: 0; font-size: 22px; line-height: 1.2;}
.cat-filtres__nb {font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; font-size: 15px; font-weight: 600; color: #9a5a0c;}
.cat a.cat-raz {display: inline-flex; align-items: center; min-height: 36px; font-size: 14px; font-weight: 600; color: #9a5a0c;}
.cat-filtres__defil {padding: 0 16px 16px;}
.cat-filtres .cmp-champ {margin: 0; padding: 0; border: 0; min-width: 0;}
.cat-filtres .cmp-champ > label, .cat-filtres .cmp-champ > legend {display: block; margin: 0 0 6px; padding: 0; font-size: 14px; font-weight: 700; color: #3a2618;}
.cat-filtres .cmp-champ select, .cat-filtres .cmp-champ input[type=search], .cat-filtres .cmp-champ input[type=text] {box-sizing: border-box; width: 100%; min-height: 44px; margin: 0; padding: 0 10px; background: #fff; border: 1px solid #d8c7aa; border-radius: 10px; font: inherit; font-size: 15px; color: #1f1a17;}
.cat-filtres .cmp-champ select:focus-visible, .cat-filtres .cmp-champ input:focus-visible {outline: 3px solid #e8a93a; outline-offset: 1px;}
.cat-groupe {display: flex; flex-direction: column; gap: 14px; margin-top: 16px; padding-top: 14px; border-top: 1px solid #efe4d2;}
.cat-couleurs {padding-top: 14px;}

/* Couleur : pastilles sur plusieurs lignes au téléphone (liste verticale au bureau, voir plus bas) */
.cat-couleurs__liste {display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0;}
.cat-couleur {position: relative; flex: none; display: block; margin: 0;}
.cat-couleur input {position: absolute; top: 0; left: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer;}
.cat-couleur > span {display: flex; align-items: center; gap: 7px; min-height: 40px; padding: 0 14px; background: #fff; border: 1px solid #d8c7aa; border-radius: 999px; font-size: 15px; white-space: nowrap; color: #1f1a17;}
.cat-couleur .cmp-puce__nb {font-size: 13px; font-weight: 400; color: #5c5048;}
.cat-couleur input:checked + span {background: #3a2618; border-color: #3a2618; color: #fbf7f0; font-weight: 700;}
.cat-couleur input:checked + span .cmp-puce__nb {color: #f3e6cf;}
.cat-couleur input:focus-visible + span {outline: 3px solid #e8a93a; outline-offset: 2px;}
.cat-couleur input:disabled {cursor: not-allowed;}
.cat-couleur input:disabled + span {color: #8a7f75; background: #f6f1e8; border-style: dashed;}
.cat .cmp-teinte {flex: none; width: 14px; height: 14px; border: 1px solid rgba(36, 23, 15, .25); border-radius: 50%;}
.cat-couleur input:checked + span .cmp-teinte {border-color: rgba(251, 247, 240, .6);}

/* Degré d'alcool et « Bière sans alcool », l'un sous l'autre */
.cat-filtres .cmp-alcool {display: block; background: none; border: 0; border-radius: 0;}
.cat-filtres .cmp-alcool__plage {padding: 0;}
.cat-filtres .cmp-alcool__valeurs {margin: 0 0 2px;}
.cat-filtres .cmp-alcool__echelle {display: none;}
.cat-filtres .cmp-champ label.cmp-switch, .cat-filtres .cmp-alcool > label.cmp-switch {min-height: 44px; margin-top: 8px; padding: 6px 0; border: 0; border-top: 0; font-size: 15px;}
.cat-filtres .cmp-switch__titre {font-size: 15px; font-weight: 400;}
.cat-filtres .cmp-switch input:disabled ~ .cmp-switch__piste {opacity: .45;}
.cat-filtres .cmp-switch:has(input:disabled) {color: #8a7f75; cursor: not-allowed;}

/* Ville et brasserie */
.cat-filtres .cmp-combo {position: relative;}
.cmp-suggestions__entete {margin: 6px 0 0; padding: 0 4px; font-size: 12px; line-height: 1.4; color: #5c5048;}
.cmp-suggestions__entete[hidden] {display: none;}

/* « Plus de critères » / « Moins de critères » : fermentation, saison, mot-clé. Ouverture animée là où le navigateur le permet (interpolate-size) */
.cat-plus {margin-top: 18px;}
.cat-plus > summary {display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 6px 14px; background: #fbf7f0; border: 1.5px dashed #c9a46a; border-radius: 12px; list-style: none; cursor: pointer; transition: border-color .2s ease, background-color .2s ease;}
.cat-plus > summary::-webkit-details-marker {display: none;}
.cat-plus > summary:hover {border-color: #9a5a0c;}
.cat-plus > summary:focus-visible {outline: 3px solid #e8a93a; outline-offset: 2px;}
.cat-plus[open] > summary {background: #fff; border-style: solid;}
.cat-plus__ico {display: flex; flex: none; align-items: center; justify-content: center; width: 30px; height: 30px; background: #3a2618; border-radius: 50%; color: #fbf7f0; transition: transform .25s ease;}
.cat-plus[open] .cat-plus__ico {transform: rotate(180deg);}
.cat-plus__texte {flex: 1 1 auto; min-width: 0; font-size: 15px; font-weight: 700; color: #3a2618;}
.cat-plus__fermer, .cat-plus[open] .cat-plus__ouvrir {display: none;}
.cat-plus[open] .cat-plus__fermer {display: inline;}
.cat-plus__corps {display: flex; flex-direction: column; gap: 14px; padding: 14px 2px 4px;}
.cat-plus__duo {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px;}
@supports (interpolate-size: allow-keywords) {
	.cat-plus {interpolate-size: allow-keywords;}
	.cat-plus::details-content {block-size: 0; overflow: hidden; transition: block-size .3s ease, content-visibility .3s allow-discrete;}
	.cat-plus[open]::details-content {block-size: auto;}
}

/* Pied du panneau : « Voir N bières » */
.cat-filtres__pied {padding: 12px 16px 16px; border-top: 1px solid #efe4d2;}
.cat .cat-voir {display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 50px; margin: 0; padding: 0 16px; border: 0; border-radius: 12px; font: inherit; font-size: 16px; font-weight: 700; color: #2a1206; background: linear-gradient(#ffd27a, #f0a23a 55%, #c96a1c); box-shadow: 0 3px 0 #6e3510; cursor: pointer;}
.cat .cat-voir:hover {background: linear-gradient(#ffdc92, #f3ad4c 55%, #d2772a);}
.cat .cat-voir:active {transform: translateY(2px); box-shadow: 0 1px 0 #6e3510;}
.cat .cat-voir:focus-visible {outline: 3px solid #24170f; outline-offset: 3px;}
.cat .cat-voir:disabled {background: #efe6d6; color: #5c5048; box-shadow: none; cursor: not-allowed; transform: none;}
.cat .cat-voir:disabled .cmp-bouton__icone {display: none;}

/*----- Sections de la page de recherche -----*/
.cat-section__haut {display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; margin-bottom: 12px;}
.cat .cat-section h2 {margin: 0; font-size: 24px; line-height: 1.2; color: #24170f;}
.cat .cat-section > h2 {margin-bottom: 12px;}
.cat-section__haut a {font-size: 15px; font-weight: 600;}
.cat-section__suite {margin: 12px 0 0; font-size: 15px;}
.cat-section__suite a {font-weight: 600;}

/* Familles de styles */
.cat-familles {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none;}
.cat-familles li {margin: 0; padding: 0;}
.cat a.cat-famille {display: flex; flex-direction: column; height: 100%; box-sizing: border-box; overflow: hidden; background: #fff; border: 1px solid #e6d9c3; border-radius: 14px; color: #1f1a17; text-decoration: none; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;}
.cat a.cat-famille:hover {border-color: #c9a46a; box-shadow: 0 8px 20px rgba(36, 23, 15, .12); transform: translateY(-2px); color: #1f1a17;}
.cat a.cat-famille:focus-visible {outline: 3px solid #e8a93a; outline-offset: 2px;}
.cat-famille__haut {display: flex; align-items: flex-end; justify-content: space-between; height: 76px; padding: 0 14px; background: #2b1c12;}
.cat-verre--famille {margin-bottom: -2px;}
.cat-famille__nb {margin-bottom: 12px; font-size: 24px; font-weight: 700; color: #e8a93a;}
.cat-famille__bas {padding: 10px 14px 12px;}
.cat-famille__nom {display: block; font-size: 15px; font-weight: 700; line-height: 1.25;}
.cat-famille__sous {display: block; margin-top: 3px; font-size: 13px; line-height: 1.35; color: #5c5048;}

/* Pays les plus représentés */
.cat-pays {display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 12px 16px; list-style: none; background: #fff; border: 1px solid #e6d9c3; border-radius: 14px;}
.cat-pays li {margin: 0; padding: 0;}
.cat-pays a {display: grid; grid-template-columns: 120px minmax(0, 1fr) 44px; align-items: center; gap: 12px; min-height: 40px; color: #1f1a17; text-decoration: none;}
.cat-pays a:hover {color: #9a5a0c;}
.cat-pays__nom {font-size: 15px; font-weight: 600; line-height: 1.25;}
.cat-pays__barre {display: block; height: 12px; background: #f3eadb; border-radius: 6px;}
.cat-pays__barre span {display: block; height: 12px; background: #c9771f; border-radius: 6px;}
.cat-pays a:hover .cat-pays__barre span {background: #9a5a0c;}
.cat-pays__nb {font-size: 15px; font-weight: 700; text-align: right; color: #3a2618;}
.cat-l1{width:5%}.cat-l2{width:10%}.cat-l3{width:15%}.cat-l4{width:20%}.cat-l5{width:25%}.cat-l6{width:30%}.cat-l7{width:35%}.cat-l8{width:40%}.cat-l9{width:45%}.cat-l10{width:50%}.cat-l11{width:55%}.cat-l12{width:60%}.cat-l13{width:65%}.cat-l14{width:70%}.cat-l15{width:75%}.cat-l16{width:80%}.cat-l17{width:85%}.cat-l18{width:90%}.cat-l19{width:95%}.cat-l20{width:100%}

/* Palmarès : onglets sans script (boutons radio) */
.cat-palmares {overflow: hidden; background: #fff; border: 1px solid #e6d9c3; border-radius: 14px;}
.cat-onglet {position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip: rect(0 0 0 0); opacity: 0;}
.cat-onglets {display: flex; background: #fbf7f0; border-bottom: 1px solid #e6d9c3;}
.cat-onglets label {display: flex; flex: 1 1 0; align-items: center; justify-content: center; min-height: 50px; padding: 0 10px; border-bottom: 3px solid transparent; font-size: 15px; font-weight: 600; text-align: center; color: #5c5048; cursor: pointer;}
.cat-onglets label:hover {color: #24170f;}
#cat-onglet-notees:checked ~ .cat-onglets label[for=cat-onglet-notees], #cat-onglet-consultees:checked ~ .cat-onglets label[for=cat-onglet-consultees] {background: #fff; border-bottom-color: #9a5a0c; font-weight: 700; color: #24170f;}
#cat-onglet-notees:focus-visible ~ .cat-onglets label[for=cat-onglet-notees], #cat-onglet-consultees:focus-visible ~ .cat-onglets label[for=cat-onglet-consultees] {outline: 3px solid #e8a93a; outline-offset: -3px;}
#cat-onglet-notees:checked ~ .cat-palmares__liste--consultees, #cat-onglet-consultees:checked ~ .cat-palmares__liste--notees {display: none;}
.cat-palmares__aide {margin: 0; padding: 10px 16px 0; font-size: 13px; color: #5c5048;}
.cat-palmares ol {margin: 0; padding: 4px 16px 10px; list-style: none;}
.cat-palmares li {display: flex; align-items: center; gap: 12px; min-height: 52px; margin: 0; padding: 0; border-top: 1px solid #f1e7d6;}
.cat-palmares li:first-child {border-top: 0;}
.cat-palmares__rang {flex: none; width: 26px; font-size: 22px; font-weight: 700; color: #9a5a0c;}
.cat a.cat-palmares__nom {flex: 1 1 auto; min-width: 0; font-size: 16px; font-weight: 700; color: #1f1a17; text-decoration: none;}
.cat a.cat-palmares__nom:hover {color: #9a5a0c; text-decoration: underline;}
.cat a.cat-palmares__fiche {display: none;}

/* Comment comparer les bières */
.cat-aide {padding: 20px; background: #fbf7f0; border: 1px solid #e6d9c3; border-radius: 16px; font-size: 15px; color: #3a2618;}
.cat-etapes {display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; margin: 0; padding: 0; list-style: none; counter-reset: etape;}
.cat-etapes li {position: relative; margin: 0; padding: 0 0 0 40px; counter-increment: etape;}
.cat-etapes li::before {content: counter(etape); position: absolute; top: 0; left: 0; display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; background: #3a2618; border-radius: 50%; font-size: 14px; font-weight: 700; color: #fbf7f0;}
.cat .cat-etapes p {margin: 0; font-size: 15px; line-height: 1.55; text-align: left; color: #3a2618;}

/*----- Résultats -----*/
.cat-resultats__haut {display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 0 0 4px;}
.cat .cat-statut {margin: 0; font-size: 24px; font-weight: 700; line-height: 1.2; color: #24170f;}
.cat .cmp-criteres {margin: 0;}
.cat .cmp-criteres a:link, .cat .cmp-criteres a:visited {display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 12px; background: #3a2618; border: 0; border-radius: 999px; font-size: 14px; font-weight: 600; color: #fbf7f0; text-decoration: none;}
.cat .cmp-criteres a:hover {background: #24170f; color: #fff;}
.cat-verre {flex: none; display: block;}
.cat-symboles {position: absolute; width: 0; height: 0; overflow: hidden;}

/* lot/toutes-textes (PERF-4 A) : listes allégées. Verre teinté dessiné en CSS (liseré ::before, verre ::after, teinte --t de la classe tN écrite
   une fois par page), jauge d'avis en un seul élément (.ja : barre ::before, curseur ::after au cran jN ; sans pointeur : le clic passe au lien de la ligne), lien de fiche unique couvrant la ligne */
.ja {position: relative; display: inline-flex; pointer-events: none; font-size: 14px; flex-wrap: wrap; align-items: center; gap: 2px 8px; line-height: 20px; white-space: nowrap;}
.ja::before {content: ""; flex: none; width: 64px; height: 8px; border-radius: 4px; background: linear-gradient(90deg, #d7261e, #e8a93a 50%, #3a9a2b);}
.ja::after {content: ""; position: absolute; top: 1px; left: calc(var(--p, 0) * 1.6px - 5px); border: 5px solid transparent; border-top: 6px solid #24170f; border-bottom: 0;}
.ja small {flex-basis: 100%; font-size: 12px; line-height: 1.35; color: #5c5048;}
.ja.jx {color: #5c5048;}
.ja.jx::before {background: #e6d9c3;}
.ja.jx::after {content: none;}
.j1{--p:1}.j2{--p:2}.j3{--p:3}.j4{--p:4}.j5{--p:5}.j6{--p:6}.j7{--p:7}.j8{--p:8}.j9{--p:9}.j10{--p:10}.j11{--p:11}.j12{--p:12}.j13{--p:13}.j14{--p:14}.j15{--p:15}.j16{--p:16}.j17{--p:17}.j18{--p:18}.j19{--p:19}.j20{--p:20}.j21{--p:21}.j22{--p:22}.j23{--p:23}.j24{--p:24}.j25{--p:25}.j26{--p:26}.j27{--p:27}.j28{--p:28}.j29{--p:29}.j30{--p:30}.j31{--p:31}.j32{--p:32}.j33{--p:33}.j34{--p:34}.j35{--p:35}.j36{--p:36}.j37{--p:37}.j38{--p:38}.j39{--p:39}.j40{--p:40}

/* Cartes de résultats (AMP) : verre à gauche, nom et degré, type, couleur et brasserie, avis ; le lien du nom couvre toute la carte (::after),
   la flèche est son ::before ; le lien de la brasserie passe au-dessus */
.cat-cartes {display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none;}
.cat-cartes li {margin: 0; padding: 0;}
.kk {position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 3px 10px; min-height: 41px; padding: 12px 40px 12px 52px; background: #fff; border: 1px solid #e6d9c3; border-radius: 14px; color: #1f1a17;}
.kk::before, .kk::after {content: ""; position: absolute; top: 50%; left: 14px; width: 26px; height: 41px; margin-top: -20.5px; clip-path: polygon(0 0, 100% 0, 84% 100%, 16% 100%);}
.kk::before {background: rgba(36, 23, 15, .45);}
.kk::after {width: 24.4px; height: 39.4px; margin: -19.7px 0 0 .8px; background: linear-gradient(90deg, transparent 22%, rgba(255, 255, 255, .38) 22% 36%, transparent 36%), linear-gradient(180deg, #fbf7f0 0 22%, #f3e3c4 22% 26%, var(--t, #e6ae2f) 26%);}
.cat a.kt {font-size: 16px; font-weight: 700; line-height: 1.25; color: #1f1a17; text-decoration: none;}
.cat a.kt::after {content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; border-radius: 14px;}	/* lot/brasserie-liens : toute la carte mène à la fiche */
.cat a.kt::before {content: ""; position: absolute; top: 50%; right: 17px; width: 8px; height: 8px; margin-top: -5px; border-top: 2.4px solid #9a5a0c; border-right: 2.4px solid #9a5a0c; transform: rotate(45deg);}
.kv {padding: 1px 8px; background: #fbf1df; border-radius: 999px; font-size: 13px; font-weight: 700; color: #6e3510;}
.ki {grid-column: 1 / -1; font-size: 13px; line-height: 1.35; color: #5c5048;}
.kk .ja {grid-column: 1 / -1;}
.cat a.kr {position: relative; z-index: 1; color: inherit; text-decoration: none;}
.cat a.kr:hover, .cat a.kr:focus-visible {color: #b8650f;}
.cat-ajout {padding: 14px 16px; background: #fbf7f0; border: 1px solid #e6d9c3; border-radius: 14px; font-size: 15px; color: #3a2618;}

/*----- FIN COMMUN : la suite ne concerne que la page desktop (gabarit 2026) -----*/
/* Partage (lot/partage-contextuel) : fil d'Ariane à gauche, barre de partage à droite (ordinateur) */
.site-v2 .cat-bandeau__ligne {display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 16px; margin: 0 0 12px;}
.site-v2 .cat-bandeau__ligne .cat-ariane ol {margin: 0;}
.site-v2 .cat-bandeau__ligne .partage-ctx {gap: 6px 10px;}
.site-v2 .cat-bandeau__ligne .partage-ctx p.partage-ctx__libelle {font-size: 14px;}

/* Le contenu n'est plus une carte blanche : bandeau, panneau et sections posés sur le fond crème, comme la maquette */
.site-v2 .site-main.site-main--catalogue {padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none; overflow: visible;}
.site-v2 .cat-bandeau__int {max-width: var(--largeur-max); box-sizing: border-box; margin: 0 auto; padding: 20px var(--gouttiere) 26px;}
.site-v2 .cat-bandeau--compact .cat-bandeau__int {padding-top: 16px; padding-bottom: 18px;}
.site-v2 .cat-bandeau + .site-corps {margin-top: 24px;}
.site-v2 .cat h1 {width: auto; margin: 0; padding: 0; background: none; border: 0; text-align: left; font-size: clamp(30px, 3.6vw, 46px); line-height: 1.08;}
.site-v2 .cat-bandeau--compact h1 {font-size: clamp(28px, 3vw, 36px);}
.site-v2 .cat-intro {max-width: 640px; font-size: 18px;}
.site-v2 .cat-chiffres {flex: 0 1 auto;}
.site-v2 .cat-chiffres div {flex: none; min-width: 104px; padding: 10px 16px;}
.site-v2 .cat-chiffres dd {font-size: 28px;}
.site-v2 .cat-nom {margin-top: 22px;}
.site-v2 .cat-nom__libelle {display: flex; flex: none; align-items: center; gap: 10px; padding: 0 6px 0 18px; font-size: 14px; font-weight: 700; color: #3a2618; white-space: nowrap; cursor: text;}
.site-v2 .cat-nom input {min-height: 58px; font-size: 18px;}
.site-v2 .cat-nom__bouton {padding: 0 30px; font-size: 17px;}
.site-v2 .cat-nom__bouton .cmp-bouton__icone {display: none;}
.site-v2 .cat-nom__bouton span {position: static; width: auto; height: auto; overflow: visible; clip: auto;}
.site-v2 .cat-entete--compact .cat-nom {flex: 0 1 560px;}
.site-v2 .cat-entete--compact .cat-nom__libelle {display: none;}
.site-v2 .cat-entete--compact .cat-nom input {min-height: 48px; font-size: 16px;}
.site-v2 .cat-entete--compact .cat-nom__bouton {padding: 0 22px; font-size: 15px;}
@media (max-width: 640px) {
	.site-v2 .cat-nom__libelle {display: none;}
	.site-v2 .cat-nom__bouton {padding: 0 16px;}
	.site-v2 .cat-chiffres div {flex: 1 1 0; min-width: 0; padding: 8px 12px;}
	.site-v2 .cat-chiffres dd {font-size: 24px;}
}

/* Panneau collant : en-tête et bouton fixes, critères qui défilent à l'intérieur (la page ne défile pas avec eux : overscroll-behavior) */
.site-v2 .cat-corps {display: grid; grid-template-columns: 290px minmax(0, 1fr); align-items: start; gap: 28px;}
.site-v2 .cat-filtres {position: sticky; top: calc(var(--hauteur-nav) + 12px); display: flex; flex-direction: column; max-height: calc(100vh - var(--hauteur-nav) - 24px); max-height: calc(100dvh - var(--hauteur-nav) - 24px); margin: 0; overflow: hidden;}
.site-v2 .cat-filtres__haut, .site-v2 .cat-filtres__pied {flex: none;}
.site-v2 .cat-filtres__defil {flex: 1 1 auto; min-height: 0; padding: 0 12px 18px 18px; overflow-y: auto; overscroll-behavior: contain; scroll-behavior: smooth; scrollbar-width: thin; scrollbar-color: #c9b48f transparent; scrollbar-gutter: stable;
	background: linear-gradient(#fff 30%, rgba(255, 255, 255, 0)) top / 100% 28px no-repeat local, linear-gradient(rgba(255, 255, 255, 0), #fff 70%) bottom / 100% 28px no-repeat local,
		radial-gradient(farthest-side at 50% 0, rgba(36, 23, 15, .18), transparent) top / 100% 10px no-repeat scroll, radial-gradient(farthest-side at 50% 100%, rgba(36, 23, 15, .18), transparent) bottom / 100% 10px no-repeat scroll;
	background-color: #fff;}	/* ombres en haut et en bas tant qu'il reste des critères à faire défiler */
.site-v2 .cat-filtres__haut {padding: 14px 18px 10px;}
.site-v2 .cat .cat-filtres h2 {font-size: 24px;}
.site-v2 .cat-filtres__pied {padding: 12px 18px 16px; background: #fff;}

/* Couleur : liste verticale de boutons radio, nombre à droite */
.site-v2 .cat-couleur {display: block;}
.site-v2 .cat-couleurs__liste {flex-direction: column; flex-wrap: nowrap; gap: 2px;}
.site-v2 .cat-couleur > span {display: flex; gap: 10px; min-height: 40px; padding: 0 10px; background: none; border: 0; border-radius: 8px;}
.site-v2 .cat-couleur > span::before {content: ""; flex: none; box-sizing: border-box; width: 18px; height: 18px; border: 2px solid #9a8a74; border-radius: 50%; background: #fff;}
.site-v2 .cat-couleur .cmp-puce__nb {margin-left: auto; font-size: 14px;}
.site-v2 .cat-couleur:hover > span {background: #f6efe3;}
.site-v2 .cat-couleur input:checked + span {background: #fbf1df; color: #3a2618;}
.site-v2 .cat-couleur input:checked + span .cmp-puce__nb {color: #5c5048;}
.site-v2 .cat-couleur input:checked + span::before {border: 5px solid #9a5a0c;}
.site-v2 .cat-couleur input:checked + span .cmp-teinte {border-color: rgba(36, 23, 15, .25);}
.site-v2 .cat-couleur input:focus-visible + span {outline-offset: 0;}
.site-v2 .cat-couleur input:disabled + span {background: none; border: 0;}
.site-v2 .cat-couleur input:disabled + span::before {border-color: #d8cfc2;}
.site-v2 .cat-couleur:has(input:disabled):hover > span {background: none;}

/* Ville et brasserie : la liste s'ouvre sous le champ, dans le panneau (elle ne recouvre pas les critères suivants) */
.site-v2 .cat-filtres .cmp-combo__bouton {bottom: auto; height: 42px; border-left: 1px solid #efe4d2;}
.site-v2 .cat-filtres .cmp-suggestions {position: static; max-height: 232px; margin: 4px 0 0; padding: 6px; overscroll-behavior: contain; scrollbar-width: thin; border-color: #d8c7aa; border-radius: 12px; box-shadow: 0 10px 24px rgba(36, 23, 15, .14);}
.site-v2 .cat-filtres .cmp-suggestions li {display: flex; align-items: center; gap: 4px; min-height: 40px; box-sizing: border-box; padding: 6px 10px; border-radius: 8px; font-size: 14px;}
.site-v2 .cat-filtres .cmp-suggestions li .cmp-puce__nb {margin-left: auto; padding-left: 8px; font-size: 13px;}
.site-v2 .cat-filtres .cmp-combo input[aria-expanded="true"] {border-color: #9a5a0c;}
.site-v2 .cat-plus__duo {grid-template-columns: minmax(0, 1fr);}

/* Sections */
.site-v2 .cat .cat-section h2 {font-size: 28px;}
.site-v2 .cat-aide h2 {font-size: 24px;}
.site-v2 .cat-familles {grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px;}
.site-v2 .cat-famille__haut {height: 86px; padding: 0 16px;}
.site-v2 .cat-famille__nb {margin-bottom: 14px; font-size: 26px;}
.site-v2 .cat-famille__bas {padding: 12px 16px 14px;}
.site-v2 .cat-famille__nom {font-size: 16px;}
.site-v2 .cat-pays {padding: 16px 20px;}
.site-v2 .cat-pays a {grid-template-columns: 170px minmax(0, 1fr) 52px; gap: 14px;}
.site-v2 .cat-palmares ol {padding: 6px 20px 12px;}
.site-v2 .cat-palmares__aide {padding: 12px 20px 0;}
.site-v2 .cat-palmares__rang {width: 30px;}
.site-v2 .cat a.cat-palmares__fiche {display: inline-flex; flex: none; align-items: center; min-height: 36px; padding: 0 14px; border: 1px solid #d8c7aa; border-radius: 999px; font-size: 14px; font-weight: 600; color: #3a2618; text-decoration: none;}
.site-v2 .cat a.cat-palmares__fiche:hover {border-color: #9a5a0c; background: #fbf1df;}
.site-v2 .cat-aide {padding: 24px 26px;}
.site-v2 .cat-etapes {grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 26px;}
.site-v2 .cat-ajout {text-align: left;}
.site-v2 .cat-aide .cat-ajout {margin: 18px 0 0; padding: 14px 0 0; background: none; border: 0; border-top: 1px solid #e6d9c3; border-radius: 0;}
.site-v2 .cat-ajout center {text-align: left;}
.site-v2 .cat-ajout #add1 center {text-align: center;}

/* Résultats : tri et filtre sur une barre, tableau à 5 colonnes */
.site-v2 .cat-contenu:has(.cat-table) {gap: 16px;}
.site-v2 .cat-outils {display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 14px; padding: 10px 12px; background: #fff; border: 1px solid #e6d9c3; border-radius: 12px;}
.site-v2 .cat-outils:not(:has(.cmp-trier)):has(.cmp-outils[hidden]) {display: none;}
.site-v2 .cat-outils .cmp-trier {margin: 0;}
.site-v2 .cat-outils .cmp-trier__aide {flex-basis: 100%; margin: 0; order: 3;}
.site-v2 .cat-outils .cmp-trier a:link, .site-v2 .cat-outils .cmp-trier a:visited, .site-v2 .cat-outils .cmp-trier span[aria-current] {min-height: 36px; border-color: transparent; border-radius: 8px; background: none; color: #3a2618;}
.site-v2 .cat-outils .cmp-trier a:hover {background: #f6efe3;}
.site-v2 .cat-outils .cmp-trier span[aria-current] {background: #3a2618; color: #fbf7f0;}
.site-v2 .cat-outils .cmp-outils {margin: 0;}
.site-v2 .cat-outils .cmp-outils input {flex: 0 1 190px; min-height: 36px;}
.site-v2 .cat-contenu > .cmp-trier__aide {margin: -6px 0 0;}
.site-v2 .cat .cmp-az ul {margin: 0;}
.site-v2 .cat-tableau {container: cat-liste / inline-size; overflow: clip; background: #fff; border: 1px solid #e6d9c3; border-radius: 14px;}
.site-v2 .cat-table {width: 100%; margin: 0; border-collapse: collapse; font-size: 14px;}
.site-v2 .cat-table thead th {position: sticky; top: var(--hauteur-nav); z-index: 1; padding: 12px 8px; background: #fbf7f0; border-bottom: 1px solid #e6d9c3; font-size: 13px; font-weight: 700; text-align: left; color: #3a2618;}
.site-v2 .cat-table thead th:first-child {padding-left: 14px;}
.site-v2 .cat-table thead td {background: #fbf7f0; border-bottom: 1px solid #e6d9c3;}
.site-v2 .cat-table th[aria-sort] .cmp-tri {color: #9a5a0c;}
.site-v2 .cat-table th:not([aria-sort]) .cmp-tri:hover {color: #1f1a17; text-decoration: underline; text-underline-offset: 3px;}	/* en-tête clair : pas le blanc de design-2026.css, ni l'ambre de la colonne triée */
.site-v2 .cat-table th:not([aria-sort]) .cmp-tri:hover::after {opacity: .8;}
.site-v2 .cat-table tbody th, .site-v2 .cat-table tbody td {padding: 10px 8px; border-top: 1px solid #f1e7d6; font-weight: 400; text-align: left; vertical-align: middle; color: #3a2618;}
.site-v2 .cat-table tbody tr:first-child th, .site-v2 .cat-table tbody tr:first-child td {border-top: 0;}
.site-v2 .cat-table tbody th {width: 36%; padding-left: 14px;}
.site-v2 .cat-table tbody tr:hover {background: #fdf8ef;}
.site-v2 .cat-table .cat-num, .site-v2 .cat-table .kg {text-align: right; white-space: nowrap;}
.site-v2 .cat-table tbody .kg {font-weight: 700; color: #1f1a17;}
.site-v2 .cat-table thead .cat-num .cmp-tri {margin-left: auto;}
/* lot/toutes-textes : un seul lien de fiche par ligne (le nom), qui couvre toute la ligne (.kn::after, ligne en position relative) ; la brasserie passe
   au-dessus. Le rond fléché de l'ancienne colonne « fiche » est dessiné par la dernière cellule (::before, ::after), sans lien en double */
.site-v2 .cat-table tbody tr {position: relative;}
.site-v2 .cat a.kb {display: grid; grid-template-columns: 20px minmax(0, 1fr); column-gap: 12px; align-items: center; color: #1f1a17; text-decoration: none;}
.site-v2 .cat a.kb::before, .site-v2 .cat a.kb::after {content: ""; grid-area: 1 / 1 / 3 / 2; place-self: center; width: 20px; height: 32px; clip-path: polygon(0 0, 100% 0, 84% 100%, 16% 100%);}
.site-v2 .cat a.kb::before {background: rgba(36, 23, 15, .45);}
.site-v2 .cat a.kb::after {width: 18.6px; height: 30.6px; background: linear-gradient(90deg, transparent 22%, rgba(255, 255, 255, .38) 22% 36%, transparent 36%), linear-gradient(180deg, #fbf7f0 0 22%, #f3e3c4 22% 26%, var(--t, #e6ae2f) 26%);}
.site-v2 .kn {grid-column: 2; font-size: 15px; font-weight: 700; line-height: 1.3;}
.site-v2 .kn::after {content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0;}
.site-v2 .cat-table tbody tr:hover .kn, .site-v2 .cat a.kb:focus-visible .kn {color: #9a5a0c; text-decoration: underline;}
.site-v2 .kd {display: block; grid-column: 2; font-size: 13px; line-height: 1.35; color: #5c5048;}
.site-v2 .kr {display: block;}
.site-v2 .cat a.kr {position: relative; z-index: 1; width: fit-content;}
.site-v2 .cat-table .ja {min-width: 112px;}
.site-v2 .cat-table tbody td:last-child {padding-right: 60px;}
.site-v2 .cat-table tbody td:last-child::before, .site-v2 .cat-table tbody td:last-child::after {content: ""; position: absolute; top: 50%; pointer-events: none;}
.site-v2 .cat-table tbody td:last-child::before {right: 12px; width: 36px; height: 36px; margin-top: -18px; box-sizing: border-box; border: 1px solid #d8c7aa; border-radius: 50%;}
.site-v2 .cat-table tbody td:last-child::after {right: 28px; width: 7px; height: 7px; margin-top: -4.7px; border-top: 2.4px solid #9a5a0c; border-right: 2.4px solid #9a5a0c; transform: rotate(45deg);}
.site-v2 .cat-table tbody tr:hover td:last-child::before {background: #fbf1df; border-color: #9a5a0c;}
html.cmp-progressif .site-v2 .cat-table tbody tr:nth-child(n+61),
html.cmp-progressif-actif .site-v2 .cat-table tbody tr.cmp-attente {display: none;}
.site-v2 .cat-table tbody tr[hidden] {display: none;}

/* Colonne étroite : la couleur passe sous le nom, puis chaque bière devient une carte */
@container cat-liste (max-width: 640px) {
	.site-v2 .cat-table thead th:nth-child(2), .site-v2 .cat-table tbody .kc {display: none;}
}
@container cat-liste (max-width: 520px) {
	.site-v2 .cat-table thead {display: none;}
	.site-v2 .cat-table tbody tr {display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "biere biere" "brasserie brasserie" "avis degre"; gap: 4px 12px; padding: 12px 60px 12px 14px; border-top: 1px solid #f1e7d6;}
	.site-v2 .cat-table tbody tr:first-child {border-top: 0;}
	.site-v2 .cat-table tbody th, .site-v2 .cat-table tbody td {padding: 0; border: 0;}
	.site-v2 .cat-table tbody th {grid-area: biere; width: auto;}
	.site-v2 .cat-table tbody td:nth-child(3) {grid-area: brasserie; padding-left: 32px; font-size: 13px;}
	.site-v2 .cat-table tbody td:nth-child(4) {grid-area: degre; align-self: center;}
	.site-v2 .cat-table tbody td:nth-child(5) {grid-area: avis; padding-left: 32px; padding-right: 0;}
	.site-v2 .cat-table .kr, .site-v2 .cat-table td .kd {display: inline;}
	.site-v2 .cat-table td .kd::before {content: " · ";}
}

/* Écran moyen : panneau plus étroit ; petit écran : panneau au-dessus du contenu, sans défilement interne */
@media (max-width: 1180px) {
	.site-v2 .cat-corps {grid-template-columns: 260px minmax(0, 1fr); gap: 22px;}
	.site-v2 .cat-familles {grid-template-columns: repeat(2, minmax(0, 1fr));}
	.site-v2 .cat-etapes {grid-template-columns: minmax(0, 1fr);}
	.site-v2 .cat-pays a {grid-template-columns: 130px minmax(0, 1fr) 44px;}
}
@media (max-width: 860px) {
	.site-v2 .cat-corps {grid-template-columns: minmax(0, 1fr); gap: 24px;}
	.site-v2 .cat-filtres {position: static; max-height: none; overflow: visible;}
	.site-v2 .cat-filtres__defil {overflow: visible; background: #fff;}
	.site-v2 .cat-couleurs__liste {display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));}
	.site-v2 .cat-plus__duo {grid-template-columns: repeat(2, minmax(0, 1fr));}
}
@media (max-width: 480px) {
	.site-v2 .cat-familles {grid-template-columns: minmax(0, 1fr);}
	.site-v2 .cat-pays a {grid-template-columns: 110px minmax(0, 1fr) 40px; gap: 10px;}
	.site-v2 .cat a.cat-palmares__fiche {display: none;}
}
@media (prefers-reduced-motion: reduce) {
	.cat-plus::details-content, .cat-plus__ico, .cat a.cat-famille, .cat-plus > summary {transition: none;}
	.site-v2 .cat-filtres__defil {scroll-behavior: auto;}
}