/*
@import url('https://fonts.cdnfonts.com/css/monteilga');
*/

@font-face {
	font-family: 'Kiez';
	src: url('../fonts/Kiez-Slanted.woff2') format('woff2'),
		url('../fonts/Kiez-Slanted.woff') format('woff');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

:root {
	--white: #eac9bd;
	--black: #000000;

	--g1: #161f0e;
	--g2: #2e3a26;

	--l1: #978b66;
	--l2: #fffad6;
	--l3: #E0D97F;

	--t1: #381b16;
	--t2: #843f34;
	--t3: #915349;

	font-size: 16px;
	-webkit-font-smoothing: antialiased;

	--persos: 150px;

	--plats-images-anims-size: 100px;

	--wave-height: 30px;

	--big-dish: 0 0 0 4px var(--t1), 0 0 0 8px var(--l1), 0 0 0 11px var(--l3), 0 0 0 16px var(--t1), 0px 0px 35px 2px rgba(0, 0, 0, 0.35);
	--big-dish-ombre: 0px 0px 34px rgba(0, 0, 0, 0.65);

	--small-dish: 0px 0px 34px rgba(0, 0, 0, 0.45);

	--small-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.2);
}

@media (max-width: 500px) {
	:root {
		font-size: 14px;
	}
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

::-moz-selection {
	background: #87cd33;
	color: var(--white);
}

::selection {
	background: #87cd33;
	color: var(--white);
}

:-webkit-any-link {
	color: var(--l2);
}

:-moz-any-link {
	color: var(--l2);
}

:any-link {
	color: var(--l2);
}

html {
	scroll-behavior: smooth;
}

body {
	background-color: var(--g2);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%23916353' fill-opacity='0.2'%3E%3Cpath d='M0 38.59l2.83-2.83 1.41 1.41L1.41 40H0v-1.41zM0 1.4l2.83 2.83 1.41-1.41L1.41 0H0v1.41zM38.59 40l-2.83-2.83 1.41-1.41L40 38.59V40h-1.41zM40 1.41l-2.83 2.83-1.41-1.41L38.59 0H40v1.41zM20 18.6l2.83-2.83 1.41 1.41L21.41 20l2.83 2.83-1.41 1.41L20 21.41l-2.83 2.83-1.41-1.41L18.59 20l-2.83-2.83 1.41-1.41L20 18.59z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
	color: var(--l2);
	overflow: hidden;
	font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;
	font-family: "Tenor Sans", sans-serif;
	font-style: normal;
	font-weight: 400;
	letter-spacing: -1px;
	line-height: 1.5;
}

.kiez {
	font-family: 'Kiez';
	font-weight: normal;
	text-transform: uppercase;
	letter-spacing: 7px;
}

.loader {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: var(--g1);
	z-index: 10;
	display: flex;
	align-items: center;
	justify-content: center;
}

.loader h1 {
	color: var(--l1);
	font-size: 2rem;
	text-align: center;
}

.loader h2 {
	color: var(--l2);
	text-align: center;
}

.resto-wrapper {
	overflow-x: hidden;
}

.wrapper {
	display: flex;
}

.wrapper .wrapper-logo svg {
	width: 100%;
	height: auto;
	fill: var(--l3);
}

.video-1-1 {
	width: 100%;
	height: 100%;
	aspect-ratio: 1 / 1;
}

/* colors */
.color-pink {
	color: var(--t3);
}

.color-red {
	color: var(--t1);
}

.color-green {
	color: var(--t2);
}

.color-l2 {
	color: var(--l2);
}

.color-l3 {
	color: var(--l3);
}

.hidden {
	display: none;
}

/* typo */
h1 {
	font-size: 5rem;
	-webkit-text-size-adjust: 100%;
	letter-spacing: initial;
}

h2 {
	font-size: 2rem;
	letter-spacing: initial;
}

/* elements */
img {
	display: block;
	width: 100%;
	height: auto;
}

.grid-dishes ul {
	padding-left: 1rem;
	list-style: none;
}

.grid-dishes ul li {
	flex-shrink: 0;
	width: clamp(200px, 20vw, 200px);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	padding: 0px 0px;
	margin: 0 2rem;
	display: flex;
	align-items: center;
	justify-content: center;
}

.hr-wave {
	--size: 6px;
	--b: 4px;
	--m: 0.5;
	--p: calc(var(--m)*var(--size));
	--R: calc(var(--size)*sqrt(var(--m)*var(--m) + 1) + var(--b)/2);
	--_g: #0000 calc(99% - var(--b)), #000 calc(101% - var(--b)) 99%, #0000 101%;
	-webkit-mask:
		radial-gradient(var(--R) at left 50% bottom calc(-1*var(--p)), var(--_g)) calc(50% - 2*var(--size)) calc(50% - var(--size)/2 - var(--b)/2)/calc(4*var(--size)) calc(var(--size) + var(--b)) repeat-x,
		radial-gradient(var(--R) at left 50% top calc(-1*var(--p)), var(--_g)) 50% calc(50% + var(--size)/2 + var(--b)/2)/calc(4*var(--size)) calc(var(--size) + var(--b)) repeat-x;
	background: linear-gradient(90deg, var(--t2) 5%, transparent 35%, transparent 65%, var(--l2) 95%);
	height: 50px;
	margin: 2rem 0;
}

.relative {
	position: relative;
}

.grid-dishes ul li:nth-child(odd) {
	background-image: url(../svg/assiette-verte.svg);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: 100% 100%;
}

.grid-dishes ul li:nth-child(even) {
	background-image: url(../svg/assiette-rouge.svg);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: 100% 100%;
}

.italian-dishes li img {
	border-radius: 50%;
	overflow: hidden;
	border: 4vw solid transparent;
	box-shadow: var(--big-dish-ombre);
}

/* header */
header {
	background-color: var(--g1);
	height: calc(100vh + 100px);
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-top: 65%;
}

header .header-motif-g {
	background-image: url(../svg/motif-g.svg);
	background-position: center left;
	background-repeat: no-repeat;
	background-size: auto 100%;
	width: 35vw;
	height: 35vw;
	aspect-ratio: 1 / 1;
	position: absolute;
	top: 0;
	left: 0;
}

header .header-motif-d {
	background-image: url(../svg/motif-d.svg);
	background-position: center right;
	background-repeat: no-repeat;
	background-size: auto 100%;
	width: 35vw;
	height: 35vw;
	aspect-ratio: 1 / 1;
	position: absolute;
	top: 0;
	right: 0;
}

header .logo-anim {
	max-width: 1024px;
	margin: 0 auto;
	transform: rotate(-7deg);
	padding: 0 2rem;
	position: relative;
	z-index: 5;
}

header .logo-anim svg {
	fill: #FFFAD6;
}

header .logo-anim svg #copyright {
	transform: rotate(7deg);
	transform-origin: 95% 20%;
	opacity: 0.5;
}

