/* Panoraven house styles for native blocks (mu-plugin panoraven-blocks.php). Colours of the site: blue #526add,
   text #4e5983, green #69c9ca. */

/* Table of contents, folded like the FAQ cards of panoraven.com. */
.wp-block-details.is-style-pano-sommaire {
	margin: 32px 0 40px;
	background: #fff;
	border: 1px solid #e3e8f8;
	border-radius: 12px;
	box-shadow: 0 2px 10px rgba(82, 106, 221, 0.08);
	overflow: hidden;
}
.wp-block-details.is-style-pano-sommaire > summary {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 18px 24px;
	list-style: none;
	cursor: pointer;
	font-weight: 600;
	color: #4e5983;
}
.wp-block-details.is-style-pano-sommaire > summary::-webkit-details-marker {
	display: none;
}
.wp-block-details.is-style-pano-sommaire > summary::before {
	content: "";
	flex: none;
	width: 22px;
	height: 22px;
	background: no-repeat center / 22px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23526add' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M8 6h13M8 12h13M8 18h13M3 6h.01M3 12h.01M3 18h.01'/%3E%3C/svg%3E");
}
.wp-block-details.is-style-pano-sommaire > summary::after {
	content: "";
	margin-left: auto;
	width: 10px;
	height: 10px;
	border-right: 2px solid #4e5983;
	border-bottom: 2px solid #4e5983;
	transform: rotate(-45deg);
	transition: transform 0.2s ease;
}
.wp-block-details.is-style-pano-sommaire[open] > summary::after {
	transform: rotate(45deg);
}
.wp-block-details.is-style-pano-sommaire[open] > summary {
	border-bottom: 1px solid #eef1fb;
}
.wp-block-details.is-style-pano-sommaire > :not(summary) {
	margin: 0;
	padding: 16px 24px 20px;
}
.wp-block-details.is-style-pano-sommaire ul,
.wp-block-details.is-style-pano-sommaire ol {
	text-align: left;
}
.wp-block-details.is-style-pano-sommaire > ol {
	padding-left: 48px;
}
.wp-block-details.is-style-pano-sommaire > ol > li {
	margin: 0 0 12px;
	line-height: 1.5;
	font-weight: 600;
}
.wp-block-details.is-style-pano-sommaire > ol > li::marker {
	color: #526add;
}
.wp-block-details.is-style-pano-sommaire a {
	color: #526add;
	text-decoration: none;
}
.wp-block-details.is-style-pano-sommaire a:hover {
	text-decoration: underline;
}

/* Step pills: a list read as a row of short links. */
.wp-block-list.is-style-pano-pastilles {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 10px 0 4px;
	padding: 0;
	list-style: none;
	text-align: left;
}
.wp-block-list.is-style-pano-pastilles > li {
	margin: 0;
	line-height: 1.2;
	font-weight: 400;
}
.wp-block-list.is-style-pano-pastilles > li > a {
	display: inline-block;
	padding: 6px 12px;
	border-radius: 999px;
	background-color: #eef2fd;
	color: #526add;
	font-size: 14px;
	text-decoration: none;
	transform: translateZ(0);
	transition: background-color 0.2s ease-out, color 0.2s ease-out;
}
/* Hover only on devices with a real pointer: no sticky hover on phones, and the pill keeps its state while the
   pointer crosses the gap to the next one (no fade out then in, which read as a flicker). */
@media (hover: hover) {
	.wp-block-list.is-style-pano-pastilles > li > a:hover,
	.wp-block-list.is-style-pano-pastilles > li > a:focus-visible {
		background-color: #526add;
		color: #fff;
		text-decoration: none;
	}
}

/* Summary box: a soft card that closes an article. */
.wp-block-group.is-style-pano-encadre {
	margin: 56px 0 32px;
	padding: 32px 36px;
	background: linear-gradient(135deg, #f3f6fe 0%, #eefaf9 100%);
	border: 1px solid #e3e8f8;
	border-radius: 16px;
}
.wp-block-group.is-style-pano-encadre > :first-child,
.wp-block-group.is-style-pano-encadre > .wp-block-group__inner-container > :first-child {
	margin-top: 0;
}
.wp-block-group.is-style-pano-encadre > :last-child,
.wp-block-group.is-style-pano-encadre > .wp-block-group__inner-container > :last-child {
	margin-bottom: 0;
}
/* The theme justifies body text; a box reads better aligned left. */
.wp-block-group.is-style-pano-encadre p,
.wp-block-group.is-style-pano-encadre li {
	text-align: left;
}
.wp-block-group.is-style-pano-encadre h2 {
	margin-bottom: 12px;
	font-size: 26px;
	line-height: 1.3;
}

/* Checklist: green ticks, tight lines. */
.wp-block-list.is-style-pano-checklist {
	margin: 16px 0 20px;
	padding: 0;
	list-style: none;
	text-align: left;
}
.wp-block-list.is-style-pano-checklist > li {
	position: relative;
	margin: 0 0 10px;
	padding-left: 36px;
	line-height: 1.6;
}
.wp-block-list.is-style-pano-checklist > li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 2px;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: #69c9ca no-repeat center / 12px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5l3.2 3L13 4.5'/%3E%3C/svg%3E");
}
.wp-block-list.is-style-pano-checklist strong {
	font-weight: 600;
	color: #4e5983;
}

@media (max-width: 600px) {
	.wp-block-group.is-style-pano-encadre {
		padding: 24px 20px;
	}
	.wp-block-details.is-style-pano-sommaire > summary,
	.wp-block-details.is-style-pano-sommaire > :not(summary) {
		padding-left: 18px;
		padding-right: 18px;
	}
	.wp-block-details.is-style-pano-sommaire > ol {
		padding-left: 36px;
	}
}

/* Open and close of the table of contents are animated by blocks.js; keep the content clipped meanwhile. */
.wp-block-details.is-style-pano-sommaire.is-opening,
.wp-block-details.is-style-pano-sommaire.is-closing {
	overflow: hidden;
}

/* A section reached from a link (or an address with #) shows its title below the fixed header. */
.entry-content [id] {
	scroll-margin-top: var(--pano-top-offset, 90px);
}

/* Emoji lines (✅, 📌, 1️⃣…): half the usual space between two of them. */
.entry-content p.is-style-pano-serre:has(+ p.is-style-pano-serre) {
	margin-bottom: 14px;
}
.entry-content p.is-style-pano-serre + p.is-style-pano-serre {
	margin-top: 0;
}

