@charset "UTF-8";
/*=============================================================================
  1001-bieres.com — Design system 2026 (lot L07)
  Chargée après style_bieres_un.css, uniquement quand $design_v2 vaut 1 (variables.php).
  Tout est rattaché à body.site-v2 : sans cette classe, la feuille n'a aucun effet.
  Les retouches du contenu passent par :where() pour garder la spécificité des
  anciennes règles à classe (a.valeur, td.recherche...) et des styles en ligne.
  =============================================================================*/

:root {
	/* Couleurs tirées de la bannière validée */
	--c-espresso: #24170f;
	--c-brun: #3a2618;
	--c-ambre: #e8a93a;
	--c-ambre-fonce: #9a5a0c;	/* texte ambré sur fond clair : contraste 5,5:1 */
	--c-creme: #f6efe3;
	--c-creme-clair: #fbf7f0;
	--c-surface: #ffffff;
	--c-texte: #1f1a17;
	--c-texte-doux: #5c5048;
	--c-bordure: #e6d9c3;
	--c-sur-sombre: #f3e6cf;

	--police-texte: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--police-titre: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;

	--largeur-max: 1280px;
	--gouttiere: 16px;
	--rayon: 14px;
	--ombre: 0 1px 2px rgba(36, 23, 15, .06), 0 8px 24px rgba(36, 23, 15, .08);
	--hauteur-nav: 52px;
	/* Largeur de la bannière ; à partir de 1100 px, celle du texte du menu (voir « Navigation principale ») */
	--l-banniere: min(100vw, 1600px);
}

/*----- Base -----*/
body.site-v2 {
	margin: 0;
	background: var(--c-creme);
	color: var(--c-texte);
	font-family: var(--police-texte);
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scrollbar-color: auto;
}

.site-v2 *, .site-v2 *::before, .site-v2 *::after {box-sizing: border-box;}

.site-v2 :focus-visible {
	outline: 3px solid var(--c-ambre);
	outline-offset: 2px;
	border-radius: 4px;
}

.site-v2 .visuellement-cache {
	position: absolute;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/*----- Lien d'évitement -----*/
.site-evitement {
	position: absolute;
	left: var(--gouttiere);
	top: -100px;
	z-index: 100;
	padding: 10px 16px;
	background: var(--c-ambre);
	color: var(--c-espresso);
	font-weight: 700;
	border-radius: 0 0 8px 8px;
	text-decoration: none;
}
.site-v2 a.site-evitement:link, .site-v2 a.site-evitement:visited {color: var(--c-espresso);}
.site-evitement:focus {top: 0;}

/*----- En-tête : bannière et drapeaux -----*/
.site-entete {background: var(--c-espresso);}

.site-banniere {
	position: relative;
	max-width: var(--l-banniere);
	margin: 0 auto;
	background: var(--c-creme-clair);
	line-height: 0;
}
.site-banniere__lien {display: block;}
.site-banniere__lien img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 2000 / 291;	/* EN-06 : bannière anglaise (2172 / 321 pour la française) */
}

/* À partir de 1100 px, la bannière (moins large que l'écran) se détache sur une version floutée d'elle-même */
@media (min-width: 1100px) {
	.site-entete {
		position: relative;
		overflow: hidden;
		isolation: isolate;
	}
	.site-entete::before {
		content: "";
		position: absolute;
		inset: -40px;
		z-index: -1;
		background: var(--c-espresso) url("../images/banner/banner-1001-beers-640.jpg") center / cover no-repeat;
		filter: blur(28px) saturate(1.1) brightness(.85);
	}
	.site-banniere {box-shadow: 0 0 24px rgba(0, 0, 0, .35);}
}

.site-v2 ul.site-langues {
	display: flex;
	align-items: center;
	margin: 0;
	padding: 0;
	list-style: none;
}
.site-langues li {display: block;}
.site-langues a {display: block; line-height: 0;}
.site-langues img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;	/* L14 : le drapeau américain (225 × 118) était écrasé à 30 × 16 ; les trois drapeaux au même format */
	object-fit: cover;
	border-radius: 2px;
	box-shadow: 0 0 0 1px rgba(255, 255, 255, .35);
}

/* Dans la bannière : zone libre au-dessus du « 1 » et à gauche de la chope du logo
   (environ 10 % de la largeur et 20 % de la hauteur de l'image) ; tailles proportionnelles à la bannière, drapeaux de 21 px au moins */
.site-v2 ul.site-langues--banniere {
	position: absolute;
	top: calc(var(--l-banniere) * .0035);
	left: calc(var(--l-banniere) * .0035);
	gap: calc(var(--l-banniere) * .0025);
	padding: calc(var(--l-banniere) * .0025);
	background: rgba(36, 23, 15, .38);
	border-radius: 8px;
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
}
.site-langues--banniere li {width: max(24px, calc(var(--l-banniere) * .0195));}
/* L14 : cible cliquable de 24 px de haut au moins (WCAG 2.5.8) sans agrandir le cadre : marge intérieure compensée */
.site-langues--banniere a {border-radius: 3px; transition: transform .15s ease; padding: 4px 0; margin: -4px 0;}
.site-langues--banniere a:hover {transform: translateY(-1px) scale(1.06);}

/* Partage (29/10/2026) : sous 1100 px, les drapeaux (trop petits dans la bannière) ne sont plus repris dans la barre de menu ;
   les boutons de partage (social(), logos officiels) prennent leur place, à droite du bouton Menu */
.site-v2 .site-partage {display: none;}
@media (max-width: 1099px) {
	.site-v2 ul.site-langues--banniere {display: none;}
	.site-v2 .site-partage {
		display: flex;
		align-items: center;
		order: 1;
		gap: 8px;
		margin-left: auto;
	}
	.site-v2 .site-partage a.partage {
		width: 40px;	/* cible tactile de 40 × 40 px, logos de 40 px pour Facebook */
		height: 40px;
		margin: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		transition: transform .15s ease;
	}
	.site-v2 .site-partage a.partage svg {margin: 0;}
	.site-v2 .site-partage a.partage_facebook svg {width: 40px; height: 40px;}
	.site-v2 .site-partage a.partage_twitter {box-shadow: inset 0 0 0 1px rgba(243, 230, 207, .35);}	/* disque noir détouré sur la barre sombre */
	.site-v2 .site-partage a.partage:hover {transform: translateY(-1px) scale(1.06);}
	.site-v2 .site-partage a.partage:focus-visible {outline: 3px solid var(--c-ambre); outline-offset: 2px;}
	.site-nav__liste {order: 2;}
}
/* Drapeaux repris dans le pied de page sous 1100 px seulement (au-dessus, ils sont dans la bannière) */
.site-v2 ul.site-langues--pied {display: none;}
@media (max-width: 1099px) {
	.site-v2 ul.site-langues--pied {display: flex; gap: 4px;}
	.site-langues--pied li {width: 44px;}
	.site-langues--pied a {padding: 12px 6px;}	/* cible tactile de 44 × 44 px */
}
/* Partage contextuel (lot/partage-contextuel, 11/11/2026) : barre « Partager cette… » dans le contenu (partage_contextuel(), fonctions/fonctions.php).
   Boutons neutres de 44 px (fond blanc, filet), logos aux couleurs des réseaux en 22-24 px : discrets, homogènes, sans ressembler à une annonce.
   --haut : à partir de 1100 px seulement (dessous, la barre de menu porte le partage) ; --bas : sous 1100 px seulement. */
