html {
max-width: 100vw;
scroll-behavior: smooth;
max-width: 100%;
overflow-x: hidden;
cursor: none;
}
a {
cursor: none;
}
html,
body {
font-family: Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue",
sans-serif;
/* font-size: calc(14px + (26 - 14) * ((100vw - 300px) / (1600 - 300))); */
overflow-x: hidden;
-webkit-transition: background 0.3s cubic-bezier(0.4, 0.4, 0.7, 0.85);
transition: background 0.3s cubic-bezier(0.4, 0.4, 0.7, 0.85);
}
.off {
display: none !important;
}
body {
/* background-color: #6f00ff; */
background: rgb(146, 157, 255);
background: linear-gradient(
0deg,
rgba(146, 157, 255, 1) 0%,
rgba(111, 0, 255, 1) 100%
);
color: white;
/* height: 100vh; */
}
/* body {
background: #ffffff;
background-color: rgb(255, 184, 0);
background-image: linear-gradient(
315.01deg,
rgb(255, 113, 13) 8.31%,
rgb(255, 184, 0) 88.22%
);
height: 100vh;
position: fixed;
} */
section {
display: flex;
}
a {
text-decoration: none;
color: white;
}
.nav_left > img {
width: 190px;
}
section {
display: flex;
}
.remplirH:hover {
color: white;
}
.menu {
height: 100px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
line-height: normal;
padding: 15px 5% 15px 5%;
}
.menu a {
font-size: 18px;
font-weight: 700;
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.nav_middle a {
padding: 0 10px 3px 10px;
}
.nav_middle a:nth-child(1) {
border-bottom: solid white 4px;
border-bottom-left-radius: 7%;
}
.nav_right {
padding: 0 0 4px 4px;
/* border-left: solid white 4px; */
/* border-bottom: solid white 4px; */
border-bottom-left-radius: 7%;
}
.panier::after {
content: "1";
text-align: center;
width: 42px;
height: 20px;
margin-left: 5px;
position: relative;
border-radius: 50%;
font-size: 12px;
color: white;
background-color: orange;
padding: 0px 5px 0px 5px;
vertical-align: super;
}
.m1 {
margin: 0 5% 0 5%;
}
.section_1 {
/* height: 100vh; */
margin-top: 5%;
padding-bottom: 15%;
}
.h1_spec {
/* font-size: 100px; */
/* font-size: calc(50px + (26 - 14) * ((100vw - 300px) / (1600 - 300))); */
font-size: calc(25px + (45 - 30) * ((100vw - 10vw) / (1600 - 300)));
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
text-transform: uppercase;
font-weight: 800;
width: 65%;
}
.h1_big {
font-size: calc(35px + (90 - 35) * ((100vw - 10vw) / (1600 - 300)));
}
@keyframes wiggle {
0% {
transform: rotate(0deg);
}
33% {
transform: rotate(5deg);
}
66% {
transform: rotate(-5deg);
}
100% {
transform: rotate(0deg);
}
}
.wig {
animation: wiggle 2s ease-in-out infinite;
-webkit-animation: wiggle 2s ease-in-out infinite;
}
.produit_hp {
position: absolute;
top: 12%;
right: 5%;
width: 40%;
transition: cubic-bezier(0.42, 0.04, 0.14, 0.99) 1s;
}
.produit_hp2 {
opacity: 0;
position: absolute;
top: 12%;
right: 5%;
width: 40%;
transition: cubic-bezier(0.42, 0.04, 0.14, 0.99) 1s;
/* animation: wiggle 2s ease-in-out infinite;
-webkit-animation: wiggle 2s ease-in-out infinite; */
}
.nav_two img {
width: 150px;
}
.nav_two div:nth-child(2) {
display: flex;
}
.burger {
width: 50px;
/* display: block !important; */
flex-direction: column;
margin-left: 25px;
cursor: pointer;
margin-left: 60px;
}
.burger > div {
height: 2px;
border-radius: 25px;
margin-bottom: 10px;
background: rgb(255, 255, 255);
/* pour la transition burger */
transition: 0.5s ease-in all;
z-index: 30;
position: relative;
}
.burger > div:nth-child(2) {
width: 40px;
float: right;
}
.cross > :nth-child(1) {
transform: translateY(5px) rotate(45deg);
}
.cross > :nth-child(2) {
transform: translateY(-5px) rotate(-45deg);
}
.cross div:nth-child(2) {
width: 50px;
}
.cross > :nth-child(3) {
opacity: 0;
}
section {
display: flex;
justify-content: space-between;
}
.section_articles {
margin-bottom: 10vh;
}
.section_articles article {
width: 30%;
}
.m2 {
margin: 0 20px 0 20px;
}
.article_box {
/* width: 250px; */
height: 12vw;
border: 2px solid white;
background-color: white;
-webkit-border-top-left-radius: 20px;
-webkit-border-top-right-radius: 20px;
-moz-border-radius-topleft: 20px;
-moz-border-radius-topright: 20px;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
.texte_article {
text-align: center;
padding: 5px 15px 5px 15px;
text-transform: uppercase;
font-weight: 700;
line-height: 1.2;
-webkit-border-bottom-right-radius: 20px;
-webkit-border-bottom-left-radius: 20px;
-moz-border-radius-bottomright: 20px;
-moz-border-radius-bottomleft: 20px;
border-bottom-right-radius: 20px;
border-bottom-left-radius: 20px;
color: #6f00ff;
background-color: white;
height: 10vh;
font-size: calc(5px + (20 - 10) * ((100vw - 10vw) / (1600 - 300)));
}
.abox1 {
background-image: url(../elements/images/labomeat.jpg);
}
.abox2 {
background-image: url(../elements/images/petri.png);
}
.abox3 {
background-image: url(../elements/images/boucher.jpg);
}
.abox4 {
background-image: url(../elements/images/meatt.jpg);
}
.article_box div {
width: 120%;
height: 100%;
}
.suggestion1 {
transform: translateY(-75px);
}
.suggestion2,
.suggestion3,
.suggestion4 {
transform: translateY(-50px);
}
.suggestion2 img,
.suggestion3 img,
.suggestion4 img {
width: 70%;
align-items: center;
}
.section_intro img {
width: 70%;
}
.img_h2 {
float: right;
}
.text_question {
font-size: 20px;
font-weight: 500;
padding-top: 15px;
}
.comment_q {
width: 50%;
float: right;
padding-bottom: 15px;
}
.section_explication {
padding-top: 5%;
}
.section_intro div {
width: 50%;
}
@keyframes scaletxt {
0% {
transform: scale(1);
}
50% {
transform: scale(1.07);
}
100% {
transform: scale(1);
}
}
.remplirH {
color: transparent;
font-weight: 800;
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
-webkit-text-stroke: 0.7px white;
font-size: calc(20px + (40 - 20) * ((100vw - 10vw) / (1600 - 300)));
text-transform: uppercase;
padding-bottom: 5px;
animation: scaletxt 2s ease-in-out infinite;
-webkit-animation: scaletxt 2s ease-in-out infinite;
}
.rempli {
color: white;
-webkit-text-stroke: 0px white;
animation: none;
-webkit-animation: none;
}
.raisons {
font-size: 10px;
padding-bottom: 5px;
}
.explications {
padding-top: 10px;
font-size: 10px;
}
.remplir {
border-bottom: solid white 1.5px;
padding: 5px 0 5px 0;
font-weight: 500;
}
.section_finale {
margin-top: 5%;
}
.section_finale img {
width: 75%;
}
.section_finale div:last-of-type img {
float: right;
}
footer {
line-height: 1.5;
}
.conditions {
font-size: 12px;
padding: 30px 0 15px 0;
display: flex;
justify-content: space-between;
}
.logo_footer {
width: 30%;
padding-top: 10%;
padding-bottom: 10%;
}
footer div ul li img {
width: 65%;
padding-bottom: 5%;
}
footer div ul {
display: flex;
justify-content: space-between;
text-align: center;
}
.titres_footer {
padding-bottom: 50px;
font-size: 25px;
font-weight: 600;
}
footer div:first-of-type {
padding-bottom: 5%;
}
strong {
font-weight: 800;
}
@keyframes colorc {
0% {
background: #b22cff;
}
25% {
background: #929dff;
}
50% {
background: #ffb800;
}
75% {
background: #ff710d;
}
100% {
background: #b22cff;
}
}
@keyframes color1 {
0% {
/* background: rgb(146, 157, 255); */
background: linear-gradient(
0deg,
rgba(146, 157, 255, 1) 0%,
rgba(111, 0, 255, 1) 100%
);
}
100% {
/* background: rgb(111, 0, 255, 1); */
background: linear-gradient(
0deg,
rgba(111, 0, 255, 1) 0%,
rgba(146, 157, 255, 1) 100%
);
}
}
@keyframes color2 {
0% {
/* background: #ffb800; */
background: linear-gradient(
0deg,
rgba(146, 157, 255, 1) 0%,
rgba(111, 0, 255, 1) 100%
);
}
30% {
background: linear-gradient(
0deg,
rgba(111, 0, 255, 1) 0%,
rgba(#ffb800) 100%
);
}
100% {
/* background: #ff710d; */
background: linear-gradient(0deg, rgba(#ffb800) 0%, rgba(#ff710d) 100%);
}
}
.transition1 {
-webkit-transition: 1.5s ease-in-out;
-moz-transition: 1.5s ease-in-out;
-ms-transition: 1.5s ease-in-out;
-o-transition: 1.5s ease-in-out;
transition: 1.5s ease-in-out;
-webkit-animation: color1 1.5s linear alternate both;
animation: color1 1.5s linear alternate both;
}
.transition2 {
-webkit-transition: 1.5s ease-in-out;
-moz-transition: 1.5s ease-in-out;
-ms-transition: 1.5s ease-in-out;
-o-transition: 1.5s ease-in-out;
transition: 1.5s ease-in-out;
-webkit-animation: color2 1.5s linear alternate both;
animation: color2 1.5s linear alternate both;
}
.degradesbg {
width: 100%;
height: 400%;
max-height: 2800px;
position: fixed;
z-index: -1;
transform: translateY(0px);
background: rgb(146, 157, 255);
background: linear-gradient(
0deg,
rgba(255, 184, 0, 1) 0%,
rgba(255, 113, 13, 1) 40%,
rgba(146, 157, 255, 1) 70%,
rgba(111, 0, 255, 1) 100%
);
display: block;
transition: cubic-bezier(0.42, 0.04, 0.14, 0.99) 1s;
/* animation: color1 2s linear alternate both; */
}
.degradesbg div {
width: 100%;
height: 100vh;
}
.nav_two {
display: none;
/* position: fixed; */
}
.menu2 {
transform: translateX(950px);
position: absolute;
width: 50%;
display: none;
flex-direction: column;
background-color: white;
/* float: right; */
/* top: 100px; */
right: 0;
transition: cubic-bezier(0.42, 0.04, 0.14, 0.99) 1s;
z-index: 9999;
}
.menu2 a {
color: #6f00ff;
padding: 15px 20px 15px 20px;
font-size: 18px;
text-transform: uppercase;
font-weight: 800;
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.appear {
transform: translateX(950px);
display: flex;
}
@keyframes fleches {
0% {
transform: translateY(3.5px);
}
80% {
transform: translateY(15px);
}
100% {
transform: translateY(3.5px);
}
}
.fleche {
display: block;
padding-bottom: 10%;
}
.fleche div div {
width: 25px;
margin-bottom: 10px;
height: 2px;
background-color: white;
border-radius: 25%;
}
.f1,
.f2 {
display: flex;
justify-content: center;
}
.fd {
transform: rotate(-45deg) translateY(5.4px);
}
.fg {
transform: rotate(45deg) translateY(5.4px);
}
.f1 {
animation: fleches 2s linear 1s infinite both;
padding-bottom: 5px;
}
.f2 {
animation: fleches 2s linear 1.2s infinite both;
}
.cursor {
position: fixed;
width: 20px;
height: 20px;
background: white;
transition: transform 0.1s;
border-radius: 50%;
transform: translate(-50%, -50%);
pointer-events: none;
z-index: 99999;
}
.hover-effect {
transform: scale(2.5);
mix-blend-mode: difference;
}
.e404 {
padding-top: 15%;
text-align: center;
font-weight: 800;
font-size: 5rem;
}
.err404 {
text-align: center;
}
.a404 {
border: solid white 2px;
padding: 15px 10px 15px 10px;
display: flex;
font-weight: 600;
justify-content: center;
width: 30%;
margin: auto;
margin-top: 10%;
}
.a404:hover {
background-color: white;
color: #6f00ff;
}
.logoblock {
transform: translateY(-7px);
}
.choix_prod h2 {
font-weight: 600;
padding-bottom: 10%;
}
.prix {
padding-top: 5%;
float: right;
font-weight: 800;
font-size: calc(
10px + (20 - 10) * ((100vw - 10vw) / (1600 - 300))
) !important;
}
.choix_prod p {
font-size: calc(8px + (15 - 8) * ((100vw - 10vw) / (1600 - 300)));
line-height: 1.2;
}
.desc_produit > div > p {
padding-bottom: 10%;
border-bottom: white solid 1.5px;
}
.desc_produit h1 {
font-size: calc(20px + (40 - 20) * ((100vw - 10vw) / (1600 - 300)));
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
text-transform: uppercase;
font-weight: 800;
width: 100%;
padding-bottom: 5%;
padding-top: 5%;
}
.section_produit > div {
width: 50%;
}
.choix_prod {
display: flex;
padding-top: 10%;
justify-content: space-between;
}
.desc_produit > div:last-child {
padding-top: 10%;
display: flex;
justify-content: flex-end;
font-weight: 600;
margin-bottom: 50px;
}
.checked {
border: #ffffff solid 1px !important;
background: linear-gradient(210deg, #ffb800 0%, #ff710d 50%);
}
.choix_prod a {
padding: 5%;
border: #ff710d solid 2px;
border-radius: 25px;
width: 45%;
background-color: #6f00ff;
}
.desc_produit a {
font-size: calc(5px + (18 - 5) * ((100vw - 10vw) / (1600 - 300)));
}
.desc_produit > div:last-child a:nth-child(1) {
padding: 10px 20px 10px 20px;
border-radius: 25px;
border: #ff710d solid 1.5px;
white-space: nowrap;
}
.desc_produit > div:last-child a:nth-child(2) {
margin-left: 30px;
padding: 10px 20px 10px 20px;
border-radius: 25px;
color: black;
background: #ffffff;
border: #ffffff solid 1.5px;
text-align: center;
}
.desc_produit > div:last-child a:nth-child(1):hover {
background: linear-gradient(210deg, #ffb800 0%, #ff710d 50%);
border: #ffffff solid 0.5px;
}
.desc_produit > div:last-child a:nth-child(2):hover {
color: #ffffff;
background: linear-gradient(210deg, #ffb800 0%, #ff710d 50%);
border: #ffffff solid 1.5px;
}
.section_produit img {
width: 80%;
}
.circle_prod {
border: solid #ff710d 2px;
width: 40vw;
height: 40vw;
position: absolute;
z-index: -1;
border-radius: 50%;
transform: translateX(-150px) translateY(100px);
}
.search {
border-radius: 25px;
background: transparent;
color: white;
width: 170px;
height: 30px;
border: rgb(236, 236, 236) solid 2px;
border-spacing: 50px;
padding-left: 10px;
}
::placeholder {
color: white;
font-size: 1em;
}
.section_produit {
padding-bottom: 10%;
}
.fav_svg {
float: right;
width: 10%;
margin: 10px 10px 0 0;
}
.bas_recette {
display: flex;
padding-top: 10px;
justify-content: space-between;
}
.bas_recette img {
width: 30%;
}
.section_recettes {
display: block;
}
.sous_recettes {
margin-top: 10%;
display: flex;
vertical-align: baseline;
align-items: center;
}
/* .sous_recettes div {
width: 30%;
} */
.section_recettes article a {
width: 17%;
}
.sous_recettes a {
font-weight: 700;
padding: 10px 15px;
border-radius: 25px;
text-align: center;
}
.sous_recettes a:nth-child(1) {
background-color: white;
color: #6f00ff;
}
.section_recettes > div > div {
margin-right: 40%;
}
.section_recettes > div a {
margin-top: 5%;
}
.section_recettes article {
width: 100%;
display: flex;
justify-content: space-between;
margin-top: 5%;
}
.recette1 {
background-image: url(../elements/images/recettes/burger_recipe.jpg);
}
.recette2 {
background-image: url(../elements/images/recettes/sushi_recipe.jpg);
}
.recette3 {
background-image: url(../elements/images/recettes/curry_recipe.jpg);
}
.recette4 {
background-image: url(../elements/images/recettes/tacos_recipe.jpg);
}
.recette5 {
background-image: url(../elements/images/recettes/agneau_recipe.jpg);
}
.recette6 {
background-image: url(../elements/images/recettes/dinde_recipe.jpg);
}
.recette7 {
background-image: url(../elements/images/recettes/porc_recipe.jpg);
}
.recette8 {
background-image: url(../elements/images/recettes/saumon_recipe.jpg);
}
/* */
@media (max-width: 600px) {
.burger {
margin-left: 20px;
}
.texte_article {
height: 5vh;
line-height: 2;
}
.section_1 {
padding-bottom: 0% !important;
margin-top: 0%;
}
.choix_prod {
padding-top: 5%;
}
.desc_produit > div > p {
padding-bottom: 5%;
}
.desc_produit > div:last-child {
padding-top: 5%;
}
.desc_produit > div:last-child {
padding-top: 5%;
}
.section_produit img {
width: 70%;
}
.desc_produit h1 {
padding-top: 0;
}
.section_produit {
transform: translateY(-50px);
}
.suggestion1 {
transform: translateY(-45px);
}
.suggestion2,
.suggestion3,
.suggestion4 {
transform: translateY(-25px);
}
.desc_produit > div > p {
font-size: 12px;
}
.circle_prod {
transform: translateX(-50px) translateY(70px);
}
.section_produit {
display: block;
}
.section_produit > div {
width: 100%;
}
.fleche {
display: block;
padding-bottom: 155px;
}
.m2:nth-child(3) {
display: none;
}
.texte_article {
height: 5vh;
}
.section_articles {
justify-content: space-around;
}
footer div ul {
display: block;
width: 65%;
margin: auto;
}
.titres_footer {
padding-bottom: 20px;
padding-top: 50px;
white-space: nowrap;
display: block;
}
.conditions {
font-size: 8px;
}
.section_articles article {
width: 40%;
}
.article_box {
height: 24vw;
}
.produit_hp {
width: 70%;
padding-bottom: 30px;
}
.produit_hp2 {
width: 70%;
padding-bottom: 30px;
}
}
@media (max-width: 740px) {
.choix_prod a {
border: #ff710d solid 1px;
}
.appear {
transform: translateX(0);
}
.nav_one {
display: none;
}
.nav_two {
display: flex;
}
.e404 {
padding-top: 40%;
}
.cursor {
display: none;
}
.section_1 {
padding-bottom: 15%;
}
.h1_spec {
width: 100%;
padding: 40px 0 20px 0;
}
.produit_hp {
position: relative;
margin: auto;
opacity: 0;
z-index: -22;
display: none;
}
.produit_hp2 {
position: relative;
margin: auto;
opacity: 1;
}
.m2:last-of-type {
display: none;
}
.comment_q {
width: 100%;
}
.section_explication {
display: block;
}
.section_explication div:nth-child(1) {
padding-bottom: 5%;
}
}
@media (max-width: 395px) {
}
@media (max-width: 1000px) {
.cursor {
display: none;
}
html,
a {
cursor: auto;
}
a:hover {
cursor: pointer;
}
}
@media (min-width: 1500px) {
.section_1 {
padding-bottom: 10%;
}
.menu2 {
transform: translateX(900px);
}
.desc_produit > div > p {
padding-bottom: 5%;
}
.choix_prod {
display: flex;
padding-top: 5%;
justify-content: space-between;
}
.choix_prod a {
padding: 3%;
}
.desc_produit > div:last-child {
padding-top: 5%;
}
}