/* ===========================================================================
   LE SITE AU FORMAT TÉLÉPHONE ET TABLETTE — 14/11/2026
   ---------------------------------------------------------------------------
   Retours d'Olivier après essai sur un vrai téléphone (iPhone, 440 px) : pas de
   logo dans l'en-tête, hamburger bleu, menu à refaire sur le modèle de
   weba.butterflypixel.dev, pied cassé, pages converties trop étroites, boutique
   qui commence par sa colonne, encadré de réservation trop loin dans la fiche.

   MES CONTRÔLES S'ARRÊTAIENT À 500 PX. Chrome sans fenêtre ne descend pas sous
   500 px par `--window-size` ; il faut l'émulation mobile (largeur, densité,
   tactile) pour voir ce qu'un téléphone voit. Les points de rupture de Bricks
   sont 991 / 767 / 478 : à 440 px on est SOUS le dernier, que 500 px ne
   franchit pas.

   Chargée après style.css par inc/mobile.php. Les sélecteurs portent un
   identifiant (#brx-header, #brx-footer, #brx-content) : Bricks écrit ses
   réglages en `#brxe-<id>` (1,0,0), qu'aucune suite de classes ne bat.

   SEUILS : 1180 = le menu passe en hamburger (réglage de l'élément nav-menu) ;
            991  = le bandeau sombre du haut est masqué ;
            900  = la fiche d'exposition passe sur une colonne ;
            767  = téléphone.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   1. L'EN-TÊTE SOUS 992 PX : le logo à gauche, la langue, le compte, le panier
      et le hamburger à droite — une seule barre, comme le modèle.

   Le logo n'est PAS un élément de plus dans le gabarit (il faudrait le
   reconstruire dans les trois langues) : c'est celui du bandeau sombre. Le
   bandeau était masqué en entier sous 992 px ; il est réaffiché SANS fond ni
   hauteur, posé sur la barre, et tout ce qu'il contient d'autre que le logo
   reste masqué.
   --------------------------------------------------------------------------- */
@media (max-width: 991px) {
	#brx-header {
		position: relative;
	}

	#brx-header #brxe-bpehau {
		display: block;
		position: absolute;
		z-index: 12;
		top: 0;
		left: 0;
		width: auto;
		height: 100%;
		min-height: 0;
		padding: 0;
		background: none;
		pointer-events: none;
	}

	#brx-header #brxe-bpecha {
		display: flex;
		align-items: center;
		width: auto;
		height: 100%;
		min-height: 0;
		margin: 0;
		padding: 0 0 0 20px;
	}

	#brx-header #brxe-bpecha > :not(#brxe-bpelogo) {
		display: none;
	}

	#brx-header #brxe-bpelogo {
		display: block;
		width: 54px;
		pointer-events: auto;
	}

	#brx-header #brxe-bpelogo img {
		display: block;
		width: 54px;
		height: 54px;
	}

	/* La barre : tout à droite, le hamburger en dernier. */
	#brx-header #brxe-bpenav {
		padding-top: 0;
		padding-bottom: 0;
	}

	#brx-header #brxe-bpenavc {
		flex-direction: row;
		flex-wrap: nowrap;
		align-items: center;
		justify-content: flex-end;
		column-gap: 4px;
		min-height: 78px;
		padding-left: 90px;
		padding-right: 14px;
	}

	#brx-header #brxe-bpenavm {
		order: 2;
	}
}

/* ---------------------------------------------------------------------------
   2. LE HAMBURGER. Sur iOS, un <button> sans couleur prend le BLEU du système :
      ses barres sont en `currentcolor`. On lui donne la couleur du texte, et la
      taille des autres boutons de la barre (42 × 42).
   --------------------------------------------------------------------------- */
