/*
 Theme Name:   Bricks Child Theme
 Theme URI:    https://bricksbuilder.io/
 Description:  Use this child theme to extend Bricks.
 Author:       Bricks
 Author URI:   https://bricksbuilder.io/
 Template:     bricks
 Version:      1.1
 Text Domain:  bricks
*/

/* ===========================================================================
   Musée de la Grande Ardenne — refonte 2026-11
   Miroir local : museegrandeardenne.be/refonte-2026-11/bricks-child/style.css
   MODIFIER LOCALEMENT PUIS POUSSER.

   Ce qui est ici et pas dans les réglages Bricks : tout ce qui demande un
   pseudo-élément ou un état de survol, que l'interface du constructeur ne sait
   pas exprimer. Le reste (fonds, marges, typographies) vit dans le gabarit,
   pour rester modifiable dans le constructeur.
   =========================================================================== */

/* --- le soulignement du menu, qui pousse de la gauche vers la droite ------- */

/* Deux formes d entree, et c est le piege : une entree SANS sous-menu a son <a>
   en enfant direct du <li> ; une entree AVEC sous-menu l a dans un
   div.brx-submenu-toggle. Ne viser que « > a » ne souligne que 3 entrees sur 7. */
#brx-header .bricks-nav-menu > li > a,
#brx-header .bricks-nav-menu > li > .brx-submenu-toggle > a {
	position: relative;
	padding-bottom: 6px;
}

/* Un pseudo-élément plutôt qu'une bordure : une bordure ne s'anime pas depuis
   un seul côté. L'origine à gauche est ce qui fait partir le trait de la
   gauche ; sans elle il s'ouvrirait depuis le centre. */
#brx-header .bricks-nav-menu > li > a::after,
#brx-header .bricks-nav-menu > li > .brx-submenu-toggle > a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 2px;
	background: #008D36;
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.28s ease-out;
}

#brx-header .bricks-nav-menu > li > a:hover::after,
#brx-header .bricks-nav-menu > li > a:focus-visible::after,
#brx-header .bricks-nav-menu > li.current-menu-item > a::after,
#brx-header .bricks-nav-menu > li.current-menu-ancestor > a::after,
#brx-header .bricks-nav-menu > li > .brx-submenu-toggle:hover > a::after,
#brx-header .bricks-nav-menu > li > .brx-submenu-toggle > a:focus-visible::after,
#brx-header .bricks-nav-menu > li.open > .brx-submenu-toggle > a::after {
	transform: scaleX(1);
}

/* La flèche des sous-menus est un bouton à part : sans cela elle porterait son
   propre trait, décalé du libellé. */
#brx-header .bricks-nav-menu .brx-submenu-toggle::after {
	content: none;
}

/* --- les liens de contact de la bande sombre ------------------------------ */

/* Même trait que le menu, en blanc : sur fond sombre, le vert #008D36 mesure
   2,6 pour 1 contre #1B1D1F — c'est un repère visuel, pas du texte, mais un
   trait qu'on ne voit pas ne sert à rien.
   inline-block, pour que le trait épouse la LARGEUR DU TEXTE et non celle de la
   colonne — l'adresse tient sur deux lignes, un trait pleine largeur y serait
   une barre perdue sous le bloc. */
#brxe-bpetel1,
#brxe-bpetel2,
#brxe-bpeadrt {
	position: relative;
	display: inline-block;
	padding-bottom: 3px;
}

#brxe-bpetel1::after,
#brxe-bpetel2::after,
#brxe-bpeadrt::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 1px;
	background: #FFFFFF;
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.28s ease-out;
}

#brxe-bpetel1:hover::after,
#brxe-bpetel2:hover::after,
#brxe-bpeadrt:hover::after,
#brxe-bpetel1:focus-visible::after,
#brxe-bpetel2:focus-visible::after,
#brxe-bpeadrt:focus-visible::after {
	transform: scaleX(1);
}

/* --- le bouton « Nous Contacter » ----------------------------------------- */

/* L'état de repos est dans le gabarit (transparent, filet blanc, texte blanc)
   pour rester visible dans le constructeur ; seul le survol est ici. */
#brxe-bpebtn {
	transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

#brxe-bpebtn:hover,
#brxe-bpebtn:focus-visible {
	background-color: #008D36;
	border-color: #008D36;
	color: #FFFFFF;
}

/* --- les panneaux du menu -------------------------------------------------- */

/* AUCUN gabarit de panneau n'est créé, et c'est délibéré : le méga-menu de
   Bricks attache un gabarit par entrée, où l'on RESSAISIT les liens — exactement
   la seconde liste tapée à la main qu'on vient de supprimer, et qui avait laissé
   « Piconrue 2 » six semaines après la correction de l'adresse. Ici le panneau
   n'est que la mise en page du sous-menu WordPress.

   Relevé sur la production le 08/11/2026, captures à l'appui :
     deux demi-colonnes de 250 px, la PREMIÈRE blanche, la SECONDE sombre ;
     titre de groupe en capitales VERTES, suivi d'un court filet vert de 55 px ;
     liens à 16 px, espacés d'environ 34 px ; colonnes généreusement calées.

   Les règles de Bricks sont en :where(), donc de spécificité nulle — un
   sélecteur ancré sur #brx-header les dépasse sans !important. Les !important
   ci-dessous répondent à un !important de Bricks ; à poids égal, la spécificité
   tranche, et la nôtre est plus forte. */

#brxe-bpenav {
	position: relative;
	z-index: 10;
}

/* BRICKS POSE white-space:nowrap SUR TOUT SOUS-MENU, et c'est ce qui faisait
   déborder les horaires et l'adresse hors du panneau : une phrase ne peut pas
   aller à la ligne. Relevé dans la règle servie, pas supposé :
     .bricks-nav-menu .sub-menu{…;white-space:nowrap;z-index:998}
   On le rend à « normal » : les liens du menu sont courts et ne se couperont
   pas pour autant, les phrases de l'encart se replient. */
#brx-header .bricks-nav-menu .sub-menu {
	white-space: normal;
}

#brx-header .bricks-nav-menu > li > .sub-menu {
	left: 0;
	right: auto;
	width: max-content;
	min-width: 230px;
	max-width: min(92vw, 760px);
	background-color: #FFFFFF;
	color: #333333;
	box-shadow: 0 14px 38px rgba(0, 0, 0, 0.14);
	padding: 22px 0;
	line-height: 1.5;
}

#brx-header .bricks-nav-menu > li.open > .sub-menu {
	display: block;
}

#brx-header .bricks-nav-menu > li > .sub-menu > li {
	width: auto;
}

/* Les déroulants simples (« Votre Visite », « À Votre Service ») : une liste. */
/* :not(.bp-encart-infos) est OBLIGATOIRE — c'est ce qui rendait « SUR LA CARTE »
   invisible. Ce sélecteur (1,3,3) l'emporte sur .bp-encart__carte (1,2,1) et
   repeignait le lien en #333333 sur fond sombre : du gris foncé sur du gris
   foncé, donc rien. Écarter l'encart ici vaut mieux que surenchérir en
   spécificité : la règle dit alors ce qu'elle vise vraiment, les liens de menu. */
#brx-header .bricks-nav-menu > li > .sub-menu > li:not(.menu-item-has-children):not(.bp-encart-infos) > a {
	display: block;
	padding: 9px 32px;
	font-family: Archivo, sans-serif;
	font-size: 16px;
	font-weight: 400;
	color: #333333;
	line-height: 1.5;
}

/* --- les panneaux à deux colonnes ----------------------------------------- */

/* :has() plutôt qu'une classe posée à la main : la mise en page suit la forme
   réelle du menu. Sans :has(), le panneau reste une liste verticale — une
   dégradation lisible, pas un dégât. */

/* a) le panneau à GROUPES (« Expos & Événements ») */
#brx-header .bricks-nav-menu > li.open > .sub-menu:has(> li.menu-item-has-children) {
	display: flex;
	padding: 0;
	align-items: stretch;
}

#brx-header .bricks-nav-menu > li > .sub-menu:has(> li.menu-item-has-children) > li {
	width: 250px;
	padding: 42px 32px 50px;
	background-color: #FFFFFF;
}

/* La SECONDE colonne est sombre : c'est la règle des deux panneaux. */
#brx-header .bricks-nav-menu > li > .sub-menu:has(> li.menu-item-has-children) > li:nth-child(2) {
	/* Le même sombre que l'encart, relevé sur la production : #1B1D1F. */
	background-color: #1B1D1F;
}

#brx-header .bricks-nav-menu > li > .sub-menu:has(> li.menu-item-has-children) > li:nth-child(2) .sub-menu a {
	color: #FFFFFF;
}

/* Le survol de la colonne SOMBRE. Il lui faut sa propre règle : celle des
   liens blancs ci-dessus est plus spécifique (1,4,2) que le survol général
   (1,3,2), donc le blanc l'emportait et rien ne changeait au survol. */
#brx-header .bricks-nav-menu > li > .sub-menu:has(> li.menu-item-has-children) > li:nth-child(2) .sub-menu a:hover,
#brx-header .bricks-nav-menu > li > .sub-menu:has(> li.menu-item-has-children) > li:nth-child(2) .sub-menu a:focus-visible {
	color: #008D36;
}

/* b) le panneau d'« Infos Pratiques » : les 4 liens à gauche, l'encart à
      droite sur toute la hauteur.

   CE N'EST PAS UNE GRILLE, ET C'EST UNE MESURE QUI L'IMPOSE. Avec
   display:grid, l'encart et les liens partagent des rangées, et l'encart
   (388 px) les fait gonfler : les liens s'espacent au lieu de rester groupés
   en haut — le défaut signalé le 09/11. Et grid-row: 1 / -1 ne sauve rien :
   « -1 » désigne la fin de la grille EXPLICITE, qui n'a ici aucune rangée, donc
   la règle se réduit à la rangée 1. Relevé sur la page servie :

     grid-template-rows = 387.5px 42px 42px 42px
     Horaires   y=257   (rangée 1, à côté de l'encart)
     Nos Tarifs y=608   (rangée 2, SOUS l'encart — donc hors du panneau visible)

   Un flottant, lui, ne partage aucune rangée : les liens s'empilent au fil du
   texte dans les 250 px de gauche, l'encart occupe la droite, et flow-root le
   contient pour que la hauteur du panneau suive l'encart.

   L'ORDRE DE SOURCE DEVIENT STRUCTUREL : CSS 2.1 §9.5.1 interdit à un flottant
   d'être plus haut que le haut d'une boîte engendrée par un élément antérieur.
   Placé en dernier, l'encart se poserait SOUS les liens. Il est donc la
   PREMIÈRE entrée du groupe dans le menu WordPress (script
   bricks/encart-premier.php) — ne pas le déplacer. */
#brx-header .bricks-nav-menu > li.open > .sub-menu:has(> li.bp-encart-infos) {
	display: flow-root;
	width: 500px;
	min-width: 0;
	max-width: none;
	padding: 0;
}

#brx-header .bricks-nav-menu > li > .sub-menu > li.bp-encart-infos {
	float: right;
	width: 250px;
	background-color: #1B1D1F;
	color: #DFDFDF;
	padding: 36px 32px 40px;
}

#brx-header .bricks-nav-menu > li > .sub-menu:has(> li.bp-encart-infos) > li:not(.bp-encart-infos) {
	width: 250px;
}

/* Le premier LIEN, pas le premier enfant : le premier enfant est l'encart.
   Le sélecteur reprend le « :has » du panneau pour peser (1,4,2) : sans lui il
   pèserait (1,2,2) et le raccourci « padding » de la règle suivante, à (1,3,2),
   remettrait la marge haute à 9 px — mesuré, le lien restait collé au bord. */
#brx-header .bricks-nav-menu > li > .sub-menu:has(> li.bp-encart-infos) > li.bp-encart-infos + li > a {
	padding-top: 36px;
}

#brx-header .bricks-nav-menu > li > .sub-menu:has(> li.bp-encart-infos) > li:not(.bp-encart-infos) > a {
	padding: 9px 32px;
}

/* Par la même raison, le survol des liens de menu ne doit pas attraper les
   liens de l'encart, qui ont le leur. */
#brx-header .bricks-nav-menu > li > .sub-menu li:not(.bp-encart-infos) > a:hover,
#brx-header .bricks-nav-menu > li > .sub-menu li:not(.bp-encart-infos) > a:focus-visible {
	color: #008D36;
}

/* Le dernier lien rend au panneau sa marge basse : le flottant ne la donne
   pas, et sans elle le texte toucherait le bord. */
#brx-header .bricks-nav-menu > li > .sub-menu:has(> li.bp-encart-infos) > li:last-child > a {
	padding-bottom: 36px;
}

/* --- le titre d'un groupe -------------------------------------------------- */

#brx-header .bricks-nav-menu > li > .sub-menu > li.menu-item-has-children > .brx-submenu-toggle > a {
	display: block;
	position: relative;
	padding: 0;
	margin: 0 0 46px;
	font-family: Archivo, sans-serif;
	font-size: 16px;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: #008D36;
}

/* Un court filet, pas une bordure pleine largeur : il mesure 55 px. */
#brx-header .bricks-nav-menu > li > .sub-menu > li.menu-item-has-children > .brx-submenu-toggle > a::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -12px;
	width: 55px;
	height: 2px;
	background-color: #008D36;
}

/* La flèche du groupe n'a plus d'objet : son contenu est déjà déplié. */
#brx-header .bricks-nav-menu > li > .sub-menu .brx-submenu-toggle button {
	display: none;
}

/* --- le troisième niveau --------------------------------------------------- */

/* Le !important répond à celui de Bricks, qui masque tout sous-menu dont le
   parent n'est pas .open. */
#brx-header .bricks-nav-menu > li.open > .sub-menu .sub-menu {
	display: block !important;
	position: static !important;
	opacity: 1;
	visibility: visible;
	background-color: transparent;
	box-shadow: none;
	min-width: 0;
	max-width: none;
	padding: 0;
	transform: none;
}

#brx-header .bricks-nav-menu > li > .sub-menu .sub-menu a {
	display: block;
	padding: 8px 0;
	font-family: Archivo, sans-serif;
	font-size: 16px;
	font-weight: 400;
	color: #333333;
	line-height: 1.5;
}

/* --- l'encart sombre d'« Infos Pratiques » -------------------------------- */

/* Il porte du CONTENU (horaires, adresse), pas des liens de menu : il ne peut
   donc pas venir du menu WordPress. Il est rendu par
   mu-plugins/bp-mga-menu-encart.php sur l'entrée qui porte la classe
   bp-encart-infos.

   LES VALEURS CI-DESSOUS SONT RELEVÉES SUR LA PRODUCTION, pas approchées
   (getComputedStyle sur son propre balisage, le 09/11/2026) :

     fond de l'encart         #1B1D1F
     titres                   #DFDFDF  18px  300
     texte                    #888888  16px  400
     « SUR LA CARTE »         #008D36  14px  700   (text-transform: none,
                                                      le libellé est écrit
                                                      en capitales)

   Piège de ce relevé, à ne pas refaire : les LARGEURS sortaient toutes à 0.
   Ce <ul> est le menu de REPLI de WordPress, pas le méga-menu réellement servi
   (la production porte trois systèmes d'en-tête concurrents) — donc sa
   géométrie ne dit rien, là où ses couleurs, elles, viennent bien du balisage.
   getComputedStyle rend la couleur d'un élément masqué, jamais sa taille. */

#brx-header .sub-menu .bp-encart__titre {
	margin: 0 0 10px;
	font-family: Archivo, sans-serif;
	font-size: 18px;
	font-weight: 300;
	color: #DFDFDF;
}

#brx-header .sub-menu .bp-encart__texte {
	margin: 0 0 30px;
	font-family: Archivo, sans-serif;
	font-size: 16px;
	line-height: 1.6;
	color: #888888;
}

/* CONTRASTE MESURÉ : #008D36 sur #1B1D1F donne 3,91:1, sous les 4,5:1 exigés
   pour du texte de 14 px (14 px gras n'est pas du « texte large », qui commence
   à 18,67 px gras). LA PRODUCTION EST DANS LE MÊME CAS : on la reproduit
   fidèlement plutôt que de corriger en silence une couleur de marque, et le
   chiffre est consigné pour l'arbitrage d'Olivier — même décision que pour le
   vert des boutons. Le survol passe en blanc, lui parfaitement lisible. */
#brx-header .sub-menu a.bp-encart__carte {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 0;
	font-family: Archivo, sans-serif;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: #008D36;
}

#brx-header .sub-menu a.bp-encart__carte:hover,
#brx-header .sub-menu a.bp-encart__carte:focus-visible {
	color: #FFFFFF;
}

/* --- au-dessous de 992 px, Bricks passe au menu hors-écran ---------------- */

@media (max-width: 991px) {
	#brx-header .bricks-nav-menu > li > .sub-menu,
	#brx-header .bricks-nav-menu > li.open > .sub-menu:has(> li.menu-item-has-children),
	#brx-header .bricks-nav-menu > li.open > .sub-menu:has(> li.bp-encart-infos) {
		display: block;
		width: auto;
		max-width: none;
		box-shadow: none;
		padding: 0;
	}
	#brx-header .bricks-nav-menu > li > .sub-menu:has(> li.menu-item-has-children) > li,
	#brx-header .bricks-nav-menu > li > .sub-menu:has(> li.menu-item-has-children) > li:nth-child(2) {
		width: auto;
		padding: 8px 0;
		background-color: transparent;
	}
	/* L'encart est masqué au mobile ; float:none évite qu'il laisse une
	   gouttiere si on le réaffiche un jour. */
	#brx-header .bricks-nav-menu > li > .sub-menu > li.bp-encart-infos {
		display: none;
		float: none;
		width: auto;
	}
}

/* --- le pied de page ------------------------------------------------------- */

/* Les lignes à icône : l'icône ne bouge pas, le texte porte le trait. */
#brx-footer .bpf-contact,
#brx-footer .bpf-lien {
	display: inline-flex;
	align-items: center;
	gap: 12px;
}

#brx-footer .bpf-ico {
	flex: 0 0 auto;
}

/* Le chevron d'« Autres Liens » : vert, plus petit que le texte. */
#brx-footer .bpf-chevron {
	flex: 0 0 auto;
	width: 11px;
	height: 11px;
	color: #008D36;
}

/* Le même trait que le téléphone de l'en-tête — sur le TEXTE, pas sur l'icône :
   un trait qui passerait sous le chevron serait décalé du mot. */
#brx-footer .bpf-contact > span,
#brx-footer .bpf-lien > span {
	position: relative;
	display: inline-block;
	padding-bottom: 2px;
}

#brx-footer .bpf-contact > span::after,
#brx-footer .bpf-lien > span::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 1px;
	background: #FFFFFF;
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.28s ease-out;
}

#brx-footer .bpf-contact:hover > span::after,
#brx-footer .bpf-lien:hover > span::after,
#brx-footer .bpf-contact:focus-visible > span::after,
#brx-footer .bpf-lien:focus-visible > span::after {
	transform: scaleX(1);
}

/* --- les icônes sociales --------------------------------------------------- */

/* Elles ne sont plus un élément Bricks mais le composant maison
   mu-plugins/bp-mga-reseaux.php : la feuille « marques » de Font Awesome livrée
   avec Bricks ne DÉCLARE PAS tripadvisor (506 glyphes, de trade-federation à
   trello), donc la quatrième icône ne pouvait pas s'afficher. Le composant
   porte ses propres styles — rien à écrire ici. */

/* --- le crédit et son cœur ------------------------------------------------- */

#brx-footer .bpf-credit a {
	color: #FFFFFF;
	text-decoration: none;
	transition: color 0.3s ease;
}

#brx-footer .bpf-credit a:hover,
#brx-footer .bpf-credit a:focus-visible {
	color: #008D36;
}

#brx-footer .bpf-coeur {
	display: inline-block;
	vertical-align: -2px;
	color: #008D36;
	transform-origin: center;
}

/* Battement repris de s-law.be. Il n'est déclaré QUE sous « no-preference » :
   qui demande moins d'animations ne le voit jamais, et il n'y a pas de règle à
   annuler ensuite. */
@media (prefers-reduced-motion: no-preference) {
	#brx-footer .bpf-coeur {
		animation: mga-coeur 1.5s ease-in-out infinite;
	}
}

@keyframes mga-coeur {
	0%   { transform: scale(1); }
	10%  { transform: scale(1.28); }
	20%  { transform: scale(1); }
	30%  { transform: scale(1.22); }
	42%  { transform: scale(1); }
	100% { transform: scale(1); }
}

/* --- le gabarit de page ---------------------------------------------------- */

/* Le corps des 44 pages vient de la production : c'est du balisage WordPress
   ordinaire (h2, p, ul, table, img), qu'aucun réglage Bricks ne peut atteindre
   puisque Bricks ne l'a pas produit. Il se met en forme ici, et nulle part
   ailleurs.

   La largeur de lecture est bornée à 76 caractères : au-delà, l'œil perd la
   ligne suivante. Le conteneur reste à 1200 px pour les images et les tableaux,
   qui eux gagnent à être larges. */

.bp-page__titre {
	position: relative;
	padding-bottom: 18px;
	margin: 0;
	/* CENTRÉ COMME PARTOUT AILLEURS (demande d'Olivier, 10/11/2026). Le site a
	   trois familles de titres : le bandeau photo (16 pages), les archives
	   (boutique, actualités, galerie) et ce gabarit générique — qui était le
	   seul resté aligné à gauche.

	   `width: 100%` n'est pas décoratif : le conteneur Bricks est une colonne
	   flex en `align-items: flex-start`, donc sans largeur déclarée le titre se
	   rétrécit à son texte et le centrage ne se voit pas. Sixième fois que ce
	   projet paie ce piège. */
	width: 100%;
	text-align: center;
}

/* Le même filet court que les titres de groupe du menu : 55 px, 2 px, vert.
   Centré avec le titre : un filet resté collé à gauche sous un titre centré se
   lirait comme un défaut d'alignement. */
.bp-page__titre::after {
	content: "";
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	bottom: 0;
	width: 55px;
	height: 2px;
	background-color: #008D36;
}

.bp-page__corps > *:first-child { margin-top: 0; }
.bp-page__corps > *:last-child  { margin-bottom: 0; }

/* UN SEUL MOT TROP LONG FAIT DÉFILER TOUTE LA PAGE, PAS SEULEMENT SON BLOC.
   Trouvé le 11/11/2026 en contrôlant les 16 pages à bandeau : `/les-musees-valises/`
   portait une URL écrite en toutes lettres comme texte de lien (550 px) dans
   une colonne de 460 à 500 px de large — la page entière défilait
   horizontalement sur téléphone. **Défaut antérieur, sans rapport avec le
   passage à 1200 px** : sous ~1200 px la colonne suit le viewport, pas le
   réglage de largeur de contenu, donc le débordement était identique avant.

   `break-word` ne coupe un mot que s'il ne peut PAS tenir : il ne change rien
   au texte courant, contrairement à `anywhere` qui coupe dès que ça arrange la
   mise en page. Une seule URL nue dans tout le site aujourd'hui (relevé sur les
   44 pages) — la règle est donc une garde pour la suite, pas un correctif de
   masse. Le vrai remède éditorial serait d'écrire « Bibliothèques de la
   Province de Luxembourg » au lieu de l'adresse : c'est au musée de le dire. */

.bp-page__corps,
.brxe-post-content,
.brxe-text,
.brxe-text-basic {
	overflow-wrap: break-word;
}

.bp-page__corps p,
.bp-page__corps ul,
.bp-page__corps ol,
.bp-page__corps blockquote {
	max-width: var(--bp-colonne);
}

.bp-page__corps p { margin: 0 0 1.2em; }

.bp-page__corps h2,
.bp-page__corps h3,
.bp-page__corps h4 {
	font-family: Lora, Georgia, serif;
	font-weight: 600;
	line-height: 1.25;
	color: #25282E;
	margin: 1.8em 0 0.6em;
}

.bp-page__corps h2 { font-size: 34px; }
.bp-page__corps h3 { font-size: 26px; }
.bp-page__corps h4 { font-size: 21px; }

/*
 * LA LISTE DES DOCUMENTS N'EST PAS UNE LISTE À PUCES. La règle `list-style: disc` ci-dessous
 * vise les listes de prose ; elle attrapait aussi le `<ul>` que `[evg_documents]` produit, qui
 * porte déjà son propre `list-style: none` — mais à (0,1,0), battu par le (0,1,1) d'ici. On
 * monte à (0,2,0) plutôt que de compter sur l'ordre des feuilles, qui n'est pas de notre
 * ressort : la feuille du greffon est imprimée au pied de page, et cela pourrait changer.
 */
.bp-page__corps .evg-documents-liste { list-style: none; padding-left: 0; }
/* Pas de `margin: 0` ici : il écraserait les marges automatiques qui centrent la colonne de
   lecture, et la liste partait se coller au bord gauche du conteneur pendant que le titre
   au-dessus restait dans la colonne. */

/* Le thème remet les listes à plat ; on leur rend leurs puces, comme sur
   animalaine.be où l'absence de list-style collait les lignes entre elles. */
.bp-page__corps ul,
.bp-page__corps ol {
	margin: 0 0 1.2em;
	padding-left: 1.4em;
}

.bp-page__corps ul { list-style: disc; }
.bp-page__corps ol { list-style: decimal; }
.bp-page__corps li { margin-bottom: 0.4em; }

.bp-page__corps a {
	color: #008D36;
	text-decoration: underline;
	text-underline-offset: 3px;
	transition: color 0.25s ease;
}

