/* =========================================================
   1. JETONS DE DESIGN — variables CSS
   ========================================================= */
:root{
  --noir:        #0b100d;   /* fond principal, vert-noir très sombre */
  --vert-profond:#12211a;   /* sections alternées, cartes */
  --vert-accent: #3f8c5e;   /* accent vif (boutons, liens, traits) */
  --vert-accent-hover:#4ea470;
  --or:          #c8a45c;   /* dorure discrète, filets, sur-titres */
  --or-clair:    #e0c084;
  --creme:       #f2ede3;   /* texte courant, jamais blanc pur */
  --gris:        #8f968d;   /* texte secondaire, légendes */
  --gris-fonce:  #2a3530;   /* bordures discrètes */

  --serif: "Playfair Display", "Times New Roman", serif;
  --sans:  "Inter", system-ui, -apple-system, sans-serif;

  --r: 5px;             /* léger arrondi */
  --shadow-deep: 0 30px 80px -20px rgba(0,0,0,.65), 0 10px 30px -10px rgba(0,0,0,.5);
  --easing: cubic-bezier(.22,.61,.36,1);
}

/* =========================================================
   2. RESET & TYPO DE BASE
   ========================================================= */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  font-family:var(--sans);
  font-weight:300;
  font-size:1.05rem;
  line-height:1.65;
  color:var(--creme);
  background:var(--noir);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; transition:color .35s var(--easing); }
button{ font:inherit; cursor:pointer; border:0; background:none; color:inherit; }
h1,h2,h3,h4{ font-family:var(--serif); font-weight:600; line-height:1.15; }

/* Sur-titres dorés (eyebrows) */
.eyebrow{
  font-family:var(--sans);
  font-size:.78rem;
  font-weight:500;
  letter-spacing:.34em;
  text-transform:uppercase;
  color:var(--or);
  display:inline-flex;
  align-items:center;
  gap:.9rem;
}
.eyebrow::before,
.eyebrow.bilateral::after{
  content:"";
  width:38px; height:1px;
  background:var(--or);
  opacity:.7;
}

/* Filet doré séparateur */
.rule{
  width:60px; height:1px;
  background:var(--or);
  margin:1.6rem auto;
  opacity:.7;
}

/* Conteneur */
.wrap{
  max-width:1280px;
  margin:0 auto;
  padding:0 clamp(1.25rem, 4vw, 3rem);
}

/* Titre de section */
.section-title{
  font-size:clamp(2rem, 4.4vw, 2.8rem);
  text-align:center;
}
.section-subtitle{
  text-align:center;
  color:var(--gris);
  max-width:560px;
  margin:1rem auto 0;
  font-size:1rem;
}

/* =========================================================
   3. BOUTONS
   ========================================================= */
.btn{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  padding:1rem 1.9rem;
  font-family:var(--sans);
  font-size:.82rem;
  font-weight:500;
  letter-spacing:.22em;
  text-transform:uppercase;
  border-radius:var(--r);
  transition:all .4s var(--easing);
  position:relative;
  overflow:hidden;
}
.btn--primary{
  background:var(--vert-accent);
  color:var(--creme);
  box-shadow:0 10px 30px -10px rgba(63,140,94,.55);
}
.btn--primary:hover{
  background:var(--vert-accent-hover);
  transform:translateY(-2px);
  box-shadow:0 16px 40px -10px rgba(63,140,94,.7);
}
.btn--ghost{
  background:transparent;
  color:var(--creme);
  border:1px solid rgba(242,237,227,.45);
}
.btn--ghost:hover{
  border-color:var(--or);
  color:var(--or);
}
.btn .arrow{ transition:transform .4s var(--easing); display:inline-block; }
.btn:hover .arrow{ transform:translateX(4px); }

/* =========================================================
   4. HEADER
   ========================================================= */
