/*
Theme Name: Bincherie
Description: Thème sur mesure, écrit à la main. Aucune dépendance, aucun script tiers.
Author: Clément Quatravaux
Version: 0.1.0
Requires at least: 6.5
Requires PHP: 8.1
Text Domain: bincherie
*/

/* ── Socle ──────────────────────────────────────────────────────────── */

*,
*::before,
*::after {
	box-sizing: border-box;
	border-radius: 0;
}

:root {
	--encre: #15171c;
	--encre-douce: #5b6472;
	--papier: #ffffff;
	--papier-teinte: #f6f7f9;
	--filet: #e3e6eb;
	--accent: #8a5e0f;
	--ambre: #E9A72C;
	--ambre-pale: #FBF0DA;
	--ambre-fonce: #7A5410;
	--mesure: 68rem;

	/* Rayons de bordure. Le site était entièrement anguleux ; il passe à
	   des formes franchement arrondies, avec une échelle courte pour que
	   tout se réponde au lieu de bricoler valeur par valeur. */
	--r-xs: 8px;
	--r-s: 12px;
	--r-m: 18px;
	--r-l: 26px;
	--r-xl: 34px;
	--r-pill: 999px;
	--pas: clamp(1.5rem, 4vw, 3rem);
}

html {
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	background: var(--papier);
	color: var(--encre);
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	font-size: 1.0625rem;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}

h1,
h2,
h3 {
	margin: 0 0 0.6em;
	line-height: 1.15;
	letter-spacing: -0.02em;
	font-weight: 650;
}

h1 {
	font-size: clamp(2rem, 5vw, 2.9rem);
}

p {
	margin: 0 0 1.1em;
}

a {
	color: var(--accent);
	text-underline-offset: 0.18em;
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

.contenu {
	width: min(100% - 2.5rem, var(--mesure));
	margin-inline: auto;
}

.saut-contenu {
	position: absolute;
	left: -9999px;
}

.saut-contenu:focus {
	left: 1rem;
	top: 1rem;
	z-index: 10;
	padding: 0.6rem 1rem;
	background: var(--encre);
	color: var(--papier);
}

/* ── Page d'attente ─────────────────────────────────────────────────── */

.attente {
	min-height: 100svh;
	display: grid;
	place-items: center;
	padding: var(--pas);
	background: var(--papier-teinte);
}

.attente__carte {
	width: min(100%, 34rem);
	padding: clamp(2rem, 6vw, 3.5rem);
	background: var(--papier);
	border: 1px solid var(--filet);
	text-align: left;
}

.attente__surtitre {
	margin: 0 0 1.5rem;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--encre-douce);
	display: flex;
	align-items: center;
	gap: 0.6rem;
}

.attente__pastille {
	width: 0.5rem;
	height: 0.5rem;
	background: var(--accent);
	flex: none;
}

.attente__texte {
	color: var(--encre-douce);
	margin-bottom: 0;
}

.attente__filet {
	height: 1px;
	background: var(--filet);
	border: 0;
	margin: 2rem 0 1.25rem;
}

.attente__pied {
	margin: 0;
	font-size: 0.875rem;
	color: var(--encre-douce);
}

/* ── Gabarit courant ────────────────────────────────────────────────── */

.corps {
	padding: var(--pas) 0;
}

/* ═══════════════════════════════════════════════════════════════════
   FICHE D'UNE BIÈRE
   La page prend la teinte de la bière qu'elle décrit : une blonde est
   dorée, une stout est noire. C'est la seule couleur qui varie, tout
   le reste du site reste sur son encre et son papier.
   ═══════════════════════════════════════════════════════════════════ */

.fiche {
	--biere: #E9A72C;
	--biere-clair: #FBF3E2;
	--mousse: #FDFAF2;
}