/*
header .baseline {
	color: var(--l1);
	font-size: clamp(0.9rem, 0.6231rem + 1.2308vw, 2.1rem);
	line-height: 2.1;
	margin-top: 1rem;
	margin-bottom: 2rem;
	text-align: center;
	position: relative;
	z-index: 5;
}
*/

/* nav */
#nav-toggle {
	position: fixed;
	top: 1rem;
	right: 1rem;
	z-index: 2;
}

#nav-toggle span {
	box-shadow: var(--small-shadow);
	background: url(../svg/menu.svg), var(--black);
	background-position: center;
	background-repeat: no-repeat;
	background-size: 1.25rem;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	border-radius: 50%;
	overflow: hidden;
}

#nav-toggle.active span {
	background: url(../svg/close.svg), var(--black);
	background-position: center;
	background-repeat: no-repeat;
	background-size: 1.25rem;
}

.nav {
	width: 100%;
	position: fixed;
	z-index: 10 !important;
	right: -100vw;
	height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	background-color: var(--t2);
	z-index: 1;
	-webkit-transition: all .25s ease-in-out;
	transition: all .25s ease-in-out;
}

.nav.active {
	right: 0;
}

.nav.active .nav-container {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

.nav .header-logo {
	flex-grow: 1;
	display: flex;
	align-items: center;
	justify-content: flex-start;
}

.nav .header-logo svg {
	width: 160px;
	height: auto;
	fill: var(--l2);
}

.nav .header-logo:hover svg {
	fill: var(--l3);
}

.nav .mini-logo {
	display: none;
}

.nav .nav-container a {
	color: var(--l2);
	font-size: 18px;
	text-decoration: none;
}

.nav .nav-container a:hover {
	color: var(--l3);
	text-decoration-line: underline;
	text-decoration-style: wavy;
	text-decoration-color: var(--l2);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.6rem;
}

.nav .nav-container .social,
.footer .social {
	display: flex;
	gap: 0.5rem;
	align-items: center;
}

.footer .social {
	justify-content: center;
}

.nav .nav-container .social a,
.footer .social a {
	background-color: var(--g1);
	border-radius: 7px;
	padding: 5px;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	padding: 5px;
}

.footer .social {
	margin-top: 1rem;
}

.footer .social a {
	background-color: var(--g1);
}

.nav .nav-container .social svg,
.footer .social svg {
	height: 100%;
	width: 100%;
	fill: var(--l2);
}

.nav .nav-container .social a:hover svg {
	fill: var(--l3);
}

/* blocks */
.block {
	position: relative;
}

.block .content {
	padding: 0rem 1rem;
	position: relative;
}

.block .content.content-video {
	padding: 4rem 1rem;
}

.block .content h2 {
	display: inline-block;
	font-size: 1.5rem;
	line-height: 2.1;
	padding: 65px 0 0;
	position: relative;
	text-decoration-line: underline;
	text-decoration-style: wavy;
	text-decoration-color: var(--l2);
	text-decoration-thickness: 2px;
	text-underline-offset: 0.6rem;
}

.block .content h2.h2-opening {
	font-size: 2rem;
	text-align: center;
	padding: 3rem 0 0;
}

.block .content .menu-cat-description {
	font-size: 1.4rem;
	font-weight: bold;
	padding: 2rem 0 1rem;
}

/* block-video */
#block-video .wave-top {
	clip-path: polygon(100% 100%, 0% 100%, 0.00% 76.23%, 2.00% 72.14%, 4.00% 67.04%, 6.00% 61.12%, 8.00% 54.59%, 10.00% 47.67%, 12.00% 40.61%, 14.00% 33.67%, 16.00% 27.08%, 18.00% 21.08%, 20.00% 15.88%, 22.00% 11.67%, 24.00% 8.60%, 26.00% 6.78%, 28.00% 6.26%, 30.00% 7.07%, 32.00% 9.18%, 34.00% 12.52%, 36.00% 16.96%, 38.00% 22.35%, 40.00% 28.50%, 42.00% 35.19%, 44.00% 42.18%, 46.00% 49.23%, 48.00% 56.08%, 50.00% 62.50%, 52.00% 68.25%, 54.00% 73.14%, 56.00% 76.98%, 58.00% 79.65%, 60.00% 81.04%, 62.00% 81.12%, 64.00% 79.87%, 66.00% 77.34%, 68.00% 73.62%, 70.00% 68.84%, 72.00% 63.18%, 74.00% 56.82%, 76.00% 50.00%, 78.00% 42.96%, 80.00% 35.95%, 82.00% 29.22%, 84.00% 23.00%, 86.00% 17.51%, 88.00% 12.96%, 90.00% 9.49%, 92.00% 7.24%, 94.00% 6.28%, 96.00% 6.65%, 98.00% 8.34%, 100.00% 11.27%);
	background: var(--t2);
	height: var(--wave-height);
}

#block-video .div-block {
	background: var(--t2);
}

#block-video .video-intro,
#block-2 .opening-date {
	font-size: clamp(1.23rem, 0.8215rem + 1.8154vw, 3rem);
	line-height: 2.1;
	text-align: center;
	padding: 4rem 0rem 0rem;
	color: var(--l1);
}

#block-2 .opening-date {
	padding: 2rem 0rem 4rem;
}

/* block-1 */
#block-1 .wave-top {
	clip-path: polygon(100% 100%, 0% 100%, 0.00% 76.23%, 2.00% 72.14%, 4.00% 67.04%, 6.00% 61.12%, 8.00% 54.59%, 10.00% 47.67%, 12.00% 40.61%, 14.00% 33.67%, 16.00% 27.08%, 18.00% 21.08%, 20.00% 15.88%, 22.00% 11.67%, 24.00% 8.60%, 26.00% 6.78%, 28.00% 6.26%, 30.00% 7.07%, 32.00% 9.18%, 34.00% 12.52%, 36.00% 16.96%, 38.00% 22.35%, 40.00% 28.50%, 42.00% 35.19%, 44.00% 42.18%, 46.00% 49.23%, 48.00% 56.08%, 50.00% 62.50%, 52.00% 68.25%, 54.00% 73.14%, 56.00% 76.98%, 58.00% 79.65%, 60.00% 81.04%, 62.00% 81.12%, 64.00% 79.87%, 66.00% 77.34%, 68.00% 73.62%, 70.00% 68.84%, 72.00% 63.18%, 74.00% 56.82%, 76.00% 50.00%, 78.00% 42.96%, 80.00% 35.95%, 82.00% 29.22%, 84.00% 23.00%, 86.00% 17.51%, 88.00% 12.96%, 90.00% 9.49%, 92.00% 7.24%, 94.00% 6.28%, 96.00% 6.65%, 98.00% 8.34%, 100.00% 11.27%);
	background: var(--t2);
	height: var(--wave-height);
}