@media (max-width: 1180px) {
	#brx-header #brxe-bpenavm {
		display: grid;
		place-items: center;
		flex: 0 0 auto;
		width: 42px;
		height: 42px;
		position: static;
	}

	#brx-header #brxe-bpenavm .bricks-mobile-menu-toggle {
		color: #25282E;
		-webkit-tap-highlight-color: transparent;
		margin: 0;
		padding: 0;
		border: 0;
	}

	#brx-header #brxe-bpenavm .bricks-mobile-menu-toggle:focus-visible {
		outline: 2px solid #008D36;
		outline-offset: 8px;
	}

	/* -----------------------------------------------------------------------
	   3. LE MENU : un panneau blanc arrondi qui se déroule SOUS la barre, sur le
	      modèle de weba.butterflypixel.dev. C'est le menu mobile de Bricks, donc
	      le menu WordPress de la langue servie — on ne recopie aucune entrée.

	      BRICKS FORCE DEUX CHOSES À L'OUVERTURE, EN !important ET DANS UNE COUCHE
	      (`opacity:1` et `transform:translateX(0)`) : pour un !important, une
	      couche bat le hors-couche, on ne peut donc pas les reprendre. On règle
	      l'état FERMÉ (réduit, transparent) ; l'état ouvert est celui de Bricks,
	      et la transition entre les deux fait le mouvement.
	   ----------------------------------------------------------------------- */
	#brx-header .brxe-nav-menu .bricks-mobile-menu-wrapper {
		position: absolute;
		top: calc(100% + 6px);
		right: auto;
		bottom: auto;
		left: 24px;
		box-sizing: border-box;
		width: min(460px, calc(100vw - 24px));
		max-width: none;
		height: auto;
		max-height: calc(100vh - 120px);
		max-height: calc(100dvh - 120px);
		padding: 10px 8px 8px;
		border-radius: 22px;
		color: #25282E;
		box-shadow: 0 24px 60px -18px rgba(17, 19, 22, 0.45), 0 2px 8px rgba(17, 19, 22, 0.08);
		overflow: hidden;
		transform: translateY(-8px) scale(0.98);
		transform-origin: top left;
		opacity: 0;
		visibility: hidden;
		transition: transform 0.42s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.38s ease, visibility 0s linear 0.42s;
	}

	#brx-header .brxe-nav-menu.show-mobile-menu .bricks-mobile-menu-wrapper {
		visibility: visible;
		transition: transform 0.42s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.38s ease, visibility 0s;
	}

	/* Le fond sombre de Bricks est un pseudo-élément : il devient la carte blanche. */
	#brx-header .brxe-nav-menu .bricks-mobile-menu-wrapper::before {
		border-radius: inherit;
		background-color: #FFFFFF;
	}

	/* Le voile : seulement SOUS la barre, pour que le logo et les boutons restent nets. */
	#brx-header .brxe-nav-menu .bricks-mobile-menu-overlay {
		position: absolute;
		top: 100%;
		right: 0;
		bottom: auto;
		left: 0;
		height: 300vh;
		background-color: rgba(17, 19, 22, 0.45);
		transition: opacity 0.38s ease, visibility 0.38s ease;
	}

	#brx-header .brxe-nav-menu .bricks-mobile-menu {
		flex: 1 1 auto;
		margin: 0;
		padding: 0;
		list-style: none;
		overflow-y: auto;
		overscroll-behavior: contain;
	}

	#brx-header .bricks-mobile-menu li {
		margin: 0;
		list-style: none;
	}

	/* Une entrée de premier niveau : le libellé, et son chevron juste après. */
	#brx-header .bricks-mobile-menu > li > a,
	#brx-header .bricks-mobile-menu > li > .brx-submenu-toggle {
		display: flex;
		align-items: center;
		column-gap: 10px;
		box-sizing: border-box;
		width: 100%;
		min-height: 52px;
		padding: 0 16px;
		border-radius: 14px;
		color: #25282E;
		font-family: Archivo, sans-serif;
		font-size: 17px;
		font-weight: 600;
		line-height: 1.3;
		text-decoration: none;
		cursor: pointer;
		-webkit-tap-highlight-color: transparent;
	}

	#brx-header .bricks-mobile-menu > li > .brx-submenu-toggle > * {
		padding: 0;
	}

	#brx-header .bricks-mobile-menu > li > .brx-submenu-toggle > a {
		display: block;
		width: auto;
		color: inherit;
		font: inherit;
		line-height: 1.3;
		text-decoration: none;
	}

	#brx-header .bricks-mobile-menu > li > .brx-submenu-toggle > button {
		display: grid;
		place-items: center;
		flex: 0 0 auto;
		width: 22px;
		height: 22px;
		margin: 0;
		border: 0;
		background: none;
		color: #5B6168;
		transition: transform 0.2s ease;
	}

	#brx-header .bricks-mobile-menu > li > .brx-submenu-toggle > button svg {
		width: 13px;
		height: 13px;
	}

	#brx-header .bricks-mobile-menu > li.open > .brx-submenu-toggle > button {
		transform: rotate(180deg);
	}

	#brx-header .bricks-mobile-menu > li.current-menu-item > a,
	#brx-header .bricks-mobile-menu > li.current-menu-ancestor > .brx-submenu-toggle,
	#brx-header .bricks-mobile-menu > li.current-menu-parent > .brx-submenu-toggle {
		color: #00702B;
	}

	#brx-header .bricks-mobile-menu > li > a:active,
	#brx-header .bricks-mobile-menu > li > .brx-submenu-toggle:active {
		background: #F1F8F3;
	}

	/* Les sous-entrées : en retrait, comme le modèle. */
	#brx-header .bricks-mobile-menu .sub-menu {
		margin: 0;
		padding: 2px 0 10px;
		line-height: 1.3;
		position: static;
		width: auto;
		min-width: 0;
		max-width: none;
		box-shadow: none;
		transform: none;
		opacity: 1;
		visibility: visible;
	}

	#brx-header .bricks-mobile-menu .sub-menu li > a,
	#brx-header .bricks-mobile-menu .sub-menu li > .brx-submenu-toggle > a {
		display: block;
		box-sizing: border-box;
		width: 100%;
		padding: 11px 16px 11px 44px;
		border-radius: 12px;
		color: #25282E;
		font-family: Archivo, sans-serif;
		font-size: 16px;
		font-weight: 600;
		line-height: 1.3;
		text-decoration: none;
	}

	#brx-header .bricks-mobile-menu .sub-menu li.current-menu-item > a {
		color: #00702B;
	}

	#brx-header .bricks-mobile-menu .sub-menu li > a:active {
		background: #F1F8F3;
	}

	/* LE TROISIÈME NIVEAU N'EST PAS DANS LE MENU MOBILE (demande d'Olivier du 14/11/2026).
	   « Expositions » et « Événements » sont deux liens, vers leur page : c'est elle qui sépare
	   « à l'affiche » et « passées » par des onglets. Les quatre sous-liens faisaient double
	   emploi, et sur son téléphone ils ne répondaient pas.
	   Histoire de ces deux entrées, pour ne pas la rejouer : d'abord de petits intertitres
	   inertes (il les a touchés : « ça ne fonctionne pas »), puis des liens avec leurs
	   sous-liens dépliés dessous (« ne fonctionnent pas » non plus, chez lui). Ce qui a l'air
	   d'une entrée de menu doit répondre au doigt, et le menu mobile s'arrête à deux niveaux. */
	#brx-header .bricks-mobile-menu .sub-menu .sub-menu {
		display: none;
	}

	#brx-header .bricks-mobile-menu .sub-menu li > .brx-submenu-toggle {
		display: block;
		padding: 0;
	}

	#brx-header .bricks-mobile-menu .sub-menu li > .brx-submenu-toggle > button {
		display: none;
	}

	/* L'encart des horaires (Infos pratiques) est dessiné pour le panneau de bureau. */
	#brx-header .bricks-mobile-menu .bp-encart-infos {
		display: none;
	}

	/* « Shop » : le méga-menu de bureau, réduit à ses liens. */
	#brx-header .bricks-mobile-menu .brx-megamenu {
		position: static;
		width: auto;
		padding: 2px 0 10px;
		box-shadow: none;
		clip-path: none;
		background: none;
	}

	#brx-header .bricks-mobile-menu .brx-megamenu .mga-bmenu,
	#brx-header .bricks-mobile-menu .brx-megamenu .mga-bmenu__panneau,
	#brx-header .bricks-mobile-menu .brx-megamenu .mga-bmenu__colonnes,
	#brx-header .bricks-mobile-menu .brx-megamenu .mga-bmenu__col {
		display: block;
		position: static;
		width: auto;
		max-width: none;
		max-height: none;
		margin: 0;
		padding: 0;
		border: 0;
		border-radius: 0;
		background: none;
		box-shadow: none;
		overflow: visible;
	}

	#brx-header .bricks-mobile-menu .brx-megamenu .mga-bmenu__tete,
	#brx-header .bricks-mobile-menu .brx-megamenu .mga-bmenu__intertitre,
	#brx-header .bricks-mobile-menu .brx-megamenu .mga-bmenu__pied,
	#brx-header .bricks-mobile-menu .brx-megamenu .mga-bmenu__col:nth-child(n+3),
	#brx-header .bricks-mobile-menu .brx-megamenu .mga-bmenu__lien small {
		display: none;
	}

	#brx-header .bricks-mobile-menu .brx-megamenu .mga-bmenu__liste {
		margin: 0;
		padding: 0;
		list-style: none;
	}

	#brx-header .bricks-mobile-menu .brx-megamenu .mga-bmenu__lien {
		display: block;
		padding: 11px 16px 11px 44px;
		border-radius: 12px;
		background: none;
		color: #25282E;
		text-decoration: none;
	}

	#brx-header .bricks-mobile-menu .brx-megamenu .mga-bmenu__lien strong {
		font-family: Archivo, sans-serif;
		font-size: 16px;
		font-weight: 600;
		line-height: 1.3;
		color: inherit;
	}

	#brx-header .bricks-mobile-menu .brx-megamenu .mga-bmenu__lien--courant {
		color: #00702B;
	}

	/* UN SOUS-MENU SE DÉPLIE ET SE REPLIE EN FONDU. Bricks le fait apparaître d'un coup
	   (`display: none` puis `block`), ce qui ne s'anime pas : il reste donc affiché, replié
	   à hauteur nulle et transparent, et c'est la classe `open` de Bricks qui le déploie.
	   `visibility: hidden` à l'état replié le retire de la tabulation et des lecteurs d'écran,
	   comme le faisait `display: none`. */
	#brx-header .bricks-mobile-menu > li > .sub-menu,
	#brx-header .bricks-mobile-menu > li > .brx-megamenu {
		display: block;
		max-height: 0;
		padding-top: 0;
		padding-bottom: 0;
		overflow: hidden;
		opacity: 0;
		visibility: hidden;
		transition: max-height 0.4s ease, padding 0.4s ease, opacity 0.28s ease, visibility 0s linear 0.4s;
	}

	#brx-header .bricks-mobile-menu > li.open > .sub-menu,
	#brx-header .bricks-mobile-menu > li.open > .brx-megamenu {
		max-height: 640px;
		padding-top: 2px;
		padding-bottom: 10px;
		opacity: 1;
		visibility: visible;
		transition: max-height 0.45s ease, padding 0.45s ease, opacity 0.4s ease 0.06s, visibility 0s;
	}

	/* Le bouton d'action au pied du panneau (posé par mobile.js : « Nous Contacter »). */
	#brx-header .bricks-mobile-menu > li.bp-mm__cta {
		margin-top: 8px;
		padding: 12px 8px 4px;
		border-top: 1px solid #E4E7E1;
	}

	#brx-header .bricks-mobile-menu > li.bp-mm__cta > a {
		justify-content: center;
		min-height: 54px;
		border-radius: 14px;
		background: #00702B;
		color: #FFFFFF;
		font-size: 17px;
		font-weight: 600;
		text-align: center;
	}

	#brx-header .bricks-mobile-menu > li.bp-mm__cta > a:active {
		background: #005A22;
	}
}