.fiche--blonde      { --biere: #E9A72C; --biere-clair: #FCF4E4; --mousse: #FEFCF6; }
.fiche--blanche     { --biere: #E8C86A; --biere-clair: #FBF6E7; --mousse: #FFFFFF; }
.fiche--ambree      { --biere: #C4701C; --biere-clair: #F9EDE1; --mousse: #FBF1E4; }
.fiche--rouge       { --biere: #A32E2E; --biere-clair: #F8E7E7; --mousse: #FAEFE8; }
.fiche--brune       { --biere: #6B3A1E; --biere-clair: #F2E7E0; --mousse: #F3E6D7; }
.fiche--noire       { --biere: #241A14; --biere-clair: #EAE6E3; --mousse: #E8DAC4; }
.fiche--houblonnee  { --biere: #B58A1B; --biere-clair: #F8F1DC; --mousse: #FDFAEE; }
.fiche--acidulee    { --biere: #C23F6B; --biere-clair: #FAE8EE; --mousse: #FDF2F5; }
.fiche--fruitee     { --biere: #C62B4A; --biere-clair: #FAE6EA; --mousse: #FDF0F2; }
.fiche--sans-alcool { --biere: #5E8C6A; --biere-clair: #EAF2EC; --mousse: #F6FAF7; }

/* ── Fil d'Ariane ──────────────────────────────────────────────── */

/* Le fil se glisse juste sous la barre flottante : `.corps` réservait
   trois rem au dessus de lui, ce qui l'isolait au milieu du blanc. Son
   trait de séparation disparaît, la barre en a déjà un. */
.fil {
	font-size: 0.8125rem;
	padding: 0.1rem 0 0.8rem;
}

/* Le premier élément d'une page colle à la barre, qu'il s'agisse du fil
   d'Ariane ou d'un bandeau d'illustration. `.corps` réservait trois rem
   au dessus, qui laissaient une bande blanche sans raison. */
.corps:has(> .fil:first-child),
.corps:has(> .illustration:first-child),
.corps:has(> * > .fil:first-child),
.corps:has(> * > .illustration:first-child) { padding-top: 0; }

.fil .contenu {
	display: flex;
	align-items: center;
	gap: 0.45rem;
	flex-wrap: wrap;
	color: var(--encre-douce);
}

.fil a { color: var(--encre-douce); text-decoration: none; }
.fil a:hover { color: var(--accent); text-decoration: underline; }
.fil .picto { color: var(--filet); flex: none; }

/* ── Ouverture ─────────────────────────────────────────────────── */

.hero {
	background: var(--biere-clair, #FBF5EA);
	border-bottom: 1px solid var(--filet);
	padding: clamp(2rem, 6vw, 4rem) 0;
}

/* ── La photographie en fond de tête de page ───────────────────────
   Elle ne se glisse pas sous le titre : elle **passe derrière tout**,
   barre de navigation comprise. La barre blanche flotte dessus, le fil
   d'Ariane et le titre se posent par dessus en clair.

   Techniquement, elle sort du flux et se cale sur le haut du document,
   d'où le `position: relative` sur `body`. */

body:has(.page--illustree) { position: relative; }

.illustration {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: var(--tete-image);
	margin: 0;
	z-index: 0;
	line-height: 0;
	background: #15171c;
	overflow: hidden;
}

.page--illustree {
	/* Hauteur de la zone illustrée, partagée entre l'image et le bandeau
	   de titre pour qu'ils se terminent exactement ensemble. */
	--tete-image: clamp(420px, 46vw, 600px);
	--tete-hauteur: 96px;   /* la barre flottante */
}

.illustration__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 42%;
}

/* Un voile dégradé plutôt qu'un aplat : la photographie respire en haut,
   le texte garde son contraste en bas. */
.illustration::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to bottom,
		rgba(12, 14, 18, 0.34) 0%,
		rgba(12, 14, 18, 0.30) 38%,
		rgba(12, 14, 18, 0.78) 100%
	);
}

/* Tout ce qui suit la photographie passe devant elle, sans exception.
   Sans cette règle, seuls les éléments cités étaient protégés et la bande
   de chiffres se faisait mordre de 25 px dès que la hauteur de la barre
   ne correspondait pas à l'estimation. Les blocs suivants ont un fond
   opaque : un éventuel dépassement de l'image reste invisible. */
.page--illustree > *:not(.illustration) {
	position: relative;
	z-index: 1;
}

.page--illustree > .fil,
.page--illustree > .hero {
	position: relative;
	z-index: 1;
	background: none;
	border-bottom: 0;
}

.page--illustree > .hero {
	display: flex;
	align-items: flex-end;
	min-height: calc(var(--tete-image) - var(--tete-hauteur) - 3.2rem);
	padding-bottom: clamp(1.8rem, 3.5vw, 2.8rem);
	color: #fff;
}

.page--illustree > .hero .hero__titre,
.page--illustree > .hero h1 { color: #fff; }

.page--illustree > .hero .hero__accroche,
.page--illustree > .hero .hero__resume { color: rgba(255, 255, 255, 0.9); }

.page--illustree > .hero .hero__accroche strong { color: #fff; }

.page--illustree > .fil,
.page--illustree > .fil a { color: rgba(255, 255, 255, 0.82); }
.page--illustree > .fil a:hover { color: #fff; }
.page--illustree > .fil [aria-current] { color: #fff; }

.page--illustree .etiquette {
	background: rgba(255, 255, 255, 0.16);
	border-color: rgba(255, 255, 255, 0.3);
	color: #fff;
}

/* Le verre dessiné s'efface : deux illustrations au même endroit se gênent. */
.page--illustree .hero__visuel { display: none; }
.page--illustree .hero__grille { grid-template-columns: 1fr; }

/* Sur mobile la barre occupe trois lignes au lieu de deux. */
@media (max-width: 900px) {
	/* Mesurée à 105 px sur un écran de 390 : marque et bascule sur une
	   ligne, champ de recherche sur la suivante. */
	.page--illustree { --tete-hauteur: 105px; --tete-image: clamp(400px, 96vw, 500px); }
}

.hero__grille {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: clamp(1.5rem, 5vw, 4rem);
	align-items: center;
}

.hero__surtitre {
	display: flex;
	gap: 0.5rem;
	flex-wrap: wrap;
	margin-bottom: 1rem;
}

.etiquette {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.28rem 0.6rem;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	border: 1px solid var(--filet);
	background: var(--papier);
	color: var(--encre-douce);
	text-decoration: none;
}

.etiquette--famille {
	background: var(--biere);
	border-color: var(--biere);
	color: #fff;
}

.etiquette--famille:hover { filter: brightness(0.92); }

.hero__titre {
	font-size: clamp(2.1rem, 6vw, 3.4rem);
	margin-bottom: 0.5rem;
}

.hero__accroche {
	font-size: 1.0625rem;
	color: var(--encre-douce);
	margin-bottom: 0.4rem;
}

.hero__resume { color: var(--encre-douce); max-width: 44ch; }

.hero__visuel { justify-self: end; }

/* ── Le verre ──────────────────────────────────────────────────── */

.verre {
	width: clamp(120px, 26vw, 168px);
	height: auto;
	display: block;
}

.verre__paroi {
	fill: none;
	stroke: var(--encre);
	stroke-width: 2.4;
	stroke-linejoin: round;
	stroke-linecap: round;
}

.verre__biere { fill: var(--biere); }
.verre__mousse { fill: var(--mousse); }
.verre__bulles circle { fill: var(--mousse); opacity: 0.5; }

.verre__etiquette rect {
	fill: var(--papier);
	stroke: var(--encre);
	stroke-width: 2;
}

.verre__etiquette text {
	font-size: 22px;
	font-weight: 700;
	fill: var(--encre);
}

/* La bière monte, la mousse se pose, les bulles remontent en boucle. */
@media (prefers-reduced-motion: no-preference) {
	.verre__biere,
	.verre__mousse {
		animation: verser 1.1s cubic-bezier(0.22, 0.61, 0.36, 1) both;
	}

	.verre__mousse { animation-delay: 0.45s; animation-duration: 0.7s; }

	.verre__bulles circle {
		animation: bulle 3.4s ease-in infinite;
	}

	.verre__bulles circle:nth-child(2) { animation-delay: 0.7s; }
	.verre__bulles circle:nth-child(3) { animation-delay: 1.4s; }
	.verre__bulles circle:nth-child(4) { animation-delay: 2.1s; }
	.verre__bulles circle:nth-child(5) { animation-delay: 2.8s; }

	.verre__etiquette { animation: apparait 0.5s 0.9s both; }
}

@keyframes verser {
	from { transform: translateY(130px); }
	to   { transform: translateY(0); }
}

@keyframes bulle {
	0%   { transform: translateY(0); opacity: 0; }
	15%  { opacity: 0.6; }
	100% { transform: translateY(-78px); opacity: 0; }
}

@keyframes apparait {
	from { opacity: 0; transform: translateY(6px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* ── Bandeau de chiffres ───────────────────────────────────────── */

/* Pas de filet pleine largeur sous les chiffres : les cases s'arrêtent
   à la colonne de contenu, et la ligne qui continuait au delà faisait
   croire à une case manquante à droite. Les contours des cases suffisent
   à dessiner la bande. */
.chiffres {
	background: var(--papier);
	padding-bottom: clamp(1.5rem, 4vw, 2.5rem);
}

.chiffres__grille {
	display: flex;
	flex-wrap: wrap;
}

/* Les chiffres se partagent la largeur à parts égales. Une grille en
   auto-fit laissait une piste vide à droite quand il y en avait quatre
   pour six colonnes possibles, et la piste vide gardait son filet. */
.chiffres__grille > .chiffre {
	flex: 1 1 160px;
	min-width: 0;
}

.chiffre {
	padding: 1.3rem 1.1rem;
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	outline: 1px solid var(--filet);
}

.chiffre__icone { color: var(--biere); line-height: 0; margin-bottom: 0.4rem; }

.chiffre__valeur {
	font-size: 1.375rem;
	font-weight: 650;
	letter-spacing: -0.02em;
}

.chiffre__legende {
	font-size: 0.8125rem;
	color: var(--encre-douce);
}

/* ── Corps ─────────────────────────────────────────────────────── */

.corps-fiche {
	padding: clamp(2rem, 5vw, 3.5rem) 0;
	max-width: 46rem;
}

/* Les gabarits sans colonne de lecture étroite ouvrent sur un `.contenu`
   nu : sans cette respiration, le titre de la première section se colle au
   bord du bandeau qui le précède. */
.corps-page { padding-top: clamp(2.5rem, 6vw, 4rem); }

.bloc { margin-bottom: clamp(2.5rem, 6vw, 4rem); }

/* Le dernier bloc n'ajoute pas sa marge à celle du pied : le cumul creusait
   176 px sous l'accueil, presque trois fois l'écart entre deux sections. */
.bloc:last-child { margin-bottom: 0; }

.bloc h2 {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	font-size: clamp(1.3rem, 3.2vw, 1.6rem);
	padding-bottom: 0.7rem;
	border-bottom: 2px solid var(--encre);
	margin-bottom: 1.2rem;
}

.bloc h2 .picto { color: var(--biere); flex: none; }

.bloc h3 {
	font-size: 1rem;
	display: flex;
	align-items: center;
	gap: 0.45rem;
}

.chapo { font-size: 1.0625rem; }

.note {
	font-size: 0.875rem;
	color: var(--encre-douce);
	border-left: 2px solid var(--filet);
	padding-left: 0.9rem;
	margin-top: 1.2rem;
}

/* ── Liste de faits ────────────────────────────────────────────── */

.liste-faits {
	margin: 1.4rem 0 0;
	display: grid;
	gap: 0;
}

.liste-faits > div {
	display: grid;
	grid-template-columns: 11rem 1fr;
	gap: 1rem;
	padding: 0.7rem 0;
	border-top: 1px solid var(--filet);
}

.liste-faits > div:last-child { border-bottom: 1px solid var(--filet); }

.liste-faits dt {
	display: flex;
	align-items: center;
	gap: 0.45rem;
	color: var(--encre-douce);
	font-size: 0.9375rem;
}

.liste-faits dt .picto { color: var(--biere); flex: none; }
.liste-faits dd { margin: 0; font-weight: 550; }

/* ── Jauge de degré ────────────────────────────────────────────── */

.jauge { margin: 1.5rem 0 0.5rem; }

.jauge__piste {
	position: relative;
	height: 10px;
	background: linear-gradient(to right, var(--biere-clair), var(--biere));
	outline: 1px solid var(--filet);
}

.jauge__curseur {
	position: absolute;
	top: -5px;
	bottom: -5px;
	width: 3px;
	background: var(--encre);
	left: var(--position);
}

.jauge__reperes {
	display: flex;
	justify-content: space-between;
	font-size: 0.75rem;
	color: var(--encre-douce);
	margin-top: 0.5rem;
}

@media (prefers-reduced-motion: no-preference) {
	.jauge__curseur { animation: glisse 0.9s 0.2s cubic-bezier(0.22, 0.61, 0.36, 1) both; }
	@keyframes glisse { from { left: 0; } to { left: var(--position); } }
}

/* ── Dégustation ───────────────────────────────────────────────── */

.degustation {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(175px, 1fr));
	gap: 0;
	margin-top: 1.4rem;
}

.degustation__etape {
	padding: 1.2rem 1.1rem;
	outline: 1px solid var(--filet);
}

.degustation__rang {
	display: block;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	color: var(--biere);
	margin-bottom: 0.5rem;
}

.degustation__etape h3 { margin-bottom: 0.35rem; }
.degustation__etape p { margin: 0; font-size: 0.9375rem; color: var(--encre-douce); }

/* ── Cartes appariées ──────────────────────────────────────────── */

.paire {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: 0;
	margin-top: 1.2rem;
}

.carte { padding: 1.2rem; outline: 1px solid var(--filet); }
.carte h3 { margin-bottom: 0.6rem; }
.carte h3 .picto { color: var(--biere); }

.carte__valeur {
	font-size: 1.125rem;
	font-weight: 600;
	margin-bottom: 0.5rem;
}

.carte p:last-child {
	margin: 0;
	font-size: 0.875rem;
	color: var(--encre-douce);
}

/* ── Accords ───────────────────────────────────────────────────── */

.accords {
	list-style: none;
	padding: 0;
	margin: 1.1rem 0 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: 0.55rem;
}

.accords li {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	padding: 0.6rem 0.8rem;
	background: var(--biere-clair);
}

.accords .picto { color: var(--biere); flex: none; }

/* ── Tableau ───────────────────────────────────────────────────── */

.tableau {
	width: 100%;
	border-collapse: collapse;
	margin-top: 1.2rem;
	font-size: 0.9375rem;
}

.tableau th,
.tableau td {
	text-align: left;
	padding: 0.65rem 0.7rem;
	border-bottom: 1px solid var(--filet);
}

.tableau thead th {
	border-bottom: 2px solid var(--encre);
	font-size: 0.8125rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--encre-douce);
}

.tableau tbody tr:hover { background: var(--biere-clair); }

/* ── Questions ─────────────────────────────────────────────────── */

.faq { border-top: 1px solid var(--filet); }

.faq__item { border-bottom: 1px solid var(--filet); }

.faq__item summary {
	padding: 0.95rem 2rem 0.95rem 0;
	cursor: pointer;
	font-weight: 550;
	position: relative;
	list-style: none;
}

.faq__item summary::-webkit-details-marker { display: none; }

/* Croix qui bascule en plus : un tracé, pas un caractère. */
.faq__item summary::before,
.faq__item summary::after {
	content: "";
	position: absolute;
	right: 4px;
	top: 50%;
	background: var(--biere);
	transition: transform 0.25s ease;
}

.faq__item summary::before { width: 13px; height: 2px; margin-top: -1px; }
.faq__item summary::after  { width: 2px; height: 13px; margin-top: -6.5px; right: 9px; }
.faq__item[open] summary::after { transform: rotate(90deg); }

.faq__reponse { padding: 0 0 1rem; color: var(--encre-douce); }
.faq__reponse p { margin: 0; }

/* ── Bières comparables ────────────────────────────────────────── */

.grille-bieres {
	list-style: none;
	padding: 0;
	margin: 1.2rem 0 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 0;
}

.carte-biere a {
	display: block;
	padding: 1rem;
	outline: 1px solid var(--filet);
	text-decoration: none;
	color: inherit;
	transition: background 0.18s ease;
	height: 100%;
}

.carte-biere a:hover { background: var(--biere-clair); }

.carte-biere__pastille {
	display: block;
	width: 22px;
	height: 5px;
	margin-bottom: 0.7rem;
	background: var(--biere);
}

.carte-biere--blonde      .carte-biere__pastille { background: #E9A72C; }
.carte-biere--blanche     .carte-biere__pastille { background: #E8C86A; }
.carte-biere--ambree      .carte-biere__pastille { background: #C4701C; }
.carte-biere--rouge       .carte-biere__pastille { background: #A32E2E; }
.carte-biere--brune       .carte-biere__pastille { background: #6B3A1E; }
.carte-biere--noire       .carte-biere__pastille { background: #241A14; }
.carte-biere--houblonnee  .carte-biere__pastille { background: #B58A1B; }
.carte-biere--acidulee    .carte-biere__pastille { background: #C23F6B; }
.carte-biere--fruitee     .carte-biere__pastille { background: #C62B4A; }
.carte-biere--sans-alcool .carte-biere__pastille { background: #5E8C6A; }

.carte-biere__nom { display: block; font-weight: 600; margin-bottom: 0.2rem; }

.carte-biere__meta {
	display: block;
	font-size: 0.8125rem;
	color: var(--encre-douce);
}

/* ── Provenance ────────────────────────────────────────────────── */

.provenance {
	border-top: 1px solid var(--filet);
	padding-top: 1.4rem;
	font-size: 0.875rem;
	color: var(--encre-douce);
}

.provenance h2 {
	font-size: 0.8125rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	border: 0;
	padding: 0;
	margin-bottom: 0.6rem;
	gap: 0.4rem;
}

.provenance__date { margin: 0; }

/* ── Adaptations ───────────────────────────────────────────────── */

@media (max-width: 720px) {
	.hero__grille { grid-template-columns: 1fr; }
	.hero__visuel { justify-self: start; }
	.liste-faits > div { grid-template-columns: 1fr; gap: 0.15rem; }
	.bloc h2 { font-size: 1.2rem; }
}

/* ── Composition ───────────────────────────────────────────────── */

.ingredients {
	list-style: none;
	padding: 0;
	margin: 1.1rem 0 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 0;
}

.ingredients li {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.85rem 0.9rem;
	outline: 1px solid var(--filet);
	font-size: 0.9375rem;
}

.ingredients .picto { color: var(--biere); flex: none; }

/* ── Encart, situation, palmarès ───────────────────────────────── */

.encart {
	background: var(--biere-clair);
	padding: 1.1rem 1.2rem;
	margin: 1.4rem 0;
	border-left: 3px solid var(--biere);
}

.encart h3 { margin-bottom: 0.4rem; }
.encart h3 .picto { color: var(--biere); }
.encart p { margin: 0; font-size: 0.9375rem; }

.situation {
	list-style: none;
	padding: 0;
	margin: 0;
}

.situation li {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	padding: 0.7rem 0;
	border-bottom: 1px solid var(--filet);
}

.situation li:first-child { border-top: 1px solid var(--filet); }
.situation .picto { color: var(--biere); flex: none; margin-top: 0.22rem; }

.sous-titre {
	margin: 1.6rem 0 0.7rem;
	font-size: 0.8125rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--encre-douce);
}

.sous-titre .picto { color: var(--biere); }

.palmares {
	list-style: none;
	padding: 0;
	margin: 0;
}

.palmares li {
	padding: 0.55rem 0 0.55rem 1.1rem;
	border-left: 2px solid var(--biere);
	margin-bottom: 0.4rem;
	background: var(--biere-clair);
	font-size: 0.9375rem;
}

/* ── Galerie de photos ─────────────────────────────────────────── */

.galerie {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: 1rem;
	margin-top: 1.2rem;
}

.galerie__item {
	margin: 0;
	border: 1px solid var(--filet);
	background: var(--papier);
	display: flex;
	flex-direction: column;
}

.galerie__item img {
	width: 100%;
	height: 260px;
	object-fit: cover;
	display: block;
	background: var(--biere-clair);
}

.galerie__item figcaption {
	padding: 0.7rem 0.8rem;
	font-size: 0.8125rem;
	border-top: 1px solid var(--filet);
}

.galerie__titre { display: block; color: var(--encre); }

.galerie__credit {
	display: block;
	margin-top: 0.2rem;
	color: var(--encre-douce);
	font-size: 0.75rem;
}

.galerie__credit a { color: var(--encre-douce); }
.galerie__credit a:hover { color: var(--accent); }

/* ── Profil de dégustation ─────────────────────────────────────── */

.profil {
	list-style: none;
	padding: 0;
	margin: 0.9rem 0 0;
}

.profil__ligne {
	display: grid;
	grid-template-columns: 8.5rem auto 1fr;
	align-items: center;
	gap: 1rem;
	padding: 0.65rem 0;
	border-bottom: 1px solid var(--filet);
}

.profil__ligne:first-child { border-top: 1px solid var(--filet); }

.profil__nom { font-weight: 550; font-size: 0.9375rem; }

.profil__barre { display: flex; gap: 4px; }

.profil__cran {
	width: 26px;
	height: 12px;
	background: var(--filet);
	display: block;
}

.profil__cran--plein { background: var(--biere); }

.profil__note { font-size: 0.8125rem; color: var(--encre-douce); }

/* Les crans se remplissent de gauche à droite au chargement. */
@media (prefers-reduced-motion: no-preference) {
	.profil__cran--plein {
		animation: remplir 0.32s both cubic-bezier(0.22, 0.61, 0.36, 1);
		animation-delay: calc(var(--rang) * 0.07s);
	}
	@keyframes remplir {
		from { transform: scaleX(0); }
		to   { transform: scaleX(1); }
	}
	.profil__cran { transform-origin: left center; }
}

/* ── Échelle de couleur ────────────────────────────────────────── */

/* L'étiquette du curseur déborde vers le haut : sans cette réserve, elle
   recouvre le sous-titre qui précède l'échelle. */
.echelle { margin: 2.4rem 0 0.5rem; }

.echelle__barre {
	position: relative;
	height: 26px;
	background: linear-gradient(to right,
		#F4E9B8 0%, #F0C64B 16%, #E19A20 34%,
		#B45C15 52%, #7A3A15 70%, #3D2213 86%, #1A100A 100%);
	outline: 1px solid var(--filet);
}

.echelle__curseur {
	position: absolute;
	top: -7px;
	bottom: -7px;
	left: var(--position);
	width: 3px;
	background: var(--encre);
}

.echelle__bulle {
	position: absolute;
	bottom: calc(100% + 7px);
	left: 50%;
	transform: translateX(-50%);
	white-space: nowrap;
	background: var(--encre);
	color: var(--papier);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	padding: 0.25rem 0.5rem;
}

.echelle__reperes {
	display: flex;
	justify-content: space-between;
	font-size: 0.75rem;
	color: var(--encre-douce);
	margin-top: 0.55rem;
}

@media (prefers-reduced-motion: no-preference) {
	.echelle__curseur { animation: glisse-echelle 0.8s 0.25s cubic-bezier(0.22, 0.61, 0.36, 1) both; }
	@keyframes glisse-echelle { from { left: 0; } to { left: var(--position); } }
}

@media (max-width: 620px) {
	.profil__ligne { grid-template-columns: 1fr; gap: 0.35rem; }
	.profil__note { grid-column: 1; }
}

/* ── Texte rédigé ──────────────────────────────────────────────────
   Le contenu des fiches peut contenir des listes et des tableaux :
   sans ces règles ils s'affichent en style navigateur, ce qui jure
   avec le reste de la page.
   ────────────────────────────────────────────────────────────────── */

.prose { margin-bottom: 1.4rem; }

.prose p { margin: 0 0 1.05em; }
.prose p:last-child { margin-bottom: 0; }

/* Le gras porte l'information, il ne décore pas : on le laisse dans
   l'encre du texte, avec juste assez de graisse pour accrocher l'œil. */
.prose strong {
	font-weight: 650;
	color: var(--encre);
}

.prose em {
	font-style: italic;
	color: inherit;
}

.prose ul {
	list-style: none;
	padding: 0;
	margin: 0 0 1.2em;
}

.prose ul li {
	position: relative;
	padding: 0.42rem 0 0.42rem 1.5rem;
	border-bottom: 1px solid var(--filet);
}

.prose ul li:first-child { border-top: 1px solid var(--filet); }

/* Un carré plein plutôt qu'une puce ronde : le site n'a aucun angle
   arrondi, et un disque jurerait avec les pictos à bouts carrés. */
.prose ul li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 1.05em;
	width: 7px;
	height: 7px;
	background: var(--biere);
}

.prose ol {
	margin: 0 0 1.2em;
	padding-left: 1.3rem;
}

.prose ol li { padding: 0.3rem 0; }

.prose table {
	width: 100%;
	border-collapse: collapse;
	margin: 0 0 1.3em;
	font-size: 0.9375rem;
}

.prose th,
.prose td {
	text-align: left;
	padding: 0.6rem 0.7rem;
	border-bottom: 1px solid var(--filet);
	vertical-align: top;
}

.prose thead th {
	border-bottom: 2px solid var(--encre);
	font-size: 0.8125rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--encre-douce);
	font-weight: 600;
}

.prose tbody tr:hover { background: var(--biere-clair); }

.prose a { text-underline-offset: 0.18em; }

/* Un tableau large doit défiler dans son coin, jamais pousser la page. */
.prose { overflow-x: auto; }

/* ── Tableau d'une gamme ───────────────────────────────────────── */

.tableau--gamme td { vertical-align: middle; }

.pastille {
	display: inline-block;
	width: 10px;
	height: 10px;
	margin-right: 0.45rem;
	vertical-align: -1px;
}

.pastille--blonde      { background: #E9A72C; }
.pastille--blanche     { background: #E8C86A; }
.pastille--ambree      { background: #C4701C; }
.pastille--rouge       { background: #A32E2E; }
.pastille--brune       { background: #6B3A1E; }
.pastille--noire       { background: #241A14; }
.pastille--houblonnee  { background: #B58A1B; }
.pastille--acidulee    { background: #C23F6B; }
.pastille--fruitee     { background: #C62B4A; }
.pastille--sans-alcool { background: #5E8C6A; }

.vide { color: var(--filet); }

/* ── Galerie à une seule photo ─────────────────────────────────────
   Le cas le plus fréquent : la quasi-totalité des fiches n'ont qu'une
   image. Étirée sur toute la largeur et rognée à 260 px, elle perdait
   son sujet, une bouteille verticale se réduisant à une tranche. On la
   cadre donc à taille raisonnable et on la montre **entière**.
   ────────────────────────────────────────────────────────────────── */

.galerie:has(.galerie__item:only-child) {
	grid-template-columns: minmax(0, 22rem);
}

.galerie__item:only-child img {
	height: auto;
	max-height: 26rem;
	object-fit: contain;
	padding: 0.9rem;
}

/* Repli pour les navigateurs sans :has() : la photo garde au moins une
   hauteur qui laisse voir une bouteille. */
@supports not (selector(:has(*))) {
	.galerie__item img { height: 320px; object-fit: contain; }
}

/* ═══════════════════════════════════════════════════════════════════
   PAGE D'UN PAYS
   Elle prend la teinte du type de bière le plus représenté : la
   Belgique tire vers le doré de ses blondes, l'Irlande vers le noir
   de ses stouts.
   ═══════════════════════════════════════════════════════════════════ */

.pays {
	--biere: #E9A72C;
	--biere-clair: #FCF4E4;
	--mousse: #FEFCF6;
}

.pays--blonde      { --biere: #E9A72C; --biere-clair: #FCF4E4; }
.pays--blanche     { --biere: #E8C86A; --biere-clair: #FBF6E7; }
.pays--ambree      { --biere: #C4701C; --biere-clair: #F9EDE1; }
.pays--rouge       { --biere: #A32E2E; --biere-clair: #F8E7E7; }
.pays--brune       { --biere: #6B3A1E; --biere-clair: #F2E7E0; }
.pays--noire       { --biere: #241A14; --biere-clair: #EAE6E3; }
.pays--houblonnee  { --biere: #B58A1B; --biere-clair: #F8F1DC; }
.pays--acidulee    { --biere: #C23F6B; --biere-clair: #FAE8EE; }
.pays--fruitee     { --biere: #C62B4A; --biere-clair: #FAE6EA; }
.pays--sans-alcool { --biere: #5E8C6A; --biere-clair: #EAF2EC; }

.hero--pays { padding: clamp(2rem, 5vw, 3.2rem) 0; }
.hero--pays .hero__titre { margin-bottom: 0.35rem; }

.corps-pays {
	padding: clamp(2rem, 5vw, 3.5rem) 0;
	max-width: 52rem;
}

/* ── Répartition par type ──────────────────────────────────────── */

.repartition {
	list-style: none;
	padding: 0;
	margin: 1.1rem 0 0;
}

.repartition__ligne {
	display: grid;
	grid-template-columns: 11rem 1fr 3rem;
	align-items: center;
	gap: 1rem;
	padding: 0.55rem 0;
	border-bottom: 1px solid var(--filet);
}

.repartition__ligne:first-child { border-top: 1px solid var(--filet); }

.repartition__nom {
	display: flex;
	align-items: center;
	font-size: 0.9375rem;
}

.repartition__nom a { color: inherit; text-decoration: none; }
.repartition__nom a:hover { text-decoration: underline; }

.repartition__barre {
	height: 12px;
	background: var(--filet);
	position: relative;
}

.repartition__part {
	position: absolute;
	inset: 0 auto 0 0;
	width: var(--part);
	background: var(--biere);
}

.repartition__part--blonde      { background: #E9A72C; }
.repartition__part--blanche     { background: #E8C86A; }
.repartition__part--ambree      { background: #C4701C; }
.repartition__part--rouge       { background: #A32E2E; }
.repartition__part--brune       { background: #6B3A1E; }
.repartition__part--noire       { background: #241A14; }
.repartition__part--houblonnee  { background: #B58A1B; }
.repartition__part--acidulee    { background: #C23F6B; }
.repartition__part--fruitee     { background: #C62B4A; }
.repartition__part--sans-alcool { background: #5E8C6A; }

.repartition__valeur {
	text-align: right;
	font-weight: 600;
	font-size: 0.9375rem;
}

@media (prefers-reduced-motion: no-preference) {
	.repartition__part { animation: pousse 0.6s cubic-bezier(0.22, 0.61, 0.36, 1) both; }
	@keyframes pousse { from { width: 0; } to { width: var(--part); } }
}

/* ── Brasseries ────────────────────────────────────────────────── */

.brasseries {
	list-style: none;
	padding: 0;
	margin: 1.1rem 0 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 0;
}

.brasseries li {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 0.8rem;
	padding: 0.7rem 0.9rem;
	outline: 1px solid var(--filet);
	font-size: 0.9375rem;
}

.brasseries__compte { color: var(--encre-douce); font-size: 0.8125rem; flex: none; }

/* ── Listing des bières ────────────────────────────────────────── */

.listing {
	list-style: none;
	padding: 0;
	margin: 1.2rem 0 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 0;
}

.listing__item a {
	display: flex;
	gap: 0.9rem;
	align-items: center;
	padding: 0.9rem;
	outline: 1px solid var(--filet);
	text-decoration: none;
	color: inherit;
	height: 100%;
	transition: background 0.18s ease;
}

.listing__item a:hover { background: var(--biere-clair); }

.listing__visuel {
	flex: none;
	width: 64px;
	height: 64px;
	display: grid;
	place-items: center;
	background: var(--biere-clair);
	overflow: hidden;
}

.listing__visuel img { width: 100%; height: 100%; object-fit: contain; }

.listing__initiale {
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--biere);
}

.listing__item--blonde      .listing__initiale { color: #E9A72C; }
.listing__item--blanche     .listing__initiale { color: #C9A43F; }
.listing__item--ambree      .listing__initiale { color: #C4701C; }
.listing__item--rouge       .listing__initiale { color: #A32E2E; }
.listing__item--brune       .listing__initiale { color: #6B3A1E; }
.listing__item--noire       .listing__initiale { color: #241A14; }
.listing__item--houblonnee  .listing__initiale { color: #B58A1B; }
.listing__item--acidulee    .listing__initiale { color: #C23F6B; }
.listing__item--fruitee     .listing__initiale { color: #C62B4A; }
.listing__item--sans-alcool .listing__initiale { color: #5E8C6A; }

.listing__texte { min-width: 0; }

.listing__nom {
	display: block;
	font-weight: 600;
	line-height: 1.25;
	margin-bottom: 0.15rem;
}

.listing__brasserie {
	display: block;
	font-size: 0.8125rem;
	color: var(--encre-douce);
	margin-bottom: 0.25rem;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.listing__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.15rem 0.5rem;
	font-size: 0.75rem;
	color: var(--encre-douce);
}

.listing__meta > * { white-space: nowrap; }

/* Chaque donnée de la ligne porte son marqueur : le drapeau pour l'origine,
   la pastille de couleur pour le type, la chope pour le degré. Sans eux,
   « Belgique Blonde 6,8 % » se lit comme une seule suite de mots. */
.listing__famille {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	font-weight: 600;
}

.listing__pastille {
	width: 8px;
	height: 8px;
	flex: none;
	display: block;
}

.listing__degre {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
}

.listing__picto { flex: none; opacity: 0.55; }

/* ── Contribution ──────────────────────────────────────────────── */

.contribution {
	background: var(--biere-clair);
	padding: clamp(1.3rem, 4vw, 2rem);
	border-left: 3px solid var(--biere);
}

.contribution h2 { border: 0; padding: 0; margin-bottom: 0.7rem; }
.contribution p { max-width: 46ch; }

.bouton {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin-top: 0.6rem;
	padding: 0.7rem 1.1rem;
	background: var(--encre);
	color: var(--papier);
	text-decoration: none;
	font-weight: 600;
	font-size: 0.9375rem;
	transition: background 0.18s ease;
}

.bouton:hover { background: var(--biere); color: #fff; }

/* ── Nuage de pays ─────────────────────────────────────────────── */

.nuage {
	list-style: none;
	padding: 0;
	margin: 1.1rem 0 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.nuage a {
	display: inline-flex;
	align-items: baseline;
	gap: 0.4rem;
	padding: 0.4rem 0.75rem;
	border: 1px solid var(--filet);
	text-decoration: none;
	color: inherit;
	font-size: 0.875rem;
}

.nuage a:hover { background: var(--biere-clair); border-color: var(--biere); }
.nuage__compte { color: var(--encre-douce); font-size: 0.75rem; }

/* ── Pagination ────────────────────────────────────────────────── */

.pagination {
	margin-top: 1.5rem;
	display: flex;
	justify-content: center;
}

.pagination .nav-links {
	display: flex;
	gap: 0.3rem;
	flex-wrap: wrap;
}

.pagination .page-numbers {
	padding: 0.45rem 0.8rem;
	border: 1px solid var(--filet);
	text-decoration: none;
	color: inherit;
	font-size: 0.875rem;
}

.pagination .page-numbers.current { background: var(--encre); color: var(--papier); border-color: var(--encre); }
.pagination .page-numbers:hover:not(.current) { background: var(--biere-clair); }

@media (max-width: 620px) {
	.repartition__ligne { grid-template-columns: 8rem 1fr 2.5rem; gap: 0.6rem; }
}

/* ── Sous-titres dans le texte rédigé ──────────────────────────────
   Le rédacteur découpe les longs textes en h3. Sans style, ils se
   confondent avec les paragraphes et le découpage ne sert à rien.
   ────────────────────────────────────────────────────────────────── */

.prose h3 {
	font-size: 1.0625rem;
	font-weight: 650;
	margin: 1.9em 0 0.65em;
	padding-left: 0.85rem;
	border-left: 3px solid var(--biere);
	letter-spacing: -0.01em;
}

.prose h3:first-child { margin-top: 0; }
.prose > *:first-child { margin-top: 0; }

/* ── Mise en perspective ───────────────────────────────────────── */

.perspective {
	margin-top: 1.4rem;
	padding: 1.1rem 1.2rem;
	background: var(--biere-clair);
	border-left: 3px solid var(--biere);
}

.perspective p { margin: 0 0 0.8rem; font-size: 0.9375rem; }
.perspective .note { margin: 0.8rem 0 0; border: 0; padding: 0; }

.perspective__jauge {
	height: 14px;
	background: var(--papier);
	outline: 1px solid var(--filet);
	position: relative;
}

.perspective__part {
	position: absolute;
	inset: 0 auto 0 0;
	width: var(--part);
	min-width: 3px;
	background: var(--biere);
}

.chapo--pays {
	font-size: 1.125rem;
	line-height: 1.55;
	margin-bottom: 2rem;
	padding-bottom: 1.4rem;
	border-bottom: 1px solid var(--filet);
	color: var(--encre-douce);
}

/* ── Recherche dans un pays ────────────────────────────────────── */

.recherche { margin: 1.2rem 0 0.5rem; }

.recherche__label {
	display: block;
	font-size: 0.8125rem;
	color: var(--encre-douce);
	margin-bottom: 0.45rem;
}

.recherche__champ {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	border: 1px solid var(--filet);
	background: var(--papier);
	padding: 0 0.8rem;
	transition: border-color 0.18s ease;
}

.recherche__champ:focus-within { border-color: var(--biere); }
.recherche__champ .picto { color: var(--encre-douce); flex: none; }

.recherche__champ input {
	flex: 1;
	min-width: 0;
	border: 0;
	background: none;
	padding: 0.75rem 0;
	font: inherit;
	color: inherit;
	outline: none;
}

.recherche__champ input::-webkit-search-cancel-button { display: none; }

.recherche__vider {
	border: 0;
	background: none;
	padding: 0.3rem;
	cursor: pointer;
	color: var(--encre-douce);
	line-height: 0;
}

.recherche__vider:hover { color: var(--encre); }

.recherche__etat {
	margin: 0.4rem 0 0;
	font-size: 0.8125rem;
	color: var(--encre-douce);
	min-height: 1.2em;
}

.recherche__resultats { margin-top: 1rem; }

/* ── Compte de pagination ──────────────────────────────────────── */

.pagination__compte {
	margin: 1.4rem 0 0.6rem;
	font-size: 0.875rem;
	color: var(--encre-douce);
	text-align: center;
}

/* ── Chargement d'une page de liste ────────────────────────────── */

#liste[aria-busy="true"] .listing--principal { opacity: 0.45; transition: opacity 0.15s ease; }
#liste h2:focus { outline: none; }

/* ── Textes réservés aux lecteurs d'écran ──────────────────────────
   WordPress en pose plusieurs, notamment le titre « Pagination des
   publications » et les libellés de champs de recherche. Sans cette
   règle ils s'affichent en clair, ce qui est à la fois laid et faux :
   ils ne sont pas destinés à être lus à l'œil.
   ────────────────────────────────────────────────────────────────── */

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Sauf au clavier : un lien d'évitement doit redevenir visible au focus. */
.screen-reader-text:focus {
	position: static;
	width: auto;
	height: auto;
	margin: 0;
	overflow: visible;
	clip: auto;
	clip-path: none;
	white-space: normal;
}

/* ── Nuage des types ───────────────────────────────────────────── */

.nuage--familles a { gap: 0.45rem; }
.nuage--familles .pastille { margin-right: 0; }

/* ── Pour qui c'est fait ───────────────────────────────────────── */

.verdict {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 0;
	margin-top: 1.2rem;
}

.verdict__colonne {
	padding: 1.2rem 1.3rem;
	outline: 1px solid var(--filet);
}

.verdict__colonne--pour { background: var(--biere-clair); }

.verdict__colonne h3 {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 0.8rem;
	font-size: 0.9375rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.verdict__colonne--pour h3 .picto { color: #2E7D4F; }
.verdict__colonne--contre h3 .picto { color: #B5432E; }

.verdict__colonne ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.verdict__colonne li {
	position: relative;
	padding: 0.4rem 0 0.4rem 1.1rem;
	font-size: 0.9375rem;
	border-bottom: 1px solid var(--filet);
}

.verdict__colonne li:last-child { border-bottom: 0; }

/* Un trait court plutôt qu'une puce : le site n'a aucun angle arrondi. */
.verdict__colonne li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 1.05em;
	width: 6px;
	height: 2px;
	background: var(--encre-douce);
}

.verdict__colonne--pour li::before { background: #2E7D4F; }
.verdict__colonne--contre li::before { background: #B5432E; }

@media (max-width: 620px) {
	.verdict { grid-template-columns: 1fr; }
}

/* ── Bloc de participation ─────────────────────────────────────── */

.actions {
	background: var(--biere-clair);
	padding: clamp(1.3rem, 4vw, 1.9rem);
	border-left: 3px solid var(--biere);
}

.actions h2 { border: 0; padding: 0; margin-bottom: 0.7rem; }
.actions__aide p { max-width: 54ch; margin-bottom: 1rem; }

.actions__barre {
	display: flex;
	flex-wrap: wrap;
	gap: 0.55rem;
	margin-top: 1.5rem;
	padding-top: 1.3rem;
	border-top: 1px solid var(--filet);
}

.bouton--sobre {
	background: var(--papier);
	color: var(--encre);
	border: 1px solid var(--filet);
	font-weight: 550;
	cursor: pointer;
	font-size: 0.875rem;
	padding: 0.6rem 0.95rem;
	font-family: inherit;
}

.bouton--sobre:hover {
	background: var(--encre);
	color: var(--papier);
	border-color: var(--encre);
}

.bouton--sobre .picto { flex: none; }

.copier--fait,
.copier--fait:hover {
	background: #2E7D4F;
	border-color: #2E7D4F;
	color: #fff;
}

.actions__etat {
	margin: 0.8rem 0 0;
	font-size: 0.8125rem;
	color: var(--encre-douce);
	min-height: 1.2em;
}

/* ═══════════════════════════════════════════════════════════════════
   NAVIGATION
   Les panneaux s'ouvrent au survol et au focus clavier, sans
   JavaScript. Le script ne sert qu'au bouton mobile et à la touche
   Échap : la navigation reste entière si le script ne charge pas.
   ═══════════════════════════════════════════════════════════════════ */

/* La barre flotte : `.tete` ne porte que l'espace autour, le fond et le
   liseré appartiennent à `.tete__barre`. Le contenu défile derrière. */
.tete {
	position: sticky;
	top: 0;
	z-index: 30;
	padding: 0.6rem 0;
	pointer-events: none;   /* la marge laisse passer les clics */
}

.tete > .contenu { pointer-events: auto; }

.tete__sentinelle { height: 1px; margin-bottom: -1px; }

/* Aucun cadre, aucun trait : la barre repose sur son seul fond. Au repos
   elle se confond avec la page, ce qui est voulu ; sur une photographie
   son fond blanc la détache ; et une ombre n'apparaît qu'une fois le
   contenu passé dessous. */
.tete__barre {
	background: var(--papier);
	transition: box-shadow 0.22s ease;
}

.tete--pose .tete__barre {
	box-shadow: 0 8px 24px -16px rgba(21, 23, 28, 0.3);
}

/* ── Ligne 1 ───────────────────────────────────────────────────── */

.tete__haut {
	display: flex;
	align-items: center;
	gap: 1rem;
	min-height: 46px;
	padding: 0 0.85rem;
}

.tete__marque {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	font-weight: 700;
	font-size: 1rem;
	letter-spacing: -0.02em;
	text-decoration: none;
	color: var(--encre);
	flex: none;
}

.tete__logo { color: #E9A72C; }

/* ── La barre ──────────────────────────────────────────────────── */

.nav__liste {
	display: flex;
	list-style: none;
	margin: 0;
	padding: 0 0.35rem 0.35rem;
	gap: 0;
	min-height: 38px;
	align-items: stretch;
}

.nav__entree { position: relative; }

button.nav__lien {
	border: 0;
	background: none;
	font-family: inherit;
	cursor: pointer;
	text-align: left;
}

.nav__lien {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	padding: 0 0.75rem;
	height: 100%;
	font-size: 0.875rem;
	font-weight: 550;
	text-decoration: none;
	color: var(--encre);
	white-space: nowrap;
	/* Le trait de survol s'installe à l'avance, sinon le texte saute
	   d'un pixel au premier passage de la souris. */
	box-shadow: inset 0 -2px 0 transparent;
	transition: box-shadow 0.15s ease, color 0.15s ease;
}

.nav__entree:focus-within > .nav__lien,
.nav__entree[data-ouvert="1"] > .nav__lien {
	box-shadow: inset 0 -2px 0 #E9A72C;
}

@media (hover: hover) {
	.nav__entree:hover > .nav__lien { box-shadow: inset 0 -2px 0 #E9A72C; }
}

.nav__lien:hover { color: #B07A14; }

.nav__chevron {
	transform: rotate(90deg);
	transition: transform 0.18s ease;
	opacity: 0.45;
}

.nav__entree:focus-within .nav__chevron,
.nav__entree[data-ouvert="1"] .nav__chevron { transform: rotate(-90deg); opacity: 1; }

@media (hover: hover) {
	.nav__entree:hover .nav__chevron { transform: rotate(-90deg); opacity: 1; }
}

.nav__compte {
	font-size: 0.75rem;
	font-weight: 600;
	padding: 0.1rem 0.4rem;
	background: #F2E2BE;
	color: #7A5410;
}

/* ── Les panneaux ──────────────────────────────────────────────── */

.panneau {
	position: absolute;
	top: calc(100% + 1px);
	left: -0.35rem;
	z-index: 30;
	width: max-content;
	max-width: min(92vw, 44rem);
	background: var(--papier);
	border: 1px solid var(--filet);
	box-shadow: 0 12px 28px -18px rgba(0, 0, 0, 0.45);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-4px);
	transition: opacity 0.16s ease, transform 0.16s ease, visibility 0s 0.16s;
}

.panneau--etroit { max-width: min(92vw, 26rem); }

.nav__entree:focus-within > .panneau,
.nav__entree[data-ouvert="1"] > .panneau {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	transition-delay: 0s;
}

@media (hover: hover) {
	.nav__entree:hover > .panneau {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
		transition-delay: 0s;
	}
}

.panneau__interieur { padding: 1rem; }

.panneau__titre {
	margin: 0 0 0.7rem;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--encre-douce);
}

.panneau__colonnes {
	display: grid;
	grid-template-columns: repeat(2, minmax(13rem, 1fr));
	gap: 0;
}

.panneau__colonnes--serrees { grid-template-columns: repeat(3, minmax(9.5rem, 1fr)); }

.panneau__pied a { color: #B07A14; }

.panneau__pied {
	margin: 0.8rem 0 0;
	padding-top: 0.7rem;
	border-top: 1px solid var(--filet);
	font-size: 0.8125rem;
	color: var(--encre-douce);
}

/* ── Les entrées d'un panneau ──────────────────────────────────── */

.vignette {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.55rem 0.6rem;
	text-decoration: none;
	color: inherit;
	transition: background 0.14s ease;
}

.vignette:hover { background: #FBF6EC; }

.vignette__pastille {
	width: 10px;
	height: 10px;
	flex: none;
	display: block;
}

.vignette__texte { display: flex; flex-direction: column; min-width: 0; }

.vignette__nom {
	font-size: 0.9375rem;
	font-weight: 550;
	line-height: 1.25;
}

.vignette__compte {
	font-size: 0.75rem;
	color: var(--encre-douce);
}

.vignette--simple {
	justify-content: space-between;
	gap: 0.5rem;
}

/* Pastille puis nom, calés à gauche : les noms doivent s'aligner d'une
   colonne à l'autre, y compris quand la bière n'a pas de famille. */
.vignette--nom .vignette__nom {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.vignette__pastille--vide { visibility: hidden; }

.vignette--simple .vignette__nom {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* ── Le bouton mobile ──────────────────────────────────────────── */

.tete__bascule {
	display: none;
	margin-left: auto;
	border: 1px solid var(--filet);
	background: var(--papier);
	padding: 0.5rem 0.6rem;
	cursor: pointer;
	line-height: 0;
}

.tete__barres { display: block; width: 18px; }

.tete__barres span {
	display: block;
	height: 2px;
	background: var(--encre);
	margin: 3px 0;
	transition: transform 0.2s ease, opacity 0.2s ease;
}

.tete__bascule[aria-expanded="true"] .tete__barres span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.tete__bascule[aria-expanded="true"] .tete__barres span:nth-child(2) { opacity: 0; }
.tete__bascule[aria-expanded="true"] .tete__barres span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

/* ── Sous 900 px : la barre devient un panneau déroulant ───────── */

@media (max-width: 900px) {
	.tete { padding: 0.5rem 0; }
	.tete__bascule { display: block; order: 2; }
	.tete__marque { order: 1; }

	/* La recherche prend sa propre ligne sous l'identité : l'entête
	   passe à trois lignes plutôt que d'écraser le champ. */
	.tete__haut { flex-wrap: wrap; gap: 0 0.75rem; padding: 0 0.6rem; }
	.chercher { order: 3; flex: 1 0 100%; margin: 0 0 0.6rem; }

	/* Le menu se déplie **dans** la barre flottante : elle grandit au
	   lieu de laisser tomber un panneau détaché derrière elle. */
	.nav {
		display: grid;
		grid-template-rows: 0fr;
		transition: grid-template-rows 0.22s ease;
	}

	.nav > * { min-height: 0; overflow: hidden; }

	/* Le focus ouvre aussi : sans cela, tabuler dans un menu replié
	   déplacerait le curseur sur des liens invisibles. */
	.nav[data-ouvert="1"],
	.nav:focus-within { grid-template-rows: 1fr; }

	.nav[data-ouvert="1"] > *,
	.nav:focus-within > * { max-height: calc(100vh - 8rem); overflow-y: auto; }

	/* Aucun espacement vertical ici : la piste de grille vaut zéro quand
	   le menu est replié, mais le padding, lui, resterait et laisserait
	   une bande vide de 14 px sous la recherche. */
	.nav__liste {
		flex-direction: column;
		padding: 0 0.85rem;
		min-height: 0;
		align-items: stretch;
	}

	.nav__entree { border-bottom: 1px solid var(--filet); }

	.nav__entree:last-child {
		border-bottom: 0;
		padding-bottom: 0.7rem;   /* masqué avec le reste quand c'est replié */
	}

	.nav__lien {
		padding: 0.85rem 0;
		width: 100%;
		height: auto;
		justify-content: space-between;
		font-size: 0.9375rem;
		box-shadow: none;
	}

	.nav__entree:focus-within > .nav__lien,
	.nav__entree[data-ouvert="1"] > .nav__lien { box-shadow: none; color: #B07A14; }

	/* Les panneaux ne flottent plus : ils se déplient dans le flux, et
	   la grille s'arrête d'elle même à la hauteur du contenu. */
	.panneau {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		border: 0;
		box-shadow: none;
		max-width: none;
		display: grid;
		grid-template-rows: 0fr;
		transition: grid-template-rows 0.22s ease;
	}

	.panneau > * { min-height: 0; overflow: hidden; }

	.nav__entree:focus-within > .panneau,
	.nav__entree[data-ouvert="1"] > .panneau { grid-template-rows: 1fr; }

	.panneau__interieur { padding: 0 0 0.8rem; }
	.panneau__colonnes,
	.panneau__colonnes--serrees { grid-template-columns: repeat(2, 1fr); }

	.suggestions { max-height: 60vh; }
}

@media (max-width: 520px) {
	.panneau__colonnes,
	.panneau__colonnes--serrees { grid-template-columns: 1fr; }
}


/* ═══════════════════════════════════════════════════════════════════
   DRAPEAUX
   Une seule image pour soixante et un pays, découpée par
   `background-position`. Chaque pays ne porte que ses deux coordonnées
   dans la grille, d'où des règles d'une ligne.
   ═══════════════════════════════════════════════════════════════════ */

.drapeau {
	--large: 22px;
	width: var(--large);
	height: calc(var(--large) * 0.75);
	flex: none;
	display: inline-block;
	vertical-align: -0.12em;
	background-image: url(img/drapeaux.webp);
	background-repeat: no-repeat;
	/* La grille fait 4 colonnes sur 16 lignes : l'image est mise à
	   l'échelle d'un drapeau, pas de sa taille d'origine. */
	background-size: calc(var(--large) * 4) calc(var(--large) * 0.75 * 16);
	background-position: calc(var(--col) * var(--large) * -1) calc(var(--lig) * var(--large) * -0.75);
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
}

.drapeau--petit  { --large: 18px; }
.drapeau--grand  { --large: 34px; }
.drapeau--geant  { --large: 56px; }

/* DRAPEAUX:DEBUT */
.drapeau--be{--col:0;--lig:0}.drapeau--nl{--col:1;--lig:0}.drapeau--pl{--col:2;--lig:0}.drapeau--fr{--col:3;--lig:0}.drapeau--gb{--col:0;--lig:1}.drapeau--us{--col:1;--lig:1}
.drapeau--cz{--col:2;--lig:1}.drapeau--mx{--col:3;--lig:1}.drapeau--dk{--col:0;--lig:2}.drapeau--fi{--col:1;--lig:2}.drapeau--ve{--col:2;--lig:2}.drapeau--de{--col:3;--lig:2}
.drapeau--jp{--col:0;--lig:3}.drapeau--au{--col:1;--lig:3}.drapeau--br{--col:2;--lig:3}.drapeau--ro{--col:3;--lig:3}.drapeau--hr{--col:0;--lig:4}.drapeau--ie{--col:1;--lig:4}
.drapeau--hu{--col:2;--lig:4}.drapeau--il{--col:3;--lig:4}.drapeau--ca{--col:0;--lig:5}.drapeau--ar{--col:1;--lig:5}.drapeau--cl{--col:2;--lig:5}.drapeau--cn{--col:3;--lig:5}
.drapeau--lu{--col:0;--lig:6}.drapeau--ru{--col:1;--lig:6}.drapeau--se{--col:2;--lig:6}.drapeau--si{--col:3;--lig:6}.drapeau--sk{--col:0;--lig:7}.drapeau--in{--col:1;--lig:7}
.drapeau--ht{--col:2;--lig:7}.drapeau--mg{--col:3;--lig:7}.drapeau--do{--col:0;--lig:8}.drapeau--ge{--col:1;--lig:8}.drapeau--bb{--col:2;--lig:8}.drapeau--vc{--col:3;--lig:8}
.drapeau--ag{--col:0;--lig:9}.drapeau--lk{--col:1;--lig:9}.drapeau--jm{--col:2;--lig:9}.drapeau--kr{--col:3;--lig:9}.drapeau--tt{--col:0;--lig:10}.drapeau--pr{--col:1;--lig:10}
.drapeau--vi{--col:2;--lig:10}.drapeau--uy{--col:3;--lig:10}.drapeau--md{--col:0;--lig:11}.drapeau--tr{--col:1;--lig:11}.drapeau--es{--col:2;--lig:11}.drapeau--bz{--col:3;--lig:11}
.drapeau--cr{--col:0;--lig:12}.drapeau--bj{--col:1;--lig:12}.drapeau--cu{--col:2;--lig:12}.drapeau--na{--col:3;--lig:12}.drapeau--pe{--col:0;--lig:13}.drapeau--rs{--col:1;--lig:13}
.drapeau--gm{--col:2;--lig:13}.drapeau--bg{--col:3;--lig:13}.drapeau--id{--col:0;--lig:14}.drapeau--ch{--col:1;--lig:14}.drapeau--tg{--col:2;--lig:14}.drapeau--th{--col:3;--lig:14}
.drapeau--pf{--col:0;--lig:15}
/* DRAPEAUX:FIN */

/* ═══════════════════════════════════════════════════════════════════
   RECHERCHE
   ═══════════════════════════════════════════════════════════════════ */

.chercher {
	position: relative;
	display: flex;
	align-items: center;
	margin-left: auto;
	flex: 0 1 19rem;
	border: 1px solid var(--filet);
	background: var(--papier-teinte);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.chercher:focus-within {
	background: var(--papier);
	border-color: #D6A94A;
	box-shadow: 0 0 0 3px rgba(233, 167, 44, 0.16);
}

.chercher__picto {
	flex: none;
	margin-left: 0.55rem;
	opacity: 0.45;
}

.chercher__champ {
	flex: 1;
	min-width: 0;
	border: 0;
	background: none;
	font: inherit;
	font-size: 0.8125rem;
	padding: 0.35rem 0.4rem;
	color: var(--encre);
}

.chercher__champ:focus { outline: 0; }
.chercher__champ::placeholder { color: var(--encre-douce); }

/* La croix native de Safari et Chrome se superpose au bouton de validation. */
.chercher__champ::-webkit-search-cancel-button { display: none; }

.chercher__valider {
	flex: none;
	border: 0;
	background: none;
	padding: 0.45rem 0.55rem;
	cursor: pointer;
	line-height: 0;
	color: var(--encre-douce);
}

.chercher__valider:hover { color: #B07A14; }

/* ── La liste de suggestions ───────────────────────────────────────── */

.suggestions {
	position: absolute;
	top: calc(100% + 4px);
	/* Plus large que le champ : les noms de bières sont longs et le
	   détail leur prendrait la place. */
	right: -1px;
	left: auto;
	min-width: calc(100% + 2px);
	width: max-content;
	max-width: min(92vw, 28rem);
	z-index: 40;
	background: var(--papier);
	border: 1px solid var(--filet);
	box-shadow: 0 14px 30px -18px rgba(0, 0, 0, 0.5);
	max-height: 70vh;
	overflow-y: auto;
	padding: 0.4rem;
}

.suggestions[hidden] { display: none; }

.suggestions__titre {
	margin: 0.5rem 0 0.25rem;
	padding: 0 0.5rem;
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--encre-douce);
}

.suggestions__titre:first-child { margin-top: 0.15rem; }

.suggestion {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	padding: 0.45rem 0.5rem;
	text-decoration: none;
	color: inherit;
}

.suggestion:hover,
.suggestion--visee { background: #FBF6EC; }

.suggestion__nom {
	font-size: 0.9375rem;
	font-weight: 550;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.suggestion__nom mark {
	background: none;
	color: #B07A14;
	font-weight: 700;
}

.suggestion__detail {
	margin-left: auto;
	padding-left: 0.5rem;
	font-size: 0.75rem;
	color: var(--encre-douce);
	white-space: nowrap;
	flex: none;
}

.suggestion__pastille {
	width: 10px;
	height: 10px;
	flex: none;
	/* Les pastilles font 10 px et les drapeaux 18 : sans ce calage, les
	   noms ne s'alignent pas d'un groupe à l'autre. */
	margin: 0 4px;
}

.suggestion__pastille--vide { visibility: hidden; }

.suggestions__vide {
	margin: 0;
	padding: 0.7rem 0.6rem;
	font-size: 0.875rem;
	color: var(--encre-douce);
}

.suggestions__tout {
	display: block;
	width: 100%;
	margin-top: 0.4rem;
	padding: 0.55rem;
	border: 0;
	border-top: 1px solid var(--filet);
	background: none;
	font: inherit;
	font-size: 0.8125rem;
	font-weight: 600;
	color: #B07A14;
	cursor: pointer;
	text-align: center;
}

.suggestions__tout:hover { background: #FBF6EC; }

/* ── Le pays dans une vignette de menu ─────────────────────────────── */

.vignette--pays {
	gap: 0.5rem;
	justify-content: flex-start;
}

.vignette--pays .vignette__nom {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.vignette--pays .vignette__compte { margin-left: auto; padding-left: 0.4rem; }


/* ═══════════════════════════════════════════════════════════════════
   ARCHIVE ET RÉSULTATS
   ═══════════════════════════════════════════════════════════════════ */

.hero--liste { padding: 2.5rem 0 2rem; }
.hero--liste h1 { margin: 0.3rem 0 0.7rem; }

.bloc--mince { max-width: 32rem; }
.bloc--mince .chercher { flex: 1 1 auto; margin-left: 0; }

/* ── Les deux colonnes d'entrée ────────────────────────────────────── */

.entrees {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.5rem 2.5rem;
	margin-top: 1.2rem;
}

.entrees__colonne h3 { margin: 0 0 0.6rem; font-size: 1rem; }

.puces {
	list-style: none;
	margin: 0;
	padding: 0;
}

.puces li {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	padding: 0.4rem 0;
	border-bottom: 1px solid var(--filet);
	font-size: 0.9375rem;
}

.puces li:last-child { border-bottom: 0; }
.puces a { text-decoration: none; color: inherit; font-weight: 550; }
.puces a:hover { color: #B07A14; }

.puces__compte {
	margin-left: auto;
	font-size: 0.8125rem;
	color: var(--encre-douce);
	font-variant-numeric: tabular-nums;
}

/* Une liste de conseils n'a pas de compte : ses puces restent au fil du
   texte au lieu de s'étaler en tableau. */
.bloc > .puces li { display: list-item; list-style: disc; margin-left: 1.1rem; border-bottom: 0; }

/* ── Les pages suggérées par la recherche ──────────────────────────── */

.pistes {
	list-style: none;
	margin: 1.1rem 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
	gap: 0.6rem;
}

.pistes__item a {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	padding: 0.8rem 0.9rem;
	border: 1px solid var(--filet);
	text-decoration: none;
	color: inherit;
	transition: border-color 0.14s ease, background 0.14s ease;
}

.pistes__item a:hover { border-color: #D6A94A; background: #FBF6EC; }

.pistes__item .vignette__pastille { width: 14px; height: 14px; }

.pistes__texte { display: flex; flex-direction: column; min-width: 0; }
.pistes__nom { font-weight: 650; font-size: 1rem; }
.pistes__detail { font-size: 0.8125rem; color: var(--encre-douce); }

/* ── Le pays sur une ligne de listing ──────────────────────────────── */

.listing__pays {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
}

@media (max-width: 640px) {
	.entrees { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════
   PIED DE PAGE
   Deux étages : la suite de la visite, puis les mentions. Le second
   est volontairement plus sombre et plus petit : c'est de l'ourlet,
   pas du contenu.
   ═══════════════════════════════════════════════════════════════════ */

.pied {
	margin-top: 4rem;
	border-top: 1px solid var(--filet);
	background: var(--papier-teinte);
}

.pied__grille {
	display: grid;
	grid-template-columns: 1.6fr 1fr 1fr 1fr;
	gap: 2rem;
	padding-top: 2.6rem;
	padding-bottom: 2.4rem;
}

.pied__marque {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-weight: 700;
	font-size: 1.0625rem;
	letter-spacing: -0.02em;
	text-decoration: none;
	color: var(--encre);
}

.pied__pitch {
	margin: 0.7rem 0 0;
	font-size: 0.875rem;
	line-height: 1.6;
	max-width: 30ch;
}

.pied__note {
	margin: 0.7rem 0 0;
	font-size: 0.8125rem;
	line-height: 1.6;
	color: var(--encre-douce);
	max-width: 34ch;
}

.pied__note a { color: #B07A14; }

.pied__titre {
	margin: 0 0 0.7rem;
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--encre-douce);
}

.pied__liste {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.42rem;
}

.pied__liste a {
	display: flex;
	align-items: center;
	gap: 0.45rem;
	font-size: 0.875rem;
	text-decoration: none;
	color: var(--encre);
}

.pied__liste a:hover { color: #B07A14; }
.pied__liste .vignette__pastille { width: 9px; height: 9px; }

/* ── L'ourlet ──────────────────────────────────────────────────────── */

.pied__bas {
	border-top: 1px solid var(--filet);
	background: var(--papier);
}

.pied__bas-grille {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.6rem 1.5rem;
	padding-top: 1rem;
	padding-bottom: 1rem;
}

.pied__copyright {
	margin: 0;
	font-size: 0.75rem;
	color: var(--encre-douce);
}

.pied__legal {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.3rem 1rem;
}

.pied__legal a {
	font-size: 0.75rem;
	color: var(--encre-douce);
	text-decoration: none;
}

.pied__legal a:hover { color: var(--encre); text-decoration: underline; }

@media (max-width: 900px) {
	.pied__grille { grid-template-columns: 1fr 1fr; gap: 1.8rem; }
	.pied__bloc--marque { grid-column: 1 / -1; }
}

@media (max-width: 520px) {
	.pied__grille { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════
   PAGES FIXES
   ═══════════════════════════════════════════════════════════════════ */

.hero--page { padding: 2.4rem 0 2rem; }
.hero--page h1 { margin: 0.3rem 0 0.6rem; max-width: 24ch; }

.hero__date {
	margin: 0.8rem 0 0;
	font-size: 0.8125rem;
	color: var(--encre-douce);
}

/* Surtout pas « .page » : WordPress pose cette classe sur le <body> de
   toute page, et la grille s'appliquerait au document entier. */
.page-fixe {
	display: grid;
	grid-template-columns: 15rem minmax(0, 1fr);
	gap: 3rem;
	align-items: start;
	padding-top: 2.4rem;
	padding-bottom: 1rem;
}

/* Sans sommaire, le texte ne s'étale pas sur toute la largeur : une
   colonne de lecture se mesure en caractères, pas en pixels. */
.page-fixe > .page__texte:only-child { grid-column: 1 / -1; max-width: 70ch; }

.sommaire {
	position: sticky;
	top: 7.5rem;
	border-left: 2px solid var(--filet);
	padding-left: 1rem;
}

.sommaire__titre {
	margin: 0 0 0.6rem;
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--encre-douce);
}

.sommaire__liste {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.45rem;
	counter-reset: sommaire;
}

.sommaire__liste a {
	font-size: 0.875rem;
	line-height: 1.45;
	text-decoration: none;
	color: var(--encre-douce);
}

.sommaire__liste a:hover { color: var(--encre); }

.page__texte { max-width: 70ch; }
.page__texte h2 { scroll-margin-top: 7.5rem; }

@media (max-width: 900px) {
	.page-fixe { grid-template-columns: 1fr; gap: 1.6rem; }
	.sommaire { position: static; }
	.page__texte { max-width: none; }
}

/* ═══════════════════════════════════════════════════════════════════
   ACCUEIL
   ═══════════════════════════════════════════════════════════════════ */

.accueil-hero {
	background: #FBF5EA;
	border-bottom: 1px solid var(--filet);
	padding: clamp(2.5rem, 6vw, 4.5rem) 0 clamp(2rem, 4vw, 3rem);
}

/* Le texte à gauche, les verres à droite : le hero occupait toute la
   largeur pour n'en remplir que la moitié. */
.accueil-hero > .contenu {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-areas: "texte verres" "chiffres chiffres";
	align-items: center;
	gap: 0 2rem;
}

.accueil-hero__texte  { grid-area: texte; }
.accueil-hero__visuel { grid-area: verres; }
.accueil-chiffres     { grid-area: chiffres; }

/* ── La photographie du bandeau d'accueil ──────────────────────────
   Un cadre franchement arrondi, et des pastilles posées dessus qui
   disent ce que le site garantit. Elles sont en verre dépoli pour
   rester lisibles quelle que soit la zone de l'image qu'elles couvrent. */

.visuel {
	position: relative;
	margin: 0;
	width: clamp(240px, 26vw, 330px);
	line-height: 0;
}

.visuel__image {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	border-radius: var(--r-xl);
}

.visuel__badge {
	position: absolute;
	display: inline-flex;
	align-items: center;
	gap: 0.34rem;
	padding: 0.42rem 0.75rem;
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1.2;
	white-space: nowrap;
	color: var(--encre);
	background: rgba(255, 255, 255, 0.86);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	border-radius: var(--r-pill);
	box-shadow: 0 8px 20px -14px rgba(21, 23, 28, 0.5);
}

.visuel__badge svg { color: var(--ambre-fonce); }

.visuel__badge--1 { top: 8%; left: -14%; }
.visuel__badge--2 { top: 44%; right: -8%; }
.visuel__badge--3 { bottom: 9%; left: -10%; }

@media (max-width: 860px) {
	/* Sur un écran étroit, la photographie prendrait la place du champ de
	   recherche, qui est le sujet de la page. */
	.accueil-hero__visuel { display: none; }
}

.accueil-hero h1 {
	margin: 0;
	font-size: clamp(2rem, 5.2vw, 3.4rem);
	line-height: 1.08;
	letter-spacing: -0.03em;
}

.accueil-hero__chapo {
	margin: 1.1rem 0 0;
	font-size: clamp(1rem, 1.6vw, 1.125rem);
	line-height: 1.6;
	max-width: 46ch;
	color: var(--encre-douce);
}

.accueil-hero__chapo strong { color: var(--encre); }

/* ── Le champ de recherche, en grand ──────────────────────────────── */

.accueil-hero__chercher { margin-top: 1.8rem; max-width: 34rem; }

/* Le champ de l'entête est discret, celui ci est le sujet de la page :
   mêmes classes, autre échelle. */
.accueil-hero__chercher .chercher {
	flex: 1 1 auto;
	margin: 0;
	background: var(--papier);
	border-color: #d7dbe2;
	box-shadow: 0 1px 2px rgba(21, 23, 28, 0.04);
}

.accueil-hero__chercher .chercher__picto { margin-left: 0.85rem; opacity: 0.55; }
.accueil-hero__chercher .chercher__champ { font-size: 1rem; padding: 0.85rem 0.6rem; }
.accueil-hero__chercher .chercher__valider { padding: 0.7rem 0.9rem; }

.accueil-hero__exemples {
	margin: 0.7rem 0 0;
	font-size: 0.875rem;
	color: var(--encre-douce);
}

.accueil-hero__exemples a { color: var(--encre); }

/* ── Les chiffres ─────────────────────────────────────────────────── */

.accueil-chiffres {
	display: flex;
	flex-wrap: wrap;
	gap: 0;
	margin: 2.4rem 0 0;
	border-top: 1px solid var(--filet);
}

.accueil-chiffre {
	flex: 1 1 8rem;
	padding: 1rem 1.2rem 0 0;
	border-right: 1px solid var(--filet);
}

.accueil-chiffre:last-child { border-right: 0; }
.accueil-chiffre:not(:first-child) { padding-left: 1.2rem; }

.accueil-chiffre dt {
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--encre-douce);
}

.accueil-chiffre dd {
	margin: 0.2rem 0 0;
	font-size: clamp(1.4rem, 3vw, 1.9rem);
	font-weight: 700;
	letter-spacing: -0.02em;
	font-variant-numeric: tabular-nums;
}

/* ── Introduction de bloc ─────────────────────────────────────────── */

.bloc__intro {
	margin: 0.6rem 0 1.4rem;
	max-width: 62ch;
	color: var(--encre-douce);
	line-height: 1.65;
}

.bloc__intro strong { color: var(--encre); }

.bloc__suite { margin: 1.5rem 0 0; }

.bloc__suite--discret {
	font-size: 0.875rem;
	color: var(--encre-douce);
}

/* ── Cartes de type ───────────────────────────────────────────────── */

.cartes-types {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
	gap: 0.7rem;
}

.carte-type a {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	height: 100%;
	padding: 0.9rem 1rem;
	border: 1px solid var(--filet);
	/* Le type se reconnaît à sa couleur : un liseré épais à gauche suffit,
	   un aplat écraserait le texte. */
	border-left: 4px solid var(--teinte, #E9A72C);
	text-decoration: none;
	color: inherit;
	transition: background 0.14s ease, border-color 0.14s ease;
}

.carte-type a:hover { background: #FBF6EC; border-color: #d7dbe2; border-left-color: var(--teinte, #E9A72C); }

.carte-type__haut {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.6rem;
}

.carte-type__nom { font-weight: 650; font-size: 1.0625rem; }

.carte-type__compte {
	font-size: 0.8125rem;
	color: var(--encre-douce);
	font-variant-numeric: tabular-nums;
}

.carte-type__resume {
	font-size: 0.8125rem;
	line-height: 1.5;
	color: var(--encre-douce);
}

.carte-type--blonde      { --teinte: #E9A72C; }
.carte-type--blanche     { --teinte: #E8C86A; }
.carte-type--ambree      { --teinte: #C4701C; }
.carte-type--rouge       { --teinte: #A32E2E; }
.carte-type--brune       { --teinte: #6B3A1B; }
.carte-type--noire       { --teinte: #241A14; }
.carte-type--houblonnee  { --teinte: #A8A016; }
.carte-type--acidulee    { --teinte: #C23F6B; }
.carte-type--fruitee     { --teinte: #D63A4E; }
.carte-type--sans-alcool { --teinte: #4E8C6A; }

/* ── Cartes de bière ──────────────────────────────────────────────── */

.vedettes {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
	gap: 0.7rem;
}

.vedette a {
	display: flex;
	flex-direction: column;
	height: 100%;
	border: 1px solid var(--filet);
	text-decoration: none;
	color: inherit;
	transition: border-color 0.14s ease, box-shadow 0.14s ease;
}

.vedette a:hover {
	border-color: #d7dbe2;
	box-shadow: 0 10px 24px -18px rgba(21, 23, 28, 0.4);
}

.vedette__image {
	display: block;
	aspect-ratio: 4 / 3;
	background: var(--papier-teinte);
	border-bottom: 1px solid var(--filet);
	overflow: hidden;
}

.vedette__image img {
	width: 100%;
	height: 100%;
	/* `contain` et non `cover` : une bouteille verticale rognée au centre
	   devient une tranche d'étiquette illisible. */
	object-fit: contain;
	display: block;
}

.vedette__texte {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	padding: 0.7rem 0.8rem 0.8rem;
}

.vedette__nom {
	font-weight: 650;
	font-size: 0.9375rem;
	line-height: 1.3;
}

.vedette__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.15rem 0.45rem;
	font-size: 0.75rem;
	color: var(--encre-douce);
}

.vedette__meta > * { white-space: nowrap; }

.vedette__pays {
	display: inline-flex;
	align-items: center;
	gap: 0.28rem;
}

.vedette__degre::before { content: "· "; }

/* ── Cartes de pays ───────────────────────────────────────────────── */

.cartes-pays {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
	gap: 0.6rem;
}

.carte-pays {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	height: 100%;
	padding: 0.7rem 0.85rem;
	border: 1px solid var(--filet);
	text-decoration: none;
	color: inherit;
	transition: background 0.14s ease, border-color 0.14s ease;
}

.carte-pays:hover { background: #FBF6EC; border-color: #d7dbe2; }

.carte-pays__texte { display: flex; flex-direction: column; min-width: 0; }

.carte-pays__nom {
	font-weight: 600;
	font-size: 0.9375rem;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.carte-pays__compte { font-size: 0.75rem; color: var(--encre-douce); }

/* ── Questions ────────────────────────────────────────────────────── */

.questions { border-top: 1px solid var(--filet); max-width: 72ch; }

.question { border-bottom: 1px solid var(--filet); }

.question summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.95rem 0;
	font-weight: 600;
	font-size: 1rem;
	cursor: pointer;
	list-style: none;
}

.question summary::-webkit-details-marker { display: none; }

/* Le signe est dessiné en CSS : un caractère change de forme selon la
   police installée, et le triangle natif ne s'aligne pas. */
.question summary::after {
	content: "";
	flex: none;
	width: 11px;
	height: 11px;
	border-right: 2px solid var(--encre-douce);
	border-bottom: 2px solid var(--encre-douce);
	transform: rotate(45deg) translate(-2px, -2px);
	transition: transform 0.18s ease;
}

.question[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.question summary:hover { color: #8a5e0f; }

.question__reponse {
	padding: 0 0 1.1rem;
	max-width: 68ch;
}

.question__reponse p { margin: 0 0 0.7rem; line-height: 1.65; }
.question__reponse p:last-child { margin-bottom: 0; }

/* ── Confiance ────────────────────────────────────────────────────── */

.bloc--confiance { background: var(--papier-teinte); padding: 1.8rem; border: 1px solid var(--filet); }
.bloc--confiance > h2 { margin-top: 0; }

.confiance {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: 1.6rem;
	margin-top: 1.2rem;
}

.confiance__item h3 { margin: 0 0 0.5rem; font-size: 1rem; }
.confiance__item p { margin: 0 0 0.6rem; font-size: 0.875rem; line-height: 1.6; color: var(--encre-douce); }
.confiance__item p:last-child { margin-bottom: 0; }
.confiance__item a { font-weight: 600; }

.confiance__reserve {
	margin: 1.6rem 0 0;
	padding-top: 1rem;
	border-top: 1px solid var(--filet);
	font-size: 0.8125rem;
	line-height: 1.6;
	color: var(--encre-douce);
}

@media (max-width: 700px) {
	.accueil-chiffre { flex: 1 1 45%; padding-bottom: 0.8rem; }
	.accueil-chiffre:nth-child(2n) { border-right: 0; }
	.bloc--confiance { padding: 1.2rem; }
}



/* ═══════════════════════════════════════════════════════════════════
   FORMES
   Le site est passé d'une géométrie entièrement anguleuse à des formes
   arrondies. Les règles sont regroupées ici plutôt que dispersées dans
   chaque composant : c'est une décision de charte, pas un réglage local,
   et elle doit pouvoir se relire d'un bloc.
   ═══════════════════════════════════════════════════════════════════ */

/* ── La barre de navigation ─────────────────────────────────────── */

.tete__barre { border-radius: var(--r-l); }

.tete--pose .tete__barre {
	box-shadow: 0 10px 30px -18px rgba(21, 23, 28, 0.35);
}

/* Les entrées deviennent des pastilles : le trait de soulignement est
   remplacé par un fond, plus lisible et plus doux. */
.nav__lien {
	border-radius: var(--r-pill);
	padding: 0.42rem 0.85rem;
	height: auto;
	box-shadow: none;
	transition: background 0.16s ease, color 0.16s ease;
}

.nav__liste { align-items: center; gap: 0.15rem; padding: 0 0.5rem 0.55rem; }

.nav__entree:focus-within > .nav__lien,
.nav__entree[data-ouvert="1"] > .nav__lien {
	box-shadow: none;
	background: var(--ambre-pale);
	color: var(--ambre-fonce);
}

@media (hover: hover) {
	.nav__entree:hover > .nav__lien {
		box-shadow: none;
		background: var(--ambre-pale);
		color: var(--ambre-fonce);
	}
}

/* La dernière entrée est l'action principale : elle se traite comme un
   bouton plein, à la manière d'un « Contact » en tête de site. */
.nav__entree:last-child > .nav__lien {
	background: var(--encre);
	color: #fff;
	font-weight: 600;
	padding: 0.42rem 0.5rem 0.42rem 0.95rem;
}

.nav__entree:last-child > .nav__lien:hover { background: #2a2f3a; color: #fff; }

.nav__compte {
	background: rgba(255, 255, 255, 0.16);
	color: #fff;
	border-radius: var(--r-pill);
	padding: 0.1rem 0.5rem;
}

/* ── Champs et boutons ──────────────────────────────────────────── */

.chercher { border-radius: var(--r-pill); padding-left: 0.2rem; }
.suggestions { border-radius: var(--r-m); }
.suggestion { border-radius: var(--r-s); }
.suggestions__tout { border-radius: var(--r-s); }

.bouton,
.actions__bouton,
.recherche__vider { border-radius: var(--r-pill); }

.panneau { border-radius: var(--r-m); }
.vignette { border-radius: var(--r-s); }

/* ── Cartes et blocs ────────────────────────────────────────────── */

.carte-type a,
.vedette a,
.carte-pays,
.pistes__item a,
.listing__item,
.carte-biere a,
.bloc--confiance,
.question,
.chiffre,
.etiquette,
.accueil-hero__chercher .chercher { border-radius: var(--r-m); }

.listing__item { overflow: hidden; }
.vedette a { overflow: hidden; }

.chiffre { outline: 0; border: 1px solid var(--filet); }
.chiffres__grille { gap: 0.6rem; }

.etiquette { border-radius: var(--r-pill); }

/* ── Images ─────────────────────────────────────────────────────── */

.illustration { border-radius: 0; }
.listing__visuel,
.galerie__item,
.vedette__image img { border-radius: var(--r-s); }

.drapeau { border-radius: 3px; }


/* ── La navigation se centre ────────────────────────────────────── */

.nav__liste { justify-content: center; }

/* La dernière entrée se détache du groupe : elle est l'action, pas une
   destination parmi d'autres. */
.nav__entree:last-child { margin-left: 0.5rem; }

/* ── Les titres de section ──────────────────────────────────────── */

/* Un trait noir épais sous chaque titre appartenait à la géométrie
   anguleuse. Le picto prend le relais dans une pastille ambrée, et le
   filet redevient discret. */
.bloc h2 {
	border-bottom: 1px solid var(--filet);
	padding-bottom: 0.9rem;
	gap: 0.7rem;
	letter-spacing: -0.02em;
}

.bloc h2 > svg {
	flex: none;
	padding: 0.42rem;
	box-sizing: content-box;
	background: var(--ambre-pale);
	color: var(--ambre-fonce);
	border-radius: var(--r-pill);
}

/* ── Les chiffres deviennent des cartes ─────────────────────────── */

.chiffres__grille { gap: 0.7rem; }

.chiffre {
	background: var(--papier);
	border: 1px solid var(--filet);
	border-radius: var(--r-m);
	padding: 1.15rem 1.2rem;
}

.chiffre__icone {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	margin-bottom: 0.45rem;
	background: var(--ambre-pale);
	color: var(--ambre-fonce);
	border-radius: var(--r-pill);
}

/* ── Un mot surligné dans les grands titres ─────────────────────── */

.surligne {
	background: var(--ambre-pale);
	color: inherit;
	border-radius: var(--r-pill);
	padding: 0.05em 0.42em;
	box-decoration-break: clone;
	-webkit-box-decoration-break: clone;
}

/* Sur une photographie, l'aplat pâle deviendrait illisible. */
.page--illustree .surligne {
	background: rgba(255, 255, 255, 0.92);
	color: var(--encre);
}

/* ── Les boutons ────────────────────────────────────────────────── */

.bouton {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.72rem 1.3rem;
	background: var(--encre);
	color: #fff;
	font-weight: 600;
	font-size: 0.9375rem;
	text-decoration: none;
	border: 0;
	transition: background 0.16s ease, transform 0.16s ease;
}

.bouton:hover { background: #2a2f3a; color: #fff; transform: translateY(-1px); }

.bouton--clair {
	background: var(--papier);
	color: var(--encre);
	border: 1px solid var(--filet);
}

.bouton--clair:hover { background: var(--ambre-pale); border-color: #e7d6ae; }

/* ── Les cartes respirent ───────────────────────────────────────── */

.carte-type a,
.carte-pays,
.pistes__item a {
	border-color: #eceef2;
	transition: border-color 0.16s ease, background 0.16s ease, transform 0.16s ease;
}

.carte-type a:hover,
.carte-pays:hover,
.pistes__item a:hover { transform: translateY(-2px); }

.carte-type a { border-left-width: 5px; }

.vedette a {
	border-color: #eceef2;
	transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.vedette a:hover {
	transform: translateY(-3px);
	box-shadow: 0 16px 32px -22px rgba(21, 23, 28, 0.45);
}

.vedette__image { border-bottom: 0; padding: 0.4rem 0.4rem 0; }
.vedette__image img { border-radius: var(--r-s); height: 100%; }

/* ── Le listing ─────────────────────────────────────────────────── */

.listing__item {
	border-radius: var(--r-m);
	transition: background 0.14s ease;
}


/* ── Les chiffres de l'accueil ──────────────────────────────────── */

.accueil-chiffres {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 0.7rem;
	margin-top: 2.4rem;
	border-top: 0;
}

.accueil-chiffre {
	flex: none;
	padding: 1rem 1.15rem 1.1rem;
	border: 1px solid #eceef2;
	border-right: 1px solid #eceef2;
	border-radius: var(--r-m);
	background: var(--papier);
}

.accueil-chiffre:not(:first-child) { padding-left: 1.15rem; }
.accueil-chiffre:last-child { border-right: 1px solid #eceef2; }

@media (max-width: 700px) {
	.accueil-chiffres { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.accueil-chiffre:nth-child(2n) { border-right: 1px solid #eceef2; }
}

/* ── Le pied suit la même géométrie ─────────────────────────────── */

.pied__liste a,
.puces a { border-radius: var(--r-xs); }
.pied { border-top: 1px solid var(--filet); }

/* ── Les suggestions de recherche ───────────────────────────────── */

.suggestions { box-shadow: 0 18px 40px -24px rgba(21, 23, 28, 0.5); }


/* ── Le logo ────────────────────────────────────────────────────── */

.tete__logo {
	display: block;
	height: 20px;
	width: auto;
}

.pied__logo {
	display: block;
	height: 30px;
	width: auto;
}

@media (max-width: 520px) {
	.tete__logo { height: 18px; }
}