/*
 * Valeurs provisoires, lues à l'œil sur le prototype.
 * Elles ne remplacent pas un relevé Dev Mode.
 */

@font-face {
	font-family: "Helvetica Now Var";
	src: url("../fonts/Helvetica%20Now%20Var.ttf") format("truetype");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Helvetica Now Var";
	src: url("../fonts/Helvetica%20Now%20Var%20Italic.ttf") format("truetype");
	font-weight: 100 900;
	font-style: italic;
	font-display: swap;
}

:root {
	--actioil-container-max: 1240px;
	--actioil-page-gutter: clamp(20px, 5vw, 80px);
	--actioil-color-accent: #c21313;
	--actioil-color-accent-ink: #ffffff;
	--actioil-color-ink: #161616;
	--actioil-color-muted: #5e5e5e;
	--actioil-color-paper: #ffffff;
	--actioil-color-night: #0d0d0d;
	--actioil-color-problem: #f8e8e8;
	--actioil-color-problem-ink: #c42323;
	--actioil-color-benefit: #e7f3e4;
	--actioil-color-benefit-ink: #1d7a32;
	--actioil-radius-card: 8px;
	--actioil-radius-button: 2px;
	--actioil-font: "Helvetica Now Var", "Helvetica Neue", Helvetica, Arial, sans-serif;
	--actioil-sticky-offset: 88px;
}

.actioil-app[id] {
	scroll-margin-top: 16px;
}

.actioil-app {
	display: block;
	width: 100%;
	max-width: 100%;
	margin: 0;
	padding: 0;
	isolation: isolate;
	font-family: var(--actioil-font);
	font-weight: 400;
	font-style: normal;
	letter-spacing: normal;
	line-height: 1.45;
}

.actioil-app :where(h1, h2, h3, p, li, a, button, span, strong, em) {
	font-family: inherit;
}

.actioil-app,
.actioil-app *,
.actioil-app *::before,
.actioil-app *::after {
	box-sizing: border-box;
}

.actioil-app :where(h1, h2, h3, p, ul, ol, li, figure) {
	margin: 0;
	padding: 0;
}

.actioil-app :where(ul, ol, li) {
	list-style: none;
}

.actioil-app :where(li)::marker {
	content: none;
}

.actioil-app :where(img) {
	margin: 0;
	max-width: none;
	border: 0;
}

.actioil-app :where(a) {
	color: inherit;
	text-decoration: none;
}

.actioil-app :where(button, input, textarea) {
	font: inherit;
	letter-spacing: normal;
}

.actioil-button__icon {
	display: inline-block;
	width: 16px;
	height: 16px;
	background: currentColor;
	font-size: 0;
	mask: url("../icons/icon-arrow-left.svg") center / contain no-repeat;
	transform: scaleX(-1);
	transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

#pourquoi,
#utilisation,
#compatibilite,
#avis,
#faq {
	scroll-margin-top: 96px;
}

.actioil-container {
	width: min(calc(100% - (2 * var(--actioil-page-gutter))), var(--actioil-container-max));
	margin-inline: auto;
}