/* Short looping videos that replace animated images: 600 px wide at most on a computer, full column on a phone. */
.wp-block-video.pano-anim-600 {
	max-width: 600px;
	margin-left: auto;
	margin-right: auto;
}
.wp-block-video.pano-anim-600 video {
	display: block;
	width: 100%;
	height: auto;
}

/* Looping demo videos (blocks.js): until the video really plays, its poster shows in its place, without the play
   button a phone draws when it blocks playback. */
.wp-block-video.pano-video-wait {
	background: var(--pano-poster) center top / 100% auto no-repeat;
}
.wp-block-video.pano-video-wait video {
	opacity: 0;
}
.wp-block-video video {
	display: block;
	width: 100%;
	height: auto;
}

/* Status pill (a product on sale, new, rented…): a small label in the site's primary green, on the line of the title
   just above it. An extra class (Advanced > Additional CSS class) marks a product no longer sold new: pano-statut--occasion,
   --fin, --revendeurs (outlined); pano-statut--nouveau, --vente, --location keep the plain green. */
.entry-content h3:has(+ p.is-style-pano-statut) {
	display: inline-block;
	margin-right: 12px;
	vertical-align: baseline;
}
.entry-content p.is-style-pano-statut {
	display: inline-block;
	margin: 0 0 6px;
	padding: 2px 9px;
	border: 1px solid #69d3c2;
	border-radius: 999px;
	background: #69d3c2;
	color: #fff;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.02em;
	line-height: 1.3;
	vertical-align: baseline;
	white-space: nowrap;
}
.entry-content p.is-style-pano-statut.pano-statut--occasion,
.entry-content p.is-style-pano-statut.pano-statut--fin,
.entry-content p.is-style-pano-statut.pano-statut--revendeurs {
	background: #fff;
	color: #2a9d8f;
}
/* What follows the title and its pill starts on its own line. */
.entry-content p.is-style-pano-statut + * {
	margin-top: 18px;
}

/* Spec sheet: "label value" pairs in a card of the summary box's colours, two columns, a small icon per line chosen by
   an extra class on the list item (pano-i-prix, -sortie, -poids, -etancheite, -photo, -capteurs, -hdr, -video,
   -autonomie, -stockage). */
.wp-block-list.is-style-pano-fiche {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px 28px;
	margin: 18px 0 26px;
	padding: 16px 22px;
	list-style: none;
	border-radius: 16px;
	background: linear-gradient(135deg, rgba(81, 105, 221, 0.035) 0%, rgba(81, 105, 221, 0.075) 100%);
	border: 1px solid rgba(81, 105, 221, 0.1);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 6px 20px -14px rgba(78, 89, 131, 0.28);
	-webkit-backdrop-filter: blur(12px) saturate(140%);
	backdrop-filter: blur(12px) saturate(140%);
	text-align: left;
}
/* One size for the whole line: the label in capitals, the value and the icon (1.15em, centred on the first line). */
.wp-block-list.is-style-pano-fiche > li {
	position: relative;
	margin: 0;
	padding-left: 1.9em;
	color: #4e5983;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.6;
	text-align: left;
}
.wp-block-list.is-style-pano-fiche > li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.225em;
	width: 1.15em;
	height: 1.15em;
	background: #5169dd;
	-webkit-mask: no-repeat center / contain;
	mask: no-repeat center / contain;
}
.wp-block-list.is-style-pano-fiche > li > strong:first-child {
	color: #5169dd;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.01em;
	text-transform: uppercase;
}
.wp-block-list.is-style-pano-fiche > li > strong:first-child::after {
	content: "\00a0:";
}
/* English, Spanish and Portuguese put no space before a colon. */
.wp-block-list.is-style-pano-fiche > li > strong:first-child:lang(en)::after,
.wp-block-list.is-style-pano-fiche > li > strong:first-child:lang(es)::after,
.wp-block-list.is-style-pano-fiche > li > strong:first-child:lang(pt)::after {
	content: ":";
}
.wp-block-list.is-style-pano-fiche > li.pano-i-prix::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.6 13.4 13.4 20.6a2 2 0 0 1-2.8 0L3 13V3h10l7.6 7.6a2 2 0 0 1 0 2.8z'/%3E%3Ccircle cx='7.5' cy='7.5' r='1.5'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.6 13.4 13.4 20.6a2 2 0 0 1-2.8 0L3 13V3h10l7.6 7.6a2 2 0 0 1 0 2.8z'/%3E%3Ccircle cx='7.5' cy='7.5' r='1.5'/%3E%3C/svg%3E");
}
.wp-block-list.is-style-pano-fiche > li.pano-i-sortie::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E");
}
.wp-block-list.is-style-pano-fiche > li.pano-i-poids::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 9h11l2.5 11H4z'/%3E%3Ccircle cx='12' cy='5.5' r='2.5'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 9h11l2.5 11H4z'/%3E%3Ccircle cx='12' cy='5.5' r='2.5'/%3E%3C/svg%3E");
}
.wp-block-list.is-style-pano-fiche > li.pano-i-etancheite::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3c3.5 4.5 6 7.6 6 11a6 6 0 0 1-12 0c0-3.4 2.5-6.5 6-11z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3c3.5 4.5 6 7.6 6 11a6 6 0 0 1-12 0c0-3.4 2.5-6.5 6-11z'/%3E%3C/svg%3E");
}
.wp-block-list.is-style-pano-fiche > li.pano-i-photo::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8h3l2-3h6l2 3h3v12H4z'/%3E%3Ccircle cx='12' cy='13.5' r='3.5'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8h3l2-3h6l2 3h3v12H4z'/%3E%3Ccircle cx='12' cy='13.5' r='3.5'/%3E%3C/svg%3E");
}
.wp-block-list.is-style-pano-fiche > li.pano-i-capteurs::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='7' y='7' width='10' height='10' rx='1'/%3E%3Cpath d='M10 3v4M14 3v4M10 17v4M14 17v4M3 10h4M3 14h4M17 10h4M17 14h4'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='7' y='7' width='10' height='10' rx='1'/%3E%3Cpath d='M10 3v4M14 3v4M10 17v4M14 17v4M3 10h4M3 14h4M17 10h4M17 14h4'/%3E%3C/svg%3E");
}
.wp-block-list.is-style-pano-fiche > li.pano-i-hdr::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4'/%3E%3C/svg%3E");
}
.wp-block-list.is-style-pano-fiche > li.pano-i-video::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='6' width='13' height='12' rx='2'/%3E%3Cpath d='M16 10.5 21 7v10l-5-3.5z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='6' width='13' height='12' rx='2'/%3E%3Cpath d='M16 10.5 21 7v10l-5-3.5z'/%3E%3C/svg%3E");
}
.wp-block-list.is-style-pano-fiche > li.pano-i-autonomie::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='7' width='17' height='10' rx='2'/%3E%3Cpath d='M22 11v2M6 10v4M10 10v4'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='7' width='17' height='10' rx='2'/%3E%3Cpath d='M22 11v2M6 10v4M10 10v4'/%3E%3C/svg%3E");
}
.wp-block-list.is-style-pano-fiche > li.pano-i-stockage::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 3h8l4 4v14H7z'/%3E%3Cpath d='M10 3v4M13 3v4'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 3h8l4 4v14H7z'/%3E%3Cpath d='M10 3v4M13 3v4'/%3E%3C/svg%3E");
}