.bp-page__corps a:hover,
.bp-page__corps a:focus-visible { color: #25282E; }

.bp-page__corps strong { font-weight: 600; color: #25282E; }

.bp-page__corps img {
	max-width: 100%;
	height: auto;
	display: block;
	margin: 1.6em 0;
}

.bp-page__corps blockquote {
	margin: 1.6em 0;
	padding: 4px 0 4px 22px;
	border-left: 3px solid #008D36;
	font-size: 19px;
	font-style: italic;
	color: #25282E;
}

.bp-page__corps table {
	width: 100%;
	border-collapse: collapse;
	margin: 1.6em 0;
	font-size: 16px;
}

.bp-page__corps th,
.bp-page__corps td {
	border: 1px solid #E2E4E7;
	padding: 10px 14px;
	text-align: left;
	vertical-align: top;
}

.bp-page__corps th { background: #F6F7F8; font-weight: 600; color: #25282E; }

/* Les contenus embarqués (cartes, vidéos) débordaient au téléphone. */
.bp-page__corps iframe,
.bp-page__corps embed,
.bp-page__corps object { max-width: 100%; }

@media (max-width: 781px) {
	.bp-page__titre { font-size: 32px !important; }
	.bp-page__corps h2 { font-size: 26px; }
	.bp-page__corps h3.bp-el-marque { font-size: 26px; }
	.bp-page__corps h3 { font-size: 21px; }
}

/* --- ce que demande l'appareil -------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	#brx-header .bricks-nav-menu > li > a::after,
	#brx-header .bricks-nav-menu > li > .brx-submenu-toggle > a::after,
	#brx-header .bricks-nav-menu > li > .sub-menu,
	#brx-footer .bpf-contact > span::after,
	#brx-footer .bpf-lien > span::after,
	#brx-footer .bpf-credit a,
	#brxe-bpetel1::after,
	#brxe-bpetel2::after,
	#brxe-bpeadrt::after,
	#brxe-bpebtn {
		transition: none;
	}
}

/* --- la mise au point du clavier, visible sur fond sombre ------------------ */

#brx-header a:focus-visible,
#brx-header button:focus-visible {
	outline: 3px solid #008D36;
	outline-offset: 3px;
}

/* --- la page contact ------------------------------------------------------- */

/* LE DESSIN EST CELUI DE LA PRODUCTION, relevé au navigateur par
   `getComputedStyle` à 1440 px — jamais estimé à l'œil sur une capture, qui ne
   dit ni une couleur exacte, ni un interligne, ni une largeur de piste.

   Titre et accroche centrés au-dessus d'un filet gris clair, puis deux
   colonnes : les informations à gauche, le formulaire à droite. */

/* --- l'en-tête -------------------------------------------------------------- */

/* `align-items: stretch`, parce qu'un bloc Bricks est une colonne flex en
   `align-items: flex-start` : ses enfants se rétrécissent à leur contenu, et un
   `text-align: center` sur une boîte rétrécie ne se voit pas. Bricks écrivait
   bien le centrage (avec la spécificité d'un identifiant) — c'était la largeur
   de la boîte qui manquait. On garde le flex plutôt que de passer en `block` :
   en flux normal, les marges verticales se fusionneraient et le rythme de la
   colonne de gauche (27 px + 20 px = 47 px entre deux groupes, comme en
   production) tomberait à 27. */
.bp-contact__entete {
	align-items: stretch;
	padding-bottom: 36px;
	border-bottom: 1px solid #E8E8E8;
}

.bp-contact__titre {
	margin: 0 0 21px;
}

.bp-contact__intro {
	margin: 0 0 35px;
}

/* --- les deux colonnes ----------------------------------------------------- */

/* 477 / 713 sur 1190 en production. Les pistes gardent ces proportions. La
   largeur du texte de gauche (302 px, soit 165 px de marge à droite dans sa
   colonne) est rendue par un `max-width` et non par un `padding` en
   pourcentage : sur une piste `fr`, un padding proportionnel demande au
   navigateur de résoudre une circularité, et le `max-width` s'efface tout seul
   quand la colonne devient plus étroite que le texte. */
.bp-contact__grille {
	display: grid;
	grid-template-columns: minmax(0, 477fr) minmax(0, 713fr);
	align-items: start;
	width: 100%;
	margin-top: 57px;
}

.bp-contact__infos {
	max-width: 302px;
}

.bp-contact__forme {
	align-items: stretch;
	padding-left: 48px;
}

/* --- la colonne des informations ------------------------------------------- */

.bp-contact__st {
	margin: 0 0 20px;
}

.bp-contact__p {
	margin: 0 0 27px;
}

.bp-contact__p + .bp-contact__st {
	margin-top: 20px;
}

.bp-contact__p a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
	transition: color 0.2s ease;
}

.bp-contact__p a:hover,
.bp-contact__p a:focus-visible {
	color: #008D36;
}

/* Les tuiles sociales : 40×40, fond #C8C9CB, icône blanche de 20 px, 5 px
   d'écart — les cotes de la production. Le shortcode pose ses propres règles à
   une seule classe (0-1-0) ; deux classes suffisent à les reprendre, sans
   `!important`. */
.bp-contact__reseaux {
	display: block;
	margin-top: 20px;
}

.bp-contact__reseaux .mga-reseaux {
	justify-content: flex-start;
	gap: 5px;
}

.bp-contact__reseaux .mga-reseaux__lien {
	width: 40px;
	height: 40px;
	justify-content: center;
	background-color: #C8C9CB;
	color: #FFFFFF;
	transition: background-color 0.25s ease;
}

.bp-contact__reseaux .mga-reseaux__lien:hover,
.bp-contact__reseaux .mga-reseaux__lien:focus-visible {
	background-color: #008D36;
	color: #FFFFFF;
}

@media (prefers-reduced-motion: reduce) {
	.bp-contact__p a,
	.bp-contact__reseaux .mga-reseaux__lien {
		transition: none;
	}
}

/* --- le formulaire, tel que la production le sert -------------------------- */

/* En production ce formulaire est habillé par la feuille du thème `muzze`, que
   Bricks n'a pas : sans ces règles il sortirait dans l'habillage d'usine de
   Gravity Forms, avec des champs encadrés. On redonne ici l'aspect relevé — des
   champs soulignés, sans cadre ni fond.

   CE QUI N'EST PAS ÉCRIT ICI, ET POURQUOI :
   — les libellés masqués et les textes de substitution sont des réglages de
     CHAMP (`labelPlacement: hidden_label`), déjà en base et partagés avec la
     production. Les masquer en CSS ferait un second mécanisme pour le même
     effet, et les deux finiraient par diverger ;
   — l'écart entre les champs (28 px) et les deux demi-largeurs de la première
     rangée viennent de Gravity Forms et du formulaire : rien à reprendre ;
   — le cadre de la description du consentement est l'habillage d'usine de
     Gravity Forms, et c'est bien celui que sert la production. On le laisse. */

/* Gravity Forms déclare ses variables de thème dans un <style> EN LIGNE scopé
   sur `#gform_wrapper_3[data-form-index="0"]` — un identifiant, donc une
   spécificité qu'aucune suite de classes ne bat. Ses déclarations ne sont pas
   `!important` : c'est `!important` qui reprend la main, et SEULEMENT sur la
   famille de la couleur d'accent (le bouton, la mise au point, une case
   cochée). Tout le reste garde les valeurs d'usine, qui sont déjà celles de la
   production. */
.bp-contact__forme .gform_wrapper {
	--gf-color-primary: #008D36 !important;
	--gf-color-primary-rgb: 0, 141, 54 !important;
	--gf-color-primary-darker: #00702B !important;
	--gf-color-primary-lighter: #00A844 !important;
	--gf-color-primary-contrast: #FFFFFF !important;
	--gf-color-primary-contrast-rgb: 255, 255, 255 !important;
	--gf-color-in-ctrl-primary: #008D36 !important;
	--gf-color-in-ctrl-primary-rgb: 0, 141, 54 !important;
	--gf-color-in-ctrl-primary-darker: #00702B !important;
	--gf-color-in-ctrl-primary-lighter: #00A844 !important;
}

/* L'ÉCART ENTRE LES CHAMPS : 28 px, la valeur de la production. Gravity Forms
   le prend dans sa propre variable, dont le défaut d'usine vaut 40 px — c'est
   lui qui rendait le formulaire aéré, et pas seulement entre les deux cases à
   cocher. On passe donc par la variable de l'éditeur plutôt que par un
   `row-gap` posé à la main : tout ce qui en dérive suit.

   Pas d'`!important` ici, contrairement aux couleurs : le bloc en ligne de
   Gravity Forms (`#gform_wrapper_3[data-form-index="0"].gform-theme`, 1-2-0)
   ne déclare QUE des couleurs — vérifié sur la page servie. L'écart, lui, vient
   de la feuille « foundation » à 0-1-0, que deux classes suffisent à reprendre. */
.bp-contact__forme .gform_wrapper {
	--gf-form-gap-y: 28px;
}

/* --- les champs : un soulignement, rien d'autre ---------------------------- */

/* La liste des types est explicite : un `input` nu attraperait aussi les cases
   à cocher, qui recevraient une hauteur de 38 px. */
.bp-contact__forme .gform_wrapper .gfield input[type="text"],
.bp-contact__forme .gform_wrapper .gfield input[type="email"],
.bp-contact__forme .gform_wrapper .gfield input[type="tel"],
.bp-contact__forme .gform_wrapper .gfield input[type="url"],
.bp-contact__forme .gform_wrapper .gfield input[type="number"],
.bp-contact__forme .gform_wrapper .gfield select,
.bp-contact__forme .gform_wrapper .gfield textarea {
	padding: 0;
	border: 0;
	border-bottom: 1px solid #D4D4D4;
	border-radius: 0;
	background-color: transparent;
	box-shadow: none;
	font-family: "Archivo", sans-serif;
	font-size: 14px;
	color: #112337;
}

.bp-contact__forme .gform_wrapper .gfield input[type="text"],
.bp-contact__forme .gform_wrapper .gfield input[type="email"],
.bp-contact__forme .gform_wrapper .gfield input[type="tel"],
.bp-contact__forme .gform_wrapper .gfield input[type="url"],
.bp-contact__forme .gform_wrapper .gfield input[type="number"],
.bp-contact__forme .gform_wrapper .gfield select {
	height: 38px;
}

.bp-contact__forme .gform_wrapper .gfield textarea {
	height: 130px;
	padding-top: 10px;
	resize: vertical;
}

/* Le libellé du champ newsletter (« Avez-vous envie de rejoindre notre
   newsletter ? ») est masqué, comme en production — où ce n'est pas Gravity
   Forms qui le fait (le champ n'a pas `hidden_label`, contrairement aux cinq
   autres) mais la feuille du thème `muzze`, qui le réduit à une boîte de 1×1.
   Mesuré sur la page de production, pas supposé.

   MASQUAGE ACCESSIBLE, jamais `display:none` : la question reste annoncée par
   un lecteur d'écran. Sans elle, « Communication Générale & Activités » ne dit
   pas de quoi il s'agit — c'est le seul endroit où le mot « newsletter »
   apparaît.

   On passe par la feuille et non par le réglage de champ `hidden_label` : ce
   réglage vit dans la base, partagée avec la production ; une règle de la
   feuille enfant se défait sans toucher aux données du formulaire. */
.bp-contact__forme .gform_wrapper .gfield--type-acy .gfield_label {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.bp-contact__forme .gform_wrapper .gfield ::placeholder {
	color: #8A9099;
	opacity: 1;
}

/* À la souris, le soulignement s'épaissit sans rien déplacer — une bordure qui
   passerait de 1 à 2 px décalerait le champ d'un pixel. Au clavier, un vrai
   anneau de mise au point : `:focus-visible` est posé APRÈS `:focus`, donc il
   le reprend quand il s'applique. */
.bp-contact__forme .gform_wrapper .gfield input:focus,
.bp-contact__forme .gform_wrapper .gfield select:focus,
.bp-contact__forme .gform_wrapper .gfield textarea:focus {
	border-bottom-color: #008D36;
	box-shadow: 0 1px 0 0 #008D36;
	outline: none;
}

.bp-contact__forme .gform_wrapper .gfield input:focus-visible,
.bp-contact__forme .gform_wrapper .gfield select:focus-visible,
.bp-contact__forme .gform_wrapper .gfield textarea:focus-visible {
	outline: 2px solid #008D36;
	outline-offset: 3px;
}

/* --- la mention « champs nécessaires », retirée --------------------------- */

/* Tous les champs saisissables du formulaire sont obligatoires — sauf la case
   newsletter, qui ne doit PAS l'être (un consentement se donne librement) et
   le captcha, qui n'est pas une saisie. La mention n'explique donc qu'une
   seule astérisque visible, celle du consentement.

   On la retire par la feuille et non par le filtre `gform_required_legend` :
   ce filtre ne change que le TEXTE, Gravity Forms imprimant de toute façon son
   `<p class='gform_required_legend'>` (form_display.php:1480) — un paragraphe
   vide qui garderait sa marge de 25,6 px. Il faudrait donc les deux, et deux
   mécanismes pour un seul effet finissent par diverger.

   Rien n'est perdu pour un lecteur d'écran : les champs obligatoires portent
   `aria-required="true"` (7 occurrences dans la page servie), qui est le vrai
   mécanisme d'accessibilité — la mention n'en était que le doublon visuel. */
.bp-contact__forme .gform_wrapper .gform_required_legend {
	display: none;
}

/* --- les deux cases à cocher ----------------------------------------------- */

/* Le libellé de la case newsletter sort de l'intégration AcyMailing, qui ne le
   style pas (14,592 px, `#334155`, interligne serré) ; celui du consentement
   vient de Gravity Forms (14 px, `#112337`, interligne 1,43). Les deux doivent
   se lire comme une même paire de cases : on aligne le premier sur le second,
   et les deux sur Archivo, la police du site.

   L'écart entre les deux cases se corrige en amont, dans
   `bp-mga-contact-formulaire.php` : il venait de deux `<br>` que l'intégration
   laisse derrière elle, pas d'une marge. */
/* 13 px, soit SOUS les champs (14 px) et non à égalité. Les deux libellés
   sortaient à 14 px — mesuré — donc exactement la taille des saisies : aucune
   hiérarchie, et à poids et couleur plus soutenus que ceux d'un texte de
   substitution, ils se lisaient même comme plus gros. Ce qu'on remplit prime
   sur ce qu'on coche.

   Le formulaire tient dès lors sur deux niveaux : 14 px pour les saisies,
   13 px pour tout le reste — les deux libellés de cases, le compteur de
   caractères et la phrase du RGPD. */
.bp-contact__forme .gform_wrapper .gfield--type-acy label[for^="gform_acy_list_sub"],
.bp-contact__forme .gform_wrapper .gfield--type-consent .ginput_container_consent label {
	font-family: "Archivo", sans-serif;
	font-size: 13px;
	font-weight: 400;
	line-height: 1.5;
	color: #112337;
}

/* 12 px entre la case et son libellé, comme Gravity Forms le fait pour le
   consentement : les deux lignes de cases commencent alors à la même abscisse
   (mesuré : 668 px contre 675 px avant correction). Le `style` en ligne que
   posait l'intégration AcyMailing est retiré en amont, dans le mu-plugin —
   une feuille ne reprend pas un style en ligne sans `!important`. */
.bp-contact__forme .gform_wrapper .gfield--type-acy label[for^="gform_acy_list_sub"] {
	margin-left: 12px;
}

/* Le compteur de caractères appartient au même second niveau : 13 px, et en
   Archivo comme le reste du formulaire — Gravity Forms le sert dans la pile
   système, ce qui le faisait détonner sous un champ en Archivo. */
.bp-contact__forme .gform_wrapper .ginput_counter,
.bp-contact__forme .gform_wrapper .charleft {
	font-family: "Archivo", sans-serif;
	font-size: 13px;
	color: #585E6A;
}

/* --- la phrase du RGPD, sous la case et sans cadre ------------------------- */

/* Gravity Forms encadre cette description et lui donne une hauteur maximale
   avec défilement : c'est son habillage pour un texte long, du genre
   conditions générales que l'on fait défiler. Ici c'est une phrase.

   DEUX CLASSES, et c'est la seconde qui porte le cadre : l'enveloppe est
   `.gfield_consent_description`, le cadre est sur
   `.gfield_consent_description_text`. Viser la première seule ne change rien —
   mesuré. La règle de l'éditeur est en `:where(...)`, qui ne pèse rien : trois
   classes suffisent à la battre, sans `!important`. */
.gform_wrapper.gform-theme .gfield_consent_description,
.gform_wrapper.gform-theme .gfield_consent_description_text,
.bp-contact__forme .gform_wrapper .gfield_consent_description,
.bp-contact__forme .gform_wrapper .gfield_consent_description_text {
	max-height: none;
	overflow: visible;
	margin-top: 4px;
	padding: 0;
	border: 0;
	background: transparent;
	font-family: "Archivo", sans-serif;
	font-size: 13px;
	line-height: 1.6;
	color: #585E6A;
	text-align: left;
}

/* La phrase est centrée et rapetissée par son propre contenu (`<center>` et
   `<small>`, hérités de la production). On ne réécrit pas le texte du musée :
   on neutralise ici ce que son balisage impose. */
.gform_wrapper.gform-theme .gfield_consent_description center,
.bp-contact__forme .gform_wrapper .gfield_consent_description center {
	text-align: left;
}

.gform_wrapper.gform-theme .gfield_consent_description small,
.bp-contact__forme .gform_wrapper .gfield_consent_description small {
	font-size: inherit;
}

/* TOUS LES FORMULAIRES, PAS SEULEMENT CONTACT (12/11/2026). Les trois règles ci-dessus ne
   visaient que `.bp-contact__forme` : sur /conditions-libraires/ la phrase du RGPD gardait donc
   le cadre d'usine de Gravity Forms, centrée dedans. Elles portent désormais aussi sur
   `.gform_wrapper.gform-theme` (0-3-0, contre un `:where()` qui ne pèse rien).

   ET LA PHRASE COMMENCE SOUS LE LIBELLÉ, PAS SOUS LA CASE : elle complète « J'accepte la
   collecte... », donc elle s'aligne sur ce texte. Le retrait vaut la case plus son écart
   (20 + 12 px, mesuré : case à 320, texte du libellé à 352). */
.gform_wrapper.gform-theme .gfield--type-consent .gfield_consent_description {
	padding-left: calc(var(--gf-ctrl-choice-size, 20px) + 12px);
}

/* --- la ligne « 0,00 € 21% » au-dessus du numéro de TVA ------------------ */

/* C'est le récapitulatif de TVA de l'extension « EU VAT for Gravity Forms » : le montant de
   TVA qu'elle calcule sur les PRODUITS du formulaire, et son taux. Il sert à un formulaire de
   commande. Celui des libraires n'a aucun produit : la ligne affiche donc 0,00 € à 21 %, et
   ne dit rien à personne — la production l'affiche aussi, ce n'est pas une régression.

   On la masque LÀ OÙ ELLE N'A RIEN À CALCULER, pas par numéro de formulaire : un formulaire
   qui porterait un jour un champ produit retrouverait sa ligne sans qu'on touche à ceci. */
.gform_wrapper form:not(:has(.gfield--type-product, .gfield--type-total)) .gotreu-price-wrapper {
	display: none;
}

/* --- le bouton ------------------------------------------------------------- */

.bp-contact__forme .gform_wrapper .gform_footer {
	margin-top: 8px;
	padding: 0;
}

/* LE COMPTE DE SPÉCIFICITÉ, parce qu'il décide ici et qu'il ne se devine pas.
   Gravity Forms chaîne TROIS classes sur le même élément —
   `.gform-theme--framework.gform-theme.gform_wrapper` — puis vise
   `button.gform_button` : ses règles pèsent 0-4-1. Une suite de trois classes
   et un élément (0-3-1) perd, et c'est exactement ce qui est arrivé : le bouton
   sortait en casse normale et sans ses espacements. On reprend donc sa propre
   chaîne, ce qui porte la nôtre à 0-6-1.

   Les règles des CHAMPS, elles, ne sont pas reprises : elles pèsent 0-4-1 comme
   celles de l'éditeur, et c'est l'ordre de chargement qui tranche — la feuille
   enfant passe après. Ne pas « durcir » ce qui fonctionne. */
.bp-contact__forme .gform_wrapper.gform-theme.gform-theme--framework .gform_footer input[type="submit"].gform_button,
.bp-contact__forme .gform_wrapper.gform-theme.gform-theme--framework .gform_footer button.gform_button {
	/* LA LANGUE DES BOUTONS DU SITE, relevée sur les deux qui existent déjà
	   dans la refonte — « Nous Contacter » de l'en-tête (Archivo 16px, rayon 0,
	   13px/31px de rembourrage) et « Souscrire » du pied (Archivo 16px/500,
	   rayon 0, 10px/30px) — et sur ceux de la production (« Informations
	   Pratiques » : rayon 0, graisse 500, ni capitales ni espacement de
	   lettres). Les capitales et le `letter-spacing: 1.5px` de la production
	   SUR CE SEUL BOUTON étaient l'exception, pas la règle : on s'aligne sur la
	   règle.

	   Le vert reste : sur fond blanc c'est la couleur d'action du site, celle
	   vers laquelle le bouton de l'en-tête bascule au survol. */
	width: auto;
	padding: 13px 31px;
	border: 1px solid #008D36;
	border-radius: 0;
	background-color: #008D36;
	color: #FFFFFF;
	font-family: "Archivo", sans-serif;
	font-size: 16px;
	font-weight: 500;
	letter-spacing: normal;
	text-transform: none;
	cursor: pointer;
	transition: background-color 0.25s ease, border-color 0.25s ease;
}

.bp-contact__forme .gform_wrapper.gform-theme.gform-theme--framework .gform_footer input[type="submit"].gform_button:hover,
.bp-contact__forme .gform_wrapper.gform-theme.gform-theme--framework .gform_footer button.gform_button:hover {
	background-color: #00702B;
	border-color: #00702B;
}

@media (prefers-reduced-motion: reduce) {
	.bp-contact__forme .gform_wrapper.gform-theme.gform-theme--framework .gform_footer input[type="submit"].gform_button,
	.bp-contact__forme .gform_wrapper.gform-theme.gform-theme--framework .gform_footer button.gform_button {
		transition: none;
	}
}

/* --- en dessous de 900 px, une colonne ------------------------------------- */

@media (max-width: 900px) {
	.bp-contact__grille {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 48px;
		margin-top: 44px;
	}

	.bp-contact__infos {
		max-width: none;
	}

	.bp-contact__forme {
		padding-left: 0;
	}
}

/* ===========================================================================
   LA FICHE D'UNE EXPO OU D'UN ÉVÉNEMENT
   ---------------------------------------------------------------------------
   Gabarit « single » conditionné aux catégories 68/69/75/77. Deux colonnes :
   le contenu à gauche, l'encadré de réservation à droite.

   Le corps de la fiche réutilise .bp-page__corps : c'est le même balisage
   riche (h3, listes, liens, images) que les pages, et il est déjà traité
   au-dessus. Une seconde série de règles finirait par en diverger.
   =========================================================================== */

.bp-fiche__titre {
	margin: 0;
	/* Le conteneur de Bricks est un flex en colonne qui RÉTRÉCIT ses enfants :
	   sans cette largeur, le h1 ne mesure que le texte (368 px mesurés le
	   09/11/2026) et son text-align: center n'a plus de place pour agir — il
	   paraît aligné à gauche alors qu'il est bien centré dans sa boîte. */
	width: 100%;
}

.bp-fiche__grille {
	display: grid;
	/* Le contenu large, l'encadré étroit : il ne porte que des étiquettes,
	   le choix du billet et les boutons de partage. */
	grid-template-columns: minmax(0, 713fr) minmax(0, 377fr);
	column-gap: 48px;
	align-items: start;
	width: 100%;
}

.bp-fiche__principal {
	display: flex;
	flex-direction: column;
	/* MÊME CAUSE QUE LE TITRE, et c'est elle qui écrasait la vidéo : sans
	   « stretch », un enfant en width: 100% se résout sur un parent qui
	   rétrécit, donc sur rien — l'iframe retombait alors sur sa taille
	   intrinsèque d'élément remplacé, 300 x 150. Mesuré, pas supposé. */
	align-items: stretch;
	row-gap: 28px;
	min-width: 0;
}

.bp-fiche__image img {
	width: 100%;
	height: auto;
	border-radius: 4px;
}

/* --- les intertitres de section -------------------------------------------- */

.bp-fiche__st {
	margin: 12px 0 0;
	font-family: Lora, Georgia, serif;
	font-size: 26px;
	font-weight: 600;
	line-height: 1.25;
	color: #25282E;
}

/* --- la note de réservation, centrée comme en production ------------------- */

.bp-fiche__note {
	margin: 0;
	font-family: Archivo, system-ui, sans-serif;
	font-size: 19px;
	font-weight: 500;
	line-height: 1.5;
	text-align: center;
	color: #25282E;
}

/* --- l'encart gris « En savoir plus » -------------------------------------- */

.bp-fiche__encart {
	display: flex;
	flex-direction: column;
	row-gap: 8px;
	padding: 22px 26px;
	background-color: #F4F5F6;
	border-left: 3px solid #008D36;
	border-radius: 3px;
}

.bp-fiche__encart-titre {
	margin: 0;
	font-family: Archivo, system-ui, sans-serif;
	font-size: 19px;
	font-weight: 600;
	line-height: 1.3;
	color: #25282E;
}

.bp-fiche__encart-texte {
	margin: 0;
	font-family: Archivo, system-ui, sans-serif;
	font-size: 16px;
	line-height: 1.6;
	color: #555555;
}

.bp-fiche__encart-texte a {
	color: #00702B;
	text-decoration: underline;
}

/* --- la vidéo : l'iframe d'ACF n'a pas de proportions ---------------------- */

.bp-fiche__video,
.bp-fiche__video p {
	width: 100%;
	margin: 0;
}

.bp-fiche__video iframe {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	height: auto;
	border: 0;
	border-radius: 4px;
}

/* --- les galeries : logos partenaires et images de l'expo ------------------ */

.bp-fiche__logos .bricks-layout-inner,
.bp-fiche__galerie .bricks-layout-inner {
	height: auto;
}

.bp-fiche__logos img {
	/* Des logos de hauteurs et de fonds très différents : on les cadre sans
	   les rogner, contrairement aux photos. */
	width: 100%;
	height: 90px;
	object-fit: contain;
	background-color: #FFFFFF;
}

.bp-fiche__galerie img {
	width: 100%;
	height: 180px;
	object-fit: cover;
	border-radius: 3px;
}

/* --- l'encadré de droite --------------------------------------------------- */

.bp-fiche__encadre {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	row-gap: 10px;
	padding: 26px 28px 30px;
	background-color: #FFFFFF;
	border: 1px solid #E3E5E8;
	border-radius: 4px;
	/* Il suit la lecture sur les longues fiches, sans dépasser la colonne. */
	position: sticky;
	top: 24px;
}

.bp-fiche__etiq {
	display: block;
	margin: 0;
	font-family: Archivo, system-ui, sans-serif;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #777777;
}

.bp-fiche__etiq + * {
	margin-top: -4px;
}

.bp-fiche__lieu {
	margin: 0;
	font-family: Archivo, system-ui, sans-serif;
	font-size: 18px;
	line-height: 1.45;
	color: #25282E;
}

/* DEUX SÉPARATEURS COLLÉS, SUR 46 FICHES SUR 264. L'encadré pose
   « Date / Lieu — séparateur — panier — séparateur — Partager » : les deux
   bornent le bouton d'achat, et c'est juste quand il y a quelque chose à
   acheter. Sur une fiche NON achetable (événement gratuit, expo passée), le
   bloc panier ne rend aucun contenu — mais il rend quand même SON ENVELOPPE :
       <div id="brxe-bpfdv1" …><div class="line"></div></div>
       <div id="brxe-bpfpan" class="…bp-fiche__panier"></div>   <- vide
       <div id="brxe-bpfdv2" …>
   Les deux séparateurs ne sont donc PAS voisins directs, et un sélecteur
   d'adjacence « + » entre eux ne s'appliquerait jamais — c'est l'erreur que
   j'ai d'abord commise, sur un relevé où mon découpage comptait la fin de la
   balise comme du contenu. On ancre sur ce qui est vrai : l'enveloppe du
   panier est VIDE, donc le séparateur qui la suit n'a plus rien à border.
   Mesuré le 11/11/2026 sur signalement d'Olivier. */
.bp-fiche__encadre .bp-fiche__panier:empty + .brxe-divider {
	display: none;
}

/* Le prix et le choix du billet viennent de WooCommerce : on ne redéfinit que
   ce qui jure avec le reste, pas l'ensemble du formulaire. */
.bp-fiche__panier .price {
	font-family: Lora, Georgia, serif;
	font-size: 24px;
	color: #25282E;
}

.bp-fiche__panier .button {
	width: 100%;
	background-color: #008D36;
	color: #FFFFFF;
	font-family: Archivo, system-ui, sans-serif;
	font-weight: 600;
}

.bp-fiche__panier .button:hover,
.bp-fiche__panier .button:focus-visible {
	background-color: #00702B;
}

/* --- le lieu rendu par [mga_expo_carte] ------------------------------------ */

.bp-lieu__carte img,
.bp-lieu__carte iframe {
	display: block;
	width: 100%;
	height: auto;
	border: 0;
	border-radius: 4px;
}

.bp-lieu__adresse {
	margin: 12px 0 0;
	font-family: Archivo, system-ui, sans-serif;
	font-size: 16px;
	line-height: 1.55;
	color: #555555;
}

.bp-lieu__adresse strong {
	font-weight: 600;
	color: #25282E;
}

.bp-lieu__lien {
	margin: 6px 0 0;
}

.bp-lieu__lien a {
	font-family: Archivo, system-ui, sans-serif;
	font-size: 16px;
	font-weight: 600;
	color: #00702B;
	text-decoration: underline;
}

/* --- en dessous de 900 px, une colonne ------------------------------------- */

@media (max-width: 900px) {
	.bp-fiche__grille {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 40px;
	}

	.bp-fiche__encadre {
		/* Collant sur un écran étroit, il mangerait la moitié de la hauteur. */
		position: static;
	}

	.bp-fiche__galerie img {
		height: 140px;
	}
}

/* ===========================================================================
   LES DEUX ARCHIVES À ONGLETS — /cat/expositions/ et /cat/evenements/
   ---------------------------------------------------------------------------
   Deux onglets « À l'affiche » / « Passé(e)s », chacun une grille rendue par
   [mga_events] — le même composant que les quatre pages curatées, donc une
   seule langue visuelle sur tout le parcours.

   Les classes tab-menu / tab-title / tab-content / tab-pane appartiennent à
   l'élément tabs-nested de Bricks : son script s'y accroche. On les habille,
   on ne les renomme pas.
   =========================================================================== */

.bp-archive__titre {
	/* Même cause que le titre de la fiche : le conteneur flex rétrécit ses
	   enfants, et un text-align: center sans largeur ne se voit pas. */
	width: 100%;
	margin: 0;
}

.bp-archive__onglets .tab-menu {
	gap: 28px;
	justify-content: center;
	border-bottom: 1px solid #E3E5E8;
}

.bp-archive__onglets .tab-title {
	padding: 10px 4px 14px;
	font-family: Archivo, system-ui, sans-serif;
	font-size: 19px;
	font-weight: 600;
	color: #777777;
	cursor: pointer;
	border-bottom: 2px solid transparent;
	/* Le soulignement suit l'onglet actif : sans transition il saute. */
	transition: color 0.15s ease, border-color 0.15s ease;
}

.bp-archive__onglets .tab-title:hover {
	color: #25282E;
}

.bp-archive__onglets .tab-title.brx-open {
	color: #008D36;
	border-bottom-color: #008D36;
}

/* Un onglet est un bouton : il doit se voir au clavier, pas seulement à la
   souris. */
.bp-archive__onglets .tab-title:focus-visible {
	outline: 2px solid #008D36;
	outline-offset: 2px;
}

.bp-archive__onglets .tab-content {
	padding-top: 34px;
}

/* Le lien vers la page paginée, sous chaque grille : les onglets montrent 12
   fiches au plus et n'ont pas de pagination (elle partagerait la variable
   « paged » entre les deux panneaux). Le lien dit où sont les autres. */
.bp-archive__suite {
	margin: 26px 0 0;
	text-align: center;
}

.bp-archive__plus {
	display: inline-block;
	padding: 11px 22px;
	font-family: Archivo, system-ui, sans-serif;
	font-size: 16px;
	font-weight: 600;
	color: #00702B;
	border: 1px solid #008D36;
	border-radius: 3px;
	text-decoration: none;
}

.bp-archive__plus:hover,
.bp-archive__plus:focus-visible {
	color: #FFFFFF;
	background-color: #008D36;
}

@media (max-width: 600px) {
	.bp-archive__onglets .tab-menu {
		gap: 18px;
	}

	.bp-archive__onglets .tab-title {
		font-size: 17px;
	}
}

/* ===========================================================================
   L'EN-TÊTE ENTRE 768 ET 1180 px — 10/11/2026
   ---------------------------------------------------------------------------
   Trois défauts mesurés en capture (Chrome, échelle forcée à 1), chacun avec
   son propre seuil. Le premier — la barre de menu qui passe sur deux lignes —
   se règle par le réglage « mobileMenu » de l'élément, pas ici : voir
   bricks/entete-responsive.php, qui fait arriver le hamburger à 1180 px.
   Restent les deux autres :

     ~1000-1248 px   le conteneur Bricks atteint sa largeur maximale, il n'y a
                     plus de gouttière : le logo et le bouton TOUCHENT les bords
       < ~1000 px    le bandeau sombre s'enroule ; sous 768 px le bouton tombe
                     sur sa propre ligne et le bandeau atteint ~220 px, soit un
                     tiers du premier écran sur un téléphone

   LES DEUX SEUILS NE SONT PAS ALIGNÉS, ET C'EST VOULU : ils ne mesurent pas la
   même chose. Masquer le bandeau au seuil du hamburger (1180) le ferait
   disparaître 190 px trop tôt, alors qu'il y tient encore sur une ligne.

   LE SEUIL DE LA GOUTTIÈRE SUIT LA LARGEUR DE CONTENU, PAS LE HAMBURGER — il
   est passé de 1180 à 1248 px le 11/11/2026 avec le conteneur de 1100 à 1200
   (cf. bricks/largeur-contenu.php). C'est 1200 + 2 × 24 : la gouttière mord
   exactement quand le conteneur n'a plus de quoi respirer. L'ancienne valeur
   avait été alignée sur le hamburger ; cette raison-là ne tient plus, puisque
   le conteneur touche désormais les bords jusqu'à 1248 px, donc 68 px au-delà
   du hamburger.

   Et rendre ces 48 px à la nav ne peut rien faire enrouler : mesurée à 821 px
   de besoin, elle en reçoit 1132 au pire (1180 − 48), soit 52 px de PLUS
   qu'avant le passage à 1200. Le seuil monte, la marge de sécurité aussi.
   =========================================================================== */

@media (max-width: 1248px) {
	#brx-header .brxe-container {
		padding-left: 24px;
		padding-right: 24px;
	}
}

/* Le bandeau des coordonnées. Rien n'est perdu en le masquant : téléphone,
   adresse et « Nous Contacter » sont dans le pied de page.

   BRICKS ÉCRIT L'IDENTIFIANT D'ÉLÉMENT COMME « id » HTML, PAS COMME CLASSE :
   la section sort en `<section id="brxe-bpehau" class="brxe-section">`, et sa
   règle générée est `#brxe-bpehau {…}`. Les `.brxe-*` sont les classes de TYPE
   (brxe-section, brxe-container), pas l'instance. Un `.brxe-bpehau` ne vise
   donc rien du tout — mesuré le 10/11 : le bandeau restait affiché à 390 px,
   sans la moindre erreur.

   On vise l'id, préfixé de `#brx-header` pour peser (2,0,0) contre la règle de
   Bricks à (1,0,0). Et on garde l'id plutôt qu'un :first-child, qui suivrait
   n'importe quel élément ajouté un jour en tête de l'en-tête. */
@media (max-width: 991px) {
	#brx-header #brxe-bpehau {
		display: none;
	}
}