.header{
  position:fixed; top:0; left:0; right:0; z-index:50;
  padding:1.4rem 0;
  background:transparent;
  transition:background .45s var(--easing), padding .45s var(--easing), box-shadow .45s var(--easing);
}
.header.is-scrolled{
  background:rgba(18,33,26,.92);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  padding:.85rem 0;
  box-shadow:0 6px 30px -10px rgba(0,0,0,.6);
}
.header__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:2rem;
}
.brand{
  font-family:var(--serif);
  font-size:1.55rem;
  font-weight:600;
  color:var(--creme);
  letter-spacing:.02em;
  display:flex; align-items:baseline; gap:.55rem;
}
.brand .dot{
  width:6px; height:6px; border-radius:50%;
  background:var(--or);
  display:inline-block;
  transform:translateY(-3px);
}
.brand small{
  font-family:var(--sans);
  font-size:.6rem;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--or);
  font-weight:500;
}
.nav{ display:flex; align-items:center; gap:2.2rem; }
.nav__list{
  display:flex; gap:2rem;
  list-style:none;
}
.nav__list a{
  font-size:.82rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  font-weight:400;
  color:var(--creme);
  position:relative;
  padding:.3rem 0;
}
.nav__list a::after{
  content:"";
  position:absolute; left:0; right:0; bottom:-2px;
  height:1px;
  background:var(--or);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .45s var(--easing);
}
.nav__list a:hover{ color:var(--or); }
.nav__list a:hover::after{ transform:scaleX(1); }

/* Hamburger */
.burger{
  display:none;
  width:42px; height:42px;
  position:relative;
  z-index:60;
}
.burger span{
  position:absolute; left:9px; right:9px; height:1.5px;
  background:var(--creme);
  transition:transform .4s var(--easing), top .4s var(--easing), opacity .25s;
}
.burger span:nth-child(1){ top:14px; }
.burger span:nth-child(2){ top:20px; }
.burger span:nth-child(3){ top:26px; }
.burger.is-open span:nth-child(1){ top:20px; transform:rotate(45deg); }
.burger.is-open span:nth-child(2){ opacity:0; }
.burger.is-open span:nth-child(3){ top:20px; transform:rotate(-45deg); }

/* =========================================================
   5. HERO
   ========================================================= */
.hero{
  position:relative;
  min-height:100vh;
  display:flex;
  align-items:center;
  overflow:hidden;
  isolation:isolate;
}
.hero__bg{
  position:absolute; inset:0;
  background-image:url("https://images.unsplash.com/photo-1551183053-bf91a1d81141?auto=format&fit=crop&w=2200&q=80");
  background-size:cover;
  background-position:center;
  z-index:-2;
  transform:scale(1.05);
  animation:slowZoom 22s ease-in-out infinite alternate;
}
@keyframes slowZoom{
  from{ transform:scale(1.05); }
  to  { transform:scale(1.18); }
}
.hero__overlay{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(11,16,13,.55) 0%, rgba(11,16,13,.35) 35%, rgba(11,16,13,.85) 100%),
    linear-gradient(90deg, rgba(11,16,13,.75) 0%, rgba(11,16,13,.25) 60%, rgba(11,16,13,0) 100%);
  z-index:-1;
}
.hero__inner{
  padding:8rem 0 6rem;
  max-width:920px;
}
.hero .eyebrow{
  opacity:0;
  animation:rise .9s var(--easing) .25s forwards;
}
.hero h1{
  font-size:clamp(3.5rem, 9vw, 7rem);
  text-transform:uppercase;
  letter-spacing:.005em;
  font-weight:600;
  margin:1.5rem 0 1.2rem;
  color:var(--creme);
  text-shadow:0 4px 30px rgba(0,0,0,.55);
  opacity:0;
  animation:rise 1.1s var(--easing) .45s forwards;
}
.hero h1 em{
  font-style:italic;
  font-weight:500;
  color:var(--or-clair);
}
.hero__lede{
  font-size:1.15rem;
  color:var(--creme);
  max-width:560px;
  margin-bottom:2.5rem;
  font-style:italic;
  opacity:0;
  animation:rise 1.1s var(--easing) .65s forwards;
}
.hero__cta{
  display:flex; gap:1rem; flex-wrap:wrap;
  opacity:0;
  animation:rise 1.1s var(--easing) .85s forwards;
}
@keyframes rise{
  from{ opacity:0; transform:translateY(28px); }
  to  { opacity:1; transform:translateY(0); }
}