/* Pros and cons: two cards in the summary box's colours side by side (stacked on a phone), a coloured title, ticks for
   the pros, minus signs for the cons. */
.wp-block-group.is-style-pano-carte {
	height: 100%;
	margin: 0;
	padding: 20px 22px;
	border-radius: 16px;
	background: linear-gradient(135deg, rgba(81, 105, 221, 0.035) 0%, rgba(81, 105, 221, 0.075) 100%);
	border: 1px solid rgba(81, 105, 221, 0.1);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 6px 20px -14px rgba(78, 89, 131, 0.28);
	-webkit-backdrop-filter: blur(12px) saturate(140%);
	backdrop-filter: blur(12px) saturate(140%);
}
.wp-block-group.is-style-pano-carte > :first-child,
.wp-block-group.is-style-pano-carte > .wp-block-group__inner-container > :first-child {
	margin-top: 0;
}
/* Head: the title in small capitals and a short accent line below, in the card's colour (green for the pros, coral
   for the cons, the same colour as its list icons). */
.wp-block-group.is-style-pano-carte p {
	position: relative;
	margin: 0 0 16px;
	padding-bottom: 10px;
	text-align: left;
}
.wp-block-group.is-style-pano-carte p strong {
	color: #2a9d8f;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
.wp-block-group.is-style-pano-carte p::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 28px;
	height: 2px;
	border-radius: 2px;
	background: #2a9d8f;
}
.pano-pour-contre > .wp-block-column:last-child .is-style-pano-carte p strong {
	color: #d9705f;
}
.pano-pour-contre > .wp-block-column:last-child .is-style-pano-carte p::after {
	background: #d9705f;
}
.wp-block-group.is-style-pano-carte .wp-block-list {
	margin: 0;
}
.wp-block-group.is-style-pano-carte .wp-block-list > li {
	margin-bottom: 8px;
	padding-left: 30px;
	color: #4e5983;
	font-size: 16px;
	font-weight: 300;
	line-height: 1.5;
	text-align: left;
}
/* List icons of the cards: the round icons, as frosted glass (a translucent tint, a white rim, the sign in colour). */
.wp-block-group.is-style-pano-carte .wp-block-list > li::before {
	left: 0;
	top: 2px;
	width: 21px;
	height: 21px;
	box-sizing: border-box;
	border: 1px solid rgba(255, 255, 255, 0.95);
	background: rgba(105, 211, 194, 0.3) no-repeat center / 11px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%232a9d8f' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5l3.2 3L13 4.5'/%3E%3C/svg%3E");
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 1px 4px rgba(42, 157, 143, 0.22);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}
.wp-block-group.is-style-pano-carte .wp-block-list.is-style-pano-moins > li::before {
	background-color: rgba(232, 128, 111, 0.24);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23d9705f' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M4.5 8h7'/%3E%3C/svg%3E");
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 1px 4px rgba(217, 112, 95, 0.22);
}
.wp-block-group.is-style-pano-carte .wp-block-list > li:last-child {
	margin-bottom: 0;
}
.wp-block-list.is-style-pano-moins {
	margin: 16px 0 20px;
	padding: 0;
	list-style: none;
	text-align: left;
}
.wp-block-list.is-style-pano-moins > li {
	position: relative;
	margin: 0 0 10px;
	padding-left: 36px;
	line-height: 1.6;
}
.wp-block-list.is-style-pano-moins > li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 2px;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: #e8806f no-repeat center / 12px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M4 8h8'/%3E%3C/svg%3E");
}
.wp-block-columns.pano-pour-contre {
	gap: 20px;
	margin: 24px 0 8px;
}

@media (max-width: 600px) {
	.wp-block-list.is-style-pano-fiche {
		grid-template-columns: 1fr;
		gap: 12px;
		padding: 18px 18px;
	}
}

/* Verdict that closes a product sheet: a paragraph on the frosted green. */
.entry-content p.is-style-pano-verdict {
	margin: 28px 0 24px;
	padding: 20px 26px;
	border-radius: 16px;
	background: linear-gradient(135deg, rgba(105, 211, 194, 0.07) 0%, rgba(105, 211, 194, 0.15) 100%);
	border: 1px solid rgba(105, 211, 194, 0.22);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 6px 20px -14px rgba(42, 157, 143, 0.25);
	text-align: left;
}
@media (max-width: 600px) {
	.entry-content p.is-style-pano-verdict {
		padding: 16px 18px;
	}
	/* Same size as the article's text on a phone. The theme's ".page-terms-condition p, li" rule forces every list item
	   of the blog to 14px with !important below 568px; only !important wins over it. */
	.entry-content .wp-block-group.is-style-pano-carte .wp-block-list > li {
		font-size: 17px !important;
		line-height: 1.45;
	}
	.entry-content .wp-block-list.is-style-pano-fiche > li {
		font-size: 15px !important;
	}
	.wp-block-list.is-style-pano-fiche > li > strong:first-child {
		font-size: 14px;
	}
}
/* Tablets and small laptops: the article column is narrower, so the two columns of the sheet sit closer. */
@media (min-width: 601px) and (max-width: 1199px) {
	.wp-block-list.is-style-pano-fiche {
		column-gap: 16px;
		padding-left: 16px;
		padding-right: 16px;
	}
}
/* Small phones (360 to 380px): a little less side padding so that every spec line stays on one line. */
@media (max-width: 380px) {
	.wp-block-list.is-style-pano-fiche {
		padding-left: 14px;
		padding-right: 12px;
	}
}

