/*
 * BB Instagram — carrousel et visionneuse.
 *
 * Reprend le rendu de « Social Feed Gallery », relevé sur le DOM le
 * 2026-08-20 : vignette carrée à coins de 4 px sur fond noir, masque blanc à
 * 36 % au survol, flèches rondes de 27 px et puces blanches de 8 px.
 *
 * ⚠️ **Le CSS additionnel du site est repris ici, et effacé là-bas.** Le rendu
 * que le propriétaire voyait n'était pas celui de QuadLayers : neuf blocs de
 * règles saisis dans « Apparence → Personnaliser → CSS additionnel » (post
 * `custom_css` « kadence ») le surchargeaient. Ils visaient des classes de
 * Swiper et de Modaal, qui n'existent plus — laissés en base ils seraient
 * devenus du code mort qui décrit encore la maquette. Les valeurs qui suivent
 * en viennent : le rond rose de 27 px, la flèche blanche, le fond noir des
 * vignettes, les puces blanches à 0,8 dont l'active passe à l'accent, et les
 * 900 px de large de la modale. Deux règles n'ont pas été reprises et c'est
 * volontaire : `.swiper-container { height: 200px }` et
 * `.swiper-pagination { top: 185px }` posaient une hauteur fixe pour y placer
 * les puces en absolu, alors qu'ici la bande se dimensionne toute seule et que
 * les puces sont dans le flux.
 *
 * Ce que Swiper faisait en 144 Ko de JavaScript, `scroll-snap` le fait ici en
 * CSS. Les quatre variables réglables (accent, masque, glyphe, proportions) et
 * les deux variables de palier (colonnes, espace) sont posées en ligne par
 * `bb_instagram_css_reglages()`, depuis les réglages : cette feuille ne décide
 * d'aucune valeur configurable.
 *
 * ⚠️ Les paliers sont des `min-width`, comme les breakpoints de Swiper.
 * insta-gallery écrivait en plus une `@media (max-width: 768px)` qui disait
 * autre chose ; les deux se recouvraient exactement à 768 et Swiper gagnait.
 * C'est la règle qui gagnait qu'on reproduit.
 */

.bb-instagram {
	/* Défauts de sécurité : la feuille doit tenir même si l'inline n'a pas été
	   posé — un cache agressif, une page servie sans notre enqueue. */
	--bb-instagram-colonnes: 1;
	--bb-instagram-espace: 6px;
	--bb-instagram-accent: #ff0099;
	--bb-instagram-masque: #ffffff5c;
	--bb-instagram-glyphe: #ffffff;
	--bb-instagram-proportions: 1 / 1;

	position: relative;
}

/* ------------------------------------------------------------------ *
 * La bande
 *
 * ⚠️ **Les deux sélecteurs qui suivent portent le type exprès, et il ne faut
 * pas les simplifier.** La bande est un `<ul>` et les cases des `<li>`, posés
 * dans le corps de la page : Kadence les habille donc au passage, avec
 * `.single-content ul, .single-content ol { padding: 2em }` (`content.min.css`).
 * Une classe seule vaut (0,1,0) contre (0,2,0) — le thème gagnait, la bande
 * héritait de 34 px de retrait à gauche, et comme le cliquet est `mandatory`
 * elle **ne reposait jamais à `scrollLeft: 0`** : le JavaScript n'y voyait
 * jamais le début, et la flèche arrière restait affichée sur la première case.
 * `.bb-instagram ul.bb-instagram__bande` vaut (0,2,1) et l'emporte quel que
 * soit l'ordre des feuilles — un simple `.bb-instagram .bb-instagram__bande`
 * ferait égalité, et l'égalité se tranche à l'ordre, que nous ne maîtrisons pas.
 * ------------------------------------------------------------------ */