#block-1 .div-block {
	background: var(--t2);
}

#block-1 .img-anim-left {
	position: absolute;
	height: var(--plats-images-anims-size);
	width: var(--plats-images-anims-size);
	aspect-ratio: 1 / 1;
}

#block-1 .img-anim-left .background {
	background-color: var(--white);
	background-image: url(../img/bg-marble-2.jpg);
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
	border-radius: 50%;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

#block-1 .img-anim-left .image {
	background-image: url(../img/plat-2.jpg);
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
	height: 100%;
	width: 100%;
	border-radius: 50%;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	box-shadow: var(--small-dish);
	overflow: hidden;
}

#block-1 .img-anim-right {
	position: absolute;
	bottom: 0;
	right: 0;
	height: var(--plats-images-anims-size);
	width: var(--plats-images-anims-size);
	aspect-ratio: 1 / 1;
}

#block-1 .img-anim-right .background {
	background-color: var(--white);
	background-image: url(../svg/stripes.svg);
	background-position: center center;
	background-size: 15px 15px;
	background-repeat: repeat;
	border-radius: 50%;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;

	box-shadow: var(--small-dish);
	overflow: hidden;
}

#block-1 .img-anim-right .image {
	background-image: url(../img/nonna-1.png);
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
	height: 100%;
	width: 100%;
	border-radius: 50%;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* block-2 */
#block-2 {
	background: var(--t2);
}

#block-2 .wave-top {
	clip-path: polygon(100% 100%, 0% 100%, 0.00% 76.23%, 2.00% 71.19%, 4.00% 64.76%, 6.00% 57.26%, 8.00% 49.07%, 10.00% 40.61%, 12.00% 32.31%, 14.00% 24.59%, 16.00% 17.85%, 18.00% 12.43%, 20.00% 8.60%, 22.00% 6.57%, 24.00% 6.42%, 26.00% 8.18%, 28.00% 11.76%, 30.00% 16.96%, 32.00% 23.52%, 34.00% 31.12%, 36.00% 39.36%, 38.00% 47.83%, 40.00% 56.08%, 42.00% 63.71%, 44.00% 70.32%, 46.00% 75.58%, 48.00% 79.22%, 50.00% 81.04%, 52.00% 80.97%, 54.00% 79.01%, 56.00% 75.24%, 58.00% 69.87%, 60.00% 63.18%, 62.00% 55.49%, 64.00% 47.20%, 66.00% 38.74%, 68.00% 30.53%, 70.00% 23.00%, 72.00% 16.52%, 74.00% 11.43%, 76.00% 7.99%, 78.00% 6.37%, 80.00% 6.65%, 82.00% 8.83%, 84.00% 12.78%, 86.00% 18.31%, 88.00% 25.14%, 90.00% 32.91%, 92.00% 41.24%, 94.00% 49.69%, 96.00% 57.85%, 98.00% 65.28%, 100.00% 71.62%);
	background: var(--t3);
	height: var(--wave-height);
}

#block-2 .div-block {
	background: var(--t3);
}

#block-2 .img-anim-left {
	position: absolute;
	height: var(--plats-images-anims-size);
	width: var(--plats-images-anims-size);
	aspect-ratio: 1 / 1;
}

#block-2 .img-anim-left .background {
	background-color: var(--white);
	background-image: url(../svg/assiette-verte.svg);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	border-radius: 50%;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

#block-2 .img-anim-left .image {
	background-image: url(../img/homme-debout.png);
	background-position: center center;
	background-size: auto 85%;
	background-repeat: no-repeat;
	height: 100%;
	width: 100%;
	border-radius: 50%;
	position: absolute;
	top: 0%;
	left: 0%;
	width: 100%;
	height: 100%;
	box-shadow: var(--small-dish);
	overflow: hidden;
}

#block-2 .img-anim-right {
	position: absolute;
	bottom: 0;
	right: 0;
	height: var(--plats-images-anims-size);
	width: var(--plats-images-anims-size);
	aspect-ratio: 1 / 1;
}

#block-2 .img-anim-right .background {
	background-color: var(--white);
	background-image: url(../svg/assiette-rouge.svg);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	border-radius: 50%;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;

	box-shadow: var(--small-dish);
	overflow: hidden;
}

#block-2 .img-anim-right .image {
	background-image: url(../img/homme-pates.png);
	background-position: center center;
	background-size: auto 85%;
	background-repeat: no-repeat;
	height: 100%;
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* block-3 */
#block-3 {
	background: var(--t3);
}

#block-3 .wave-top {
	clip-path: polygon(100% 100%, 0% 100%, 0.00% 76.23%, 2.00% 71.19%, 4.00% 64.76%, 6.00% 57.26%, 8.00% 49.07%, 10.00% 40.61%, 12.00% 32.31%, 14.00% 24.59%, 16.00% 17.85%, 18.00% 12.43%, 20.00% 8.60%, 22.00% 6.57%, 24.00% 6.42%, 26.00% 8.18%, 28.00% 11.76%, 30.00% 16.96%, 32.00% 23.52%, 34.00% 31.12%, 36.00% 39.36%, 38.00% 47.83%, 40.00% 56.08%, 42.00% 63.71%, 44.00% 70.32%, 46.00% 75.58%, 48.00% 79.22%, 50.00% 81.04%, 52.00% 80.97%, 54.00% 79.01%, 56.00% 75.24%, 58.00% 69.87%, 60.00% 63.18%, 62.00% 55.49%, 64.00% 47.20%, 66.00% 38.74%, 68.00% 30.53%, 70.00% 23.00%, 72.00% 16.52%, 74.00% 11.43%, 76.00% 7.99%, 78.00% 6.37%, 80.00% 6.65%, 82.00% 8.83%, 84.00% 12.78%, 86.00% 18.31%, 88.00% 25.14%, 90.00% 32.91%, 92.00% 41.24%, 94.00% 49.69%, 96.00% 57.85%, 98.00% 65.28%, 100.00% 71.62%);
	background: var(--t2);
	height: var(--wave-height);
}

#block-3 .div-block {
	background: var(--t2);
}

#block-3 .img-anim-left {
	position: absolute;
	height: var(--plats-images-anims-size);
	width: var(--plats-images-anims-size);
	aspect-ratio: 1 / 1;
}

#block-3 .img-anim-left .background {
	background-color: var(--white);
	background-image: url(../img/bg-marble-2.jpg);
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
	border-radius: 50%;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