/* Title of a product sheet: a small green dot before it, drawn by the stylesheet so that it is not part of the title's
   text, to find each sheet at a glance while scrolling. */
.entry-content h3.is-style-pano-titre::before {
	content: "";
	display: inline-block;
	width: 0.45em;
	height: 0.45em;
	margin-right: 0.55em;
	border-radius: 50%;
	background: #69d3c2;
	box-shadow: 0 0 0 0.18em rgba(105, 211, 194, 0.22);
	vertical-align: 0.12em;
}

/* Separator between two product sheets: the three light dots of the 2025 articles (Stackable divider, colour #e8effa,
   75px above, 30px below), on the native separator block (extra class pano-points). */
.entry-content hr.wp-block-separator.pano-points {
	width: 120px;
	max-width: 120px;
	height: 8px;
	margin: 75px auto 30px;
	border: 0;
	/* WordPress clears the background of its dots separator with !important; only !important draws ours. */
	background: radial-gradient(circle, #dfe6f6 3.5px, transparent 4px) 0 0 / 40px 8px repeat-x !important;
	opacity: 1;
}
.entry-content hr.wp-block-separator.pano-points::before,
.entry-content hr.wp-block-separator.pano-points::after {
	content: none;
}
/* Between the steps of a tutorial (dots followed by a plain step title, not a product sheet): short sections, so less
   white, and the dots in the middle of it, the same 40px above and below (the space below is the title's own margin).
   Everywhere else the dots keep the spacing above. */
.entry-content hr.wp-block-separator.pano-points:has(+ h3:not(.is-style-pano-titre)) {
	margin: 40px auto 0;
}
.entry-content hr.wp-block-separator.pano-points + h3:not(.is-style-pano-titre) {
	margin-top: 40px;
}

/* ==========================================================================
   Panoraven: new styles for the blog boxes (validated on 23-10-2026).
   Append to wp-content/mu-plugins/panoraven-blocks/blocks.css, AFTER the
   existing rules: these rules override some of them on purpose.
   Unchanged: title (is-style-pano-titre), status pills, spec sheet (is-style-pano-fiche),
   pros and cons (is-style-pano-carte), separator (pano-points).
   ========================================================================== */

/* --- 2. Table of contents as a route: rings joined by a vertical line ------------------------- */
/* Hybrid kept on 24-10-2026: the white card and the filled light blue pills of the first version (easier to see),
   with the rings of the route. The card itself keeps the first rules of this file. */
.wp-block-details.is-style-pano-sommaire > summary {
	padding: 16px 22px;
	color: #2f3863;
}
/* Icon: a sphere with its equator (replaces the previous icon). */
.wp-block-details.is-style-pano-sommaire > summary::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235169dd' stroke-width='1.6'%3E%3Cellipse cx='12' cy='12' rx='9' ry='9'/%3E%3Cellipse cx='12' cy='12' rx='9' ry='3.5'/%3E%3C/svg%3E");
}
.wp-block-details.is-style-pano-sommaire > ol {
	position: relative;
	margin: 0;
	/* 26px: the rings sit under the header icon (centre 33px) and the titles start under the header text. */
	padding: 18px 22px 10px 26px;
	list-style: none;
}
/* The line that joins the rings: from the first ring to the last one. Its bottom end assumes that
   the last part's title fits on one line (true in FR, EN and ES at 750 px). */
.wp-block-details.is-style-pano-sommaire > ol::before {
	content: "";
	position: absolute;
	left: 32.25px;
	top: 30px;
	bottom: 34px;
	width: 1.5px;
	background: rgba(81, 105, 221, 0.18);
}
.wp-block-details.is-style-pano-sommaire > ol > li {
	position: relative;
	margin: 0 0 14px;
	padding-left: 30px;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.5;
	/* The theme justifies list items on phones: a title that wraps gets wide gaps. */
	text-align: left;
}
.wp-block-details.is-style-pano-sommaire > ol > li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 5px;
	width: 14px;
	height: 14px;
	box-sizing: border-box;
	border: 2px solid #526add;
	border-radius: 50%;
	/* White at rest; filled like a pill when its title is hovered. */
	background: #fff;
	transition: background-color 0.2s ease-out;
}
@media (hover: hover) {
	.wp-block-details.is-style-pano-sommaire > ol > li:has(> a:hover)::before,
	.wp-block-details.is-style-pano-sommaire > ol > li:has(> a:focus-visible)::before {
		background-color: #526add;
	}
}
/* Pills of the sheets, inside the table of contents: light blue at rest (as in the first version), filled on hover. */
.wp-block-details.is-style-pano-sommaire .wp-block-list.is-style-pano-pastilles {
	margin: 10px 0 0;
}
.wp-block-details.is-style-pano-sommaire .wp-block-list.is-style-pano-pastilles > li > a {
	padding: 5px 12px;
	background-color: #eef2fd;
	border: 1px solid transparent;
	transition: background-color 0.2s ease-out, color 0.2s ease-out, border-color 0.2s ease-out;
}
@media (hover: hover) {
	.wp-block-details.is-style-pano-sommaire .wp-block-list.is-style-pano-pastilles > li > a:hover,
	.wp-block-details.is-style-pano-sommaire .wp-block-list.is-style-pano-pastilles > li > a:focus-visible {
		background-color: #526add;
		border-color: #526add;
		color: #fff;
	}
}
@media (max-width: 600px) {
	.wp-block-details.is-style-pano-sommaire > summary,
	.wp-block-details.is-style-pano-sommaire > ol {
		padding-left: 18px;
		padding-right: 18px;
	}
	.wp-block-details.is-style-pano-sommaire > ol {
		padding-left: 22px;
	}
	.wp-block-details.is-style-pano-sommaire > ol::before {
		left: 28.25px;
	}
}

/* --- 3. Verdict with a stamp: only on the sheets that are a first choice -----------------------
   Extra class on the verdict paragraph (Advanced > Additional CSS class): pano-verdict--choix.
   The year is written here: update it with the article. */