.bb-instagram ul.bb-instagram__bande {
	display: flex;
	gap: var(--bb-instagram-espace);
	margin: 0;
	padding: 0;
	list-style: none;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.bb-instagram__bande::-webkit-scrollbar {
	display: none;
}

.bb-instagram li.bb-instagram__case {
	flex: 0 0 calc(
		(100% - (var(--bb-instagram-colonnes) - 1) * var(--bb-instagram-espace))
		/ var(--bb-instagram-colonnes)
	);
	margin: 0;
	padding: 0;
	list-style: none;
	scroll-snap-align: start;
}

/* ------------------------------------------------------------------ *
 * La vignette
 * ------------------------------------------------------------------ */

.bb-instagram__vignette {
	display: block;
	position: relative;
	width: 100%;
	aspect-ratio: var(--bb-instagram-proportions);
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 4px;
	overflow: hidden;
	/* Repris du CSS additionnel (`.instagram-gallery-item__wrap`) : une photo
	   qui ne remplit pas le carré repose sur du noir, jamais sur la page. */
	background: #000;
	cursor: pointer;
	/* Kadence habille tous les boutons ; on remet à plat sans le savoir. */
	box-shadow: none;
	color: var(--bb-instagram-glyphe);
}

.bb-instagram__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.bb-instagram__masque {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1em;
	background: var(--bb-instagram-masque);
	color: var(--bb-instagram-glyphe);
	font-size: 16px;
	line-height: 1;
	opacity: 0;
	transition: opacity .5s ease-out;
}

.bb-instagram__vignette:hover .bb-instagram__masque,
.bb-instagram__vignette:focus-visible .bb-instagram__masque {
	opacity: 1;
}

.bb-instagram__chiffre {
	display: inline-flex;
	align-items: center;
	gap: .35em;
}

/* Vidéo ou album : le clic cache autre chose, il faut le dire avant. */
.bb-instagram__genre {
	position: absolute;
	top: 8px;
	right: 8px;
	display: block;
	color: var(--bb-instagram-glyphe);
	/* Sur une photo claire, un glyphe blanc disparaît. */
	filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .5));
	pointer-events: none;
}

.bb-instagram__svg {
	display: block;
	vertical-align: middle;
}

/* ------------------------------------------------------------------ *
 * Les flèches
 *
 * Le rond fait 27 px, comme dans le CSS additionnel repris. Le glyphe dedans
 * en fait 18 : c'est `bb_instagram_glyphe()` qui le décide, et le chiffre est
 * commenté là-bas — il remplaçait une flèche de 6 px d'encre.
 * ------------------------------------------------------------------ */

.bb-instagram__fleche {
	position: absolute;
	top: 50%;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 27px;
	height: 27px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--bb-instagram-accent);
	color: #fff;
	cursor: pointer;
	transform: translateY(-50%);
	box-shadow: none;
}

.bb-instagram__fleche[hidden],
.bb-instagram__fleche:disabled {
	display: none;
}

/* ⚠️ **Il faut redire nos états, et c'est une affaire de spécificité.**
   `kadence/assets/css/global.min.css` pose
   `button:hover, button:focus, button:active { color: var(--global-palette-btn-hover) }`,
   soit **(0,1,1)** — une pseudo-classe compte comme une classe, donc un cran de
   plus que notre `.bb-instagram__fleche`, qui n'est que (0,1,0). Au repos nous
   gagnions ; au premier clic le chevron passait à `#222` et **y restait**, le
   bouton gardant le focus. C'est le « elle devient noire et reste noire » du
   propriétaire, et ce n'était ni un `:active` collant ni une bavure tactile :
   c'était le thème.

   ⚠️ **Deux pièges autour de cette découverte.** Une sonde qui parcourt
   `document.styleSheets` doit tester `r.selectorText` *avant* `r.cssRules` :
   depuis l'imbrication CSS, une `CSSStyleRule` porte elle aussi une `cssRules`
   vide, donc un `if (r.cssRules) continue;` saute **toutes** les règles et
   rapporte zéro coupable. Et `f.matches('.x:focus')` ne dit vrai que si
   l'élément a réellement le focus : il faut retirer la pseudo-classe du
   sélecteur avant de comparer.

   `:is()` prend la plus forte de ses branches, donc (0,2,0) ici : cela passe
   devant Kadence sans avoir à doubler une classe ni à écrire `!important`. */
.bb-instagram__fleche:is(:hover, :focus, :active) {
	background: var(--bb-instagram-accent);
	color: #fff;
}

.bb-instagram__puce:is(:hover, :focus, :active) {
	background: #fff;
	opacity: 1;
}

.bb-instagram__puce[aria-current="true"]:is(:hover, :focus, :active) {
	background: var(--bb-instagram-accent);
}