#block-3 .img-anim-left .image {
	background-image: url(../img/tiramisu.jpg);
	background-position: center center;
	background-size: auto 100%;
	background-repeat: no-repeat;
	height: 100%;
	width: 100%;
	border-radius: 50%;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;

	box-shadow: var(--small-dish);
	overflow: hidden;
}

#block-3 .img-anim-right {
	position: absolute;
	bottom: 0;
	right: 0;
	height: var(--plats-images-anims-size);
	width: var(--plats-images-anims-size);
	aspect-ratio: 1 / 1;
}

#block-3 .img-anim-right .background {
	background-color: var(--white);
	background-image: url(../svg/stripes.svg);
	background-position: center center;
	background-size: 15px 15px;
	background-repeat: repeat;
	border-radius: 50%;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;

	box-shadow: var(--small-dish);
	overflow: hidden;
}

#block-3 .img-anim-right .image {
	background-image: url(../img/courge.png);
	background-position: center center;
	background-size: 100% auto;
	background-repeat: no-repeat;
	height: 100%;
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* wave menu end */
.menu-end {
	clip-path: polygon(100% 0%, 0% 0%, 0.00% 84.29%, 2.00% 83.55%, 4.00% 81.38%, 6.00% 77.84%, 8.00% 73.06%, 10.00% 67.21%, 12.00% 60.50%, 14.00% 53.16%, 16.00% 45.46%, 18.00% 37.66%, 20.00% 30.06%, 22.00% 22.90%, 24.00% 16.45%, 26.00% 10.94%, 28.00% 6.55%, 30.00% 3.46%, 32.00% 1.76%, 34.00% 1.51%, 36.00% 2.73%, 38.00% 5.37%, 40.00% 9.34%, 42.00% 14.50%, 44.00% 20.66%, 46.00% 27.61%, 48.00% 35.09%, 50.00% 42.86%, 52.00% 50.62%, 54.00% 58.11%, 56.00% 65.06%, 58.00% 71.22%, 60.00% 76.37%, 62.00% 80.34%, 64.00% 82.98%, 66.00% 84.20%, 68.00% 83.96%, 70.00% 82.26%, 72.00% 79.16%, 74.00% 74.78%, 76.00% 69.26%, 78.00% 62.82%, 80.00% 55.66%, 82.00% 48.05%, 84.00% 40.26%, 86.00% 32.55%, 88.00% 25.22%, 90.00% 18.51%, 92.00% 12.66%, 94.00% 7.88%, 96.00% 4.34%, 98.00% 2.16%, 100.00% 1.43%);
	background: var(--t3);
	height: var(--wave-height);
}

.wave-top.wave-top-green {
	clip-path: polygon(100% 100%, 0% 100%, 0.00% 76.23%, 2.00% 72.14%, 4.00% 67.04%, 6.00% 61.12%, 8.00% 54.59%, 10.00% 47.67%, 12.00% 40.61%, 14.00% 33.67%, 16.00% 27.08%, 18.00% 21.08%, 20.00% 15.88%, 22.00% 11.67%, 24.00% 8.60%, 26.00% 6.78%, 28.00% 6.26%, 30.00% 7.07%, 32.00% 9.18%, 34.00% 12.52%, 36.00% 16.96%, 38.00% 22.35%, 40.00% 28.50%, 42.00% 35.19%, 44.00% 42.18%, 46.00% 49.23%, 48.00% 56.08%, 50.00% 62.50%, 52.00% 68.25%, 54.00% 73.14%, 56.00% 76.98%, 58.00% 79.65%, 60.00% 81.04%, 62.00% 81.12%, 64.00% 79.87%, 66.00% 77.34%, 68.00% 73.62%, 70.00% 68.84%, 72.00% 63.18%, 74.00% 56.82%, 76.00% 50.00%, 78.00% 42.96%, 80.00% 35.95%, 82.00% 29.22%, 84.00% 23.00%, 86.00% 17.51%, 88.00% 12.96%, 90.00% 9.49%, 92.00% 7.24%, 94.00% 6.28%, 96.00% 6.65%, 98.00% 8.34%, 100.00% 11.27%);
	background: var(--t2);
	height: var(--wave-height);
}

.half-circle-bottom-border-green {
	height: 20px;
	background: radial-gradient(circle at top, var(--t2) 20px, transparent 0);
	background-size: 40px;
	background-repeat: round;
}

.half-circle-bottom-border-pink {
	height: 50px;
	background: url(../svg/half-circle-pink.svg);
	background-repeat: repeat;
	background-position: center;
	background-size: auto 50px;
}

/* blocks */
.block .div-block {
	margin-top: -1px;
	margin-bottom: -1px;

}

.block .div-block-green {
	background: var(--t2);
}

.block .img-anim-left img,
.block .img-anim-right img {
	width: auto;
	height: 200px;
}

.liste-plats {
	padding: 1rem 0 6rem;
	display: flex;
	flex-direction: column;
	gap: 2.5rem;
	font-size: 1.1rem;
}

.liste-plats .row {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 1rem;
	line-height: 1.3;
}

.liste-plats .row h4 {
	margin-bottom: 0.5rem;
	font-weight: normal;
	font-style: italic;
	font-size: 1.4rem;
}

.liste-plats .row>div:nth-child(2) span {
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--g1);
	border-radius: 50%;
	aspect-ratio: 1 / 1;
	padding: 0.5rem;
	line-height: 1;
}

.full-height-round-overlay {
	width: 100%;
	height: 100vh;
	overflow: hidden;
	position: relative;
}

.full-height-round-overlay .overlay {
	position: relative;
	overflow: hidden;
	width: 100%;
	height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	--clip: 10%;
}

.full-height-round-overlay .overlay.active {
	background-color: var(--g2);
}

.full-height-round-overlay .overlay .overlay-pizza {
	border-radius: 50%;
	padding: 2vw;
	background-image: url(../svg/assiette-rouge.svg);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: 100% 100%;
}

.full-height-round-overlay .overlay .overlay-pizza img {
	width: 25vw;
	height: auto;
}

.full-height-round-overlay .overlay .overlay-words {
	opacity: 0.1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	color: var(--white);
	white-space: nowrap;
	font-family: 'Monteilga', sans-serif;
	font-size: clamp(2.5rem, 1.9231rem + 2.5641vw, 5rem);
	line-height: 1.5;
	width: 100%;
}

.full-height-round-overlay .overlay .overlay-words-mask {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 50%, var(--g2) 85%);
}


.full-height-round-overlay .img-anim-left {
	position: absolute;
	top: 0%;
	left: 0;
}

.full-height-round-overlay .img-anim-right {
	position: absolute;
	top: 0%;
	right: 0;
}

