/*
 * Parresia-F Formats — front-end styles.
 * Prefix pff-: neutral names, nothing that ad blockers' lists look for.
 */

/* ===== Text overlay ===================================================== */

.pff-media {
	position: relative;
	display: inline-block;
	vertical-align: top;
	max-width: 100%;
	line-height: 0;
}

.pff-media > img {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
}

.pff-ov {
	position: absolute;
	inset: 0;
	z-index: 1;
	overflow: hidden;
	container-type: size;
	color: #fff;
	font-family: inherit;
	line-height: 1.2;
	text-align: left;
	pointer-events: none;
}

.pff-ov--dark {
	color: #111;
}

.pff-ov__in {
	position: absolute;
	inset: 0;
	display: flex;
	box-sizing: border-box;
	padding: clamp(8px, 6cqmin, 32px);
}

/* Readability layer, drawn by a child of the container so that container queries apply to it. */
.pff-ov__in::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
}

.pff-ov--grad.pff-ov--light .pff-ov__in::before {
	background: linear-gradient(to top, rgba(0, 0, 0, .74) 0%, rgba(0, 0, 0, .38) 42%, rgba(0, 0, 0, 0) 74%);
}

.pff-ov--grad.pff-ov--dark .pff-ov__in::before {
	background: linear-gradient(to top, rgba(255, 255, 255, .9) 0%, rgba(255, 255, 255, .5) 42%, rgba(255, 255, 255, 0) 74%);
}

.pff-ov--grad.pff-ov--tl .pff-ov__in::before {
	transform: scaleY(-1);
}

.pff-ov--grad.pff-ov--light.pff-ov--l .pff-ov__in::before {
	background: linear-gradient(to right, rgba(0, 0, 0, .74) 0%, rgba(0, 0, 0, .38) 40%, rgba(0, 0, 0, 0) 68%);
}

.pff-ov--grad.pff-ov--light.pff-ov--r .pff-ov__in::before {
	background: linear-gradient(to left, rgba(0, 0, 0, .74) 0%, rgba(0, 0, 0, .38) 40%, rgba(0, 0, 0, 0) 68%);
}

.pff-ov--grad.pff-ov--dark.pff-ov--l .pff-ov__in::before {
	background: linear-gradient(to right, rgba(255, 255, 255, .9) 0%, rgba(255, 255, 255, .5) 40%, rgba(255, 255, 255, 0) 68%);
}

.pff-ov--grad.pff-ov--dark.pff-ov--r .pff-ov__in::before {
	background: linear-gradient(to left, rgba(255, 255, 255, .9) 0%, rgba(255, 255, 255, .5) 40%, rgba(255, 255, 255, 0) 68%);
}

.pff-ov--grad.pff-ov--light.pff-ov--c .pff-ov__in::before {
	background: rgba(0, 0, 0, .42);
}

.pff-ov--grad.pff-ov--dark.pff-ov--c .pff-ov__in::before {
	background: rgba(255, 255, 255, .62);
}

.pff-ov--bl .pff-ov__in { align-items: flex-end; justify-content: flex-start; }
.pff-ov--bc .pff-ov__in { align-items: flex-end; justify-content: center; text-align: center; }
.pff-ov--tl .pff-ov__in { align-items: flex-start; justify-content: flex-start; }
.pff-ov--c .pff-ov__in { align-items: center; justify-content: center; text-align: center; }
.pff-ov--l .pff-ov__in { align-items: center; justify-content: flex-start; }
.pff-ov--r .pff-ov__in { align-items: center; justify-content: flex-end; }

.pff-ov__body {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: clamp(3px, 1.8cqmin, 10px);
	min-width: 0;
	max-width: 100%;
}

.pff-ov--bc .pff-ov__body,
.pff-ov--c .pff-ov__body {
	align-items: center;
}

.pff-ov--l .pff-ov__body,
.pff-ov--r .pff-ov__body {
	max-width: 56%;
}

.pff-ov--light:not(.pff-ov--band) .pff-ov__body {
	text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
}

.pff-ov--band .pff-ov__body {
	padding: clamp(6px, 3.5cqmin, 18px) clamp(8px, 4.5cqmin, 22px);
	border-radius: 2px;
	background: rgba(0, 0, 0, .72);
}