.bb-instagram__fleche--arriere {
	left: 4px;
}

.bb-instagram__fleche--avant {
	right: 4px;
}

/* ⚠️ 27 px est sous le minimum d'une cible tactile. Au doigt, le rond passe à
   40 px — la souris, elle, vise juste, et garde la maquette d'origine. */
@media (hover: none) and (pointer: coarse) {
	.bb-instagram__fleche {
		width: 40px;
		height: 40px;
	}
}

/* ------------------------------------------------------------------ *
 * Les puces
 * ------------------------------------------------------------------ */

.bb-instagram__puces {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 0;
	margin-top: 12px;
}

/* ⚠️ **Les puces sont blanches, pas roses**, et c'est la reprise du CSS
   additionnel : `.swiper-pagination-bullet` y était mis en `#ffffff` à 0,8 et
   `-active` à `#ff0099`. L'en-tête de ce fichier disait « puces en #ff0099»
   parce qu'il avait relevé le rendu de QuadLayers sans voir la surcharge.
   Les bordures des règles reprises (2 px blanche, 1 px rose) étaient inertes :
   sur un disque plein de la même couleur, en `border-box`, elles ne se voient
   pas. On garde l'effet, pas la peinture. */
.bb-instagram__puce {
	box-sizing: border-box;
	width: 8px;
	height: 8px;
	margin: 0 4px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #fff;
	opacity: .8;
	cursor: pointer;
	box-shadow: none;
	transition: background-color .2s ease-out, opacity .2s ease-out;
}

.bb-instagram__puce[aria-current="true"] {
	background: var(--bb-instagram-accent);
	opacity: 1;
}

/* ⚠️ **Il n'y a pas une puce par publication, il y en a une par position.**
   PHP en écrit autant qu'il y a de publications, faute de savoir combien de
   colonnes le palier courant affichera ; le script efface celles qui ne
   désignent aucune position atteignable. À trois colonnes, la dernière position
   montre les publications 18, 19 et 20 : la puce qui s'allume au bout est donc
   la dix-huitième, et les deux dernières ne s'allumaient jamais. C'est
   l'« avant-dernière puce rose » qu'a vue le propriétaire — le compte était
   faux, pas le repère. */
.bb-instagram__puce[hidden] {
	display: none;
}

/* ------------------------------------------------------------------ *
 * La visionneuse
 *
 * ⚠️ **La modale épouse la publication ; elle ne lui impose plus de cadre.**
 * Elle faisait 75 vw sur 75 vh, quelles que soient les proportions de ce qu'on
 * y mettait, et le média s'y inscrivait en `object-fit: contain` sur un fond
 * noir : une photo verticale, la plus courante sur Instagram, ouvrait un
 * rectangle de 1 400 px de large dont 900 étaient du noir. Ici la boîte du
 * média prend le rapport de la publication, posé par PHP en
 * `--bb-instagram-l` / `--bb-instagram-h` — il ne reste donc rien à rogner.
 * Les bornes : 900 px de large au plus (repris du CSS additionnel,
 * `.instagram-gallery-modal`), 88 vh de haut, colonne du texte à 320.
 *
 * ⚠️ **`fit-content` et non `auto` sur le `<dialog>`.** Un `<dialog>` modal est
 * un boîte fixée dont l'agent utilisateur pose `inset-inline: 0` ; quand les
 * deux décalages sont donnés, `width: auto` ne se rétracte pas sur le contenu,
 * il **remplit** — mesuré, la modale sortait à 900 px de large quel que soit ce
 * qu'elle contenait. Le `width: fit-content` de la feuille de l'agent était là
 * pour ça, et l'écraser en `auto` a rendu les 900 px que l'on venait de retirer.
 *
 * ⚠️ **Le dialogue est la fenêtre, la scène est la publication.** Il portait les
 * deux rôles à la fois, et il n'y avait alors nulle part où poser les flèches
 * qui vont d'une publication à la suivante : hors de la scène il n'y a pas de
 * place, et `overflow: hidden` rogne tout ce qui dépasse. Le dialogue prend donc
 * toute la fenêtre, sans fond ni bordure, et centre ; c'est **la scène** qui
 * garde le `fit-content` par lequel le cadre noir a disparu.
 * ------------------------------------------------------------------ */