.entry-content p.is-style-pano-verdict.pano-verdict--choix {
	position: relative;
	min-height: 92px;
	padding-right: 150px;
}
.entry-content p.is-style-pano-verdict.pano-verdict--choix::before {
	content: "Notre\A 1er choix\A 2026";
	position: absolute;
	right: 26px;
	top: 50%;
	display: grid;
	place-content: center;
	width: 92px;
	height: 92px;
	box-sizing: border-box;
	border: 1.5px solid #2a9d8f;
	border-radius: 50%;
	outline: 1px solid rgba(42, 157, 143, 0.3);
	outline-offset: 3px;
	color: #2a9d8f;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.06em;
	line-height: 1.3;
	text-align: center;
	text-transform: uppercase;
	white-space: pre;
	transform: translateY(-50%) rotate(-8deg);
}
/* The stamp in the language of the page (WPML sets lang="en-US" / "es-ES" / "pt-BR" on the page). */
.entry-content p.is-style-pano-verdict.pano-verdict--choix:lang(en)::before {
	content: "Our\A top pick\A 2026";
}
.entry-content p.is-style-pano-verdict.pano-verdict--choix:lang(es)::before {
	content: "Nuestra\A 1.ª opción\A 2026";
}
.entry-content p.is-style-pano-verdict.pano-verdict--choix:lang(pt)::before {
	content: "A nossa\A 1ª escolha\A 2026";
}
/* Phone: the stamp, a little smaller, floats at the top right and the text flows around it. */
@media (max-width: 600px) {
	.entry-content p.is-style-pano-verdict.pano-verdict--choix {
		min-height: 0;
		padding-right: 18px;
	}
	.entry-content p.is-style-pano-verdict.pano-verdict--choix::before {
		position: static;
		float: right;
		width: 76px;
		height: 76px;
		margin: 4px 2px 8px 14px;
		font-size: 10.5px;
		transform: rotate(-8deg);
	}
}

/* --- 4. Call to action box: title, text, then a foot with short mentions and the button -------
   Replaces the previous look of is-style-pano-encadre (gradient → frosted glass).
   Block structure: see README, section "Encadrés d'appel à l'action". */
.wp-block-group.is-style-pano-encadre {
	margin: 40px 0 24px;
	padding: 24px 28px;
	border-radius: 18px;
	background: linear-gradient(135deg, rgba(81, 105, 221, 0.035) 0%, rgba(81, 105, 221, 0.075) 100%);
	border: 1px solid rgba(81, 105, 221, 0.1);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 6px 20px -14px rgba(78, 89, 131, 0.28);
}
/* Title: the first paragraph, only in the boxes with a foot (older boxes open with a heading or a plain sentence). */
.wp-block-group.is-style-pano-encadre:has(.pano-encadre-pied) > p:first-child,
.wp-block-group.is-style-pano-encadre:has(.pano-encadre-pied) > .wp-block-group__inner-container > p:first-child {
	margin: 0 0 6px;
	color: #2f3863;
	font-size: 18px;
	font-weight: 600;
	line-height: 1.4;
}
.wp-block-group.is-style-pano-encadre p {
	margin: 0;
	font-size: 16px;
	font-weight: 300;
	line-height: 28px;
}
/* Foot: a full-width strip under a thin line; mentions on the left, the button on the right. */
.wp-block-group.is-style-pano-encadre .pano-encadre-pied {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 20px;
	margin: 18px -28px -24px;
	padding: 14px 18px 14px 28px;
	border-top: 1px solid rgba(81, 105, 221, 0.1);
}
.wp-block-group.is-style-pano-encadre .pano-encadre-pied > .wp-block-group__inner-container {
	display: contents;
}
/* The earlier "last child: no bottom margin" rule of the box is more specific: the foot must still reach the edge. */
.wp-block-group.is-style-pano-encadre > .pano-encadre-pied:last-child,
.wp-block-group.is-style-pano-encadre > .wp-block-group__inner-container > .pano-encadre-pied:last-child {
	margin-bottom: -24px;
}
/* Mentions: new block style on core/list, register it as 'pano-mentions'. */
.wp-block-list.is-style-pano-mentions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 18px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.wp-block-list.is-style-pano-mentions > li {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	color: #2f3863;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.4;
}
/* Same tick as the pros card (.is-style-pano-carte li::before): reuse its data URI. */
.wp-block-list.is-style-pano-mentions > li::before {
	content: "";
	flex: none;
	width: 21px;
	height: 21px;
	box-sizing: border-box;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, 0.95);
	background: rgba(105, 211, 194, 0.3) no-repeat center / 11px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%232a9d8f' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5l3.2 3L13 4.5'/%3E%3C/svg%3E");
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 1px 4px rgba(42, 157, 143, 0.22);
}
.wp-block-group.is-style-pano-encadre .wp-block-buttons {
	margin: 0;
}
.wp-block-group.is-style-pano-encadre .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 12px 22px;
	border-radius: 999px;
	background: #5169dd;
	color: #fff;
	font-size: 15.5px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: normal;
	/* The theme writes its buttons in capitals with wide spacing. */
	text-transform: none;
	text-decoration: none;
	white-space: nowrap;
	box-shadow: 0 6px 16px -10px rgba(81, 105, 221, 0.7);
	transform: translateZ(0);
	transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.wp-block-group.is-style-pano-encadre .wp-block-button__link::after {
	content: "→";
}
@media (hover: hover) {
	.wp-block-group.is-style-pano-encadre .wp-block-button__link:hover,
	.wp-block-group.is-style-pano-encadre .wp-block-button__link:focus-visible {
		color: #fff;
		text-decoration: none;
		transform: translateY(-2px);
		box-shadow: 0 12px 22px -12px rgba(81, 105, 221, 0.75);
	}
}
.wp-block-group.is-style-pano-encadre .wp-block-button__link:focus-visible {
	outline: 2px solid #5169dd;
	outline-offset: 3px;
}
@media (max-width: 600px) {
	.wp-block-group.is-style-pano-encadre {
		padding: 22px 20px;
	}
	.wp-block-group.is-style-pano-encadre .pano-encadre-pied {
		margin: 16px -20px -22px;
		padding: 14px 20px 16px;
	}
	.wp-block-group.is-style-pano-encadre > .pano-encadre-pied:last-child,
	.wp-block-group.is-style-pano-encadre > .wp-block-group__inner-container > .pano-encadre-pied:last-child {
		margin-bottom: -22px;
	}
	.wp-block-group.is-style-pano-encadre .wp-block-buttons,
	.wp-block-group.is-style-pano-encadre .wp-block-button,
	.wp-block-group.is-style-pano-encadre .wp-block-button__link {
		width: 100%;
	}
	/* The theme forces list items to 14px !important below 568px. */
	.entry-content .wp-block-list.is-style-pano-mentions > li {
		font-size: 15px !important;
	}
}