.site-v2 .partage-ctx {display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px;}
.site-v2 .partage-ctx--haut {display: none;}
@media (min-width: 1100px) {
	.site-v2 .partage-ctx--haut {display: flex;}
	.site-v2 .partage-ctx--bas {display: none;}
}
.site-v2 .partage-ctx [hidden] {display: none;}
.site-v2 .partage-ctx p.partage-ctx__libelle {margin: 0; font-size: 15px; font-weight: 700; color: var(--c-texte-doux);}
.site-v2 .partage-ctx__boutons {display: flex; flex-wrap: wrap; align-items: center; gap: 8px;}
.site-v2 .partage-ctx a.partage, .site-v2 .partage-ctx__action {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin: 0;
	padding: 0;
	background: var(--c-surface);
	border: 1px solid var(--c-bordure);
	border-radius: 999px;
	color: var(--c-texte);
	cursor: pointer;
	transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.site-v2 .partage-ctx a.partage_facebook svg {width: 24px; height: 24px; fill: #0866ff;}
.site-v2 .partage-ctx a.partage_whatsapp svg {width: 22px; height: 22px; fill: #1da851;}	/* vert WhatsApp foncé : contraste 3,1:1 sur blanc (icône) */
.site-v2 .partage-ctx a.partage_twitter svg {width: 18px; height: 18px; fill: #000;}
.site-v2 .partage-ctx__action svg {width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;}
.site-v2 .partage-ctx__copier {width: auto; gap: 8px; padding: 0 16px 0 13px; font: 600 15px/1 var(--police-texte);}
.site-v2 .partage-ctx a.partage:hover, .site-v2 .partage-ctx__action:hover {border-color: var(--c-ambre); transform: translateY(-1px); box-shadow: 0 4px 10px rgba(36, 23, 15, .1);}
.site-v2 .partage-ctx a.partage:focus-visible, .site-v2 .partage-ctx__action:focus-visible {outline: 3px solid var(--c-ambre-fonce); outline-offset: 2px;}
.site-v2 .partage-ctx p.partage-ctx__etat {flex-basis: 100%; margin: 0; font-size: 14px; font-weight: 600; color: #1e5a14;}
.site-v2 .partage-ctx p.partage-ctx__etat:empty {display: none;}	/* p. : plus fort que les règles de paragraphe des pages (.video-description p…) */
.site-v2 .partage-ctx__champ {display: block; width: 100%; max-width: 460px; min-height: 44px; margin-top: 6px; padding: 0 10px; border: 1px solid var(--c-bordure); border-radius: 8px; font: 15px var(--police-texte); color: var(--c-texte);}
/* Variante encadrée (fin de contenu, mobile) */
.site-v2 .partage-ctx--bas, .site-v2 .partage-ctx--toujours {padding: 12px 14px; background: var(--c-creme-clair); border: 1px solid var(--c-bordure); border-radius: var(--rayon);}
.site-v2 .lexique-v2 .partage-ctx--haut {margin: 0 0 20px;}	/* lexique : sous l'introduction, avant la recherche et les lettres */
@media (prefers-reduced-motion: reduce) {.site-v2 .partage-ctx a.partage, .site-v2 .partage-ctx__action {transition: none;} .site-v2 .partage-ctx a.partage:hover, .site-v2 .partage-ctx__action:hover {transform: none;}}

@media (max-width: 359px) {.site-v2 .site-partage {gap: 5px;} .site-v2 .site-partage a.partage {width: 36px; height: 36px;} .site-v2 .site-partage a.partage_facebook svg {width: 36px; height: 36px;}}

/*----- Navigation principale -----*/
.site-nav {
	position: sticky;
	top: 0;
	z-index: 50;
	background: rgba(36, 23, 15, .94);
	border-top: 1px solid rgba(232, 169, 58, .35);
	box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
	.site-nav {
		background: rgba(36, 23, 15, .93);
		-webkit-backdrop-filter: saturate(140%) blur(10px);
		backdrop-filter: saturate(140%) blur(10px);
	}
}

.site-nav__interieur {
	display: flex;
	align-items: center;
	max-width: var(--largeur-max);
	margin: 0 auto;
	padding: 0 var(--gouttiere);
}

.site-nav__bouton {display: none;}

.site-v2 ul.site-nav__liste {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 2px;
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}
.site-nav__liste li {display: block;}

.site-v2 .site-nav__liste a {
	position: relative;
	display: flex;
	align-items: center;
	min-height: var(--hauteur-nav);
	padding: 0 12px;
	color: var(--c-sur-sombre);
	font-size: 16px;
	font-weight: 500;
	letter-spacing: .01em;
	text-decoration: none;
	white-space: nowrap;
	transition: color .15s ease;
}
.site-v2 .site-nav__liste a:visited {color: var(--c-sur-sombre);}
.site-v2 .site-nav__liste a::after {
	content: "";
	position: absolute;
	left: 12px; right: 12px; bottom: 8px;
	height: 2px;
	border-radius: 2px;
	background: linear-gradient(90deg, var(--c-ambre), #f6d58b);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .2s ease;
}
.site-v2 .site-nav__liste a:hover {color: #fff;}
.site-v2 .site-nav__liste a:hover::after {transform: scaleX(1);}
.site-v2 .site-nav__liste a[aria-current="page"] {color: var(--c-ambre);}
.site-v2 .site-nav__liste a[aria-current="page"]::after {transform: scaleX(1);}
.site-v2 .site-nav__liste a:focus-visible {outline-offset: -3px;}
@media (min-width: 1100px) and (max-width: 1279px) {.site-v2 .site-nav__liste a {padding: 0 7px;} .site-v2 .site-nav__liste a::after {left: 7px; right: 7px;}}	/* entrées sur une ligne, barre de défilement comprise */
@media (min-width: 1280px) {.site-v2 .site-nav__liste a {font-size: 17px; padding: 0 13px;} .site-v2 .site-nav__liste a::after {left: 13px; right: 13px;}}

/* Bannière alignée sur le menu (demande du propriétaire, 27/10/2026) : elle commence au-dessus du « A » d'Accueil
   et finit au-dessus de la dernière lettre du menu (« Plan du site » depuis le passage de Liens et Contact dans le pied de page, 02/11/2026).
   --l-banniere = largeur du texte du menu de l'époque à 10 entrées, mesurée sous Windows (1177 px en 17 px, 1015 px en 16 px), arrondie au-dessus,
   conservée pour garder la bannière validée ; --pad-menu = marge intérieure des liens ci-dessus. Les entrées se répartissent
   sur cette largeur ; avec une police plus large, la liste reprend sa largeur naturelle (centrée) au lieu de passer à la ligne. */
@media (min-width: 1100px) {
	:root {--l-banniere: 1016px; --pad-menu: 7px;}
	.site-v2 ul.site-nav__liste {
		width: auto;
		min-width: calc(var(--l-banniere) + 2 * var(--pad-menu));
		margin: 0 auto;
		justify-content: space-between;
	}
}
@media (min-width: 1280px) {:root {--l-banniere: 1180px; --pad-menu: 13px;}}

/* Menu replié sous 1100 px : bouton + panneau. Sans JavaScript, la liste reste visible. */
@media (max-width: 1099px) {
	.js .site-nav__bouton {
		display: inline-flex;
		align-items: center;
		gap: 10px;
		min-height: 48px;
		margin: 2px 0;
		padding: 0 14px 0 10px;
		background: transparent;
		color: var(--c-sur-sombre);
		border: 1px solid rgba(243, 230, 207, .3);
		border-radius: 10px;
		font: 600 15px/1 var(--police-texte);
		cursor: pointer;
	}
	.js .site-nav__bouton:hover {border-color: var(--c-ambre);}
	.site-nav__icone {
		position: relative;
		width: 20px;
		height: 2px;
		background: currentColor;
		border-radius: 2px;
		transition: background .2s;
	}
	.site-nav__icone::before, .site-nav__icone::after {
		content: "";
		position: absolute;
		left: 0;
		width: 20px;
		height: 2px;
		background: currentColor;
		border-radius: 2px;
		transition: transform .2s;
	}
	.site-nav__icone::before {top: -6px;}
	.site-nav__icone::after {top: 6px;}
	.site-nav__bouton[aria-expanded="true"] .site-nav__icone {background: transparent;}
	.site-nav__bouton[aria-expanded="true"] .site-nav__icone::before {transform: translateY(6px) rotate(45deg);}
	.site-nav__bouton[aria-expanded="true"] .site-nav__icone::after {transform: translateY(-6px) rotate(-45deg);}

	.site-nav__interieur {flex-wrap: wrap;}
	.js .site-v2 ul.site-nav__liste,
	.js ul.site-nav__liste {
		display: none;
		flex-direction: column;
		gap: 0;
		padding: 4px 0 12px;
	}
	.js ul.site-nav__liste.est-ouvert {
		display: flex;
		max-height: calc(100vh - var(--hauteur-nav) - 8px);	/* menu collant : reste défilable en paysage */
		overflow-y: auto;
	}
	.js .site-v2 .site-nav__liste a,
	.js .site-nav__liste a {
		min-height: 48px;
		padding: 0 8px;
		font-size: 15px;
		border-bottom: 1px solid rgba(243, 230, 207, .1);
		white-space: normal;
	}
	.js .site-nav__liste a::after {left: 8px; right: auto; width: 32px; bottom: 6px;}
}

/*----- Corps : contenu + colonne publicitaire -----*/
.site-corps {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 180px;
	grid-template-areas: "contenu pub";
	align-items: start;
	gap: 24px;
	max-width: var(--largeur-max);
	margin: 24px auto;
	padding: 0 var(--gouttiere);
}
.site-corps--sans-pub {grid-template-columns: minmax(0, 1fr); grid-template-areas: "contenu";}

.site-main {
	grid-area: contenu;
	min-width: 0;
	padding: 20px 32px 32px;
	background: var(--c-surface);
	border: 1px solid var(--c-bordure);
	border-radius: var(--rayon);
	box-shadow: var(--ombre);
	overflow-x: auto;	/* filet de sécurité : anciens tableaux à largeur fixe */
	/* Équivalent de td.fond3 pour le contenu inclus */
	text-align: left;
	font-size: 15px;
	line-height: 1.5;
}

.site-encart {
	margin: 0 0 20px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--c-bordure);
}
.site-encart--recherche {
	padding: 12px 16px;
	background: var(--c-creme-clair);
	border: 1px solid var(--c-bordure);
	border-radius: 10px;
}

.site-aside {
	grid-area: pub;
	position: sticky;
	top: calc(var(--hauteur-nav) + 16px);
	min-height: 250px;
	text-align: center;
}

@media (max-width: 1099px) {
	.site-corps {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas: "contenu" "pub";
		gap: 16px;
		margin: 16px auto;
	}
	.site-aside {position: static; min-height: 0;}
}

@media (max-width: 640px) {
	.site-corps {padding: 0 8px;}
	.site-main {padding: 12px 16px 24px; border-radius: 10px;}
}

/*----- Pied de page -----*/
.site-pied {
	margin-top: 40px;
	background: var(--c-espresso);
	color: var(--c-sur-sombre);
}
.site-pied__interieur {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 24px;
	max-width: var(--largeur-max);
	margin: 0 auto;
	padding: 24px var(--gouttiere);
}
.site-pied .copyright {color: var(--c-sur-sombre); font-size: 13px;}
.site-pied .copyright p {margin: 4px 0; color: var(--c-sur-sombre); font-size: 13px; line-height: 1.5;}
.site-v2 .site-pied a:link, .site-v2 .site-pied a:visited {color: var(--c-ambre); text-decoration: underline;}
.site-v2 .site-pied a:hover {color: #fff;}
.site-pied .copyright p.pied-liens a {display: inline-block; min-height: 24px; padding: 0 4px; font-size: 14px; line-height: 24px;}	/* cible de 24 px de haut au moins (WCAG 2.5.8) */
.site-pied .copyright p.pied-liens a:first-child {padding-left: 0;}
.site-v2 .site-pied a.site-haut {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 44px;
	padding: 0 14px;
	border: 1px solid rgba(243, 230, 207, .3);
	border-radius: 999px;
	font-size: 14px;
	text-decoration: none;
}

/*----- Typographie et éléments du contenu inclus (spécificité minimale) -----*/
:where(.site-v2 .site-main) p {font-size: 16px; line-height: 1.6; color: var(--c-texte);}

:where(.site-v2 .site-main) h1,
:where(.site-v2 .site-main) h2,
:where(.site-v2 .site-main) h3 {
	font-family: var(--police-titre);
	color: var(--c-ambre-fonce);
	line-height: 1.2;
	letter-spacing: -.005em;
}
:where(.site-v2 .site-main) h1 {font-size: clamp(26px, 3.2vw, 36px); margin: 12px 0 20px;}
:where(.site-v2 .site-main) h2 {font-size: clamp(21px, 2.3vw, 26px); margin: 32px 0 12px;}
:where(.site-v2 .site-main) h3 {font-size: clamp(18px, 1.8vw, 21px); margin: 24px 0 8px;}
:where(.site-v2 .site-main) h4,
:where(.site-v2 .site-main) h5 {color: var(--c-ambre-fonce);}

:where(.site-v2 .site-main) a:link,
:where(.site-v2 .site-main) a:visited {color: var(--c-ambre-fonce);}
:where(.site-v2 .site-main) a:hover,
:where(.site-v2 .site-main) a:active {color: var(--c-espresso);}

:where(.site-v2 .site-main) img {max-width: 100%; height: auto;}

:where(.site-v2) input.btn,
:where(.site-v2) input.btn_petit,
:where(.site-v2) input[type=submit] {
	min-height: 32px;
	padding: 4px 14px;
	background: var(--c-ambre);
	color: var(--c-espresso);
	border: 1px solid #c98a1f;
	border-radius: 8px;
	font-weight: 700;
	cursor: pointer;
}
:where(.site-v2) input.btn:hover,
:where(.site-v2) input.btn_petit:hover,
:where(.site-v2) input[type=submit]:hover {background: #f0b850;}

/* Jeu : l'ancien conteneur (750 px, padding-bottom 75,2 % de la largeur du parent) se déformait dans une colonne plus large */
.site-v2 .jeu_wrapper {
	width: 100%;
	max-width: 750px;
	padding-bottom: 0;
	aspect-ratio: 750 / 564;
}

/*=============================================================================
  Comparateur et recherche de bières (lot L08) — gabarit/recherche-bieres-2026.php
  et gabarit/comparateur-2026.php, actifs quand $comparateur_v2 vaut 1
  =============================================================================*/

/*----- Formulaire (Recherche 2026) : nom toujours visible, filtres repliables, « Plus de critères » -----*/
.site-v2 .cmp-recherche {text-align: left;}
.site-v2 .cmp-barre {display: flex; align-items: flex-end; gap: 10px;}
.site-v2 .cmp-barre .cmp-champ {flex: 1 1 auto; min-width: 0;}
.site-v2 .cmp-champs {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 14px 16px;
}
.site-v2 .cmp-champs--principaux {grid-template-columns: repeat(2, minmax(0, 1fr));}
.site-v2 .cmp-champ--couleur_general, .site-v2 .cmp-champ--clef {grid-column: 1 / -1;}
.site-v2 .cmp-champs--principaux .cmp-champ--alcool {grid-column: 1 / -1;}
@media (max-width: 480px) {.site-v2 .cmp-champs--principaux {grid-template-columns: minmax(0, 1fr);}}
.site-v2 .cmp-champ {min-width: 0; margin: 0; padding: 0; border: 0;}
.site-v2 .cmp-champ > label,
.site-v2 .cmp-champ > legend {
	display: block;
	margin: 0 0 4px;
	padding: 0;
	font-size: 13px;
	font-weight: 600;
	color: var(--c-texte-doux);
}
.site-v2 .cmp-champ select,
.site-v2 .cmp-champ input[type=search],
.site-v2 .cmp-champ input[type=text] {
	width: 100%;
	min-height: 44px;
	padding: 6px 12px;
	background: var(--c-surface);
	color: var(--c-texte);
	border: 1px solid #c9b79a;
	border-radius: 8px;
	font: inherit;
	font-size: 15px;
}
.site-v2 .cmp-champ select:hover,
.site-v2 .cmp-champ input[type=search]:hover,
.site-v2 .cmp-champ input[type=text]:hover {border-color: var(--c-ambre-fonce);}
.site-v2 .cmp-champ input::placeholder {color: #767676; opacity: 1;}
.site-v2 .cmp-champ input:focus::placeholder {color: transparent;}

/* Couleur et « Bière sans alcool » : pastilles (case native, masquée, au-dessus de la pastille) */
.site-v2 .cmp-puces {display: flex; flex-wrap: wrap; gap: 8px;}
.site-v2 .cmp-puce {position: relative; display: inline-block; margin: 0;}
.site-v2 .cmp-puce input {position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer;}
.site-v2 .cmp-puce > span {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	min-height: 40px;
	padding: 4px 14px;
	background: var(--c-surface);
	color: var(--c-texte);
	border: 1px solid #c9b79a;
	border-radius: 999px;
	font-size: 14px;
	white-space: nowrap;
}
.site-v2 .cmp-puce:hover > span {border-color: var(--c-ambre-fonce);}
.site-v2 .cmp-puce input:checked + span {background: #fdf1d9; border-color: var(--c-ambre-fonce); box-shadow: inset 0 0 0 1px var(--c-ambre-fonce); font-weight: 700;}
.site-v2 .cmp-puce input:focus-visible + span {outline: 3px solid var(--c-ambre); outline-offset: 2px;}
.site-v2 .cmp-puce[hidden] {display: none;}
.site-v2 .cmp-puce__nb {color: var(--c-texte-doux); font-weight: 400;}
.site-v2 .cmp-champ option {font-weight: 400;}
.site-v2 .cmp-champ option.cmp-option-famille {font-weight: 600;}	/* styles : familles en léger gras (les listes natives d'iOS et d'Android l'ignorent, le retrait des types reste) */
.site-v2 .cmp-teinte {flex: none; width: 16px; height: 16px; border: 1px solid rgba(36, 23, 15, .3); border-radius: 50%;}
.cmp-teinte--blanche{background:#f6ecc8}.cmp-teinte--blonde{background:#f2c14e}.cmp-teinte--ambree{background:#c9771f}.cmp-teinte--rousse{background:#a8401f}.cmp-teinte--brune{background:#6b3a1e}

/* Degré d'alcool : bloc à deux zones, la plage (bornes, barre, échelle) et le switch « Bière sans alcool ».
   Barre : deux input range superposés ; seuls les curseurs reçoivent le pointeur, la plage colorée est placée par classes (crans de 0,5°) */
.site-v2 .cmp-alcool {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(190px, auto);
	background: var(--c-creme-clair);
	border: 1px solid var(--c-bordure);
	border-radius: 12px;
}
.site-v2 .cmp-alcool__plage {min-width: 0; padding: 12px 18px 12px;}
.site-v2 .cmp-alcool__valeurs {display: flex; align-items: center; gap: 8px; margin: 0 0 4px; font-size: 14px; color: var(--c-texte-doux);}
.site-v2 .cmp-alcool__valeur {
	display: inline-block;
	min-width: 56px;
	padding: 4px 12px;
	background: var(--c-surface);
	color: var(--c-espresso);
	border: 1px solid var(--c-bordure);
	border-radius: 8px;
	font-size: 16px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	text-align: center;
}
.site-v2 .cmp-curseurs {position: relative; height: 44px; min-width: 0;}
.site-v2 .cmp-curseurs__rail {position: absolute; top: 18px; left: 12px; right: 12px; height: 8px; background: #eadfcd; border-radius: 4px;}
.site-v2 .cmp-plage {position: absolute; top: 0; bottom: 0; background: linear-gradient(90deg, #f2bb52, var(--c-ambre)); border-radius: 4px;}
.site-v2 .cmp-curseurs input {
	position: absolute;
	top: 0; left: 0;
	width: 100%;
	height: 44px;
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	-webkit-appearance: none;
	appearance: none;
	pointer-events: none;
}
.site-v2 .cmp-curseurs input::-webkit-slider-runnable-track {background: none;}
.site-v2 .cmp-curseurs input::-moz-range-track {background: none;}
.site-v2 .cmp-curseurs input::-webkit-slider-thumb {
	-webkit-appearance: none;
	box-sizing: border-box;
	width: 24px;
	height: 24px;
	background: var(--c-surface);
	border: 2px solid var(--c-ambre-fonce);
	border-radius: 50%;
	box-shadow: 0 1px 4px rgba(36, 23, 15, .35);
	pointer-events: auto;
	cursor: grab;
	transition: box-shadow .15s ease;
}
.site-v2 .cmp-curseurs input::-moz-range-thumb {
	box-sizing: border-box;
	width: 24px;
	height: 24px;
	background: var(--c-surface);
	border: 2px solid var(--c-ambre-fonce);
	border-radius: 50%;
	box-shadow: 0 1px 4px rgba(36, 23, 15, .35);
	pointer-events: auto;
	cursor: grab;
	transition: box-shadow .15s ease;
}
.site-v2 .cmp-curseurs input:not(:disabled)::-webkit-slider-thumb:hover {box-shadow: 0 1px 4px rgba(36, 23, 15, .35), 0 0 0 6px rgba(232, 169, 58, .3);}
.site-v2 .cmp-curseurs input:not(:disabled)::-moz-range-thumb:hover {box-shadow: 0 1px 4px rgba(36, 23, 15, .35), 0 0 0 6px rgba(232, 169, 58, .3);}
.site-v2 .cmp-curseurs input:active::-webkit-slider-thumb {cursor: grabbing;}
.site-v2 .cmp-curseurs input:active::-moz-range-thumb {cursor: grabbing;}
.site-v2 .cmp-curseurs input:focus-visible {outline: none; border-radius: 0;}
.site-v2 .cmp-curseurs input:focus-visible::-webkit-slider-thumb {box-shadow: 0 0 0 3px var(--c-surface), 0 0 0 6px var(--c-ambre);}
.site-v2 .cmp-curseurs input:focus-visible::-moz-range-thumb {box-shadow: 0 0 0 3px var(--c-surface), 0 0 0 6px var(--c-ambre);}
.site-v2 .cmp-curseurs input:disabled::-webkit-slider-thumb {border-color: #c9b79a; box-shadow: none; cursor: not-allowed;}
.site-v2 .cmp-curseurs input:disabled::-moz-range-thumb {border-color: #c9b79a; box-shadow: none; cursor: not-allowed;}
/* Graduations centrées sur la position des curseurs : marge égale au rayon du curseur, chaque libellé de largeur nulle */
.site-v2 .cmp-alcool__echelle {display: flex; justify-content: space-between; padding: 0 12px; font-size: 12px; line-height: 1.2; color: var(--c-texte-doux); font-variant-numeric: tabular-nums;}
.site-v2 .cmp-alcool__echelle span {display: flex; justify-content: center; width: 0; white-space: nowrap;}
.site-v2 .cmp-alcool:has(.cmp-switch input:checked) .cmp-curseurs,
.site-v2 .cmp-alcool:has(.cmp-switch input:checked) .cmp-alcool__echelle {opacity: .45;}

/* Switch « Bière sans alcool » : zone à part, libellé à gauche, interrupteur à droite ; case native, masquée, sur toute la zone */
.site-v2 .cmp-champ > .cmp-alcool > label.cmp-switch,
.site-v2 .cmp-alcool > label.cmp-switch {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	min-height: 56px;
	margin: 0;
	padding: 10px 18px;
	color: var(--c-texte);
	border-left: 1px solid var(--c-bordure);
	font-size: 14px;
	font-weight: 400;
	cursor: pointer;
}
.site-v2 .cmp-alcool > label.cmp-switch[hidden] {display: none;}	/* aucune bière sans alcool parmi la recherche ; plus précis que la règle ci-dessus */
.site-v2 .cmp-switch input {position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer;}
.site-v2 .cmp-switch__texte {display: block; line-height: 1.3;}
.site-v2 .cmp-switch__titre {display: block; font-size: 15px; font-weight: 600; white-space: nowrap;}
.site-v2 .cmp-switch__piste {position: relative; flex: none; width: 46px; height: 26px; background: #b7a68c; border-radius: 999px; transition: background-color .15s ease;}
.site-v2 .cmp-switch__piste::after {
	content: "";
	position: absolute;
	top: 3px; left: 3px;
	width: 20px;
	height: 20px;
	background: var(--c-surface);
	border-radius: 50%;
	box-shadow: 0 1px 2px rgba(36, 23, 15, .35);
	transition: transform .15s ease;
}
.site-v2 .cmp-switch:hover .cmp-switch__piste {background: #a3917a;}
.site-v2 .cmp-switch input:checked ~ .cmp-switch__piste {background: var(--c-ambre-fonce);}
.site-v2 .cmp-switch input:checked ~ .cmp-switch__piste::after {transform: translateX(20px);}
.site-v2 .cmp-switch input:focus-visible ~ .cmp-switch__piste {outline: 3px solid var(--c-ambre); outline-offset: 2px;}
@media (max-width: 640px) {
	.site-v2 .cmp-alcool {grid-template-columns: minmax(0, 1fr);}
	.site-v2 .cmp-alcool__plage {padding: 12px 14px 10px;}
	.site-v2 .cmp-alcool > label.cmp-switch {padding: 8px 14px; border-left: 0; border-top: 1px solid var(--c-bordure);}
	.site-v2 .cmp-alcool__echelle {font-size: 11px;}
}
@media (prefers-reduced-motion: reduce) {
	.site-v2 .cmp-switch__piste, .site-v2 .cmp-switch__piste::after, .site-v2 .cmp-bouton {transition: none;}
}
.cmp-am0{left:0%}.cmp-ax0{right:100%}.cmp-am1{left:3.57%}.cmp-ax1{right:96.43%}.cmp-am2{left:7.14%}.cmp-ax2{right:92.86%}.cmp-am3{left:10.71%}.cmp-ax3{right:89.29%}.cmp-am4{left:14.29%}.cmp-ax4{right:85.71%}.cmp-am5{left:17.86%}.cmp-ax5{right:82.14%}.cmp-am6{left:21.43%}.cmp-ax6{right:78.57%}.cmp-am7{left:25%}.cmp-ax7{right:75%}.cmp-am8{left:28.57%}.cmp-ax8{right:71.43%}.cmp-am9{left:32.14%}.cmp-ax9{right:67.86%}.cmp-am10{left:35.71%}.cmp-ax10{right:64.29%}.cmp-am11{left:39.29%}.cmp-ax11{right:60.71%}.cmp-am12{left:42.86%}.cmp-ax12{right:57.14%}.cmp-am13{left:46.43%}.cmp-ax13{right:53.57%}.cmp-am14{left:50%}.cmp-ax14{right:50%}.cmp-am15{left:53.57%}.cmp-ax15{right:46.43%}.cmp-am16{left:57.14%}.cmp-ax16{right:42.86%}.cmp-am17{left:60.71%}.cmp-ax17{right:39.29%}.cmp-am18{left:64.29%}.cmp-ax18{right:35.71%}.cmp-am19{left:67.86%}.cmp-ax19{right:32.14%}.cmp-am20{left:71.43%}.cmp-ax20{right:28.57%}.cmp-am21{left:75%}.cmp-ax21{right:25%}.cmp-am22{left:78.57%}.cmp-ax22{right:21.43%}.cmp-am23{left:82.14%}.cmp-ax23{right:17.86%}.cmp-am24{left:85.71%}.cmp-ax24{right:14.29%}.cmp-am25{left:89.29%}.cmp-ax25{right:10.71%}.cmp-am26{left:92.86%}.cmp-ax26{right:7.14%}.cmp-am27{left:96.43%}.cmp-ax27{right:3.57%}.cmp-am28{left:100%}.cmp-ax28{right:0%}

/* Ville et brasserie : liste de suggestions (recherche-bieres.js) */
.site-v2 .cmp-champ--suggestions {position: relative;}
.site-v2 .cmp-suggestions {
	position: absolute;
	z-index: 20;
	top: 100%;
	left: 0;
	right: 0;
	max-height: 300px;
	margin: 4px 0 0;
	padding: 4px;
	overflow-y: auto;
	background: var(--c-surface);
	border: 1px solid #c9b79a;
	border-radius: 8px;
	box-shadow: var(--ombre);
	list-style: none;
}
.site-v2 .cmp-suggestions[hidden] {display: none;}
.site-v2 .cmp-combo {position: relative;}
.site-v2 .cmp-combo input {padding-right: 44px;}
/* Bouton de la liste déroulante, dans le champ à droite */
.site-v2 .cmp-combo__bouton {
	position: absolute;
	top: 1px;
	right: 1px;
	bottom: 1px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0 7px 7px 0;
	color: var(--c-ambre-fonce);
	cursor: pointer;
}
.site-v2 .cmp-combo__bouton:hover {background: #fdf1d9;}
.site-v2 .cmp-combo__bouton::before {
	content: "";
	width: 8px;
	height: 8px;
	margin-top: -4px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	transition: transform .15s ease;
}
.site-v2 .cmp-combo input[aria-expanded="true"] ~ .cmp-combo__bouton::before {margin-top: 4px; transform: rotate(225deg);}
.site-v2 .cmp-suggestions li {padding: 9px 10px; border-radius: 6px; font-size: 15px; cursor: pointer;}
.site-v2 .cmp-suggestions li:hover,
.site-v2 .cmp-suggestions li[aria-selected="true"] {background: #fdf1d9;}
.site-v2 .cmp-suggestions strong {color: var(--c-ambre-fonce);}

/* Panneaux repliables */
.site-v2 .cmp-filtres,
.site-v2 .cmp-avancee {
	margin-top: 12px;
	background: var(--c-surface);
	border: 1px solid var(--c-bordure);
	border-radius: 10px;
}
.site-v2 .cmp-avancee {background: var(--c-creme-clair);}
.site-v2 .cmp-filtres__corps {padding: 14px;}
.site-v2 .cmp-filtres > summary,
.site-v2 .cmp-avancee > summary {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 44px;
	padding: 8px 14px;
	color: var(--c-ambre-fonce);
	font-weight: 700;
	cursor: pointer;
	list-style: none;
}
.site-v2 .cmp-filtres > summary::-webkit-details-marker,
.site-v2 .cmp-avancee > summary::-webkit-details-marker {display: none;}
.site-v2 .cmp-filtres > summary::before,
.site-v2 .cmp-avancee > summary::before {
	content: "";
	flex: none;
	width: 7px;
	height: 7px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(-45deg);
	transition: transform .15s ease;
}
.site-v2 .cmp-filtres[open] > summary::before,
.site-v2 .cmp-avancee[open] > summary::before {transform: rotate(45deg);}
.site-v2 .cmp-filtres[open] > summary,
.site-v2 .cmp-avancee[open] > summary {border-bottom: 1px solid var(--c-bordure);}
.site-v2 .cmp-avancee__compte {font-weight: 400; color: var(--c-texte-doux);}
.site-v2 .cmp-avancee .cmp-champs {padding: 12px 14px 14px;}

/* Boutons : un seul style principal (Rechercher, Voir N bières), Réinitialiser en retrait */
.site-v2 .cmp-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: 10px 12px;
	margin-top: 16px;
}
.site-v2 .cmp-bouton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 46px;
	margin: 0;
	padding: 0 22px;
	border: 1px solid transparent;
	border-radius: 999px;
	font-family: inherit;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .1s ease;
}
.site-v2 .cmp-bouton__icone {flex: none;}
.site-v2 .cmp-bouton--principal {
	background: linear-gradient(180deg, #f2bb52, var(--c-ambre));
	border-color: #c98a1f;
	color: var(--c-espresso);
	box-shadow: 0 1px 2px rgba(36, 23, 15, .25), inset 0 1px 0 rgba(255, 255, 255, .35);
}
.site-v2 .cmp-bouton--principal:hover {background: linear-gradient(180deg, #f6c766, #eeb245); box-shadow: 0 3px 10px rgba(154, 90, 12, .35), inset 0 1px 0 rgba(255, 255, 255, .35); transform: translateY(-1px);}
.site-v2 .cmp-bouton--principal:active {background: var(--c-ambre); box-shadow: inset 0 1px 3px rgba(36, 23, 15, .3); transform: translateY(0);}
.site-v2 .cmp-bouton--principal:focus-visible {outline: 3px solid var(--c-espresso); outline-offset: 2px; border-radius: 999px;}
.site-v2 .cmp-bouton--principal:disabled {background: #efe6d6; border-color: var(--c-bordure); color: var(--c-texte-doux); box-shadow: none; transform: none; cursor: not-allowed;}
.site-v2 .cmp-bouton--principal:disabled .cmp-bouton__icone {display: none;}
.site-v2 .cmp-bouton--voir {min-width: 190px;}
.site-v2 a.cmp-bouton--secondaire:link,
.site-v2 a.cmp-bouton--secondaire:visited {background: transparent; border-color: #c9b79a; color: var(--c-texte-doux); font-weight: 600;}
.site-v2 a.cmp-bouton--secondaire:hover {background: var(--c-creme); border-color: var(--c-ambre-fonce); color: var(--c-espresso);}
.site-v2 .cmp-barre .cmp-bouton {flex: none;}
@media (max-width: 480px) {
	.site-v2 .cmp-actions {flex-direction: column-reverse; align-items: stretch;}
	.site-v2 .cmp-bouton--voir {min-width: 0;}
	.site-v2 .cmp-barre .cmp-bouton {padding: 0 16px;}
	.site-v2 .cmp-barre .cmp-bouton__icone {display: none;}
}

/*----- Résultats : statut, critères appliqués, aucun résultat -----*/
.site-v2 .cmp-trier {display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 0 12px; font-size: 14px;}
.site-v2 .cmp-trier__titre {font-weight: 600; color: var(--c-texte-doux);}
.site-v2 .cmp-trier ul {display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none;}
.site-v2 .cmp-trier a:link,
.site-v2 .cmp-trier a:visited,
.site-v2 .cmp-trier span[aria-current] {
	display: inline-flex;
	align-items: center;
	min-height: 36px;
	padding: 4px 14px;
	background: var(--c-surface);
	color: var(--c-texte);
	border: 1px solid var(--c-bordure);
	border-radius: 999px;
	text-decoration: none;
}
.site-v2 .cmp-trier a:hover {border-color: var(--c-ambre-fonce); background: #fdf1d9;}
.site-v2 .cmp-trier span[aria-current] {background: #fdf1d9; border-color: var(--c-ambre-fonce); font-weight: 700;}
.site-v2 .cmp-trier__aide {margin: -6px 0 12px; font-size: 13px; color: var(--c-texte-doux);}
.site-v2 .cmp-statut {margin: 0 0 8px; font-size: 18px; font-weight: 700; color: var(--c-espresso);}
.site-v2 .cmp-criteres {display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 0 0 16px; font-size: 14px;}
.site-v2 .cmp-criteres__titre {color: var(--c-texte-doux);}
.site-v2 .cmp-criteres ul {display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none;}
.site-v2 .cmp-criteres a:link, .site-v2 .cmp-criteres a:visited {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 34px;
	padding: 4px 12px;
	background: var(--c-creme-clair);
	color: var(--c-espresso);
	border: 1px solid var(--c-bordure);
	border-radius: 999px;
	text-decoration: none;
}
.site-v2 .cmp-criteres a:hover {border-color: var(--c-ambre-fonce); background: #fdf1d9;}
.site-v2 .cmp-vide {margin: 0 0 24px; padding: 4px 20px; background: var(--c-creme-clair); border: 1px dashed #c9b79a; border-radius: 12px;}

/*----- Index A-Z (ancres de la page) et filtre instantané -----*/
.site-v2 .cmp-az ul {display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 14px; padding: 0; list-style: none;}
.site-v2 .cmp-az a, .site-v2 .cmp-az span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 34px;
	min-height: 34px;
	padding: 0 4px;
	border-radius: 6px;
	font-weight: 700;
	font-size: 14px;
}
.site-v2 .cmp-az a:link, .site-v2 .cmp-az a:visited {background: var(--c-creme-clair); color: var(--c-ambre-fonce); border: 1px solid var(--c-bordure); text-decoration: none;}
.site-v2 .cmp-az a:hover {background: var(--c-ambre); color: var(--c-espresso);}
.site-v2 .cmp-az span {color: #c9b79a;}

.site-v2 .cmp-outils {display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 14px;}
.site-v2 .cmp-outils[hidden] {display: none;}
.site-v2 .cmp-outils label {font-weight: 600; color: var(--c-texte-doux);}
.site-v2 .cmp-outils input {flex: 1 1 220px; max-width: 360px; min-height: 40px; padding: 6px 10px; border: 1px solid #c9b79a; border-radius: 8px; font: inherit;}
.site-v2 .cmp-outils__compte {font-size: 14px; color: var(--c-texte-doux);}

/*----- Tableau comparatif -----*/
.site-v2 .site-main:has(.cmp-table) {overflow-x: visible;}	/* en-tête de tableau collant ; le tableau ne déborde pas (cartes selon sa largeur) */
/* Le tableau réagit à la place dont il dispose (colonne publicitaire ou non), pas à la largeur de l'écran : il ne peut pas déborder */
.site-v2 .cmp-tableau {container: cmp-liste / inline-size;}
.site-v2 .cmp-table {width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; line-height: 1.4;}
.site-v2 .cmp-table thead th {
	position: sticky;
	top: var(--hauteur-nav);
	z-index: 1;
	padding: 10px 8px;
	background: var(--c-espresso);
	color: var(--c-sur-sombre);
	font-size: 13px;
	font-weight: 700;
	text-align: left;
	white-space: nowrap;
}
.site-v2 .cmp-table thead th:first-child {border-radius: 10px 0 0 0;}
.site-v2 .cmp-table thead .cmp-sans-tri {position: sticky; top: var(--hauteur-nav); z-index: 1; background: var(--c-espresso); border-radius: 0 10px 0 0;}
.site-v2 .cmp-tri {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 2px 0;
	background: none;
	color: inherit;
	border: 0;
	font: inherit;
	cursor: pointer;
}
.site-v2 .cmp-tri::after {content: "↕"; opacity: .45;}
.site-v2 th[aria-sort="ascending"] .cmp-tri::after {content: "▲"; opacity: 1; color: var(--c-ambre);}
.site-v2 th[aria-sort="descending"] .cmp-tri::after {content: "▼"; opacity: 1; color: var(--c-ambre);}
.site-v2 .cmp-tri:hover {color: #fff;}
.site-v2 .cmp-table tbody th,
.site-v2 .cmp-table tbody td {padding: 8px; border-bottom: 1px solid var(--c-bordure); text-align: left; vertical-align: top; overflow-wrap: break-word;}
.site-v2 .cmp-table tbody th {font-weight: 400; min-width: 140px;}
.site-v2 .cmp-table tbody tr > :first-child, .site-v2 .cmp-table thead th:first-child {padding-left: 12px;}
.site-v2 .cmp-table .cmp-avis {min-width: 118px;}
.site-v2 .cmp-sous-ferm {display: none;}
/* Place moyenne : la fermentation, critère secondaire, passe sous le type au lieu d'occuper une colonne */
@container cmp-liste (min-width: 820px) and (max-width: 959px) {
	.site-v2 .cmp-table thead th:nth-of-type(3),
	.site-v2 .cmp-table tbody td:nth-of-type(2) {display: none;}
	.site-v2 .cmp-sous-ferm {display: block; font-size: 12px; color: var(--c-texte-doux); white-space: nowrap;}
	.site-v2 .cmp-sous-ferm::before {content: "Ferm. ";}
}
.site-v2 .cmp-table .cmp-jauge {width: 44px;}
.site-v2 .cmp-table tbody tr:nth-child(even) {background: var(--c-creme-clair);}
.site-v2 .cmp-table tbody tr:hover {background: #fdf1d9;}
.site-v2 .cmp-table tbody tr {scroll-margin-top: calc(var(--hauteur-nav) + 48px);}
.site-v2 .cmp-table a.valeur {display: block; font-size: 15px; font-weight: 700;}
/* L14 : l'ambre historique #c27b00 sur blanc (3,4:1) n'atteignait pas le contraste AA de 4,5:1 */
.site-v2 .cmp-table a.valeur:link,
.site-v2 .cmp-table a.valeur:visited {color: var(--c-ambre-fonce);}
.site-v2 .cmp-table a.valeur:hover,
.site-v2 .cmp-table a.valeur:active {color: var(--c-espresso);}
.site-v2 .cmp-table td.cmp-col-fiche {width: 1%; padding-right: 8px; white-space: nowrap; vertical-align: middle;}
.site-v2 a.cmp-bouton-fiche:link,
.site-v2 a.cmp-bouton-fiche:visited {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	min-height: 36px;
	padding: 4px 12px;
	background: var(--c-ambre);
	color: var(--c-espresso);
	border-radius: 999px;
	font-size: 13px;
	font-weight: 700;
	text-decoration: none;
}
.site-v2 a.cmp-bouton-fiche::after {
	content: "";
	flex: none;
	width: 7px;
	height: 7px;
	border-top: 2px solid currentColor;
	border-right: 2px solid currentColor;
	transform: rotate(45deg);
}
.site-v2 a.cmp-bouton-fiche:hover {background: #f0b84d;}
.site-v2 a.cmp-bouton-fiche span {display: none;}	/* « Fiche », « Voir la fiche » s'il y a la place */
.site-v2 a.cmp-bouton-fiche::before {content: "Fiche";}
@container cmp-liste (min-width: 960px) {
	.site-v2 a.cmp-bouton-fiche span {display: inline;}
	.site-v2 a.cmp-bouton-fiche::before {content: none;}
}
.site-v2 .cmp-nr {color: var(--c-texte-doux); font-size: 12px; font-style: italic;}

/* L14 : affichage progressif des listes de plus de 120 bières (gabarit/comparateur-2026.php) : 60 lignes avant le script, puis par paquets ;
   les lignes masquées restent dans le HTML */
html.cmp-progressif .site-v2 .cmp-table tbody tr:nth-child(n+61),
html.cmp-progressif-actif .site-v2 .cmp-table tbody tr.cmp-attente {display: none;}
.site-v2 .cmp-suite {display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 14px; margin: 16px 0 8px;}
.site-v2 .cmp-suite[hidden] {display: none;}
.site-v2 .cmp-suite button {
	min-height: 44px;
	padding: 8px 20px;
	background: var(--c-ambre);
	color: var(--c-espresso);
	border: 0;
	border-radius: 999px;
	font-family: inherit;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.2;
	cursor: pointer;
}
.site-v2 .cmp-suite button:hover {background: #f0b84d;}
.site-v2 .cmp-suite button:focus-visible {outline: 3px solid var(--c-espresso); outline-offset: 2px;}
.site-v2 .cmp-suite__reste {font-size: 14px; color: var(--c-texte-doux);}

/* Jauge d'avis : curseur placé par classe (41 crans de 2,5 %), sans style en ligne */
.site-v2 .cmp-avis {display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; white-space: nowrap;}
.site-v2 .cmp-avis__detail {flex-basis: 100%; font-size: 12px; color: var(--c-texte-doux);}
.site-v2 .cmp-jauge {position: relative; display: inline-block; flex: none; width: 64px; height: 8px; border-radius: 4px; background: linear-gradient(90deg, #d7261e, #e8a93a 50%, #3a9a2b);}
.site-v2 .cmp-avis--sans {color: var(--c-texte-doux);}
.site-v2 .cmp-avis--sans .cmp-jauge {background: var(--c-bordure);}
.site-v2 .cmp-curseur {position: absolute; top: -5px; width: 0; height: 0; margin-left: -5px; border: 5px solid transparent; border-top: 6px solid var(--c-espresso); border-bottom: 0;}
.cmp-n0{left:0%}.cmp-n1{left:2.5%}.cmp-n2{left:5%}.cmp-n3{left:7.5%}.cmp-n4{left:10%}.cmp-n5{left:12.5%}.cmp-n6{left:15%}.cmp-n7{left:17.5%}.cmp-n8{left:20%}.cmp-n9{left:22.5%}.cmp-n10{left:25%}.cmp-n11{left:27.5%}.cmp-n12{left:30%}.cmp-n13{left:32.5%}.cmp-n14{left:35%}.cmp-n15{left:37.5%}.cmp-n16{left:40%}.cmp-n17{left:42.5%}.cmp-n18{left:45%}.cmp-n19{left:47.5%}.cmp-n20{left:50%}.cmp-n21{left:52.5%}.cmp-n22{left:55%}.cmp-n23{left:57.5%}.cmp-n24{left:60%}.cmp-n25{left:62.5%}.cmp-n26{left:65%}.cmp-n27{left:67.5%}.cmp-n28{left:70%}.cmp-n29{left:72.5%}.cmp-n30{left:75%}.cmp-n31{left:77.5%}.cmp-n32{left:80%}.cmp-n33{left:82.5%}.cmp-n34{left:85%}.cmp-n35{left:87.5%}.cmp-n36{left:90%}.cmp-n37{left:92.5%}.cmp-n38{left:95%}.cmp-n39{left:97.5%}.cmp-n40{left:100%}

/* Sous 900 px : une carte par bière, compacte : nom, étiquettes, origine, avis, et le bouton vers la fiche à droite (gain de hauteur).
   Les valeurs non renseignées sont masquées ; le tri reste disponible via « Trier par ». Seuil : largeur minimale du tableau */
@container cmp-liste (max-width: 819px) {
	.site-v2 .cmp-table thead {display: none;}
	.site-v2 .cmp-table, .site-v2 .cmp-table tbody {display: block;}
	.site-v2 .cmp-table tbody tr {
		position: relative;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 4px 6px;
		margin: 0 0 10px;
		padding: 10px 86px 10px 12px;
		background: var(--c-surface);
		border: 1px solid var(--c-bordure);
		border-left: 4px solid var(--c-ambre);
		border-radius: 10px;
	}
	.site-v2 .cmp-table tbody tr[hidden] {display: none;}
	.site-v2 .cmp-table tbody tr:nth-child(even) {background: var(--c-surface);}
	.site-v2 .cmp-table tbody th {flex: 0 0 100%; min-width: 0; padding: 0; border: 0;}
	.site-v2 .cmp-table tbody td {padding: 0; border: 0; font-size: 13px;}
	.site-v2 .cmp-table tbody td:has(> .cmp-nr) {display: none;}
	.site-v2 .cmp-table tbody td:nth-of-type(-n+3),
	.site-v2 .cmp-table tbody td:nth-of-type(6) {padding: 1px 8px; background: var(--c-creme); border-radius: 6px;}
	.site-v2 .cmp-table tbody td:nth-of-type(1) {order: 1;}
	.site-v2 .cmp-table tbody td:nth-of-type(6) {order: 2;}
	.site-v2 .cmp-table tbody td:nth-of-type(3) {order: 3;}
	.site-v2 .cmp-table tbody td:nth-of-type(2) {order: 4;}
	.site-v2 .cmp-table tbody td:nth-of-type(5) {order: 5; flex: 0 1 auto; font-weight: 600;}
	.site-v2 .cmp-table tbody td:nth-of-type(4) {order: 6;}
	.site-v2 .cmp-table tbody td:nth-of-type(7) {order: 7; flex: 0 0 100%;}
	.site-v2 .cmp-table tbody td.cmp-col-fiche {
		position: absolute;
		top: 50%;
		right: 10px;
		width: auto;
		transform: translateY(-50%);
	}
	.site-v2 a.cmp-bouton-fiche:link,
	.site-v2 a.cmp-bouton-fiche:visited {min-height: 44px; padding: 4px 12px; font-size: 14px;}
		.site-v2 .cmp-avis__detail {flex-basis: auto;}
}

/*----- Accueil du comparateur et ajout de bière -----*/
.site-v2 .cmp-intro__visuels {display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 16px; text-align: center;}
.site-v2 .cmp-ajout {margin-top: 32px; padding-top: 16px; border-top: 1px solid var(--c-bordure); text-align: center;}

/*=============================================================================
  Fiches bières (lot L09) — gabarit/fiche-2026.php et gabarit/commentaires-2026.php,
  actifs quand $fiche_v2 vaut 1
  =============================================================================*/
.site-v2 .fiche-ariane ol {display: flex; flex-wrap: wrap; gap: 4px 6px; margin: 4px 0 8px; padding: 0; list-style: none; font-size: 13px; color: var(--c-texte-doux);}
.site-v2 .fiche-ariane li + li::before {content: "›"; margin-right: 6px; color: #c9b79a;}
.site-v2 .fiche h1 {margin: 4px 0 4px; text-align: left;}
.site-v2 .fiche-resume {margin: 0 0 18px; font-size: 16px; color: var(--c-texte-doux);}
/* L13h : bandeau des bières saisonnières, sous le résumé */
.site-v2 .fiche-saison {margin: -10px 0 18px; font-size: 16px; font-weight: 700; color: var(--c-texte);}
.site-v2 .fiche-saison__etiquette {display: inline-block; margin-right: 8px; padding: 2px 10px; background: var(--c-ambre); border-radius: 999px; color: var(--c-espresso); font-size: 13px; text-transform: uppercase; letter-spacing: .04em;}

.site-v2 .fiche-tete {display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: start;}
@media (min-width: 900px) {.site-v2 .fiche-tete--photo {grid-template-columns: minmax(0, 1fr) minmax(200px, 300px);}}
.site-v2 .fiche-grille {display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px;}
.site-v2 .fiche-carte {
	padding: 14px 16px 12px;
	background: var(--c-creme-clair);
	border: 1px solid var(--c-bordure);
	border-radius: 12px;
}
.site-v2 .fiche-carte h2 {margin: 0 0 8px; font-size: 18px;}
.site-v2 .fiche-carte dl {margin: 0;}
.site-v2 .fiche-carte dl div {display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 12px; padding: 6px 0; border-bottom: 1px solid var(--c-bordure);}
.site-v2 .fiche-carte dl div:last-child {border-bottom: 0;}
.site-v2 .fiche-carte dt {font-weight: 600; color: var(--c-texte-doux); font-size: 14px;}
.site-v2 .fiche-carte dd {margin: 0; font-size: 15px; font-weight: 600; text-align: right;}
.site-v2 .fiche-carte--avis {background: var(--c-surface); border-color: #e3c58c;}
.site-v2 .fiche-avis__valeur {display: flex; align-items: center; gap: 10px; margin: 4px 0; font-size: 16px;}
.site-v2 .fiche-avis__valeur--sans {color: var(--c-texte-doux);}
.site-v2 .fiche-avis__valeur--sans .fiche-jauge {background: var(--c-bordure);}
.site-v2 .cmp-jauge.fiche-jauge {width: 96px; height: 10px; border-radius: 5px;}
.site-v2 .fiche-jauge .cmp-curseur {top: -6px;}
.site-v2 .fiche-avis__detail {margin: 0 0 10px; font-size: 14px; color: var(--c-texte-doux);}
.site-v2 .fiche-avis__merci {margin: 8px 0 0; font-size: 14px; font-style: italic; color: var(--c-texte-doux);}
.site-v2 .fiche-noter label {display: block; margin: 8px 0 4px; font-size: 13px; font-weight: 600; color: var(--c-texte-doux);}
.site-v2 .fiche-noter__ligne {display: flex; gap: 8px;}
.site-v2 .fiche-noter select {flex: 1; min-width: 0; min-height: 40px; padding: 4px 8px; border: 1px solid #c9b79a; border-radius: 8px; background: var(--c-surface); font: inherit; font-size: 15px;}
.site-v2 .fiche-noter input[type=submit] {width: auto; min-height: 40px; padding: 0 16px; font-family: inherit; font-size: 15px;}	/* input.btn_petit : 60 px dans style_bieres_un.css */

.site-v2 .fiche-photo {margin: 0; padding: 12px; background: var(--c-creme-clair); border: 1px solid var(--c-bordure); border-radius: 12px; text-align: center;}
.site-v2 .fiche-photo img {display: block; max-width: 100%; height: auto; margin: 0 auto; border-radius: 8px;}
.site-v2 .fiche-photo figcaption {margin-top: 8px; font-size: 14px; font-weight: 600; color: var(--c-texte-doux);}

.site-v2 .fiche-observations {margin: 28px 0 8px;}
.site-v2 .fiche-observations__tete {display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; border-bottom: 2px solid var(--c-ambre); margin-bottom: 12px;}
.site-v2 .fiche-observations__tete h2 {margin: 0 0 6px;}
.site-v2 a.fiche-signaler {font-size: 14px;}
.site-v2 .fiche-observations__texte {font-size: 16px; line-height: 1.7;}
.site-v2 .fiche-observations__texte--vide {color: var(--c-texte-doux);}

/* Annonce In-Article : hauteur réservée pour éviter le décalage de mise en page ; libérée si AdSense ne remplit pas l'emplacement */
.site-v2 .fiche-pub {min-height: 280px; margin: 24px 0;}
.site-v2 .fiche-pub:has(ins.adsbygoogle[data-ad-status="unfilled"]) {min-height: 0;}
/* L09 : même réservation pour l'encart In-Article du haut du gabarit (gabarit/entete-2026.php) : inséré 4 à 8 s après le chargement,
   il repoussait tout le contenu de 280 px (CLS 0,21 à 0,23 mesuré sur les fiches en 768 et 375 px) */
.site-v2 .site-encart--pub {min-height: 280px;}
.site-v2 .site-encart--pub:has(ins.adsbygoogle[data-ad-status="unfilled"]) {min-height: 0;}
/* L14 : annonce In-Article de l'accueil (game_in_page.php), remontée en haut de page depuis le retrait du jeu : même réservation (280 px, 300 px
   sous 480 px de large, hauteurs mesurées) pour qu'elle ne pousse pas le texte en arrivant */
.site-v2 .pub--accueil {min-height: 280px;}
@media (max-width: 479px) {.site-v2 .pub--accueil {min-height: 300px;}}
.site-v2 .pub--accueil:has(ins.adsbygoogle[data-ad-status="unfilled"]) {min-height: 0;}

.site-v2 .fiche-liees h2, .site-v2 .fiche-avis-internautes > h2 {margin: 28px 0 10px; padding-bottom: 6px; border-bottom: 2px solid var(--c-ambre);}
.site-v2 .fiche-liees__sous-titre {margin: -4px 0 10px; font-size: 14px; color: var(--c-texte-doux);}
.site-v2 .fiche-liees__liste {display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none;}
.site-v2 .fiche-liees__liste a:link, .site-v2 .fiche-liees__liste a:visited {
	display: flex;
	flex-direction: column;
	gap: 4px;
	height: 100%;
	padding: 12px 14px;
	background: var(--c-surface);
	color: var(--c-texte);
	border: 1px solid var(--c-bordure);
	border-left: 4px solid var(--c-ambre);
	border-radius: 10px;
	text-decoration: none;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.site-v2 .fiche-liees__liste a:hover {border-color: var(--c-ambre-fonce); box-shadow: var(--ombre);}
.site-v2 .fiche-liees__nom {font-weight: 700; color: var(--c-ambre-fonce);}
.site-v2 .fiche-liees__details {font-size: 13px; color: var(--c-texte-doux);}
.site-v2 .fiche-liees__liste .cmp-avis {font-size: 13px;}

.site-v2 .fiche-commentaires {margin: 0; padding: 0; list-style: none;}
.site-v2 .fiche-commentaire {margin: 0 0 12px; padding: 12px 16px; background: var(--c-creme-clair); border: 1px solid var(--c-bordure); border-radius: 12px;}
.site-v2 .fiche-commentaire__tete {display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin: 0 0 6px; font-size: 14px; color: var(--c-texte-doux);}
.site-v2 .fiche-commentaire__tete b {font-size: 15px; color: var(--c-texte);}
.site-v2 .fiche-commentaire__tete time {margin-left: auto;}
.site-v2 .fiche-commentaire__texte {font-size: 15px; line-height: 1.6;}
.site-v2 .fiche-commentaires__vide {color: var(--c-texte-doux);}
.site-v2 .fiche-message {margin: 12px 0; padding: 12px 16px; border-radius: 10px; text-align: center;}
.site-v2 .fiche-message--ok {background: #eef7ea; border: 1px solid #3a9a2b; color: #1e5a14;}
.site-v2 .fiche-message--nok {background: #fdecea; border: 1px solid #d7261e; color: #8a1712;}

.site-v2 .fiche-ajout {margin: 16px 0 0; background: var(--c-surface); border: 1px solid var(--c-bordure); border-radius: 10px;}
.site-v2 .fiche-ajout summary {display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 14px; color: var(--c-ambre-fonce); font-weight: 700; cursor: pointer; list-style: none;}
.site-v2 .fiche-ajout summary::-webkit-details-marker {display: none;}
.site-v2 .fiche-ajout summary::before {content: "+"; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--c-ambre); color: var(--c-espresso); font-weight: 700;}
.site-v2 .fiche-ajout[open] summary::before {content: "−";}
.site-v2 .fiche-ajout__corps {padding: 4px 16px 16px; border-top: 1px solid var(--c-bordure);}
.site-v2 .fiche-ajout__champs {display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px 14px; margin: 8px 0 12px;}
.site-v2 .fiche-ajout label {display: block; margin: 0 0 4px; font-size: 13px; font-weight: 600; color: var(--c-texte-doux);}
.site-v2 .fiche-ajout input[type=text], .site-v2 .fiche-ajout input[type=email], .site-v2 .fiche-ajout textarea {
	width: 100%;
	min-height: 40px;
	padding: 6px 10px;
	background: var(--c-surface);
	border: 1px solid #c9b79a;
	border-radius: 8px;
	font: inherit;
	font-size: 15px;
}
.site-v2 .fiche-ajout textarea {resize: vertical;}
@media (max-width: 640px) {.site-v2 .fiche-ajout input[type=text], .site-v2 .fiche-ajout input[type=email], .site-v2 .fiche-ajout textarea {font-size: 16px;}}	/*----- lot/seo1-sans-amp : 16 px sur téléphone, sinon iOS agrandit la page à la saisie -----*/
.site-v2 .question-antirobot {margin: 10px 0 12px;}	/*----- lot/compteur-antispam : question anti-robot (fonctions/filtre-spam.php), dans tous les formulaires publics -----*/
.site-v2 .question-antirobot small {font-weight: 400;}
.site-v2 .question-antirobot input[type=text] {width: 9em; max-width: 100%;}
.site-v2 .fiche-ajout__reste {margin: 4px 0 8px; font-size: 13px; color: var(--c-texte-doux); text-align: right;}
.site-v2 .fiche-ajout__case {display: flex; align-items: flex-start; gap: 8px; margin: 6px 0;}
.site-v2 .fiche-ajout__case input {width: 18px; height: 18px; margin: 2px 0 0; flex: none;}
.site-v2 .fiche-ajout__case label {display: inline; margin: 0; font-size: 14px; font-weight: 400; color: var(--c-texte);}
.site-v2 .fiche-ajout__actions {display: flex; flex-wrap: wrap; gap: 12px; margin-top: 14px;}
.site-v2 .fiche-ajout__actions input {width: auto; min-height: 44px; padding: 0 24px; font-family: inherit; font-size: 15px;}
.site-v2 .fiche-ajout__actions input[type=reset] {background: var(--c-surface); border-color: #c9b79a;}
.site-v2 .fiche-ajout__note {margin: 10px 0 0; font-size: 13px; color: var(--c-texte-doux);}
.site-v2 .fiche-obligatoire {color: #b3261e; font-weight: 700;}

/*=============================================================================
  Vidéos humoristiques (lot L11) — gabarit/videos-2026.php, gabarit/video-2026.php
  et gabarit/video-commentaires-2026.php, actifs quand $videos_v2 vaut 1
  =============================================================================*/
.site-v2 .videos h1 {margin-top: 4px;}
.site-v2 .videos__intro {max-width: 70ch; margin: 0 0 20px; color: var(--c-texte-doux);}

/*----- Grille de vignettes : un seul lien par carte, étendu à toute la carte -----*/
.site-v2 .videos__grille {display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 18px; margin: 0 0 24px; padding: 0; list-style: none;}
.site-v2 .videos__grille--compacte {grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px;}
.site-v2 .video-carte {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: var(--c-surface);
	border: 1px solid var(--c-bordure);
	border-radius: 12px;
	transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.site-v2 .video-carte:hover, .site-v2 .video-carte:focus-within {border-color: var(--c-ambre-fonce); box-shadow: var(--ombre); transform: translateY(-2px);}
.site-v2 .video-carte__image {position: relative; aspect-ratio: 4 / 3; background: var(--c-espresso);}
.site-v2 .video-carte__image img {display: block; width: 100%; height: 100%; object-fit: cover;}
.site-v2 .video-carte__lecture {
	position: absolute;
	left: 50%; top: 50%;
	width: 52px; height: 52px;
	margin: -26px 0 0 -26px;
	border-radius: 50%;
	background: rgba(36, 23, 15, .78);
	box-shadow: 0 0 0 2px rgba(232, 169, 58, .9);
	transition: background-color .15s ease;
}
.site-v2 .video-carte__lecture::after {content: ""; position: absolute; left: 20px; top: 15px; border-style: solid; border-width: 11px 0 11px 17px; border-color: transparent transparent transparent var(--c-ambre);}
.site-v2 .video-carte:hover .video-carte__lecture {background: var(--c-espresso);}
.site-v2 .video-carte__duree {position: absolute; right: 8px; bottom: 8px; padding: 2px 7px; border-radius: 6px; background: rgba(0, 0, 0, .78); color: #fff; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums;}
.site-v2 .video-carte__corps {display: flex; flex: 1; flex-direction: column; gap: 8px; padding: 12px 14px 14px;}
.site-v2 .video-carte__titre {margin: 0; font-size: 17px;}
.site-v2 .video-carte__description {margin: 0; font-size: 15px; line-height: 1.5; color: var(--c-texte);}
.site-v2 .videos__grille--compacte .video-carte__description {display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-size: 14px;}
.site-v2 .video-carte__infos {display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; margin: auto 0 0; font-size: 13px; color: var(--c-texte-doux);}
.site-v2 a.video-carte__lien:link, .site-v2 a.video-carte__lien:visited {
	align-self: flex-start;
	padding: 6px 14px;
	border-radius: 999px;
	background: var(--c-ambre);
	color: var(--c-espresso);
	font-weight: 700;
	text-decoration: none;
}
.site-v2 .video-carte__lien::after {content: ""; position: absolute; inset: 0; border-radius: 12px;}
.site-v2 .video-carte__lien:focus-visible {outline: none;}
.site-v2 .video-carte__lien:focus-visible::after {outline: 3px solid var(--c-ambre); outline-offset: -3px;}

/*----- Publicité : signalée, séparée du lecteur et des vignettes, hauteur réservée (libérée si l'emplacement n'est pas rempli) -----*/
.site-v2 .video-pub {min-height: 300px; margin: 28px 0; padding: 8px 0 0; border-top: 1px solid var(--c-bordure); border-bottom: 1px solid var(--c-bordure); text-align: center;}
.site-v2 .video-pub:has(ins.adsbygoogle[data-ad-status="unfilled"]) {min-height: 0;}
.site-v2 .video-pub__mention {margin: 0 0 6px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--c-texte-doux);}

/*----- Page d'une vidéo -----*/
.site-v2 .video h1 {margin: 4px 0 16px;}
.site-v2 .video-lecteur {max-width: 760px; margin: 0 auto 20px; padding: 0; text-align: center;}
.site-v2 .video-lecteur__video, .site-v2 .video-lecteur__absente {display: block; width: 100%; height: auto; background: #000; border-radius: 12px; box-shadow: var(--ombre);}
.site-v2 .video-lecteur__absente {position: relative; overflow: hidden;}
.site-v2 .video-lecteur__absente img {display: block; width: 100%; height: 100%; object-fit: cover; opacity: .35;}
.site-v2 .video-lecteur--indisponible .video-lecteur__video {display: none;}
.site-v2 .video-lecteur__erreur {margin: 12px 0 0; padding: 12px 16px; background: var(--c-creme-clair); border: 1px solid var(--c-bordure); border-radius: 10px; font-size: 15px;}

.site-v2 .video-description h2, .site-v2 .video-commentaires > h2, .site-v2 .video-autres > h2 {margin: 0 0 10px; padding-bottom: 6px; border-bottom: 2px solid var(--c-ambre);}
.site-v2 .video-commentaires > h2, .site-v2 .video-autres > h2 {margin-top: 28px;}
.site-v2 .video-description p {margin: 0 0 8px; font-size: 16px; line-height: 1.7;}
.site-v2 .video-description__pied {display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 20px;}
.site-v2 .video-description p.video-vues {margin: 0; font-size: 14px; color: var(--c-texte-doux);}
.site-v2 a.video-bouton:link, .site-v2 a.video-bouton:visited {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0 6px;
	min-height: 44px;
	padding: 6px 18px;
	border: 1px solid #c98a1f;
	border-radius: 10px;
	background: var(--c-ambre);
	color: var(--c-espresso);
	font-weight: 700;
	text-align: center;
	text-decoration: none;
}
.site-v2 a.video-bouton:hover {background: #f0b850;}
/* Partage (lot/partage-contextuel, à la place de .video-partage, seul usage dans gabarit/video-2026.php) : sans cadre, à droite du nombre de vues */
.site-v2 .video-description__pied .partage-ctx--toujours {padding: 0; background: none; border: 0;}

.site-v2 .video-navigation {display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: center; margin: 24px 0 8px; padding: 12px 0; border-top: 1px solid var(--c-bordure); border-bottom: 1px solid var(--c-bordure);}
.site-v2 .video-navigation a:link, .site-v2 .video-navigation a:visited {display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px; border-radius: 10px; font-weight: 700; text-decoration: none;}
.site-v2 .video-navigation a:hover {background: var(--c-creme-clair);}
.site-v2 .video-navigation__precedente {justify-self: start;}
.site-v2 .video-navigation__suivante {justify-self: end;}
@media (max-width: 520px) {
	.site-v2 .video-navigation {grid-template-columns: 1fr 1fr;}
	.site-v2 .video-navigation a:link, .site-v2 .video-navigation a:visited {padding: 0 6px; white-space: nowrap;}
	.site-v2 .video-navigation__liste {grid-column: 1 / -1; grid-row: 2; justify-self: center;}
}
.site-v2 .video-retour {margin: 16px 0; text-align: center;}
.site-v2 .video-message {font-size: 16px;}
.site-v2 .video-commentaires {scroll-margin-top: calc(var(--hauteur-nav) + 12px);}	/* ancre #commentaires (anciennes URL de la page des commentaires) sous la barre de menu fixe */
.site-v2 .video-commentaires__limite {font-size: 14px; color: var(--c-texte-doux); text-align: center;}

.site-v2 .video-commentaires .fiche-commentaire__texte, .site-v2 .video .fiche-commentaire__texte {overflow-wrap: anywhere;}

/*----- Page 404 (gabarit/erreur-404.php ; version AMP : style_amp_erreur_404()) -----*/
.site-v2 .erreur-404 {max-width: 960px; margin: 8px auto 0; text-align: center;}
.site-v2 .erreur-404__visuel {
	display: flex;
	justify-content: center;
	max-width: 360px;
	margin: 0 auto;
	padding: 8px 0;
	background: radial-gradient(closest-side, rgba(232, 169, 58, .28), rgba(232, 169, 58, 0));
}
.site-v2 .erreur-404__visuel svg {display: block; width: 100%; max-width: 200px; height: auto;}
@media (max-width: 759px) {.site-v2 .erreur-404__visuel svg {max-width: 150px;}}
.site-v2 .e404-vague {animation: e404-vague 4s linear infinite;}
.site-v2 .e404-bulle {opacity: 0; animation: e404-bulle 2.8s ease-in infinite;}
.site-v2 .e404-bulle--2 {animation-delay: .7s;}
.site-v2 .e404-bulle--3 {animation-delay: 1.5s;}
.site-v2 .e404-bulle--4 {animation-delay: 2.1s;}
@keyframes e404-vague {from {transform: translateX(0);} to {transform: translateX(60px);}}
@keyframes e404-bulle {0% {opacity: 0; transform: translateY(0);} 20% {opacity: 1;} 100% {opacity: 0; transform: translateY(-22px);}}
.site-v2 .erreur-404 h1 {margin: 8px 0 0; text-align: center;}

/* Recherche et jeu : côte à côte sur grand écran (jeu à gauche), recherche en premier sur mobile */
.site-v2 .erreur-404__actions {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	grid-template-areas: "recherche" "jeu";
	gap: 20px;
	margin: 28px 0 0;
	text-align: left;
}
@media (min-width: 760px) {
	.site-v2 .erreur-404__actions {grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "jeu recherche"; gap: 32px; align-items: center;}
}
.site-v2 .erreur-404__actions.erreur-404__actions--jeu-seul {grid-template-columns: minmax(0, 480px); grid-template-areas: "jeu"; justify-content: center;}

.site-v2 .erreur-404__recherche {
	grid-area: recherche;
	padding: 24px;
	background: var(--c-creme-clair);
	border: 1px solid var(--c-bordure);
	border-radius: 18px;
	box-shadow: var(--ombre);
}
.site-v2 .erreur-404__recherche label {
	display: block;
	margin: 0 0 14px;
	font-family: var(--police-titre);
	font-size: 21px;
	font-weight: 700;
	color: var(--c-ambre-fonce);
}
.site-v2 .erreur-404__champ {
	position: relative;
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 5px 5px 5px 44px;
	background: var(--c-surface);
	border: 2px solid #d9c6a5;
	border-radius: 999px;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.site-v2 .erreur-404__champ:hover {border-color: var(--c-ambre-fonce);}
.site-v2 .erreur-404__champ:focus-within {border-color: var(--c-ambre); box-shadow: 0 0 0 4px rgba(232, 169, 58, .3);}
.site-v2 .erreur-404__loupe {position: absolute; left: 16px; top: 50%; margin-top: -10px; color: var(--c-ambre-fonce); pointer-events: none;}
.site-v2 .erreur-404__champ input[type=search] {
	flex: 1;
	min-width: 0;
	min-height: 44px;
	padding: 0 4px;
	background: transparent;
	border: 0;
	font: inherit;
	font-size: 16px;
	color: var(--c-texte);
}
.site-v2 .erreur-404__champ input[type=search]:focus,
.site-v2 .erreur-404__champ input[type=search]:focus-visible {outline: none;}	/* anneau porté par le champ entier (:focus-within) */
.site-v2 .erreur-404__champ input[type=submit] {
	flex: none;
	min-height: 44px;
	padding: 0 22px;
	border-radius: 999px;
	font-family: inherit;
	font-size: 15px;
	transition: background-color .15s ease, transform .15s ease;
}
.site-v2 .erreur-404__champ input[type=submit]:hover {transform: translateY(-1px);}

.site-v2 .erreur-404__jeu:link, .site-v2 .erreur-404__jeu:visited {
	grid-area: jeu;
	display: block;
	overflow: hidden;
	background: var(--c-espresso);
	border-radius: 18px;
	box-shadow: var(--ombre);
	text-decoration: none;
	transition: transform .2s ease, box-shadow .2s ease;
}
.site-v2 .erreur-404__jeu img {display: block; width: 100%; height: auto; aspect-ratio: 960 / 512;}
.site-v2 .erreur-404__jeu-legende {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 12px 18px;
	color: var(--c-ambre);
	font-weight: 700;
	font-size: 16px;
}
.site-v2 .erreur-404__jeu-legende::after {content: "\2192"; transition: transform .2s ease;}
.site-v2 .erreur-404__jeu:hover {transform: translateY(-3px); box-shadow: 0 2px 4px rgba(36, 23, 15, .1), 0 16px 36px rgba(36, 23, 15, .22);}
.site-v2 .erreur-404__jeu:hover .erreur-404__jeu-legende::after {transform: translateX(4px);}

.site-v2 .erreur-404__raccourcis {max-width: 960px; margin: 40px auto 8px; padding-top: 24px; border-top: 1px solid var(--c-bordure);}
.site-v2 .erreur-404__raccourcis h2 {margin: 0 0 14px; text-align: center;}
.site-v2 .erreur-404__raccourcis ul {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.site-v2 .erreur-404__raccourcis a:link, .site-v2 .erreur-404__raccourcis a:visited {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	min-height: 52px;
	padding: 10px 16px;
	background: var(--c-creme-clair);
	border: 1px solid var(--c-bordure);
	border-radius: 12px;
	color: var(--c-espresso);
	font-weight: 600;
	text-decoration: none;
	transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.site-v2 .erreur-404__raccourcis a::after {content: "\2192"; color: var(--c-ambre-fonce); transition: transform .15s ease;}
.site-v2 .erreur-404__raccourcis a:hover {border-color: var(--c-ambre); box-shadow: var(--ombre); transform: translateY(-2px);}
.site-v2 .erreur-404__raccourcis a:hover::after {transform: translateX(3px);}

@media (prefers-reduced-motion: reduce) {
	.site-v2 *, .site-v2 *::before, .site-v2 *::after {transition: none !important; animation: none !important;}
}