/* ===========================================================================
   NOS NEWS ET LA BOUTIQUE — 10/11/2026
   ---------------------------------------------------------------------------
   Les deux pages ne rendaient que leur titre : ce sont des PAGES (#875 et #11)
   dont le contenu est fabriqué par WordPress et WooCommerce, et le gabarit
   « Page — refonte » les attrapait pour rendre leur `post_content`, vide.

   Nos News est une boucle de requête (`hasLoop`), pas l'élément `posts` de
   Bricks : celui-ci ne rend que l'image, il n'a ni contrôle de titre ni
   contrôle d'extrait. La carte est donc construite ici.
   =========================================================================== */

/* Le `margin-top` ne vaut QUE hors de l'accueil. Il compensait un `_rowGap`
   Bricks qui ne sortait pas — cause trouvée le 10/11 au soir, cf. le bloc
   « LES ÉCARTS » plus bas. Sur l'accueil la grille porte `bp-ruban-source` et
   l'écart du conteneur fait désormais le travail : garder la marge l'y
   ajouterait. Ailleurs (gabarit « Nos News ») le réglage n'a pas été converti,
   la marge reste donc nécessaire. */
.bp-news__grille:not(.bp-ruban-source) {
	margin-top: 26px;
}

.bp-news__grille {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 40px 28px;
	width: 100%;
}

.bp-news__carte {
	display: flex;
	flex-direction: column;
	/* Le conteneur flex de Bricks rétrécit ses enfants : sans « stretch », une
	   image à 100 % retombe sur sa largeur intrinsèque. Piège déjà payé sur la
	   fiche d'expo. */
	align-items: stretch;
	row-gap: 14px;
	min-width: 0;
}

/* LE RATIO VA SUR L'ENVELOPPE, PAS SUR L'IMAGE — et c'est une mesure qui
   l'impose. Deux pièges s'y cumulaient :

   1. le lien qui enveloppe l'image porte la classe `tag`, sur laquelle Bricks
      pose `display:inline-block; width:auto; height:fit-content`. Un `width:100%`
      sur l'`img` se résolvait donc contre une largeur « au contenu » ;
   2. une fois l'enveloppe redressée, `aspect-ratio` + `object-fit` sur l'`img`
      tenaient **jusqu'à ce que le chargement différé pose la vraie image** : la
      sonde, qui mesure à load+2,5 s, rendait 348×218 et déclarait tout juste,
      pendant que la capture montrait une affiche carrée débordant sur le titre.
      *Une sonde qui mesure avant la fin du chargement différé mesure le
      substitut, pas l'image.*

   On met donc le ratio sur l'enveloppe et l'image en position absolue : plus
   aucune règle de hauteur posée sur l'`img` ne peut défaire le cadre. */
.bp-news__carte a.bp-news__image {
	/* `height: auto` EST LA LIGNE QUI COMPTE : Bricks pose `height: fit-content`
	   sur `.tag` (frontend.min.css), et `aspect-ratio` est ignoré dès que la
	   hauteur n'est pas `auto`. Et le sélecteur porte `a.` pour peser (0,2,1)
	   contre le (0,2,0) du thème — à spécificité égale, c'est l'ordre qui
	   tranche, et on ne veut pas en dépendre. */
	display: block;
	position: relative;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background-color: #F4F5F6;
}

.bp-news__carte a.bp-news__image img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.bp-news__titre {
	width: 100%;
	margin: 0;
	font-family: Archivo, system-ui, sans-serif;
	font-size: 20px;
	line-height: 1.3;
	font-weight: 600;
	color: #25282E;
}

.bp-news__titre a {
	color: inherit;
	text-decoration: none;
}

.bp-news__titre a:hover,
.bp-news__titre a:focus-visible {
	color: #008D36;
}

.bp-news__extrait {
	margin: 0;
	font-size: 16px;
	line-height: 1.6;
	color: #555B63;
}