/* Images opened full screen on click (zoom.js, PhotoSwipe): a dark veil in the site's ink colour; the photo zooms in
   from its place. */
/* the page under the viewer takes the veil's colour while it is open (zoom.js): the margins of a phone turned sideways,
   which no page can paint, are filled with it */
html.pano-viewer-open,
html.pano-viewer-open body {
	background: #171b2e;
}
.pswp.pswp {
	--pswp-bg: #171b2e;
	/* above everything, the consent banner included */
	--pswp-root-z-index: 2147483000;
}
/* The viewer's cross and magnifier, redrawn as line icons (zoom.js): 24px, centred in PhotoSwipe's 50 x 60 button. */
.pswp .pswp__icn.pano-icn {
	top: 18px;
	left: 13px;
	width: 24px;
	height: 24px;
	fill: none;
	stroke: var(--pswp-icon-color);
}
/* Pan hint (zoom.js): two light bars once an image is zoomed in, the bright part being what is on screen. */
.pano-pan {
	position: absolute;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.16);
	box-shadow: 0 0 3px rgba(23, 27, 46, 0.35);  /* still seen over a light image */
	opacity: 0;
	transition: opacity 0.25s ease;
	pointer-events: none;
}
.pano-pan.is-on {
	opacity: 1;
}
.pano-pan::after {
	content: "";
	position: absolute;
	border-radius: inherit;
	background: rgba(255, 255, 255, 0.7);
}
.pano-pan--across {
	left: 50%;
	bottom: 14px;
	width: 96px;
	height: 3px;
	margin-left: -48px;
}
.pano-pan--across::after {
	top: 0;
	bottom: 0;
	left: calc(var(--at, 0) * (1 - var(--part, 1)) * 100%);
	width: calc(var(--part, 1) * 100%);
}
.pano-pan--down {
	top: 50%;
	right: 10px;
	width: 3px;
	height: 96px;
	margin-top: -48px;
}
.pano-pan--down::after {
	left: 0;
	right: 0;
	top: calc(var(--at, 0) * (1 - var(--part, 1)) * 100%);
	height: calc(var(--part, 1) * 100%);
}
/* No magnifier cursor on hover: readers click an image they want larger anyway, and the cursor changing over every
   image was distracting. Once open, the magnifier with a minus says a click closes it (photoswipe.css). */
.pano-zoom img {
	/* the double tap is ours (opens the image zoomed), not the browser's page zoom */
	touch-action: manipulation;
}

/* Demo videos opened full screen (zoom.js): as large as the screen allows, ratio kept; a phone turned sideways fills
   the screen. The small button in the corner of the video says it can be enlarged. */
.pano-zoom.wp-block-video {
	position: relative;
}
.pano-zoom-video {
	position: absolute;
	top: 10px;
	right: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(23, 27, 46, 0.55);
	color: #fff;
	cursor: pointer;
	transition: background 0.2s ease, transform 0.2s ease;
}
.pano-zoom-video:hover,
.pano-zoom-video:focus-visible {
	background: rgba(23, 27, 46, 0.85);
	transform: scale(1.06);
}
.pano-zoom-video:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}
.pano-pswp-video {
	--pano-ratio: 1.88;  /* the demo videos' usual proportions, until zoom.js knows the real ones */
	--pano-gap: 14px;
	--pano-caption: 3.2em;
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--pano-gap);
	padding: 64px 24px 24px;
	box-sizing: border-box;
	/* the frame below is sized on the room really left inside the viewer (cqw / cqh), whatever the browser counts as
	   the screen height */
	container-type: size;
}
/* the frame keeps the video's ratio and fits the screen, room left for the caption */
.pano-pswp-frame {
	position: relative;
	overflow: hidden;
	width: min(100cqw, calc((100cqh - var(--pano-gap) - var(--pano-caption)) * var(--pano-ratio)));
	aspect-ratio: var(--pano-ratio);
	/* the poster fills the frame without ever spilling past the video's edges */
	background: #232842 center / contain no-repeat;
}
.pano-pswp-frame video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	transition: opacity 0.35s ease;
}
.pano-pswp-frame.is-loading video {
	opacity: 0;
}
/* loading: the light sweep of the app (super-resolution comparison), over the dimmed poster, until the video plays */
.pano-pswp-sweep {
	position: absolute;
	inset: -20% auto -20% 0;
	width: 45%;
	transform: translateX(-140%) skewX(-20deg);
	background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.35), transparent);
	pointer-events: none;
	opacity: 0;
}
.pano-pswp-frame.is-loading {
	box-shadow: inset 0 0 0 100vmax rgba(23, 27, 46, 0.25);
}
.pano-pswp-frame.is-loading .pano-pswp-sweep {
	opacity: 1;
	animation: pano-sweep 1.3s ease-in-out infinite;
}
@keyframes pano-sweep {
	from {
		transform: translateX(-140%) skewX(-20deg);
	}
	to {
		transform: translateX(340%) skewX(-20deg);
	}
}
@media (prefers-reduced-motion: reduce) {
	.pano-pswp-frame.is-loading .pano-pswp-sweep {
		animation-duration: 3s;
	}
}
.pano-pswp-caption {
	max-width: 760px;
	margin: 0;
	padding: 0 16px;
	color: rgba(255, 255, 255, 0.82);
	font-size: 15px;
	font-style: italic;
	line-height: 1.45;
	text-align: center;
	transition: opacity 0.25s ease;
}
/* an image's caption, right under the image once zoom.js has measured it (is-placed, --pano-below), at the bottom of
   the screen until then (zoom.js keeps room for it there); hidden while the image is zoomed in */
