@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Bigshot+One&family=Bona+Nova:ital,wght@0,400;0,700;1,400&family=Cinzel+Decorative:wght@400;700;900&family=Croissant+One&family=Goblin+One&family=Gravitas+One&display=swap");
* {
  box-sizing: border-box; }

::selection {
  background-color: #780000;
  color: #fdf0d5; }

html {
  font-size: 62.5%; }

body {
  line-height: 1.8;
  font-size: 2.2rem;
  font-family: "Bona Nova";
  background-color: #fef8ea;
  color: #003049;
  background: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)), url("https://www.toptal.com/designers/subtlepatterns/uploads/ricepaper_v3.png"); }

h1, h2, h3, h4, h5, h6 {
  font-weight: normal;
  line-height: 1.2;
  color: #780000;
  margin: 32px 0 16px; }

h4, h5, h6 {
  color: #326483; }

h1 {
  font-size: 5.6rem;
  color: #c1121f; }

h2 {
  font-size: 4.8rem;
  text-align: center; }

h3 {
  font-size: 3.6rem; }

h4 {
  font-size: 2.8rem; }

h5 {
  font-size: 2rem; }

h6 {
  font-size: 1.6rem; }

li {
  margin: 10px 0; }

a {
  text-decoration: none;
  color: #c1121f; }
  a:hover {
    color: #780000; }

img {
  max-width: 100%; }

q {
  line-height: 1.2; }

.container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 32px; }

.float-l {
  float: left; }

.float-r {
  float: right; }

.clear {
  clear: both; }

.btn {
  display: inline-block;
  padding: 16px 32px;
  margin: 16px;
  color: white;
  background: linear-gradient(-45deg, #c1121f, #780000);
  border-radius: 24px;
  font-size: 2.4rem;
  box-shadow: 2px 2px 15px rgba(0, 0, 0, 0.05); }
  .btn:hover {
    filter: brightness(1.1);
    transition: filter 300ms;
    color: white; }

.image {
  width: 40%;
  margin: 2.5%;
  aspect-ratio: 1/1;
  object-fit: cover;
  border-radius: 24px; }

.avatar {
  border-radius: 24px;
  width: 250px;
  margin-right: 32px; }

.background {
  width: 100%;
  aspect-ratio: 32/9;
  object-fit: cover; }

nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 16px;
  background-color: rgba(255, 255, 255, 0.9);
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  box-shadow: 2px 2px 50px rgba(0, 0, 0, 0.05); }
  nav a:not(.logo) {
    padding: 16px 32px;
    margin: 16px;
    color: #780000;
    font-size: 2.4rem; }
    nav a:not(.logo):hover {
      color: #c1121f; }
  nav .logo {
    margin-right: auto; }
    nav .logo img {
      height: 150px;
      vertical-align: middle;
      box-shadow: 2px 2px 15px rgba(0, 0, 0, 0.05); }

header {
  background-image: linear-gradient(130deg, rgba(120, 0, 0, 0.5), rgba(253, 240, 213, 0.9) 70%), url("https://img.freepik.com/free-photo/man-holding-wine-glass-nature_23-2148261665.jpg?t=st=1744577067~exp=1744580667~hmac=2f69a95d48b36bf5cfa8e32eb85fa131e04b9f4d0a202cad9b1d119e85ac0736&w=996");
  background-size: cover;
  background-position: top right;
  padding: calc(5% + 180px) 5% 5% 50%;
  color: #780000;
  text-wrap: balance;
  text-shadow: 1px 1px 10px rgba(0, 0, 0, 0.05);
  text-align: center; }

.about img.image:first-child {
  aspect-ratio: 9/32;
  width: 25%; }

.about img.image:last-child {
  aspect-ratio: 16/9;
  width: 75%; }

.about .presentation div {
  margin: 64px 0; }

.product section {
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: 24px;
  padding: 32px;
  margin: 32px 0;
  background-color: rgba(255, 255, 255, 0.5);
  transition: background-color 300ms, border 300ms; }
  .product section:hover {
    border-color: rgba(50, 100, 131, 0.25);
    background-color: rgba(50, 100, 131, 0.05);
    transition: background-color 300ms, border 300ms; }

.avis iframe {
  width: 50%;
  height: 480px; }

main h2 {
  background-color: white;
  padding: 64px;
  margin: 0;
  color: #c1121f;
  box-shadow: 2px 2px 50px rgba(0, 0, 0, 0.05); }
  main h2::before {
    content: "♦";
    display: block; }

footer {
  text-align: center;
  color: #003049; }

@media (max-width: 992px) {
  nav div {
    display: none; }
  header {
    padding: 256px 32px 32px; } }