/* Indicateur de scroll */
.scroll-cue{
  position:absolute;
  left:50%; bottom:2.5rem;
  transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:.7rem;
  color:var(--gris);
  font-size:.7rem;
  letter-spacing:.3em;
  text-transform:uppercase;
  opacity:0;
  animation:rise 1s var(--easing) 1.2s forwards;
}
.scroll-cue .line{
  width:1px; height:48px;
  background:linear-gradient(180deg, transparent, var(--or));
  position:relative;
  overflow:hidden;
}
.scroll-cue .line::after{
  content:"";
  position:absolute; top:-100%; left:0; right:0;
  height:50%;
  background:linear-gradient(180deg, transparent, var(--creme));
  animation:scrollDot 2.2s ease-in-out infinite;
}
@keyframes scrollDot{
  0%  { top:-50%; }
  100%{ top:100%; }
}

/* =========================================================
   6. SECTION GÉNÉRIQUE — apparition
   ========================================================= */
section{ position:relative; }
.section{
  padding:clamp(5rem, 10vw, 8rem) 0;
}
.section--alt{ background:var(--vert-profond); }

.fade-up{
  opacity:0;
  transform:translateY(40px);
  transition:opacity 1s var(--easing), transform 1s var(--easing);
}
.fade-up.is-visible{
  opacity:1;
  transform:translateY(0);
}

/* =========================================================
   7. NOTRE HISTOIRE
   ========================================================= */
.story{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(2rem, 6vw, 5rem);
  align-items:center;
}
.story__media{
  position:relative;
  aspect-ratio:4/5;
  overflow:hidden;
  border-radius:var(--r);
  box-shadow:var(--shadow-deep);
}
.story__media::before{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(11,16,13,0) 50%, rgba(11,16,13,.45) 100%);
  z-index:1;
}
.story__media img{
  width:100%; height:100%;
  object-fit:cover;
  transition:transform 1.4s var(--easing);
}
.story__media:hover img{ transform:scale(1.04); }
.story__media .badge{
  position:absolute;
  top:1.5rem; left:1.5rem;
  z-index:2;
  background:var(--noir);
  border:1px solid var(--or);
  padding:.65rem 1rem;
  font-size:.7rem;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--or);
}
.story__content h2{
  font-size:clamp(2.2rem, 4.5vw, 3rem);
  margin:1rem 0 1.4rem;
}
.story__content h2 em{
  font-style:italic;
  color:var(--or);
  font-weight:500;
}
.story__content p{
  color:var(--creme);
  opacity:.85;
  margin-bottom:1.1rem;
  max-width:48ch;
}
.story__signature{
  margin-top:2rem;
  font-family:var(--serif);
  font-style:italic;
  font-size:1.4rem;
  color:var(--or);
}
.story__signature small{
  display:block;
  font-family:var(--sans);
  font-style:normal;
  font-size:.75rem;
  color:var(--gris);
  letter-spacing:.22em;
  text-transform:uppercase;
  margin-top:.4rem;
}

/* =========================================================
   8. CARTE — MENU
   ========================================================= */