/* ⚠️ `margin: 0` n'est pas décoratif : la feuille de l'agent donne `margin: auto`
   à un `<dialog>`, ce qui, avec `inset: 0` et une taille pleine, décale. */
.bb-instagram__visionneuse {
	position: fixed;
	inset: 0;
	width: 100%;
	max-width: 100%;
	height: 100%;
	max-height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	overflow: hidden;
	background: transparent;
}

/* ⚠️ Sur `[open]` seulement : un `<dialog>` fermé est caché par un
   `display: none` de la feuille de l'agent, qu'un `display: flex` écraserait. */
.bb-instagram__visionneuse[open] {
	display: flex;
	align-items: center;
	justify-content: center;
	/* ⚠️ Le `gap` sépare deux chevrons de même dessin : celui de la publication,
	   hors de la scène, et celui de l'album, posé à 8 px du bord du média. À
	   6 px il n'en restait que quatorze entre les deux, et l'œil lisait une
	   paire. Mesuré à l'écran ; le banc ne voit pas cela. */
	gap: 16px;
}

.bb-instagram__visionneuse::backdrop {
	background: rgba(0, 0, 0, .72);
}

.bb-instagram__scene {
	position: relative;
	flex: 0 1 auto;
	width: fit-content;
	max-width: min(900px, 94vw);
	max-height: 90vh;
	border-radius: 4px;
	overflow: hidden;
	background: #fff;
}

.bb-instagram__cadre {
	position: relative;
	display: flex;
	align-items: stretch;
	max-width: 100%;
	max-height: 90vh;
	/* La hauteur que le média a le droit de prendre. Elle est ici, et non dans
	   la formule de `.bb-instagram__pieces`, parce que le régime téléphone la
	   change deux fois : une fois pour tous, une fois pour les publications sans
	   légende, où il n'y a pas de texte à nourrir — voir le bloc `@media`. */
	--bb-instagram-haut: 88vh;
}

/* La colonne du média : le défileur, et les deux flèches posées dessus. */
.bb-instagram__vue {
	position: relative;
	flex: 0 0 auto;
	display: flex;
	min-width: 0;
}

/* ⚠️ **C'est la boîte qui porte les proportions, jamais le média.** Un
   `<img width height>` pose des indices de présentation, que la moindre règle
   d'auteur `width: auto` écrase : la boîte se rétractait alors sur une taille
   intrinsèque encore nulle, et la modale ouvrait à 0 × 0 avant l'arrivée du
   premier octet — mesuré au navigateur, invisible à `curl`. Les deux nombres
   viennent de la base par `bb_instagram_detail()` ; le `1 / 1` de repli sert
   aux publications dont le miroir n'a pas su mesurer.

   La largeur est le plus petit des trois : la borne de la colonne, celle de
   l'écran, et celle que `--bb-instagram-haut` autorise à ce rapport. C'est ce
   dernier terme qui remplace l'`object-fit` d'avant — une photo verticale
   n'ouvre plus une boîte trop large qu'il faudrait rogner en noir, elle ouvre
   une boîte juste. Un seul régime, album ou pièce seule : le défileur a de toute
   façon besoin d'une largeur ferme, une base flexible en pourcentage contre un
   parent de largeur indéfinie se résolvant au contenu.

   ⚠️ **Le budget de hauteur est une variable, pas un nombre, et il le faut :**
   quand une bande s'ouvre sous le média, elle doit la lui retirer. Sans cela le
   cadre dépasse le `max-height: 90vh` de la scène, qui est en `overflow: hidden`
   — le média n'est pas réduit, il est coupé, et rien ne le dit. */
.bb-instagram__pieces {
	display: flex;
	align-items: center;
	aspect-ratio: var(--bb-instagram-l, 1) / var(--bb-instagram-h, 1);
	width: min(
		560px,
		94vw,
		calc(var(--bb-instagram-haut) * var(--bb-instagram-l, 1) / var(--bb-instagram-h, 1))
	);
	max-height: var(--bb-instagram-haut);
	/* Ne se voit que derrière un album aux pièces inégales — Instagram impose
	   un rapport unique à un carrousel, donc presque jamais. */
	background: #000;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.bb-instagram__pieces::-webkit-scrollbar {
	display: none;
}