.pano-pswp-caption--image {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 24px;
	margin: 0 auto;
	pointer-events: none;
}
.pano-pswp-caption--image.is-placed {
	top: var(--pano-below);
	bottom: auto;
}
/* zooming in, it leaves fast, before the zoom (zoom.js); it comes back more gently */
.pano-pswp-caption--image.is-hidden {
	opacity: 0;
	transition-duration: 0.1s;
}
/* "turn the screen" animation under a video's caption (zoom.js, the app's Lottie in its blog version): phone held
   upright only, unseen at rest; it fades in when it starts and fades out once it has ended */
.pano-pswp-rotate {
	display: none;
}
.pano-pswp-rotate-anim {
	width: 100px;
	height: 100px;
	opacity: 0;
	transition: opacity 0.45s ease;
}
.pano-pswp-rotate.is-playing .pano-pswp-rotate-anim {
	opacity: 1;
	transition-duration: 0.3s;  /* in before the phone starts turning (0.375 s into the animation) */
}
/* phone held upright: the video and its caption stay centred; the animation sits in the middle of the free space
   between the caption and the bottom of the screen (the last grid row; -24px makes up for the viewer's bottom padding) */
@media (orientation: portrait) and (pointer: coarse) {
	.pano-pswp-video {
		display: grid;
		grid-template-rows: 1fr auto auto 1fr;
		justify-items: center;
		align-items: center;
		gap: 0;
	}
	.pano-pswp-video > .pano-pswp-frame {
		grid-row: 2;
	}
	.pano-pswp-video > .pano-pswp-caption {
		grid-row: 3;
		margin-top: var(--pano-gap);
	}
	.pano-pswp-rotate {
		display: block;
		grid-row: 4;
		margin-bottom: -24px;
	}
}
/* phone held upright: the video takes the whole width */
@media (max-width: 767px) {
	.pano-pswp-video {
		padding: 56px 0 24px;
	}
}
/* phone turned sideways: the video takes the whole height, without its caption; an image's caption sits on the image,
   at the bottom, and hides with the controls (a tap) */
@media (max-height: 500px) {
	.pano-pswp-video {
		padding: 0;
	}
	.pano-pswp-frame {
		width: min(100cqw, calc(100cqh * var(--pano-ratio)));
	}
	.pano-pswp-caption {
		position: absolute;
		left: 0;
		right: 0;
		top: auto;
		bottom: 0;
		max-width: none;
		padding: 28px 16px 10px;
		background: linear-gradient(transparent, rgba(23, 27, 46, 0.85));
	}
	.pano-pswp-caption--image.is-placed {
		top: auto;
		bottom: 0;
	}
	/* a video turned sideways is watched full screen: no caption over it */
	.pano-pswp-video .pano-pswp-caption {
		display: none;
	}
	.pswp:not(.pswp--ui-visible) .pano-pswp-caption {
		opacity: 0;
	}
}

/* Before / after slider, same design as the home page showcase (shortcode pano_comparateur, blocks.js). */
.entry-content .pano-comparateur {
	--pos: 50%;
	position: relative;
	width: 100%;
	max-width: 100%;
	margin: 0 0 12px;
	overflow: hidden;
	border-radius: 8px;
	cursor: ew-resize;
	touch-action: pan-y;
	user-select: none;
	-webkit-user-select: none;
	outline: none;
}
.entry-content .pano-comparateur img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	object-fit: cover;
	pointer-events: none;
	-webkit-user-drag: none;
}
.pano-c-couche {
	position: absolute;
	inset: 0;
	display: block;
}
.pano-c-avant {
	clip-path: inset(0 calc(100% - var(--pos)) 0 0);
}
.pano-c-pill {
	position: absolute;
	top: 10px;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	height: 26px;
	padding: 0 3px 0 3px;
	border-radius: 13px;
	background: rgba(0, 0, 0, 0.5);
	color: #fff;
	font: 600 12px/1 Nunito, sans-serif;
	pointer-events: none;
}
.pano-c-pill svg {
	width: 20px;
	height: 20px;
}
.pano-c-pill-avant {
	left: 10px;
	padding-right: 12px;
}
.pano-c-pill-avant svg {
	fill: #bdbdbd;
}
.pano-c-pill-apres {
	right: 10px;
	padding-left: 12px;
}
.pano-c-pill-apres svg {
	fill: #69d3c2;
}
.pano-c-ligne {
	position: absolute;
	top: 0;
	bottom: 0;
	left: var(--pos);
	width: 1.5px;
	margin-left: -0.75px;
	background: #fff;
	pointer-events: none;
}
.pano-c-poignee {
	position: absolute;
	top: 50%;
	left: 50%;
	display: flex;
	gap: 30px;
	transform: translate(-50%, -50%);
	animation: pano-c-respire 1.5s ease-in-out infinite;
}
.pano-comparateur:hover .pano-c-poignee,
.pano-comparateur.is-used .pano-c-poignee {
	animation: none;
}
.pano-c-poignee svg {
	display: block;
	width: 14px;
	height: 19px;
}
.pano-c-droite {
	transform: scaleX(-1);
}
@keyframes pano-c-respire {
	50% {
		gap: 40px;
	}
}
@media (prefers-reduced-motion: reduce) {
	.pano-c-poignee {
		animation: none;
	}
}