/* De 992 à 1180 px le bandeau sombre est affiché, avec son propre bouton « Nous
   Contacter » : celui du panneau ferait doublon. */
@media (min-width: 992px) {
	#brx-header .bricks-mobile-menu > li.bp-mm__cta {
		display: none;
	}
}

/* Sous 992 px le hamburger est à droite : le panneau s'ancre à droite et naît du coin du
   bouton. Au téléphone il occupe la largeur de l'écran (406 px à 430) ; à la tablette il
   reste une carte de 460 px sous le bouton — étalé sur 796 px, il n'était plus une carte
   mais un bandeau, avec les entrées perdues à gauche. */
@media (max-width: 991px) {
	#brx-header .brxe-nav-menu .bricks-mobile-menu-wrapper {
		right: 12px;
		left: auto;
		width: min(460px, calc(100vw - 24px));
		transform-origin: top right;
	}
}

@media (max-width: 1180px) and (prefers-reduced-motion: reduce) {
	#brx-header .brxe-nav-menu .bricks-mobile-menu-wrapper,
	#brx-header .brxe-nav-menu.show-mobile-menu .bricks-mobile-menu-wrapper {
		transition: none;
	}
}

/* ---------------------------------------------------------------------------
   4. « GÉRER LE CONSENTEMENT ». Sur un téléphone l'onglet flottant recouvre le
      contenu (le crédit du pied, le bouton d'ajout au panier). Il est masqué,
      et un lien « Gérer le consentement » est ajouté à « Autres liens » dans le
      pied par mobile.js — il actionne le bouton de Complianz, qui reste dans
      la page. Au-dessus de 767 px, c'est l'inverse : l'onglet, pas le lien.

      Ce n'est PAS le conteneur du bandeau (#cmplz-cookiebanner-container), qu'il
      ne faut jamais masquer : tout consentement deviendrait impossible.
   --------------------------------------------------------------------------- */