/* Chaque pièce occupe un cran plein : la boîte a déjà le bon rapport, il n'y a
   donc rien à rogner sur une publication simple, et le `contain` ne sert qu'aux
   albums inégaux. */
.bb-instagram__grande,
.bb-instagram__video {
	flex: 0 0 100%;
	width: 100%;
	height: 100%;
	object-fit: contain;
	scroll-snap-align: center;
}

/* Les flèches de l'album, sur le défileur et non sur le texte : elles se
   placent contre `.bb-instagram__vue`, qui est la colonne du média.

   ⚠️ **Celles-ci sont sombres et translucides parce qu'elles sont sur la
   photo**, et c'est la reprise de `.insta-gallery-slider__button` :
   `rgba(0,0,0,.4)` sous un chevron blanc à 60 %, précisément pour qu'on voie
   la publication dessous. Repeintes en rose opaque, elles en masquaient un
   coin. C'est le seul critère qui départage les deux paires de la visionneuse :
   **sur le média, sombre et discret ; hors du média, le rond rose de la
   bande.** Le rose vient de `--qligg-carousel-arrow-color`, un réglage du
   *carrousel* — QuadLayers n'en mettait nulle part dans la modale, mais ses
   flèches de publication étaient sur la photo, et les nôtres ne le sont pas. */
.bb-instagram__fleche--vue {
	z-index: 3;
	background: rgba(0, 0, 0, .4);
	color: rgba(255, 255, 255, .75);
}

.bb-instagram__fleche--vue:is(:hover, :focus, :active) {
	background: rgba(0, 0, 0, .6);
	color: #fff;
}

.bb-instagram__fleche--vue.bb-instagram__fleche--arriere {
	left: 8px;
}

.bb-instagram__fleche--vue.bb-instagram__fleche--avant {
	right: 8px;
}

/* Les flèches d'une publication à la suivante : dans le flux du dialogue, de
   part et d'autre de la scène — donc jamais sur la photo, où elles se
   confondraient avec celles de l'album. Plus grandes, elles portent le
   déplacement le plus large.
   ⚠️ **Statiques et non absolues** : posées en absolu elles auraient recouvert
   la scène dès que celle-ci atteint ses 94 vw. Ici le `gap` du dialogue les
   sépare, et la scène se rétracte de leur largeur. */
.bb-instagram__fleche--poste {
	position: static;
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	transform: none;
	/* ⚠️ **Elles gardent le rond rose de la bande, et c'est un écart assumé
	   avec QuadLayers.** Une première version les avait rendues transparentes,
	   par symétrie avec celles de l'album ; le propriétaire a tranché
	   autrement, et la raison se voit : ces deux-là ne sont **pas** sur la
	   photo — sur grand écran elles sont sur le voile noir du `::backdrop`, sur
	   téléphone dans la bande de commande. Rien à laisser transparaître, donc,
	   et le rose dit d'un coup d'œil qu'elles changent de publication quand les
	   sombres, elles, changent de photo. Aucune règle ici : tout vient de
	   `.bb-instagram__fleche`, états compris. */
}

/* ⚠️ Le décalage de 4 px des flèches de la bande est une position absolue ;
   il n'a aucun sens ici et pousserait le bouton hors de sa place. */
.bb-instagram__fleche--poste.bb-instagram__fleche--arriere,
.bb-instagram__fleche--poste.bb-instagram__fleche--avant {
	left: auto;
	right: auto;
}

/* ⚠️ **C'est la légende qui défile, pas la colonne**, et le contenu est centré.
   La colonne fait la hauteur du média, qui peut atteindre 88 vh : une
   publication sans légende — une bobine, le plus souvent — n'y posait qu'un
   bouton, en haut d'un panneau blanc de 320 × 792. C'était le cadre noir de
   tout à l'heure repeint en blanc. Le centrage le fait disparaître ; et comme
   c'est la légende seule qui défile, le bouton « Voir sur Instagram » reste
   visible sous une légende longue au lieu de partir sous la ligne de flottaison.

   ⚠️ Le `min-height: 0` de la légende n'est pas décoratif : le minimum
   automatique d'un élément flexible est la hauteur de son contenu, donc sans
   lui la légende refuse de se rétracter, déborde de la colonne et le centrage
   coupe le début du texte — que rien ne permet alors de remonter. */