@media (max-width: 991px) {
	.bp-news__grille {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 600px) {
	.bp-news__grille {
		grid-template-columns: 1fr;
		gap: 32px;
	}
}

/* --- la boutique ----------------------------------------------------------
   Le contenu vient du shortcode [products] de WooCommerce : on ne redessine
   pas sa grille, on lui donne seulement sa largeur et un peu d'air. Reprendre
   sa mise en page reviendrait à entretenir une seconde carte produit. */

.brxe-shortcode .woocommerce {
	width: 100%;
}

/* BRICKS REMPLACE LES STYLES DE WOOCOMMERCE : la grille de `ul.products` n'est
   pas servie, et le shortcode sortait en LISTE À PUCES sur une colonne — les
   produits, leurs prix et leurs boutons étaient tous là, mais empilés. On
   redonne donc la grille, et seulement elle : la carte produit reste celle de
   WooCommerce, pour n'avoir qu'une seule carte à entretenir. */
.brxe-shortcode ul.products {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 44px 28px;
	list-style: none;
	margin: 8px 0 0;
	padding: 0;
}

.brxe-shortcode ul.products::before,
.brxe-shortcode ul.products::after {
	content: none;   /* le clearfix flottant de WooCommerce casse la grille */
}

.brxe-shortcode ul.products li.product {
	/* WooCommerce pose un `float:left` et une largeur en pourcentage : dans une
	   grille, les deux se combattent. */
	float: none;
	width: auto;
	margin: 0;
	display: flex;
	flex-direction: column;
	row-gap: 8px;
}

.brxe-shortcode ul.products li.product img {
	width: 100%;
	aspect-ratio: 3 / 4;
	object-fit: contain;
	/* `contain` et non `cover` : ce sont des couvertures de livres et de revues,
	   les rogner couperait les titres. */
	background-color: #F4F5F6;
	margin: 0;
}

.brxe-shortcode ul.products li.product .woocommerce-loop-product__title {
	font-family: Archivo, system-ui, sans-serif;
	font-size: 17px;
	line-height: 1.35;
	font-weight: 600;
	color: #25282E;
	padding: 0;
	margin: 0;
}

.brxe-shortcode ul.products li.product .price {
	font-size: 16px;
	color: #555B63;
	margin: 0;
}

.brxe-shortcode ul.products li.product .button {
	align-self: flex-start;
	margin-top: 4px;
}

/* Le tri et le compte de résultats */
.brxe-shortcode .woocommerce-result-count,
.brxe-shortcode .woocommerce-ordering {
	margin-bottom: 18px;
}

/* La pagination du shortcode : elle passe par `?product-page=`, pas par
   `/page/2/` — vérifié, « 13–24 sur 101 » à la page 2. */
.brxe-shortcode .woocommerce-pagination ul {
	display: flex;
	gap: 8px;
	list-style: none;
	justify-content: center;
	margin: 40px 0 0;
	padding: 0;
	border: 0;
}

@media (max-width: 991px) {
	.brxe-shortcode ul.products {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 600px) {
	.brxe-shortcode ul.products {
		grid-template-columns: 1fr;
	}
}

/* ===========================================================================
   LA GALERIE — 10/11/2026
   ---------------------------------------------------------------------------
   Element natif `image-gallery` de Bricks, nourri des 32 identifiants d'images
   de la galerie Envira #19004 : rien n'est dupliqué, et la visionneuse est
   celle du theme, pas un greffon de plus. Une fois l'accueil refait, Envira
   n'aura plus aucun consommateur.

   Le `margin-top` est la meme ligne que pour Nos News : le `_rowGap` du
   conteneur Bricks ne s'applique pas, et le titre touchait la grille.
   =========================================================================== */

.bp-galerie {
	margin-top: 26px;
	width: 100%;
}

@media (max-width: 991px) {
	.bp-galerie {
		--columns: 3;
	}
}

@media (max-width: 600px) {
	.bp-galerie {
		--columns: 2;
	}
}

/* =========================================================================
   L'ACCUEIL
   =========================================================================
   Fonds, marges, tailles et couleurs viennent d'un relevé de
   `_elementor_data` de la production du 10/11/2026, jamais d'une estimation.

   CE QUI EST RÉUTILISÉ L'EST EXPLICITEMENT : la grille d'articles du bas de
   page est `bp-news__grille`, déjà posée pour le gabarit « Nos News ». Une
   seule grille à tenir à jour, et elle hérite au passage de son `margin-top`
   et de son passage à une colonne sous 600 px.
   ========================================================================= */

.bp-acc__titre {
	/* Même cause que `bp-archive__titre` : dans un conteneur flex, un
	   `text-align: center` sans largeur déclarée ne se voit pas. */
	width: 100%;
	margin: 0;
}

.bp-acc__liste,
.bp-acc__avis {
	width: 100%;
}

/* --- la bande verte des horaires ---------------------------------------- */

.bp-acc__horaires {
	/* Sur un portable, le texte et le bouton ne tiennent pas sur une ligne :
	   ils passent l'un sous l'autre plutôt que de rogner la phrase. */
	flex-wrap: wrap;
	row-gap: 14px;
}

.bp-acc__horaires-texte {
	margin: 0;
	font-family: Archivo, system-ui, sans-serif;
	font-size: 18px;
	line-height: 1.5;
	text-align: center;
	color: #FFFFFF;
}

/* Le bouton clair sur le vert : contraste 11,6:1 pour #25282e sur blanc. */
a.bp-acc__bouton,
button.bp-acc__bouton {
	padding: 15px 40px;
	border: 0;
	border-radius: 0;
	font-family: Archivo, system-ui, sans-serif;
	font-size: 18px;
	font-weight: 400;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
	background-color: #FFFFFF;
	color: #25282e;
	transition: background-color 0.15s ease, color 0.15s ease;
}

a.bp-acc__bouton:hover,
a.bp-acc__bouton:focus-visible,
button.bp-acc__bouton:hover {
	background-color: #000000;
	color: #FFFFFF;
}

/* --- les liens « Voir tout » --------------------------------------------
   La production en fait un bouton au fond transparent : c'est un lien, on
   l'habille comme tel plutôt que de reproduire une boîte invisible. */

a.bp-acc__suite,
button.bp-acc__suite {
	padding: 0;
	border: 0;
	background-color: transparent;
	font-family: Archivo, system-ui, sans-serif;
	font-size: 17px;
	font-weight: 600;
	line-height: 1.3;
	color: #25282e;
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: color 0.15s ease, border-color 0.15s ease;
}

a.bp-acc__suite:hover,
a.bp-acc__suite:focus-visible {
	color: #008D36;
	border-bottom-color: #008D36;
}

/* --- Qui sommes-nous ----------------------------------------------------- */

.bp-acc__qui {
	align-items: center;
}

.bp-acc__video,
.bp-acc__qui-texte {
	/* `flex: 1 1 0` plutôt qu'une largeur en pourcentage : les deux colonnes
	   se partagent l'espace quel que soit le `gap`. */
	flex: 1 1 0;
	min-width: 0;
}

/* Le titre « Qui sommes-nous ? » a quitté cette colonne le 10/11/2026 : il est
   devenu un titre de lame centré, comme « Expositions ». Les règles qui le
   visaient ici sont retirées plutôt que laissées inertes. */

.bp-acc__p p {
	margin: 0 0 14px;
	font-family: Archivo, system-ui, sans-serif;
	font-size: 17px;
	line-height: 1.65;
	color: #4A4F57;
}

.bp-acc__p p:last-child {
	margin-bottom: 0;
}

.bp-acc__p a {
	color: #008D36;
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* --- En direct du Musée, bande sombre ------------------------------------
   Le `#25282e` n'est pas sur la section de la production mais sur ses trois
   conteneurs internes. Ici il est sur la section, ce qui donne le même rendu
   avec un niveau de moins. Liens en #AAAAAA : 6,2:1 sur ce fond, conforme. */

.bp-acc__direct-grille {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px 56px;
	width: 100%;
	max-width: 760px;
}

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

.bp-acc__liens li {
	position: relative;
	padding-left: 17px;
	margin-bottom: 9px;
	font-family: Archivo, system-ui, sans-serif;
	font-size: 16px;
	line-height: 1.4;
}

.bp-acc__liens li:last-child {
	margin-bottom: 0;
}

/* La puce de 7 px de la production, en CSS plutôt qu'en Font Awesome : une
   icône chargée pour dix pastilles rondes serait une police pour rien. */
.bp-acc__liens li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.45em;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background-color: #FFFFFF;
}

.bp-acc__liens a {
	color: #AAAAAA;
	text-decoration: none;
	transition: color 0.15s ease;
}

.bp-acc__liens a:hover,
.bp-acc__liens a:focus-visible {
	color: #FFFFFF;
}

/* --- la galerie de l'accueil ---------------------------------------------
   Même élément que `/galerie/`, six colonnes au lieu de quatre : douze
   images sur deux rangées, comme la production. */

.bp-acc__galerie {
	width: 100%;
}

@media (max-width: 991px) {
	.bp-acc__direct-grille {
		gap: 18px 32px;
	}
}

/* LA DIRECTION DU CONTENEUR « QUI SOMMES-NOUS » ET LE NOMBRE DE COLONNES DE
   LA GALERIE NE SE RÈGLENT PAS ICI : Bricks les écrit en `#brxe-<id>`, soit
   un identifiant, qu'aucune règle de classe ne peut battre — même dans une
   media query. Ils sont posés dans `bricks/poser-accueil.php`, par les clés
   `_direction:tablet_portrait` et `columns:mobile_landscape`, et Bricks émet
   alors ses propres media queries. Une règle écrite ici aurait l'air de
   fonctionner et n'aurait aucun effet. */

@media (max-width: 600px) {
	.bp-acc__direct-grille {
		grid-template-columns: 1fr;
	}

	.bp-acc__horaires-texte {
		font-size: 17px;
	}

	a.bp-acc__bouton,
	button.bp-acc__bouton {
		padding: 13px 28px;
		font-size: 17px;
	}
}

/* --- LES ÉCARTS : LA CAUSE A ÉTÉ TROUVÉE LE 10/11/2026 AU SOIR -----------
   Il y avait ici cinq règles de marges qui compensaient, à la main, des
   `_rowGap` / `_columnGap` réglés dans Bricks et qui « ne s'appliquaient
   pas ». Je l'avais CONSTATÉ trois fois sans jamais chercher pourquoi, et
   chaque constat ajoutait une marge de plus.

   La cause est le FORMAT du réglage. Le pied de page écrit `"48px"` — une
   chaîne — et son `column-gap` sort bien dans le CSS servi. L'accueil
   écrivait `{"unit":"px","number":48}` — un objet — et Bricks n'émet
   RIEN pour cette forme. Les neuf écarts de l'accueil étaient donc morts
   depuis le premier jour, en silence.

   `bricks/ajuster-accueil.php` a converti les neuf. Les marges de
   compensation sont retirées : sans cela elles s'ajouteraient aux écarts et
   doubleraient l'espacement. Le réglage Bricks redevient la seule source de
   vérité — donc modifiable par le musée dans le constructeur, ce qu'une
   marge en CSS ne permettait pas.

   *Un contournement qui marche masque la cause, et le constat qui l'a motivé
   finit par se lire comme une fatalité.* */

/* --- LA GOUTTIÈRE DES PETITS ÉCRANS --------------------------------------
   Mesuré le 10/11 à 500 px : titres, cartes et paragraphes touchaient le bord
   gauche de l'écran, sur TOUTES les sections. Un conteneur Bricks a une
   largeur maximale et se centre ; en dessous de cette largeur il passe pleine
   page, et plus rien ne le retient des bords.

   La règle vise les conteneurs DIRECTEMENT dans une section, jamais tous les
   `.brxe-container` : un conteneur imbriqué recevrait la gouttière une
   seconde fois. L'en-tête a déjà la sienne, au même écart.

   LE SEUIL SE DÉRIVE DE LA LARGEUR DE CONTENU : 1200 + 2 × 24 = 1248 px, depuis
   le passage du conteneur de 1100 à 1200 px le 11/11/2026 (cf.
   bricks/largeur-contenu.php). Il valait 1180 quand le conteneur valait 1100.
   **Ce seuil est à reprendre si la largeur de contenu change** — sinon il reste
   une bande où le texte touche le bord sans que rien ne le signale. */

@media (max-width: 1248px) {
	.brxe-section > .brxe-container {
		padding-left: 24px;
		padding-right: 24px;
	}
}

/* =========================================================================
   INFOS PRATIQUES — gabarit dédié (10/11/2026)
   -------------------------------------------------------------------------
   Posé par `bricks/poser-infos-pratiques.php`. La page a son propre gabarit
   pour deux raisons mesurées, pas par goût : les quatre ancres du menu
   (#horaires, #tarifs, #trouver, #facilites) étaient mortes sous le gabarit
   générique, et `[wpgmza]` s'imprimait en clair faute de WP Google Maps.

   LES ÉCARTS ENTRE COLONNES SE POSENT ICI, PAS DANS BRICKS. `_columnGap` et
   `_rowGap` d'un conteneur Bricks restent sans effet sur ce projet — c'est la
   troisième fois qu'on le constate (accueil, pied de page, ici). En revanche
   la DIRECTION et la LARGEUR se posent bien dans Bricks, par suffixe de point
   de rupture : Bricks écrit `#brxe-<id>` (1,0,0), qu'aucune classe ne bat.
   ========================================================================= */

.bp-ip__duo {
	gap: 24px 56px;
}

.bp-ip__titre {
	margin: 0;
	font-family: Lora, Georgia, serif;
	font-size: 34px;
	font-weight: 600;
	line-height: 1.2;
	color: #25282E;
}

.bp-ip__sous {
	margin: 0 0 14px;
	font-family: Lora, Georgia, serif;
	font-size: 24px;
	font-weight: 600;
	line-height: 1.25;
	color: #25282E;
}

.bp-ip__corps + .bp-ip__corps {
	margin-top: 18px;
}

/* --- les accordéons ------------------------------------------------------ */

/* Bricks rend un `<ul>` d'items ; sans liste à plat les puces du thème
   réapparaissent devant chaque onglet. */
.bp-ip__accordeon {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid #E2E4E7;
}

.bp-ip__accordeon > li {
	list-style: none;
	margin: 0;
	border-bottom: 1px solid #E2E4E7;
}

.bp-ip__accordeon .accordion-title-wrapper {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 18px 2px;
	cursor: pointer;
}

.bp-ip__accordeon .accordion-title-wrapper:focus-visible {
	outline: 2px solid #008D36;
	outline-offset: 2px;
}

.bp-ip__accordeon .accordion-title .title {
	margin: 0;
	font-family: Archivo, system-ui, sans-serif;
	font-size: 19px;
	font-weight: 600;
	line-height: 1.3;
	color: #25282E;
}

/* Le chevron est dessiné en CSS : pas d'icône à charger, et il tourne à
   l'ouverture — c'est le seul repère visuel que l'item est dépliable. */
.bp-ip__accordeon .accordion-title-wrapper::after {
	content: "";
	flex: 0 0 auto;
	width: 9px;
	height: 9px;
	margin-right: 6px;
	border-right: 2px solid #008D36;
	border-bottom: 2px solid #008D36;
	transform: rotate(45deg);
	transform-origin: center;
	transition: transform 0.25s ease;
}

.bp-ip__accordeon .accordion-title-wrapper[aria-expanded="true"]::after {
	transform: rotate(-135deg);
}

.bp-ip__accordeon .accordion-content-wrapper {
	padding: 0 2px 22px;
}

/* LE FONDU PASSE PAR UNE ANIMATION, JAMAIS PAR UNE TRANSITION. Bricks ouvre
   l'accordéon en JavaScript et écrit `transition-property: height, margin,
   padding` EN INLINE sur le contenu (bricks.min.js, bricksAccordionFn) : une
   `transition: opacity` déclarée ici serait écrasée par l'inline, quelle que
   soit sa spécificité. Une `animation`, elle, n'a rien à voir avec
   `transition-property` — elle se joue quand la classe apparaît.

   `brx-open` est posée par Bricks sur l'item au moment où il déplie, et
   retirée dès qu'il replie : le fondu accompagne donc l'OUVERTURE seulement.
   À la fermeture il ne reste que le repli de hauteur — Bricks n'expose aucune
   classe pendant ce repli, et poser l'opacité à 0 sans transition ferait
   disparaître le texte d'un coup avant que la hauteur ne bouge, ce qui serait
   plus brutal que l'état actuel. */
@keyframes bp-ip-fondu {
	from { opacity: 0; transform: translateY(-8px); }
	to   { opacity: 1; transform: none; }
}

.bp-ip__accordeon > li.brx-open > .accordion-content-wrapper {
	/* 300 ms, comme le repli de hauteur réglé sur l'élément Bricks : les deux
	   mouvements se terminent ensemble. */
	animation: bp-ip-fondu 300ms ease-out both;
}

@media (prefers-reduced-motion: reduce) {
	.bp-ip__accordeon > li.brx-open > .accordion-content-wrapper {
		animation: none;
	}

	.bp-ip__accordeon .accordion-title-wrapper::after {
		transition: none;
	}
}

.bp-ip__accordeon .accordion-content-wrapper > *:first-child { margin-top: 0; }
.bp-ip__accordeon .accordion-content-wrapper > *:last-child  { margin-bottom: 0; }

.bp-ip__accordeon .accordion-content-wrapper p {
	margin: 0 0 1em;
	font-size: 17px;
	line-height: 1.6;
	color: #4A4F57;
}

/* Le thème remet les listes à plat, comme sur animalaine.be où l'absence de
   list-style collait les lignes entre elles. */
.bp-ip__accordeon .accordion-content-wrapper ul {
	list-style: disc;
	margin: 0 0 1em;
	padding-left: 1.4em;
}

.bp-ip__accordeon .accordion-content-wrapper li {
	margin-bottom: 0.45em;
	font-size: 17px;
	line-height: 1.55;
	color: #4A4F57;
}

.bp-ip__accordeon .accordion-content-wrapper a {
	color: #008D36;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.bp-ip__accordeon .accordion-content-wrapper a:hover,
.bp-ip__accordeon .accordion-content-wrapper a:focus-visible { color: #25282E; }

/* --- la relance adhésion ------------------------------------------------- */

.bp-ip__relance {
	margin: 28px 0 14px;
	font-family: Archivo, system-ui, sans-serif;
	font-size: 17px;
	line-height: 1.5;
	/* #595F68 sur #F8F8F8 : 6,1:1, conforme à toute taille. Le #777777 de la
	   production ne donnait que 4,0:1 — sous le seuil pour ce corps de texte. */
	color: #595F68;
}

a.bp-ip__bouton,
button.bp-ip__bouton {
	display: inline-block;
	padding: 14px 38px;
	border: 0;
	border-radius: 0;
	font-family: Archivo, system-ui, sans-serif;
	font-size: 17px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0.02em;
	text-decoration: none;
	background-color: #008D36;
	/* Blanc sur #008D36 : 4,32:1. Conforme ici car le texte est en gras à
	   17 px, donc « texte large » au seuil de 3:1 — le même arbitrage que la
	   carte de « Nous soutenir » le 06/11. */
	color: #FFFFFF;
	transition: background-color 0.25s ease;
}

a.bp-ip__bouton:hover,
a.bp-ip__bouton:focus-visible {
	background-color: #00702B;
	color: #FFFFFF;
}

/* --- la carte et les photos ---------------------------------------------- */

.bp-ip__carte { width: 100%; }

.bp-ip__carte .mga-carte {
	display: block;
	width: 100%;
	border-radius: 2px;
	overflow: hidden;
}

/* Une seule photo est servie, et c'est voulu : la seconde (« Cafétéria »)
   porte une règle de visibilité DCE en production, qui ne la sert jamais. En
   pleine largeur elle faisait 800 px de haut — on la borne, sans figer de
   hauteur, pour que la rangée reste juste si le musée en rend une seconde. */
.bp-ip__photos {
	gap: 28px;
	max-width: 760px;
}

.bp-ip__photos img {
	width: 100%;
	height: 100%;
	/* Les photos n'ont pas toutes le même format ; sans rapport imposé, la
	   rangée prendrait la hauteur de la plus haute et l'autre flotterait. */
	aspect-ratio: 3 / 2;
	object-fit: cover;
	display: block;
}

/* La légende reprend celle du widget de production (« Boutique »). */
.bp-ip__photos figcaption {
	margin-top: 10px;
	font-family: Archivo, system-ui, sans-serif;
	font-size: 15px;
	line-height: 1.4;
	color: #595F68;
}

@media (max-width: 781px) {
	.bp-ip__titre { font-size: 28px; }
	.bp-ip__sous  { font-size: 21px; }
	.bp-ip__accordeon .accordion-title .title { font-size: 17px; }
}

/* =========================================================================
   LE BANDEAU DE TITRE — 10/11/2026
   -------------------------------------------------------------------------
   La production coiffe 16 pages sur 39 d'une bande de 300 px : photo en fond,
   voile noir à 40 %, titre en Lora 60 px blanc centré. Repris à l'identique.

   Tout est ici SAUF l'image : elle change à chaque page, donc Bricks l'écrit
   en CSS inline sur `#brxe-<id>` depuis l'image mise en avant. C'est la seule
   chose qui ne peut pas vivre dans une feuille.

   Le voile passe par un `::before` plutôt que par le réglage « superposition »
   de Bricks : une couche de plus à régler dans deux endroits n'apporte rien,
   et le `z-index` du titre se lit mieux ici.
   ========================================================================= */

.bp-bandeau {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 300px;
	padding: 40px 24px;
	/* L'image est posée par Bricks ; ces trois-là la cadrent. */
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
	/* Un fond de repli : si l'image met du temps à arriver, le titre blanc
	   reste lisible au lieu de disparaître sur du blanc. */
	background-color: #25282E;
}

.bp-bandeau::before {
	content: "";
	position: absolute;
	inset: 0;
	background-color: rgba(0, 0, 0, 0.4);
	pointer-events: none;
}

/* LE SÉLECTEUR PORTE DEUX CLASSES, ET CE N'EST PAS DÉCORATIF — il doit battre
   `.brxe-container { width: 1200px }` du Theme Style, à (0,1,0) comme lui.

   TANT QUE LE THEME STYLE N'EXISTAIT PAS, une seule classe suffisait : la
   largeur venait de `frontend-layer.min.css`, qui est **dans un `@layer`**, et
   une règle de couche perd toujours contre une règle hors couche, quel que soit
   l'ordre. Le Theme Style, lui, est émis HORS couche : il est passé à égalité
   de spécificité avec moi, et l'ordre de chargement l'a fait gagner.

   Conséquence mesurée le 11/11 : l'intérieur du bandeau gardait **1200 px de
   large sur un écran de 500**, le titre sortait de 249 px et la page défilait
   horizontalement. Sur les 16 pages à bandeau, pas sur l'accueil — donc
   invisible pour qui ne regarde que la page d'accueil.

   C'est la deuxième fois que l'asymétrie des couches décide d'un rendu ici :
   une règle qui gagnait hier peut perdre demain **sans avoir changé**, parce
   que l'adversaire est né entre-temps. La parade est la spécificité, pas
   l'ordre — que je ne maîtrise pas, l'inline de Bricks arrivant après ma
   feuille. */

.bp-bandeau .bp-bandeau__in {
	position: relative;
	z-index: 1;
	width: 100%;
	/* ALIGNÉE À LA MAIN SUR LA LARGEUR DE CONTENU, et c'est le seul endroit de
	   la feuille qui la recopie : le bandeau est en fond perdu, donc il ne vit
	   pas dans un conteneur de contenu et ne peut pas hériter du Theme Style.
	   Passée de 1100 à 1200 px le 11/11/2026 avec le conteneur — sans cela le
	   titre du bandeau serait resté 100 px plus étroit que tout le reste de la
	   page, c'est-à-dire décalé par rapport au contenu qu'il surplombe.
	   **À reprendre si la largeur de contenu change.** */
	max-width: 1200px;
	margin: 0 auto;
}

.bp-bandeau__titre {
	/* QUATRIÈME FOIS DANS CE PROJET — et cette fois dans mon propre code. Un
	   conteneur Bricks est une colonne flex en `align-items: flex-start` : ce
	   titre se rétrécissait donc à la largeur de son texte, et `text-align:
	   center` n'avait plus de place pour agir. Il sortait collé au bord gauche
	   de la boîte pendant que la production le centrait. Ce qui manquait est la
	   LARGEUR, pas le centrage — le symptôme ne désigne pas la cause. */
	width: 100%;
	margin: 0;
	font-family: Lora, Georgia, serif;
	font-size: 60px;
	font-weight: 500;
	line-height: 1.2;
	text-align: center;
	/* Blanc sur un voile noir à 40 % posé sur une photo : le contraste dépend
	   de la photo, pas d'une couleur fixe — il ne se calcule donc pas. L'ombre
	   portée est là pour cela : elle garantit la lisibilité du titre même sur
	   une zone claire de l'image, ce que le seul voile ne fait pas. */
	color: #FFFFFF;
	text-shadow: 0 1px 14px rgba(0, 0, 0, 0.55);
}

/* PAS DE RÈGLE D'ÉCART SOUS LE BANDEAU, et c'est une mesure. J'en avais posé
   une (`.bp-bandeau + .brxe-section { padding-top: 56px }`) : elle était
   MORTE. Bricks écrit le remplissage de la section suivante en
   `#brxe-bpgsec {padding-top: 70px}` — un identifiant (1,0,0) qu'aucune suite
   de classes ne bat. Quatrième fois que ce projet le paie.

   Et il n'y avait rien à corriger : l'écart mesuré sous le bandeau, 70 px, est
   celui de la production. Une règle qui a l'air de fonctionner est pire qu'une
   absence de règle — celle-ci est donc retirée plutôt que renforcée. */

@media (max-width: 991px) {
	.bp-bandeau {
		min-height: 240px;
	}

	.bp-bandeau__titre {
		font-size: 42px;
	}
}

@media (max-width: 600px) {
	.bp-bandeau {
		min-height: 190px;
		padding: 30px 20px;
	}

	.bp-bandeau__titre {
		font-size: 30px;
	}
}

/* ===========================================================================
   L'ONGLET « GÉRER LE CONSENTEMENT » — EN BAS À GAUCHE
   =========================================================================== */

/* Complianz 7.5.7 n'offre AUCUN réglage de côté pour cet onglet : la position
   est écrite en dur (`right: 40px`) dans la feuille qu'il génère,
   `uploads/complianz/css/banner-1-optin.css`. Ce fichier est REGÉNÉRÉ à chaque
   enregistrement des réglages du bandeau — l'éditer serait donc perdu au
   premier passage, sans prévenir. La surcharge vit ici, dans le thème enfant,
   pour une seconde raison : elle voyage avec le thème à la bascule, là où une
   valeur rangée en base devrait être rejouée sur la production.

   LE SÉLECTEUR PORTE L'IDENTIFIANT *ET* LE NOM DE BALISE (1,1,1) alors que
   celui de Complianz s'arrête à `#cmplz-manage-consent .cmplz-manage-consent`
   (1,1,0). La règle gagne donc quel que soit l'ordre de chargement des deux
   feuilles, sans recourir à `!important` — on ne mise pas sur l'ordre, qui
   n'est pas de notre ressort.

   L'animation de l'onglet ne joue que sur `bottom` (`@keyframes mc_slideIn` /
   `mc_slideOut`, relevés dans la feuille générée) : passer à gauche ne la
   touche pas. Les deux coins inférieurs ont le même arrondi (0), il n'y a donc
   rien à retourner. */
#cmplz-manage-consent button.cmplz-manage-consent {
	right: auto;
	left: 40px;
}

/* ===========================================================================
   LES FICHES D'EXPOSITIONS ET D'ÉVÉNEMENTS — PROPOSITION A, CARTE ENCADRÉE
   =========================================================================== */

/* Choisie par Olivier le 10/11/2026 sur maquette. Avant : une image, puis un
   titre et une date posés dessous, sans boîte — les fiches flottaient sans
   limite visible. Maintenant : une carte blanche encadrée, image affleurante
   en haut, titre en Lora, et la mention « permanent » en pastille verte.

   LA SURCHARGE VIT ICI, PAS DANS LE GREFFON `mga-evenements`, pour deux
   raisons. Le greffon est partagé avec la PRODUCTION : y toucher changerait
   l'allure du site en ligne, ce que personne n'a demandé. Et le thème enfant
   voyage tout seul à la bascule, là où une feuille de greffon devrait être
   poussée séparément.

   Chaque sélecteur est préfixé de `.mga-events-grid` : il gagne ainsi d'une
   classe sur celui du greffon, donc QUEL QUE SOIT l'ordre de chargement des
   deux feuilles — on ne mise pas sur un ordre qui n'est pas de notre ressort,
   et aucun `!important` n'est nécessaire.

   Le périmètre est la grille du raccourci `[mga_events]`, donc les DEUX
   sections de l'accueil (Expositions et Événements) et les grilles d'archives.
   C'est voulu : deux styles de carte sur une même page se verraient. */

/* Cartes de hauteur égale. Sans cela, des titres de longueurs différentes
   donneraient des bas de cartes en escalier — invisible tant qu'il n'y avait
   pas de bord, criant dès qu'on en dessine un. */
.mga-events-grid .mga-event-item {
	display: flex;
}

.mga-events-grid .mga-event-link {
	display: flex;
	flex-direction: column;
	width: 100%;
	background-color: #FFFFFF;
	border: 1px solid #E6E8EA;
	border-radius: 10px;
	overflow: hidden;
	transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

/* LA MÊME CARTE VIT AUSSI DANS LE CORPS D'UNE PAGE, ET LE CORPS LA DÉNATURE.
   Signalé par Olivier le 11/11 : « sur les pages liste, l'affichage des expos
   est différent de celui de l'accueil ». Les deux pages appellent pourtant le
   MÊME shortcode et rendent un balisage identique au caractère près — j'ai
   commencé par chercher une différence de gabarit qui n'existait pas.

   Ce sont les règles de contenu qui débordent. Mesure comparée de la première
   carte, accueil contre `/expositions-a-laffiche/`, deux écarts et deux seuls :

     `.bp-page__corps a`   → `text-decoration: underline` sur `.mga-event-link`.
                             Le soulignement se PROPAGE aux descendants (il est
                             dessiné par la boîte ancêtre) : titre ET date
                             sortaient soulignés, alors qu'aucune règle ne les
                             visait.
     `.bp-page__corps img` → `margin: 1.6em 0` sur l'image, soit 27 px qui la
                             poussaient vers le bas dans son cadre en 3/2 ;
                             l'`overflow: hidden` de la carte rognait le reste.
                             D'où la bande blanche au-dessus de chaque photo.

   On neutralise sur la CARTE, pas sur le corps de page : les règles de contenu
   restent justes pour le texte qui les entoure. Spécificité (0,2,0) et (0,2,1)
   contre (0,1,1) — donc indépendantes de l'ordre des feuilles. */

.mga-events-grid .mga-event-link {
	text-decoration: none;
	color: inherit;
}

.mga-events-grid .mga-event-image img {
	margin: 0;
}

.mga-events-grid .mga-event-link:hover {
	transform: translateY(-4px);
	border-color: #D4D8DC;
	box-shadow: 0 12px 26px rgba(0, 0, 0, .09);
}

/* `focus-visible` plutôt que `focus` : le contour ne s'affiche qu'à la
   navigation au clavier, pas après un clic à la souris. Vert du site (#008D36)
   et non le #009444 du greffon. */
.mga-events-grid .mga-event-link:focus-visible {
	outline: 2px solid #008D36;
	outline-offset: 3px;
}

/* 3/2, le format natif des photos du musée : aucun recadrage. L'arrondi passe
   à la carte, l'image affleure donc le haut sans coin propre. */
.mga-events-grid .mga-event-image {
	aspect-ratio: 3 / 2;
	border-radius: 0;
	flex: 0 0 auto;
}

.mga-events-grid .mga-event-link:hover .mga-event-image img {
	transform: scale(1.04);
}

.mga-events-grid .mga-event-content {
	flex: 1 1 auto;
	padding: 20px 22px 22px;
}

.mga-events-grid .mga-event-title {
	margin: 0 0 12px;
	font-family: Lora, Georgia, serif;
	font-size: 21px;
	font-weight: 500;
	line-height: 1.28;
	color: #1D2327;
}

.mga-events-grid .mga-event-link:hover .mga-event-title {
	color: #00702B;
}

.mga-events-grid .mga-event-dates {
	margin: 0;
	font-family: Archivo, system-ui, sans-serif;
	font-size: 13.5px;
	line-height: 1.5;
	color: #666A72;
}

/* La pastille. Le greffon pose déjà la classe `mga-permanent` sur la ligne de
   date quand l'exposition n'a pas de terme : on l'habille, on n'invente pas de
   balisage. `display: inline-block` est ce qui fait qu'un paragraphe cesse de
   prendre toute la largeur et devient une étiquette. */
.mga-events-grid .mga-event-dates.mga-permanent {
	display: inline-block;
	padding: 4px 10px;
	border-radius: 999px;
	background-color: rgba(0, 141, 54, .10);
	color: #00702B;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .9px;
	text-transform: uppercase;
}

@media (max-width: 600px) {
	.mga-events-grid .mga-event-content {
		padding: 18px 18px 20px;
	}

	.mga-events-grid .mga-event-title {
		font-size: 19px;
	}
}

/* ===========================================================================
   LES RETOUCHES DE L'ACCUEIL — 10/11/2026 au soir
   =========================================================================== */

/* --- « En direct du Musée » : un panneau, pas une bande pleine largeur ----
   La production ne l'a JAMAIS eu pleine largeur : mesuré au navigateur, son
   panneau sombre fait 1 180 px de large, centré, coins arrondis de 5 px, et
   il est composé de trois blocs jointifs. Le fond était ici posé sur la
   SECTION — d'où le bord-à-bord. Il passe sur le conteneur, qui a déjà la
   largeur de contenu. */
.bp-acc__direct {
	padding: 48px 40px 52px;
	border-radius: 5px;
	background-color: #25282E;
}

@media (max-width: 600px) {
	.bp-acc__direct {
		padding: 36px 24px 40px;
	}
}

/* LE PANNEAU EST LUI-MÊME LE CONTENEUR, DONC LA GOUTTIÈRE GÉNÉRALE NE PEUT PAS
   LE RETENIR : le `padding-left/right: 24px` de la règle de gouttière tombe à
   l'INTÉRIEUR du fond sombre, et son propre `padding` en raccourci l'écrase de
   toute façon. Résultat mesuré le 11/11 après le passage à 1200 px : sous
   1248 px le panneau touchait les deux bords de l'écran, coins arrondis
   compris. Ce n'est pas né du passage à 1200 — cela arrivait déjà sous 1100 px —
   mais il remontait la bande de 100 px, et la production garde un retrait à
   toutes les largeurs (son conteneur extérieur porte 10 px).

   On borne donc la LARGEUR au lieu d'ajouter une marge : `.brxe-container` a un
   `width: 1200px` ferme, pas un `max-width`, donc une marge de 24 px l'aurait
   poussé HORS de l'écran entre 1200 et 1248 px au lieu de le rétrécir. Le
   `margin: auto` du conteneur fait le centrage. */

@media (max-width: 1248px) {
	.brxe-section > .bp-acc__direct {
		max-width: calc(100% - 48px);
	}
}

/* --- Fiches d'expo : la date et la pastille à la même hauteur -------------
   Les cartes ont une hauteur égale et leur contenu est aligné en haut : la
   ligne de date était donc la dernière chose avant le bord. Or la pastille
   « PERMANENT » est plus haute que du texte nu (11,5 px + ses marges internes
   contre 13,5 px de ligne) — 5 px d'écart, et le bas des cartes ne tombait
   pas au même endroit. On donne la MÊME hauteur de boîte aux deux, et on y
   centre le contenu : c'est la hauteur qui manquait, pas l'alignement. */
.mga-events-grid .mga-event-dates {
	display: flex;
	align-items: center;
	min-height: 26px;
}

.mga-events-grid .mga-event-dates.mga-permanent {
	display: inline-flex;
	align-items: center;
	min-height: 26px;
	padding: 0 10px;
}

/* --- La galerie, pleine largeur et voile vert au survol -------------------
   Mesure de la production : la grille fait 1 405 px sur 1 425, soit la
   largeur de la page moins 10 px de chaque côté, en six colonnes carrées
   jointives. Le conteneur de la recette la bridait à la largeur de contenu. */
/* `width`, PAS `max-width` : Bricks contraint ses conteneurs par
   `.brxe-container { width: 1100px }`. Ma première règle posait `max-width:
   none` — elle était parfaitement inopérante, et la galerie restait sage dans
   sa colonne. Cinquième règle morte de ce chantier, et toujours la même
   leçon : regarder QUELLE propriété contraint avant d'en écrire une autre.
   Le sélecteur descendant (0,2,0) évite en plus de dépendre de l'ordre de
   chargement des deux feuilles. */
.brxe-section > .bp-acc__galerie-conteneur,
.brxe-section > .bp-galerie__conteneur {
	width: 100%;
	max-width: none;
	padding-left: 10px;
	padding-right: 10px;
}

/* L'effet de survol est celui de la production, relevé dans sa feuille servie
   et repris au pixel : un voile vert à 40 % qui apparaît en 0,3 s. Le vert est
   le sien (#009444), pas celui du reste du site (#008D36) — on reproduit, on
   ne réinterprète pas. */
.bp-acc__galerie a,
.bp-galerie a {
	position: relative;
	display: block;
	overflow: hidden;
}

.bp-acc__galerie a::after,
.bp-galerie a::after {
	content: "";
	position: absolute;
	inset: 0;
	background-color: rgba(0, 148, 68, 0.4);
	opacity: 0;
	transition: opacity 0.3s ease;
	z-index: 10;
	pointer-events: none;
}

.bp-acc__galerie li:hover a::after,
.bp-acc__galerie a:focus-visible::after,
.bp-galerie li:hover a::after,
.bp-galerie a:focus-visible::after {
	opacity: 1;
}

/* --- LE RUBAN : une ligne de cartes qui défile sans fin -------------------
   Mécanisme relevé sur `campagne-boulangerie.be`, le modèle qu'Olivier a
   donné : une piste en `flex` de largeur `max-content`, dupliquée, décalée de
   la moitié de sa largeur. La boucle est donc sans couture et ne demande
   AUCUN JavaScript d'animation — le script ne fait que dupliquer.

   Campagne en a deux lignes, dont une à l'envers ; le musée n'en veut qu'une.

   ÉTAT SANS JAVASCRIPT : la source reste une rangée qu'on fait défiler à la
   main. On perd le mouvement, jamais les cartes. */
.bp-ruban-source {
	display: flex;
	gap: 30px;
	width: 100%;
	overflow-x: auto;
}

.bp-ruban {
	display: block;
	overflow: hidden;
	/* Les bords s'estompent au lieu d'être tranchés net : sans ce masque, une
	   carte coupée au ras du cadre donne l'impression d'un défaut de calcul
	   plutôt que d'un défilement. */
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}

.bp-ruban__rangee {
	display: flex;
	width: max-content;
	animation: bp-ruban-defile 60s linear infinite;
}

/* `focus-within` autant que `hover` : au clavier, un ruban qui continue de
   défiler emporterait le lien que l'on vient d'atteindre. */
.bp-ruban:hover .bp-ruban__rangee,
.bp-ruban:focus-within .bp-ruban__rangee {
	animation-play-state: paused;
}

.bp-ruban__piste {
	display: flex;
	gap: 30px;
	padding-right: 30px;
}

@keyframes bp-ruban-defile {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
	.bp-ruban__rangee {
		animation: none;
	}

	.bp-ruban {
		overflow-x: auto;
		-webkit-mask-image: none;
		mask-image: none;
	}
}

/* --- Les articles en ruban ------------------------------------------------
   Plus d'extrait (l'élément a été retiré du gabarit), et le titre borné à
   DEUX LIGNES. Olivier demandait une limite de caractères : le bornage par
   lignes fait exactement ce qu'il visait, quelle que soit la largeur des
   caractères — « Officiel : Bouli Lanners est l'Ambassadeur… » et « [Projet
   PECA] Cap sur nos trésors… » n'ont pas le même nombre de signes pour une
   même longueur à l'écran. */
.bp-ruban-source .bp-news__carte {
	flex: 0 0 340px;
	width: 340px;
}

/* LE BORNAGE VAUT POUR TOUTES LES CARTES D'ARTICLE, plus seulement le ruban de
   l'accueil (demande d'Olivier du 12/11/2026 pour « Nos News » : « juste
   l'image et le titre limité à deux lignes »). La grille de « Nos News », les
   archives de rubrique et « À lire aussi » sous un article partagent la même
   carte : une seule règle, pour qu'elles ne puissent pas diverger. */
.bp-news__titre {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* --- Les avis des visiteurs ----------------------------------------------
   Cartes du même esprit que les fiches d'expo (fond blanc, bord fin, coins de
   10 px) pour que l'accueil n'ait pas deux vocabulaires de carte. Les étoiles
   sont au jaune de Google (#F4B400) : ce sont ses avis, pas une note maison. */
.bp-avis__carte {
	display: flex;
	flex: 0 0 400px;
	flex-direction: column;
	justify-content: space-between;
	gap: 18px;
	width: 400px;
	margin: 0;
	padding: 26px 30px 28px;
	border: 1px solid #E6E8EA;
	border-radius: 10px;
	background-color: #FFFFFF;
}

.bp-avis__etoiles {
	display: flex;
	gap: 3px;
}

.bp-avis__etoiles svg {
	width: 17px;
	height: 17px;
	fill: #F4B400;
}

.bp-avis__etoiles svg.est-vide {
	fill: none;
	stroke: #F4B400;
	stroke-width: 1.5;
}

.bp-avis__texte {
	margin: 0;
	padding: 0;
	border: 0;
}

.bp-avis__texte p {
	display: -webkit-box;
	-webkit-line-clamp: 5;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin: 0;
	font-family: Lora, Georgia, serif;
	font-size: 17px;
	line-height: 1.45;
	color: #25282E;
}

.bp-avis__auteur {
	font-family: Archivo, system-ui, sans-serif;
	font-size: 13.5px;
	font-weight: 600;
	letter-spacing: 0.2px;
	color: #3C424B;
}

.bp-avis__source {
	font-weight: 400;
	color: #6B7079;
}

@media (max-width: 600px) {
	.bp-avis__carte {
		flex-basis: 300px;
		width: 300px;
		padding: 22px 24px 24px;
	}

	.bp-ruban-source .bp-news__carte {
		flex-basis: 280px;
		width: 280px;
	}
}

/* ===========================================================================
   SUITE DES RETOUCHES — 10/11/2026, seconde passe
   =========================================================================== */

/* --- La date calée EN BAS de la carte ------------------------------------
   Mesuré sur la lame « Événements » : les deux premières cartes ont un titre
   de trois lignes et leur date tombe à 37 px du bord inférieur ; la troisième
   a un titre d'une ligne et sa pastille « PERMANENT » se retrouve à 77 px.
   La ligne de date suivait le titre au lieu d'être calée en bas.

   Ce n'est donc pas une affaire d'alignement de la pastille mais de place de
   la LIGNE : le contenu devient une colonne flex et la date reçoit
   `margin-top: auto`. Elle est alors à la même distance du bord inférieur
   partout, quelle que soit la longueur du titre — et la pastille retombe sur
   la même ligne que les dates voisines. */
.mga-events-grid .mga-event-content {
	display: flex;
	flex-direction: column;
}

.mga-events-grid .mga-event-title {
	/* Le titre pousse, la date reste en bas. */
	flex: 0 0 auto;
}

.mga-events-grid .mga-event-dates {
	margin-top: auto;
}

/* La pastille est un élément en ligne : seule, elle ne se laisserait pas
   pousser par `margin-top: auto` dans une colonne flex — c'est son enveloppe
   qui doit l'être. Elle est elle-même l'enveloppe (le greffon pose la classe
   sur le paragraphe), d'où `align-self` pour qu'elle garde sa largeur de
   contenu sans s'étirer sur toute la ligne. */
.mga-events-grid .mga-event-dates.mga-permanent {
	align-self: flex-start;
}

/* --- Les avis défilent de la gauche vers la droite ------------------------
   `reverse` joue la même animation à l'envers : la piste part de
   `translateX(-50%)` et revient à zéro. Rien d'autre ne change — ni la durée,
   ni la pause au survol, ni le masque des bords. */
.bp-avis .bp-ruban__rangee {
	animation-direction: reverse;
}

/* Le ruban s'arrête pendant la lecture d'un avis. */
.bp-ruban.est-en-pause .bp-ruban__rangee {
	animation-play-state: paused;
}

/* --- « Lire la suite » ----------------------------------------------------
   Le bouton n'est posé que sur les cartes dont le texte est RÉELLEMENT coupé,
   et c'est le script qui le mesure — un seuil en caractères se tromperait. */
.bp-avis__suite {
	align-self: flex-start;
	margin: -6px 0 0;
	padding: 0;
	border: 0;
	background: none;
	font-family: Archivo, system-ui, sans-serif;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.2px;
	color: #00702B;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

.bp-avis__suite:hover,
.bp-avis__suite:focus-visible {
	color: #008D36;
}

/* --- Le dialogue d'un avis entier ----------------------------------------
   Un `<dialog>` natif : la mise au premier plan, le voile, la fermeture par
   Échap et le piège à focus sont le travail du navigateur. Rien de tout cela
   n'est réécrit ici. */
.bp-avis__dialogue {
	max-width: 620px;
	width: calc(100% - 40px);
	padding: 0;
	border: 0;
	border-radius: 12px;
	background-color: #FFFFFF;
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.26);
}

.bp-avis__dialogue::backdrop {
	background-color: rgba(0, 0, 0, 0.55);
}

.bp-avis__dialogue-corps {
	position: relative;
	padding: 30px 34px 32px;
}

.bp-avis__fermer {
	position: absolute;
	top: 12px;
	right: 14px;
	width: 34px;
	height: 34px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: none;
	font-size: 26px;
	line-height: 1;
	color: #6B7079;
	cursor: pointer;
}

.bp-avis__fermer:hover,
.bp-avis__fermer:focus-visible {
	background-color: #F1F2F4;
	color: #25282E;
}

.bp-avis__dialogue-etoiles {
	display: flex;
	gap: 3px;
	margin-bottom: 16px;
}

.bp-avis__dialogue-etoiles svg {
	width: 18px;
	height: 18px;
	fill: #F4B400;
}

.bp-avis__dialogue-etoiles svg.est-vide {
	fill: none;
	stroke: #F4B400;
	stroke-width: 1.5;
}

.bp-avis__dialogue-texte {
	margin: 0 0 18px;
	padding: 0;
	border: 0;
}

/* Pas de bornage ici : c'est tout l'objet du dialogue. */
.bp-avis__dialogue-texte p {
	margin: 0;
	font-family: Lora, Georgia, serif;
	font-size: 18px;
	line-height: 1.5;
	color: #25282E;
}

.bp-avis__dialogue-auteur {
	margin: 0;
	font-family: Archivo, system-ui, sans-serif;
	font-size: 14px;
	font-weight: 600;
	color: #3C424B;
}

/* ===========================================================================
   LA FICHE D'EXPO / D'ÉVÉNEMENT — retouches du 11/11/2026
   ---------------------------------------------------------------------------
   Sept demandes d'Olivier sur `/p/animal-betes-de-musees/`, toutes mesurées
   contre la production avant d'être écrites.
   =========================================================================== */

/* --- 1. « Type de Ticket » : l'étiquette au-dessus, le choix pleine largeur -
   Mesuré : la recette rendait le tableau de variations en deux colonnes de
   170 px (étiquette à gauche, menu à droite) dans une colonne latérale de
   340 ; la production met l'étiquette sur sa propre ligne (347 px) et le menu
   pleine largeur en dessous. C'est le comportement par défaut de WooCommerce,
   que le `display: table-cell` du thème reprenait à son compte. */

.bp-fiche__panier .variations,
.bp-fiche__panier .variations tbody,
.bp-fiche__panier .variations tr {
	display: block;
	width: 100%;
}

.bp-fiche__panier .variations th.label,
.bp-fiche__panier .variations td.value {
	display: block;
	width: 100%;
	padding-left: 0;
	padding-right: 0;
}

.bp-fiche__panier .variations th.label {
	padding-bottom: 6px;
	text-align: left;
}

/* `select` et non `*` : la cellule porte aussi le lien « Effacer », qui doit
   garder sa largeur de contenu. */
.bp-fiche__panier .variations td.value select {
	width: 100%;
	max-width: 100%;
}

/* --- 2. Le bouton d'achat reste pâle tant que le choix n'est pas fait -------
   WooCommerce pose `disabled wc-variation-selection-needed` sur le bouton et
   un `cursor: not-allowed` tant qu'aucune variation n'est choisie — c'est déjà
   le cas sur la production, qui le laisse pourtant en vert plein : rien ne
   distingue à l'œil un bouton actif d'un bouton qui ne fera rien.

   On le rend donc explicitement inactif. PAS par `opacity` : à 0,55 le blanc
   sur vert tombe à 2:1 de contraste, donc illisible. Un fond vert clair avec
   un texte vert foncé reste lisible (≈ 5,5:1) ET se lit comme inactif.

   ET LA DATE COMPTE AUTANT QUE LE TYPE DE TICKET. WooCommerce ne connaît que
   ses variations : il retire `disabled` dès qu'un tarif est choisi, même sans
   date. Or le greffon des événements exige une date — il la contrôle côté
   serveur (`woocommerce_add_to_cart_validation`) et renvoie « Veuillez
   sélectionner une date ». Le bouton avait donc l'air prêt alors qu'il ne
   pouvait qu'échouer.

   On s'accroche à l'état que le greffon publie lui-même : son script pose
   `mga-has-selection` sur le bouton de choix dès qu'une date est prise
   (`date-picker.js`, ligne 128). `:has()` lit cet état sans une ligne de
   JavaScript de plus. **Et il ne s'applique qu'aux fiches QUI ONT un
   sélecteur** : un produit sans date ne porte pas le déclencheur, la règle ne
   le voit pas, le bouton reste vert. */

.bp-fiche__panier .single_add_to_cart_button.disabled,
.bp-fiche__panier .single_add_to_cart_button:disabled,
.bp-fiche__panier:has( .mga-dates-trigger:not( .mga-has-selection ) ) .single_add_to_cart_button {
	background-color: #CDE9D8;
	border-color: #CDE9D8;
	color: #1F6B3C;
	box-shadow: none;
}

.bp-fiche__panier .single_add_to_cart_button.disabled:hover,
.bp-fiche__panier .single_add_to_cart_button:disabled:hover,
.bp-fiche__panier:has( .mga-dates-trigger:not( .mga-has-selection ) ) .single_add_to_cart_button:hover {
	background-color: #CDE9D8;
	border-color: #CDE9D8;
	color: #1F6B3C;
	transform: none;
}

/* --- 3. Les icônes de partage à la taille de la production ------------------
   Mesuré : 25 × 25 px sur la production, 15 × 15 sur la recette. Le pas entre
   deux icônes y est de 55 px ; on reprend la taille, pas le pas, la colonne
   latérale de la recette étant plus étroite. */

.bp-fiche__partage svg,
.bp-fiche__partage img {
	width: 25px;
	height: 25px;
}

.bp-fiche__partage a {
	width: 42px;
	height: 42px;
}

/* --- 4. Les mots mis en couleur par le musée gardent leur couleur ----------
   « Infos pratiques » sort en vert sur la production et en gris foncé sur la
   recette, alors que le contenu est IDENTIQUE au caractère près :
   `<p style="color: #0b8e36;"><strong>Infos pratiques</strong></p>`.

   La couleur est donc posée EN LIGNE sur le paragraphe, et le `<strong>` en
   hérite — sauf ici, où `.bp-page__corps strong { color: #25282E }` la bat :
   une règle sur l'élément gagne toujours contre un héritage, si précis soit
   l'ancêtre. La règle a donc écrasé en silence un choix éditorial du musée,
   sur toutes les fiches.

   On rend l'héritage là où le musée a posé une couleur, et nulle part
   ailleurs : le gras reste #25282E dans le texte courant. */

.bp-page__corps [style*="color"] strong,
.bp-fiche__corps [style*="color"] strong {
	color: inherit;
}

/* --- 6. « Nous rejoindre » : l'itinéraire sur la ligne du nom du lieu -------
   Le shortcode rend la carte, puis l'adresse, puis le lien, chacun en bloc.
   Demande d'Olivier : le lien sur la même ligne que le nom du lieu, calé sur
   le bord droit de la carte. Une grille à deux colonnes y suffit — le lien
   garde sa largeur de contenu, l'adresse prend le reste.

   `align-self: start` et la même marge haute que l'adresse : c'est ce qui le
   met sur la ligne du NOM, pas au milieu du bloc. */

.bp-lieu {
	display: grid;
	grid-template-columns: 1fr auto;
	column-gap: 24px;
}

.bp-lieu__carte {
	grid-column: 1 / -1;
}

.bp-lieu__adresse {
	grid-column: 1;
	min-width: 0;
}

.bp-lieu__lien {
	grid-column: 2;
	align-self: start;
	justify-self: end;
	/* la même marge haute que l'adresse, sinon le lien flotte une ligne trop
	   haut ou trop bas selon la police. */
	margin-top: 1em;
	margin-bottom: 0;
}

/* --- 5 / 7 / 8. Trois rubans de plus sur la fiche --------------------------
   Olivier : les logos partenaires et « Quelques images » sont des glissières
   sur la production, et « Autres Activités » doit prendre le ruban de
   l'accueil. Mesuré sur la production : ce sont des carrousels Swiper, qui
   avancent d'un cran toutes les 5 s — « fais-le en infinite scroll sans pause
   entre les mouvements » demande au contraire un défilement CONTINU.

   On réutilise donc le ruban déjà en service (articles, avis) : une piste
   `flex` dupliquée et décalée de la moitié de sa largeur, sans aucun
   JavaScript d'animation. Trois réglages seulement diffèrent d'un ruban à
   l'autre : la largeur de l'élément, l'écart, et le sens.

   LE SENS SE RÈGLE PAR `animation-direction`, PAS PAR UNE SECONDE ANIMATION :
   `reverse` rejoue la même, donc la boucle reste sans couture et la durée ne
   change pas. */

/* 5. Les logos des partenaires — 150 px comme la production. */
.bp-fiche__logos.bp-ruban-source,
.bp-fiche__logos.bp-ruban {
	gap: 0;
}

.bp-fiche__logos .bp-ruban__piste {
	gap: 38px;
	padding-right: 38px;
	align-items: center;
}

.bp-fiche__logos .bp-ruban__piste > li {
	flex: 0 0 150px;
	width: 150px;
}

.bp-fiche__logos .bp-ruban__piste > li img {
	width: 100%;
	height: auto;
	object-fit: contain;
}

/* 7. « Quelques images » — pleine largeur, 330 × 220 comme la production,
      et de la DROITE vers la GAUCHE (le sens par défaut de l'animation). */
.brxe-section > .bp-fiche__galerie-conteneur {
	width: 100%;
	max-width: none;
	padding-left: 10px;
	padding-right: 10px;
}

/* LE TITRE NE SUIT PAS LA GALERIE DANS SA PLEINE LARGEUR. Vu à la capture :
   « Quelques images... » s'était retrouvé collé au bord gauche de l'écran, à
   10 px, alors que tout le reste de la fiche commence à 112. Le conteneur est
   pleine largeur pour la piste d'images, pas pour le texte qui l'annonce.
   On lui rend donc la largeur de contenu — il se recentre alors exactement
   comme les titres des sections voisines, sans toucher à la galerie.
   (Sur l'accueil le même titre est centré, d'où l'absence du problème là-bas :
   un défaut qui ne se voit que sur l'une des deux surfaces.) */

.bp-fiche__galerie-conteneur > .bp-fiche__st {
	width: 100%;
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
}

.bp-fiche__galerie .bp-ruban__piste {
	gap: 16px;
	padding-right: 16px;
}

.bp-fiche__galerie .bp-ruban__piste > li {
	flex: 0 0 330px;
	width: 330px;
}

.bp-fiche__galerie .bp-ruban__piste > li figure,
.bp-fiche__galerie .bp-ruban__piste > li img {
	width: 100%;
	height: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	border-radius: 5px;
}

/* 8. « Autres Activités » — le ruban de l'accueil, de la GAUCHE vers la
      DROITE, expos et événements mêlés. */
.bp-fiche__autres-ruban .bp-ruban__rangee {
	animation-direction: reverse;
}

.bp-fiche__autres-ruban .mga-event-item {
	flex: 0 0 340px;
	width: 340px;
}

.bp-fiche__autres-ruban .mga-event-title {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}


/* ===========================================================================
   LE MENU : LE CHEVRON CENTRE, ET L ENTREE ACTIVE EN VERT   (11/11/2026)
   =========================================================================== */

/* --- a) le chevron des sous-menus etait 3 px trop bas ---------------------

   ET LA CAUSE EST NOTRE PROPRE SOULIGNEMENT. Le toggle de Bricks est un flex
   en align-items:center (frontend.min.css) : il aligne le centre des BOITES,
   pas celui des glyphes. Or nous ajoutons padding-bottom:6px au <a> pour
   loger le trait ; sa boite grandit donc vers le bas, son texte remonte de
   3 px par rapport au centre de boite -- et le chevron, lui, ne bouge pas.

   Meme famille que le bandeau telephone du 24/10 sur la production, ou un
   <p> a margin-bottom decalait un bloc de 13 px : un conteneur qui centre ne
   voit que des rectangles.

   On ne retire donc pas le padding (il porte le trait) : on donne au bouton
   la meme asymetrie, et les deux contenus se retrouvent decales du meme
   nombre de pixels, donc alignes. */
#brx-header .bricks-nav-menu > li > .brx-submenu-toggle > button {
	padding-bottom: 6px;
}

/* --- b) l entree active d un deroulant ------------------------------------

   WordPress pose deja les classes : current-menu-item sur la page servie,
   current-menu-ancestor et current-menu-parent sur ses parents. Rien ne les
   colorait dans les sous-menus -- le premier niveau, lui, avait son trait
   vert depuis le depart.

   SPECIFICITE, PAS !important. La couleur des liens de sous-menu est posee
   par trois regles concurrentes, dont la colonne sombre des panneaux a
   groupes en (1,4,2). On ajoute .menu-item -- classe que WordPress pose sur
   tous les <li> -- pour atteindre (1,4,2) nous aussi, et c est la position en
   fin de feuille qui tranche. Un !important ici masquerait le jour ou l une
   de ces trois regles change. */
#brx-header .bricks-nav-menu .sub-menu li.menu-item.current-menu-item > a,
#brx-header .bricks-nav-menu .sub-menu li.menu-item.current-menu-item > .brx-submenu-toggle > a,
#brx-header .bricks-nav-menu .sub-menu li.menu-item.current-menu-ancestor > .brx-submenu-toggle > a,
#brx-header .bricks-nav-menu .sub-menu li.menu-item.current-menu-parent > .brx-submenu-toggle > a {
	color: #008D36;
	font-weight: 600;
}

/* La colonne SOMBRE a besoin de sa propre regle : son blanc est pose en
   (1,4,2) par un selecteur qui descend de :nth-child(2), donc a egalite avec
   le bloc ci-dessus -- et il vient AVANT dans la feuille seulement pour les
   liens simples. Sur fond #1B1D1F le vert #008D36 mesure 2,6 pour 1 : trop
   faible pour du texte. On y prend le vert clair du survol deja en service,
   qui est la meme intention visuelle. */
#brx-header .bricks-nav-menu > li > .sub-menu:has(> li.menu-item-has-children) > li:nth-child(2) .sub-menu li.menu-item.current-menu-item > a {
	color: #4CC27A;
	font-weight: 600;
}


/* ===========================================================================
   LA COLONNE DE LECTURE EST CENTREE   (11/11/2026)
   ===========================================================================

   LE DEFAUT : `max-width: 76ch` etait pose SUR CHAQUE PARAGRAPHE, sans
   `margin-inline: auto`. Chaque bloc etait donc bride a ~737 px et colle a
   GAUCHE d un conteneur de 1200 -- la page paraissait decentree, et c est
   l ecart le plus visible avec la production, ou le texte occupe une colonne
   de 795 px CENTREE (mesure a 1440 px : de x=322 a x=1117).

   Brider un bloc sans le centrer, c est choisir une largeur de lecture et
   laisser le navigateur decider du reste. La variable remplace le `76ch`
   parce qu une colonne se regle en pixels quand on la compare a une mise en
   page existante, pas en caracteres.
   =========================================================================== */

.bp-page__corps {
	--bp-colonne: 800px;
}

.bp-page__corps > * {
	max-width: var(--bp-colonne);
}

/* UNE GRILLE D EXPOSITIONS N EST PAS DU TEXTE : ELLE PREND TOUTE LA LARGEUR.
   Trouve le 12/11/2026, signale par Olivier -- les cartes des quatre pages
   d archives (`/expositions-a-laffiche/` et les trois autres) faisaient 247 px
   quand celles de l accueil en font 380. La largeur de contenu etait pourtant
   la meme des deux cotes : 1200 px, mesure. Ce qui differe, c est le CHEMIN --
   sur l accueil la grille est un element Bricks pose dans la page, ici elle
   traverse le corps de page generique, donc la colonne de LECTURE de 800 px.

   Une colonne de lecture sert a ne pas faire courir l oeil sur toute la largeur
   d un paragraphe ; elle n a aucune raison de brider une grille de vignettes --
   pas plus que les groupes d images, qui en sortent deja. Le texte
   d introduction des memes pages, lui, la garde.

   `:has()` vise le bloc QUI CONTIENT la grille, et non la grille elle-meme :
   c est l enfant direct du corps de page qui porte le `max-width`, donc c est
   lui qu il faut liberer. Deux formes, selon que le convertisseur a laisse une
   colonne autour ou non. */
.bp-page__corps > .mga-events-grid,
.bp-page__corps > *:has(> .mga-events-grid) {
	max-width: none;
}

/* ET IL FAUT CETTE SECONDE REGLE, SINON LE CENTRAGE NE PREND PAS.
   Six regles de ce fichier posent la marge en RACCOURCI -- `margin: 0 0 1.2em`
   pour les paragraphes, `margin: 1.8em 0 0.6em` pour les titres, etc. Un
   raccourci ecrit les QUATRE cotes : il remet donc `margin-left` et
   `margin-right` a zero, et il le fait depuis une specificite (0,1,1) que
   `.bp-page__corps > *` (0,1,0) ne bat pas. Premier essai : les images se sont
   mises en grille, et le texte est reste colle a gauche.

   On enumere donc les elements pour atteindre (0,1,1) nous aussi, et c'est la
   position en fin de feuille qui tranche. Modifier les six raccourcis serait
   l'autre voie ; celle-ci laisse les regles de rythme vertical intactes, la ou
   elles se lisent. */
.bp-page__corps > p,
.bp-page__corps > ul,
.bp-page__corps > ol,
.bp-page__corps > h2,
.bp-page__corps > h3,
.bp-page__corps > h4,
.bp-page__corps > blockquote,
.bp-page__corps > table,
.bp-page__corps > figure,
.bp-page__corps > img,
.bp-page__corps > div {
	margin-left: auto;
	margin-right: auto;
}

/* --- la mise en page reprise d Elementor ----------------------------------

   CE QUI A CHANGE LE 11/11/2026 AU SOIR, ET POURQUOI.
   Les regles qui vivaient ici rattrapaient l APLATISSEMENT d Elementor : un
   paragraphe qui portait plusieurs images etait traite comme un groupe, faute
   de mieux. C etait une rustine sur un symptome. La vraie structure -- rangees,
   colonnes, largeurs, fonds, encadres, boutons -- n avait jamais quitte
   `_elementor_data` ; c est l aplati qui la jette. `convertir-pages-elementor.php`
   la lit et produit le HTML qui suit. Les rustines sont donc retirees : du CSS
   qui a l air de fonctionner est pire qu une absence de regle.

   Une rangee, une grille ou une bande de fond SORT de la colonne de lecture :
   ce ne sont pas du texte. */
.bp-page__corps .bp-el-row,
.bp-page__corps .bp-el-grid,
.bp-page__corps .bp-el-bande,
.bp-page__corps .bp-el-gal {
	max-width: none;
}

/* `nowrap`, ET CE N EST PAS UN DETAIL DE STYLE.
   Les largeurs qu Elementor pose ne font pas toujours 100 % : la rangee de
   `/groupe-scolaire/` declare 43,5 % et 66,7 %, soit 110. En `wrap`, la
   seconde colonne passe a la ligne -- le bouton se retrouve au-dessus de
   l encadre au lieu d etre a cote, exactement ce que la production ne fait
   pas. Elementor est en `nowrap` : les colonnes se compriment alors
   proportionnellement, et la ligne tient. Le passage en colonne est traite
   plus bas, par point de rupture, la ou il se decide vraiment. */
.bp-el-row {
	display: flex;
	flex-wrap: nowrap;
	gap: 32px;
	align-items: flex-start;
	margin: 0 0 2em;
}

/* UNE RANGEE DE WIDGETS EST UNE LIGNE, UNE RANGEE DE CONTENEURS EST DES
   COLONNES. Le titre « Desirez-vous reserver ? » et son bouton sont deux
   widgets dans la meme rangee : ils se lisent cote a cote, centres l un sur
   l autre. Une rangee image | texte, elle, part du haut. Le convertisseur
   distingue les deux et pose `--ligne` sur la premiere. */
.bp-el-row--ligne {
	align-items: center;
	gap: 24px;
}

/* ET LES MARGES VERTICALES DES ENFANTS SONT ANNULEES, sinon le centrage porte
   sur des boites asymetriques : le <h2> « Desirez-vous reserver ? » a une marge
   basse, donc sa boite descend plus bas que son texte, et le bouton -- qui n en
   a pas -- se retrouve PLUS HAUT que le titre qu il accompagne. Quatrieme fois
   que ce parc paie le centrage d une boite asymetrique, apres le <p> du bandeau
   telephone (24/10), les cartes de l accueil (10/11) et le chevron des
   sous-menus (11/11). `align-items: center` aligne des BOITES. */
.bp-page__corps .bp-el-row--ligne > h2,
.bp-page__corps .bp-el-row--ligne > h3,
.bp-page__corps .bp-el-row--ligne > h4,
.bp-page__corps .bp-el-row--ligne > p,
.bp-page__corps .bp-el-row--ligne > div,
.bp-el-row--ligne > * {
	margin-top: 0;
	margin-bottom: 0;
}

.bp-el-col {
	min-width: 0;
}

/* DES CARTES DE MEME HAUTEUR, ET SEULEMENT LA OU IL Y EN A.
   `align-items: flex-start` sur la rangee laissait chaque carte a sa hauteur
   de contenu : un titre sur deux lignes et la carte voisine finissait 29 px
   plus haut, bas de carte en escalier. Les trois boites (`--carte`, `--cote`,
   l encadre `--note`) declarent deja `height: 100%` -- regle morte tant que
   leur colonne ne s etire pas.
   Le `:has()` borne l effet aux rangees qui portent vraiment une boite : une
   rangee de texte garde son alignement en haut. */
.bp-el-row:has(> .bp-el-col > .bp-el-box),
.bp-el-row:has(> .bp-el-col > .bp-el-note) {
	align-items: stretch;
}

.bp-el-col:has(> .bp-el-box),
.bp-el-col:has(> .bp-el-note) {
	display: flex;
	flex-direction: column;
}

.bp-el-col > .bp-el-box,
.bp-el-col > .bp-el-note {
	flex: 1 1 auto;
}

/* wpautop laisse parfois un paragraphe vide entre deux raccourcis : dans une
   grille il occuperait une case et decalerait la rangee. */
.bp-el-grid > p:empty,
.bp-el-row > p:empty { display: none; }

/* LES MARGES DES ENFANTS D UNE CASE DECALENT LA CASE, et c est ce qui mettait
   le bouton 31 px au-dessus de son titre sur `/groupe-dadultes/` (production :
   0). `align-items: center` aligne des BOITES : le <h2> porte une marge haute
   de 1,8em et basse de 0,6em, le <p> du bouton une marge basse -- chaque case
   se centre donc sur une boite asymetrique. Cinquieme fois que ce parc paie ce
   meme centrage, apres le bandeau telephone, les cartes de l accueil, le
   chevron des sous-menus et les rangees `--ligne`. */
.bp-el-grid > .bp-el-cell > :first-child { margin-top: 0; }
.bp-el-grid > .bp-el-cell > :last-child { margin-bottom: 0; }

.bp-el-grid {
	display: grid;
	gap: 24px;
	margin: 0 0 2em;
	align-items: start;
}

/* Plus d air AU-DESSUS du titre qu en dessous : la bande de titre est suivie,
   sans marge, de la rangee de cartes et de ses 80 px de gris. Un espacement
   symetrique collait le titre au bord superieur du panneau. */
.bp-el-bande {
	padding: 64px 32px 32px;
	margin: 0 0 2em;
}

/* Les marges du premier et du dernier enfant sortiraient de l espacement de la
   bande et la feraient respirer deux fois : la bande de titre mesurait 188 px
   la ou la production en fait 108. */
.bp-el-bande > :first-child { margin-top: 0; }
.bp-el-bande > :last-child { margin-bottom: 0; }

/* --- LE FOND PERDU, SANS TOUCHER A LA GEOMETRIE --------------------------

   La production etale ses bandes grises d un bord a l autre de la fenetre
   (x=0, 1424 px) ; nos conteneurs Bricks sont fermes a 1200.

   DEUX VOIES ONT ETE ECARTEES, chacune pour une raison mesuree :
   - `margin-inline: calc(50% - 50vw)` : `100vw` INCLUT la barre de
     defilement (1440 contre 1424 de zone utile), et `overflow-x` vaut
     `visible` sur `html` comme sur `body` -- on gagnerait une barre
     horizontale sur tout le site ;
   - `container-type: inline-size` sur `.brxe-section` pour obtenir `100cqw` :
     exact, mais le confinement s appliquerait a toutes les sections du
     gabarit.

   La voie retenue ne deplace RIEN : un `box-shadow` sans flou ni decalage,
   d un etalement de 100vmax, peint la couleur tout autour de la boite. Un
   box-shadow n entre pas dans la zone de defilement -- donc aucune barre
   horizontale, mesure `scrollWidth == clientWidth`. Le `clip-path` le borne
   en haut et en bas pour qu il ne deborde pas sur les blocs voisins ; les
   -100vmax lateraux le laissent filer.

   La couleur vient de `--bp-fond`, posee en ligne par le convertisseur a cote
   du `background`. Sans elle le repli est `transparent` : une rangee sans fond
   ne recoit donc rien. */
.bp-page__corps .bp-el-row,
.bp-page__corps .bp-el-grid,
.bp-page__corps .bp-el-bande {
	box-shadow: 0 0 0 100vmax var(--bp-fond, transparent);
	clip-path: inset(0 -100vmax);
}

/* LES FILETS LATERAUX, EUX, SONT RETIRES PAR LE CONVERTISSEUR et non ici :
   un style en ligne bat tout selecteur, il aurait fallu un `!important`.
   Premiere version de cette regle : (0,2,0) contre un `border-width` en ligne
   -- elle avait l air de fonctionner et ne gagnait jamais. */
/* Sur telephone, une rangee passe en colonne : les largeurs en pourcentage
   posees par Elementor y donneraient des colonnes de 150 px. */
@media (max-width: 780px) {
	.bp-el-row { flex-wrap: wrap; }
	.bp-el-row > .bp-el-col { flex: 1 1 100% !important; }
	.bp-el-grid { grid-template-columns: 1fr !important; }
	.bp-el-row--ligne { flex-direction: column; align-items: flex-start; }
}

/* --- image-box : la carte, et le bloc cote a cote -------------------------

   UN SEUL WIDGET, DEUX MISES EN PAGE, et c est son reglage `position` qui
   tranche : absent, l image est au-dessus du texte (les quatre outils de
   `/visiteur-individuel-ou-en-famille/`) ; a `left`, elle est a cote (le logo
   ACCESS-i de `/visiteur-a-besoins-specifiques/`). Les valeurs de la carte --
   fond blanc, filet #EEE, 26 px sous l image, titre Lora 24 -- sont celles du
   widget en production, relevees et non choisies. */
.bp-el-box--carte {
	background: #fff;
	border: 1px solid #EEEEEE;
	padding-bottom: 30px;
	height: 100%;
}

.bp-el-box--carte .bp-el-box__i { margin-bottom: 26px; }

/* LE TEXTE DE LA CARTE EST CENTRE, et ce n est pas un choix : c est le defaut
   du widget `image-box` d Elementor quand l image est au-dessus. Aucune des
   quatre cartes de `/visiteur-individuel-ou-en-famille/` ne declare
   `text_align` -- la production les centre quand meme. Le bloc `--cote`, lui,
   garde son texte a gauche : son image est a cote, pas au-dessus. */
.bp-el-box--carte .bp-el-box__c {
	padding: 0 24px;
	text-align: center;
}

.bp-page__corps .bp-el-box--carte .bp-el-box__d p { text-align: center; }

.bp-el-box--cote {
	display: flex;
	gap: 24px;
	align-items: center;
}

.bp-el-box--cote .bp-el-box__i { flex: 0 0 140px; }

/* ET SA MARGE EST REMISE A ZERO -- c est le « bord au-dessus des photos »
   signale le 11/11. Il n y a jamais eu de filet en trop : le filet de la carte
   est bien celui de la production (1 px #EEE sur les quatre cotes, releve sur
   `.elementor-widget-container`). Ce qui le faisait lire comme une ligne
   flottante, c est que `.bp-page__corps img { margin: 1.6em 0 }` poussait la
   photo 28 px plus bas, laissant une bande blanche entre le filet et l image.
   En production l image touche le filet (mesure : `img.y` = 0 dans la carte,
   28 dans la recette). */
.bp-el-box img {
	display: block;
	width: 100%;
	height: auto;
}

.bp-page__corps .bp-el-box img,
.bp-el-box .bp-el-box__i img {
	margin: 0;
}

.bp-el-box__t {
	font-family: 'Lora', Georgia, serif;
	font-size: 24px;
	font-weight: 400;
	margin: 0 0 16px;
}

.bp-el-box__d > :last-child,
.bp-el-note__d > :last-child { margin-bottom: 0; }

/* --- icon-box : l encadre -------------------------------------------------

   Le rond vert et le glyphe viennent des reglages du widget (#D2D2D2,
   #008000, 30 px). L icone est rendue EN TEXTE et non par Font Awesome, que
   la recette ne charge pas : une police absente afficherait un carre vide, et
   le convertisseur refuse plutot une icone qu il ne sait pas ecrire. */
.bp-el-note {
	display: flex;
	gap: 20px;
	align-items: center;
	background: #D2D2D2;
	padding: 30px;
	height: 100%;
}

.bp-el-note__i {
	flex: 0 0 60px;
	height: 60px;
	border-radius: 50%;
	background: #008000;
	color: #fff;
	display: grid;
	place-items: center;
	font-size: 30px;
	line-height: 1;
}

.bp-el-note__t {
	font-size: 30px;
	line-height: 1.1;
	margin: 0 0 12px;
}

/* --- bouton ---------------------------------------------------------------
   Le vert est celui du site (--e-global-color-primary), pas celui du theme
   Astra de la production. */
/* LE PARAGRAPHE DU BOUTON EST UN FLEX, PAS UN BLOC DE TEXTE.
   Un <a> en `inline-block` repose sur la LIGNE DE BASE de son paragraphe :
   l espace reserve aux jambages sous la ligne grossit sa boite vers le bas, et
   son texte remonte de 31 px (mesure du 11/11) par rapport au titre qu il
   accompagne. En flex il n y a plus de ligne de base, donc plus de decalage.
   Les marges sont a zero parce que la rangee les annule deja : les garder ici
   rendrait l annulation dependante de l ordre de la feuille. */
.bp-el-btn-l {
	margin: 0;
	display: flex;
	flex-wrap: wrap;
}

/* Le reglage `align` du widget bouton. `.bp-el-btn-l` est un flex : c est
   `justify-content` qui place le bouton, un `text-align` n y ferait rien. */
.bp-el-btn-l--center { justify-content: center; }
.bp-el-btn-l--right { justify-content: flex-end; }

/* LE SELECTEUR PORTE LE NOM DE BALISE, ET C EST CE QUI LE FAIT GAGNER.
   Premier essai : `.bp-el-btn { color:#fff }` en (0,1,0), battu par
   `.bp-page__corps a` en (0,2,0) -- le bouton sortait VERT SUR VERT, un
   rectangle plein sans texte lisible, et la feuille avait pourtant l air
   juste. Mesure du style calcule : `color` et `background` tous deux a
   rgb(0,141,54). `a.bp-el-btn` precede du corps monte a (0,2,1) et tranche
   quel que soit l ordre. */
.bp-page__corps a.bp-el-btn,
a.bp-el-btn {
	display: inline-block;
	background: #008D36;
	color: #fff;
	padding: 14px 28px;
	text-decoration: none;
	font-weight: 600;
	border-radius: 2px;
	transition: background .2s ease;
}

.bp-page__corps a.bp-el-btn:hover,
.bp-page__corps a.bp-el-btn:focus,
a.bp-el-btn:hover,
a.bp-el-btn:focus {
	background: #00702B;
	color: #fff;
	text-decoration: none;
}

/* --- images, galerie, visionneuse ----------------------------------------

   La visionneuse est le PhotoSwipe QUE BRICKS EMBARQUE DEJA : le convertisseur
   pose la classe `bricks-lightbox` et les attributs `data-pswp-*` qu il attend,
   et `bp-mga-visionneuse.php` enfile ses scripts. On n ajoute pas une seconde
   bibliotheque la ou le theme en a une. */
.bp-el-fig { margin: 0 0 1.6em; }
.bp-el-fig img { display: block; width: 100%; height: auto; }
.bp-el-fig--center { margin-left: auto; margin-right: auto; }

.bp-el-gal {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 16px;
	margin: 0 0 2em;
}

.bp-el-gal a { display: block; }
.bp-el-gal img { display: block; width: 100%; height: auto; }

/* Le rapport vient du reglage du widget (`aspect_ratio: 1:1`) : sans lui, les
   quatre photos de l anniversaire melangent paysage et portrait et la rangee
   part en escalier. */
.bp-el-gal--r1-1 img { aspect-ratio: 1 / 1; object-fit: cover; }
.bp-el-gal--r4-3 img { aspect-ratio: 4 / 3; object-fit: cover; }
.bp-el-gal--r3-2 img { aspect-ratio: 3 / 2; object-fit: cover; }
.bp-el-gal--r16-9 img { aspect-ratio: 16 / 9; object-fit: cover; }

a.bricks-lightbox { cursor: zoom-in; }

.bp-el-hr {
	border: 0;
	border-top: 1px solid #D9DBDE;
	margin: 2.4em 0;
}

.bp-el-center { text-align: center; }

/* Dans une LIGNE, un titre reste au fil du texte : le centrer dans sa propre
   colonne l eloignerait du bouton qu il accompagne. */
.bp-el-row--ligne > .bp-el-center { text-align: left; }
.bp-el-right { text-align: right; }

/* --- la justification, comme en production --------------------------------

   Mesure du 11/11 sur `/les-musees-valises/` en production : les paragraphes
   des blocs de texte y sont en `justify` ; le bandeau d horaires de l en-tete,
   lui, reste en `start`. On ne justifie donc QUE le corps de page, et pas les
   titres, ni les listes, ni les legendes -- justifier une liste de trois mots
   etire les espaces sans rien gagner. */
.bp-page__corps p,
.bp-el-box__d p,
.bp-el-note__d p {
	text-align: justify;
}

/* Une URL ecrite en toutes lettres ne se coupe pas : justifiee, elle laisse
   un trou dans la ligne precedente. Le report reste prefere a la cesure. */
.bp-page__corps p:has(> a[href]:only-child) { text-align: left; }

/* Une image SEULE garde la largeur de la colonne, comme en production, ou
   elle va de 322 a 1117 -- soit exactement celle du texte. */
.bp-page__corps img {
	max-width: 100%;
	height: auto;
}

/* ==========================================================================
   Les formulaires Gravity Forms aux couleurs du site — 11/11/2026
   ==========================================================================

   LE THEME « orbital » DE GRAVITY FORMS EST PILOTE PAR VARIABLES, et c est le
   levier propre : tout en derive, sans lutte de specificite. Le bleu #204ce5
   que le site servait n etait pas un reglage du musee, c est la valeur D USINE
   du theme -- `chvbconseils.be` avait exactement le meme en octobre.

   `--gf-color-primary-rgb` N EST PAS FACULTATIVE : c est elle qui colore le
   halo de focus. L oublier laisse un halo bleu sur un bouton vert, et le
   defaut ne se voit qu au clavier. */
/* LES COULEURS NE SONT PAS POSEES ICI, MAIS PAR `bp-mga-formulaires-couleurs.php`.
   Gravity Forms ecrit un <style> par formulaire avec un selecteur a IDENTIFIANT
   -- `#gform_wrapper_2[data-form-index="0"].gform-theme`, soit (1,2,0) -- qu une
   feuille de classes ne bat pas, et dont l identifiant change d un formulaire a
   l autre. Des variables posees ici coloraient le bouton et laissaient le HALO
   DE FOCUS au bleu d usine. Le filtre `gform_default_styles` passe par la
   palette de l editeur, donc toutes les variables derivees suivent.
   Ne reste ici que la TYPOGRAPHIE du bouton, que la palette ne porte pas. */

/* LE BOUTON D ENVOI PREND LA MEME FORME QUE CEUX DU SITE.
   Il sortait en 14 px / 500 et 16 px de remplissage lateral, la ou
   `.bp-el-btn` est en 17 px / 600 et 14/28 : deux boutons d allure differente
   sur la meme page. Les variables ne portent pas la typographie, d ou ces
   quelques declarations.

   `!important` sur trois proprietes SEULEMENT, et pour une raison mesurable :
   deux des feuilles de la page sont cross-origin, donc `sh.cssRules` y leve
   une exception et un inventaire des regles les saute EN SILENCE -- on ne peut
   pas prouver qu aucune ne s y oppose. Meme constat que sur chvbconseils. */
.gform_wrapper.gform-theme .gform_footer input.gform_button,
.gform_wrapper.gform-theme .gform_footer button.gform_button,
.gform_wrapper.gform-theme .gform_page_footer input.gform_button,
.gform_wrapper.gform-theme .gform_page_footer button.gform_button,
.gform_wrapper.gform-theme .gform_footer input[type="submit"],
.gform_wrapper.gform-theme .gform_footer button[type="submit"],
.gform_wrapper.gform-theme .gform_page_footer input[type="submit"],
.gform_wrapper.gform-theme .gform_page_footer button[type="submit"] {
	background-color: #008D36;
	border-color: #008D36;
	color: #FFFFFF;
	font-size: 17px !important;
	font-weight: 600 !important;
	padding: 14px 28px !important;
	height: auto !important;
	border-radius: 2px;
	transition: background-color .2s ease;
}

.gform_wrapper.gform-theme .gform_footer input[type="submit"]:hover,
.gform_wrapper.gform-theme .gform_footer button[type="submit"]:hover,
.gform_wrapper.gform-theme .gform_footer input[type="submit"]:focus,
.gform_wrapper.gform-theme .gform_footer button[type="submit"]:focus,
.gform_wrapper.gform-theme .gform_page_footer input[type="submit"]:hover,
.gform_wrapper.gform-theme .gform_page_footer button[type="submit"]:hover {
	background-color: #00702B;
	border-color: #00702B;
	color: #FFFFFF;
}

/* ── Titre à tracé dessiné (animated-headline « highlight ») — 12/11/2026 ───────────── */

/*
 * La géométrie est celle d'Elementor, au pixel près : le SVG déborde de 20 px du texte marqué,
 * centré dessus, et le tracé se dessine par `stroke-dasharray` de `0 1500` à `1500 1500`.
 * `preserveAspectRatio="none"` écrase le dessin à la forme du texte — c'est ce qui donne au
 * cercle sa forme de boucle allongée plutôt qu'un rond.
 *
 * LA BOUCLE EST EN CSS, SANS SCRIPT. Elementor rejoue le tracé toutes les 8 s par JavaScript,
 * et attend d'arriver à l'écran pour le premier. Ici le cycle de 9 s tourne en continu : le
 * visiteur voit donc un tracé dans les 9 s qui suivent son arrivée sur le bloc, mais pas
 * forcément à la seconde où il le découvre. C'est le troc pour n'avoir aucun script à tenir.
 *
 * Le trait suit la couleur du texte marqué. Elementor, lui, code `stroke:red` en dur et
 * n'expose aucun réglage : le rouge de la production n'a jamais été un choix du musée.
 * Pour le retrouver : `--bp-marque-trait: red` sur le titre.
 */
/*
 * LA TAILLE N'EST PAS CELLE DU NIVEAU DE TITRE, et c'est une correction, pas une
 * reproduction. Elementor rend ce widget en `h3` mais le dessine a 43 px : sur la production
 * c'est le plus gros texte du bloc. Reprendre le `h3` sans sa taille le faisait sortir a
 * 26 px, donc PLUS PETIT que les h2 voisins a 34 — l'emphase a l'envers. On lui donne le rang
 * visuel d'un titre principal, sans importer le 43 px d'Elementor : l'echelle reste celle de
 * la refonte. Effet de bord voulu : le titre repasse sur deux lignes, comme en production.
 */
/*
 * ET L'INTERLIGNE DOIT LAISSER PASSER LE TRACÉ. Le SVG déborde de 10 px au-dessus du texte
 * marqué (c'est la géométrie d'Elementor, `calc(100% + 20px)`), et à l'interligne des titres
 * — 1,25 — les deux lignes se touchent : le trait montait dans la ligne du dessus. Mesuré le
 * 12/11 : chevauchement de 10 px exactement. On desserre l'interligne de ce seul titre.
 */
.bp-page__corps h3.bp-el-marque { font-size: 34px; line-height: 1.75; }

.bp-el-marque__h {
    display: inline-block;
    position: relative;
    color: var(--bp-marque-texte, #008D36);
}
.bp-el-marque__m {
    position: relative;
    z-index: 1;
}
.bp-el-marque__t {
    position: absolute;
    top: 50%;
    left: 50%;
    width: calc(100% + 20px);
    height: calc(100% + 20px);
    transform: translate(-50%, -50%);
    overflow: visible;
    pointer-events: none;
}
.bp-el-marque__t path {
    fill: none;
    stroke: var(--bp-marque-trait, var(--bp-marque-texte, #008D36));
    stroke-width: 9;
    stroke-dasharray: 0 1500;
    animation: bp-marque-trace 9s linear infinite;
}
/* Les marqueurs à deux tracés (x, double, double_underline) : le second part à la moitié du
   dessin, comme chez Elementor. */
.bp-el-marque__t path:nth-of-type(2) { animation-delay: .6s; }

@keyframes bp-marque-trace {
    0%             { opacity: 1; stroke-dasharray: 0 1500; }
    13.3%, 95.5%   { opacity: 1; stroke-dasharray: 1500 1500; }
    100%           { opacity: 0; filter: blur(10px); stroke-dasharray: 1500 1500; }
}

/* Le tracé est une décoration : qui demande moins d'animation le voit dessiné, à l'arrêt. */
@media (prefers-reduced-motion: reduce) {
    .bp-el-marque__t path { animation: none; stroke-dasharray: 1500 1500; }
}

/* ── Les cartes (conteneurs à largeur, arrondi ou ombre) — 12/11/2026 ──────────────── */

/*
 * UNE CARTE N'EST PAS UNE BANDE. `.bp-el-bande` est un panneau de section : il porte un
 * remplissage de 64/32/32, une marge basse, et son fond est étalé jusqu'aux bords de la
 * fenêtre. Appliqué à la carte de don de /nous-soutenir/ — 700 px, coins ronds, ombre — cela
 * effaçait exactement ce qui en fait une carte : sa barre verte sortait pleine page, son
 * encart aussi, et le tout se lisait comme une pile de bandes.
 *
 * Ici : aucun remplissage par défaut (il vient des réglages), aucun fond perdu, et l'écart
 * entre les enfants vient du `gap` qu'Elementor déclare, repris en `--bp-gap`. Les marges des
 * enfants sont remises à zéro pour que cet écart soit la SEULE source d'espacement — sinon la
 * marge d'un `<h2>` s'ajouterait au gap et la carte ne ressemblerait plus à la production.
 */
.bp-page__corps .bp-el-carte { margin: 0 0 2em; }
/* Une carte dans une carte se cale sur l'écart du parent, pas sur une marge à elle. */
.bp-page__corps .bp-el-carte .bp-el-carte { margin: 0; }
.bp-page__corps .bp-el-carte:last-child { margin-bottom: 0; }

.bp-page__corps .bp-el-carte > * { margin-top: 0; margin-bottom: 0; }
.bp-page__corps .bp-el-carte > * + * { margin-top: var(--bp-gap, 1.2em); }

/*
 * `.bp-el-center` PERDAIT CONTRE LA JUSTIFICATION DU CORPS DE PAGE. La refonte justifie les
 * paragraphes (`.bp-page__corps p`, 0-1-1) ; `.bp-el-center` est à 0-1-0 et ne gagnait donc
 * jamais sur un `<p>` — la pastille et la phrase d'introduction de /nous-soutenir/ sortaient
 * justifiées à gauche. Mesuré : `text-align` calculé à `justify` sur un élément portant la
 * classe. On monte à 0-2-0, et le témoin inverse est que les titres, eux, n'ont jamais été
 * touchés (la règle de justification ne vise que `p`).
 */
.bp-page__corps .bp-el-center { text-align: center; }
.bp-page__corps .bp-el-right { text-align: right; }
/* Et les paragraphes QU'ELLE CONTIENT : l'héritage ne suffit pas, le `<p>` porte sa propre
   justification, qui gagne sur une valeur héritée quelle que soit la spécificité du parent. */
.bp-page__corps .bp-el-center p,
.bp-page__corps .bp-el-center li { text-align: center; }
.bp-page__corps .bp-el-right p { text-align: right; }

/* =========================================================================
 * LE MEGA-MENU DE LA BOUTIQUE — 12/11/2026, forme de skeditions.fr
 *
 * Rendu par le mu-plugin `bp-mga-boutique-menu.php` ([mga_boutique_menu]),
 * script `assets/js/boutique-menu.js`. Modele : la capture du 12/11 a 12:55
 * — un bouton, un panneau a trois colonnes a en-tete, des entrees a deux
 * lignes, des intertitres en petites capitales, une barre pleine largeur.
 *
 * UN SEUL MECANISME : LE CLIC. La version du matin ouvrait au survol
 * au-dessus de 860 px et a l'appui en dessous, donc un seuil a tenir
 * identique entre cette feuille et le script — deux valeurs differentes
 * donnent un panneau qu'on ouvre sans pouvoir le refermer. Il n'y a plus de
 * seuil de comportement ici, seulement un seuil de MISE EN PAGE.
 *
 * LE PANNEAU EST HORS FLUX AU-DESSUS DE 860 px ET DANS LE FLUX EN DESSOUS.
 * Hors flux il recouvre la grille, ce qui est le propre d'un menu ; dans le
 * flux sur un telephone, parce que trois colonnes empilees en position
 * absolue deborderaient de l'ecran.
 *
 * `text-decoration: none` est pose sur DEUX classes (0-2-0) : si la boutique
 * passe un jour par `.bp-page__corps`, sa regle `a { text-decoration:
 * underline }` (0-1-1) soulignerait les libelles ET, par propagation, les
 * titres des couvertures.
 * ========================================================================= */
.mga-bmenu {
	position: relative;
	margin: 0 0 1.6em;
}

/* --- le bouton ------------------------------------------------------------ */
.mga-bmenu .mga-bmenu__appel {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 11px 18px;
	border: 1px solid rgba(0, 141, 54, .22);
	border-radius: 10px;
	background: rgba(0, 141, 54, .07);
	color: #25282E;
	font-family: inherit;
	font-size: 15.5px;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	transition: background-color .18s ease, border-color .18s ease;
}

.mga-bmenu .mga-bmenu__appel:hover,
.mga-bmenu.est-ouvert .mga-bmenu__appel {
	background: rgba(0, 141, 54, .13);
	border-color: rgba(0, 141, 54, .38);
}

.mga-bmenu .mga-bmenu__appel svg {
	width: 18px;
	height: 18px;
	flex: 0 0 auto;
	color: #00702B;
}

.mga-bmenu .mga-bmenu__appel svg:last-child {
	width: 14px;
	height: 14px;
	transition: transform .2s ease;
}

.mga-bmenu.est-ouvert .mga-bmenu__appel svg:last-child { transform: rotate(180deg); }

/* --- le panneau ----------------------------------------------------------- */

/* L'attribut `hidden` vaut `display: none` dans la feuille du navigateur, donc
   n'importe quelle declaration d'auteur le bat. Piege deja paye le 07/11 sur
   le bandeau du client rattache de la caisse : la regle explicite est
   obligatoire des qu'on touche au `display` de l'element ou de ses parents. */
.mga-bmenu .mga-bmenu__panneau[hidden] { display: none; }

.mga-bmenu .mga-bmenu__panneau {
	position: absolute;
	top: calc(100% + 10px);
	left: 0;
	z-index: 60;
	width: min(1100px, 100%);
	max-height: min(72vh, 660px);
	overflow: auto;
	background: #fff;
	border: 1px solid #E4E7E1;
	border-radius: 16px;
	box-shadow: 0 26px 64px -22px rgba(0, 0, 0, .3);
}

.mga-bmenu .mga-bmenu__colonnes {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	padding: 26px 28px 22px;
	gap: 0;
}

.mga-bmenu .mga-bmenu__col { padding: 0 24px; }
.mga-bmenu .mga-bmenu__col:first-child { padding-left: 0; }
.mga-bmenu .mga-bmenu__col:last-child { padding-right: 0; }
.mga-bmenu .mga-bmenu__col + .mga-bmenu__col { border-left: 1px solid #EDF0EB; }

/* --- l'en-tete d'une colonne ---------------------------------------------- */
.mga-bmenu .mga-bmenu__tete {
	display: flex;
	align-items: center;
	gap: 13px;
	padding-bottom: 15px;
	margin-bottom: 13px;
	border-bottom: 1px solid #EDF0EB;
}

.mga-bmenu .mga-bmenu__pastille {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: 42px;
	height: 42px;
	border-radius: 12px;
	background: rgba(0, 141, 54, .1);
	color: #00702B;
}

.mga-bmenu .mga-bmenu__pastille svg {
	width: 21px;
	height: 21px;
}

.mga-bmenu .mga-bmenu__intitule {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.mga-bmenu .mga-bmenu__intitule strong {
	font-size: 17px;
	font-weight: 600;
	color: #25282E;
	line-height: 1.25;
}

.mga-bmenu .mga-bmenu__intitule small {
	font-size: 13.5px;
	color: #6B7280;
	line-height: 1.3;
}

/* --- les entrees ---------------------------------------------------------- */
.mga-bmenu .mga-bmenu__liste {
	list-style: none;
	margin: 0;
	padding: 0;
}

.mga-bmenu .mga-bmenu__liste li { margin: 0; }

.mga-bmenu .mga-bmenu__lien {
	display: block;
	padding: 8px 10px;
	border-radius: 8px;
	text-decoration: none;
	transition: background-color .15s ease;
}

.mga-bmenu .mga-bmenu__lien strong {
	display: block;
	font-size: 15.5px;
	font-weight: 600;
	color: #25282E;
	line-height: 1.3;
	transition: color .15s ease;
}

.mga-bmenu .mga-bmenu__lien small {
	display: block;
	margin-top: 1px;
	font-size: 13.5px;
	color: #6B7280;
	line-height: 1.35;
}

.mga-bmenu .mga-bmenu__lien:hover,
.mga-bmenu .mga-bmenu__lien:focus-visible { background: #F3F7F3; }
.mga-bmenu .mga-bmenu__lien:hover strong,
.mga-bmenu .mga-bmenu__lien:focus-visible strong { color: #00702B; }

.mga-bmenu .mga-bmenu__lien--courant strong { color: #00702B; }

.mga-bmenu .mga-bmenu__intertitre {
	margin: 15px 0 4px;
	padding: 0 10px;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #9AA3AE;
}

/* --- la colonne des ventes ------------------------------------------------ */
.mga-bmenu .mga-bmenu__ventes {
	display: grid;
	gap: 6px;
}

.mga-bmenu .mga-bmenu__vente {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 7px 10px;
	border-radius: 10px;
	text-decoration: none;
	transition: background-color .15s ease;
}

.mga-bmenu .mga-bmenu__vente:hover { background: #F3F7F3; }

.mga-bmenu .mga-bmenu__image {
	flex: 0 0 auto;
	width: 44px;
}

.mga-bmenu .mga-bmenu__image img {
	display: block;
	width: 44px;
	height: 62px;
	object-fit: cover;
	border-radius: 4px;
	background: #F6F7F8;
}

.mga-bmenu .mga-bmenu__texte {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.mga-bmenu .mga-bmenu__texte strong {
	font-size: 14.5px;
	font-weight: 600;
	color: #25282E;
	line-height: 1.3;
}

.mga-bmenu .mga-bmenu__texte small,
.mga-bmenu .mga-bmenu__texte .woocommerce-Price-amount {
	font-size: 14px;
	color: #00702B;
	font-weight: 600;
}

.mga-bmenu .mga-bmenu__suite {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin-top: 12px;
	padding: 0 10px;
	font-size: 14.5px;
	font-weight: 600;
	color: #00702B;
	text-decoration: none;
}

.mga-bmenu .mga-bmenu__suite svg {
	width: 16px;
	height: 16px;
	transition: transform .18s ease;
}

.mga-bmenu .mga-bmenu__suite:hover svg { transform: translateX(3px); }

/* --- la barre du bas ------------------------------------------------------ */
.mga-bmenu .mga-bmenu__pied {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 16px 28px;
	background: #F6F8F5;
	border-top: 1px solid #EDF0EB;
}

.mga-bmenu .mga-bmenu__pastille--pied {
	width: 38px;
	height: 38px;
	background: #fff;
	border: 1px solid #E4E7E1;
}

.mga-bmenu .mga-bmenu__pastille--pied svg {
	width: 19px;
	height: 19px;
}

.mga-bmenu .mga-bmenu__pied .mga-bmenu__suite {
	margin: 0 0 0 auto;
	padding: 0;
	flex: 0 0 auto;
}

/* --- LE MODE COLONNE : le menu dans la barre de gauche -------------------
 *
 * C'est la disposition par defaut depuis le 12/11 au soir. Le menu n'est plus
 * un panneau flottant au-dessus de la grille mais la navigation de la colonne,
 * la ou le modele la place : des groupes encadres, toujours visibles, qui
 * s'empilent au-dessus des filtres.
 *
 * CES REGLES VIENNENT APRES LES REGLES DE BASE, ET C'EST OBLIGATOIRE :
 * `.mga-bmenu--colonne .mga-bmenu__panneau` et `.mga-bmenu .mga-bmenu__panneau`
 * pesent toutes deux 0-2-0, donc c'est l'ORDRE qui tranche, pas la
 * specificite. Les deplacer plus haut rendrait le panneau flottant a nouveau.
 * ------------------------------------------------------------------------- */
.mga-bmenu--colonne { margin: 0 0 18px; }

.mga-bmenu--colonne .mga-bmenu__panneau {
	position: static;
	width: auto;
	max-height: none;
	overflow: visible;
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

.mga-bmenu--colonne .mga-bmenu__colonnes {
	grid-template-columns: minmax(0, 1fr);
	gap: 14px;
	padding: 0;
}

/* Chaque colonne devient un groupe encadre, comme « Genres » ou « Format »
   dans la barre de gauche du modele. */
.mga-bmenu--colonne .mga-bmenu__col {
	padding: 16px 18px;
	border: 1px solid #E4E7E1;
	border-radius: 12px;
	background: #fff;
}

.mga-bmenu--colonne .mga-bmenu__col + .mga-bmenu__col {
	border-left: 1px solid #E4E7E1;
	margin-top: 0;
	padding-top: 16px;
}

/* LA PREMIERE ET LA DERNIERE COLONNE N'AVAIENT PAS LE MEME RETRAIT QUE LES
   AUTRES, et l'icone du catalogue touchait le bord du cadre.

   Les regles de base ".mga-bmenu .mga-bmenu__col:first-child {padding-left: 0}"
   et son pendant ":last-child" pesent 0-2-1, c'est-a-dire PLUS que le "padding"
   du mode colonne (0-2-0) : elles gagnaient malgre l'ordre. En panneau elles
   sont justes -- les colonnes y sont separees par des filets et collees aux
   bords de la carte ; en colonne chaque groupe est une carte a lui, donc il lui
   faut ses quatre cotes. Il faut la meme specificite pour les reprendre. */
.mga-bmenu--colonne .mga-bmenu__col:first-child,
.mga-bmenu--colonne .mga-bmenu__col:last-child {
	padding-left: 18px;
	padding-right: 18px;
}

/* L'en-tete se resserre : 340 px de large, pas 347 px de colonne de panneau. */
.mga-bmenu--colonne .mga-bmenu__tete {
	gap: 11px;
	padding-bottom: 12px;
	margin-bottom: 10px;
}

.mga-bmenu--colonne .mga-bmenu__pastille {
	width: 34px;
	height: 34px;
	border-radius: 10px;
}

.mga-bmenu--colonne .mga-bmenu__pastille svg {
	width: 18px;
	height: 18px;
}

.mga-bmenu--colonne .mga-bmenu__intitule strong { font-size: 15.5px; }
.mga-bmenu--colonne .mga-bmenu__intitule small { font-size: 12.5px; }

.mga-bmenu--colonne .mga-bmenu__lien { padding: 7px 8px; }
.mga-bmenu--colonne .mga-bmenu__lien strong { font-size: 14.5px; }
.mga-bmenu--colonne .mga-bmenu__lien small { font-size: 12.5px; }
.mga-bmenu--colonne .mga-bmenu__intertitre { margin: 12px 0 3px; padding: 0 8px; }

.mga-bmenu--colonne .mga-bmenu__vente { padding: 6px 8px; gap: 10px; }
.mga-bmenu--colonne .mga-bmenu__image { width: 46px; }
.mga-bmenu--colonne .mga-bmenu__image img { width: 46px; height: 46px; object-fit: contain; }
.mga-bmenu--colonne .mga-bmenu__texte strong { font-size: 13.5px; }
.mga-bmenu--colonne .mga-bmenu__suite { margin-top: 10px; padding: 0 8px; font-size: 13.5px; }

/* La barre d'information devient le dernier groupe de la colonne. */
.mga-bmenu--colonne .mga-bmenu__pied {
	flex-wrap: wrap;
	gap: 11px;
	margin-top: 14px;
	padding: 16px 18px;
	border: 1px solid #E4E7E1;
	border-radius: 12px;
	background: #F6F8F5;
}

.mga-bmenu--colonne .mga-bmenu__pied .mga-bmenu__suite {
	margin: 0;
	padding: 0;
	width: 100%;
}

/* --- LE MODE MEGAMENU : sous l'entree « Shop » du menu principal ---------
 *
 * C'est la place demandee, et c'est celle du modele : le panneau s'ouvre AU
 * SURVOL de l'entree de menu, pas depuis la page. L'ouverture, le
 * positionnement et la largeur sont le travail de Bricks (reglages `megaMenu`
 * de l'element nav-menu + gabarit attache a l'entree de menu) ; nous ne
 * fournissons que le contenu et son habillage.
 *
 * CES REGLES VIENNENT APRES LE MODE COLONNE, pour la meme raison que lui :
 * `.mga-bmenu--mega .mga-bmenu__panneau` pese 0-2-0 comme `.mga-bmenu
 * .mga-bmenu__panneau`, donc c'est l'ORDRE qui tranche.
 * ------------------------------------------------------------------------- */
.mga-bmenu--mega { margin: 0; }

.mga-bmenu--mega .mga-bmenu__panneau {
	position: static;
	width: 100%;
	max-height: min(76vh, 680px);
	box-shadow: 0 18px 44px -20px rgba(0, 0, 0, .35);
}

/* Bricks fournit le cadre `.brx-megamenu` (absolu, largeur et position donnees
   par `megaMenuSelector`, fondu par `opacity`). On le laisse TRANSPARENT : la
   carte blanche, c'est notre panneau. */
#brx-header .bricks-nav-menu > .brx-has-megamenu > .brx-megamenu {
	background: none;
	border: 0;
	padding: 0;

	/* LE FOND QUI FONCE EST UNE OMBRE, PAS UN ELEMENT -- la technique du fond
	   perdu deja employee sur les bandeaux de l'accueil. Une ombre sans flou ni
	   decalage peint la couleur tout autour de la boite, SOUS le contenu de
	   l'element, et surtout : UNE OMBRE N'ENTRE PAS DANS LA ZONE DE DEFILEMENT,
	   donc pas de barre horizontale malgre les 100vmax.

	   Elle n'a besoin d'AUCUNE transition propre : Bricks fait deja passer
	   `.brx-megamenu` de `opacity: 0` a `1` en 0,2 s, et l'opacite porte sur
	   l'element entier, ombre comprise. Le fond fonce donc en meme temps que le
	   panneau se deroule. */
	box-shadow: 0 0 0 100vmax rgba(17, 19, 22, .45);

	/* ET IL NE DOIT PAS REMONTER SUR L'EN-TETE. Sans ce decoupage, l'ombre
	   s'etend aussi vers le haut et assombrit la barre de navigation et le
	   bandeau de coordonnees -- alors que sur le modele l'en-tete reste clair.
	   `inset(0 ...)` coupe exactement au bord HAUT de l'element, c'est-a-dire
	   juste sous le menu ; les trois autres cotes filent. */
	clip-path: inset(0 -100vmax -100vmax -100vmax);
}

/* Le chevron que Bricks ajoute a l'entree porteuse d'un mega-menu : il doit
   tourner comme ceux des autres entrees du menu. */
#brx-header .bricks-nav-menu > .brx-has-megamenu.open > .brx-submenu-toggle button svg,
#brx-header .bricks-nav-menu > .brx-has-megamenu.open > .brx-submenu-toggle svg {
	transform: rotate(180deg);
}

/* --- en dessous de 860 px : une colonne, dans le flux ---------------------
 *
 * CETTE REQUETE MEDIA VIENT APRES LE MODE COLONNE DANS LA FEUILLE, donc elle le
 * bat a specificite egale -- et elle remettait les groupes de la barre de
 * gauche a `padding: 0` sur telephone, l'icone du catalogue collee au bord.
 * Le `:not(.mga-bmenu--colonne)` ne vise donc que les dispositions ou les
 * colonnes sont CELLES D'UN PANNEAU, separees par des filets et collees aux
 * bords de la carte. En mode colonne chaque groupe est une carte a lui : il
 * garde ses quatre cotes, quelle que soit la largeur.
 * ------------------------------------------------------------------------- */
@media (max-width: 859px) {
	.mga-bmenu .mga-bmenu__appel { width: 100%; justify-content: flex-start; }
	.mga-bmenu .mga-bmenu__appel svg:last-child { margin-left: auto; }

	.mga-bmenu:not(.mga-bmenu--colonne) .mga-bmenu__panneau {
		position: static;
		width: 100%;
		max-height: none;
		margin-top: 10px;
	}

	.mga-bmenu .mga-bmenu__colonnes {
		grid-template-columns: minmax(0, 1fr);
	}

	.mga-bmenu:not(.mga-bmenu--colonne) .mga-bmenu__colonnes {
		padding: 20px;
	}

	.mga-bmenu:not(.mga-bmenu--colonne) .mga-bmenu__col {
		padding: 0;
	}

	.mga-bmenu:not(.mga-bmenu--colonne) .mga-bmenu__col + .mga-bmenu__col {
		border-left: 0;
		border-top: 1px solid #EDF0EB;
		margin-top: 18px;
		padding-top: 18px;
	}

	.mga-bmenu:not(.mga-bmenu--colonne) .mga-bmenu__pied {
		flex-wrap: wrap;
		padding: 16px 20px;
	}

	.mga-bmenu .mga-bmenu__pied .mga-bmenu__suite {
		margin: 4px 0 0;
		width: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mga-bmenu .mga-bmenu__appel,
	.mga-bmenu .mga-bmenu__appel svg,
	.mga-bmenu .mga-bmenu__lien,
	.mga-bmenu .mga-bmenu__lien strong,
	.mga-bmenu .mga-bmenu__vente,
	.mga-bmenu .mga-bmenu__suite svg { transition: none; }
}

/* =========================================================================
 * LE PANIER EN POPUP — 12/11/2026
 *
 * Module `bp-mga-panier-popup.php`, script `assets/js/panier-popup.js`.
 * Modele : skeditions.fr, dont on reprend le mecanisme (fragments
 * WooCommerce) et non la presentation.
 *
 * UN TIROIR A DROITE, PAS UNE BOITE CENTREE : le visiteur vient d'ajouter un
 * article, il doit pouvoir refermer et continuer a parcourir la boutique. Un
 * modal centre coupe la page ; un tiroir la laisse visible derriere.
 * ========================================================================= */
.mga-pop[hidden] { display: none; }

.mga-pop {
	position: fixed;
	inset: 0;
	z-index: 10000;
}

.mga-pop__voile {
	position: absolute;
	inset: 0;
	background: rgba(37, 40, 46, .45);
	animation: mga-pop-voile .2s ease;
}

.mga-pop__boite {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	display: flex;
	flex-direction: column;
	width: min(420px, 100vw);
	background: #fff;
	box-shadow: -18px 0 42px -18px rgba(0, 0, 0, .4);
	animation: mga-pop-tiroir .22s ease;
}

@keyframes mga-pop-voile { from { opacity: 0; } to { opacity: 1; } }
@keyframes mga-pop-tiroir { from { transform: translateX(100%); } to { transform: none; } }

@media (prefers-reduced-motion: reduce) {
	.mga-pop__voile, .mga-pop__boite { animation: none; }
}

/* Le defilement de la page est bloque pendant que le tiroir est ouvert :
   sinon le fond defile sous le doigt au lieu de la liste du panier. */
html.mga-pop-ouvert { overflow: hidden; }

.mga-pop__fermer {
	position: absolute;
	top: 14px;
	right: 14px;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #F6F7F8;
	color: #25282E;
	cursor: pointer;
}
.mga-pop__fermer:hover, .mga-pop__fermer:focus-visible { background: #E4E7E1; }

.mga-pop__contenu {
	display: flex;
	flex-direction: column;
	flex: 1;
	min-height: 0;
}
.mga-pop.est-occupe .mga-pop__contenu { opacity: .55; pointer-events: none; }

.mga-pop__titre {
	margin: 0;
	padding: 22px 64px 16px 24px;
	font-family: Lora, Georgia, serif;
	font-size: 22px;
	line-height: 1.25;
	color: #25282E;
	border-bottom: 1px solid #E4E7E1;
}
.mga-pop__titre span {
	display: block;
	margin-top: 2px;
	font-family: Archivo, sans-serif;
	font-size: 13px;
	font-weight: 500;
	color: #5A6069;
}

.mga-pop__vide { margin: 0; padding: 20px 24px; font-family: Archivo, sans-serif; color: #5A6069; }

/* `min-height: 0` : sans lui, un enfant en `flex` refuse de retrecir sous la
   taille de son contenu et la liste deborde au lieu de defiler. */
.mga-pop__lignes {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	margin: 0;
	padding: 8px 24px;
	list-style: none;
}

.mga-pop__ligne {
	display: grid;
	grid-template-columns: 62px 1fr auto;
	gap: 14px;
	padding: 16px 0;
	border-bottom: 1px solid #F0F1F2;
}
.mga-pop__ligne:last-child { border-bottom: 0; }

.mga-pop__image img {
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 4;
	object-fit: contain;
	background: #F6F7F8;
	border-radius: 4px;
	display: block;
}

.mga-pop__nom {
	font-family: Archivo, sans-serif;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
}
.mga-pop .mga-pop__nom a { color: #25282E; text-decoration: none; }
.mga-pop .mga-pop__nom a:hover { color: #00702B; }

/* La date du billet, et tout ce que le panier porte en plus. WooCommerce la
   rend en <dl> : on l'aplatit, un tableau de definitions dans un tiroir de
   420 px serait illisible. */
.mga-pop__extra, .mga-pop__extra dl, .mga-pop__extra p {
	margin: 4px 0 0;
	font-family: Archivo, sans-serif;
	font-size: 12px;
	line-height: 1.4;
	color: #5A6069;
}
.mga-pop__extra dt, .mga-pop__extra dd { display: inline; margin: 0; }
.mga-pop__extra dt::after { content: " : "; }
.mga-pop__extra dd + dt::before { content: "\A"; white-space: pre; }

.mga-pop__actions { display: flex; align-items: center; gap: 12px; margin-top: 8px; }

.mga-pop__qte { display: inline-flex; align-items: center; border: 1px solid #E4E7E1; border-radius: 999px; }
.mga-pop__qte button {
	width: 26px;
	height: 26px;
	padding: 0;
	border: 0;
	background: none;
	color: #25282E;
	font-size: 15px;
	line-height: 1;
	cursor: pointer;
}
/* LE « − » ET LE « + » ETAIENT COLLES AU BORD GAUCHE DE LEUR CASE. Signale par Olivier le
   12/11, capture a l'appui. Mesure : case de 26 px, glyphe de 10 px pose a x = 0 de la case --
   le bouton herite d'un `text-align: start` et s'affiche en `block`, donc rien ne centrait le
   signe. La pilule paraissait bancale : « − » contre le bord, « + » contre le chiffre. Le
   centrage est fait par la boite (flex), pas par le texte : il ne depend plus de la police. */
.mga-pop__qte button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	min-width: 0;
	text-align: center;
}

.mga-pop__qte button[disabled] { opacity: .35; cursor: default; }
.mga-pop__qte span { min-width: 20px; text-align: center; font-family: Archivo, sans-serif; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }

.mga-pop .mga-pop__retirer {
	padding: 0;
	border: 0;
	background: none;
	font-family: Archivo, sans-serif;
	font-size: 12px;
	color: #5A6069;
	text-decoration: underline;
	cursor: pointer;
}
.mga-pop .mga-pop__retirer:hover { color: #B4232A; }

.mga-pop__prix { font-family: Archivo, sans-serif; font-size: 14px; font-weight: 600; white-space: nowrap; }

.mga-pop__total {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	padding: 16px 24px 4px;
	font-family: Archivo, sans-serif;
	font-size: 15px;
	border-top: 1px solid #E4E7E1;
}
.mga-pop__total strong { font-size: 19px; }

.mga-pop__pied { display: grid; gap: 10px; padding: 14px 24px 24px; }

.mga-pop .mga-pop__bouton {
	display: block;
	padding: 14px 18px;
	border: 1px solid #00702B;
	border-radius: 8px;
	background: #00702B;
	font-family: Archivo, sans-serif;
	font-size: 16px;
	font-weight: 600;
	color: #fff;
	text-align: center;
	text-decoration: none;
}
.mga-pop .mga-pop__bouton:hover, .mga-pop .mga-pop__bouton:focus-visible { background: #005A22; border-color: #005A22; color: #fff; }
.mga-pop .mga-pop__bouton--clair { background: #fff; color: #00702B; }
.mga-pop .mga-pop__bouton--clair:hover, .mga-pop .mga-pop__bouton--clair:focus-visible { background: #F1F8F3; color: #00702B; border-color: #00702B; }

/* Le message d'un ajout refuse (billet sans date, rupture de stock) : il est
   insere AVANT le formulaire de la fiche, pas dans le tiroir — le tiroir ne
   s'ouvre pas quand l'ajout n'a pas eu lieu. */
.mga-pop-erreur {
	margin: 0 0 12px;
	padding: 10px 14px;
	border-left: 4px solid #B4232A;
	background: #FDF3F3;
	font-family: Archivo, sans-serif;
	font-size: 14px;
	color: #8E1B21;
}

/* Le bouton d'appel, pour l'en-tete. */
.mga-pop__appel {
	position: relative;
	display: inline-grid;
	place-items: center;
	width: 42px;
	height: 42px;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	cursor: pointer;
}
.mga-pop__nb {
	position: absolute;
	top: 2px;
	right: 0;
	min-width: 18px;
	height: 18px;
	padding: 0 4px;
	border-radius: 999px;
	background: #00702B;
	font-family: Archivo, sans-serif;
	font-size: 11px;
	font-weight: 700;
	line-height: 18px;
	color: #fff;
	text-align: center;
}
.mga-pop__nb.est-vide { display: none; }

/* Le bouton du panier dans la barre de menu (`poser-panier-entete.php`). Un
   element `shortcode` de Bricks est un BLOC : sans cette regle il prend toute
   la largeur restante, et sous 1180 px — ou le conteneur passe en `wrap` — il
   tombe sous le menu. Mesure : 460 px de large a 1440, 452 a 500. */
#brx-header .mga-panier-entete {
	flex: 0 0 auto;
	width: auto;
}

/* L'ICONE DE CONNEXION, a gauche du panier (`[mga_compte_bouton]`, module
   bp-mga-parcours.php). Les deux raccourcis vivent dans LE MEME element de la
   barre : le conteneur est en `space-between`, un troisieme enfant se serait
   retrouve au milieu, entre le menu et le panier. L'element devient donc une
   petite rangee. Meme gabarit que le bouton du panier (42 x 42), pour que les
   deux icones s'alignent sans reglage. */
#brx-header .mga-panier-entete {
	display: flex;
	align-items: center;
	gap: 4px;
}

.mga-compte__appel {
	position: relative;
	display: inline-grid;
	place-items: center;
	width: 42px;
	height: 42px;
	color: inherit;
	text-decoration: none;
	transition: color .2s ease;
}

.mga-compte__appel:hover,
.mga-compte__appel:focus-visible { color: #00702B; }

.mga-compte__appel.est-connecte::after {
	content: "";
	position: absolute;
	top: 7px;
	right: 7px;
	width: 9px;
	height: 9px;
	border: 2px solid #fff;
	border-radius: 50%;
	background: #008D36;
}

/* =========================================================================
 * LES BOUTONS DE LA BOUTIQUE — 12/11/2026
 *
 * Demande d'Olivier : « mets les boutons au vert ». Ils etaient au GRIS DE
 * DEFAUT de WooCommerce (#E4E7E9, texte #363636, police systeme) partout :
 * grille, fiche produit, page panier. Ce n'etait pas un choix du musee, c'est
 * l'absence de style.
 *
 * LE FOND EST #00702B, PAS LE VERT DE MARQUE #008D36. Blanc sur #008D36
 * mesure 4,32 pour 1, sous les 4,5 exiges pour du texte de 15 px ; le vert
 * fonce en mesure 6,2. C'est le meme choix que le tiroir du panier et que la
 * barre du mega-menu -- un seul vert d'action sur toute la boutique.
 *
 * SPECIFICITE : deux classes au moins, et `text-decoration: none` explicite.
 * La page panier est rendue dans le gabarit generique, donc sous
 * `.bp-page__corps a` (0-1-1) qui souligne les liens ET propage le
 * soulignement a ses descendants.
 * ========================================================================= */
.woocommerce .button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.bp-page__corps .woocommerce a.button,
.woocommerce .single_add_to_cart_button,
.woocommerce .checkout-button {
	display: inline-block;
	padding: 12px 18px;
	border: 1px solid #00702B;
	border-radius: 8px;
	background: #00702B;
	font-family: Archivo, sans-serif;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	color: #fff;
	text-align: center;
	text-decoration: none;
	transition: background-color .18s ease, border-color .18s ease;
}

.woocommerce .button:hover,
.woocommerce .button:focus-visible,
.woocommerce a.button:hover,
.woocommerce a.button:focus-visible,
.woocommerce button.button:hover,
.woocommerce .single_add_to_cart_button:hover,
.woocommerce .checkout-button:hover {
	background: #005A22;
	border-color: #005A22;
	color: #fff;
}

/* Les boutons SECONDAIRES : « Retour a la boutique » et le « Voir le panier »
   que WooCommerce ajoute apres un ajout en AJAX. Le tiroir rend ce dernier
   presque inutile, mais il reste rendu : au vert plein il entrerait en
   concurrence avec « Ajouter au panier » juste au-dessus. */
/* LA SPECIFICITE SE MESURE, ELLE NE SE SUPPOSE PAS. Ces deux-la sortaient en
   VERT PLEIN sur la page panier : le selecteur principal
   `.bp-page__corps .woocommerce a.button` porte un nom de balise (0-3-1) et
   battait `.woocommerce .button.wc-backward` (0-3-0). On ajoute donc la meme
   forme ici. */
.woocommerce .button.wc-backward,
.woocommerce a.added_to_cart,
.bp-page__corps .woocommerce a.button.wc-backward,
.bp-page__corps .woocommerce a.added_to_cart {
	display: inline-block;
	margin-top: 8px;
	padding: 10px 16px;
	border: 1px solid #00702B;
	border-radius: 8px;
	background: #fff;
	font-family: Archivo, sans-serif;
	font-size: 14px;
	font-weight: 600;
	color: #00702B;
	text-decoration: none;
}
.woocommerce .button.wc-backward:hover,
.woocommerce a.added_to_cart:hover,
.woocommerce a.added_to_cart:focus-visible,
.bp-page__corps .woocommerce a.button.wc-backward:hover,
.bp-page__corps .woocommerce a.added_to_cart:hover {
	background: #F1F8F3;
	color: #00702B;
	border-color: #00702B;
}

/* Un bouton en cours d'ajout : WooCommerce lui pose `loading`. Sans cela il
   ne se passe rien de visible entre le clic et l'ouverture du tiroir. */
.woocommerce .button.loading { opacity: .72; }

/* Un produit en rupture ou sans prix sort « Lire la suite » : c'est un lien de
   lecture, pas une action d'achat. */
.woocommerce .button.product_type_grouped,
.woocommerce .button.product_type_external { background: #00702B; }

@media (prefers-reduced-motion: reduce) {
	.woocommerce .button { transition: none; }
}

/* =========================================================================
 * LA BOUTIQUE : colonne de filtres a gauche, grille a droite — 12/11/2026
 *
 * Mise en page relevee sur `skeditions.fr/nos-romances/` : conteneur en
 * `grid-template-columns: 340px 980px`, `gap: 40px`. Ici la largeur de
 * contenu est 1200 : 340 + 40 + 820.
 *
 * `display: grid` est pose par un REGLAGE Bricks (`_display`), qui ecrit
 * `#brxe-bpbrow { display: grid }` -- un selecteur d'identifiant qu'aucune
 * classe ne bat. Les colonnes et l'ecart, eux, ne sont pas ecrits par Bricks :
 * ils peuvent vivre ici.
 * ========================================================================= */
.mga-boutique__rangee {
	grid-template-columns: 340px minmax(0, 1fr);
	gap: 40px;
	align-items: start;
}

/* LA COLONNE ACCOMPAGNE LE DEFILEMENT -- demande d'Olivier du 12/11.
 *
 * ELLE ETAIT DEJA `sticky` ET NE POUVAIT PAS COLLER : mesuree a 4198 px de haut, exactement la
 * hauteur de la rangee. Un bloc Bricks est etire a la hauteur de sa case de grille ; un element
 * collant aussi haut que son conteneur n'a nulle part ou glisser. `align-self: start` lui rend
 * sa hauteur propre.
 *
 * ELLE EST PLUS HAUTE QU'UN ECRAN (un peu plus de 1100 px). Collee par le haut, son tiers
 * inferieur -- « Les plus vendus » -- resterait hors de vue pour toujours. Le decalage vient
 * donc de `--mga-col-haut`, pose par boutique-effets.js : 24 px si la colonne tient dans la
 * fenetre, sinon une valeur NEGATIVE qui la laisse defiler jusqu'a ce que son BAS touche le bas
 * de l'ecran, ou elle se fixe. Sans le script, le repli est 24 px : on perd le reglage fin,
 * jamais le defilement. */
.mga-boutique__rangee > .mga-filtres {
	align-self: start;
	height: auto;
}

.mga-filtres { position: sticky; top: var(--mga-col-haut, 24px); }

.mga-filtres__titre {
	margin: 0 0 4px;
	font-family: Lora, Georgia, serif;
	font-size: 26px;
	line-height: 1.2;
	color: #25282E;
}

.mga-filtre {
	padding: 18px 20px;
	border: 1px solid #E4E7E1;
	border-radius: 12px;
	background: #fff;
}

.mga-filtre .brx-filter-legend {
	display: block;
	margin-bottom: 10px;
	font-family: Archivo, sans-serif;
	font-size: 15px;
	font-weight: 600;
	color: #25282E;
}

.mga-filtre .brx-filter-options { margin: 0; padding: 0; list-style: none; }
.mga-filtre .brx-filter-options li + li { margin-top: 8px; }
.mga-filtre .brx-filter-options label {
	display: flex;
	align-items: center;
	gap: 10px;
	font-family: Archivo, sans-serif;
	font-size: 15px;
	color: #25282E;
	cursor: pointer;
}
.mga-filtre .brx-filter-options label:hover { color: #00702B; }
.mga-filtre .brx-option-count { margin-left: auto; font-size: 13px; color: #5A6069; }

.mga-filtre--recherche input {
	width: 100%;
	padding: 11px 14px;
	border: 1px solid #E4E7E1;
	border-radius: 8px;
	font-family: Archivo, sans-serif;
	font-size: 15px;
}
.mga-filtre--recherche input:focus-visible { border-color: #00702B; outline: 2px solid #00702B; outline-offset: 1px; }

/* LE CADRE EST CARRE PARCE QUE LES COUVERTURES LE SONT -- mesure, pas suppose.
   J'avais d'abord pose 1/1.41, la proportion d'un livre, par analogie avec
   skeditions. Le relevé du 12/11 tranche : les 40 vignettes du musee sont en
   1:1 (`woocommerce_thumbnail_cropping` vaut « 1:1 »), et 39 des 40 originaux
   sont deja carres -- donc le cadre 1/1.41 laissait 29 % de BLANC, en moyenne,
   entre l'image et son prix. Un cadre carre n'en laisse aucun.

   `contain` reste, bien que sans effet sur une image carree : le jour ou le
   musee televersera une couverture en portrait, elle sera montree entiere au
   lieu d'etre recadree -- une couverture recadree perd son titre.

   PAS DE FOND : ce qui depasserait est du blanc de page, pas une boite grise.

   Reserve a dire au musee : la seule image non carree du catalogue (le carnet
   « La lettre », 900x600) EST recadree par WooCommerce, et ce reglage lui est
   anterieur. Le changer imposerait de regenerer les 40 vignettes. */
.woocommerce ul.products li.product img {
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: contain;
	border-radius: 4px;
}

/* La carte : la couverture, et le prix dessous. Rien d'autre (cf.
   `inc/boutique.php`, qui retire le titre visible et le bouton). */
.woocommerce ul.products li.product { text-align: center; }
.woocommerce ul.products li.product .price {
	display: block;
	margin: 10px 0 0;
	font-family: Archivo, sans-serif;
	font-size: 16px;
	font-weight: 600;
	color: #25282E;
}
.woocommerce ul.products li.product .price del { opacity: .55; font-weight: 400; }
.woocommerce ul.products li.product .price ins { text-decoration: none; }

@media (max-width: 991px) {
	/* Sous 992 px, les filtres passent au-dessus de la grille : une colonne de
	   340 px ne laisserait plus de place aux couvertures. C'est le meme seuil
	   que skeditions. */
	.mga-boutique__rangee { grid-template-columns: minmax(0, 1fr); gap: 28px; }
	.mga-filtres { position: static; }
}

/* =========================================================================
 * LA BOUTIQUE ET LA FICHE PRODUIT — retouches du 12/11/2026 au soir
 * ========================================================================= */

/* --- L'ESPACE SOUS LE FILET DU TITRE ------------------------------------
 * Mesure : la rangee « compte + tri » commencait exactement au bas du titre,
 * donc AUCUN blanc entre le filet vert et le debut des produits.
 *
 * L'ESPACE EST SUR LA RANGEE, PAS SUR LA BARRE. Je l'avais pose sur la barre
 * « compte + tri », c'est-a-dire sur la seule colonne de droite : les produits
 * sont descendus de 34 px et la colonne de gauche est restee ou elle etait.
 * Signale par Olivier le 12/11. Pose sur la rangee, il deplace les deux
 * colonnes ensemble, et elles ne peuvent plus se desaligner. */
.mga-boutique__rangee {
	margin-top: 34px;
}

.brxe-woocommerce-products .bricks-products-widgets.before {
	margin-top: 0;
	margin-bottom: 26px;
}

/* --- LE SURVOL D'UN PRODUIT ---------------------------------------------
 * La carte se souleve, la couverture s'agrandit un peu et le prix passe au
 * vert. L'agrandissement est borne par un `overflow: hidden` sur le LIEN, pas
 * sur la carte : la carte porte aussi le prix, qui ne doit pas etre rogne. */
.woocommerce ul.products li.product {
	transition: transform .25s ease;
}

.woocommerce ul.products li.product > a,
.woocommerce ul.products li.product .woocommerce-loop-product__link {
	display: block;
	overflow: hidden;
	border-radius: 6px;
}

.woocommerce ul.products li.product img {
	transition: transform .4s ease;
}

.woocommerce ul.products li.product:hover {
	transform: translateY(-5px);
}

/* L'AGRANDISSEMENT DE LA COUVERTURE EST RETIRE depuis que le titre s'affiche en
   travers (12/11). Le lien contient aussi le prix, donc son `overflow: hidden`
   ne coupe pas au carre de l'image : agrandie de 4 %, elle depassait de 5 px
   SOUS le voile -- une bande de couverture nue entre le voile et le prix, vue a
   la capture. Sous un voile, l'agrandissement ne se voyait de toute facon plus. */
.woocommerce ul.products li.product:hover img {
	transform: none;
}

.woocommerce ul.products li.product .price {
	transition: color .25s ease;
}

.woocommerce ul.products li.product:hover .price,
.woocommerce ul.products li.product:hover .price .woocommerce-Price-amount {
	color: #00702B;
}

/* --- LE TITRE EN TRAVERS DE LA COUVERTURE, AU SURVOL --------------------
 * Demande d'Olivier du 12/11 : le titre de l'article sur la photo, avec un
 * voile pour qu'il reste lisible. Le voile couvre l'IMAGE SEULE, pas le prix :
 * le lien de WooCommerce contient les deux, donc le voile est cale en haut du
 * lien et prend le carre de la couverture (`aspect-ratio: 1 / 1`, le meme que
 * l'image), pas `inset: 0`.
 *
 * LE CONTRASTE EST CALCULE SUR LE PIRE CAS, PAS SUR UNE COUVERTURE SOMBRE :
 * voile a 68 % de #181B19 sur une image blanche = #626463 ; blanc dessus =
 * 6,0 pour 1, au-dessus des 4,5 exiges. Une couverture claire ne peut donc pas
 * rendre le titre illisible.
 *
 * `opacity`, PAS `display` : le titre reste dans l'arbre d'accessibilite (il
 * remplace le `screen-reader-text` d'avant), et iOS ne transforme pas le
 * premier appui en « survol » -- il ne le fait que pour un contenu qui
 * apparait par `display` ou `visibility`. Le survol est en outre borne aux
 * appareils qui en ont un (`hover: hover`) ; au clavier, le focus le montre. */
.woocommerce ul.products li.product > a,
.woocommerce ul.products li.product .woocommerce-loop-product__link {
	position: relative;
}

.mga-carte__titre {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	aspect-ratio: 1 / 1;
	padding: 20px;
	border-radius: 4px;
	background: rgba(24, 27, 25, .68);
	color: #fff;
	font-family: Lora, Georgia, serif;
	font-size: 18px;
	font-weight: 600;
	line-height: 1.3;
	text-align: center;
	opacity: 0;
	pointer-events: none;
	transition: opacity .3s ease;
}

.mga-carte__titre > span {
	display: -webkit-box;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 6;
	transform: translateY(8px);
	transition: transform .3s ease;
}

@media (hover: hover) {
	.woocommerce ul.products li.product:hover .mga-carte__titre { opacity: 1; }
	.woocommerce ul.products li.product:hover .mga-carte__titre > span { transform: none; }
}

.woocommerce ul.products li.product a:focus-visible .mga-carte__titre { opacity: 1; }
.woocommerce ul.products li.product a:focus-visible .mga-carte__titre > span { transform: none; }

@media (prefers-reduced-motion: reduce) {
	.mga-carte__titre,
	.mga-carte__titre > span { transition: none; }
	.mga-carte__titre > span { transform: none; }
}

/* --- L'APPARITION AU DEFILEMENT -----------------------------------------
 * LA CLASSE EST POSEE PAR LE SCRIPT, JAMAIS DANS LE BALISAGE. C'est ce qui
 * garantit qu'une page dont le script ne s'execute pas montre ses produits :
 * sans classe, aucune de ces regles ne s'applique. L'inverse -- masquer en
 * CSS puis reveler en JS -- rend la boutique vide au moindre incident.
 *
 * Le script retire l'observation des qu'un produit est vu : on ne rejoue pas
 * l'animation en remontant la page. */
.mga-revele {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity .55s ease, transform .55s ease;
}

.mga-revele.est-vu {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.mga-revele,
	.mga-revele.est-vu {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* --- LA FICHE PRODUIT : la visionneuse et la glissiere -------------------
 * J'AVAIS ECRIT QUE LA VISIONNEUSE « FONCTIONNAIT DEJA ». C'ETAIT FAUX POUR UN
 * VISITEUR : avec le zoom au survol actif, WooCommerce n'ouvre la visionneuse
 * que depuis la petite loupe du coin, et ANNULE le clic sur l'image elle-meme
 * (single-product.js : `e.preventDefault()` sur `.woocommerce-product-
 * gallery__image a`). Mon controle avait clique la loupe, pas l'image.
 * Signale par Olivier le 12/11 : « rien ne se passe au clic ».
 *
 * Le zoom au survol est donc coupe (inc/boutique.php, filtre officiel
 * `woocommerce_single_product_zoom_enabled`) : sans lui, WooCommerce branche
 * de lui-meme le clic de TOUTE l'image sur la visionneuse. La pastille a
 * loupe reste, mais comme simple signe : elle ne recoit pas les clics, qui
 * traversent jusqu'a l'image.
 *
 * LA GLISSIERE : une image a la fois dans un cadre CARRE (les couvertures le
 * sont, les pages interieures y tiennent entieres), deux fleches, et les
 * miniatures sur UNE ligne defilante sous l'image -- et non plus une grille
 * de quatre colonnes qui, sur un livre a quinze images, poussait la page de
 * 600 px. Le mecanisme est le FlexSlider de WooCommerce, regle par son filtre
 * `woocommerce_single_product_carousel_options` : aucune glissiere maison. */
.woocommerce-product-gallery {
	position: relative;
}

.woocommerce-product-gallery__image,
.woocommerce-product-gallery__image a,
.woocommerce-product-gallery__image img {
	cursor: zoom-in;
}

.woocommerce div.product .woocommerce-product-gallery .woocommerce-product-gallery__image {
	aspect-ratio: 1 / 1;
	background: #fff;
}

.woocommerce div.product .woocommerce-product-gallery .woocommerce-product-gallery__image a {
	display: block;
	width: 100%;
	height: 100%;
}

.woocommerce div.product .woocommerce-product-gallery .woocommerce-product-gallery__image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* la pastille a loupe : un signe, pas un bouton */
.woocommerce-product-gallery--with-images::after {
	content: "";
	position: absolute;
	top: 14px;
	right: 14px;
	z-index: 2;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .92) no-repeat center / 20px
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2325282E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4-4M11 8v6M8 11h6'/%3E%3C/svg%3E");
	box-shadow: 0 4px 14px -6px rgba(0, 0, 0, .45);
	pointer-events: none;
}

/* les fleches du FlexSlider */
.woocommerce-product-gallery .flex-viewport {
	border-radius: 6px;
}

.woocommerce-product-gallery .flex-direction-nav {
	margin: 0;
	padding: 0;
	list-style: none;
}

.woocommerce-product-gallery .flex-direction-nav li {
	margin: 0;
}

.woocommerce-product-gallery .flex-direction-nav a {
	position: absolute;
	top: calc((100% - 96px) / 2);
	z-index: 3;
	display: block;
	width: 42px;
	height: 42px;
	overflow: hidden;
	border-radius: 50%;
	background: rgba(255, 255, 255, .92) no-repeat center / 18px
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2325282E' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E");
	box-shadow: 0 4px 14px -6px rgba(0, 0, 0, .45);
	color: transparent;
	font-size: 0;
	text-decoration: none;
	transform: translateY(-50%);
	transition: background-color .2s ease, opacity .2s ease;
}

.woocommerce-product-gallery .flex-direction-nav a.flex-prev {
	left: 14px;
	transform: translateY(-50%) scaleX(-1);
}

.woocommerce-product-gallery .flex-direction-nav a.flex-next {
	right: 14px;
}

.woocommerce-product-gallery .flex-direction-nav a:hover {
	background-color: #fff;
}

.woocommerce-product-gallery .flex-direction-nav a.flex-disabled {
	opacity: 0;
	pointer-events: none;
}

/* les miniatures : une ligne, qui defile */
.bp-livre__galerie .woocommerce-product-gallery ol.flex-control-thumbs,
.woocommerce div.product .woocommerce-product-gallery ol.flex-control-thumbs {
	display: flex;
	flex-wrap: nowrap;
	gap: 8px;
	margin: 12px 0 0;
	padding: 2px 2px 8px;
	overflow-x: auto;
	list-style: none;
	scroll-snap-type: x proximity;
	scrollbar-width: thin;
	scrollbar-color: #CDD2CB transparent;
}

.bp-livre__galerie .woocommerce-product-gallery ol.flex-control-thumbs li,
.woocommerce div.product .woocommerce-product-gallery ol.flex-control-thumbs li {
	flex: 0 0 76px;
	width: 76px;
	margin: 0;
	padding: 0;
	float: none;
	scroll-snap-align: start;
}

.bp-livre__galerie .woocommerce-product-gallery ol.flex-control-thumbs li img,
.woocommerce div.product .woocommerce-product-gallery ol.flex-control-thumbs li img {
	display: block;
	width: 76px;
	height: 76px;
	margin: 0;
	object-fit: cover;
	border-radius: 6px;
	opacity: .55;
	outline: 2px solid transparent;
	outline-offset: -2px;
	cursor: pointer;
	transition: opacity .2s ease, outline-color .2s ease;
}

.bp-livre__galerie .woocommerce-product-gallery ol.flex-control-thumbs li img:hover,
.woocommerce div.product .woocommerce-product-gallery ol.flex-control-thumbs li img:hover,
.bp-livre__galerie .woocommerce-product-gallery ol.flex-control-thumbs li img.flex-active,
.woocommerce div.product .woocommerce-product-gallery ol.flex-control-thumbs li img.flex-active {
	opacity: 1;
}

.bp-livre__galerie .woocommerce-product-gallery ol.flex-control-thumbs li img.flex-active,
.woocommerce div.product .woocommerce-product-gallery ol.flex-control-thumbs li img.flex-active {
	outline-color: #008D36;
}

/* --- LA FICHE PRODUIT : le fondu des onglets ---------------------------
 * WooCommerce bascule les panneaux par `display`. UNE ANIMATION SE REJOUE A
 * CHAQUE PASSAGE DE `none` A `block` -- c'est ce qui permet de s'en tenir au
 * CSS, sans toucher au script des onglets. Une `transition` sur l'opacite,
 * elle, ne se declencherait pas : l'element n'est pas rendu avant. */
.woocommerce-tabs .woocommerce-Tabs-panel,
.woocommerce-tabs [role="tabpanel"] {
	animation: mga-onglet .34s ease;
}

@keyframes mga-onglet {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: none; }
}

.woocommerce-tabs .wc-tabs li a,
.woocommerce-tabs [role="tab"] {
	transition: color .2s ease, border-color .2s ease;
}

@media (prefers-reduced-motion: reduce) {
	.woocommerce-tabs .woocommerce-Tabs-panel,
	.woocommerce-tabs [role="tabpanel"] { animation: none; }
}

/* --- LE PANIER : UNE FENETRE CENTREE, PLUS UN TIROIR -------------------
 * Demande d'Olivier : « recopie le popup du panier de skeditions plutot que
 * la sidebar habituelle ». Releve sur leur feuille `panier-popup.css` : une
 * boite centree de 560 px au plus, coins arrondis, voile sombre, entree par
 * un leger glissement vers le haut. Le CONTENU ne change pas -- c'est deja le
 * meme (couverture, nom, date du billet, quantite, retrait, total) ; seule la
 * presentation passe du bord droit au centre.
 *
 * Leur jauge « livraison offerte des 80 EUR » n'est PAS reprise : le musee
 * n'a aucune methode de livraison gratuite a l'envoi (releve du 12/11), et
 * l'afficher serait une promesse fausse.
 *
 * Ces regles viennent APRES celles du tiroir et les annulent une par une
 * (`top`, `right`, `bottom`) : a specificite egale c'est l'ordre qui tranche,
 * et laisser `position: absolute` avec un `top: 0` ferait une boite collee en
 * haut au lieu d'etre centree. */
.mga-pop {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
}

.mga-pop__boite {
	position: relative;
	top: auto;
	right: auto;
	bottom: auto;
	width: 100%;
	max-width: 560px;
	max-height: 100%;
	border-radius: 14px;
	box-shadow: 0 24px 64px rgba(37, 40, 46, .3);
	animation: mga-pop-boite .22s ease-out;
}

@keyframes mga-pop-boite {
	from { opacity: 0; transform: translateY(14px); }
	to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.mga-pop__boite { animation: none; }
}

/* Sur un telephone la fenetre prend toute la place utile : une boite centree
   de 560 px n'a aucun sens a 375 px de large. */
@media (max-width: 599px) {
	.mga-pop { padding: 12px; }
	.mga-pop__boite { max-width: none; }
}

/* --- LA FICHE PRODUIT PAR DEFAUT : la gouttiere sous la largeur de contenu ---
 * Mesure le 12/11 en eprouvant la galerie : a 1000 comme a 500 px de large, la
 * fiche d'un livre touchait les deux bords de l'ecran (galerie de x = 0). Les
 * livres n'ont pas de gabarit Bricks : ils passent par le gabarit WooCommerce
 * du theme (`main.site-main`), que la gouttiere des sections Bricks
 * (`.brxe-section > .brxe-container`) ne voit pas. Meme valeur, meme seuil. */
@media (max-width: 1248px) {
	.single-product main.site-main {
		padding-left: 24px;
		padding-right: 24px;
	}
}


/* ==========================================================================
   ARTICLES, RECHERCHE, PAGE INTROUVABLE — 12/11/2026
   Les quatre gabarits posés par `bricks/poser-gabarits-articles.php`. Les
   cartes réutilisent `.bp-news__*`, le titre `.bp-page__titre`, le corps
   `.bp-page__corps` : rien n'est redessiné, on n'ajoute que ce qui manque.
   ========================================================================== */

/* --- l'article ------------------------------------------------------------ */

/* L'élément Shortcode de Bricks est un bloc dans une colonne flex en
   `align-items: flex-start` : sans largeur il se rétrécit à son texte et le
   centrage ne se voit pas — septième fois sur ce projet. */
.bp-article__meta-bloc {
	width: 100%;
}

.bp-article__meta {
	margin: 0;
	text-align: center;
	font-family: Archivo, system-ui, sans-serif;
	font-size: 15px;
	letter-spacing: 0.02em;
	color: #585E6A;
}

.bp-article__meta a {
	color: #00702B;
	text-decoration: none;
}

.bp-article__meta a:hover,
.bp-article__meta a:focus-visible {
	text-decoration: underline;
}

.bp-article__sep {
	margin: 0 0.6em;
}

/* L'image mise en avant, ENTIÈRE. Les photos du musée sont tantôt en paysage,
   tantôt carrées (l'affiche de la soirée Bouli Lanners) : un cadre à rapport
   fixe en `cover` couperait des têtes. On borne la largeur, jamais la hauteur. */
img.bp-article__image {
	display: block;
	align-self: center;
	width: 100%;
	max-width: 820px;
	height: auto;
	margin-top: 8px;
}

/* « À lire aussi » : un filet, un titre, trois cartes, un lien. */
.bp-article__suite {
	width: 100%;
	row-gap: 30px;
	margin-top: 26px;
	padding-top: 48px;
	border-top: 1px solid #E4E7E1;
}

.bp-article__suite-titre {
	width: 100%;
	margin: 0;
	text-align: center;
	font-family: Lora, Georgia, serif;
	font-size: 32px;
	font-weight: 600;
	line-height: 1.25;
	color: #25282E;
}

/* La marge haute de la grille compense l'absence d'écart dans « Nos News » ;
   ici c'est le `row-gap` du bloc qui espace. */
.bp-article__suite .bp-news__grille {
	margin-top: 0;
}

.bp-article__retour {
	width: 100%;
	margin: 0;
	text-align: center;
	font-family: Archivo, system-ui, sans-serif;
	font-size: 16px;
	font-weight: 600;
}

.bp-article__retour a {
	color: #00702B;
	text-decoration: none;
	border-bottom: 1px solid currentColor;
	padding-bottom: 2px;
}

.bp-article__retour a::before {
	content: "\2190\00A0";
}

.bp-article__retour a:hover,
.bp-article__retour a:focus-visible {
	color: #008D36;
}

/* La citation en exergue (widget `blockquote` d'Elementor). Le musée l'a
   voulue verte, en italique gras : la barre prend SA couleur, le texte le vert
   d'action — #0B8E36 sur blanc mesure 4,3 pour 1, sous les 4,5 exigés à cette
   taille ; #00702B en mesure 6,3. */
.bp-page__corps blockquote.bp-el-citation {
	margin: 1.8em auto;
	padding: 4px 0 4px 24px;
	border: 0;
	border-left: 3px solid var(--bp-citation, #008D36);
	background: none;
	font-family: Lora, Georgia, serif;
	font-size: 21px;
	font-style: italic;
	font-weight: 600;
	line-height: 1.5;
	color: #00702B;
}

.bp-page__corps blockquote.bp-el-citation p {
	margin: 0;
	text-align: left;
	color: inherit;
	font-size: inherit;
}

.bp-el-citation cite {
	display: block;
	margin-top: 0.6em;
	font-family: Archivo, system-ui, sans-serif;
	font-size: 15px;
	font-style: normal;
	font-weight: 400;
	color: #585E6A;
}

/* La vidéo : WordPress rend un lecteur à largeur fixe (oEmbed). On le rend
   fluide en 16/9 ; la même règle vaut pour le cadre de remplacement que
   Complianz pose tant que le visiteur n'a pas consenti. */
.bp-el-video {
	margin: 0 0 2em;
}

.bp-el-video iframe,
.bp-el-video .cmplz-placeholder-element {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
}

/* --- la recherche --------------------------------------------------------- */

.bp-recherche__forme {
	align-self: center;
	width: 100%;
	max-width: 620px;
}

.bp-recherche__forme form {
	display: flex;
	gap: 10px;
}

.bp-recherche__forme input[type="search"] {
	flex: 1 1 auto;
	min-width: 0;
	height: 50px;
	padding: 0 16px;
	border: 1px solid #C9CED3;
	border-radius: 2px;
	background: #fff;
	font-family: Archivo, system-ui, sans-serif;
	font-size: 16px;
	color: #25282E;
}

.bp-recherche__forme input[type="search"]:focus {
	border-color: #008D36;
	outline: 2px solid rgba(0, 141, 54, 0.25);
	outline-offset: 0;
}

/* `width: auto` N'EST PAS DÉCORATIF : Bricks donne au bouton de son formulaire de
   recherche une largeur fixe de 60 px, prévue pour une icône. Avec un libellé,
   « Rechercher » débordait du carré — vu à la capture (« echerche »). */
.bp-recherche__forme form button[type="submit"] {
	flex: 0 0 auto;
	width: auto;
	white-space: nowrap;
	height: 50px;
	padding: 0 24px;
	border: 0;
	border-radius: 2px;
	background: #00702B;
	color: #fff;
	font-family: Archivo, system-ui, sans-serif;
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.2s ease;
}

.bp-recherche__forme form button[type="submit"]:hover,
.bp-recherche__forme form button[type="submit"]:focus-visible {
	background: #008D36;
}

/* Une LISTE, pas une grille de cartes : une page ou un livre du comptoir n'a
   pas toujours d'image, et une grille en montrerait une sur deux. */
.bp-recherche__liste {
	align-self: center;
	width: 100%;
	max-width: 860px;
}

.bp-recherche__item {
	width: 100%;
	row-gap: 6px;
	padding: 22px 0;
	border-bottom: 1px solid #E4E7E1;
}

.bp-recherche__item:first-child {
	border-top: 1px solid #E4E7E1;
}

.bp-recherche__type {
	font-family: Archivo, system-ui, sans-serif;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #00702B;
}

.bp-recherche__titre {
	width: 100%;
	margin: 0;
	font-family: Archivo, system-ui, sans-serif;
	font-size: 21px;
	font-weight: 600;
	line-height: 1.3;
	color: #25282E;
}

.bp-recherche__titre a {
	color: inherit;
	text-decoration: none;
}

.bp-recherche__titre a:hover,
.bp-recherche__titre a:focus-visible {
	color: #008D36;
}

/* Le message « aucun résultat » que Bricks écrit à la place de la boucle. */
.bp-recherche__liste .bricks-posts-nothing-found,
.bp-news__grille .bricks-posts-nothing-found {
	grid-column: 1 / -1;
	width: 100%;
	margin: 0;
	padding: 28px 0;
	text-align: center;
	font-family: Archivo, system-ui, sans-serif;
	font-size: 17px;
	color: #585E6A;
}

/* --- la pagination des archives et de la recherche ------------------------ */

.bp-pagination {
	width: 100%;
}

.bp-pagination .bricks-pagination ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.bp-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	height: 42px;
	padding: 0 12px;
	border: 1px solid #E4E7E1;
	border-radius: 2px;
	font-family: Archivo, system-ui, sans-serif;
	font-size: 15px;
	font-weight: 600;
	color: #25282E;
	text-decoration: none;
}

.bp-pagination .page-numbers.current {
	border-color: #00702B;
	background: #00702B;
	color: #fff;
}

.bp-pagination a.page-numbers:hover,
.bp-pagination a.page-numbers:focus-visible {
	border-color: #008D36;
	color: #008D36;
}

/* --- la page introuvable -------------------------------------------------- */

.bp-404__texte {
	align-self: center;
	width: 100%;
	max-width: 620px;
	margin: 0;
	text-align: center;
	font-family: Archivo, system-ui, sans-serif;
	font-size: 18px;
	line-height: 1.6;
	color: #444;
}

.bp-404__liens {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	width: 100%;
	margin: 8px 0 0;
}

/* Le bouton secondaire : contour vert, fond blanc. `a.` pour peser autant que
   le bouton plein (0,1,1), et il vient APRÈS dans la feuille. */
a.bp-el-btn.bp-el-btn--second {
	background: #fff;
	color: #00702B;
	box-shadow: inset 0 0 0 1px #00702B;
}

a.bp-el-btn.bp-el-btn--second:hover,
a.bp-el-btn.bp-el-btn--second:focus {
	background: #F1F8F3;
	color: #00702B;
}

@media (max-width: 767px) {
	.bp-article__suite-titre {
		font-size: 26px;
	}

	.bp-recherche__forme form {
		flex-direction: column;
	}

	.bp-recherche__forme button {
		width: 100%;
	}
}


/* ==========================================================================
   LA FICHE D'UN ARTICLE DE LA BOUTIQUE — 12/11/2026
   Gabarit posé par `bricks/poser-fiche-livre.php`. La galerie, les boutons et
   le popup du panier gardent leurs règles (plus haut) : on ne pose ici que la
   mise en page de la fiche.
   ========================================================================== */

.bp-livre__fil {
	width: 100%;
	font-family: Archivo, system-ui, sans-serif;
	font-size: 14px;
	color: #585E6A;
}

.bp-livre__fil a {
	color: #00702B;
	text-decoration: none;
}

.bp-livre__fil a:hover,
.bp-livre__fil a:focus-visible {
	text-decoration: underline;
}

.bp-livre__avis {
	width: 100%;
}

/* Deux colonnes : la galerie, puis la carte d'achat. `minmax(0, …)` et non
   `1fr` : la glissière contient une piste plus large qu'elle, qui ferait
   grossir sa colonne. */
.bp-livre__grille {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
	gap: 48px;
	align-items: start;
	width: 100%;
}

.bp-livre__galerie {
	width: 100%;
	min-width: 0;
}

/* LES MINIATURES SUR UNE LIGNE VALENT AUSSI ICI. Les règles de la glissière étaient ancrées sur
   `.woocommerce div.product`, l'enveloppe du gabarit WooCommerce : dans un gabarit Bricks elle
   n'existe pas, et les treize miniatures retombaient en grille de quatre (vu à la capture).
   Chaque règle porte donc aussi le sélecteur `.bp-livre__galerie`. */

/* La galerie de WooCommerce se donne 48 % de largeur et un flottant, prévus
   pour son gabarit à deux colonnes : ici la colonne est déjà la nôtre. */
.bp-livre__galerie .woocommerce-product-gallery {
	float: none;
	width: 100% !important;
	margin: 0;
}

/* La carte d'achat : le même vocabulaire que les cartes du parcours. Elle
   accompagne le défilement tant que la galerie est plus haute qu'elle. */
.bp-livre__achat {
	position: sticky;
	top: 24px;
	row-gap: 14px;
	width: 100%;
	padding: 30px 30px 28px;
	/* Un cadre uni, sans liseré vert en tête (demande d'Olivier, 13/11/2026). */
	border: 1px solid #E4E7E1;
	border-radius: 10px;
	background: #fff;
}

.bp-livre__achat > * {
	width: 100%;
}

.bp-livre__titre {
	margin: 0;
	font-family: Lora, Georgia, serif;
	font-size: 34px;
	font-weight: 600;
	line-height: 1.2;
	color: #25282E;
}

.bp-livre__prix .price,
.bp-livre__prix {
	margin: 0;
	font-family: Archivo, system-ui, sans-serif;
	font-size: 26px;
	font-weight: 600;
	color: #00702B;
}

.bp-livre__prix del {
	opacity: 0.55;
	font-weight: 400;
}

.bp-livre__prix ins {
	text-decoration: none;
}

.bp-livre__stock,
.bp-livre__stock .stock {
	margin: 0;
	font-family: Archivo, system-ui, sans-serif;
	font-size: 14px;
	font-weight: 600;
}

.bp-livre__panier form.cart {
	margin: 4px 0 0;
}

.bp-livre__meta,
.bp-livre__meta .product_meta {
	font-family: Archivo, system-ui, sans-serif;
	font-size: 14px;
	line-height: 1.7;
	color: #585E6A;
}

.bp-livre__meta .product_meta > span {
	display: block;
}

.bp-livre__meta a {
	color: #00702B;
	text-decoration: none;
}

.bp-livre__livraison {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin: 0;
	padding: 12px 16px;
	/* Bords arrondis, sans liseré à gauche (demande d'Olivier, 13/11/2026). */
	border-radius: 10px;
	background: #F1F8F3;
	font-family: Archivo, system-ui, sans-serif;
	font-size: 14px;
	line-height: 1.5;
	color: #444;
}

.bp-livre__livraison strong {
	font-size: 15px;
	color: #25282E;
}

/* La description : une colonne de lecture, alignée sur le bord gauche de la
   galerie — pas centrée, elle prolonge la fiche. */
.bp-livre__texte {
	width: 100%;
	max-width: 860px;
	row-gap: 14px;
	margin-top: 22px;
}

.bp-livre__st {
	width: 100%;
	margin: 0;
	padding-bottom: 12px;
	border-bottom: 1px solid #E4E7E1;
	font-family: Lora, Georgia, serif;
	font-size: 26px;
	font-weight: 600;
	line-height: 1.25;
	color: #25282E;
}

/* Le corps réutilise `.bp-page__corps`, dont la colonne de lecture centre ses
   blocs : ici la colonne est déjà bornée, donc ils restent à gauche. */
.bp-livre__corps.bp-page__corps > * {
	max-width: none;
	margin-left: 0;
	margin-right: 0;
}

.bp-livre__infos-bloc {
	width: 100%;
	margin-top: 18px;
}

.bp-livre__infos table.shop_attributes {
	width: 100%;
	margin: 14px 0 0;
	border-collapse: collapse;
	font-family: Archivo, system-ui, sans-serif;
	font-size: 15px;
}

.bp-livre__infos table.shop_attributes th,
.bp-livre__infos table.shop_attributes td {
	padding: 10px 0;
	border: 0;
	border-bottom: 1px solid #E4E7E1;
	background: none;
	text-align: left;
	font-style: normal;
}

.bp-livre__infos table.shop_attributes th {
	width: 220px;
	font-weight: 600;
	color: #25282E;
}

.bp-livre__infos table.shop_attributes td p {
	margin: 0;
	padding: 0;
}

/* « Vous aimerez aussi » : les cartes de la boutique, sous un titre au format
   des autres intertitres centrés du site. */
.bp-livre__similaires {
	width: 100%;
	padding-top: 44px;
	border-top: 1px solid #E4E7E1;
}

.bp-livre__similaires > section > h2,
.bp-livre__similaires h2 {
	margin: 0 0 30px;
	text-align: center;
	font-family: Lora, Georgia, serif;
	font-size: 32px;
	font-weight: 600;
	line-height: 1.25;
	color: #25282E;
}

@media (max-width: 991px) {
	.bp-livre__grille {
		grid-template-columns: minmax(0, 1fr);
		gap: 30px;
	}

	.bp-livre__achat {
		position: static;
		padding: 24px 22px;
	}

	.bp-livre__titre {
		font-size: 28px;
	}

	.bp-livre__similaires h2 {
		font-size: 26px;
	}
}

/* ==========================================================================
   LE SELECTEUR DE LANGUE (`[mga_langues]`, module bp-mga-langues.php)
   --------------------------------------------------------------------------
   Le selecteur d'Explore (explore.brussels, banad, ante), aux couleurs du
   musee — demande d'Olivier, 13/11/2026 : un bouton rond qui porte la langue
   courante et deroule les deux autres dans une petite carte blanche.

   IL EST RENDU DEUX FOIS, ET LA FEUILLE N'EN MONTRE QU'UN :
     >= 992 px   dans le bandeau sombre, avant « Nous Contacter »  (--bandeau)
     <  992 px   dans la rangee du compte et du panier             (--barre)
   992 est le seuil ou le bandeau est masque (regle « #brx-header #brxe-bpehau »
   plus haut) : s'il bouge, celui-ci bouge avec lui, sinon une largeur n'aurait
   plus aucun selecteur, ou en aurait deux.

   Le survol passe au vert FONCE (#00702B) et non au vert de marque : blanc sur
   #008D36 mesure 4,32 pour 1, sous les 4,5 exiges a 13 px ; sur #00702B, 6,26.
   ========================================================================== */
.mga-langues {
	position: relative;
	display: inline-flex;
	align-items: center;
}

.mga-langues .mga-langues__bouton {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 42px;
	height: 42px;
	margin: 0;
	padding: 0;
	border: 1px solid #008D36;
	border-radius: 50%;
	background: #FFFFFF;
	color: #25282E;
	font-family: Archivo, sans-serif;
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: .5px;
	cursor: pointer;
	transition: background-color .25s ease, border-color .25s ease, color .25s ease;
}

.mga-langues .mga-langues__bouton:hover,
.mga-langues[data-ouvert] .mga-langues__bouton {
	background: #00702B;
	border-color: #00702B;
	color: #FFFFFF;
}

.mga-langues .mga-langues__menu {
	position: absolute;
	top: calc(100% + 12px);
	right: 0;
	z-index: 1000;
	display: none;
	min-width: 54px;
	margin: 0;
	padding: 6px;
	list-style: none;
	background: #FFFFFF;
	border-radius: 10px;
	box-shadow: 0 12px 30px rgba(0, 0, 0, .18);
}

.mga-langues[data-ouvert] .mga-langues__menu { display: block; }

/* La petite pointe qui rattache la carte au bouton. */
.mga-langues .mga-langues__menu::before {
	content: "";
	position: absolute;
	top: -5px;
	right: 16px;
	width: 10px;
	height: 10px;
	background: #FFFFFF;
	border-radius: 2px;
	transform: rotate(45deg);
}

.mga-langues .mga-langues__lien {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 9px 11px;
	border-radius: 7px;
	text-decoration: none;
	transition: background-color .2s ease;
}

.mga-langues .mga-langues__lien:hover,
.mga-langues .mga-langues__lien:focus-visible { background: #F1F8F3; }

.mga-langues .mga-langues__code {
	font-family: Archivo, sans-serif;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .5px;
	line-height: 1;
	color: #25282E;
	transition: color .2s ease;
}

.mga-langues .mga-langues__lien:hover .mga-langues__code,
.mga-langues .mga-langues__lien:focus-visible .mga-langues__code { color: #00702B; }

/* --- dans le bandeau sombre : le bouton reprend le dessin de « Nous Contacter »
   (transparent, filet blanc, texte blanc), en rond. ------------------------- */
#brx-header .mga-langues--bandeau .mga-langues__bouton {
	background: transparent;
	border-color: #FFFFFF;
	color: #FFFFFF;
}

#brx-header .mga-langues--bandeau .mga-langues__bouton:hover,
#brx-header .mga-langues--bandeau[data-ouvert] .mga-langues__bouton {
	background: #00702B;
	border-color: #00702B;
}

/* Le selecteur et « Nous Contacter » forment un seul groupe a droite du bandeau
   (bloc `bpeact`, pose par bricks/poser-langues-entete.php). */
#brx-header .bp-entete-actions {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 18px;
	width: auto;
	flex: 0 0 auto;
}

#brx-header .bp-entete-actions > .brxe-shortcode {
	width: auto;
	flex: 0 0 auto;
	line-height: 0;
}

/* --- lequel des deux est montre -------------------------------------------- */
.mga-langues--barre { display: none; }

@media (max-width: 991px) {
	.mga-langues--bandeau { display: none; }
	.mga-langues--barre { display: inline-flex; margin-right: 4px; }
}