.menu-head{
  text-align:center;
  margin-bottom:4rem;
}
.menu-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:4rem clamp(2rem, 6vw, 5rem);
}
.menu-cat__head{
  text-align:center;
  margin-bottom:2rem;
  padding-bottom:1.2rem;
  border-bottom:1px solid rgba(200,164,92,.25);
}
.menu-cat__head h3{
  font-family:var(--serif);
  font-size:1.7rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--or);
  font-weight:500;
}
.menu-cat__head .sub{
  display:block;
  font-family:var(--sans);
  font-size:.7rem;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--gris);
  margin-top:.4rem;
}
.menu-list{ list-style:none; display:flex; flex-direction:column; gap:1.6rem; }
.menu-item{
  display:grid;
  grid-template-columns:1fr auto;
  align-items:baseline;
  gap:.5rem;
}
.menu-item__name{
  font-family:var(--serif);
  font-size:1.2rem;
  font-weight:500;
  color:var(--creme);
}
.menu-item__name em{
  display:block;
  font-size:.78rem;
  font-style:italic;
  letter-spacing:.04em;
  color:var(--or);
  margin-top:.1rem;
  font-family:var(--serif);
}
.menu-item__desc{
  grid-column:1 / -1;
  color:var(--gris);
  font-size:.92rem;
  max-width:48ch;
  margin-top:.1rem;
}
.menu-item__price{
  font-family:var(--serif);
  font-size:1.15rem;
  color:var(--or);
  font-weight:500;
  position:relative;
  padding-left:1rem;
}
.menu-item__dots{
  flex:1;
  border-bottom:1px dotted rgba(200,164,92,.4);
  margin:0 .6rem .35rem;
  align-self:end;
}
/* Recomposition pour les pointillés */
.menu-item{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-end;
  gap:.1rem .4rem;
}
.menu-item__name{ flex:0 1 auto; }
.menu-item__dots{
  flex:1 1 auto;
  min-width:30px;
  border-bottom:1px dotted rgba(200,164,92,.4);
  align-self:flex-end;
  margin-bottom:.45rem;
}
.menu-item__price{ flex:0 0 auto; padding-left:0; }

/* =========================================================
   9. GALERIE
   ========================================================= */
.gallery{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  grid-auto-rows:240px;
  gap:1rem;
}
.gallery__item{
  position:relative;
  overflow:hidden;
  border-radius:var(--r);
  cursor:pointer;
}
.gallery__item.tall{ grid-row:span 2; }
.gallery__item img{
  width:100%; height:100%;
  object-fit:cover;
  transition:transform 1.2s var(--easing), filter 1.2s var(--easing);
  filter:brightness(.85) saturate(.95);
}
.gallery__item::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(11,16,13,0) 40%, rgba(11,16,13,.7) 100%);
  opacity:.85;
  transition:opacity .6s var(--easing);
  pointer-events:none;
}
.gallery__item:hover img{
  transform:scale(1.08);
  filter:brightness(1) saturate(1);
}
.gallery__item:hover::after{ opacity:.4; }
.gallery__item .caption{
  position:absolute;
  left:1.25rem; bottom:1rem;
  z-index:2;
  font-family:var(--serif);
  font-style:italic;
  font-size:1rem;
  color:var(--creme);
  text-shadow:0 2px 12px rgba(0,0,0,.6);
  transform:translateY(8px);
  opacity:0;
  transition:transform .6s var(--easing), opacity .6s var(--easing);
}
.gallery__item:hover .caption{
  transform:translateY(0);
  opacity:1;
}

/* =========================================================
  10. AVIS
   ========================================================= */
.reviews{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:2rem;
}
.review{
  padding:2.5rem 2rem;
  background:rgba(255,255,255,.02);
  border:1px solid rgba(200,164,92,.18);
  border-radius:var(--r);
  position:relative;
  transition:transform .5s var(--easing), border-color .5s var(--easing);
}
.review:hover{
  transform:translateY(-4px);
  border-color:rgba(200,164,92,.4);
}
.review .stars{
  color:var(--or);
  letter-spacing:.2em;
  margin-bottom:1.2rem;
  font-size:.95rem;
}
.review blockquote{
  font-family:var(--serif);
  font-style:italic;
  font-size:1.1rem;
  line-height:1.55;
  color:var(--creme);
  margin-bottom:1.6rem;
  position:relative;
}
.review blockquote::before{
  content:"“";
  position:absolute;
  top:-2.5rem; left:-.6rem;
  font-size:5rem;
  color:var(--or);
  opacity:.25;
  font-family:var(--serif);
  line-height:1;
}
.review__author{
  font-family:var(--sans);
  font-size:.82rem;
  font-weight:500;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--creme);
}
.review__author small{
  display:block;
  color:var(--gris);
  letter-spacing:.16em;
  margin-top:.2rem;
  font-size:.7rem;
}