.pff-ov--band.pff-ov--dark .pff-ov__body {
	background: rgba(255, 255, 255, .9);
}

.pff-ov__kicker {
	display: block;
	font-size: clamp(9px, 3.2cqmin, 13px);
	font-weight: 700;
	letter-spacing: .08em;
	line-height: 1.2;
	text-transform: uppercase;
	opacity: .92;
}

.pff-ov__title {
	display: -webkit-box;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	font-size: clamp(12px, min(7.2cqi, 12cqb), 44px);
	font-weight: 800;
	letter-spacing: -.01em;
	line-height: 1.08;
	text-wrap: balance;
}

.pff-ov__text {
	display: -webkit-box;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	font-size: clamp(11px, min(3.9cqi, 6.5cqb), 19px);
	font-weight: 400;
	line-height: 1.35;
}

.pff-ov__cta {
	display: inline-block;
	max-width: 100%;
	margin-top: clamp(2px, 1.2cqmin, 8px);
	padding: .62em 1.1em;
	overflow: hidden;
	border-radius: 6px;
	/* Colors of the site (Parresia theme tokens) unless the ad sets its own. */
	background: var(--pff-cta-bg, var(--c-jaune, #fff));
	box-shadow: 0 1px 2px rgba(0, 0, 0, .18);
	color: var(--pff-cta-fg, var(--c-encre, #111));
	font-family: var(--font-titre, inherit);
	font-size: clamp(11px, min(3.6cqi, 6cqb), 16px);
	font-weight: 700;
	line-height: 1.1;
	text-overflow: ellipsis;
	text-shadow: none;
	white-space: nowrap;
	transition: transform .18s ease, filter .18s ease;
}

a:hover .pff-ov__cta,
a:focus-visible .pff-ov__cta {
	filter: brightness(1.08);
	transform: translateY(-1px);
}

/* What does not fit is hidden, in this order: text, then kicker. */
@container (max-width: 260px) {
	.pff-ov__text { display: none; }
}

@container (max-width: 170px) {
	.pff-ov__kicker { display: none; }
}

@container (max-height: 150px) {
	.pff-ov__text { display: none; }
}

@container (max-height: 96px) {
	.pff-ov__kicker { display: none; }
}

/* Low visual (small video box): title on 2 lines, tighter button. */
@container (max-height: 120px) {
	.pff-ov__body { gap: 4px; }
	.pff-ov__title { -webkit-line-clamp: 2; }
	.pff-ov__cta { margin-top: 0; padding: .5em .9em; }
}

/* Banner shape: kicker, title and button on one row. */
@container (aspect-ratio > 2.6) {
	.pff-ov__in {
		align-items: center;
		padding-block: clamp(4px, 9cqb, 18px);
	}

	.pff-ov__body {
		flex-direction: row;
		align-items: center;
		gap: clamp(8px, 2.4cqi, 28px);
		width: 100%;
		max-width: none;
	}

	.pff-ov--c .pff-ov__body,
	.pff-ov--bc .pff-ov__body {
		justify-content: center;
	}

	.pff-ov--l .pff-ov__body,
	.pff-ov--r .pff-ov__body {
		width: auto;
		max-width: 60%;
	}

	.pff-ov__kicker {
		flex: none;
	}

	.pff-ov__title {
		flex: 0 1 auto;
		-webkit-line-clamp: 2;
		font-size: clamp(13px, min(3.4cqi, 30cqb), 32px);
	}

	.pff-ov__text {
		display: none;
	}

	.pff-ov__cta {
		flex: none;
		margin: 0 0 0 auto;
		font-size: clamp(11px, min(1.8cqi, 17cqb), 17px);
	}

	.pff-ov--c .pff-ov__cta,
	.pff-ov--bc .pff-ov__cta {
		margin-left: 0;
	}

	.pff-ov--grad.pff-ov--light:not(.pff-ov--c):not(.pff-ov--r) .pff-ov__in::before {
		transform: none;
		background: linear-gradient(to right, rgba(0, 0, 0, .7) 0%, rgba(0, 0, 0, .3) 55%, rgba(0, 0, 0, .12) 100%);
	}

	.pff-ov--grad.pff-ov--dark:not(.pff-ov--c):not(.pff-ov--r) .pff-ov__in::before {
		transform: none;
		background: linear-gradient(to right, rgba(255, 255, 255, .9) 0%, rgba(255, 255, 255, .45) 55%, rgba(255, 255, 255, .15) 100%);
	}
}

/* ===== Animated rotation ================================================ */

.pff-rot {
	position: relative;
	max-width: 100%;
}

.pff-rot__stage {
	display: grid;
	perspective: 1400px;
}

.pff-rot__slide {
	display: flex;
	grid-area: 1 / 1;
	align-items: center;
	justify-content: center;
	min-width: 0;
	visibility: hidden;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

/* The ad wrapper must be able to shrink, or a wide banner gets cut on small screens. */
.pff-rot__slide > * {
	min-width: 0;
	max-width: 100%;
}

.pff-rot__slide.is-active,
.pff-rot__slide.is-out {
	visibility: visible;
}

.pff-rot__slide.is-active { z-index: 2; }
.pff-rot__slide.is-out { z-index: 1; }

.pff-rot--slide-h .pff-rot__stage,
.pff-rot--slide-v .pff-rot__stage {
	overflow: hidden;
}

.pff-rot__slide.is-in,
.pff-rot__slide.is-out {
	animation-duration: var(--pff-speed, 700ms);
	animation-fill-mode: both;
}

/* Fade: the current ad fades out, then the next one fades in (each takes half of the duration). */
.pff-rot--fade .is-out {
	animation-name: pff-fade-out;
	animation-duration: calc(var(--pff-speed, 1000ms) / 2);
	animation-timing-function: cubic-bezier(.45, 0, .55, 1);
}

.pff-rot--fade .is-in {
	animation-name: pff-fade-in;
	animation-delay: calc(var(--pff-speed, 1000ms) / 2);
	animation-duration: calc(var(--pff-speed, 1000ms) / 2);
	animation-timing-function: cubic-bezier(.45, 0, .55, 1);
}

.pff-rot--flip-h .is-out,
.pff-rot--flip-v .is-out {
	animation-duration: calc(var(--pff-speed, 700ms) / 2);
	animation-timing-function: cubic-bezier(.55, 0, .9, .45);
}

.pff-rot--flip-h .is-in,
.pff-rot--flip-v .is-in {
	animation-delay: calc(var(--pff-speed, 700ms) / 2);
	animation-duration: calc(var(--pff-speed, 700ms) / 2);
	animation-timing-function: cubic-bezier(.1, .55, .45, 1);
}

.pff-rot--flip-h .is-out { animation-name: pff-flip-h-out; }
.pff-rot--flip-h .is-in { animation-name: pff-flip-h-in; }
.pff-rot--flip-v .is-out { animation-name: pff-flip-v-out; }
.pff-rot--flip-v .is-in { animation-name: pff-flip-v-in; }

.pff-rot--slide-h .is-in,
.pff-rot--slide-h .is-out,
.pff-rot--slide-v .is-in,
.pff-rot--slide-v .is-out {
	animation-timing-function: cubic-bezier(.65, 0, .35, 1);
}

.pff-rot--slide-h .is-out { animation-name: pff-slide-h-out; }
.pff-rot--slide-h .is-in { animation-name: pff-slide-h-in; }
.pff-rot--slide-v .is-out { animation-name: pff-slide-v-out; }
.pff-rot--slide-v .is-in { animation-name: pff-slide-v-in; }

@keyframes pff-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes pff-fade-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes pff-flip-h-out { from { transform: rotateY(0); } to { transform: rotateY(-90deg); } }
@keyframes pff-flip-h-in { from { transform: rotateY(90deg); } to { transform: rotateY(0); } }
@keyframes pff-flip-v-out { from { transform: rotateX(0); } to { transform: rotateX(90deg); } }
@keyframes pff-flip-v-in { from { transform: rotateX(-90deg); } to { transform: rotateX(0); } }
@keyframes pff-slide-h-out { from { transform: translateX(0); } to { transform: translateX(-100%); } }
@keyframes pff-slide-h-in { from { transform: translateX(100%); } to { transform: translateX(0); } }
@keyframes pff-slide-v-out { from { transform: translateY(0); } to { transform: translateY(-100%); } }
@keyframes pff-slide-v-in { from { transform: translateY(100%); } to { transform: translateY(0); } }

.pff-rot__dots {
	display: flex;
	justify-content: center;
	gap: 2px;
	margin-top: 6px;
	line-height: 0;
}

.pff-rot__dot {
	display: grid;
	place-items: center;
	width: 24px;
	height: 24px;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: inherit;
	cursor: pointer;
}

.pff-rot__dot::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: currentColor;
	opacity: .28;
	transition: opacity .2s, transform .2s;
}

.pff-rot__dot[aria-current="true"]::before {
	opacity: .85;
	transform: scale(1.25);
}

.pff-rot__dot:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: -2px;
	border-radius: 50%;
}

/* ===== Video box ======================================================== */

.pff-vid[hidden] {
	display: none !important;
}

.pff-vid {
	position: fixed;
	right: 16px;
	bottom: var(--pff-b, 24px);
	left: auto;
	z-index: 99990;
	width: var(--pff-w, 200px);
	max-width: calc(100vw - 32px);
	line-height: 0;
	transition: width .28s cubic-bezier(.2, .7, .2, 1);
}

.pff-vid--left {
	right: auto;
	left: 16px;
}

.pff-vid__box {
	position: relative;
	aspect-ratio: var(--pff-ratio, 16 / 9);
	overflow: hidden;
	border-radius: 12px;
	background: #111;
	box-shadow: 0 12px 32px rgba(0, 0, 0, .28), 0 2px 6px rgba(0, 0, 0, .2);
}

.pff-vid.is-in .pff-vid__box {
	animation: pff-vid-in .45s cubic-bezier(.2, .8, .2, 1) both;
}

.pff-vid.is-closing .pff-vid__box {
	animation: pff-vid-out .2s ease-in both;
}

@keyframes pff-vid-in {
	from { opacity: 0; transform: translateY(18px) scale(.96); }
	to { opacity: 1; transform: none; }
}

@keyframes pff-vid-out {
	from { opacity: 1; transform: none; }
	to { opacity: 0; transform: translateY(12px) scale(.97); }
}

.pff-vid__link {
	position: absolute;
	inset: 0;
	display: block;
	color: inherit;
	text-decoration: none;
}

.pff-vid__media,
.pff-vid__poster {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	border: 0;
	object-fit: cover;
}

.pff-vid iframe.pff-vid__media {
	pointer-events: none;
}

.pff-vid.is-playing .pff-vid__poster {
	opacity: 0;
	transition: opacity .3s;
}

.pff-vid__tag {
	position: absolute;
	top: 8px;
	left: 8px;
	z-index: 3;
	padding: 3px 6px;
	border-radius: 3px;
	background: rgba(0, 0, 0, .58);
	color: #fff;
	font-family: inherit;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: .05em;
	line-height: 1.2;
	text-transform: uppercase;
	pointer-events: none;
}

.pff-vid__btn {
	position: absolute;
	z-index: 4;
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(0, 0, 0, .62);
	color: #fff;
	line-height: 0;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	transition: background .15s, transform .15s;
}

.pff-vid__btn[hidden] {
	display: none;
}

/* Comfortable touch target (44 px) around a small button. */
.pff-vid__btn::after {
	content: "";
	position: absolute;
	inset: -7px;
}

.pff-vid__btn:hover {
	background: rgba(0, 0, 0, .85);
}

.pff-vid__btn:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

.pff-vid__btn svg {
	pointer-events: none;
}

.pff-vid__close { top: 7px; right: 7px; }
.pff-vid__sound { right: 8px; bottom: 8px; }

.pff-vid__play {
	top: 50%;
	left: 50%;
	width: 52px;
	height: 52px;
	transform: translate(-50%, -50%);
}

.pff-vid__sound .pff-i--sound,
.pff-vid__sound[aria-pressed="true"] .pff-i--muted {
	display: none;
}

.pff-vid__sound[aria-pressed="true"] .pff-i--sound {
	display: block;
}

/* Leave room for the sound button under a bottom-right text. */
.pff-vid--plain .pff-ov__in {
	padding-right: clamp(10px, 6cqmin, 32px);
}

/* Branded card: colors and font of the site (Parresia theme tokens, with fallbacks). */
.pff-vid--brand .pff-vid__box {
	display: flex;
	flex-direction: column;
	aspect-ratio: auto;
	overflow: hidden;
	border-radius: 10px;
	background: var(--c-encre, #0e1b3c);
	box-shadow: 0 18px 40px rgba(11, 20, 46, .34), 0 3px 10px rgba(11, 20, 46, .22);
	container-type: inline-size;
	font-family: var(--font-titre, inherit);
}

.pff-vid__bar {
	display: flex;
	align-items: center;
	gap: 7px;
	min-width: 0;
	height: 30px;
	padding: 0 3px 0 8px;
	color: #fff;
	line-height: 1;
}

.pff-vid--brand .pff-vid__tag {
	position: static;
	flex: none;
	padding: 3px 5px 2px;
	border-radius: 3px;
	background: var(--c-rouge, #c8102e);
	color: #fff;
	font-family: inherit;
	font-size: 9.5px;
	font-weight: 800;
	letter-spacing: .06em;
	line-height: 1.2;
}

.pff-vid__site {
	min-width: 0;
	overflow: hidden;
	color: rgba(255, 255, 255, .9);
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .01em;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.pff-vid__actions {
	display: flex;
	flex: none;
	gap: 2px;
	margin-left: auto;
}

.pff-vid--brand .pff-vid__btn {
	position: relative;
	top: auto;
	right: auto;
	bottom: auto;
	width: 26px;
	height: 26px;
	border-radius: 6px;
	background: transparent;
}

.pff-vid--brand .pff-vid__btn::after {
	inset: -9px -2px;
}

.pff-vid--brand .pff-vid__btn:hover {
	background: rgba(255, 255, 255, .16);
}

.pff-vid--brand .pff-vid__close:hover {
	background: var(--c-rouge, #c8102e);
}

.pff-vid__screen {
	position: relative;
	aspect-ratio: var(--pff-ratio, 16 / 9);
	overflow: hidden;
	background: #000;
}

.pff-vid--brand .pff-vid__play {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: rgba(14, 27, 60, .8);
	transform: translate(-50%, -50%);
}

/* Small card (200 px by default): compact bar, the site name goes last. */
@container (max-width: 230px) {
	.pff-vid__bar {
		gap: 5px;
		height: 26px;
		padding-left: 6px;
	}

	.pff-vid--brand .pff-vid__tag {
		padding: 2px 4px 1px;
		font-size: 8.5px;
	}

	.pff-vid__site {
		font-size: 10.5px;
	}

	.pff-vid--brand .pff-vid__btn {
		width: 22px;
		height: 22px;
	}

	.pff-vid--brand .pff-vid__btn svg {
		width: 15px;
		height: 15px;
	}

	.pff-vid--brand .pff-vid__play {
		width: 40px;
		height: 40px;
	}
}

@container (max-width: 185px) {
	.pff-vid__site {
		display: none;
	}
}

@media (hover: hover) and (pointer: fine) {
	.pff-vid--zoom:hover,
	.pff-vid--zoom:focus-within {
		width: min(calc(var(--pff-w, 200px) * 1.2), calc(100vw - 32px));
	}
}

@media (max-width: 767px) {
	.pff-vid {
		width: var(--pff-wm, 140px);
		bottom: var(--pff-bm, 16px);
	}

	.pff-vid--right { right: 12px; }
	.pff-vid--left { left: 12px; }

	.pff-vid--nomobile {
		display: none !important;
	}
}

.pff-vid--preview {
	position: relative;
	right: auto;
	bottom: auto;
	left: auto;
	z-index: auto;
	max-width: 100%;
}

/* ===== Expandable banner ================================================ */

.pff-exp {
	position: relative;
	width: 100%;
	max-width: var(--pff-max, 990px);
	margin-inline: auto;
	line-height: 0;
	--pff-ease: cubic-bezier(.2, .7, .2, 1);
}

/* Natural width of the ad (its display width), shrinking like an image: the
   theme centers ads in flex slots, where an ad without one collapses to 0 px. */
.pff-exp__sizer {
	display: block;
	width: 100%;
	max-width: 100%;
	height: 0;
	margin: 0;
	visibility: hidden;
	pointer-events: none;
}

/* Size container of the heights below; kept off .pff-exp, which would lose
   its natural width with it. */
.pff-exp__box {
	position: relative;
	container-type: inline-size;
}

.pff-exp__spacer {
	display: block;
	height: calc(100cqi * var(--pff-rc));
}

.pff-exp__win {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	z-index: 2;
	display: block;
	height: calc(100cqi * var(--pff-rc));
	overflow: hidden;
	transition: height var(--pff-speed, 450ms) var(--pff-ease) .25s, box-shadow var(--pff-speed, 450ms) ease .25s;
}

/* The link (or the plain area) fills the window whatever height the theme gives to links. */
.pff-exp__link {
	position: absolute;
	inset: 0;
	display: block;
	color: inherit;
	text-decoration: none;
}

.pff-exp__link:focus-visible {
	outline: 3px solid currentColor;
	outline-offset: -3px;
}

.pff-exp__img {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	max-width: none;
	height: auto;
	margin: 0;
	transform: translateY(calc(-100cqi * (var(--pff-rf) - var(--pff-rc)) * var(--pff-f)));
	transition: transform var(--pff-speed, 450ms) var(--pff-ease) .25s;
}

.pff-exp.is-open .pff-exp__win,
.pff-exp:focus-within .pff-exp__win {
	z-index: 60;
	height: calc(100cqi * var(--pff-rf));
	box-shadow: 0 18px 40px rgba(0, 0, 0, .25);
	transition-delay: .12s;
}

.pff-exp.is-open .pff-exp__img,
.pff-exp:focus-within .pff-exp__img {
	transform: translateY(0);
	transition-delay: .12s;
}

@media (hover: hover) and (pointer: fine) {
	.pff-exp:hover .pff-exp__win {
		z-index: 60;
		height: calc(100cqi * var(--pff-rf));
		box-shadow: 0 18px 40px rgba(0, 0, 0, .25);
		transition-delay: .12s;
	}

	.pff-exp:hover .pff-exp__img {
		transform: translateY(0);
		transition-delay: .12s;
	}
}

/* Push mode: the page makes room for the unrolled image. */
.pff-exp--push .pff-exp__spacer {
	transition: height var(--pff-speed, 450ms) var(--pff-ease) .25s;
}

.pff-exp--push.is-open .pff-exp__spacer,
.pff-exp--push:focus-within .pff-exp__spacer {
	height: calc(100cqi * var(--pff-rf));
	transition-delay: .12s;
}

.pff-exp--push .pff-exp__win {
	box-shadow: none !important;
}

@media (hover: hover) and (pointer: fine) {
	.pff-exp--push:hover .pff-exp__spacer {
		height: calc(100cqi * var(--pff-rf));
		transition-delay: .12s;
	}
}

.pff-exp__toggle {
	display: none;
}

@media (hover: none) {
	/* Touch screens, default: the whole image, already unrolled. */
	.pff-exp--touch-full .pff-exp__spacer,
	.pff-exp--touch-full .pff-exp__win {
		height: calc(100cqi * var(--pff-rf));
		transition: none;
	}

	.pff-exp--touch-full .pff-exp__img {
		transform: none;
		transition: none;
	}

	.pff-exp--touch-full .pff-exp__win {
		box-shadow: none;
	}

	/* Touch screens, folded: a button unrolls it. */
	.pff-exp--touch-folded .pff-exp__toggle {
		position: absolute;
		top: calc(100cqi * var(--pff-rc));
		left: 50%;
		z-index: 61;
		display: grid;
		place-items: center;
		width: 36px;
		height: 36px;
		margin: 0;
		padding: 0;
		border: 2px solid #fff;
		border-radius: 50%;
		background: rgba(0, 0, 0, .7);
		color: #fff;
		line-height: 0;
		cursor: pointer;
		transform: translate(-50%, -50%);
		transition: top var(--pff-speed, 450ms) var(--pff-ease);
		-webkit-tap-highlight-color: transparent;
	}

	.pff-exp--touch-folded .pff-exp__toggle::after {
		content: "";
		position: absolute;
		inset: -6px;
	}

	.pff-exp--touch-folded .pff-exp__toggle svg {
		pointer-events: none;
		transition: transform var(--pff-speed, 450ms) var(--pff-ease);
	}

	.pff-exp--touch-folded.is-open .pff-exp__toggle {
		top: calc(100cqi * var(--pff-rf));
	}

	.pff-exp--touch-folded.is-open .pff-exp__toggle svg {
		transform: rotate(180deg);
	}
}

/* ===== Pop-up (Advanced Ads Layer) ======================================= */

/* Card in the colors of the site, like the video box. Advanced Ads Layer sets
   the position and size inline; only the look changes here. */
.pff-pop {
	box-sizing: border-box;
	max-width: calc(100vw - 24px) !important;
	overflow: hidden;
	border-radius: 14px;
	background: var(--c-encre, #0e1b3c);
	box-shadow: 0 30px 80px rgba(6, 12, 32, .5), 0 4px 14px rgba(6, 12, 32, .3);
	font-family: var(--font-titre, inherit);
	animation: pff-pop-in .5s cubic-bezier(.2, .7, .2, 1) backwards;
}

.pff-pop img {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
}

.pff-pop__bar {
	display: flex;
	align-items: center;
	gap: 10px;
	height: 46px;
	padding: 0 56px 0 18px;
	color: #fff;
	line-height: 1;
}

/* Dot in the color of the pole, like the OMNI badge. */
.pff-pop__bar::before {
	content: "";
	flex: none;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--c-rouge, #c8102e);
	box-shadow: 0 0 0 3px rgba(200, 16, 46, .28);
}

.pff-pop__site {
	min-width: 0;
	overflow: hidden;
	color: rgba(255, 255, 255, .92);
	font-size: 15px;
	font-weight: 700;
	letter-spacing: .01em;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Close button of Advanced Ads Layer ("{prefix}close-button", inline styles), moved into the bar. */
.pff-pop > a[class$="close-button"] {
	position: absolute !important;
	top: 7px !important;
	right: 8px !important;
	left: auto !important;
	z-index: 2 !important;
	display: grid !important;
	place-items: center;
	float: none !important;
	width: 32px !important;
	height: 32px !important;
	margin: 0 !important;
	border-radius: 50%;
	background: rgba(255, 255, 255, .12) !important;
	color: #fff !important;
	font-family: var(--font-titre, sans-serif);
	font-size: 22px;
	line-height: 1 !important;
	text-decoration: none !important;
	transition: background .15s ease;
}

.pff-pop > a[class$="close-button"]:hover,
.pff-pop > a[class$="close-button"]:focus-visible {
	background: var(--c-rouge, #c8102e) !important;
	outline: none;
}

/* Dimmed page behind the pop-up: night blue and a light blur instead of plain black. */
body:has(.pff-pop) .advads-background {
	background: rgba(9, 16, 38, .68) !important;
	opacity: 1 !important;
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
	animation: pff-fade-in .3s ease backwards;
}

@media (max-width: 600px) {
	.pff-pop {
		border-radius: 12px;
	}

	.pff-pop__bar {
		height: 40px;
		padding-left: 14px;
	}

	.pff-pop__site {
		font-size: 14px;
	}

	.pff-pop > a[class$="close-button"] {
		top: 5px !important;
		right: 6px !important;
		width: 30px !important;
		height: 30px !important;
	}
}

/* Rises slightly while Advanced Ads Layer fades it in (it keeps its own centering transform). */
@keyframes pff-pop-in {
	from { translate: 0 16px; }
	to { translate: 0 0; }
}

/* ===== Reduced motion =================================================== */

@media (prefers-reduced-motion: reduce) {
	.pff-rot .pff-rot__slide.is-in,
	.pff-rot .pff-rot__slide.is-out {
		animation-delay: 0s;
		animation-duration: 200ms;
		animation-timing-function: linear;
	}

	.pff-rot .pff-rot__slide.is-in { animation-name: pff-fade-in; }
	.pff-rot .pff-rot__slide.is-out { animation-name: pff-fade-out; }

	.pff-vid,
	.pff-exp__win,
	.pff-exp__img,
	.pff-exp__spacer,
	.pff-ov__cta {
		transition-duration: .01s !important;
	}

	.pff-vid.is-in .pff-vid__box,
	.pff-vid.is-closing .pff-vid__box,
	.pff-pop {
		animation: none;
	}
}