.full-height-round-overlay img,
.block .img-anim-right img {
	width: auto;
	height: 50px;
}

#after-overlay-pizza {
	background: var(--g2);
	position: relative;
	height: 500px;
}

#after-overlay-pizza .block-container {
	padding: 5rem 2rem;
}

#after-overlay-pizza .wave-top.wave-top-green {
	clip-path: polygon(100% 100%, 0% 100%, 0.00% 76.23%, 2.00% 72.14%, 4.00% 67.04%, 6.00% 61.12%, 8.00% 54.59%, 10.00% 47.67%, 12.00% 40.61%, 14.00% 33.67%, 16.00% 27.08%, 18.00% 21.08%, 20.00% 15.88%, 22.00% 11.67%, 24.00% 8.60%, 26.00% 6.78%, 28.00% 6.26%, 30.00% 7.07%, 32.00% 9.18%, 34.00% 12.52%, 36.00% 16.96%, 38.00% 22.35%, 40.00% 28.50%, 42.00% 35.19%, 44.00% 42.18%, 46.00% 49.23%, 48.00% 56.08%, 50.00% 62.50%, 52.00% 68.25%, 54.00% 73.14%, 56.00% 76.98%, 58.00% 79.65%, 60.00% 81.04%, 62.00% 81.12%, 64.00% 79.87%, 66.00% 77.34%, 68.00% 73.62%, 70.00% 68.84%, 72.00% 63.18%, 74.00% 56.82%, 76.00% 50.00%, 78.00% 42.96%, 80.00% 35.95%, 82.00% 29.22%, 84.00% 23.00%, 86.00% 17.51%, 88.00% 12.96%, 90.00% 9.49%, 92.00% 7.24%, 94.00% 6.28%, 96.00% 6.65%, 98.00% 8.34%, 100.00% 11.27%);
	background-color: var(--t1);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%23916353' fill-opacity='0.2'%3E%3Cpath d='M0 38.59l2.83-2.83 1.41 1.41L1.41 40H0v-1.41zM0 1.4l2.83 2.83 1.41-1.41L1.41 0H0v1.41zM38.59 40l-2.83-2.83 1.41-1.41L40 38.59V40h-1.41zM40 1.41l-2.83 2.83-1.41-1.41L38.59 0H40v1.41zM20 18.6l2.83-2.83 1.41 1.41L21.41 20l2.83 2.83-1.41 1.41L20 21.41l-2.83 2.83-1.41-1.41L18.59 20l-2.83-2.83 1.41-1.41L20 18.59z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
	height: calc(var(--wave-height) + 11px);
	margin-bottom: -1px;
}

#after-overlay-pizza .block-container {
	background-color: var(--t1);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%23916353' fill-opacity='0.2'%3E%3Cpath d='M0 38.59l2.83-2.83 1.41 1.41L1.41 40H0v-1.41zM0 1.4l2.83 2.83 1.41-1.41L1.41 0H0v1.41zM38.59 40l-2.83-2.83 1.41-1.41L40 38.59V40h-1.41zM40 1.41l-2.83 2.83-1.41-1.41L38.59 0H40v1.41zM20 18.6l2.83-2.83 1.41 1.41L21.41 20l2.83 2.83-1.41 1.41L20 21.41l-2.83 2.83-1.41-1.41L18.59 20l-2.83-2.83 1.41-1.41L20 18.59z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

#after-overlay-pizza .block-container .block-content {
	max-width: 1000px;
	margin: 0 auto 0;
}

#after-overlay-pizza .img-anim-left {
	width: 150px;
	height: 150px;
	position: absolute;
	top: 0px;
	border-radius: 50%;
	overflow: hidden;
}

#after-overlay-pizza .img-anim-right {
	height: 150px;
	width: 150px;
	position: absolute;
	bottom: 0px;
	right: -150px;
}

#after-overlay-pizza .img-anim-right .shape {
	background-color: #843f34;
	aspect-ratio: 1;
	clip-path: shape(from 11.31% 33.98%, line to 11.31% 33.98%, line to 11.31% 33.98%, curve to 33.98% 11.31% with 4.44% 19.53%/19.53% 4.44%, line by 0% 0%, line by 0% 0%, curve by 32.04% 0% with 5.36% -15.08%/26.68% -15.08%, line by 0% 0%, line by 0% 0%, curve by 22.66% 22.66% with 14.45% -6.87%/29.54% 8.21%, line by 0% 0%, line by 0% 0%, curve by 0% 32.04% with 15.08% 5.36%/15.08% 26.68%, line by 0% 0%, line by 0% 0%, curve by -22.66% 22.66% with 6.87% 14.45%/-8.21% 29.54%, line by 0% 0%, line by 0% 0%, curve by -32.04% 0% with -5.36% 15.08%/-26.68% 15.08%, line by 0% 0%, line by 0% 0%, curve to 11.31% 66.02% with 19.53% 95.56%/4.44% 80.47%, line by 0% 0%, line by 0% 0%, curve to 11.31% 33.98% with -3.77% 60.66%/-3.77% 39.34%, close);
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	filter: brightness(0.9);
}

#after-overlay-pizza .img-anim-right .background {
	background-color: #843f34;
	aspect-ratio: 1;
	clip-path: shape(from 11.31% 33.98%, line to 11.31% 33.98%, line to 11.31% 33.98%, curve to 33.98% 11.31% with 4.44% 19.53%/19.53% 4.44%, line by 0% 0%, line by 0% 0%, curve by 32.04% 0% with 5.36% -15.08%/26.68% -15.08%, line by 0% 0%, line by 0% 0%, curve by 22.66% 22.66% with 14.45% -6.87%/29.54% 8.21%, line by 0% 0%, line by 0% 0%, curve by 0% 32.04% with 15.08% 5.36%/15.08% 26.68%, line by 0% 0%, line by 0% 0%, curve by -22.66% 22.66% with 6.87% 14.45%/-8.21% 29.54%, line by 0% 0%, line by 0% 0%, curve by -32.04% 0% with -5.36% 15.08%/-26.68% 15.08%, line by 0% 0%, line by 0% 0%, curve to 11.31% 66.02% with 19.53% 95.56%/4.44% 80.47%, line by 0% 0%, line by 0% 0%, curve to 11.31% 33.98% with -3.77% 60.66%/-3.77% 39.34%, close);
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0.2;
}

#after-overlay-pizza .horizontal-small-text .text {
font-size: clamp(2rem, 1.7692rem + 1.0256vw, 3rem);
white-space: initial;
text-align: center;
}

.block-intro-grid {
	max-width: 1000px;
	margin: 0 auto 0;
	display: flex;
	flex-direction: column;
	gap: 1rem;
	padding: 0 1rem;
}