/* =========================================================
  11. RÉSERVATION
   ========================================================= */
.reservation{
  display:grid;
  grid-template-columns:1fr 1.2fr;
  gap:clamp(2rem, 6vw, 5rem);
  align-items:center;
}
.reservation__intro h2{
  font-size:clamp(2.2rem, 4.5vw, 3rem);
  margin:1rem 0 1.4rem;
}
.reservation__intro p{
  color:var(--gris);
  max-width:42ch;
  margin-bottom:1.2rem;
}
.reservation__intro .info{
  margin-top:2.5rem;
  border-top:1px solid rgba(200,164,92,.25);
  padding-top:1.5rem;
  font-size:.92rem;
  display:grid;
  gap:.6rem;
}
.reservation__intro .info strong{
  color:var(--or);
  font-weight:500;
  letter-spacing:.18em;
  text-transform:uppercase;
  font-size:.7rem;
  display:block;
  margin-bottom:.15rem;
}

.form{
  background:rgba(11,16,13,.55);
  border:1px solid rgba(200,164,92,.2);
  padding:clamp(1.8rem, 3vw, 2.6rem);
  border-radius:var(--r);
  display:grid;
  gap:1.2rem;
}
.form-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1.2rem;
}
.field{ position:relative; }
.field label{
  display:block;
  font-size:.7rem;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--or);
  font-weight:500;
  margin-bottom:.55rem;
}
.field input,
.field select,
.field textarea{
  width:100%;
  background:transparent;
  border:0;
  border-bottom:1px solid rgba(242,237,227,.22);
  padding:.6rem 0 .7rem;
  color:var(--creme);
  font-family:var(--sans);
  font-size:.95rem;
  font-weight:300;
  transition:border-color .35s var(--easing);
  border-radius:0;
}
.field input:focus,
.field select:focus,
.field textarea:focus{
  outline:none;
  border-bottom-color:var(--or);
}
.field select{
  appearance:none;
  -webkit-appearance:none;
  background-image:linear-gradient(45deg, transparent 50%, var(--or) 50%),
                   linear-gradient(135deg, var(--or) 50%, transparent 50%);
  background-position:calc(100% - 14px) center, calc(100% - 8px) center;
  background-size:6px 6px;
  background-repeat:no-repeat;
}
.field select option{ background:var(--vert-profond); color:var(--creme); }
.field textarea{ resize:vertical; min-height:80px; }
.field input::placeholder,
.field textarea::placeholder{ color:rgba(242,237,227,.35); }
.form .btn{ justify-self:start; margin-top:.8rem; }
.form__success{
  display:none;
  align-items:center; gap:.8rem;
  padding:1rem 1.2rem;
  margin-top:.5rem;
  background:rgba(63,140,94,.15);
  border:1px solid var(--vert-accent);
  color:var(--creme);
  font-size:.92rem;
}
.form__success.is-visible{ display:flex; animation:rise .6s var(--easing); }
.form__success .dot{
  width:8px; height:8px; border-radius:50%;
  background:var(--vert-accent);
  box-shadow:0 0 12px var(--vert-accent);
}
.form__error{
  display:none;
  align-items:center; gap:.8rem;
  padding:1rem 1.2rem;
  margin-top:.5rem;
  background:rgba(180,60,60,.15);
  border:1px solid #b43c3c;
  color:var(--creme);
  font-size:.92rem;
}
.form__error.is-visible{ display:flex; }