#brx-footer .bpf-lien--consentement {
	display: none;
}

@media (max-width: 767px) {
	#cmplz-manage-consent {
		display: none !important;
	}

	#brx-footer .bpf-lien--consentement {
		display: flex;
	}
}

/* ---------------------------------------------------------------------------
   5. LE PIED DE PAGE AU TÉLÉPHONE. Les trois colonnes gardaient leur tiers de
      largeur (126 px à 430) : titres sur deux lignes, adresse sur quatre,
      courriel qui déborde sur la colonne voisine.
   --------------------------------------------------------------------------- */
@media (max-width: 767px) {
	#brx-footer #brxe-bpfhcon {
		flex-direction: column;
		flex-wrap: nowrap;
		row-gap: 44px;
	}

	#brx-footer #brxe-bpfhcon > .brxe-block {
		flex: 0 0 auto;
		width: 100%;
		max-width: none;
	}

	/* Tout le pied est CENTRÉ au téléphone (demande d'Olivier du 14/11/2026) : titres, logo,
	   coordonnées, liens. Une ligne « icône + texte » se centre d'un bloc. */
	#brx-footer #brxe-bpfhcon,
	#brx-footer #brxe-bpfhcon > .brxe-block {
		align-items: center;
		text-align: center;
	}

	#brx-footer #brxe-bpfhcon .brxe-heading {
		width: 100%;
		text-align: center;
	}

	#brx-footer #brxe-bpfhcon .bpf-contact,
	#brx-footer #brxe-bpfhcon .bpf-lien {
		justify-content: center;
		text-align: center;
	}

	/* Le copyright du musée sur UNE ligne : la taille suit la largeur de l'écran. */
	#brx-footer #brxe-bpfcop {
		width: 100%;
		font-size: min(15px, 3.25vw);
		line-height: 1.5;
		white-space: nowrap;
		text-align: center;
	}
}