.block-intro-grid .col-left {
	border: 8px ridge var(--l3);
	width: 100%;
}

.block-intro-grid .col-left .cadre {
	font-size: clamp(1.5rem, 1.3846rem + 0.5128vw, 2rem);
	line-height: 1.5;
	letter-spacing: -2px;
	white-space: nowrap;
	background: var(--t2);
	background-position: center;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	padding: 2rem;
	text-align: center;
}

.block-intro-grid .col-left .assiette-vin {
	border-radius: 50%;
	overflow: hidden;
	margin-bottom: 2rem;
}

.block-intro-grid .col-left .assiette-vin {
	width: 100%;
	height: 100%;
	aspect-ratio: 1 / 1;
}

.block-intro-grid .col-left .cadre p {
	margin-bottom: 1rem;
}

.block-intro-grid .col-left .cadre em {
	font-style: normal;
}

.block-intro-grid .col-left .cadre span {
	color: var(--l3);
}

.block-intro-grid .col-right {
	font-size: 1.23rem;
	width: 100%;
}

.block-intro-grid .highlight-text p {
	color: var(--l1);
}

#il-y-a {
	height: 160px;
	margin-bottom: 4rem;
}

#il-y-a .img-anim-left {
	position: absolute;
	width: 87px;
	height: 300px;
	display: flex;
	justify-content: center;
}

#il-y-a .img-anim-left img,
#il-y-a .img-anim-right img {
	width: auto;
	height: 100%;
}

#il-y-a .img-anim-right {
	position: absolute;
	width: 100px;
	height: 100px;
	right: 0;
	border-radius: 50%;
	overflow: hidden;
	filter: brightness(0.9);
}

#il-y-a .img-anim-right img {
	display: none;
	width: 100%;
	height: 100%;
	aspect-ratio: 1 / 1;
}

#et-celles .horizontal-big-text {
	padding-top: 2rem;
}

#bienvenue-famiglia {
	height: 60vh;
	padding-top: 15vh;
}

#bienvenue-famiglia .img-anim-left {
	background-image: url(../video/sophia_cuisine.jpg);
	background-color: var(--t1);
	background-position: center center;
	background-repeat: repeat;
	background-size: 100% 100%;
	width: 150px;
	aspect-ratio: 1 / 1;
	position: absolute;
	top: 0;
	border-radius: 50%;
	overflow: hidden;
	filter: brightness(0.9);
}

#bienvenue-famiglia .img-anim-left img {
	width: 100%;
	height: 100%;
	aspect-ratio: 1 / 1;
}

#bienvenue-famiglia .img-anim-right {
	background-image: url(../video/platini.jpg);
	background-color: var(--white);
	background-position: center center;
	background-repeat: repeat;
	background-size: 100% 100%;
	width: 150px;
	aspect-ratio: 1 / 1;
	position: absolute;
	bottom: 0;
	right: 0;
	border-radius: 50%;
	overflow: hidden;
	filter: brightness(0.9);
}

#bienvenue-famiglia .img-anim-right img {
	width: 100%;
	height: 100%;
	aspect-ratio: 1 / 1;
}

/* footer */
.footer {
	margin-top: -20px;
	width: 100%;
	z-index: 1;
	position: relative;
}

.footer .frise-top-footer {
	height: 20px;
	background: radial-gradient(circle at bottom, var(--t2) 20px, transparent 0);
	background-size: 40px;
	background-repeat: round;
}

.footer .content {
	background: linear-gradient(to bottom, rgba(132, 63, 52, 1) 0%, rgba(56, 27, 22, 1) 100%);
	padding: 3rem 1rem;
	text-align: center;
}

.footer a {
	text-decoration: none;
}

.footer a:hover {
	text-decoration: underline;
}

/* canvas */
canvas {
	position: fixed;
	top: 0;
	opacity: 0.085;
	z-index: 9999;
	pointer-events: none;
	user-select: none;
	filter: grayscale(1);
}

.noise-canvas {
	position: fixed;
	top: 0;
	width: 100%;
	height: 100vh;
	opacity: 1;
	z-index: 9999;
	pointer-events: none;
	user-select: none;
	background: url(../img/noise.png);
	background-size: 150px;
	filter: invert(1);
}

.grid-dishes {
	position: relative;
	background: url(../img/italian-dinner.png), var(--t2);
	background-position: center bottom;
	background-repeat: no-repeat;
	background-size: contain;
	background-blend-mode: soft-light;
}

.grid-dishes .bottom-bubbles {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 86px;
	height: var(--wave-height);
	margin-bottom: -1px;
}

.grid-dishes .bottom-bubbles .wave-bottom-white {
	clip-path: polygon(100% 100%, 0% 100%, 0.00% 76.23%, 2.00% 72.14%, 4.00% 67.04%, 6.00% 61.12%, 8.00% 54.59%, 10.00% 47.67%, 12.00% 40.61%, 14.00% 33.67%, 16.00% 27.08%, 18.00% 21.08%, 20.00% 15.88%, 22.00% 11.67%, 24.00% 8.60%, 26.00% 6.78%, 28.00% 6.26%, 30.00% 7.07%, 32.00% 9.18%, 34.00% 12.52%, 36.00% 16.96%, 38.00% 22.35%, 40.00% 28.50%, 42.00% 35.19%, 44.00% 42.18%, 46.00% 49.23%, 48.00% 56.08%, 50.00% 62.50%, 52.00% 68.25%, 54.00% 73.14%, 56.00% 76.98%, 58.00% 79.65%, 60.00% 81.04%, 62.00% 81.12%, 64.00% 79.87%, 66.00% 77.34%, 68.00% 73.62%, 70.00% 68.84%, 72.00% 63.18%, 74.00% 56.82%, 76.00% 50.00%, 78.00% 42.96%, 80.00% 35.95%, 82.00% 29.22%, 84.00% 23.00%, 86.00% 17.51%, 88.00% 12.96%, 90.00% 9.49%, 92.00% 7.24%, 94.00% 6.28%, 96.00% 6.65%, 98.00% 8.34%, 100.00% 11.27%);
	background-color: var(--g2);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%23916353' fill-opacity='0.2'%3E%3Cpath d='M0 38.59l2.83-2.83 1.41 1.41L1.41 40H0v-1.41zM0 1.4l2.83 2.83 1.41-1.41L1.41 0H0v1.41zM38.59 40l-2.83-2.83 1.41-1.41L40 38.59V40h-1.41zM40 1.41l-2.83 2.83-1.41-1.41L38.59 0H40v1.41zM20 18.6l2.83-2.83 1.41 1.41L21.41 20l2.83 2.83-1.41 1.41L20 21.41l-2.83 2.83-1.41-1.41L18.59 20l-2.83-2.83 1.41-1.41L20 18.59z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
	height: 100%;
}

