@charset "UTF-8";

@font-face {
	font-family: 'Poppins';
	src: url('../fonts/Poppins-Regular.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Poppins';
	src: url('../fonts/Poppins-Bold.woff2') format('woff2');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Poppins';
	src: url('../fonts/Poppins-Light.woff2') format('woff2');
	font-weight: 200;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Lobster';
	src: url('../fonts/lobster-regular.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Borel';
	src: url('../fonts/Borel-Regular.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

/*--------------------------------------------------------------
Reset
--------------------------------------------------------------*/

html,
body,
p,
ol,
ul,
li,
dl,
dt,
dd,
blockquote,
figure,
legend,
hr,
h1,
h2,
h3 {
	margin: 0;
	padding: 0
}

*,
*:before,
*:after {
	box-sizing: border-box
}

img,
video,
svg {
	display: block;
	height: auto;
	max-width: 100%;
	border: 0
}

/*--------------------------------------------------------------
Vars
--------------------------------------------------------------*/

:root {
	--leading: 1rem;

	--white: #fff;
	--dark: #502e15;
	--orange: #efa26e;
	--yellow: #f8d27c;
	--teal: #7d9891;
	--brown: #965523;
	--light_green: #c0d79b;
	--light_teal: #c0e0dd;
	--dark_teal: #3f4f51;
	--accent: #fff8ed;

	/* Alertes */
	--alert-error-bg: #f8d2cc;
	/* rouge clair, fond */
	--alert-error-text: #a33b2a;
	/* rouge foncé, texte */

	--alert-success-bg: #dff3d6;
	/* vert clair, fond */
	--alert-success-text: #386838;
	/* vert foncé, texte */

	--font_default: 'Poppins', system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
	--font_heading: 'Lobster', cursive;
}

/*--------------------------------------------------------------
Typography
--------------------------------------------------------------*/

html {
	font-size: 100%;
	-webkit-text-size-adjust: 100%;
	/*-webkit-print-color-adjust:exact;*/
}

body {
	position: relative;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	text-rendering: optimizeSpeed;
	background: var(--white);
	color: var(--dark);
	font-family: var(--font_default);
	font-size: 1rem;
	line-height: 1.75;
	overflow-x: hidden;
	word-wrap: break-word;
}

body.menu-open {
	overflow: hidden;
}

a {
	color: var(--orange);
	text-underline-offset: .25em;
	text-decoration-color: currentColor;
	text-decoration-thickness: 1px;
}

a:hover,
a:focus {
	text-decoration-color: currentColor;
	text-decoration-thickness: 2px;
}

*+ :is(figure, h1, h2, h3, p, ul, ol, blockquote, table, .btn, .grid),
p+div {
	margin-top: 1.75em
}

h1,
h2,
h3 {
	font-family: var(--font_heading);
	font-weight: 400;
	line-height: 1.3;
	font-size: 1.75rem;
}

h1 {
	line-height: 1
}

h2 {
	font-size: 1.5rem;
}

h3,
.product-page-content h2 {
	font-size: 1.25rem;
	font-family: Borel, cursive;
}

h4,
.product-page-content h3 {
	font-family: var(--font_default);
	font-size: 1rem;
	line-height: 1.75;
	font-weight: 700;
}

h1 span,
h2 span {
	color: var(--orange)
}

nav ul,
nav ol {
	list-style: none;
	margin: 0
}

em,
address,
cite {
	font-style: italic;
	position: relative;
	vertical-align: baseline;
}

address {
	font-style: normal
}

abbr {
	text-transform: uppercase;
	letter-spacing: .05em;
}

abbr[title] {
	text-decoration: none;
	border-bottom: 1px dotted;
}

summary {
	cursor: pointer
}

sup,
sub {
	font-size: .8rem;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

sup {
	top: -.5em
}

sub {
	bottom: -.5em
}

small {
	font-size: .8rem;
}

/*--------------------------------------------------------------
Forms
--------------------------------------------------------------*/

fieldset {
	border: none;
	padding: 0;
	margin: 0;
}

input[type=date],
input[type=email],
input[type=password],
input[type=number],
input[type=tel],
input[type=text],
textarea,
select {
	background: transparent;
	font-family: inherit;
	font-size: 1rem;
	line-height: 1.5;
	color: var(--dark);
	border: 1px solid currentColor;
	border-radius: .5rem;
	padding: 1rem 1rem;
	width: 100%;
	font-family: inherit;
}

input[type=date]:focus,
input[type=email]:focus,
input[type=file]:focus,
input[type=number]:focus,
input[type=tel]:focus,
input[type=text]:focus,
textarea:focus,
select:focus {
	outline: 0;
	border-color: var(--orange);
	box-shadow: 0 0 6px var(--orange);
}

textarea {
	min-height: 5rem
}

label {
	display: block;
	font-weight: 200;
	width: fit-content;
	max-width: calc(100% - 2rem);
	background: var(--accent);
	padding: 0 .5rem;
	transform: translate(.75rem, .75rem);
}

.field:has(input[type=date]:focus, input[type=email]:focus, input[type=file]:focus, input[type=number]:focus, input[type=tel]:focus, input[type=text]:focus, textarea:focus, select:focus) label,
label:has(input:checked) {
	color: var(--orange)
}

.field:has(input[type=checkbox]) label,
.field:has(input[type=radio]) label {
	padding: 0;
	transform: none;
}

.field .inline {
	display: flex;
	gap: 1rem;
	flex-wrap: wrap;
}

.field+.field {
	margin-top: 1rem
}

.field span:not(.error) {
	padding-top: .75rem;
	display: block;
	font-weight: 700;
}

.field:has([required])>*:first-child::after {
	content: " *";
	color: var(--alert-error-text)
}

.field:has(.error) {
	color: var(--alert-error-text)
}

.field:has(.error) input,
.field:has(.error) textarea {
	border-color: red;
	box-shadow: 0 0 6px red;
}

.field span.error {
	display: block;
}

button,
input[type=submit],
.btn {
	font-size: inherit;
	font-family: inherit;
	text-decoration: none;
	background: var(--orange);
	color: var(--white);
	font-weight: 700;
	line-height: 1.5;
	padding: .5rem 2rem;
	border-radius: 1.25rem;
	border: none;
	cursor: pointer;
	display: inline-block;
	box-shadow: 0 3px 6px rgba(0, 0, 0, .3);
	transition: transform .1s, box-shadow .1s;
}

button:hover,
button:focus,
input[type=submit]:hover,
input[type=submit]:focus,
.btn:hover,
.btn:focus {
	transform: scale(1.05);
	box-shadow: 0 4px 7px rgba(0, 0, 0, .5);
}

.btn-dark {
	background: var(--dark);
}

.btn-teal {
	background: var(--teal);
}

.btn-brown {
	background: var(--brown);
}

.btn-light_green {
	background: var(--light_green)
}

.btn-center {
	display: block;
	max-width: fit-content;
	margin-left: auto;
	margin-right: auto;
}

.btn-block {
	margin-top: 1.75em
}

.alert {
	padding: .5rem 1rem;
	border-radius: .5rem;
	margin: var(--leading) 0;
}

.alert.alert-error {
	background: var(--alert-error-bg);
	color: var(--alert-error-text);
}

.alert.alert-success {
	background: var(--alert-success-bg);
	color: var(--alert-success-text);
}

.alert ul {
	padding-left: 1.5rem;
}

/*--------------------------------------------------------------
Colors
--------------------------------------------------------------*/

.bg-accent {
	background: var(--accent);
}

.bg-light_teal {
	background: var(--light_teal);
}

.bg-light_green {
	background: var(--light_green);
}

.color-teal {
	color: var(--teal)
}

.color-orange {
	color: var(--orange)
}

.color-purple {
	color: #4a0194
}

.bg-light_teal a:not(.btn){color:var(--dark)}
.alert-error a{color:var(--alert-error-text)}

/*--------------------------------------------------------------
Utilities
--------------------------------------------------------------*/

@media (prefers-reduced-motion: no-preference) {
	html:focus-within {
		scroll-behavior: smooth
	}
}

:focus:not(:focus-visible) {
	outline: 0;
}

:focus-visible {
	outline-color: gray;
	outline-offset: 5px;
	outline-width: 1px;
	outline-style: dashed;
}

::selection {
	background: var(--orange);
	color: var(--white);
}

.sr,
.email {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.sr:focus {
	background-color: var(--brown);
	color: var(--white);
	display: block;
	width: auto;
	height: auto;
	top: 0;
	left: 0;
	padding: .5em 1em;
	text-decoration: none;
	z-index: 9;
}

.wrapper {
	max-width: var(--width);
	padding-left: var(--leading);
	padding-right: var(--leading);
	margin-left: auto;
	margin-right: auto;
}

/* Grids */
.grid {
	display: grid
}

.grid {
	gap: var(--leading)
}

/* Flex */
.flex {
	display: flex;
	flex-wrap: wrap;
}
.jc-space-between{justify-content: space-between;}

/* Text alignments */
.text-center {
	text-align: center
}

.text-left {
	text-align: left
}

.text-right {
	text-align: right
}

/* Icons */
.icon {
	display: inline-block;
	vertical-align: middle;
	width: 1em;
	height: 1em;
}
.social-icon{
	width:1.5rem;
	height:1.5rem;
}

/* Blocs */
.block {
	padding: 3rem
}

/* Coins arrondis */
.rounded {
	border-radius: 3rem
}

/* Tags */
.tag {
	display: inline-block;
	padding: .25rem 1rem;
	border: 1px solid currentColor;
	border-radius: 2rem;
}

.tag-center {
	display: block;
	max-width: fit-content;
	margin-left: auto;
	margin-right: auto;
}

/*--------------------------------------------------------------
Custom blocks
--------------------------------------------------------------*/

/* Illustrated blocks */

.block-illustrations {
	max-width: 70%;
	margin: 0 auto -3rem !important;
}

.block-illustrations img {
	width: 100%;
}

.illustrated {
	position: relative;
	box-shadow: 0 3px 6px rgba(0, 0, 0, .3);
	max-width: 80%;
	margin-inline: auto;
}

.illustrated:before {
	content: "";
	position: absolute;
	border-radius: 3rem;
	background: #30C67C;
	top: 3rem;
	bottom: 3rem;
	left: -12.5%;
	right: -12.5%;
	z-index: -1;
}

.illustrated h2 span {
	color: var(--light_green)
}

/* Gallery */

.gallery {
	position: relative;
	padding: 3rem 0;
	background: linear-gradient(249deg, #696eff 0%, #f8acff 100%);
}

.gallery:before,
.gallery:after,
.gallery figure:after {
	content: "";
	position: absolute;
	width: 221px;
	height: 149px;
	background: url(/assets/img/fusee.png) 0 0 no-repeat;
	top: -3rem;
	left: -5rem;
	z-index: 99;
	transform-origin: 50% 50%;
}

.gallery:after {
	bottom: -1.25rem;
	right: -3rem;
	top: auto;
	left: auto;
	transform: rotate(15deg) scale(.8);
}

.gallery figure:after {
	left: 40%;
	top: -4rem;
	transform: rotate(40deg) scale(.6);
}

.gallery figure {
	position: relative;
	width: 125%;
	transform: translateX(calc(-12.5% + var(--leading)));
}

.gallery-content {
	display: flex;
	gap: var(--leading);
}

.gallery li {
	list-style: none;
}

/* FAQ */

.faq {
	margin: var(--leading) 0
}

.accordion {
	border-bottom: 2px solid var(--light_green);
	padding-bottom: 1rem;
	margin-bottom: 1rem;
}

.accordion-intro {
	font-weight: 700;
}

.accordion-content {
	margin-top: 1rem
}

/* Workflow */

.workflow h3 {
	color: var(--orange);
}

.workflow h3 span {
	color: var(--white);
	background: var(--orange);
	display: inline-flex;
	justify-content: center;
	align-items: center;
	width: 2rem;
	height: 2rem;
	font-family: 'Poppins', system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
	font-size: 1.5rem;
	border-radius: 50%;
}

/* Values */

.values h2 span {
	color: var(--light_green)
}

.values .tabs-pills {
	margin: var(--leading) 0;
}

.values .tabs-pills button {
	box-shadow: none;
	color: var(--dark);
	background: transparent;
	border: 2px solid var(--dark);
	padding: .25rem .5rem;
}

.values .tabs-pills button.active {
	color: var(--white);
	background: var(--dark);
}

.values .tabs-pills>*+* {
	margin-top: 1rem;
}

.values .tabs-panels>* {
	display: none;
	margin: 0;
}

.values .tabs-panels>.active {
	display: grid;
}

/* Products categories */

.products-category,
.product {
	border-radius: 2rem 0 2rem 2rem;
	display: flex;
	flex-direction: column;
	text-align: center;
}

.products-category-content,
.product-content {
	padding: var(--leading);
	color: var(--white);
}

.products-category img,
.product img {
	border-radius: 2rem 0 0 0;
}

.products-category h3,
.product h3 {
	font-family: Borel, cursive;
	margin-top: var(--leading);
}

.products-category .btn,
.product .btn {
	background: var(--white);
	padding: .5rem 1.5rem;
	width: fit-content;
	max-width: calc(100% - 2 * var(--leading));
	margin: auto auto var(--leading);
	border-radius: 3rem;
	font-weight: 700;
}

.category-orange {
	background: var(--orange) linear-gradient(37deg, #ffc59f 0%, #FF8365 100%)
}

.category-orange .btn {
	color: var(--orange)
}

.category-teal {
	background: var(--teal) linear-gradient(37deg, #d0e1e4 0%, #209fa2 100%)
}

.category-teal .btn {
	color: var(--teal)
}

.category-purple {
	background: #992fc4 linear-gradient(37deg, #e75af4 0%, #4a0194 100%)
}

.category-purple .btn {
	color: #992fc4
}

/* Counter */
.counter{
	border:1px solid var(--orange);
}
.counter-content{
	max-width:40rem;
	margin-inline:auto;
}
.counter-items{
	align-items: end;
}
.counter-number{
	display:block;
	font-family: var(--font_heading);
	font-size: 3rem;
	margin-top:1rem;
}
.counter-label{
	color:var(--orange);
	font-family: Borel, cursive;
	font-size:1.5rem;
}

/*--------------------------------------------------------------
Main Header
--------------------------------------------------------------*/

/* Main header container */
.main-header {
	position: relative;
	z-index: 99;
	padding: var(--leading) 0
}

.main-header .wrapper {
	display: grid;
	gap: 1rem;
	grid-template-columns: 1fr auto;
	grid-template-areas: "logo toggle";
	align-items: center;
}

/* Logo
------------------------*/
.logo {
	display: flex;
	gap: 1rem;
	align-items: center;
	grid-area: logo;
	border: none;
	color: var(--dark);
	font-family: 'Lobster', cursive;
	font-size: 1.3rem;
	text-decoration: none;
}

.logo:hover,
.logo:focus {
	color: var(--orange);
}

.logo img {
	height: 5.25rem;
	width: auto;
}

/* Nav toggle
------------------------*/
.main-nav {
	grid-area: toggle;
}

.menu-toggle {
	background: transparent;
	border: none;
	padding: .75rem;
	z-index: 2;
	box-shadow: none;

}

.menu-toggle:hover,
.menu-toggle:focus {
	box-shadow: none;
	transform: none;
}

.menu-toggle svg {
	fill: var(--dark);
	width: 1.5rem;
}

.menu-toggle path {
	transition: opacity .2s, transform .2s;
}

.menu-toggle[aria-expanded=true] path:nth-child(1) {
	transform: rotate(-45deg) translateX(-11px) translateY(-5px);
}

.menu-toggle[aria-expanded=true] path:nth-child(2) {
	opacity: 0;
}

.menu-toggle[aria-expanded=true] path:nth-child(3) {
	transform: rotate(45deg) translateX(4px) translateY(-6px);
}

/* Main menu
------------------------*/
.menu-container {
	position: fixed;
	background: var(--accent);
	top: 5rem;
	padding: var(--leading);
	border-radius: 1.25rem;
	/*left:var(--leading);*/
	width: calc(100% - 2 * var(--leading));
	max-width: 25rem;
	right: var(--leading);
	z-index: 99;
	opacity: 0;
	transform: scale(.5);
	transform-origin: 100% 0;
	pointer-events: none;
	transition: opacity .2s, transform .2s;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	overflow-y: scroll;
}

.menu-container ul {
	margin: 0
}

.menu-container.active {
	opacity: 1;
	pointer-events: auto;
	transform: scale(1);
}

.main-menu {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.main-menu a,
.main-menu button {
	color: inherit;
	font-weight: 400;
	;
	display: block;
	width: fit-content;
	border: none;
	text-decoration: none;
}

.main-menu button {
	padding: 0;
	text-transform: none;
	background: transparent;
	display: flex;
	align-items: center;
	gap: .5rem;
	line-height: 1.75;
	border-radius: 0;
	box-shadow: none;
}

.main-menu button:hover,
.main-menu button:focus {
	box-shadow: none;
	transform: none;
}

.main-menu button svg {
	height: 1rem
}

.submenu {
	display: none;
	opacity: 0;
	transition: opacity .2s ease;
}

.submenu.active {
	display: block;
	opacity: 1
}

.submenu a {
	font-size: 1rem;
	font-weight: 400;
	margin-left: var(--leading)
}

/*--------------------------------------------------------------
Page header
--------------------------------------------------------------*/

.page-header {
	margin-top: 3rem;
}

.header-image {
	border-radius: 3rem;
}

/*--------------------------------------------------------------
Main content
--------------------------------------------------------------*/

.content .wrapper>* {
	margin-top: 3rem;
	margin-bottom: 3rem;
}

/*--------------------------------------------------------------
Main footer
--------------------------------------------------------------*/

.main-footer {
	margin-top: auto;
	background: var(--accent);
	border-radius: 2rem 2rem 0 0;
	padding: 3rem 0 var(--leading);
}

.main-footer a {
	color: var(--dark)
}

.footer-logo {
	max-width: 20rem
}

.footer-menu p,
.footer-contact p {
	font-weight: 700;
}

.main-footer ul {
	margin-top: 1rem;
	list-style: none;
}

.credits {
	margin-top: 3rem;
	text-align: center;
}

/*--------------------------------------------------------------
Home page
--------------------------------------------------------------*/

/*--------------------------------------------------------------
Product page
--------------------------------------------------------------*/

.product-page-header img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.product-page-header label.cgv {
	transform: none;
	background: transparent;
}

.product-page-content {
	border: 1px solid var(--dark);
	border-radius: 3rem;
}

.future-product {
	padding: var(--leading);
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	border: 3px solid currentColor;
}

.price {
	font-family: var(--font_heading);
	font-size: 3rem;
	text-align: center;
	margin: var(--leading) 0;
}

.cgv {
	margin-bottom: 1rem;
	text-align: center;
}

.cgv input[type="checkbox"] {
	accent-color: var(--dark);
}

/* -------------------------------------------------------------
Blog page
--------------------------------------------------------------*/

.blog article {
	background: #1d376b linear-gradient(239deg, #030a68 0%, #558bd1 100%);
	border-radius: 2rem 0 2rem 2rem;
	display: flex;
	flex-direction: column;
	text-align: center;
}

.blog .article-content {
	padding: var(--leading);
	color: var(--white);
}

.blog article img {
	width: 100%;
	height: 200px;
	object-fit: cover;
	border-radius: 2rem 0 0 0;
}

.blog article h2 {
	font-family: Borel, cursive;
	margin-top: var(--leading);
	font-size: 1.875rem;
}

.blog article .btn {
	background: var(--white);
	color: #1d376b;
	padding: .5rem 1.5rem;
	width: fit-content;
	max-width: calc(100% - 2 * var(--leading));
	margin: auto auto var(--leading);
	border-radius: 3rem;
	font-weight: 700;
}

.pagination {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .5rem;
}

.pagination span,
.pagination a {
	color: var(--dark);
	text-decoration: none;
	width: 2.25rem;
	height: 2.25rem;
	display: flex;
	justify-content: center;
	align-items: center;
	border: 1px solid transparent;
	border-radius: 50%;
}

.pagination span[aria-current="page"] {
	color: var(--white);
	background: var(--dark);
	border-color: var(--dark);
}

.pagination a:hover,
.pagination a:focus {
	border-color: var(--dark);
}

/* -------------------------------------------------------------
Article page
--------------------------------------------------------------*/

.article {
	margin-top: 3rem;
	margin-bottom: 3rem;
}

.article-image {
	border-radius: 3rem 0 0 0
}

.article-content {
	border-radius: 0 0 3rem 3rem
}

.article-content h1 {
	font-family: Borel, cursive;
	font-size: 1.875rem;
	text-align: center;
}

.article-content .tag {
	margin-top: var(--leading);
	margin-bottom: 3rem;
}

.article-content img {
	margin-inline: auto;
}

.article-content h2, .article-content h3{
	margin-top:1.75em
}

/*--------------------------------------------------------------
Contact page
--------------------------------------------------------------*/

.contact-block-img{
	aspect-ratio: 3/1;
}
.contact-block-img img{
	width:100%;
	height:100%;
	object-fit: contain;
}
.contact-block h2{margin-top:1.5rem;}
.contact-form {
	margin-top: 3rem
}

/*--------------------------------------------------------------
Admin pages
--------------------------------------------------------------*/

/* Breadcrumb */
.breadcrumb{margin:3rem 0 !important;}
.breadcrumb ol,
.breadcrumb li {
	display: flex;
	flex-wrap: wrap;
	font-variant: small-caps;
	font-size: .825rem;
	gap: .5rem;
}
.breadcrumb svg {
	width: .75em;
}

/* Admin header */
.admin .wrapper .admin-header{margin:3rem 0}
.admin .wrapper .admin-header + *{margin-top:3rem;}
.admin-header{align-items: center;}
.admin-header .search-form{
	padding:.25rem .5rem;
}
.admin-header-buttons{
	display:flex;
	gap:1rem
}
.admin-header-buttons > *{margin:0}

/* Link blocks */
.admin-link-block{
	background: var(--light_teal);
	color:var(--dark_teal);
	text-decoration: none;
	text-align: center;
	padding:2rem 1.5rem;
	border-radius:.5rem;
}
.admin-link-block svg{
	max-width:5rem;
	margin:0 auto 1rem;
}
.admin-link-block:hover, .admin-link-block:focus{
	background: var(--teal);
	color:var(--white);
}

.admin-list {
	list-style: none;
	display: grid;
	gap: 1rem 3rem;
}

.admin-list a{
	display:block;
	background: var(--light_teal);
	color:var(--dark_teal);
	text-decoration: none;
	border-radius: .5rem;
	padding: .5rem 1rem;
}
.admin-list a:hover, .admin-list a:focus{
	background: var(--teal);
	color:var(--white);
}

.admin .block {
	padding: 2rem 1.5rem;
	margin:0;
}

.admin .rounded {
	border-radius: .5rem
}

.admin h1 {
	font-family: var(--font_default);
	font-size: 1.5rem;
	font-weight: 600;
}
.admin h1 .reference{
	display: inline-block;
	font-size:1rem;
	background: var(--dark);
	color:var(--white);
	padding:.5rem 1rem;
	border-radius:2rem;
	margin-right:.5rem;
}

.admin h3 {
	font-size: 1.25rem;
}

.admin button,
.admin .btn {
	padding: .5rem 1.5rem;
	font-weight: 400;
}

.admin .data-edit{position:relative}
.admin-block-bordered {
	position: relative;
	border: 2px solid var(--dark);
	border-radius: .5rem;
	padding: 1rem 1.5rem;
}

.admin-block-bordered+.admin-block-bordered {
	margin-top: 3rem;
}

.admin-block-bordered h3 {
	margin-top: -1.5rem;
	width: fit-content;
	padding: 0 .5rem;
	background: var(--white);
}

.admin .edit {
	position: absolute;
	top: -.5rem;
	right: -.5rem;
	width: 2rem;
	height: 2rem;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 0;
	border: 2px solid var(--white);
	box-shadow: none;
}

.data-edit label {
	background: var(--white);
}

/*--------------------------------------------------------------
Slider
--------------------------------------------------------------*/

.slider {
	position: relative;
	--snap-align: center;
	--item-width: 100%;
	--item-gap: var(--leading);
	--item-reveal: 0px;
	--item-count: 1;
	--nav-zoom: .875;
}

.slider-container {
	--item-gap-totalwidth: calc(var(--item-gap) * (var(--item-count) - 1));
	--item-width: calc((100% - var(--item-reveal) - var(--item-gap-totalwidth)) / var(--item-count));
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scroll-snap-type: x mandatory;
	display: grid;
	grid: auto / auto-flow max-content;
	grid-auto-rows: 100%;
	grid-auto-columns: var(--item-width);
	grid-auto-flow: column;
	gap: var(--item-gap);
	scrollbar-width: none;
	margin: var(--leading) 0;
}

.slider-container>* {
	scroll-snap-align: var(--snap-align);
	position: relative;
}

.slider-indicators {
	display: flex;
	gap: .5rem;
	justify-content: center;
	padding: 0;
}

.slider-indicators>* {
	box-sizing: content-box;
	padding: 0;
	width: 1rem;
	height: 1rem;
	border: 2px solid var(--dark);
	border-radius: 50%;
	cursor: pointer;
	background-color: transparent;
	opacity: .5;
	transition: opacity .4s ease;
}

.slider-indicators>[aria-current="true"] {
	opacity: 1;
	background-color: var(--dark);
}

/*--------------------------------------------------------------
Media queries
--------------------------------------------------------------*/

@media (min-width:62rem) {

	:root {
		--leading: 1.75rem;
		--width: 80rem;
	}

	/* Grids */
	.grid {
		grid-template-columns: repeat(12, minmax(0, 1fr));
		gap: 3rem;
	}

	.col-3 {
		grid-column: span 3
	}

	.col-4 {
		grid-column: span 4
	}

	.col-5 {
		grid-column: span 5
	}

	.col-6 {
		grid-column: span 6
	}

	.col-7 {
		grid-column: span 7
	}

	.col-8 {
		grid-column: span 8
	}

	.col-12 {
		grid-column: span 12
	}

	.span-2:before {
		content: "";
		grid-column: span 2;
	}

	.span-3:before {
		content: "";
		grid-column: span 3;
	}

	.span-4:before {
		content: "";
		grid-column: span 4;
	}

	.gap-l {
		gap: 5rem
	}

	.align-center {
		align-items: center
	}

	.align-end {
		align-items: end
	}

	.align-start {
		align-items: start
	}

	h1 {
		font-size: 4.25rem;
	}

	h2 {
		font-size: 3.125rem;
	}

	h3,
	.product-page-content h2 {
		font-size: 1.875rem;
	}

	button,
	input[type="submit"],
	.btn {
		padding: 1.25rem 6rem;
		border-radius: 5rem;
	}

	/* Custom blocks */
	.block {
		padding: 4rem 6rem
	}

	.block-illustrations {
		margin-bottom: -5rem !important
	}

	/* Main header */
	.main-header {
		padding: 0;
	}

	.main-header .wrapper {
		/*position: relative;*/
		display: flex;
		justify-content: space-between;
	}

	.menu-toggle {
		display: none;
	}

	.menu-container {
		max-width: none;
		width: auto;
		pointer-events: auto;
		visibility: visible;
		position: static;
		top: 0;
		height: auto;
		opacity: 1;
		flex-direction: row;
		align-items: center;
		transform: none;
		overflow: visible;
		gap: 3rem;
		padding: 0;
		flex-wrap: wrap;
		justify-content: flex-end;
		align-items: baseline;
		padding: var(--leading) 3rem;
		border-radius: 0 0 2rem 2rem;
	}

	.main-menu {
		flex-direction: row;
		gap: 1.5rem;
		align-items: center;
		flex-wrap: wrap;
		justify-content: flex-end
	}

	.has-submenu {
		position: relative
	}

	.main-menu a,
	.main-menu button {
		position: relative;
	}

	.main-menu a:after,
	.main-menu button:after,
	.main-menu a.active:after,
	.main-menu button.active:after {
		content: "";
		position: absolute;
		left: 0;
		bottom: -.25rem;
		width: 100%;
		height: 3px;
		background: var(--orange);
		transform: scaleX(0);
		transition: transform .2s ease-out;
	}

	.main-menu a.active:after,
	.main-menu button.active:after {
		transform: scaleX(1)
	}

	.main-menu a:hover:after,
	.main-menu a:focus:after,
	.main-menu button:hover:after,
	.main-menu button:focus:after {
		transform: scaleX(1)
	}

	.submenu {
		display: flex;
		flex-direction: column;
		gap: 1rem;
		padding: 1rem 2rem;
		width: max-content;
		position: absolute;
		z-index: 1;
		top: calc(100% + var(--leading) + 1rem);
		left: -2rem;
		transform: scaleY(0);
		transform-origin: top;
		background: var(--accent);
		border-radius: 1.25rem;
		transition: transform .3s ease, opacity .3s ease
	}

	.submenu.active {
		display: flex;
		opacity: 1;
		transform: scaleY(1)
	}

	.submenu a {
		color: var(--dark) !important;
		margin-left: 0
	}

	.submenu a:after {
		height: 1px
	}

	/* Main content */
	.content .wrapper>* {
		margin-top: 5rem;
		margin-bottom: 5rem;
	}

	/* Article page */
	.article {
		max-width: 65rem;
		margin-inline: auto;
	}

	/* Contact page */
	.contact-form {
		margin-top: 5rem
	}

}

@media (min-width:110rem) {}