/* Carte "acompte" — option payante de garantie de réservation */
.acompte-card{
  margin-top:2rem;
  border:1px solid rgba(200,164,92,.3);
  border-radius:var(--r);
  padding:1.5rem 1.6rem;
  background:rgba(200,164,92,.05);
  display:grid;
  gap:.7rem;
}
.acompte-card strong{
  color:var(--or);
  font-weight:500;
  letter-spacing:.18em;
  text-transform:uppercase;
  font-size:.72rem;
}
.acompte-card p{ color:var(--creme); opacity:.85; font-size:.92rem; max-width:42ch; margin:0; }
.acompte-card .btn{ justify-self:start; }
.acompte-card__test{
  font-size:.72rem;
  color:var(--gris);
  letter-spacing:.04em;
}

/* =========================================================
  12. FOOTER
   ========================================================= */
.footer{
  background:#070b08;
  padding:5rem 0 2rem;
  color:var(--gris);
}
.footer__cols{
  display:grid;
  grid-template-columns:1.2fr 1fr 1fr;
  gap:3rem;
  padding-bottom:3rem;
  border-bottom:1px solid rgba(200,164,92,.18);
}
.footer h4{
  font-family:var(--sans);
  font-size:.72rem;
  font-weight:500;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--or);
  margin-bottom:1.3rem;
}
.footer__brand .brand{ margin-bottom:1.2rem; }
.footer__brand p{
  font-family:var(--serif);
  font-style:italic;
  font-size:1.05rem;
  color:var(--creme);
  max-width:34ch;
  line-height:1.6;
}
.footer ul{ list-style:none; display:grid; gap:.5rem; font-size:.95rem; }
.footer ul a:hover{ color:var(--or); }
.socials{ display:flex; gap:.8rem; margin-top:1.2rem; }
.socials a{
  width:40px; height:40px;
  display:grid; place-items:center;
  border:1px solid rgba(200,164,92,.35);
  border-radius:50%;
  transition:all .4s var(--easing);
}
.socials a:hover{
  border-color:var(--or);
  background:var(--or);
  color:var(--noir);
}
.socials svg{ width:16px; height:16px; }
.footer__bottom{
  padding-top:2rem;
  display:flex;
  justify-content:space-between;
  gap:1rem;
  font-size:.78rem;
  letter-spacing:.12em;
  color:var(--gris);
  text-transform:uppercase;
}

/* =========================================================
  13. RESPONSIVE
   ========================================================= */
@media (max-width: 1024px){
  .menu-grid{ gap:3rem 2.5rem; }
  .gallery{ grid-template-columns:repeat(2, 1fr); grid-auto-rows:220px; }
  .gallery__item.tall{ grid-row:span 1; }
  .reservation{ grid-template-columns:1fr; }
  .reviews{ grid-template-columns:1fr; max-width:600px; margin:0 auto; }
}
@media (max-width: 768px){
  .nav__list{
    position:fixed;
    inset:0;
    background:var(--noir);
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:2.4rem;
    transform:translateX(100%);
    transition:transform .55s var(--easing);
    padding:5rem 2rem;
  }
  .nav__list.is-open{ transform:translateX(0); }
  .nav__list a{ font-size:1.1rem; }
  .nav .btn{
    position:fixed;
    bottom:-100px;
    left:50%;
    transform:translateX(-50%);
    transition:bottom .55s var(--easing) .2s;
  }
  .nav__list.is-open ~ .btn,
  .nav.is-open .btn{ bottom:3rem; }
  .burger{ display:block; }

  .story{ grid-template-columns:1fr; }
  .menu-grid{ grid-template-columns:1fr; }
  .gallery{ grid-template-columns:1fr; grid-auto-rows:280px; }
  .form-row{ grid-template-columns:1fr; }
  .footer__cols{ grid-template-columns:1fr; gap:2.2rem; }
  .footer__bottom{ flex-direction:column; align-items:center; text-align:center; }
  .hero h1{ font-size:clamp(2.6rem, 12vw, 4.5rem); }
  .hero__overlay{
    background:linear-gradient(180deg, rgba(11,16,13,.6) 0%, rgba(11,16,13,.45) 35%, rgba(11,16,13,.9) 100%);
  }
}