.bb-instagram__texte {
	position: relative;
	flex: 0 0 320px;
	border-left: 1px solid #eee;
}

.bb-instagram__panneau {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 1em;
	/* ⚠️ Les 56 px du haut sont la place de la croix de fermeture — 40 px de
	   rond posés à 8 du bord. Elle tombe sur cette colonne, qui est la dernière
	   du cadre, et rognait la première ligne de la légende. */
	padding: 56px 20px 16px;
	font-size: 12px;
	line-height: 1.6;
	overflow: hidden;
}

/* ⚠️ **Sans légende, le cadre bascule en colonne, et les deux régimes tiennent
   enfin la même disposition** : le média, puis le bouton dessous. Aucune colonne
   de droite, donc aucune largeur à choisir — c'est ce choix qui n'avait pas de
   bonne réponse, 320 px faisant une colonne blanche et 220 px une colonne blanche
   plus étroite. Ce qui gênait n'était pas la taille du vide, c'était le vide.

   ⚠️ **`flex: 0 0 auto` n'est pas une redite du réglage par défaut : il annule
   les 320 px.** En direction colonne, la base flexible dimensionne la **hauteur**
   — `.bb-instagram__texte` aurait donc pris 320 px de haut pour y loger un bouton
   de 37. C'est le piège de cette bascule, et il ne se voit qu'à l'écran.

   Rien n'est sorti du flux, contrairement à une première bande essayée puis
   refusée, qui creusait un `padding-bottom` dans le cadre et ancrait le texte en
   `bottom: 0` : le positionnement absolu se résout contre la boîte de
   rembourrage, le bouton retombait donc *dans* le média, et un élément hors du
   flux ne pesant rien, le jeu se reportait au-dessus de la photo. En colonne, le
   bouton pèse ses 61 px, que `--bb-instagram-haut` retire d'avance au média — le
   `overflow: hidden` de la scène coupe sans prévenir ce qui dépasse.

   Deux autres dispositions ont été essayées et refusées à l'œil, toutes deux
   posant le bouton *sur* le média : en haut à gauche, sous les chevrons ; en bas
   à gauche, sur la barre de lecture native. */
.bb-instagram__cadre:has(.bb-instagram__texte--seul) {
	flex-direction: column;
	--bb-instagram-haut: calc(88vh - 64px);
}

.bb-instagram__texte--seul {
	flex: 0 0 auto;
	border-left: 0;
}

/* Ni croix à esquiver ni colonne à remplir : le panneau redevient une simple
   ligne, et cesse d'être le calque tendu sur la colonne. */
.bb-instagram__texte--seul .bb-instagram__panneau {
	position: static;
	padding: 12px;
	overflow: visible;
}

/* Le bouton est seul sous une photo centrée ; l'aligner à gauche d'une bande qui
   fait toute la largeur du cadre le ferait flotter dans un coin. Il annule ici le
   `align-self: flex-start` que la règle générale lui donne, où il sert à ce qu'il
   ne s'étire pas sur la largeur de la colonne. */
.bb-instagram__texte--seul .bb-instagram__lien {
	align-self: center;
}

.bb-instagram__legende {
	flex: 0 1 auto;
	min-height: 0;
	margin: 0;
	overflow-y: auto;
	font-size: 12px;
	white-space: pre-line;
}

.bb-instagram__lien {
	align-self: flex-start;
	flex: 0 0 auto;
	display: inline-block;
	padding: 8px 12px;
	border: 1px solid #ddd;
	border-radius: 3px;
	background: #efefef;
	font-size: 12px;
	text-decoration: none;
}

.bb-instagram__lien:hover,
.bb-instagram__lien:focus {
	background: #fafafa;
}

.bb-instagram__fermer {
	position: absolute;
	top: 8px;
	right: 8px;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #efefef;
	color: #222;
	cursor: pointer;
	box-shadow: none;
}

/* ⚠️ `:is()` ici aussi, et pas par symétrie : `.bb-instagram__fermer:hover`
   pèse exactement autant que le `button:hover` de Kadence, et notre feuille est
   servie **avant** la sienne — à égalité, c'est la dernière qui gagne. La croix
   virait donc au rose au survol. */