.grid-dishes:not(.last) {
	padding-top: 1rem;
	padding-bottom: 5rem;
}

.horizontal-big-text .text {
	font-size: clamp(2.7rem, 1.7077rem + 4.4103vw, 7rem);
	font-weight: lighter;
	letter-spacing: -3px;
	justify-content: center;
	white-space: nowrap;
}

.horizontal-small-text .text {
	font-size: clamp(1rem, 0.5385rem + 2.0513vw, 3rem);
	line-height: 2.1;
	justify-content: center;
	white-space: nowrap;
}

/* headers */
.header-bubbles {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: var(--wave-height);
}

.header-bubbles svg {
	width: 100%;
	height: 100%;
}

.header-bubbles .wave-bottom-white {
	clip-path: polygon(100% 100%, 0% 100%, 0.00% 76.23%, 2.00% 72.14%, 4.00% 67.04%, 6.00% 61.12%, 8.00% 54.59%, 10.00% 47.67%, 12.00% 40.61%, 14.00% 33.67%, 16.00% 27.08%, 18.00% 21.08%, 20.00% 15.88%, 22.00% 11.67%, 24.00% 8.60%, 26.00% 6.78%, 28.00% 6.26%, 30.00% 7.07%, 32.00% 9.18%, 34.00% 12.52%, 36.00% 16.96%, 38.00% 22.35%, 40.00% 28.50%, 42.00% 35.19%, 44.00% 42.18%, 46.00% 49.23%, 48.00% 56.08%, 50.00% 62.50%, 52.00% 68.25%, 54.00% 73.14%, 56.00% 76.98%, 58.00% 79.65%, 60.00% 81.04%, 62.00% 81.12%, 64.00% 79.87%, 66.00% 77.34%, 68.00% 73.62%, 70.00% 68.84%, 72.00% 63.18%, 74.00% 56.82%, 76.00% 50.00%, 78.00% 42.96%, 80.00% 35.95%, 82.00% 29.22%, 84.00% 23.00%, 86.00% 17.51%, 88.00% 12.96%, 90.00% 9.49%, 92.00% 7.24%, 94.00% 6.28%, 96.00% 6.65%, 98.00% 8.34%, 100.00% 11.27%);
	background-color: var(--g2);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%23916353' fill-opacity='0.2'%3E%3Cpath d='M0 38.59l2.83-2.83 1.41 1.41L1.41 40H0v-1.41zM0 1.4l2.83 2.83 1.41-1.41L1.41 0H0v1.41zM38.59 40l-2.83-2.83 1.41-1.41L40 38.59V40h-1.41zM40 1.41l-2.83 2.83-1.41-1.41L38.59 0H40v1.41zM20 18.6l2.83-2.83 1.41 1.41L21.41 20l2.83 2.83-1.41 1.41L20 21.41l-2.83 2.83-1.41-1.41L18.59 20l-2.83-2.83 1.41-1.41L20 18.59z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
	height: 100%;
}

.header-elements {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
}

.header-persos {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: var(--persos);
}