/* ---------------------------------------------------------------------------
   6. LES PAGES CONVERTIES (Votre visite, À votre service…). Le convertisseur a
      repris les retraits latéraux d'Elementor en ligne (« padding: 0 17% »,
      « width: 92% ») : justes sur grand écran, où la production les a aussi,
      ils laissaient 226 px de texte sur un téléphone de 430. Sous 992 px la
      page prend la largeur des autres pages. Les !important répondent à des
      styles en ligne.
   --------------------------------------------------------------------------- */
@media (max-width: 991px) {
	#brx-content .bp-page__corps .bp-el-col {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	#brx-content .bp-page__corps .bp-el-bande {
		width: 100% !important;
	}
}

/* Entre 992 et 1279 px, le même retrait en POURCENTAGE resserre le texte à 618 px quand
   les autres pages lui en donnent 800 (mesuré à 1024 : 203-821 contre 112-912). À 1440 les
   deux coïncident (792 et 800), c'est donc sur les écrans intermédiaires — tablette couchée,
   petit portable — que les pages de « Votre visite » et « À votre service » n'avaient pas la
   largeur des autres. Le retrait y devient celui de la colonne de lecture : ce qu'il faut
   pour laisser 800 px au texte, jamais plus.
   `max-width:none` en ligne est la marque que pose le convertisseur quand c'est Elementor
   qui décidait du retrait : on ne touche qu'à ces colonnes-là. */