/* 360 version on computers (comparateur360.js): the canvas replaces the fixed images once its strips are loaded. */
.pano-c-canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
}
.pano-comparateur-360.is-3d .pano-c-fond,
.pano-comparateur-360.is-3d .pano-c-avant:not(.pano-c-pills) {
	display: none;
}
.pano-comparateur-360.is-desktop {
	cursor: grab;
	touch-action: none;
}
.pano-comparateur-360.is-drag {
	cursor: grabbing;
}
.pano-c-pills {
	pointer-events: none;
}
.pano-comparateur-360 .pano-c-ligne,
.pano-comparateur-360 .pano-c-pills {
	transition: opacity 0.25s ease;
}
.pano-comparateur-360.is-nav .pano-c-ligne,
.pano-comparateur-360.is-nav .pano-c-pills {
	opacity: 0;
}
.pano-c-pills:not(.pano-c-avant) {
	clip-path: inset(0 0 0 var(--pos));
}
/* Phones and tablets: the home page slider (FeatureShowcaseMobile.vue), images fixed. */
img-comparison-slider.pano-cm {
	display: block;
	width: 100%;
	margin: 0 0 12px;
	--divider-width: 1.5px;
	--divider-color: rgba(255, 255, 255, 0.9);
	--divider-shadow: 0 0 6px rgba(0, 0, 0, 0.35);
	outline: none;
	overflow: hidden;
	border-radius: 8px;
	touch-action: pan-y pinch-zoom;
	visibility: hidden;
}
img-comparison-slider.pano-cm.rendered {
	visibility: inherit;
}
img-comparison-slider.pano-cm [slot='second'] {
	display: none;
}
img-comparison-slider.pano-cm.rendered [slot='second'] {
	display: block;
}
.entry-content .pano-cm figure {
	position: relative;
	margin: 0;
	aspect-ratio: var(--pano-cm-format, 2 / 1);
}
.entry-content .pano-cm picture {
	display: block;
	width: 100%;
	height: 100%;
}
.entry-content .pano-cm img {
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	object-fit: cover;
}
.pano-cm-chip {
	position: absolute;
	top: 8px;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	height: 22px;
	padding: 0 9px;
	border-radius: 999px;
	color: #fff;
	font: 600 11px/22px Nunito, sans-serif;
	letter-spacing: 0.02em;
	white-space: nowrap;
	pointer-events: none;
}
.pano-cm-avant {
	left: 8px;
	background: rgba(15, 18, 28, 0.62);
}
.pano-cm-apres {
	right: 8px;
	background: linear-gradient(135deg, #526ade, #69d3c2);
	box-shadow: 0 4px 12px rgba(82, 106, 222, 0.45);
}
.pano-cm-poignee {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	color: #fff;
	cursor: ew-resize;
	touch-action: none;
}
.pano-cm-poignee svg {
	overflow: visible;
	filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 6px rgba(0, 0, 0, 0.35));
}
.pano-cm-f {
	animation: pano-cm-gauche 2.4s ease-in-out infinite;
}
.pano-cm-d {
	animation-name: pano-cm-droite;
}
.pano-cm:focus .pano-cm-f,
.pano-cm:active .pano-cm-f {
	animation: none;
}
@keyframes pano-cm-gauche {
	50% {
		transform: translateX(-3px);
	}
}
@keyframes pano-cm-droite {
	50% {
		transform: translateX(3px);
	}
}
/* The slider's frame: phone crop, full screen button, full screen itself (fixed, because iPhones refuse the Fullscreen
   API on anything but a video). */
.pano-cm-cadre {
	position: relative;
	margin: 0 0 12px;
}
.pano-cm-cadre img-comparison-slider.pano-cm {
	margin: 0;
}
@media (max-width: 600px) and (orientation: portrait) {
	.entry-content .pano-cm-tel .pano-cm figure {
		aspect-ratio: 4 / 5;
	}
}
.entry-content .pano-cm-plein {
	position: absolute;
	right: 10px;
	bottom: 10px;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(34, 40, 64, 0.55);
	box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.28);
	color: #fff;
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	cursor: pointer;
}
.pano-cm-plein svg {
	display: block;
	width: 20px;
	height: 20px;
}
.pano-cm-fermer,
.is-plein .pano-cm-ouvrir {
	display: none;
}
.is-plein .pano-cm-fermer {
	display: inline;
}
.pano-cm-cadre.is-plein {
	position: fixed;
	inset: 0;
	z-index: 2147483000;
	margin: 0;
	background: #000;
}
.is-plein img-comparison-slider.pano-cm {
	width: 100vw;
	height: 100vh;
	height: 100dvh;
	border-radius: 0;
	touch-action: none;
}
.entry-content .is-plein .pano-cm figure {
	width: 100vw;
	height: 100vh;
	height: 100dvh;
	aspect-ratio: auto;
}
/* The theme's image height wins over the slider's otherwise; it only shows once the frame is taller than the crop. */
.entry-content .is-plein .pano-cm img {
	height: 100% !important;
}
.entry-content .is-plein .pano-cm-plein {
	right: calc(10px + env(safe-area-inset-right));
	bottom: calc(10px + env(safe-area-inset-bottom));
}
html.pano-cm-bloque,
html.pano-cm-bloque body {
	overflow: hidden;
}
@media (pointer: fine) and (hover: hover) and (min-width: 768px) {
	img-comparison-slider.pano-cm,
	.pano-cm-cadre {
		display: none;
	}
}
@media not all and (pointer: fine) and (hover: hover) and (min-width: 768px) {
	.entry-content .pano-comparateur-360 {
		display: none;
	}
}

/* Images with a phone version: two native image blocks, one shown at a time. */
.pano-seul-tel {
	display: none !important;
}
@media (max-width: 600px) {
	.pano-seul-tel {
		display: block !important;
	}
	.pano-seul-ordi {
		display: none !important;
	}
}

/* Dots above a big title: the same white above as below (the title's own margin), for the articles that ask for it. */
.entry-content hr.wp-block-separator.pano-points.pano-points-egal {
	margin-top: 60px;
	margin-bottom: 0;
}
@media (max-width: 600px) {
	.entry-content hr.wp-block-separator.pano-points.pano-points-egal {
		margin-top: 56px;
	}
}

/* The summary box: glass, white pill with a stopwatch, ticks (the look of the beginner's guide). */
.entry-content .wp-block-group.pano-essentiel {
	margin: 28px 0;
	padding: 24px 28px;
	border-radius: 16px;
	background: linear-gradient(135deg, rgba(81, 105, 221, 0.035), rgba(81, 105, 221, 0.075));
	border: 1px solid rgba(81, 105, 221, 0.1);
}
.entry-content .pano-essentiel > :last-child,
.entry-content .pano-essentiel li:last-child {
	margin-bottom: 0;
}
.entry-content .wp-block-group.pano-essentiel ul.wp-block-list {
	margin: 0;
	padding-bottom: 0;
}
.entry-content .pano-essentiel li {
	text-align: left;
}
.entry-content .pano-essentiel p.pano-essentiel-titre {
	display: inline-block;
	margin: 0 0 16px;
	padding: 4px 14px 4px 36px;
	border: 1px solid #e1e6f8;
	border-radius: 999px;
	background: #fff no-repeat 12px center / 18px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23526ADD' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='13.5' r='7.5'/%3E%3Cpath d='M12 9.5v4l2.5 2M9.5 2.5h5M12 2.5V6'/%3E%3C/svg%3E");
	color: #2f3863;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.6;
}
@media (max-width: 600px) {
	.entry-content .wp-block-group.pano-essentiel {
		padding: 18px;
	}
}