.header-persos .perso-left .svg-circle {
	background-position: center center;
	background-repeat: repeat;
	background-size: 10px 10px;
	border-radius: 50%;
	width: var(--persos);
	height: var(--persos);
	transform: rotate(-45deg);
	background-image: linear-gradient(90deg, #462523 0, #cb9b51 22%, #f6e27a 45%, #f6f2c0 50%, #f6e27a 55%, #cb9b51 78%, #462523 100%);
	background-image: linear-gradient(90deg, var(--t1) 50%, var(--t2) 51%);
}

.header-persos .perso-right .svg-circle {
	background-position: center center;
	background-repeat: repeat;
	background-size: 30px 30px;
	border-radius: 50%;
	width: var(--persos);
	height: var(--persos);
	background-image: url(../svg/chess-maroon.svg);
	background-color: var(--t1);
	background-position: center center;
	background-repeat: repeat;
	background-size: 10px 10px;
}

.container_perso {
	font-size: 100px;
}

.perso-left,
.perso-right {
	position: relative;
}

.perso-left .container_perso {
	position: absolute;
	left: -150px;
	height: var(--persos);
}

.perso-left .container_perso img {
	width: auto;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}

.perso-right .container_perso {
	position: absolute;
	right: -150px;
	height: var(--persos);
}

.perso-right .container_perso img {
	width: auto;
	height: 100%;
	position: absolute;
	top: 0;
	right: 0;
}

/* video player */
.vjs-theme-city {
	border-radius: 15px;
	overflow: hidden;
	--vjs-theme-city--primary: #bf3b4d;
	--vjs-theme-city--secondary: #fff;
}

.vjs-theme-city .vjs-control-bar {
	height: 70px;
	padding-top: 20px;
	background: none;
	background-image: linear-gradient(to top, #000, rgba(0, 0, 0, 0));
}

.vjs-theme-city .vjs-button>.vjs-icon-placeholder::before {
	line-height: 50px;
}

.vjs-theme-city .vjs-play-progress::before {
	display: none;
}

.vjs-theme-city .vjs-progress-control {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	width: 100%;
	height: 20px;
}

.vjs-theme-city .vjs-progress-control .vjs-progress-holder {
	position: absolute;
	top: 20px;
	right: 0;
	left: 0;
	width: 100%;
	margin: 0;
}

.vjs-theme-city .vjs-play-progress {
	background-color: var(--vjs-theme-city--primary);
}

.vjs-theme-city .vjs-remaining-time {
	order: 1;
	line-height: 50px;
	flex: 3;
	text-align: left;
}

.vjs-theme-city .vjs-play-control {
	order: 2;
	flex: 8;
	font-size: 1.75em;
}

.vjs-theme-city .vjs-volume-panel,
.vjs-theme-city .vjs-picture-in-picture-control,
.vjs-theme-city .vjs-fullscreen-control {
	order: 3;
	flex: 1;
}

.vjs-theme-city .vjs-volume-panel:hover .vjs-volume-control.vjs-volume-horizontal {
	height: 100%;
}

.vjs-theme-city .vjs-mute-control {
	display: none;
}

.vjs-theme-city .vjs-volume-panel {
	margin-left: 0.5em;
	margin-right: 0.5em;
	padding-top: 1.5em;
}

.vjs-theme-city .vjs-volume-panel,
.vjs-theme-city .vjs-volume-panel:hover,
.vjs-theme-city .vjs-volume-panel.vjs-volume-panel-horizontal:hover,
.vjs-theme-city .vjs-volume-panel:focus .vjs-volume-control.vjs-volume-horizontal,
.vjs-theme-city .vjs-volume-panel:hover .vjs-volume-control.vjs-volume-horizontal,
.vjs-theme-city .vjs-volume-panel:active .vjs-volume-control.vjs-volume-horizontal,
.vjs-theme-city .vjs-volume-panel.vjs-volume-panel-horizontal:hover,
.vjs-theme-city .vjs-volume-bar.vjs-slider-horizontal {
	width: 3em;
}

.vjs-theme-city .vjs-volume-level::before {
	font-size: 1em;
}

.vjs-theme-city .vjs-volume-panel .vjs-volume-control {
	opacity: 1;
	width: 100%;
	height: 100%;
}

.vjs-theme-city .vjs-volume-bar {
	background-color: transparent;
	margin: 0;
}

.vjs-theme-city .vjs-slider-horizontal .vjs-volume-level {
	height: 100%;
}

.vjs-theme-city .vjs-volume-bar.vjs-slider-horizontal {
	margin-top: 0;
	margin-bottom: 0;
	height: 100%;
}

.vjs-theme-city .vjs-volume-bar::before {
	content: '';
	z-index: 0;
	width: 0;
	height: 0;
	position: absolute;
	top: 0px;
	left: 0;

	border-style: solid;
	border-width: 0 0 1.75em 3em;
	border-color: transparent transparent rgba(255, 255, 255, 0.25) transparent;
}

.vjs-theme-city .vjs-volume-level {
	overflow: hidden;
	background-color: transparent;
}

.vjs-theme-city .vjs-volume-level::before {
	content: '';
	z-index: 1;
	width: 0;
	height: 0;
	position: absolute;
	top: 0;
	left: 0;
	border-style: solid;
	border-width: 0 0 1.75em 3em;
	border-color: transparent transparent var(--vjs-theme-city--secondary) transparent;
}

.video-js .vjs-big-play-button {
	font-size: 3em;
	line-height: 3em;
	height: 3em;
	width: 3em;
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	padding: 0;
	margin-top: -1.5em;
	margin-left: -1.5em;
	cursor: pointer;
	opacity: 1;
	background-color: var(--t2);
	border: none;
	border-radius: 50%;
	transition: all 0.4s;
}

.video-js:hover .vjs-big-play-button,
.video-js .vjs-big-play-button:focus {
	border-color: #fff;
	background-color: var(--l2);
	color: var(--g2);
	transition: all 0s;
}

.vjs-theme-city .vjs-play-progress {
	background-color: var(--l2);
}

.vjs-playing.vjs-has-started .vjs-big-play-button {
	display: none;
}

@media screen and (min-width: 768px) {

	:root {
		--plats-images-anims-size: 20vw;
		--wave-height: 70px;
		--persos: 400px;
	}

	header {
		justify-content: center;
		padding-top: 0;
	}

	.header-elements {
		position: absolute;
		left: 0;
		bottom: 20vh;
		width: 100%;
		height: 100%;
	}

	.loader h1 {
		font-size: 4rem;
	}

	header .logo-anim {
		padding: 0 0;
	}

	.horizontal-big-text .text {
		font-size: clamp(5rem, 4.5385rem + 2.0513vw, 7rem);
		letter-spacing: -6px;
	}

	.hr-wave {
		--size: 30px;
		--b: 10px;
		height: 150px;
		margin: 2rem 0;
	}

	.nav {
		background-color: transparent;
		display: block;
		opacity: 0;
		right: 0;
		height: initial;
	}

	.nav .nav-container {
		background: var(--g2);
		display: flex;
		align-items: center;
		gap: 2rem;
		padding: 1rem 2rem 0.75rem;
		width: 100%;
		height: 80px;
	}

	.nav .nav-border {
		height: 20px;
		background: radial-gradient(circle at top, var(--g2) 20px, transparent 0);
		background-size: 40px;
		background-repeat: round;
	}

	#nav-toggle {
		display: none;
	}

	.grid-dishes ul li {
		width: clamp(500px, 20vw, 300px);
		padding: 0px 40px;
		margin: 0 2rem;
	}

	#bienvenue-famiglia .img-anim-left {
		width: 430px;
	}

	#bienvenue-famiglia .img-anim-right {
		width: 480px;
	}

	.wrapper .wrapper-logo svg {
		width: 700px;
		height: 254px;
	}

	.perso-left .container_perso {
		left: -400px;
	}

	.perso-right .container_perso {
		right: -400px;
	}

	#il-y-a {
		height: 400px;
	}

	#il-y-a .img-anim-left {
		width: auto;
		height: 700px;
	}

	#il-y-a .img-anim-right {
		width: 300px;
		height: 300px;
	}

	.block-intro-grid {
		max-width: 1000px;
		margin: 0 auto 0;
		align-items: center;
		gap: 3rem;
		padding: 0 0 0 0;
		display: flex;
		flex-direction: row;
	}

	.block .content .menu-cat-description {
		padding: 2rem 0;
	}

	.block .content {
		margin: 0 var(--plats-images-anims-size);
		padding: 0rem 2.5rem;
	}

	.block .content.content-video {
		margin: 0 5vw;
		padding: 4rem 13vw;
	}

	.block .content h2 {
		font-size: 4rem;
		text-align: left;
		padding: 0 0 0;
	}

	.block .content h2.h2-opening {
		font-size: 3rem;
		padding: 3rem 0 0;
	}

	.grid-dishes {
		background: url(../img/italian-dinner.png), var(--t2);
		background-position: center top;
		background-repeat: no-repeat;
		background-size: cover;
		background-blend-mode: soft-light;
	}

	.grid-dishes:not(.last) {
		padding-top: 5rem;
		padding-bottom: 10rem;
	}

	.liste-plats {
		padding: 1rem 0 4rem;
		gap: 2.5rem;
		font-size: 1.1rem;
	}

	.liste-plats .row {
		gap: 2rem;
		line-height: 1.5;
	}

	.full-height-round-overlay .img-anim-left {
		top: 25vh;
	}

	.full-height-round-overlay .img-anim-right {
		top: 25%;
	}

	.full-height-round-overlay img,
	.block .img-anim-right img {
		height: 200px;
	}

	.full-height-round-overlay .overlay .overlay-pizza {
		padding: 2rem;
	}

	.block-intro-grid .col-left {
		width: 45%;
	}

	.block-intro-grid .col-right {
		width: 55%;
	}

	#after-overlay-pizza .img-anim-left {
		width: 450px;
		height: 450px;
	}

	#after-overlay-pizza .img-anim-right {
		width: 450px;
		height: 450px;
		right: -450px;
	}

	.italian-dishes li img {
		border: 2.5vw solid transparent;
	}

	.footer .social {
		display: none;
	}

}

@media screen and (min-width: 1600px) {

	:root {
		--plats-images-anims-size: 22.5vw;
	}

}