@media (min-width: 992px) and (max-width: 1279px) {
	#brx-content .bp-page__corps .bp-el-col[style*="max-width:none"] {
		padding-left: max(0px, calc(50% - 400px)) !important;
		padding-right: max(0px, calc(50% - 400px)) !important;
	}
}

@media (max-width: 767px) {
	#brx-content .bp-page__corps .bp-el-bande {
		padding-left: 18px;
		padding-right: 18px;
	}

	/* Un texte justifié sur une colonne de téléphone ouvre des trous entre les mots. */
	#brx-content .bp-page__corps p,
	#brx-content .bp-page__corps li {
		text-align: left;
	}

	#brx-content .bp-page__corps .bp-el-center,
	#brx-content .bp-page__corps .bp-el-center p {
		text-align: center;
	}

	/* Un logo « à côté » de son texte (ACCESS-i) : 140 px de logo ne laissent que 180 px
	   au texte, et une adresse web écrite en toutes lettres y fait déborder toute la page
	   (13 px mesurés sur /visiteur-a-besoins-specifiques/). Le logo passe au-dessus, et
	   une adresse longue se coupe plutôt que de pousser la page. */
	#brx-content .bp-page__corps .bp-el-box--cote {
		flex-direction: column;
		align-items: flex-start;
		gap: 16px;
	}

	#brx-content .bp-page__corps .bp-el-box--cote .bp-el-box__i {
		flex: 0 0 auto;
		width: 140px;
	}

	#brx-content .bp-page__corps .bp-el-box__c {
		min-width: 0;
		max-width: 100%;
	}

	#brx-content .bp-page__corps a {
		overflow-wrap: anywhere;
	}
}

/* ---------------------------------------------------------------------------
   7. LA BOUTIQUE. Sur une colonne, la colonne du menu (1 159 px de haut) passait
      AVANT les articles : on voit d'abord ce qu'on est venu chercher. Et au
      téléphone, un article par ligne.
   --------------------------------------------------------------------------- */
@media (max-width: 991px) {
	#brx-content .mga-boutique__rangee > .mga-filtres {
		order: 2;
		margin-top: 12px;
	}
}