.actioil-button {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	padding: 14px 22px;
	overflow: hidden;
	border-radius: 2px;
	box-shadow: 0 0 0 rgba(194, 19, 19, 0);
	font: 600 15px/1 var(--actioil-font);
	text-decoration: none;
	white-space: nowrap;
	isolation: isolate;
	transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.2s linear, box-shadow 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

.actioil-button::after {
	content: "";
	position: absolute;
	z-index: 1;
	inset: 0;
	background: linear-gradient(110deg, transparent 18%, rgba(255, 255, 255, 0.42) 48%, transparent 78%);
	transform: translateX(-130%);
	pointer-events: none;
	transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}

.actioil-button--primary {
	background: var(--actioil-color-accent);
	color: var(--actioil-color-accent-ink);
}

.actioil-button--light {
	background: #fff;
	color: var(--actioil-color-ink);
}

.actioil-button--light::after {
	background: linear-gradient(110deg, transparent 18%, rgba(194, 19, 19, 0.18) 48%, transparent 78%);
}

.actioil-button:hover {
	transform: translateY(-3px);
	box-shadow: 0 16px 32px rgba(194, 19, 19, 0.28);
}

.actioil-button:hover::after {
	transform: translateX(130%);
}

.actioil-button--primary:hover {
	background: #a10f0f;
}

.actioil-button--light:hover {
	background: #fff;
	box-shadow: 0 14px 28px rgba(0, 0, 0, 0.14);
}

.actioil-button:hover .actioil-button__icon {
	transform: scaleX(-1) translateX(-7px);
}

.actioil-button:active {
	transform: translateY(0) scale(0.97);
	box-shadow: 0 4px 12px rgba(194, 19, 19, 0.24);
	transition-duration: 0.08s;
}

.actioil-button--primary:active {
	background: #8d0d0d;
}

.actioil-button:active .actioil-button__icon {
	transform: scaleX(-1) translateX(-2px);
}

.actioil-button:focus-visible,
.actioil-hero__nav a:focus-visible,
.actioil-hero__menu:focus-visible,
.actioil-reviews__nav:focus-visible,
.actioil-faq summary:focus-visible,
.actioil-footer a:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 3px;
}

.actioil-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0 0 0.8rem;
	color: #d7d7d7;
	font: 700 0.78rem/1 var(--actioil-font);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.actioil-eyebrow::before {
	content: "";
	width: 0.55rem;
	height: 0.55rem;
	border-radius: 50%;
	background: #35c15a;
}

.actioil-eyebrow--dark {
	color: var(--actioil-color-ink);
}

.actioil-eyebrow--solid {
	padding: 0.35rem 0.7rem;
	background: var(--actioil-color-accent);
	color: #fff;
}

.actioil-eyebrow--solid::before {
	content: none;
}

.actioil-note {
	color: var(--actioil-color-muted);
	font-size: 13px;
	line-height: 1.4;
}

.actioil-pill {
	display: inline-flex;
	align-items: center;
	margin: 0 0 18px;
	padding: 6px 10px;
	background: #111;
	color: #fff;
	font: 400 12px/1 var(--actioil-font);
	letter-spacing: 0.02em;
}

.actioil-pill--red {
	background: var(--actioil-color-accent);
}

.actioil-carbon {
	background-color: #101010;
	background-image: repeating-linear-gradient(
		-32deg,
		rgba(255, 255, 255, 0.045) 0 1px,
		transparent 1px 8px
	);
}

.actioil-logo {
	margin: 0;
	color: #fff;
	font: 800 2rem/0.8 var(--actioil-font);
	letter-spacing: -0.04em;
}