.bb-instagram__fermer:is(:hover, :focus, :active) {
	background: #fafafa;
	color: #222;
}

/* Sur un téléphone, une colonne latérale de 320 px ne tient pas : le texte
   passe dessous, et la modale prend l'écran.

   ⚠️ `dvh` et non `vh` : sur mobile, `100vh` compte la barre d'adresse comme
   si elle était rétractée, et le bas de la modale — donc le texte — passe
   sous elle. Le `100vh` qui précède reste pour qui ne connaît pas `dvh`. */
@media (max-width: 782px) {
	.bb-instagram__scene {
		width: 100vw;
		height: 100vh;
		height: 100dvh;
		max-width: 100vw;
		max-height: 100vh;
		max-height: 100dvh;
		border-radius: 0;
	}

	/* ⚠️ **Les flèches de publication ne tiennent plus à côté de la scène**, qui
	   prend l'écran entier. Elles ne se posent pas non plus dessus : la scène
	   ouvre une bande de 48 px au-dessus du média, et les trois boutons de
	   commande y logent — les deux chevrons à gauche, la croix à droite. C'est
	   la disposition de la prod, et elle règle deux gênes d'un coup : ni les
	   flèches ni la croix ne masquent plus la publication.

	   ⚠️ `top: auto` n'est pas de la politesse. La règle de base pose
	   `top: 50%` ; avec une hauteur fixe, `top` et `bottom` ensemble
	   sur-contraignent la boîte et c'est `top` qui gagne. Les flèches se
	   posaient à mi-scène — mesuré, 380 au lieu de 708 — donc en travers de la
	   légende. Elles sont maintenant calées par le haut, mais la remarque tient :
	   qui ajouterait un `bottom` ici retomberait dans le piège. */
	.bb-instagram__fleche--poste {
		position: absolute;
		top: 4px;
		bottom: auto;
		z-index: 4;
	}

	.bb-instagram__fleche--poste.bb-instagram__fleche--arriere {
		left: 8px;
	}

	.bb-instagram__fleche--poste.bb-instagram__fleche--avant {
		left: 52px;
		right: auto;
	}

	/* La bande. `border-box` parce que la hauteur est donnée en `100%` : sans
	   lui les 48 px s'ajoutent et le bas du cadre passe sous l'écran. */
	.bb-instagram__cadre {
		box-sizing: border-box;
		flex-direction: column;
		justify-content: center;
		width: 100%;
		height: 100%;
		max-height: none;
		padding-top: 48px;
		--bb-instagram-haut: 78vh;
	}

	/* ⚠️ **Sans légende, le média prend tout ce qui reste — et 78 vh n'est plus
	   un plafond, c'est un carcan.** Les 78 vh existent pour laisser à la
	   légende de quoi commencer sous une photo verticale. Il n'y a pas de
	   légende ici : le budget doit donc être la hauteur *réelle* qui reste, soit
	   l'écran moins la bande de commande et moins la ligne du bouton. Une
	   première version faisait l'inverse — 78 vh **moins** encore 64 — et le
	   propriétaire a vu ce qu'il fallait voir : une publication minuscule entre
	   deux grands blancs. Mesuré alors, 297 × 529 sur 390 × 760 ; ici la boîte
	   se referme sur le média, sans un pixel de jeu, sur une bobine en 9/16.

	   `:has()` parce que rien d'autre ne le dit : `montre()` recopie le gabarit
	   dans le cadre à l'exécution, et la classe que pose `rendu.php` n'atteint
	   que le texte, jamais son parent. */
	.bb-instagram__cadre:has(.bb-instagram__texte--seul) {
		--bb-instagram-haut: calc(100vh - 48px - 64px);
	}

	/* ⚠️ **Le rapport tient sur téléphone aussi, et il ne faut pas le rendre à
	   la place disponible.** Une première version donnait ici `height: 100%` et
	   `aspect-ratio: auto` : la boîte prenait toute la colonne, le média s'y
	   inscrivait en `contain`, et le cadre noir que l'on venait de retirer sur
	   grand écran revenait sur le petit — mesuré, 390 × 471 de boîte pour une
	   publication en 900 × 675. C'est la même formule qu'au-dessus, avec les
	   bornes du téléphone : toute la largeur, et 78 vh de haut pour que la
	   légende garde de quoi commencer sous une photo verticale — 84 avant que
	   la bande de commande ne prenne ses 48 px. */
	.bb-instagram__vue {
		flex: 0 0 auto;
		justify-content: center;
		width: 100%;
		min-height: 0;
	}

	.bb-instagram__pieces {
		width: min(
			100%,
			calc(var(--bb-instagram-haut) * var(--bb-instagram-l, 1) / var(--bb-instagram-h, 1))
		);
		max-width: 100%;
		max-height: var(--bb-instagram-haut);
	}

	/* Prend ce qui reste sous le média, quel qu'il soit. Le panneau étant hors
	   du flux, la colonne ne pèse rien d'elle-même : c'est bien le `1 1` qui la
	   dimensionne, et la légende défile dans ce qu'il en résulte. */
	.bb-instagram__texte {
		flex: 1 1 auto;
		width: 100%;
		min-height: 0;
		border-left: 0;
		border-top: 1px solid #eee;
	}

	/* La croix est montée dans la bande, avec les deux flèches : la colonne du
	   texte n'a plus rien à réserver, ni en haut ni en bas.

	   ⚠️ **Le centrage vertical se retourne contre le texte sur un téléphone.**
	   Sur grand écran la colonne fait toute la hauteur du média et le centrage
	   fait disparaître le jeu ; ici la colonne est une bande large et basse sous
	   la photo, et une légende de deux lignes s'y retrouvait au milieu, avec
	   au-dessus d'elle un blanc plus haut qu'elle. Le texte commence en haut,
	   contre le filet, et le blanc — s'il en reste — se range sous le bouton,
	   là où il ne se lit pas comme un oubli. */
	.bb-instagram__panneau {
		justify-content: flex-start;
		padding: 16px 20px;
	}

	/* Alignée sur les chevrons, à l'autre bout de la bande. */
	.bb-instagram__fermer {
		top: 4px;
	}

	/* ⚠️ **Tout le reste du régime « sans légende » est déjà déclaré plus haut, et
	   ce n'est pas un hasard : c'est désormais la même disposition sur les deux
	   écrans.** Le cadre bascule en colonne, le bouton pèse dans le flux, le
	   panneau redevient une ligne, le lien se centre — quatre règles écrites une
	   seule fois. Ne reste ici que ce qui est propre au téléphone : le `1 1 auto`
	   de `.bb-instagram__texte` juste au-dessus ferait grandir une ligne qui n'a
	   rien à montrer, et le filet séparait une légende, pas un bouton. */
	.bb-instagram__texte--seul {
		flex: 0 0 auto;
		border-top: 0;
	}
}