@media (max-width: 600px) {
	#brx-content .mga-boutique__rangee #brxe-bpbgrille ul.products {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* LA CARTE D'UN ARTICLE SANS SURVOL. Sur ordinateur le titre apparaît en travers de la
   couverture au survol ; un téléphone n'a pas de survol, donc le titre n'y apparaissait
   JAMAIS, et les articles — une couverture, un prix, beaucoup de blanc — ne se distinguaient
   pas les uns des autres (retour d'Olivier du 14/11/2026). Sans survol, ou sous 600 px,
   chaque article devient une carte encadrée : la couverture, le titre, le prix. */
@media (hover: none), (max-width: 600px) {
	#brx-content ul.products li.product {
		overflow: hidden;
		border: 1px solid #E4E7E1;
		border-radius: 14px;
		background: #FFFFFF;
		box-shadow: 0 10px 24px -18px rgba(17, 19, 22, 0.35);
		transform: none;
	}

	#brx-content ul.products li.product > a.woocommerce-loop-product__link {
		display: flex;
		flex-direction: column;
		height: 100%;
		padding-bottom: 18px;
		border-radius: 0;
	}

	#brx-content ul.products li.product > a.woocommerce-loop-product__link > img {
		order: 1;
		margin: 0;
		border-radius: 0;
	}

	#brx-content ul.products li.product .mga-carte__titre {
		position: static;
		order: 2;
		display: block;
		aspect-ratio: auto;
		padding: 16px 18px 0;
		border-radius: 0;
		background: none;
		color: #25282E;
		font-size: 18px;
		opacity: 1;
	}

	#brx-content ul.products li.product .mga-carte__titre > span {
		-webkit-line-clamp: 3;
		transform: none;
	}

	#brx-content ul.products li.product .price {
		order: 3;
		margin: 6px 0 0;
		padding: 0 18px;
		color: #00702B;
	}

	#brx-content ul.products li.product .price .woocommerce-Price-amount {
		color: inherit;
	}
}

/* ---------------------------------------------------------------------------
   8. LA FICHE D'EXPOSITION OU D'ÉVÉNEMENT. Sur une colonne, l'encadré (dates,
      billet, panier) venait après les logos, la vidéo et le plan : la
      réservation arrivait au bout de la page. Il vient juste après le texte.

      La colonne de gauche devient transparente à la mise en page
      (`display: contents`) : ses enfants et l'encadré sont alors rangés
      ensemble, par `order`.
   --------------------------------------------------------------------------- */
@media (max-width: 900px) {
	#brx-content .bp-fiche__grille {
		display: flex;
		flex-direction: column;
		row-gap: 28px;
		position: relative;
	}

	#brx-content .bp-fiche__principal {
		display: contents;
	}

	#brx-content .bp-fiche__principal > * {
		order: 4;
	}

	#brx-content .bp-fiche__principal > .bp-fiche__image {
		order: 1;
	}

	#brx-content .bp-fiche__principal > .bp-fiche__corps {
		order: 2;
	}

	#brx-content .bp-fiche__grille > .bp-fiche__encadre {
		order: 3;
		width: 100%;
	}
}

/* ---------------------------------------------------------------------------
   9. LES GRANDS TITRES AU TÉLÉPHONE. Les titres de section et de page sont en
      Lora 50 px (60 pour le bandeau) : « Expositions » tient sur 382 px,
      « Tentoonstellingen » en demande 421 — l'accueil néerlandais défilait
      de 15 px sur le côté (mesuré le 14/11/2026). Un mot ne se coupe pas : la
      taille suit donc la largeur de l'écran (10 % de la largeur, 43 px à 430),
      et un mot encore trop long se coupe plutôt que de pousser la page.
      Les traductions ont des mots plus longs que le français : c'est sur elles
      qu'un titre se vérifie.
   --------------------------------------------------------------------------- */
@media (max-width: 478px) {
	#brx-content .bp-acc__titre,
	#brx-content .bp-page__titre,
	#brx-content .bp-archive__titre,
	#brx-content .bp-bandeau .bp-bandeau__titre {
		font-size: min(50px, 10vw);
		overflow-wrap: anywhere;
	}
}

@media (max-width: 767px) {
	#brx-content h1,
	#brx-content h2,
	#brx-content h3 {
		overflow-wrap: break-word;
	}
}