.actioil-logo small {
	display: block;
	font-size: 0.45em;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.actioil-hero.actioil-await .actioil-hero__bar,
.actioil-hero.actioil-await .actioil-hero__copy > * {
	opacity: 0;
	filter: blur(8px);
	transform: translateY(28px);
}

.actioil-hero.actioil-await.is-in .actioil-hero__bar,
.actioil-hero.actioil-await.is-in .actioil-hero__copy > * {
	opacity: 1;
	filter: none;
	transform: none;
	transition: opacity 0.65s linear, filter 0.65s linear, transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.actioil-hero.actioil-await.is-in .actioil-hero__copy > *:nth-child(2) { transition-delay: 0.08s; }
.actioil-hero.actioil-await.is-in .actioil-hero__copy > *:nth-child(3) { transition-delay: 0.16s; }
.actioil-hero.actioil-await.is-in .actioil-hero__copy > *:nth-child(4) { transition-delay: 0.24s; }
.actioil-hero.actioil-await.is-in .actioil-hero__copy > *:nth-child(5) { transition-delay: 0.32s; }

.actioil-await:not(.actioil-hero) .actioil-container > *,
.actioil-trust.actioil-await .actioil-trust__item,
.actioil-footer-band.actioil-await .actioil-trust__item {
	opacity: 0;
	filter: blur(8px);
	transform: translateY(28px);
}

.actioil-contrast.actioil-await .actioil-pill,
.actioil-contrast.actioil-await .actioil-contrast__title,
.actioil-contrast.actioil-await .actioil-contrast__lead {
	opacity: 0;
	filter: blur(8px);
	transform: translateY(28px);
}

.actioil-contrast.actioil-await.is-in .actioil-pill,
.actioil-contrast.actioil-await.is-in .actioil-contrast__title,
.actioil-contrast.actioil-await.is-in .actioil-contrast__lead {
	opacity: 1;
	filter: none;
	transform: none;
	transition: opacity 0.65s linear, filter 0.65s linear, transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.actioil-contrast.actioil-await.is-in .actioil-contrast__title {
	transition-delay: 0.08s;
}

.actioil-contrast.actioil-await.is-in .actioil-contrast__lead {
	transition-delay: 0.16s;
}

.actioil-contrast.actioil-await .actioil-contrast__grid,
.actioil-reviews.actioil-await .actioil-reviews__wrap,
.actioil-reviews.actioil-await .actioil-reviews__dots {
	opacity: 1;
	filter: none;
	transform: none;
}

.actioil-contrast.actioil-await .actioil-contrast__col--problem,
.actioil-reviews.actioil-await .actioil-short {
	opacity: 0;
	filter: blur(8px);
	transform: translateX(-32px);
}

.actioil-contrast.actioil-await .actioil-contrast__col--benefit,
.actioil-reviews.actioil-await .actioil-short:nth-child(even) {
	opacity: 0;
	filter: blur(8px);
	transform: translateX(32px);
}

.actioil-await.is-in .actioil-container > *,
.actioil-trust.actioil-await.is-in .actioil-trust__item,
.actioil-footer-band.actioil-await.is-in .actioil-trust__item,
.actioil-contrast.actioil-await.is-in .actioil-contrast__col,
.actioil-reviews.actioil-await.is-in .actioil-short {
	opacity: 1;
	filter: none;
	transform: none;
	transition: opacity 0.65s linear, filter 0.65s linear, transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.actioil-await.is-in .actioil-container > *:nth-child(2),
.actioil-trust.actioil-await.is-in .actioil-trust__item:nth-child(2),
.actioil-reviews.actioil-await.is-in .actioil-short:nth-child(2) {
	transition-delay: 0.08s;
}

.actioil-await.is-in .actioil-container > *:nth-child(3),
.actioil-trust.actioil-await.is-in .actioil-trust__item:nth-child(3),
.actioil-reviews.actioil-await.is-in .actioil-short:nth-child(3) {
	transition-delay: 0.16s;
}

.actioil-await.is-in .actioil-container > *:nth-child(n + 4),
.actioil-trust.actioil-await.is-in .actioil-trust__item:nth-child(4),
.actioil-reviews.actioil-await.is-in .actioil-short:nth-child(n + 4) {
	transition-delay: 0.24s;
}

@media (prefers-reduced-motion: reduce) {
	.actioil-button,
	.actioil-button__icon {
		transition: background-color 0.15s linear, color 0.15s linear;
	}

	.actioil-button:hover,
	.actioil-button:active,
	.actioil-button:hover .actioil-button__icon,
	.actioil-button:active .actioil-button__icon {
		transform: none;
		box-shadow: none;
	}

	.actioil-button::after,
	.actioil-button:hover::after {
		opacity: 0;
		transform: translateX(-130%);
	}

	.actioil-hero.actioil-await .actioil-hero__bar,
	.actioil-hero.actioil-await .actioil-hero__copy > *,
	.actioil-hero.actioil-await.is-in .actioil-hero__bar,
	.actioil-hero.actioil-await.is-in .actioil-hero__copy > *,
	.actioil-await:not(.actioil-hero) .actioil-container > *,
	.actioil-await.is-in .actioil-container > *,
	.actioil-trust.actioil-await .actioil-trust__item,
	.actioil-footer-band.actioil-await .actioil-trust__item,
	.actioil-contrast.actioil-await .actioil-contrast__col,
	.actioil-reviews.actioil-await .actioil-short {
		opacity: 1;
		filter: none;
		transform: none;
		transition: none;
	}
}