/* ------------------------------------------------------------------ *
 * Accessibilité
 * ------------------------------------------------------------------ */

/* Portée à la galerie : le thème définit peut-être la sienne, on ne la touche
   pas, mais on ne dépend pas non plus de son existence. */
.bb-instagram .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.bb-instagram__vignette:focus-visible,
.bb-instagram__fleche:focus-visible,
.bb-instagram__puce:focus-visible,
.bb-instagram__fermer:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* ⚠️ **Le carré bleu au doigt est celui du navigateur, pas le nôtre.** Chrome
   sur Android peint un `-webkit-tap-highlight-color` sur la *boîte* de tout
   élément touché : nos boutons sont ronds, le voile est carré, et il débordait
   franchement du chevron. Le mettre à `transparent` ne retire aucun retour —
   `:is(:hover, :focus, :active)` en donne un, dessiné par nous et à la bonne
   forme. Portée à la galerie, jamais à la page : c'est un défaut de plateforme
   qu'on corrige sur nos éléments, pas une préférence qu'on impose au thème. */
.bb-instagram :is(button, a),
.bb-instagram__visionneuse :is(button, a) {
	-webkit-tap-highlight-color: transparent;
}

/* ⚠️ Lu aussi dans le JavaScript : `scrollTo({behavior})` doit valoir `auto`,
   sans quoi la préférence n'est respectée qu'à moitié. */
@media (prefers-reduced-motion: reduce) {
	.bb-instagram__bande,
	.bb-instagram__pieces {
		scroll-behavior: auto;
	}

	.bb-instagram__masque,
	.bb-instagram__puce {
		transition: none;
	}
}